/* ============================================================================
   The Slop Index — shared design system.  Implements DESIGN.md, which is derived
   from the Slashy brand kit (Confident Cobalt #4457C4 / Bruised Charcoal #2D2B36 /
   off-white, Geist + Libertinus Serif). No red/terracotta anywhere: blue is the brand.
   ========================================================================== */

/* signature display face — self-hosted, not off the Google shelf. Used for headings site-wide. */
@font-face{font-family:'Cabinet Grotesk';src:url('/fonts/cabinet-grotesk.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --display:'Cabinet Grotesk','Geist',system-ui,sans-serif;
  /* grounds */
  --bg:#F4F3F1; --card:#FFFFFF; --surface:#EFEEEB; --surface-2:#F7F6F4;
  /* ink — Bruised Charcoal family + brand greys */
  --ink:#2D2B36; --ink-2:#3F3D47; --body:#565B64; --muted:#706D79; --faint:#9A97A1;
  /* lines */
  --line:#E6E6E6; --divider:#EDEDEC; --dark:#2D2B36;
  /* Confident Cobalt — THE accent + blue shades (data-viz) */
  --blue:#4457C4; --blue-press:#3A49A8; --blue-soft:#8EA1E2; --blue-pale:#DAE2FD;
  --blue-tint:#EEF1FB; --blue-line:#CFD8F5;
  /* secondary (the only other hues) */
  --mint:#A2DBD5; --mint-ink:#3E7C74; --periwinkle:#B6C5F4;
  --purple:#917ED6; --purple-ink:#6A55B8; --purple-tint:rgba(145,126,214,.13); --purple-line:#D9D2F1;
  /* type */
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Libertinus Serif',Georgia,'Times New Roman',serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --maxw:1060px;
  --shadow-sm:0 1px 2px rgba(45,43,54,.05);
  --shadow-md:0 6px 20px rgba(45,43,54,.07);
  --shadow-lg:0 20px 48px rgba(45,43,54,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--bg);color:var(--body);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E")}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.02em;text-wrap:balance;margin:0;font-weight:800}
a{color:var(--ink);text-decoration:none}
p{margin:0}
img,svg{max-width:100%}
::selection{background:var(--blue-tint);color:var(--blue-press)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px}

/* ---------- kickers / eyebrows ---------- */
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--muted);font-weight:500}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}

/* ---------- top nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,250,249,.82);
  backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:62px;
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand .mark{width:22px;height:22px;display:block;flex:0 0 auto}
.brand .wm{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:4px}
/* active state from the type itself (weight + ink), not an underline-reveal or a dot */
.nav-links a{font-size:14px;font-weight:450;color:var(--muted);padding:8px 11px;border-radius:8px;
  transition:color .14s;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink);font-weight:600}
.nav-links a.gh{color:var(--muted)}
.nav-cta{display:inline-flex;align-items:center;gap:7px;background:var(--dark);color:#fff;
  font-size:13.5px;font-weight:550;padding:9px 16px;border-radius:8px;margin-left:8px;transition:background .15s}
.nav-cta:hover{background:#3b3944}
/* beat `.nav-links a` (higher specificity) so the button text stays white (Slashy CTA = charcoal) */
.nav-links a.nav-cta,.nav-links a.nav-cta:hover{color:#fff}
@media(max-width:720px){
  .nav-in{height:56px;gap:8px}
  .brand .wm{font-size:15px}
  .nav-links a{padding:10px 8px;font-size:13px}
  .nav-links a.gh{display:none}
  .nav-cta{padding:10px 14px}
}
@media(max-width:460px){ .nav-links a{padding:10px 6px} }

/* ---------- buttons ---------- */
/* buttons: one clear action, no glow, no hover-boop. state changes by fill only.
   colour + no-underline are !important so a page's link styles can never make a button unreadable. */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--dark);color:#fff!important;border:1px solid var(--dark);
  border-radius:10px;padding:13px 24px;font-family:var(--sans);font-size:15px;font-weight:550;
  cursor:pointer;text-decoration:none!important;transition:background .15s,color .15s,border-color .15s;min-height:44px}
.btn:hover{background:#3b3944}
.btn.ghost{background:transparent;color:var(--ink)!important;border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink);background:transparent}
.btn.sm{padding:9px 16px;font-size:13.5px;border-radius:8px;min-height:0}
.btn .arr{transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.btn:hover .arr{transform:translate(2px,-2px)}

/* shared editorial text link — cobalt, underline, opacity hover */
.textlink{font-size:15px;font-weight:600;color:var(--blue);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px;transition:opacity .14s}
.textlink:hover{opacity:.66}

/* ---------- generic cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px}

/* ---------- live indicator (plain, not a pill chip) ---------- */
.livepill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
/* static mark, no pulsing glow ring (that ring is a slop tell) */
.dot{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:0 0 auto}

/* ---------- shared stat band: borderless blocks under a hairline, not cards ---------- */
.band{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
@media(max-width:680px){.band{grid-template-columns:1fr;gap:22px}}
.scard{border-top:1px solid var(--ink);padding:14px 0 0;text-align:left;position:relative}
.scard .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--muted);
  display:flex;align-items:center;gap:7px}
.scard .v{font-family:var(--display);font-size:27px;font-weight:700;color:var(--ink);margin-top:10px;letter-spacing:-.01em;line-height:1.05}
.scard .d{font-size:13px;color:var(--muted);margin-top:6px}
.scard.top .v{color:var(--blue)}
.scard.hot .v{color:var(--purple-ink)}
.scard.live .k::after{content:'live';font-family:var(--mono);font-size:10px;color:var(--blue);letter-spacing:.02em}

/* ---------- section scaffolding ---------- */
section{padding:52px 0}
.sec-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--muted);font-weight:500;margin-bottom:12px}
.sec-h{font-family:var(--display);font-size:clamp(27px,3.7vw,40px);font-weight:700;letter-spacing:-.015em;line-height:1.05;margin:0 0 10px}
.sec-sub{font-size:15.5px;color:var(--muted);max-width:640px;margin:0;line-height:1.55}
.rule{height:1px;background:var(--divider);border:none;margin:0}

/* ---------- footer (Slashy-branded) ---------- */
.foot{border-top:1px solid var(--line);background:var(--surface-2);margin-top:20px}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:50px 24px 42px;
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px}
.foot-brand .b{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.foot-brand .mark{width:24px;height:24px}
.foot-brand .wm{font-size:16px;font-weight:700;color:var(--ink)}
.foot-brand p{font-size:13px;color:var(--muted);line-height:1.6;max-width:330px}
.foot-brand p a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.foot-brand .social{display:flex;gap:18px;margin:18px 0 0}
.foot-brand .social a{color:var(--muted);display:inline-flex;transition:color .14s}
.foot-brand .social a:hover{color:var(--blue)}
.foot-brand .social svg{width:18px;height:18px;display:block;fill:currentColor}
.foot-brand .copy{font-size:12px;color:var(--faint);margin-top:20px;max-width:none}
.foot-col h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin:0 0 12px}
.foot-col a{display:block;width:fit-content;font-size:13.5px;color:var(--body);padding:3px 0;position:relative;transition:color .14s}
.foot-col a::after{content:'';position:absolute;left:0;bottom:1px;height:1.5px;width:0;background:var(--blue);border-radius:1px;transition:width .22s ease}
.foot-col a:hover{color:var(--ink)}
.foot-col a:hover::after{width:100%}
.foot-legal{max-width:var(--maxw);margin:0 auto;padding:0 24px 40px;
  font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.9}
.foot-legal a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
@media(max-width:680px){.foot-in{grid-template-columns:1fr 1fr;gap:26px}.foot-brand{grid-column:1/-1}}

/* ---------- Slashy pull-quote (Libertinus Serif — the one sanctioned serif use) ---------- */
.pquote{border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);padding:44px 0;margin:8px 0}
.pquote blockquote{margin:0;max-width:820px;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(24px,3.4vw,35px);line-height:1.26;color:var(--ink);letter-spacing:-.005em}
.pquote cite{display:block;margin-top:18px;font-family:var(--mono);font-style:normal;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}