/* Late-night dispatch: design/locked-direction-home.png. Tokens first; see design/system.md. */
:root{
  --night:#0b0f17; --panel:#121826; --panel-2:#182033; --rule:#263049;
  --ink:#e9edf5; --dim:#9aa5ba; --sodium:#ffb21a; --sodium-ink:#1a1204; --alert:#ff3b30;
  --chyron:"Barlow Condensed", "Arial Narrow", sans-serif; --mono:"IBM Plex Mono", ui-monospace, monospace;
  --body:"IBM Plex Sans", system-ui, sans-serif; --gutter:16px;
  --edge:max(var(--gutter), calc((100vw - 1180px) / 2 + var(--gutter)));
}
*{box-sizing:border-box} html{background:var(--night);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.45 var(--body);background:var(--night)}
a{color:inherit} img{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.station{position:sticky;top:0;z-index:5;background:var(--night);border-bottom:1px solid var(--rule)}
.bar{display:flex;gap:12px;align-items:center;padding:10px var(--edge)}
.brand{display:flex;align-items:center;gap:8px;font:800 20px/1 var(--chyron);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--alert);box-shadow:0 0 0 3px rgba(255,59,48,.18)}
.search{margin-left:auto;flex:1;max-width:320px}
.find{display:none;margin-left:auto;width:40px;height:40px;place-items:center;border:1px solid var(--rule);border-radius:2px}
.find svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2}
@media (max-width:600px){.search{display:none}.find{display:grid}}
.search input{width:100%;background:var(--panel);border:1px solid var(--rule);color:var(--ink);font:13px var(--mono);padding:8px 10px;border-radius:2px}
.search input:focus{outline:2px solid var(--sodium);outline-offset:-1px}
.tabs{display:flex;padding:0 var(--edge)}
.tabs a{font:600 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:var(--dim);padding:10px 12px 11px;border-bottom:3px solid transparent}
.tabs a:first-child{padding-left:0}
.tabs a[aria-current]{color:var(--sodium);border-color:var(--sodium)}

.chips{display:flex;gap:6px;overflow-x:auto;padding:12px var(--edge);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
@media (max-width:899px){.chips{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:48px}}
.chips a{flex:none;font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;color:var(--ink);border:1px solid var(--rule);padding:8px 10px;border-radius:2px}
.chips a[aria-current]{background:var(--sodium);color:var(--sodium-ink);border-color:var(--sodium)}

.board,.watch,.text{max-width:1180px;margin:0 auto;padding:0 var(--gutter) 40px}
.slug{padding:4px 0 14px}
.slug h1{font:800 30px/1.05 var(--chyron);text-transform:uppercase;letter-spacing:.01em;margin:0 0 6px}
.slug p{margin:0;color:var(--dim);font-size:14px}
.slug a{color:var(--sodium)}

/* Top story + rundown: the broadcast's lead and its run sheet */
.top{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.top{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}}
.rows{display:grid;gap:0;border-top:1px solid var(--rule)}
.grid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.also{font:800 22px/1 var(--chyron);text-transform:uppercase;margin:34px 0 14px;padding-top:14px;border-top:3px solid var(--sodium);display:inline-block}

.clip{position:relative;background:var(--panel)}
.shot{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#000}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.shot:hover img{transform:scale(1.03)}
.shot iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;left:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:var(--sodium);display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.play svg{width:20px;height:20px;fill:var(--sodium-ink);margin-left:2px}
.len,.rank{position:absolute;font:600 12px/1 var(--mono);padding:4px 6px;background:rgba(5,8,13,.85)}
.len{right:8px;bottom:8px}
.rank{left:0;top:0;background:var(--sodium);color:var(--sodium-ink);font:800 20px/1 var(--chyron);padding:6px 10px}
.chyron{padding:12px 14px 0}
.cat{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sodium)}
.chyron h2,.chyron h3,.chyron h1{margin:6px 0 0;font:700 20px/1.18 var(--chyron);letter-spacing:.005em}
.chyron a{text-decoration:none}
.chyron a:hover{color:var(--sodium)}
.log{margin:0;padding:8px 14px 14px;font:12px/1.4 var(--mono);color:var(--dim)}
.log a{color:var(--ink)}

/* The lead: a full broadcast frame with a real lower-third chyron over the picture */
.clip.lead{background:none}
.clip.lead .shot{border:1px solid var(--rule)}
.clip.lead .chyron{margin:-34px 14px 0;position:relative;padding:0;background:var(--night);border-left:6px solid var(--alert)}
.clip.lead .cat{background:var(--alert);color:#fff;padding:6px 8px;letter-spacing:.08em}
.clip.lead h2{margin:0;padding:10px 14px 12px;font-size:30px;line-height:1.05;text-transform:uppercase;border-top:2px solid var(--sodium)}
.clip.lead .log{padding:10px 0 0}
.clip.lead .play{width:56px;height:56px;left:auto;right:14px;top:14px;bottom:auto}
.clip.lead .play svg{width:28px;height:28px}
.clip.lead .len{top:auto}

/* Rundown rows: small picture left, title right */
.clip.row{display:grid;grid-template-columns:132px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;background:none;border-bottom:1px solid var(--rule);padding:12px 0}
.clip.row .shot{grid-row:1/3}
.clip.row .chyron{padding:0}
.clip.row h3{font-size:18px}
.clip.row .log{padding:4px 0 0}
.clip.row .play{width:28px;height:28px;left:6px;bottom:6px}
.clip.row .play svg{width:14px;height:14px}
.clip.row .rank{font-size:15px;padding:4px 7px}
.clip.row .len{display:none}
@media (min-width:900px){.clip.row{grid-template-columns:168px minmax(0,1fr)}}

.watch{padding-top:14px}
.player{position:relative;aspect-ratio:16/9;background:#000;max-width:960px}
.player.vertical{aspect-ratio:9/16;max-width:min(420px,100%);max-height:78vh;margin:0 auto}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.chyron.big{padding:0;max-width:960px;margin-top:-1px;background:var(--night);border-left:6px solid var(--alert)}
.chyron.big .cat{background:var(--alert);color:#fff;padding:6px 8px}
.chyron.big h1{margin:0;padding:10px 14px 12px;font-size:28px;line-height:1.08;text-transform:uppercase;border-top:2px solid var(--sodium)}
.watch>.log{padding:10px 0 0;max-width:960px}
.watch>.log a:last-child{color:var(--sodium)}

.text{max-width:720px;padding-top:18px}
.text h1{font:800 32px/1.05 var(--chyron);text-transform:uppercase}
.text h3{font:700 20px/1.2 var(--chyron);text-transform:uppercase;margin:24px 0 4px;color:var(--sodium)}
.text a{color:var(--sodium)}
.roster{list-style:none;padding:0;margin:0}
.roster li{padding:10px 0;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px}
.roster span{color:var(--dim);font:12px var(--mono);text-align:right}
.more,.empty{color:var(--dim)} .more a,.empty a{color:var(--sodium)}

.foot{border-top:1px solid var(--rule);padding:20px var(--gutter) 40px;color:var(--dim);font-size:12px;max-width:1180px;margin:0 auto}
.foot a{color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:2px solid var(--sodium);outline-offset:2px}
body{font-size:16px}
.slug p,.foot p{max-width:70ch}
.bigsearch{display:flex;gap:8px}
.bigsearch input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--rule);color:var(--ink);font:16px var(--mono);padding:12px}
.bigsearch button{background:var(--sodium);color:var(--sodium-ink);border:0;font:700 16px var(--chyron);text-transform:uppercase;padding:0 18px}

/* Round 3 (judge): secondary titles in the sans, clamped; brighter metadata; wire strip */
.chyron h3{font:600 17px/1.3 var(--body);letter-spacing:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.clip.row h3{font-size:16px}
.log{color:#b9c2d3;font-size:12.5px}
.log a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--rule)}
.tile .play,.clip.row .play{width:32px;height:32px;left:auto;right:8px;bottom:8px}
.tile .play svg,.clip.row .play svg{width:16px;height:16px}
.tile .len{right:48px}
.clip.row .play{right:6px;bottom:6px}
@media (max-width:600px){.clip.lead h2{font-size:23px;padding:8px 12px 10px}.clip.lead .chyron{margin:-26px 10px 0}}
.wire{display:flex;gap:18px;overflow-x:auto;white-space:nowrap;padding:8px var(--edge);background:var(--panel);border-bottom:1px solid var(--rule);
  font:12px/1 var(--mono);color:#b9c2d3;scrollbar-width:none}
.wire::-webkit-scrollbar{display:none}
.wire span+span::before{content:"/";color:var(--rule);margin-right:18px}
.wire .live{color:var(--alert);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.wire .live+span::before{content:none}
@media (max-width:899px){.chips{-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}}

/* Round 4: row metadata on two lines on phones; quieter lead bracket on phones; bigger desktop metadata */
.nums{white-space:nowrap}
@media (max-width:899px){.clip.row .log a{display:block;width:max-content;max-width:100%;margin-bottom:3px}.clip.row .sep{display:none}}
@media (max-width:600px){.clip.lead .chyron{margin:-22px 6px 0;border-left-width:4px}.clip.lead h2{font-size:22px}}
@media (min-width:900px){.log{font-size:13.5px}.cat{font-size:12px}}
.tile .cat{color:var(--dim)}
/* Phone category strip: chips are a scroll row with a visible arrow cue */
@media (max-width:899px){
  .chips{-webkit-mask-image:none;mask-image:none;padding-right:var(--gutter);scroll-snap-type:x proximity}
  .chips a{scroll-snap-align:start}
  .chipwrap{position:relative}
  .chipwrap::after{content:"\2192";position:absolute;right:0;top:0;bottom:0;width:44px;display:grid;place-items:center;
    background:linear-gradient(90deg,transparent,var(--night) 55%);color:var(--sodium);font:700 18px var(--mono);pointer-events:none}
}

/* Brand: five stars, the top wanted level and the top rating */
.brand{text-transform:none;letter-spacing:.01em;font-size:22px}
.stars{color:var(--sodium);font-size:11px;letter-spacing:1px;line-height:1}

/* Gear guides (no players on these pages; affiliate links allowed) */
.kicker{font:12px var(--mono);color:var(--dim);margin:0}
.guide h2{font:800 24px/1.1 var(--chyron);text-transform:uppercase;margin:34px 0 8px;padding-top:12px;border-top:3px solid var(--sodium);display:inline-block}
.guide p,.gear p{max-width:68ch}
.disclose{font-size:13px;color:var(--dim);border-left:3px solid var(--rule);padding-left:12px}
.product{background:var(--panel);padding:16px 16px 6px;margin:16px 0;border-left:4px solid var(--sodium)}
.product h3{margin:2px 0 6px;color:var(--ink);font:700 22px/1.15 var(--chyron);text-transform:none}
.pick{margin:0;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sodium)}
.specs{margin:8px 0;padding-left:18px;color:#c9d0dc;font-size:14px}
.buys{display:flex;flex-wrap:wrap;gap:8px}
.buy{display:inline-block;background:var(--sodium);color:var(--sodium-ink)!important;text-decoration:none;font:700 15px/1 var(--chyron);text-transform:uppercase;letter-spacing:.03em;padding:10px 14px}
.steps li{margin:6px 0}
.sources,.guides{padding-left:18px;font-size:14px}
.gearcard{background:var(--panel);padding:16px;margin:16px 0;border-left:4px solid var(--sodium)}
.gearcard h2{margin:0 0 8px;font:800 24px/1.1 var(--chyron);text-transform:uppercase}
.gearcard h2 a{text-decoration:none;color:var(--ink)}
.gearcard ul{padding-left:18px;font-size:14px}
.slug .about{color:var(--ink);font-size:15px;margin:0 0 6px;max-width:70ch}