/* GlowTier, Nov 2026.
   This page is a gig poster on a club wall.
   Rule: type size is billing, and only the footage glows.
   Refusals: no gradient type, glow, blur or pills; no rounded tiles; no caps labels; no fade on scroll.
   Motif: the three steps from the Step-Up G cut every edge where paper meets footage. */
@font-face{font-family:"Unbounded";src:url(/fonts/unbounded-latin-wght.woff2?v=22f9b928) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Work Sans";src:url(/fonts/WorkSans-Regular.woff2?v=47189d95) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Work Sans";src:url(/fonts/WorkSans-Bold.woff2?v=0dd6bc32) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Big Shoulders";src:url(/fonts/BigShoulders-Bold.woff2?v=20db737a) format("woff2");font-weight:700;font-display:swap}

:root{
  --night:#0E0A24; --night-2:#1B1540; --paper:#F7F4FF; --ink:#140B33;
  --pink:#FF2FD1; --pink-ink:#B00C7C; --cyan:#2EF0FF; --cyan-ink:#006C8C;
  --on-night:#F4F1FF; --on-night-2:#C9C5DF; --on-paper-2:#453E66; --rule-paper:#140B3333; --rule-night:#F4F1FF33;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:40px;--s7:64px;--s8:112px;
  --step:clamp(18px,3.4vw,52px);
  --gut:max(16px,3.2vw);
  --display:"Unbounded",system-ui,sans-serif; --bill:"Big Shoulders","Arial Narrow",sans-serif; --body:"Work Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--night);scrollbar-color:var(--pink) var(--night);scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--body);overflow-x:clip;caret-color:var(--pink-ink)}
::selection{background:var(--pink);color:var(--ink)}
img,video{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:.18em}
h1,h2,h3{margin:0;font-family:var(--display);text-wrap:balance;letter-spacing:-.02em}
p{margin:.6em 0;text-wrap:pretty}
code{font:400 .92em ui-monospace,Consolas,monospace}
:focus-visible{outline:3px solid var(--cyan-ink);outline-offset:3px}
.night :focus-visible,.nav :focus-visible,.wall :focus-visible{outline-color:var(--cyan)}
.skip{position:absolute;left:var(--gut);top:-80px;z-index:40;background:var(--cyan);color:var(--ink);padding:var(--s3) var(--s4);font-weight:700}
.skip:focus{top:8px}

/* One measure for words, everything else runs to the edges */
.in{padding-inline:var(--gut);margin-inline:auto;max-width:1560px}
.measure{max-width:66ch}
.night{background:var(--night);color:var(--on-night)}
.paper{background:var(--paper);color:var(--ink)}

/* Stairs: a section with .up climbs over whatever sits above it */
.up{position:relative;z-index:2;margin-top:calc(var(--step)*-3);padding-top:calc(var(--step)*3 + var(--s6));
  clip-path:polygon(0 calc(var(--step)*3),34% calc(var(--step)*3),34% calc(var(--step)*2),67% calc(var(--step)*2),67% var(--step),100% var(--step),100% 100%,0 100%)}

/* Buttons: flat poster blocks with one notch cut from the corner */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:54px;padding:0 var(--s5);font:700 1rem/1.1 var(--body);text-decoration:none;cursor:pointer;border:0;
  clip-path:polygon(0 0,calc(100% - 12px) 0,calc(100% - 12px) 12px,100% 12px,100% 100%,0 100%);transition:background-color .15s,color .15s}
.btn svg{width:16px;height:16px;fill:currentColor}
.btn-a{background:var(--pink);color:var(--ink)}
.btn-b{background:var(--ink);color:var(--paper)}
.night .btn-b,.nav .btn-b{background:var(--cyan);color:var(--ink)}
.on-pink .btn-a{background:var(--ink);color:var(--paper)}
@media (hover:hover){.btn-a:hover{background:var(--ink);color:var(--pink)}.btn-b:hover{background:var(--pink);color:var(--ink)}
  .night .btn-a:hover{background:var(--on-night);color:var(--ink)}.night .btn-b:hover,.nav .btn-b:hover{background:var(--on-night);color:var(--ink)}
  .on-pink .btn-a:hover{background:var(--paper);color:var(--ink)}}
.btn:active{background:var(--cyan);color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* Header */
.nav{position:sticky;top:0;z-index:20;background:var(--night);color:var(--on-night)}
.nav .in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:60px;padding-block:var(--s2);max-width:none}
.logo{width:150px;height:auto;aspect-ratio:1387/381}
.nav nav{display:flex;align-items:center;gap:var(--s5)}
.nav nav a:not(.btn){font-weight:700;font-size:1rem;text-decoration:none;padding:var(--s3) 0}
@media (hover:hover){.nav nav a:not(.btn):hover{color:var(--cyan)}}
.nav .btn{min-height:44px;padding:0 var(--s4);font-size:.95rem}
@media (max-width:820px){.nav nav a:not(.btn){display:none}}

/* Hero: the footage gets the top of the wall untouched, the bill is pasted below it */
.stage{position:relative;background:var(--night);height:min(62svh,calc(56.25vw + var(--step)*3));min-height:300px;overflow:hidden}
.stage img,.stage video,.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage video,.t video,.nameplate video{opacity:0;transition:opacity .35s linear}
.stage video.on,.t video.on,.nameplate video.on{opacity:1}
.bill{padding-bottom:var(--s6)}
.bill h1{font-weight:900;line-height:.98;font-size:clamp(2.35rem,8.1vw,9.4rem);letter-spacing:-.045em}
.bill h1 span{display:block;font-weight:700;font-size:.36em;line-height:1.08;letter-spacing:-.02em;margin-top:.28em}
.bill .lead{font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.4;max-width:46ch;margin:var(--s5) 0 0}
.bill-foot{display:grid;gap:var(--s5)}
@media (min-width:1000px){.bill-foot{grid-template-columns:auto 1fr;align-items:end;column-gap:var(--s7)}.bill-foot .acts{margin-top:0;justify-content:flex-end}}
.seats-line{margin:var(--s3) 0 0;font-size:1rem;color:var(--on-paper-2)}
@media (prefers-reduced-motion:no-preference){
  .bill.up{animation:climb .9s var(--ease) .1s backwards}
  @keyframes climb{from{clip-path:polygon(0 calc(var(--step)*3),34% calc(var(--step)*3),34% calc(var(--step)*3),67% calc(var(--step)*3),67% calc(var(--step)*3),100% calc(var(--step)*3),100% 100%,0 100%)}}
}

section{scroll-margin-top:72px}
.sec{padding-block:var(--s8) var(--s7)}
.sec-h{font-weight:800;font-size:clamp(1.8rem,4.6vw,4.6rem);line-height:1.02;max-width:20ch}
.sec-p{font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:60ch;margin-top:var(--s4)}
.night .sec-p{color:var(--on-night-2)}

/* The tier ladder: three real stairs, and only one of them is you */
.ladder{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid}
.ladder li{padding:var(--s4) var(--s5) var(--s5);border-top:2px solid var(--ink)}
.ladder b{display:block;font:700 clamp(1.7rem,3.2vw,2.8rem)/1 var(--bill)}
.ladder p{margin:var(--s2) 0 0;max-width:58ch}
.ladder .you{background:var(--pink);color:var(--ink);border-top:0;padding-block:var(--s5) var(--s6)}
.ladder .you b{font:900 clamp(2.1rem,6.6vw,7rem)/1 var(--display);letter-spacing:-.04em}
.ladder .you p{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.42;max-width:60ch;margin-top:var(--s3)}
@media (min-width:900px){.ladder li:nth-child(1){margin-left:34%}.ladder li:nth-child(2){margin-left:calc(17%)}.ladder li:nth-child(3){margin-right:34%}}
.fact{margin-top:var(--s6);font-size:clamp(1.15rem,1.8vw,1.6rem);line-height:1.38;max-width:44ch}
.fact small{display:block;margin-top:var(--s2);font-size:.9rem;line-height:1.45;color:var(--on-paper-2);max-width:66ch}

/* The wall: no gaps, no radius, an LED wall made of what we rendered */
.wall{display:grid;grid-template-columns:repeat(2,1fr);background:#000;margin-top:var(--s6)}
.t{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--night-2)}
.t img,.t video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t figcaption{position:absolute;left:0;bottom:0;max-width:calc(100% - 20px);background:var(--night);color:var(--on-night);font-size:.9rem;line-height:1.25;padding:var(--s2) var(--s3) var(--s2) var(--s3);clip-path:polygon(0 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% 100%,0 100%)}
.t figcaption b{font-weight:700}
.t.big{grid-column:span 2}
@media (max-width:640px){.t figcaption{font-size:.8rem;padding:var(--s1) var(--s3) var(--s1) var(--s2)}.t figcaption span{display:none}.t.big figcaption span{display:inline}}
@media (min-width:900px){.wall{grid-template-columns:repeat(4,1fr)}.t.big{grid-column:span 2;grid-row:span 2}.t.tall{grid-row:span 2;aspect-ratio:auto}}

/* Your name on it */
.namer{display:grid;gap:var(--s5);margin-top:var(--s6)}
@media (min-width:1000px){.namer{grid-template-columns:minmax(300px,380px) 1fr;align-items:start}}
.namer label,.namer legend{font-weight:700;font-size:1rem;padding:0;display:block;margin-bottom:var(--s2)}
.namer input[type=text]{width:100%;min-height:56px;padding:0 var(--s4);border:2px solid var(--on-night);border-radius:0;background:var(--night);color:var(--on-night);font:700 1.2rem var(--body)}
.namer input[type=text]:focus-visible{outline-offset:1px}
.namer fieldset{border:0;margin:var(--s5) 0 0;padding:0}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.picks label{position:relative;margin:0;cursor:pointer;font-size:.95rem}
.picks input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.picks img{width:100%;aspect-ratio:16/9;object-fit:cover}
.picks span{display:block;padding:var(--s1) var(--s2);background:var(--night-2)}
.picks input:checked~span{background:var(--pink);color:var(--ink)}
.picks input:focus-visible~span{outline:3px solid var(--cyan);outline-offset:2px}
.nameplate{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;container-type:inline-size}
.nameplate img,.nameplate video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nameplate output{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 4cqw;color:#fff;font:900 var(--fs,9cqw)/1 var(--display);letter-spacing:-.03em;overflow-wrap:anywhere}
.namer .btn{width:100%;margin-top:var(--s5)}
.namer .small{color:var(--on-night-2);font-size:.95rem}

/* Players */
.pair{display:grid;gap:var(--s4);margin-top:var(--s6)}
@media (min-width:1000px){.pair{grid-template-columns:1.7fr 1fr}}
.player{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.player picture,.player img,.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player.playing picture{visibility:hidden}
.vplay{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:var(--s2);min-height:60px;padding:0 var(--s5);border:0;background:var(--pink);color:var(--ink);font:700 1.05rem var(--body);cursor:pointer;clip-path:polygon(0 0,calc(100% - 12px) 0,calc(100% - 12px) 12px,100% 12px,100% 100%,0 100%)}
.vplay svg{width:18px;height:18px;fill:currentColor}
.vplay.busy{background:var(--on-night)}
.vbar{position:absolute;left:0;bottom:0;display:flex}
.vbar button{min-height:48px;padding:0 var(--s4);border:0;border-right:1px solid var(--rule-night);background:var(--night);color:var(--on-night);font:700 .95rem var(--body);cursor:pointer}
@media (hover:hover){.vplay:hover{background:var(--cyan)}.vbar button:hover{background:var(--cyan);color:var(--ink)}}
.cap{margin:var(--s2) 0 0;color:var(--on-night-2);font-size:1rem}
.cap b{color:var(--on-night)}
@media (max-width:700px) and (orientation:portrait){.player{aspect-ratio:9/16;width:min(100%,calc(74svh*9/16));margin-inline:auto}}

/* Everything your stream wears: set like the lower half of a lineup, each line a size down */
.lineup{list-style:none;margin:var(--s6) 0 0;padding:0}
.lineup li{display:grid;grid-template-columns:clamp(96px,17vw,250px) 1fr auto;gap:var(--s2) var(--s5);align-items:center;border-top:2px solid var(--ink);padding-block:var(--s3)}
.lineup img{width:100%;aspect-ratio:16/9;object-fit:cover}
.lineup h3{font:700 var(--sz,clamp(1.5rem,3vw,3rem))/1 var(--bill);letter-spacing:0}
.lineup p{margin:var(--s1) 0 0;color:var(--on-paper-2);max-width:56ch;line-height:1.35}
.lineup .from{font:700 clamp(1.1rem,2.2vw,2rem)/1 var(--bill);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.lineup li:nth-child(1){--sz:clamp(2.4rem,6vw,6.2rem)}.lineup li:nth-child(2){--sz:clamp(2.1rem,5vw,5rem)}.lineup li:nth-child(3){--sz:clamp(1.9rem,4.2vw,4.2rem)}.lineup li:nth-child(4){--sz:clamp(1.7rem,3.6vw,3.6rem)}
@media (max-width:640px){.lineup li{grid-template-columns:88px 1fr}.lineup .from{grid-column:2;text-align:left}}

/* How it works */
.steps{margin:var(--s6) 0 0;padding:0 0 0 1.4em;display:grid;gap:var(--s4);max-width:66ch;font-size:1.1rem}
.steps li::marker{font:700 1.3em var(--bill);color:var(--pink-ink)}
.steps b{display:block}

/* Day Ones: the one all-pink wall on the page */
.deal{background:var(--pink);color:var(--ink)}
.deal .in{display:grid;gap:var(--s6)}
@media (min-width:1000px){.deal .in{grid-template-columns:1.15fr 1fr;align-items:end}}
.deal h2{font-weight:800;font-size:clamp(1.5rem,3vw,2.8rem);line-height:1.04}
.price{font:900 clamp(5rem,19vw,17rem)/.9 var(--display);letter-spacing:-.06em;margin:var(--s3) 0 var(--s3);font-variant-numeric:tabular-nums}
.deal .was{font-size:1.15rem;margin:0 0 var(--s4)}
.seatrow{display:flex;gap:4px;flex-wrap:wrap;margin:var(--s4) 0 var(--s2)}
.seatrow i{width:20px;height:20px;background:var(--ink)}
.deal h3{font:700 clamp(1.6rem,2.6vw,2.4rem)/1 var(--bill);letter-spacing:0;margin:0 0 var(--s2)}
.deal ul{margin:0 0 var(--s5);padding:0;list-style:none}
.deal li{border-top:1px solid #140B3366;padding:var(--s2) 0}
.deal .small{font-size:1rem;margin-top:var(--s3);max-width:52ch}

/* Rate card */
.rates{display:grid;gap:0;margin-top:var(--s6)}
.rates details{border-top:3px solid var(--ink)}
.rates details:last-child{border-bottom:3px solid var(--ink)}
.rates summary{list-style:none;cursor:pointer;padding:var(--s4) 0;display:flex;justify-content:space-between;gap:var(--s4);align-items:center}
.rates summary::-webkit-details-marker{display:none}
.rates summary h3{font:700 clamp(1.8rem,3.4vw,3.2rem)/1 var(--bill);letter-spacing:0}
.rates summary small{display:block;font:400 1rem/1.35 var(--body);color:var(--on-paper-2);margin-top:var(--s1)}
.rates summary::after{content:"Open";font-weight:700;font-size:.95rem;flex:none;text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:.2em}
.rates details[open] summary::after{content:"Close"}
.rates ul{list-style:none;margin:0 0 var(--s5);padding:0}
.rates li{display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s5);padding:var(--s3) 0;border-top:1px solid var(--rule-paper)}
.rates h4{margin:0;font:700 1.1rem/1.3 var(--body)}
.rates li p{margin:0;grid-column:1;color:var(--on-paper-2);max-width:64ch;font-size:1rem;line-height:1.42}
.rates .p{grid-column:2;grid-row:1 / span 2;font:700 clamp(1.3rem,2vw,1.8rem)/1.05 var(--bill);text-align:right;font-variant-numeric:tabular-nums;max-width:15ch}
.rates li.pick{background:var(--ink);color:var(--paper);padding-inline:var(--s3);margin-block:var(--s2);border:0}
.rates li.pick p{color:var(--on-night-2)}
.rates li.pick a{color:var(--cyan);text-decoration-color:var(--cyan)}
.rates .note{margin:var(--s3) 0 0;max-width:66ch}
@media (max-width:560px){.rates li{grid-template-columns:1fr}.rates .p{grid-column:1;grid-row:auto;text-align:left;max-width:none}}

/* Free loops */
.free{display:grid;gap:var(--s6)}
@media (min-width:1000px){.free{grid-template-columns:1.1fr 1fr;align-items:start}}
.bpms{display:grid;grid-template-columns:repeat(5,1fr);margin:var(--s5) 0 0;border-top:2px solid var(--on-night)}
.bpms div{padding-top:var(--s2)}
.bpms dt{font:700 clamp(1.8rem,4.4vw,4rem)/1 var(--bill);font-variant-numeric:tabular-nums}
.bpms dd{margin:var(--s1) 0 0;font-size:.95rem;color:var(--on-night-2)}
.free-clip{position:relative;aspect-ratio:16/9;margin-top:var(--s5);overflow:hidden}
.free-clip img,.free-clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.packform{display:grid;gap:var(--s2);background:var(--paper);color:var(--ink);padding:var(--s5)}
.packform h3{font-weight:800;font-size:1.5rem;margin-bottom:var(--s2)}
.packform label{font-weight:700;font-size:1rem}
.packform .opt{font-weight:400;color:var(--on-paper-2)}
.packform input[type=text],.packform input[type=email]{width:100%;min-height:52px;padding:0 var(--s3);border:2px solid var(--ink);border-radius:0;background:#fff;color:var(--ink);font:400 1.05rem var(--body);margin-bottom:var(--s2)}
.packform input::placeholder{color:#C9C5DF}
.packform input[aria-invalid=true]{border-color:var(--pink-ink);border-width:3px}
.packform .check{display:flex;gap:var(--s3);align-items:flex-start;font-weight:400;margin:var(--s1) 0 var(--s2)}
.packform .check input{width:22px;height:22px;margin-top:2px;accent-color:var(--pink-ink);flex:none}
.packform .btn{width:100%;margin-top:var(--s2)}
.packform .btn[aria-busy=true]{background:var(--on-paper-2);cursor:progress}
.packform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.packform .small{font-size:.95rem;color:var(--on-paper-2)}
.formmsg{margin:0;font-weight:700;min-height:1.2em}
.formmsg.err{color:var(--pink-ink)}
.formmsg.ok{color:var(--cyan-ink)}
.packform.sent label,.packform.sent input,.packform.sent .check,.packform.sent .btn,.packform.sent .ts{display:none}

/* Questions: each answer stands on its own */
.qs{margin-top:var(--s6);columns:2 480px;column-gap:var(--s7)}
.q{break-inside:avoid;padding-block:var(--s4) var(--s3);border-top:2px solid var(--ink)}
.q h3{font:700 clamp(1.5rem,2.2vw,2.1rem)/1.06 var(--bill);letter-spacing:0}
.q p{margin:var(--s2) 0 0;font-size:1.05rem}

/* Who, and the terms */
.who{display:grid;gap:var(--s6)}
@media (min-width:1000px){.who{grid-template-columns:1fr 1fr}}
.who p,.who ul{max-width:60ch}
.who ul{padding-left:1.2em;margin:var(--s3) 0 0}
.who li{margin:var(--s2) 0}
.who h2{font-weight:800;font-size:clamp(1.4rem,2.4vw,2.4rem);line-height:1.05}

.ask{padding-block:var(--s8)}
.ask h2{font-weight:900;font-size:clamp(2.2rem,7vw,7.4rem);line-height:.98;letter-spacing:-.04em;max-width:13ch}
.ask p{font-size:1.2rem;max-width:56ch;color:var(--on-night-2)}
.ask .mailnote{font-size:1rem}
.ask a:not(.btn){color:var(--on-night);text-decoration-color:var(--cyan)}

footer{background:var(--night);color:var(--on-night-2);border-top:1px solid var(--rule-night);padding:var(--s6) 0 calc(var(--s7) + env(safe-area-inset-bottom));font-size:.95rem}
footer p{max-width:110ch}
footer a{color:var(--on-night);text-decoration-color:var(--cyan)}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0 0 var(--s4);padding:0;list-style:none;font-weight:700;font-size:1rem}

/* Phone: a pinned seat button after the bill */
.dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:15;display:none}
.dock .btn{width:100%}
@media (max-width:760px){.dock.show{display:block}}

dialog.reel{padding:0;border:0;background:transparent;width:min(96vw,1200px);max-height:92svh;overflow:visible}
dialog.reel::backdrop{background:#050312EB}
dialog.reel video{width:100%;max-height:86svh;background:#000}
dialog.reel .x{position:absolute;right:0;top:0;z-index:2;min-width:64px;min-height:44px;border:0;background:var(--night);color:var(--on-night);font:700 1rem var(--body);cursor:pointer}
@media (max-width:700px) and (orientation:portrait){dialog.reel{width:min(92vw,calc(86svh*9/16))}}

/* Guide pages */
.guide-stage{height:clamp(220px,42vw,520px)}
.guide h1{font-weight:900;font-size:clamp(2rem,5.4vw,5.6rem);line-height:1;letter-spacing:-.035em;max-width:17ch}
.guide .lead{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.42;max-width:52ch;margin-top:var(--s4)}
.article{max-width:68ch;padding-bottom:var(--s7);font-size:1.12rem}
.article h2{font-weight:800;font-size:clamp(1.45rem,2.6vw,2.3rem);line-height:1.08;margin:var(--s6) 0 var(--s3)}
.article h3{font:700 1.7rem/1.1 var(--bill);letter-spacing:0;margin:var(--s5) 0 0}
.article .asof{font-size:.95rem;color:var(--on-paper-2)}
.compare{width:100%;border-collapse:collapse;margin:var(--s4) 0;font-size:1rem}
.compare th,.compare td{text-align:left;padding:var(--s2) var(--s3) var(--s2) 0;border-top:1px solid var(--rule-paper);vertical-align:top}
.compare thead th{border-top:2px solid var(--ink);font-weight:700}
.compare td.n{font-variant-numeric:tabular-nums;white-space:nowrap}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.stage video,.t video,.nameplate video,.btn{transition:none}}

/* Phone: the tall loop gets most of the first screen, the bill starts under it */
@media (max-width:700px) and (orientation:portrait){.stage{height:66svh}}
.wall{grid-auto-flow:dense}

/* Corrections after the first render pass */
:root{--black:#000000;--white:#FFFFFF}
.wall,.nameplate,.player,dialog.reel video{background:var(--black)}
.nameplate output{color:var(--white)}
.up.up{padding-top:calc(var(--step)*3 + var(--s6))}
.sec{padding-bottom:calc(var(--step)*3 + var(--s6))}
.picks img,.lineup img{height:auto}
.lineup img{object-fit:cover}
.bill h1 span{font-size:clamp(1.15rem,3.3vw,3.4rem);letter-spacing:-.02em;margin-top:.35em}
.bill.up{animation-duration:.5s}
.t figcaption{font-size:.875rem}
@media (max-width:640px){.t figcaption{font-size:.875rem}}
.packform .check{min-height:44px;align-items:center}
.btn:disabled{background:var(--on-paper-2);color:var(--paper);cursor:not-allowed}
footer p{max-width:80ch}
.q{max-width:68ch}
.namer .small,.packform .small{max-width:60ch}

/* The glass room runs edge to edge */
.glass{padding-block:var(--s8) 0}
.glass .player{margin-top:var(--s6)}
.glass .cap{margin-top:var(--s3)}
.glass + .sec{padding-top:var(--s7)}
@media (max-width:700px) and (orientation:portrait){.glass .player{width:100%;max-height:82svh}}

/* After review: the buy button sits in the phone's first screen */
@media (max-width:700px) and (orientation:portrait){
  .stage{height:50svh}
  .bill-foot .acts{order:-1;margin-top:var(--s5)}
  .bill-foot .acts .btn{width:100%}
}

/* Glass room hands over to the stairs; the caption stays clear of the cut */
.glass{padding-bottom:calc(var(--step)*3 + var(--s5))}
.glass + .sec.up{padding-top:calc(var(--step)*3 + var(--s6))}

/* The bill keeps its buttons clear of the stairs below it */
.bill{padding-bottom:calc(var(--step)*3 + var(--s6))}

/* Phone: the preview sits above the name box, so you watch your name appear as you type */
@media (max-width:999px){.namer .nameplate{order:-1;position:sticky;top:60px;z-index:3}}

/* Sound demo and the OBS block */
.demo-audio{display:block;width:100%;max-width:420px;height:44px;margin-top:var(--s2)}
.obs{display:grid;gap:var(--s6)}
@media (min-width:1000px){.obs{grid-template-columns:1.2fr 1fr;align-items:start}}
.obs .small{color:var(--on-night-2);font-size:1rem}
.obs .small a{color:var(--on-night);text-decoration-color:var(--cyan)}
.fixlist{list-style:none;margin:0;padding:0}
.fixlist li{border-top:2px solid var(--on-night);padding:var(--s3) 0;color:var(--on-night-2)}
.fixlist b{display:block;font:700 clamp(1.5rem,2.4vw,2.2rem)/1.05 var(--bill);color:var(--on-night)}

/* 7 Nov 2026: who, quotes, offers, forms and legal pages */
.night .fact small{color:var(--on-night-2)}
.who-top{display:grid;gap:var(--s6)}
@media (min-width:1000px){.who-top{grid-template-columns:1.2fr 1fr;align-items:start}}
.who-top p{max-width:60ch}
.links{list-style:none;margin:0;padding:0}
.links li{border-top:2px solid var(--ink)}
.links a{display:flex;justify-content:space-between;gap:var(--s4);align-items:baseline;padding:var(--s3) 0;text-decoration:none;min-height:48px}
.links b{font:700 clamp(1.5rem,2.4vw,2.2rem)/1.05 var(--bill)}
.links span{color:var(--on-paper-2);font-size:1rem;text-align:right;overflow-wrap:anywhere}
@media (hover:hover){.links a:hover b{color:var(--pink-ink);text-decoration:underline;text-decoration-color:var(--pink)}}
.quotes{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s5)}
@media (min-width:900px){.quotes{grid-template-columns:1fr 1fr;column-gap:var(--s7)}}
.quote{border-top:3px solid var(--ink);padding-top:var(--s4)}
.quote.empty{display:none}
.quote blockquote{margin:0}
.quote blockquote p{margin:0;font:700 clamp(1.3rem,2.2vw,2rem)/1.25 var(--body);letter-spacing:-.01em;max-width:34ch}
.quote .by{margin:var(--s3) 0 0;color:var(--on-paper-2);font-size:1rem}
.quote .by b{color:var(--ink)}
.offers{list-style:none;margin:var(--s6) 0 0;padding:0}
.offers li{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s5);align-items:center;border-top:2px solid var(--ink);padding-block:var(--s4)}
.offers h3{font:700 clamp(1.9rem,4vw,3.6rem)/1 var(--bill);letter-spacing:0}
.offers p{margin:var(--s1) 0 0;color:var(--on-paper-2);max-width:56ch;line-height:1.4}
.offers .from{font:700 clamp(1.6rem,3.4vw,3rem)/1 var(--bill);font-variant-numeric:tabular-nums;text-align:right}
.offers .acts{grid-column:1 / -1;margin-top:var(--s2)}
.offers li.pick{background:var(--ink);color:var(--paper);padding-inline:var(--s4)}
.offers li.pick p{color:var(--on-night-2)}
.offers li.pick a:not(.btn){color:var(--cyan);text-decoration-color:var(--cyan)}
.offers .more{margin-top:var(--s5);font-size:1.1rem}
.packform textarea,.packform select{width:100%;border:2px solid var(--ink);border-radius:0;background:#fff;color:var(--ink);font:400 1.05rem var(--body);margin-bottom:var(--s2)}
.packform textarea{padding:var(--s3);min-height:130px;resize:vertical}
.packform select{min-height:52px;padding:0 var(--s3)}
.packform textarea[aria-invalid=true],.packform select[aria-invalid=true]{border-color:var(--pink-ink);border-width:3px}
.packform .picked{margin:0 0 var(--s2);font-weight:700}
.packform.sent textarea,.packform.sent select,.packform.sent .picked{display:none}
.packform a{color:var(--ink)}
.intake{padding-block:var(--s7) var(--s8)}
.intake h1{font-weight:900;font-size:clamp(2.2rem,6vw,5.4rem);line-height:1;letter-spacing:-.04em;max-width:12ch}
.intake .sec-p{color:var(--on-night-2)}
.legal-note{font-size:.95rem;color:var(--on-paper-2)}
.plus{margin-top:var(--s5);padding:var(--s5);border:2px solid var(--cyan);color:var(--on-night)}
.plus h3{font-weight:800;font-size:1.5rem;margin-bottom:var(--s2)}
.plus p{margin-top:var(--s3);max-width:60ch}
.plus-buy{margin-top:var(--s4);max-width:552px}
.plus-buy iframe{display:block;width:100%;max-width:100%;height:167px;border:0}
.plus-acts{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.plus-acts .btn{min-width:200px}
.plus a:not(.btn){color:var(--on-night);text-decoration-color:var(--cyan)}
.plus .small{font-size:.95rem;color:var(--on-night-2)}

/* 7 Nov 2026, two levels: Crates (ready-made) and Headliner (custom) */
.act-col .alt{margin:var(--s3) 0 0;font-size:1rem}
@media (min-width:1000px){.act-col .alt{text-align:right}}
@media (max-width:700px) and (orientation:portrait){.bill-foot .act-col{order:-1}.act-col .acts{margin-top:var(--s5)}}
@media (max-width:820px){.nav nav{gap:var(--s3)}.nav nav a.core:not(.btn){display:inline-block;font-size:.9rem}.logo{width:112px}.nav .btn{white-space:nowrap}}
@media (max-width:480px){.nav .in{gap:var(--s2)}.logo{width:96px}.nav nav{gap:var(--s2)}.nav nav a.core:not(.btn){font-size:.85rem}.nav .btn{padding:0 var(--s3);font-size:.85rem}}
.band{background:var(--pink);color:var(--ink);padding-block:var(--s6)}
.band .in{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center;justify-content:space-between}
.band p{margin:0;font:700 clamp(1.6rem,3.4vw,3rem)/1.05 var(--bill);max-width:34ch}
.more-line{margin:var(--s4) 0 0;color:var(--on-night-2)}
.more-line a{color:var(--on-night);text-decoration-color:var(--cyan)}
.offers .from small{display:block;margin-top:var(--s1);font:400 .95rem/1.3 var(--body);max-width:18ch;margin-left:auto}
.rates .p small{display:block;margin-top:var(--s1);font:400 .9rem/1.3 var(--body)}
.grp{font-weight:800;font-size:clamp(1.8rem,4vw,3.4rem);line-height:1.02;max-width:24ch;margin-top:var(--s7)}
.grp:first-of-type{margin-top:var(--s6)}
.crates,.soon{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s7)}
.crate{display:grid;gap:var(--s4) var(--s6)}
@media (min-width:900px){.crate{grid-template-columns:minmax(260px,5fr) 7fr;align-items:start}}
.crate figure{margin:0}
.crate img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.crate h3{font:700 clamp(2.2rem,5vw,4.4rem)/1 var(--bill);letter-spacing:0}
.crate .tag,.soon .tag{margin:var(--s2) 0 0;font-weight:700}
.facts{list-style:none;margin:var(--s4) 0 0;padding:0;max-width:62ch}
.facts li{border-top:1px solid var(--rule-night);padding:var(--s2) 0}
.cost{margin:var(--s4) 0 0;font:700 clamp(2.4rem,5vw,4.4rem)/1 var(--bill);font-variant-numeric:tabular-nums}
.crate .acts{align-items:center;gap:var(--s3) var(--s5)}
.crate .acts a:not(.btn){font-weight:700}
.crate .plus-buy{margin-top:var(--s4)}
@media (max-width:700px){.plus-buy{display:none}}
@media (min-width:800px){.soon{grid-template-columns:1fr 1fr;column-gap:var(--s7);row-gap:var(--s6)}}
.soon li{border-top:3px solid var(--ink);padding-top:var(--s4)}
.soon h3{font:700 clamp(1.9rem,3.6vw,3.2rem)/1 var(--bill);letter-spacing:0}
.soon p{margin:var(--s2) 0 0;color:var(--on-paper-2);max-width:48ch}
.soon .tag{color:var(--ink)}
.soon a{font-weight:700}
.night .compare th,.night .compare td{border-top-color:var(--rule-night)}
.night .compare thead th{border-top-color:var(--on-night)}
.compare{font-size:1.05rem;margin-top:var(--s6)}
.compare th[scope=row]{font-weight:700;width:22%}
.compare td{width:39%;padding-right:var(--s4)}
.hl-note{margin-top:var(--s5);max-width:60ch;color:var(--on-night-2)}
.hl-note a{color:var(--on-night);text-decoration-color:var(--cyan)}

@media (max-width:999px){.free{grid-template-columns:minmax(0,1fr)}.free>*{min-width:0}}
@media (max-width:420px){.bpms{grid-template-columns:repeat(5,minmax(0,1fr))}.bpms dd{font-size:.85rem;overflow-wrap:anywhere}}

/* 7 Nov 2026, Crate Club */
.night .soon li{border-top-color:var(--rule-night)}
.night .soon p{color:var(--on-night-2)}
.night .soon .tag{color:var(--on-night)}
.night .soon a{color:var(--on-night);text-decoration-color:var(--cyan)}
.band .club-line{flex-basis:100%;max-width:none;font:600 clamp(1.05rem,1.6vw,1.3rem)/1.35 var(--body)}
.band .club-line a{color:var(--ink);text-decoration-color:var(--ink);text-underline-offset:.2em;text-decoration-skip-ink:none}
.joined{background:var(--cyan);color:var(--ink);padding-block:var(--s4)}
.joined[hidden]{display:none}
.joined p{margin:0;font-weight:700;max-width:70ch}
#club{scroll-margin-top:var(--s7)}
.club-sub{margin-top:var(--s3);font-weight:700;max-width:60ch}
.club-h3{font:700 clamp(1.6rem,2.8vw,2.4rem)/1.05 var(--bill);letter-spacing:0;margin-top:var(--s6)}
.club-facts{margin-top:var(--s3)}
.club-facts li{border-top-color:var(--ink)}
.club-plans{display:grid;gap:var(--s5);margin-top:var(--s6);align-items:stretch}
@media (min-width:900px){.club-plans{grid-template-columns:1fr 1.25fr 1fr;gap:var(--s4)}}
@media (max-width:899px){.plan-club{order:-1}}
.plan{border:2px solid var(--ink);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.plan h3{font:700 clamp(1.6rem,2.4vw,2.2rem)/1 var(--bill);letter-spacing:0}
.plan .cost{margin:0}
.plan .cost small{font:700 1.1rem/1 var(--body);margin-left:var(--s1)}
.plan .small{margin:0;font-size:1rem;color:var(--on-paper-2)}
.plan .acts{margin-top:auto;display:grid;gap:var(--s3)}
.plan .btn{width:100%}
.plan-club{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plan-club .small{color:var(--on-night-2)}
.plan-club .btn-b{background:var(--cyan);color:var(--ink)}
.plan .founding{margin:calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s2);padding:var(--s3) var(--s5);background:var(--pink);color:var(--ink);font-weight:700;line-height:1.3}
.plan .seats{margin:0;font:700 1.1rem/1.2 var(--body);font-variant-numeric:tabular-nums;color:var(--cyan)}
.club-faq{margin-top:var(--s3);display:grid;gap:0 var(--s7)}
@media (min-width:900px){.club-faq{grid-template-columns:1fr 1fr}}

/* 13 Nov 2026: crate wall (home), crate reels (/crates/), tile zoom */
.cwall{background:var(--black)}
.cwall-top{background:var(--pink);color:var(--ink);padding-block:var(--s6)}
.cwall-top .in{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center;justify-content:space-between}
.cwall-top h2{margin:0;font:700 clamp(1.8rem,4.2vw,3.8rem)/1.02 var(--bill);letter-spacing:0;max-width:22ch;flex-basis:100%}
.cwall-top p{margin:0;max-width:62ch;font:500 clamp(1.05rem,1.5vw,1.25rem)/1.4 var(--body)}
.cwall-top .club-line{flex-basis:100%;max-width:none;font:600 clamp(1.05rem,1.6vw,1.3rem)/1.35 var(--body)}
.cwall-top .club-line a{color:var(--ink);text-decoration-color:var(--ink);text-underline-offset:.2em;text-decoration-skip-ink:none}
.cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;background:var(--black)}
.cgrid .t.big{grid-column:span 2}
@media (min-width:900px){.cgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.cgrid .t.big{grid-row:span 2}}
.creel{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:var(--s5)}
.creel .t:first-child{grid-column:span 2}
@media (min-width:900px){.creel{grid-template-columns:repeat(5,minmax(0,1fr))}.creel .t:first-child{grid-column:auto}
  .creel-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.soon .creel{margin-top:var(--s4)}
.creel .t picture,.cgrid .t picture{position:absolute;inset:0}
.creel .t img,.cgrid .t img{width:100%;height:100%;object-fit:cover}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .t img,.t video{transition:transform .6s var(--ease),opacity .35s linear}
  .t:hover img,.t:hover video{transform:scale(1.03)}}
.creel-4 .t:first-child{grid-column:auto}
.cwall-top :focus-visible{outline-color:var(--ink)}