@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,650;9..144,800&family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

:root {
  --page: #f4f6f0;
  --paper: #fffdf8;
  --ink: #16211f;
  --ink-soft: #3f4c48;
  --muted: #66726e;
  --line: #cbd3c8;
  --line-strong: #9eaaa0;
  --sage: #617560;
  --sage-soft: #e4ebdf;
  --brick: #93493f;
  --brick-soft: #f2dfdb;
  --blue: #2f5d78;
  --blue-soft: #dfeaf0;
  --gold: #ad7f32;
  --gold-soft: #f4ead6;
  --violet: #61537e;
  --violet-soft: #e8e2f0;
  --paper-shadow: 0 18px 48px rgba(71, 83, 73, 0.08);
  --max: 1180px;
  --radius: 8px;
  --body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Fraunces", Georgia, serif;
  --mono: "IBM Plex Mono", "JetBrains Mono", monospace;
}

html {
  background: var(--page);
}

body.page-redesign {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(22, 33, 31, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(22, 33, 31, 0.03) 1px, transparent 1px),
    var(--page) !important;
  background-size: 34px 34px;
  font-family: var(--body) !important;
  line-height: 1.62;
}

body.page-redesign::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 14% 0%, rgba(147, 73, 63, 0.11), transparent 34rem),
    radial-gradient(circle at 88% 12%, rgba(97, 117, 96, 0.12), transparent 28rem),
    linear-gradient(180deg, rgba(255, 253, 248, 0.92), rgba(244, 246, 240, 0.82));
  pointer-events: none;
}

body.page-redesign .global-nav {
  --global-nav-bg: rgba(244, 246, 240, 0.94);
  --global-nav-line: #cbd3c8;
  --global-nav-text: #16211f;
  --global-nav-muted: #3f4c48;
  --global-nav-active: #93493f;
  --global-nav-focus: rgba(147, 73, 63, 0.24);
  box-shadow: 0 1px 0 rgba(22, 33, 31, 0.04);
}

body.page-redesign a {
  color: inherit;
}

body.page-redesign h1,
body.page-redesign h2,
body.page-redesign h3,
body.page-redesign h4 {
  color: var(--ink);
  font-family: var(--display);
  letter-spacing: 0;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

body.page-redesign h1 {
  font-size: clamp(2.3rem, 7vw, 4.8rem);
  line-height: 1.04;
  overflow-wrap: break-word;
}

body.page-redesign h2 {
  font-size: clamp(1.65rem, 4vw, 2.9rem);
  line-height: 1.08;
}

body.page-redesign h3 {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.14;
}

body.page-redesign p,
body.page-redesign li,
body.page-redesign td,
body.page-redesign th {
  overflow-wrap: anywhere;
}

body.page-redesign p,
body.page-redesign li {
  color: var(--ink-soft);
}

.evidence-brief {
  max-width: var(--max);
  margin: 0 auto clamp(2rem, 5vw, 3.4rem);
  padding: clamp(2.2rem, 6vw, 4.8rem) 1.25rem clamp(1.6rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}

.evidence-brief__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.48fr);
  gap: clamp(1.3rem, 4vw, 3rem);
  align-items: end;
}

.evidence-brief__kicker,
.evidence-brief__meta span,
.page-redesign .eyebrow,
.page-redesign .section-label,
.page-redesign .badge,
.page-redesign .tag,
.page-redesign .pill {
  font-family: var(--mono);
  letter-spacing: 0;
  text-transform: uppercase;
}

.evidence-brief__kicker {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--brick);
  font-size: 0.78rem;
  font-weight: 600;
}

.evidence-brief__summary {
  max-width: 820px;
  margin: 1.15rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
}

.evidence-brief__answer {
  margin: 1.35rem 0 0;
  padding: 1rem 1.1rem;
  color: var(--ink-soft);
  background: var(--sage-soft);
  border: 1px solid #bdcbb8;
  border-radius: var(--radius);
}

.evidence-brief__answer strong {
  color: var(--ink);
}

.evidence-brief__meta {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
  background: rgba(255, 253, 248, 0.84);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--paper-shadow);
}

.evidence-brief__meta span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.evidence-brief__meta strong {
  display: block;
  margin-top: 0.14rem;
  color: var(--ink);
  font-size: 0.98rem;
}

body.page-redesign main,
body.page-redesign .shell,
body.page-redesign .page-shell,
body.page-redesign .container {
  max-width: var(--max) !important;
}

body.page-redesign main,
body.page-redesign .shell,
body.page-redesign .page-shell {
  margin-inline: auto !important;
  padding-inline: 1.25rem !important;
}

body.page-redesign .hero,
body.page-redesign .page-header,
body.page-redesign .site-header {
  max-width: var(--max);
  margin: 0 auto 2rem;
  padding: clamp(1.4rem, 4vw, 2.4rem) 1.25rem;
  color: var(--ink);
  background: rgba(255, 253, 248, 0.72) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

body.page-redesign .hero-inner,
body.page-redesign .hero-layout,
body.page-redesign .hero-grid {
  min-height: auto !important;
  padding: 0 !important;
}

body.page-redesign .hero span,
body.page-redesign .accent {
  color: var(--brick) !important;
}

body.page-redesign .lead,
body.page-redesign .lede,
body.page-redesign .subtitle,
body.page-redesign .prose {
  color: var(--ink-soft) !important;
  font-size: 1.05rem;
}

body.page-redesign .card,
body.page-redesign .panel,
body.page-redesign .section,
body.page-redesign .section-block,
body.page-redesign .dataset-card,
body.page-redesign .topic-card,
body.page-redesign .hyp-card,
body.page-redesign .scenario-card,
body.page-redesign .metric-card,
body.page-redesign .hero-card,
body.page-redesign .stat-box,
body.page-redesign .brief-item,
body.page-redesign .compare-box,
body.page-redesign .gap-col,
body.page-redesign .flow-step,
body.page-redesign .bar-card,
body.page-redesign .profile-card,
body.page-redesign .country-card,
body.page-redesign .control-band,
body.page-redesign .topic-band,
body.page-redesign .question-rail,
body.page-redesign .comparison-body,
body.page-redesign details,
body.page-redesign article {
  background: rgba(255, 253, 248, 0.88) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

body.page-redesign .card,
body.page-redesign .panel,
body.page-redesign .section-block,
body.page-redesign .dataset-card,
body.page-redesign .topic-card,
body.page-redesign .hyp-card,
body.page-redesign .scenario-card,
body.page-redesign .metric-card,
body.page-redesign .hero-card,
body.page-redesign .stat-box,
body.page-redesign .brief-item,
body.page-redesign .compare-box,
body.page-redesign .gap-col,
body.page-redesign .flow-step,
body.page-redesign .bar-card,
body.page-redesign .profile-card,
body.page-redesign .country-card,
body.page-redesign article {
  padding: clamp(1rem, 2.2vw, 1.35rem) !important;
}

body.page-redesign .stat-box .num,
body.page-redesign .stat-box .label,
body.page-redesign .brief-item strong,
body.page-redesign .brief-item span,
body.page-redesign .compare-box strong,
body.page-redesign .compare-box span,
body.page-redesign .gap-col h3,
body.page-redesign .flow-step h4,
body.page-redesign .flow-step .flow-source {
  color: var(--ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.page-redesign .brief-item p,
body.page-redesign .compare-box p,
body.page-redesign .gap-col li,
body.page-redesign .flow-step p {
  color: var(--ink-soft) !important;
}

body.page-redesign .nav-card,
body.page-redesign .dataset-card,
body.page-redesign .hyp-card,
body.page-redesign a.card,
body.page-redesign button,
body.page-redesign .chip,
body.page-redesign .filter-btn,
body.page-redesign .action-link,
body.page-redesign .cta-btn {
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

body.page-redesign .nav-card:hover,
body.page-redesign .dataset-card:hover,
body.page-redesign .hyp-card:hover,
body.page-redesign a.card:hover,
body.page-redesign button:hover,
body.page-redesign .chip:hover,
body.page-redesign .filter-btn:hover,
body.page-redesign .action-link:hover,
body.page-redesign .cta-btn:hover {
  transform: translateY(-2px);
}

body.page-redesign a:focus-visible,
body.page-redesign button:focus-visible,
body.page-redesign input:focus-visible,
body.page-redesign select:focus-visible,
body.page-redesign summary:focus-visible {
  outline: 2px solid rgba(147, 73, 63, 0.42) !important;
  outline-offset: 3px !important;
}

body.page-redesign table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
}

body.page-redesign th {
  color: var(--ink);
  background: var(--sage-soft) !important;
}

body.page-redesign td,
body.page-redesign th {
  border-color: var(--line) !important;
}

body.page-redesign pre,
body.page-redesign code {
  color: var(--ink);
  background: #edf1e9 !important;
  border-color: var(--line) !important;
  font-family: var(--mono);
  white-space: pre-wrap;
}

body.page-redesign pre {
  max-width: 100%;
  overflow-x: auto;
}

body.page-redesign input,
body.page-redesign select,
body.page-redesign textarea {
  color: var(--ink) !important;
  background: var(--paper) !important;
  border-color: var(--line-strong) !important;
}

body.page-redesign footer {
  color: var(--muted);
  border-top-color: var(--line) !important;
}

body.page-redesign [style*="color:#fff"],
body.page-redesign [style*="color: #fff"],
body.page-redesign [style*="color:white"],
body.page-redesign [style*="color: white"] {
  color: var(--ink) !important;
}

@media (max-width: 820px) {
  .evidence-brief__grid {
    grid-template-columns: 1fr;
  }

  .evidence-brief__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-redesign .hero,
  body.page-redesign .page-header,
  body.page-redesign .site-header {
    margin-inline: 1rem;
  }
}

@media (max-width: 720px) {
  body.page-redesign table {
    display: block;
    max-width: 100%;
    min-width: 680px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.page-redesign td,
  body.page-redesign th {
    overflow-wrap: normal;
  }
}

@media (max-width: 520px) {
  .evidence-brief {
    padding-top: 2rem;
  }

  .evidence-brief__meta {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-redesign *,
  body.page-redesign *::before,
  body.page-redesign *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}