/* Layered so the v2 component layer (components.css, unlayered) always wins. */
@layer system {
/* Design-system layer. Spacing uses tokens only. Loaded after site.css. */

/* ---- Global control reset: no native unstyled button/input/select ---- */
button,
[type="button"],
[type="submit"],
[type="reset"],
select,
input,
textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  margin: 0;
  box-sizing: border-box;
}
button,
[type="button"],
[type="submit"],
[type="reset"] {
  padding: 0 var(--btn-px);
  min-height: var(--seg-h);
  cursor: pointer;
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
  font-size: var(--btn-font-sm);
  font-weight: var(--seg-fw);
  border-radius: var(--btn-radius);
}
select,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--field-radius);
  color: var(--text);
  padding: 0 var(--space-12);
  min-height: var(--field-h);
}
input[type="checkbox"],
input[type="radio"] {
  width: var(--space-16);
  height: var(--space-16);
  min-height: 0;
  padding: 0;
  accent-color: var(--gold);
  border: 1px solid var(--line);
  background: var(--surface);
}

/* ---- One container; everything else is full-bleed background ---- */
.site-header,
.ticker-wrap,
.page-foot {
  width: 100%;
}

/* Neutralize older competing shells so they cannot drift from the header.
   Do NOT zero padding on boxed components (.card, .advertise, .nl, .panel). */
.site-header .inner,
.wrap,
#main,
.page-foot,
.legal,
.archive-page,
.layout {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
#main > .container.legal,
#main > .container.archive-page {
  padding-top: var(--space-32);
  padding-bottom: var(--space-96);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

/* ---- Header ---- */
.site-header {
  height: var(--header-h);
  min-height: var(--header-h);
  max-height: var(--header-h);
  transition: height 180ms ease;
}
.site-header.is-scrolled {
  height: var(--header-h-scrolled);
  min-height: var(--header-h-scrolled);
  max-height: var(--header-h-scrolled);
}
.site-header .container.header-inner,
.header-inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: var(--space-12);
}
.brand {
  display: flex;
  align-items: center;
  flex: none;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
  gap: 0;
}
.brand:hover { text-decoration: none; color: var(--text); }
.brand svg.brand-lockup {
  display: block;
  height: var(--lockup-h);
  width: auto;
  color: var(--text);
  transition: height 180ms ease;
}
.brand svg.brand-mark {
  display: none;
  height: var(--mark-h);
  width: auto;
  color: var(--text);
}
@media (max-width: 480px) {
  .site-header .brand svg.brand-lockup { display: none !important; }
  .site-header .brand svg.brand-mark { display: block !important; height: var(--mark-h); }
}
@media (min-width: 481px) {
  .site-header .brand svg.brand-mark { display: none !important; }
  .site-header .brand svg.brand-lockup { display: block !important; }
}
.site-header.is-scrolled .brand svg.brand-lockup { height: var(--lockup-h-scrolled); }
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header.is-scrolled, .brand svg.brand-lockup { transition: none; }
}
.header-meta {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: var(--space-8);
  flex: none;
}
.auth-slot {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
@media (max-width: 320px) {
  .login-btn { display: none; }
}

/* ---- Buttons ---- */
.btn,
:where(button, a).btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-icon-gap);
  height: var(--btn-h-md);
  padding: 0 var(--btn-px);
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--btn-font);
  font-weight: var(--btn-fw);
  letter-spacing: var(--btn-ls);
  line-height: var(--leading-none);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  position: relative;
  box-sizing: border-box;
  transition:
    background-color var(--btn-transition) ease,
    border-color var(--btn-transition) ease,
    color var(--btn-transition) ease,
    filter var(--btn-transition) ease,
    transform var(--btn-transition) ease;
}
.btn-sm { height: var(--btn-h-sm); font-size: var(--btn-font-sm); border-radius: var(--btn-radius-sm); padding: 0 var(--space-12); }
.btn-md { height: var(--btn-h-md); }
.btn-icon {
  width: var(--btn-h-md);
  height: var(--btn-h-md);
  padding: 0;
  flex: none;
}
.btn-icon.btn-sm { width: var(--btn-h-sm); height: var(--btn-h-sm); }
.btn-icon svg { width: var(--icon-sm); height: var(--icon-sm); display: block; }
.btn-primary {
  background: var(--gold);
  color: var(--btn-on-gold);
  border-color: var(--gold);
  box-shadow: none;
}
.btn-primary:hover { filter: brightness(1.08); text-decoration: none; color: var(--btn-on-gold); }
.btn-secondary {
  background: var(--btn-secondary-bg);
  border: 1px solid var(--btn-secondary-border);
  color: var(--text);
  box-shadow: none;
}
.btn-secondary:hover { filter: brightness(1.08); background: var(--surface-2); text-decoration: none; color: var(--text); }
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:focus-visible {
  outline: var(--focus-ring) solid var(--gold);
  outline-offset: var(--focus-offset);
}
.btn:disabled,
.btn[disabled],
.btn.is-disabled { opacity: 0.45; pointer-events: none; }
@media (pointer: coarse) {
  .btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap);
    height: var(--tap);
    transform: translate(-50%, -50%);
  }
}
.btn-follow {
  flex: none;
  margin-left: auto;
}
.btn-follow.is-on,
.btn-follow.is-following {
  background: var(--gold-dim);
  border-color: color-mix(in srgb, var(--gold) 35%, transparent);
  color: var(--gold-soft);
  box-shadow: none;
}
.btn-follow .btn-icon-check,
.btn-follow .lbl-on,
.btn-follow .lbl-unfollow { display: none; }
.btn-follow .btn-icon-bell,
.btn-follow .lbl-off { display: block; }
.btn-follow .lbl-off,
.btn-follow .lbl-on,
.btn-follow .lbl-unfollow { display: none; }
.btn-follow:not(.is-on):not(.is-following) .lbl-off { display: inline; }
.btn-follow:not(.is-on):not(.is-following) .btn-icon-bell { display: block; }
.btn-follow.is-on .lbl-on,
.btn-follow.is-following .lbl-on { display: inline; }
.btn-follow.is-on .btn-icon-check,
.btn-follow.is-following .btn-icon-check { display: block; }
.btn-follow.is-on .btn-icon-bell,
.btn-follow.is-following .btn-icon-bell,
.btn-follow.is-on .lbl-off,
.btn-follow.is-following .lbl-off { display: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-follow.is-on:hover .lbl-on,
  .btn-follow.is-following:hover .lbl-on { display: none; }
  .btn-follow.is-on:hover .lbl-unfollow,
  .btn-follow.is-following:hover .lbl-unfollow { display: inline; }
}
.btn-follow svg,
.btn-follow .btn-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Map legacy header buttons onto the system */
.site-header .auth-btn,
.site-header .icon-btn,
#theme-toggle,
.search-toggle {
  /* visual size comes from .btn; keep 36px header height */
  min-height: 0;
  min-width: 0;
}

/* ---- Field ---- */
.field,
input.field,
select.field,
.field-input,
.nl-row input[type="email"],
.auth-form input[type="email"],
.auth-form input[type="text"],
.search-archive input,
.search-box input,
.settings-modal select,
.settings-modal input {
  appearance: none;
  height: var(--field-h);
  padding: 0 var(--space-12);
  border-radius: var(--field-radius);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--btn-font);
  line-height: var(--leading-none);
  box-sizing: border-box;
  outline: none;
  width: 100%;
  min-width: 0;
  box-shadow: none;
}
.nl-row input[type="email"] { width: auto; flex: 1; }
.field::placeholder,
input.field::placeholder,
.nl-row input::placeholder,
.auth-form input::placeholder,
.search-archive input::placeholder,
.search-box input::placeholder {
  color: var(--text-3);
  opacity: 1;
}
.field:focus-visible,
input.field:focus-visible,
select.field:focus-visible,
.nl-row input[type="email"]:focus-visible,
.auth-form input:focus-visible,
.search-archive input:focus-visible,
.search-box input:focus-visible,
.settings-modal select:focus-visible {
  outline: var(--focus-ring) solid var(--gold);
  outline-offset: var(--focus-offset);
  border-color: var(--gold);
  box-shadow: none;
}

/* ---- Segmented control ---- */
.seg,
.nl-toggle,
.filters,
.filters.seg,
.seg-scroll {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: nowrap;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-seg);
  padding: var(--seg-pad);
  gap: var(--seg-gap);
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar,
.filters::-webkit-scrollbar,
.seg-scroll::-webkit-scrollbar { display: none; }
.filters,
.filters.seg,
.seg-scroll {
  display: flex;
  width: 100%;
  mask-image: linear-gradient(90deg, var(--black) 0, var(--black) calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, var(--black) 0, var(--black) calc(100% - 28px), transparent 100%);
}
.filters.is-no-overflow,
.seg-scroll.is-no-overflow {
  mask-image: none;
  -webkit-mask-image: none;
}
.seg-item,
.seg .btn,
.btn.seg-item,
.btn.chip,
.nl-toggle label,
.filters.seg button,
.filters button,
.filters .seg-item,
.filters .chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: var(--seg-h);
  min-height: var(--seg-h);
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-seg-item);
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--btn-font-sm);
  font-weight: var(--seg-fw);
  letter-spacing: 0;
  line-height: var(--leading-none);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  position: relative;
  flex: none;
}
.seg-item:hover,
.filters .seg-item:hover,
.filters .chip:hover {
  background: var(--surface);
  color: var(--text);
}
.seg-item.is-on,
.seg-item[aria-pressed="true"],
.seg-item[aria-selected="true"],
.nl-toggle label:has(input:checked),
.filters.seg button.is-on,
.filters .seg-item.is-on,
.filters .chip.is-on,
.filters .chip[aria-pressed="true"] {
  background: var(--gold-dim);
  color: var(--gold-soft);
  box-shadow: none;
  border: 0;
  font-weight: 600;
}
[data-theme="light"] .seg-item.is-on,
[data-theme="light"] .seg-item[aria-pressed="true"],
[data-theme="light"] .seg-item[aria-selected="true"],
[data-theme="light"] .nl-toggle label:has(input:checked),
[data-theme="light"] .filters .seg-item.is-on,
[data-theme="light"] .filters .chip.is-on,
[data-theme="light"] .filters .chip[aria-pressed="true"] {
  background: var(--text);
  color: var(--bg);
}
.nl-toggle input { appearance: none; position: absolute; opacity: 0; width: 0; height: 0; min-height: 0; padding: 0; border: 0; }
.seg-count,
.seg-item .n,
.filters .n,
.filters .seg-count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-3);
  line-height: var(--leading-none);
}
.seg-item.is-on .seg-count,
[data-theme="light"] .seg-item.is-on .seg-count {
  color: inherit;
  opacity: 0.75;
}
.seg-item:focus-visible,
.nl-toggle label:has(input:focus-visible),
.filters.seg button:focus-visible,
.filters .seg-item:focus-visible {
  outline: var(--focus-ring) solid var(--gold);
  outline-offset: var(--focus-offset);
}

/* ---- Badge ---- */
.badge,
.status,
.pill,
.qualify,
.broke-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: var(--badge-h);
  padding: 0 var(--space-8);
  border-radius: var(--badge-radius);
  font-family: inherit;
  font-size: var(--badge-font);
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: var(--leading-none);
  white-space: nowrap;
  text-transform: uppercase;
  box-sizing: border-box;
  border: 0;
}
.badge-live,
.status.live {
  background: var(--rose-dim);
  color: var(--rose);
}
.badge-tracked,
.status.tracked {
  background: var(--surface-2);
  color: var(--text-2);
}
.badge-confirmed,
.pill.confirmed {
  background: var(--teal-dim);
  color: var(--teal);
}
.badge-claim,
.pill.claim {
  background: var(--rose-dim);
  color: var(--rose);
  opacity: 0.85;
}
.badge-outlet,
.qualify.outlet,
.pill.outlet {
  background: var(--surface-2);
  color: var(--text-3);
}
.badge-broke,
.broke-pill {
  background: var(--gold-dim);
  color: var(--gold-soft);
  font-family: inherit;
  letter-spacing: 0.02em;
}
.badge .dot,
.status .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: currentColor;
  flex: none;
}
.cat-label,
span.cat {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  background: transparent;
  border: 0;
  padding: 0;
  height: auto;
  border-radius: 0;
}

/* ---- Card (every boxed block) ---- */
.card,
.hero-card,
.story-card,
.hub-card,
.recent-card,
.your-card,
.archive-card,
.advertise,
.nl,
.cta,
.panel,
.catchup,
.metric,
.related {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--pad-card);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  gap: var(--heading-gap);
  box-shadow: none;
}
.card-title,
.card > h3,
.card > h2,
.archive-card > h2,
.archive-card > h3,
.advertise > h2,
.advertise > h3,
.nl > h3,
.panel-h h2,
.catchup .sec-h {
  margin: 0;
  font-size: var(--card-title);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: var(--leading-lg);
  color: var(--text);
  text-transform: none;
}
.catchup .sec-h { display: block; }
.catchup .sec-h::after { display: none; }
.card-body,
.card > p,
.archive-card > p,
.advertise > p,
.nl > .lede,
.nl > p.lede {
  margin: 0;
  font-size: var(--card-body);
  line-height: var(--leading-md);
  color: var(--text-2);
}
.card-actions,
.nl-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin: 0;
}
.card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--card-stack-gap);
  margin-top: var(--section-gap);
  width: 100%;
}
.card-stack > .card,
.card-stack > .archive-card,
.card-stack > .advertise,
.card-stack > .nl,
.card-stack > .cta {
  margin: 0;
}
.catchup { padding: var(--pad-catchup); }

/* Kill leftover zero-padding on advertise from earlier gutters pass */
#main .advertise,
#main .archive-card,
#main .nl,
#main .cta,
#main .panel,
#main .card {
  padding: var(--pad-card);
  max-width: none;
}

/* Hero / story card internal stack */
.heroes {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: start;
  gap: var(--grid-gap);
  margin: 0;
  width: 100%;
}
.hero-card.primary { grid-row: auto; align-self: start; }
.hero-card .kicker,
.story-card .kicker,
.hero .kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  margin: 0 0 var(--stack-kicker);
}
.hero-card h2,
.story-card h2,
.hero-card.primary h2,
.hero-card.secondary h2 {
  margin: 0 0 var(--stack-title);
}
.hero-card .lede,
.story-card .lede,
.hero-card.primary .lede,
.hero-card.secondary .lede,
.hero .lede {
  margin: 0 0 var(--stack-dek);
}
.hero-card .broke,
.story-card .broke {
  margin: 0 0 var(--stack-broke);
}
.hero-card .stats-bar,
.story-card .stats-bar { margin: 0; }

.story-grid,
.hub-row,
.recent-grid,
.your-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--grid-gap);
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Stats bar ---- */
.stats-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12) var(--space-16);
  padding: var(--pad-bar);
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-8);
  background: var(--surface);
}
.stats-bar-item,
.stats-bar .updated,
.kicker .updated {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--text-3);
  min-width: 0;
}

/* ---- Ticker ---- */
.ticker-wrap {
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
}
.ticker.container {
  display: flex;
  align-items: center;
  height: var(--ticker-h);
  min-height: var(--ticker-h);
  max-height: var(--ticker-h);
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
  gap: 0;
}
.ticker-label {
  position: relative;
  z-index: 3;
  left: auto;
  top: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: var(--ticker-h);
  margin: 0;
  padding: 0 var(--ticker-gap) 0 0;
  background: var(--bg-elev);
  box-shadow: none;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-3);
  white-space: nowrap;
  line-height: var(--leading-none);
}
.ticker-label .dot { flex: none; }
.ticker-label::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: var(--ticker-gap);
  background: linear-gradient(90deg, var(--bg-elev) 0%, var(--bg-elev) 35%, transparent 100%);
  pointer-events: none;
  z-index: 3;
}
.ticker-track {
  flex: 1;
  min-width: 0;
  height: var(--ticker-h);
  overflow: hidden;
  position: relative;
  mask-image: none;
  -webkit-mask-image: none;
}
.ticker-move {
  display: flex;
  align-items: center;
  height: var(--ticker-h);
  line-height: var(--leading-none);
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: var(--ticker-h);
  line-height: var(--leading-none);
  gap: var(--ticker-item-gap);
  padding: 0 var(--ticker-gap);
  margin: 0;
  border: 0;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--text-sm);
}
.ticker-item + .ticker-item {
  border-left: 1px solid var(--line);
  padding-left: var(--ticker-gap);
  margin-left: 0;
}
.ticker-item .ticker-ex,
.ticker-item .ticker-when,
.ticker-item .when,
.ticker-item .ex,
.ticker-item > span,
.ticker-item > time {
  line-height: var(--leading-none);
  padding: 0;
  margin: 0;
  white-space: nowrap;
}
.ticker-item .ticker-when,
.ticker-item .when,
time.ticker-when {
  color: var(--text-3);
  flex: none;
  min-width: 16ch;
}

/* ---- Sections ---- */
#main > .container > .sec,
#main > .container > section,
#main > .container > .catchup,
#main > .container > .your-stories,
#main > .container > .analytics,
#main > .container > .layout,
#main > .container > .hero,
#main > .container > .card-stack {
  margin-top: var(--section-gap);
  margin-bottom: 0;
}
#main > .container > :first-child { margin-top: var(--space-24); }
.sec-h {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  gap: var(--space-12);
  flex-wrap: nowrap;
  margin: 0 0 var(--heading-gap);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 650;
}
.sec-h::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
  min-width: var(--space-24);
  align-self: center;
}
.sec-h .sub {
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ---- Local times ---- */
time {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  display: inline-block;
  line-height: var(--leading-none);
  vertical-align: baseline;
}
time[data-fmt="abs"],
time[data-rel="1"]:not(.rf-time):not(.when) { min-width: 22ch; }
time.ticker-when { min-width: 16ch; color: var(--text-3); }
time.when {
  min-width: 12ch;
  text-align: right;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
time.rf-time,
.rf-meta time {
  min-width: 0;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  display: block;
  text-align: inherit;
}

/* ---- Timeline post cards ---- */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--timeline-gap);
  margin: 0;
  padding: 0;
  width: 100%;
}
.timeline > .day-h {
  margin: var(--space-8) 0 0;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--text-3);
  letter-spacing: 0;
  text-transform: none;
}
.timeline > .day-h:first-child { margin-top: 0; }
.timeline > .card {
  margin: 0;
  padding: var(--pad-card);
  gap: var(--heading-gap);
}
.timeline .card-top {
  display: grid;
  grid-template-columns: var(--avatar-size) minmax(0, 1fr) auto;
  gap: var(--avatar-gap);
  align-items: start;
  min-width: 0;
}
.avatar,
.timeline .avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  flex: none;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: var(--leading-none);
}
.timeline .who { min-width: 0; }
.timeline .who .nm {
  font-weight: 600;
  color: var(--text);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline .who .hd {
  font-size: var(--text-xs);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline .card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
}
.timeline .excerpt { margin: 0; color: var(--text); line-height: var(--leading-md); }
.timeline a.view,
.timeline a.btn-ghost.view {
  margin-left: auto;
}

/* ---- Who reported first ---- */
.reported-first,
ol.reported-first,
.race-list.reported-first {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.rf-row,
.reported-first > li {
  display: grid;
  grid-template-columns: var(--rf-rank) minmax(0, 1fr) auto;
  gap: var(--space-12);
  align-items: start;
  padding: var(--space-12) 0;
  border-top: 1px solid var(--line);
  min-width: 0;
  position: static;
  overflow: visible;
}
.rf-row:first-child,
.reported-first > li:first-child { border-top: 0; padding-top: 0; }
.rf-rank {
  width: var(--rf-rank);
  text-align: center;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-3);
  line-height: var(--badge-h);
}
.rf-row.is-first .rf-rank { color: var(--gold); }
.rf-main {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  overflow: hidden;
}
.rf-name,
.rf-name a {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  line-height: var(--leading-sm);
}
.rf-name a:hover { text-decoration: underline; color: var(--text); }
.rf-handle {
  color: var(--text-3);
  font-size: var(--text-sm);
  white-space: nowrap;
  flex: none;
}
.rf-main .badge { flex: none; }
.rf-meta {
  text-align: right;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: var(--leading-xl);
  flex: none;
  min-width: 0;
}
.rf-delta {
  display: block;
  color: var(--text-3);
  font-size: var(--text-xs);
  margin-top: var(--space-4);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.reported-first .track,
.rf-row .track { display: none; }
@media (max-width: 420px) {
  .rf-row,
  .reported-first > li {
    grid-template-columns: var(--rf-rank) minmax(0, 1fr);
  }
  .rf-rank { grid-row: 1 / span 2; }
  .rf-main { grid-column: 2; }
  .rf-meta {
    grid-column: 2;
    text-align: left;
    margin-top: var(--space-4);
  }
}

/* ---- Footer ---- */
.page-foot { padding-top: 0; padding-bottom: 0; }
.page-foot > .container {
  padding-top: var(--space-32);
  padding-bottom: var(--space-24);
}
.page-foot .brand-foot {
  margin-top: var(--space-24);
  display: flex;
  align-items: center;
}
.page-foot .brand-foot svg.brand-lockup {
  display: block;
  width: auto;
  height: var(--footer-lockup-h);
  flex: none;
}

@media (max-width: 800px) {
  .heroes { grid-template-columns: 1fr; }
  .hero-card.primary { grid-row: auto; }
}
@media (max-width: 900px) {
  .site-header .container,
  .ticker.container,
  #main > .container,
  .page-foot > .container {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

/* Styleguide */
.styleguide { display: flex; flex-direction: column; gap: var(--section-gap); padding-top: var(--space-32); padding-bottom: var(--space-96); }
.styleguide .sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }
.styleguide .sg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--grid-gap); }


/* ---- Story article (hero on story & hub pages) ---- */
.article,
section.hero.article,
#main .article,
#main .hero.article {
  padding: var(--pad-article);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.article .kicker,
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  margin: 0 0 var(--space-12);
  width: 100%;
}
.article h1 {
  margin: 0 0 var(--space-12);
  max-width: var(--headline-measure);
  text-wrap: balance;
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
  letter-spacing: -0.03em;
  font-weight: 680;
  color: var(--text);
}
.article .lede,
.article .know,
.article .silence,
.article p,
.article li,
.article .know ol,
.article .know li > div {
  max-width: var(--article-measure);
}
.article .lede {
  margin: 0 0 var(--space-24);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--text-2);
}
.article .know {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.article .know h2,
.article .know .sec-label {
  margin: 0 0 var(--space-12);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 650;
  max-width: none;
}
.article .know ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--know-gap);
  width: 100%;
}
.article .know li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--know-num-gap);
  align-items: first baseline;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--text);
  max-width: var(--article-measure);
}
.article .know .n {
  width: auto;
  height: auto;
  min-width: 1.25em;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  display: inline;
  place-items: unset;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: inherit;
  font-weight: 650;
  line-height: inherit;
  color: var(--text-3);
  text-align: right;
}
.article .know li > div {
  min-width: 0;
  /* wrapped lines hang-indent automatically from the grid */
}
.article .silence {
  margin: var(--space-16) 0 0;
  max-width: var(--article-measure);
  padding: 0 0 0 var(--space-12);
  border-left: 2px solid var(--line-strong);
  background: transparent;
  font-size: var(--text-sm);
  color: var(--text-2);
}


/* ---- Meta row: left group + Follow pinned right ---- */
.kicker,
.article-meta,
.hero-card .kicker,
.story-card .kicker,
.article .kicker,
.hub-card .kicker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-12);
  row-gap: var(--space-8);
  align-items: center;
  width: 100%;
  margin: 0 0 var(--stack-kicker);
}
.meta-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
}
.kicker > .follow-btn,
.kicker > .btn-follow,
.article-meta > .follow-btn,
.article-meta > .btn-follow {
  grid-column: 2;
  grid-row: 1;
  margin-left: 0;
  justify-self: end;
  align-self: center;
  flex: none;
  z-index: 1;
}
@media (max-width: 480px) {
  .kicker > .follow-btn,
  .kicker > .btn-follow,
  .article-meta > .follow-btn {
    align-self: start; /* top-right when the left group wraps */
  }
}
.follow-modal .auth-card {
  padding: var(--pad-card);
  max-width: 22rem;
}
.follow-modal .seg { margin: 0 0 var(--space-12); }
.follow-modal .auth-form { display: flex; flex-direction: column; gap: var(--space-12); }


/* ---- Day / section labels (not shouty all-caps tracking) ---- */
.sec-label,
.day-h,
.tl-day .sec-label,
.timeline .day-h {
  margin: 0;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
  line-height: var(--leading-sm);
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
}
.day-h::after,
.tl-day .sec-label::after,
.sec-h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  min-width: var(--space-16);
}

/* ---- Post volume chart ---- */
.chart-panel,
.chart-panel.card,
.chart-panel.panel {
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8) var(--space-12);
}
.chart-head .card-title { margin: 0; }
.chart-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  margin-left: auto;
}
.chart-peak-stat {
  font-size: var(--text-sm);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.chart-body { position: relative; width: 100%; min-width: 0; }
.chart-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.chart-svg {
  display: block;
  width: 100%;
  height: var(--chart-h);
  overflow: visible;
}
.chart-grid,
.chart-svg .grid {
  stroke: var(--line);
  stroke-width: 1;
  fill: none;
}
.chart-axis,
.chart-xtick,
.chart-svg .axis,
.chart-svg .day-label {
  fill: var(--text-3);
  font-family: inherit;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.chart-area { fill: url(#vg-c); }
.chart-line {
  stroke: var(--gold);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-bar,
.chart-svg .bar,
.chart-svg .vol-bar {
  fill: var(--gold);
  opacity: 0.9;
}
.chart-bar.is-outlier { fill: var(--gold-soft); }
.chart-hit {
  fill: transparent;
  stroke: none;
  cursor: pointer;
  outline: none;
}
.chart-hit.is-on,
.chart-bar.is-on {
  fill: var(--gold-soft);
  opacity: 1;
}
.chart-hit.is-on { fill: var(--gold); opacity: 0.35; }
.chart-peak-dot { fill: var(--gold); stroke: var(--bg); stroke-width: 1.5; }
.chart-peak-lab,
.chart-first-lab,
.chart-outlier-lab {
  fill: var(--gold-soft);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 650;
}
.chart-first { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.chart-first-dot { fill: var(--text-3); }
.chart-cross { stroke: var(--gold); stroke-width: 1; opacity: 0.55; pointer-events: none; }
.chart-tooltip {
  position: absolute;
  left: var(--space-12);
  top: var(--space-8);
  z-index: 2;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--btn-radius);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  max-width: calc(100% - var(--space-24));
}
.chart-empty {
  padding: var(--space-24) var(--space-16);
  text-align: center;
  color: var(--text-2);
  font-size: var(--text-sm);
}
.chart-empty .sub { color: var(--text-3); margin: var(--space-8) 0 0; }
.chart-how {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-3);
}
.chart-how summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-3);
  list-style: none;
}
.chart-how summary::-webkit-details-marker { display: none; }
.chart-how p { margin: var(--space-8) 0 0; max-width: var(--article-measure); }
@media (prefers-reduced-motion: no-preference) {
  .chart-line.is-enter { animation: chart-draw 700ms ease both; }
  .chart-area.is-enter { animation: chart-fade 700ms ease both; }
}
@keyframes chart-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes chart-draw { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .chart-line.is-enter, .chart-area.is-enter, .tl-node { animation: none; }
}

/* ---- Timeline thread ---- */
.timeline-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  margin: var(--space-12) 0 0;
}
.timeline-tools .filters { flex: 1 1 12rem; }
.timeline-order { flex: none; }
.timeline,
#timeline.timeline {
  --tl-col: calc(var(--tl-rail-inset) + var(--tl-node));
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--timeline-gap);
  margin: var(--space-16) 0 0;
  padding: 0;
  width: 100%;
  isolation: isolate;
}
.tl-rail {
  position: absolute;
  left: calc(var(--tl-rail-inset) + var(--tl-node) / 2 - var(--tl-rail-w) / 2);
  top: 0;
  bottom: 0;
  width: var(--tl-rail-w);
  background: var(--line-strong);
  border-radius: var(--radius-2);
  z-index: 0;
  pointer-events: none;
}
.tl-latest {
  display: none;
  position: relative;
  z-index: 1;
  padding-left: calc(var(--tl-rail-inset) + var(--tl-node) + var(--space-12));
  font-size: var(--text-xs);
  font-weight: 650;
  color: var(--gold-soft);
  letter-spacing: 0;
  text-transform: none;
}
.timeline.is-newest .tl-latest { display: block; }
.tl-item {
  display: grid;
  grid-template-columns: var(--tl-col) minmax(var(--space-48), var(--tl-time-min)) minmax(0, 1fr);
  column-gap: var(--space-8);
  align-items: start;
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
}
.tl-node {
  width: var(--tl-node);
  height: var(--tl-node);
  margin: 0 0 0 var(--tl-rail-inset);
  border-radius: var(--radius-circle);
  background: var(--text-3);
  box-shadow: 0 0 0 3px var(--bg);
  flex: none;
  justify-self: start;
  align-self: start;
}
.tl-node.is-hot,
.tl-node.is-broke,
.tl-node.is-latest {
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--gold-dim);
}
.tl-node.is-claim { background: var(--rose); }
.tl-node.is-noted {
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--amber-dim);
}
.tl-node.is-noted.is-hot {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--amber-dim);
}
@media (prefers-reduced-motion: no-preference) {
  .tl-node { animation: tl-node-in 420ms ease both; }
}
@keyframes tl-node-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
.tl-chip,
.badge.badge-time,
time.tl-chip {
  justify-self: start;
  align-self: start;
  height: var(--badge-h);
  padding: 0 var(--space-8);
  border-radius: var(--radius-badge);
  background: var(--gold-dim);
  color: var(--gold-soft);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-item > .card {
  min-width: 0;
  margin: 0;
  padding: var(--pad-card);
}
.timeline .card-top {
  display: grid;
  grid-template-columns: var(--avatar-size) minmax(0, 1fr);
  gap: var(--avatar-gap);
  align-items: start;
  min-width: 0;
}
.timeline .when { display: none; } /* time lives on the rail chip */
.tl-gap,
.tl-day {
  display: grid;
  grid-template-columns: var(--tl-col) minmax(0, 1fr);
  column-gap: var(--space-8);
  align-items: center;
  position: relative;
  z-index: 1;
  min-height: var(--space-24);
}
.tl-gap-lab,
.tl-gap .sec-label {
  grid-column: 2;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--text-3);
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}
.timeline.is-newest .lab-oldest,
.timeline.is-oldest .lab-newest { display: none; }
.timeline.is-oldest .tl-latest { display: none; }
@media (max-width: 480px) {
  .timeline { --tl-rail-inset: var(--space-12); }
  .tl-item {
    grid-template-columns: var(--tl-col) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--space-8);
    row-gap: var(--space-8);
  }
  .tl-node { grid-column: 1; grid-row: 1; }
  .tl-chip { grid-column: 2; grid-row: 1; }
  .tl-item > .card { grid-column: 2; grid-row: 2; }
}

/* ---- Community Noted ---- */
.badge-noted {
  background: var(--amber-dim);
  color: var(--amber-soft);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  gap: var(--space-4);
}
.badge-noted .badge-icon { width: 12px; height: 12px; flex: none; }
.cn-box {
  margin: var(--space-12) 0 0;
  padding: var(--space-12);
  border-radius: var(--btn-radius);
  background: var(--amber-dim);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.cn-kicker {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 650;
  color: var(--amber-soft);
  letter-spacing: 0;
}
.cn-text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text);
  line-height: var(--leading-md);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cn-text.is-open {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.cn-more { align-self: start; }
.cn-view { align-self: start; }
.banner-noted {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-8) var(--space-12);
  margin: 0 0 var(--space-16);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-card);
  background: var(--amber-dim);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  max-width: var(--article-measure);
}
.banner-noted p { margin: 0; font-size: var(--text-sm); color: var(--text); }

/* Account menu buttons share the btn language */
.account-btn.btn { }
.account-menu .btn,
.account-menu .account-link,
.account-menu .account-logout {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  height: var(--btn-h-md);
  border-radius: var(--btn-radius-sm);
}


/* ============================================================
   Restore home-v2 / jensen-v3 visual language.
   Agreed overlays (gutters, follow, 8px chips, thread, notes,
   mark-only header) stay; everything else matches the mockups.
   ============================================================ */

/* Heroes: original gradient, grid texture, 1.55fr + span-2, size-to-content */
.heroes {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: var(--grid-gap);
  align-items: start;
  margin: var(--space-16) 0 var(--space-8);
}
.hero-card,
.hero-card.primary,
.hero-card.secondary,
.hero,
section.hero.article,
#main .article.hero,
#main .hero.article {
  position: relative;
  background:
    radial-gradient(1200px 280px at 10% -20%, var(--gold-a09), transparent 50%),
    radial-gradient(800px 240px at 100% 0%, var(--teal-a06), transparent 45%),
    var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-16);
  padding: var(--pad-hero) var(--pad-hero) var(--pad-hero-b, var(--pad-hero));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto;
  max-height: none;
  box-shadow: none;
  gap: 0;
}
.hero-card.primary {
  grid-row: 1 / span 2;
  align-self: start;
  height: auto;
}
.hero-card::before,
.hero::before,
.article.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, var(--black-a35), transparent 80%);
  pointer-events: none;
  z-index: 0;
}
.hero-card > *,
.hero > *,
.article.hero > * { position: relative; z-index: 1; }

.hero-top,
.story-card > .card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
  margin: 0 0 var(--space-8);
}
.hero-actions { display: flex; align-items: center; flex: none; margin-left: auto; }
.hero-top .kicker,
.hero-top .meta-left,
.story-card .card-top .kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  margin: 0;
}
.hero-top .follow-btn,
.hero-actions .follow-btn,
.story-card > .card-top > .follow-btn,
.article-meta > .follow-btn,
.kicker > .follow-btn {
  margin-left: auto;
  flex: none;
  justify-self: end;
}
.hero-card h2 {
  margin: 0 0 var(--space-8);
  font-size: var(--fs-title);
  line-height: var(--leading-3xl);
  letter-spacing: -0.03em;
  font-weight: 680;
}
.hero-card.secondary h2 {
  font-size: var(--fs-subtitle);
  margin-bottom: var(--space-8);
}
.hero-card h2 a,
.story-card h3 a { color: var(--text); text-decoration: none; }
.hero-card .lede,
.story-card .lede {
  margin: 0 0 var(--space-12);
  max-width: none;
  color: var(--text-2);
  font-size: var(--text-sm);
}
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin: 0 0 var(--space-12);
}
.hero-metrics .metric {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  padding: var(--space-12);
  min-width: 0;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  gap: var(--space-4);
}
.hero-foot,
.story-card .card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-top: auto;
}




/* Story grid: original 3-col, dense 14px cards */
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.story-card,
.story-card.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--pad-card);
  gap: var(--space-8);
  height: auto;
}
.story-card h3 {
  margin: 0 0 var(--space-8);
  font-size: var(--text-md);
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* Story page layout: main + 312px sidebar */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  gap: var(--layout-gap);
  align-items: start;
  margin-top: var(--space-8);
  width: 100%;
  max-width: none;
  padding: 0;
}
.sidebar { position: sticky; top: calc(var(--header-h) + var(--space-12)); }
.side-stack { display: flex; flex-direction: column; gap: var(--space-16); }
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; }
}

/* Panels: original 16px / 13px titles */
.panel,
.panel.card,
.chart-panel,
.timeline-panel,
.reported-first-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--pad-panel);
  margin: 0 0 var(--space-16);
  gap: var(--space-8);
  height: auto;
}
.panel-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
  margin: 0 0 var(--space-8);
}
.panel-h h2,
.panel-h .card-title,
.panel-h h3 {
  margin: 0;
  font-size: var(--fs-13);
  font-weight: 650;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
}
.panel-h p,
.caption {
  margin: 0;
  font-size: var(--fs-12);
  color: var(--text-3);
  line-height: var(--leading-lg);
}

/* Original bar chart colours — never gold area */
.chart-panel .chart-area,
.chart-panel .chart-line { display: none; }
.chart-svg { display: block; width: 100%; height: auto; }
.chart-svg .bar,
.chart-svg .vol-bar,
.chart-bar {
  fill: var(--blue);
  opacity: 0.78;
}
.chart-svg .bar.peak,
.chart-svg .vol-bar.peak { fill: var(--teal); opacity: 1; }
.chart-svg .bar.has-event,
.chart-svg .vol-bar.has-event { fill: var(--gold-soft); opacity: 0.95; }
.chart-svg .event-line { stroke: var(--gold); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.7; }
.chart-svg .event-label { fill: var(--gold-soft); font-family: var(--font); font-size: var(--fs-11); font-weight: 650; }
.chart-svg .axis,
.chart-svg .day-label { fill: var(--text-3); font-family: var(--mono); font-size: var(--fs-11); }
.chart-svg .grid { stroke: var(--line); stroke-width: 1; }
.chart-svg .night { fill: var(--grey-a04); }
[data-theme="light"] .chart-svg .night { fill: var(--ink-a035); }
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
  margin-top: var(--space-8);
  font-size: var(--fs-11);
  color: var(--text-2);
}
.legend span { display: inline-flex; align-items: center; gap: var(--space-8); }
.legend i {
  width: 8px; height: 8px; border-radius: var(--radius-circle);
  background: var(--gold); display: inline-block;
}
.legend i.peak { background: var(--teal); }
.legend i.vol { background: var(--blue); border-radius: var(--radius-2); }

/* Who reported first: original tracks, stack on narrow to avoid overlap */
.race-list,
ol.race-list,
ol.reported-first.race-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.race-item,
.reported-first .race-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: var(--space-8) var(--space-12);
  align-items: center;
  padding: var(--space-8) var(--space-4);
  border-top: 1px solid var(--line);
  position: static;
}
.race-item:first-child { border-top: 0; }
.race-pos {
  font-family: var(--mono);
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--text-3);
  text-align: center;
}
.race-item.first .race-pos,
.race-item.is-first .race-pos { color: var(--gold); }
.race-who { min-width: 0; }
.race-who .nm {
  font-weight: 650;
  font-size: var(--fs-14);
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  color: var(--text);
}
.race-who .nm a { color: var(--text); }
.race-who .hd { font-size: var(--fs-12); color: var(--text-3); }
.race-meta {
  text-align: right;
  font-family: var(--mono);
  font-size: var(--fs-12);
  color: var(--text-2);
  white-space: nowrap;
  min-width: 0;
}
.race-meta .gap,
.race-meta .rf-delta {
  display: block;
  color: var(--text-3);
  margin-top: var(--space-4);
}
.race-item.first .race-meta { color: var(--gold-soft); }
.broke-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-10);
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--btn-on-gold);
  background: var(--gold);
  padding: 0 var(--space-8);
  border-radius: var(--radius-2);
  border: 0;
  height: auto;
}
.track {
  grid-column: 2 / -1;
  height: 5px;
  background: var(--bg);
  border-radius: var(--radius-full);
  position: relative;
  margin: 0;
}
.track .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  border-radius: var(--radius-full);
}
.race-item:not(.first):not(.is-first) .track .fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 20%, transparent), var(--blue));
}
.track .knob {
  position: absolute; top: 50%; width: 9px; height: 9px;
  border-radius: var(--radius-circle); background: var(--gold);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--gold-dim);
}
.race-item:not(.first):not(.is-first) .track .knob {
  background: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
}
@media (max-width: 420px) {
  .race-item,
  .reported-first .race-item {
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }
  .race-meta {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    white-space: nowrap;
  }
  .track { grid-column: 2 / -1; grid-row: 3; }
  .hero-metrics { grid-template-columns: 1fr 1fr; }
  .story-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heroes { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .hero-card.primary { grid-row: auto; }
}

/* NL / advertise keep original density and MUST have padding (never flush) */
.nl, .advertise, .archive-card, .related {
  padding: var(--pad-panel);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: var(--ad-bg);
  color: var(--ad-fg);
  border-radius: var(--radius-card);
  border: 1px dashed var(--line-strong);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-16);
}

@media (max-width: 480px) {
  .hero-metrics { grid-template-columns: 1fr 1fr; }
  .story-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ---- Overlay search (command palette). Page behind never reflows. ---- */
html.search-lock, html.search-lock body {
  overflow: hidden;
}
#search-overlay,
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}
.search-overlay.is-open { pointer-events: auto; }
.search-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--black-a35);
}
.search-overlay.is-mobile .search-backdrop,
.search-overlay.is-open.is-mobile .search-backdrop { display: block; }
.search-overlay.is-open:not(.is-mobile) .search-backdrop {
  display: block;
  background: transparent;
}
.search-panel {
  position: absolute;
  z-index: 1;
  max-width: 560px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--btn-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.search-overlay.is-mobile .search-panel {
  inset: 0;
  max-width: none;
  max-height: none;
  width: 100% !important;
  left: 0 !important;
  top: 0 !important;
  border-radius: 0;
  border: 0;
}
.search-panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.search-ico { color: var(--text-3); flex: none; display: grid; place-items: center; }
.search-input,
.search-panel-head .field {
  flex: 1;
  min-width: 0;
  height: var(--field-h);
  border-radius: var(--field-radius);
}
.search-cancel { flex: none; display: none; }
.search-overlay.is-mobile .search-cancel { display: inline-flex; }
.search-panel-body {
  overflow-y: auto;
  max-height: calc(70vh - 60px);
  padding: var(--space-8) 0;
  -webkit-overflow-scrolling: touch;
}
.search-overlay.is-mobile .search-panel-body { max-height: none; flex: 1; }
.search-group { margin: 0 0 var(--space-12); }
.search-group-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.search-ul { list-style: none; margin: 0; padding: 0; }
.search-row,
a.search-row,
button.search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  height: var(--search-row-h);
  min-height: var(--search-row-h);
  max-height: var(--search-row-h);
  padding: 0 var(--space-16);
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.search-row:hover,
.search-row.is-active {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.search-row-main {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}
.search-row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: var(--text-sm);
}
.search-row-sub {
  flex: none;
  font-size: var(--text-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.search-row mark {
  background: var(--gold-dim);
  color: var(--gold-soft);
  font-weight: 700;
  padding: 0;
}
.search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: 0 var(--space-16);
}
.search-seeall,
a.search-seeall {
  display: flex;
  align-items: center;
  height: var(--search-row-h);
  padding: 0 var(--space-16);
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--gold-soft);
  text-decoration: none;
}
.search-seeall:hover { text-decoration: underline; }
.search-hint, .search-empty p {
  margin: 0;
  padding: var(--space-12) var(--space-16);
  color: var(--text-2);
  font-size: var(--text-sm);
}
.search-row.is-skel,
.search-skel .search-row {
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  border-radius: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .search-overlay.is-anim .search-panel {
    animation: search-in 150ms ease both;
  }
  .search-skel .search-row { animation: search-skel 1.1s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .search-overlay.is-anim .search-panel { animation: none; }
}
@keyframes search-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes search-skel {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
/* Kill the old mobile search that padded the header (that was the wobble). */
.site-header.search-open { padding-bottom: 0; }
.search-page { padding-top: var(--space-24); padding-bottom: var(--space-64); }
.search-page-h { margin: 0 0 var(--space-16); }

/* ---- Restore race tracks (earlier .reported-first .track { display:none } is more specific) ---- */
.race-item .track,
.race-list .track,
.reported-first .track,
ol.reported-first .track {
  display: block;
  grid-column: 2 / -1;
  height: 5px;
  background: var(--bg);
  border-radius: var(--radius-full);
  position: relative;
  margin: 0;
}

/* ---- Related card: do not inherit news-ticker or stretch to the story column ---- */
.sidebar,
.side-stack {
  align-self: start;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}
.related,
.nl,
.ad-slot,
.advertise {
  flex: none;
  height: auto;
  max-height: none;
  align-self: stretch;
}
.related a.aff {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  height: auto;
  min-height: 0;
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--line);
  border-radius: var(--btn-radius);
  background: var(--bg);
  color: inherit;
  text-decoration: none;
}
.related .aff-tag {
  display: block;
  flex: none;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: var(--space-8);
  overflow: visible;
  animation: none;
  mask-image: none;
  -webkit-mask-image: none;
  font-family: var(--mono);
  font-weight: 750;
  font-size: var(--fs-13);
  letter-spacing: 0.04em;
  background: var(--gold-dim);
  color: var(--gold-soft);
  border-radius: var(--radius-6);
  line-height: var(--leading-2xl);
}
.related .aff-body {
  min-width: 0;
  flex: 1 1 auto;
}
.related .aff-body strong {
  display: block;
  font-size: var(--fs-14);
  color: var(--text);
}
.related .aff-body span {
  display: block;
  font-size: var(--fs-12);
  color: var(--text-3);
  margin-top: 0;
  line-height: var(--leading-lg);
}

/* ---- Timeline tools must scroll, not widen the page ---- */
.timeline-tools {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.timeline-tools .filters,
.filters.seg,
.seg-scroll {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

/* ---- Search polish: 560px panel, chips, no-jump rows ---- */
.search-overlay.is-open:not(.is-mobile) .search-panel {
  width: 560px;
  max-width: min(560px, calc(100vw - var(--gutter)));
}
.search-chip,
button.search-chip {
  height: var(--seg-h);
  border-radius: var(--chip-radius);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  padding: 0 var(--space-12);
  font-size: var(--fs-13);
  font-weight: 500;
}
.search-row {
  height: var(--search-row-h);
  min-height: var(--search-row-h);
  max-height: var(--search-row-h);
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: 0 var(--space-16);
  box-sizing: border-box;
  overflow: hidden;
}
.search-row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-row-main {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.search-skeleton .search-row,
.search-skel {
  height: var(--search-row-h);
}
.search-overlay.is-open:not(.is-mobile) .search-cancel { display: none; }

@media (max-width: 720px) {
  .hero-top, .article-kicker, .hero .kicker-row {
    flex-wrap: wrap;
  }
}

}