:root{
  --ink:#eef1f5; --dim:rgba(238,241,245,.6); --line:rgba(238,241,245,.16);
  --sans:'Archivo',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --bar:0px; --subY:8vh;
}
*{box-sizing:border-box}
html,body{background:#000;color:var(--ink);margin:0}
body{visibility:visible;animation:none;font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

#film,#fallback{position:fixed;inset:0;width:100%;height:100%;display:block}
#fallback{display:none;background:#000 center/cover no-repeat}
.nogl #fallback{display:block}.nogl #film{display:none}
#track{position:relative;pointer-events:none}

.bar{position:fixed;left:0;right:0;height:var(--bar);background:#000;z-index:2;pointer-events:none}
.bar.top{top:0}.bar.bot{bottom:0}

header{position:fixed;top:0;left:0;right:0;z-index:6;display:flex;justify-content:space-between;align-items:center;
  padding:22px max(16px,4vw);font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.7)}
/* keeps the header readable once the letterbox opens on a bright frame */
header::before{content:'';position:absolute;inset:0 0 -40px;z-index:-1;background:linear-gradient(rgba(0,0,0,.45),transparent);pointer-events:none}
.mark{font:800 12px/1 var(--sans);font-stretch:125%;letter-spacing:.34em}
header nav{display:flex;gap:28px;align-items:center}
.hud{color:var(--dim)}
#toEnd{border-bottom:1px solid var(--line);padding-bottom:4px}
#toEnd:hover{border-color:var(--ink)}

/* subtitles sit in the bottom letterbox bar, like a film print */
#subs{position:fixed;left:0;right:0;bottom:var(--subY);z-index:3;pointer-events:none}
.sub{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);width:min(76vw,900px);margin:0;text-align:center;
  font:400 clamp(16px,1.55vw,25px)/1.35 var(--sans);letter-spacing:.01em;opacity:0;text-shadow:0 1px 14px rgba(0,0,0,.9)}
.sub.q{font-style:italic;color:#dfe6ef}
.sub.q::before{content:'CH 8 NEWS';display:block;margin-bottom:8px;font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.3em;color:var(--dim)}
.sub.big{font-weight:700;font-stretch:112%;font-size:clamp(20px,2.2vw,34px)}

.stamp{position:fixed;left:max(16px,4vw);bottom:max(calc(var(--bar) + 5vh),84px);z-index:3;margin:0;pointer-events:none;opacity:0;
  font:500 12px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.7)}
.stamp.day{font:800 clamp(44px,8vw,140px)/.9 var(--sans);font-stretch:125%;letter-spacing:.02em}

.title{position:fixed;inset:0;z-index:3;display:grid;place-content:center;text-align:center;pointer-events:none;opacity:0;--p:0}
.title h1{margin:0;font-weight:900;font-stretch:125%;font-size:clamp(40px,10vw,190px);line-height:.9;text-transform:uppercase;
  letter-spacing:calc(.08em + (1 - var(--p)) * .45em);margin-right:calc(-1 * (.08em + (1 - var(--p)) * .45em))}
.title p{margin:28px 0 0;font:500 12px/1 var(--mono);letter-spacing:.42em;text-transform:uppercase;color:var(--dim)}

#credits{position:fixed;left:50%;top:0;z-index:3;width:min(92vw,560px);transform:translate(-50%,100vh);text-align:center;pointer-events:none;opacity:0}
#credits h2{margin:0 0 56px;font-weight:900;font-stretch:125%;font-size:clamp(28px,4vw,52px);letter-spacing:.24em;text-transform:uppercase}
#credits dl{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin:0 0 64px}
#credits dt{text-align:right;font:500 11px/1.8 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
#credits dd{margin:0;text-align:left;font-size:17px;line-height:1.5}
#credits p{margin:0 0 18px;color:var(--dim);font-style:italic}

#end{position:fixed;left:max(16px,6vw);top:50%;z-index:4;width:min(88vw,460px);transform:translateY(-44%);opacity:0;visibility:hidden;
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),visibility 0s .9s}
#end.on{opacity:1;visibility:visible;transform:translateY(-50%);transition-delay:0s}
#end h2{margin:0 0 14px;font-weight:800;font-stretch:112%;font-size:clamp(34px,4.2vw,60px);line-height:1;letter-spacing:-.01em}
#end .day{margin:0 0 30px;font:500 12px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.ca{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.55);margin-bottom:12px}
.ca .tk{font-weight:700}
.ca code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 12px/1 var(--mono);color:var(--dim)}
.ca button{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:9px 12px;border-radius:6px;background:rgba(238,241,245,.1)}
.ca button:hover{background:rgba(238,241,245,.18)}
.btns{display:flex;gap:10px}
.btn{flex:1;text-align:center;padding:15px 18px;border-radius:8px;font-weight:600;font-size:15px;background:rgba(0,0,0,.55);border:1px solid var(--line);transition:background .3s}
.btn:hover{background:rgba(238,241,245,.12)}
.btn.primary{flex:2;background:var(--ink);color:#000;border-color:var(--ink)}
.btn.primary:hover{background:#fff}
.btn[aria-disabled=true]{opacity:.45;pointer-events:none}


#snd{position:fixed;left:max(16px,4vw);bottom:18px;z-index:6;height:40px;display:flex;align-items:center;gap:10px;color:var(--dim)}
#snd .lbl{font:500 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;transition:opacity .6s}
#snd:not(.blocked) .lbl{opacity:0}
@media (hover:none){#snd .lbl{font-size:0}#snd .lbl::after{content:'Tap for sound';font-size:10px}}
#snd:hover{color:var(--ink)}
#snd .on{display:none}#snd[aria-pressed=true] .on{display:inline}#snd[aria-pressed=true] .off{display:none}


@media (max-width:700px){
  header nav{gap:16px}.hud{display:none}
  #end{top:auto;bottom:calc(76px + env(safe-area-inset-bottom));transform:translateY(12px)}
  #end::before{content:'';position:absolute;inset:-28vh -16px -120px;z-index:-1;background:linear-gradient(transparent,rgba(0,0,0,.78) 38%);pointer-events:none}
  .btn{padding:14px 10px;font-size:14px;white-space:nowrap}
  #end.on{transform:none}
  #credits dl{grid-template-columns:1fr;gap:4px}#credits dt,#credits dd{text-align:center}#credits dd{margin-bottom:14px}
}