/* Not My Event: the look of "There's No Place Like Home" (public/templates/no-place-like-home.html). One page scrolled DOWN through five rooms of one evening at one house. The whole story sits
   on ONE stage pinned to the screen (position: sticky) while #story scrolls by; the five scenes are stacked on it and only the room the guest is in (and, during a hand-over, the next one) is
   displayed. The drawings are SVG (home-art.js), the fireworks and their smoke are canvases (afterhours-fx.js, home.js).
   Speed rules (the user feels lag on a phone): the scroll frame only writes transform and opacity; nothing sets custom properties during a scroll; no blur filters; people and props that loop
   are small. People who asked for less motion (or chose "Reduce motion" in the Menu) get five still pictures, one under the other, with every word showing. */
:root { --ac: #E8C26A; --ac2: #FFF1C8; --ink: #FFF8EC; --dim: rgba(255, 248, 236, .74); --bg: #0B1430; --display: "Playfair Display", Georgia, serif; --caps: "Josefin Sans", system-ui, sans-serif; --body: "Lora", Georgia, serif; }
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.sr, .skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; left: 12px; top: 12px; z-index: 9100; padding: 10px 14px; border-radius: 10px; background: #fff; color: #111; font: 700 14px var(--caps); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ac); outline-offset: 3px; }

/* ---------------- the two controls at the top (the Menu, and the speaker drawn by speaker.js), the invitation pill, the sound captions ---------------- */
#menu-wrap { position: fixed; left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); z-index: 9000; }
#b-menu { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(232, 194, 106, .6); background: rgba(14, 10, 8, .72); color: var(--ink); font: 700 13px/1 var(--caps); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
#menu { position: absolute; left: 0; top: 52px; display: grid; gap: 4px; min-width: 238px; padding: 8px; border-radius: 16px; background: #15100C; border: 1px solid rgba(232, 194, 106, .35); box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }
#menu[hidden] { display: none; }
#menu button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: none; text-align: left; font: 600 15px/1.2 var(--caps); letter-spacing: .04em; cursor: pointer; }
#menu button:hover, #menu button:focus-visible { background: rgba(232, 194, 106, .14); }
#menu button[aria-pressed="true"]::after { content: " ✓"; color: var(--ac); }
#ev-pill { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 8900; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(232, 194, 106, .55); background: rgba(14, 10, 8, .78); color: var(--ink); font: 700 12px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
#snd-hint { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 8900; margin: 0; padding: 8px 12px; border-radius: 999px; background: rgba(14, 10, 8, .7); font: 600 12px/1 var(--caps); letter-spacing: .08em; color: var(--dim); pointer-events: none; transition: opacity .6s ease; }
#snd-hint.gone { opacity: 0; }
#cap { position: fixed; left: 50%; bottom: max(64px, calc(env(safe-area-inset-bottom) + 60px)); z-index: 8950; margin: 0; max-width: min(420px, 82vw); padding: 8px 14px; border-radius: 999px; background: rgba(14, 10, 8, .78); color: var(--ac2); font: 600 14px/1.25 var(--body); font-style: italic; text-align: center; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .4s ease; }
#cap::before { content: "♪ "; font-style: normal; color: var(--ac); }
#cap.on { opacity: 1; }
body.card-up #ev-pill { opacity: .5; }

/* ---------------- the story: one tall section, one pinned stage, five stacked scenes ---------------- */
#story { position: relative; height: 1400vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; contain: layout paint; background: #120C08; }
.scene { position: absolute; inset: 0; display: none; overflow: hidden; transform-origin: 50% 50%; }
.scene.vis { display: block; }
.cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.ly { position: absolute; left: 0; top: 0; pointer-events: none; transform-origin: 0 0; }
.ly > svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; pointer-events: none; }
.hit { pointer-events: all; cursor: pointer; }
/* a tap never draws a box around what was tapped (the user, 2026-11-09: a black box around the balloon); the keyboard still gets the gold edge below */
.hit { -webkit-tap-highlight-color: transparent; outline: none; }
.hit:focus, .hit:focus-visible { outline: none; }
.hit:focus-visible > * { stroke: var(--ac); stroke-width: 3px; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* the words: real text, a line at a time, in a different place in every room */
.lines { position: absolute; z-index: 20; pointer-events: none; display: grid; }
.ln { grid-area: 1 / 1; margin: 0; font: italic 600 clamp(26px, 5.6vw, 58px)/1.1 var(--display); color: var(--ink); text-shadow: 0 2px 18px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .85); opacity: 0; will-change: opacity, transform; }
#sc1 .lines { left: 0; right: 0; bottom: max(70px, 9vh); justify-items: center; text-align: center; padding: 0 20px; } #sc1 .ln { max-width: 20ch; }
#sc2 .lines { left: max(20px, 5vw); right: 20px; top: 14vh; } #sc2 .ln { max-width: 15ch; color: #3A2418; text-shadow: 0 0 18px rgba(255, 248, 230, .95), 0 0 4px rgba(255, 248, 230, .9); }
#sc3 .lines { right: max(20px, 5vw); left: 20px; top: 13vh; justify-items: end; text-align: right; } #sc3 .ln { max-width: 14ch; font-family: var(--caps); font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: clamp(22px, 4.6vw, 46px); color: #FFF3D6; }
#sc4 .lines { left: 0; right: 0; top: 14vh; justify-items: center; text-align: center; padding: 0 20px; } #sc4 .ln { max-width: 18ch; color: #E9F0FF; text-shadow: 0 0 22px rgba(120, 150, 255, .5), 0 2px 10px rgba(0, 0, 0, .85); }
#sc5 .lines { left: 0; right: 0; top: 10vh; justify-items: center; text-align: center; padding: 0 20px; gap: 0; } #sc5 .ln { max-width: 20ch; font-size: clamp(24px, 4.8vw, 50px); color: var(--ac2); }
#sc5 .ln + .ln { margin-top: 1.25em; }
#sc5 #w5b { grid-area: auto; font-size: clamp(18px, 3.4vw, 34px); }

/* ---------------- what moves inside the drawings ---------------- */
.tw { animation: hm-tw 2.2s ease-in-out infinite; } .tw.t1 { animation-delay: -.6s; } .tw.t2 { animation-delay: -1.2s; animation-duration: 2.8s; } .tw.t3 { animation-delay: -1.7s; animation-duration: 1.7s; }
@keyframes hm-tw { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.tail { transform-box: fill-box; transform-origin: 100% 100%; animation: hm-wag .32s ease-in-out infinite alternate; } .tail.slow { animation-duration: 1.1s; }
@keyframes hm-wag { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } }
.hit.tap .tail { animation-duration: .12s; }
.bob { transform-box: fill-box; animation: hm-bob 4s ease-in-out infinite alternate; } .bob.b1 { animation-delay: -1.4s; animation-duration: 4.8s; } .bob.b2 { animation-delay: -2.6s; animation-duration: 3.6s; }
@keyframes hm-bob { from { transform: translateY(0); } to { transform: translateY(-3.5%); } }
.steam { transform-box: fill-box; animation: hm-steam 2.8s ease-out infinite; } .steam.s1 { animation-delay: -.9s; } .steam.s2 { animation-delay: -1.8s; }
@keyframes hm-steam { 0% { transform: translateY(8%); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-30%); opacity: 0; } }
.fizz { transform-box: fill-box; animation: hm-fizz 1.6s linear infinite; } .fizz.z1 { animation-delay: -.5s; } .fizz.z2 { animation-delay: -1.1s; }
@keyframes hm-fizz { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-900%); opacity: 0; } }
.fizzing .fizz { animation-duration: .5s; }
.glint { animation: hm-glint 3.4s ease-in-out infinite; }
@keyframes hm-glint { 0%, 70%, 100% { opacity: 0; } 80% { opacity: 1; } }
.tumble { transform-box: fill-box; transform-origin: 50% 50%; animation: hm-tumble 2.4s ease-in-out infinite; } .tumble.t2 { animation-delay: -1.1s; }
@keyframes hm-tumble { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-12%); } }
.roll .tumble { animation: hm-roll .85s cubic-bezier(.2, .8, .3, 1); }
@keyframes hm-roll { 0% { transform: rotate(0) translateY(0); } 40% { transform: rotate(400deg) translateY(-90%); } 100% { transform: rotate(720deg) translateY(0); } }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: hm-flame .5s ease-in-out infinite alternate; } .flame.f1 { animation-delay: -.2s; animation-duration: .6s; } .flame.f2 { animation-delay: -.35s; animation-duration: .45s; }
@keyframes hm-flame { from { transform: scaleY(.88) skewX(-3deg); } to { transform: scaleY(1.1) skewX(3deg); } }
.fireglow { animation: hm-glow 1.3s ease-in-out infinite alternate; } .lglow { animation: hm-glow 3.4s ease-in-out infinite alternate; }
@keyframes hm-glow { from { opacity: .8; } to { opacity: 1; } }
.lampglow { transition: opacity .5s ease; } .lampglow.off { opacity: .08; }
.pop { animation: hm-pop 5.2s ease-out infinite; opacity: 0; } .pop.p1 { animation-delay: -1.8s; animation-duration: 6.4s; } .pop.p2 { animation-delay: -3.6s; animation-duration: 4.6s; }
@keyframes hm-pop { 0%, 76%, 100% { opacity: 0; } 80% { opacity: 1; } 92% { opacity: .2; } }
.hand { transform-box: view-box; }
.hand.hs { animation: hm-sec 60s steps(60) infinite; }
@keyframes hm-sec { to { transform: rotate(360deg); } }
.inside .sil * { fill: #9A6440 !important; stroke: none !important; }
.sparkle .tw { animation-duration: .4s; }
.boing .bob { animation: hm-boing .8s ease-out; }
@keyframes hm-boing { 30% { transform: translateY(-12%); } 60% { transform: translateY(2%); } }
.flick { animation: hm-flick .8s steps(4, end); }
@keyframes hm-flick { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: .55; } }

/* ---------------- people never bounce (the user, 2026-11-09: "no human should be bouncing"): they walk, their legs stepping with the scroll (home.js stride); only the dog hops ---------------- */
.pp, .dog { transform-box: fill-box; transform-origin: 50% 100%; }
.hit.tap .dog { animation: hm-hop .5s ease-out; }
@keyframes hm-hop { 40% { transform: translateY(-6%); } }

/* Biscuit on his own layer (he walks around, and fetches the bone when it is thrown), the bone, and the firework two of the family light at the curb */
.dgw, .bnw, .fwk, .rkt { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.dgw svg, .bnw svg, .fwk svg { position: absolute; display: block; overflow: visible; }
#sc4 .dogly { visibility: hidden; }
.fwk, .rkt { visibility: hidden; }
.fwk.on, .rkt.on { visibility: visible; }
.fwk .fuse { opacity: 0; }
.fwk.lit .fuse { animation: hm-fuse .16s steps(2, end) infinite; }
@keyframes hm-fuse { 0% { opacity: 1; } 50% { opacity: .3; } }
/* the hint to tap (someone on the lawn, then the firework to light it), pulsing gently; the lighter's tip glows */
.fwhint { position: absolute; left: 0; top: 0; display: none; margin: 0; padding: 0; border: 0; background: none; transform-origin: 0 0; cursor: pointer; }
.fwhint.on { display: block; }
.fwhint span { display: block; transform: translate(-50%, -100%); white-space: nowrap; padding: 10px 15px; border-radius: 999px; background: rgba(14, 10, 8, .84); border: 1px solid rgba(232, 194, 106, .8); color: #FFF1C8; font: 700 12px/1 var(--caps); letter-spacing: .12em; text-transform: uppercase; animation: hm-hint 1.5s ease-in-out infinite; }
@keyframes hm-hint { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 194, 106, .6); } 60% { box-shadow: 0 0 0 10px rgba(232, 194, 106, 0); } }
.ptip { animation: hm-glow .25s ease-in-out infinite alternate; }
.rkt { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #FFF6D8; box-shadow: 0 0 8px 3px rgba(255, 214, 140, .9), 0 12px 8px 0 rgba(255, 170, 80, .5), 0 24px 10px -1px rgba(255, 150, 60, .25); }
/* the balloons in the hall pop when tapped (scraps fly), and blow up again a few seconds later */
.blp { transform-box: fill-box; transform-origin: 50% 40%; transition: transform .8s ease, opacity .8s ease; }
.popped .blp { transform: scale(1.4); opacity: 0; transition: transform .09s ease-out, opacity .1s ease-out; }
.shr rect { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.popped .shr rect { animation: hm-shred .75s ease-out forwards; }
.shr .q0 { --sx: -520%; --sy: -380%; } .shr .q1 { --sx: 480%; --sy: -420%; } .shr .q2 { --sx: -620%; --sy: 120%; } .shr .q3 { --sx: 600%; --sy: 200%; } .shr .q4 { --sx: -120%; --sy: 560%; } .shr .q5 { --sx: 160%; --sy: -640%; }
@keyframes hm-shred { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(220deg); } }

/* ---------------- 1. the entry hall ---------------- */
#sc1 { background: #4A2E1A; }
.door .dshade { opacity: 0; }

/* ---------------- 2. the kitchen ---------------- */
#sc2 { background: #F6EAD3; }

/* ---------------- 3. the living room ---------------- */
#sc3 { background: #1F6F73; }
#sc3 .bubble { position: absolute; z-index: 5; margin: 0; max-width: 15ch; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: #FFF8E8; color: #1C2B3A; font: 700 clamp(15px, 2.4vw, 22px)/1.15 var(--caps); letter-spacing: .03em; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transform-origin: 0 100%; translate: 0 -100%; opacity: 0; pointer-events: none; }

/* ---------------- 4. the street at midnight ---------------- */
#sc4 { background: #03061A; }
#sc4 .rimMid, #sc4 .rimNear { opacity: 0; color: #FFD27A; }
#sc4 .flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
#sc4 .pass { z-index: 6; transform-origin: 50% 50%; }
#sc4 .sky-tap { position: absolute; inset: 0 0 52% 0; z-index: 12; pointer-events: auto; cursor: crosshair; background: none; border: 0; }
#sc4.counting .sky-tap { cursor: wait; }
#sc4 .num { position: absolute; inset: 0; z-index: 24; display: grid; place-items: center; pointer-events: none; }
#sc4 .num b { font: italic 600 clamp(64px, 18vw, 220px)/1 var(--display); color: #FFF4D6; text-shadow: 0 0 40px rgba(255, 210, 122, .6), 0 0 2px #000; opacity: 0; }
#sc4 .num b.go { animation: hm-num .85s ease-out both; }
@keyframes hm-num { 0% { opacity: 0; transform: scale(1.35); } 18% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.92); } }
#sc4 .say { position: absolute; left: 0; right: 0; top: 17vh; z-index: 24; display: grid; justify-items: center; gap: 2vh; padding: 0 20px; text-align: center; pointer-events: none; }
#sc4 .say p { margin: 0; opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1s ease; }
#sc4 .say .hny { font: 700 clamp(40px, 9vw, 108px)/1 var(--caps); letter-spacing: .04em; color: #FFF4D6; text-shadow: 0 0 30px rgba(255, 210, 122, .6), 0 2px 8px #000; }
#sc4 .say .more { max-width: 24ch; font: italic 500 clamp(19px, 3vw, 32px)/1.25 var(--display); color: var(--ac2); text-shadow: 0 2px 10px #000; }
#sc4 .say p.on { opacity: 1; transform: none; }
#sc4.counting .lines, #sc4.ny .lines { display: none; }
#sc4 .ctl { position: absolute; left: 0; right: 0; bottom: max(72px, 10vh); z-index: 26; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 16px; pointer-events: none; }
#sc4 .ctl button { pointer-events: auto; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(232, 194, 106, .6); background: rgba(6, 10, 26, .8); font: 700 13px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
#sc4 .ctl button[hidden] { display: none; }
#sc4 .still, #sc4 .still-count { display: none; }

/* ---------------- 5. the porch and the invitation ---------------- */
#sc5 { background: #141C44; }
#sc5 .dim { position: absolute; inset: 0; z-index: 8; background: #0B1430; opacity: 0; pointer-events: none; }
#sc5 .card { position: absolute; inset: 0; z-index: 21; width: min(440px, 88vw); height: fit-content; max-height: 84svh; margin: auto; overflow: auto; padding: clamp(20px, 3.6vh, 36px) clamp(18px, 5vw, 38px); text-align: center; border-radius: 8px; color: #1E2440; opacity: 0;
  background: linear-gradient(165deg, #FFFBF1, #FFF3DC 60%, #FBE9C6); border: 1px solid #C99A3E; box-shadow: 0 0 0 6px #FFF8EC, 0 0 0 7px rgba(201, 154, 62, .6), 0 30px 80px rgba(0, 0, 0, .55); }
.tl { opacity: 0; transform: translateY(12px); }
.k-in { margin: 0 0 1vh; font: 700 clamp(11px, 1.6vw, 13px)/1.2 var(--caps); letter-spacing: .32em; color: #A67A26; }
#t-title { margin: 0; font: italic 600 clamp(34px, 7.6vw, 58px)/1.02 var(--display); color: #1E2440; }
#t-sub { margin: .8vh 0 0; font: 700 clamp(12px, 1.8vw, 14px)/1.3 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: #8A5A1E; }
#t-invite { margin: 1.8vh auto 0; max-width: 30ch; font: italic 500 clamp(16px, 2.3vw, 20px)/1.35 var(--body); color: #3A3550; }
.rule { width: 60%; height: 1px; margin: 2vh auto; background: linear-gradient(90deg, transparent, #C99A3E, transparent); }
.card .when, .card .where { margin: .5vh 0 0; font: 600 clamp(15px, 2.1vw, 18px)/1.35 var(--body); color: #1E2440; }
.card .with { margin: 1.3vh 0 0; font: 700 11px/1.3 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: #6A5A44; }
.card .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 2.2vh; }
.card .acts.small { margin-top: 1vh; }
.card .acts.small .btn { min-height: 40px; font-size: 11px; }
.btn { min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--ac); background: var(--ac); color: #1A1206; font: 700 13px/1 var(--caps); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--ac2); }
.card .btn.ghost { color: #6A4A12; border-color: #C99A3E; }
.btn[hidden] { display: none; }

/* the details and the reply, below the story (no animation here: everything is stable to read and press) */
.after { position: relative; z-index: 2; padding: 9vh max(20px, 5vw) 16vh; background: linear-gradient(#0B1430, #101A3C 40%, #0B1430); }
.after section { max-width: 640px; margin: 0 auto 8vh; }
.after h2 { margin: 0 0 2vh; font: italic 600 clamp(30px, 5vw, 46px)/1.05 var(--display); color: var(--ac2); }
.det { margin: 0; display: grid; gap: 0; border-top: 1px solid rgba(232, 194, 106, .3); }
.det > div { display: grid; grid-template-columns: minmax(110px, 32%) 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(232, 194, 106, .2); }
.det dt { font: 700 11px/1.5 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--ac); }
.det dd { margin: 0; font: 500 17px/1.45 var(--body); color: var(--ink); overflow-wrap: anywhere; }
#live-cd { margin: 2.4vh 0 0; font: 700 14px/1.4 var(--caps); letter-spacing: .12em; color: var(--ac2); }
.row-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 3vh; }
#rsvp-form { display: grid; gap: 16px; }
.f { display: grid; gap: 8px; font: 700 12px/1.3 var(--caps); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.f input[type=text] { min-height: 50px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(232, 194, 106, .45); background: #0F1838; color: var(--ink); font: 500 17px var(--body); letter-spacing: 0; text-transform: none; }
.ans { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.ans label { flex: 1 1 140px; }
.ans label[hidden] { display: none; }
.ans input { position: absolute; opacity: 0; }
.ans span { display: grid; place-items: center; min-height: 50px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(232, 194, 106, .45); font: 700 13px/1.2 var(--caps); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-align: center; }
.ans input:checked + span { background: var(--ac); color: #1A1206; }
.ans input:focus-visible + span { outline: 3px solid var(--ac); outline-offset: 3px; }
.step { display: inline-flex; align-items: center; gap: 12px; }
.step button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ac); background: none; font: 700 20px/1 var(--caps); cursor: pointer; }
.step output { min-width: 2ch; text-align: center; font: 700 20px var(--caps); }
#plus-field[hidden] { display: none; }
#err { min-height: 1.4em; margin: 0; font: 600 16px/1.4 var(--body); }
#err.err { color: #FF9AA8; }
#done[hidden], #rsvp-form[hidden], #r-closed[hidden], #going[hidden] { display: none; }
.going { margin: -1vh 0 2.4vh; font: 700 12px/1.4 var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--ac); }
#done h3 { margin: 0 0 1vh; font: italic 600 clamp(26px, 4.4vw, 38px)/1.1 var(--display); color: var(--ac2); }
#done p { margin: 0 0 2vh; font: 500 17px/1.45 var(--body); color: var(--ink); }
.linkish { min-height: 44px; border: 0; background: none; color: var(--ac); font: 700 12px var(--caps); letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; cursor: pointer; }
.foot { margin: 0; text-align: center; font: 600 12px/1.6 var(--caps); letter-spacing: .12em; color: var(--dim); }

/* a line a tapped thing says, for a few seconds */
.bub { position: fixed; z-index: 9050; max-width: min(300px, 80vw); padding: 10px 14px; border-radius: 12px; background: #FFF8EC; color: #241A12; font: 600 15px/1.3 var(--body); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; animation: hm-bub 2.5s ease both; }
@keyframes hm-bub { 0% { opacity: 0; translate: 0 8px; } 10%, 85% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }

/* ---------------- scenes off screen rest; gentle fireworks; reduced motion ---------------- */
.scene:not(.vis) * { animation-play-state: paused !important; }
body.soft #sc4 .flash { display: none; }
body.rm #story { height: auto !important; }
body.rm .stage { position: relative; height: auto; overflow: visible; contain: none; }
body.rm .scene { position: relative; display: block !important; height: 100vh; height: 100svh; opacity: 1 !important; transform: none !important; }
body.rm .lines { display: grid; gap: 1.2vh; }
body.rm .ln { grid-area: auto; opacity: 1 !important; transform: none !important; font-size: clamp(22px, 4.4vw, 40px); }
body.rm #sc5 .lines { top: 4vh; }
body.rm #sc5 .ln + .ln { margin-top: 0; }
body.rm .tl { opacity: 1 !important; transform: none !important; }
body.rm * { animation: none !important; transition-duration: .01ms !important; }
body.rm #sc4 .still { display: block; } body.rm #sc4 canvas, body.rm #sc4 .num, body.rm #sc4 .ctl, body.rm #sc4 .sky-tap, body.rm #sc4 .pass, body.rm #sc4 .flash { display: none !important; }
body.rm #sc4 .still-count { display: block; position: absolute; left: 0; right: 0; top: 9vh; z-index: 24; margin: 0; text-align: center; font: 700 clamp(18px, 3vw, 28px)/1 var(--caps); letter-spacing: .2em; color: #E9F0FF; text-shadow: 0 2px 8px #000; }
body.rm #sc4 .say { top: 15vh; }
body.rm #sc4 .say p { opacity: 1; transform: none; }
body.rm #sc4 .lines { display: none; }
body.rm #sc3 .bubble { opacity: 1 !important; }
body.rm #sc5 canvas { display: none; }
@media (max-width: 640px) {
  .ln { font-size: clamp(24px, 7.6vw, 38px); }
  #sc1 .lines { bottom: max(84px, 12vh); }
  .det > div { grid-template-columns: 1fr; gap: 4px; }
}