/* Not My Event: the look of "The Last Train to Midnight" (public/templates/last-train-to-midnight.html). One page that scrolls DOWN through five places of one train journey; each scene is a tall
   section with a stage pinned to the screen (position: sticky) while the guest scrolls through it, so the scroll moves the camera. Drawings: lasttrain-art.js (SVG); fireworks: afterhours-fx.js (Canvas).
   Speed rules (the user feels lag on a phone): the scroll frame only writes transform and opacity on a few layers; nothing sets custom properties on a scene during a scroll; no blur filters; scenes off
   the screen pause their animations (.off). Reduced motion (the system setting, or "Reduce motion" in the menu) gets still pictures with every word showing. */
:root { --ac: #E2B85A; --ac2: #FFF1C8; --ink: #F6EEDC; --dim: rgba(246, 238, 220, .74); --bg: #04061A; --display: "Limelight", "Bodoni Moda", Georgia, serif; --caps: "Josefin Sans", system-ui, sans-serif; --body: "Cormorant Garamond", 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 controls: the Menu (top left), the speaker (speaker.js, top right), the ticket pill (bottom left) and the journey line along the very top ---------------- */
#prog { position: fixed; left: 0; right: 0; top: 0; z-index: 8990; height: 3px; background: rgba(226, 184, 90, .18); pointer-events: none; }
#prog i { position: absolute; inset: 0; background: linear-gradient(90deg, #E2B85A, #FFF1C8); transform-origin: 0 50%; transform: scaleX(0); }
#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(226, 184, 90, .55); background: rgba(4, 6, 20, .74); 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: #080A1C; border: 1px solid rgba(226, 184, 90, .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(226, 184, 90, .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: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(226, 184, 90, .6); background: rgba(4, 6, 20, .8); color: var(--ac2); font: 700 12px/1 var(--caps); letter-spacing: .16em; 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(4, 6, 20, .72); font: 600 12px/1 var(--caps); letter-spacing: .08em; color: var(--dim); pointer-events: none; transition: opacity .6s ease; }
#snd-hint.gone { opacity: 0; }

/* ---------------- the scenes: tall sections with a pinned stage ---------------- */
.sc { position: relative; }
#s1 { height: 320vh; } #s2 { height: 300vh; } #s3 { height: 260vh; } #s4 { height: 340vh; } #s5 { height: 190vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; contain: layout paint; }
.ly { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; pointer-events: none; transform-origin: 50% 50%; }
.ly > svg, .ly .part > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.ly .part { position: absolute; inset: 0; }
.hit { pointer-events: all; cursor: pointer; }
.hit:focus-visible { outline: none; }
.hit:focus-visible > * { stroke: var(--ac); }
.ov { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.wh { transform-box: fill-box; transform-origin: 50% 50%; }

/* the words: real text, one line at a time, in a different place and voice in every scene */
.lines { position: absolute; z-index: 20; pointer-events: none; display: grid; }
.ln { grid-area: 1 / 1; margin: 0; font: 400 clamp(28px, 6vw, 66px)/1.08 var(--display); letter-spacing: .02em; color: var(--ink); text-shadow: 0 2px 18px rgba(0, 0, 0, .8), 0 0 2px rgba(0, 0, 0, .9); opacity: 0; will-change: opacity, transform; }
#s1 .lines { left: max(20px, 6vw); right: 20px; top: 14vh; } #s1 .ln { max-width: 16ch; color: #F4F0E6; }
#s2 .lines { right: max(20px, 6vw); left: 20px; top: 10vh; justify-items: end; text-align: right; } #s2 .ln { font-family: var(--body); font-style: italic; font-weight: 600; font-size: clamp(32px, 6.4vw, 72px); max-width: 15ch; color: #FFE6A8; }
#s3 .lines { left: 0; right: 0; bottom: 14vh; justify-items: center; text-align: center; } #s3 .ln { font: 700 clamp(24px, 5.4vw, 58px)/1.06 var(--caps); text-transform: uppercase; letter-spacing: .1em; max-width: 18ch; color: #fff; text-shadow: 0 0 22px rgba(61, 226, 255, .7), 0 0 4px rgba(179, 123, 255, .9), 0 2px 10px #000; }
#s5 .lines { left: 0; right: 0; top: 9vh; justify-items: center; text-align: center; }

/* ---------------- 1. the station ---------------- */
#s1 .stage { background: #04061A; }
#s1 .snow { animation: lt-snow 9s linear infinite; }
#s1 .snow > svg { height: 200%; top: -100%; }
@keyframes lt-snow { from { transform: translateY(0); } to { transform: translateY(50%); } }
#s1 .hand-h, #s1 .hand-m { transform-box: view-box; }
#s1 .blink { animation: lt-blink 1.4s steps(1, end) infinite; }
@keyframes lt-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.puff { transform-box: fill-box; transform-origin: 50% 50%; animation: lt-puff 3.4s ease-out infinite; opacity: 0; }
.puff.p1 { animation-delay: -.7s; } .puff.p2 { animation-delay: -1.4s; } .puff.p3 { animation-delay: -2.1s; } .puff.p4 { animation-delay: -2.8s; }
@keyframes lt-puff { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(-30%, -260%) scale(2.4); opacity: 0; } }
.drift { transform-box: fill-box; animation: lt-drift 11s ease-in-out infinite alternate; opacity: .75; } .drift.d1 { animation-duration: 14s; animation-direction: alternate-reverse; } .drift.d2 { animation-duration: 9s; }
@keyframes lt-drift { from { transform: translateX(-12%) scale(1); } to { transform: translateX(14%) scale(1.25); } }
#s1.whistle .puff { animation-duration: 1.2s; }
#s1 .lantern .lamp-glow { animation: lt-flicker 3.2s steps(4, end) infinite; }
@keyframes lt-flicker { 0%, 100% { opacity: 1; } 30% { opacity: .82; } 60% { opacity: .95; } }
#s1 .announce { position: absolute; left: 50%; bottom: max(76px, 11vh); z-index: 22; width: min(560px, 88vw); margin: 0; padding: 12px 18px; border-radius: 12px; transform: translateX(-50%); display: grid; gap: 4px; text-align: center;
  background: rgba(4, 6, 20, .82); border: 1px solid rgba(226, 184, 90, .55); font: 700 clamp(14px, 2.2vw, 19px)/1.3 var(--caps); letter-spacing: .1em; text-transform: uppercase; color: #FFE6A8; opacity: 0; }
#s1 .announce .chime { font: 600 11px/1 var(--caps); letter-spacing: .28em; color: var(--dim); }

/* ---------------- 2. the lounge car ---------------- */
#s2 .stage { background: #2A120A; }
#s2 .land { overflow: hidden; }
#s2 .land .strip { position: absolute; left: 0; top: 0; bottom: 0; animation: lt-rush 14s linear infinite; }
#s2 .land .strip > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@keyframes lt-rush { from { transform: translateX(0); } to { transform: translateX(-50%); } }
#s2 .chand { transform-box: fill-box; transform-origin: 50% 0; animation: lt-sway 3.6s ease-in-out infinite alternate; } #s2 .chand.c1 { animation-delay: -1.8s; }
@keyframes lt-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
#s2 .note { transform-box: fill-box; animation: lt-note 3s ease-out infinite; opacity: 0; } #s2 .note.n1 { animation-delay: -.75s; } #s2 .note.n2 { animation-delay: -1.5s; } #s2 .note.n3 { animation-delay: -2.25s; }
@keyframes lt-note { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-160%) rotate(12deg); opacity: 0; } }
#s2 .glint { transform-box: fill-box; transform-origin: 50% 50%; animation: lt-glint 1.6s ease-in-out infinite; }
@keyframes lt-glint { 0%, 100% { transform: scale(.2); opacity: .2; } 50% { transform: scale(1.1); opacity: 1; } }
#s2 .peek { animation: lt-peek 1.1s steps(2, end) infinite; }
@keyframes lt-peek { 50% { opacity: .55; } }
/* boarding (the user, 2026-11-08: no gold flash, "just have it automatic transition"): the lounge car starts 115vh early, so it is already pinned on top of the station's last moment,
   and it fades in on its own (lasttrain.js adds .in once the camera has pushed through the carriage door). No split screen, no second glow. */
/* the same for the connecting door from the lounge car into the dance car (the user, 2026-11-08: "Yes, fix it too"): no violet glows, the dance car fades in on its own */
#s2, #s3 { margin-top: -115vh; }
#s2 .stage, #s3 .stage { opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
#s2.in .stage, #s3.in .stage { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
#s2.bandup .pp { animation-duration: .5s !important; }

/* ---------------- 3. the neon dance car ---------------- */
#s3 .stage { background: #05030E; }
#s3 .rib { animation: lt-rib 1.9s steps(1, end) infinite; } #s3 .rib.r1 { animation-delay: -.475s; } #s3 .rib.r2 { animation-delay: -.95s; } #s3 .rib.r3 { animation-delay: -1.425s; }
@keyframes lt-rib { 0%, 100% { opacity: 1; } 25% { opacity: .45; } 50% { opacity: .8; } 75% { opacity: .55; } }
#s3 .led { animation: lt-led .95s steps(1, end) infinite; } #s3 .led.l1 { animation-delay: -.24s; } #s3 .led.l2 { animation-delay: -.48s; } #s3 .led.l3 { animation-delay: -.72s; }
@keyframes lt-led { 0%, 100% { opacity: .6; } 50% { opacity: .15; } }
#s3 .px { animation: lt-led .95s steps(1, end) infinite; } #s3 .px.x1 { animation-delay: -.24s; } #s3 .px.x2 { animation-delay: -.48s; } #s3 .px.x3 { animation-delay: -.72s; }
#s3 .pass { animation: lt-pass .7s linear infinite; } #s3 .pass.s1 { animation-delay: -.23s; } #s3 .pass.s2 { animation-delay: -.46s; }
@keyframes lt-pass { 0%, 100% { opacity: 0; } 30% { opacity: .9; } 60% { opacity: 0; } }
#s3 .beam { transform-box: fill-box; transform-origin: 50% 0; animation: lt-sweep 5s ease-in-out infinite alternate; } #s3 .beam.b1 { animation-duration: 6.6s; animation-direction: alternate-reverse; } #s3 .beam.b2 { animation-duration: 4.4s; } #s3 .beam.b3 { animation-duration: 7.6s; animation-direction: alternate-reverse; }
@keyframes lt-sweep { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
#s3 .eq { animation: lt-led .48s steps(1, end) infinite; }
#s3 .dclock { position: absolute; left: 50%; z-index: 6; margin: 0; transform: translate(-50%, -100%); font: 700 clamp(26px, 6vw, 64px)/1 var(--caps); letter-spacing: .08em; color: #E8FCFF; text-shadow: 0 0 18px #3DE2FF, 0 0 4px #3DE2FF; pointer-events: none; white-space: nowrap; }
#s3 .dclock small { font-size: .5em; color: #D8C8FF; text-shadow: 0 0 12px #B37BFF; }
#s3 .tunnel { background: #000; z-index: 30; overflow: hidden; }
#s3 .tunnel i { position: absolute; top: 0; bottom: 0; width: 14%; background: linear-gradient(90deg, transparent, rgba(255, 210, 140, .6), transparent); animation: lt-tunnel .5s linear infinite; }
#s3 .tunnel i:nth-child(2) { animation-delay: -.17s; } #s3 .tunnel i:nth-child(3) { animation-delay: -.34s; }
@keyframes lt-tunnel { from { transform: translateX(-20vw); } to { transform: translateX(120vw); } }
#s3.boost .pp { animation-duration: .3s !important; } #s3.boost .rib { animation-duration: .6s; }

/* ---------------- 4. the bridge at midnight ---------------- */
#s4 .stage { background: #03031A; }
#s4 canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#s4 .river { overflow: visible; }
#s4 #fw-refl { inset: auto 0 0 0; top: var(--ry, 58%); height: auto; opacity: .55; }
#s4 .citywin { animation: lt-city 6s steps(1, end) infinite; }
@keyframes lt-city { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
#s4 .shim { animation: lt-shim 2.6s ease-in-out infinite alternate; } #s4 .shim.s1 { animation-delay: -.9s; } #s4 .shim.s2 { animation-delay: -1.7s; }
@keyframes lt-shim { from { opacity: .2; } to { opacity: .6; } }
#s4 .blink { animation: lt-blink 1.4s steps(1, end) infinite; } #s4 .blink.b1 { animation-delay: -.7s; }
#s4 .trainl .run { transition: transform 30s linear; }
#s4.counting .trainl .run, #s4.ny .trainl .run { transform: translateX(22vw); }
#s4 .xtrain .wh { animation: lt-spin .6s linear infinite; }
@keyframes lt-spin { to { transform: rotate(360deg); } }
#s4 .sky-tap { position: absolute; inset: 0 0 42% 0; z-index: 12; pointer-events: auto; cursor: crosshair; background: none; border: 0; }
#s4 .black { background: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0, 0, 10, .82) 85%); transition: opacity 1.8s ease; }
#s4.counting .black { opacity: 1; } #s4.ny .black { opacity: .3; }
#s4 .lit { background: radial-gradient(ellipse at 50% 72%, rgba(255, 230, 190, .5), transparent 60%); }
#s4 .out-tunnel { background: #000; opacity: 1; }
#s4 .goldsp i { position: absolute; top: -4vh; width: 4px; height: 4px; border-radius: 50%; background: #FFD27A; box-shadow: 0 0 6px #FFD27A; animation: lt-fall 7s linear infinite; }
@keyframes lt-fall { from { transform: translateY(0); } to { transform: translateY(110vh); } }
#s4 .chant { position: absolute; left: 0; right: 0; top: 18vh; z-index: 24; margin: 0; text-align: center; font: 700 clamp(13px, 2vw, 18px)/1 var(--caps); letter-spacing: .3em; color: var(--dim); opacity: 0; transition: opacity .8s ease; pointer-events: none; }
#s4.counting .chant { opacity: 1; }
#s4 .num { position: absolute; inset: 0; z-index: 24; display: grid; place-items: center; pointer-events: none; }
#s4 .num b { font: 400 clamp(72px, 22vw, 240px)/1 var(--display); color: #FFF4D6; text-shadow: 0 0 40px rgba(255, 210, 122, .65), 0 0 2px #000; opacity: 0; }
#s4 .num b.go { animation: lt-num .78s ease-out both; }
@keyframes lt-num { 0% { opacity: 0; transform: scale(1.35); } 18% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.92); } }
#s4 .say { position: absolute; left: 0; right: 0; top: 16vh; z-index: 24; display: grid; justify-items: center; gap: 2vh; padding: 0 20px; text-align: center; pointer-events: none; }
#s4 .say p { margin: 0; opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1s ease; }
#s4 .say .hny { font: 400 clamp(42px, 9.4vw, 116px)/1 var(--display); color: #FFF4D6; text-shadow: 0 0 30px rgba(255, 210, 122, .6), 0 2px 8px #000; }
#s4 .say .more { font: italic 600 clamp(20px, 3.4vw, 34px)/1.2 var(--body); color: var(--ac2); text-shadow: 0 2px 10px #000; }
#s4 .say p.on { opacity: 1; transform: none; }
#s4 .ctl { position: absolute; left: 0; right: 0; bottom: max(70px, 9vh); z-index: 26; display: flex; justify-content: center; gap: 10px; pointer-events: none; }
#s4 .ctl button { pointer-events: auto; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(226, 184, 90, .6); background: rgba(4, 6, 20, .8); font: 700 13px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
#s4 .ctl button[hidden] { display: none; }
#s4 .still { display: none; }

/* ---------------- 5. the arrival hall and the ticket ---------------- */
#s5 .stage { background: #E8DCC4; }
#s5 .spark { animation: lt-blink 1.8s steps(1, end) infinite; } #s5 .spark.k1 { animation-delay: -.6s; } #s5 .spark.k2 { animation-delay: -1.2s; }
#s5 .sign { position: relative; padding: 10px 22px; border: 2px solid #C9A24A; border-radius: 6px; background: #14100A; font: 700 clamp(13px, 2.4vw, 22px)/1.2 var(--caps); letter-spacing: .24em; color: #FFE6A8; text-shadow: 0 0 12px rgba(255, 210, 122, .8); box-shadow: 0 0 0 4px #14100A, 0 0 0 5px rgba(201, 162, 74, .6), 0 10px 30px rgba(0, 0, 0, .35); max-width: 90vw; }
#s5 .card { position: absolute; left: 50%; top: 56%; z-index: 21; width: min(620px, 92vw); display: grid; grid-template-columns: 1fr auto; transform-origin: 50% 100%; transform: translate(-50%, -50%);
  border-radius: 10px; background: linear-gradient(160deg, #16131A, #07060A 60%, #120F16); border: 1px solid var(--ac); box-shadow: 0 0 0 5px #07060A, 0 0 0 6px rgba(226, 184, 90, .5), 0 30px 80px rgba(0, 0, 0, .55); }
.tk-main { padding: clamp(18px, 3.4vh, 34px) clamp(18px, 4vw, 34px); text-align: center; }
.tk-stub { width: clamp(92px, 18vw, 140px); padding: 18px 12px; display: grid; align-content: center; justify-items: center; gap: 8px; text-align: center; border-left: 2px dotted rgba(226, 184, 90, .55); background: linear-gradient(#1C1810, #0A0806); border-radius: 0 10px 10px 0; }
.tk-stub b { font: 700 12px/1 var(--caps); letter-spacing: .3em; color: var(--ac); }
.tk-stub span { font: 400 clamp(22px, 4vw, 32px)/1 var(--display); color: var(--ac2); }
.tk-stub small { font: italic 500 13px/1.25 var(--body); color: var(--dim); }
.tk-stub em { font: 700 11px/1 var(--caps); letter-spacing: .2em; color: var(--ac); font-style: normal; }
.tl { opacity: 0; transform: translateY(14px); }
.k-list { margin: 0 0 1.2vh; font: italic 600 clamp(17px, 2.6vw, 22px)/1.2 var(--body); color: var(--ac); }
#t-title { margin: 0; font: 400 clamp(32px, 6.4vw, 58px)/1.02 var(--display); color: var(--ac2); letter-spacing: .01em; }
#t-sub { margin: .6vh 0 0; font: 700 clamp(11px, 1.7vw, 14px)/1.3 var(--caps); letter-spacing: .28em; text-transform: uppercase; color: var(--ink); }
#t-invite { margin: 1.6vh auto 0; max-width: 32ch; font: italic 500 clamp(17px, 2.4vw, 21px)/1.35 var(--body); color: var(--dim); }
.route { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 1.8vh 0 1.2vh; font: 700 10px/1.2 var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.route span { display: grid; gap: 4px; } .route b { font: 400 clamp(15px, 2.2vw, 19px)/1 var(--display); letter-spacing: .04em; color: var(--ac2); text-transform: none; }
.route i { width: clamp(40px, 10vw, 90px); height: 2px; background: linear-gradient(90deg, var(--ac), var(--ac2)); position: relative; } .route i::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--ac2); }
.card .when, .card .where { margin: .5vh 0 0; font: 600 clamp(16px, 2.2vw, 19px)/1.35 var(--body); color: var(--ink); }
.card .with { margin: 1.2vh 0 0; font: 700 11px/1.3 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.card .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 2.2vh; }
.btn { min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--ac); background: var(--ac); color: #120E06; font: 700 13px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--ac2); }

/* the details and the reply, below the hall (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(#0A0806, #0E0C14 40%, #04061A); }
.after section { max-width: 640px; margin: 0 auto 8vh; }
.after h2 { margin: 0 0 2vh; font: 400 clamp(30px, 5vw, 46px)/1.05 var(--display); color: var(--ac2); }
.det { margin: 0; display: grid; gap: 0; border-top: 1px solid rgba(226, 184, 90, .3); }
.det > div { display: grid; grid-template-columns: minmax(110px, 32%) 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(226, 184, 90, .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 18px/1.4 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: .14em; text-transform: uppercase; color: var(--dim); }
.f input[type=text] { min-height: 50px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(226, 184, 90, .45); background: #0A0C1C; color: var(--ink); font: 500 18px 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 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(226, 184, 90, .45); font: 700 13px/1.2 var(--caps); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; text-align: center; }
.ans input:checked + span { background: var(--ac); color: #120E06; }
.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); }
#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], #plus-field[hidden], #a-maybe[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: 400 clamp(26px, 4.4vw, 38px)/1.1 var(--display); color: var(--ac2); }
#done p { margin: 0 0 2vh; font: 500 18px/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: .14em; 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: #F6EEDC; color: #1A1210; font: 600 15px/1.3 var(--body); box-shadow: 0 12px 30px rgba(0, 0, 0, .55); transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; animation: lt-bub 2.6s ease both; }
@keyframes lt-bub { 0% { opacity: 0; translate: 0 8px; } 10%, 85% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }

/* ---------------- people move at their own pace (the inner group moves; the outer one places them) ---------------- */
.pp { transform-box: fill-box; transform-origin: 50% 100%; }
/* People never rock side to side or bob up and down (the user, 2026-11-09: "Humans don't do that. Unless they're just jumping"): they stand still; a tap makes one jump (lt-hop below) */
.pp.bob, .pp.sway, .pp.slow, .pp.twirl, #s3 .pp.d0, #s3 .pp.d1, #s3 .pp.d2, #s3 .pp.d3, #s3 .pp.d4 { animation: none; }
.hit.tap .pp { animation: lt-hop .5s ease-out; }
@keyframes lt-hop { 40% { transform: translateY(-6%); } }

/* ---------------- off-screen scenes rest; fewer effects; reduced motion ---------------- */
.sc.off * { animation-play-state: paused !important; }
body.lite #s1 .snow, body.lite .pp, body.lite .drift, body.lite #s3 .pass, body.lite #s4 .shim, body.lite #s2 .note { animation: none !important; }
body.lite #s1 .snow { opacity: .6; }
body.rm .sc { height: auto !important; }
body.rm .stage { position: relative; height: 100vh; height: 100svh; }
body.rm #s2, body.rm #s3 { margin-top: 0; } body.rm #s2 .stage, body.rm #s3 .stage { opacity: 1; visibility: visible; transition: none; }
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.6vw, 44px); }
body.rm .ly, body.rm .ly .part { transform: none !important; }
body.rm .ov:not(.keep) { opacity: 0 !important; }
body.rm #s4 .out-tunnel { opacity: 0 !important; }
body.rm .tl, body.rm #s5 .card { opacity: 1 !important; }
body.rm .tl { transform: none !important; } body.rm #s5 .card { transform: translate(-50%, -50%) !important; }
body.rm #s1 .announce { opacity: 1 !important; }
body.rm * { animation: none !important; transition-duration: .01ms !important; }
body.rm #s4 .still { display: block; } body.rm #s4 canvas, body.rm #s4 .num, body.rm #s4 .ctl, body.rm #s4 .sky-tap, body.rm #s4 .chant { display: none; }
body.rm #s4 .say p { opacity: 1; transform: none; } body.rm #s4 .black { opacity: .3; } body.rm #s3 .tunnel { display: none; }
body.rm #s1 .dl, body.rm #s1 .dr, body.rm #s2 .env { transform: none !important; }
@media (max-width: 640px) {
  .ln { font-size: clamp(26px, 8.4vw, 42px); }
  #s5 .card { grid-template-columns: 1fr; top: 58%; }
  .tk-stub { width: auto; grid-auto-flow: column; padding: 10px 14px; border-left: 0; border-top: 2px dotted rgba(226, 184, 90, .55); border-radius: 0 0 10px 10px; }
  .tk-stub small { display: none; }
  .det > div { grid-template-columns: 1fr; gap: 4px; }
}