:root {
  --paper: #FFFFFF;
  --earth: #8B4513;
  --forest: #228B22;
  --forest-ink: #176117;
  --ochre: #CC7722;
  --error: #CC7722;
  --ember: #CC5500;
  --river: #4682B4;
  --river-ink: #285A7D;
  --sun: #FFD700;
  --deep: #000000;
  --clay-wash: #FBF6EF;
  --forest-wash: #F4F8F1;
  --river-wash: #F2F7FA;
  --quiet-earth: #76502F;
  --rule: 2px solid var(--ochre);
  --radius: 8px;
  --unit: 8px;
  --measure: 72ch;
  --container: 1280px;
  --rail: 208px;
  --gutter: 1.5rem;
  --section-gap: clamp(4rem, 8vw, 8rem);
  --card-pad: clamp(1.5rem, 3vw, 2.5rem);
  --font-display: "STIX Two Text", Georgia, serif;
  --font-body: "Fraunces", Georgia, serif;
  --font-value: "SFMono-Regular", Menlo, Consolas, monospace;
  --hero-size: clamp(2.5rem, 5vw, 4rem);
  --h1-size: 2.25rem;
  --h2-size: 1.5rem;
  --body-size: 1rem;
  --label-size: 1rem;
  --line: 1.6;
  --transition: 0.7s ease-in-out;
}

@font-face {
  font-family: "STIX Two Text";
  src: url("/stix-two-text.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/fraunces-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 2rem; color-scheme: light; }
body { margin: 0; background: var(--paper); color: var(--earth); font: 400 var(--body-size)/var(--line) var(--font-body); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
button, summary { font: inherit; }
button { color: inherit; }
a, summary { -webkit-tap-highlight-color: #FFD70066; }
:focus-visible { outline: 3px solid var(--river-ink); outline-offset: 5px; }
main:focus { outline: none; }
::selection { color: var(--deep); background: var(--sun); }
p { margin: 0 0 1rem; max-width: var(--measure); }
h1, h2, h3, dt { font-family: var(--font-display); line-height: 1.15; text-wrap: balance; }
h1 { font-size: var(--h1-size); font-weight: 700; letter-spacing: -0.035em; margin: 0 0 1.5rem; }
h2 { font-size: var(--h2-size); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 1rem; }
h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 700; }
figure { margin: 0; }
svg { display: block; max-width: 100%; }
main > :last-child { margin-bottom: 0; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 2rem; }

[data-role="skip-link"] { position: fixed; top: 1rem; left: 1rem; z-index: 10; padding: 0.75rem 1rem; min-height: 44px; background: var(--sun); color: var(--deep); transform: translateY(-200%); border: var(--rule); border-radius: var(--radius); }
[data-role="skip-link"]:focus { transform: translateY(0); }
[data-role="site-shell"] { width: min(100%, var(--container)); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 3rem; }
[data-role="reading-column"] { min-width: 0; padding: 3rem 0 0; }
[data-role="side-index"] { position: sticky; top: 0; align-self: start; min-width: 0; padding: 3rem 1.5rem 2rem 0; height: 100vh; max-height: 960px; border-right: var(--rule); display: flex; flex-direction: column; }
[data-role="site-name"] { display: flex; flex-direction: column; padding: 0.5rem 0; min-height: 44px; text-decoration: none; margin-bottom: 3rem; }
[data-role="site-name"] > :first-child { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; font-variant-caps: small-caps; line-height: 1.2; }
[data-role="site-name"] > :last-child { margin-top: 0.5rem; color: var(--quiet-earth); font-size: var(--label-size); }
[data-role="side-index"] nav { display: grid; gap: 1rem; }
[data-role="index-link"] { position: relative; display: flex; flex-direction: column; min-height: 76px; padding: 0.625rem 0.75rem 0.625rem 1rem; border-left: 2px solid transparent; border-radius: 0 var(--radius) var(--radius) 0; text-decoration: none; transition: background var(--transition), border-color var(--transition); }
[data-role="index-link"][aria-current="page"] { border-color: var(--ember); background: var(--clay-wash); }
[data-role="index-link"]:hover { background: var(--forest-wash); border-color: var(--forest); }
[data-role="nav-name"] { font-family: var(--font-display); font-variant-caps: small-caps; font-size: 1.125rem; font-weight: 700; }
[data-role="nav-note"] { color: var(--quiet-earth); font-size: 1rem; line-height: 1.4; margin-top: 0.375rem; }
[data-role="index-foot"] { margin-top: auto; margin-bottom: 0; padding-top: 3rem; color: var(--quiet-earth); font-style: italic; }

[data-role="hero"] { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem; align-items: start; padding: 1rem 0 0; }
[data-role="hero-copy"] { min-width: 0; }
[data-role="hero"] h1 { font-size: var(--hero-size); font-variant-caps: small-caps; }
[data-role="hero-copy"] > p:not([data-role]) { max-width: 42ch; margin-bottom: 1.5rem; }
[data-role="eyebrow"] { display: block; font-family: var(--font-display); font-variant-caps: small-caps; font-weight: 500; font-size: var(--label-size); letter-spacing: 0.055em; color: var(--quiet-earth); line-height: 1.4; margin: 0 0 1rem; }
[data-role="hero-deck"] { font-size: 1.5rem; line-height: 1.4; margin: 0 0 1rem; }
[data-role="action"] { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: 0.75rem 1.125rem; background: var(--ember); color: var(--deep); border: 2px solid var(--ember); border-radius: var(--radius); font-size: 1rem; text-decoration: none; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); }
[data-role="action"]:hover { background: var(--sun); border-color: var(--ochre); box-shadow: 4px 4px 0 var(--ochre); }
[data-role="action"] > span { font-size: 1.25rem; }
[data-role="quiet-link"], [data-role="source-link"], [data-role="chart-link"] { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0.625rem 0; font-size: 1rem; line-height: 1.5; }
[data-role="quiet-link"]:hover, [data-role="source-link"]:hover { color: var(--forest-ink); }
[data-role="quiet-link"] > span, [data-role="source-link"] > span { flex: 0 0 auto; }

[data-role="route-card"] { position: relative; padding: 2rem 1.5rem 1.5rem; border: var(--rule); border-radius: 48px var(--radius) var(--radius) var(--radius); background: var(--forest-wash); margin-top: 2.5rem; overflow: hidden; }
[data-role="route-card"]::before { content: ""; display: block; height: 8px; position: absolute; inset: 0 0 auto; background: linear-gradient(90deg, var(--forest) 0 56%, var(--river) 56% 82%, var(--sun) 82%); }
[data-role="route-card"] h2 { font-size: 1.75rem; font-variant-caps: small-caps; }
[data-role="care-route"] { list-style: none; margin: 1.5rem 0 0.5rem; }
[data-role="care-route"] li { position: relative; display: grid; grid-template-columns: 1rem minmax(0, 1fr); column-gap: 1rem; padding-bottom: 1.5rem; }
[data-role="care-route"] li::before { content: ""; position: absolute; width: 2px; top: 12px; bottom: -12px; left: 7px; background: var(--ochre); }
[data-role="care-route"] li:last-child::before { display: none; }
[data-role="care-route"] strong { font-family: var(--font-display); font-variant-caps: small-caps; font-size: 1.125rem; }
[data-role="care-route"] li > span:last-child { grid-column: 2; margin-top: 0.375rem; }
[data-role="route-dot"] { width: 16px; height: 16px; margin-top: 0.375rem; border: 2px solid var(--forest); border-radius: 50%; background: var(--paper); z-index: 1; }
[data-role="care-route"] li:nth-child(2) [data-role="route-dot"] { border-color: var(--river); }
[data-role="care-route"] li:last-child [data-role="route-dot"] { border-color: var(--ochre); background: var(--sun); }

[data-role="hero"][data-layout="plain"] { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr); gap: 3rem; }
[data-role="hero-note"] { margin-top: 4rem; border-left: var(--rule); padding: 0 0 0 1.5rem; max-width: 27ch; }
[data-role="attention-mark"] { font-family: var(--font-display); font-size: 2.75rem; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; color: var(--deep); width: 64px; height: 64px; border-radius: 50% 50% 50% var(--radius); background: var(--sun); border: var(--rule); margin-bottom: 1rem; }

[data-role="chapter"], [data-role="sources-box"] { margin-top: var(--section-gap); }
[data-role="section-head"] { max-width: var(--measure); margin-bottom: 2rem; }
[data-role="section-head"] h2 { font-size: var(--h2-size); }
[data-role="section-head"] p:last-child { margin-bottom: 0; }
[data-role="card-grid"] { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
[data-role="card-grid"][data-layout="reverse"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
[data-role="card"] { padding: var(--card-pad); border: var(--rule); border-radius: var(--radius); min-width: 0; position: relative; transition: background var(--transition), box-shadow var(--transition); }
[data-role="card"][data-tone="earth"] { background: var(--clay-wash); }
[data-role="card"][data-tone="forest"] { background: var(--forest-wash); }
[data-role="card"][data-tone="river"] { background: var(--river-wash); }
[data-role="card"][data-size="narrow"] { margin-top: 3rem; }
[data-role="card"]:hover { box-shadow: 0 8px 0 -6px var(--ochre); background: var(--paper); }
[data-role="card"]::before { content: ""; position: absolute; top: -2px; left: 2rem; width: 3rem; height: 2px; background: var(--forest); transition: width var(--transition); }
[data-role="card"][data-tone="river"]::before { background: var(--river); }
[data-role="card"]:hover::before { width: calc(100% - 4rem); }
[data-role="reading-list"] { padding-left: 1.25rem; list-style: disc; max-width: var(--measure); }
[data-role="reading-list"] li { padding-left: 0.375rem; margin: 0 0 0.875rem; }
[data-role="reading-list"] li::marker { color: var(--ochre); font-size: 0.85em; }
[data-role="reading-list"] li:last-child { margin-bottom: 0; }
[data-role="reading-list"] + p { margin-top: 1.5rem; }
[data-role="card"] > :last-child, [data-role="wide-note"] > :last-child, [data-role="attention-note"] > :last-child { margin-bottom: 0; }
[data-role="margin-note"] { padding-top: 1.25rem; border-top: var(--rule); color: var(--quiet-earth); }
[data-role="margin-note"] + [data-role="margin-note"] { padding-top: 0; border: 0; margin-top: 0; }
[data-role="wide-note"] { padding: var(--card-pad); border: var(--rule); border-radius: var(--radius) 40px var(--radius) var(--radius); background: var(--paper); }

[data-role="price-card"] { padding: var(--card-pad); border: var(--rule); border-radius: var(--radius) var(--radius) 48px var(--radius); margin-bottom: 2rem; background: var(--clay-wash); position: relative; }
[data-role="price-card"]::after { content: ""; height: 8px; width: 35%; border-radius: var(--radius) 0 0 0; position: absolute; right: 0; bottom: 0; background: linear-gradient(90deg, var(--ochre), var(--ember)); }
[data-role="price-card"] p, [data-role="price-card"] ul { max-width: var(--measure); }
[data-role="page-turn"] { margin-top: var(--section-gap); border-top: var(--rule); padding-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
[data-role="page-turn"] > span { font-size: 1.125rem; font-family: var(--font-display); max-width: 28ch; }

[data-role="trial-chart"] { border: var(--rule); border-radius: var(--radius) 48px var(--radius) var(--radius); padding: var(--card-pad); background: var(--deep); color: var(--paper); }
[data-role="trial-chart"] figcaption { max-width: 64ch; margin-bottom: 2rem; }
[data-role="trial-chart"] figcaption p { margin: 0; font-size: 1.125rem; }
[data-role="bars"] { display: grid; gap: 2rem; }
[data-role="bar-row"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.25rem; position: relative; }
[data-role="bar-label"] { font-size: 1.125rem; font-family: var(--font-display); }
[data-role="bar-value"] { font-family: var(--font-value); font-size: 1.5rem; color: var(--sun); }
[data-role="bar-unit"] { grid-column: 1 / -1; font-size: 1rem; color: var(--paper); }
[data-role="bar"] { display: block; grid-column: 1 / -1; height: 24px; margin-top: 0.5rem; background: var(--forest); width: 100%; border-radius: 0 12px 12px 0; }
[data-role="bar-row"][data-kind="comparison"] [data-role="bar"] { width: 16.1074%; background: var(--river); }
[data-role="chart-link"] { margin-top: 1.5rem; color: var(--paper); }
[data-role="chart-link"]:hover { color: var(--sun); }
[data-role="trial-chart"] :focus-visible { outline-color: var(--sun); }
[data-role-context="chart-limits"] { margin-top: 2rem; }
[data-role="attention-note"] { border: var(--rule); border-left: 8px solid var(--ochre); border-radius: var(--radius); padding: var(--card-pad); margin-top: 2rem; background: var(--paper); }
[data-role="attention-note"] h3::before { content: ""; display: inline-block; width: 12px; height: 12px; background: var(--sun); border-radius: 50%; border: 2px solid var(--earth); margin-right: 0.75rem; }
[data-role="term-set"] { margin: 0; display: grid; gap: 1.5rem; }
[data-role="term"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); border-bottom: var(--rule); gap: 1.5rem; padding-bottom: 1.5rem; }
[data-role="term"] dt { font-size: 1.25rem; font-weight: 700; }
[data-role="term"] dd { font-size: 1rem; margin: 0; max-width: 52ch; }

[data-role="sources-box"] { border: var(--rule); border-radius: 40px var(--radius) var(--radius) var(--radius); padding: var(--card-pad); background: var(--river-wash); }
[data-role="sources-box"] [data-role="section-head"] { margin-bottom: 1.5rem; }
[data-role="drawers"] { border-top: var(--rule); }
[data-role="evidence-drawer"] { border-bottom: var(--rule); }
[data-role="evidence-drawer"] summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; padding: 1rem 0; min-height: 56px; font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; }
[data-role="evidence-drawer"] summary::-webkit-details-marker { display: none; }
[data-role="evidence-drawer"] summary > span:first-child { max-width: 48ch; }
[data-role="drawer-mark"] { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; border: var(--rule); border-radius: 50%; color: var(--earth); line-height: 1; font-size: 1.5rem; transition: transform var(--transition), background var(--transition); }
[data-role="evidence-drawer"][open] [data-role="drawer-mark"] { transform: rotate(45deg); background: var(--sun); }
[data-role="evidence-drawer"] summary:hover [data-role="drawer-mark"] { background: var(--sun); }
[data-role="evidence-drawer"][data-traced="true"] { background: var(--paper); }
[data-role="source-note"] { max-width: var(--measure); padding: 0.25rem 0 1.25rem; }
[data-role="source-note"] p { margin-bottom: 0.5rem; }
[data-role="source-link"] { color: var(--river-ink); }

[data-role="site-footer"] { margin-top: var(--section-gap); padding: 2rem 0; border-top: var(--rule); }
[data-role="site-footer"] p { color: var(--quiet-earth); margin: 0 0 1rem; font-size: 1rem; max-width: 68ch; }
[data-role="site-footer"] nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
[data-role="site-footer"] a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.625rem 0; font-size: 1rem; }
[data-role="site-footer"] a:hover { color: var(--forest-ink); }

@media (min-width: 1400px) { [data-role="reading-column"] { padding-top: 4rem; } [data-role="side-index"] { padding-top: 4rem; } }
@media (max-width: 1100px) {
  :root { --rail: 176px; }
  [data-role="site-shell"] { gap: 2rem; }
  [data-role="side-index"] { padding-right: 1rem; }
  [data-role="hero"] { grid-template-columns: minmax(0, 1fr); }
  [data-role="hero-copy"] > p:not([data-role]) { max-width: 58ch; }
  [data-role="route-card"] { margin-top: 0; max-width: 100%; }
  [data-role="care-route"] { display: grid; grid-template-columns: minmax(0, 1fr); }
  [data-role="hero"][data-layout="plain"] { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; }
}
@media (max-width: 760px) {
  :root { --gutter: 1.5rem; --card-pad: 1.5rem; }
  [data-role="site-shell"] { grid-template-columns: minmax(0, 1fr); gap: 0; }
  [data-role="side-index"] { position: static; height: auto; max-height: none; padding: 1.5rem 0; border-right: 0; border-bottom: var(--rule); }
  [data-role="site-name"] { margin-bottom: 1rem; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
  [data-role="site-name"] > :last-child { margin: 0; }
  [data-role="side-index"] nav { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 0.5rem; }
  [data-role="index-link"] { min-height: 56px; padding: 0.5rem; justify-content: center; }
  [data-role="nav-name"] { font-size: 1rem; line-height: 1.35; }
  [data-role="nav-note"], [data-role="index-foot"] { display: none; }
  [data-role="reading-column"] { padding-top: 2rem; }
  [data-role="hero"], [data-role="hero"][data-layout="plain"] { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: 0; }
  [data-role="hero"] h1 { margin-bottom: 1rem; }
  [data-role="hero-deck"] { font-size: 1.375rem; }
  [data-role="hero-note"] { margin-top: 0; max-width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 1rem; align-items: center; }
  [data-role="attention-mark"] { width: 48px; height: 48px; font-size: 2rem; grid-row: 1 / 3; margin: 0; }
  [data-role="hero-note"] p { margin-bottom: 0; }
  [data-role="hero-note"] a { grid-column: 2; }
  [data-role="card-grid"], [data-role="card-grid"][data-layout="reverse"] { grid-template-columns: minmax(0, 1fr); }
  [data-role="card"][data-size="narrow"] { margin-top: 0; }
  [data-role="section-head"] { margin-bottom: 1.5rem; }
  [data-role="term"] { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; }
  [data-role="page-turn"] { align-items: start; flex-direction: column; }
  [data-role="page-turn"] > span { max-width: none; }
  [data-role="action"] { max-width: 100%; }
  [data-role="trial-chart"] { padding: 1.5rem; }
  [data-role="bar-row"] { grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
  [data-role="bar-value"] { font-size: 1.25rem; }
  [data-role="bar-label"] { font-size: 1rem; }
  [data-role="sources-box"] { padding: 2rem 1.5rem 1.5rem; }
}
@media (max-width: 360px) { :root { --gutter: 1rem; --card-pad: 1.25rem; } [data-role="hero"] h1 { font-size: 2.25rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print {
  @page { margin: 1.5cm; }
  body { color: var(--deep); }
  [data-role="site-shell"] { display: block; padding: 0; }
  [data-role="side-index"], [data-role="skip-link"], [data-role="page-turn"], [data-role="site-footer"] nav { display: none; }
  [data-role="reading-column"] { padding: 0; }
  [data-role="chapter"], [data-role="sources-box"] { margin-top: 2.5rem; }
  [data-role="card"], [data-role="trial-chart"], [data-role="source-note"] { break-inside: avoid; }
  [data-role="trial-chart"] { background: var(--paper); color: var(--deep); }
  [data-role="bar-value"], [data-role="bar-unit"], [data-role="chart-link"] { color: var(--deep); }
  [data-role="source-note"] { display: block !important; }
}
