/* Refacto — journalistic, serif, restrained. */

:root {
  --ink: #1a1a2e;
  --ink-soft: #555;
  --muted: #8a8a93;
  --rule: #e3e0d8;
  --cream: #fdfcf8;
  --paper: #ffffff;
  --accent: #8a4b2a; /* warm brown for links — newsroom-y */
  --max: 720px;
  --sidebar: 240px;
  --sidebar-narrow: 200px;
  --gutter: 1.75rem;
  --wide: 1080px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 19px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Defensive: media must not bust the viewport on mobile. */
img, video, iframe, svg { max-width: 100%; height: auto; }

/* Long URLs / unbreakable strings should wrap inside narrow columns. */
.article a, .home-main a, .ad-card a { overflow-wrap: anywhere; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* ---------- Masthead ---------- */

.masthead {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: calc(var(--sidebar-narrow) + var(--max) + var(--sidebar-narrow) + (var(--gutter) * 2) + 2.5rem);
  margin: 0 auto;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--rule);
  /* Pin the masthead so the logo, search, and Scoreboard stay reachable as
     the reader scrolls. Opaque cream background + z-index keep page content
     from showing through or overlapping the bar. */
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
}
.masthead .brand { margin-right: auto; }
.masthead .site-tools { display: flex; gap: .5rem; align-items: stretch; position: relative; flex: 0 1 22rem; }
.masthead .site-search { flex: 1 1 auto; }

@media (max-width: 720px) {
  .masthead { flex-wrap: wrap; }
  .masthead .site-tools { order: 3; flex: 1 1 100%; margin-top: .5rem; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark { display: block; }

.wordmark {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -.01em;
  line-height: 1;
}

/* Lay the nav out as a flex row so the uppercase links get real breathing
   room instead of collapsing into one run ("HOME ARCHIVE METHODOLOGY"). */
.topnav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
}
.topnav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.topnav a:hover { color: var(--accent); }

/* Scoreboard link gets a button-like treatment so it stands out from
   the plain-text Archive link beside it — the public scoreboard is a
   meaningful surface, not a footer item. */
.topnav a.nav-scoreboard {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--ink);
  color: #fff;
  padding: .35rem .7rem;
  border-radius: 4px;
  border: 1px solid var(--ink);
}
.topnav a.nav-scoreboard:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.topnav a.nav-scoreboard .nav-scoreboard-icon {
  color: var(--gold);
  font-size: .7rem;
  line-height: 1;
}

/* ---------- Two-column layout (article + sidebar) ---------- */

.page-layout {
  max-width: calc(var(--max) + var(--sidebar) + var(--gutter) + 2.5rem);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

/* On non-article pages (no .page-layout--3col): 2-col article + right ad. */
@media (min-width: 1080px) {
  .page-layout {
    grid-template-columns: minmax(0, var(--max)) var(--sidebar);
    align-items: start;
  }
  .sidebar { position: sticky; top: 1.5rem; }
}

/* Article pages: 3-col layout activates as soon as it fits.
   200 (left) + 28 + 720 (main) + 28 + 200 (right) + 40 padding = 1216 → 1180+ */
@media (min-width: 1180px) {
  .page-layout--3col {
    max-width: calc(var(--sidebar-narrow) + var(--max) + var(--sidebar-narrow) + (var(--gutter) * 2) + 2.5rem);
    grid-template-columns: var(--sidebar-narrow) minmax(0, var(--max)) var(--sidebar-narrow);
  }
  .page-layout--3col .left-archive {
    display: flex;
    position: sticky;
    top: 1.5rem;
    align-self: start;
  }
  /* Home: the main column hosts the split "Recent podcasts / Recent news"
     sections (last 5 days). The left sidebar (`_archive_left.html`) shows
     the mixed last-10 quick-nav list — distinct content, so both render. */
}

/* ---------- Article body ---------- */

.article {
  max-width: var(--max);
  margin: 0;
  padding: 2.5rem 1.25rem 4rem;
  background: var(--paper);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

.kicker {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 0 0 .75rem;
}

.article h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .75rem;
  color: var(--ink);
}

.byline {
  font-size: .9rem;
  color: var(--muted);
  margin: 0 0 2rem;
}
.byline .sep { margin: 0 .4rem; }

.article .lead p:first-child::first-letter {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 3.4rem;
  line-height: .9;
  float: left;
  padding: .2rem .4rem 0 0;
  color: var(--accent);
}

.lead p,
.full-analysis p { margin: 0 0 1.1rem; }

.full-analysis h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -.01em;
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.full-analysis h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-size: 1.15rem;
  margin: 1.5rem 0 .5rem;
}

.full-analysis ul, .full-analysis ol { padding-left: 1.4rem; margin: 0 0 1.1rem; }
.full-analysis li { margin: .25rem 0; }

.full-analysis blockquote {
  margin: 1.2rem 0;
  padding: .25rem 0 .25rem 1.1rem;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
  font-style: italic;
}

.full-analysis code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: #f4efe2;
  padding: .1em .35em;
  border-radius: 3px;
}

.primary-link {
  margin: 2.5rem 0 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
}

/* ---------- Article jump-nav + prediction callout ---------- */

/* Thin horizontal row of anchor links under the byline. Reader-skim
   tool — also a structural cue that there's more here than the lead.
   Hidden on print + on the smallest screens (where the page is short
   enough that scrolling beats jumping). */
.article-jumpnav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .9rem;
  margin: .75rem 0 1.6rem;
  padding: .55rem 0 .65rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.article-jumpnav a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  padding: .1rem 0;
}
.article-jumpnav a:hover,
.article-jumpnav a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
@media print {
  .article-jumpnav { display: none; }
}

/* Anchor scroll-margin so jumpnav targets aren't hidden by the masthead. */
.article #summary,
.article #prediction,
.article #analysis,
.article #also-covered {
  scroll-margin-top: 1rem;
}

/* The standalone prediction card sits between the lead and the full
   analysis. Visually distinct so readers immediately see the position
   we're taking, without having to skim long-form prose first. */
.prediction-callout {
  background: #fbf8ed;
  border: 1px solid #e3d9a8;
  border-left: 4px solid #c9a84c;
  border-radius: 4px;
  padding: 1.1rem 1.3rem 1rem;
  margin: 1.8rem 0 2rem;
  font-family: 'Source Serif 4', Georgia, serif;
}
.prediction-callout__kicker {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a4b2a;
  margin: 0 0 .35rem;
}
.prediction-callout__claim {
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 .7rem;
}
.prediction-callout__confidence {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  margin: 0 0 .7rem;
}
.prediction-callout__confidence strong { color: var(--ink); font-weight: 700; }
.prediction-callout__rationale {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 .7rem;
}
.prediction-callout__rationale-label {
  font-weight: 700;
  color: var(--ink);
}
.prediction-callout__revisit {
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0 0 .7rem;
  letter-spacing: .01em;
}
.prediction-callout__revisit strong { color: var(--ink); font-weight: 600; }
.prediction-callout__conditions {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: .9rem;
  row-gap: .35rem;
  margin: .5rem 0 0;
  font-size: 1.2rem;
  line-height: 1.5;
}
.prediction-callout__conditions dt {
  font-weight: 600;
  color: var(--ink);
}
.prediction-callout__conditions dd {
  margin: 0;
  color: var(--ink-soft);
}
@media (max-width: 600px) {
  .prediction-callout__conditions {
    grid-template-columns: 1fr;
    row-gap: .1rem;
  }
  .prediction-callout__conditions dt { margin-top: .35rem; }
}

/* ---------- Content tag chips ---------- */

.tag-chips {
  margin: .55rem 0 .25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  line-height: 1.4;
}
.tag-chip {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: #f5f2e8;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .78rem;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
a.tag-chip:hover { background: #efe8d4; border-color: #c9a84c; }
.tag-chip--mini {
  font-size: .7rem;
  padding: .05rem .45rem;
  background: transparent;
  border-color: #ede9dd;
  color: var(--ink-soft, #555);
}
.issue-tags {
  margin: .35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

/* ---------- Topics popover (masthead) ---------- */

.site-topics-toggle {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .85rem;
  padding: .35rem .7rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: .3rem;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: .02em;
}
.site-topics-toggle:hover { border-color: var(--accent); }
.site-topics-toggle[aria-expanded="true"] { background: #fbf8ef; }

.site-topics-popover {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  z-index: 50;
  min-width: 14rem;
  max-width: min(22rem, calc(100vw - 2rem));
  max-height: 60vh;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: .35rem;
  box-shadow: 0 6px 24px rgba(26, 26, 46, .12);
  padding: .35rem;
}
.site-topics-list { list-style: none; padding: 0; margin: 0; }
.site-topics-list > li { margin: 0; }
.site-topic-pick {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: .35rem .55rem;
  border-radius: .25rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .9rem;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: .5rem;
}
.site-topic-pick:hover { background: #fbf8ef; }
.site-topic-count {
  color: var(--muted, #8a8a93);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.site-topics-empty {
  margin: .25rem .55rem;
  font-size: .85rem;
  color: var(--muted, #8a8a93);
}

/* ---------- Issue-list filter banner ---------- */

.issue-filter-status {
  margin: 0 0 1rem;
  font-size: .85rem;
  color: var(--ink-soft, #555);
}
.issue-filter-status a { color: var(--accent); }
.issue-list > li[hidden] { display: none !important; }

/* ---------- Also covered this issue ---------- */

.also-covered {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.also-covered .kicker { margin-bottom: 1.1rem; }
.also-covered-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.also-covered-list > li {
  margin: 0 0 1.1rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--rule);
}
.also-covered-list > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.also-covered-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}
a.also-covered-title:hover { text-decoration: underline; }
.also-covered-source {
  display: inline-block;
  margin-left: .55rem;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.also-covered-headline {
  margin: .3rem 0 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-soft, #555);
}

/* ---------- Ad slot ---------- */

.ad-slot {
  margin: 2rem 0;
  padding: 1.2rem 1.25rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: #fbf8ef;
}
.ad-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 0 0 .5rem;
}
.ad-slot img { max-width: 100%; height: auto; display: block; }
.ad-slot a { color: var(--ink); }

/* ---------- Footer ---------- */

.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
  border-top: 1px solid var(--rule);
}

/* ---------- Masthead search ---------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

.site-search { position: relative; display: flex; }
.site-search input {
  width: 100%;
  padding: .45rem .75rem;
  border: 1px solid var(--rule);
  border-radius: .35rem;
  background: var(--paper);
  font-family: inherit;
  font-size: .95rem;
  color: var(--ink);
}
.site-search input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.search-results {
  position: absolute;
  top: calc(100% + .3rem);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: .35rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  max-height: 65vh;
  overflow-y: auto;
}
.search-results a {
  display: block;
  padding: .65rem .8rem;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.search-results a:last-child { border-bottom: none; }
.search-results a:hover { background: #fbf8ef; }
.search-results .search-kicker {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: .15rem;
}
.search-results .search-title {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .95rem;
  line-height: 1.35;
}
.search-results .search-people {
  display: block;
  margin-top: .2rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .8rem;
  color: var(--muted);
}
.search-results .search-people::before {
  content: '\1F464\00A0';  /* bust-in-silhouette + nbsp */
  opacity: .8;
}
.search-results .search-empty {
  margin: 0; padding: .65rem .8rem;
  color: var(--muted);
  font-size: .9rem;
  font-style: italic;
}

/* ---------- Left archive sidebar (article pages, wide screens) ---------- */

.left-archive {
  /* Hidden by default; the @media (min-width: 1180px) rule above shows it
     when the 3-col layout has room. On mobile + medium-width laptops we
     keep the recent-issues list off the article page entirely — it lives
     on the home/archive pages instead. */
  display: none;
  flex-direction: column;
  padding-top: 2.5rem;
}
.archive-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 0 0 .85rem;
}
.archive-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.archive-list li { margin-bottom: 1rem; }
.archive-list a { display: block; text-decoration: none; color: var(--ink); }
.archive-list .archive-title {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.3;
  color: var(--ink);
}
.archive-list a:hover .archive-title { color: var(--accent); }
.archive-list .archive-date {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  margin-top: .15rem;
}
.archive-more { margin: 0; font-size: .9rem; }
.archive-more a { color: var(--accent); }

/* ---------- Sidebar (right-side ad + subscribe CTA) ---------- */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 2.5rem;
}

.ad-card,
.subscribe-card {
  padding: 1.1rem 1.1rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: .35rem;
}

.ad-card .ad-label,
.subscribe-card .ad-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 0 0 .65rem;
}

.ad-placeholder {
  background: #fbf8ef;
  border: 1px dashed var(--rule);
  border-radius: .3rem;
  padding: 1rem .9rem;
  text-align: center;
}
.ad-placeholder-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  margin: 0 0 .35rem;
  color: var(--ink);
}
.ad-placeholder-body {
  font-size: .85rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 .6rem;
}
.ad-placeholder-cta { margin: 0; font-size: .9rem; }
.ad-placeholder-cta a { color: var(--accent); }

.subscribe-card .subscribe-pitch {
  font-size: .95rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 .65rem;
}
.subscribe-card .subscribe-link {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
}

/* On mobile, sidebar stacks below the article. */
@media (max-width: 1079px) {
  .sidebar { padding-top: 1rem; padding-bottom: 1rem; }
}

/* ---------- Home page (hero + signup + recent issues) ---------- */

.home-main {
  max-width: var(--max);
  margin: 0;
  padding: 3rem 1.25rem 4rem;
  background: var(--paper);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

.hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 .75rem;
}
.hero .hero-pitch {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 2rem;
}

/* Compact scoreboard teaser above the signup card — links to the full
   scoreboard. Navy backdrop mirrors the scoreboard hero card. */
.home-scoreboard {
  display: block;
  background: #1a1a2e;
  color: #fff;
  border-radius: .4rem;
  padding: 1.1rem 1.4rem 1.2rem;
  margin: 0 0 2rem;
  text-decoration: none;
  box-shadow: 0 1px 0 #0c0c18 inset, 0 6px 20px -10px #1a1a2e33;
  transition: transform .12s ease, box-shadow .12s ease;
}
.home-scoreboard:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 #0c0c18 inset, 0 10px 26px -10px #1a1a2e4d;
}
.home-scoreboard-caption {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c9a84c;
  margin: 0 0 .35rem;
}
.home-scoreboard-score {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.02em;
  display: flex;
  align-items: baseline;
  gap: .4rem;
}
.home-scoreboard-score .right { color: #6ab87b; }
.home-scoreboard-score .wrong { color: #d97e5c; }
.home-scoreboard-score .tie   { color: #c9a84c; }
.home-scoreboard-score .sep   { color: #8a8a93; font-size: .8em; }
.home-scoreboard-meta {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .92rem;
  color: #c0c0cc;
  margin: .55rem 0 0;
  letter-spacing: .03em;
}
.home-scoreboard-meta strong { color: #fff; font-weight: 600; }

.home-current-edition {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  background: #fff;
  border: 1px solid #c9a84c;
  border-radius: .4rem;
  padding: 1rem 1.4rem;
  margin: 0 0 2rem;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.home-current-edition:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -12px #1a1a2e4d;
}
.home-current-edition-label {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8a7430;
}
.home-current-edition-cta {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: #1a1a2e;
}

.signup-card {
  margin: 0 0 3rem;
  padding: 1.5rem 1.5rem 1.65rem;
  background: #fbf8ef;
  border: 1px solid var(--rule);
  border-radius: .4rem;
}
.signup-card h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem;
  margin: 0 0 .35rem;
}
.signup-card .signup-pitch {
  font-size: .95rem;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}

.signup-form {
  display: grid;
  /* Intrinsic responsiveness: pack 2-up when each column can be ≥180px,
     else collapse to a single column. No breakpoint needed. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
}
.signup-form label {
  display: flex;
  flex-direction: column;
  font-size: .8rem;
  color: var(--ink-soft);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.signup-form .full { grid-column: 1 / -1; }
.signup-form input {
  margin-top: .3rem;
  padding: .55rem .65rem;
  border: 1px solid var(--rule);
  border-radius: .25rem;
  font-family: inherit;
  font-size: 1rem;
  background: var(--paper);
  color: var(--ink);
}
.signup-form input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.signup-form button {
  grid-column: 1 / -1;
  padding: .65rem 1rem;
  border: none;
  border-radius: .25rem;
  background: var(--ink);
  color: var(--cream);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}
.signup-form button:hover { background: var(--accent); }
.signup-form button:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- Persona interest checkboxes ---------- */

.signup-form .persona-interests {
  border: 1px solid var(--rule);
  border-radius: .35rem;
  padding: .75rem .9rem .85rem;
  margin: .25rem 0 0;
}
.signup-form .persona-interests legend {
  font-size: .8rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 .35rem;
}
.signup-form .persona-hint {
  margin: .25rem 0 .7rem;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--muted, #8a8a93);
  text-transform: none;
}
.signup-form .persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .35rem .9rem;
}
.signup-form .persona-option {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: .55rem;
  font-size: .95rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  cursor: pointer;
  padding: .15rem 0;
}
.signup-form .persona-option input[type="checkbox"] {
  margin: .25rem 0 0;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}
.signup-form .persona-option span small {
  display: block;
  font-size: .78rem;
  color: var(--muted, #8a8a93);
  margin-top: 1px;
}
.signup-form #persona-other-input {
  margin-top: .55rem;
  width: 100%;
}
.signup-form #persona-other-input:disabled {
  background: #f6f4ee;
  color: var(--muted, #8a8a93);
}

.signup-status {
  margin: .85rem 0 0;
  font-size: .9rem;
  min-height: 1.2em;
}
.signup-status.ok { color: #1f7a4d; }
.signup-status.err { color: #a8331c; }

.recent-issues h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  margin: 2.5rem 0 1.1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.recent-issues .recent-window-note {
  margin: -0.85rem 0 1.1rem;
  font-size: .85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.issue-list { list-style: none; padding: 0; margin: 0; }
.issue-list li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.issue-list a {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.issue-list .issue-kicker {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 0 0 .3rem;
}
.issue-list .issue-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 0 .3rem;
  color: var(--ink);
}
.issue-list a:hover .issue-title { color: var(--accent); }
.issue-list .issue-source {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: .9rem;
  color: var(--muted);
  margin: 0 0 .3rem;
}
.issue-list .issue-date {
  font-size: .85rem;
  color: var(--muted);
  margin: 0;
}
.issue-list .issue-excerpt {
  margin: .55rem 0 0;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-soft, #555);
}

/* ---------- Small screens (tablets + phones) ---------- */

@media (max-width: 720px) {
  body { font-size: 18px; }
  .page-layout { padding: 0 1rem; gap: 1.25rem; }
  .article,
  .home-main {
    padding: 1.75rem 1rem 3rem;
    border-left: none;
    border-right: none;
  }
  .masthead { padding: 1.1rem 1rem .8rem; }
  .article h1 { line-height: 1.2; }
  .article .lead p:first-child::first-letter {
    font-size: 2.8rem;
    padding: .1rem .35rem 0 0;
  }
  /* Wordmark stays prominent but doesn't crowd the search row. */
  .wordmark { font-size: 1.3rem; }
}

/* ---------- Phone-sized screens ---------- */

@media (max-width: 500px) {
  body { font-size: 17px; }
  .page-layout { padding: 0 .75rem; }
  .article,
  .home-main {
    padding: 1.25rem .85rem 2.5rem;
  }
  .masthead {
    padding: .9rem .85rem .7rem;
    gap: .65rem;
  }
  .wordmark { font-size: 1.15rem; }
  .topnav a {
    font-size: .8rem;
    letter-spacing: .03em;
  }

  /* The signup-form's auto-fit grid handles collapsing on its own;
     here we just tighten the surrounding card. */
  .signup-card {
    padding: 1.15rem 1rem 1.25rem;
  }
  .hero .hero-pitch { font-size: 1.05rem; }

  /* Drop-cap is too dramatic on tiny screens. */
  .article .lead p:first-child::first-letter {
    font-size: 2.4rem;
    padding: .15rem .3rem 0 0;
  }

  /* Sidebar ad card: keep visible but slim. */
  .ad-card, .subscribe-card {
    padding: .9rem .9rem 1rem;
  }
}

/* ---------- Static content pages (Methodology, About) ---------- */
.content-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}
.content-kicker {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .8rem;
  color: var(--muted);
  margin: 0 0 .6rem;
}
.content-page h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 1rem;
}
.content-lead {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 2.5rem;
}
/* Each section sits on a warm cream panel (matching the About bio card)
   so content pages read as part of the site, not a bare white expanse.
   The cards self-separate, so the heading no longer needs a top rule. */
.content-section {
  margin: 0 0 1.75rem;
  background: #f6f1e6;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.75rem 1.9rem;
}
.content-section h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0 0 .9rem;
}
.content-page p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
.content-steps, .content-list {
  margin: 0 0 1.3rem;
  padding-left: 1.4rem;
}
.content-steps li, .content-list li {
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 1rem;
}
.content-steps { counter-reset: step; }
.content-cta {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1.6rem;
}

/* About card: photo (or initials chip) beside the bio; stacks on mobile.
   Sits on a warm cream panel (matching the site's other cards, e.g. the
   prediction callout) so the bio page reads as part of the site rather
   than a bare white expanse. */
.about-card {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin: 0 0 2rem;
  background: #f6f1e6;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.75rem 1.9rem;
}
.about-photo {
  flex: 0 0 auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.about-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 3.4rem;
  letter-spacing: .02em;
}
.about-bio { flex: 1 1 auto; min-width: 0; }
.about-bio h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.7rem;
  margin: 0 0 .2rem;
}
.about-role {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .82rem;
  color: var(--muted);
  margin: 0 0 1.1rem;
}
.about-contact { font-weight: 600; }

@media (max-width: 560px) {
  .about-card { flex-direction: column; gap: 1.25rem; align-items: center; text-align: left; padding: 1.4rem 1.25rem; }
  .about-photo { width: 140px; height: 140px; }
  .about-photo--placeholder { font-size: 2.6rem; }
  .content-section { padding: 1.4rem 1.25rem; }
}

/* ================= Trellis reskin (overrides Refacto tokens) ================= */
:root{
  --ink:#22332c; --ink-soft:#5a6b62; --muted:#8a938d;
  --rule:#e7e0d0; --cream:#fbf9f3; --paper:#fffdf8;
  --accent:#2f7d63;            /* forest green links, was warm brown */
}
/* larger, higher-contrast type for a 50+ readership */
body{font-size:19px;line-height:1.72;}
.issue-title{font-size:1.28rem;line-height:1.32;}
.issue-kicker{color:var(--accent);font-weight:700;letter-spacing:.06em;}
.tag-chip{background:#eaf1ec;color:#2a6b4b;border-color:#d7e5dc;}
.masthead .wordmark{letter-spacing:.5px;}
.brand-mark{border-radius:4px;}
/* topic kicker chips on the issue cards get the edition color via inline var */
.issue-list li[data-accent] .issue-kicker{color:var(--accent);}
/* "what it means" reader-value callout on article pages */
.means{background:var(--tint,#eaf1ec);border-left:5px solid var(--accent);
  border-radius:0 8px 8px 0;padding:18px 22px;margin:1.4rem 0;}
.means-lab{font:700 .8rem/1 system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.6rem;}
.means-txt{margin:0;}
.login-link{cursor:pointer;background:none;border:0;font:inherit;color:var(--accent);padding:0;}
.comment-box{border:1px solid var(--rule);border-radius:10px;padding:1.1rem 1.2rem;margin-top:1rem;background:var(--paper);}
.comment-box textarea{width:100%;min-height:5rem;font:inherit;padding:.6rem;border:1px solid var(--rule);border-radius:8px;}
.comment-box button{margin-top:.6rem;padding:.5rem 1rem;border:0;border-radius:6px;background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer;}
.posted-comment{border-top:1px solid var(--rule);padding:.9rem 0;}
.posted-comment .who{font-weight:600;}