/* subs - the house: 1970s playbill billing + seats-plan states. Deep blue house, cream people, copper money. */
@font-face { font-family: "Caprasimo"; src: url(/assets/fonts/Caprasimo-Regular.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Jost"; src: url(/assets/fonts/Jost-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Jost"; src: url(/assets/fonts/Jost-Italic-var.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Chivo Mono"; src: url(/assets/fonts/ChivoMono-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --deep: #0A1033; --house: #121C4E; --house2: #1B2A6B; --cream: #F2E4C4; --cream2: #E3CFA2; --copper: #B8673A; --copper-lt: #D9925A;
  --ink: #0B1235; --queue: #6E7899; --hair: rgba(242, 228, 196, .16); --hair2: rgba(242, 228, 196, .3);
  --disp: "Caprasimo", "Cooper Black", Georgia, serif; --text: "Jost", "Futura", system-ui, sans-serif; --mono: "Chivo Mono", ui-monospace, monospace;
  --pad: clamp(16px, 4vw, 56px); --top: 60px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--house); color: var(--cream); font: 400 17px/1.5 var(--text); overflow-x: hidden; }
a { color: inherit; }
a, button, [role=button], [role=slider], summary, label, .ca, select, input[type=file] { cursor: pointer; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
.num, code, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
code { font-size: .92em; overflow-wrap: anywhere; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: 8px; background: var(--cream); color: var(--ink); padding: 8px 12px; z-index: 100; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip:focus { clip-path: none; width: auto; height: auto; }
:focus-visible { outline: 2px solid var(--copper-lt); outline-offset: 3px; }
.muted { color: var(--cream2); opacity: .8; }
.tlink { display: inline-block; padding: 8px 0 4px; color: var(--cream); text-decoration: none; background: linear-gradient(var(--copper), var(--copper)) 0 100%/100% 2px no-repeat; padding-bottom: 2px; transition: background-size .25s, color .2s; }
.tlink:hover { color: var(--copper-lt); background-size: 100% 2px; }
.pg-feat, .bill-feat { font: italic 500 clamp(15px, 1.4vw, 19px)/1.2 var(--text); color: var(--copper-lt); margin: 0 0 6px; }
.kicker, .cap, dt { font: 600 12px/1.2 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--cream2); }

/* ---------------------------------------------------------------- header */
.top { position: sticky; top: 0; z-index: 30; height: var(--top); display: flex; align-items: center; gap: 22px; padding: 0 var(--pad); background: var(--deep); border-bottom: 1px solid var(--hair); }
.top-name { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; font: 400 22px/1 var(--disp); text-decoration: none; white-space: nowrap; color: var(--cream); }
.top-nav { display: flex; gap: 22px; margin-left: 8px; }
.top-nav a { font: 600 12px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--cream2); padding: 8px 0; background: linear-gradient(var(--copper), var(--copper)) 0 100%/0 2px no-repeat; transition: background-size .25s, color .2s; }
.top-nav a:hover { color: var(--cream); background-size: 100% 2px; }
.top-chips { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.top-menu { display: none; font: 600 12px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; border: 1px solid var(--cream2); height: 40px; padding: 0 12px; }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--cream2); color: var(--cream); text-decoration: none;
  font: 600 12px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; background: transparent; transition: background-color .18s, color .18s, transform .1s; white-space: nowrap; }
.chip:hover { background: var(--cream); color: var(--ink); }
.top-chips .chip, .hero-btns .chip, .stage-btns .chip { -webkit-mask: radial-gradient(circle 5px at 0 50%, #0000 96%, #000) 0 0/51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, #0000 96%, #000) 100% 0/51% 100% no-repeat;
  mask: radial-gradient(circle 5px at 0 50%, #0000 96%, #000) 0 0/51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, #0000 96%, #000) 100% 0/51% 100% no-repeat; padding: 0 16px; }
.chip:active { transform: translateY(2px); }
.chip[disabled] { opacity: .45; border-style: dashed; cursor: not-allowed; }
.chip .ic { display: block; }
.chip.wallet.on { border-color: var(--copper-lt); font-family: var(--mono); letter-spacing: .02em; text-transform: none; }
.sheet { position: fixed; inset: 0; z-index: 60; background: var(--deep); padding: 72px var(--pad) 24px; display: flex; flex-direction: column; gap: 20px; }
.sheet[hidden] { display: none; }
.sheet nav { display: flex; flex-direction: column; }
.sheet nav a { font: 400 34px/1.35 var(--disp); text-decoration: none; border-bottom: 1px solid var(--hair); padding: 6px 0; }
.sheet-x { position: absolute; top: 10px; right: var(--pad); width: 44px; height: 44px; font-size: 30px; line-height: 1; border: 1px solid var(--cream2); }
.sheet .chip { align-self: flex-start; }

/* ---------------------------------------------------------------- pass button (Movie Pass 13570: four corner punches + price stub) */
.pass { --r: 7px; --bg: var(--cream); --fg: var(--ink); position: relative; display: inline-flex; align-items: stretch; min-height: 48px; text-decoration: none; color: var(--fg); background: var(--bg);
  font: 600 13px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; transition: background-color .18s, transform .08s;
  -webkit-mask: radial-gradient(circle var(--r) at 0 0, #0000 98%, #000) 0 0/51% 51% no-repeat, radial-gradient(circle var(--r) at 100% 0, #0000 98%, #000) 100% 0/51% 51% no-repeat,
    radial-gradient(circle var(--r) at 0 100%, #0000 98%, #000) 0 100%/51% 51% no-repeat, radial-gradient(circle var(--r) at 100% 100%, #0000 98%, #000) 100% 100%/51% 51% no-repeat;
  mask: radial-gradient(circle var(--r) at 0 0, #0000 98%, #000) 0 0/51% 51% no-repeat, radial-gradient(circle var(--r) at 100% 0, #0000 98%, #000) 100% 0/51% 51% no-repeat,
    radial-gradient(circle var(--r) at 0 100%, #0000 98%, #000) 0 100%/51% 51% no-repeat, radial-gradient(circle var(--r) at 100% 100%, #0000 98%, #000) 100% 100%/51% 51% no-repeat; }
.pass-t { display: flex; align-items: center; padding: 0 22px 0 24px; white-space: nowrap; }
.pass-stub { display: flex; align-items: center; padding: 0 18px; border-left: 2px dotted rgba(11, 18, 53, .45); font: 500 12px/1 var(--mono); letter-spacing: .02em; text-transform: none; white-space: nowrap; }
.pass:hover { --bg: var(--copper-lt); }
.pass:active { --bg: var(--copper); transform: translateY(2px); }
.pass.copper { --bg: var(--copper); --fg: var(--cream); }
.pass.copper .pass-stub { border-left-color: rgba(242, 228, 196, .5); }
.pass.copper:hover { --bg: var(--copper-lt); --fg: var(--ink); }
.pass[disabled], .pass.disabled { --bg: transparent; --fg: var(--cream2); -webkit-mask: none; mask: none; outline: 1px dashed var(--cream2); outline-offset: -1px; cursor: not-allowed; transform: none; }
.pass[disabled] .pass-stub, .pass.disabled .pass-stub { border-left-color: var(--hair2); }

/* CA line: full, copy with confirmation (36536) */
.caline { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 100%; font-size: 13px; }
.caline .k { font: 600 11px/1 var(--text); letter-spacing: .2em; color: var(--copper-lt); }
.caline .ca-v { color: var(--cream); overflow-wrap: anywhere; font-size: 13px; }
.caline.pend .ca-v { color: var(--cream2); font-family: var(--text); font-style: italic; }
.copy { position: relative; display: inline-grid; place-items: center; min-width: 58px; height: 32px; border: 1px solid var(--hair2); overflow: hidden; font: 600 11px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; }
.copy > * { grid-area: 1/1; transition: transform .2s, opacity .2s; }
.copy-ok { opacity: 0; transform: translateY(14px); color: var(--copper-lt); }
.copy.ok .copy-t { opacity: 0; transform: translateY(-14px); }
.copy.ok .copy-ok { opacity: 1; transform: none; }
.copy:hover { border-color: var(--cream); }
button.chip[data-copy].ok { background: var(--copper); border-color: var(--copper); }

/* ---------------------------------------------------------------- the hall canvas */
.hall { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; background: var(--deep); }
.home main { position: relative; z-index: 2; }
.home .top { background: var(--deep); }
.scene { position: relative; min-height: 130vh; padding: 0 var(--pad); }

/* 1 gallery */
.s-gallery { min-height: calc(100vh - var(--top)); min-height: calc(100svh - var(--top)); display: grid; grid-template-rows: auto 1fr auto; padding-top: clamp(18px, 4vh, 44px); padding-bottom: clamp(18px, 4vh, 40px); }
.bill { justify-self: center; width: min(760px, 100%); background: var(--cream); color: var(--ink); text-align: center; padding: clamp(18px, 3vh, 30px) clamp(18px, 4vw, 54px) clamp(26px, 4.4vh, 44px);
  border-radius: 0 0 50% 50% / 0 0 34px 34px; position: relative; }
.bill::after { content: ""; position: absolute; left: 3%; right: 3%; bottom: -14px; height: 22px; border-bottom: 3px solid var(--copper); border-radius: 0 0 50% 50% / 0 0 22px 22px; }
.bill .bill-feat { color: var(--copper); }
.bill-name { font: 400 clamp(44px, 7.2vw, 112px)/.92 var(--disp); margin: 4px 0 12px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.bill-line { margin: 0 auto; max-width: 520px; font-size: clamp(15px, 1.25vw, 17px); }
/* the house status sits on the playbill itself: DEMO (when no house has seats) + doors open / doors closed / LIVE */
.bill-status { display: flex; justify-content: center; gap: 8px; margin: clamp(10px, 1.6vh, 16px) 0 0; min-height: 28px; }
.demo-tag, .live-tag { display: inline-flex; align-items: center; font: 600 11px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; padding: 0 10px; height: 28px; border: 1px solid rgba(11, 18, 53, .35); color: var(--ink); }
.demo-tag { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.live-tag { width: 156px; justify-content: center; font-family: var(--mono); font-weight: 500; letter-spacing: .08em; }
.live-tag.is-live { background: var(--copper); color: var(--cream); border-color: var(--copper); }
.hero-nums { align-self: start; margin: clamp(10px, 4vh, 40px) 0 0; display: grid; gap: 0; width: 300px; background: var(--deep); border-top: 3px solid var(--copper); padding: 4px 20px 6px; position: relative; z-index: 2; }
.hero-nums > div { padding: clamp(10px, 1.6vh, 16px) 0; }
.hero-nums > div + div { border-top: 1px solid var(--hair2); }
.hero-nums dd { margin: 0; }
.hero-nums .num { font: 500 clamp(28px, 2.7vw, 38px)/1.05 var(--text); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; margin-top: 6px; color: var(--cream); }
.hero-nums .sub { font-size: 13px; color: var(--cream2); max-width: 230px; line-height: 1.35; margin-top: 2px; }
.hero-act { justify-self: center; display: grid; justify-items: center; gap: 14px; }
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.queue-tags { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .3s; }
.queue-tags.on { opacity: 1; }
.qtag { position: absolute; left: 0; top: 0; font-size: 11px; color: #AAB3D6; background: var(--deep); border: 1px solid rgba(122, 134, 173, .7); padding: 3px 6px; white-space: nowrap; }
.qlab { font: italic 500 13px/1 var(--text); color: #C3CAE6; padding: 5px 8px; }
/* tier pills on the 3D house (seats.io-style section labels), hero only */
.tier-tags { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .3s; }
.tier-tags.on { opacity: 1; }
.ttag { position: absolute; left: 0; top: 0; font: 600 10px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--cream); background: var(--deep); border: 1px solid var(--hair2); padding: 5px 8px; white-space: nowrap; }

/* scene copy blocks over the house (solid lifted plates, no glass) */
.scene-copy { position: relative; max-width: 480px; padding: 26px 28px 28px; background: var(--house); border-top: 3px solid var(--copper); }
.scene-title { font: 400 clamp(38px, 4vw, 58px)/.98 var(--disp); margin: 6px 0 14px; }
.kicker { margin: 0; color: var(--copper-lt); }
.mask { margin: 0; color: var(--cream2); }
.ml { display: block; overflow: hidden; }
.mi { display: block; }
.mask-go .mi { animation: lineUp .8s cubic-bezier(.19, 1, .22, 1) both; animation-delay: var(--d); }
@keyframes lineUp { from { transform: translateY(110%); } to { transform: none; } }
.fw { display: inline-block; white-space: nowrap; padding-right: .05em; }
.fl { display: inline-block; backface-visibility: hidden; transform-origin: 50% 50% -.5em; }
.flip-go .fl { animation: flipIn .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d); }
@keyframes flipIn { from { transform: perspective(600px) rotateX(-90deg); } to { transform: perspective(600px) rotateX(0); } }

/* 2 balcony: copy left, ticket right; the free seat is between them in the hall */
.s-balcony { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-content: center; padding-top: 18vh; padding-bottom: 18vh; }
.ticket-slot { align-self: center; justify-self: end; width: min(640px, 100%); min-height: 520px; }

/* the ticket (Boarding Pass 35500 reskin): front + back, stub with perforation */
.tk { perspective: 1400px; }
.tk-card { position: relative; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .8, .2, 1); display: grid; }
.tk[data-side=back] .tk-card { transform: rotateY(180deg); }
.tk-face { grid-area: 1/1; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: var(--ink);
  border: 0 solid transparent; border-image: url(/assets/art/ticket.webp) 64 fill / 28px stretch; }
/* stub column lines up with the punched notches of the ticket stock: 28px + 71.57 % of the stretched middle */
.tk-front { display: grid; grid-template-columns: calc(71.57% - 12.07px) minmax(0, 1fr); }
.tk-back { transform: rotateY(180deg); padding: 32px 36px; }
.tk-main { padding: 30px 26px 24px 34px; min-width: 0; }
.tk-admit { font: 600 11px/1 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--copper); margin: 0 0 8px; }
.tk-admit span { opacity: .6; }
.tk-dev { font: 400 clamp(26px, 2.6vw, 34px)/1.05 var(--disp); margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(11, 18, 53, .18); overflow-wrap: anywhere; }
.tk-flip { min-height: 36px; color: var(--ink); background-image: linear-gradient(var(--copper), var(--copper)); font: 600 11px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; margin-top: 12px; display: inline-block; padding: 6px 0; }
.tk-flip:hover { color: var(--copper); }
.tk-stub { position: relative; border-left: 2px dashed rgba(11, 18, 53, .4); padding: 30px 26px 26px 18px; display: flex; flex-direction: column; min-width: 0; }
.tk-seat-k { font: 600 11px/1 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--copper); margin: 0; }
.tk-seat { font: 400 40px/1 var(--disp); margin: 8px 0 0; }
.tk-perf { position: absolute; left: -6px; top: 10px; bottom: 10px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.tk-perf i { width: 10px; height: 10px; border-radius: 50%; background: var(--house); transition: background-color .12s, transform .12s; }
.tk-perf i.torn { background: var(--copper); transform: scale(1.2); }
.tk-stub-act { margin-top: auto; display: grid; gap: 8px; }
.tk-stub-act .pass { flex-direction: column; min-height: 0; }
.tk-stub-act .pass { width: 100%; }
.tk-stub-act .pass .pass-t { padding: 12px 8px 8px; justify-content: center; font-size: 12px; letter-spacing: .1em; white-space: normal; text-align: center; }
.tk-stub-act .pass .pass-stub { border-left: 0; border-top: 2px dotted rgba(11, 18, 53, .45); padding: 8px 10px 12px; justify-content: center; }
.tk-stub-act .pass { --bg: var(--ink); --fg: var(--cream); }
.tk-stub-act .pass .pass-stub { border-top-color: rgba(242, 228, 196, .45); }
.tk-stub-act .pass:hover { --bg: var(--copper); --fg: var(--cream); }
.tk-stub-act .pass.disabled { --bg: transparent; --fg: var(--ink); outline-color: var(--ink); }
.tk-demo .tk-stub-act .pass { --bg: var(--copper); }
.tk-msg { min-height: 1.5em; margin: 10px 0 0; font-size: 14px; color: var(--cream2); }
.tk-msg.ok { color: var(--cream); } .tk-msg.err { color: var(--copper-lt); }
.tk-f { margin-bottom: 14px; }
.tk-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tk-seg { display: inline-flex; align-items: center; gap: 0; }
.tk-seg button { width: 40px; height: 40px; border: 1px solid rgba(11, 18, 53, .35); margin-right: -1px; font: 500 15px/1 var(--mono); color: var(--ink); }
.tk-seg button[aria-checked=true] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.tk-seg button:disabled { opacity: .3; cursor: not-allowed; border-style: dashed; }
.tk-seg-l { font: 600 11px/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; margin-left: 10px; color: rgba(11, 18, 53, .7); max-width: 80px; }
.tk-mode { font-size: 13px; line-height: 1.4; margin: 4px 0 12px; color: rgba(11, 18, 53, .78); min-height: 3.6em; }
.tk-sum, .tk-rec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin: 0; padding-top: 10px; border-top: 1px solid rgba(11, 18, 53, .18); }
.tk-rec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tk-sum dt, .tk-rec dt { color: var(--copper); font-size: 10px; letter-spacing: .18em; }
.tk-sum dd, .tk-rec dd { margin: 4px 0 0; font-size: 16px; color: var(--ink); overflow-wrap: anywhere; }
.tk-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tk-acts .chip { border-color: var(--ink); color: var(--ink); min-height: 40px; }
.tk-acts .chip:hover { background: var(--ink); color: var(--cream); }
.tk-hint, .tk-note { font-size: 13px; color: rgba(11, 18, 53, .75); margin: 10px 0 0; }
.tk-rules { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.4; }
.tk-rules li::marker { font-family: var(--mono); color: var(--copper); }
.tear { touch-action: none; user-select: none; background: var(--ink); color: var(--cream); padding: 14px 10px; display: grid; gap: 6px; text-align: center; transition: transform .08s linear, opacity .3s; }
.tear-t { font: 600 12px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; }
.tear-s { font-size: 11px; color: var(--cream2); }
.tear:hover { background: var(--copper); }
.tear.gone { opacity: .2; }

/* Slider Detents (23555) on the cream ticket */
.sd-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.sd-l { font: 600 11px/1 var(--text); letter-spacing: .18em; text-transform: uppercase; color: rgba(11, 18, 53, .7); }
.sd-v { font-size: 15px; color: var(--ink); }
.sd-track { position: relative; height: 44px; touch-action: none; outline: none; }
.sd-track:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.sd-rail { position: absolute; left: 9px; right: 9px; top: 10px; height: 6px; background: rgba(11, 18, 53, .14); overflow: hidden; }
.sd-fill { position: absolute; inset: 0; background: var(--copper); transform-origin: 0 50%; }
.sd-thumb { position: absolute; left: 0; top: 3px; width: 18px; height: 20px; background: var(--ink); border: 2px solid var(--cream); transition: transform .12s cubic-bezier(.2, .8, .2, 1); }
.drag .sd-thumb { transition: none; }
.sd-tick { position: absolute; top: 12px; transform: translateX(-50%); font: 500 10px/1 var(--mono); color: rgba(11, 18, 53, .55); padding: 16px 6px 8px; min-width: 32px; min-height: 32px; }
.sd-tick::before { top: 10px !important; }
.sd-tick::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 5px; background: rgba(11, 18, 53, .35); }
.sd-tick.on { color: var(--copper); }

/* lever switch (5210) for "sell at the bell" */
.lever { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; }
.lever input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lever-base { position: relative; width: 52px; height: 26px; background: rgba(11, 18, 53, .14); border: 1px solid rgba(11, 18, 53, .35); }
.lever-handle { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: var(--ink); transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), background-color .2s; }
.lever input:checked + .lever-base { background: rgba(184, 103, 58, .25); border-color: var(--copper); }
.lever input:checked + .lever-base .lever-handle { transform: translateX(26px); background: var(--copper); }
.lever input:focus-visible + .lever-base { outline: 2px solid var(--copper); outline-offset: 2px; }
.lever-l { font: 600 12px/1.1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }

/* 3 circle */
.s-circle { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-content: center; padding-top: 16vh; padding-bottom: 16vh; }
.circle-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; align-self: center; background: var(--hair); border: 1px solid var(--hair); max-width: 760px; justify-self: end; width: 100%; }
.circle-board > * { background: var(--house); padding: 22px 24px; }
.housebuy { grid-column: 1 / -1; }
.housebuy-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 10px; }
.unit { font: 600 18px/1 var(--text); letter-spacing: .2em; color: var(--cream2); padding-bottom: 8px; }
.housebuy-sub { color: var(--cream2); font-size: 13px; margin: 10px 0 0; }
.odo { display: inline-flex; gap: 6px; align-items: flex-end; }
.drum { position: relative; width: clamp(40px, 5vw, 62px); height: clamp(58px, 7vw, 88px); background: var(--cream); color: var(--ink); overflow: hidden; }
.drum .strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.drum .strip i { display: block; height: clamp(58px, 7vw, 88px); font: 500 clamp(40px, 5vw, 62px)/clamp(58px, 7vw, 88px) var(--mono); text-align: center; font-style: normal; }
.drum.lead { background: var(--house2); color: rgba(242, 228, 196, .35); }
.odo-dot { font: 500 clamp(40px, 5vw, 62px)/1 var(--mono); color: var(--cream); padding: 0 2px; }
.order { list-style: none; margin: 0; counter-reset: o; display: grid; align-content: start; gap: 0; }
.order li { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--hair); text-align: center; }
.o-what { font: 400 26px/1.05 var(--disp); }
.o-who { font: italic 500 14px/1.2 var(--text); color: var(--cream2); }
.order .o-house .o-what { color: var(--copper-lt); }
.order .o-rule { font: 600 11px/1 var(--text); letter-spacing: .3em; text-transform: uppercase; color: var(--cream2); padding: 8px 0; position: relative; }
.order .o-queue .o-what { color: var(--queue); font-size: 22px; }
.curve { margin: 0; }
.curve svg { width: 100%; height: auto; display: block; }
.c-axis { stroke: var(--hair2); fill: none; }
.c-line { stroke: var(--cream2); stroke-width: 2; fill: none; }
.c-house { fill: var(--copper); opacity: .9; }
.c-queue circle { fill: var(--queue); }
.c-t { font: 600 9px var(--text); letter-spacing: .14em; fill: var(--cream2); text-transform: uppercase; }
.curve figcaption { font-size: 13px; color: var(--cream2); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.sw { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
.sw.copper { background: var(--copper); } .sw.queue { background: var(--queue); border-radius: 50%; }
.bell { grid-column: 1 / -1; }
.bell-h { font: 400 28px/1 var(--disp); margin: 0 0 8px; color: var(--cream); }
.bell p { margin: 0; color: var(--cream2); font-size: 15px; }
.bell b { color: var(--cream); font-weight: 500; }

/* 4 stalls: the programme (Hatch billing stack) */
.s-stalls { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-content: center; padding-top: 16vh; padding-bottom: 16vh; }
.programme { background: var(--cream); color: var(--ink); padding: clamp(20px, 3vw, 36px); align-self: center; max-width: 760px; width: 100%; justify-self: end; }
.programme .pg-feat { color: var(--copper); text-align: center; }
.pg-cover { text-align: center; border-bottom: 3px double rgba(11, 18, 53, .5); padding-bottom: 16px; margin-bottom: 16px; }
.pg-head { font: 400 clamp(30px, 3.6vw, 52px)/1 var(--disp); margin: 4px 0 6px; overflow-wrap: anywhere; }
.pg-head a { text-decoration: none; }
.pg-state { font: 600 12px/1 var(--text); letter-spacing: .24em; text-transform: uppercase; margin: 0; color: rgba(11, 18, 53, .7); }
.pg-state.st-frozen, .pg-state.st-closed { color: var(--copper); }
.pg-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; text-align: center; }
.pg-stats dt { color: var(--copper); font-size: 10px; letter-spacing: .16em; }
.pg-stats dd { margin: 4px 0 0; }
.pg-stats .num { font-size: 22px; }
.pg-stats .num.nv { font: italic 500 15px/1.4 var(--text); }
.pg-stats .sub { font-size: 12px; color: rgba(11, 18, 53, .65); }
.pg-list { list-style: none; margin: 0; padding: 0; }
.pg-line { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 10px 0 12px; }
.pg-date { font-size: 12px; color: rgba(11, 18, 53, .65); }
.pg-coin { font: 400 22px/1.05 var(--disp); overflow-wrap: anywhere; }
.pg-sym { font: 500 11px/1 var(--mono); letter-spacing: .06em; vertical-align: middle; opacity: .7; }
.pg-cs { display: block; margin-top: 5px; font: italic 400 13px/1.25 var(--text); color: rgba(11, 18, 53, .66); }
.pg-cs.sold { color: var(--copper); }
.pg-buy, .pg-res { font-size: 14px; text-align: right; }
.pg-v { font: 600 11px/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; text-align: right; }
.pg-v.v-strike { color: var(--copper); }
.pg-rule { position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px; background: var(--copper); }
.ts-go .pg-rule { animation: ruleOut .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }
@keyframes ruleOut { from { left: 50%; right: 50%; } to { left: 0; right: 0; } }
.ts-go .pg-line > span { animation: setIn .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes setIn { from { transform: scaleX(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.pg-solo { display: block; text-align: center; font: italic 500 18px/1.4 var(--text); }
.pg-out { font-size: 14px; color: rgba(11, 18, 53, .75); margin: 14px 0 0; text-align: center; }
.pg-empty { text-align: center; padding: 20px 0; }
.pg-empty .tlink { color: var(--ink); }

/* 5 stage: fire curtain (Shutter Reveal 9326) */
.s-stage { min-height: 100vh; display: grid; place-items: end center; padding-bottom: 16vh; overflow: hidden; }
.stage-in { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; gap: 18px; background: var(--house); padding: 30px clamp(18px, 4vw, 48px) 34px; border-top: 3px solid var(--copper); width: min(1120px, 100%); }
.stage-name { font: 400 clamp(52px, 9.4vw, 150px)/.9 var(--disp); margin: 0; overflow-wrap: anywhere; }
.stage-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fc { position: absolute; inset: 0; display: flex; z-index: 3; pointer-events: none; }
.fc i { flex: 1; background: var(--house2); border-right: 1px solid var(--hair); transform-origin: 50% 0; transition: transform 1s cubic-bezier(.76, 0, .24, 1); transition-delay: calc(var(--i) * 80ms); }
.fc-up .fc i { transform: scaleY(0); }

/* ---------------------------------------------------------------- house-plan nav (Table of Content 22596) */
.plan { position: fixed; z-index: 20; left: 18px; bottom: 18px; width: 168px; }
.pn-svg { width: 168px; height: 160px; display: block; }
.pn-b { fill: rgba(242, 228, 196, calc(.08 + var(--m, 0) * .22)); stroke: var(--hair2); stroke-width: 1; transition: fill .2s; cursor: pointer; }
.pn-b.on { fill: var(--copper); stroke: var(--copper-lt); }
.pn-you { fill: var(--cream); stroke: var(--deep); stroke-width: 1.5; }
.pn-b { pointer-events: none; }
.pn-list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.pn-list li { position: absolute; left: 0; right: 0; top: var(--ty); height: 20px; transform: translateY(-50%); }
.pn-list button { width: 100%; height: 20px; display: flex; justify-content: center; align-items: center; font: 600 9px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: rgba(242, 228, 196, .7); }
.pn-list button:hover, .pn-list button[aria-current=step] { color: var(--cream); }
.pn-list .pn-d { display: none; }
.pn-card { position: absolute; left: 176px; top: var(--y, 50%); transform: translate(-6px, -50%); opacity: 0; pointer-events: none; background: var(--cream); color: var(--ink); padding: 10px 14px; width: 220px; transition: opacity .15s, transform .2s; }
.card-on .pn-card { opacity: 1; transform: translate(0, -50%); }
.pn-card b { display: block; font: 400 20px/1.1 var(--disp); }
.pn-card span { font-size: 13px; }
.inner .plan { display: none; }

/* ---------------------------------------------------------------- cursor (1896) + seat card (34738) */
.punch, .punch-tag { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; }
.punch { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--cream); background: transparent; transform: translate3d(-50px, -50px, 0); transition: width .15s, height .15s, background-color .15s; mix-blend-mode: normal; }
.punch.over { background: var(--cream); }
.punch-tag { font: 500 11px/1 var(--mono); background: var(--cream); color: var(--ink); padding: 4px 6px; opacity: 0; transition: opacity .12s; }
.punch-tag.on { opacity: 1; }
.seatcard { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; background: var(--cream); color: var(--ink); padding: 12px 14px; width: 250px; opacity: 0; transition: opacity .14s; font-size: 13px; }
.seatcard.on { opacity: 1; }
.sc-code { font: 400 24px/1 var(--disp); display: block; margin-bottom: 6px; }
.seatcard dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 0 0 6px; }
.seatcard dt { color: var(--copper); font-size: 9px; letter-spacing: .16em; }
.seatcard dd { margin: 2px 0 0; }
.sc-state { font: italic 500 13px var(--text); color: var(--copper); }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 95; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--cream); color: var(--ink); padding: 12px 14px; font-size: 14px; border-left: 4px solid var(--copper); }
.toast.err { border-left-color: var(--ink); }

/* wallet picker dialog (kit) */
.dlg { border: 0; padding: 26px; background: var(--cream); color: var(--ink); width: min(420px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(10, 16, 51, .78); }
.dlg h2 { font: 400 30px/1 var(--disp); margin: 0 0 14px; }
.dlg-x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; font-size: 28px; color: var(--ink); }
.wp-list { display: grid; gap: 6px; }
.wp-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(11, 18, 53, .25); color: var(--ink); text-align: left; min-height: 48px; }
.wp-item:hover { background: var(--ink); color: var(--cream); }
.wp-dot { width: 32px; height: 32px; background: var(--copper); }
.wp-get { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; }
.wp-get a { color: var(--ink); }
.wp-err { color: var(--copper); }
.btn.ghost { border: 1px solid var(--ink); padding: 10px 14px; margin-top: 12px; color: var(--ink); }

/* ---------------------------------------------------------------- footer */
.foot { position: relative; z-index: 30; background: var(--deep); border-top: 1px solid var(--hair); padding: 28px var(--pad) 120px; }
.foot-row { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
.foot-name { font: 400 26px/1 var(--disp); }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 36px; font: 600 12px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--cream2); padding: 10px 0; }
.foot nav a:hover { color: var(--cream); }
/* billing block (the small print of a 70s poster): one ruled band, every fact of the house in caps */
.foot-bill { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin: 22px 0 0; padding: 12px 0; border-top: 1px solid var(--hair2); border-bottom: 1px solid var(--hair2);
  font: 600 11px/1.5 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--cream2); text-align: center; }
.foot-bill span { padding: 0 14px; }
.foot-bill span + span { border-left: 1px solid var(--hair2); }
.foot-bill code { font: 500 12px/1.5 var(--mono); letter-spacing: 0; text-transform: none; color: var(--cream); overflow-wrap: anywhere; }
.foot-note { font-size: 13px; color: var(--cream2); margin: 12px 0 0; text-align: center; }

/* ---------------------------------------------------------------- inner pages: a lit house wall with the plan as its texture */
.inner { background: var(--house); }
.inner-main { position: relative; padding: 0 var(--pad) 80px; max-width: 1240px; margin: 0 auto; }
.backplan { position: fixed; inset: var(--top) 0 0 0; width: 100%; height: calc(100% - var(--top)); z-index: 0; opacity: .4; pointer-events: none; }
.inner-main, .inner .foot { position: relative; z-index: 1; }
[hidden] { display: none !important; }
.pagehead { padding: clamp(40px, 8vh, 90px) 0 clamp(24px, 4vh, 40px); max-width: 860px; }
.page-title { font: 400 clamp(46px, 8vw, 116px)/.92 var(--disp); margin: 4px 0 18px; overflow-wrap: anywhere; }
.lead { font-size: clamp(17px, 1.5vw, 20px); max-width: 680px; }
.sec-title { font: 400 clamp(32px, 4vw, 52px)/1 var(--disp); margin: 0 0 18px; }
.invite { background: var(--cream); color: var(--ink); padding: clamp(24px, 4vw, 44px); text-align: center; display: grid; gap: 10px; justify-items: center; max-width: 760px; }
.invite .pg-feat { color: var(--copper); }
.invite p { margin: 0; }
.bill-wrap { max-width: 1100px; }
.bill-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair2); }
.bl { border-bottom: 1px solid var(--hair2); }
.bl-a { display: grid; grid-template-columns: 90px minmax(max-content, 1.4fr) auto repeat(3, minmax(0, .7fr)) minmax(0, 1fr); gap: 12px 18px; align-items: center; padding: 16px 0; text-decoration: none; transition: background-color .2s, padding .2s; }
.bl-a:hover { background: var(--house2); padding-left: 12px; padding-right: 12px; }
.bl-feat { font: italic 500 14px var(--text); color: var(--copper-lt); }
.bl-dev { font: 400 clamp(24px, 2.4vw, 30px)/1 var(--disp); white-space: nowrap; }
.bl-top .bl-dev { font-size: clamp(26px, 2.6vw, 34px); }
.bl-n { font-size: 14px; color: var(--cream2); }
.bl-st { font: 600 11px/1.2 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--cream2); text-align: right; }
.st-frozen .bl-st, .st-closed .bl-st { color: var(--copper-lt); }
.mini-seats { display: grid; grid-template-columns: repeat(12, 7px); gap: 3px; }
.mini-seats i { width: 7px; height: 6px; border: 1px solid rgba(242, 228, 196, .35); }
.mini-seats i.f { background: var(--copper); border-color: var(--copper); }
.hh { max-width: none; }
.hh-state { font: 600 12px/1 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--cream2); margin: 0 0 18px; }
.hh-state.st-frozen, .hh-state.st-closed { color: var(--copper-lt); }
.hh-nums { display: flex; flex-wrap: wrap; gap: 18px 40px; margin: 0 0 18px; }
.hh-nums dd { margin: 6px 0 0; font-size: clamp(20px, 2vw, 28px); }
.hh-share { display: flex; flex-wrap: wrap; gap: 8px; }
.hh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: 28px; align-items: start; margin-bottom: 40px; }
.hh-plan canvas { width: 100%; aspect-ratio: 4 / 3; display: block; background: var(--deep); }
.plan-key { font-size: 13px; color: var(--cream2); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.k { display: inline-block; width: 12px; height: 10px; margin-right: 2px; vertical-align: -1px; }
.k-sub { background: var(--cream2); } .k-arm { background: var(--copper); } .k-left { border: 1px dashed var(--cream2); }
.hh-window:empty { display: none; }
.hh-window { background: var(--cream); color: var(--ink); padding: 22px 26px; margin-bottom: 40px; max-width: 760px; }
.hh-window .pg-feat { color: var(--copper); }
.win-h { font: 400 30px/1.05 var(--disp); margin: 0 0 6px; }
.win-t { font-size: 22px; margin: 0 0 8px; }
.hh-window .tlink { color: var(--ink); }
.hh-prog .programme { justify-self: start; max-width: 980px; }
.mine-top { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mine-sum { font-size: clamp(28px, 3vw, 42px); margin: 0; }
.mine-sum span { font: 400 16px var(--text); color: var(--cream2); }
.stubs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stub-row { background: var(--cream); color: var(--ink); padding: 18px 22px; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; }
.stub-row .pg-feat { color: var(--copper); margin: 0; }
.sr-dev { font: 400 26px/1 var(--disp); text-decoration: none; }
.sr-n { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.sr-n dt { color: var(--copper); font-size: 10px; }
.sr-n dd { margin: 4px 0 0; }
.sr-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.stub-row .chip { border-color: var(--ink); color: var(--ink); }
.stub-row .chip:hover { background: var(--ink); color: var(--cream); }
.sr-l { grid-column: 1 / -1; list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px dashed rgba(11, 18, 53, .3); display: grid; gap: 8px; }
.sr-l li { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 14px; }
.sr-coin { font: 400 20px/1 var(--disp); }
.sr-st { font: 600 11px var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--copper); }
.devbox { display: grid; gap: 22px; max-width: 760px; }
.devform { background: var(--cream); color: var(--ink); padding: clamp(20px, 3vw, 34px); display: grid; gap: 14px; }
.devform .pg-feat { color: var(--copper); margin: 0; }
.devform .muted { color: rgba(11, 18, 53, .75); margin: 0; }
.fld { display: grid; gap: 6px; }
.fld > span { font: 600 11px/1 var(--text); letter-spacing: .18em; text-transform: uppercase; }
.fld input, .fld select { font: 500 16px var(--mono); color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--ink); padding: 8px 0; min-height: 44px; border-radius: 0; }
.fld input[type=file] { font-family: var(--text); font-size: 14px; border-bottom-style: dashed; }
.fld input:focus { outline: none; border-bottom-color: var(--copper); }
.fld em { font-size: 12px; font-style: normal; color: rgba(11, 18, 53, .65); }
.devform .pass { justify-self: start; }
.devform .tk-msg.ok, .devform .tk-msg { color: var(--ink); }
.devform .tk-msg.err { color: var(--copper); }
.dev-house .hh-nums dt { color: var(--cream2); }
.stats-head { max-width: none; min-height: 60vh; display: grid; align-content: center; }
.killer { font: 400 clamp(64px, 14vw, 220px)/.9 var(--disp); margin: 10px 0 24px; }
.killer .num { font-family: var(--disp); font-variant-numeric: lining-nums tabular-nums; }
.killer-u { font: 600 clamp(18px, 2vw, 28px)/1 var(--text); letter-spacing: .2em; color: var(--copper-lt); }
.st-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; max-width: 900px; border-top: 1px solid var(--hair2); padding-top: 18px; }
.st-grid dd { margin: 6px 0 0; font-size: clamp(22px, 2.4vw, 34px); }
.doc { max-width: 980px; padding: 30px 0; border-top: 1px solid var(--hair2); }
.doc-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.doc-toc a { font: 600 12px/1 var(--text); letter-spacing: .18em; text-transform: uppercase; border: 1px solid var(--cream2); padding: 12px 14px; text-decoration: none; }
.doc-toc a:hover { background: var(--cream); color: var(--ink); }
.acts { margin: 0; padding: 0; list-style: none; counter-reset: a; display: grid; gap: 18px; }
.acts li { counter-increment: a; position: relative; padding-left: 70px; color: var(--cream2); }
.acts li::before { content: counter(a); position: absolute; left: 0; top: -6px; font: 400 48px/1 var(--disp); color: var(--copper-lt); }
.acts b { color: var(--cream); font-weight: 600; display: block; font-size: 19px; }
.tbl { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th { text-align: left; font: 600 11px var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--cream2); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair2); }
td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hair); vertical-align: top; color: var(--cream2); }
td.num { color: var(--cream); white-space: nowrap; }
td:first-child { color: var(--cream); }
.trust { display: grid; gap: 16px; margin: 0; }
.trust div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; }
.trust dd { margin: 0; color: var(--cream2); }
.honest { color: var(--cream2); display: grid; gap: 8px; }
.nf-main { min-height: calc(100vh - var(--top)); display: grid; place-items: center; padding: 40px var(--pad); text-align: center; }
.nf-in { display: grid; gap: 18px; justify-items: center; }
.nf-h { font: 400 clamp(42px, 8vw, 110px)/.95 var(--disp); margin: 0; max-width: 900px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .top-nav { display: none; }
  .top-menu { display: inline-flex; align-items: center; }
  .s-balcony, .s-circle, .s-stalls { grid-template-columns: minmax(0, 1fr); }
  .ticket-slot, .circle-board, .programme { justify-self: stretch; }
  .hh-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .plan { left: 0; right: 0; bottom: 0; width: auto; height: 56px; background: var(--deep); border-top: 1px solid var(--hair2); padding-bottom: env(safe-area-inset-bottom); }
  .pn-svg { display: none; }
  .pn-list { position: static; width: auto; height: 56px; clip-path: none; display: grid; grid-template-columns: repeat(5, 1fr); }
  .pn-list button { width: 100%; height: 56px; display: grid; place-items: center; font: 600 10px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--cream2); border-top: 3px solid transparent; }
  .pn-list button[aria-current=step] { color: var(--cream); border-top-color: var(--copper); }
  .pn-list .pn-d { display: none; }
  .pn-list li { position: static; transform: none; height: auto; }
  .pn-card { display: none; }
  .foot { padding-bottom: 90px; }
  .toasts { bottom: 72px; }
  .s-gallery { padding-bottom: 76px; }
}
@media (max-width: 760px) {
  :root { --top: 56px; }
  body { font-size: 16px; }
  .top { gap: 10px; }
  .top-name { font-size: 19px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .top-chips .wallet { display: none; }
  .top-chips .chip { padding: 0 10px; }
  .top-chips .chip .chip-t { display: none; }
  .s-gallery { padding-bottom: 76px; }
  .hero-nums { grid-row: 2; grid-column: 1; }
  .hero-act { grid-row: 3; }
  .hero-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: none; gap: 0; align-self: end; margin-bottom: 18px; padding: 2px 0; }
  .hero-nums > div { padding: 10px 10px 12px; }
  .hero-nums > div + div { border-top: 0; border-left: 1px solid var(--hair2); }
  .hero-nums .num { font-size: 22px; }
  .hero-nums .sub { display: none; }
  .hero-nums dt { font-size: 10px; letter-spacing: .12em; }
  .bill::after { bottom: -10px; }
  .hero-btns .chip { display: none; }
  .hero-act .caline { font-size: 12px; justify-content: center; }
  .scene { min-height: 120vh; }
  .s-gallery { min-height: calc(100vh - var(--top)); min-height: calc(100svh - var(--top)); grid-template-rows: auto 1fr auto auto; }
  .yourseat { display: none; }
  .scene-copy { padding: 18px 18px 20px; }
  .s-balcony, .s-circle, .s-stalls { padding-top: 14vh; padding-bottom: 14vh; }
  .tk-front { grid-template-columns: minmax(0, 1fr); }
  .tk-stub { border-left: 0; border-top: 2px dashed rgba(11, 18, 53, .4); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .tk-perf { left: 10px; right: 10px; top: -6px; bottom: auto; flex-direction: row; }
  .tk-seat { font-size: 30px; margin: 0; }
  .tk-stub-act { margin: 0 0 0 auto; }
  .tk-sum, .tk-rec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .circle-board { grid-template-columns: minmax(0, 1fr); }
  .circle-board > * { padding: 18px; }
  .pg-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-line { grid-template-columns: 54px minmax(0, 1fr) auto; }
  .pg-res, .pg-v { grid-column: 2 / -1; text-align: left; }
  .s-stage { padding-bottom: 90px; }
  .bl-a { grid-template-columns: minmax(0, 1fr) auto; }
  .bl-feat { grid-column: 1 / -1; }
  .bl-a .mini-seats { grid-column: 1 / -1; }
  .bl-st { text-align: left; }
  .stub-row { grid-template-columns: minmax(0, 1fr); }
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .acts li { padding-left: 48px; }
  .acts li::before { font-size: 36px; }
  .foot { padding-bottom: 90px; }
  .toasts { bottom: 72px; }
}
@media (max-width: 360px) {
  .pass-t { padding: 0 14px; }
  .pass-stub { padding: 0 12px; }
  .top-chips .chip { padding: 0 8px; min-width: 40px; }
}
@media (min-width: 1920px) { .scene, .s-gallery { max-width: 2200px; margin: 0 auto; } }
/* reduce: calmer, never dead (Anton 10-27) */
@media (prefers-reduced-motion: reduce) {
  .flip-go .fl { animation-duration: 1.2s; }
  .mask-go .mi { animation-duration: 1.1s; }
  .fc i { transition-duration: 1.4s; }
}

.yourseat { position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; font: 500 12px/1 var(--mono); white-space: pre; background: var(--cream); color: var(--ink); padding: 5px 8px; opacity: 0; transition: opacity .25s; transform: translate3d(-200px, -200px, 0); }
.yourseat::after { content: ""; position: absolute; left: 14px; bottom: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--cream); }
.yourseat.on { opacity: 1; }
.plan { transition: opacity .3s; }
.at-foot .plan { opacity: 0; pointer-events: none; }
@media (min-width: 1101px) { .at-hero .plan { opacity: 0; pointer-events: none; } }
.nf-plan { width: min(560px, 90vw); height: auto; display: block; }
.judge .chip { border-color: var(--ink); color: var(--ink); margin-top: 6px; }
.judge .chip:hover { background: var(--ink); color: var(--cream); }
.judge + .judge, .hh-window > * + .judge { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(11, 18, 53, .25); }

/* ---------------------------------------------------------------- art (brand pads24/subs) */
.top-mark { width: 30px; height: 30px; flex: none; display: block; }
.foot-name { display: inline-flex; align-items: center; gap: 10px; }
.foot-mark { width: 34px; height: 34px; display: block; }
.tick { font: 500 13px/1 var(--mono); letter-spacing: .04em; color: var(--copper-lt); }
.foot-name .tick { font-size: 14px; margin-left: 4px; }
.caline .tick { padding-right: 10px; border-right: 1px solid var(--hair2); }
.s-stage .caline .tick, .hero-act .caline .tick { color: var(--copper-lt); }
/* balcony: the seat on the house plate (#121C4E art on the #121C4E plate, edges feathered) */
.seat-art { display: block; mix-blend-mode: lighten; width: clamp(150px, 15vw, 220px); height: auto; margin: 18px auto -8px; -webkit-mask: radial-gradient(closest-side, #000 82%, #0000); mask: radial-gradient(closest-side, #000 82%, #0000); }
/* circle: the box office the queue stands at */
.order .o-queue { padding-top: 6px; }
.o-box { display: block; width: min(150px, 60%); height: auto; margin: 0 auto 8px; }
/* stalls: the programme booklet, the cover typeset on the copper panel */
.booklet { position: relative; width: clamp(170px, 16vw, 230px); margin: 22px auto 0; }
.booklet img { display: block; width: 100%; height: auto; }
.booklet figcaption { position: absolute; left: 13%; right: 11%; top: 22%; bottom: 20%; display: grid; align-content: center; justify-items: center; gap: 6px; text-align: center; transform: rotate(-4deg); color: var(--cream); }
.bk-f { font: italic 500 clamp(11px, .95vw, 13px)/1.1 var(--text); }
.bk-h { font: 400 clamp(22px, 2.1vw, 30px)/.95 var(--disp); }
.bk-s { font: 600 clamp(8px, .7vw, 9px)/1.3 var(--text); letter-spacing: .18em; text-transform: uppercase; max-width: 12em; }
/* stage: the apron under the final plate, wider than the plate, rounded ends */
.stage-in { overflow: visible; }
.apron { position: absolute; left: -7%; right: -7%; top: 100%; aspect-ratio: 2048 / 146; background: url(/assets/art/apron.webp) center / 100% 100% no-repeat; border-radius: 0 0 999px 999px / 0 0 60% 60%; pointer-events: none; }
/* 404: the ghost light on the empty stage (art on #121C4E, edges feathered) */
.nf-ghost { width: min(300px, 62vw); height: auto; display: block; mix-blend-mode: lighten; -webkit-mask: radial-gradient(closest-side, #000 78%, #0000); mask: radial-gradient(closest-side, #000 78%, #0000); }
.nf-main { position: relative; z-index: 1; background: var(--house); }
/* coin pictures (seed art on the preview, pump metadata later) */
.coin-pic { width: 34px; height: 34px; flex: none; object-fit: cover; border: 2px solid var(--ink); background: var(--house); }
.pg-coin { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.coin-pic.sm { width: 22px; height: 22px; border-width: 1px; vertical-align: middle; margin-right: 6px; display: inline-block; }
.pg-coin.nopic { display: block; }
@media (max-width: 760px) {
  .seat-art { width: 120px; margin-top: 10px; }
  .booklet { width: 150px; }
  .o-box { width: 120px; }
  .tk-main { padding: 26px 22px 14px 24px; }
  .tk-stub { padding: 14px 22px 24px 24px; }
}

/* ---------------------------------------------------------------- the film (/docs#film): own player, house skin, no autoplay */
.film { margin: 0 0 clamp(28px, 5vh, 48px); max-width: 1100px; }
.film .kicker { margin: 0 0 12px; }
.film-box { position: relative; aspect-ratio: 16 / 9; background: var(--deep); border: 1px solid var(--hair2); overflow: hidden; }
.film-box:fullscreen { border: 0; aspect-ratio: auto; width: 100%; height: 100%; }
.film-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--deep); display: block; }
.film-big { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px 0 18px;
  background: var(--copper); color: var(--cream); font: 600 13px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(10, 16, 51, .5); transition: background-color .18s, transform .1s; }
.film-big:hover { background: var(--copper-lt); color: var(--ink); }
.film-big:active { transform: translate(-50%, -50%) scale(.97); }
.film-big .num { letter-spacing: 0; opacity: .85; }
.film-big[hidden] { display: none; }
.film-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: linear-gradient(transparent, rgba(10, 16, 51, .92) 40%); color: var(--cream); transition: opacity .25s; }
.film-box.is-playing:not(:hover):not(:focus-within) .film-bar { opacity: 0; }
.film-btn { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; color: var(--cream); }
.film-btn:hover { color: var(--copper-lt); }
.film-btn .i-pause, .film-box.is-playing .film-btn .i-play, .film-btn .i-mute, .film-box.is-muted .film-btn .i-snd { display: none; }
.film-box.is-playing .film-btn .i-pause, .film-box.is-muted .film-btn .i-mute { display: block; }
.film-track { position: relative; flex: 1; min-width: 60px; height: 40px; touch-action: none; }
.film-track::before, .film-buf, .film-fill { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; transform-origin: 0 50%; }
.film-track::before { background: var(--hair2); }
.film-buf { background: rgba(242, 228, 196, .35); transform: scaleX(0); }
.film-fill { background: var(--copper-lt); transform: scaleX(0); }
.film-track:hover::before, .film-track:focus-visible::before { height: 6px; margin-top: -3px; }
.film-time { flex: none; font-size: 13px; color: var(--cream2); padding: 0 4px; white-space: nowrap; }
.film-note { max-width: 760px; margin: 10px 0 0; font-size: 15px; }
.film-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 40px; font: 600 12px/1.2 var(--text); letter-spacing: .18em; text-transform: uppercase; }
@media (max-width: 760px) {
  .film-box { margin: 0 calc(-1 * var(--pad)); border-left: 0; border-right: 0; }
  .film-big { top: 50%; min-height: 46px; padding: 0 16px 0 12px; font-size: 12px; }
  .film-bar { gap: 2px; padding: 2px 4px; }
  .film-time { font-size: 12px; }
}
@media (max-width: 420px) { .film-big span:not(.num) { display: none; } .film-big { gap: 8px; } }