/* Dinner Alibi · shared styles for the front page (/) and the order flow (/order/).
   Direction "Opening Night" (design/brief.md): the page is the foyer, the programme is the product.
   Programme-white paper, auditorium ink, one lipstick spot ink; each story brings its own theme ink
   onto the paper only. Rozha One for names and titles, League Gothic for billing, Vollkorn for reading.
   Paper stays paper in dark mode ("house lights down"). Self-hosted fonts, no third-party request. */
@font-face{font-family:"Rozha One";src:url(fonts/rozha-one-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rozha One";src:url(fonts/rozha-one-400-latin-ext.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Vollkorn";src:url(fonts/vollkorn-var-latin.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Vollkorn";src:url(fonts/vollkorn-var-latin-ext.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Vollkorn";font-style:italic;src:url(fonts/vollkorn-italic-var-latin.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Vollkorn";font-style:italic;src:url(fonts/vollkorn-italic-var-latin-ext.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"League Gothic";src:url(fonts/league-gothic-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --f-display:"Rozha One",Georgia,"Times New Roman",serif;
  --f-bill:"League Gothic","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --f-text:Vollkorn,Georgia,"Times New Roman",serif;

  --bg:#F7F5F8; --surface:#FFFFFF; --fg:#1E1A33; --muted:#5E5870; --rule:#DDD8E3; --field:#77708A;
  --house:#231C3B; --on-house:#F1EEF5; --on-house-muted:#C9C2DA; --house-accent:#F07AA6; --house-rule:#43395F;
  --accent:#B3245E; --accent-hover:#951B4D; --on-accent:#FFFFFF; --accent-tint:#F8E6EE;
  --good:#1F7A4D; --good-tint:#E6F3EC; --bad:#A8321C; --bad-tint:#FBEDE9;
  --paper:#FFFFFF; --paper-ink:#1E1A33; --paper-muted:#5E5870; --paper-rule:#D9D3E0; --paper-accent:#B3245E; --paper-tint:#F1EEF5; --ghost:#8A8399;
  --paper-shadow:0 1px 2px rgba(24,16,48,.10),0 14px 34px rgba(24,16,48,.16);
  --lift:0 1px 1px rgba(24,16,48,.10),0 8px 20px rgba(24,16,48,.18);
  --bar:rgba(247,245,248,.94);
  --seal:#B3245E; --seal-ink:#FFFFFF; --ink:#1E1A33;
  --ring:var(--accent);
  /* theme inks: --t-* on paper (both modes), --s-* on screen */
  --t-chc:#16704C; --t-spk:#8A620E; --t-ski:#2453C8; --t-spc:#B8431A;
  --s-chc:#16704C; --s-spk:#8A620E; --s-ski:#2453C8; --s-spc:#B8431A;
  --kit:var(--t-chc); --kit-s:var(--s-chc);
  --radius:6px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#15121F; --surface:#1F1B2E; --fg:#F1EEF5; --muted:#ABA4BC; --rule:#332D45; --field:#8C85A0;
  --house:#0F0C18; --on-house:#F1EEF5; --on-house-muted:#ABA4BC; --house-accent:#F07AA6; --house-rule:#2C2640;
  --accent:#F07AA6; --accent-hover:#F59BBC; --on-accent:#15121F; --accent-tint:#3A1D2C;
  --good:#6FD19C; --good-tint:#16291F; --bad:#FF9C85; --bad-tint:#3A1F1C;
  --paper:#F4F2F6; --paper-shadow:0 1px 2px rgba(0,0,0,.5),0 16px 40px rgba(0,0,0,.55); --lift:0 1px 2px rgba(0,0,0,.5),0 10px 24px rgba(0,0,0,.5);
  --bar:rgba(21,18,31,.94);
  --ink:#F1EEF5;
  --s-chc:#3AA676; --s-spk:#B88C30; --s-ski:#6B8DEB; --s-spc:#DC6A3A;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#15121F; --surface:#1F1B2E; --fg:#F1EEF5; --muted:#ABA4BC; --rule:#332D45; --field:#8C85A0;
  --house:#0F0C18; --on-house:#F1EEF5; --on-house-muted:#ABA4BC; --house-accent:#F07AA6; --house-rule:#2C2640;
  --accent:#F07AA6; --accent-hover:#F59BBC; --on-accent:#15121F; --accent-tint:#3A1D2C;
  --good:#6FD19C; --good-tint:#16291F; --bad:#FF9C85; --bad-tint:#3A1F1C;
  --paper:#F4F2F6; --paper-shadow:0 1px 2px rgba(0,0,0,.5),0 16px 40px rgba(0,0,0,.55); --lift:0 1px 2px rgba(0,0,0,.5),0 10px 24px rgba(0,0,0,.5);
  --bar:rgba(21,18,31,.94);
  --ink:#F1EEF5;
  --s-chc:#3AA676; --s-spk:#B88C30; --s-ski:#6B8DEB; --s-spc:#DC6A3A;
  color-scheme:dark}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.125rem/1.55 var(--f-text);font-variant-numeric:lining-nums;overflow-x:hidden}
img,svg{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3,h4,p,ol,ul,figure,fieldset,legend{margin:0}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
ol,ul{padding:0;list-style:none}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
button,input,textarea,select{font:inherit;color:inherit}
button,label[for],summary,input[type=checkbox],input[type=radio],input[type=date]{cursor:pointer}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ic{width:1.25em;height:1.25em;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.25em}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bill{font-family:var(--f-bill);font-weight:400;text-transform:uppercase;letter-spacing:.12em;font-size:.9375rem;line-height:1.25}
.small{font-size:.9375rem;line-height:1.45}
.muted{color:var(--muted)}
.lc{text-transform:none}
.tab-nums{font-variant-numeric:lining-nums tabular-nums}

/* ---------- house band, header, wordmark ---------- */
.house{background:var(--house);color:var(--on-house);--ring:var(--house-accent);--ink:var(--on-house)}
.house a{color:var(--house-accent)}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding-block:6px}
.brand{display:inline-flex;align-items:center;min-height:44px;color:var(--on-house)}
.brand svg{height:32px;width:auto;display:block}
.quiet{font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.08em;font-size:1.0625rem;line-height:1;min-height:44px;display:inline-flex;align-items:center;gap:6px;padding-block:12px;text-decoration:underline;text-underline-offset:.3em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border:0;border-radius:var(--radius);background:var(--accent);color:var(--on-accent);font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.06em;font-size:1.375rem;line-height:1;text-decoration:none;text-align:center;font-variant-numeric:lining-nums}
.btn:hover{background:var(--accent-hover);text-decoration:none}
.btn .ic{width:22px;height:22px}
.btn.wide{width:100%}
.house .btn{background:var(--house-accent);color:#15121F}
.house .btn:hover{background:#F59BBC}
.btn-q{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 14px;border:2px solid var(--fg);border-radius:var(--radius);background:transparent;font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.06em;font-size:1.0625rem;line-height:1;color:var(--fg);text-decoration:none}
.btn-q:hover{background:var(--accent-tint)}
.btn-q .ic{width:18px;height:18px}
.link-btn{background:none;border:0;padding:12px 0;min-height:44px;color:var(--accent);text-decoration:underline;text-underline-offset:.18em;font:inherit;font-size:.9375rem;display:inline-flex;align-items:center}

/* ---------- paper (programme, sheets, cards) ---------- */
.paper{--theme:var(--t-chc);background:var(--paper);color:var(--paper-ink);box-shadow:var(--paper-shadow);position:relative;--ring:var(--paper-accent)}
.paper a{color:var(--paper-accent)}
.frame::before{content:"";position:absolute;inset:8px;border:1px solid var(--theme);opacity:.6;pointer-events:none;transition:border-color .2s}
.orn{display:block;color:var(--theme)}
.seal-stamp{position:absolute;width:68px;height:68px;transform:rotate(-12deg);filter:drop-shadow(0 2px 2px rgba(24,16,48,.28)) drop-shadow(0 6px 10px rgba(24,16,48,.18));pointer-events:none;--seal:#B3245E;--seal-ink:#FFFFFF}
.seal-stamp svg{width:100%;height:100%;display:block}
@keyframes land{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* footer (both pages) */
footer.site{background:var(--surface);border-top:1px solid var(--rule);padding-block:40px 48px;font-size:.9375rem;line-height:1.5;color:var(--muted)}
.foot{display:grid;gap:12px}
.foot>*{max-width:52rem}
.foot .brand{color:var(--fg);--ink:var(--fg)}
.foot .brand svg{height:28px}
.foot a{display:inline-block;padding-block:12px;margin-block:-12px;line-height:1.5}

/* =====================================================================
   FRONT PAGE
   ===================================================================== */
.hero{position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);padding-block:2px 0}
.hero-copy{display:grid;gap:12px;align-content:start;position:relative;z-index:2;padding-bottom:20px}
.eyebrow{color:var(--house-accent);font-size:1rem}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:2.5rem;line-height:1.04;text-wrap:balance;letter-spacing:0;max-width:15ch}
.hero .sub{color:var(--on-house-muted);font-size:1.0625rem;line-height:1.5;max-width:34rem}
.clock{display:flex;align-items:center;gap:8px;font-size:1rem;line-height:1.35;color:var(--on-house);margin-top:6px}
.clock .ic{color:var(--house-accent);width:20px;height:20px}
.hero .btn{width:100%;margin-top:2px}
.priceline{font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.08em;font-size:.9375rem;color:var(--on-house-muted);display:flex;align-items:baseline;justify-content:center;gap:8px;white-space:nowrap}
.priceline b{font-family:var(--f-display);font-weight:400;letter-spacing:0;font-size:1.375rem;line-height:1;text-transform:none;color:var(--on-house)}

/* the still life: real pieces of the sample kit (Priya's sheet, a round 1 clue card, her name card) */
.still{position:relative;container-type:inline-size;height:344px;margin-inline:-16px;pointer-events:none;user-select:none}
.still .pc{position:absolute;background:var(--paper);color:var(--paper-ink);box-shadow:var(--lift);overflow:hidden;--theme:var(--t-chc)}
.st-sheet{left:7%;top:10px;width:64%;aspect-ratio:210/297;transform:rotate(-4deg);padding:6.4cqw 5.6cqw}
.st-sheet::before{content:"";position:absolute;inset:2.2cqw;border:1px solid var(--theme);opacity:.55}
.st-band{border-block:1.5px solid var(--theme);padding:2.6cqw 0 2.2cqw;display:grid;gap:.8cqw}
.st-band .b{font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.1em;color:var(--theme);font-size:2.9cqw;line-height:1.1;white-space:nowrap}
.st-band .n{font-family:var(--f-display);font-size:11cqw;line-height:1}
.st-band .p{font-size:3.4cqw;line-height:1.25}
.st-h{font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.12em;color:var(--theme);font-size:2.9cqw;margin-top:3.6cqw}
.st-t{font-size:3.15cqw;line-height:1.42;margin-top:1cqw}
.st-i{font-style:italic}
.st-fold{border-top:1.5px dashed var(--paper-rule);margin:3.4cqw -5.6cqw 0;position:relative}
/* Tom's clue page, opened one fold to Round 1 (the kit's own form in this theme: no cut cards) */
.st-clue{right:3%;top:30px;width:55%;transform:rotate(5deg);background:none;box-shadow:none;overflow:visible;perspective:1200px}
.st-clue .cp-open{padding:3.6cqw 4.2cqw 3.4cqw;gap:1.2cqw;background:var(--paper);box-shadow:var(--lift);position:relative}
.st-clue .cp-open::after{height:3cqw}
.st-clue .n{font-family:var(--f-display);font-size:5.2cqw;line-height:1}
.st-clue .h{font-size:2.2cqw;line-height:1.35;color:var(--paper-muted)}
.st-clue .b{font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.1em;color:var(--theme);font-size:2.9cqw;margin-top:.8cqw}
.st-clue .t{font-size:2.8cqw;line-height:1.4;margin-top:.2cqw}
.st-clue mark{background:none;color:var(--theme);font-weight:600}
.st-clue .cp-flap{aspect-ratio:210/54}
.st-name{left:4%;top:236px;width:40%;transform:rotate(-7deg);padding:3cqw 2cqw 2.6cqw;display:grid;justify-items:center;text-align:center;gap:.6cqw;overflow:visible}
.st-name::before{content:"";position:absolute;left:0;right:0;top:0;height:2.2cqw;background:linear-gradient(var(--paper-rule),var(--paper))}
.st-name .n{font-family:var(--f-display);font-size:7.6cqw;line-height:1.05}
.st-name .r{font-style:italic;font-size:3cqw;line-height:1.25}
.st-name .orn{width:60%;height:auto;margin-top:.6cqw}
@media (min-width:480px){.still{height:380px}.st-name{top:260px}}
@media (min-width:1024px){
  .top{min-height:72px}
  .brand svg{height:36px}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:center;padding-block:12px 0;min-height:600px}
  .hero-copy{gap:18px;padding-block:40px 88px}
  .hero h1{font-size:4rem;line-height:1;max-width:13ch}
  .hero .sub{font-size:1.25rem;line-height:1.5}
  .clock{font-size:1.125rem;margin-top:10px}
  .hero .btn{width:auto;justify-self:start;min-width:22rem;min-height:60px;font-size:1.625rem}
  .priceline{justify-content:flex-start;font-size:1rem}
  .still{height:600px;margin:0;align-self:stretch}
  .st-sheet{left:2%;top:56px;width:62%}
  .st-t{font-size:2.6cqw}
  .st-band .n{font-size:9.6cqw}
  .st-clue{right:0;top:116px;width:48%}
  .st-name{left:6%;top:436px;width:34%}
}

/* sections */
.sec{padding-block:64px}
.sec-head{display:grid;gap:12px;max-width:44rem;margin-bottom:28px}
h2.h2{font-family:var(--f-display);font-weight:400;font-size:1.875rem;line-height:1.08;text-wrap:balance}
.lede{color:var(--muted);max-width:40rem}
@media (min-width:1024px){h2.h2{font-size:2.625rem}.sec{padding-block:96px}}

/* 1 · Everything for the evening: the contents card, like the back of the box */
.contents{padding:32px 22px 26px;display:grid;gap:22px;max-width:68rem}
.contents .lede{color:var(--paper-ink);font-size:1.1875rem;line-height:1.5;max-width:36rem}
.contents h2{color:var(--paper-ink)}
.gets{display:grid;border-top:1px solid var(--paper-rule)}
.gets li{position:relative;padding:12px 0 12px 28px;border-bottom:1px solid var(--paper-rule);line-height:1.42}
.gets li::before{content:"";position:absolute;left:5px;top:1.15em;width:8px;height:8px;transform:rotate(45deg);border:1.5px solid var(--theme)}
.contents .tail{color:var(--theme);text-align:center}
.contents .orn{width:200px;height:20px;justify-self:center}
@media (min-width:768px){.contents{padding:48px 48px 36px}.gets{grid-template-columns:1fr 1fr;column-gap:40px}.gets li:nth-child(odd):last-child{grid-column:1/-1}}

/* 2 · sample reader */
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding:4px 2px 8px;margin-inline:-2px;border-bottom:1px solid var(--rule);margin-bottom:24px;-webkit-overflow-scrolling:touch}
.tab{flex:none;min-height:44px;padding:8px 14px;border:1px solid transparent;border-radius:var(--radius) var(--radius) 0 0;background:transparent;font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.08em;font-size:1.125rem;line-height:1;color:var(--muted)}
.tab:hover{color:var(--fg)}
.tab[aria-selected="true"]{color:var(--fg);border-color:var(--rule);border-bottom-color:var(--bg);background:var(--bg);margin-bottom:-9px;padding-bottom:17px;box-shadow:inset 0 3px 0 var(--accent)}
.tabpanel{min-height:24rem}
.sheet{padding:28px 20px 20px;display:grid;gap:18px;max-width:46rem}
.sheet::before{content:"";position:absolute;inset:8px;border:1px solid var(--theme);opacity:.5;pointer-events:none}
.sheet-band{display:grid;gap:6px;padding:12px 0;border-block:2px solid var(--theme)}
.sheet-band .bill{color:var(--theme)}
.sheet h3{font-family:var(--f-display);font-weight:400;font-size:2.25rem;line-height:1.05;overflow-wrap:anywhere}
.sheet .plays{font-size:1.125rem}
.sheet .plays i{font-size:1.1875rem}
.sheet h4{font-family:var(--f-bill);font-weight:400;text-transform:uppercase;letter-spacing:.12em;font-size:1rem;color:var(--theme);margin-bottom:4px}
.sheet section{display:grid;gap:8px;max-width:62ch}
.sheet .secret-text{font-style:italic}
.evening{display:grid;gap:8px;font-size:1rem;line-height:1.45}
.evening li{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:10px}
.evening .t{font-variant-numeric:tabular-nums;color:var(--paper-muted);font-size:.9375rem}
.bul{display:grid;gap:6px;font-size:1rem;line-height:1.45}
.bul li{padding-left:16px;position:relative}
.bul li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;transform:rotate(45deg);border:1px solid var(--theme)}
.fold{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:10px 4px;background:none;border:0;border-top:1.5px dashed var(--paper-rule);border-bottom:1.5px dashed var(--paper-rule);color:var(--paper-ink);text-align:left;font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.1em;font-size:1rem;line-height:1.2}
.fold .ic{color:var(--theme)}
.fold .chev{margin-left:auto;transition:transform .2s}
.fold[aria-expanded="true"] .chev{transform:rotate(180deg)}
.foot-line{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.12em;font-size:.8125rem;color:var(--paper-muted);padding-top:10px;border-top:1px solid var(--paper-rule)}
.switcher{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;margin-bottom:16px;max-width:46rem}
.switcher .btn-q{padding:8px 8px;font-size:1rem;letter-spacing:.04em;white-space:nowrap}
.switcher [data-next]{justify-self:end}
.switcher [data-prev]{justify-self:start}
@media (max-width:359.98px){.switcher{grid-template-columns:1fr 1fr;row-gap:4px}.switcher .count{grid-column:1/-1;grid-row:1}}
.switcher .count{font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.1em;font-size:1.0625rem;font-variant-numeric:tabular-nums;min-width:4.5em;text-align:center}
.chips{display:none;gap:6px;flex-wrap:wrap;margin-bottom:16px}
@media (min-width:768px){.chips{display:flex}}
.chip{min-height:44px;padding:6px 14px;border:1px solid var(--field);border-radius:var(--radius);background:var(--surface);font-family:var(--f-display);font-size:1.125rem;line-height:1}
.chip[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.chip.locked{color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.chip.locked .ic{width:16px;height:16px}
.bill-chip{font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.08em;display:inline-flex;align-items:center;gap:6px}
.round-picker{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.round-head{font-family:var(--f-display);font-weight:400;font-size:1.5rem;margin-bottom:14px}
/* a clue page opened one fold: the Round 1 panel (name, how to use it, this guest's cards), and under it the
   rest of the page still folded, three panels thick with the print inside, hinged at the crease and lying
   back so it foreshortens. The same drawing serves the hero (.st-clue) and How it works (.cp-front). */
.cluepage{max-width:40rem;perspective:1400px;margin-bottom:12px}
.cp-open{padding:24px 22px 20px;display:grid;gap:10px;align-content:start;z-index:1}
.cp-open::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;background:linear-gradient(to bottom,rgba(30,26,51,0),rgba(30,26,51,.11));pointer-events:none}
.cp-name{font-family:var(--f-display);font-size:1.875rem;line-height:1.05;overflow-wrap:anywhere}
.cp-how{font-size:.9375rem;line-height:1.4;color:var(--paper-muted);max-width:62ch}
.cp-card{display:grid;gap:3px;max-width:62ch}
.cp-card .num{font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.1em;font-size:1rem;color:var(--theme);font-variant-numeric:tabular-nums}
.cp-card .txt{font-size:1rem;line-height:1.45}
.cp-card .none{font-style:italic;color:var(--paper-muted)}
.cp-flap{position:relative;width:100%;aspect-ratio:210/59.4;background:var(--paper);transform:rotateX(56deg);transform-origin:50% 0;
  background-image:linear-gradient(to bottom,rgba(30,26,51,.30) 0,rgba(30,26,51,.13) 14%,rgba(30,26,51,.05) 45%,rgba(30,26,51,.02) 100%);
  box-shadow:0 4px 0 -1px var(--paper),0 5px 0 -1px var(--paper-rule),0 9px 0 -2px var(--paper),0 10px 0 -2px var(--paper-rule),0 14px 18px -6px rgba(24,16,48,.22)}
.ro{padding:28px 20px 20px;max-width:52rem}
.ro::before{content:"";position:absolute;inset:8px;border:1px solid var(--theme);opacity:.5;pointer-events:none}
.ro ol.steps{display:grid;position:relative}
.ro .st{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 14px;padding-bottom:22px;position:relative}
.ro .st::before{content:"";position:absolute;left:10px;top:18px;bottom:0;width:1px;background:var(--paper-rule)}
.ro .st:last-child::before{display:none}
.ro .ring{width:12px;height:12px;border:2px solid var(--theme);border-radius:50%;margin:6px 0 0 5px;background:var(--paper);position:relative;z-index:1}
.ro .sh{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.ro .sh .bill{color:var(--theme);font-size:1.125rem}
.ro .sh .t{font-size:.9375rem;color:var(--paper-muted);font-variant-numeric:tabular-nums}
.ro .body{grid-column:2;display:grid;gap:8px;font-size:1rem;line-height:1.45}
.say{display:grid;gap:4px;border-left:2px solid var(--theme);padding-left:12px}
.say .bill{font-size:.8125rem;color:var(--theme)}
.envelope{max-width:34rem;padding:36px 24px 28px;display:grid;justify-items:center;text-align:center;gap:14px}
.envelope::before{content:"";position:absolute;inset:8px;border:1px solid var(--theme);opacity:.5;pointer-events:none}
.envelope .seal{width:96px;height:96px;color:var(--theme)}
.envelope h3{font-family:var(--f-display);font-weight:400;font-size:2.25rem;line-height:1}
.envelope .bill{color:var(--theme)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.paper .btn-q{border-color:var(--paper-ink);color:var(--paper-ink)}
.paper .btn-q:hover{background:var(--paper-tint)}
.tents{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:16px}
.tent{display:grid;grid-template-rows:1fr auto 1fr;min-height:15rem;padding:0}
.tent .half{display:grid;align-content:center;justify-items:center;text-align:center;gap:4px;padding:14px}
.tent .half.flip{transform:rotate(180deg);opacity:.55}
.tent .crease{border-top:1.5px dashed var(--paper-rule);margin-inline:10px}
.tent .nm{font-family:var(--f-display);font-size:1.75rem;line-height:1.05;overflow-wrap:anywhere}
.tent .ti{font-style:italic;font-size:1rem;line-height:1.3}
.tent .orn{width:110px;height:12px}
.tent .te{font-size:.875rem;line-height:1.35;color:var(--paper-muted)}
.closed-sheet .closed-body{display:grid;justify-items:center;text-align:center;gap:12px;padding:28px 8px 32px;border:1.5px dashed var(--paper-rule);background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(30,26,51,.025) 10px 11px)}
.closed-body .closed-h{font-family:var(--f-display);font-size:1.5rem;line-height:1.15;text-wrap:balance;max-width:24ch}
.closed-body p{max-width:44ch}
.big-lock{width:40px!important;height:40px!important;color:var(--theme);stroke-width:1.4!important}
.closed-round{margin-inline:0;justify-items:center}
.fold-wrap{display:grid;gap:6px}
.fold-note{font-style:italic;font-size:.9375rem;color:var(--paper-muted)}
.secret-half{display:grid;gap:18px}
.intro-line{font-style:italic}
.intros{display:grid;gap:6px;margin-top:4px}
.intros .bill{font-size:.8125rem;color:var(--theme)}
.intros ol{display:grid;gap:4px;list-style:decimal;padding-left:1.4em;font-size:1rem}
.intros b{font-family:var(--f-display);font-weight:400}
.after{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:36px;padding-top:24px;border-top:1px solid var(--rule)}
.after p{max-width:38rem}
.fallback{padding:20px;border:1px dashed var(--field);border-radius:var(--radius)}

/* 3 · how it works: each step drawn as a piece of the kit (CSS objects, sized in cqw) */
.how{display:grid;gap:32px}
.how>li{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start}
.how-t{display:grid;gap:6px;min-width:0}
.how h3{font-family:var(--f-display);font-weight:400;font-size:1.5rem;line-height:1.15;display:flex;gap:12px;align-items:baseline}
.how .sn{color:var(--accent);flex:none;font-variant-numeric:lining-nums}
.how-t p{max-width:34rem;color:var(--muted)}
.obj{position:relative;container-type:inline-size;width:100%;max-width:240px;aspect-ratio:4/3}
.pp{position:absolute;background:var(--paper);color:var(--paper-ink);box-shadow:0 1px 1px rgba(24,16,48,.10),0 6px 16px rgba(24,16,48,.14);overflow:hidden}
.kb{font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.1em;color:var(--kit);line-height:1.1;white-space:nowrap}
.korn{display:block;color:var(--kit);height:auto}
.ln{display:block;height:1px;background:var(--paper-muted);opacity:.45;margin-top:3.4cqw}
.snip{position:absolute;width:6cqw;height:6cqw;fill:none;stroke:var(--paper-muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mini-prog{left:16%;top:3%;width:68%;height:94%;transform:rotate(-2.5deg);padding:7cqw 6cqw 4cqw;display:grid;align-content:start;justify-items:center;gap:1.2cqw}
.mini-prog::before{content:"";position:absolute;inset:2.2cqw;border:1px solid var(--kit);opacity:.6}
.mini-prog .kb{font-size:3.6cqw;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.mini-prog .kt{font-family:var(--f-display);font-size:8.4cqw;line-height:1}
.mini-prog ul{width:100%;display:grid;margin-top:1.6cqw}
.mini-prog li{display:flex;align-items:baseline;gap:1.4cqw;padding:1.3cqw 0;border-top:1px solid var(--paper-rule);min-width:0}
.mini-prog li:first-child{border-top:0}
.kn{font-family:var(--f-display);font-size:5.6cqw;line-height:1.1;white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis}
.kd{flex:1 1 4cqw;min-width:3cqw;border-bottom:1.5px dotted var(--paper-rule)}
.kr{font-style:italic;font-size:3.6cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44%;color:var(--paper-muted)}
.mini-prog .korn{width:34cqw;margin-top:1.4cqw}
/* step 2: two guests' clue pages, Priya's in front opened one fold to Round 1, Tom's behind still flat */
.cc{padding:4.4cqw 5cqw}
.cc .kb{font-size:4cqw}
.cc .kname{font-size:6.4cqw}
.cc-back{left:34%;top:2%;width:58%;height:64%;transform:rotate(6deg)}
.cc-front{position:absolute;left:4%;top:7%;width:64%;transform:rotate(-3deg);perspective:900px}
.cc-front .cp-open{position:relative;background:var(--paper);box-shadow:0 1px 1px rgba(24,16,48,.10),0 6px 16px rgba(24,16,48,.14);padding:4.4cqw 5cqw 4cqw}
.cc-front .cp-open::after{height:4cqw}
.cc .ln{margin-top:2.6cqw}
.cc .lnh{margin-top:1.8cqw;opacity:.3}
.cc .kb{margin-top:2.6cqw}
.cc-front .cp-flap{aspect-ratio:210/50;box-shadow:0 3px 0 -1px var(--paper),0 4px 0 -1px var(--paper-rule),0 7px 0 -2px var(--paper),0 8px 0 -2px var(--paper-rule),0 10px 12px -5px rgba(24,16,48,.22)}
.a4{width:46%;height:92%;padding:4cqw 3.6cqw}
.a4-back{left:46%;top:3%;transform:rotate(5deg)}
.a4-front{left:12%;top:5%;transform:rotate(-3.5deg)}
.kro{display:grid;gap:3.4cqw;padding-top:1cqw;position:relative}
.kro::before{content:"";position:absolute;left:1.3cqw;top:2cqw;bottom:2cqw;width:1px;background:var(--paper-rule)}
.kro li{display:grid;grid-template-columns:3cqw 1fr;column-gap:2.2cqw;align-items:center}
.kro .ring{width:2.8cqw;height:2.8cqw;border:1.5px solid var(--kit);border-radius:50%;background:var(--paper);position:relative}
.kro .kbl{display:block;height:.9cqw;max-width:40%;background:var(--kit);opacity:.85}
.kro .ln{grid-column:2;margin-top:1.6cqw}
.band{border-block:1.5px solid var(--kit);padding:1.8cqw 0;display:grid;gap:.6cqw}
.kname{font-family:var(--f-display);font-size:7cqw;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kplays{font-size:3cqw;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a4-front>.ln{margin-top:3cqw}
.kfold{border-top:1.5px dashed var(--paper-rule);margin:4.6cqw -3.6cqw 0}
.ital .ln{opacity:.3}
@media (min-width:600px) and (max-width:1023.98px){.how>li{grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}}
@media (min-width:1024px){.how{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}.obj{max-width:300px}}

/* 4 · questions: a printed sheet of clue cards; on phones each folds under its first line */
.qsheet{position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding:12px;max-width:66rem;--theme:var(--t-chc)}
@media (min-width:600px){.qsheet{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px}}
.q{display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:22px 20px 16px;border:1px dashed var(--paper-rule);margin:-.5px}
.q h3{font-family:var(--f-display);font-weight:400;font-size:1.3125rem;line-height:1.2;text-wrap:balance}
.q p{font-size:1rem;line-height:1.5;color:var(--paper-ink);max-width:62ch}
.q .korn{width:96px;justify-self:end;opacity:.9;color:var(--theme)}
.q-fold{position:relative;display:flex;align-items:center;width:calc(100% + 40px);min-height:44px;margin:-4px -20px -8px;padding:0 14px;border:0;background:transparent;color:var(--theme);-webkit-tap-highlight-color:transparent}
.q-fold::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed currentColor}
.q-fold svg{position:relative;z-index:1;width:26px;height:26px;padding:2px;background:var(--paper);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.q-fold:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.q.folded{cursor:pointer}
.q.folded .q-rest,.q.folded .korn{display:none}
.q:not(.folded) .q-fold{color:var(--paper-rule)}
.q:not(.folded) .q-fold svg{stroke:var(--theme);margin-left:auto}
@media (min-width:600px){.q-fold{display:none!important}.q .q-rest{display:inline!important}.q .korn{display:block!important}}
.qsheet>.snip{left:4px;top:-11px;width:22px;height:22px;background:var(--bg);padding:2px;border-radius:50%;stroke:var(--muted)}
@media (min-width:1024px){.q{padding:26px 26px 18px}}

/* 5 · curtain call: the last button */
.curtain{text-align:center}
.curtain .wrap{display:grid;justify-items:center;gap:22px;padding-block:64px 72px}
.curtain .seal-big{width:88px;height:88px;--seal:#F07AA6;--seal-ink:#15121F;transform:rotate(-10deg)}
.curtain .seal-big svg{width:100%;height:100%;display:block}
.curtain .orn{width:220px;height:20px;color:var(--house-accent);opacity:.7}
.curtain .btn{min-width:min(100%,22rem)}

/* =====================================================================
   ORDER FLOW
   ===================================================================== */
.flow-top{position:sticky;top:0;z-index:20}
.flow-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-height:56px}
.flow-bar .back{justify-self:start;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:8px 8px 8px 0;font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.08em;font-size:1.0625rem;line-height:1;color:var(--on-house);text-decoration:none}
.flow-bar .back .ic{width:20px;height:20px;color:var(--house-accent)}
.flow-bar .back:hover span{text-decoration:underline;text-underline-offset:.3em}
.stephead{font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.1em;font-size:1rem;color:var(--on-house);white-space:nowrap;text-align:center}
.stephead b{font-weight:400;color:var(--house-accent);font-variant-numeric:tabular-nums}
.chip-price{justify-self:end;font-family:var(--f-display);font-size:1.25rem;line-height:1;padding:6px 10px 5px;border:1px solid var(--house-rule);border-radius:999px;color:var(--on-house)}
.flow-bar .brand svg{height:28px}
.flow-bar .brand{justify-self:start}
.progress{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;height:3px;padding-inline:0}
.progress i{display:block;background:var(--house-rule);transition:background .25s}
.progress i.on{background:var(--house-accent)}
.flow-top.solo .progress{display:none}

.flow{max-width:640px;margin:0 auto;padding-top:28px;padding-bottom:0;padding-left:16px;padding-right:16px}
@supports (padding:max(0px)){.flow{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
.screen{display:grid;gap:26px;align-content:start}
.screen:focus{outline:none}
.screen h1{font-family:var(--f-display);font-weight:400;font-size:2.25rem;line-height:1.05;text-wrap:balance}
.screen h1:focus{outline:none}
.label{font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.1em;font-size:1.125rem;line-height:1.2;color:var(--fg)}
.help{font-size:.9375rem;line-height:1.45;color:var(--muted)}
.field{display:grid;gap:8px;min-width:0}
.load-error{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius);background:var(--bad-tint);color:var(--bad)}
.load-error span{color:var(--fg)}

/* screen 1: the date as a ticket stub */
.ticket{position:relative;background:var(--paper);color:var(--paper-ink);box-shadow:var(--paper-shadow);border-radius:4px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 14px;padding:16px 18px 16px 20px;--ring:var(--paper-accent);
  -webkit-mask:radial-gradient(circle 9px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 9px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat}
.ticket::before{content:"";position:absolute;inset:6px;border:1px solid var(--paper-accent);opacity:.35;border-radius:2px;pointer-events:none}
.ticket .tl{font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.12em;font-size:.9375rem;color:var(--paper-accent);grid-column:1/-1}
.ticket .tv{font-family:var(--f-display);font-size:2rem;line-height:1.05;font-variant-numeric:lining-nums;white-space:nowrap}
.ticket .tv.empty{color:var(--ghost)}
.ticket .tc{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--paper-ink);color:var(--paper-ink)}
.ticket .tc .ic{width:22px;height:22px}
.ticket input[type=date]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;border:0;padding:0;font-size:16px;z-index:2;-webkit-appearance:none;appearance:none;background:transparent}
.ticket input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ticket:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.ticket:hover .tc{background:var(--paper-tint)}
.verdict{display:flex;gap:10px;align-items:flex-start;font-size:1.0625rem;line-height:1.45;padding:12px 14px;border-radius:var(--radius);border:1px solid transparent}
.verdict .ic{margin-top:.12em;width:22px;height:22px}
.verdict.good{background:var(--good-tint);color:var(--good)}
.verdict.bad{background:var(--bad-tint);color:var(--bad)}
.verdict span{color:var(--fg)}
.verdict b{font-weight:600}

/* theme cards */
.themes{display:grid;gap:10px}
.theme{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:start;padding:14px 14px 14px 20px;border:1px solid var(--field);border-radius:var(--radius);background:var(--surface);overflow:hidden;min-height:88px}
.theme::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--tc)}
.theme input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:1;cursor:pointer}
.theme .tn{font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.08em;font-size:1.3125rem;line-height:1.1}
.theme .tl{font-size:.9375rem;line-height:1.4;color:var(--muted);grid-column:1/-1}
.theme .orn{color:var(--tc);width:92px;height:12px;align-self:center}
.theme .tick{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:none;place-items:center}
.theme .tick .ic{width:15px;height:15px;stroke-width:2.5}
.theme:has(input:checked){background:var(--accent-tint);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.theme:has(input:checked) .tick{display:grid}
.theme:has(input:checked) .orn{visibility:hidden}
.theme:has(input:focus-visible){outline:2px solid var(--ring);outline-offset:2px}
.theme:hover{border-color:var(--fg)}
@media (min-width:600px){.themes{grid-template-columns:1fr 1fr}.theme{min-height:120px;align-content:start}}

.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px}
.switch-row .label{display:flex;align-items:center;gap:10px}
.switch{appearance:none;-webkit-appearance:none;width:52px;height:30px;border-radius:15px;background:var(--rule);border:1px solid var(--field);position:relative;flex:none;margin:0;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.switch:checked{background:var(--accent);border-color:var(--accent)}
.switch:checked::after{transform:translateX(22px);background:var(--on-accent)}
.af-box{display:grid;gap:2px;padding:6px 16px 12px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface)}

/* the action bar: sticks to the bottom of the screen while its place is below the fold, then docks */
.act{position:sticky;bottom:0;z-index:10;display:grid;gap:8px;margin-left:-16px;margin-right:-16px;padding-top:12px;padding-left:16px;padding-right:16px;padding-bottom:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));background:var(--bar);border-top:1px solid var(--rule);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.act .btn{width:100%}
.pay-col{display:contents}
.act .msg{margin:0}
.offline{display:flex;gap:8px;align-items:center;color:var(--bad);font-size:.9375rem}
.offline span{color:var(--fg)}

/* screen 2: the guest list on ruled paper, each line shows its part as you type */
.names-wrap{position:relative;background:var(--paper);color:var(--paper-ink);border:1px solid var(--field);border-radius:var(--radius);--lh:2.25rem;--padx:16px;--pady:10px;overflow:hidden}
.names-wrap::before{content:"";position:absolute;left:0;right:0;top:var(--pady);bottom:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--lh) - 1px),var(--paper-rule) calc(var(--lh) - 1px),var(--paper-rule) var(--lh));pointer-events:none}
.names-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.names-wrap[data-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.names-wrap textarea,.names-mirror{font-family:var(--f-text);font-size:1.1875rem;line-height:var(--lh);padding:var(--pady) var(--padx);margin:0;letter-spacing:0;word-spacing:0;tab-size:4;white-space:pre;overflow:hidden}
.names-wrap textarea{position:relative;z-index:1;display:block;width:100%;min-height:calc(var(--lh) * 4 + var(--pady) * 2);border:0;background:transparent;color:var(--paper-ink);resize:none;outline:none;caret-color:var(--paper-accent)}
.names-wrap textarea::placeholder{color:var(--ghost);opacity:1}
.names-mirror{position:absolute;inset:0;color:transparent;pointer-events:none;z-index:0}
.names-mirror div{height:var(--lh);overflow:hidden;text-overflow:ellipsis;white-space:pre}
.names-mirror .as{color:var(--paper-muted);font-style:italic;font-size:.9375rem;padding-left:.6em}
.names-mirror .as b{font-weight:400;color:var(--theme)}
.counter{font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.1em;font-size:1rem;font-variant-numeric:tabular-nums;color:var(--muted);min-height:1.25em}
.counter.full{color:var(--good)}
.msgs{display:grid;gap:8px}
.msg{display:flex;gap:8px;align-items:flex-start;font-size:.9375rem;line-height:1.45;padding:10px 12px;border-radius:var(--radius);background:var(--bad-tint);color:var(--bad)}
.msg .ic{margin-top:.1em}
.msg.soft{background:transparent;color:var(--muted);padding:0}
.msg span{color:var(--fg)}
.msg.soft span{color:var(--muted)}

/* the cast, as the programme prints it */
.programme{--theme:var(--t-chc);padding:26px 20px 22px;container-type:inline-size}
.prog-head{display:grid;justify-items:center;text-align:center;gap:6px;padding-bottom:14px}
.prog-head .bill{color:var(--theme);transition:color .2s;font-variant-numeric:tabular-nums}
.prog-head h2{font-family:var(--f-display);font-weight:400;font-size:2.25rem;line-height:1}
.prog-head .orn{width:180px;height:16px}
.names-mirror.ghost .as,.names-mirror.ghost .as b{color:var(--ghost)}
.rest-lbl{font-style:italic;color:var(--paper-muted);text-align:center;font-size:1rem;margin:-4px 0 8px}
.cast li{display:grid;gap:2px;padding:12px 4px;border-top:1px solid var(--paper-rule)}
.cast li:first-child{border-top:0}
.cast .nm{font-family:var(--f-display);font-size:1.625rem;line-height:1.1;overflow-wrap:anywhere}
.cast .as{font-style:italic;font-size:1.0625rem;line-height:1.35}
.cast .teaser{font-size:.9375rem;line-height:1.4;color:var(--paper-muted)}
.cast li.ghost .nm,.cast li.ghost .as,.cast li.ghost .teaser{color:var(--ghost)}
.cast li.open .nm{color:var(--paper-muted);font-size:1.25rem;border-bottom:1.5px dashed var(--paper-rule);justify-self:start}
.cast li.landed{animation:land .2s ease-out}
.addname{justify-self:start;font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.1em;font-size:.9375rem;color:var(--paper-accent);background:none;border:0;padding:12px 0;margin:-6px 0 -12px;min-height:44px;display:inline-flex;align-items:center;gap:4px}
.addname .ic{width:16px;height:16px}
.more{font-size:.9375rem;color:var(--paper-muted);text-align:center;padding-top:10px;border-top:1px solid var(--paper-rule)}
.prog-foot{display:grid;gap:10px;padding-top:16px;margin-top:6px;border-top:1px solid var(--paper-rule);font-size:.9375rem;line-height:1.45}
.prog-foot .guilt,.prog-foot .note2{color:var(--paper-muted)}
.shuffle{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;background:transparent;color:var(--paper-ink);border:1.5px solid var(--paper-ink);border-radius:var(--radius);font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.08em;font-size:1rem;line-height:1}
.shuffle:hover{background:var(--paper-tint)}
.shuffle:disabled{opacity:.4;cursor:not-allowed}
.aside-lines{display:grid;gap:10px}

/* screen 3: the programme read back, role left, leader dots, name right */
.bill-above{color:var(--theme);text-align:center}
.playbill{--theme:var(--t-chc);padding:44px 22px 26px;display:grid;gap:4px;margin-top:10px}
.playbill .seal-stamp{top:-26px;right:-10px;width:60px;height:60px}
.playbill .bill-top{letter-spacing:.1em;text-wrap:balance}
.playbill .pt{font-family:var(--f-display);font-weight:400;font-size:1.75rem;line-height:1.1;text-align:center;text-wrap:balance;max-width:16ch;justify-self:center}
.playbill .bill-top{color:var(--theme);text-align:center;font-variant-numeric:lining-nums}
.playbill .orn{width:200px;height:20px;justify-self:center;margin:8px 0 10px}
.cast-list{display:grid}
.cast-list li{display:flex;align-items:baseline;gap:8px;padding:9px 0;border-top:1px solid color-mix(in srgb,var(--paper-rule) 60%,transparent)}
.cast-list li:first-child{border-top:0}
.cast-list .r{font-style:italic;font-size:1.0625rem;line-height:1.3;flex:0 1 auto;min-width:0}
.cast-list .d{flex:1 1 16px;min-width:16px;border-bottom:2px dotted var(--paper-rule);transform:translateY(-.28em)}
.cast-list .n{font-family:var(--f-display);font-size:1.5rem;line-height:1.05;white-space:nowrap;flex:none;max-width:60%;overflow-wrap:normal}
.cast-list .n.long{font-size:1.1875rem}
.playbill .foot-orn{width:120px;height:14px;justify-self:center;margin-top:12px}
.summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;font-size:.9375rem;line-height:1.45;color:var(--muted)}
.summary .link-btn{padding:0;min-height:44px}
.pay{display:grid;gap:14px}
.price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.price b{font-family:var(--f-display);font-weight:400;font-size:3.5rem;line-height:.9;color:var(--fg);font-variant-numeric:lining-nums tabular-nums}
.price span{font-size:.9375rem;color:var(--muted);line-height:1.4;max-width:16rem}
.warn{display:flex;gap:8px;align-items:flex-start;font-size:.9375rem;line-height:1.45;color:var(--fg)}
.warn .ic{color:var(--accent);margin-top:.1em}
.next-h{font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.12em;font-size:1rem;color:var(--muted)}
.next{display:grid;position:relative;margin-top:4px}
.next li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 12px;padding-bottom:14px;position:relative;font-size:1rem;line-height:1.45}
.next li::before{content:"";position:absolute;left:10px;top:18px;bottom:0;width:1px;background:var(--rule)}
.next li:last-child{padding-bottom:0}
.next li:last-child::before{display:none}
.next .ring{width:12px;height:12px;border:2px solid var(--accent);border-radius:50%;margin:6px 0 0 5px;background:var(--bg);position:relative;z-index:1}
.next li:first-child .ring{background:var(--accent)}
.next b{font-family:var(--f-bill);font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:1.0625rem;color:var(--accent);font-variant-numeric:lining-nums}
.ref{font-family:var(--f-bill);text-transform:uppercase;letter-spacing:.1em;font-size:1rem;color:var(--muted)}
.ref b{font-weight:400;color:var(--fg);font-size:1.25rem;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.late{display:grid;gap:12px;padding:16px;border-radius:var(--radius);background:var(--bad-tint)}
.late p{display:flex;gap:8px;color:var(--fg)}
.late .ic{color:var(--bad);margin-top:.1em}
.status{font-size:.9375rem;color:var(--good);display:flex;gap:6px;align-items:center}
.status span{color:var(--fg)}

/* paid, sent, recover */
.done-mark{width:76px;height:76px;transform:rotate(-10deg);--seal:#B3245E;--seal-ink:#FFFFFF;filter:drop-shadow(0 2px 2px rgba(24,16,48,.25)) drop-shadow(0 6px 10px rgba(24,16,48,.15))}
.done-mark svg{width:100%;height:100%;display:block}
.lead{font-size:1.1875rem;line-height:1.5}
.when{display:flex;gap:10px;align-items:flex-start;font-size:1.0625rem;line-height:1.45;padding:12px 14px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--rule)}
.when .ic{color:var(--accent);margin-top:.1em}
.slip{font-family:var(--f-text);background:var(--paper);color:var(--paper-ink);border:1px dashed var(--paper-rule);border-radius:2px;padding:16px;font-size:.9375rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;max-height:20rem;overflow:auto;box-shadow:var(--paper-shadow);margin:0}
.copied{color:var(--good);font-size:.9375rem;display:flex;gap:6px;align-items:flex-start}
.copied span{color:var(--fg)}
.start-again{justify-self:start}
dialog{border:0;border-radius:8px;padding:24px;max-width:min(92vw,26rem);background:var(--surface);color:var(--fg);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(15,12,24,.55)}
dialog h2{font-family:var(--f-display);font-weight:400;font-size:1.5rem;line-height:1.15;margin-bottom:8px}
dialog .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
dialog .btn{font-size:1.1875rem;min-height:48px}

@media (min-width:1024px){
  .flow{max-width:1120px;padding-top:40px}
  .screen{gap:30px}
  .screen h1{font-size:3rem}
  .flow-bar{min-height:64px}
  .s-party{max-width:720px;margin-inline:auto}
  .s-guests{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:56px;align-items:start}
  .s-guests>*{grid-column:1}
  .s-guests>.cast-col{grid-column:2;grid-row:1/span 40;position:sticky;top:96px}
  .s-prog{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:start}
  .s-prog>*{grid-column:1}
  .s-prog>.pay-col{display:grid;gap:18px;align-content:start;grid-column:2;grid-row:1/span 40;position:sticky;top:96px}
  .act{margin:0;padding:14px 0 18px}
  .pay-col .act{position:static;padding:4px 0 0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .act .btn{width:auto;min-width:20rem;justify-self:start}
  .pay-col .act .btn{width:100%}
  .playbill{padding:48px 48px 36px;transform:rotate(-.5deg)}
  .playbill .pt{font-size:2.25rem}
  .cast-list .r{font-size:1.1875rem}
  .cast-list .n{font-size:1.875rem}
  .s-done{max-width:640px;margin-inline:auto}
}

/* QA1 (2026-11-11) · F3r order line, F5 late choices, the characters card, the order number never wraps */
[data-ref],.ref-n{white-space:nowrap}
.order-line{font-size:.9375rem;line-height:1.35;margin:0}
.order-line a{display:inline-block;padding:12px 0;min-height:44px;color:var(--accent);text-decoration:underline;text-underline-offset:.18em}
.hero .order-line{text-align:center;margin-top:-6px}
.hero .order-line a{color:var(--on-house)}
.act .order-line{text-align:center;margin-top:-4px}
.cast .rt{font-family:var(--f-display);font-size:1.375rem;line-height:1.15;overflow-wrap:anywhere}
.s-done .another{justify-self:start;margin-top:8px}
@media (min-width:1024px){.hero .order-line,.act .order-line{text-align:left}}