:root {
  color-scheme: light;
  --paper: oklch(98% .008 225);
  --blue: oklch(39% .12 249);
  --green: oklch(57% .17 137);
  --ease: cubic-bezier(.16, 1, .3, 1);
  font-family: "Avenir Next", "Trebuchet MS", Arial, sans-serif;
  color: var(--blue);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
html { scroll-behavior: smooth; }
html.intro-pending, html.intro-pending body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.intro-pending .party-details, .intro-pending .rsvp-section { display: none; }
.intro-pending .journey { height: 100dvh; }
.journey { position: relative; }
.journey.scroll-ready { height: 220dvh; }
.journey .scene { position: sticky; top: 0; height: 100dvh; min-height: 100dvh; overflow: hidden; }
.invitation-backdrop { position: absolute; inset: 0; z-index: 2; background: var(--paper) url('assets/sims-world.svg') center / cover no-repeat; opacity: 0; pointer-events: none; }
.greeting { position: relative; z-index: 3; }
.invitation { position: absolute; z-index: 3; top: 240px; left: 50%; width: min(100%, 1050px); padding: 0 28px; transform: translateX(-50%); color: var(--blue); text-align: left; opacity: 0; visibility: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); grid-template-areas: "copy portrait"; gap: clamp(24px, 4vw, 60px); align-items: center; }
.invitation-copy { grid-area: copy; }
.invitation-portrait { grid-area: portrait; margin: 0; }
.invitation-portrait img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 255px); object-fit: contain; transform: scaleX(-1); }
.invitation h2 { margin: 0 0 24px; font-size: clamp(26px, 4vw, 34px); line-height: 1.1; letter-spacing: -.035em; }
.invitation p { margin: 0 0 22px; font-size: clamp(18px, 2vw, 24px); line-height: 1.5; text-wrap: pretty; }
.invitation strong { color: var(--green); font-weight: 750; }
.invitation .signature { margin-top: 32px; font-size: 17px; font-weight: 600; }
.invitation-fallback { position: relative; left: auto; top: auto; margin: 0 auto; padding: 64px 28px; transform: none; opacity: 1; visibility: visible; background: var(--paper); }
.signature span { display: inline-block; margin-left: 4px; color: var(--green); font-size: 24px; vertical-align: middle; }
.actions { display: flex; align-items: center; justify-content: center; gap: 14px; z-index: 4; }
.scroll-cue { display: inline-flex; gap: 9px; align-items: center; padding: 12px 8px; color: var(--blue); font-size: 14px; font-weight: 600; text-decoration: none; }
.scroll-cue span { font-size: 20px; }
.scroll-cue:focus-visible { outline: 3px solid oklch(63% .15 230); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
/* Faceted loading-screen world, with a quiet centre for the invitation. */
.world { position:fixed; inset:0; overflow:hidden; pointer-events:none; background:var(--paper) url('assets/sims-world.svg') center / cover no-repeat; }
.floating-crystal { position:absolute; display:block; background:url('assets/plumbob.svg') center / contain no-repeat; filter:drop-shadow(0 20px 12px oklch(49% .11 139 / .15)); animation:crystal-drift 10s ease-in-out infinite; }
.crystal-a { width:100px; height:165px; left:12%; top:23%; rotate:-14deg; }
.crystal-b { width:65px; height:110px; right:13%; bottom:16%; rotate:15deg; animation-delay:-4s; }
.crystal-c { width:35px; height:60px; right:30%; top:12%; rotate:9deg; animation-delay:-7s; opacity:.7; }
.orbit { position:absolute; width:210px; height:210px; border:1px solid oklch(75% .085 223 / .4); border-radius:50%; }
.orbit::after { content:""; position:absolute; top:20px; left:30px; width:12px; height:12px; border-radius:50%; background:oklch(76% .15 136); }
.orbit-a { left:8%; top:21%; transform:rotate(-22deg) scaleY(.45); }
.orbit-b { right:7%; bottom:9%; transform:rotate(20deg) scaleY(.45); }
@keyframes crystal-drift { 50% { transform:translateY(-18px) rotate(5deg); } }
.scene { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 20px 24px; }
.portrait { position: relative; width: min(300px, 66vw); aspect-ratio: 4 / 5; flex: none; border-radius: 26px; background: oklch(95% .025 221); box-shadow: 0 24px 65px -25px oklch(45% .09 237 / .35); }
.portrait-border { position: absolute; inset: -7px; border: 1px solid oklch(83% .065 220 / .65); border-radius: 32px; pointer-events: none; }
.portrait img, .portrait video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; text-align: center; }
.loading svg { width: 34px; height: 52px; animation: breathe 1.7s ease-in-out infinite; }
.loading p { margin: 0; font-size: 15px; }
.greeting { margin-top: 32px; text-align: center; }
h1 { margin: 0; font-weight: 800; letter-spacing: -.045em; line-height: .98; }
.title-intro, .title-name { display: block; opacity: 0; transform: translateY(22px) scale(.97); transition: opacity .7s var(--ease), transform 1s var(--ease); }
.title-intro { font-size: clamp(25px, 5vw, 43px); letter-spacing: -.035em; }
.title-name { position: relative; width: fit-content; margin: 5px auto 0; color: var(--green); font-size: clamp(66px, 11vw, 100px); transition-delay: .12s; }
.title-spark { position: absolute; right: -34px; top: 9px; font-size: 24px; color: oklch(71% .18 133); transform: rotate(12deg); }
.revealed .title-intro, .revealed .title-name { opacity: 1; transform: translateY(0) scale(1); }
.actions { height: 44px; margin-top: 22px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 20px; border: 1px solid oklch(85% .028 227); border-radius: 30px; color: var(--blue); background: oklch(99% .004 222); font: 600 14px/1.2 "Avenir Next", "Trebuchet MS", Arial, sans-serif; cursor: pointer; transition: background .2s, transform .2s; }
.button svg { width: 18px; height: 18px; }
.button:hover { background: oklch(94% .035 218); transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button:focus-visible { outline: 3px solid oklch(63% .15 230); outline-offset: 4px; }
.no-script { font-size: 28px; font-weight: 700; }
.party-details { position: relative; z-index: 5; min-height: 100svh; padding: clamp(64px, 9vw, 120px) 28px; background: oklch(94% .035 223); }
.party-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(40px, 6vw, 90px); max-width: 1100px; margin: 0 auto; }
.party-copy h2 { margin: 0 0 28px; font-size: clamp(38px, 5vw, 60px); line-height: 1.02; letter-spacing: -.045em; }
.party-date { margin: 0 0 30px; font-size: clamp(23px, 3vw, 30px); font-weight: 750; color: var(--green); }
.party-date span { margin: 0 8px; }
.party-venue { margin: 0 0 10px; font-size: 25px; font-weight: 750; }
.party-venue a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.party-venue a span { font-size: 18px; }
.party-address { max-width: 30ch; margin: 0; font-size: 18px; line-height: 1.45; }
.calendar-add { margin-top:22px; text-decoration:none; }
.dress-code { margin-top: 40px; }
.dress-code h3 { margin: 0 0 14px; font-size: 24px; letter-spacing: -.025em; }
.dress-code p { margin: 0 0 12px; font-size: 18px; line-height: 1.5; max-width: 36ch; }
.dress-code strong { font-weight: 750; }
.party-map { position: relative; min-height: 440px; overflow: hidden; border: 1px solid oklch(82% .06 222); border-radius: 24px; background: oklch(89% .045 223); }
.map-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-credit { position: absolute; right: 6px; bottom: 4px; padding: 2px 4px; border-radius: 3px; background: var(--paper); color: oklch(42% .06 230); font-size: 10px; text-decoration: none; }
.map-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: var(--blue); }
.map-pin svg { display: block; width: 38px; height: 57px; filter: drop-shadow(0 4px 4px oklch(30% .06 230 / .25)); transition: transform .25s var(--ease); }
.map-pin:hover svg { transform: translateY(-5px); }
.map-pin-label { padding: 11px 16px; border: 1px solid oklch(82% .045 220); border-radius: 14px; background: var(--paper); white-space: nowrap; font-size: 15px; font-weight: 750; box-shadow: 0 8px 24px oklch(35% .055 225 / .12); }
.map-open { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; width: max-content; max-width: calc(100% - 28px); padding: 12px 18px; border-radius: 24px; background: var(--paper); color: var(--blue); font-size: 14px; font-weight: 650; text-decoration: none; text-align: center; }
.party-details a:focus-visible { outline: 3px solid oklch(57% .15 230); outline-offset: 5px; }
@media (max-width: 800px) {
  .party-inner { grid-template-columns: 1fr; gap: 34px; max-width: 520px; }
  .party-details { padding: 64px 24px max(48px, env(safe-area-inset-bottom)); }
  .party-copy h2 { font-size: 43px; }
  .party-map { min-height: 330px; }
  .dress-code { margin-top: 30px; }
}
@keyframes breathe { 50% { transform: translateY(-7px); } }
@media (max-width: 600px) {
  body { background: oklch(72% .1 222); }
  .world { display: none; }
  .scene { height: 100dvh; min-height: 100dvh; padding: 0; overflow: hidden; }
  .portrait { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .portrait-border { display: none; }
  .portrait img, .portrait video { object-position: center top; }
  .scene::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, oklch(25% .06 245 / .9), oklch(25% .06 245 / .45) 28%, transparent 58%); opacity: 0; transition: opacity .8s var(--ease); }
  .scene.revealed::after { opacity: 1; }
  .greeting { position: absolute; z-index: 3; bottom: calc(105px + env(safe-area-inset-bottom)); width: 100%; padding: 0 24px; margin: 0; color: oklch(99% .005 220); }
  .title-intro { font-size: clamp(25px, 7.3vw, 38px); }
  .title-name { font-size: clamp(66px, 20vw, 88px); color: oklch(85% .21 132); }
  .title-spark { color: oklch(85% .21 132); }
  .actions { position: absolute; z-index: 4; bottom: calc(26px + env(safe-area-inset-bottom)); margin: 0; }
  .scroll-cue { color: oklch(99% .005 220); }
  .invitation h2 { margin-bottom: 20px; }
  .invitation p { font-size: clamp(17px, 4.8vw, 21px); margin-bottom: 18px; line-height: 1.45; }
  .invitation .signature { margin-top: 26px; }
  .invitation { display: flow-root; padding: 0 24px; }
  .invitation-portrait { float: right; width: 43%; margin: 0 -10px 12px 14px; }
  .invitation-portrait img { max-height: none; }
}
@media (min-width: 601px) and (max-height: 700px) {
  .portrait { width: min(240px, 55vw, 36svh); }
  .greeting { margin-top: 24px; }
  .title-intro { font-size: 28px; }
  .title-name { font-size: 70px; }
  .actions { margin-top: 18px; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .title-intro { font-size: 25px; }
  .title-name { font-size: 64px; }
  .invitation h2 { font-size: 24px; margin-bottom: 14px; }
  .invitation p { font-size: 16px; line-height: 1.38; margin-bottom: 14px; }
  .invitation .signature { font-size: 15px; margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .title-intro, .title-name { transform: none; }
  .button:hover { transform: none; }
}

.rsvp-section { position:relative; z-index:5; padding:100px 28px 120px; background:var(--paper); }
.rsvp-inner { display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(40px,7vw,100px); align-items:center; max-width:1100px; margin:auto; }
.rsvp-crystal { display:inline-block; font-size:64px; line-height:1; color:#79c72c; transform:scaleX(.65); margin-left:-10px; text-shadow:4px 5px 0 #def1c8; }
.rsvp-eyebrow { margin:26px 0 14px; color:var(--green); font-size:15px; font-weight:750; }
.rsvp-intro h2 { margin:0 0 26px; font-size:clamp(36px,4.7vw,54px); line-height:1.05; letter-spacing:-.045em; }
.rsvp-intro p:not(.rsvp-eyebrow) { max-width:34ch; font-size:18px; line-height:1.6; }
.rsvp-intro .rsvp-signature { margin-top:30px; color:var(--green); font-weight:650; }
.rsvp-form, .rsvp-success { padding:clamp(24px,4vw,40px); border:1px solid #cfdee5; border-radius:28px; background:white; box-shadow:0 18px 48px -28px #1747744d; }
.rsvp-form-top { display:flex; align-items:center; gap:10px; margin-bottom:28px; font-size:24px; font-weight:750; letter-spacing:-.025em; }
.rsvp-form-top span { color:var(--green); }
.field-label, .rsvp-form legend { display:block; margin-bottom:10px; font-weight:650; font-size:15px; }
.field-label small { font-size:11px; font-weight:500; color:#526e7b; display:inline-block; margin-left:5px; }
.rsvp-form input[type=text], .rsvp-form textarea { display:block; width:100%; border:1px solid #b6ccd8; border-radius:12px; background:#f8fbfd; color:var(--blue); padding:14px 16px; font:inherit; font-size:16px; line-height:1.45; margin-bottom:24px; }
.rsvp-form textarea { resize:vertical; min-height:82px; }
.rsvp-form input::placeholder, .rsvp-form textarea::placeholder { color:#607d8d; opacity:1; }
.rsvp-form fieldset { border:0; padding:0; margin:0 0 26px; min-width:0; }
.attendance-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.attendance-options label { position:relative; cursor:pointer; }
.attendance-options input { position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.attendance-options span { display:flex; align-items:center; justify-content:center; gap:9px; min-height:56px; padding:10px; border:1px solid #b6ccd8; border-radius:12px; background:#f8fbfd; font-size:16px; font-weight:650; transition:background .2s,border-color .2s; }
.attendance-options b { font-size:22px; font-weight:500; }
.attendance-options input:checked + span { background:#edf8e3; border:2px solid #589d2c; color:#356f1d; padding:9px; }
.attendance-options label:hover span { border-color:#589d2c; }
.rsvp-form input:focus-visible, .rsvp-form textarea:focus-visible, .attendance-options input:focus-visible + span, .rsvp-submit:focus-visible { outline:3px solid #72b4df; outline-offset:3px; }
.rsvp-submit { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:56px; border:1px solid #407d20; border-radius:14px; padding:14px 20px; color:white; background:#4a8d26; font:750 16px/1.3 "Avenir Next","Trebuchet MS",Arial,sans-serif; cursor:pointer; box-shadow:0 4px 0 #306116; transition:background .2s,transform .2s; }
.rsvp-submit:hover { background:#39771d; transform:translateY(-1px); }
.rsvp-submit:active { transform:translateY(2px); box-shadow:0 2px 0 #306116; }
.rsvp-submit:disabled { opacity:.65; cursor:wait; transform:none; }
.rsvp-status { color:#9c3528; font-size:14px; line-height:1.45; margin:18px 0 0; }
.rsvp-status:empty { display:none; }
.rsvp-success { text-align:center; padding:60px 32px; animation:answer-in .5s var(--ease); }
.success-crystal { display:block; font-size:58px; color:var(--green); transform:scaleX(.65); }
.rsvp-success h3 { margin:22px 0 14px; font-size:30px; letter-spacing:-.035em; }
.rsvp-success p { font-size:18px; line-height:1.6; overflow-wrap:anywhere; }
.rsvp-success-signature { color:var(--green); }
@keyframes answer-in { from { opacity:0; transform:translateY(14px); } }
@media (max-width:800px) {
 .rsvp-section { padding:64px 24px 80px; }
 .rsvp-inner { grid-template-columns:1fr; gap:28px; max-width:520px; }
 .rsvp-intro h2 { font-size:40px; }
 .rsvp-crystal { font-size:48px; }
 .rsvp-intro .rsvp-signature { display:none; }
 .rsvp-eyebrow { margin-top:18px; }
}
@media (max-width:360px) {
 .rsvp-section { padding-left:16px; padding-right:16px; }
 .rsvp-form { padding:20px; }
 .attendance-options { gap:8px; }
 .attendance-options span { font-size:14px; }
 .field-label small { display:block; margin:5px 0 0; }
}

/* Each chapter feels like another screen in the same Sims world. */
.party-details, .rsvp-section { isolation:isolate; overflow:clip; }
.party-details { background:oklch(94% .045 220); }
.party-details::before, .rsvp-section::before { content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background:url('assets/sims-world.svg') center / cover no-repeat; }
.party-details::before { transform:scaleX(-1); opacity:.72; }
.party-details::after, .rsvp-section::after { content:""; position:absolute; z-index:-1; pointer-events:none; width:100px; height:165px; background:url('assets/plumbob.svg') center / contain no-repeat; filter:drop-shadow(0 20px 14px oklch(48% .12 135 / .12)); rotate:16deg; animation:crystal-drift 12s ease-in-out infinite; }
.party-details::after { right:-18px; top:45%; }
.rsvp-section::after { left:-25px; top:15%; rotate:-20deg; }
.rsvp-section::before { opacity:.85; }
.party-inner, .rsvp-inner { position:relative; z-index:1; }
.portrait-border { border:2px solid oklch(99% .009 220); box-shadow:0 0 0 1px oklch(72% .1 225 / .35),0 18px 48px oklch(55% .09 223 / .13); }
@media (max-width:800px) {
 .world .crystal-a { left:4%; width:64px; height:106px; }
 .world .crystal-b { right:3%; width:45px; height:75px; }
 .party-details::before, .rsvp-section::before { background-size:auto 100%; opacity:.48; }
 .party-details::after, .rsvp-section::after { width:58px; height:96px; opacity:.6; }
}
@media (max-width:600px) {
 .invitation-backdrop { background-size:auto 100%; background-position:center; }
 .invitation-backdrop::after { content:""; position:absolute; inset:0; background:oklch(98% .008 225 / .3); }
}
@media (prefers-reduced-motion:reduce) { .floating-crystal, .party-details::after, .rsvp-section::after { animation:none; } }

/* The loading plumbob dissolves into the first frames of the celebration. */
.portrait #celebration { opacity:0; transform:scale(1.025); transition:opacity .95s var(--ease),transform 1.2s var(--ease); }
.portrait #celebration.is-visible { opacity:1; transform:scale(1); }
.portrait-border { z-index:3; }
.loading { z-index:2; border-radius:inherit; background:oklch(95% .025 221); opacity:1; transition:opacity .85s cubic-bezier(.4,0,.2,1); }
.loading svg { transition:opacity .55s var(--ease),transform .8s var(--ease); }
.loading p { transition:opacity .4s var(--ease),transform .6s var(--ease); }
.loading.is-leaving { opacity:0; pointer-events:none; }
.loading.is-leaving svg { animation:none; opacity:0; transform:translateY(-14px) scale(.75); }
.loading.is-leaving p { opacity:0; transform:translateY(-8px); }
@media (prefers-reduced-motion:reduce) {
 .portrait #celebration { transform:none; }
 .loading.is-leaving svg, .loading.is-leaving p { transform:none; }
}

/* Invitation gets its own build-mode composition, rather than the intro wallpaper. */
.invitation-backdrop { background-image:url('assets/invitation-world.svg'); background-size:100% 100%; }
.invitation-backdrop::before { content:""; position:absolute; right:3%; top:14%; width:65px; height:110px; background:url('assets/plumbob.svg') center / contain no-repeat; rotate:17deg; animation:crystal-drift 11s ease-in-out infinite; filter:drop-shadow(0 12px 10px oklch(45% .1 139 / .12)); }
/* Venue artwork contains no interior stars that could sit underneath its heading. */
.party-details::before { background-image:url('assets/sims-world-quiet.svg'); }
@media (max-width:600px) {
 .invitation-backdrop { background-size:100% 100%; }
 .invitation-backdrop::before { width:40px; height:68px; right:-15px; top:18%; }
 .invitation-backdrop::after { background:oklch(98% .008 225 / .18); }
}
@media (prefers-reduced-motion:reduce) { .invitation-backdrop::before { animation:none; } }
/* Keep the photo frame below the invitation backdrop during the scroll transition. */
.portrait { isolation:isolate; }
/* A clear invitation with a dedicated Sims character stage on the right. */
.invitation-backdrop::before { width:42px; height:70px; right:7%; top:21%; }
@media (max-width:600px) {
 .invitation-backdrop { background-image:url('assets/invitation-world-mobile.svg'); }
 .invitation-backdrop::before, .invitation-backdrop::after { display:none; }
}

/* Lizka fills the character stage; the hem continues beyond the viewport. */
@media (min-width:601px) {
 .invitation { display:block; }
 .invitation-copy { width:56%; }
 .invitation-portrait { position:absolute; top:-72px; right:clamp(-150px,-9vw,-64px); width:clamp(470px,72dvh,760px); }
 .invitation-portrait img { width:100%; height:auto; max-height:none; }
 .invitation-fallback .invitation-portrait { position:relative; top:auto; right:auto; float:right; width:40%; }
}
@media (min-width:601px) and (max-width:900px) {
 .invitation-copy { width:55%; }
 .invitation-portrait { width:clamp(390px,62dvh,560px); right:-125px; top:-35px; }
}
@media (max-width:600px) {
 .invitation-portrait { width:51%; margin-right:-24px; margin-left:12px; }
}
/* Crop the oversized dress without creating an internally scrollable scene. */
.journey .scene { overflow:clip; }

/* Audit fixes: readable content on short screens and under enlarged text. */
:root {
 --surface:oklch(99% .005 225);
 --field:oklch(98% .01 225);
 --muted:oklch(45% .045 230);
 --line:oklch(78% .045 225);
 --accent-soft:oklch(96% .035 135);
 --action:oklch(48% .14 137);
 --action-hover:oklch(42% .13 137);
 --focus:oklch(54% .14 239);
 --error:oklch(44% .14 30);
 --green:oklch(48% .15 137);
}
.invitation-portrait picture { display:block; }
.invitation-copy { overflow-wrap:anywhere; }
@media (max-width:600px) {
 .invitation-portrait { width:43%; margin-left:12px; }
 .invitation h2 { font-size:clamp(24px,6.5vw,30px); }
 .party-copy h2, .rsvp-intro h2 { font-size:clamp(32px,9vw,43px); }
}
.journey.readable-layout { height:auto; }
.journey.readable-layout .scene { position:relative; }
.invitation-fallback { position:relative; top:auto; left:auto; width:min(100%,1050px); display:flow-root; padding:56px 24px; margin:auto; transform:none; opacity:1; visibility:visible; background:var(--paper) url('assets/invitation-world.svg') center / cover; }
.invitation-fallback .invitation-copy { width:100%; }
.invitation-fallback .invitation-portrait { position:relative; float:right; top:auto; right:auto; width:40%; margin:0 0 18px 20px; }
.invitation-fallback .invitation-portrait img { max-height:none; }
.intro-pending .invitation-fallback { display:none; }
@media (max-width:600px) { .invitation-fallback { background-image:url('assets/invitation-world-mobile.svg'); } }
.load-failed .greeting, .load-failed .scroll-cue { color:var(--blue); }
.load-failed::after { opacity:0; }
.load-failed .title-name, .load-failed .title-spark { color:var(--green); }
.rsvp-section::before { background-image:url('assets/sims-world-quiet.svg'); }
.rsvp-form, .rsvp-success { background:var(--surface); border-color:var(--line); }
.rsvp-form input[type=text], .rsvp-form textarea, .attendance-options span { background:var(--field); border-color:var(--line); }
.field-label small, .rsvp-form legend small { color:var(--muted); font-size:12px; font-weight:500; }
.rsvp-form input::placeholder, .rsvp-form textarea::placeholder { color:var(--muted); }
.attendance-options input:checked + span { background:var(--accent-soft); border-color:var(--green); color:var(--green); }
.rsvp-submit { background:var(--action); color:var(--surface); }
.rsvp-submit:hover { background:var(--action-hover); }
.rsvp-status { color:var(--error); }
.scroll-cue { min-height:44px; }
.party-venue a { display:inline-flex; align-items:center; min-height:44px; gap:8px; }
.rsvp-form input:focus-visible, .rsvp-form textarea:focus-visible, .attendance-options input:focus-visible + span, .rsvp-submit:focus-visible { outline-color:var(--focus); }
.rsvp-form input:disabled, .rsvp-form textarea:disabled { opacity:.75; cursor:wait; }
.music-toggle { position:fixed; z-index:20; top:calc(12px + env(safe-area-inset-top)); right:calc(12px + env(safe-area-inset-right)); gap:8px; padding:10px 14px; box-shadow:0 3px 16px oklch(30% .04 230 / .12); }
.music-toggle > span:first-child { color:var(--green); font-size:22px; line-height:1; }
.music-toggle[aria-pressed=true] { border-color:var(--green); }
@media (max-width:600px) { .music-toggle { font-size:12px; padding:10px 12px; } }

/* Phone polish: keep the controls light and let the invitation breathe. */
@media (max-width:600px), (max-width:950px) and (max-height:500px) {
 .music-toggle { width:44px; height:44px; min-height:44px; padding:0; justify-content:center; }
 #music-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .music-toggle[aria-pressed=false] > span:first-child { text-decoration:line-through; }
 body:has(.rsvp-form :focus) .music-toggle { visibility:hidden; }
 .invitation h2 { width:100%; }
 .invitation-portrait, .invitation-fallback .invitation-portrait { width:36%; margin:2px -8px 14px 16px; }
 .invitation p, .invitation-fallback p { font-size:17px; line-height:1.5; }
 .invitation .signature { clear:both; font-size:16px; line-height:1.5; }
 .invitation-fallback { padding:40px 24px; }
 .invitation, .party-details, .rsvp-section { scroll-margin-top:68px; }
 .party-details::after, .rsvp-section::after { display:none; }
 .rsvp-form, .rsvp-success { min-width:0; }
 .rsvp-status { overflow-wrap:anywhere; }
 .rsvp-form input, .rsvp-form textarea { scroll-margin-top:76px; scroll-margin-bottom:28px; }
}
@media (max-width:360px) {
 .invitation, .invitation-fallback, .party-details { padding-left:20px; padding-right:20px; }
 .invitation-portrait, .invitation-fallback .invitation-portrait { width:34%; margin-left:12px; }
 .invitation h2 { font-size:25px; }
 .attendance-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .attendance-options span { gap:6px; padding:10px 8px; }
 .attendance-options input:checked + span { padding:9px 7px; }
 .attendance-options b { font-size:20px; }
 .field-label small, .rsvp-form legend small { display:block; margin:5px 0 0; }
}
/* Short landscape phones keep the full-screen opening, then ordinary reading. */
@media (min-width:601px) and (max-width:950px) and (max-height:500px) {
 .world { display:none; }
 .scene { padding:0; }
 .portrait { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:0; box-shadow:none; }
 .portrait-border { display:none; }
 .portrait img, .portrait video { object-position:center 20%; }
 .scene::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top,oklch(25% .06 245 / .85),transparent 75%); opacity:0; }
 .scene.revealed::after { opacity:1; }
 .greeting { position:absolute; bottom:90px; z-index:3; margin:0; width:100%; color:var(--surface); }
 .title-intro { font-size:24px; }
 .title-name, .title-spark { color:oklch(85% .21 132); }
 .title-name { font-size:58px; }
 .actions { position:absolute; bottom:20px; z-index:4; margin:0; }
 .scroll-cue { color:var(--surface); }
 .invitation-fallback { max-width:680px; }
 .invitation-fallback .invitation-portrait { float:right; position:relative; top:auto; right:auto; width:28%; }
 .load-failed::after { opacity:0; }
 .load-failed .greeting, .load-failed .scroll-cue { color:var(--blue); }
}