@layer base, legacy, system;
/* BreakingOnX design tokens. The only file allowed to declare raw spacing pixels. */
:root {
  /* Colour */
  --bg: #0b0d11;
  --bg-elev: #10141b;
  --surface: #151a23;
  --surface-2: #1b212c;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.16);
  --text: #eef1f5;
  --text-2: #9aa3b2;
  --text-3: #6d7584;
  --gold: #e8b84a;
  --gold-soft: #f3d48a;
  --gold-dim: rgba(232,184,74,.15);
  --teal: #3ecfbf;
  --teal-dim: rgba(62,207,191,.14);
  --rose: #e87a72;
  --rose-dim: rgba(232,122,114,.14);
  --amber: #e89a3c;
  --amber-soft: #f3c48a;
  --amber-dim: rgba(232,154,60,.18);
  --blue: #7aa6ff;
  --blue-dim: rgba(122,166,255,.14);
  --ad-bg: #1c222c;
  --ad-fg: #6d7584;
  --btn-on-gold: #1a1406;
  --btn-secondary-bg: rgba(255,255,255,.03);
  --btn-secondary-border: rgba(255,255,255,.14);

  /* Spacing scale (4px base) */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* Gutter + container */
  --gutter: clamp(16px, 4vw, 32px);
  --max: 1200px;

  /* Component padding */
  --pad-card: var(--space-16);
  --pad-hero: var(--space-24);
  --pad-panel: var(--space-16);
  --pad-hero-b: var(--space-16);
  --pad-article: var(--space-24);
  --article-measure: 68ch;
  --headline-measure: 24ch;
  --know-gap: var(--space-8);
  --know-num-gap: var(--space-8);
  --pad-bar-y: var(--space-12);
  --pad-bar-x: var(--space-16);
  --pad-bar: var(--pad-bar-y) var(--pad-bar-x);
  --pad-catchup: var(--space-12) var(--space-16);
  --grid-gap: var(--space-12);
  --layout-gap: var(--space-24);
  --sidebar-w: 312px;
  --card-stack-gap: var(--space-16);

  /* Buttons — crisp, Linear/Stripe-like. Visual size, not hit area. */
  --btn-h-sm: 32px;
  --btn-h-md: 36px;
  --btn-px: 14px;
  --btn-font: var(--fs-14);
  --btn-font-sm: var(--fs-13);
  --btn-fw: 600;
  --btn-ls: 0;
  --btn-icon-gap: var(--space-6);
  --btn-radius: var(--radius-8);
  --btn-radius-sm: var(--radius-6);
  --btn-transition: 150ms;
  --focus-ring: 2px;
  --focus-offset: 2px;
  --tap: 44px;

  /* Field matches md button */
  --field-h: var(--btn-h-md);
  --field-radius: var(--radius-8);


  /* Type scale (v2, DESIGN.md › Type). Every font-size is one of these. "h" = half px. */
  --fs-9h: 9.5px;
  --fs-10: 10px;
  --fs-10h: 10.5px;
  --fs-11: 11px;
  --fs-11h: 11.5px;
  --fs-12: 12px;
  --fs-12h: 12.5px;
  --fs-13: 13px;
  --fs-13h: 13.5px;
  --fs-14: 14px;
  --fs-14h: 14.5px;
  --fs-15: 15px;
  --fs-15h: 15.5px;
  --fs-16: 16px;
  --fs-16h: 16.5px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-display: clamp(1.7rem, 4.4vw, 2.7rem);
  --fs-title: clamp(1.35rem, 3vw, 2.15rem);
  --fs-subtitle: clamp(1.15rem, 2.2vw, 1.4rem);
  --leading-none: 1;

  /* Radius scale */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-full: 99px;
  --radius-circle: 50%;


  /* Motion (v2) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-fast: 220ms;
  --motion-med: 360ms;
  --motion-slow: 520ms;
  --reveal-delay: 0ms;
  --bar-delay: 0ms;
  --race-delay: 0ms;

  /* Chip (v2 filter chip: fully rounded, dark fill, hairline, count in mono) */
  /* Component padding (home-v2 / jensen-v3, on the 2px grid). DESIGN.md › Components */
  --pad-tile: var(--space-14) var(--space-16) var(--space-14);        /* story card, since-last-visit */
  --pad-hub: var(--space-16) var(--space-16) var(--space-14);         /* topic hub card */
  --pad-box: var(--space-18) var(--space-18) var(--space-16);         /* newsletter, tag-us, archive, advertise */
  --pad-hero-card: var(--space-22) var(--space-22) var(--space-18);   /* home hero cards */
  --pad-hero-card-sm: var(--space-18) var(--space-16) var(--space-16);/* hero cards and story hero on phones */
  --pad-story-hero: var(--space-28) var(--space-28) var(--space-24);  /* story hero (desktop) */
  --pad-story-panel: var(--space-16) var(--space-16) var(--space-12); /* chart, race, timeline panels */
  --pad-stat: var(--space-12) var(--space-12) var(--space-10);        /* hero stat cell */
  --pad-offer: var(--space-12);                                       /* advertise offer */
  --pad-race-row: var(--space-10) var(--space-4);                     /* who-reported-first row */
  --pad-status: var(--space-4) var(--space-10) var(--space-4) var(--space-8); /* LIVE / DEVELOPING badge */
  --pad-pill: var(--space-6) var(--space-10);                         /* Follow pill */
  --pad-auth: var(--space-6) var(--space-12);                         /* header Sign up / Log in */
  --pad-auth-sm: var(--space-6) var(--space-10);
  --pad-action: var(--space-10) var(--space-14);                      /* gold action: Subscribe, Search, Copy */
  /* Tag (category) and field: exact v2 component padding */
  --tag-py: 3px;
  --tag-px: 7px;
  --field-py: 9px;
  --field-px: 11px;
  --chip-py: 6px;
  --chip-px: 11px;
  --chip-fs: var(--fs-12);
  --chip-radius: var(--radius-full);
  --chip-gap: var(--space-6);
  --chip-row-h: 31px;           /* one chip row: reserved height of a collapsed .chip-bar */
  --chip-count-gap: var(--space-4);

  /* Radii family */
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-card: var(--radius-12);
  --radius-input: var(--radius-8);
  --radius-seg: var(--radius-8);
  --radius-seg-item: var(--radius-6);
  --seg-pad: var(--space-2);
  --seg-gap: var(--space-2);
  --radius-badge: var(--radius-6);
  --radius: var(--radius-card);
  --radius-sm: var(--radius-8);

  /* Badges */
  --badge-h: 22px;
  --badge-radius: var(--radius-6);
  --badge-font: var(--fs-11);

  /* Vertical rhythm (DESIGN.md › Rhythm). The only vertical spacings allowed
     between blocks. Nothing on a page may leave a vertical gap > --max-vgap. */
  --rhythm-section: var(--space-16);
  --rhythm-block: var(--space-12);
  --rhythm-stack: var(--space-8);
  --rhythm-hair: var(--space-4);
  --pad-modal: var(--space-24);
  --pad-modal-sm: var(--space-20);
  --modal-w: 420px;
  /* Control detailing: one control height in the header, glyph size per control size,
     input icon geometry. DESIGN.md › Baseline detailing */
  --ctl-h: 36px;                 /* header icon buttons, Sign up / Log in, header search */
  --icon-glyph-sm: 16px;         /* in 32px controls */
  --icon-glyph-md: 18px;         /* in 36px controls */
  --icon-glyph-lg: 20px;         /* in 40px controls */
  --input-icon: 16px;            /* magnifier inside a field */
  --input-icon-inset: 12px;      /* icon left edge from the field edge */
  --input-icon-pad: 36px;        /* text start: inset + icon + 8 */
  --menu-w: 248px;
  --ava-lg: 56px;      /* contributor avatar */
  --bar-h: 8px;        /* progress bar */
  --share-w: 420px;    /* share card badge */
  --stat-min: 120px;   /* contributor stat cell */
  --sponsor-h: 168px;  /* legacy card height; banners use the size tokens below, only when filled */
  --sp-pick-min: 240px; /* self-serve catalog pick card */
  --sponsor-line-max: 50%; /* leftover; title-row banners use their IAB/custom box */
  /* Banner boxes: applied only when a unit is filled, so an empty hook reserves no space. */
  --sp-300-250-w: 300px; --sp-300-250-h: 250px;
  --sp-336-280-w: 336px; --sp-336-280-h: 280px;
  --sp-970-90-w: 970px; --sp-970-90-h: 90px;
  --sp-728-90-w: 728px; --sp-728-90-h: 90px;
  --sp-320-100-w: 320px; --sp-320-100-h: 100px;
  --sp-320-50-w: 320px; --sp-320-50-h: 50px;
  --sp-234-60-w: 234px; --sp-234-60-h: 60px;
  --sp-600-100-w: 600px; --sp-600-100-h: 100px;
  --sp-banner-bp: 900px; /* swap desktop/mobile creatives; matches the story sidebar collapse */
  --lh-flush: 0; /* flush boxes (banner links, no descender gap) */
  --preview-light-bg: #f4f1ea; /* live booking preview, light theme */
  --preview-light-fg: #1a1406;
  --panel-w: 480px;    /* narrow single-card page */
  --menu-item-h: 32px;
  --strip-chip-max: 360px;       /* followed-story chip max width */
  --dot: 7px;                    /* status dot */
  --hero-aside-w: clamp(260px, 30%, 340px);   /* story hero stat column */
  --max-vgap: 48px;

  /* Section rhythm */
  --section-gap: var(--rhythm-section);
  --heading-gap: var(--space-12);
  --stack-kicker: var(--space-12);
  --stack-title: var(--space-8);
  --stack-dek: var(--space-16);
  --stack-broke: var(--space-16);

  /* Type */
  --font: "Segoe UI", "Helvetica Neue", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --text-xs: var(--fs-11);
  --text-sm: var(--fs-13);
  --text-md: var(--fs-15);
  --text-lg: var(--fs-16);
  --text-xl: var(--fs-24);
  --text-2xl: var(--fs-32);
  --text-3xl: clamp(2rem, 4vw, 2.75rem);
  --card-title: var(--fs-16);
  --card-body: var(--fs-14);
  --leading-snug: 1.3;
  --leading-xs: 1.35;
  --leading-sm: 1.45;
  --leading-md: 1.5;
  --leading-lg: 1.4;
  --leading-xl: 1.3;
  --leading-2xl: 1.2;
  --leading-3xl: 1.15;

  /* Icons + brand */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --header-h: 68px;
  --lockup-h: 30px;
  --mark-h: 28px;
  --footer-lockup-h: 22px;
  --ticker-h: 40px;
  --ticker-gap: var(--space-16);
  --ticker-item-gap: var(--space-12);
  --rf-rank: 24px;
  --timeline-gap: var(--space-12);
  --tl-rail-w: 2px;
  --tl-node: 10px;
  --tl-rail-inset: var(--space-16);
  --tl-time-min: 4.75rem;
  --chart-h: 220px;
  --chart-h-sm: 160px;
  --seg-h: var(--btn-h-sm);
  --seg-fw: 500;
  --search-row-h: 52px;
  --cn-clamp: 3;
  --avatar-size: 36px;
  --avatar-gap: var(--space-12);

  --shadow: 0 1px 0 rgba(255,255,255,.04), 0 12px 32px rgba(0,0,0,.28);
  --header-h-scrolled: 56px;
  --lockup-h-scrolled: 24px;
  color-scheme: dark;


  /* Avatar palette: 12 hue steps, class .av-0 … .av-11 */
  --avatar-0: hsl(15, 38%, 36%);
  --avatar-1: hsl(45, 38%, 36%);
  --avatar-2: hsl(75, 38%, 36%);
  --avatar-3: hsl(105, 38%, 36%);
  --avatar-4: hsl(135, 38%, 36%);
  --avatar-5: hsl(165, 38%, 36%);
  --avatar-6: hsl(195, 38%, 36%);
  --avatar-7: hsl(225, 38%, 36%);
  --avatar-8: hsl(255, 38%, 36%);
  --avatar-9: hsl(285, 38%, 36%);
  --avatar-10: hsl(315, 38%, 36%);
  --avatar-11: hsl(345, 38%, 36%);
  /* Colour literals hoisted from component CSS (tokenize_css.py) */
  --black: #000000;
  --black-a14: rgba(0,0,0,0.14);
  --black-a22: rgba(0,0,0,0.22);
  --black-a35: rgba(0,0,0,0.35);
  --black-a55: rgba(0,0,0,0.55);
  --gold-a0: rgba(232,184,74,0);
  --gold-a09: rgba(232,184,74,0.09);
  --gold-a40: rgba(232,184,74,0.4);
  --gold-a55: rgba(232,184,74,0.55);
  --gold-a70: rgba(232,184,74,0.7);
  --gold-deep: #c9a227;
  --grey-a04: rgba(127,127,127,0.04);
  --ink-a035: rgba(20,18,14,0.035);
  --scrim-a72: rgba(6,8,12,0.72);
  --teal-a06: rgba(62,207,191,0.06);
  --white: #ffffff;
  --white-a05: rgba(255,255,255,0.05);
}
[data-theme="light"] {
  --bg: #f2f0ea;
  --bg-elev: #faf9f6;
  --surface: #ffffff;
  --surface-2: #f6f4ef;
  --line: rgba(20,18,14,.1);
  --line-strong: rgba(20,18,14,.18);
  --text: #16181d;
  --text-2: #5c6370;
  --text-3: #838a96;
  --gold: #b8860b;
  --gold-soft: #8a6708;
  --gold-dim: rgba(184,134,11,.12);
  --teal: #0f7f74;
  --teal-dim: rgba(15,127,116,.12);
  --rose: #c14a42;
  --rose-dim: rgba(193,74,66,.12);
  --amber: #c67a14;
  --amber-soft: #8a5a0e;
  --amber-dim: rgba(198,122,20,.14);
  --blue: #2f5fbf;
  --blue-dim: rgba(47,95,191,.12);
  --ad-bg: #e6e3db;
  --ad-fg: #6a6f78;
  --btn-on-gold: #1a1406;
  --btn-secondary-bg: rgba(20,18,14,.03);
  --btn-secondary-border: rgba(20,18,14,.16);
  --shadow: 0 1px 0 rgba(20,18,14,.04), 0 10px 28px rgba(20,18,14,.06);
  color-scheme: light;
}
@media (max-width: 1023px) {
  :root { --header-h: 64px; --lockup-h: 28px; }
}
@media (max-width: 480px) {
  :root {
    --header-h: 56px;
    --lockup-h: 24px;
    --section-gap: var(--space-24);
    --ticker-h: 36px;
    --pad-card: var(--space-12);
    --pad-article: var(--space-16);
    --pad-hero: var(--space-16);
    --pad-panel: var(--space-12);
    --grid-gap: var(--space-12);
    --timeline-gap: var(--space-8);
    --tl-rail-inset: var(--space-12);
    --chart-h: var(--chart-h-sm);
  }
}

/* The one content shell. */
.container {
  width: 100%;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
}