/* ═══════════════════════════════════════════════════════════════
   HPC SCIENCE DEEP DIVE — SITE-WIDE MAGAZINE CSS
   Version: 3.0 · drop-in replacement
   Replaces: v2.0 (May 2026)
   Source: SDD v3 Designer Prompt + SDD v3 Rationale
   Deploy: hpc-sdd-styles plugin enqueue on SDD post type

   What changed vs v2.0:
   • Body type flipped to serif (Cormorant Garamond) — three-family system
     (Cormorant + JetBrains Mono + body fallback). Inter retained as
     fallback only via --f-body, never as the design.
   • Numeral discipline: oldstyle in prose, tabular in data, lining in
     display — exposed as additive --num-* tokens.
   • Pillar accent applied once per zone (see §11). Surface ladder
     (--t1/--t2/--t3) does the workhorse text colour.
   • Block 04 drop-cap fires once on .sdd-lead--first only (preserved).
   • Block 05 figure breaks out to --m-figure (920px); pull-quote and
     stat callout break out to --m-pull (1100px).
   • Block 09 verdict bottomline panel uses pillar-tint background
     (no border) + hairline above.
   • Mobile (380px) rebuilds: drop-cap → small-caps mono first 3 words;
     nav rail → inline TOC; pull-quote loses bottom rule; chip column
     collapses in bibliography (handled in Bibliography.html).
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. RESET
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ─────────────────────────────────────────────
   2. CORE TOKENS — plugin-owned :root
   v2 tokens preserved verbatim. v3 additions marked [+].
───────────────────────────────────────────── */
:root {
  /* 2.1 Surface ladder */
  --void:        #050810;
  --deep:        #0A0F1E;
  --surface:     #111827;
  --surface-2:   #162238;
  --elevated:    #1E2D4A;

  --white:       #F0F0F0;
  --parchment:   #F5F0EB;

  /* 2.2 Greys */
  --grey-950: #0C1018; --grey-900: #141A28; --grey-800: #1F2937;
  --grey-700: #2D3A4E; --grey-600: #3F4F66; --grey-500: #546580;
  --grey-400: #7A8BA3; --grey-300: #A3B1C4; --grey-200: #C8D1DC;
  --grey-100: #E5E9EF; --grey-50:  #F3F5F7;

  /* 2.3 Brand maize */
  --gold-900: #8B6508; --gold-800: #B87D0A; --gold-700: #D4A012;
  --gold-500: #E8B828; --gold-300: #F5D76E; --gold-100: #FDE9A1;
  --maize:       #FFCB05;
  --maize-soft:  var(--gold-500);
  --maize-muted: rgba(255,203,5,0.40);
  --maize-faint: rgba(255,203,5,0.14);

  /* 2.4 Semantic accents */
  --teal:        #2DA494; --teal-safe:   #3BC4B2;
  --claret:      #D46A6A; --claret-safe: #E88585;
  --copper:      #D4956A; --cyan-soft:   #8BBED8;
  --red-soft:    #D98282;
  --green: #10B981; --cyan: #38BDF8; --amber: #F59E0B;
  --purple: #C084FC; --red: #EF4444;

  /* 2.5 Pillar palette */
  --c-bio:        #73B191; --c-flow:       #60A5FA;
  --c-dec:        #CCC06F; --c-habits:     #96A67A;
  --c-learn:      #988CB5; --c-identity:   #B88892;
  --c-lead:       #8898A0; --c-arena:      #C47358;
  --c-nutrition:  #A89F68; --c-connection: #C99BB4;

  /* 2.6 Page accent (default = bio; overridden by body class) */
  --page-accent:       var(--c-bio);
  --page-accent-soft:  #8FC7A7;
  --page-accent-rgb:   115,177,145;
  --page-accent-muted: rgba(115,177,145,0.30);

  /* 2.7 Pillar thread */
  --thread:       rgba(var(--page-accent-rgb), 0.10);
  --thread-bold:  rgba(var(--page-accent-rgb), 0.25);
  --thread-text:  rgba(var(--page-accent-rgb), 0.18);

  /* 2.8 Text ladder */
  --t1:        var(--white);
  --t1-warm:   var(--parchment);
  --t1-cream:  var(--grey-200);
  --t2:        var(--grey-300);
  --t3:        var(--grey-400);
  --t4:        rgba(240,240,240,0.28);
  --t5:        rgba(240,240,240,0.14);

  /* 2.9 Typography ladder (v2 preserved + v3 additions) */
  --fs-display-xl: clamp(3.6rem, 8vw, 6.4rem);    /* big stat hero, masthead */
  --fs-display-l:  clamp(2.4rem, 5vw, 3.6rem);    /* legacy pull */
  --fs-display-m:  clamp(1.8rem, 3.5vw, 2.6rem);  /* legacy h2 */
  --fs-display-s:  clamp(1.3rem, 2.5vw, 1.6rem);  /* legacy h3 */
  --fs-lead:       1.18rem;
  --fs-body:       1.125rem;                       /* [+] raised v2→v3 */
  --fs-meta:       0.95rem;                        /* [+] raised v2→v3 */
  --fs-eyebrow:    0.75rem;                        /* [+] raised; mono caps */
  --fs-mono:       0.75rem;                        /* [+] raised; mono caps */

  /* [+] v3 additive type roles (block-specific) */
  --fs-display:    clamp(2.6rem, 6vw, 4.5rem);    /* masthead title (72px max) */
  --fs-deck:       clamp(1.25rem, 2.4vw, 1.65rem);/* standfirst */
  --fs-chapter:    clamp(1.8rem, 3.5vw, 2.6rem); /* chapter title */
  --fs-pull:       clamp(1.6rem, 3vw, 2.25rem);   /* pull-quote */
  --fs-stat-big:   clamp(3.5rem, 8vw, 6rem);      /* big stat callout */
  --fs-drop:       5.25rem;                        /* drop-cap (5–6 line span) */
  --fs-caption:    0.95rem;                        /* caption / margin note */
  --fs-endnote:    0.95rem;

  /* 2.10 Line-heights */
  --lh-display:    1.05;                           /* tightened v2→v3 */
  --lh-deck:       1.45;                           /* [+] standfirst */
  --lh-lead:       1.65;
  --lh-body:       1.6;                            /* tightened v2→v3 for serif */
  --lh-meta:       1.55;

  /* 2.11 Letter-spacing */
  --ls-display:    -0.02em;
  --ls-body:        0;
  --ls-eyebrow:     0.18em;
  --ls-mono:        0.16em;

  /* 2.12 Spacing scale */
  --sp-1:   4px;  --sp-2:   8px;  --sp-3:  12px;  --sp-4:  16px;
  --sp-5:  24px;  --sp-6:  32px;  --sp-7:  48px;  --sp-8:  64px;
  --sp-9:  80px;  --sp-10: 96px;  --sp-11:128px;
  --sp-12: 144px;                                  /* [+] masthead pause */

  /* [+] 2.12b Baseline rhythm (8px grid) */
  --baseline:        8px;
  --rhythm-para:     1.5em;                        /* para → para */
  --rhythm-section:  3em;                          /* section break */

  /* 2.13 Motion */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-lux:    cubic-bezier(0.25, 0.8, 0.25, 1);
  --dur-snap:    180ms;
  --dur-state:   600ms;
  --dur-reveal:  1050ms;

  /* 2.14 Layout — v3 measure system */
  --prose-max:  720px;     /* body measure (~65–70ch at fs-body) */
  --page-max:   1280px;    /* outer max [+] raised from 1120 */
  --m-prose:    720px;     /* [+] alias */
  --m-aside:    240px;     /* [+] margin-note column */
  --m-aside-gap: 24px;     /* [+] gutter prose ↔ aside */
  --m-data:     920px;     /* [+] data/bibliography breakout */
  --m-pull:    1100px;     /* [+] pull-quote / stat callout breakout */
  --m-hero:    1280px;     /* [+] hero / full-bleed */

  /* 2.15 Fonts */
  --f-display: 'Cormorant Garamond', 'Source Serif Pro', Georgia, serif;
  --f-body:    'Inter', system-ui, sans-serif;     /* legacy fallback only */
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* [+] 2.15b v3 prose alias — body type is the display serif */
  --f-prose:   var(--f-display);

  /* [+] 2.15c Numeral discipline */
  --num-oldstyle: "onum" 1, "lnum" 0, "tnum" 0;
  --num-tabular:  "lnum" 1, "tnum" 1;
  --num-lining:   "lnum" 1, "tnum" 0;

  /* 2.16 Decorative effects */
  --gold-line:      linear-gradient(90deg, transparent 0%, rgba(255,203,5,0.32) 18%, rgba(255,203,5,0.12) 52%, transparent 100%);
  --thread-line:    linear-gradient(90deg, transparent 0%, var(--thread-bold) 50%, transparent 100%);
  --panel-sheen:    linear-gradient(180deg, rgba(240,240,240,0.03) 0%, rgba(240,240,240,0.008) 42%, transparent 100%);
  --shadow-soft:    0 10px 28px rgba(0,0,0,0.14);
  --shadow-card:    0 12px 40px rgba(0,0,0,0.25);
  --hairline:       0.5px solid rgba(240,240,240,0.10);   /* [+] canonical */
  --hairline-bold:  0.5px solid rgba(240,240,240,0.20);   /* [+] */
  --hairline-accent: 0.5px solid rgba(var(--page-accent-rgb), 0.45); /* [+] */

  /* 2.17 Aliases (legacy) */
  --jade:       var(--page-accent);
  --jade-soft:  var(--page-accent-soft);
  --jade-muted: var(--page-accent-muted);
}

/* ─────────────────────────────────────────────
   3. PILLAR BODY CLASSES
───────────────────────────────────────────── */
body.pillar-bio {
  --page-accent: var(--c-bio); --page-accent-soft: #8FC7A7;
  --page-accent-rgb: 115,177,145; --page-accent-muted: rgba(115,177,145,0.30);
}
/* Per-article scoped maize override (Bio melatonin et al.) */
body.pillar-bio.page-melatonin,
body.pillar-bio[data-accent="maize"] {
  --page-accent: var(--maize);
  --page-accent-soft: var(--gold-500);
  --page-accent-rgb: 255,203,5;
  --page-accent-muted: rgba(255,203,5,0.30);
}
body.pillar-flow {
  --page-accent: var(--c-flow); --page-accent-soft: #8FC4FF;
  --page-accent-rgb: 96,165,250; --page-accent-muted: rgba(96,165,250,0.30);
}
body.pillar-dec {
  --page-accent: var(--c-dec); --page-accent-soft: #DDD28A;
  --page-accent-rgb: 204,192,111; --page-accent-muted: rgba(204,192,111,0.30);
}
body.pillar-habits {
  --page-accent: var(--c-habits); --page-accent-soft: #AAB88D;
  --page-accent-rgb: 150,166,122; --page-accent-muted: rgba(150,166,122,0.30);
}
body.pillar-learn {
  --page-accent: var(--c-learn); --page-accent-soft: #A99FC7;
  --page-accent-rgb: 152,140,181; --page-accent-muted: rgba(152,140,181,0.30);
}
body.pillar-identity {
  --page-accent: var(--c-identity); --page-accent-soft: #CCA0A8;
  --page-accent-rgb: 184,136,146; --page-accent-muted: rgba(184,136,146,0.30);
}
body.pillar-lead {
  --page-accent: var(--c-lead); --page-accent-soft: #A2B0B7;
  --page-accent-rgb: 136,152,160; --page-accent-muted: rgba(136,152,160,0.30);
}
body.pillar-arena {
  --page-accent: var(--c-arena); --page-accent-soft: #D6916C;
  --page-accent-rgb: 196,115,88; --page-accent-muted: rgba(196,115,88,0.30);
}
body.pillar-nutrition {
  --page-accent: var(--c-nutrition); --page-accent-soft: #BBB182;
  --page-accent-rgb: 168,159,104; --page-accent-muted: rgba(168,159,104,0.30);
}
body.pillar-connection {
  --page-accent: var(--c-connection); --page-accent-soft: #DAB4C5;
  --page-accent-rgb: 201,155,180; --page-accent-muted: rgba(201,155,180,0.30);
}

/* ─────────────────────────────────────────────
   4. PAGE BASE — body, html, .entry-content
───────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--void);
  color: var(--t1);
  font-family: var(--f-prose);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: var(--num-oldstyle);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.entry-content {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* Selection */
::selection { background: rgba(var(--page-accent-rgb), 0.30); color: var(--t1); }

/* ─────────────────────────────────────────────
   5. BLOCK 01 — MASTHEAD
───────────────────────────────────────────── */
.sdd-masthead {
  max-width: var(--m-hero);
  margin: 0 auto var(--sp-11);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-9);
}
.sdd-masthead__kicker {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--page-accent);
  margin-bottom: var(--sp-7);
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.sdd-masthead__kicker::after {
  content: "";
  flex: 1;
  height: 0.5px;
  background: rgba(var(--page-accent-rgb), 0.30);
  margin-bottom: 0.4em;
}
.sdd-masthead__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--t1);
  max-width: 16ch;
  font-feature-settings: var(--num-lining);
  margin-bottom: var(--sp-7);
}
.sdd-masthead__title em,
.sdd-masthead__title .sdd-accent {
  font-style: italic;
  font-weight: 600;
  color: var(--page-accent);
}
.sdd-masthead__deck {
  font-family: var(--f-prose);
  font-weight: 400;
  font-size: var(--fs-deck);
  line-height: var(--lh-deck);
  color: var(--t1-cream);
  max-width: 38ch;
  font-feature-settings: var(--num-oldstyle);
  margin-bottom: var(--sp-9);
}
.sdd-masthead__hero {
  width: 100%;
  margin: var(--sp-7) 0 var(--sp-5);
  position: relative;
}
.sdd-masthead__hero img {
  width: 100%;
  height: auto;
  display: block;
}
/* Hero caption: hairline-ruled credits block, NOT a single line */
.sdd-masthead__caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: var(--hairline);
  font-family: var(--f-prose);
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--t2);
  line-height: var(--lh-meta);
  margin-bottom: var(--sp-9);
}
.sdd-masthead__caption-credit {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  align-self: end;
  white-space: nowrap;
}
/* Byline — architected as multi-field grid, hairline-separated */
.sdd-masthead__byline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  padding: var(--sp-4) 0;
  margin-bottom: var(--sp-7);
}
.sdd-masthead__byline-field {
  padding: 0 var(--sp-4);
  border-left: var(--hairline);
  font-family: var(--f-prose);
  font-size: var(--fs-meta);
  color: var(--t2);
  font-feature-settings: var(--num-oldstyle);
}
.sdd-masthead__byline-field:first-child { border-left: 0; padding-left: 0; }
.sdd-masthead__byline-label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: var(--sp-1);
}
/* Evidence flags */
.sdd-masthead__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: var(--sp-7);
}
.sdd-masthead__flag {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t2);
  padding: var(--sp-2) var(--sp-4);
  border-left: var(--hairline);
}
.sdd-masthead__flag:first-child { border-left: 0; padding-left: 0; }

/* ─────────────────────────────────────────────
   6. BLOCK 02 — NAV RAIL
───────────────────────────────────────────── */
.sdd-navrail {
  position: fixed;
  top: 50%;
  left: var(--sp-5);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  z-index: 50;
  /* contain to avoid Kadence overflow:clip kill */
  contain: layout style;
}
.sdd-navrail__item {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  border-left: var(--hairline);
  transition: color var(--dur-snap) var(--ease-lux),
              border-color var(--dur-snap) var(--ease-lux);
  text-decoration: none;
}
.sdd-navrail__item:hover { color: var(--t1); }
.sdd-navrail__item.is-active {
  color: var(--page-accent);
  border-left-color: rgba(var(--page-accent-rgb), 0.7);
}
.sdd-navrail__num {
  display: block;
  font-size: 0.55rem;
  color: var(--t4);
  margin-bottom: 2px;
}

/* Mobile inline TOC — replaces nav rail below 1100px */
.sdd-toc-inline {
  display: none;
  margin: var(--sp-7) 0;
  padding: var(--sp-4) 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}
.sdd-toc-inline__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-5);
  list-style: none;
}
.sdd-toc-inline__item {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t2);
  padding: var(--sp-2) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ─────────────────────────────────────────────
   7. BLOCK 03 — KEY FINDINGS
───────────────────────────────────────────── */
.sdd-findings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--m-aside);
  gap: var(--sp-9);
  max-width: var(--m-data);
  margin: var(--sp-10) auto;
  padding: 0 var(--sp-5);
}
.sdd-findings__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-9) var(--sp-7);
}
.sdd-finding {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
  border-bottom: var(--hairline);
}
.sdd-finding__kicker {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
}
.sdd-finding__figure {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  color: var(--t1);
  font-feature-settings: var(--num-tabular);
}
.sdd-finding__figure-unit {
  font-size: 0.5em;
  color: var(--t3);
  margin-left: 0.1em;
  letter-spacing: 0;
}
.sdd-finding__prose {
  font-family: var(--f-prose);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--t1-cream);
  max-width: 32ch;
}
.sdd-findings__aside {
  border-left: var(--hairline);
  padding-left: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.sdd-findings__aside-label {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: var(--sp-2);
}
.sdd-findings__aside-value {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--t1);
  font-feature-settings: var(--num-tabular);
  margin-bottom: var(--sp-1);
}
.sdd-findings__aside-prose {
  font-family: var(--f-prose);
  font-style: italic;
  font-size: var(--fs-caption);
  line-height: var(--lh-meta);
  color: var(--t2);
}
/* Hairline meters — NOT filled bars */
.sdd-meter {
  margin-top: var(--sp-3);
}
.sdd-meter__track {
  position: relative;
  height: 0.5px;
  background: rgba(240,240,240,0.10);
}
.sdd-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(var(--page-accent-rgb), 0.6);
  height: 0.5px;
}
.sdd-meter__label {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  margin-top: var(--sp-2);
  font-feature-settings: var(--num-tabular);
}

/* ─────────────────────────────────────────────
   8. BLOCK 04 — THE OPENING
───────────────────────────────────────────── */
.sdd-opening {
  max-width: var(--m-prose);
  margin: var(--sp-9) auto;
  padding: 0 var(--sp-5);
  position: relative;
}
/* Aside-bearing layout — desktop only */
@media (min-width: 1100px) {
  .sdd-opening--with-aside {
    max-width: none;
    width: calc(var(--m-prose) + var(--m-aside) + var(--m-aside-gap));
    display: grid;
    grid-template-columns: minmax(0, var(--m-prose)) var(--m-aside);
    gap: var(--m-aside-gap);
    align-items: start;
  }
}
.sdd-cluster {
  font-family: var(--f-prose);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--t1);
  font-feature-settings: var(--num-oldstyle);
}
.sdd-cluster p { margin-bottom: var(--rhythm-para); max-width: var(--m-prose); }
.sdd-cluster p:last-child { margin-bottom: 0; }
.sdd-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--t1);
}
/* Drop-cap — fires once on .sdd-lead--first */
.sdd-lead--first::first-letter {
  font-family: var(--f-display);
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-drop);
  line-height: 0.85;
  float: left;
  padding: 0.05em var(--sp-3) 0 0;
  color: var(--t1);
}
.sdd-lead--first[data-pillar-accent="true"]::first-letter {
  color: var(--page-accent);
}
/* Editorial pause — centred hairline + mono cap */
.sdd-pause {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin: var(--sp-10) auto;
  max-width: var(--m-prose);
}
.sdd-pause::before,
.sdd-pause::after {
  content: "";
  flex: 1;
  height: 0.5px;
  background: rgba(240,240,240,0.15);
}
.sdd-pause__label {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
}
/* Margin notes */
.sdd-aside {
  font-family: var(--f-prose);
  font-style: italic;
  font-size: var(--fs-caption);
  line-height: var(--lh-meta);
  color: var(--t2);
  border-top: var(--hairline);
  padding-top: var(--sp-3);
  margin-top: var(--sp-5);
}
.sdd-aside__label {
  display: block;
  font-family: var(--f-mono);
  font-style: normal;
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: var(--sp-2);
}
/* dfn — inline term in body */
.sdd-cluster dfn,
.sdd-cluster .sdd-term {
  font-style: italic;
  color: var(--t1);
  border-bottom: 0.5px solid var(--thread-bold);
}

/* ─────────────────────────────────────────────
   9. BLOCK 05 — THE MECHANISM
───────────────────────────────────────────── */
.sdd-section {
  max-width: var(--m-prose);
  margin: var(--sp-11) auto var(--sp-10);
  padding: 0 var(--sp-5);
}
/* Chapter gate */
.sdd-chapter-gate {
  max-width: var(--m-prose);
  margin: var(--sp-11) auto var(--sp-9);
  padding: 0 var(--sp-5);
}
.sdd-chapter-gate__num {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--page-accent);              /* accent applied here ... */
  margin-bottom: var(--sp-4);
  display: block;
  font-feature-settings: var(--num-tabular);
}
.sdd-chapter-gate__title {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-chapter);
  line-height: 1.15;
  letter-spacing: var(--ls-display);
  color: var(--t1);
  max-width: 22ch;
  font-feature-settings: var(--num-lining);
}
.sdd-chapter-gate::after {
  content: "";
  display: block;
  height: 0.5px;
  background: rgba(240,240,240,0.20);     /* ...not also on the rule */
  margin-top: var(--sp-7);
}
/* Figure — breakout to --m-figure */
.sdd-figure {
  width: 100%;
  max-width: var(--m-data);
  margin: var(--sp-9) auto;
  padding: 0 var(--sp-5);
}
.sdd-figure__frame {
  border: var(--hairline);
  padding: var(--sp-7);
  background: var(--deep);
}
.sdd-figure__frame svg,
.sdd-figure__frame img {
  width: 100%;
  height: auto;
  display: block;
}
.sdd-figure__caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: var(--hairline);
  margin-top: var(--sp-4);
  font-family: var(--f-prose);
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--t2);
  line-height: var(--lh-meta);
}
.sdd-figure__credit {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  white-space: nowrap;
}
/* Big stat callout — full-bleed pause */
.sdd-stat-callout {
  width: 100%;
  max-width: var(--m-pull);
  margin: var(--sp-10) auto;
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}
.sdd-stat-callout__number {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--fs-stat-big);
  line-height: 0.95;
  letter-spacing: var(--ls-display);
  color: var(--t1);
  font-feature-settings: var(--num-lining);
}
.sdd-stat-callout__unit {
  font-size: 0.45em;
  color: var(--page-accent);              /* accent on unit only */
  vertical-align: 0.6em;
  margin-left: 0.05em;
  letter-spacing: 0;
}
.sdd-stat-callout__support {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  margin-top: var(--sp-5);
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}
/* Pull-quote — full-width pause, hairline above + below */
.sdd-pullquote {
  width: 100%;
  max-width: var(--m-pull);
  margin: var(--sp-10) auto;
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}
.sdd-pullquote__body {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-pull);
  line-height: 1.25;
  letter-spacing: var(--ls-display);
  color: var(--t1);
  max-width: 36ch;
  margin: 0 auto;
}
.sdd-pullquote__body::before {
  content: "\201C";
  color: var(--page-accent);             /* accent on opening mark only */
  margin-right: 0.05em;
}
.sdd-pullquote__attrib {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  margin-top: var(--sp-5);
}

/* ─────────────────────────────────────────────
   10. BLOCK 06 — THE EVIDENCE
───────────────────────────────────────────── */
.sdd-evidence {
  max-width: var(--m-data);
  margin: var(--sp-10) auto;
  padding: 0 var(--sp-5);
}
/* Rank-1 hero study */
.sdd-study--hero {
  border-top: 0.5px solid rgba(var(--page-accent-rgb), 0.45);
  border-bottom: var(--hairline);
  padding: var(--sp-7) 0;
  margin-bottom: var(--sp-7);
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 160px;
  gap: var(--sp-7);
  align-items: start;
}
.sdd-study--hero .sdd-study__rank {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 3rem;
  line-height: 1;
  color: var(--page-accent);              /* hero rank only */
  font-feature-settings: var(--num-lining);
}
.sdd-study--hero .sdd-study__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 1.2;
  color: var(--t1);
  margin-bottom: var(--sp-3);
  letter-spacing: var(--ls-display);
}
.sdd-study__meta {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  font-feature-settings: var(--num-tabular);
}
.sdd-study__authors {
  font-family: var(--f-prose);
  font-size: var(--fs-meta);
  color: var(--t2);
  margin-bottom: var(--sp-2);
}
.sdd-study__finding {
  font-family: var(--f-prose);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--t1-cream);
  margin-top: var(--sp-3);
  max-width: 56ch;
}
.sdd-study__n {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 2rem;
  color: var(--t1);
  font-feature-settings: var(--num-tabular);
  line-height: 1;
}
.sdd-study__n-label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  margin-top: var(--sp-1);
}
/* Ranks 2–5 grid */
.sdd-evidence__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7) var(--sp-7);
}
.sdd-study {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-bottom: var(--hairline);
}
.sdd-study__rank {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--t3);
  font-feature-settings: var(--num-lining);
}
.sdd-study__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--t1);
  margin-bottom: var(--sp-2);
}

/* ─────────────────────────────────────────────
   11. BLOCK 07 — THE STAKES
───────────────────────────────────────────── */
.sdd-stakes {
  max-width: var(--m-data);
  margin: var(--sp-10) auto;
  padding: 0 var(--sp-5);
}
.sdd-stakes__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7);
  margin: var(--sp-9) 0;
}
.sdd-stake {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) 0;
  border-top: var(--hairline);
}
.sdd-stake__kicker {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
}
.sdd-stake__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--t1);
}
.sdd-stake__body {
  font-family: var(--f-prose);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--t1-cream);
  max-width: 36ch;
}
.sdd-stake__symptom {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: var(--hairline);
  font-family: var(--f-prose);
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--claret-safe);              /* muted warm-warning token */
  line-height: var(--lh-meta);
}
.sdd-stake__symptom-label {
  display: block;
  font-family: var(--f-mono);
  font-style: normal;
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--red-soft);
  margin-bottom: var(--sp-1);
}

/* ─────────────────────────────────────────────
   12. BLOCK 08 — THE PROTOCOL
───────────────────────────────────────────── */
.sdd-protocol {
  max-width: var(--m-data);
  margin: var(--sp-10) auto;
  padding: 0 var(--sp-5);
}
.sdd-protocol__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: var(--hairline);
}
.sdd-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-5);
  border-bottom: var(--hairline);
  border-left: var(--hairline);
}
.sdd-step:nth-child(odd) { border-left: 0; }
.sdd-step:nth-last-child(-n+2) { border-bottom: 0; }
.sdd-step__time {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  font-feature-settings: var(--num-tabular);
}
.sdd-step__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--t1);
}
.sdd-step__rule {
  font-family: var(--f-prose);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--t1);
}
.sdd-step__why {
  font-family: var(--f-prose);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--t2);
}
.sdd-step__mistake {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--hairline);
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--t2);
}
.sdd-step__mistake-label {
  display: block;
  font-family: var(--f-mono);
  font-style: normal;
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: var(--sp-1);
}
.sdd-protocol__coda {
  margin-top: var(--sp-7);
  padding: var(--sp-7) var(--sp-5);
  border: var(--hairline);
}
.sdd-protocol__coda-label {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: var(--sp-3);
}
.sdd-protocol__coda-body {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--fs-deck);
  line-height: var(--lh-deck);
  color: var(--t1-cream);
  max-width: 56ch;
}

/* ─────────────────────────────────────────────
   13. BLOCK 09 — THE VERDICT
───────────────────────────────────────────── */
.sdd-verdict {
  max-width: var(--m-data);
  margin: var(--sp-10) auto;
  padding: 0 var(--sp-5);
}
.sdd-verdict__bottomline {
  margin: var(--sp-9) 0 var(--sp-7);
  padding: var(--sp-7) var(--sp-7);
  background: rgba(var(--page-accent-rgb), 0.04);
  border-top: 0.5px solid rgba(var(--page-accent-rgb), 0.6);
}
.sdd-verdict__bottomline-label {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: var(--sp-3);
}
.sdd-verdict__bottomline-body {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 2.5vw, 1.5rem);
  line-height: 1.45;
  color: var(--t1);
  font-feature-settings: var(--num-oldstyle);
  max-width: 48ch;
}
.sdd-verdict__summary {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--fs-deck);
  line-height: var(--lh-deck);
  color: var(--t1-cream);
  max-width: 48ch;
  margin: var(--sp-7) 0;
}
.sdd-triad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  margin: var(--sp-9) 0;
}
.sdd-triad__card {
  padding: var(--sp-7) var(--sp-5);
  border-left: var(--hairline);
}
.sdd-triad__card:first-child { border-left: 0; }
.sdd-triad__label {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: var(--sp-3);
}
.sdd-triad__body {
  font-family: var(--f-prose);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--t1);
}
.sdd-confidence {
  margin: var(--sp-7) 0;
}
.sdd-confidence__label {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: var(--sp-2);
  font-feature-settings: var(--num-tabular);
}
.sdd-confidence__scale {
  position: relative;
  height: 0.5px;
  background: rgba(240,240,240,0.10);
}
.sdd-confidence__fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 0.5px;
  background: rgba(var(--page-accent-rgb), 0.6);
}
.sdd-end {
  display: block;
  text-align: center;
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: var(--page-accent);
  margin: var(--sp-9) 0 var(--sp-7);
}

/* ─────────────────────────────────────────────
   14. BLOCK 10 — BIBLIOGRAPHY
   Inherits from Bibliography.html — no rules added here.
   Block ships unchanged. See sdd-v3/block-10-bibliography.html
   for the lift-and-shift instructions.
───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   15. BLOCK 11 — ENDNOTES / METHODS
───────────────────────────────────────────── */
.sdd-endnotes {
  max-width: 560px;
  margin: var(--sp-10) auto var(--sp-11);
  padding: var(--sp-7) var(--sp-5);
  border-top: var(--hairline);
}
.sdd-endnotes__label {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: var(--sp-5);
}
.sdd-endnotes__body {
  font-family: var(--f-prose);
  font-size: var(--fs-endnote);
  line-height: var(--lh-meta);
  color: var(--t2);
  font-feature-settings: var(--num-oldstyle);
}
.sdd-endnotes__body p { margin-bottom: var(--sp-4); }

/* ─────────────────────────────────────────────
   16. PILLAR ACCENT — ENFORCEMENT LAYER
   These rules document the "once per zone" law explicitly,
   resetting any accidental accent usage outside permitted slots.
───────────────────────────────────────────── */
.sdd-cluster,
.sdd-cluster p,
.sdd-cluster strong,
.sdd-cluster em,
.sdd-study__finding,
.sdd-stake__body,
.sdd-step__rule,
.sdd-pullquote__body,            /* opening mark only is accented */
.sdd-stat-callout__number {      /* unit only is accented */
  color: var(--t1);
}

/* ─────────────────────────────────────────────
   17. RESPONSIVE — TABLET (1099px and below)
───────────────────────────────────────────── */
@media (max-width: 1099px) {
  .sdd-navrail { display: none; }
  .sdd-toc-inline { display: block; }

  .sdd-findings { grid-template-columns: minmax(0, 1fr); }
  .sdd-findings__aside { border-left: 0; padding-left: 0; border-top: var(--hairline); padding-top: var(--sp-5); }
  .sdd-findings__grid { gap: var(--sp-7) var(--sp-5); }

  .sdd-opening--with-aside {
    grid-template-columns: minmax(0, 1fr);
    width: auto;
  }
  .sdd-aside { max-width: var(--m-prose); margin: var(--sp-5) auto; }

  .sdd-study--hero { grid-template-columns: 64px minmax(0, 1fr); }
  .sdd-study--hero .sdd-study__n-wrap { grid-column: 2; margin-top: var(--sp-3); }
}

/* ─────────────────────────────────────────────
   18. RESPONSIVE — MOBILE (768px and below).
   The bar is 380px. Rebuild, do not reduce.
───────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --fs-display:    clamp(2.2rem, 8vw, 2.6rem);
    --fs-chapter:    clamp(1.6rem, 5vw, 1.8rem);
    --fs-deck:       clamp(1.125rem, 4vw, 1.25rem);
    --fs-pull:       clamp(1.4rem, 5vw, 1.6rem);
    --fs-stat-big:   clamp(3rem, 12vw, 3.5rem);
    --sp-12:         96px;                          /* tighter masthead pause */
  }

  .entry-content { padding: 0 var(--sp-5); }

  /* Masthead: stacked byline */
  .sdd-masthead { padding-top: var(--sp-10); padding-bottom: var(--sp-7); }
  .sdd-masthead__byline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3) 0;
  }
  .sdd-masthead__byline-field:nth-child(odd) { border-left: 0; padding-left: 0; }
  .sdd-masthead__byline-field:nth-child(n+3) {
    border-top: var(--hairline);
    padding-top: var(--sp-3);
  }
  .sdd-masthead__caption { grid-template-columns: 1fr; }
  .sdd-masthead__caption-credit { align-self: start; }

  /* Inline TOC */
  .sdd-toc-inline__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sdd-toc-inline__item { border-bottom: var(--hairline); }
  .sdd-toc-inline__item:last-child { border-bottom: 0; }

  /* Opening: drop-cap → small-caps mono first 3 words.
     Disable the ::first-letter rule with a transparent guard. */
  .sdd-lead--first::first-letter {
    font-size: inherit;
    float: none;
    padding: 0;
    color: inherit;
    font-style: inherit;
    font-weight: inherit;
  }
  .sdd-lead--first .sdd-incipit {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 0.85em;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--page-accent);
    margin-right: 0.25em;
  }

  /* Findings: stack */
  .sdd-findings__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }

  /* Mechanism: figure tightens, frame loses padding */
  .sdd-figure__frame { padding: var(--sp-4); }
  .sdd-figure__caption { grid-template-columns: 1fr; gap: var(--sp-2); }

  /* Pull-quote: keep top hairline, drop bottom */
  .sdd-pullquote { border-bottom: 0; padding-bottom: var(--sp-5); }
  .sdd-pullquote__body { font-size: 1.6rem; }

  /* Stat callout */
  .sdd-stat-callout { padding: var(--sp-7) var(--sp-4); }
  .sdd-stat-callout__number { font-size: 3.5rem; }

  /* Evidence: stack */
  .sdd-study--hero { grid-template-columns: 56px minmax(0, 1fr); }
  .sdd-study--hero .sdd-study__rank { font-size: 2.25rem; }
  .sdd-study--hero .sdd-study__n-wrap { display: none; }    /* fold into meta */
  .sdd-evidence__grid { grid-template-columns: minmax(0, 1fr); }

  /* Stakes: stack, ensure 44px hit area on links inside */
  .sdd-stakes__grid { grid-template-columns: minmax(0, 1fr); }

  /* Protocol: single column, every step bordered */
  .sdd-protocol__grid { grid-template-columns: minmax(0, 1fr); }
  .sdd-step { border-left: 0; border-bottom: var(--hairline); }
  .sdd-step:last-child { border-bottom: 0; }

  /* Verdict triad: stack */
  .sdd-triad { grid-template-columns: minmax(0, 1fr); border-top: var(--hairline); border-bottom: var(--hairline); }
  .sdd-triad__card { border-left: 0; border-top: var(--hairline); }
  .sdd-triad__card:first-child { border-top: 0; }

  /* Chapter gate: stack */
  .sdd-chapter-gate__num { display: block; margin-bottom: var(--sp-2); }
  .sdd-chapter-gate::after { margin-top: var(--sp-5); }

  /* Touch targets */
  a[href], button { min-height: 44px; }
}

/* 380px crunch — squeeze the smallest break */
@media (max-width: 400px) {
  .sdd-masthead__title { font-size: 2.2rem; }
  .sdd-stat-callout__number { font-size: 3rem; }
  .sdd-figure__frame { padding: var(--sp-3); }
}

/* ─────────────────────────────────────────────
   19. PRINT
───────────────────────────────────────────── */
@media print {
  body { background: #fff; color: #000; }
  .sdd-navrail, .sdd-toc-inline { display: none; }
  .sdd-masthead, .sdd-section, .sdd-chapter-gate,
  .sdd-stakes, .sdd-protocol, .sdd-verdict,
  .sdd-evidence, .sdd-findings, .sdd-opening { page-break-inside: avoid; }
  .sdd-chapter-gate, .sdd-figure { page-break-after: avoid; }
  .sdd-pullquote, .sdd-stat-callout { page-break-inside: avoid; }
  a[href]::after { content: ""; }
}

/* ─────────────────────────────────────────────
   20. REDUCED MOTION
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   END SDD v3.0 — base
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   SDD v3.1 — Audit response (Melatonin v2)
   New cross-cutting components + split hero + Evidence Bench
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   21. BADGE SYSTEM — .sdd-badge
   Three variants: filled / outlined / muted.
   Used for study taxonomy (META-ANALYSIS / RCT / REVIEW).
───────────────────────────────────────────── */
.sdd-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35em 0.7em;
  line-height: 1;
  border-radius: 0;
  white-space: nowrap;
}
.sdd-badge--filled {
  background: var(--page-accent);
  color: var(--ink);
}
.sdd-badge--outlined {
  background: transparent;
  color: var(--page-accent);
  box-shadow: inset 0 0 0 0.5px rgba(var(--page-accent-rgb), 0.8);
}
.sdd-badge--muted {
  background: transparent;
  color: var(--t3);
  border-top: 0.5px solid rgba(var(--t3-rgb, 110, 120, 138), 0.5);
  border-bottom: 0.5px solid rgba(var(--t3-rgb, 110, 120, 138), 0.5);
  padding: 0.35em 0;
  letter-spacing: 0.22em;
}

/* ─────────────────────────────────────────────
   22. MAGNITUDE BAR — .sdd-magnitude-bar
   Effect-size visualisation: thin rule, maize fill,
   optional threshold marker for clinical context.
───────────────────────────────────────────── */
.sdd-magnitude {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
  max-width: 38rem;
}
.sdd-magnitude__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
}
.sdd-magnitude__head strong {
  font-family: var(--f-display);
  font-weight: 500;
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--page-accent);
  font-feature-settings: var(--num-lining);
}
.sdd-magnitude__bar {
  position: relative;
  height: 6px;
  background: rgba(var(--page-accent-rgb), 0.08);
}
.sdd-magnitude__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--page-accent);
}
.sdd-magnitude__threshold {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 0.5px;
  background: var(--t2);
}
.sdd-magnitude__threshold::after {
  content: attr(data-label);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t3);
  white-space: nowrap;
}
.sdd-magnitude__foot {
  margin-top: var(--sp-4);
  font-family: var(--f-prose);
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--t2);
}

/* ─────────────────────────────────────────────
   23. GHOST NUMERAL — .sdd-ghost-numeral
   Year/identifier rendered as low-opacity background mark.
   Position by anchor parent.
───────────────────────────────────────────── */
.sdd-ghost-numeral {
  position: absolute;
  font-family: var(--f-display);
  font-weight: 500;
  font-style: italic;
  font-size: 14rem;
  line-height: 0.78;
  color: var(--page-accent);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
  font-feature-settings: var(--num-lining);
  white-space: nowrap;
  z-index: 0;
}

/* ─────────────────────────────────────────────
   24. SPLIT MASTHEAD — .sdd-masthead--split
   Hero v2: 45/55 split, italicised accent overhangs
   into image edge. Meta row below as full-width hairline.
───────────────────────────────────────────── */
.sdd-masthead--split {
  max-width: var(--m-hero);
  margin: 0 auto var(--sp-11);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-9);
}
.sdd-masthead--split .sdd-masthead__split {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: var(--sp-7);
  position: relative;
}
.sdd-masthead--split .sdd-masthead__text {
  padding: var(--sp-3) var(--sp-9) var(--sp-3) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.sdd-masthead--split .sdd-masthead__title {
  max-width: none;
  margin-bottom: var(--sp-6);
  position: relative;
}
/* The overhang: italicised accent word breaks the column line. */
.sdd-masthead--split .sdd-masthead__title em {
  display: inline-block;
  position: relative;
  margin-right: -80px;       /* overhang into image edge */
  padding-right: 0;
}
.sdd-masthead--split .sdd-masthead__deck {
  max-width: 34ch;
  margin-bottom: 0;
}
.sdd-masthead--split .sdd-masthead__image {
  position: relative;
  align-self: stretch;
  min-height: 460px;
  overflow: hidden;
}
.sdd-masthead--split .sdd-masthead__image > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Full-width hairline meta strip below the split */
.sdd-masthead--split .sdd-masthead__byline {
  margin-top: 0;
}

@media (max-width: 900px) {
  .sdd-masthead--split .sdd-masthead__split {
    grid-template-columns: 1fr;
  }
  .sdd-masthead--split .sdd-masthead__text {
    padding: 0 0 var(--sp-7) 0;
  }
  .sdd-masthead--split .sdd-masthead__title em {
    margin-right: 0;
  }
  .sdd-masthead--split .sdd-masthead__image {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

/* ─────────────────────────────────────────────
   25. EVIDENCE BENCH — three-tier restructure
   Verdict bar → Tier 1 anchor → Tier 2 supporting →
   Tier 3 foundation. Curatorial labels frame each tier.
───────────────────────────────────────────── */

/* Curatorial tier label — italic serif, small caps optional */
.sdd-evidence__tier-label {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.005em;
  color: var(--t2);
  margin: var(--sp-9) 0 var(--sp-5);
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
}
.sdd-evidence__tier-label::before {
  content: "";
  width: 1.25rem;
  height: 0.5px;
  background: rgba(var(--page-accent-rgb), 0.6);
  align-self: center;
  flex-shrink: 0;
}
.sdd-evidence__tier-label::after {
  content: "";
  flex: 1;
  height: 0.5px;
  background: rgba(var(--page-accent-rgb), 0.18);
  align-self: center;
}
.sdd-evidence__tier-label span {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
}

/* Verdict bar — bridges 02 (data) to 03 (evidence) */
.sdd-evidence__verdict {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 0.5px solid rgba(var(--page-accent-rgb), 0.45);
  border-bottom: var(--hairline);
  margin-bottom: var(--sp-9);
}
.sdd-evidence__verdict-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-4) 0;
  border-top: var(--hairline);
}
.sdd-evidence__verdict-row:first-child { border-top: 0; }
.sdd-evidence__verdict-state {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.sdd-evidence__verdict-row[data-state="strong"]   .sdd-evidence__verdict-state { color: var(--page-accent); }
.sdd-evidence__verdict-row[data-state="mixed"]    .sdd-evidence__verdict-state { color: var(--t2); }
.sdd-evidence__verdict-row[data-state="unproven"] .sdd-evidence__verdict-state { color: var(--t3); }
.sdd-evidence__verdict-claim {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--t1);
}
.sdd-evidence__verdict-chips {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sdd-evidence__verdict-chip {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t3);
  padding: 0.25em 0.6em;
  box-shadow: inset 0 0 0 0.5px rgba(var(--t3-rgb, 110, 120, 138), 0.45);
}

/* TIER 1 — anchor study (full-width feature card) */
.sdd-study--anchor {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-9);
  padding: var(--sp-8) 0 var(--sp-9);
  border-top: 0.5px solid rgba(var(--page-accent-rgb), 0.45);
  border-bottom: var(--hairline);
  overflow: hidden;
}
/* Reset inherited base grid from .sdd-study */
.sdd-study--anchor .sdd-ghost-numeral {
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22rem;
}
.sdd-study--anchor__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-5);
  position: relative;
  z-index: 1;
}
.sdd-study--anchor__cite {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
}
.sdd-study--anchor__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.5vw, 2.25rem);
  line-height: 1.18;
  letter-spacing: var(--ls-display);
  color: var(--t1);
  margin-bottom: var(--sp-5);
  max-width: 28ch;
  position: relative;
  z-index: 1;
}
.sdd-study--anchor__authors {
  font-family: var(--f-prose);
  font-style: italic;
  font-size: var(--fs-meta);
  color: var(--t2);
  margin-bottom: var(--sp-6);
  position: relative;
  z-index: 1;
}
.sdd-study--anchor__pullquote {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.35;
  color: var(--t1);
  padding-left: var(--sp-5);
  border-left: 1.5px solid var(--page-accent);
  margin-bottom: var(--sp-5);
  position: relative;
  z-index: 1;
}
.sdd-study--anchor__pullquote cite {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--f-mono);
  font-style: normal;
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
}
.sdd-study--anchor__side {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-6);
  padding-left: var(--sp-7);
  border-left: var(--hairline);
}
.sdd-study--anchor__n-label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: var(--sp-2);
}
.sdd-study--anchor__n {
  font-family: var(--f-display);
  font-weight: 500;
  font-style: italic;
  font-size: 4.5rem;
  line-height: 0.92;
  color: var(--page-accent);
  letter-spacing: -0.01em;
  font-feature-settings: var(--num-lining);
}

/* TIER 2 — supporting trials (2-up, half-height) */
.sdd-evidence__tier--support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7);
}
.sdd-study--support {
  position: relative;
  padding: var(--sp-6) 0;
  border-top: var(--hairline);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  gap: var(--sp-3);
  overflow: hidden;
}
.sdd-study--support .sdd-ghost-numeral {
  right: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9rem;
  opacity: 0.035;
}
.sdd-study--support__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  position: relative;
  z-index: 1;
}
.sdd-study--support__cite {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
}
.sdd-study--support__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--t1);
  position: relative;
  z-index: 1;
}
.sdd-study--support__authors {
  font-family: var(--f-prose);
  font-style: italic;
  font-size: var(--fs-meta);
  color: var(--t2);
  position: relative;
  z-index: 1;
}
.sdd-study--support__n {
  font-family: var(--f-display);
  font-weight: 500;
  font-style: italic;
  font-size: 2rem;
  color: var(--page-accent);
  font-feature-settings: var(--num-lining);
}
.sdd-study--support__finding {
  font-family: var(--f-prose);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--t1-cream);
  position: relative;
  z-index: 1;
}

/* TIER 3 — foundation literature (3-up compact) */
.sdd-evidence__tier--foundation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
.sdd-study--foundation {
  padding: var(--sp-5) 0 var(--sp-4);
  border-top: var(--hairline);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}
.sdd-study--foundation__cite {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
}
.sdd-study--foundation__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--t1);
}
.sdd-study--foundation__finding {
  font-family: var(--f-prose);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--t2);
}
.sdd-study--foundation__authors {
  font-family: var(--f-prose);
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--t3);
}

/* Evidence section close — summary line, pillar signature touchpoint */
.sdd-evidence__summary {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--t2);
  max-width: 56ch;
  margin: var(--sp-9) 0 0;
  padding-top: var(--sp-5);
  border-top: 0.5px solid rgba(var(--page-accent-rgb), 0.45);
}

/* Responsive: stack the bench */
@media (max-width: 1024px) {
  .sdd-study--anchor {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
  .sdd-study--anchor__side {
    padding-left: 0;
    border-left: 0;
    border-top: var(--hairline);
    padding-top: var(--sp-5);
    flex-direction: row;
    flex-wrap: wrap;
  }
  .sdd-study--anchor .sdd-ghost-numeral { font-size: 14rem; right: -2rem; }
  .sdd-evidence__tier--foundation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .sdd-evidence__tier--support,
  .sdd-evidence__tier--foundation { grid-template-columns: minmax(0, 1fr); }
  .sdd-evidence__verdict-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
  }
  .sdd-evidence__verdict-chips { justify-content: flex-start; }
  .sdd-study--anchor .sdd-ghost-numeral { font-size: 10rem; }
}

/* ═══════════════════════════════════════════════════════════════
   END SDD v3.1
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   26. SDD v3.2 — LIVE ARTICLE FIX PACK
   Patches for bugs found in the deployed melatonin article.
   See sdd-v3/LIVE-AUDIT-FIXES.md for the full hand-off.
   ═══════════════════════════════════════════════════════════════ */

/* 26.1 — Executive summary
   Three lines between deck and Key Findings. */
.sdd-exec-summary {
  max-width: var(--m-prose);
  margin: 0 auto var(--sp-10);
  padding: var(--sp-7) 0;
  border-top: 0.5px solid rgba(var(--page-accent-rgb), 0.45);
  border-bottom: var(--hairline);
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  column-gap: var(--sp-7);
  row-gap: var(--sp-5);
}
.sdd-exec-summary__label {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--page-accent);
  align-self: start;
}
.sdd-exec-summary__row {
  display: contents;
}
.sdd-exec-summary__role {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
  align-self: baseline;
}
.sdd-exec-summary__body {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--t1);
}
.sdd-exec-summary__body em {
  font-style: italic;
  color: var(--page-accent);
}
@media (max-width: 700px) {
  .sdd-exec-summary {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-3);
  }
}

/* 26.2 — Evidence Hierarchy legend
   Spell out the 5-criterion scoring so 92/100 isn't decoration. */
.sdd-evidence__legend {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  margin: var(--sp-5) 0 var(--sp-9);
  padding: var(--sp-4) 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}
.sdd-evidence__legend-label {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t3);
}
.sdd-evidence__legend-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-5);
}
.sdd-evidence__legend-item {
  display: grid;
  gap: var(--sp-2);
}
.sdd-evidence__legend-abbr {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--page-accent);
}
.sdd-evidence__legend-name {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: var(--t1);
}
.sdd-evidence__legend-gloss {
  font-family: var(--f-prose);
  font-size: var(--fs-caption);
  color: var(--t2);
  line-height: 1.4;
}
@media (max-width: 900px) {
  .sdd-evidence__legend { grid-template-columns: minmax(0, 1fr); }
  .sdd-evidence__legend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 26.3 — Carousel defeat
   Force Stakes & Protocol to static grid on desktop. Defensive
   override only — proper fix is to gate the JS init on viewport. */
@media (min-width: 900px) {
  .sdd-stakes .swiper, .sdd-stakes .splide,
  .sdd-protocol .swiper, .sdd-protocol .splide {
    overflow: visible !important;
  }
  .sdd-stakes .swiper-wrapper, .sdd-stakes .splide__list,
  .sdd-protocol .swiper-wrapper, .sdd-protocol .splide__list {
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--sp-7) !important;
    width: 100% !important;
  }
  .sdd-stakes .swiper-slide, .sdd-stakes .splide__slide,
  .sdd-protocol .swiper-slide, .sdd-protocol .splide__slide {
    width: auto !important;
    margin: 0 !important;
  }
  .sdd-stakes .swiper-pagination, .sdd-stakes .splide__pagination,
  .sdd-stakes .swiper-button-next, .sdd-stakes .swiper-button-prev,
  .sdd-protocol .swiper-pagination, .sdd-protocol .splide__pagination,
  .sdd-protocol .swiper-button-next, .sdd-protocol .swiper-button-prev {
    display: none !important;
  }
}

/* 26.4 — Bibliography rendering
   Style for the corrected reference list demonstrated in the mockup. */
.sdd-bibliography {
  max-width: var(--m-prose);
  margin: var(--sp-10) auto;
  padding-top: var(--sp-7);
  border-top: 0.5px solid rgba(var(--page-accent-rgb), 0.45);
}
.sdd-bibliography__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.sdd-bibliography__count {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 2.5rem;
  color: var(--page-accent);
  font-feature-settings: var(--num-lining);
}
.sdd-bibliography__title {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t2);
}
.sdd-bibliography__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: bib;
}
.sdd-bibliography__item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: var(--hairline);
  font-family: var(--f-prose);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--t1-cream);
}
.sdd-bibliography__item:last-child { border-bottom: var(--hairline); }
.sdd-bibliography__num {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  color: var(--page-accent);
  font-feature-settings: var(--num-tabular);
  padding-top: 0.15em;
}
.sdd-bibliography__entry cite {
  font-style: italic;
  color: var(--t1);
}
.sdd-bibliography__type {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t3);
  padding-top: 0.3em;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .sdd-bibliography__item {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }
  .sdd-bibliography__type { grid-column: 2; }
}

/* ═══════════════════════════════════════════════════════════════
   END SDD v3.2 — Live Article Fix Pack
   ═══════════════════════════════════════════════════════════════ */