/* ───── Nutrition Cosmos — Design Language v1 ──────────────────────────── */
/* Editorial-science. Calm, dense, trustworthy. No decoration that doesn't  */
/* carry information.                                                       */
/* ──────────────────────────────────────────────────────────────────────── */

/* ── 01 — Typography ───────────────────────────────────────────────────── */
:root {
  /* Typefaces */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Type scale — major third 1.250 */
  --t-3xl: 3.40rem;   /* Hero display */
  --t-2xl: 2.44rem;   /* Section titles */
  --t-xl: 1.95rem;    /* Subsection */
  --t-lg: 1.56rem;    /* Card / block heads */
  --t-md: 1.25rem;    /* Study titles, lede */
  --t-base: 1.00rem;  /* Body */
  --t-sm: 0.875rem;   /* Metadata, UI */
  --t-xs: 0.75rem;    /* Eyebrows, tags, identifiers */
}

/* ── 02 — Color ────────────────────────────────────────────────────────── */
:root {
  /* Core */
  --paper: #f7f5f0;
  --paper-raised: #fffefb;
  --ink: #16150f;
  --ink-soft: #4a473d;
  --hairline: #ddd9cd;
  --indigo: #34357a;
  --indigo-light: #e5e6f2;
  --indigo-hover: #2a2b62;

  /* Certainty scale (GRADE) — semantic, never decorative */
  --certainty-high: #1f7a6d;
  --certainty-high-bg: #e3f0ed;
  --certainty-moderate: #a8761b;
  --certainty-moderate-bg: #f5edd6;
  --certainty-low: #a85436;
  --certainty-low-bg: #f4e3da;
  --certainty-vlow: #7d7a70;
  --certainty-vlow-bg: #eae8e2;

  /* Flags */
  --flag-warning: #a85436;
  --flag-warning-bg: #fef0ea;
}

/* ── 03 — Spacing & Layout ─────────────────────────────────────────────── */
:root {
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  --measure: 68ch;
  --maxw: 1180px;
  --radius: 3px;
  --radius-pill: 100px;
}

/* ── Base Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--s8);
  font-size: 16px;
}

@media (max-width: 720px) {
  html { font-size: 15px; }
}

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }
a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--indigo-hover); }
::selection { background: var(--indigo-light); color: var(--indigo); }

/* ── Typography ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--t-2xl); font-weight: 700; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

@media (min-width: 900px) {
  h1 { font-size: var(--t-3xl); }
  h2 { font-size: var(--t-2xl); }
}

p { max-width: var(--measure); font-size: var(--t-base); }
.lede { font-size: var(--t-md); font-family: var(--font-display); font-weight: 400; line-height: 1.45; }
.small { font-size: var(--t-sm); color: var(--ink-soft); }
.mono { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: -0.01em; }

/* ── Container ─────────────────────────────────────────────────────────── */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5); }

/* ── Section rhythm ────────────────────────────────────────────────────── */
.section { padding: var(--s9) 0; }
.section-stats { padding: 0 0 var(--s9); }
.section-hero { padding: var(--s9) 0 0; }

.section-header {
  margin-bottom: var(--s7);
  max-width: var(--measure);
}

.section-header h2 { margin-bottom: var(--s3); }
.section-header .sub { font-size: var(--t-base); color: var(--ink-soft); max-width: var(--measure); line-height: 1.6; }

/* ── Hairline dividers ─────────────────────────────────────────────────── */
hr { border: none; border-top: 1px solid var(--hairline); margin: var(--s7) 0; }

/* ── 03 — Components ──────────────────────────────────────────────────── */

/* Certainty pills */
.pill {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: var(--t-xs); font-weight: 500; line-height: 1.4;
}
.pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.pill-high { background: var(--certainty-high-bg); color: var(--certainty-high); }
.pill-high::before { background: var(--certainty-high); }
.pill-moderate { background: var(--certainty-moderate-bg); color: var(--certainty-moderate); }
.pill-moderate::before { background: var(--certainty-moderate); }
.pill-low { background: var(--certainty-low-bg); color: var(--certainty-low); }
.pill-low::before { background: var(--certainty-low); }
.pill-vlow { background: var(--certainty-vlow-bg); color: var(--certainty-vlow); }
.pill-vlow::before { background: var(--certainty-vlow); }
.pill-indigo { background: var(--indigo-light); color: var(--indigo); }
.pill-indigo::before { background: var(--indigo); }

/* Data-quality flag */
.data-flag {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 2px 10px; border-radius: var(--radius);
  font-size: var(--t-xs); font-weight: 500;
  background: var(--flag-warning-bg); color: var(--flag-warning);
}
.data-flag::before { content: '⚠'; font-size: 11px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 8px 20px; border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--t-sm); font-weight: 500;
  border: none; cursor: pointer; text-decoration: none;
  transition: background 0.12s ease, transform 0.12s ease;
  line-height: 1.4;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--indigo); color: white; }
.btn-primary:hover { background: var(--indigo-hover); transform: translateY(-1px); }
.btn-secondary { background: var(--paper-raised); color: var(--ink); border: 1px solid var(--hairline); }
.btn-secondary:hover { border-color: var(--indigo); color: var(--indigo); }
.btn-filter-active { background: var(--indigo-light); color: var(--indigo); font-size: var(--t-xs); }
.btn-filter-inactive { background: transparent; color: var(--ink-soft); border: 1px solid var(--hairline); font-size: var(--t-xs); }
.btn-filter-inactive:hover { border-color: var(--ink-soft); }

/* Study card — the core unit */
.study-card {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s5);
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.study-card:hover { border-color: var(--indigo); transform: translateY(-2px); }
.study-card .affiliation { font-size: var(--t-xs); color: var(--ink-soft); }
.study-card .affiliation + .affiliation::before { content: '· '; }
.study-card h3 { font-size: var(--t-md); margin-bottom: var(--s1); line-height: 1.3; }
.study-card .meta { font-size: var(--t-xs); color: var(--ink-soft); margin-bottom: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s1) 0; }
.study-card .meta span + span::before { content: '· '; margin-left: var(--s1); }
.study-card .summary { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.55; max-width: var(--measure); margin-bottom: var(--s3); }
.study-card .footer { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.study-card .footer .tags { display: flex; flex-wrap: wrap; gap: var(--s1); }

/* Tag */
.tag {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius);
  font-size: var(--t-xs); font-weight: 500;
  background: var(--paper); color: var(--ink-soft);
  border: 1px solid var(--hairline); line-height: 1.5;
}
.tag-topical { background: var(--indigo-light); color: var(--indigo); border: none; }

/* Callout box */
.callout {
  background: var(--paper-raised);
  border-left: 3px solid var(--indigo);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
  max-width: var(--measure);
}
.callout .callout-label {
  font-size: var(--t-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--indigo); margin-bottom: var(--s2);
}
.callout p { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.6; }

/* Evidence-quality bar */
.eq-bar {
  display: flex; height: 6px; border-radius: var(--radius-pill); overflow: hidden; width: 100%;
}
.eq-bar .seg-high { background: var(--certainty-high); }
.eq-bar .seg-moderate { background: var(--certainty-moderate); }
.eq-bar .seg-low { background: var(--certainty-low); }
.eq-bar .seg-vlow { background: var(--certainty-vlow); }

/* ── Nav ────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--s8);
  background: var(--paper-raised);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5);
  height: 100%; display: flex; align-items: center; gap: var(--s5);
}
.nav-logo {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-base);
  color: var(--ink); white-space: nowrap;
}
.nav-links { display: flex; gap: var(--s4); flex: 1; }
.nav-links a {
  font-size: var(--t-sm); color: var(--ink-soft); text-decoration: none;
  padding: var(--s1) 0; border-bottom: 1px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.nav-links a:hover { color: var(--indigo); border-bottom-color: var(--indigo); }
.nav-status {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--ink-soft); white-space: nowrap;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero-section { padding: var(--s9) 0 var(--s7); }
.hero-section h1 {
  font-size: var(--t-2xl); font-weight: 700; max-width: 22ch;
  margin-bottom: var(--s5); letter-spacing: -0.02em;
}
@media (min-width: 900px) {
  .hero-section h1 { font-size: var(--t-3xl); }
}
.hero-section .lede {
  max-width: var(--measure); margin-bottom: var(--s6);
  color: var(--ink-soft);
}
.hero-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* ── Stats bar ──────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s4);
}
.stat-cell { }
.stat-cell .num { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 600; line-height: 1; color: var(--indigo); }
.stat-cell .stat-label { font-size: var(--t-sm); color: var(--ink-soft); margin-top: var(--s1); }

/* ── Card grids ─────────────────────────────────────────────────────────── */
.card-grid {
  display: grid; gap: var(--s4);
}
.card-grid-2 { grid-template-columns: 1fr 1fr; }
.card-grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card-grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s5);
  transition: border-color 0.12s ease;
}
.card:hover { border-color: var(--indigo); }
.card h3 { font-size: var(--t-base); margin-bottom: var(--s2); }
.card p { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.6; max-width: none; }
.card .card-meta { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s1); }

/* ── Architecture stack ────────────────────────────────────────────────── */
.arch-stack { display: flex; flex-direction: column; gap: 2px; }
.arch-layer {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s5);
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.arch-layer:hover { border-color: var(--indigo); transform: translateX(3px); }
.arch-layer .layer-label {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--ink-soft); margin-bottom: var(--s1);
}
.arch-layer .layer-tag {
  display: inline-block; font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--indigo); margin-top: var(--s2);
}
.arch-arrow { text-align: center; padding: var(--s1) 0; color: var(--hairline); font-size: 14px; }

/* ── Domain grid ────────────────────────────────────────────────────────── */
.domain-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s2);
}
.domain-cell {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s4);
  transition: border-color 0.12s ease;
}
.domain-cell:hover { border-color: var(--indigo); }
.domain-cell .code { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-soft); margin-bottom: var(--s1); }
.domain-cell h4 { font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--s1); }
.domain-cell p { font-size: var(--t-xs); color: var(--ink-soft); max-width: none; }

/* ── Evidence ladder ───────────────────────────────────────────────────── */
.ev-ladder { display: flex; flex-direction: column; gap: 2px; }
.ev-tier {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4); font-size: var(--t-sm);
  border-radius: var(--radius); border: 1px solid var(--hairline);
  background: var(--paper-raised);
}
.ev-tier .tier-num { font-weight: 600; font-size: var(--t-base); min-width: 20px; }
.ev-tier .tier-label { flex: 1; }
.ev-tier .tier-examples { font-size: var(--t-xs); color: var(--ink-soft); }
.ev-sr .tier-num { color: var(--certainty-high); }
.ev-rct .tier-num { color: var(--certainty-moderate); }
.ev-obs .tier-num { color: var(--certainty-low); }
.ev-low .tier-num { color: var(--certainty-vlow); }

/* ── Accordion ──────────────────────────────────────────────────────────── */
.acc { display: flex; flex-direction: column; gap: 2px; }
.acc details {
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius); overflow: hidden;
}
.acc summary {
  padding: var(--s3) var(--s4); cursor: pointer; font-weight: 500; font-size: var(--t-sm);
  display: flex; align-items: center; gap: var(--s2);
  transition: background 0.12s ease;
}
.acc summary:hover { background: var(--paper); }
.acc .body { padding: 0 var(--s4) var(--s4) var(--s6); font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.6; }

/* ── Longevity cards ───────────────────────────────────────────────────── */
.bio-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--s2);
}
.bio-card {
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--s4);
}
.bio-card h4 { font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--s1); }
.bio-card .class-tag {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--ink-soft); margin-bottom: var(--s2); display: block;
}
.bio-card p { font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.5; max-width: none; }
.bio-card .ids { font-family: var(--font-mono); font-size: 10px; color: var(--ink-soft); margin-top: var(--s2); }

/* ── Hallmarks ──────────────────────────────────────────────────────────── */
.hallmarks-box {
  margin-top: var(--s5); padding: var(--s5);
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.hallmarks-box h3 { font-size: var(--t-base); margin-bottom: var(--s2); }
.hallmarks-box p.sub { font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: var(--s4); }
.hallmark-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s1) var(--s5); }
.hallmark-grid li { font-size: var(--t-sm); color: var(--ink-soft); list-style: none; padding: var(--s1) 0; }
.hallmark-grid li::before { content: '↑ '; color: var(--certainty-high); }

/* Pathway tags */
.ptag {
  display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: var(--t-xs); font-weight: 500;
  background: var(--paper-raised); color: var(--ink-soft);
  border: 1px solid var(--hairline); line-height: 1.5;
}

/* ── Dataset grid ───────────────────────────────────────────────────────── */
.ds-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s2);
}
.ds-cell {
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--s4); text-align: center;
}
.ds-cell h4 { font-size: var(--t-sm); font-weight: 600; margin-bottom: 2px; }
.ds-cell p { font-size: var(--t-xs); color: var(--ink-soft); max-width: none; }
.ds-cell .src { font-family: var(--font-mono); font-size: 10px; color: var(--indigo); margin-top: var(--s1); }

/* ── Phase rows ─────────────────────────────────────────────────────────── */
.ph-grid { display: flex; flex-direction: column; gap: var(--s2); }
.ph-row {
  display: grid; grid-template-columns: 48px 1fr auto;
  gap: var(--s4); align-items: start;
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--s4) var(--s5);
  transition: border-color 0.12s ease;
}
.ph-row:hover { border-color: var(--indigo); }
.ph-row .num { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; color: var(--hairline); line-height: 1; }
.ph-row .ph-info h4 { font-size: var(--t-sm); font-weight: 600; margin-bottom: 2px; }
.ph-row .ph-info p { font-size: var(--t-xs); color: var(--ink-soft); max-width: none; }
.ph-row .duration { font-size: var(--t-xs); color: var(--ink-soft); text-align: right; white-space: nowrap; }

/* ── Timeline ───────────────────────────────────────────────────────────── */
.tl { position: relative; padding-left: var(--s5); margin-top: var(--s6); }
.tl::before {
  content: ''; position: absolute; left: 7px; top: var(--s2); bottom: var(--s2);
  width: 1px; background: var(--hairline);
}
.tl-item { position: relative; padding: 0 0 var(--s6) var(--s5); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: calc(-1 * var(--s5) + 3px); top: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--indigo); border: 2px solid var(--paper);
}
.tl-item h4 { font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--s1); }
.tl-item p { font-size: var(--t-xs); color: var(--ink-soft); max-width: none; }

/* ── Schema block ───────────────────────────────────────────────────────── */
.code-block {
  font-family: var(--font-mono); font-size: var(--t-xs);
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--s4); color: var(--ink-soft);
  overflow-x: auto; line-height: 1.6;
}
.code-block .keyword { color: var(--indigo); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--hairline);
  padding: var(--s7) 0; margin-top: 0;
  font-size: var(--t-sm); color: var(--ink-soft);
}
.footer .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s5); }
.footer h5 { font-family: var(--font-body); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--s3); color: var(--ink); }
.footer ul { list-style: none; }
.footer li { margin-bottom: var(--s1); }
.footer a { font-size: var(--t-sm); color: var(--ink-soft); text-decoration: none; }
.footer a:hover { color: var(--indigo); text-decoration: underline; }
.footer .bottom { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--hairline); text-align: center; font-size: var(--t-xs); }

/* ── Loading / empty / error states ─────────────────────────────────────── */
.loading-state { padding: var(--s7) 0; text-align: center; }
.loading-state p { font-size: var(--t-sm); color: var(--ink-soft); margin: 0 auto; }
.empty-state { padding: var(--s7) 0; text-align: center; }
.empty-state h3 { font-family: var(--font-display); font-size: var(--t-lg); margin-bottom: var(--s2); }
.empty-state p { font-size: var(--t-sm); color: var(--ink-soft); margin: 0 auto; }

/* ── Motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .study-card:hover, .arch-layer:hover { transform: none; }
}

/* ── Accessibility ───────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .card-grid-2 { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .ph-row { grid-template-columns: 1fr; gap: var(--s1); }
  .ph-row .duration { text-align: left; }
  .domain-grid { grid-template-columns: 1fr 1fr; }
  .hallmark-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .domain-grid { grid-template-columns: 1fr; }
  .ds-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
}