:root {
  /* Newsprint paper + warm ink, OKLCH (perceptually even, chroma drops near the extremes) */
  --paper:    oklch(98.6% 0.006 80);
  --paper-2:  oklch(96.4% 0.009 80);
  --ink:      oklch(24% 0.014 60);
  --ink-soft: oklch(38% 0.013 62);
  --muted:    oklch(53% 0.012 66);
  --rule:     oklch(28% 0.014 60);
  --hair:     oklch(86% 0.010 78);
  --red:      oklch(53% 0.205 27);
  --red-deep: oklch(46% 0.185 27);
  --blue:     oklch(43% 0.10 250);

  --display: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --text:    "Spectral", Georgia, "Times New Roman", serif;
  --label:   "Saira Condensed", "Arial Narrow", system-ui, sans-serif;

  /* 4pt spacing scale */
  --space-2xs: 4px;  --space-xs: 8px;  --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px;  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;
}

* { box-sizing: border-box; }

html { position: relative; min-height: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.32;
  margin: 0;
  /* a thin editorial spine across the very top of the page */
  border-top: 4px solid var(--red);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.rdn-container { max-width: 1140px; margin: 0 auto; padding: 0 var(--space-md); }

a { color: var(--blue); }

/* ---------- utility bar ---------- */
.utility-bar {
  border-bottom: 1px solid var(--hair);
  background: var(--paper-2);
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.utility-bar .rdn-container {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  padding-top: var(--space-xs); padding-bottom: var(--space-xs);
}
/* ---- rope drop countdown ---- */
.ropedrop {
  font-family: var(--label);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
  flex: 0 0 auto; width: 20rem; text-align: center;  /* fixed box so each park fades in the same spot */
  transition: opacity 0.22s ease;
}
.ropedrop strong { color: var(--red-deep); font-weight: 700; }
.ropedrop .rd-mark { margin-right: 5px; }
.ropedrop.rd-swap { opacity: 0; }
@media (max-width: 640px) { .ropedrop { display: none; } }
.utility-links { display: flex; align-items: center; gap: var(--space-md); }
.utility-links a { color: var(--ink-soft); text-decoration: none; }
.utility-links a:hover { color: var(--red); }
.utility-links form { display: inline; }
.utility-links button {
  background: none; border: none; color: var(--ink-soft);
  font: inherit; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; padding: 0;
}
.utility-links button:hover { color: var(--red); }

/* ---------- masthead ---------- */
.masthead {
  text-align: center;
  padding: var(--space-lg) var(--space-md) var(--space-sm);
  border-bottom: 3px double var(--rule);
}
.masthead-title {
  display: inline-block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(42px, 8.5vw, 88px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}
.masthead-tagline {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  margin-top: var(--space-sm);
  padding-left: 0.42em; /* optically re-center the tracked text */
}

/* ---------- the wire ticker ---------- */
.ticker {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
}
.ticker-flag {
  flex: 0 0 auto;
  display: flex; align-items: center;
  background: var(--ink); color: var(--paper);
  font-family: var(--label); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px;
  padding: 7px var(--space-md);
  white-space: nowrap;
}
.ticker-viewport { flex: 1 1 auto; overflow: hidden; position: relative; }
.ticker-track {
  display: inline-flex; align-items: center;
  white-space: nowrap; will-change: transform;
  animation: ticker-scroll var(--ticker-dur, 60s) linear infinite;
}
@keyframes ticker-scroll { to { transform: translateX(-50%); } }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-item {
  font-family: var(--text); font-size: 14px; color: var(--ink);
  text-decoration: none; padding: 7px 0; display: inline-block;
}
.ticker-item:hover { color: var(--red); }
.ticker-src {
  font-family: var(--label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 11px; color: var(--red-deep); margin-right: 7px;
}
.ticker-sep { color: var(--red); font-size: 9px; padding: 0 var(--space-md); opacity: 0.65; }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-viewport { overflow-x: auto; }
}

/* ---------- "new on the wire" pill ---------- */
.wire-pill {
  position: fixed; top: 14px; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 50;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--red); color: var(--paper);
  font-family: var(--label); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 9px 16px; border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 22px oklch(53% 0.205 27 / 0.35);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s ease;
}
.wire-pill.is-visible { transform: translate(-50%, 0); opacity: 1; }
.wire-pill:hover { background: var(--red-deep); }
.wire-pill-arrow { font-size: 10px; }
@media (prefers-reduced-motion: reduce) { .wire-pill { transition: opacity 0.3s ease; } }

/* ---------- wire status line ---------- */
.wire-status {
  display: flex; justify-content: center; align-items: center; gap: var(--space-sm);
  flex-wrap: wrap;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--muted);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--hair);
  margin-bottom: var(--space-lg);
}
.wire-status .live { color: var(--red-deep); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.wire-status .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  display: inline-block;
}
.wire-status .sep { color: var(--hair); }
@media (prefers-reduced-motion: no-preference) {
  .wire-status .dot { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
}

/* ---------- splash / featured ---------- */
.splash {
  text-align: center;
  padding: var(--space-md) 0 var(--space-xl);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--rule);
}
.splash .kicker {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: var(--space-sm);
}
.splash a {
  display: inline-block;
  max-width: 22ch;
  font-family: var(--display);
  font-size: clamp(30px, 5vw, 56px);
  line-height: 1.04;
  color: var(--ink);
  text-decoration: none;
}
.splash a:hover { color: var(--red-deep); }
.splash.hot a { color: var(--red); }
.splash .splash-source {
  display: block;
  font-family: var(--label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-top: var(--space-md);
}

/* ---------- three columns ---------- */
.columns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.column { padding: 0 var(--space-lg); }
.column + .column { border-left: 1px solid var(--hair); }
.column:first-child { padding-left: 0; }
.column:last-child { padding-right: 0; }

/* ---------- auto source blocks ---------- */
.source-block { margin: 0 0 var(--space-xl); }
.source-head {
  display: flex; align-items: baseline; gap: var(--space-xs);
  font-family: var(--label);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--space-2xs);
  margin: 0 0 var(--space-sm);
}
.source-head::before {
  content: ""; width: 7px; height: 7px; background: var(--red);
  flex: 0 0 auto; transform: translateY(-1px);
}
.source-head a { color: inherit; text-decoration: none; }
.source-head a:hover { color: var(--red); }

.story { margin-bottom: var(--space-sm); }
.story a {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px; font-weight: 400; line-height: 1.26;
  transition: color 120ms ease;
}
.story a:hover { color: var(--red); }

/* the newest item per source leads, heavier and larger */
.story-lead { margin-bottom: var(--space-md); }
.story-lead a { font-size: 19px; font-weight: 600; line-height: 1.16; }

.source-more {
  display: inline-block; margin-top: var(--space-2xs);
  font-family: var(--label); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); text-decoration: none;
}
.source-more:hover { color: var(--red); }

.flag-new {
  font-family: var(--label);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper); background: var(--red);
  padding: 1px 4px; border-radius: 1px;
  vertical-align: 2px; margin-right: 6px;
}

/* ---------- house posts ---------- */
.house-posts {
  border-top: 3px double var(--rule);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
}
.house-posts h2 {
  font-family: var(--label);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); text-align: center;
  margin: 0 0 var(--space-lg);
}
.house-posts h2 span { color: var(--red); }
.house {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
.house-lead a { color: var(--ink); text-decoration: none; }
.house-lead h3 { font-family: var(--display); font-size: clamp(26px, 3vw, 38px); line-height: 1.06; margin: var(--space-2xs) 0 var(--space-sm); }
.house-lead a:hover h3 { color: var(--red-deep); }
.house-lead p { font-size: 16px; color: var(--ink-soft); margin: 0; max-width: 60ch; }
.house-rest { display: grid; gap: var(--space-md); }
.house-rest a { color: var(--ink); text-decoration: none; display: block; padding-bottom: var(--space-md); border-bottom: 1px solid var(--hair); }
.house-rest a:last-child { border-bottom: 0; }
.house-rest h4 { font-family: var(--display); font-size: 19px; line-height: 1.1; margin: var(--space-2xs) 0 0; }
.house-rest a:hover h4 { color: var(--red); }
.byline {
  font-family: var(--label); font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* ---------- ad slots ---------- */
.ad-slot { text-align: center; margin: var(--space-md) 0; }
.ad-placeholder {
  border: 1px solid var(--hair);
  color: var(--muted);
  font-family: var(--label);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: var(--space-lg); background: var(--paper-2);
}
.ad-leaderboard .ad-placeholder, .ad-footer .ad-placeholder { min-height: 90px; display: flex; align-items: center; justify-content: center; }

/* ---------- newsletter ---------- */
.newsletter {
  text-align: center;
  border-top: 3px double var(--rule);
  padding: var(--space-xl) 0 var(--space-xs);
}
.newsletter-eyebrow {
  font-family: var(--label); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--red);
  margin-bottom: var(--space-xs);
}
.newsletter-title { font-family: var(--display); font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 var(--space-xs); }
.newsletter-sub { font-size: 16px; color: var(--ink-soft); margin: 0 auto var(--space-md); max-width: 56ch; }
.newsletter-status { font-family: var(--label); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); font-weight: 600; }
.newsletter-status.is-error { color: var(--red); }
.newsletter-form { display: flex; gap: var(--space-xs); justify-content: center; flex-wrap: wrap; }
.newsletter-form input[type=email] {
  font-family: var(--text); font-size: 16px; padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink); min-width: 280px;
}
.newsletter-form input[type=email]:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.newsletter-form button {
  font-family: var(--label); font-weight: 700; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border: 0; padding: 0 var(--space-lg); cursor: pointer;
  transition: background 140ms ease;
}
.newsletter-form button:hover { background: var(--red); }

/* ---------- footer ---------- */
.site-footer { margin-top: var(--space-2xl); }
.footer-links { text-align: center; font-family: var(--label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; margin: var(--space-md) 0 var(--space-xs); }
.footer-links a { color: var(--blue); text-decoration: none; margin: 0 var(--space-sm); }
.footer-links a:hover { color: var(--red); }
.footer-fine { text-align: center; font-family: var(--label); letter-spacing: 0.04em; font-size: 11px; color: var(--muted); padding-bottom: var(--space-lg); }

/* ---------- article ---------- */
.article { max-width: 70ch; margin: var(--space-xl) auto; }
.article h1 { font-family: var(--display); font-size: clamp(34px, 5vw, 52px); line-height: 1.04; }
.article .byline { margin-top: var(--space-sm); }
.article-body { font-size: 19px; line-height: 1.6; margin-top: var(--space-lg); }
.article-body a { color: var(--blue); }

/* ---------- staggered load (restrained) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(8px); animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  .reveal-1 { animation-delay: 0.04s; }
  .reveal-2 { animation-delay: 0.12s; }
  .reveal-3 { animation-delay: 0.20s; }
  .reveal-4 { animation-delay: 0.28s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .columns { grid-template-columns: 1fr; }
  .column { padding: 0; }
  .column + .column { border-left: 0; border-top: 1px solid var(--rule); margin-top: var(--space-lg); padding-top: var(--space-lg); }
  .house { grid-template-columns: 1fr; gap: var(--space-lg); }
}