/* Research with Dr. Sana — site styles
   "The clinical archive": engraved plates on aged paper, cut with the flat colour and
   hairline rules of a research journal. Sharp corners, no shadows, one loud accent. */

:root {
  --paper: #f5efe3;
  --paper-2: #eae0cd;
  --surface: #fffaf0;
  --ink: #121b19;
  --ink-2: #354743;
  --muted: #697c76;
  --rule: #d3c6ad;
  --rule-soft: #e5dbc6;
  --teal-900: #062b2a;
  --teal: #0a3a38;
  --teal-700: #0f5450;
  --teal-600: #157d76;
  --teal-tint: #d7e8e2;
  --clay: #c0431d;
  --clay-tint: #f7e1d7;
  --gold: #ab7a0b;
  --gold-tint: #f7e9ce;
  --danger: #a8331a;
  --danger-tint: #f8e2da;
  --bar: #0f7d74;
  --bar-track: #ded2bb;
  --link: #0d6a63;
  --on-dark: #f2f7f4;
  --on-dark-dim: #a8c4bd;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

/* Dark is the same ink at night, not a grey theme: the base carries teal so the
   coloured bands still separate and the accent can stay loud. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #071b1c;
    --paper-2: #0b2527;
    --surface: #0d2b2c;
    --ink: #eef5f2;
    --ink-2: #c2d6d1;
    --muted: #86a19b;
    --rule: #1e3c3b;
    --rule-soft: #16302f;
    --teal-900: #062e2e;
    --teal: #0c4140;
    --teal-700: #13524f;
    --teal-600: #47b8ae;
    --teal-tint: #103230;
    --clay: #ff6b40;
    --clay-tint: #311a12;
    --gold: #ecb44d;
    --gold-tint: #2d2414;
    --danger: #ff7f5c;
    --danger-tint: #311a14;
    --bar: #2bb6a8;
    --bar-track: #16302f;
    --link: #5fc9bf;
    --on-dark: #f2f7f4;
    --on-dark-dim: #a9c8c1;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #071b1c; --paper-2: #0b2527; --surface: #0d2b2c;
  --ink: #eef5f2; --ink-2: #c2d6d1; --muted: #86a19b;
  --rule: #1e3c3b; --rule-soft: #16302f;
  --teal-900: #062e2e; --teal: #0c4140; --teal-700: #13524f; --teal-600: #47b8ae; --teal-tint: #103230;
  --clay: #ff6b40; --clay-tint: #311a12;
  --gold: #ecb44d; --gold-tint: #2d2414;
  --danger: #ff7f5c; --danger-tint: #311a14;
  --bar: #2bb6a8; --bar-track: #16302f; --link: #5fc9bf;
  --on-dark: #f2f7f4; --on-dark-dim: #a9c8c1;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 400 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--clay); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; margin: 0; }
h1 { font-size: clamp(38px, 5.2vw, 66px); }
h2 { font-size: clamp(28px, 3.4vw, 42px); }
h3 { font-size: clamp(20px, 2vw, 25px); }
p { margin: 0 0 1.1em; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 50; background: var(--clay); color: #fff; padding: 10px 14px; }

/* ---------------------------------------------------------------- header */

.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 30; }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand img { width: 34px; height: 34px; }
.brand-name { font: 600 19px/1.1 var(--serif); letter-spacing: -0.01em; }
.brand-name b { color: var(--clay); font-weight: 600; }
.brand-name span { display: block; font: 400 11.5px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.nav { display: flex; gap: 26px; }
.nav a { font: 500 15px/1 var(--sans); color: var(--ink-2); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--clay); border-bottom-color: var(--clay); }
.theme-btn, .menu-btn { background: none; border: 1px solid var(--rule); color: var(--ink-2); width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.theme-btn:hover, .menu-btn:hover { border-color: var(--clay); color: var(--clay); }
.theme-btn svg, .menu-btn svg { width: 18px; height: 18px; }
.menu-btn { display: none; }

/* ---------------------------------------------------------------- the signature: eyebrow with a rule */

.eyebrow {
  font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay); margin: 0 0 14px; display: block;
}
.eyebrow::before { content: ""; display: block; width: 34px; height: 3px; background: var(--clay); margin-bottom: 12px; }
.news-card .eyebrow { color: var(--gold); }
.news-card .eyebrow::before { background: var(--gold); }

.section { padding: 86px 0; border-top: 1px solid var(--rule); }
.section.alt { background: var(--paper-2); }
.section.dark { background: var(--teal); color: var(--on-dark); border-top: 0; }
.section.dark h2, .section.dark h3 { color: var(--on-dark); }
.section.dark .lede, .section.dark p { color: var(--on-dark-dim); }
.section.dark .eyebrow { color: var(--gold); }
.section.dark .eyebrow::before { background: var(--gold); }
.section-head { max-width: 46em; margin-bottom: 44px; }
.lede { font-size: 19px; color: var(--ink-2); max-width: 44em; margin: 14px 0 0; }

/* ---------------------------------------------------------------- hero */

/* full-bleed asymmetric split: the teal panel runs off the left edge, the plate off the right,
   while the type still lines up with the grid every other section uses. */
.hero { display: grid; grid-template-columns: 1.04fr .96fr; align-items: stretch;
        border-bottom: 1px solid var(--rule); background: var(--paper); }
.hero-text { background: var(--teal-900); color: var(--on-dark); position: relative; z-index: 2;
             display: flex; flex-direction: column; justify-content: center;
             padding: 78px 64px 72px; padding-left: max(28px, calc((100vw - 1180px) / 2 + 28px)); }
.hero-text .eyebrow { color: var(--gold); }
.hero-text .eyebrow::before { background: var(--gold); }
.hero-text h1 { color: #fff; max-width: 13em; }
.hero-text h1 em { font-style: italic; color: var(--gold); }
.hero-text .lede { color: var(--on-dark-dim); font-size: 18px; margin-top: 22px; max-width: 30em; }
.hero-figure { position: relative; min-height: 540px; margin: 0; }
.hero-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.btn { display: inline-block; font: 600 14.5px/1 var(--sans); padding: 14px 20px; text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--clay); color: #fff; border-color: var(--clay); }
.btn-primary:hover { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn-ghost { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.34); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.section .btn-ghost { color: var(--ink-2); border-color: var(--rule); }
.section .btn-ghost:hover { color: var(--clay); border-color: var(--clay); }

/* the news panel, now a bordered sheet rather than a floating card */
.news-card { border: 1px solid var(--rule); border-left: 3px solid var(--gold); background: var(--surface); padding: 26px 28px; }
.section.dark .news-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16); border-left-color: var(--gold); }
.news-card h3 { margin-bottom: 10px; }
.news-card .stat-row { display: flex; flex-wrap: wrap; gap: 28px; margin: 20px 0 16px; }
.news-card .stat { font: 600 30px/1 var(--serif); color: var(--gold); }
.news-card .stat span { display: block; font: 400 12.5px/1.4 var(--sans); color: var(--muted); margin-top: 6px; letter-spacing: .02em; }
.section.dark .news-card .stat span { color: var(--on-dark-dim); }
.news-card .src { font-size: 12px; color: var(--muted); margin: 10px 0 0; }

/* ---------------------------------------------------------------- disease index (replaces the card grid) */

.cards { display: block; border-top: 1px solid var(--rule); }
.card {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 0 28px; align-items: baseline;
  padding: 26px 0 24px; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--ink); position: relative;
}
.card:hover { color: var(--ink); }
.card:hover .n { color: var(--clay); }
.card:hover h3 { text-decoration: underline; text-decoration-color: var(--clay); text-underline-offset: 5px; }
.card .n { font: 600 36px/1 var(--serif); color: var(--clay); opacity: .45; font-variant-numeric: tabular-nums; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 16px; color: var(--ink-2); margin: 0; max-width: 54em; }
.card .meta { font: 500 12px/1.5 var(--sans); color: var(--muted); text-align: right; white-space: nowrap; letter-spacing: .04em; }
.card .meta b { display: block; font-weight: 600; color: var(--muted); text-transform: uppercase; font-size: 10.5px; letter-spacing: .12em; margin-bottom: 5px; }
.chip { display: inline-block; font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.chip.teal { color: var(--teal-600); }

/* ---------------------------------------------------------------- article pages */

.article-hero { border-bottom: 1px solid var(--rule); background: var(--paper-2); position: relative; overflow: hidden; }
.article-hero .wrap { padding-top: 54px; padding-bottom: 46px; position: relative; z-index: 2; }
.article-hero h1 { max-width: 15em; }
.article-hero .kicker { font-size: 20px; color: var(--ink-2); margin: 18px 0 20px; max-width: 32em; }
.article-plate { position: absolute; inset: 0; z-index: 1; opacity: .5; }
.article-plate img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.article-plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--paper-2) 34%, rgba(236,228,212,.55) 62%, rgba(236,228,212,0) 92%); }
:root[data-theme="dark"] .article-plate, :root:not([data-theme="light"]) .article-plate { opacity: .22; }
:root[data-theme="dark"] .article-plate::after { background: linear-gradient(100deg, var(--paper-2) 34%, rgba(20,29,28,.6) 62%, rgba(20,29,28,0) 92%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .article-plate::after { background: linear-gradient(100deg, var(--paper-2) 34%, rgba(20,29,28,.6) 62%, rgba(20,29,28,0) 92%); }
}

.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 14px; color: var(--muted); margin-top: 22px; }
.byline img { width: 30px; height: 30px; }
.byline .who { color: var(--ink-2); font-weight: 600; }
.review { font: 600 12px/1 var(--sans); letter-spacing: .04em; padding: 7px 10px; border: 1px solid var(--rule); color: var(--muted); }
.review.ok { color: var(--bar); border-color: var(--bar); }
.review.pending { color: var(--gold); border-color: var(--gold); }

/* the article body was never put in a container, so on a wide screen it pinned itself to the
   left edge and left a third of the window empty. Contained and widened. */
.article-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px;
  width: 100%; max-width: 1420px; margin: 0 auto; padding: 56px 28px 90px; align-items: start; }
.toc { position: sticky; top: 100px; font-size: 14px; border-left: 1px solid var(--rule); padding-left: 18px; }
.toc a { display: block; padding: 6px 0; color: var(--muted); text-decoration: none; }
.toc a:hover, .toc a.active { color: var(--clay); }
.prose { max-width: 41em; font-size: 17.5px; }
.prose h2 { margin: 54px 0 16px; padding-top: 22px; border-top: 1px solid var(--rule); }
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { margin: 32px 0 10px; }
.prose ul, .prose ol { padding-left: 1.15em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .5em; }
.prose sup a { color: var(--clay); text-decoration: none; font-size: 11px; font-weight: 600; padding: 0 1px; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 15.5px; }
.prose th { text-align: left; background: var(--teal); color: #fff; padding: 10px 12px; font: 600 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.prose td { padding: 11px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table-scroll { overflow-x: auto; }

.glance { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--teal-600); padding: 24px 26px; margin: 0 0 32px; }
.glance ul { margin: 0; padding-left: 1.1em; }
.glance li::marker { color: var(--clay); }
.redflag { background: var(--danger-tint); border: 1px solid var(--danger); padding: 20px 22px; margin: 22px 0; }
.redflag h3 { color: var(--danger); font-size: 18px; margin-bottom: 8px; }
.redflag svg { color: var(--danger); vertical-align: -3px; margin-right: 6px; }
.doctors { background: var(--teal); color: var(--on-dark); padding: 26px 28px; margin: 28px 0; }
.doctors h3 { color: #fff; margin-bottom: 10px; }
.doctors p { color: var(--on-dark-dim); margin-bottom: 0; }
.doctors a { color: var(--gold); }
.disclaimer-box { margin-top: 30px; font-size: 14.5px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule); padding: 18px 20px; }
.disclaimer-box h3 { font: 600 16px/1.3 var(--sans); color: var(--ink); margin: 0 0 8px; }
.disclaimer-box p + p { margin-bottom: 0; }

.research { list-style: none; padding: 0; margin: 0; }
.research li { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.research li:first-child { border-top: 1px solid var(--rule); }
.research .name { font-weight: 600; color: var(--ink); display: block; margin-bottom: 4px; }
.research .f { color: var(--ink-2); }

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 18px 0; font: 600 17px/1.4 var(--sans); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--clay); font-weight: 400; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 0 18px; color: var(--ink-2); max-width: 44em; }

.myths { list-style: none; padding: 0; margin: 0; }
.myths li { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 1px solid var(--rule); }
.myths .m, .myths .f { padding: 16px 20px 16px 0; }
.myths .m { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--clay); }
.myths .f { color: var(--ink); font-weight: 500; border-left: 1px solid var(--rule); padding-left: 20px; }

.sources { font-size: 14.5px; color: var(--ink-2); padding-left: 0 !important; list-style: none; }
.sources li { display: grid; grid-template-columns: 34px 1fr; margin: 0 0 11px; overflow-wrap: anywhere; }
.sources li::marker { content: ""; }
.sources .n { color: var(--clay); font-variant-numeric: tabular-nums; font-weight: 600; }
.sources li:target { background: var(--gold-tint); }

.share { display: flex; gap: 10px; margin-top: 34px; }
.next { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule); }
.crumbs { font-size: 13.5px; color: var(--muted); margin-bottom: 20px; letter-spacing: .01em; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--clay); }

/* ---------------------------------------------------------------- questions + steps */

.qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 44px; }
.q { display: block; padding: 20px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); font-weight: 500; }
.q:hover { color: var(--clay); }
.q span { display: block; font: 500 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.q b { font-weight: 600; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; counter-reset: step; }
.step { padding: 0 24px 0 0; border-left: 1px solid var(--rule); padding-left: 22px; }
.step:first-child { border-left: 0; padding-left: 0; }
.step::before { counter-increment: step; content: "0" counter(step); display: block;
  font: 600 12px/1 var(--sans); letter-spacing: .12em; color: var(--clay); margin-bottom: 14px; }
.section.dark .step::before { color: var(--gold); }
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--ink-2); margin: 0; }
.section.dark .step { border-left-color: rgba(255,255,255,.18); }
.section.dark .step p { color: var(--on-dark-dim); }

/* ---------------------------------------------------------------- about strip */

.about-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0; align-items: stretch; border: 1px solid var(--rule); background: var(--surface); }
.about-strip .who { padding: 44px 44px 44px 40px; }
.about-strip img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.about-strip h3 { margin-bottom: 12px; }
.about-strip p { color: var(--ink-2); font-size: 16px; }

/* ---------------------------------------------------------------- trend chart */

.trend { border: 1px solid var(--rule); background: var(--surface); padding: 26px 28px 20px; }
.trend-top { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.trend-top h3 { font-size: 19px; font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; }
.seg { display: flex; border: 1px solid var(--rule); }
.seg button { font: 600 12.5px/1 var(--sans); padding: 9px 14px; background: none; border: 0; color: var(--muted); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed="true"] { background: var(--teal); color: #fff; }
.bars { list-style: none; padding: 0; margin: 0; }
.bar-row { display: grid; grid-template-columns: 148px 1fr 92px; gap: 14px; align-items: center; padding: 6px 0; position: relative; }
.bar-row .name { font-size: 14.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row.ours .name a { color: var(--ink); font-weight: 600; }
.bar-row .track { background: var(--bar-track); height: 11px; }
.bar-row .fill { display: block; height: 100%; background: var(--bar); }
.bar-row:not(.ours) .fill { background: var(--rule); }
.bar-row .val { font: 600 13.5px/1.2 var(--sans); text-align: right; font-variant-numeric: tabular-nums; }
.bar-row .trend-tag { display: block; font-weight: 500; font-size: 11px; color: var(--muted); }
.bar-row .tip { display: none; position: absolute; left: 150px; top: -4px; z-index: 5; background: var(--teal); color: #fff; font-size: 12.5px; padding: 8px 11px; max-width: 320px; }
.bar-row:hover .tip, .bar-row:focus .tip { display: block; }
.trend-note { font-size: 12.5px; color: var(--muted); margin: 18px 0 0; }
.legend-inline { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend-inline i { width: 11px; height: 11px; background: var(--bar); display: inline-block; flex: none; }
.legend-inline i.dim { background: var(--bar-track); }

/* ---------------------------------------------------------------- evidence / source map */

.ev-stats { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--rule); background: var(--surface); }
.ev-stats li { padding: 22px 24px; border-left: 1px solid var(--rule); }
.ev-stats li:first-child { border-left: 0; }
.ev-stats b { display: block; font: 600 38px/1 var(--serif); color: var(--teal-600); font-variant-numeric: tabular-nums; }
.ev-stats span { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }

.ev-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin: 34px 0 8px; padding-top: 24px; border-top: 1px solid var(--rule); }
.chips { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--rule); }
.chips .chip { cursor: pointer; border: 0; border-left: 1px solid var(--rule); background: none; color: var(--muted); margin: 0; padding: 10px 14px; letter-spacing: .06em; }
.chips .chip:first-child { border-left: 0; }
.chips .chip span { font-variant-numeric: tabular-nums; opacity: .7; margin-left: 4px; }
.chips .chip:hover { color: var(--clay); }
.chips .chip[aria-pressed="true"] { background: var(--teal); color: #fff; }
.ev-search { flex: 1 1 240px; display: flex; max-width: 420px; }
.ev-search input { flex: 1; min-width: 0; font: 400 14.5px/1 var(--sans); padding: 11px 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); }
.ev-empty { margin: 28px 0; color: var(--muted); }

.src-group { margin-top: 38px; }
.src-group > h2 { font: 600 15px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--clay); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--clay); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.src-count { font: 600 12px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.src-list { list-style: none; padding: 0; margin: 0; }
.src-item { padding: 16px 0; border-bottom: 1px solid var(--rule-soft); overflow-wrap: anywhere; }
.src-item:last-child { border-bottom: 0; }
.src-cite { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.src-sup { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.src-note { margin: 8px 0 0; font-size: 14px; color: var(--gold); border-left: 2px solid var(--gold); padding: 2px 0 2px 12px; line-height: 1.45; }
.src-url { display: block; margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.src-url.alt { color: var(--link); font-weight: 600; }

.prov { display: inline-block; vertical-align: 2px; margin-left: 8px; font: 700 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; color: #fff; background: var(--muted); white-space: nowrap; }
.prov.ft { background: var(--bar); }
.prov.ab { background: var(--gold); }
.prov.sec { background: #6f6187; }
.prov.nr { background: var(--danger); }
.prov.db { background: #43688a; }
.prov.fig { background: var(--teal-600); }
.legend-prov { list-style: none; padding: 0; margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.legend-prov li { margin: 0 0 7px; }
.legend-prov .prov { margin: 0 8px 0 0; }

/* ---------------------------------------------------------------- footer */

.site-footer { background: var(--teal); color: var(--on-dark-dim); padding: 66px 0 50px; font-size: 14.5px; }
.site-footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 44px; }
.site-footer h4 { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.site-footer .emergency { color: var(--clay); font-weight: 600; }
:root[data-theme="dark"] .site-footer .emergency, :root:not([data-theme="light"]) .site-footer .emergency { color: #e9a085; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .article-layout { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-text { padding: 54px 28px 48px; order: 2; }
  .hero-figure { min-height: 300px; order: 1; }
  .about-strip { grid-template-columns: 1fr; }
  .about-strip img { min-height: 240px; }
}

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 20px; }
  .nav { display: none; position: absolute; top: 76px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--rule); flex-direction: column; gap: 0; padding: 8px 20px 16px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
  .menu-btn { display: grid; }
  .section { padding: 58px 0; }
  .hero-text { padding: 46px 20px 42px; }
  .hero-figure { min-height: 250px; }
  .card { grid-template-columns: 1fr; gap: 0; padding: 22px 0; }
  .card .n { font-size: 22px; margin-bottom: 6px; }
  .card .meta { text-align: left; margin-top: 10px; }
  .myths li { grid-template-columns: 1fr; }
  .myths .f { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-soft); }
  .steps { gap: 26px; }
  .step { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 18px; }
  .site-footer .wrap { grid-template-columns: 1fr; gap: 32px; }
  .ev-controls { flex-direction: column; align-items: stretch; }
  .ev-search { max-width: none; }
  .chips { flex-wrap: wrap; }
  .prov { margin-left: 0; margin-top: 6px; vertical-align: baseline; }
  .src-cite .prov { display: block; width: fit-content; }
  .ev-stats { grid-template-columns: 1fr 1fr; }
  .ev-stats li:nth-child(odd) { border-left: 0; }
  .ev-stats li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .bar-row { grid-template-columns: 112px 1fr 70px; gap: 10px; }
  .bar-row .tip { display: none !important; }
}

@media print {
  .site-header, .toc, .share, .theme-btn, .menu-btn, .ev-controls { display: none; }
  body { background: #fff; font-size: 11pt; }
}

/* news band: text against a full-bleed documentary photograph */
.news-band { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.news-band .stat-row { display: flex; flex-wrap: wrap; gap: 36px; margin: 26px 0 4px; }
.news-band .stat b { font: 600 36px/1 var(--serif); color: var(--gold); display: block; }
.news-band .stat span { display: block; font: 400 13px/1.4 var(--sans); color: var(--on-dark-dim); margin-top: 7px; max-width: 15em; }
.news-band .src { font-size: 12.5px; color: var(--on-dark-dim); opacity: .72; margin: 22px 0 0; }
.news-figure { margin: 0; }
.news-figure img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; }

@media (max-width: 1000px) { .news-band { grid-template-columns: 1fr; gap: 34px; } .news-figure { order: -1; } }

.evidence-body { padding-top: 10px; padding-bottom: 90px; }
.article-hero .crumbs { margin-bottom: 22px; }
.article-hero .eyebrow { margin-bottom: 16px; }

/* Margin notes: each source sets itself beside the sentence that first cites it. A float with a
   negative right margin puts it in the gutter at the right vertical position, with no scripting.
   Below 1380px there is no gutter to put it in, so it falls back to the source list at the foot. */
.mnote { float: right; clear: right; width: 252px; margin: 4px -296px 18px 44px;
  font: 400 13px/1.5 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.mnote b { color: var(--clay); font-weight: 600; margin-right: 6px; font-variant-numeric: tabular-nums; }
.mnote a { color: var(--muted); }
.mnote a:hover { color: var(--clay); }
@media (max-width: 1380px) { .mnote { display: none; } }

/* ---------------------------------------------------------------- what's new */

.updates-body { max-width: 760px; padding-top: 44px; padding-bottom: 90px; }
.u-item { padding: 34px 0; border-bottom: 1px solid var(--rule); }
.u-item:last-child { border-bottom: 0; }
.u-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 12px;
  font: 600 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.u-meta time { color: var(--muted); }
.u-kind { color: var(--clay); }
.u-where { color: var(--ink-2); border: 1px solid var(--rule); padding: 5px 8px; text-decoration: none; letter-spacing: .08em; }
.u-where:hover { border-color: var(--clay); color: var(--clay); }
.u-item h2 { font-size: clamp(22px, 2.4vw, 29px); margin-bottom: 12px; }
.u-item p { color: var(--ink-2); max-width: 40em; }
.u-item p:last-child { margin-bottom: 0; }

/* clinician layer */
.clin-caveat { border: 1px solid var(--clay); border-left: 3px solid var(--clay);
  background: var(--clay-tint); padding: 16px 20px; margin: 0 0 34px; font-size: 15px; color: var(--ink-2); }
.clin-caveat b { color: var(--clay); display: block; margin-bottom: 5px; font-size: 15.5px; }
.sources .prov { margin-left: 8px; }
.sources .src-url { margin-top: 4px; }

/* access-request form */
.req-form { margin: 26px 0 0; max-width: 34em; }
.f-row { margin: 0 0 20px; }
.f-row label, .f-row legend { display: block; font: 600 13.5px/1.45 var(--sans); color: var(--ink); margin-bottom: 7px; }
.f-row input[type="text"], .f-row input[type="email"], .f-row textarea {
  width: 100%; font: 400 16px/1.5 var(--sans); color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule); padding: 11px 13px; }
.f-row textarea { resize: vertical; }
.f-row input:focus-visible, .f-row textarea:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; border-color: var(--clay); }
.req-form fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.f-check { display: flex; align-items: flex-start; gap: 9px; font-weight: 400; color: var(--ink-2); margin-bottom: 8px; }
.f-check input { margin-top: 4px; flex: none; }
.f-hp { position: absolute; left: -9999px; }
.f-note { font-size: 13.5px; color: var(--muted); max-width: 34em; }

/* ---------------------------------------------------------------- research hub (sspe/) */
.hub-stats { margin: 28px 0 0; }
.concepts { counter-reset: concept; }
.concepts h3 { margin: 30px 0 8px; }
.concepts h3:first-child { margin-top: 6px; }
.concepts h3::before { counter-increment: concept; content: counter(concept, decimal-leading-zero);
  display: inline-block; min-width: 2.1em; font: 600 .95em/1 var(--serif); color: var(--clay); opacity: .55; }
.worklist { list-style: none; padding: 0 !important; margin: 0 0 1.2em; border-top: 1px solid var(--rule); }
.worklist li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px 0;
  margin: 0; border-bottom: 1px solid var(--rule); }
.w-status { font: 600 11px/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.work-done .w-status { color: var(--teal-600); }
.work-weekly .w-status, .work-in-progress .w-status { color: var(--gold); }
.work-on-request .w-status { color: var(--clay); }
.hub-news { list-style: none; padding: 0 !important; margin: 0 0 1em; border-top: 1px solid var(--rule); }
.hub-news li { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.hub-news .meta { display: block; margin-bottom: 5px; font: 500 12px/1.5 var(--sans); letter-spacing: .04em; color: var(--muted); }
.hub-news .t { font-weight: 600; color: var(--ink); text-decoration: none; }
.hub-news .t:hover { color: var(--clay); text-decoration: underline; text-underline-offset: 4px; }
.hub-news p { margin: 4px 0 0; font-size: 15.5px; color: var(--ink-2); }
.unread { margin-left: 10px; font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 560px) { .worklist li { grid-template-columns: 1fr; gap: 4px; } }