:root{
  --black:#0a0706;
  --wall:#120c09;
  --velvet:#5a0f16;
  --velvet-d:#1d0507;
  --light:#ffe2b0;
  --light-hot:#fff4de;
  --amber:#f1b544;
  --amber-d:#d99a2b;
  --ink:#1a1108;
  --ink-2:#3b2a14;
  --red:#b3202a;
  --field:#fff8ea;
  --lamp:1;
  --f-brand:"Bodoni Moda", "Didot", "Bodoni 72", serif;
  --f-label:"Big Shoulders", "Oswald", "Arial Narrow", sans-serif;
  --f-stencil:"Big Shoulders Stencil", "Big Shoulders", sans-serif;
  --f-mono:"DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* desktop geometry */
  --scr-l:5.2vw; --scr-t:8.5vh; --scr-w:56vw; --scr-h:61vh;
  --tk-w:min(452px, 33vw);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--black);color:var(--light)}
body{height:100dvh;-webkit-font-smoothing:antialiased;font-family:var(--f-mono);overscroll-behavior:none}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.room{position:fixed;inset:0;overflow:hidden;isolation:isolate;
  background:
   radial-gradient(120% 90% at 35% 40%, #1b120c 0%, #0d0907 55%, #060403 100%);}

/* ---------- the room ---------- */
.wall{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(60% 55% at calc(var(--scr-l) + var(--scr-w)*.5) 42%, rgba(255,196,120,calc(.10*var(--lamp))) 0%, transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 120px);
}
.valance{position:absolute;left:0;right:0;top:0;height:max(28px,4.4vh);z-index:3;
  background:
   linear-gradient(180deg, rgba(0,0,0,.0) 40%, rgba(0,0,0,.65) 100%),
   repeating-linear-gradient(90deg, #2a0609 0 6px, #5d1018 14px, #3a080c 24px, #1b0305 32px);
  box-shadow:0 10px 30px rgba(0,0,0,.7);
  -webkit-mask: radial-gradient(18px 10px at 16px 100%, transparent 98%, #000) 0 0/32px 100% repeat-x;
          mask: radial-gradient(18px 10px at 16px 100%, transparent 98%, #000) 0 0/32px 100% repeat-x;}
.drape{position:absolute;top:0;bottom:0;z-index:3;width:calc(var(--scr-l) * .72);
  background:
    linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,.75)),
    repeating-linear-gradient(90deg, #1a0305 0, #4d0c13 11px, #6a1520 15px, #3a070c 23px, #160204 34px);
  box-shadow: 12px 0 40px rgba(0,0,0,.8);}
.drape--l{left:0;-webkit-mask:linear-gradient(180deg,#000 70%,transparent);mask:linear-gradient(180deg,#000 70%,transparent)}

/* ---------- screen ---------- */
.screen{position:absolute;z-index:2;left:var(--scr-l);top:var(--scr-t);width:var(--scr-w);height:var(--scr-h);
  background:#0e0a08;border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,.03), 0 30px 80px rgba(0,0,0,.6);
  padding:1.1%;}
.frame{position:relative;width:100%;height:100%;border-radius:2.2% / 3.6%;overflow:hidden;
  opacity:var(--lamp);
  background:
    radial-gradient(70% 80% at 84% 44%, rgba(255,222,170,.30) 0%, rgba(255,196,128,.10) 45%, transparent 78%),
    radial-gradient(40% 50% at 30% 45%, rgba(255,214,160,.08) 0%, transparent 70%),
    radial-gradient(120% 120% at 50% 50%, #3b2b1d 0%, #241910 55%, #130d08 100%);
  box-shadow: inset 0 0 90px rgba(0,0,0,.75), 0 0 60px rgba(255,200,130,calc(.10*var(--lamp)));}
.gate{position:absolute;inset:0;animation:weave 7s steps(28) infinite}
@keyframes weave{0%,100%{transform:translate(0,0)}20%{transform:translate(.4px,-.6px)}40%{transform:translate(-.5px,.3px)}60%{transform:translate(.3px,.7px)}80%{transform:translate(-.2px,-.4px)}}
.scratches{position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:screen;
  background:
   linear-gradient(90deg, transparent 31.2%, rgba(255,240,210,.18) 31.3%, transparent 31.45%),
   linear-gradient(90deg, transparent 74.1%, rgba(255,240,210,.10) 74.15%, transparent 74.3%);
  animation:scratch 1.6s steps(6) infinite}
@keyframes scratch{0%{transform:translateX(0);opacity:.35}33%{transform:translateX(12px);opacity:.12}66%{transform:translateX(-30px);opacity:.3}100%{transform:translateX(5px);opacity:.2}}
.cuemark{position:absolute;right:5%;top:7%;width:clamp(16px,2.2vw,30px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(255,250,235,.95) 0 38%, rgba(255,230,180,.0) 72%);opacity:0;}
body.cue-flash .cuemark{animation:cue 1.1s steps(1) 1}
@keyframes cue{0%{opacity:1}12%{opacity:0}24%{opacity:1}36%{opacity:0}48%{opacity:1}60%,100%{opacity:0}}

.titlecard{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding: 0 8.5% 0 8.5%;transition:opacity .9s ease, filter 1.2s ease, transform 1.2s ease}

/* brand — the hero signal */
.brand{font-family:var(--f-brand);font-style:italic;font-weight:500;color:var(--light-hot);
  font-size:min(11.3vw, 18.6vh);line-height:.86;letter-spacing:-.035em;font-variation-settings:"opsz" 96;
  text-shadow:0 0 .12em rgba(255,214,150,.55), 0 0 .5em rgba(255,170,90,.25), 0 0 1.4em rgba(255,150,70,.15);
  display:flex;flex-direction:column;}
.brand__notes{display:block;margin-left:-.04em}
.brand__row{display:flex;align-items:baseline;gap:.16em;padding-left:.5em}
.brand__by{font-family:var(--f-label);font-style:normal;font-weight:600;font-size:.19em;letter-spacing:.32em;text-transform:uppercase;
  color:var(--light);transform:translateY(-.9em);font-variation-settings:"opsz" 30;opacity:.9;
  border-top:1px solid rgba(255,226,176,.5);border-bottom:1px solid rgba(255,226,176,.5);padding:.28em .1em .22em .42em}
.brand__ahmed{font-weight:700}
.tagline{margin-top:clamp(14px,3.4vh,34px);max-width:31em;font-family:var(--f-mono);font-size:clamp(13px,1.28vw,18.5px);line-height:1.55;
  color:rgba(255,232,196,.88);letter-spacing:.005em;padding-left:.2em;text-shadow:0 0 12px rgba(255,190,120,.25)}

/* ignition */
body.preshow .titlecard--brand{opacity:0;filter:blur(14px);transform:scale(1.035)}
.titlecard--leader,.titlecard--now{opacity:0;pointer-events:none}
body[data-state="unlocked"] .titlecard--brand{opacity:0;filter:blur(10px);transform:scale(.98);pointer-events:none}
body.leader-on .titlecard--leader{opacity:1;transition-duration:.15s}
body[data-state="unlocked"]:not(.leader-on) .titlecard--now{opacity:1}

/* countdown leader */
.titlecard--leader{align-items:center;justify-content:center;background:radial-gradient(circle,#4a3826,#1d140c 70%)}
.leader{position:relative;width:min(46%,58vh);aspect-ratio:1;display:grid;place-items:center;
  background:
    linear-gradient(rgba(255,240,210,.5),rgba(255,240,210,.5)) center/1px 100% no-repeat,
    linear-gradient(rgba(255,240,210,.5),rgba(255,240,210,.5)) center/100% 1px no-repeat;}
.leader__ring{position:absolute;inset:6%;border-radius:50%;border:2px solid rgba(255,240,210,.75);box-shadow:inset 0 0 0 12px transparent, inset 0 0 0 14px rgba(255,240,210,.35)}
.leader__sweep{position:absolute;inset:-30%;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,236,200,.28) 0turn var(--sw,0turn), transparent var(--sw,0turn));}
.leader__num{position:relative;font-family:var(--f-label);font-weight:800;font-size:min(14vw,26vh);line-height:1;color:var(--light-hot);text-shadow:0 0 20px rgba(255,200,130,.4)}

/* now showing */
.titlecard--now{justify-content:center}
.now__kicker{display:flex;gap:1.2em;align-items:center;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.28em;
  font-size:clamp(11px,1vw,14px);color:var(--amber)}
.now__kicker span+span{color:rgba(255,226,176,.7);letter-spacing:.18em}
.now__kicker span+span::before{content:"";display:inline-block;width:2.4em;height:1px;background:currentColor;vertical-align:middle;margin-right:1em;opacity:.6}
.now__title{font-family:var(--f-brand);font-style:italic;font-weight:600;font-size:min(6.6vw,11vh);line-height:.92;letter-spacing:-.03em;color:var(--light-hot);
  margin:.22em 0 .34em;text-shadow:0 0 .14em rgba(255,214,150,.5), 0 0 .8em rgba(255,160,80,.2)}
.now__list{list-style:none;display:grid;gap:0;max-width:40em;border-top:1px solid rgba(255,226,176,.25)}
.now__list li{display:grid;grid-template-columns:3em 1fr auto;align-items:baseline;gap:1em;padding:.75em 0;border-bottom:1px solid rgba(255,226,176,.25);
  font-size:clamp(12px,1.12vw,16px);color:rgba(255,236,206,.92)}
.now__list .n{font-family:var(--f-stencil);font-weight:800;color:var(--amber);font-size:1.25em}
.now__list .t{font-family:var(--f-brand);font-size:1.32em;font-weight:500}
.now__list .k{font-size:.86em;color:rgba(255,226,176,.66);letter-spacing:.02em}
.now__sig{margin-top:1.1em;font-family:var(--f-brand);font-style:italic;color:rgba(255,226,176,.7);font-size:clamp(13px,1.15vw,17px)}
body[data-state="unlocked"] .now__list li{animation:rise .6s both}
body[data-state="unlocked"] .now__list li:nth-child(2){animation-delay:.12s}
body[data-state="unlocked"] .now__list li:nth-child(3){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

/* ---------- booth + beam ---------- */
.booth{position:absolute;z-index:4;right:2.4vw;top:24vh;width:clamp(58px,6.2vw,92px);height:clamp(108px,15vh,148px);
  background:linear-gradient(180deg,#17100b,#0b0705);border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(255,220,170,.06), 0 20px 50px rgba(0,0,0,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}
.port{display:block;border-radius:50%;background:#050302;box-shadow:inset 0 2px 6px rgba(0,0,0,.9), 0 0 0 3px #22170f, 0 0 0 4px rgba(255,220,170,.08)}
.port--small{width:28%;aspect-ratio:1;background:radial-gradient(circle at 50% 60%, rgba(255,190,110,.25), #070403 70%)}
.port--lens{width:46%;aspect-ratio:1;
  background:radial-gradient(circle, #fffaf0 0 18%, #ffd38a 34%, #c9782e 58%, #2a1308 74%);
  box-shadow:0 0 0 3px #22170f, 0 0 calc(30px*var(--lamp)) calc(8px*var(--lamp)) rgba(255,200,120,calc(.65*var(--lamp))), 0 0 calc(110px*var(--lamp)) rgba(255,170,80,calc(.35*var(--lamp)));
  filter:brightness(calc(.25 + .75*var(--lamp)))}
.beam{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}

/* seats */
.seats{position:absolute;z-index:4;left:0;right:0;bottom:0;width:100%;height:21vh;pointer-events:none}

/* ---------- ticket ---------- */
.ticket{--perf-h:clamp(26px,3.6vh,34px);
  position:absolute;z-index:6;right:4.6vw;bottom:6.2vh;width:var(--tk-w);
  color:var(--ink);transform:rotate(-2.2deg);transform-origin:70% 100%;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.55)) drop-shadow(0 4px 6px rgba(0,0,0,.4));
  transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s;}
body.tk-hidden .ticket{transform:translateY(40px) rotate(-5deg);opacity:0}
.ticket__body,.ticket__stub,.perf{position:relative;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(255,246,214,.55), transparent 60%),
    linear-gradient(170deg, #f6c35a 0%, var(--amber) 45%, #e5a237 100%);}
.ticket__body::after,.ticket__stub::after,.perf::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background-image:var(--paper);background-size:180px 180px}
.ticket__body{border-radius:10px 10px 0 0;padding:clamp(14px,2.3vh,22px) clamp(18px,1.7vw,26px) clamp(10px,1.6vh,16px);
  box-shadow:inset 0 0 0 1.5px rgba(26,17,8,.12)}
.ticket__body::before{content:"";position:absolute;inset:7px 7px 0 7px;border:1px solid rgba(26,17,8,.38);border-bottom:0;border-radius:6px 6px 0 0;pointer-events:none}
.ticket__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:clamp(8px,1.4vh,12px);border-bottom:2px solid var(--ink)}
.admit{display:flex;flex-direction:column}
.admit__big{font-family:var(--f-label);font-weight:900;text-transform:uppercase;font-size:clamp(28px,4.4vh,42px);line-height:.85;letter-spacing:.015em;font-variation-settings:"opsz" 72}
.admit__small{margin-top:6px;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.17em;font-size:11.5px;color:var(--ink-2)}
.serial{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.serial__lbl{font-family:var(--f-label);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.serial__no{font-family:var(--f-stencil);font-weight:800;font-size:clamp(26px,3.8vh,36px);color:var(--red);letter-spacing:.02em}
.cue{display:flex;justify-content:space-between;gap:10px;margin:clamp(8px,1.4vh,12px) 0 clamp(8px,1.3vh,12px);font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--ink-2)}
.cue__step b{color:var(--ink)}

.lbl{display:block;font-family:var(--f-label);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(14px,2vh,16px);color:var(--ink);margin-bottom:7px}
.field input{width:100%;height:clamp(46px,6.6vh,56px);padding:0 16px;border:2px solid var(--ink);border-radius:5px;background:var(--field);
  font:500 clamp(15px,2.2vh,18px)/1 var(--f-mono);color:var(--ink);letter-spacing:.01em;
  box-shadow:inset 0 2px 0 rgba(26,17,8,.08)}
.field input::placeholder{color:#7a6237;opacity:1}
.field input:focus{outline:3px solid var(--ink);outline-offset:3px}
.field input[aria-invalid="true"]{border-color:var(--red);outline-color:var(--red);background:#fff1ec}
.help{margin-top:8px;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.help.err{color:#8e1119;font-weight:500}

.beat{transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1), max-height .6s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.beat--code,.beat--done{max-height:0;opacity:0;transform:translateY(10px)}
.beat--email{max-height:200px}
body[data-state="code"] .beat--email,body[data-state="unlocked"] .beat--email{max-height:0;opacity:0;transform:translateY(-14px)}
body[data-state="code"] .beat--code{max-height:200px;opacity:1;transform:none}
body[data-state="unlocked"] .beat--done{max-height:240px;opacity:1;transform:none}
.issued{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:clamp(8px,1.3vh,11px) 12px;margin-bottom:clamp(10px,1.6vh,14px);
  border:1.5px dashed rgba(26,17,8,.55);border-radius:5px;font-size:15px}
.issued__k{font-family:var(--f-label);font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--ink-2)}
.issued__v{font-weight:500;color:var(--ink);word-break:break-all;flex:1;min-width:0;animation:none}
body[data-state="code"] .beat--code .issued__v{animation:print .7s steps(14) both .15s}
@keyframes print{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.link{background:none;border:0;padding:2px 0;font:500 12.5px var(--f-mono);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.welcome{font-family:var(--f-brand);font-style:italic;font-weight:600;font-size:clamp(20px,3vh,26px);line-height:1.1;margin:2px 0 clamp(10px,1.8vh,16px)}

/* perforation: punched holes → code digits */
.perf{border:0;display:flex;align-items:center;gap:8px;padding:0 0;min-height:var(--perf-h);
  transition:min-height .6s cubic-bezier(.2,.8,.2,1), padding .6s cubic-bezier(.2,.8,.2,1);
  -webkit-mask:radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;}
.perf__dash{flex:1;height:0;border-top:2px dotted rgba(26,17,8,.55);margin:0 18px}
.perf__dash:first-child{margin-right:4px}.perf__dash:last-child{margin-left:4px}
.digits{display:flex;gap:9px;align-items:center}
.d{--s:9px;width:var(--s);height:var(--s);border-radius:50%;border:0;padding:0;background:#160e07;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8), 0 1px 0 rgba(255,240,200,.6);
  color:transparent;caret-color:transparent;text-align:center;
  font:800 0px/1 var(--f-stencil);
  transition:width .55s cubic-bezier(.3,1.4,.4,1), height .55s cubic-bezier(.3,1.4,.4,1), border-radius .45s ease, background .35s ease, box-shadow .35s, font-size .3s ease .25s, color .3s ease .25s;}
body[data-state="code"] .perf,body[data-state="unlocked"] .perf{min-height:calc(clamp(54px,7.8vh,66px) + 20px);padding:10px 0}
body[data-state="code"] .d,body[data-state="unlocked"] .d{width:clamp(40px,3.6vw,52px);height:clamp(54px,7.8vh,66px);border-radius:6px;background:var(--field);
  border:2px solid var(--ink);box-shadow:inset 0 2px 0 rgba(26,17,8,.08);color:var(--ink);caret-color:var(--red);font-size:clamp(30px,4.6vh,40px)}
.digits .d:nth-child(1){transition-delay:0s,0s,0s,0s,0s,.25s,.25s}
.digits .d:nth-child(2){transition-delay:.05s,.05s,.05s,.05s,.05s,.3s,.3s}
.digits .d:nth-child(3){transition-delay:.1s,.1s,.1s,.1s,.1s,.35s,.35s}
.digits .d:nth-child(4){transition-delay:.15s,.15s,.15s,.15s,.15s,.4s,.4s}
.digits .d:nth-child(5){transition-delay:.2s,.2s,.2s,.2s,.2s,.45s,.45s}
.digits .d:nth-child(6){transition-delay:.25s,.25s,.25s,.25s,.25s,.5s,.5s}
.digits .d:nth-child(3){margin-right:10px}
.d:focus{outline:3px solid var(--ink);outline-offset:2px;background:#fff}
.d.filled{background:#fffdf6}
body[data-state="code"] .perf__dash{margin:0 6px}
.perf.err .d{border-color:var(--red);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

.ticket__stub{border-radius:0 0 10px 10px;padding:clamp(10px,1.6vh,16px) clamp(18px,1.7vw,26px) clamp(14px,2.2vh,20px);
  transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ticket__stub::before{content:"";position:absolute;inset:0 7px 7px 7px;border:1px solid rgba(26,17,8,.38);border-top:0;border-radius:0 0 6px 6px;pointer-events:none}
.stub__code,.stub__done{display:none}
body[data-state="code"] .stub__email,body[data-state="unlocked"] .stub__email{display:none}
body[data-state="code"] .stub__code{display:block}
body[data-state="unlocked"] .stub__done{display:block}
.btn{position:relative;z-index:1;display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;height:clamp(46px,6.6vh,56px);padding:0 18px;border:0;border-radius:5px;cursor:pointer;
  font-family:var(--f-label);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(15px,2.1vh,17px);text-decoration:none}
.btn--ink{background:var(--ink);color:#ffd27a;box-shadow:0 2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,220,150,.12)}
.btn--ink:hover{background:#2a1b0c}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn .arr{font-family:var(--f-mono);font-size:1.2em;transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.btn[aria-busy="true"] .arr{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fine{position:relative;z-index:1;margin-top:9px;font-size:12px;line-height:1.35;color:var(--ink-2);display:flex;gap:7px;flex-wrap:wrap;align-items:baseline}
.fine .demo{color:#5e4620;font-style:italic}

/* beat 3 — stub tears, stamp lands */
.stamp{position:absolute;right:22px;top:50%;margin-top:-.62em;transform:rotate(-11deg) scale(1.6);opacity:0;
  font-family:var(--f-stencil);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(30px,4.6vh,42px);
  color:var(--red);border:3px solid var(--red);border-radius:6px;padding:2px 12px 0;mix-blend-mode:multiply;pointer-events:none;
  -webkit-mask:var(--speckle);mask:var(--speckle);transition:transform .28s cubic-bezier(.5,1.8,.5,1) .35s, opacity .12s .35s}
body[data-state="unlocked"] .stamp{opacity:.88;transform:rotate(-11deg) scale(1)}
body[data-state="unlocked"] .ticket__stub{transform:translate(12px,16px) rotate(4.5deg);
  -webkit-mask:var(--torn) top/100% 8px no-repeat, linear-gradient(#000,#000) 0 7px/100% 100% no-repeat;
          mask:var(--torn) top/100% 8px no-repeat, linear-gradient(#000,#000) 0 7px/100% 100% no-repeat}
body[data-state="unlocked"] .perf{-webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 7px) no-repeat, var(--tornb) bottom/100% 8px no-repeat;mask:linear-gradient(#000,#000) top/100% calc(100% - 7px) no-repeat, var(--tornb) bottom/100% 8px no-repeat}
body[data-state="unlocked"] .d{border-color:rgba(26,17,8,.7);background:#fff6df}
body[data-state="unlocked"] .perf{border-radius:0}

/* ---------- film grain + vignette ---------- */
.grain{position:absolute;inset:-50%;z-index:9;pointer-events:none;opacity:.11;mix-blend-mode:overlay;background-image:var(--grain);background-size:220px 220px;animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.vignette{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(130% 110% at 45% 42%, transparent 55%, rgba(0,0,0,.6) 100%)}

/* ---------- mobile / portrait ---------- */
@media (max-width: 760px), (max-aspect-ratio: 4/5){
  :root{--scr-l:4vw;--scr-t:max(14px,3.2dvh);--scr-w:92vw;--scr-h:43dvh;--tk-w:92vw}
  .drape,.booth .port--small{display:none}
  .valance{height:14px}
  .screen{padding:5px}
  .titlecard{padding:0 7%}
  .brand{font-size:min(19.5vw,10.8dvh)}
  .brand__row{padding-left:.5em}
  .brand__by{font-size:.2em;letter-spacing:.26em}
  .tagline{font-size:clamp(11.5px,3.3vw,13.5px);margin-top:max(10px,1.8dvh);line-height:1.45}
  .booth{right:6vw;top:calc(var(--scr-t) + var(--scr-h) + 1.4dvh);width:44px;height:44px;background:#0d0806;border-radius:50%;justify-content:center}
  .port--lens{width:58%}
  .seats{height:16dvh}
  .ticket{right:4vw;left:4vw;bottom:max(12px,2.4dvh);transform:rotate(-1deg)}
  .ticket__body{padding:12px 16px 8px}
  .ticket__stub{padding:8px 16px 13px}
  .admit__big{font-size:30px}
  .admit__small{font-size:10.5px;letter-spacing:.12em}
  .serial__no{font-size:26px}
  .cue{font-size:11px;margin:8px 0 9px;letter-spacing:.12em}
  .lbl{font-size:14px}
  .field input,.btn{height:48px}
  .help{font-size:11.5px;margin-top:6px}
  .fine{font-size:11px;margin-top:7px}
  body[data-state="code"] .d,body[data-state="unlocked"] .d{width:min(11vw,46px);height:56px;font-size:32px}
  body[data-state="code"] .perf,body[data-state="unlocked"] .perf{min-height:72px;padding:8px 0}
  .digits{gap:6px}.digits .d:nth-child(3){margin-right:6px}
  body[data-state="code"] .perf__dash{margin:0 3px}
  .now__title{font-size:min(10vw,5.8dvh)}
  .now__list li{grid-template-columns:2em 1fr;font-size:11px;padding:.45em 0;gap:.6em}
  .now__list .k{display:none}
  .now__list .t{font-size:1.25em}
  .now__kicker{font-size:9.5px;letter-spacing:.18em;gap:.6em}
  .now__kicker span+span::before{width:1.2em;margin-right:.6em}
  .now__sig{display:none}
  .welcome{font-size:21px;margin-bottom:10px}
  .issued{padding:7px 10px;font-size:13.5px;margin-bottom:10px}
  .stamp{font-size:26px;right:16px}
  body[data-state="unlocked"] .ticket__stub{transform:translate(5px,7px) rotate(2deg)}
}
@media (max-width: 760px) and (max-height: 700px){
  :root{--scr-h:34dvh}
  .booth{width:34px;height:34px;top:calc(var(--scr-t) + var(--scr-h) + 1dvh)}
  .fine .dot{display:none}
  .fine .demo{font-size:10.5px}
  .ticket__body{padding:10px 14px 6px}
  .admit__big{font-size:26px}.serial__no{font-size:22px}
  .cue{margin:6px 0 7px}
  .field input,.btn{height:44px}
  .help{display:none}
  .lbl{margin-bottom:5px}
  .ticket__stub{padding:6px 14px 11px}
  body[data-state="code"] .d,body[data-state="unlocked"] .d{height:50px;font-size:28px}
  body[data-state="code"] .perf,body[data-state="unlocked"] .perf{min-height:64px;padding:7px 0}
  .issued{margin-bottom:7px}
  .welcome{font-size:19px;margin-bottom:8px}
}
@media (min-width: 761px) and (max-height: 760px){
  .admit__small{font-size:10.5px}
  .help{font-size:11.5px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

.admit__small .dom{font-family:var(--f-mono);text-transform:none;letter-spacing:.01em;font-weight:500;color:var(--ink)}
.welcome{max-width:15em}
@media (max-width:760px), (max-aspect-ratio:4/5){
  .seats{bottom:auto;top:calc(var(--scr-t) + var(--scr-h) + 1dvh);height:12dvh;opacity:.9}
}

body[data-state="unlocked"] .cue__name{visibility:hidden}

.stub__done{min-height:clamp(44px,6vh,54px);display:none;align-items:center}
body[data-state="unlocked"] .stub__done{display:flex}
.stub__done .fine{margin:0;font-family:var(--f-label);text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:11.5px;line-height:1.5}
.beat{padding:5px 7px;margin:-5px -7px}
.beat--code,.beat--done{padding-top:0;padding-bottom:0}
body[data-state="code"] .beat--code,body[data-state="unlocked"] .beat--done{padding-top:5px;padding-bottom:5px}
body[data-state="code"] .beat--email,body[data-state="unlocked"] .beat--email{padding-top:0;padding-bottom:0}
@media (max-width:760px), (max-aspect-ratio:4/5){
  .seats{-webkit-mask:linear-gradient(180deg,#000 55%,transparent);mask:linear-gradient(180deg,#000 55%,transparent)}
}