/* ------------------------------------------------------------------
   The Pep Edit: editorial system
   Type:    Cormorant Garamond (display serif) + Inter (utility sans), self-hosted
   Palette: cream, warm white, warm charcoal, bronze from the seal logo.
            Faded sage is reserved for ONE job: the evidence system.
            When you see sage, it is an evidence grade. Nothing else is sage.
   ------------------------------------------------------------------ */

@font-face{
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-italic-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root{
  color-scheme: light;

  /* Primitives */
  --cream: #F4EEE5;         /* page ground, matches the seal */
  --paper: #FBF8F3;         /* warm white panels */
  --sand: #ECE4D7;          /* pressed surface */
  --ink: #2A2119;           /* warm charcoal, never pure black */
  --ink-2: #574B3F;         /* body on cream, 7.3:1 */
  --ink-3: #6E6152;         /* metadata on cream, 5.2:1 */
  --bronze: #8B6F4E;        /* the seal's bronze: marks, rules, numerals */
  --bronze-deep: #6A533C;   /* bronze for text and links, 6.2:1 */
  --line: #E4DCCD;          /* hairline */
  --line-2: #CDBFA9;        /* rule */
  --line-3: #8A7C6A;        /* component outline, 3:1 on cream */
  --sage: #7E9284;          /* evidence, decorative only */
  --sage-deep: #4A5E51;     /* evidence text and filled dots, 6:1 */
  --sage-wash: #E9EEE8;     /* evidence tint */

  /* Roles */
  --bg: var(--cream);
  --surface: var(--paper);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --accent: var(--bronze-deep);
  --accent-mark: var(--bronze);
  --evidence: var(--sage-deep);
  --focus: var(--bronze-deep);

  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --max: 1160px;
  --gutter: 28px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t: 160ms;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior: smooth; } }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
main:focus{ outline: none; }
img{ max-width: 100%; height: auto; }
h1, h2, h3, h4{ margin: 0; font-weight: 500; }
p{ margin: 0; }
a{ color: inherit; }
button{ font: inherit; }

:where(a, button, input, [tabindex]):focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
::selection{ background: var(--sand); color: var(--ink); }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.sr{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden]{ display: none !important; }

.skip{
  position: absolute; left: var(--gutter); top: -60px;
  background: var(--ink); color: var(--paper);
  font: 500 13px/1 var(--sans); letter-spacing: .04em;
  padding: 16px 16px; text-decoration: none; z-index: 100;
  transition: top var(--t) var(--ease);
}
.skip:focus{ top: 12px; }

/* ---------- Utility type ---------- */

.eyebrow{
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 16px;
}
.eyebrow .tick{
  display: inline-block;
  width: 22px; height: 1px;
  background: var(--accent-mark);
  vertical-align: middle;
  margin-right: 12px;
  transform: translateY(-1px);
}
.lede{
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 46ch;
  text-wrap: pretty;
}
.dek{
  color: var(--text-2);
  font-size: 16px;
  max-width: 44ch;
  text-wrap: pretty;
}

/* ---------- Masthead ---------- */

.masthead{
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
}
.nav{
  display: flex; align-items: center; gap: 28px;
  min-height: 68px;
  position: relative;
}
.wordmark{
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  font: 600 15px/1 var(--serif);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.wordmark .mark{ width: 18px; height: 18px; color: var(--accent-mark); flex: none; }

.primary-nav{ margin-left: auto; }
.nav-links{ display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.nav-links a{
  display: inline-block;
  font: 500 12px/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  color: var(--text-2);
  padding: 16px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
  white-space: nowrap;
}
.nav-links a:hover{ color: var(--text); }
.nav-links a[aria-current="page"]{ color: var(--accent); border-bottom-color: var(--accent-mark); }
.nav-links-cta{ display: none; }

.nav-cta{
  font: 600 12px/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--text);
  padding: 12px 16px;
  min-height: 40px;
  display: inline-flex; align-items: center;
  white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.nav-cta:hover, .nav-cta[aria-current="page"]{ background: var(--ink); color: var(--paper); }

.nav-toggle{
  display: none;
  align-items: center; gap: 8px;
  min-height: 44px; min-width: 44px;
  padding: 0 4px 0 8px;
  margin-left: auto;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  font: 600 12px/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
}
.nav-toggle-bars{
  position: relative; width: 18px; height: 12px; display: block;
}
.nav-toggle-bars::before, .nav-toggle-bars::after{
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor;
  transition: transform var(--t) var(--ease), top var(--t) var(--ease);
}
.nav-toggle-bars::before{ top: 1px; }
.nav-toggle-bars::after{ top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{ top: 5.5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{ top: 5.5px; transform: rotate(-45deg); }

/* ---------- Buttons and links ---------- */

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  padding: 0 32px;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn:hover{ background: var(--bronze-deep); border-color: var(--bronze-deep); }

.text-link{
  font: 500 14px/1.4 var(--sans);
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 3px;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.text-link:hover{ color: var(--accent); border-color: var(--accent); }

/* ---------- Hero (home) ---------- */

.hero{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 64px;
  align-items: center;
  padding-top: 88px;
  padding-bottom: 96px;
}
.hero h1{
  font: 500 clamp(46px, 6.2vw, 86px)/1.02 var(--serif);
  letter-spacing: .003em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.hero h1 em{
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.hero .lede{ margin-bottom: 36px; }
.hero-actions{ display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.nowrap{ white-space: nowrap; }
.hero-folio{
  font: 600 12px/1.6 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3);
  margin: 44px 0 0;
}

/* The specimen: the evidence ladder as the hero artifact */

.specimen{
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 36px 32px 32px;
  position: relative;
}
.specimen::before{
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.specimen-head{
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--evidence);
  margin: 0 0 8px;
  text-align: center;
}
.specimen-sub{
  font: italic 500 18px/1.4 var(--serif);
  color: var(--text-2);
  text-align: center;
  margin: 0 0 24px;
}
.scale{ list-style: none; margin: 0; padding: 0; counter-reset: rung; }
.scale li{
  counter-increment: rung;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 8px 2px;
  border-top: 1px solid var(--line);
}
.scale li::before{
  content: counter(rung, upper-roman);
  font: italic 500 15px/1 var(--serif);
  color: var(--accent);
}
.scale .rung-label{ font: 500 19px/1.25 var(--serif); }
.scale li.has .rung-label{ color: var(--evidence); }
.scale .rung-who{
  font: 500 13px/1.5 var(--sans);
  color: var(--text-3);
  text-align: right;
  max-width: 18ch;
}
.scale .rung-who a{
  text-decoration: none;
  color: var(--evidence);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease);
}
.scale .rung-who a:hover{ border-bottom-color: var(--evidence); }
.specimen-note{
  font-size: 15px; line-height: 1.6;
  color: var(--text-2);
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin: 4px 0 0;
}
.specimen-link{
  display: inline-block;
  margin-top: 16px;
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--evidence);
  text-decoration: none;
  border-bottom: 1px solid var(--sage);
  padding-bottom: 3px;
}
.specimen-link:hover{ border-bottom-color: var(--evidence); }

/* ---------- Sections ---------- */

.section{ padding-top: 96px; padding-bottom: 96px; }
.section-divider{ border-top: 1px solid var(--line); }
.section-body{ padding-top: 48px; padding-bottom: 112px; }

.section-head{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 48px;
}
.section-head-tight{ margin-bottom: 28px; }
.section-head h2{
  font: 500 clamp(32px, 3.4vw, 46px)/1.08 var(--serif);
  letter-spacing: .003em;
}
.section-head h2 i, .page-hero h1 i, .newsletter h2 i{ font-style: italic; color: var(--accent); }
.section-head .dek{ margin: 0 0 8px; justify-self: end; }
.section-more{ margin-top: 28px; }

/* ---------- Index rows ---------- */

.index-list{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.index-row{
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.index-row.no-thumb{ grid-template-columns: 1fr auto; }
.index-thumb{
  width: 96px; height: 96px;
  object-fit: cover; object-position: top;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 2px;
  display: block;
}
/* Stand-in for rows with no card image: name plus rail for a sheet, seal mark for a note. */
.index-tile{
  width: 96px; height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 2px;
  padding: 8px;
  text-align: center;
}
.tile-name{ font: 500 17px/1.1 var(--serif); color: var(--text); overflow-wrap: anywhere; }
.index-tile .dots{ gap: 3px; }
.index-tile .dots i{ width: 7px; height: 7px; }
.tile-mark{ width: 28px; height: 28px; color: var(--accent-mark); }
.tile-tag{
  font: 600 10px/1.3 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
}
.index-topic{ font: 500 26px/1.2 var(--serif); }
.index-topic a{
  text-decoration: none; color: var(--text);
  text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--accent-mark);
  transition: color var(--t) var(--ease);
}
.index-topic a::after{ content: ""; position: absolute; inset: 0; }
.index-row:hover .index-topic a, .index-row:focus-within .index-topic a{
  color: var(--accent);
  text-decoration-line: underline;
}
.index-desc{
  font-size: 16px; line-height: 1.6;
  color: var(--text-2);
  max-width: 60ch;
  margin: 8px 0 0;
  text-wrap: pretty;
}
.index-tag{
  font: 600 12px/1.5 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  justify-self: end;
}
.index-meta{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 12px;
  position: relative; z-index: 1;
}
.row-topics{
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 8px;
  position: relative; z-index: 1;
}
.row-topic{
  font: 500 13px/1.5 var(--sans);
  letter-spacing: .04em;
  color: var(--text-3);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.row-topic:hover{ color: var(--accent); border-color: var(--accent); }

/* ---------- Evidence system: the signature ---------- */

.dots{ display: inline-flex; gap: 4px; }
.dots i{ width: 9px; height: 9px; border-radius: 50%; display: inline-block; position: relative; }
.dots i.on{ background: var(--evidence); }
.dots i.lim{ background: var(--surface); border: 1.5px solid var(--evidence); }
.dots i.lim::after{
  content: ""; position: absolute; inset: 1.5px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--evidence) 50%, transparent 50%);
}
.dots i.off{ background: transparent; border: 1px solid var(--line-3); }

.ev-mini{ display: inline-flex; align-items: center; gap: 8px; }
.ev-mini-key{
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--evidence);
}
.ev-mini-label{ font: italic 500 15px/1.3 var(--serif); color: var(--text); }

.stamp{
  display: inline-block;
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--line-3);
  padding: 8px 12px;
  border-radius: 2px;
  background: var(--surface);
}

.rail{
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line);
  padding: 32px 0 24px;
  margin-top: 40px;
}
.rail-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.rail-title{
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--evidence);
}
.rail-help{
  font: 500 13px/1.4 var(--sans);
  color: var(--text-3);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.rail-help:hover{ color: var(--evidence); border-color: var(--evidence); }
.rail-track{ list-style: none; margin: 0; padding: 0; display: flex; position: relative; }
.rail-track::before{
  content: "";
  position: absolute; left: 7px; right: 7px; top: 7px;
  height: 1px;
  background: var(--line-2);
}
.rail-track li{ flex: 1; position: relative; padding: 28px 12px 0 0; }
.rail-track .dot{
  position: absolute; top: 0; left: 0;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--line-3);
}
.rail-track li.on .dot{ background: var(--evidence); border-color: var(--evidence); }
.rail-track li.lim .dot{ background: var(--surface); border-color: var(--evidence); }
.rail-track li.lim .dot::after{
  content: ""; position: absolute; inset: 2.5px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--evidence) 50%, transparent 50%);
}
.rail-num{
  display: block;
  font: italic 500 13px/1 var(--serif);
  color: var(--accent);
  margin-bottom: 8px;
}
.rail-label{
  display: block;
  font: 600 12px/1.5 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
  max-width: 16ch;
}
.rail-track li.on .rail-label{ color: var(--text); }
.rail-track li.on:has(+ li.off) .rail-label,
.rail-track li.on:last-child .rail-label,
.rail-track li.lim .rail-label{
  color: var(--evidence);
  font: italic 500 16px/1.3 var(--serif);
  letter-spacing: .01em;
  text-transform: none;
}
@media (prefers-reduced-motion: no-preference){
  .rail-track .dot{ animation: dot-in .4s var(--ease) backwards; }
  .rail-track li:nth-child(2) .dot{ animation-delay: .05s; }
  .rail-track li:nth-child(3) .dot{ animation-delay: .10s; }
  .rail-track li:nth-child(4) .dot{ animation-delay: .15s; }
  .rail-track li:nth-child(5) .dot{ animation-delay: .20s; }
  .rail-track li:nth-child(6) .dot{ animation-delay: .25s; }
}
@keyframes dot-in{ from{ transform: scale(.3); opacity: 0; } to{ transform: scale(1); opacity: 1; } }

/* ---------- Topic chips and filter ---------- */

.topic-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.topic-chip{
  display: inline-flex; align-items: center;
  min-height: 44px;
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  color: var(--text-2);
  border: 1px solid var(--line-3);
  padding: 0 20px;
  transition: color var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.topic-chip:hover{ color: var(--text); background: var(--surface); border-color: var(--text-2); }
.topic-chip[aria-current="true"]{ color: var(--paper); background: var(--ink); border-color: var(--ink); }
.topics-soon{ margin-top: 28px; font-size: 15px; color: var(--text-2); max-width: 64ch; }
.topics-soon a{ color: var(--accent); }

.filter{ margin-bottom: 20px; }
.filter-label{
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 16px;
}
.filter-count{ font-size: 14px; color: var(--text-3); margin: 16px 0 0; min-height: 1.4em; }
.filter-empty{ padding: 40px 0; color: var(--text-2); }
.filter-empty a{ color: var(--accent); }

/* ---------- Legend, method, up next ---------- */

.legend, .method, .upnext{
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 32px 36px;
  margin-top: 48px;
}
.legend-title{
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 16px;
}
.legend-list, .method-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.legend-body{ display: grid; grid-template-columns: auto 1fr; gap: 16px 56px; align-items: start; }
.method-list{ grid-template-columns: 1fr 1fr; gap: 12px 40px; }
.legend-list li{ display: flex; align-items: center; gap: 16px; font-size: 15px; color: var(--text-2); }
.legend-list .dots i{ width: 11px; height: 11px; }
.legend-note{ margin: 0; font-size: 15px; color: var(--text-2); max-width: 52ch; }
.legend-aside{ margin-top: 28px; padding: 24px 24px; }
.legend-note a, .upnext a, .method a{ color: var(--accent); }
.method{ margin-top: 72px; }
.method-list li{
  position: relative; padding-left: 24px;
  font-size: 15px; color: var(--text-2);
}
.method-list li::before{
  content: ""; position: absolute; left: 0; top: .75em;
  width: 8px; height: 1.5px; background: var(--accent-mark);
}
.upnext{ display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; }
.upnext-label{
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.upnext p{ color: var(--text-2); font-size: 15px; max-width: 60ch; }
.upnext i{ font: italic 500 18px/1.4 var(--serif); color: var(--text); }

/* ---------- Newsletter ---------- */

.newsletter{
  background: var(--surface);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  padding: 88px 0;
}
.newsletter-inner{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.newsletter h2{ font: 500 clamp(32px, 3.2vw, 44px)/1.12 var(--serif); margin: 0 0 16px; }

.signup{ display: flex; flex-direction: column; gap: 12px; }
.signup-row{ display: flex; border-bottom: 1px solid var(--ink); }
.signup-row input[type="email"]{
  flex: 1;
  border: none; background: transparent;
  padding: 16px 4px;
  min-height: 48px;
  font: 400 16px/1.4 var(--sans);
  color: var(--text);
  min-width: 0;
  border-radius: 0;
}
.signup-row input[type="email"]::placeholder{ color: var(--text-3); }
.signup-row input[type="email"]:focus-visible{ outline-offset: 0; }
.signup-row:focus-within{ border-color: var(--accent); }
.signup-row button{
  border: none; background: none; cursor: pointer;
  min-height: 48px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  padding: 0 8px;
  white-space: nowrap;
  transition: color var(--t) var(--ease);
}
.signup-row button:hover{ color: var(--text); }
.signup-hp{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.signup-note{ font-size: 14px; color: var(--text-2); }
.signup-state{ display: none; font: italic 500 18px/1.5 var(--serif); color: var(--evidence); margin-bottom: 20px; }
.signup-state:target{ display: block; }
.signup-state a{ color: var(--accent); }
.signup-error{ color: var(--accent); }
.signup-note a{ color: var(--accent); }
.signup-success{
  font: italic 500 18px/1.5 var(--serif);
  color: var(--evidence);
  padding-top: 4px;
}

.newsletter-page{
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px;
  padding-top: 40px; padding-bottom: 112px;
  align-items: start;
}
.newsletter-form{ border-top: 1px solid var(--line-2); padding-top: 32px; }
.newsletter-alt{ margin-top: 28px; font-size: 15px; color: var(--text-2); }
.newsletter-alt a{ color: var(--accent); }
.newsletter-inside{ border-top: 1px solid var(--line-2); padding-top: 32px; }
.inside-list{ list-style: none; margin: 0; padding: 0; }
.inside-list li{ padding: 16px 0; border-bottom: 1px solid var(--line); }
.inside-list h2{ font: 500 22px/1.25 var(--serif); margin-bottom: 8px; }
.inside-list p{ font-size: 16px; color: var(--text-2); }
.newsletter-fine{ margin-top: 20px; font-size: 14px; color: var(--text-3); }

/* ---------- Quality framework ---------- */

.quality-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.quality-cell{ background: var(--surface); padding: 32px 28px 40px; }
.quality-cell .num{
  font: italic 500 18px/1 var(--serif);
  color: var(--accent);
  display: block; margin-bottom: 16px;
}
.quality-cell h3{ font: 500 22px/1.2 var(--serif); margin: 0 0 8px; }
.quality-cell p{ font-size: 16px; color: var(--text-2); }

/* ---------- Home: rhythm ----------
   Grounds alternate cream, warm white, and one dark band, so the page reads
   as distinct movements instead of seven identical sections. */

.band-paper{ background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* The one high-contrast block on the page: the digest. Role tokens are
   re-pointed for the dark ground so every child component follows. */
.newsletter-dark{
  --text: var(--paper);
  --text-2: #D8CDBE;
  --text-3: #B9AC9A;
  --accent: #D9BB93;
  --accent-mark: #B8956B;
  --evidence: #BACDBF;
  --focus: #E8D3B4;
  background: var(--ink);
  color: var(--text);
  border: 0;
  padding: 104px 0;
}
.newsletter-dark h2{ font-size: clamp(38px, 4.2vw, 58px); }
.newsletter-dark .signup-row{ border-bottom-color: var(--text-2); }
.newsletter-dark .signup-row:focus-within{ border-color: var(--accent); }
.newsletter-dark ::selection{ background: var(--bronze); color: var(--paper); }

.signup-large .signup-row{ border: 1px solid var(--text-2); }
.signup-large .signup-row input[type="email"]{ font-size: 19px; padding: 18px 20px; min-height: 64px; }
.signup-large .signup-row button{
  background: var(--paper); color: var(--ink);
  padding: 0 28px; min-height: 64px;
  font-size: 13px;
}
.signup-large .signup-row button:hover{ background: var(--accent); color: var(--ink); }
.signup-large .signup-note{ font-size: 15px; }

/* Topic cards: places to go, each carrying its sheets' rails. */
.topic-cards{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.topic-card{
  display: flex; flex-direction: column; gap: 4px;
  height: 100%;
  padding: 24px 24px 28px;
  background: var(--bg);
  border: 1px solid var(--line);
  text-decoration: none; color: var(--text);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.topic-card:hover{ border-color: var(--line-3); }
@media (prefers-reduced-motion: no-preference){ .topic-card:hover{ transform: translateY(-2px); } }
.topic-card-label{ font: 500 28px/1.15 var(--serif); }
.topic-card:hover .topic-card-label{ color: var(--accent); }
.topic-card-count{
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}
.topic-card-sheets{ display: grid; gap: 8px; margin-top: auto; border-top: 1px solid var(--line); padding-top: 16px; }
.topic-card-sheet{ display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-2); }

/* Latest research: one featured note, the rest compact. */
.research-split{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: start; }
.feature{ display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; border-top: 1px solid var(--line-2); padding-top: 32px; }
.feature-figure{ margin: 0; }
.feature-figure img{ width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; display: block; border: 1px solid var(--line); }
.feature h3{ font: 500 clamp(30px, 3vw, 40px)/1.1 var(--serif); margin-bottom: 16px; text-wrap: balance; }
.feature h3 a{ color: inherit; text-decoration: none; }
.feature h3 a:hover{ color: var(--accent); }
.feature-standfirst{ font: italic 500 20px/1.45 var(--serif); color: var(--text-2); margin-bottom: 16px; }
.feature-excerpt{ font-size: 16px; color: var(--text-2); margin-bottom: 20px; max-width: 60ch; }
.feature-sheet{ display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-2); margin-bottom: 20px; }
.feature-sheet a{ color: var(--accent); }
.index-list-compact .index-row{ grid-template-columns: 64px 1fr; gap: 20px; padding: 20px 0; align-items: start; }
.index-list-compact .index-thumb, .index-list-compact .index-tile{ width: 64px; height: 64px; }
.index-list-compact .tile-tag{ display: none; }
.index-list-compact .tile-mark{ width: 24px; height: 24px; }
.index-list-compact .index-topic{ font-size: 21px; }
.index-list-compact .index-desc{ font-size: 15px; }
.index-list-compact .index-tag{ display: none; }

/* Start here: three numbered steps across, not another list of rows. */
.start-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--line-2);
}
.start-grid li + li{ border-left: 1px solid var(--line); }
.start-grid a{ display: block; height: 100%; padding: 32px 32px 36px; text-decoration: none; color: var(--text); }
.start-grid li:first-child a{ padding-left: 0; }
.start-num{ display: block; font: italic 500 56px/1 var(--serif); color: var(--accent-mark); margin-bottom: 20px; }
.start-grid h3{ font: 500 26px/1.2 var(--serif); margin-bottom: 12px; }
.start-grid a:hover h3{ color: var(--accent); }
.start-grid p{ font-size: 16px; color: var(--text-2); }

/* ---------- Page heroes (inner pages) ---------- */

.page-hero{ padding-top: 76px; padding-bottom: 28px; }
.page-hero h1{
  font: 500 clamp(40px, 5vw, 66px)/1.05 var(--serif);
  margin: 0 0 20px;
  max-width: 20ch;
  text-wrap: balance;
}
.page-hero .hero-actions{ margin-top: 36px; }

/* ---------- Research notes ---------- */

.notes{ border-top: 1px solid var(--line-2); }
.note{ padding: 48px 0 56px; border-bottom: 1px solid var(--line); scroll-margin-top: 88px; }
.note-meta{ display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.note-meta time{ font-size: 14px; color: var(--text-3); }
.note-grid{ display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; }
.note-grid-solo{ grid-template-columns: 1fr; }
.note-main h2{ font: 500 clamp(28px, 3vw, 38px)/1.12 var(--serif); margin-bottom: 16px; text-wrap: balance; }
.note-standfirst{ font: italic 500 20px/1.45 var(--serif); color: var(--text-2); margin-bottom: 20px; max-width: 58ch; }
.note-main p + p{ margin-top: 16px; }
.note-main > p:not(.note-standfirst){ color: var(--text-2); font-size: 16px; max-width: 64ch; }
.note-related{ margin-top: 24px !important; font-size: 14px !important; }
.note-related a{ color: var(--accent); }
.note-figure{ margin: 0; }
.note-figure img{ width: 100%; display: block; }

/* ---------- Peptide sheet ---------- */

.sheet-head{ padding-top: 64px; }
.sheet-kicker{
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 32px;
}
.sheet-kicker .eyebrow{ margin: 0; }
.sheet-kicker-right{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.reviewed{ font-size: 14px; color: var(--text-3); }
.sheet-head h1{
  font: 500 clamp(54px, 8vw, 100px)/1 var(--serif);
  letter-spacing: .005em;
  margin: 0 0 24px;
}
.sheet-lede{
  font: italic 500 clamp(19px, 2.2vw, 24px)/1.5 var(--serif);
  color: var(--text-2);
  max-width: 54ch;
  text-wrap: pretty;
}
.sheet-body{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 72px;
  align-items: start;
  padding: 56px 0 80px;
}
.glance{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0 0 44px;
  padding: 24px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line);
}
.glance dt{
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.glance dd{ margin: 0; font: 500 19px/1.3 var(--serif); }
.glance-sub{ display: block; font: 400 14px/1.5 var(--sans); color: var(--text-2); margin-top: 4px; }
.glance .row-topics{ margin-top: 2px; }
.sheet-main h2{ font: 500 clamp(26px, 2.6vw, 34px)/1.15 var(--serif); margin: 0 0 16px; }
.sheet-main h3{
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--evidence);
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin: 36px 0 12px;
}
.sheet-main ul{ list-style: none; margin: 0; padding: 0; }
.sheet-main li{
  position: relative;
  padding: 8px 0 8px 24px;
  color: var(--text-2);
  font-size: 16px;
}
.sheet-main li::before{
  content: "";
  position: absolute; left: 2px; top: 17px;
  width: 8px; height: 1.5px;
  background: var(--accent-mark);
}
.bottom-line{
  margin-top: 44px;
  padding: 28px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.bottom-line-label{
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.bottom-line-text{ font: italic 500 22px/1.35 var(--serif); }
.bottom-line-folio{
  margin-top: 16px;
  font: 600 12px/1.5 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
}
.sheet-why{ color: var(--text-2); font-size: 17px; max-width: 62ch; margin: 0 0 40px; }

/* ---------- Sources and corrections ---------- */

.sources{ margin-top: 44px; border-top: 1px solid var(--line-2); padding-top: 24px; }
.sources-title{
  font: 600 12px/1.4 var(--sans) !important;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 8px !important;
}
.sources-list{ list-style: none; margin: 0; padding: 0; counter-reset: src; }
.sources-list li{
  counter-increment: src;
  display: grid; grid-template-columns: 28px 1fr; column-gap: 8px;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.sources-list li::before{
  content: counter(src) "." !important;
  position: static !important; width: auto !important; height: auto !important; background: none !important;
  grid-row: 1 / span 3;
  font: italic 500 17px/1.3 var(--serif); color: var(--accent);
}
.source-kind{
  font: 600 11px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--evidence);
  margin-bottom: 4px;
}
.sources-list a{ color: var(--text); text-decoration-color: var(--line-2); text-underline-offset: 3px; line-height: 1.45; }
.sources-list a:hover{ color: var(--accent); text-decoration-color: currentColor; }
.source-detail{ font-size: 14px; color: var(--text-3); margin-top: 4px; }
.sources-note{ font-size: 14px; color: var(--text-3); margin-top: 16px; max-width: 60ch; }
.correction{ margin-top: 28px; font-size: 15px; color: var(--text-2); }
.correction a{ color: var(--accent); }
.method-more{ margin-top: 16px; font-size: 15px; }
.method-more a{ color: var(--accent); }
.note-page{ padding-bottom: 32px; }
.note-hero{ padding-left: 0; padding-right: 0; }
.note-hero .eyebrow a{ color: inherit; text-decoration: none; }
.note-hero h1{ max-width: 22ch; }
.note-main h2 a{ color: inherit; text-decoration: none; }
.note-main h2 a:hover{ color: var(--accent); }
.note-more{ margin-top: 8px; }
.note-page .note-main > p:not(.note-standfirst):not(.bottom-line-folio):not(.correction):not(.note-related){ color: var(--text-2); font-size: 17px; max-width: 64ch; }
.note-page .note-main > p + p{ margin-top: 18px; }
.note-page .bottom-line-folio{ margin-top: 28px; font-size: 12px; }
.note-page .related{ margin-top: 72px; }

.sheet-aside{ position: sticky; top: 92px; }
.plate{ margin: 0; }
.plate img{ width: 100%; display: block; }
.plate figcaption{
  font-size: 14px; line-height: 1.6;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
  padding: 16px 2px 16px;
}
.aside-note{
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line);
  padding: 24px 2px;
  font-size: 15px; line-height: 1.7;
  color: var(--text-2);
}
.related{ padding-bottom: 80px; }
.related .section-head{ grid-template-columns: 1fr; }
.sheet-cta{
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  border-top: 1px solid var(--line-2);
  padding: 56px 0 96px;
}
.sheet-cta h2{ font: 500 clamp(26px, 2.6vw, 34px)/1.15 var(--serif); margin-bottom: 8px; }

/* ---------- About ---------- */

.about-grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 72px;
  padding-top: 40px; padding-bottom: 112px;
}
.about-block{ border-top: 1px solid var(--line-2); padding: 32px 0 44px; }
.about-wide{ grid-column: 1 / -1; }
.about-block h2{ font: 500 clamp(26px, 2.4vw, 32px)/1.2 var(--serif); margin: 0 0 16px; }
.about-block p{ color: var(--text-2); font-size: 16px; max-width: 62ch; }
.about-block p + p{ margin-top: 12px; }
.about-block a{ color: var(--accent); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.about-lead p:first-of-type::first-letter{
  font: 500 54px/.8 var(--serif);
  color: var(--accent);
  float: left;
  padding: 8px 8px 0 0;
}
.questions{
  list-style: none; margin: 20px 0 0; padding: 0;
  counter-reset: q;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px;
  max-width: none;
}
.questions li{
  counter-increment: q;
  display: flex; gap: 16px; align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font: 500 21px/1.3 var(--serif);
  color: var(--text);
}
.questions li::before{
  content: counter(q);
  font: italic 500 14px/1 var(--serif);
  color: var(--accent);
  min-width: 24px;
}

/* ---------- Start here (primer) ---------- */

.primer{
  display: grid; grid-template-columns: 220px 1fr; gap: 72px;
  align-items: start;
  padding-top: 32px; padding-bottom: 112px;
}
.primer-toc{ position: sticky; top: 92px; border-top: 1px solid var(--line-2); padding-top: 24px; }
.primer-toc ol{ list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.primer-toc li{ counter-increment: toc; display: flex; gap: 8px; align-items: baseline; padding: 8px 0; }
.primer-toc li::before{ content: counter(toc); font: italic 500 14px/1 var(--serif); color: var(--accent); min-width: 16px; }
.primer-toc a{ font-size: 15px; color: var(--text-2); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--t) var(--ease), border-color var(--t) var(--ease); }
.primer-toc a:hover{ color: var(--accent); border-color: var(--accent); }
.primer-body{ max-width: 66ch; }
.primer-body-solo{ grid-column: 1 / -1; margin: 0 auto; }
.primer-section{ padding: 8px 0 48px; scroll-margin-top: 88px; }
.primer-section + .primer-section{ border-top: 1px solid var(--line); padding-top: 44px; }
.primer-section h2{ font: 500 clamp(30px, 3vw, 40px)/1.12 var(--serif); margin-bottom: 16px; text-wrap: balance; }
.primer-section p{ color: var(--text-2); font-size: 16px; line-height: 1.7; }
.primer-section p + p, .primer-section ol + p, .primer-section dl + p{ margin-top: 16px; }
.primer-section h3{ font: 500 21px/1.3 var(--serif); }

.read-list{ list-style: none; margin: 24px 0 0; padding: 0; counter-reset: rq; }
.read-list li{
  counter-increment: rq;
  display: grid; grid-template-columns: 24px 1fr; gap: 0 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.read-list li::before{
  content: counter(rq);
  font: italic 500 14px/1.6 var(--serif);
  color: var(--accent);
  padding-top: 4px;
}
.read-list h3{ margin-bottom: 8px; text-wrap: balance; }
.read-list p{ font-size: 16px; grid-column: 2; }

.ladder-list{ list-style: none; margin: 24px 0 0; padding: 0; }
.ladder-list li{
  display: grid; grid-template-columns: 44px 1fr; gap: 0 16px; align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.ladder-list li:last-child{ border-bottom: 1px solid var(--line); }
.ladder-num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--evidence); color: var(--paper);
  font: 600 13px/1 var(--sans);
  margin-top: 2px;
}
.ladder-list h3{ color: var(--evidence); }
.ladder-list p{ font-size: 16px; }

.glossary{ margin: 24px 0 0; border-top: 1px solid var(--line); }
.glossary-row{
  display: grid; grid-template-columns: 220px 1fr; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.glossary dt{ font: 600 12px/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text); padding-top: 3px; }
.glossary dd{ margin: 0; font-size: 16px; color: var(--text-2); }

.plain-list{ list-style: none; margin: 0; padding: 0; }
.plain-list li{ position: relative; padding: 8px 0 8px 24px; color: var(--text-2); font-size: 16px; }
.plain-list li::before{ content: ""; position: absolute; left: 2px; top: 20px; width: 8px; height: 1.5px; background: var(--accent-mark); }

.primer-cta{
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  border-top: 1px solid var(--line-2);
  padding-top: 40px;
}

/* ---------- Footer ---------- */

.footer{ border-top: 1px solid var(--line-2); padding: 64px 0 44px; }
.footer-top{
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line);
}
.footer-brand .wordmark{ margin-bottom: 16px; }
.footer-tagline{
  font: italic 500 18px/1.4 var(--serif);
  color: var(--accent);
  margin: 0 0 12px;
}
.footer-brand p:not(.footer-tagline){ color: var(--text-2); font-size: 15px; max-width: 40ch; }
.footer-col h2{
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 16px;
}
.footer-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a{
  display: inline-block;
  text-decoration: none; color: var(--text-2); font-size: 15px;
  padding: 3px 0;
  transition: color var(--t) var(--ease);
}
.footer-col a:hover{ color: var(--accent); }
.footer-line{
  font: 600 12px/1.6 var(--sans);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  padding: 24px 0 24px;
  border-bottom: 1px solid var(--line);
}
.footer-bottom{
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 28px; padding-top: 24px; flex-wrap: wrap;
}
.disclaimer{ font-size: 14px; color: var(--text-3); max-width: 70ch; line-height: 1.6; }
.copyline{ font-size: 14px; color: var(--text-3); white-space: nowrap; }

/* ---------- Responsive ---------- */

@media (max-width: 980px){
  .nav{ gap: 16px; }
  .nav-toggle{ display: inline-flex; }
  .primary-nav{ margin-left: 0; }
  .nav-cta{ margin-left: auto; }
  .nav-links{
    display: none;
    position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line-2);
    padding: 8px var(--gutter) 12px;
    flex-direction: column; gap: 0;
    z-index: 50;
  }
  .nav-links.open{ display: flex; }
  .nav-links li{ border-bottom: 1px solid var(--line); }
  .nav-links li:last-child{ border-bottom: 0; }
  .nav-links a{ display: block; padding: 16px 0; border-bottom: 0; font-size: 13px; }
  .nav-links a[aria-current="page"]{ border-bottom: 0; }
  .nav-links-cta{ display: block; }
  .nav-links-cta a{ color: var(--accent); }

  .hero{ grid-template-columns: 1fr; gap: 56px; padding-top: 64px; padding-bottom: 72px; }
  .specimen{ max-width: 560px; }

  .section{ padding-top: 72px; padding-bottom: 72px; }
  .section-body{ padding-bottom: 88px; }
  .section-head{ grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .section-head .dek{ justify-self: start; }

  .quality-grid{ grid-template-columns: 1fr 1fr; }
  .research-split{ grid-template-columns: 1fr; gap: 40px; }
  .start-grid{ grid-template-columns: 1fr; }
  .start-grid li + li{ border-left: 0; border-top: 1px solid var(--line); }
  .start-grid a, .start-grid li:first-child a{ padding: 28px 0; }
  .start-grid a{ display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; }
  .start-num{ grid-row: 1 / span 2; font-size: 40px; margin: 0; }
  .note-grid{ grid-template-columns: 1fr; gap: 28px; }
  .note-figure{ max-width: 320px; }
  .sheet-body{ grid-template-columns: 1fr; gap: 48px; }
  .sheet-aside{ position: static; max-width: 420px; }
  .sheet-cta{ grid-template-columns: 1fr; gap: 28px; }
  .about-grid{ grid-template-columns: 1fr; gap: 0; }
  .questions{ grid-template-columns: 1fr; }
  .primer{ grid-template-columns: 1fr; gap: 40px; }
  .primer-toc{ position: static; }
  .newsletter-page{ grid-template-columns: 1fr; gap: 48px; }
  .glance{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px){
  :root{ --gutter: 20px; }
  .skip{ left: 20px; }
  .nav{ min-height: 60px; }
  .nav{ gap: 12px; }
  .nav-cta{ padding: 0 12px; min-height: 40px; }
  .nav-toggle{ padding: 0 4px; }
  .nav-toggle-text{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .hero{ padding-top: 48px; padding-bottom: 64px; gap: 44px; }
  .hero h1{ margin-bottom: 24px; }
  .hero .lede{ margin-bottom: 32px; }
  .hero-folio{ margin-top: 32px; }
  .specimen{ padding: 28px 24px 24px; }
  .scale li{ grid-template-columns: 24px 1fr; }
  .scale .rung-who{ grid-column: 2; text-align: left; max-width: none; }

  .section{ padding-top: 60px; padding-bottom: 60px; }
  .section-body{ padding-top: 36px; padding-bottom: 72px; }
  .page-hero{ padding-top: 52px; }
  .newsletter{ padding: 64px 0; }
  .newsletter-inner{ grid-template-columns: 1fr; gap: 32px; }
  .quality-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; gap: 32px; }
  .sources-list li{ grid-template-columns: 24px 1fr; }
  .footer-bottom{ flex-direction: column; }
  .newsletter-dark{ padding: 72px 0; }
  .signup-large .signup-row input[type="email"]{ font-size: 17px; padding: 14px 16px; min-height: 56px; }
  .signup-large .signup-row button{ padding: 0 18px; min-height: 56px; }
  .feature{ grid-template-columns: 1fr; gap: 24px; }
  .feature-figure img{ aspect-ratio: 16 / 10; }
  .tile-tag{ display: none; }
  .topic-cards{ grid-template-columns: 1fr; gap: 12px; }
  .legend, .method, .upnext{ padding: 24px 24px; }
  .upnext{ flex-direction: column; gap: 12px; }

  .index-row{ grid-template-columns: 72px 1fr; gap: 16px; row-gap: 8px; align-items: start; }
  .index-thumb, .index-tile{ width: 72px; height: 72px; }
  .index-tile{ gap: 8px; padding: 4px; }
  .tile-name{ font-size: 14px; }
  .index-tile .dots{ gap: 2px; }
  .index-tile .dots i{ width: 6px; height: 6px; }
  .index-list-compact .index-row{ grid-template-columns: 56px 1fr; gap: 16px; }
  .index-list-compact .index-thumb, .index-list-compact .index-tile{ width: 56px; height: 56px; }
  .index-row .index-tag{ grid-column: 2; justify-self: start; order: 3; }
  .index-row:has(.row-topics) .index-tag{ display: none; }
  .index-row.no-thumb{ grid-template-columns: 1fr; }
  .index-row.no-thumb .index-tag{ grid-column: 1; }
  .ev-mini{ flex-wrap: wrap; row-gap: 4px; }
  .ev-mini-label{ flex-basis: 100%; }
  .legend-body{ grid-template-columns: 1fr; }
  .method-list{ grid-template-columns: 1fr; }
  .index-topic{ font-size: 23px; }
  .index-meta{ gap: 8px 16px; }

  .rail-track{ flex-direction: column; }
  .rail-track::before{ left: 7px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; }
  .rail-track li{ padding: 8px 0 8px 32px; display: flex; align-items: baseline; gap: 12px; }
  .rail-track .dot{ top: 9px; }
  .rail-num{ margin: 0; min-width: 14px; }
  .rail-label{ max-width: none; }
  .rail-head{ flex-direction: column; gap: 8px; margin-bottom: 20px; }

  .sheet-head{ padding-top: 40px; }
  .sheet-kicker{ margin-bottom: 24px; }
  .sheet-body{ padding: 40px 0 56px; }
  .glance{ grid-template-columns: 1fr; gap: 16px; }
  .bottom-line{ padding: 24px 20px; }
  .sheet-cta{ padding: 44px 0 72px; }
  .glossary-row{ grid-template-columns: 1fr; gap: 8px; }
  .read-list li{ grid-template-columns: 28px 1fr; }
  .primer-section h2{ font-size: 30px; }
}

/* ---------- Print: cheat sheets are meant to be kept ---------- */

/* Small phones: tighten the masthead so logo, Newsletter, and Menu fit on one
   line down to 360px. Below that they cannot, so Newsletter moves into the
   menu, where it is already the first-class item. */
@media (max-width: 399px){
  .nav{ gap: 8px; }
  .wordmark{ letter-spacing: .14em; }
  .nav-cta{ padding: 0 10px; letter-spacing: .1em; }
}
@media (max-width: 359px){
  .nav-cta{ display: none; }
  .nav-toggle{ margin-left: auto; }
}

@media print{
  :root{ --bg: #fff; --surface: #fff; }
  .masthead, .footer-top, .footer-line, .skip, .sheet-cta, .related, .rail-help, .specimen-link{ display: none !important; }
  body{ font-size: 12pt; }
  a{ text-decoration: none; color: inherit; }
  .sheet-aside{ position: static; }
  .rail-track .dot{ animation: none; }
  .index-row, .note, .primer-section{ break-inside: avoid; }
}