/* GameSlate brand layer (Oct 2026). Shared by every page.
   Amber on ink. Display + scores: Barlow Condensed (the broadcast board face,
   self-hosted, SIL OFL 1.1, see /brand/fonts/OFL.txt). Body: Barlow.
   Page-specific layout stays inline on the home page and the mockup page;
   article pages use only this file. */

@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;
  src:url(/brand/fonts/barlow-condensed-semibold.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;
  src:url(/brand/fonts/barlow-condensed-bold.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;
  src:url(/brand/fonts/barlow-condensed-extrabold.woff2) format("woff2")}

:root{
  --gs-ink:#0E1114; --gs-ink2:#0A0C0F; --gs-panel:#151A1F; --gs-panel2:#1B2127;
  --gs-rule:#252C33; --gs-rule2:#36404A;
  --gs-amber:#F5A623; --gs-amber-hi:#FFC95C; --gs-amber-glow:rgba(245,166,35,.45);
  --gs-ghost:#2A2416; --gs-white:#FFFFFF; --gs-text:#EEF1F4; --gs-body:#C6CDD4;
  --gs-slate:#9AA3AD; --gs-dim:#6E7781; --gs-green:#2FC48A; --gs-red:#FF5D52;
  --gs-display:"Barlow Condensed","Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  --gs-sans:Barlow,"Helvetica Neue",Arial,system-ui,sans-serif;
  --gs-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--gs-ink)}
body{margin:0;background:var(--gs-ink);color:var(--gs-body);
  font:400 17px/1.65 var(--gs-sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:rgba(245,166,35,.35);color:#fff}
a{color:var(--gs-white)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gs-amber);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* labels: Barlow Condensed SemiBold, caps, +20% tracking, with a lit segment tab */
.eyebrow{font:600 13px/1.3 var(--gs-display);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gs-slate)}
.eyebrow::before{content:"";display:inline-block;width:16px;height:4px;margin:0 10px 0 1px;
  vertical-align:.22em;background:var(--gs-amber);transform:skewX(-24deg);
  box-shadow:0 0 8px var(--gs-amber-glow)}

/* buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;
  border-radius:6px;cursor:pointer;font:700 15px/1 var(--gs-display);letter-spacing:.08em;
  text-transform:uppercase;padding:13px 22px;text-decoration:none;white-space:nowrap;
  transition:transform .18s ease,box-shadow .2s ease,background .18s ease,color .18s ease}
.pill.amber{background:var(--gs-amber);color:#1A1104;
  box-shadow:0 10px 30px -14px var(--gs-amber-glow)}
.pill.amber:hover{background:var(--gs-amber-hi);transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(255,201,92,.5),0 0 30px -4px var(--gs-amber-glow)}

/* nav + the Scoreboard S */
nav{position:sticky;top:0;z-index:60;background:rgba(14,17,20,.86);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--gs-rule)}
nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:72px;
  max-width:1200px}
.brand{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0;padding:6px 0;
  text-decoration:none}
.brand .gs-logo{height:30px;width:auto}
.gs-logo{display:block;overflow:visible;--d0:.12s;--st:.085s;--wd:.6s}
/* load: the five segments light in the order you write an S, then the wordmark wipes in */
.gs-logo .on{animation:gs-lite .55s cubic-bezier(.3,.7,.2,1) calc(var(--d0) + var(--i)*var(--st)) backwards}
.gs-logo .wm{animation:gs-wipe .7s cubic-bezier(.6,0,.2,1) var(--wd) backwards}
/* hover: the digit re-lights, like a board refreshing (no glow on the mark itself) */
.brand:hover .gs-logo .on,.brand:focus-visible .gs-logo .on{
  animation:gs-relite .46s ease calc(var(--i)*.055s) both}
@keyframes gs-lite{0%{fill:#2A2416}38%{fill:#FFE3A8}100%{fill:#F5A623}}
@keyframes gs-relite{0%{fill:#F5A623}28%{fill:#3A3020}62%{fill:#FFE3A8}100%{fill:#F5A623}}
@keyframes gs-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* footer */
footer{border-top:1px solid var(--gs-rule);background:var(--gs-ink2);padding:30px 0 46px;
  font:600 12.5px/1.9 var(--gs-display);letter-spacing:.12em;text-transform:uppercase;
  color:var(--gs-dim)}
footer a{color:var(--gs-slate);text-decoration:none}
footer a:hover{color:var(--gs-amber)}
.fbrand{display:block;margin:0 0 16px;line-height:0;width:max-content}
.fbrand img{height:24px;width:auto;display:block}

/* ---------- long-form pages (guides, troubleshooting, 404) ---------- */
article{padding:64px 0 90px}
article .wrap{max-width:860px}
article p,article li{color:var(--gs-body);max-width:70ch;font-size:18px;line-height:1.7}
article li::marker{color:var(--gs-amber)}
article a{color:var(--gs-white);text-decoration:underline;text-decoration-color:rgba(245,166,35,.65);
  text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .15s ease}
article a:hover{color:var(--gs-amber-hi)}
article h1{font:800 clamp(38px,6.2vw,66px)/.96 var(--gs-display);text-transform:uppercase;
  letter-spacing:.004em;color:var(--gs-white);margin:16px 0 18px;text-wrap:balance}
article h1 em{font-style:normal;font-weight:700;color:var(--gs-slate)}
article h2{font:700 clamp(27px,3.4vw,34px)/1.05 var(--gs-display);text-transform:uppercase;
  letter-spacing:.02em;color:var(--gs-white);margin:56px 0 14px;text-wrap:balance}
article h2::before{content:"";display:block;width:26px;height:5px;margin:0 0 14px 2px;
  background:var(--gs-amber);transform:skewX(-24deg);box-shadow:0 0 10px var(--gs-amber-glow)}
article h3{font:600 20px/1.35 var(--gs-sans);color:var(--gs-white);margin:28px 0 8px}
article strong,article b{color:var(--gs-text)}
article .lede{font-size:20px;color:#DCE1E6}
article .byline{font:600 13px/1.4 var(--gs-display);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gs-slate);margin:0 0 24px}
article .card{background:var(--gs-panel);border-radius:10px;padding:24px 28px;margin:18px 0;
  box-shadow:inset 0 0 0 1px var(--gs-rule),inset 3px 0 0 var(--gs-amber)}
article .card .tag{font:600 12.5px/1.3 var(--gs-display);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gs-amber)}
article .card p{margin:10px 0 0}
article .cta{position:relative;overflow:hidden;background:var(--gs-panel);color:#fff;border-radius:12px;
  padding:34px;margin:56px 0 0;display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;box-shadow:inset 0 0 0 1px var(--gs-rule)}
article .cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 140% at 0% 100%,rgba(245,166,35,.16),transparent 60%)}
article .cta>*{position:relative}
article .cta h2{margin:0;color:#fff;font-size:30px}
article .cta h2::before{display:none}
article .cta p{color:var(--gs-slate);margin:6px 0 0;font-size:16px}
article .cta p a{color:var(--gs-amber-hi)}
article .cta .pill{text-decoration:none;color:#1A1104}
article .toc{background:var(--gs-panel);border-radius:10px;padding:20px 26px;margin:24px 0;
  box-shadow:inset 0 0 0 1px var(--gs-rule)}
article .toc ol{margin:10px 0 0;padding-left:22px}
article .toc li{margin:4px 0;font-size:16.5px}
article .src{font-size:15px;color:var(--gs-slate)}
article .src li{font-size:15px}
article .hub{display:grid;gap:12px;margin:28px 0}
article .hub a{display:block;background:var(--gs-panel);border-radius:10px;padding:20px 24px;
  text-decoration:none;box-shadow:inset 0 0 0 1px var(--gs-rule);
  transition:box-shadow .2s ease,transform .18s ease}
article .hub a b{display:block;font:700 23px/1.1 var(--gs-display);text-transform:uppercase;
  letter-spacing:.02em;color:#fff;margin-bottom:6px}
article .hub a span{color:var(--gs-slate);font-size:15.5px}
article .hub a:hover{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(245,166,35,.6),0 0 30px -10px var(--gs-amber-glow)}
article .tblwrap{overflow-x:auto;margin:22px 0;border-radius:10px;box-shadow:inset 0 0 0 1px var(--gs-rule)}
article table{border-collapse:collapse;width:100%;background:var(--gs-panel);font-size:15.5px;
  min-width:720px}
article th{font:600 12.5px/1.3 var(--gs-display);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gs-slate);text-align:left;padding:14px;border-bottom:1px solid var(--gs-rule2)}
article td{padding:13px 14px;border-bottom:1px solid var(--gs-rule);vertical-align:top;
  color:var(--gs-body)}
article tr:last-child td{border-bottom:0}
article td:first-child{font-weight:600;white-space:nowrap;color:#fff}
article .good{color:var(--gs-green);font-weight:600}
@media(max-width:640px){
  .wrap{padding:0 18px}
  nav .wrap{height:64px}
  .brand .gs-logo{height:26px}
  nav .pill{padding:11px 14px;font-size:13.5px}
  article{padding:44px 0 70px}
  article p,article li{font-size:17px}
  article .lede{font-size:18.5px}
  article .cta{padding:24px}
  article .card{padding:20px}
}
@media(max-width:360px){nav .pill{letter-spacing:.04em;padding:10px 11px}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}