/* RSVP flow over the layered descent. Loads after the design's style, journey and effects CSS.
   Fonts: change --font-title / --font-caps / --font-book to swap the type. */
@font-face{font-family:"Isekai Title";src:url(fonts/CinzelDecorative-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Isekai Caps";src:url(fonts/Cinzel.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Isekai Book";src:url(fonts/Alegreya.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Isekai Book";src:url(fonts/Alegreya-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
 --font-title:"Isekai Title",Georgia,serif;--font-caps:"Isekai Caps",Georgia,serif;--font-book:"Isekai Book",Georgia,serif;
 --ink:#fff6e6;--pink:#f6b4b2;--peach:#ffe1bd;--plum:#49394c;--deep:#2f2236;--gold:#ffe9a8;--mint:#c4ffe2;
 --halo:0 1px 2px #1b1426e6,0 0 10px #1b1426b3,0 0 26px #1b142673;
 --letter-shadow:0 2px 0 #49394c,0 0 3px #49394c,0 4px 18px #24162e8c;
 --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)
}
[hidden]{display:none!important}
body{font-family:var(--font-book)}
/* Guest names stay plain letters: no decorative ligatures (Cinzel Decorative joins OO). */
.guest-name,.w-name{font-variant-ligatures:none;font-feature-settings:"liga" 0,"dlig" 0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}

/* The design's opening cue keeps its look; only the type changes. */
.cue{font-family:var(--font-caps);font-size:13px;font-weight:600}
.cue small{font-family:var(--font-book);font-size:12px;font-weight:500;letter-spacing:.08em}

/* ---------- overlay ---------- */
#story{position:absolute;inset:0;z-index:12;pointer-events:none;color:var(--ink)}
.step{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:clamp(84px,13vh,128px) 20px 84px;text-align:center}
.step :is(a,button,input,label,fieldset,form,.veil){pointer-events:auto}
.review-mode #story,.review-mode .next{display:none}

/* ---------- title card: the design's lettering, framed as on the live page ---------- */
.title-card{margin:0;display:flex;flex-direction:column;align-items:center;gap:.08em;font-weight:normal;pointer-events:none}
.title-card .lettering{position:static;display:block;width:auto;top:auto;padding:0;text-shadow:var(--letter-shadow)}
.title-card .welcome{font:600 clamp(21px,2.2vw,32px)/1.15 var(--font-caps);letter-spacing:.1em;color:var(--peach)}
.title-card .title{font:700 clamp(80px,9.6vw,156px)/.98 var(--font-title);letter-spacing:.015em;color:var(--pink);-webkit-text-stroke:2px #513e56;padding:0 .04em}
.title-card .subtitle{font:600 clamp(18px,1.85vw,28px)/1.25 var(--font-caps);letter-spacing:.05em;color:var(--peach)}

/* ---------- the invite code: a small cloud from the scene holds the field ---------- */
.code-box{position:relative;display:flex;flex-direction:column;align-items:center;width:min(430px,90vw);margin-top:clamp(12px,2.6vh,26px)}
.code-box label{position:relative;z-index:1;font:700 clamp(14px,1.15vw,16px)/1.2 var(--font-caps);letter-spacing:.18em;color:var(--ink);text-shadow:var(--halo);margin-bottom:-4px}
/* The field box is the cloud's opaque area (source rows 189–764 of 887), so nothing around it is covered. */
.code-field{position:relative;width:100%;aspect-ratio:3/1;display:flex;align-items:center;justify-content:center;isolation:isolate}
.code-cloud{position:absolute;left:50%;top:50%;width:102%;max-width:none;translate:-50% -53.7%;z-index:-2;pointer-events:none;user-select:none;animation:cloud-float 9s ease-in-out infinite alternate}
.code-glow{position:absolute;inset:26% 14% 20%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,#fffaf6 0,#fff6f3f2 50%,#ffeef380 76%,#ffeef300 100%);pointer-events:none;transition:box-shadow 240ms var(--ease-out)}
/* Focus shows as a gold ring of light on the cloud rather than a box. */
.code-field:has(#invite-code:focus-visible) .code-glow{box-shadow:0 0 0 2px #ffe9a8,0 0 26px 8px #ffe9a8b3}
.code-ring{position:absolute;inset:18% 6% 12%;border-radius:50%;box-shadow:0 0 0 2px #ffe9a8,0 0 34px 10px #ffe9a8b3;opacity:0;pointer-events:none}
.code-sparkles i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff9dd;box-shadow:0 0 8px 3px #fff4cbaa,0 0 22px 8px #ffeac344;animation:twinkle 3.4s ease-in-out infinite;pointer-events:none}
.code-sparkles i:before,.code-sparkles i:after{content:'';position:absolute;background:linear-gradient(transparent,#fffce6,transparent);width:1px;height:22px;top:-9px;left:2px}
.code-sparkles i:after{transform:rotate(90deg)}
.code-sparkles i:nth-child(1){left:2%;top:30%;scale:.7}.code-sparkles i:nth-child(2){left:92%;top:18%;animation-delay:-1.1s}
.code-sparkles i:nth-child(3){left:84%;top:86%;scale:.5;animation-delay:-2.3s}.code-sparkles i:nth-child(4){left:12%;top:84%;scale:.45;animation-delay:-.6s}
.code-sparkles i:nth-child(5){left:50%;top:-6%;scale:.55;animation-delay:-1.8s}
#invite-code{width:62%;min-width:0;margin-top:2%;padding:8px 6px;border:0;border-radius:999px;background:none;color:#4a3150;caret-color:#b0607a;text-align:center;text-transform:uppercase;font:700 clamp(22px,2vw,26px)/1.2 var(--font-caps);letter-spacing:.16em;text-shadow:0 0 12px #fff}
#invite-code::placeholder{color:#8f6f93;opacity:.55;letter-spacing:.3em}
#invite-code:focus-visible{outline:none}
#invite-code[aria-invalid=true]{color:#7c2e4a}
.code-submit{position:absolute;right:9%;top:53%;translate:0 -50%;padding:7px 12px 8px;border:0;border-radius:999px;background:#5b3f61e6;color:var(--ink);font:700 13px/1 var(--font-caps);letter-spacing:.1em;backdrop-filter:none;box-shadow:0 2px 10px #4931505c;transition:transform 160ms var(--ease-out),background-color 150ms ease}
.code-submit:active{transform:scale(.97)}
.code-submit[aria-disabled=true]{cursor:progress;opacity:.75}
.code-hint{position:relative;z-index:1;margin:-2px 0 0;font:500 clamp(15px,1.2vw,17px)/1.35 var(--font-book);color:var(--ink);text-shadow:var(--halo)}
.code-error{position:relative;z-index:1;margin:8px 0 0;max-width:36ch;font:600 clamp(16px,1.25vw,18px)/1.35 var(--font-book);color:#fff0e8;text-shadow:var(--halo)}
.code-error:empty{display:none}
.code-box[aria-busy=true] .code-glow{animation:code-checking 1.1s ease-in-out infinite alternate}
@keyframes code-checking{from{opacity:.7}to{opacity:1;scale:1.04}}
@media(hover:hover) and (pointer:fine){.code-submit:hover{background:#73507a}}

/* ---------- shared text style ---------- */
.step h2{margin:0}
.veil{position:relative;width:min(600px,100%);padding:clamp(18px,3vh,30px) clamp(20px,3vw,36px);border-radius:36px;text-align:left}
/* A feathered shadow of mist rather than a hard panel: readable over the art, no edge. */
.veil:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
.veil-sky:before{background:#152a3dab;box-shadow:0 0 44px 26px #152a3d8c}
.line-error{margin:6px 0 0;font:600 16px/1.35 var(--font-book);color:#ffd9cc}
.line-error:empty{display:none}

/* ---------- welcome ---------- */
.step-welcome{justify-content:flex-start;padding-top:clamp(96px,17vh,170px)}
.welcome-line{display:flex;flex-direction:column;align-items:center;gap:.12em;font-weight:normal;text-shadow:var(--letter-shadow)}
.welcome-line span{display:block}
.welcome-line .w-small{font:600 clamp(24px,2.6vw,38px)/1.15 var(--font-caps);letter-spacing:.08em;color:var(--peach)}
.welcome-line .w-name{font:700 clamp(46px,6vw,92px)/1.02 var(--font-title);color:var(--pink);-webkit-text-stroke:1.5px #513e56;max-width:16ch;overflow-wrap:break-word}

/* ---------- details ---------- */
.step-details{padding-top:clamp(60px,9vh,96px)}
#details-heading{font:700 clamp(24px,2.2vw,30px)/1.1 var(--font-caps);letter-spacing:.08em;color:var(--pink);text-shadow:var(--letter-shadow);margin-bottom:.45em}
.details-body p{margin:.45em 0;font:500 clamp(17px,1.35vw,20px)/1.4 var(--font-book);text-shadow:0 1px 2px #0d1a26}
.details-body .facts{margin:0 0 .3em;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:3px;align-items:baseline}
.details-body dt{font:700 13px/1.2 var(--font-caps);letter-spacing:.14em;color:var(--peach)}
.details-body dd{margin:0;font:600 clamp(19px,1.55vw,23px)/1.3 var(--font-book)}
.details-body .days{margin:-.1em 0 .6em;font-style:italic;color:var(--peach)}
.details-body .blanks{font:600 clamp(20px,1.8vw,25px)/1.2 var(--font-caps);letter-spacing:.08em;color:var(--peach)}
.details-body .deadline{margin-top:.8em;padding-top:.65em;border-top:1px solid #ffe1bd55;color:var(--peach)}
.choice{margin:14px 0 0;padding:0;border:0;min-width:0}
.choice legend{padding:0;margin-bottom:8px;font:700 clamp(16px,1.3vw,18px)/1.2 var(--font-caps);letter-spacing:.1em;color:var(--ink)}
.choices{display:flex;gap:10px}
.choices label{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:46px;padding:8px 10px;border:1px solid #ffe1bd66;border-radius:999px;background:#fff6e612;color:var(--ink);font:700 clamp(16px,1.35vw,19px)/1 var(--font-caps);letter-spacing:.06em;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease,color 200ms ease,box-shadow 200ms ease}
.choices input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.choices label:has(:focus-visible){outline:3px solid var(--gold);outline-offset:3px}
.choices label:has(:checked){background:linear-gradient(#fff3cf,#f8c6c0);border-color:#fff3cf;color:var(--deep);box-shadow:0 0 22px 2px #ffe9a866}
.choices label:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.choices label:hover{border-color:#ffe1bdb3;background:#fff6e622}.choices label:has(:checked):hover{background:linear-gradient(#fff3cf,#f8c6c0)}}

/* ---------- night ---------- */
.night-dusk,.night-sky{position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 1.8s var(--ease-in-out),visibility 0s linear 1.8s}
.night-dusk{z-index:9;mix-blend-mode:multiply;background:linear-gradient(#141d4f 0%,#26306a 46%,#3b3a78 100%)}
.night-sky{z-index:9;background:radial-gradient(ellipse 60% 45% at 76% 16%,#a9b8ff1f,transparent 70%),linear-gradient(#03061acc,#0a0f2e99 55%,#0a0f2e66)}
:is(.night-dusk,.night-sky).on{opacity:1;visibility:visible;transition:opacity 2.8s var(--ease-in-out),visibility 0s}
:is(.night-dusk,.night-sky).instant{transition:none!important}
.stars{position:absolute;inset:0}
.stars i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#fff;box-shadow:0 0 6px 1px #dfe6ffcc;opacity:0;transition:opacity 1.2s ease var(--appear)}
.stars i.bright{box-shadow:0 0 8px 2px #fff,0 0 22px 6px #c9d4ff66}
.night-sky.on .stars i{opacity:1;animation:star-breathe var(--twinkle) ease-in-out var(--phase) infinite alternate}
.night-sky:not(.on) .stars i{transition-delay:0s;transition-duration:.6s}
@keyframes star-breathe{from{scale:.7;filter:brightness(.7)}to{scale:1.15;filter:brightness(1.2)}}
.moon{position:absolute;right:15%;top:9%;width:clamp(58px,7.4vw,108px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 36%,#fffef6 0,#f7f1dc 52%,#ddd5bb 100%);box-shadow:0 0 30px 6px #fff8dc66,0 0 110px 34px #c8d2ff2e;transform:translateY(46vh);opacity:0;transition:transform 3.6s var(--ease-out) .5s,opacity 1.6s ease .5s}
.moon i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 62% 58%,#cfc6aa66 0 9%,transparent 10%),radial-gradient(circle at 36% 64%,#cfc6aa4d 0 6%,transparent 7%),radial-gradient(circle at 58% 30%,#cfc6aa40 0 5%,transparent 6%)}
.night-sky.on .moon{transform:none;opacity:1}
.night-sky:not(.on) .moon{transition:transform 1.4s var(--ease-in-out),opacity 1s ease}
.step-night{padding-top:clamp(120px,24vh,230px)}
.night-line{max-width:20ch;font:500 clamp(28px,3.2vw,46px)/1.3 var(--font-caps);letter-spacing:.06em;color:#fff;text-shadow:0 0 18px #b8c6ff80,0 0 2px #0a0f2e}
.night-line span{display:block}
.quiet{margin-top:28px;padding:9px 16px;border:1px solid #ffffff3d;border-radius:999px;background:#ffffff0f;backdrop-filter:none;color:#e9ecff;font:600 15px/1.2 var(--font-book);letter-spacing:.04em;transition:transform 160ms var(--ease-out),background-color 150ms ease}
.quiet:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.quiet:hover{background:#ffffff24}}

/* ---------- page 2: the abyss stop ---------- */
.step-form{padding-top:clamp(40px,7vh,80px)}
.veil-abyss{width:min(500px,100%)}
.veil-abyss:before{background:#0b2b2bb3;box-shadow:0 0 46px 26px #0b2b2b94}
#hello-heading{font:700 clamp(28px,3vw,40px)/1.15 var(--font-caps);letter-spacing:.04em;color:#e9fff4;text-shadow:0 0 18px #7dffc566,0 2px 2px #04201c;margin-bottom:.2em}
#hello-heading .guest-name{color:var(--mint)}
.form-note{margin:0 0 14px;font:500 17px/1.4 var(--font-book);color:#d8f7e8}
.form-note:empty{display:none}
.field{margin:0 0 14px}
.field label,.field-label{display:block;margin:0 0 6px;font:700 14px/1.2 var(--font-caps);letter-spacing:.14em;color:var(--mint)}
.field input{display:block;width:100%;padding:12px 14px;border:1px solid #b4ffdc73;border-radius:14px;background:#04201ccc;color:#f3fff9;font:500 19px/1.3 var(--font-book);transition:border-color 200ms ease,box-shadow 200ms ease}
.field input:focus-visible{outline:3px solid var(--mint);outline-offset:2px;border-color:var(--mint);box-shadow:0 0 18px #7dffc544}
.field input[aria-invalid=true]{border-color:#ffb0a0}
.photo-row{display:flex;align-items:center;gap:16px}
.photo-frame{position:relative;flex:none;width:88px;height:88px;border-radius:50%;border:1px dashed #b4ffdc99;background:radial-gradient(circle,#7dffc522,#04201ccc 70%);display:grid;place-items:center;overflow:hidden}
.photo-frame canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 300ms var(--ease-out)}
.photo-frame.has-preview{border-style:solid;border-color:var(--mint);box-shadow:0 0 20px #7dffc54d}
.photo-frame.has-preview canvas{opacity:1}
.photo-mark{font-size:26px;color:var(--mint);text-shadow:0 0 12px #7dffc5}
.photo-frame.has-preview .photo-mark{display:none}
.photo-actions{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.leafy{padding:10px 16px;border:1px solid #b4ffdc8c;border-radius:999px;background:#0d3b35e6;backdrop-filter:none;color:#eafff5;font:700 15px/1.2 var(--font-caps);letter-spacing:.06em;transition:transform 160ms var(--ease-out),background-color 150ms ease}
.leafy:active{transform:scale(.97)}
.leafy:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.leafy[aria-invalid=true]{border-color:#ffb0a0}
@media(hover:hover) and (pointer:fine){.leafy:hover{background:#145048}}
.photo-status{margin:0;font:600 16px/1.3 var(--font-book);color:var(--mint)}
.photo-status:empty{display:none}
.photo-note{margin:10px 0 0;font:italic 400 16px/1.4 var(--font-book);color:#d8f7e8}
.form-status{margin:4px 0 0;font:600 16px/1.35 var(--font-book);color:#ffe6dc}
.form-status:empty{display:none}

/* Spores the form dissolves into on its way down (rsvp.js). */
.spore{position:absolute;z-index:13;width:4px;height:4px;border-radius:50%;background:#c3ffe0;box-shadow:0 0 9px 1px #a0ffcb;pointer-events:none}

/* ---------- page 3: the crystal cave ---------- */
.step-thanks{padding-top:clamp(110px,22vh,220px)}
.thanks-line{display:flex;flex-direction:column;align-items:center;gap:.08em;font-weight:normal}
.thanks-line span:first-child{font:600 clamp(24px,2.6vw,36px)/1.2 var(--font-caps);letter-spacing:.1em;color:#ffe4f6;text-shadow:0 0 16px #ff8fd280,0 2px 2px #1d0a24}
.thanks-line .guest-name{font:700 clamp(40px,5.4vw,84px)/1.05 var(--font-title);color:#ffd6f0;-webkit-text-stroke:1px #6b2f63;text-shadow:0 0 26px #ff7dd080,0 3px 3px #1d0a24;max-width:13ch}
.thanks-answer,.thanks-same{max-width:30ch;margin:.7em 0 0;font:500 clamp(18px,1.6vw,22px)/1.4 var(--font-book);color:#fff0fb;text-shadow:0 0 3px #1d0a24,0 0 16px #1d0a24cc}
.thanks-same{margin-top:.4em;font-style:italic;color:#ffd8f2}
.step-thanks{isolation:isolate}
.step-thanks:before{content:'';position:absolute;left:50%;top:clamp(80px,18vh,190px);width:min(720px,96vw);height:min(420px,56vh);translate:-50% 0;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,#25082fb3,#25082f66 60%,transparent);pointer-events:none}
.thanks-sparkles{position:absolute;left:50%;top:clamp(110px,22vh,220px);width:min(560px,90vw);height:180px;translate:-50% 0;pointer-events:none}
.thanks-sparkles i{position:absolute;width:var(--s,14px);height:var(--s,14px);opacity:0;background:radial-gradient(circle,#fffdf7 0 9%,#fae4ff99 15%,transparent 52%)}
.thanks-sparkles i:before,.thanks-sparkles i:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#fff8f1,transparent);clip-path:polygon(46% 0,54% 0,56% 43%,100% 48%,100% 52%,56% 57%,54% 100%,46% 100%,44% 57%,0 52%,0 48%,44% 43%)}
.thanks-sparkles i:after{rotate:45deg;scale:.5}
.thanks-sparkles i:nth-child(1){left:4%;top:18%;--s:18px}.thanks-sparkles i:nth-child(2){left:92%;top:8%;--s:22px}
.thanks-sparkles i:nth-child(3){left:20%;top:78%;--s:12px}.thanks-sparkles i:nth-child(4){left:78%;top:70%;--s:16px}
.thanks-sparkles i:nth-child(5){left:50%;top:-12%;--s:14px}.thanks-sparkles i:nth-child(6){left:64%;top:96%;--s:10px}

/* ---------- the small continue, bottom right ---------- */
.next{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px));z-index:14;display:flex;align-items:center;gap:6px;min-height:44px;padding:9px 16px 10px;border:1px solid #fff6e64d;border-radius:999px;background:#13253a6b;backdrop-filter:none;color:var(--ink);font:600 15px/1 var(--font-caps);letter-spacing:.08em;text-shadow:0 1px 3px #0d1520;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 150ms ease,border-color 150ms ease}
.next:active{transform:scale(.97)}
.next-mark{font-size:20px;line-height:.6;margin-top:-2px}
.next[aria-disabled=true]{cursor:progress;opacity:.7}
body[data-scene="1"] .next{background:#0b2b2b8c;border-color:#b4ffdc59}
body[data-scene="2"] .next{background:#2a0f3080;border-color:#ffc9ef59}
@media(hover:hover) and (pointer:fine){.next:hover{background:#13253ab3;border-color:#fff6e699}}

/* ---------- corner menu for the design's scene controls ---------- */
.corner-menu{position:fixed;top:14px;right:14px;z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#menu-toggle{width:42px;height:42px;padding:0;display:grid;place-items:center;border-radius:50%;font-size:19px;line-height:1;background:#173440b8;border:1px solid #f8e6c455;color:var(--ink);transition:transform 160ms var(--ease-out),background-color 150ms ease}
.menu-items{transform-origin:top right;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out);display:flex;flex-direction:column;gap:2px;padding:6px;border:1px solid #f8e6c455;border-radius:16px;background:#12303ae6}
.menu-items button{padding:9px 14px;border:0;border-radius:10px;background:none;backdrop-filter:none;text-align:left;font:600 15px/1.2 var(--font-book);text-transform:lowercase;color:var(--ink);transition:transform 160ms var(--ease-out),background-color 150ms ease}
#menu-toggle:active,.menu-items button:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.menu-items button:hover{background:#fff6e61f}#menu-toggle:hover{background:#25505e}}
@starting-style{.menu-items{opacity:0;transform:scale(.95)}}
body:not(.can-reveal) #reveal{display:none}

/* ---------- phones ---------- */
@media(max-width:700px){
 .step{padding:clamp(76px,13vh,112px) 14px 76px}
 .title-card .welcome{font-size:20px}
 .title-card .title{font-size:min(17.5vw,96px);-webkit-text-stroke:1.5px #513e56}
 .title-card .subtitle{font-size:clamp(15px,4.4vw,19px);max-width:22ch}
 .code-box{width:min(340px,92vw)}
 #invite-code{width:60%;font-size:19px;letter-spacing:.1em}
 .code-submit{right:6%;padding:7px 9px 8px;font-size:12px}
 .step-welcome{padding-top:clamp(92px,18vh,150px)}
 .welcome-line .w-small{font-size:clamp(18px,5.4vw,22px)}
 .welcome-line .w-name{font-size:clamp(34px,10vw,54px);max-width:84%;text-wrap:balance}
 .thanks-line .guest-name{text-wrap:balance}
 .step-details{padding-top:58px}
 .veil{padding:16px 16px 18px;border-radius:28px}
 .veil-sky:before{box-shadow:0 0 30px 18px #152a3d8c}
 .details-body p{font-size:17px}
 .choices{gap:6px}
 .choices label{font-size:15px;padding:8px 4px;letter-spacing:.03em}
 .step-form{padding-top:48px}
 .veil-abyss:before{box-shadow:0 0 30px 18px #0b2b2b94}
 /* The moon rises above the words, clear of the corner menu. */
 .step-night{padding-top:clamp(160px,30vh,260px)}
 .night-line{font-size:clamp(23px,7vw,32px)}
 .moon{right:22%;top:8%}
 .next{font-size:14px;padding:8px 14px 9px}
}
@media(max-width:700px) and (max-height:700px){
 .step{padding-top:64px}
 .step-details{padding-top:52px}
 .step-night{padding-top:150px}
 .veil{padding:12px 14px 14px}
 .details-body p{margin:.3em 0;font-size:16px}
 .details-body .days{margin-bottom:.35em}
 #details-heading{margin-bottom:.2em;font-size:22px}
 .choice{margin-top:8px}
 .choices label{min-height:42px}
 .field{margin-bottom:10px}
 .photo-frame{width:72px;height:72px}
}

/* ---------- reduced motion: same end states, no travel or drift ---------- */
@media(prefers-reduced-motion:reduce){
 .moon{transform:none!important;transition:opacity 1.2s ease!important}
 :is(.night-dusk,.night-sky){transition:opacity .8s ease,visibility 0s linear .8s!important}
 :is(.night-dusk,.night-sky).on{transition:opacity .8s ease,visibility 0s!important}
 .stars i{transition-delay:0s!important}
 .code-cloud{animation:none}
 :is(.next,.choices label,.quiet,.leafy,.code-submit,#menu-toggle,.menu-items button):active{transform:none}
 .menu-items{transition-property:opacity}
 @starting-style{.menu-items{transform:none}}
}