/* Not My Event: the look of "The Birthday Trial" (public/templates/birthday-trial.html). One page that scrolls DOWN through five places of one court case. Each scene is a section with a
   pinned picture behind it (.stage, drawn by trial-art.js for the size of the screen) and its words and toys in front (.flow), which simply scroll: nothing is clipped on a small phone and
   nothing has to be finished to go on. The scroll frame in trial.js writes only transform and opacity on a few layers. Walnut, brass and velvet; then the same courtroom in party colors. */
:root { --ac: #D8AE56; --ac2: #F6E3A6; --wine: #8E1A30; --ink: #2A1C14; --mono: 'Courier Prime', 'Courier New', ui-monospace, monospace; --head: 'Anton', 'Arial Narrow', Impact, sans-serif; --roman: 'Cinzel', Georgia, serif; --serif: 'Libre Baskerville', Georgia, serif; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #3A2012; color: #fff; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.45; overflow-x: clip; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 9100; background: #fff; color: #000; padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid #57C7F2; outline-offset: 3px; }

/* ---------- the two controls at the top, the details pill, the sound hint ---------- */
#menu-wrap { position: fixed; left: 10px; top: 10px; z-index: 9040; }
#b-menu { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(26, 14, 8, .86); color: #fff; font-family: var(--roman); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; }
#menu { margin-top: 8px; display: grid; gap: 6px; padding: 8px; border-radius: 14px; background: rgba(26, 14, 8, .97); border: 1px solid rgba(255, 255, 255, .25); min-width: 210px; }
#menu button { min-height: 44px; text-align: left; padding: 0 12px; border-radius: 9px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font-size: 15px; }
#menu button[aria-pressed="true"] { background: var(--ac); color: #1A1408; }
#ev-pill { position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9030; min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .45); background: rgba(26, 14, 8, .88); color: #fff; font-size: 13px; letter-spacing: .04em; }
#snd-hint { position: fixed; left: 50%; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 48px); transform: translateX(-50%); z-index: 9030; padding: 6px 12px; border-radius: 14px; background: rgba(26, 14, 8, .88); color: #fff; font-size: 12px; white-space: nowrap; transition: opacity .4s; pointer-events: none; }
#snd-hint.gone { opacity: 0; }
.bub { position: fixed; z-index: 9020; transform: translate(-50%, -110%); max-width: 240px; padding: 9px 12px; border-radius: 12px; background: #fff; color: #16121E; font-size: 14px; line-height: 1.3; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); animation: bub 2.5s ease both; pointer-events: none; }
@keyframes bub { 0% { opacity: 0; transform: translate(-50%, -90%); } 10%, 85% { opacity: 1; transform: translate(-50%, -110%); } 100% { opacity: 0; } }

/* ---------- a scene: a pinned picture, and the words in front ---------- */
.sc { position: relative; }
#s1 { background: #2A160C; } #s2 { background: #4A2A14; } #s3 { background: #1A0E14; } #s4 { background: #2A160C; } #s5 { background: #16241C; }
.stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; z-index: 0; }
.flow { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100lvh; }
/* the words lie over the picture, but only the words take taps: the gaps between them let a tap through to the things in the picture */
.flow, .beat, #witnesses { pointer-events: none; }
.beat > * { pointer-events: auto; }
.ly, .ov { position: absolute; inset: 0; pointer-events: none; }
.ly svg { display: block; width: 100%; height: 100%; }
.ov { opacity: 0; }
.hit { pointer-events: auto; cursor: pointer; }
.beat { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 76px 16px 70px; text-align: center; }
.beat.tall { min-height: 135vh; justify-content: flex-start; padding-top: 16vh; }
.beat.out { min-height: 70vh; justify-content: flex-end; padding-bottom: 22vh; }
.cue { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; border-radius: 16px; background: rgba(26, 14, 8, .86); color: #fff; }
.cue::after { content: '  ↓'; }
.linkish { background: none; border: 0; padding: 10px 8px; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; color: inherit; opacity: .9; }
.minor { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.fine { font-size: 12px; opacity: .78; }
.status { font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: .04em; min-height: 1.4em; }
.plate { font-family: var(--roman); font-weight: 800; letter-spacing: .16em; font-size: clamp(11px, 3.2vw, 14px); padding: 8px 16px; border-radius: 4px; background: linear-gradient(180deg, #F6E3A6, #C0933C 50%, #8E6A24 56%, #D8AE56); color: #2A1C08; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
.unit { width: 100%; max-width: 620px; padding: 22px 18px 14px; border-radius: 12px; display: grid; gap: 14px; justify-items: center; }
.unit h2 { font-family: var(--roman); font-weight: 800; font-size: clamp(22px, 6vw, 32px); letter-spacing: .03em; line-height: 1.12; }
.unit .how { font-size: 15px; max-width: 32em; }
.unit.wood { background: linear-gradient(180deg, #6A4022, #4A2A14); border: 3px solid #C0933C; box-shadow: 0 14px 40px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .15); }
.unit.leather { background: rgba(22, 50, 38, .94); border: 3px solid #C0933C; box-shadow: 0 14px 40px rgba(0, 0, 0, .5); max-width: 760px; }
.head { font-family: var(--roman); font-weight: 800; font-size: clamp(30px, 8.4vw, 60px); line-height: 1.06; letter-spacing: .02em; max-width: 14em; color: #FFF3D6; text-shadow: 0 3px 12px rgba(0, 0, 0, .7); }
.order { font-family: var(--head); font-weight: 400; font-size: clamp(34px, 10vw, 76px); line-height: 1.02; letter-spacing: .02em; text-transform: uppercase; max-width: 11em; color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .4), 0 0 30px rgba(0, 0, 0, .5); }
.tagline { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 4.6vw, 22px); max-width: 26em; padding: 8px 14px; border-radius: 8px; background: rgba(26, 14, 8, .78); overflow-wrap: anywhere; }
.say { max-width: 32em; font-family: var(--serif); font-size: clamp(15px, 4.2vw, 19px); line-height: 1.4; padding: 10px 14px; border-radius: 10px; background: rgba(26, 14, 8, .88); color: #fff; border-left: 4px solid var(--ac); text-align: left; overflow-wrap: anywhere; }
.say.in { background: rgba(0, 0, 0, .3); }
.say.in:empty { display: none; }
.say .who { display: block; font-family: var(--mono); font-weight: 700; font-size: .72em; letter-spacing: .12em; color: var(--ac2); }
.btn-oath { min-height: 54px; padding: 8px 22px; border-radius: 8px; border: 2px solid #2A1C08; background: linear-gradient(180deg, #F6E3A6, #C0933C); color: #2A1C08; font-family: var(--head); font-size: clamp(19px, 5.4vw, 26px); letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 5px 0 #5A430F; }
.btn-oath:active { transform: translateY(3px); box-shadow: 0 2px 0 #5A430F; }
.done-line { font-family: var(--mono); font-weight: 700; color: var(--ac2); font-size: 15px; }

/* ---------- 1. court is in session ---------- */
.casefile { position: relative; width: 100%; max-width: 520px; padding: 26px 18px 18px; background: #E9CF94; color: var(--ink); border-radius: 4px 10px 6px 6px; box-shadow: 0 16px 30px rgba(0, 0, 0, .5), inset 0 0 0 8px #DDBE7C; transform: rotate(-1.4deg); display: grid; gap: 8px; }
.cf-tab { position: absolute; left: 16px; top: -22px; padding: 5px 14px 3px; background: #DDBE7C; border-radius: 8px 8px 0 0; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .16em; }
.cf-vs { font-family: var(--roman); font-weight: 800; font-size: clamp(20px, 6vw, 32px); line-height: 1.15; overflow-wrap: anywhere; }
.cf-vs i { font-family: var(--serif); font-weight: 400; font-size: .7em; }
.cf-vs b { display: block; font-size: 1.3em; color: var(--wine); }
.cf-no, .cf-charge { font-family: var(--mono); font-weight: 700; font-size: clamp(13px, 3.8vw, 16px); letter-spacing: .08em; }
.cf-charge b { color: var(--wine); }
/* the photo of the accused, paper-clipped to the case file: the host's own picture, or (on the sample and in the editor) a drawn stand-in */
.cf-words { display: grid; gap: 8px; min-width: 0; }
.casefile.pic { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); column-gap: 18px; align-items: center; }
.cf-photo { position: relative; margin: 0; padding: 7px 7px 5px; background: #FFFDF4; box-shadow: 0 6px 12px rgba(0, 0, 0, .4); transform: rotate(-3deg); display: grid; gap: 4px; }
.cf-pic { display: block; aspect-ratio: 1; background: #C9C4B4; overflow: hidden; }
.cf-pic img, .cf-pic svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.cf-photo figcaption { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-align: center; color: var(--ink); }
.cf-clip { position: absolute; top: -13px; left: 20px; width: 14px; height: 36px; border: 3px solid #8A9098; border-radius: 8px; z-index: 1; }
@media (max-width: 479px) { .casefile.pic { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 12px; } .cf-photo { width: min(190px, 64%); } }
.gavel-btn { width: min(260px, 70vw); padding: 10px 12px 4px; border-radius: 22px; border: 3px solid #C0933C; background: radial-gradient(ellipse at 50% 30%, #8A5A30, #4A2A14); box-shadow: 0 8px 0 #2A160C, 0 18px 30px rgba(0, 0, 0, .4); transition: transform .08s, box-shadow .08s; touch-action: manipulation; }
.gavel-btn:active, .gavel-btn.hold { transform: translateY(5px); box-shadow: 0 3px 0 #2A160C; }
.gavel-btn svg { display: block; width: 100%; height: auto; }
.gv-head { transform-origin: 196px 108px; transform: rotate(-16deg); }
.gavel-btn.hold .gv-head { transform: rotate(-34deg); transition: transform .5s ease-out; }
.gavel-btn.bang .gv-head { animation: bang .42s cubic-bezier(.5, 0, .9, .4); }
@keyframes bang { 0% { transform: rotate(-30deg); } 45% { transform: rotate(13deg); } 60% { transform: rotate(8deg); } 100% { transform: rotate(-16deg); } }
.gv-bang { opacity: 0; }
.gavel-btn.bang .gv-bang { animation: flashout .42s ease-out; }
@keyframes flashout { 0%, 35% { opacity: 0; } 46% { opacity: 1; } 100% { opacity: 0; } }
.stage.shake { animation: shake .3s ease-out; }
@keyframes shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(0, 4px); } 50% { transform: translate(0, -3px); } 75% { transform: translate(0, 2px); } }
.badge { padding: 14px 26px 12px; border-radius: 12px 12px 50% 50% / 12px 12px 30% 30%; background: linear-gradient(180deg, #F6E3A6, #C0933C 60%, #8E6A24); color: #2A1C08; box-shadow: 0 6px 0 #5A430F, 0 14px 24px rgba(0, 0, 0, .4); animation: slam .4s cubic-bezier(.2, 1.5, .4, 1) both; }
.b-top { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .2em; } .b-no { font-family: var(--head); font-size: clamp(30px, 9vw, 46px); line-height: 1.05; letter-spacing: .04em; } .b-sub { font-family: var(--serif); font-style: italic; font-size: 13px; padding-bottom: 8px; }
@keyframes slam { from { opacity: 0; transform: scale(2.4) rotate(-6deg); } to { opacity: 1; transform: none; } }

/* ---------- 2. the evidence ---------- */
.folders { width: 100%; display: grid; gap: 12px 10px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (min-width: 620px) { .folders { grid-template-columns: repeat(3, 1fr); } }
.fold { position: relative; width: 100%; min-height: 150px; padding: 18px 8px 10px; border: 0; border-radius: 3px 10px 5px 5px; background: #E9CF94; color: var(--ink); box-shadow: 0 5px 12px rgba(0, 0, 0, .45), inset 0 0 0 5px #DDBE7C; display: grid; gap: 4px; justify-items: center; align-content: start; font-family: var(--serif); font-size: 13.5px; line-height: 1.25; transition: transform .2s; }
.folders li:nth-child(odd) .fold { transform: rotate(-1.2deg); } .folders li:nth-child(even) .fold { transform: rotate(1deg); }
.fold svg { width: min(100%, 112px); height: auto; display: block; }
.fold .ex { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .14em; color: var(--wine); }
.fold .tx { overflow-wrap: anywhere; }
.fold[aria-pressed="true"] { background: #FFF3D0; box-shadow: 0 5px 12px rgba(0, 0, 0, .45), inset 0 0 0 5px #E0C88A, 0 0 0 3px var(--wine); transform: rotate(0) !important; }
.fold[aria-pressed="true"]::after { content: 'ADMITTED'; position: absolute; right: 6px; top: 34px; font-family: var(--head); font-size: 17px; letter-spacing: .06em; color: var(--wine); border: 3px solid var(--wine); border-radius: 5px; padding: 0 6px; background: rgba(255, 243, 208, .82); transform: rotate(-13deg); animation: slam .35s cubic-bezier(.2, 1.5, .4, 1) both; }
.fold:disabled { opacity: .5; }

/* ---------- 3. the witnesses ---------- */
.head.light { color: #FFF3D6; }
.cue.light { background: rgba(255, 255, 255, .16); }
.beat.wit { gap: 10px; }
.w-pic { width: min(46vw, 210px); filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .5)); }
.w-pic svg { display: block; width: 100%; height: auto; }
.wit.on .w-pic { animation: arrive .5s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(30px) scale(.9); } }
.w-name { font-family: var(--roman); font-weight: 800; letter-spacing: .14em; font-size: clamp(13px, 3.8vw, 17px); padding: 6px 16px; border-radius: 4px; background: linear-gradient(180deg, #F6E3A6, #C0933C 50%, #8E6A24 56%, #D8AE56); color: #2A1C08; }
.w-line { max-width: 30em; font-family: var(--mono); font-weight: 700; font-size: clamp(15px, 4.3vw, 20px); line-height: 1.4; padding: 14px 16px; background: #FBF3DC; color: var(--ink); border-radius: 3px; box-shadow: 0 8px 18px rgba(0, 0, 0, .4); text-align: left; overflow-wrap: anywhere; clip-path: inset(0 0 100% 0); }
.wit.on .w-line { clip-path: inset(0 0 0 0); transition: clip-path .9s steps(8) .35s; }
.w-line small { display: block; font-size: 11px; letter-spacing: .14em; color: #8E6A24; margin-bottom: 4px; }
.btn-object { min-height: 50px; padding: 6px 22px; border-radius: 25px; border: 3px solid #fff; background: var(--wine); color: #fff; font-family: var(--head); font-size: 22px; letter-spacing: .08em; box-shadow: 0 5px 0 #4A0A18; }
.btn-object:active { transform: translateY(3px); box-shadow: 0 2px 0 #4A0A18; }
.btn-object[aria-pressed="true"] { opacity: .6; box-shadow: 0 2px 0 #4A0A18; transform: translateY(3px); }
.wit.surprise .w-name { background: var(--wine); color: #fff; }
.folder i { position: absolute; inset: 0; background: #E9CF94; box-shadow: inset 0 0 0 14px #DDBE7C; transform-origin: 50% 0; }
.folder b { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-family: var(--head); font-weight: 400; font-size: clamp(28px, 8vw, 60px); line-height: 1.1; letter-spacing: .05em; color: var(--wine); opacity: 0; transform: rotate(-5deg); }
.folder { opacity: 1; }
.folder i { transform: scaleY(0); }

/* ---------- 4. the verdict, and the party ---------- */
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wig, .phat, .armsup { transition: opacity .6s; }
.phat, .armsup { opacity: 0; }
#s4.party .wig { opacity: 0; } #s4.party .phat, #s4.party .armsup { opacity: 1; }
#s4 .lights, #s4 .tables { opacity: 0; transition: opacity 1.2s; }
#s4.party .lights, #s4.party .tables { opacity: 1; }
#s4 .gallery { transition: opacity 1s; } #s4.party .gallery { opacity: 0; }
#s4 .banner { transform: translateY(-60%); opacity: 0; transition: transform .9s cubic-bezier(.3, 1.4, .5, 1) .3s, opacity .2s .3s; }
#s4.party .banner { transform: none; opacity: 1; }
#s4 .dark { background: #16241C; }
#s4 .scroll { opacity: 0; }
.verdicts { width: 100%; display: grid; gap: 9px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .verdicts { grid-template-columns: 1fr 1fr; } }
.v-b { min-height: 56px; padding: 9px 12px; border-radius: 8px; border: 2px solid #C0933C; background: #FBF3DC; color: var(--ink); font-family: var(--serif); font-weight: 700; font-size: 16px; line-height: 1.25; box-shadow: 0 4px 0 #8E6A24; overflow-wrap: anywhere; }
.v-b:active { transform: translateY(3px); box-shadow: 0 1px 0 #8E6A24; }
.v-b[aria-pressed="true"] { background: var(--wine); border-color: #fff; color: #fff; box-shadow: 0 1px 0 #4A0A18; transform: translateY(3px); }
.v-b:disabled:not([aria-pressed="true"]) { opacity: .45; box-shadow: none; }
.guilty { font-family: var(--head); font-size: clamp(34px, 10.4vw, 84px); line-height: 1.02; letter-spacing: .03em; max-width: 11em; color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .45), 0 0 34px rgba(255, 111, 192, .5); opacity: 0; transform: scale(.6); }
.guilty span { display: block; } .guilty .gold { color: #FFD36A; font-size: .62em; }
.sentence { max-width: 30em; font-family: var(--serif); font-size: clamp(16px, 4.5vw, 20px); padding: 10px 16px; border-radius: 8px; background: rgba(26, 14, 8, .86); opacity: 0; overflow-wrap: anywhere; }
.sentence b { font-family: var(--mono); letter-spacing: .12em; color: #FFD36A; }
.adj { opacity: 0; }
#s4.party .guilty { opacity: 1; transform: none; transition: opacity .3s, transform .5s cubic-bezier(.2, 1.4, .4, 1); }
#s4.party .sentence { opacity: 1; transition: opacity .5s .9s; } #s4.party .adj { opacity: 1; transition: opacity .5s 1.6s; }
.linkish.light { color: #fff; }

/* ---------- 5. the summons ---------- */
#s5 .beat { padding-top: 100px; }
.summons { position: relative; width: 100%; max-width: 600px; padding: clamp(30px, 7vw, 46px) clamp(16px, 5vw, 40px) clamp(20px, 5vw, 34px); display: grid; gap: 11px; justify-items: center; color: var(--ink); font-family: var(--serif); background: linear-gradient(90deg, rgba(120, 90, 30, .12), transparent 14%, transparent 86%, rgba(120, 90, 30, .14)), repeating-linear-gradient(0deg, rgba(120, 90, 30, .04) 0 1px, transparent 1px 5px), #F3E6C4; border: 1px solid #B89A5A; box-shadow: inset 0 0 0 6px #F3E6C4, inset 0 0 0 8px #B89A5A, 0 26px 50px rgba(0, 0, 0, .55); border-radius: 3px; }
.s-seal { position: absolute; right: clamp(8px, 3vw, 22px); top: -34px; width: 78px; transform: rotate(10deg); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .4)); }
.s-seal svg { display: block; width: 100%; height: auto; }
.s-top { font-family: var(--mono); font-weight: 700; font-size: clamp(11px, 3.1vw, 14px); letter-spacing: .2em; color: var(--wine); }
#t-title { font-family: var(--roman); font-weight: 800; font-size: clamp(21px, 6vw, 34px); line-height: 1.18; letter-spacing: .02em; overflow-wrap: anywhere; }
.summons .rule { width: 60%; height: 3px; background: linear-gradient(90deg, transparent, #8E6A24, transparent); }
.summons .when { font-weight: 700; font-size: clamp(17px, 4.8vw, 21px); }
.summons .where { font-size: clamp(15px, 4.3vw, 18px); overflow-wrap: anywhere; }
.summons .dress, .summons .with { font-size: 15px; font-style: italic; overflow-wrap: anywhere; }
.summons .closing { font-style: italic; font-size: clamp(15px, 4.2vw, 18px); color: #6B4F12; overflow-wrap: anywhere; }
.acts, .row-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 22px; border-radius: 6px; border: 2px solid var(--ac); background: var(--ac); color: #14100A; font-weight: 700; font-size: 16px; letter-spacing: .03em; font-family: system-ui, sans-serif; }
.btn.ghost { background: transparent; color: var(--ac); }
.summons .btn { border-color: var(--ink); background: var(--ink); color: #F6E3A6; } .summons .btn.ghost { background: transparent; color: var(--ink); }
.btn:disabled { opacity: .5; }

/* ---------- the details, the reply, the verdict card ---------- */
.after { position: relative; z-index: 2; background: #16241C; color: #F6EFDD; padding: 30px 16px calc(96px + env(safe-area-inset-bottom)); display: grid; gap: 34px; justify-items: center; }
.after section { width: 100%; max-width: 560px; display: grid; gap: 14px; }
.after h2 { font-family: var(--roman); font-weight: 800; font-size: 26px; color: var(--ac); }
.det { display: grid; gap: 11px; }
.det div { display: grid; gap: 1px; padding-bottom: 10px; border-bottom: 1px solid rgba(216, 174, 86, .25); }
.det dt { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ac); }
.det dd { font-size: 17px; overflow-wrap: anywhere; }
.row-acts { justify-content: flex-start; }
.going { font-family: var(--mono); font-size: 14px; color: var(--ac2); }
#rsvp-form { display: grid; gap: 14px; }
.f { display: grid; gap: 6px; font-size: 14px; color: #D8CFB8; }
.f input[type="text"], .f textarea { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(216, 174, 86, .6); background: #0E1812; color: #fff; font: inherit; font-size: 16px; }
.ans { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.ans label { display: flex; gap: 10px; align-items: center; min-height: 54px; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(216, 174, 86, .45); background: #0E1812; font-size: 16px; cursor: pointer; }
.ans label:has(input:checked) { border-color: var(--ac); background: #20301F; box-shadow: inset 0 0 0 1px var(--ac); }
.ans input { width: 20px; height: 20px; accent-color: var(--ac); flex: none; }
.ans b { color: var(--ac2); font-family: var(--roman); letter-spacing: .04em; }
.step { display: flex; align-items: center; gap: 14px; }
.step button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ac); background: transparent; color: var(--ac); font-size: 22px; }
.step output { min-width: 1.5em; text-align: center; font-size: 20px; color: #fff; }
#err { min-height: 1.3em; font-size: 14px; color: #D8CFB8; } #err.err { color: #FF9AA2; }
#done { display: grid; gap: 8px; padding: 18px; border-radius: 10px; border: 1px solid var(--ac); background: #0E1812; justify-items: start; }
.r-stamp span { display: inline-block; font-family: var(--head); font-size: clamp(24px, 7vw, 36px); letter-spacing: .06em; line-height: 1.1; color: #FF8A98; border: 4px solid #FF8A98; border-radius: 8px; padding: 2px 12px; transform: rotate(-4deg); animation: slam .4s cubic-bezier(.2, 1.5, .4, 1) both; }
#done-t { font-family: var(--roman); font-weight: 800; font-size: 22px; color: var(--ac2); } #done-t:focus { outline: none; }
#r-closed { padding: 14px; border-radius: 10px; background: #0E1812; }
#card { text-align: center; justify-items: center; padding: 24px 16px; border: 3px double var(--ac); border-radius: 6px; background: radial-gradient(ellipse at 50% 0, rgba(216, 174, 86, .16), transparent 70%), #0E1812; }
#card .c-top { font-family: var(--mono); font-weight: 700; letter-spacing: .16em; font-size: 11.5px; color: var(--ac); }
.c-v { font-family: var(--serif); font-size: 17px; max-width: 26em; }
.c-acts { justify-content: center; }
.foot { font-size: 12px; opacity: .65; text-align: center; max-width: 30em; }

/* ---------- the small motion in the pictures (slow, and never a strobe) ---------- */
.mote { animation: drift 9s ease-in-out infinite alternate; } .mote.d { animation-duration: 12s; animation-delay: -4s; }
@keyframes drift { from { transform: translate(0, 0); opacity: .2; } 50% { opacity: .8; } to { transform: translate(14px, -26px); opacity: .3; } }
.beam { animation: sway 8s ease-in-out infinite alternate; } .beam.b1 { animation-duration: 9.5s; animation-delay: -3s; } .beam.b2 { animation-duration: 7s; animation-delay: -5s; } .beam.b3 { animation-duration: 10s; animation-delay: -1s; }
@keyframes sway { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.spot { animation: sway 11s ease-in-out infinite alternate; }
.flm { transform-box: fill-box; transform-origin: 50% 100%; animation: flick .5s ease-in-out infinite alternate; } .flm.d { animation-delay: -.25s; }
@keyframes flick { from { transform: scale(.9, .94); } to { transform: scale(1.06, 1.1); } }
.ring { animation: ringing 1.4s steps(2, jump-none) infinite; }
@keyframes ringing { from { opacity: 1; } to { opacity: .3; } }
/* the judge's one dance move: both arms up, tipping a little from the shoulders; the judge does not move */
#s4.party .armsup { transform-origin: 0 -30px; animation: arms 1.1s ease-in-out infinite alternate; }
@keyframes arms { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.hit.tap { animation: tap .4s ease; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes tap { 40% { transform: scale(1.12); } }
/* a scene off the screen rests */
.sc.off .stage *, .sc.off .flow * { animation-play-state: paused !important; }

/* ---------- reduced motion: every word and control stays; the camera, the shake, the confetti and the lights go ---------- */
body.rm *, body.rm *::before, body.rm *::after { animation: none !important; transition: none !important; }
body.rm .ov, body.rm .outside, body.rm #confetti, body.rm #s4 .scroll, body.rm #s4 .lights { display: none; }
body.rm .w-line { clip-path: none; }
body.rm .beat.tall { min-height: 100vh; }
@media (max-width: 380px) { .beat { padding-left: 10px; padding-right: 10px; } .unit { padding: 18px 10px 12px; } .fold { font-size: 12.5px; } }