/* Not My Event: the look of "The Thanksgiving Family Meeting" (public/templates/thanksgiving-family-meeting.html), a five-scene Thanksgiving invitation that treats a warm family dinner with absurd
   committee formality: a lit porch and a cream envelope, an agenda on a walnut desk, an overhead table, a kitchen island, the dinner at golden hour.
   Golden-hour walnut, cream paper, burgundy, olive, brass. Serif headlines (Cormorant Garamond), a clean sans for the controls (DM Sans), handwriting for the marginalia (Caveat).
   Only transform and opacity are animated, nothing blurs, and every animation is switched off by the page's .rm class (reduced motion, or the host's "perfectly still"). */
:root {
  --walnut: #3E2616; --walnut2: #5B3A22; --cream: #F4E8D0; --cream2: #EAD9B6; --paper: #F7EFDC; --burg: #6E1F2D; --burg2: #8A2B3B; --olive: #6B7240; --brass: #B8913E; --brass2: #D9B866;
  --copper: #B3693A; --ink: #2B1A10; --glow: #FFE9A8; --ui: rgba(28, 16, 9, .86); --hair: rgba(43, 26, 16, .18);
  --f-title: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
}
body[data-preset="plum"] { --burg: #4F2150; --burg2: #6C3470; --olive: #5B6B4C; --brass: #C9A24B; --brass2: #E0C070; }
body[data-preset="forest"] { --burg: #2F5A3E; --burg2: #3F7352; --olive: #7A6A38; --brass: #B8913E; --brass2: #D9B866; }

* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow: hidden; background: #1d110a; color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 8px; top: -64px; z-index: 200; padding: 12px 18px; background: var(--brass2); color: var(--ink); font-weight: 700; text-decoration: none; border-radius: 10px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--brass2); outline-offset: 3px; }
.art { display: block; width: 100%; height: 100%; }

/* ---------- Buttons, chips and the things that float over every scene ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: linear-gradient(#E4C46E, #B8913E); color: #2B1A10; font-weight: 700; font-size: 16px; letter-spacing: .01em; box-shadow: 0 3px 0 #7a5a1c, 0 10px 18px -8px rgba(0, 0, 0, .6); text-decoration: none; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #7a5a1c; }
.btn.ghost { background: rgba(247, 239, 220, .12); color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(244, 232, 208, .55); }
.btn.paper { background: var(--paper); color: var(--burg); box-shadow: inset 0 0 0 1.5px var(--burg); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(244, 232, 208, .5); background: var(--ui); color: var(--cream); font-size: 14px; font-weight: 600; }
.linkish { background: none; border: 0; padding: 10px 6px; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.hud { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: max(10px, env(safe-area-inset-top, 0px)) 66px 0 max(10px, env(safe-area-inset-left, 0px)); pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-btn { min-width: 44px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid rgba(244, 232, 208, .55); background: var(--ui); color: var(--cream); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.dots { display: flex; align-items: center; gap: 0; margin-left: auto; }
.dot { width: 36px; height: 44px; display: grid; place-items: center; background: none; border: 0; padding: 0; }
.dot::before { content: ""; width: 10px; height: 10px; border-radius: 99px; background: rgba(244, 232, 208, .5); box-shadow: 0 0 0 1.5px rgba(28, 16, 9, .7); transition: width .25s, background .25s; }
.dot[aria-current="step"]::before { width: 26px; background: var(--brass2); }
.dock { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 10px; padding: 14px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: linear-gradient(rgba(20, 10, 5, 0), rgba(20, 10, 5, .72)); pointer-events: none; }
.dock > * { pointer-events: auto; }
.pill { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(244, 232, 208, .6); background: var(--ui); color: var(--cream); font-weight: 600; font-size: 15px; }
.pill.pri { background: linear-gradient(#E4C46E, #B8913E); color: #2B1A10; border-color: #7a5a1c; font-weight: 700; }
#cap { position: fixed; z-index: 60; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; max-width: 86vw; padding: 8px 14px; border-radius: 10px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 14px; font-style: italic; opacity: 0; pointer-events: none; transition: opacity .2s; text-align: center; }
#cap.on { opacity: 1; }
#net { position: fixed; z-index: 120; left: 0; right: 0; top: 0; padding: 10px 16px; background: #8a2b3b; color: #fff; text-align: center; font-weight: 600; font-size: 14px; }
body.cine-on .hud, body.cine-on .dock { visibility: hidden; }
body.busy #stage { pointer-events: none; }

/* ---------- Scenes: each one is a full picture with its own scrolling layer on top ---------- */
#stage { position: fixed; inset: 0; }
.scene { position: absolute; inset: 0; overflow: hidden; display: none; background: var(--walnut); color: var(--cream); }
.scene.on { display: block; }
.scene.z1 { z-index: 1; } .scene.z2 { z-index: 2; }
.bg { position: absolute; inset: 0; }
.shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(0, 0, 0, .35) 100%); }
.scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: calc(64px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) calc(96px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; align-items: center; }
.col { width: 100%; max-width: 560px; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.scene:focus { outline: none; }
.eyebrow { font-family: var(--f-body); font-weight: 700; font-size: 12.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--brass2); text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.h2 { font-family: var(--f-title); font-weight: 700; font-size: clamp(30px, 8.4vw, 44px); line-height: 1.02; text-align: center; letter-spacing: .01em; }
.lead { font-size: 16px; color: rgba(244, 232, 208, .92); text-align: center; max-width: 30em; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.hand { font-family: var(--f-hand); font-weight: 600; }
.card { width: 100%; background: var(--paper); color: var(--ink); border-radius: 6px; padding: 20px 18px; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(184, 145, 62, .35); }
.card h3 { font-family: var(--f-title); font-weight: 700; font-size: 25px; line-height: 1.1; color: var(--burg); }

/* ---------- The opening camera: the porch, the door, the dining room ---------- */
#cine { position: fixed; inset: 0; z-index: 80; background: #130a06; display: none; overflow: hidden; }
#cine.on { display: block; animation: cineout .5s ease 3.25s forwards; }
.cine-porch, .cine-room { position: absolute; inset: 0; }
.cine-porch { transform-origin: 50% 46%; animation: porchpush 3.2s cubic-bezier(.45, 0, .55, 1) both; }
.cine-room { transform-origin: 50% 60%; opacity: 0; animation: roompush 3.2s ease-in-out both; }
.cine-porch .p-door { transform-box: view-box; transform-origin: 126px 340px; animation: dooropen .9s ease-in-out .9s both; }
.cine-porch .p-spill { opacity: 0; animation: fadein .7s ease-out 1.4s both; }
.cine-porch .p-room { opacity: 1; }
#cine-skip { position: absolute; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.cine-cap { position: absolute; left: 0; right: 0; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); text-align: center; font-family: var(--f-hand); font-size: 26px; color: var(--cream); text-shadow: 0 2px 6px rgba(0, 0, 0, .8); animation: capin 3.2s both; padding: 0 20px; }
@keyframes porchpush { 0% { transform: scale(1); opacity: 1; } 45% { transform: scale(1.35); opacity: 1; } 72% { transform: scale(3.4); opacity: 1; } 100% { transform: scale(4.2); opacity: 0; } }
@keyframes roompush { 0%, 55% { transform: scale(1.5); opacity: 0; } 78% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes dooropen { to { transform: scaleX(.08) skewY(-5deg); } }
@keyframes cineout { to { opacity: 0; visibility: hidden; } }
@keyframes capin { 0% { opacity: 0; transform: translateY(8px); } 12%, 60% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; } }
@keyframes fadein { to { opacity: 1; } }
@keyframes envdrop { from { opacity: 0; transform: perspective(700px) translateY(-46px) rotateX(20deg); } }
@keyframes sealbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* ---------- Scene 1: the official summons ---------- */
.sc1 { gap: 14px; }
/* the living room is light, so the words on it are dark */
#s-intro .eyebrow { color: var(--burg); text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
#s-intro .hint { color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
#s-intro .btn.ghost { color: var(--burg); background: rgba(247, 239, 220, .78); box-shadow: inset 0 0 0 1.5px var(--burg); }
.notice { position: relative; width: min(94vw, 520px); background: var(--paper) repeating-linear-gradient(transparent 0 31px, rgba(110, 31, 45, .09) 31px 32px); color: var(--ink); border-radius: 4px; padding: 26px 22px 22px; text-align: center; box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(184, 145, 62, .45); transform-origin: 50% 100%; }
.notice.unfold { animation: unfold .85s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes unfold { from { opacity: 0; transform: perspective(800px) rotateX(-70deg) scale(.6); } to { opacity: 1; transform: none; } }
.n-kick { font-weight: 700; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--burg); }
.n-title { font-family: var(--f-title); font-weight: 700; font-size: clamp(26px, 7.4vw, 38px); line-height: 1.04; letter-spacing: .015em; margin: 8px 0 10px; color: var(--ink); text-wrap: balance; }
.n-sub { font-family: var(--f-title); font-style: italic; font-weight: 500; font-size: clamp(20px, 5.4vw, 25px); line-height: 1.2; color: var(--burg); text-wrap: balance; }
.n-micro { font-family: var(--f-hand); font-weight: 600; font-size: clamp(21px, 5.6vw, 25px); line-height: 1.2; margin: 12px 0 16px; color: #4a2c1a; }
.egg { position: absolute; right: 8px; bottom: 74px; transform: rotate(-12deg) scale(1.7); opacity: 0; padding: 5px 9px; border: 3px double var(--burg); border-radius: 4px; color: var(--burg); font-weight: 800; font-size: 11.5px; line-height: 1.15; letter-spacing: .12em; text-transform: uppercase; text-align: center; pointer-events: none; mix-blend-mode: multiply; }
.egg.on { opacity: .92; transform: rotate(-12deg) scale(1); transition: transform .28s cubic-bezier(.2, 1.5, .4, 1), opacity .12s; }
.env { position: relative; width: min(78vw, 340px); aspect-ratio: 300 / 220; margin-top: 6px; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out, width .6s cubic-bezier(.3, .8, .3, 1), margin-top .6s cubic-bezier(.3, .8, .3, 1); animation: envdrop .8s cubic-bezier(.2, .9, .3, 1) .05s both; }
.env .art { width: 100%; height: 100%; overflow: visible; filter: none; }
.env.open { width: min(46vw, 200px); margin-top: calc(min(46vw, 200px) * .24); }
.e-flap { transform-box: view-box; transform-origin: 150px 30px; transition: transform .55s cubic-bezier(.5, 0, .3, 1); }
.env.open .e-flap { transform: scaleY(-1); }
.seal { touch-action: none; position: absolute; left: 50%; top: 53%; width: 25%; min-width: 56px; aspect-ratio: 1; translate: -50% -50%; padding: 0; border: 0; background: none; animation: sealbeat 2.4s ease-in-out infinite; }
.seal .art { overflow: visible; }
.seal .sl, .seal .sr { transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); transform-box: view-box; transform-origin: 50px 50px; }
.env.open .seal { animation: none; }
.env.open .seal .sl { transform: translate(-14px, 10px) rotate(-16deg); }
.env.open .seal .sr { transform: translate(14px, 12px) rotate(18deg); }
.hint { font-family: var(--f-hand); font-size: 25px; color: var(--cream); text-shadow: 0 2px 5px rgba(0, 0, 0, .8); text-align: center; }
.tag { position: relative; width: min(92vw, 400px); background: #E5D2A4 repeating-linear-gradient(90deg, transparent 0 6px, rgba(0, 0, 0, .025) 6px 7px); color: var(--ink); border-radius: 10px; padding: 14px 16px 12px 44px; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .75), inset 0 0 0 2px rgba(110, 31, 45, .35); border: 0; }
.tag::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #2a1a10; box-shadow: inset 0 0 0 3px #B8913E; }
.tag dl { display: grid; gap: 4px; }
.tag dt { font-weight: 700; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--burg); }
.tag dd { font-family: var(--f-title); font-weight: 700; font-size: 19px; line-height: 1.15; margin-bottom: 4px; }
.tag .ph { font-style: italic; opacity: .7; }
.resume { width: 100%; max-width: 400px; }

/* ---------- Scene 2: the family agenda ---------- */
.pen { transform-box: fill-box; animation: penroll 7s ease-in-out infinite alternate; }
@keyframes penroll { from { transform: translateX(0) rotate(0); } to { transform: translateX(120px) rotate(14deg); } }
.sheet { position: relative; width: 100%; background: var(--paper) repeating-linear-gradient(transparent 0 35px, rgba(110, 31, 45, .1) 35px 36px); color: var(--ink); border-radius: 3px; padding: 26px 16px 20px 40px; box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .8); transform: rotate(-.5deg); }
.sheet::before { content: ""; position: absolute; left: 28px; top: 0; bottom: 0; width: 2px; background: rgba(110, 31, 45, .4); }
.sheet .ring { position: absolute; right: -14px; top: -22px; width: 92px; height: 92px; opacity: .9; pointer-events: none; }
.sheet .ring2 { position: absolute; left: -10px; bottom: 120px; width: 70px; height: 70px; opacity: .8; transform: rotate(40deg); pointer-events: none; }
.sheet .scr { position: absolute; pointer-events: none; width: 84px; height: 34px; }
.sheet .scr.a { right: 6px; top: 118px; } .sheet .scr.b { left: 38px; top: 78px; width: 120px; } .sheet .scr.c { right: 18px; bottom: 74px; width: 46px; height: 46px; }
.sheet .h2 { text-align: left; font-size: clamp(28px, 7.6vw, 38px); color: var(--burg); }
.sheet .hand { font-size: 23px; color: #4a2c1a; margin: 4px 0 6px; }
.ag-list { list-style: none; display: grid; margin: 6px 0 4px; }
.ag-item { border-bottom: 1.5px dashed rgba(110, 31, 45, .32); }
.ag-item:last-child { border-bottom: 0; }
.ag { width: 100%; display: grid; grid-template-columns: 72px 1fr 24px; gap: 10px; align-items: center; min-height: 60px; padding: 10px 2px; background: none; border: 0; text-align: left; color: var(--ink); }
.ag-t { font-family: var(--f-hand); font-weight: 700; font-size: 22px; line-height: 1; color: var(--burg); text-align: center; padding: 8px 4px; border: 2px solid var(--burg); border-radius: 56% 44% 52% 48% / 48% 54% 46% 52%; transform: rotate(-3deg); }
.ag-w { font-family: var(--f-title); font-weight: 600; font-size: 19.5px; line-height: 1.2; }
.ag-x { font-family: var(--f-body); font-weight: 700; font-size: 22px; color: var(--burg); transition: transform .2s; text-align: center; }
.ag[aria-expanded="true"] .ag-x { transform: rotate(45deg); }
.ag-a { display: flex; gap: 10px; padding: 2px 4px 14px 84px; animation: fadein .3s ease both; opacity: 0; }
.ag-a p { font-family: var(--f-hand); font-weight: 600; font-size: 22px; line-height: 1.2; color: #4a2c1a; }
.ag-ck { flex: 0 0 26px; width: 26px; height: 22px; margin-top: 2px; }
.ag-ck .ck { width: 26px; height: 22px; overflow: visible; }
.ag-ck .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .6s ease .15s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
body[data-humor="subtle"] .ag-a, body[data-humor="subtle"] .ag-x, body[data-humor="subtle"] .egg, body[data-humor="subtle"] .butter-say { display: none !important; }
body[data-humor="subtle"] .ag { cursor: default; }
.vote { background: rgba(247, 239, 220, .97); }
.vote .lead { color: #4a2c1a; text-shadow: none; text-align: left; font-size: 15px; margin-top: 4px; }
.opts { display: grid; gap: 8px; margin: 12px 0 8px; }
.opt { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 14px; border-radius: 12px; border: 1.5px solid rgba(110, 31, 45, .5); background: #fff8e8; text-align: left; font-weight: 600; font-size: 16px; color: var(--ink); }
.opt[aria-checked="true"] { border-color: var(--burg); box-shadow: inset 0 0 0 2px var(--burg); background: #f6e3e0; }
.opt-bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: rgba(184, 145, 62, .3); z-index: 0; transition: width .6s ease; }
.opt-t, .opt-n { position: relative; z-index: 1; }
.opt-n { font-weight: 700; color: var(--burg); }
.note { font-size: 13.5px; color: #5a3b27; line-height: 1.4; }
.note b { color: var(--burg); }

/* ---------- Scene 3: the great seating negotiation ---------- */
#bg-seating { background: radial-gradient(circle at 50% 38%, #7a4f2c 0, #3a2212 60%, #1d110a 100%), repeating-linear-gradient(90deg, transparent 0 58px, rgba(0, 0, 0, .18) 58px 60px); background-blend-mode: normal; }
.tbl { position: relative; width: min(100%, 400px); aspect-ratio: 360 / 460; margin: 0 auto; animation: descend 1.1s cubic-bezier(.2, .8, .3, 1) both; }
.tbl .art { position: absolute; inset: 0; }
@keyframes descend { from { transform: scale(1.35) translateY(-4%); opacity: 0; } to { transform: none; opacity: 1; } }
.tbl .set .pc { transform-box: fill-box; transform-origin: 50% 100%; animation: flutter 3.2s ease-in-out infinite; }
.tbl .s1 .pc { animation-delay: -.6s; } .tbl .s2 .pc { animation-delay: -1.2s; } .tbl .s3 .pc { animation-delay: -1.8s; } .tbl .s4 .pc { animation-delay: -2.4s; } .tbl .s5 .pc { animation-delay: -3s; }
@keyframes flutter { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 70% { transform: rotate(3deg); } }
.tbl .flame, .finale-art .flame, .art .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flick 1.4s ease-in-out infinite alternate; }
.art .f1 { animation-delay: -.5s; } .art .f2 { animation-delay: -.9s; }
@keyframes flick { from { transform: scale(1, 1) rotate(-3deg); opacity: .95; } to { transform: scale(.88, 1.1) rotate(3deg); opacity: 1; } }
.seat { position: absolute; width: 21%; aspect-ratio: 1; min-width: 48px; translate: -50% -50%; padding: 0; border-radius: 50%; border: 0; background: transparent; }
.seat::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; box-shadow: 0 0 0 0 rgba(217, 184, 102, 0); transition: box-shadow .2s; }
.seat:hover::after, .seat:focus-visible::after { box-shadow: 0 0 0 3px rgba(217, 184, 102, .85); }
.seat.peek::after { box-shadow: 0 0 0 3px rgba(255, 233, 168, .95); }
.seat.picked::after { box-shadow: 0 0 0 4px var(--brass2), 0 0 18px 4px rgba(255, 233, 168, .6); }
.hot { position: absolute; translate: -50% -50%; min-width: 48px; min-height: 48px; padding: 0; border-radius: 50%; border: 0; background: transparent; }
.hot:focus-visible { outline: 3px solid var(--brass2); }
.butter-say { position: absolute; left: 50%; top: 24%; translate: -50% 0; width: 78%; padding: 8px 12px; border-radius: 12px; background: var(--paper); color: var(--ink); font-family: var(--f-hand); font-weight: 700; font-size: 22px; line-height: 1.1; text-align: center; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .8); animation: pop .3s cubic-bezier(.2, 1.4, .4, 1) both; z-index: 3; }
@keyframes pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.arch { min-height: 138px; }
.arch .a-name { font-family: var(--f-title); font-weight: 700; font-size: 28px; line-height: 1.05; color: var(--burg); }
.arch .a-line { font-family: var(--f-hand); font-weight: 600; font-size: 24px; line-height: 1.15; margin: 6px 0 12px; color: #4a2c1a; }
.arch .row { display: flex; gap: 10px; flex-wrap: wrap; }
.arch .btn { min-height: 46px; font-size: 15px; padding: 0 18px; }

/* ---------- Scene 4: the potluck committee ---------- */
.oven { width: min(62vw, 230px); margin: 0 auto; }
.oven .art { width: 100%; height: auto; }
.o-hand { transform-box: fill-box; transform-origin: 50% 100%; animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.oven.ding { animation: shake .5s ease-in-out 2; }
.oven.ding .o-win { fill: #FFF0B0; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px) rotate(-1deg); } 60% { transform: translateX(4px) rotate(1deg); } }
.dishes { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dish { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 4px; min-height: 196px; padding: 10px 10px 12px; border: 0; border-radius: 14px; background: rgba(247, 239, 220, .96); color: var(--ink); text-align: left; box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(184, 145, 62, .4); }
.dish.wide { grid-column: 1 / -1; min-height: 0; grid-template-columns: 96px 1fr; grid-template-rows: auto; align-items: center; }
.dish .art { width: 100%; height: 86px; }
.dish.wide .art { width: 96px; height: 76px; }
.dish .d-n { font-family: var(--f-title); font-weight: 700; font-size: 21px; line-height: 1.05; color: var(--burg); }
.dish .d-q { font-size: 13.5px; line-height: 1.3; color: #4a2c1a; }
.dish .d-s { align-self: end; justify-self: start; padding: 3px 10px; border-radius: 99px; background: rgba(107, 114, 64, .2); color: #3c4220; font-size: 12.5px; font-weight: 700; }
.dish .d-s.full { background: rgba(110, 31, 45, .14); color: var(--burg); }
.dish .d-s.mine { background: var(--burg); color: #fff; }
.dish.taken { opacity: .88; }
.wisp { position: absolute; top: 6px; width: 7px; height: 28px; border-radius: 8px; background: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)); opacity: 0; animation: wisp 3.2s ease-in-out infinite; pointer-events: none; }
.wisp.w1 { left: 38%; } .wisp.w2 { left: 54%; animation-delay: -1.2s; } .wisp.w3 { left: 46%; animation-delay: -2.1s; }
@keyframes wisp { 0% { opacity: 0; transform: translateY(8px) scaleY(.6); } 40% { opacity: .8; } 100% { opacity: 0; transform: translateY(-16px) scaleY(1.3); } }
.pot-note { width: 100%; padding: 12px 14px; border-radius: 12px; background: rgba(28, 16, 9, .72); color: var(--cream); font-size: 14.5px; line-height: 1.4; text-align: center; }

/* ---------- Scene 5: the meeting is adjourned ---------- */
.cert { position: relative; background: var(--paper); color: var(--ink); padding: 30px 22px 28px; text-align: center; border-radius: 4px; box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .85); outline: 3px solid var(--burg); outline-offset: -12px; border: 1px solid var(--brass); }
.cert::after { content: ""; position: absolute; inset: 14px; border: 1px solid var(--brass); pointer-events: none; }
.cert .c-title { font-family: var(--f-title); font-weight: 700; font-size: clamp(22px, 6.2vw, 30px); line-height: 1.05; letter-spacing: .08em; color: var(--burg); }
.cert .c-rule { height: 2px; width: 120px; margin: 12px auto; background: linear-gradient(90deg, transparent, var(--brass), transparent); }
.cert .c-body { font-family: var(--f-title); font-style: italic; font-weight: 500; font-size: clamp(19px, 5vw, 23px); line-height: 1.3; text-wrap: balance; }
.cert .c-name { font-family: var(--f-hand); font-style: normal; font-weight: 700; font-size: 1.5em; color: var(--burg); padding: 0 .12em; border-bottom: 2px solid rgba(110, 31, 45, .4); overflow-wrap: anywhere; }
.cert .c-seat { margin-top: 12px; font-family: var(--f-hand); font-weight: 600; font-size: 22px; color: #4a2c1a; }
.cert .c-status { display: inline-block; margin-top: 14px; padding: 7px 16px; border-radius: 99px; background: var(--burg); color: #F7EFDC; font-weight: 800; font-size: 12.5px; letter-spacing: .2em; }
.cert .c-status.ok { background: var(--olive); }
.stamp-ring { position: absolute; right: -6px; bottom: -22px; width: 108px; height: 108px; opacity: .88; animation: stampspin 40s linear infinite; mix-blend-mode: multiply; pointer-events: none; }
@keyframes stampspin { to { transform: rotate(360deg); } }
.det { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 10px; }
.det > div { grid-column: span 1; padding: 11px 2px; border-top: 1px solid var(--hair); min-width: 0; }
.det > div.wide { grid-column: 1 / -1; }
.det > div:first-child { border-top: 0; }
.det dt { font-weight: 700; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--burg); margin-bottom: 2px; }
.det dd { font-family: var(--f-title); font-weight: 700; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.det .small dd { font-family: var(--f-body); font-weight: 500; font-size: 15.5px; }
.det .x, .det .dir { display: block; font-family: var(--f-body); font-weight: 400; font-size: 14.5px; color: #4a2c1a; }
.det .ph { font-style: italic; opacity: .7; }
.det a { color: var(--burg); font-weight: 700; text-underline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.actions .btn { flex: 1 1 150px; min-height: 46px; font-size: 15px; padding: 0 14px; }
.card .btn.ghost { background: transparent; color: var(--burg); box-shadow: inset 0 0 0 1.5px var(--burg); }
.tagline { font-family: var(--f-title); font-style: italic; font-weight: 500; font-size: clamp(22px, 6vw, 28px); line-height: 1.2; text-align: center; text-wrap: balance; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }

/* ---------- Forms, sheets ---------- */
.field { display: grid; gap: 5px; margin-top: 12px; }
.field label, .flabel, legend { font-weight: 700; font-size: 14px; color: var(--ink); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid rgba(43, 26, 16, .4); background: #fffdf6; color: var(--ink); font-size: 16px; }
.field textarea { min-height: 72px; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.choices { display: grid; gap: 8px; margin-top: 6px; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border-radius: 12px; border: 1.5px solid rgba(43, 26, 16, .35); background: #fffdf6; font-weight: 600; cursor: pointer; }
.choice input { width: 22px; height: 22px; accent-color: var(--burg); }
.choice:has(input:checked) { border-color: var(--burg); box-shadow: inset 0 0 0 2px var(--burg); background: #f6e3e0; }
.stepper { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; }
.stepper button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--burg); background: #fffdf6; color: var(--burg); font-size: 24px; font-weight: 700; }
.stepper output { min-width: 28px; text-align: center; font-size: 22px; font-weight: 700; }
.hint { font-size: 13.5px; color: #5a3b27; margin-top: 6px; }
.err { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #f9dede; color: #7a1020; font-weight: 600; font-size: 14.5px; }
.ok-box { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #e6edd2; color: #2c3a12; font-weight: 600; }
.sheet-wrap { position: fixed; inset: 0; z-index: 110; display: grid; align-items: end; justify-items: center; background: rgba(10, 5, 2, .62); }
.sheetp { position: relative; width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; background: var(--paper); color: var(--ink); border-radius: 20px 20px 0 0; padding: 22px 18px calc(24px + env(safe-area-inset-bottom, 0px)); animation: sheetup .3s cubic-bezier(.2, .9, .3, 1) both; overscroll-behavior: contain; }
@keyframes sheetup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheetp > .x { position: absolute; right: 8px; top: 8px; width: 48px; height: 48px; border: 0; background: none; font-size: 30px; color: var(--burg); }
.sheetp h2 { font-family: var(--f-title); font-weight: 700; font-size: 28px; line-height: 1.05; color: var(--burg); padding-right: 44px; }
.sheetp .lead { color: #4a2c1a; text-shadow: none; text-align: left; margin-top: 6px; }
.s-art { width: 150px; height: 120px; margin: 4px auto 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tags span { padding: 3px 10px; border-radius: 99px; background: rgba(107, 114, 64, .22); color: #3c4220; font-size: 12.5px; font-weight: 700; }

/* ---------- Hand-overs between scenes: the camera dives into the letter, the agenda folds into a napkin, a roll leads the way, steam turns to candlelight ---------- */
.scene.out-dive { animation: dive-out .9s cubic-bezier(.5, 0, .8, .45) forwards; }
.scene.in-dive { animation: dive-in .9s ease-out both; }
.scene.out-fold { animation: fold-out .65s ease-in forwards; transform-origin: 50% 100%; }
.scene.in-fold { animation: fade-in .7s ease-out .35s both; }
.scene.out-pan { animation: pan-out .7s ease-in forwards; }
.scene.in-pan { animation: pan-in .8s ease-out .3s both; }
.scene.out-steam { animation: fade-out .6s ease-in .4s forwards; }
.scene.in-steam { animation: fade-in .9s ease-out .6s both; }
.scene.out-fade { animation: fade-out .25s ease forwards; }
.scene.in-fade { animation: fade-in .3s ease both; }
@keyframes dive-out { to { transform: scale(3.4); opacity: 0; } }
@keyframes dive-in { from { transform: scale(.8); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes fold-out { to { transform: perspective(900px) rotateX(72deg) scale(.55); opacity: 0; } }
@keyframes pan-out { to { transform: translateX(-32%); opacity: 0; } }
@keyframes pan-in { from { transform: translateX(32%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
#veil { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
#veil > * { position: absolute; }
.v-napkin { inset: 0; animation: napkin 1.25s ease-in-out both; }
.v-napkin .art { width: 100%; height: 100%; }
@keyframes napkin { 0% { transform: scale(.12) rotate(10deg); opacity: 0; } 26% { transform: none; opacity: 1; } 52% { transform: none; opacity: 1; } 100% { transform: translateY(-112%) rotate(-5deg); opacity: 1; } }
.v-roll { left: 0; bottom: 32%; width: 76px; animation: rollby 1.15s ease-in-out both; }
.v-roll .roll { width: 100%; height: auto; }
@keyframes rollby { from { transform: translateX(-20vw) rotate(0); } to { transform: translateX(118vw) rotate(900deg); } }
.v-steam .s-a { inset: -10%; background: radial-gradient(60% 50% at 50% 60%, rgba(247, 243, 234, .96), rgba(247, 243, 234, 0) 72%); animation: steama 1.55s ease-in-out both; }
.v-steam .s-b { inset: -10%; background: radial-gradient(70% 60% at 50% 55%, rgba(255, 214, 120, .95), rgba(255, 170, 60, 0) 74%); animation: steamb 1.55s ease-in-out both; }
@keyframes steama { 0% { opacity: 0; transform: scale(.8); } 38% { opacity: 1; transform: scale(1.25); } 62% { opacity: .85; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes steamb { 0%, 40% { opacity: 0; transform: scale(.9); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }

/* ---------- The chihuahua in the living room: it runs along the back of the rug, round the end and back along the front (the numbers come from the drawing), its legs and its hop never stop ---------- */
.dog-run { transform: translate(var(--x0, 40px), var(--yb, 704px)); animation: dogrun 15s ease-in-out infinite; }
@keyframes dogrun {
  0% { transform: translate(var(--x0), var(--yb)) scale(.9, .9); }
  40% { transform: translate(var(--x1), var(--yb)) scale(.9, .9); }
  47% { transform: translate(calc(var(--x1) + 40px), var(--ym)) scale(-1, 1); }
  88% { transform: translate(var(--x0), var(--yf)) scale(-1.12, 1.12); }
  94% { transform: translate(calc(var(--x0) - 10px), var(--ym)) scale(1, 1); }
  100% { transform: translate(var(--x0), var(--yb)) scale(.9, .9); }
}
.dog-hop { animation: doghop .28s ease-in-out infinite alternate; }
@keyframes doghop { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-3px) rotate(-3deg); } }
.dog-leg { transform-box: fill-box; transform-origin: 50% 0; animation: dogstep .28s linear infinite alternate; }
.dog-leg.b { animation-direction: alternate-reverse; }
@keyframes dogstep { from { transform: rotate(-38deg); } to { transform: rotate(38deg); } }
/* The dog's own layer (above the page, never catches a tap) and the bone you throw for it */
.dogplay { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.dogplay .art { width: 100%; height: 100%; }
.dog-run.sit .dog-leg, .dog-run.sit .dog-hop { animation-play-state: paused; }
.toy-btn { position: absolute; z-index: 3; left: max(14px, env(safe-area-inset-left, 0px)); bottom: calc(86px + env(safe-area-inset-bottom, 0px)); display: grid; justify-items: center; gap: 2px; min-width: 64px; min-height: 56px; padding: 6px 10px 4px; border: 0; border-radius: 16px; background: rgba(28, 16, 9, .72); color: var(--cream); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(244, 232, 208, .5); transition: opacity .25s, transform .25s; }
.toy-btn .toy-ic { width: 40px; height: 24px; }
.toy-btn .toy-tip { font-family: var(--f-hand); font-size: 17px; line-height: 1; }
.toy-btn.hint .toy-ic { animation: toybob 1.4s ease-in-out infinite; }
.toy-btn.away { opacity: .35; transform: scale(.92); pointer-events: none; }
@keyframes toybob { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-3px); } }
@media (orientation: landscape) and (max-height: 520px) { .toy-btn { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Things that drift, falling leaves, small screens, and a perfectly still version ---------- */
#drift { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
#drift .lf { position: absolute; top: -30px; left: var(--x); width: var(--s); height: var(--s); animation: fall var(--t) linear var(--d) infinite; opacity: .85; }
@keyframes fall { from { transform: translate3d(0, -40px, 0) rotate(0); } to { transform: translate3d(var(--w), 110vh, 0) rotate(var(--r)); } }
.win-leaves .wl { transform-box: fill-box; transform-origin: center; animation: drift 7s ease-in-out infinite alternate; }
.win-leaves .wl1 { animation-delay: -1s; } .win-leaves .wl2 { animation-delay: -2.2s; } .win-leaves .wl3 { animation-delay: -3.1s; } .win-leaves .wl4 { animation-delay: -4s; } .win-leaves .wl5 { animation-delay: -5s; }
@keyframes drift { from { transform: translate(0, 0) rotate(0); } to { transform: translate(-14px, 26px) rotate(40deg); } }
@media (max-width: 380px) { .ag { grid-template-columns: 62px 1fr 20px; } .ag-t { font-size: 19px; } .ag-a { padding-left: 74px; } .dishes { gap: 8px; } }
@media (min-width: 900px) { body { font-size: 18px; } .col { max-width: 600px; } .tbl { width: min(100%, 440px); } }
@media (orientation: landscape) and (max-height: 520px) { .scroll { padding-top: 56px; } .env { width: min(42vw, 300px); } }
html.rm *, html.rm *::before, html.rm *::after { animation: none !important; transition: none !important; }
html.rm #cine, html.rm #veil, html.rm #drift, html.rm .toy-btn { display: none !important; }
html.rm .egg.on { opacity: .92; transform: rotate(-12deg); }
html.rm .ag-a { opacity: 1; }
html.rm .ag-ck .draw { stroke-dashoffset: 0; }
html.rm .opt-bar { transition: none; }
html.lite .wisp, html.lite #drift, html.lite .win-leaves .wl { display: none; }
@media (prefers-reduced-motion: reduce) { #cine, #veil, #drift { display: none !important; } }
@media print { .hud, .dock, #drift, #cine, #veil, .skip { display: none !important; } body { overflow: visible; background: #fff; } }