:root {
  --bg: #faf9f7;
  --ink: #2b2724;
  --ink-strong: #1c1916;
  --muted: #6f6a61;
  --card: #ffffff;
  --line: #e8e3da;
  --line-strong: #d8d1c5;
  --accent: #b3541e;
  --accent-soft: #f6ebe1;
  --radius: 14px;
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Liberation Serif", serif;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { overflow-x: clip; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}


:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Skip link: visible only on keyboard focus. */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink-strong); color: #fff; padding: 10px 16px; font-family: var(--font-sans); font-size: 14px; z-index: 100; text-decoration: none; }
.skip-link:focus { left: 0; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header {
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--line);
  background: rgba(250, 249, 247, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 62px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink-strong);
}
.brand-mark {
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
  border-radius: 1px;
  flex-shrink: 0;
  box-shadow: 0 0 0 2.5px var(--accent-soft);
  transition: transform 0.25s ease, background-color 0.2s ease;
}
.wordmark:hover .brand-mark {
  transform: rotate(135deg);
}
.wordmark-text {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -0.025em;
  display: inline-flex;
  align-items: baseline;
}
.wordmark-stem {
  font-weight: 500;
  color: var(--ink-strong);
}
.wordmark-dot {
  font-weight: 600;
  color: var(--accent);
  margin: 0 0.5px;
}
.wordmark-tld {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-sep {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}
.header-nav a,
.footer-nav a {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.header-nav a:hover,
.footer-nav a:hover { color: var(--accent); }

.sort-wrap {
  position: relative;
}
.sort-pill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0 11px;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.sort-pill:hover,
.sort-pill[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--card);
}
.sort-tag {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 10px;
  white-space: nowrap;
}
.sort-sep {
  color: var(--line-strong);
}
.sort-value {
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.sort-chev {
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.sort-pill[aria-expanded="true"] .sort-chev {
  transform: rotate(180deg);
}
.sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 148px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(43, 39, 36, 0.10);
  z-index: 30;
}
.sort-menu [role="option"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--ink);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.sort-menu [role="option"]:hover,
.sort-menu [role="option"].focused {
  background: var(--accent-soft);
}
.sort-menu [role="option"][aria-selected="true"] {
  color: var(--accent);
  font-weight: 600;
}
.sort-menu [role="option"][aria-selected="true"]::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.cat-wrap {
  display: none;
  position: relative;
  flex: 1;
}
.cat-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0 14px;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.cat-pill:hover,
.cat-pill[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--card);
}
.cat-value {
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-menu {
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
}
.x-button {
  display: inline-flex;
  align-items: center;
  height: 36px;
  /* X.com button type: TwitterChirp is not publicly loadable, so use X's
     own fallback stack at X's button specs (15px/700) for the resemblance. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  border: 1px solid #3d3835;
  background: #3d3835;
  padding: 0 18px;
  border-radius: 999px;
  transition: background 0.2s, border-color 0.2s;
  opacity: 0;
  animation: pill-in 0.35s ease 0.1s forwards;
  white-space: nowrap;
}
.x-button:hover {
  background: var(--accent);
  border-color: var(--accent);
}
@keyframes pill-in {
  to { opacity: 1; }
}

/* Intro */
.intro { padding: 26px 0 6px; }
/* Homepage lede (pre-rendered intro): same type scale as the .lede on the
   other pages, so the intro reads as part of the site, not a new design. */
.intro .lede { font-size: 17px; line-height: 1.65; margin: 16px 0 0; max-width: 72ch; }
.intro h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(16px, 4.5vw, 44px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--ink-strong);
}
.intro h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.intro h1 .beat {
  display: inline-block;
  clip-path: inset(-12% -3% -18% -2%);
}
.intro h1 .beat-1 { animation: headline-reveal 0.95s ease backwards; }
.intro h1 .beat-2 { animation: headline-reveal 1.3s ease 1.3s backwards; }
@keyframes headline-reveal {
  from { clip-path: inset(-12% 100% -18% -2%); }
  to { clip-path: inset(-12% -3% -18% -2%); }
}
@media (prefers-reduced-motion: reduce) {
  .intro h1 .beat { animation: none; clip-path: none; }
  .x-button { animation: none; opacity: 1; }
  .skeleton-line { animation: none; }
}

/* Toolbar: category chips */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 8px;
}
.toolbar .sort-wrap { flex-shrink: 0; }
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.chip {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Grid + cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
  padding: 16px 0 64px;
  align-items: start;
}
.card {
  background: #f5e6cf;
  border: 1px solid #e2c49b;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(43, 39, 36, 0.07);
}
.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 2px;
}
.meta-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Take cards: the warm spotlight. Terracotta is the @modifamily voice — the
   same #b3541e as the ".im" wordmark and the hero's "brought to you daily."
   Warm cards draw the eye to his posts, which is what converts visitors
   into followers. */
/* One card style for every entry. Take and Signal are internal pipeline
   fields only (sourcing and note length); they no longer drive the look.
   The category pill is terracotta on every card. */
.card .category {
  color: var(--accent);
  background: #eed9b8;
}
/* .our-note is 16px (not 14px like .credibility-note / .policy-note) on purpose:
   it is a homepage card's main text, not a lede. .intro h1 caps at 44px on purpose:
   it is white-space: nowrap so the hero headline fits on one line. */
.our-note {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin: 4px 18px 18px;
  padding-left: 12px;
  border-left: 2px solid var(--accent);
}
.our-note a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.our-note a:hover {
  color: #9c4a18;
}
.category {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
}
.card-date {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--muted);
}
/* Design A: Deep Teal Ledger (Bhavin, 2026-11-09); policy-update cards only.
   Distinct from the warm vellum X cards: the policy card is deep teal, and the
   link to the tracker is a nested mini-card, not a text link. */
.card--policy {
  background: #1f6358;
  color: #f2efe4;
  border: none;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(31, 99, 88, 0.28);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card--policy:hover {
  box-shadow: 0 12px 32px rgba(31, 99, 88, 0.35);
}
.card--policy .card-meta {
  margin: 0;
  padding: 0;
}
.card--policy .category {
  background: rgba(255, 255, 255, 0.14);
  color: #e8f5f1;
}
.card--policy .card-date {
  color: #d0e0da;
}
.card--policy .our-note {
  font-size: 20px;
  line-height: 1.42;
  color: #f6f3e7;
  border-left: none;
  margin: 0;
  padding: 0;
}
.card--policy .tracker {
  display: block;
  background: #f8f4e6;
  color: #20302c;
  border-radius: 12px;
  padding: 16px 16px 14px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  text-decoration: none;
}
.card--policy .tracker:hover {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.card--policy .t-label {
  display: flex;
  justify-content: space-between;
  color: #7a6a45;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.card--policy .t-label .status {
  color: #4c5a54;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 600;
}
.card--policy .t-label .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3d9970;
  margin-right: 6px;
}
.card--policy .t-title {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  margin: 10px 0;
  color: #20302c;
}
.card--policy .t-stat {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.card--policy .t-big {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: #20302c;
}
.card--policy .t-cap {
  font-size: 13.5px;
  line-height: 1.4;
  flex: 1;
  min-width: 150px;
  color: #20302c;
}
.card--policy .bar {
  display: block;
  height: 7px;
  border-radius: 99px;
  background: #e2dbc2;
  margin: 13px 0 12px;
  overflow: hidden;
}
.card--policy .bar i {
  display: block;
  height: 100%;
  background: #14524c;
  border-radius: 99px;
}
.card--policy .t-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #ddd3ae;
  padding-top: 11px;
  font-size: 14px;
  color: #5c5540;
}
.card--policy .t-open {
  align-self: flex-end;
  color: #1f6358;
  font-weight: 800;
}
.tweet-slot {
  padding: 6px 10px 10px;
  min-height: 360px;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.tweet-slot > * { min-width: 0; }
.tweet-slot iframe, .tweet-slot twitter-widget {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}
.tweet-slot .loading { color: var(--muted); font-size: 13px; padding: 40px 0; }

.skeleton {
  width: 100%;
  padding: 14px 8px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.skeleton-line {
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg) 0%, var(--line) 50%, var(--bg) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}
.skeleton-line.w-40 { width: 40%; height: 10px; margin-bottom: 6px; }
.skeleton-line.w-92 { width: 92%; }
.skeleton-line.w-84 { width: 84%; }
.skeleton-line.w-64 { width: 64%; }
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.empty { text-align: center; color: var(--muted); padding: 40px 0 80px; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 40px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-nav {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-nav--left { justify-content: flex-start; }
.footer-follow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.footer-follow:hover { color: var(--accent); }
.footer-follow .x-icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .site-header .wrap { height: 56px; gap: 10px; }
  .wordmark { gap: 8px; }
  .brand-mark { width: 6px; height: 6px; box-shadow: 0 0 0 2px var(--accent-soft); }
  .wordmark-text { font-size: 22px; }
  .header-actions { gap: 7px; }
  .header-nav { gap: 8px; }
  .header-nav a { font-size: 13px; }
  .footer-inner { flex-direction: column; align-items: center; gap: 14px; }
  .footer-nav { flex: 0 0 auto; gap: 8px; justify-content: center; }
  .footer-nav a { font-size: 13px; }
  .footer-follow { font-size: 13px; }
  .sort-pill {
    height: 30px;
    padding: 0 9px;
    gap: 4px;
  }
  /* Mobile: the sort pill sits at the left edge, so its menu must open
     left-aligned. The desktop rule (right: 0) aligns the menu to the
     pill's right edge, but the pill is narrower than the menu, so on
     mobile the menu slid off the left edge of the screen and hid the
     option text. Left-aligning keeps it on-screen. The category menu
     keeps right: 0 because its button is at the right edge. */
  .sort-wrap .sort-menu {
    left: 0;
    right: auto;
  }
  .sort-tag, .sort-sep { display: none; }
  .filters { display: none; }
  .cat-wrap { display: block; }
  .intro { padding-top: 22px; }
  .intro h1 {
    font-size: clamp(26px, 7.8vw, 34px);
    white-space: normal;
    line-height: 1.22;
  }
  .intro h1 .beat { display: block; }
  .grid { grid-template-columns: 1fr; }
  .toolbar { padding: 14px 0 6px; }
  .filters {
    width: 100%;
    flex-wrap: wrap;
  }
  .chip { min-height: 40px; }
  .card-meta { flex-wrap: wrap; gap: 6px; }
}

/* Contact page */
.contact { max-width: 880px; margin: 0 auto; padding: 44px 0 72px; }
.contact h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--ink-strong);
  margin-bottom: 16px;
}
.contact h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.contact .lede { font-size: 17px; line-height: 1.65; margin-bottom: 36px; }
.contact-mail {
  display: inline;
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 26px);
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  margin: 0;
}
.contact-mail:hover { color: var(--ink-strong); border-color: var(--ink-strong); }
.contact-rows { border-top: 1px solid var(--line); }
.contact-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.contact-row h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
}
.contact-row p { font-size: 15px; line-height: 1.6; }
@media (max-width: 640px) {
  .contact, .about, .sources, .articles, .reports, .article { padding: 32px 0 56px; }
  .contact-row { grid-template-columns: 1fr; gap: 4px; }
}

/* About page */
.about { max-width: 880px; margin: 0 auto; padding: 44px 0 72px; }
.about h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--ink-strong);
  margin-bottom: 16px;
}
.about h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.about .lede { font-size: 17px; line-height: 1.65; }
.about .lede + .lede { margin-top: 14px; }
.about h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-strong);
  margin: 56px 0 18px;
}
.about p { font-size: 16px; line-height: 1.65; margin-bottom: 16px; }
.about p a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }
.about p a:hover { color: var(--ink-strong); border-color: var(--ink-strong); }
.lede a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }
.lede a:hover { color: var(--ink-strong); border-color: var(--ink-strong); }

/* Sources page */
.sources { max-width: 880px; margin: 0 auto; padding: 44px 0 72px; }
.sources h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--ink-strong);
  margin-bottom: 16px;
}
.sources h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.sources .lede { font-size: 17px; line-height: 1.65; }
.sources .lede + .lede { margin-top: 14px; }
.src-group { margin-top: 36px; }
.src-group h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.src-list { list-style: none; }
.src-list li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.6; }
.src-list a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }
.src-list a:hover { color: var(--ink-strong); border-color: var(--ink-strong); }
.src-domain { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-left: 8px; }
.tier-list ul { list-style: none; }
.tier-list li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.6; }
.tier-name { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }

/* Policies page */
.policies { max-width: 880px; margin: 0 auto; padding: 44px 0 72px; }
.policies h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--ink-strong);
  margin-bottom: 16px;
}
.policies h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.policies .lede { font-size: 17px; line-height: 1.65; margin-bottom: 12px; }
.policies .lede--small { font-family: var(--font-mono); font-size: 12px; line-height: 1.45; color: var(--muted); margin-top: 10px; margin-bottom: 0; }
.policies .lede--small a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }
.policies .lede--small a:hover { color: var(--ink-strong); border-color: var(--ink-strong); }
.utility-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 36px 0 12px;
}
.policies-stance {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink-strong);
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  padding: 20px 24px;
  margin: 28px 0 24px;
}
.policy-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 8px;
  padding: 20px 0 0;
  margin: 0 0 4px;
  border-top: 1px solid var(--line);
}
.policy-index a {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.policy-index a:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 640px) {
  .policy-index { grid-template-columns: 1fr; }
  .policy { scroll-margin-top: 59px; }
}
.policy { padding: 32px 0 36px; border-bottom: 1px solid var(--line); scroll-margin-top: 65px; }
.policy:first-of-type { border-top: 1px solid var(--line); }
.policy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.policy-head h2 a { color: inherit; text-decoration: none; }
.policy-head h2 a:hover { color: var(--accent); }
.policy h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-strong);
}
.status {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3d3834;
  background: #ede8e1;
  border: 1px solid #c8c0b2;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.status--flag { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.status--ok { color: #2f7d33; border-color: #a9cfa4; background: #e8f2e6; }
.status--delivered { color: #1b5e20; border-color: #81c784; background: #c8e6c9; }
/* Status legend on the policies index: pill + one-line definition per row. */
.status-legend { margin: 28px 0 4px; display: grid; gap: 10px; }
.status-legend p { margin: 0; font-size: 14px; line-height: 1.6; display: flex; align-items: baseline; gap: 10px; }
.status-legend .status { flex-shrink: 0; }
.status-legend-more { color: var(--muted); }

.policy-year { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 8px 0 14px; }
.policy-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: #eed9b8;
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.policy-cat:hover { color: var(--ink-strong); background: #e6d3a8; }
.policy-intent { font-size: 16px; line-height: 1.65; margin-bottom: 18px; }
.policy-block { margin-bottom: 14px; }
.policy-block h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.policy-block ul { padding-left: 18px; }
.policy-block li { font-size: 15px; line-height: 1.6; margin-bottom: 6px; }
.policy-block li::marker { color: var(--accent); }
.policy-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  border-left: 2px solid var(--accent);
  padding-left: 12px;
  margin: 14px 0;
}
.policy-sources { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--muted); margin-top: 14px; }
.policy-sources a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.policy-sources a:hover { color: var(--accent); border-color: var(--accent); }
.report-sources { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; color: var(--muted); margin-top: 14px; }
.report-sources a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.report-sources a:hover { color: var(--accent); border-color: var(--accent); }
.policies-foot { margin-top: 32px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.policies-foot + .policies-foot { margin-top: 12px; }
.policies-foot a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }
.policies-foot a:hover, .articles-foot a:hover, .reports-foot a:hover { color: var(--ink-strong); border-color: var(--ink-strong); }
@media (max-width: 640px) {
  .policies { padding: 32px 0 56px; }
}

/* Articles and Reports pages */
.articles, .reports, .article { max-width: 880px; margin: 0 auto; padding: 44px 0 72px; }
.articles h1, .reports h1, .article h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--ink-strong);
  margin-bottom: 16px;
}
.articles h1 em, .reports h1 em, .article h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.articles .lede, .reports .lede { font-size: 17px; line-height: 1.65; margin-bottom: 12px; }
.articles .lede + .lede, .reports .lede + .lede { margin-top: 14px; }
.article-row, .report-row { padding: 28px 0 32px; border-bottom: 1px solid var(--line); }
.article-row:first-of-type, .report-row:first-of-type { border-top: 1px solid var(--line); }
.article-row h2, .report-row h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-strong);
}
.article-row h2 a { color: inherit; text-decoration: none; }
.article-row h2 a:hover { color: var(--accent); }
.report-row h2 a { color: inherit; text-decoration: none; }
.report-row h2 a:hover { color: var(--accent); }
.row-meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 8px 0 14px; }
.article-row p, .report-row p { font-size: 16px; line-height: 1.65; }
.coming-soon {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}
.report-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rank-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3d3834;
  background: #ede8e1;
  border: 1px solid #c8c0b2;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.score-line { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 14px; }
.score-line strong { color: var(--ink); font-weight: 600; }
.articles-foot, .reports-foot { margin-top: 32px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.articles-foot a, .reports-foot a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }
.reports-how { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0 28px; margin: 40px 0; }
.reports-how h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-strong);
  margin-bottom: 12px;
}
.reports-how p { font-size: 16px; line-height: 1.65; margin-bottom: 12px; }
.reports-how p a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }
.reports-how p a:hover { color: var(--ink-strong); border-color: var(--ink-strong); }
.weights { margin: 20px 0 0; padding: 0; }
.weights + p:not(.weight-total) { margin-top: 28px; }
.weights div {
  display: grid;
  grid-template-columns: minmax(12em, 1.3fr) minmax(8rem, 1fr) 4rem;
  gap: 16px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.weights dt {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
}
.weights dd { display: contents; margin: 0; }
.track { display: block; height: 4px; background: var(--line); }
.fill { display: block; height: 100%; background: var(--accent); }
.pts {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
  color: var(--ink);
}
.weight-total {
  display: grid;
  grid-template-columns: minmax(12em, 1.3fr) minmax(8rem, 1fr) 4rem;
  gap: 16px;
  margin: 0;
  padding: 12px 0 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
}
.weight-total span:first-child { grid-column: 1 / 3; }
.bands-list { margin: 22px 0 0; padding: 0; }
.bands-list div {
  display: grid;
  grid-template-columns: 8rem 4.5rem 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.bands-list dt {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
/* Band names use the same colours as the report score pills, so the
   methodology page reflects the bands exactly as the reports show them. */
.bands-list dt.band-insightful { color: #2f7d33; }
.bands-list dt.band-useful { color: #5a7d5a; }
.bands-list dt.band-flawed { color: #b3541e; }
.bands-list dt.band-questionable { color: #c0392b; }
.bands-list dt.band-misleading { color: #c0392b; }
.bands-list .band-range {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
}
.bands-list dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.score-bar { display: flex; align-items: center; gap: 16px; margin: 18px 0 6px; }
.score-bar .bar { flex: 1; height: 10px; border-radius: 999px; overflow: hidden; background: #f6d9d9; }
.score-bar .bar .fill { display: block; height: 100%; background: #c0392b; }
.score-bar .score {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 2.5rem;
  text-align: right;
}
.score-bar--high .bar { background: #d9ead3; }
.score-bar--high .bar .fill { background: #2f7d33; }
.score-bar--useful .bar { background: #e3e8dd; }
.score-bar--useful .bar .fill { background: #5a7d5a; }
.score-bar--mid .bar { background: #f6ebe1; }
.score-bar--mid .bar .fill { background: var(--accent); }
.score-bar--none .bar { background: #e8e3da; }
.score-bar--none .bar .fill { background: #6f6a61; }
.score-bar-note { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.score-band-line { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #c0392b; margin: 10px 0 0; }
.score-band-line--high { color: #2f7d33; }
.score-band-line--useful { color: #5a7d5a; }
.score-band-line--mid { color: var(--accent); }
/* Credibility lede: note (left, vertical rule) + compressed score bar (right half). */
.credibility-lede {
  display: flex;
  gap: 24px;
  align-items: center;
  margin: 18px 0 6px;
}
.credibility-note {
  flex: 1 1 55%;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  border-left: 2px solid var(--accent);
  padding-left: 12px;
  margin: 0;
}
.credibility-score {
  flex: 0 0 45%;
}
.credibility-score-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}
/* Stacked lede experiment (WJP only): meta row (pill + score) above full-width note. */
.credibility-lede--stacked { display: block; }
.credibility-lede--stacked .credibility-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 12px;
}
.credibility-lede--stacked .credibility-meta .credibility-score { flex: 0 0 45%; }

/* Variant B: label above the pill, value inside. Each metric is a column;
   the pill is full width of its column, centred text. */
.credibility-lede--stacked .credibility-meta .credibility-metric {
  flex: 1 1 0;
  min-width: 0;
}
.credibility-lede--stacked .credibility-meta .metric-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.credibility-lede--stacked .credibility-meta .rank-pill,
.credibility-lede--stacked .credibility-meta .score-pill {
  display: block;
  text-align: center;
}
.credibility-lede--stacked .credibility-note { flex: none; }

/* Score pill: the credibility score as a pill, fill proportional to the score. */
.score-pill {
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: #3d3834;
  border: 1px solid #3d3834;
  border-radius: 999px;
  padding: 4px 10px;
  overflow: hidden;
  white-space: nowrap;
}
.score-pill-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 999px 0 0 999px;
}
.score-pill-text { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .credibility-lede--stacked .credibility-meta { flex-direction: column; align-items: stretch; gap: 14px; }
  .credibility-lede--stacked .credibility-meta .credibility-score { flex: none; }
  .credibility-lede--stacked .credibility-meta .credibility-metric { flex: none; }
}
.credibility-score .score-bar { margin: 0; }
@media (max-width: 640px) {
  .credibility-lede { flex-direction: column; align-items: stretch; gap: 12px; }
  .credibility-score { flex: none; }
}
/* Bitcoin support box: QR in a white frame beside the address and actions. */
.btc-box {
  display: flex;
  gap: 24px;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  padding: 24px;
  margin: 20px 0;
}
.btc-qr-wrap {
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
}
.btc-qr { display: block; width: 140px; height: 140px; }
.btc-details { min-width: 0; }
.btc-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.btc-address { margin: 0 0 16px; }
.btc-address code {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ink-strong);
  word-break: break-all;
}
.btc-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 0; }
.btc-copy {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}
.btc-copy:hover { background: #9c4a18; border-color: #9c4a18; }
.btc-wallet {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}
.btc-wallet:hover { color: var(--ink-strong); border-color: var(--ink-strong); }
@media (max-width: 640px) {
  .weights div, .weight-total { grid-template-columns: 1fr auto; }
  .track { grid-column: 1 / -1; }
  .weight-total span:first-child { grid-column: 1; }
  .bands-list div { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .bands-list dd:last-child { grid-column: 1 / -1; font-size: 14px; color: var(--ink); }
  .btc-box { flex-direction: column; align-items: center; text-align: center; padding: 20px; }
  .btc-details { width: 100%; }
  .btc-address code { font-size: 15px; }
  .btc-actions { justify-content: center; }
}
.article-date { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 16px 0 14px; }
/* Updated date at the bottom of report and guide pages: right-aligned, above the footer. */
.article-updated { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 28px 0 0; text-align: right; }

.article h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-strong);
  margin: 56px 0 18px;
  max-width: 880px;
}
.article h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink-strong);
  margin: 32px 0 10px;
  max-width: 880px;
}
.article p { font-size: 16px; line-height: 1.65; margin-bottom: 16px; max-width: 880px; }
.article .lede { font-size: 17px; line-height: 1.65; color: var(--ink-strong); max-width: 880px; }
.dimension-card { margin-top: 28px; }
.dimension-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; max-width: 880px; }
.dimension-head h3 { margin: 0; flex: 1 1 auto; min-width: 0; }
.pts-badge {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  background: rgba(179, 84, 30, 0.08);
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.dimension-summary { font-style: italic; color: var(--ink); }
.article-back { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; }
.article-back a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }
.article-back a:hover { color: var(--ink-strong); border-color: var(--ink-strong); }

/* Visually hidden but available to screen readers (card headings). */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Footer "More" dropdown (Sources, Privacy, Corrections). CSS-only: opens on
   hover and on keyboard/touch focus, closes when focus moves away. The menu
   opens upward since the footer sits at the bottom of the page. */
.footer-dropdown { position: relative; display: inline-flex; }
.footer-dropdown > button {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.footer-dropdown > button:hover { color: var(--accent); }
.footer-dropdown > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.footer-caret { font-size: 11px; color: var(--muted); }
.footer-dropdown-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  min-width: 170px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(43, 39, 36, 0.14);
  z-index: 30;
}
.footer-dropdown:hover .footer-dropdown-menu,
.footer-dropdown:focus-within .footer-dropdown-menu { display: block; }
.footer-dropdown-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.footer-dropdown-menu a:hover { background: var(--accent-soft); color: var(--ink); }