/* ═══════════════════════════════════════════════════════════════════
   LEARN  —  /learn/
   SELF-CONTAINED light theme. Learn pages load ONLY this stylesheet —
   not css/styles.css. Same type system as the main site (Archivo
   headings, Inter body, gold accents) inverted onto warm paper:
   the "day edition" of the dark site.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=Archivo+Black&family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  --paper: #faf7f0;          /* page ground — warm off-white           */
  --paper-2: #f3eee3;        /* tinted panels                          */
  --card: #ffffff;           /* cards riding on the paper              */
  --ink: #171d2a;            /* body ink — the dark site's bg, inverted */
  --ink-2: #4c5670;          /* secondary                              */
  --ink-3: #8a92a6;          /* tertiary / metadata                    */
  --gold: #b07f2e;           /* decorative gold (borders, buttons)     */
  --gold-deep: #8a6114;      /* gold that must read as TEXT on paper   */
  --gold-dim: rgba(176, 127, 46, 0.09);
  --gold-glow: rgba(176, 127, 46, 0.22);
  --hero-band: #f7f3ea;      /* mid tone of the hero band          */
  --hero-band-deep: #f1e7d5; /* where it settles, at the band's foot */
  --border: rgba(23, 29, 42, 0.12);
  --border-gold: rgba(176, 127, 46, 0.38);
  --danger: #a63e22;
  --danger-bg: rgba(166, 62, 34, 0.06);
  --radius: 12px;
  --radius-lg: 20px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* The main site's dark palette (css/styles.css), used only by the header
     bar so the two halves of the site read as one brand. */
  --nav-bg: #07090f;
  --nav-border: rgba(255, 255, 255, 0.08);
  --nav-text: #ddd4c0;
  --nav-text-2: #8a9ab8;
  --nav-text-3: #4a5870;
  --nav-gold: #c8923e;
  --nav-gold-light: #e8b06a;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Archivo', sans-serif;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.gold { color: var(--gold-deep); }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  border: none;
}
.btn-sm { padding: 8px 18px; font-size: 0.85rem; }
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn-full { width: 100%; justify-content: center; }

.btn-primary {
  background: linear-gradient(135deg, #b07f2e, #8a6114);
  color: #fff;
  box-shadow: 0 4px 20px rgba(176, 127, 46, 0.28);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(176, 127, 46, 0.4);
  filter: brightness(1.06);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-deep); }

/* ─── NAV — the dark bar carried over from the main site ───
   /learn/ is the day edition of a dark site, but the header stays the
   site's own. One difference from css/styles.css: there the bar is
   transparent until you scroll, over a dark page. Here the page is warm
   paper, so the bar has to be opaque from the first pixel or the light
   type would sit on light ground. .scrolled only tightens it. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: var(--transition);
  padding: 20px 0;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}
.nav.scrolled {
  padding: 14px 0;
  box-shadow: 0 8px 26px rgba(7, 9, 15, 0.16);
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-logo {
  font-family: 'Archivo', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink);
  flex-shrink: 0;
}
.nav-logo span { color: var(--gold-deep); }

/* Wordmark + attribution stacked, same lockup as the homepage nav */
.nav-logo-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}
.nav-byline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nav-text-3);
  transition: var(--transition);
}
.nav-byline:hover { color: var(--nav-gold); }
.nav-byline-mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
/* The footer reuses .nav-logo on paper, so the dark values stay in the bar. */
.nav .nav-logo { color: var(--nav-text); }
.nav .nav-logo span { color: var(--nav-gold); }
.nav-inner > .btn { margin-left: auto; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a { font-size: 0.875rem; color: var(--nav-text-2); transition: var(--transition); }
.nav-links a:hover { color: var(--nav-text); }
.nav-links a.nav-login { color: var(--nav-gold-light); font-weight: 600; }
.nav-links a.nav-login:hover { color: var(--nav-gold); }

/* The Enroll button matches the main site's gold, not the deeper gold the
   rest of these pages use: on paper that one reads, on near-black it dulls. */
.nav .btn-primary {
  background: linear-gradient(135deg, var(--nav-gold), #a87030);
  box-shadow: 0 4px 24px rgba(200, 146, 62, 0.3);
}
.nav .btn-primary:hover {
  box-shadow: 0 8px 32px rgba(200, 146, 62, 0.45);
  filter: brightness(1.1);
}

/* Section link sitting just left of the Enroll button. It replaced the
   per-article breadcrumb trail, so it is now the only visible path back to
   the hub from an article — keep it visible at every width.
   The auto margin moves to this link, so the button must give its own up:
   two auto margins would split the free space and strand the link mid-nav. */
.nav-learn-link {
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--nav-text-2);
  white-space: nowrap;
  transition: var(--transition);
}
.nav-learn-link:hover { color: var(--nav-gold-light); }
.nav-learn-link[aria-current="page"] { color: var(--nav-gold-light); font-weight: 600; }
.nav-learn-link + .btn { margin-left: 0; }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--nav-text);
  border-radius: 2px;
  transition: var(--transition);
}

/* ─── BREADCRUMBS ─── */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ink-3);
  margin-bottom: 26px;
}
.breadcrumbs a { color: var(--ink-2); transition: var(--transition); }
.breadcrumbs a:hover { color: var(--gold-deep); }
.breadcrumbs .sep { opacity: 0.4; }

/* ═══════════════════════════════════════════════════════════════════
   ARTICLE
   ═══════════════════════════════════════════════════════════════════ */

.article-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ═══ HERO ═══
   Split header: the editorial column on the left, a specimen card on the
   right. Every /learn/ page carries one figure up here; pages that do not
   have art yet get .article-header--plain and stay single column. */
.article-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 52px;
  align-items: center;
  padding: 124px 0 48px;
  margin-bottom: 48px;
}
/* The band runs edge to edge while its content stays in the 1120 column, so
   it is painted by a pseudo-element widened to the viewport rather than by a
   wrapper element on every page. It reaches the top of the document: the
   fixed nav is opaque, so what sits behind it never shows. */
.article-header::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  /* Starts as page paper under the nav and settles into the tint, so the
     band gains weight toward the edge where the article begins. */
  background: linear-gradient(180deg, var(--paper) 0%, var(--hero-band) 48%, var(--hero-band-deep) 100%);
  z-index: -1;
}
.article-header--plain { display: block; max-width: 780px; }
.article-hero-text { min-width: 0; }

.article-header h1 {
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  font-weight: 400;
  font-size: clamp(2.05rem, 3.6vw, 3.05rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0 0 20px;
  text-wrap: balance;
}

/* Standfirst reads as a pulled-aside note, not a caption: upright, held
   off the margin by a gold rule. */
.article-standfirst {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.03rem;
  line-height: 1.68;
  color: var(--ink-2);
  border-left: 3px solid var(--gold);
  padding-left: 18px;
  margin: 0 0 28px;
  max-width: 62ch;
}

/* Byline — author, reviewer, dates. Real weight on a medical page. */
.article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}
.byline-person { display: flex; align-items: center; gap: 11px; }
.byline-person img {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 2px solid var(--card);
  box-shadow: 0 1px 6px rgba(23, 29, 42, 0.18);
  transition: var(--transition);
}
.byline-person:hover img { border-color: var(--gold); }
.byline-label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1px;
}
.byline-person strong { display: block; color: var(--ink); font-weight: 600; font-size: 0.88rem; }
.byline-person span.cred { display: block; color: var(--ink-3); font-size: 0.75rem; }
.byline-person:hover strong { color: var(--gold-deep); }
/* The dates take their own row rather than an auto margin. Floated right
   they only sit level with a single author: add a contributor and they drop
   to a second row, and with three they collide with the one that wrapped.
   Their own row reads the same whoever is credited. */
.byline-dates {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 0.73rem;
  color: var(--ink-3);
  line-height: 1.5;
}
.byline-sep { margin: 0 4px; opacity: 0.5; }
/* Published and Updated are stamped together, so on a page that has never
   been revised they read as the same date twice. Hidden by default and
   revealed by js/learn.js only when the two dates actually differ, which
   also means no-JS readers see the published date rather than a repeat. */
.byline-updated { display: none; }
.byline-dates.is-updated .byline-updated { display: inline; }

/* ─── HERO SPECIMEN CARD ─── */
.article-hero-figure {
  margin: 0;
  background: var(--card);
  border: 1px solid rgba(23, 29, 42, 0.10);
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(23, 29, 42, 0.08);
  overflow: hidden;
  transition: var(--transition);
}
.article-hero-figure:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(23, 29, 42, 0.12);
}
.article-hero-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-2);
}
.article-hero-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Diagrams and drawn plates must not be cropped: they sit whole on a
   ground that matches their own, dark for charts, white for line art. */
.article-hero-figure--diagram .article-hero-frame img,
.article-hero-figure--plate .article-hero-frame img { object-fit: contain; }
.article-hero-figure--diagram .article-hero-frame { background: #131a29; }
.article-hero-figure--plate .article-hero-frame { background: var(--card); }

.article-hero-chip {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(23, 29, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #f8fafc;
  font-size: 0.71rem;
  font-weight: 600;
}
.article-hero-chip i { font-style: normal; color: #f0a726; }

.article-hero-caption {
  padding: 15px 20px 17px;
  border-top: 1px solid var(--border);
}
.article-hero-caption b {
  font-family: 'Archivo', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 4px;
}
.article-hero-caption b i {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  white-space: nowrap;
}
.article-hero-caption span {
  display: block;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ─── BODY GRID: prose + sticky TOC ─── */
.article-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: 72px;
  align-items: start;
  padding-bottom: 40px;
}
.article-body > .prose { max-width: 720px; }

.article-toc { position: sticky; top: 104px; font-size: 0.85rem; }
.article-toc-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.article-toc ol { list-style: none; margin: 0; padding: 0; }
/* Scoped to the list — a bare `.article-toc a` would outrank .btn-primary
   and repaint the Enroll button in the CTA block below. */
.article-toc ol a {
  display: block;
  padding: 8px 0 8px 15px;
  border-left: 2px solid var(--border);
  color: var(--ink-2);
  line-height: 1.4;
  transition: var(--transition);
}
.article-toc ol a:hover,
.article-toc ol a.is-active { color: var(--gold-deep); border-left-color: var(--gold); }

.article-toc-cta { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.article-toc-cta p { font-size: 0.82rem; color: var(--ink-3); margin: 0 0 12px; line-height: 1.5; }

/* ─── PROSE ─── */
.prose { font-size: 1.06rem; line-height: 1.85; color: var(--ink); }
.prose > * + * { margin-top: 1.3em; }
.prose h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  letter-spacing: -0.018em;
  margin-top: 1em;
  margin-bottom: 0.05em;
  scroll-margin-top: 96px;
  text-wrap: balance;
}
.prose h3 {
  font-size: 1.14rem;
  margin-top: 2em;
  margin-bottom: 0.05em;
  scroll-margin-top: 96px;
}
.prose a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-decoration-color: rgba(176, 127, 46, 0.4);
  text-underline-offset: 3px;
  transition: var(--transition);
}
.prose a:hover { color: var(--gold); text-decoration-color: var(--gold); }
/* Buttons sitting inside .prose must not inherit the prose link treatment —
   `.prose a` outranks `.btn-primary`, which repainted the CTA gold-on-gold. */
.prose a.btn { text-decoration: none; }
.prose a.btn-primary { color: #fff; }
.prose a.btn-ghost { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: 0.65em; }
.prose li::marker { color: var(--gold); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { color: inherit; }
.prose sup a { text-decoration: none; font-size: 0.7em; padding-left: 1px; }
.prose figure { margin: 2.4em 0; }
.prose img { width: 100%; border-radius: var(--radius); display: block; }
.prose figcaption { font-size: 0.83rem; color: var(--ink-3); margin-top: 10px; }
.prose blockquote {
  border-left: 3px solid var(--gold);
  padding: 2px 0 2px 24px;
  margin: 2.2em 0;
  font-family: 'Archivo', sans-serif;
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.65;
}
.prose blockquote cite {
  display: block;
  margin-top: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.83rem;
  font-style: normal;
  color: var(--ink-3);
}

/* Section kicker inside prose — "THE ROOTS", "THE SCIENCE" … */
.prose .kicker {
  display: block;
  margin-top: 3.9em;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.prose .kicker::after {
  content: '';
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.prose .kicker + h2 { margin-top: 0.55em; }

/* Video figure — a filmed segment dropped into the article */
.article-video { margin: 2.2em 0; }
.article-video video {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  background: #0c1018;
  box-shadow: 0 14px 44px rgba(23, 29, 42, 0.22);
}
.article-video figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.83rem;
  color: var(--ink-3);
  margin-top: 12px;
}
.article-video figcaption b {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  flex: none;
}

/* Click-to-play facade. The documentary's own thumbnail stands in for the
   YouTube player until a reader actually asks for it, so no third-party frame
   loads on a page most people scroll past. learn.js swaps the button for the
   real iframe on click; both sit in the same 16/9 box, so nothing shifts. */
.article-video .video-facade {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #0c1018;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 14px 44px rgba(23, 29, 42, 0.22);
  transition: var(--transition);
}
/* Absolutely positioned so it fills the button rather than being laid out by
   the button's own centering box, which sizes replaced children to intrinsic
   width and lets a 1200px thumbnail overflow. */
.article-video .video-facade img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.article-video .video-facade:hover { box-shadow: 0 20px 52px rgba(23, 29, 42, 0.30); }
.article-video .video-facade:hover img { transform: scale(1.02); }
.article-video .video-facade:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Play badge, drawn rather than shipped as an asset. A plain still gives the
   reader nothing to say "this is a video", so the facade wears one by
   default; --bare turns it off for a thumbnail that already has a player
   baked into the picture. */
.article-video .video-facade::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(12, 16, 24, 0.58);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 22px rgba(12, 16, 24, 0.34);
  transition: background 0.25s ease, border-color 0.25s ease;
  z-index: 1;
}
.article-video .video-facade::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-38%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
  z-index: 2;
}
.article-video .video-facade:hover::after {
  background: rgba(176, 127, 46, 0.88);
  border-color: #fff;
}
.article-video .video-facade--bare::before,
.article-video .video-facade--bare::after { content: none; }

/* Diagram figure — a drawn explainer dropped into the article.
   Matted on a white card so a sketch on its own paper stock reads as a
   deliberate diagram rather than a stray photo. Caption matches the
   video figure's gold label so both figure types feel like one system. */
.article-figure { margin: 2.4em 0; }
.article-figure-frame {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 14px 44px rgba(23, 29, 42, 0.10);
}
.article-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--radius) - 5px);
}
/* Hanging gold label beside the caption text. The caption text MUST be wrapped
   in its own <span>: figcaption is a flex container, so any bare inline tag
   (an <em>, an <a>) would otherwise become a separate flex column and break
   the sentence into fragments. */
.article-figure figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.83rem;
  color: var(--ink-3);
  margin-top: 12px;
}
.article-figure figcaption span { flex: 1; }
.article-figure figcaption b {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  flex: none;
}
/* --plate: for artwork that already carries its own white ground and margins.
   Drops the mat so the illustration meets the card edge instead of sitting in
   a second, wider band of white. */
.article-figure--plate .article-figure-frame { padding: 0; overflow: hidden; }
.article-figure--plate img { border-radius: 0; }
/* A figure that links out (a press screenshot crediting its source). The
   anchor has to be a block or its line-height leaves a strip under the img. */
.article-figure-frame a { display: block; }

@media (max-width: 420px) {
  /* Small phones: shed the logo's second word rather than the section link,
     which is the only way back to the hub now that breadcrumbs are gone. */
  .nav-logo span { display: none; }
  .nav-inner { gap: 10px; padding: 0 16px; }
  .nav-learn-link { font-size: 0.76rem; }
  .nav-inner > .btn { padding: 8px 12px; font-size: 0.78rem; }
}

@media (max-width: 360px) {
  /* 320px-class phones. Three nav items only just fit here, and the one that
     must never be clipped is the Enroll CTA, so squeeze spacing and type
     rather than letting anything run off the right edge. */
  .nav-inner { gap: 8px; padding: 0 12px; }
  .nav-logo { font-size: 0.92rem; letter-spacing: 0.08em; }
  .nav-learn-link { font-size: 0.72rem; }
  .nav-inner > .btn { padding: 7px 10px; font-size: 0.72rem; }
}

@media (max-width: 600px) {
  .article-figure-frame { padding: 9px; }
  .article-figure--plate .article-figure-frame { padding: 0; }
  .article-figure figcaption { display: block; }
  .article-figure figcaption b { margin-right: 8px; }
}

/* The direct answer — what gets pulled into snippets and AI summaries */
.answer-box {
  background: linear-gradient(180deg, var(--gold-dim), rgba(176, 127, 46, 0.03));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 26px 30px;
}
.answer-box p { margin: 0; }
.answer-box p + p { margin-top: 14px; }
.answer-box-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 12px;
}

/* Safety callout */
.safety-note {
  border-left: 3px solid var(--danger);
  background: var(--danger-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 26px;
}
.safety-note p { margin: 0; font-size: 0.99rem; }
.safety-note p + p { margin-top: 12px; }
.safety-note-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--danger);
  margin-bottom: 9px;
}

/* Key takeaways */
.takeaways {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: 0 2px 14px rgba(23, 29, 42, 0.05);
}
.takeaways h2 {
  font-size: 0.92rem !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 16px !important;
}
.takeaways ul { margin: 0; padding-left: 1.15em; }
.takeaways li { font-size: 0.97rem; color: var(--ink-2); }
.takeaways li strong { color: var(--ink); }

/* Data table */
.article-table {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.article-table table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.92rem; }
.article-table th {
  text-align: left;
  font-family: 'Archivo', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.article-table td {
  padding: 15px 18px;
  border-bottom: 1px solid rgba(23, 29, 42, 0.06);
  color: var(--ink-2);
  vertical-align: top;
  line-height: 1.6;
}
.article-table tr:last-child td { border-bottom: 0; }
.article-table td:first-child { color: var(--ink); font-weight: 500; }
.risk-high, .risk-mod {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.risk-high { background: rgba(166, 62, 34, 0.12); color: var(--danger); }
.risk-mod  { background: var(--gold-dim); color: var(--gold-deep); }

/* ─── RESEARCH LOG — dated running list of studies & news ─── */
.news-log { margin-top: 1.8em; }
.news-item {
  position: relative;
  padding: 0 0 26px 30px;
  border-left: 1px solid var(--border-gold);
}
.news-item:last-child { padding-bottom: 4px; border-left-color: transparent; }
.news-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 7px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--gold);
}
.news-date {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.news-item h3 { margin: 0 0 6px !important; font-size: 1.05rem !important; line-height: 1.4; }
.news-item h3 a { text-decoration: none; color: var(--ink); }
.news-item h3 a:hover { color: var(--gold-deep); }
.news-item p { font-size: 0.93rem; color: var(--ink-2); margin: 0; }

/* ─── EMAIL CAPTURE — research updates + clinic vetting checklist ─── */
.subscribe {
  background: var(--card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: 36px 38px;
  box-shadow: 0 10px 40px rgba(176, 127, 46, 0.12);
}
.subscribe h2 { font-size: 1.35rem !important; margin: 0 0 10px !important; letter-spacing: -0.015em; }
.subscribe > p { font-size: 0.95rem; color: var(--ink-2); margin: 0 0 22px; max-width: 58ch; }
.subscribe-form { display: flex; gap: 10px; flex-wrap: wrap; }
.subscribe-form input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 13px 18px;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: var(--transition);
}
.subscribe-form input[type="email"]:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
}
.subscribe-note { font-size: 0.78rem !important; color: var(--ink-3) !important; margin: 14px 0 0 !important; }

/* YouTube embeds inside article-video figures get the same treatment as
   native <video>, sized by aspect ratio since iframes have no intrinsic one */
.article-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  border-radius: var(--radius);
  background: #0c1018;
  box-shadow: 0 14px 44px rgba(23, 29, 42, 0.22);
}

/* Instant-download reveal inside the subscribe box (checklist form) */
.subscribe-thanks p { margin: 0 0 14px; }
.subscribe-thanks .btn { text-decoration: none; }

/* FAQ — mirrors the FAQPage schema. The list hugs its heading: the first
   rule is the section's own top edge, so a large gap above it reads as a
   hole between the heading and the questions it introduces. */
.article-faq { margin-top: 1.4em; }
.faq-item { border-top: 1px solid var(--border); padding: 22px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item h3 { font-size: 1.03rem; margin: 0 0 8px !important; }
.faq-item p { font-size: 0.97rem; color: var(--ink-2); margin: 0; }

/* Sources */
.article-sources { margin-top: 3.4em; padding-top: 30px; border-top: 1px solid var(--border); }
.article-sources h2 {
  font-size: 0.92rem !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 18px !important;
}
.article-sources ol { font-size: 0.86rem; color: var(--ink-2); padding-left: 1.4em; line-height: 1.65; }
.article-sources li { margin-bottom: 11px; }
.article-sources li::marker { color: var(--ink-3); }

.article-disclaimer {
  margin-top: 2.4em;
  font-size: 0.8rem;
  color: var(--ink-3);
  line-height: 1.65;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
}

/* ─── MORE GUIDES — auto-filled from js/learn-articles.js ─── */
.article-next {
  margin-top: 70px;
  padding-top: 46px;
  border-top: 1px solid var(--border);
}
.article-next h2 { font-size: 1.4rem; margin: 0 0 8px; }
.article-next > p { color: var(--ink-3); font-size: 0.9rem; margin: 0 0 26px; }

.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}
.learn-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 24px 22px;
  color: inherit;
  transition: var(--transition);
  box-shadow: 0 2px 10px rgba(23, 29, 42, 0.05);
}
.learn-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(23, 29, 42, 0.1);
}
.learn-card h4 { font-size: 1.02rem; font-weight: 600; margin: 0 0 9px; line-height: 1.4; }
.learn-card p { color: var(--ink-2); font-size: 0.89rem; margin: 0 0 18px; flex: 1; }
.learn-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
}
.learn-card-arrow { margin-left: auto; color: var(--gold); transition: var(--transition); }
.learn-card:hover .learn-card-arrow { transform: translateX(4px); }
.learn-card.is-planned { opacity: 0.5; pointer-events: none; border-style: dashed; background: transparent; box-shadow: none; }
.learn-card.is-planned .learn-card-arrow { display: none; }

/* ─── CTA ─── */
/* ─── CLOSING CTA ───
   Three looks, one markup. The base is the light card; add --warm or --deep
   on the <section> to swap it. All three share the bottom margin: the card
   used to end flush against the footer, which is what made it feel dropped
   in rather than closed with. */
.article-cta {
  margin: 84px 0 92px;
  padding: 54px 44px;
  text-align: center;
  background: linear-gradient(180deg, var(--card), var(--paper-2));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 50px rgba(176, 127, 46, 0.14);
}
.article-cta h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin: 0 0 16px; letter-spacing: -0.02em; }
.article-cta p { color: var(--ink-2); max-width: 54ch; margin: 0 auto 30px; }
.article-cta-note { margin-top: 22px !important; max-width: 62ch; font-size: 0.82rem; color: var(--ink-3); }
.article-cta-link { color: var(--gold-deep); }

/* ─ B: warm dark. The gold theme inverted onto roasted brown ─ */
.article-cta--warm {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(200, 146, 62, 0.18) 0%, transparent 60%),
    linear-gradient(168deg, #2b2013 0%, #1d1509 60%, #150f07 100%);
  border-color: rgba(200, 146, 62, 0.38);
  box-shadow: 0 18px 54px rgba(35, 24, 10, 0.30);
}
.article-cta--warm::before {
  content: "";
  position: absolute;
  top: 0; left: 18%; right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 176, 106, 0.75), transparent);
}
.article-cta--warm h2 { color: #f8eeda; }
.article-cta--warm p { color: rgba(248, 238, 218, 0.76); }
.article-cta--warm .article-cta-note { color: rgba(248, 238, 218, 0.5); }
.article-cta--warm .article-cta-link { color: #e8b06a; }

/* ─ C: deep blue, the homepage's ground brought into the day edition ─ */
.article-cta--deep {
  position: relative;
  overflow: hidden;
  padding: 62px 44px;
  background:
    radial-gradient(130% 95% at 50% 0%, #16203a 0%, #0c1018 58%, #07090f 100%);
  border-color: rgba(232, 176, 106, 0.22);
  box-shadow: 0 20px 60px rgba(7, 9, 15, 0.32);
}
.article-cta--deep::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 176, 106, 0.6), transparent);
}
.article-cta--deep h2 {
  color: #ddd4c0;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
}
.article-cta--deep p { color: #8a9ab8; }
.article-cta--deep .article-cta-note { color: #6f7e99; }
/* The guarantee is the one line in this note doing sales work, so it sits a
   step brighter than the rest of it. */
.article-cta-guarantee { color: var(--ink); font-weight: 600; }
.article-cta--deep .article-cta-guarantee { color: #cfc6b3; font-weight: 600; }
.article-cta--warm .article-cta-guarantee { color: #f0e2c8; font-weight: 600; }
.article-cta--deep .article-cta-link { color: #e8b06a; }
.article-cta--deep .btn-primary {
  background: linear-gradient(135deg, #c8923e, #a87030);
  box-shadow: 0 4px 24px rgba(200, 146, 62, 0.32);
}

/* ─── WHO WRITES THESE — contributor strip → experts.html ─── */
.learn-authors {
  margin-top: 70px;
  padding: 56px 0;
  border-top: 1px solid var(--border);
}
.learn-authors-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px 52px;
  justify-content: space-between;
}
.learn-authors-copy { max-width: 46ch; }
.learn-authors-copy h2 { font-size: 1.5rem; margin: 0 0 14px; letter-spacing: -0.015em; }
.learn-authors-copy p { color: var(--ink-2); margin: 0 0 20px; font-size: 0.95rem; }

.author-faces { display: flex; align-items: center; }
.author-faces img {
  width: 62px; height: 62px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 2px solid var(--paper);
  margin-left: -16px;
  transition: var(--transition);
  background: var(--card);
  box-shadow: 0 2px 10px rgba(23, 29, 42, 0.14);
}
.author-faces img:first-child { margin-left: 0; }
.author-faces:hover img { transform: translateY(-5px); border-color: var(--gold); }
.author-faces-more {
  width: 62px; height: 62px;
  border-radius: 50%;
  margin-left: -16px;
  display: grid;
  place-items: center;
  background: var(--card);
  border: 2px solid var(--paper);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gold-deep);
  box-shadow: 0 2px 10px rgba(23, 29, 42, 0.14);
}

/* ─── FOOTER — light ─── */
.footer { border-top: 1px solid var(--border); padding: 48px 0 32px; background: var(--paper-2); }
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.footer-brand .nav-logo { margin-bottom: 12px; display: block; }
.footer-brand p { color: var(--ink-3); font-size: 0.85rem; max-width: 280px; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.footer-links a { font-size: 0.875rem; color: var(--ink-2); transition: var(--transition); }
.footer-links a:hover { color: var(--gold-deep); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; }
.footer-bottom p { font-size: 0.78rem; color: var(--ink-3); line-height: 1.6; margin-bottom: 8px; }
.copyright { color: var(--ink-3) !important; }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .article-header { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-bottom: 40px; }
  .article-hero-figure { max-width: 560px; }
}

@media (max-width: 1000px) {
  .article-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .article-body > .prose { max-width: none; }
  /* The contents list earns its place only as a sticky desktop sidebar.
     Stacked on a phone it is just a wall of links above the article. */
  .article-toc { display: none; }
}

@media (max-width: 768px) {
  .nav-inner { gap: 14px; }
  .nav-learn-link { font-size: 0.8rem; }
  .nav-links { display: none; }
  .nav > .btn { display: none; }
  .nav-toggle { display: flex; }
  .nav-inner { position: relative; }

  .nav-mobile {
    position: fixed;
    inset: 0;
    background: var(--nav-bg);
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav-mobile.open { transform: translateY(0); }
  .nav-mobile a { font-size: 1.5rem; color: var(--nav-text); }

  .article-header { padding-top: 104px; }
  .article-cta { padding: 38px 24px; }
  .subscribe { padding: 28px 22px; }
  .learn-authors-inner { gap: 28px; }
  .author-faces img, .author-faces-more { width: 52px; height: 52px; margin-left: -14px; }
  .prose { font-size: 1.02rem; }
}

/* The bar holds three items that cannot wrap: wordmark, the link back to
   the hub, and Enroll. Below ~560px they run past the viewport and the
   button gets clipped off the right edge, so everything tightens. */
@media (max-width: 560px) {
  /* The attribution is wider than the wordmark above it, and this row has no
     width to spare. The homepage keeps it because a hamburger frees the space. */
  .nav-byline { display: none; }
  .nav-inner { gap: 12px; padding: 0 14px; }
  .nav-logo { font-size: 0.78rem; letter-spacing: 0.06em; }
  .nav-learn-link { font-size: 0.75rem; }
  .nav-inner .btn-sm { padding: 7px 12px; font-size: 0.75rem; }
}

/* One more step for 360px phones, where the three still do not fit. */
@media (max-width: 400px) {
  .nav-inner { gap: 10px; padding: 0 12px; }
  .nav-logo { font-size: 0.74rem; letter-spacing: 0.04em; }
  .nav-learn-link { font-size: 0.72rem; }
  .nav-inner .btn-sm { padding: 7px 11px; font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .learn-card:hover,
  .article-hero-figure:hover,
  .author-faces:hover img,
  .learn-card:hover .learn-card-arrow,
  .article-video .video-facade:hover img,
  .btn-primary:hover { transform: none; }
}