/* Data-Grid · the BiTS scroll film. Graphite on paper, one coral point. z-bands: film 0 · captions 20 · interactive 25 · HUD 30 · dialog 40 */
:root{
  --paper:#f2f1ec; --card:#f7f6f2; --ink:#151514; --mid:#4a4946; --dim:#8e8c86; --line:rgba(21,21,20,.14); --line-2:rgba(21,21,20,.3); --coral:#e0532f;
  --apricot:#f4977b; --dither-paper:var(--paper); --dither-sweep:url(assets/dither-sweep.png);
  --night:#222221; --chalk:#ebe9e2;
  --serif:"ISerif",Georgia,"Times New Roman",serif; --mono:"Plex",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1); --hud:56px; --strip:44px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.45;overflow-x:clip}
a{color:inherit} h1,h2,h3,h4,p{margin:0;font-weight:400}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.dim{color:var(--dim)} .center{text-align:center}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 18px}}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:8px 12px}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.link{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:12px 16px;border:1px solid var(--ink);cursor:pointer;white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease),transform .15s var(--ease)}
.btn:active{transform:scale(.97)} .btn-ink{background:var(--ink);color:var(--paper)} .btn-ink:hover{background:var(--coral);border-color:var(--coral)}
.btn-line{background:transparent;color:var(--ink)} .btn-line:hover{background:var(--ink);color:var(--paper)} .btn-lg{padding:16px 22px}
/* dither CTA (graphite-system-v2 §11): ground → apricot → coral plane behind the label. One per page. */
.btn-dither{position:relative;isolation:isolate;overflow:hidden;background:var(--paper);color:var(--ink)}
.btn-dither:before{content:"";position:absolute;left:50%;top:50%;width:240px;height:240px;margin:-120px 0 0 -120px;z-index:-1;background:var(--dither-sweep) center/cover;image-rendering:pixelated;opacity:.45;transition:opacity .4s var(--ease)}
.btn-dither:hover:before,.btn-dither:focus-visible:before{opacity:.85;animation:sweep-turn 4s linear infinite}
@keyframes sweep-turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn-dither:hover:before,.btn-dither:focus-visible:before{animation:none}}

/* HUD */
.hud{position:fixed;inset:0 0 auto 0;height:var(--hud);z-index:30;display:flex;align-items:center;gap:20px;padding:0 24px;pointer-events:none}
.hud>*{pointer-events:auto}
.logo{display:flex;align-items:center;gap:12px;font-size:24px;text-decoration:none;white-space:nowrap}
/* the dotted BiTS (pitch close, film title chapter): ink dots in currentColor, apricot near the i, one coral point. Data-Grid endorses it in mono */
.bits-logo{height:38px;width:auto;display:block;overflow:visible}
.logo-by{color:var(--mid);font-size:10px;transform:translateY(-1px)}
.hud-ch{flex:1;color:var(--mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-tc{margin-left:14px;color:var(--dim)}
.hud-r{display:flex;gap:10px;align-items:center}
.hud-btn{background:color-mix(in srgb,var(--paper) 80%,transparent);border:1px solid var(--line-2);color:var(--ink);padding:10px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.hud-btn:hover{border-color:var(--ink)}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:10px}.eq i{width:2px;height:3px;background:var(--ink)}
.hud-btn[aria-pressed="true"] .eq i{animation:eq 1s steps(4) infinite}.hud-btn[aria-pressed="true"] .eq i:nth-child(2){animation-delay:.25s}.hud-btn[aria-pressed="true"] .eq i:nth-child(3){animation-delay:.5s}
@keyframes eq{0%{height:3px}50%{height:10px}100%{height:5px}}
@media (min-width:821px) and (min-aspect-ratio:1/1){body.dark-ch .hud{color:var(--chalk)} body.dark-ch .hud-ch{color:#bdbab2} body.dark-ch .logo-by{color:#bdbab2}
body.dark-ch .hud-btn{background:rgba(34,34,33,.7);color:var(--chalk);border-color:rgba(235,233,226,.3)} body.dark-ch .eq i{background:var(--chalk)}}
/* over the ink ticket section the HUD goes light at every width (app.js hudTone) */
body.dark-hud .hud{color:var(--chalk)} body.dark-hud .hud-ch,body.dark-hud .logo-by{color:#bdbab2}
body.dark-hud .hud-btn{background:rgba(34,34,33,.7);color:var(--chalk);border-color:rgba(235,233,226,.3)} body.dark-hud .eq i{background:var(--chalk)}
@media (max-width:820px){.hud{padding:0 14px;gap:10px}.hud-ch{display:none}.hud-btn .lbl{display:none}.hud-book{padding:10px 12px;font-size:10.5px}.logo .logo-by{display:none}.bits-logo{height:34px}}

/* FILM */
.film{position:relative;height:calc(var(--film-vh,1900) * 1vh)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;isolation:isolate}
.frame{position:absolute;inset:0;z-index:0}
.frame canvas{width:100%;height:100%;display:block}
.captions{position:absolute;inset:0;z-index:20;pointer-events:none}
.cap{position:absolute;left:5vw;top:calc(var(--hud) + 2.6vh);width:min(46vw,640px);opacity:0;visibility:hidden}
.cap.live{visibility:visible}
.cap .mono{color:var(--mid)}
.cap-k{margin-bottom:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cap-t{font-size:clamp(34px,3.6vw,58px);line-height:1.02;letter-spacing:-.005em}
.cap-t .w{display:inline-block;will-change:transform}
.cap-l{font-size:clamp(16px,1.25vw,19px);color:var(--mid);margin-top:14px;max-width:560px;line-height:1.4}
.cap-stat{position:absolute;right:5vw;top:calc(var(--hud) + 2.6vh);text-align:right;opacity:0;visibility:hidden}
.cap-stat.live{visibility:visible}
.cap-stat b{display:block;font-weight:400;font-style:italic;font-size:clamp(40px,4.2vw,64px);line-height:1}
.cap-stat span{display:block;margin-top:6px}
.badge{display:inline-flex;gap:6px;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--ink);padding:3px 8px;background:var(--paper)}
.badge.gap{border-color:var(--coral);color:var(--coral)}
.badge.gap:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral)}
@media (min-width:821px) and (min-aspect-ratio:1/1){.dark .cap-t,.dark .cap-stat b{color:var(--chalk)} .dark .mono,.dark .cap-l{color:#bdbab2} .dark .badge{background:var(--night);border-color:var(--chalk);color:var(--chalk)}}
.cap-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;pointer-events:auto}

/* audit panel (interactive) */
.audit{position:absolute;right:4vw;top:calc(var(--hud) + 18vh);width:min(340px,30vw);z-index:25;pointer-events:auto;background:color-mix(in srgb,var(--paper) 90%,transparent);border:1px solid var(--ink);padding:16px 16px 12px;opacity:0;visibility:hidden}
.audit.live{visibility:visible}
.audit-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.audit-h b{font-weight:400;font-style:italic;font-size:44px;line-height:1}
.arow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.arow p{font-size:16px;line-height:1.15}
.arow p .mono{display:block;font-size:9.5px;color:var(--dim);margin-bottom:2px}
.chips{display:flex}
.chips button{width:32px;height:30px;margin-left:-1px;border:1px solid var(--line-2);background:transparent;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--mid);cursor:pointer}
.chips button:hover{color:var(--ink);border-color:var(--ink);position:relative}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink);position:relative}
.audit-note{font-size:14px;color:var(--mid);margin-top:8px;line-height:1.35}

.hint{position:absolute;right:28px;bottom:calc(var(--strip) + 16px);color:var(--mid);opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap}
.hint.on{opacity:1}
.hint:before{content:"";display:inline-block;width:9px;height:9px;border:1px solid var(--ink);border-radius:50%;margin-right:8px;vertical-align:-1px}
.tittle{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:0;background:transparent;cursor:pointer;z-index:25;display:none}
.tittle.on{display:block}
.tittle:hover,.tittle:focus-visible{box-shadow:0 0 0 2px var(--coral)}
.scroll-cue{position:absolute;left:50%;bottom:calc(var(--strip) + 20px);transform:translateX(-50%);z-index:25;color:var(--mid);transition:opacity .4s}
.scroll-cue span{display:inline-block;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px)}}

/* chapter strip */
.strip{position:absolute;left:0;right:0;bottom:0;height:var(--strip);z-index:30;display:flex;align-items:stretch;padding:0 24px;gap:0;border-top:1px solid var(--line);background:color-mix(in srgb,var(--paper) 86%,transparent)}
.strip button{flex:var(--w,1) 1 0;min-width:0;border:0;border-left:1px solid var(--line);background:transparent;cursor:pointer;position:relative;padding:0 8px;text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip button:first-child{border-left:0}
.strip button:hover,.strip button.on{color:var(--ink)}
.strip button .fill{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--ink)}
.strip button.on .fill{background:var(--coral)}
@media (min-width:821px) and (min-aspect-ratio:1/1){body.dark-ch .strip{background:rgba(34,34,33,.86);border-top-color:rgba(235,233,226,.14)} body.dark-ch .strip button{color:#8e8c86;border-left-color:rgba(235,233,226,.14)} body.dark-ch .strip button.on,body.dark-ch .strip button:hover{color:var(--chalk)} body.dark-ch .strip button .fill{background:var(--chalk)}}

/* phones and portrait tablets: a 4:5 film frame on top, captions below */
@media (max-width:820px), (max-aspect-ratio:1/1){
  .frame{inset:auto;left:50%;top:var(--hud);transform:translateX(-50%);width:min(100vw, calc(56svh * .8));height:min(125vw, 56svh)}
  .cap,.cap-stat{left:18px;right:18px;width:auto;top:calc(var(--hud) + min(125vw, 56svh) + 14px)}
  .cap-stat{text-align:left;top:auto;bottom:calc(var(--strip) + 12px)}
  .cap-stat b{font-size:30px;display:inline;margin-right:8px}.cap-stat span{display:inline}
  .cap-t{font-size:clamp(26px,7.4vw,34px)}
  .cap-l{font-size:15px;margin-top:8px}
  .cap-k{margin-bottom:6px}
  .audit{left:12px;right:12px;width:auto;top:calc(var(--hud) + min(125vw, 56svh) + 8px);bottom:auto;padding:10px 12px 6px;background:var(--paper)}
  .cap.has-audit{display:none}
  .audit-h b{font-size:30px}
  .arow{padding:2px 0}.arow p{font-size:14px}.arow p .mono{display:none}
  .chips button{width:30px;height:27px;font-size:15px}
  .audit-note{display:none}
  .cap.has-audit .cap-l{display:none}
  .strip{padding:0 6px}.strip button{font-size:0;padding:0}.strip button.on{font-size:9px;flex:0 0 auto;padding:0 8px;overflow:visible}
  .hint{bottom:10px;right:auto;left:50%;transform:translateX(-50%)}
}

/* CREDITS */
.credits{padding:120px 0 80px;border-top:1px solid var(--line);background:var(--paper)}
.credits-h{font-size:clamp(44px,6vw,84px);line-height:1;margin-top:14px}
.credits-sub{max-width:640px;margin:18px auto 0;color:var(--mid)}
.roll{max-width:880px;margin:70px auto 0}
.roll-h{text-align:center;color:var(--mid);margin:70px 0 22px}
.roll-list div{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:9px 0}
.roll-list dt{text-align:right;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding-top:5px;color:var(--mid)}
.roll-list dd{margin:0;font-size:22px;font-style:italic}
.acts{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink)}
.acts article{padding:22px;display:flex;flex-direction:column;gap:10px;background:var(--card)}
.acts article+article{border-left:1px solid var(--ink)}
.acts h4{font-size:32px;line-height:1.05}
.act-t{color:var(--dim)}
.acts p:not(.mono){font-size:16.5px;color:var(--mid)}
.lever{font-style:italic;border-left:2px solid var(--coral);padding-left:10px;color:var(--ink)!important}
.paths{list-style:none;padding:0;margin:0 auto;max-width:640px}
.paths li{display:grid;grid-template-columns:40px 1fr;padding:12px 0;border-top:1px solid var(--line-2);font-size:20px}
.paths li span{font-style:italic;color:var(--dim);font-size:28px;line-height:1}
.faq{max-width:700px;margin:0 auto}
.faq details{border-top:1px solid var(--line-2)}.faq details:last-child{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font-size:21px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:13px;font-family:var(--mono);color:var(--mid);transition:transform .25s var(--ease)}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{color:var(--mid);padding:0 0 18px;font-size:17px}
.extras{margin-top:56px;font-size:17px;color:var(--mid)}
@media (max-width:820px){.acts{grid-template-columns:1fr}.acts article+article{border-left:0;border-top:1px solid var(--ink)}.roll-list div{grid-template-columns:1fr;gap:2px;text-align:center}.roll-list dt{text-align:center}}

/* TICKET */
.ticket-wrap{background:var(--ink);color:var(--paper);padding:110px 0;min-height:100vh;min-height:100svh;display:flex;align-items:center}  /* a full screen of ink, so it can scroll fully under the HUD */
.ticket-wrap>.wrap{width:100%}
.ticket-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.ticket-wrap h2{font-size:clamp(46px,6vw,84px);line-height:1;margin-top:12px}
.dim-inv{color:#9a978f}
.ticket-lede{color:#bdbab2;margin-top:18px;font-size:20px}
.your-score{margin-top:22px;border:1px solid var(--coral);color:var(--paper);padding:10px 12px;display:inline-block;line-height:1.6}
.your-score[hidden]{display:none}  /* no audit started: no line, no empty box */
.ticket{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--paper);color:var(--ink);padding:26px 26px 22px 26px;
  -webkit-mask:radial-gradient(circle at 0 64px,transparent 12px,#000 12.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 64px,transparent 12px,#000 12.5px) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 64px,transparent 12px,#000 12.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 64px,transparent 12px,#000 12.5px) right/51% 100% no-repeat}
.stub{grid-column:1/-1;display:flex;justify-content:space-between;border-bottom:1px dashed var(--line-2);padding-bottom:16px;margin-bottom:10px;color:var(--mid);font-size:10.5px}
.book-form label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.book-form .full{grid-column:1/-1}
.book-form input,.book-form select,.book-form textarea{font-family:var(--serif);font-size:18px;color:var(--ink);background:var(--card);border:1px solid var(--line-2);padding:10px 11px;border-radius:0;width:100%}
.book-form input:focus,.book-form select:focus,.book-form textarea:focus{outline:2px solid var(--coral);outline-offset:0}
.book-form [aria-invalid="true"]{border-color:var(--coral)}
.form-msg{font-size:15px;color:var(--mid);min-height:1.3em}
@media (max-width:820px){.ticket-grid{grid-template-columns:1fr}.ticket{grid-template-columns:1fr;padding:22px 18px}}

/* dialog */
.book-dialog{border:1px solid var(--ink);padding:26px;max-width:560px;width:calc(100vw - 32px);background:var(--paper);color:var(--ink)}
.book-dialog::backdrop{background:rgba(21,21,20,.55)}
.book-dialog h2{font-size:40px;line-height:1.05}
.dlg-lede{color:var(--mid);margin:8px 0 14px}
.dlg-close-row{display:flex;justify-content:flex-end;margin:-10px -10px 4px 0}
.dlg-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.book-dialog .your-score{color:var(--ink);margin:0 0 14px}
@media (max-width:560px){.dlg-form{grid-template-columns:1fr}}

.foot{padding:40px 0 60px;border-top:1px solid var(--line)}
.foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:baseline}
.foot-mark{display:flex;align-items:flex-end;gap:14px}.foot-mark .bits-logo{height:60px}.foot-mark .logo-by{margin-bottom:4px}

/* READING VIEW */
.reading{padding:calc(var(--hud) + 40px) 0 40px}
.read-ch{max-width:1100px;margin:0 auto 72px;padding:0 24px}
.read-ch canvas{width:100%;height:auto;border:1px solid var(--line-2);display:block;margin-top:18px}
.read-ch h2{font-size:clamp(32px,4vw,52px);line-height:1.05;margin-top:8px}
.read-ch .cap-l{max-width:720px}
.read-ch .audit{position:static;visibility:visible;opacity:1;width:auto;max-width:420px;margin-top:18px}
body.read .film{display:none}