/* gw-base.css: Gridiron & Wine design tokens + shared components (chrome v2).
   Loaded on every page. Tokens are --gw-* prefixed so they never collide with the
   per-page :root blocks older pages carry. Element resets apply only inside
   body.gw-page (pages built on this system); older pages keep their own styles.
   Dark only, matching the brand. */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/InterVariable.woff2') format('woff2-variations'),url('/fonts/InterVariable.woff2') format('woff2')}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  --gw-bg:#0a0505;
  --gw-bg-raised:#0f0707;
  --gw-surface:#150b0b;
  --gw-surface-2:#1c1010;
  --gw-line:#2c1b1b;
  --gw-line-strong:#422b2b;
  --gw-text:#f6f2ef;
  --gw-text-2:#cbc3bf;
  --gw-muted:#9a8e8a;
  --gw-faint:#6f6464;
  --gw-gold:#fbbf24;
  --gw-gold-soft:#fcd34d;
  --gw-gold-deep:#d4a017;
  --gw-wine:#621c2d;
  --gw-wine-bright:#9b2c43;
  --gw-green:#22c55e;
  --gw-green-soft:#4ade80;
  --gw-red:#ef4444;
  --gw-red-soft:#f87171;
  --gw-blue:#3f9ed9;
  --gw-grad-gold:linear-gradient(135deg,#fde68a 0%,#fbbf24 45%,#d4a017 100%);
  --gw-grad-brand:linear-gradient(135deg,#fcd34d 0%,#d4a017 45%,#7f1d1d 100%);
  --gw-grad-wine:radial-gradient(120% 80% at 50% 0%,rgba(98,28,45,.45) 0%,rgba(98,28,45,0) 65%);
  --gw-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --gw-r-sm:8px;
  --gw-r:12px;
  --gw-r-lg:18px;
  --gw-shadow:0 22px 60px rgba(0,0,0,.55);
  --gw-ring:0 0 0 2px #0a0505,0 0 0 4px #d4a017;
  --gw-max:1200px;
  --gw-gutter:24px;
  --gw-nav-h:64px;
}
@media (max-width:1023px){:root{--gw-nav-h:56px}}
@media (max-width:640px){:root{--gw-gutter:16px}}

/* ── base (pages built on this system only) ─────────────────────────────── */
body.gw-page{margin:0;background:var(--gw-bg);color:var(--gw-text);font-family:var(--gw-font);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding-top:var(--gw-nav-h)}
/* :where() keeps these resets at zero specificity so any component class wins */
:where(.gw-page) *,:where(.gw-page) *::before,:where(.gw-page) *::after{box-sizing:border-box}
:where(.gw-page) :where(h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote){margin:0}
:where(.gw-page) :where(ul,ol){padding:0}
:where(.gw-page) :where(img,svg){max-width:100%}
:where(.gw-page) :where(a){color:inherit;text-decoration:none}
:where(.gw-page) main{display:block;overflow-x:clip}
:where(.gw-page) :focus-visible{outline:2px solid var(--gw-gold-deep);outline-offset:3px;border-radius:4px}
.gw-page .gw-prose a,.gw-page .gw-link{color:var(--gw-gold-soft);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(252,211,77,.4)}
.gw-page .gw-prose a:hover,.gw-page .gw-link:hover{text-decoration-color:currentColor}

/* ── layout + type ──────────────────────────────────────────────────────── */
.gw-wrap{width:100%;max-width:var(--gw-max);margin:0 auto;padding:0 var(--gw-gutter)}
.gw-wrap--narrow{max-width:820px}
.gw-kicker{margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gw-gold)}
.gw-h1{font-size:clamp(34px,5.2vw,58px);font-weight:800;line-height:1.05;letter-spacing:-.03em;color:var(--gw-text)}
.gw-h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;line-height:1.12;letter-spacing:-.025em;color:var(--gw-text)}
.gw-h3{font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--gw-text)}
.gw-lede{margin-top:14px;max-width:640px;font-size:clamp(16px,1.6vw,18px);line-height:1.6;color:var(--gw-text-2)}
.gw-gold-text{background:var(--gw-grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gw-gold)}
.gw-fine{font-size:12px;line-height:1.55;color:var(--gw-faint)}
.gw-skip{position:absolute;left:12px;top:-80px;z-index:10001;padding:10px 14px;border-radius:8px;background:var(--gw-gold);color:#1a0d06!important;font-weight:700;text-decoration:none}
.gw-skip:focus{top:12px}
.gw-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── buttons (also used by the nav drawer on every page) ────────────────── */
.gw-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:10px;
  font-family:var(--gw-font);font-size:14.5px;font-weight:700;line-height:1;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;
  cursor:pointer;border:1px solid transparent;transition:filter .15s,border-color .15s,background-color .15s,color .15s}
.gw-btn--gold{background:var(--gw-grad-gold);color:#1a0d06!important;box-shadow:0 6px 24px rgba(212,160,23,.22)}
.gw-btn--gold:hover{filter:brightness(1.07)}
.gw-btn--ghost{background:rgba(255,255,255,.02);border-color:var(--gw-line-strong);color:var(--gw-text)!important}
.gw-btn--ghost:hover{border-color:rgba(212,160,23,.6);color:var(--gw-gold-soft)!important}
.gw-btn--quiet{min-height:auto;padding:6px 2px;background:none;border:0;color:var(--gw-text-2)!important;font-weight:600;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(203,195,191,.35)}
.gw-btn--quiet:hover{color:var(--gw-gold-soft)!important}
.gw-btn:focus-visible{outline:none;box-shadow:var(--gw-ring)}
.gw-btn[disabled]{opacity:.55;cursor:default;filter:none}

/* ── pills, badges, cards ───────────────────────────────────────────────── */
.gw-pill{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 16px;border-radius:999px;font-size:12.5px;font-weight:600;
  text-decoration:none;transition:filter .2s,transform .2s}
.gw-pill:hover{filter:brightness(1.08)}
.gw-pill--gold{color:#1c1408!important;background:var(--gw-grad-gold)}
.gw-pill--blue{color:#fff!important;background:var(--gw-blue)}
.gw-pill img{display:block;height:14px;width:auto}
.gw-badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gw-gold);border:1px solid rgba(212,160,23,.45);background:rgba(212,160,23,.08)}
.gw-badge--free{color:var(--gw-green-soft);border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.08)}
.gw-card{background:var(--gw-surface);border:1px solid var(--gw-line);border-radius:var(--gw-r-lg)}

/* ── social icon row (nav drawer + footer) ──────────────────────────────── */
.gw-social{display:flex;gap:8px;flex-wrap:wrap}
.gw-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--gw-line-strong);
  border-radius:10px;color:#a1a1aa;text-decoration:none;transition:color .15s,border-color .15s}
.gw-social a:hover{color:var(--gw-gold-soft);border-color:rgba(212,160,23,.5)}
.gw-social svg{width:16px;height:16px;display:block}

@media (prefers-reduced-motion:reduce){
  .gw-page *,.gw-page *::before,.gw-page *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}