/* FOUC-CLOAK 2026-05-01 PM — hide body until JS DOM mutations settle, then
   fade in. Eliminates ALL ghost layers in one structural rule. Reveal handled
   by IIFE at end of main.js (window.load + 200ms; 3s hard fallback if JS errors).
   Replaces the per-module FOUC patching approach Rick (rightly) flagged as
   wasteful. Print stylesheets unaffected (don't load this rule). */
html.cloak body { opacity: 0 !important; pointer-events: none !important; }
html:not(.cloak) body { transition: opacity 0.18s ease-out; }

/* ESP-Nexus Theme — main.css
   ==============================================================
   Initial port of esp_custom_css theme-mod (verbatim, post-rollback
   state captured 2026-05-01 from live GET). Cleanup of override
   blocks that were fighting hello-elementor happens incrementally
   in Phase 4 once the new theme is the only floor.
   The single fluid-width rule below is the ONLY structural change
   in this initial port — it makes the 900px content card shrink
   to viewport width below 900px, supporting portrait tablets +
   any narrow viewport without horizontal scroll. Phone-specific
   styling lives in @media (max-width:600px) blocks (currently empty,
   added later as needed per the deferred-phone scope).
   ============================================================== */

/* FLUID-WIDTH-CARD 2026-05-01 — replaces fixed width:900px with fluid
   max-width:900px so the card shrinks to viewport width on portrait
   tablet and narrower. Cost: 0 (no visual change at >=900px viewport). */
html body .site-branding,
html body.wp-theme-hello-elementor .site-branding,
html body #site-header .site-branding,
html body header#site-header .site-branding,
html body .esp-topnav,
html body .esp-breadcrumbs,
html body article.profile,
html body main > .page-content,
html body main > .entry-content,
html body.home main > .page-content,
html body .esp-sticky-chrome {
  width: 100% !important;
  max-width: 900px !important;
  box-sizing: border-box !important;
}


/* STICKY-CHROME-WRAPPER 2026-05-01 — single sticky parent for site-branding
   + menu (both emitted as flow children inside <header.esp-sticky-chrome>
   by header.php). Eliminates the cross-browser sub-pixel drift class — no
   inter-child top: offsets exist anymore, the wrapper sticks as a unit.
   header.profile-header-wrap follows the wrapper-bottom via a JS-set CSS
   variable (set by main.js on resize / font-load). */
.esp-sticky-chrome {
  position: sticky !important;
  top: 0 !important;
  z-index: 99996 !important;
  background: #fdfcf8 !important;
  display: block !important;
}
body.admin-bar .esp-sticky-chrome { top: 32px !important; }
.esp-sticky-chrome .site-branding,
.esp-sticky-chrome .esp-topnav {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: none !important;
}
html body article.profile header.profile-header-wrap {
  top: var(--esp-chrome-bottom, 150px) !important;
}

/* ============================================================== */

/* ============================================================== */
/* Begin verbatim port of esp_custom_css (live state 2026-05-01)   */
/* ============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap');
/* ESP-Nexus sitewide override v6 clean consolidated. Grey OUTSIDE cards only. Cream card INSIDE. All cards share exact width + centering + bg so layout reads as one continuous floating card on every page type. */
@media (min-width:601px){
  html,body{background:#a8a8a6 !important;}
  .site-content,.site-main,main,main.content-area,.entry-content,
  .wp-block-post-content,#site-header,.site-header,header#site-header{background:transparent !important;}
  body main, body main.site-main, body main#content, body .site-content{
    padding-left:0 !important; padding-right:0 !important;
    max-width:100% !important; width:100% !important;
    margin-top:0 !important; padding-top:0 !important;
  }
  #site-header,.site-header,header#site-header{
    margin:0 !important; padding:0 !important;
    max-width:100% !important; width:100% !important; border:0 !important;
  }
  .page-header, body main .page-header{display:none !important;}
  body .site-branding,
  body.wp-theme-hello-elementor .site-branding,
  #site-header .site-branding,
  body .esp-topnav,
  body .esp-breadcrumbs,
  body article.profile,
  body main > .page-content,
  body main > .entry-content,
  body.home main > .page-content{
    background:#faf8f4 !important;
    max-width:900px !important;
    width:auto !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    border:0 !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
  }
  body .site-branding,
  body.wp-theme-hello-elementor .site-branding,
  #site-header .site-branding{
    padding:14px clamp(12px,3vw,24px) !important;
    display:flex !important; flex-direction:row !important;
    align-items:center !important; justify-content:center !important;
    gap:0 !important; flex-wrap:nowrap !important;
    border-radius:6px 6px 0 0 !important;
  }
  body .site-branding .custom-logo-link{
    display:inline-block !important; flex:0 0 auto !important;
    width:auto !important; max-width:none !important;
    margin:0 !important; padding:0 !important;
    background:transparent !important; border:none !important; box-shadow:none !important;
    text-decoration:none !important;
  }
  body .site-branding .custom-logo{
    display:block !important; margin:0 !important;
    max-width:280px !important; height:auto !important;
    background:transparent !important; border:none !important; box-shadow:none !important;
  }
  .esp-tagline{
    flex:0 0 auto !important; width:auto !important;
    align-self:flex-end !important; /* TAGLINE-VALIGN-BOTTOM v1 */
    /* TAGLINE-SANS v2 (2026-04-24) — Inter sans-serif, italic dropped. */
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-style:normal; color:#1f1d19;
    text-align:center; line-height:1.3; /* TAGLINE-CENTER v1 */
    padding:0 0 0 18px !important; border-left:1px solid #c8c0b0;
    margin:0 0 0 18px !important;
  }
  /* TAGLINE-T1T2-SHRINK v4 (2026-04-24) — t1 stays 9px; t2 drops to 7px because
     ILLUMINATED spans the line and the tall-cap 'I's widened it beyond t1. */
  .esp-tagline .esp-t1,.esp-tagline .esp-t2{font-weight:300;display:block;}
  .esp-tagline .esp-t1{font-size:9px;}
  .esp-tagline .esp-t2{font-size:5px;} /* v5: 7 -> 5 */
  .esp-tagline .esp-t3{font-size:0.78rem;font-weight:300;color:#6b6760;display:block;margin-top:2px;} /* TAGLINE-T3-WEIGHT v1 match t1/t2 at 300 */
  body .esp-topnav{
    padding:0 clamp(12px,3vw,24px) 16px !important; /* MENU-BAR-HAIRLINE-1PX-16PX-S 2026-05-01: bottom 8 → 16 to position flourish 16px south of menu words. */
    border-bottom:0 !important; /* MENU-BAR-MIRROR-BEVEL-FLOURISH 2026-05-01: was 1px solid #c2a84e (location marker); replaced by 3-layer mirror bevel below */
    /* MENU-BAR-MIRROR-BEVEL-FLOURISH 2026-05-01: mirror the chip's TOPNAV-BEVEL Variant F bevel (main.css:4358-4368 .ctx-inner) below the menu bar 16px south of words. */
    box-shadow:
      inset 0 -1px 0 rgb(227,214,168),
      0 1px 0 0 rgba(90, 71, 24, 0.55),
      0 2px 0 0 rgba(90, 71, 24, 0.20) !important;
    display:flex !important; justify-content:center !important;
    flex-wrap:wrap !important; gap:4px 18px !important;
    font-size:0.78rem !important; letter-spacing:0.04em !important;
    text-transform:uppercase !important;
  }
  body .esp-topnav a{color:#6b6760 !important; text-decoration:none !important; padding:0 10px !important; border-radius:3px !important;} /* TOPNAV-A-VPAD-ZERO 2026-04-26 — was 4px 10px, trimmed 8px vertical */
  body .esp-topnav a:hover{color:#1a1814 !important; background:rgba(139,105,20,0.07) !important;}
  body .esp-topnav a.current{color:#1a1814 !important; font-weight:500 !important;}
  body .esp-breadcrumbs{
    padding:0 clamp(12px,3vw,24px) 4px clamp(12px,3vw,24px) !important;
    margin-top:-10px !important;
    font-size:0.72rem !important; color:#7a7266 !important;
    letter-spacing:0.02em !important;
    text-align:left !important; justify-content:flex-start !important;
  }
  body .esp-breadcrumbs a{color:#8b7a4a !important; text-decoration:none !important; border-bottom:1px dotted #c0b09a !important;}
  body .esp-breadcrumbs a:hover{color:#1a1814 !important; border-bottom-color:#8b6914 !important;}
  body .esp-breadcrumbs .sep{margin:0 0.35em !important; color:#c0b09a !important;}
  body .esp-breadcrumbs .cur{color:#2a2620 !important;}
  /* EVIDENCE-QUALITY-LEDGER-2026-05-07 — consolidated null/contested/flawed table
     surfacing the prose-level "Contested/Weak" labels in one universal ledger.
     Addresses the convergent ChatGPT+Claude.ai audit ask for "a dedicated null/quality
     ledger across every domain" so a skim-reader can see evidence quality at a glance. */
  body article.profile section.esp-quality-ledger{
    margin:24px 0 !important;
    padding:18px 20px !important;
    background:#fafaf3 !important;
    border:1px solid #d8d6d0 !important;
    border-radius:4px !important;
  }
  body article.profile section.esp-quality-ledger h2{
    margin-top:0 !important;
    color:#3a3528 !important;
    font-size:1.25rem !important;
    border-bottom:2px solid #b8860b !important;
    padding-bottom:6px !important;
  }
  body article.profile section.esp-quality-ledger p.lede{
    font-size:0.92rem !important;
    color:#5a5448 !important;
    font-style:italic !important;
    margin-bottom:14px !important;
  }
  body article.profile section.esp-quality-ledger table.evidence-quality-ledger{
    width:100% !important;
    border-collapse:collapse !important;
    font-size:0.88rem !important;
    font-family:'Inter',-apple-system,sans-serif !important;
    margin:8px 0 12px !important;
  }
  body article.profile section.esp-quality-ledger thead th{
    background:#efece4 !important;
    color:#3a3528 !important;
    text-align:left !important;
    padding:8px 10px !important;
    border-bottom:2px solid #b8860b !important;
    font-weight:600 !important;
  }
  body article.profile section.esp-quality-ledger tbody td{
    padding:9px 10px !important;
    vertical-align:top !important;
    border-bottom:1px solid #e6e3d8 !important;
    line-height:1.45 !important;
  }
  body article.profile section.esp-quality-ledger tbody tr:nth-child(even){background:#fffefa !important;}
  body article.profile section.esp-quality-ledger .ledger-status{
    display:inline-block !important;
    padding:2px 8px !important;
    border-radius:3px !important;
    font-weight:500 !important;
    font-size:0.85em !important;
    white-space:nowrap !important;
  }
  body article.profile section.esp-quality-ledger .ledger-status-contested{background:#f3e6c8 !important; color:#6e4f10 !important;}
  body article.profile section.esp-quality-ledger .ledger-status-flawed{background:#f3d8d8 !important; color:#8a2020 !important;}
  body article.profile section.esp-quality-ledger .ledger-status-clean{background:#e1f0e1 !important; color:#2a6a2a !important;}
  body article.profile section.esp-quality-ledger .ledger-status-hypgen{background:#ece4f3 !important; color:#5a3a8a !important;}
  body article.profile section.esp-quality-ledger p.ledger-footer{
    font-size:0.82rem !important;
    color:#6b6760 !important;
    margin:10px 0 0 !important;
    padding-top:8px !important;
    border-top:1px dotted #d8d6d0 !important;
  }
  /* EDITORIAL-DISCLOSURE-2026-05-07 — yellow/amber box at top of subject pages
     surfacing institutional-affiliation concentration (per Claude.ai audit feedback
     that subject affiliations were buried in CV prose, not flagged at glance). */
  body article.profile aside.editorial-disclosure{
    display:block !important;
    margin:0 0 22px 0 !important;
    padding:12px 16px !important;
    background:#fdf6dc !important;
    border:1px solid #d8c47a !important;
    border-left:4px solid #b8860b !important;
    border-radius:3px !important;
    font-family:'Inter',-apple-system,sans-serif !important;
    font-size:0.9rem !important;
    line-height:1.5 !important;
    color:#3a2e08 !important;
  }
  body article.profile aside.editorial-disclosure strong{color:#5a4310 !important;}
  body article.profile aside.editorial-disclosure a{color:#5a4310 !important; text-decoration:underline !important;}
  /* REF-CHIPS-2026-05-07 — visible chips on each reference <li> rendering
     the structured-data layer (data-affiliation / data-access /
     data-evidence-class / data-quality). Built via main.js DOMContentLoaded. */
  .ref-chips{display:inline-flex !important; gap:4px !important; margin-left:6px !important; vertical-align:1px !important; flex-wrap:wrap !important;}
  .ref-chip{display:inline-block !important; font-family:'Inter',-apple-system,sans-serif !important; font-size:0.72em !important; font-weight:500 !important; padding:1px 6px !important; border-radius:3px !important; letter-spacing:0.02em !important; vertical-align:1px !important; white-space:nowrap !important; line-height:1.4 !important;}
  .ref-chip-affiliation-author{background:#efece4 !important; color:#6b6760 !important;}
  .ref-chip-affiliation-institution{background:#e8eef0 !important; color:#4a5e6b !important;}
  .ref-chip-affiliation-independent{background:#dde8f0 !important; color:#2a5a7a !important;}
  .ref-chip-affiliation-critical{background:#f3e0e0 !important; color:#8a3030 !important;}
  .ref-chip-access-paywall{background:#f3e6c8 !important; color:#6e4f10 !important;}
  .ref-chip-access-open{background:#e1f0e1 !important; color:#2a6a2a !important;}
  .ref-chip-access-open-access{background:#e1f0e1 !important; color:#2a6a2a !important;}
  .ref-chip-evidence-class-meta-analysis{background:#ece4f3 !important; color:#5a3a8a !important;}
  .ref-chip-evidence-class-critique{background:#f3e0e0 !important; color:#8a3030 !important;}
  .ref-chip-evidence-class-reply{background:#e8eef0 !important; color:#4a5e6b !important;}
  .ref-chip-evidence-class-rejoinder{background:#e8eef0 !important; color:#4a5e6b !important;}
  .ref-chip-evidence-class-replication{background:#e8f0e8 !important; color:#3a6a3a !important;}
  .ref-chip-evidence-class-methodology{background:#efece4 !important; color:#6b6760 !important;}
  .ref-chip-quality-contested{background:#f3e6c8 !important; color:#6e4f10 !important;}
  .ref-chip-quality-documented-flaw{background:#f3d8d8 !important; color:#8a2020 !important;}
  .ref-chip-quality-flawed{background:#f3d8d8 !important; color:#8a2020 !important;}
  /* BREADCRUMB-REFACTOR 2026-05-07 — home-icon crumb (replaces "Parapsychology" first segment).
     Plain inline rendering (NOT flex) so the "Home" word sits on the same
     text baseline as the rest of the breadcrumb. Icon hangs from the
     baseline via vertical-align (Rick 2026-05-07 PM: "text needs to be
     bottom-locked... lined up with the bottom of the how-ESP-Nexus-works").
     border-bottom suppressed on home-crumb only — the icon doesn't read
     as a "linked word". */
  body .esp-breadcrumbs a.esp-home-crumb{border-bottom:none !important;}
  body .esp-breadcrumbs a.esp-home-crumb:hover .esp-home-icon{color:#1a1814 !important;}
  body .esp-breadcrumbs .esp-home-icon{display:inline-block !important; vertical-align:-2px !important; margin-right:4px !important; color:#8b7a4a !important;}
  /* Truncated leaf crumb (when full title exceeds 60 chars) — Rick 2026-05-07 */
  body .esp-breadcrumbs .cur[title]{cursor:help !important;}
  /* Legacy duplicate-home suppression — kept for back-compat with old JS-injected breadcrumbs */
  .esp-breadcrumbs a[href="https://esp-nexus.org/"] + .sep + a[href="https://esp-nexus.org/"],
  .esp-breadcrumbs a[href="https://esp-nexus.org/"] + .sep + a[href="https://esp-nexus.org/"] + .sep{display:none !important;}
  body article.profile{
    padding:1.25rem clamp(12px,3vw,2rem) 1.75rem clamp(12px,3vw,2rem) !important;
    border-radius:0 0 6px 6px !important;
    margin-bottom:1.5rem !important;
    box-shadow:0 1px 2px rgba(0,0,0,0.05),0 4px 10px rgba(0,0,0,0.07),0 16px 32px rgba(0,0,0,0.09),0 32px 64px rgba(0,0,0,0.07) !important;
  }
  body main > .page-content,
  body main > .entry-content,
  body.home main > .page-content{
    padding:1.75rem clamp(12px,3vw,2rem) !important;
    border-radius:0 0 6px 6px !important;
    margin-bottom:1.5rem !important;
    box-shadow:0 1px 2px rgba(0,0,0,0.05),0 4px 10px rgba(0,0,0,0.07),0 16px 32px rgba(0,0,0,0.09),0 32px 64px rgba(0,0,0,0.07) !important;
  }
  body main > .page-content:has(article.profile),
  body main > .entry-content:has(article.profile){
    background:transparent !important;
    max-width:none !important; width:auto !important;
    margin:0 !important; padding:0 !important;
    box-shadow:none !important; border-radius:0 !important;
  }
  body.home main > .page-content article.profile{
    background:transparent !important;
    max-width:none !important; width:auto !important;
    margin:0 !important; padding:0 !important;
    box-shadow:none !important; border-radius:0 !important;
  }
  body article.profile,
  body main > .page-content,
  body main > .entry-content{
    overflow-wrap:break-word !important;
    word-break:break-word !important;
  }
  body article.profile a,
  body main > .page-content a,
  body main > .entry-content a{overflow-wrap:anywhere !important;}
}



/* Narrow viewport safety: pill buttons and any element that nowrap-s
   must be allowed to wrap so they can never spill past the card edge. */
@media (min-width:601px) and (max-width:1023px){
  body article.profile .hub-link-buttons,
  body .hub-link-buttons{
    flex-wrap:wrap !important;
    max-width:100% !important;
    overflow:visible !important;
  }
  body article.profile .hub-link-buttons a,
  body .hub-link-buttons a{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    max-width:100% !important;
    flex:0 1 auto !important;
  }
  /* Any inline-styled flex/nowrap element inside the content card */
  body article.profile *{max-width:100% !important;}
  body article.profile img,
  body article.profile iframe,
  body article.profile video{max-width:100% !important;height:auto !important;}
}
/* Breadcrumb: flush-left (padding-left 0) + pulled up 14px for tightness */
body .esp-breadcrumbs{
  padding-left:0 !important;
  margin-top:-14px !important;
  margin-left:0 !important;
}


/* =====================================================================
   High-specificity override to beat the old Additional CSS layout rules.
   Using html body prefix boosts selector specificity by one ID-less
   element so the new rules always win equal-!important ties.
   ===================================================================== */
@media (min-width:601px){
  html body .site-branding,
  html body .esp-topnav,
  html body .esp-breadcrumbs,
  html body article.profile,
  html body main > .page-content,
  html body main > .entry-content,
  html body.home main > .page-content{
    background:#faf8f4 !important;
    max-width:900px !important;
    width:auto !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-top:0 !important;
    border:0 !important;
    box-sizing:border-box !important;
  }
  /* Kill H1/header-wrap bottom margin so breadcrumb lands tight against it */
  html body article.profile header.profile-header-wrap,
  html body article.profile header.profile-header-wrap h1,
  html body article.profile header.profile-header-wrap h2{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }
  /* Breadcrumb: flush left with the H1 text, tight to it (no gap) */
  html body .esp-breadcrumbs{
    margin-top:0 !important;
    padding-top:0 !important;
    padding-left:0 !important;
    padding-bottom:0.4rem !important;
  }
}


/* Reverse page-margin color to white and add 1px black vertical borders
   on both sides of every card block so the content window is delimited
   by a continuous vertical line on each edge. */
@media (min-width:601px){
  html,body{background:#ffffff !important;}
  html body .site-branding,
  html body .esp-topnav,
  html body .esp-breadcrumbs,
  html body article.profile,
  html body main > .page-content,
  html body main > .entry-content,
  html body.home main > .page-content{
    border-left:0 !important;
    border-right:0 !important;
    box-shadow:none !important;
  }
}


/* Typography control — explicit font-sizes override theme defaults.
   Start with H1 at 28px; extend this block for H2/H3/body/etc as Rick
   iterates. */
@media (min-width:601px){
  html body article.profile h1,
  html body article.profile header.profile-header-wrap h1,
  html body main h1,
  html body .page-content h1,
  html body .entry-content h1,
  html body main .eni-intro h1,
  html body .wp-block-post-title{
    /* H1-SIZE v2 (2026-04-24) — 28 -> 26 -> 24. */
    font-size:24px !important;
    line-height:1.2 !important;
    font-weight:600 !important;
  }
}


/* Width-100% override so the logo block fills parent (up to the
   900px cap) instead of shrinking to its content. On narrower
   viewports the max-width is irrelevant; width:100% keeps the card
   at viewport width so the borders always line up. */
@media (min-width:601px){
  html body .site-branding,
  html body .esp-topnav,
  html body .esp-breadcrumbs,
  html body article.profile,
  html body main > .page-content,
  html body main > .entry-content,
  html body.home main > .page-content{
    width:100% !important;
    max-width:900px !important;
  }
}


/* Breadcrumb: no its own side borders (the containing article.profile
   or .page-content already draws the card edges). */
html body .esp-breadcrumbs{
  border-left:0 !important;
  border-right:0 !important;
}


/* Strip all background colors — will re-add them later once the
   layout is settled. Keep only the vertical borders for card edges. */
@media (min-width:601px){
  html,body{background:transparent !important;}
  html body .site-branding,
  html body.wp-theme-hello-elementor .site-branding,
  html body #site-header .site-branding,
  html body .esp-topnav,
  html body .esp-breadcrumbs,
  html body article.profile,
  html body main > .page-content,
  html body main > .entry-content,
  html body.home main > .page-content,
  html body aside.key-findings{
    background:transparent !important;
  }
}


/* FINAL BORDER OVERRIDE — applied last so border:0 shorthand cannot
   override. High specificity with html body prefix. */
@media (min-width:601px){
  html body .site-branding,
  html body.wp-theme-hello-elementor .site-branding,
  html body #site-header .site-branding,
  html body header#site-header .site-branding,
  html body .esp-topnav,
  html body article.profile,
  html body main > .page-content,
  html body main > .entry-content,
  html body.home main > .page-content{
    border-top:0 !important;
    border-bottom:0 !important;
    border-left:0 !important;
    border-right:0 !important;
  }
  /* Make sure breadcrumb stays borderless */
  html body .esp-breadcrumbs{
    border:0 !important;
  }
}


/* Spacing refinements: add 6px under H1, 8px above the first paragraph
   (= the lede, which immediately follows the breadcrumb). */
@media (min-width:601px){
    /* First paragraph following breadcrumb (the lede) */
  html body .esp-breadcrumbs + p,
  html body article.profile .profile-lede,
  html body article.profile header.profile-header-wrap p:first-of-type{
    margin-top:8px !important;
  }
}


/* Kill any top/bottom borders on the card and its wrappers. Only the
   left and right borders should render. */
@media (min-width:601px){
  html body article.profile,
  html body main > .page-content,
  html body main > .entry-content,
  html body.home main > .page-content,
  html body .site-branding,
  html body .esp-topnav,
  html body main,
  html body main.site-main,
  html body main#content,
  html body .site-content{
    border-top:0 !important;
    border-bottom:0 !important;
    border-top-width:0 !important;
    border-bottom-width:0 !important;
  }
}


/* #site-header is now empty (logo was moved into article.profile). Hide
   it entirely so any residual theme styling (shadow, border, padding,
   empty space) disappears. */
html body #site-header,
html body header#site-header,
html body header.site-header{
  display:none !important;
}
/* Also kill any shadow or border on main/site-main */
html body main,
html body main.site-main,
html body main#content{
  box-shadow:none !important;
  border:0 !important;
}


/* SIDE-BORDER-MATCH 2026-04-26 — site-branding is now back OUTSIDE article.profile
   per TOPNAV-STRUCTURAL v1 JS. Restore L+R 1px black borders so the dark inner
   column runs continuous through header+topnav+article (no 1px gap at the freeze
   line). Top+bottom + radius + outline still stripped. background:transparent
   gets overridden by a later rule that paints cream. */
html body .site-branding,
html body.wp-theme-hello-elementor .site-branding,
html body article.profile .site-branding{
  border-top:0 !important;
  border-bottom:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  background:transparent !important;
}


/* Explicit: esp-topnav has zero top AND bottom borders. An older rule
   in this same CSS set border-top:1px — this final rule overrides. */
html body .esp-topnav,
html body article.profile .esp-topnav{
  border-top:0 !important;
  border-bottom:0 !important;
  border-top-width:0 !important;
  border-bottom-width:0 !important;
}


/* SIDE-BORDER-MATCH 2026-04-26 — topnav is now back OUTSIDE article.profile
   (TOPNAV-STRUCTURAL v1). Restore L+R 1px black borders so the dark inner
   column is continuous from y=0 through the entire card. The earlier
   "double-line" concern no longer applies since header/topnav/article are
   stacked siblings, not nested — each draws ONE pair of vertical lines that
   together form ONE continuous black column. */
html body .esp-topnav,
html body article.profile .esp-topnav,
html body .site-branding,
html body article.profile .site-branding{
  border-left:0 !important;
  border-right:0 !important;
}


/* Flush to page top: zero top margin/padding on body, main, site-main,
   site-content, page-content, entry-content, and article.profile so
   the logo starts at y=0 (below browser chrome / admin bar if any). */
/* ADMIN-BAR-OFFSET v1 — scope top-zeroing to anonymous visitors; logged-in admins keep WP's 32/46px top offset so the admin bar does not overlap the site logo. */
html:not(.admin-bar-active) body:not(.admin-bar){margin-top:0 !important; padding-top:0 !important;}
html body.admin-bar{margin-top:32px !important;}
@media screen and (max-width:782px){html body.admin-bar{margin-top:46px !important;}}
html body main,
html body main.site-main,
html body main#content,
html body .site-content,
html body .page-content,
html body .entry-content,
html body.home main > .page-content,
html body article.profile,
html body article.profile .site-branding{
  margin-top:0 !important;
  padding-top:0 !important;
}


/* Safety buffer: 8px padding-top on article.profile (and page-content
   equivalents) so the logo never gets clipped by browser variations in
   default line-height or by any negative-margin accumulation from
   child elements. */
@media (min-width:601px){
  html body article.profile,
  html body main > .page-content,
  html body main > .entry-content,
  html body.home main > .page-content{
    padding-top:8px !important;
  }
  /* The site-branding stays flush inside with no padding of its own */
  html body article.profile .site-branding{
    margin-top:0 !important;
    padding-top:0 !important;
  }
  /* Also ensure image inside logo can render in full without overflow:hidden clipping it */
  html body article.profile,
  html body article.profile .site-branding{
    overflow:visible !important;
  }
}


/* Page bg matches logo PNG bg (#faf8f4) so the logo blends seamlessly
   into the horizontal space around the card. Also strip the border-left
   from .esp-tagline (the PNG already has an embedded vertical divider;
   mine was a second one). */
html,body{background:#faf8f4 !important;}
html body article.profile,
html body main > .page-content,
html body main > .entry-content,
html body.home main > .page-content{
  background:#faf8f4 !important;
}
html body .esp-tagline,
html body .site-branding .esp-tagline,
html body article.profile .esp-tagline{
  border-left:0 !important;
  border-left-width:0 !important;
  padding-left:6px !important;
  margin-left:6px !important;
}


/* Maximum-specificity H1 override — catches H1 regardless of where
   it sits in the DOM (including home-page inline-styled H1). Forces
   the sitewide 28px size on every page type. */
html body h1,
html body article h1,
html body article.profile h1,
html body main h1,
html body .page-content h1,
html body .entry-content h1,
html body main.site-main h1,
html body article h1[style],
html body main h1[style]{
  font-size:28px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  margin-bottom:6px !important;
  margin-top:0 !important;
}
/* Hide theme entry-title everywhere including home */
html body h1.entry-title,
html body .entry-header h1.entry-title,
html body .page-header h1.entry-title{display:none !important;}


/* Nuclear: strip ALL left/right borders from EVERY descendant of
   article.profile (and .page-content fallback containers). Only the
   outer containers themselves keep their left/right border. */
html body article.profile *,
html body main > .page-content *,
html body main > .entry-content *,
html body.home main > .page-content *{
  border-left:0 !important;
  border-right:0 !important;
  border-left-width:0 !important;
  border-right-width:0 !important;
}
/* But re-assert the OUTER card borders in case the universal selector
   above also stripped them when applied to a pseudo parent. */
html body article.profile,
html body main > .page-content,
html body main > .entry-content,
html body.home main > .page-content{
  border-left:0 !important;
  border-right:0 !important;
}


/* Bump Sources-toggle text + radio labels +4px (from ~8px to 12px). */
html body .src-toggle,
html body .src-toggle label,
html body .src-toggle span{
  font-size:12px !important;
  letter-spacing:0.04em !important;
}
html body .src-toggle input[type=radio]{
  transform:scale(1.1) !important;
}

/* Search form in top-nav row */
.esp-searchform{
  display:inline-flex;align-items:center;gap:4px;
  margin-left:18px;
}
.esp-searchform input[type=search]{
  font-size:12px;padding:3px 8px;
  border:1px solid #c8c0b0;border-radius:3px;
  background:#fff;color:#1a1814;min-width:140px;
}
.esp-searchform button{
  font-size:11px;padding:3px 8px;
  border:1px solid #c8c0b0;border-radius:3px;
  background:#f0f0ee;color:#1a1814;cursor:pointer;
  letter-spacing:0.04em;text-transform:uppercase;
}
.esp-searchform button:hover{
  background:#e4e2dc;
}


/* H1 becomes a flex row: title name on left, Sources 200px right of it,
   search form pushed flush right. Applies to hub + spoke H1 inside
   profile-header-wrap. */
/* Remove the search form from the top-nav row (it now lives in H1). */
html body .esp-topnav .esp-searchform{display:none !important;}


/* Revert H1 to block (form-inside-h1 was invalid). header.profile-header-wrap
   becomes the flex row: H1 on left (with src-toggle inline), search form
   on the right. */
html body article.profile header.profile-header-wrap{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:wrap !important;
  gap:0 !important;
}
/* src-toggle stays inside H1 with 200px gap from title */
/* Search form is sibling of H1, right-aligned */
html body article.profile header.profile-header-wrap > .esp-searchform{
  flex:0 0 auto !important;
  margin-left:auto !important;
}
/* Search form stripped from top-nav row */
html body .esp-topnav .esp-searchform{display:none !important;}


/* Force header row to never wrap — title, Sources, and Search all on
   one line. Tightened margins + smaller search-input min-width so all
   fit within the 900px card. */
html body article.profile header.profile-header-wrap{
  flex-wrap:nowrap !important;
}
html body .esp-searchform{
  flex:0 0 auto !important;
}
html body .esp-searchform input[type=search]{
  min-width:120px !important;
  max-width:160px !important;
}


/* Replace flex-based H1 row with CSS-table layout — deterministic
   column widths, proper vertical-alignment, no wrap surprises. The
   header row has exactly two cells: H1 (with Sources inside, on left)
   takes 70 percent; search form (on right) takes 30 percent. */
html body article.profile header.profile-header-wrap{
  display:table !important;
  width:100% !important;
  table-layout:fixed !important;
  border-collapse:collapse !important;
  padding:0 !important;
  margin:0 !important;
}
html body article.profile header.profile-header-wrap > .esp-searchform{
  display:table-cell !important;
  vertical-align:middle !important;
  width:30% !important;
  text-align:right !important;
  padding:0 !important;
}
/* Inside the H1 cell, src-toggle stays right-aligned via margin */


/* Undo display:table on header.profile-header-wrap — block keeps
   natural vertical stacking (H1 line, breadcrumb line, lede line).
   Search form is absolute-positioned to float on the right of the H1
   line. Breadcrumb stays on its own line below H1. */
html body article.profile header.profile-header-wrap{
  display:block !important;
  position:relative !important;
  width:auto !important;
  table-layout:auto !important;
}
html body article.profile header.profile-header-wrap > .esp-searchform{
  display:inline-flex !important;
  position:absolute !important;
  top:8px !important;
  right:0 !important;
  vertical-align:middle !important;
  margin:0 !important;
}


/* Breadcrumb: 4px gap above it (was negative margin) + 'You are here:'
   prefix via CSS pseudo-element. */
html body .esp-breadcrumbs{
  margin-top:4px !important;
  padding-top:0 !important;
}
html body .esp-breadcrumbs::before{
  /* BREADCRUMB-ICON 2026-04-26 — was "You are here: ", now ◉ in gold to
     save horizontal space + match site palette. */
  content:"\25C9";
  color:#8a6914;
  margin-right:0.5em;
  font-style:normal;
  font-size:0.9em;
}


/* Homepage card flush-top: zero the padding-top on .page-content and
   on article.profile inside it. Logo's own internal padding (14px from
   .site-branding) provides the breathing room. */
@media (min-width:601px){
  html body.home main > .page-content,
  html body.home main > .entry-content,
  html body.home main > .page-content > article.profile,
  html body main > .page-content,
  html body main > .entry-content,
  html body article.profile{
    padding-top:0 !important;
    margin-top:0 !important;
  }
}


/* HOME EXCEPTION: long H1 forces Sources + Search onto their own row.
   Layout:
     H1 (full width, long title allowed to wrap)
     Sources centered + Search flush right on a separate row below.
*/
@media (min-width:601px){
  html body.home article.profile header.profile-header-wrap{
    position:relative !important;
    padding-bottom:40px !important;
  }
    /* Pull src-toggle OUT of H1 flow; center on a row below. */
    /* Search form flush right on that same row. */
  html body.home article.profile header.profile-header-wrap > .esp-searchform{
    position:absolute !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
  }
}


/* Top-nav: place a pipe between every item, including leading + trailing.
   | Home | Scientists | Phenomena | ... | */
html body .esp-topnav a::before{
  content:"| ";
  color:#c0b09a;
  margin-right:4px;
  font-weight:400;
}
html body .esp-topnav a:last-of-type::after{
  content:" |";
  color:#c0b09a;
  margin-left:4px;
  font-weight:400;
}


/* 6px headroom between top-nav menu and H1 row. */
html body article.profile > header.profile-header-wrap{
  padding-top:6px !important;
  margin-top:0 !important;
}


/* Search box: vertically center-aligned (not top-aligned) so it lines up
   with the Sources radio buttons inside the H1. */
html body article.profile header.profile-header-wrap > .esp-searchform{
  position:absolute !important;
  top:25px !important;  /* CONTROLS-LOCK 2026-04-26: was 50% — vertical center fixed at hw-top+27 so default and .compact match (no jump on scroll-collapse) */
  right:0 !important;
  transform:translateY(-50%) !important;
  bottom:auto !important;
}


/* Search results page: show the h1 (we globally hide h1.entry-title on
   other pages, but search results NEED the visible title). */
html body.search h1.entry-title,
html body.search h1.page-title,
html body.search .page-header h1,
html body.search main h1{
  display:block !important;
  font-size:28px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  margin:8px 0 16px 0 !important;
}


/* Search results page — zero all top padding/margin so logo sits flush
   at top just like other pages. Also apply the site-wide card layout
   to the search results container so it looks consistent. */
@media (min-width:601px){
  html body.search,
  html body.search main,
  html body.search main.site-main,
  html body.search main#content,
  html body.search .site-content,
  html body.search .page-header,
  html body.search .search-header{
    margin-top:0 !important;
    padding-top:0 !important;
  }
  /* Search page fallback: give the main container the same floating-card
     treatment as other pages since there is no article.profile. */
  html body.search main > *:first-child{margin-top:0 !important;}
}


/* Home-specific controls row: sources centered, search flush right */
html body.home .esp-home-controls{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  margin:8px 0 16px 0 !important;
  padding:0 !important;
  position:relative !important;
}
html body.home .esp-home-controls .src-toggle{
  position:static !important;
  transform:none !important;
  margin:0 auto !important;  /* centered */
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  top:auto !important;
  font-size:12px !important;
}
html body.home .esp-home-controls .esp-searchform{
  position:static !important;
  transform:none !important;
  margin-left:auto !important;  /* flush right */
  flex:0 0 auto !important;
  left:auto !important; right:auto !important;
  bottom:auto !important; top:auto !important;
}
/* Invisible spacer on left to push sources to visual center */
html body.home .esp-home-controls::before{
  content:"" !important;
  flex:1 1 0 !important;
}
/* Override the previous home absolute-position for src-toggle */


/* LOCK sitewide vertical alignment: zero every possible top contributor
   above article.profile / page-content / entry-content so the logo
   lands at identical Y across all page types. */
@media (min-width:601px){
  html,body{margin:0 !important;padding:0 !important;}
  html body #site-header,
  html body header.site-header,
  html body header#site-header{display:none !important;margin:0 !important;padding:0 !important;}
  html body #wpadminbar{margin:0;padding:0;}
  html body main,
  html body main.site-main,
  html body main#content,
  html body .site-content{
    margin-top:0 !important;padding-top:0 !important;
    margin-bottom:0 !important;padding-bottom:0 !important;
  }
  html body .page-header,
  html body main .page-header,
  html body .entry-header,
  html body main .entry-header{display:none !important;margin:0 !important;padding:0 !important;height:0 !important;}
  /* Every card container gets identical zero top. */
  html body article.profile,
  html body main > .page-content,
  html body main > .entry-content,
  html body.home main > .page-content{
    margin-top:0 !important;padding-top:0 !important;
  }
  /* The site-branding inside the card provides predictable internal
     padding (14px top) so the logo always sits the same distance from
     the card top regardless of page type. */
  html body article.profile > .site-branding,
  html body main > .page-content > .site-branding{
    padding:14px 0 0 0 !important;
    margin:0 !important;
  }
}


/* HOME row: grid layout — empty left spacer | sources centered | search
   flush right. Grid is deterministic unlike the flex approach. */
html body.home .esp-home-controls{
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  width:100% !important;
  margin:8px 0 16px 0 !important;
  padding:0 !important;
  position:static !important;
}
html body.home .esp-home-controls::before{content:none !important;}
html body.home .esp-home-controls .src-toggle{
  grid-column:2 !important;
  justify-self:center !important;
  margin:0 !important;
  position:static !important;
  transform:none !important;
}
html body.home .esp-home-controls .esp-searchform{
  grid-column:3 !important;
  justify-self:end !important;
  margin:0 !important;
  position:static !important;
  transform:none !important;
}


/* Logo tagline: switch from italic to regular. */
html body .esp-tagline,
html body .esp-tagline .esp-t1,
html body .esp-tagline .esp-t2,
html body .esp-tagline .esp-t3{
  font-style:normal !important;
}


/* Tagline font: match body text (no mixing serif/sans-serif). */
html body .esp-tagline,
html body .esp-tagline .esp-t1,
html body .esp-tagline .esp-t2,
html body .esp-tagline .esp-t3{
  font-family:inherit !important;
  font-style:normal !important;
}


/* Superseded by TAGLINE-T1T2-SPLIT v1 below. Kept as a no-op for history. */


/* TAGLINE-T1T2-SPLIT v1 (2026-04-24) — t1=9 t2=5. Replaces the stale "14px
   both" block. Smoothing hints kept. */
html body .esp-tagline .esp-t1,
html body .esp-tagline .esp-t2{
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-rendering:optimizeLegibility !important;
  letter-spacing:0 !important;
}
html body .esp-tagline .esp-t1{ font-size:0.78rem !important; } /* match t2/t3 */
html body .esp-tagline .esp-t2{ font-size:10px !important; } /* 12.5 -> 10 (-2) */


/* Bump kerning on tagline top lines a bit so letters separate cleanly. */
html body .esp-tagline .esp-t1,
html body .esp-tagline .esp-t2{
  /* TAGLINE-KERN-TIGHTEN v1 (2026-04-24) — 0.04em felt too loose at 9px;
     Inter's natural kerning is tight enough, drop to 0. */
  letter-spacing:0 !important;
}


/* Tagline font: Verdana family — explicitly distinguishes capital I
   from lowercase l and digit 1 (theme default does not). */
html body .esp-tagline,
html body .esp-tagline .esp-t1,
html body .esp-tagline .esp-t2,
html body .esp-tagline .esp-t3{
  font-family:Verdana, Geneva, Tahoma, "Trebuchet MS", sans-serif !important;
}


html body .esp-tagline .esp-t2 .esp-bulb{display:inline-block !important;transform:rotate(90deg) !important;transform-origin:center center !important;margin:0 0 0 2px !important;}


/* Inline SVG bulb: rotate 90 deg clockwise */
html body .esp-tagline .esp-t2 svg.esp-bulb{
  display:inline-block !important;
  vertical-align:-0.15em !important;
  transform:rotate(90deg) !important;
  transform-origin:center center !important;
  width:1em !important; height:1em !important;
  margin:0 0 0 3px !important;
  color:#8b6914 !important;
}


/* Breadcrumb: +2px additional top margin (now 6px). */
html body .esp-breadcrumbs{
  margin-top:6px !important;
}


/* Tagline block: vertically center-align inside the site-branding flex
   row so it sits at mid-height of the logo image, not top-aligned. */
html body .site-branding{
  align-items:center !important;
}
html body .esp-tagline{
  align-self:center !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}


/* Content card extends to bottom of viewport so borders + background
   reach the bottom instead of leaving the card hanging mid-page. */
@media (min-width:601px){
  html body article.profile,
  html body main > .page-content,
  html body main > .entry-content,
  html body.home main > .page-content{
    min-height:100vh !important;
    margin-bottom:0 !important;
  }
  /* Ensure the footer/bottom content inside the card sits flush at the
     bottom of the content area without extra space below it. */
  html body article.profile > :last-child,
  html body main > .page-content > :last-child{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }
}


/* HOME-SCIENTIST-UNIFY v1
   Fix: home page had .page-content acting as the card (with 28px
   top padding) while scientist pages had article.profile as the card.
   That 28px made the logo jump down on home vs flush on scientists.
   Unification: on BOTH, .page-content = transparent zero-padding
   wrapper and article.profile = the actual card. */
@media (min-width:601px){
  html body.home main > .page-content{
    background:transparent !important;
    padding:0 !important;
    margin:0 auto !important;
    max-width:none !important;
    width:auto !important;
    border:0 !important;
    box-shadow:none !important;
    min-height:0 !important;
    border-radius:0 !important;
  }
  html body.home main > .page-content > article.profile,
  html body.home main > .page-content article.profile{
    background:#faf8f4 !important;
    max-width:900px !important;
    width:100% !important;
    margin:0 auto 1.5rem auto !important;
    padding:0 !important;
    border:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    box-shadow:0 1px 2px rgba(0,0,0,0.05),0 4px 10px rgba(0,0,0,0.07),0 16px 32px rgba(0,0,0,0.09),0 32px 64px rgba(0,0,0,0.07) !important;
    min-height:100vh !important;
    border-radius:0 0 6px 6px !important;
    box-sizing:border-box !important;
  }
}

/* HOME-SCIENTIST-UNIFY v2
   Beats the mu-plugin rule body:not(.page-child) main.site-main > .page-content
   (specificity 0,0,3,3) by using an equally-specific selector placed later. */
@media (min-width:601px){
  html body.home main.site-main > .page-content,
  html body.home main#content > .page-content{
    background:transparent !important;
    padding:0 !important;
    margin:0 auto !important;
    max-width:none !important;
    width:auto !important;
    border:0 !important;
    box-shadow:none !important;
    min-height:0 !important;
    border-radius:0 !important;
  }
  html body.home main.site-main > .page-content > article.profile,
  html body.home main#content > .page-content > article.profile,
  html body.home main.site-main > .page-content article.profile,
  html body.home main#content > .page-content article.profile{
    background:#faf8f4 !important;
    max-width:900px !important;
    width:100% !important;
    margin:0 auto 1.5rem auto !important;
    padding:0 !important;
    border:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    box-shadow:0 1px 2px rgba(0,0,0,0.05),0 4px 10px rgba(0,0,0,0.07),0 16px 32px rgba(0,0,0,0.09),0 32px 64px rgba(0,0,0,0.07) !important;
    min-height:100vh !important;
    border-radius:0 0 6px 6px !important;
    box-sizing:border-box !important;
  }
}

/* HOME-SCIENTIST-UNIFY v3
   Match scientist page exactly: .page-content is transparent wrapper,
   article.profile is the card with 0 top/bottom padding and
   clamp(12px,3vw,2rem) L/R padding (= 32px at desktop width). */
@media (min-width:601px){
  html body.home main.site-main > .page-content,
  html body.home main#content > .page-content{
    background:transparent !important;
    padding:0 !important;
    margin:0 auto !important;
    max-width:none !important;
    width:auto !important;
    border:0 !important;
    box-shadow:none !important;
    min-height:0 !important;
    border-radius:0 !important;
  }
  html body.home main.site-main > .page-content > article.profile,
  html body.home main#content > .page-content > article.profile,
  html body.home main.site-main > .page-content article.profile,
  html body.home main#content > .page-content article.profile{
    background:#faf8f4 !important;
    max-width:900px !important;
    width:100% !important;
    margin:0 auto 1.5rem auto !important;
    padding:0 clamp(12px, 3vw, 2rem) !important;
    border:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    box-shadow:0 1px 2px rgba(0,0,0,0.05),0 4px 10px rgba(0,0,0,0.07),0 16px 32px rgba(0,0,0,0.09),0 32px 64px rgba(0,0,0,0.07) !important;
    min-height:100vh !important;
    border-radius:0 0 6px 6px !important;
    box-sizing:border-box !important;
  }
}


/* RESPONSIVE-REWRITE v3 ─────────────────────────────────────────────────
   Root cause of scientist-flush-left: prior v1 set max-width:900px on
   .page-content which collapsed it to 900px flush-left on scientist
   pages (where .page-content is supposed to be a 100%-wide transparent
   wrapper around the centered article.profile card).
   Fix: only touch width/max-width on the visible-card containers
   (.site-branding / .esp-topnav / .esp-breadcrumbs / article.profile).
   .page-content is left alone on scientist (stays 100%-wide transparent);
   HOME-SCIENTIST-UNIFY v3 still handles home's .page-content separately.
   ────────────────────────────────────────────────────────────────── */

/* A. Kill the mu-plugin's fixed 900px width (overflows tablet) on the
      visible-card containers only. max-width:900px caps desktop. */
html body .site-branding,
html body .esp-topnav,
html body .esp-breadcrumbs,
html body article.profile{
  width:auto !important;
  max-width:900px !important;
  box-sizing:border-box !important;
}

/* B. Tablet tier (601–899px): small gutters. */
@media (min-width:601px) and (max-width:899px){
  html body .site-branding,
  html body .esp-topnav,
  html body .esp-breadcrumbs,
  html body article.profile{
    margin-left:16px !important;
    margin-right:16px !important;
    max-width:calc(100% - 32px) !important;
  }
  html body .site-branding{ padding:12px 18px !important; }
  html body .esp-topnav{ padding:6px 16px !important; gap:4px 14px !important; }
  html body .esp-breadcrumbs{ padding:4px 18px !important; }
  html body article.profile{ padding:1rem 1.25rem 1.5rem 1.25rem !important; }
}

/* C. Phone tier (≤600px): full-width card, no side borders, stacked logo. */
@media (max-width:600px){
  html,body{ background:#faf8f4 !important; }

  html body .site-branding,
  html body .esp-topnav,
  html body .esp-breadcrumbs,
  html body article.profile{
    max-width:100% !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#faf8f4 !important;
    box-sizing:border-box !important;
  }

  html body .site-branding{
    padding:12px 14px !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:8px !important;
  }
  html body .site-branding .custom-logo-link{
    flex:1 1 100% !important;
    width:100% !important;
    text-align:center !important;
  }
  html body .site-branding .custom-logo{
    max-width:200px !important;
    margin:0 auto !important;
  }
  html body .esp-tagline{
    flex:1 1 100% !important;
    width:100% !important;
    text-align:center !important;
    padding:6px 0 0 0 !important;
    margin:6px 0 0 0 !important;
    border-left:0 !important;
  }
  html body .esp-tagline .esp-t1,
  html body .esp-tagline .esp-t2{ font-size:0.85rem !important; line-height:1.25 !important; }
  html body .esp-tagline .esp-t3{ font-size:0.7rem !important; margin-top:3px !important; }

  html body .esp-topnav{
    padding:6px 8px !important;
    font-size:0.7rem !important;
    gap:2px 10px !important;
  }
  html body .esp-topnav a{ padding:0 6px !important; } /* TOPNAV-A-VPAD-ZERO-MOBILE 2026-04-26 — match desktop trim */

  html body .esp-breadcrumbs{
    padding:4px 12px !important;
    font-size:0.65rem !important;
    flex-wrap:wrap !important;
  }
  html body .esp-breadcrumbs .sep{ margin:0 0.25em !important; }

  html body article.profile{
    padding:12px 14px 20px 14px !important;
    margin-bottom:0 !important;
  }

  html body article.profile header.profile-header-wrap h1,
  html body main > .page-content h1:not(.entry-title){
    font-size:22px !important;
    line-height:1.25 !important;
    flex-wrap:wrap !important;
    margin:0 0 4px 0 !important;
  }
  html body article.profile h1 .src-toggle,
  html body main > .page-content h1 .src-toggle{
    display:block !important;
    margin:6px 0 0 0 !important;
    font-size:0.55rem !important;
    position:static !important;
    transform:none !important;
  }

  html body .esp-searchform{
    width:100% !important;
    margin:8px 0 !important;
    position:static !important;
    transform:none !important;
    display:flex !important;
    gap:6px !important;
  }
  html body .esp-searchform input[type="search"]{
    flex:1 1 auto !important; min-width:0 !important; max-width:none !important;
  }
  html body .esp-searchform button{ flex:0 0 auto !important; }

  html body.home .esp-home-controls{
    display:block !important;
    grid-template-columns:none !important;
    margin:8px 0 12px 0 !important;
  }
  html body.home .esp-home-controls > *{
    display:block !important; margin:8px auto !important;
  }

  html body article.profile p,
  html body article.profile li{ font-size:0.95rem !important; line-height:1.55 !important; }

  html body article.profile table{
    display:block !important; overflow-x:auto !important; max-width:100% !important;
  }
  html body article.profile img,
  html body article.profile figure{ max-width:100% !important; height:auto !important; }
}
/* RESPONSIVE-REWRITE v3 END */
/* H1-BREATHING v1 — 16px gap above every page H1 to separate it from
   the menu hairline (desktop/tablet) or menu bottom (phone). */
html body article.profile header.profile-header-wrap > h1,
html body main > .page-content > h1,
html body main > .page-content h1:not(.entry-title),
html body article.profile h1:not(.entry-title){
  margin-top:16px !important;
}

/* MENU-HAIRLINE v2 — same intent as v1 but with article.profile in the
   selector to beat an earlier `html body article.profile .esp-topnav
   { border-bottom: 0 !important }` at specificity (0,0,2,3). */
@media (min-width:601px){
  html body article.profile .esp-topnav,
  html body main.site-main .esp-topnav,
  html body main#content .esp-topnav{
    display:flex !important;
    flex-wrap:wrap !important;
    /* TOPNAV-STRUCTURAL v1 (2026-04-25): width/margin removed so the
       full-width sticky-bar STICKY TOPNAV rule (later in source) wins.
       The nav is now a sibling of article.profile (not a child), so no
       padding-fight is needed; it spans full content width naturally. */
    padding-bottom:10px !important;
    height:38px !important; /* CROSS-BROWSER-LOCK 2026-05-01 — menu height locked to integer to prevent sub-pixel drift across rendering engines */
    box-sizing:border-box !important;
    border-top:0 !important;
    border-bottom:0 !important; /* TOPNAV-FREEZE-SEPARATOR-COLOR KILLED 2026-04-30 evening — Rick: 'black line where the line had been deleted above the H1... look close to see what just broke.' */
    box-sizing:border-box !important;
    justify-content:center !important;
  }
  html body article.profile .esp-topnav > a:first-child,
  html body main.site-main .esp-topnav > a:first-child{ padding-left:0 !important; }
  html body article.profile .esp-topnav > a:last-child,
  html body main.site-main .esp-topnav > a:last-child{ padding-right:0 !important; }
}

/* TOGGLE-CENTER v1 — make .src-toggle absolutely positioned inside the
   H1 so JS can center it between name-end and search-start. The JS
   measures those two edges on page load and sets toggle.style.left. */
@media (min-width:601px){
  html body article.profile header.profile-header-wrap{
    position:relative !important;
  }
  }

/* BREADCRUMB-LEDE-OFFSET v1 — extra 4px gap above breadcrumb and above
   the first paragraph (profile-lede) for more breathing room. */
html body article.profile .esp-breadcrumbs,
html body main > .page-content .esp-breadcrumbs{
  margin-top:10px !important;
}
html body article.profile > p.profile-lede,
html body article.profile > p:first-of-type,
html body main > .page-content > p.profile-lede,
html body main > .page-content > p:first-of-type{
  margin-top:12px !important;
}

/* NO-SIDE-BORDERS-MOBILE v1 — kill the left/right vertical borders on
   all card containers at anything narrower than the 900px desktop tier
   (phone AND tablet). High-specificity selectors to beat both the
   HOME-SCIENTIST-UNIFY home-specific rule and the generic scientist
   border rule. */
@media (max-width:899px){
  html body article.profile,
  html body article.profile .site-branding,
  html body article.profile .esp-topnav,
  html body article.profile .esp-breadcrumbs,
  html body main.site-main > .page-content,
  html body main#content > .page-content,
  html body.home article.profile,
  html body.home main.site-main > .page-content > article.profile,
  html body.home main#content > .page-content > article.profile,
  html body.home main.site-main > .page-content article.profile,
  html body.home main#content > .page-content article.profile{
    border-left:0 !important;
    border-right:0 !important;
    border-left-width:0 !important;
    border-right-width:0 !important;
  }
}

/* MOBILE-WHITE v1 — no background tint anywhere at viewport < 900px.
   Entire page renders on plain white — no cream card, no grey margin. */
@media (max-width:899px){
  html, body{ background:#ffffff !important; }
  html body article.profile,
  html body .site-branding,
  html body .esp-topnav,
  html body .esp-breadcrumbs,
  html body article.profile header.profile-header-wrap,
  html body article.profile *,
  html body main.site-main > .page-content,
  html body main#content > .page-content,
  html body main.site-main > .page-content > article.profile,
  html body main#content > .page-content > article.profile,
  html body.home article.profile,
  html body.home main.site-main > .page-content,
  html body.home main#content > .page-content,
  html body.home main.site-main > .page-content article.profile,
  html body.home main#content > .page-content article.profile{
    background:transparent !important;
    background-color:transparent !important;
  }
}

/* H1-BREATHING v2 — override wp-custom-css's
   `html body article.profile .profile-header-wrap h1 { margin-top:0 !important }`
   at higher specificity (0,0,3,4). Applies to home + scientist pages. */
/* Pipe separator between items — same grey as the menu pipes */

/* Keep the h2 "Contents" consistent with other page H2 spacing */

/* CONTENTS-TOC-FORMAT v6 — same as v5, removed the redundant margin on
   the nested-ul ::before which was making the "studies | Ganzfeld" gap
   wider than the other pipe gaps. */
html body article.profile nav.toc-inline-list ul{
  padding:0 !important;
  margin:0 !important;
  list-style:none !important;
  display:inline !important;
}
html body article.profile nav.toc-inline-list li{
  padding:0 !important;
  margin:0 !important;
  list-style:none !important;
  display:inline !important;
}
html body article.profile nav.toc-inline-list li::after{
  color:#6b6760 !important;
}
html body article.profile nav.toc-inline-list li > ul::before{
  content:" | ";
  color:#6b6760;
}
html body article.profile nav.toc-inline-list > ul > li:last-child::after{
  content:"" !important;
}
html body article.profile nav.toc-inline-list li > ul > li:last-child::after{
  content:"" !important;
}

/* CONTENTS-TOC-SPACING v1 — 24px of breathing room above the Contents
   section so it isn't crushed against the preceding paragraph/block.
   Matches the section rhythm of other H2s on the page. */
html body article.profile nav.toc-inline-list{
  margin-top:24px !important;
}

/* TYPOGRAPHY v1 — Lora serif body + Inter sans headings/UI (Sample 5).
   Sitewide via high-specificity selectors. Italic/bold variants of Lora
   are loaded so emphasis styles render correctly. */
html body,
html body article.profile,
html body article.profile p,
html body article.profile li,
html body main > .page-content,
html body main > .page-content p,
html body main > .page-content li{
  font-family: "Lora", Georgia, "Times New Roman", serif !important;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Inter for headings, menu, breadcrumb, UI. */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body article.profile h1,
html body article.profile h2,
html body article.profile h3,
html body article.profile h4,
html body article.profile h5,
html body article.profile h6,
html body .esp-topnav,
html body .esp-topnav a,
html body .esp-breadcrumbs,
html body .esp-breadcrumbs a,
html body .esp-searchform,
html body .esp-searchform input,
html body .esp-searchform button,
html body .src-toggle,
html body .src-toggle label,
html body article.profile nav.toc-inline-list h2.toc-title,
html body article.profile nav.toc-inline-list a,
html body .page-header,
html body .hub-links-label,
html body .hub-link-buttons{
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -0.005em;
}

/* Keep emphasis (italic / bold) using Lora's proper italic + 600 weight */
html body article.profile em, html body article.profile i{
  font-family: "Lora", Georgia, serif !important;
  font-style: italic !important;
}
html body article.profile strong, html body article.profile b{
  font-family: "Lora", Georgia, serif !important;
  font-weight: 600 !important;
}

/* Tagline — keep the deliberate Georgia italic as a stylistic callback, or
   switch to Lora italic for full coherence. Going with Lora italic here. */
html body .esp-tagline,
html body .esp-tagline .esp-t1,
html body .esp-tagline .esp-t2,
html body .esp-tagline .esp-t3{
  /* TAGLINE-SANS v2: Inter + non-italic (matches the parent). */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-style: normal !important;
}

/* Content text size. Was 17px (BODY-SIZE v1); dropped to 15px on 2026-04-24
   at Rick's request — previewed side-by-side and chosen for more content
   above the fold. line-height anchored to 1.55 ratio (not fixed px) so the
   leading stays proportional if PIN-021 ever lets users scale up. */
html body article.profile p,
html body article.profile li,
html body main > .page-content p,
html body main > .page-content li{
  font-size: 15px !important;
  line-height: 1.55 !important;
}

/* TYPOGRAPHY-ENI-FIX v1 — the home page has an inline <style> block that
   sets `.eni-wrap { font-family: -apple-system, ... }`. That cascades to
   hundreds of inner elements that my earlier per-element overrides missed.
   Force Lora on .eni-wrap and descendants (body prose), Inter on any
   heading inside .eni-wrap. */
html body article.profile .eni-wrap,
html body article.profile .eni-wrap *{
  font-family: "Lora", Georgia, "Times New Roman", serif !important;
}
html body article.profile .eni-wrap h1,
html body article.profile .eni-wrap h2,
html body article.profile .eni-wrap h3,
html body article.profile .eni-wrap h4,
html body article.profile .eni-wrap h5,
html body article.profile .eni-wrap h6,
html body article.profile .eni-wrap .eni-alpha,
html body article.profile .eni-wrap .eni-alpha a,
html body article.profile .eni-wrap .eni-stat,
html body article.profile .eni-wrap summary,
html body article.profile .eni-wrap .eni-section-title,
html body article.profile .eni-wrap button{
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
/* Preserve mono stack for code-like tokens (empty catch) */
html body article.profile .eni-wrap code,
html body article.profile .eni-wrap kbd,
html body article.profile .eni-wrap pre,
html body article.profile .eni-wrap tt{
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
}

/* Also catch other home-page-specific wrappers that may have inline fonts */
html body article.profile .hub-links-label,
html body article.profile .hub-link-buttons,
html body article.profile .hub-link-buttons a,
html body article.profile .key-findings,
html body article.profile .key-findings *,
html body article.profile aside,
html body article.profile aside *{
  font-family: inherit !important;
}
/* Then ensure the default inherits from body (Lora for text, Inter for headings) */
html body article.profile .key-findings h2,
html body article.profile .key-findings h3,
html body article.profile aside h2,
html body article.profile aside h3,
html body article.profile .hub-links-label{
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* LINE-HEIGHT-UNIFY v1 — universal 1.55 ratio on body-like content,
   1.25 on headings. Kills the 1.45/1.65 inconsistency across the home
   page where .eni-stats, .eni-expand-row etc. had their own tight ratios. */
html body article.profile,
html body article.profile *,
html body main > .page-content,
html body main > .page-content *{
  line-height: 1.55 !important;
}
html body article.profile h1,
html body article.profile h2,
html body article.profile h3,
html body article.profile h4,
html body article.profile h5,
html body article.profile h6,
html body main > .page-content h1,
html body main > .page-content h2,
html body main > .page-content h3,
html body main > .page-content h4,
html body main > .page-content h5,
html body main > .page-content h6,
html body .esp-topnav,
html body .esp-topnav a,
html body .esp-breadcrumbs,
html body .esp-breadcrumbs a{
  line-height: 1.25 !important;
}
/* Tagline keeps its own rhythm (it's a compact 3-line block). */
html body .esp-tagline,
html body .esp-tagline .esp-t1,
html body .esp-tagline .esp-t2,
html body .esp-tagline .esp-t3{
  line-height: 1.3 !important;
}

/* HEADING-SCALE v1 — enforce a clean H1 → H2 → H3 → H4 size hierarchy
   sitewide. The Hello Elementor theme default gives H3 a larger
   font-size than H2 on this template, which inverts hierarchy and makes
   sub-section titles appear bigger than their parents. Unifies weights
   at 600 so nothing looks "lighter" than a deeper heading. */
html body article.profile h1,
html body main > .page-content h1,
html body h1{
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}
html body article.profile h2,
html body main > .page-content h2,
html body h2{
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em !important;
}
html body article.profile h3,
html body main > .page-content h3,
html body h3{
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}
html body article.profile h4,
html body main > .page-content h4,
html body h4{
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* HIDE-NONFUNCTIONAL-CHIPS v2 (home-scoped) — the `.eni-expand-row`
   on the home page shows 'Expand all / Collapse all / Sort' buttons
   that have no JS wired up there. On OTHER pages (notably
   /parapsychology/scientists/) the same row contains working
   buttons backed by eniExpandGroup() and eniToggleSort(). Scope
   the hide to body.home only. (2026-04-23 fix — v1 over-applied) */
html body.home article.profile .eni-expand-row,
html body.home .eni-expand-row{
  display: none !important;
}

/* HIDE-NONFUNCTIONAL-STATS v2 (home-scoped) — pill badges showing
   '95 scientists / 221 topic pages / 27 more in pipeline'.
   On the home page these look clickable but have no behavior —
   hide them there. On the Scientists index those same stats are
   informative and should remain visible. (2026-04-23 fix) */
html body.home article.profile .eni-stats,
html body.home article.profile .eni-stat,
html body.home .eni-stats,
html body.home .eni-stat{
  display: none !important;
}

/* CONTENTS-TOC-LINK-SIZE v1 — shrink the Contents-section linked text
   to 15px (2px smaller than the prior 17px) sitewide. Also scales the
   separator pipes to match so they don't look oversized next to the links. */
html body article.profile nav.toc-inline-list a,
html body article.profile nav.toc-inline-list li,
html body article.profile nav.toc-inline-list li::after,
html body main > .page-content nav.toc-inline-list a,
html body main > .page-content nav.toc-inline-list li,
html body main > .page-content nav.toc-inline-list li::after{
  font-size: 13px !important;
}
html body article.profile nav.toc-inline-list li > ul::before{
  font-size: 13px !important;
}

/* LOGO-MOBILE-BG-MASK v1 — INTERIM: current logo PNG has no alpha
   channel; its background is painted-in cream (#faf8f4). On mobile/tablet
   the card is white, so the logo's baked-in cream appears as a visible
   rectangle. Paint the logo's containing link cream so the PNG blends.
   Remove this rule once the logo is replaced with a transparent PNG. */
@media (max-width:899px){
  html body .site-branding .custom-logo-link,
  html body .site-branding .custom-logo{
    background:#faf8f4 !important;
  }
}

/* STYLE-BATCH-APR22 v1 — multiple small style changes Rick requested:
   1. Key-Findings box: drop all borders, keep rounded corners top+bottom
   2. Deeper-dives box: 6px shorter vertically (tighter margins)
   3. "TO TOP OF PAGE" link in footer nav: move up 30px  */

/* 1. Key-Findings — no border lines, fully rounded */
html body article.profile aside.key-findings{
  border:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-radius:10px !important;
}

/* 2. Deeper-dives — tighter vertical spacing (−6px total) */
html body article.profile .hub-links-label{
  margin-top:18px !important;  /* was 24 */
  margin-bottom:6px !important;  /* was 8 */
}
html body article.profile .hub-link-buttons{
  margin-bottom:14px !important;  /* was 18 */
}

/* 3. "TO TOP OF PAGE" link: bring it 30px closer to the content above */
html body article.profile nav/* TABLET-STACK-HEADER v1 (2026-04-23 morning) — iPad-portrait and
   other narrow-tablet viewports (601-1023px) were showing the Sources
   toggle and search form "all over the place" because the header
   flex-row wrapped on narrow widths while the TOGGLE-CENTER JS had
   already set an absolute `left` value based on desktop-layout
   assumptions. Solution: in the 601-1023px band, match the mobile
   layout — stacked, no absolute positioning. Desktop (1024+) keeps
   the JS-centered absolute toggle. Mobile (≤600) was already OK.
   Override happens AFTER the earlier TOGGLE-CENTER v1 rule so
   specificity + source-order both favor this one. */
@media (min-width:601px) and (max-width:1023px){
  html body article.profile header.profile-header-wrap{
    display:block !important;
  }
  html body article.profile header.profile-header-wrap h1,
  html body article.profile header.profile-header-wrap > h1{
    display:block !important;
    width:100% !important;
    padding-right:0 !important;
  }
  html body article.profile header.profile-header-wrap h1 > .src-toggle,
  html body article.profile header.profile-header-wrap h1 .src-toggle{
    position:static !important;
    display:block !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    margin:6px 0 0 0 !important;
    font-size:0.55rem !important;
    white-space:nowrap !important;
  }
  html body article.profile header.profile-header-wrap .esp-searchform,
  html body article.profile .esp-searchform{
    position:static !important;
    display:flex !important;
    margin:8px 0 0 0 !important;
    width:100% !important;
    max-width:100% !important;
    justify-content:flex-start !important;
  }
  html body article.profile .esp-searchform input[type="search"]{
    flex:1 1 auto !important;
  }
}


/* PHOTO-150x220 v1 — restored from spoke snapshot 2026-04-23 */

html body img.photo-150x220,
article.profile img.photo-150x220 {
  float:left !important;
  width:150px !important;
  height:220px !important;
  /* PHOTO-TOP-ALIGN v4 (2026-05-01) — 0 -> -6 top. v3 aligned to lede.top
     (y=247) but drop-cap top renders 6px higher (y=241) due to 61.2px
     ::first-letter font-size. Negative margin pulls portrait up to drop-cap
     top exactly. Probe confirms dropcap_top=241, was portrait_top=247. */
  margin:-6px 40px 20px 0 !important;
  object-fit:cover !important;
  background:#eee !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.18) !important;
  border:none !important;
  display:block !important;
  max-width:none !important;
}
@media (max-width:600px){
  article.profile img.photo-150x220 {
    float:none !important;
    margin:0 auto 16px auto !important;
    display:block !important;
  }
}


/* SNAPSHOT-RESTORE 2026-04-23 — restoring custom CSS lost from theme-mod (per spoke snapshot) */
/* Global title suppression */
.entry-title,
.page-title,
.wp-block-post-title,
h1.entry-title,
h1.page-title,
.entry-header{
  display:none !important;
}

/* Links */
a{
  color:#3f8fcb;
  text-decoration:none;
  transition:color .15s ease, text-decoration-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
a:hover,
a:focus{
  text-decoration:underline;
  text-underline-offset:.15em;
}
a:focus-visible{
  outline:2px solid #89cfff;
  outline-offset:2px;
}

/* Profile base typography */
html body .entry-content article.profile,
html body article.profile,
html body .entry-content [class*="profile--"],
html body [class*="profile--"]{
  line-height:1.45 !important;
}

/* Paragraph spacing */
html body .entry-content article.profile p,
html body article.profile p,
html body .entry-content [class*="profile--"] p,
html body [class*="profile--"] p{
  display:block !important;
  margin:0 0 10px 0 !important;
  padding:0 !important;
}

/* Header wrap float containment */
html body .entry-content .profile-header-wrap,
html body .profile-header-wrap{
  display:block !important;
  overflow:visible !important;
  clear:none !important;
}
html body .entry-content .profile-header-wrap p,
html body .profile-header-wrap p{
  clear:none !important;
  margin-top:0 !important;
}

/* Clearfix */
html body .entry-content .profile-header-wrap::before,
html body .entry-content .profile-header-wrap::after,
html body .profile-header-wrap::before,
html body .profile-header-wrap::after{
  content:"" !important;
  display:table !important;
}
html body .entry-content .profile-header-wrap::after,
html body .profile-header-wrap::after{
  clear:both !important;
}

/* Top author photo */
html body img.photo-150x220{
  float:left !important;
  width:150px !important;
  height:220px !important;
  margin:8px 30px 20px 20px !important;
  object-fit:cover !important;
  background:#eee !important;
  box-shadow:none !important;
  border:none !important;
  outline:1px solid rgba(0,0,0,.28) !important;
  outline-offset:-1px !important;
  display:block !important;
}

/* Topic icon */
html body img.topic-icon-150x150{
  float:left !important;
  width:150px !important;
  height:150px !important;
  margin:10px 30px 20px 20px !important;
  object-fit:contain !important;
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  display:block !important;
}

/* H1 inside profile header */

/* Header paragraph normalization */
html body .entry-content .profile-header-wrap p,
html body .profile-header-wrap p{
  clear:none !important;
  margin:0 0 16px 0 !important;
  overflow:visible !important;
}
html body .entry-content .profile-header-wrap p:first-of-type,
html body .profile-header-wrap p:first-of-type{
  clear:none !important;
  margin-top:0 !important;
}
html body .entry-content .profile-header-wrap p:last-of-type,
html body .profile-header-wrap p:last-of-type{
  margin-bottom:10px !important;
}

/* TOC clears floated image */
html body .entry-content article.profile nav[aria-label="Table of contents"],
html body article.profile nav[aria-label="Table of contents"],
html body .entry-content [class*="profile--"] nav[aria-label="Table of contents"],
html body [class*="profile--"] nav[aria-label="Table of contents"],
.profile-header-wrap nav[aria-label="Table of contents"],
.profile-header-wrap .toc,
.profile-header-wrap nav.toc{
  clear:both !important;
  padding-left:0 !important;
  margin-left:0 !important;
}

/* Lists */
html body .entry-content article.profile ul,
html body .entry-content article.profile ol,
html body article.profile ul,
html body article.profile ol,
html body .entry-content [class*="profile--"] ul,
html body .entry-content [class*="profile--"] ol,
html body [class*="profile--"] ul,
html body [class*="profile--"] ol{
  margin:0 !important;
  padding:0 0 16px 22px !important;
}
html body .entry-content article.profile li,
html body article.profile li,
html body .entry-content [class*="profile--"] li,
html body [class*="profile--"] li{
  margin:0 !important;
  padding:0 0 10px 0 !important;
}

/* Tighten references lists */
html body .entry-content article.profile h3+ol,
html body article.profile h3+ol,
html body .entry-content [class*="profile--"] h3+ol,
html body [class*="profile--"] h3+ol,
html body .entry-content article.profile h2+ol,
html body article.profile h2+ol,
html body .entry-content [class*="profile--"] h2+ol,
html body [class*="profile--"] h2+ol{
  margin:0 !important;
  padding:0 0 12px 22px !important;
}
html body .entry-content article.profile h3+ol>li,
html body article.profile h3+ol>li,
html body .entry-content [class*="profile--"] h3+ol>li,
html body [class*="profile--"] h3+ol>li,
html body .entry-content article.profile h2+ol>li,
html body article.profile h2+ol>li,
html body .entry-content [class*="profile--"] h2+ol>li,
html body [class*="profile--"] h2+ol>li{
  margin:0 !important;
  padding:0 0 6px 0 !important;
}

/* Headings */
html body .entry-content article.profile h2,
html body article.profile h2,
html body .entry-content [class*="profile--"] h2,
html body [class*="profile--"] h2{
  margin:24px 0 10px 0 !important;
}
html body .entry-content article.profile h3,
html body article.profile h3,
html body .entry-content [class*="profile--"] h3,
html body [class*="profile--"] h3{
  margin:20px 0 10px 0 !important;
}

/* Details and accordions */
html body .entry-content article.profile details,
html body article.profile details,
html body .entry-content [class*="profile--"] details,
html body [class*="profile--"] details{
  margin:10px 0 0 0 !important;
}
html body .entry-content article.profile summary,
html body article.profile summary,
html body .entry-content [class*="profile--"] summary,
html body [class*="profile--"] summary{
  cursor:pointer !important;
}

/* Entry content padding reset */
html body .entry-content{
  padding-left:0 !important;
  padding-right:0 !important;
  padding-top:0 !important;
}
.entry-content > :first-child{
  margin-top:0 !important;
  padding-top:0 !important;
  margin-block-start:0 !important;
}
.entry-content > :first-child > :first-child{
  margin-top:0 !important;
  padding-top:0 !important;
}
.entry-content > .wp-block-group:first-child,
.entry-content > .wp-block-post-content:first-child,
.entry-content > article.profile:first-child,
.entry-content > article.profile:first-child > .profile-header-wrap:first-child,
.entry-content > article.profile:first-child > .profile-header-wrap:first-child > h1:first-child{
  margin-top:0 !important;
  padding-top:0 !important;
}
.entry-content > :first-child h1:first-child,
.entry-content > :first-child h2:first-child,
.entry-content > :first-child p:first-child{
  margin-top:0 !important;
}

/* Procedure block */
.profile .procedure-steps{
  margin:12px 0 12px 0 !important;
  padding-left:60px !important;
  border-left:3px solid #e5e7eb !important;
}
.profile .procedure-steps p{
  margin:0 0 10px 0 !important;
}
.profile .procedure-steps p:last-child{
  margin-bottom:0 !important;
}

/* Long-page usability */
.profile section[id]{
  scroll-margin-top:80px;
}

/* Profile layout */
.profile{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  font-size:16.5px;
  line-height:1.55;
}
.profile section{
  margin-top:28px;
}
.profile h2{
  margin-top:32px !important;
}
.profile h3{
  margin-top:24px !important;
}
.profile a{
  text-decoration-thickness:1px;
}
.profile a.fn{
  padding:0 3px !important;
}
.profile-header-wrap p{
  max-width:720px;
}
.profile-header-wrap{
  display:block !important;
  clear:none !important;
  overflow:visible !important;
}
.profile-header-wrap::after{
  content:"";
  display:block;
  clear:both;
}

/* Footer spacer */
.footer-spacer{
  height:50px;
}

/* Key findings */
.profile .key-findings{
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:.95rem 1rem;
  margin:1rem 0 1.15rem 0;
  background:#f8fafc;
  clear:both;
}
.profile .key-findings__title,
.profile .key-findings h2{
  margin:0 0 .65rem 0 !important;
  font-size:1.05rem;
}
.profile .key-findings__list,
.profile .key-findings ul{
  margin:0 !important;
  padding:0 0 0 1.15rem !important;
}
.profile .key-findings__list li,
.profile .key-findings li{
  margin:0 !important;
  padding:0 0 .55rem 0 !important;
}
.profile .key-findings__note,
.profile .key-findings p{
  margin:.5rem 0 0 0 !important;
  padding:0 !important;
}

/* Footnote superscripts */
sup{
  display:inline !important;
}

/* Hub links label */
.hub-links-label,
article.profile .hub-links-label{
  display:block !important;
  margin:24px 0 8px 0 !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  color:#888 !important;
}
.hub-links-label strong,
article.profile .hub-links-label strong{
  font-weight:600 !important;
  color:#888 !important;
}

/* Hub link buttons — option B: compact filled tags */
.hub-link-buttons,
article.profile .hub-link-buttons{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin:0 0 18px 0 !important;
  padding:0 !important;
  list-style:none !important;
  clear:both !important;
}
.hub-link-buttons a,
article.profile .hub-link-buttons a{
  display:inline-flex !important;
  align-items:center !important;
  height:24px !important;
  padding:0 9px !important;
  font-size:12px !important;
  font-weight:400 !important;
  color:#444 !important;
  background:#ffffff !important;  /* RICK 2026-04-24: off-white, was #f0f0ee grey */
  border:0.5px solid #d8d6d0 !important;
  border-radius:5px !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  transition:background-color .12s ease, color .12s ease !important;
}
.hub-link-buttons a:hover,
.hub-link-buttons a:focus,
article.profile .hub-link-buttons a:hover,
article.profile .hub-link-buttons a:focus{
  background:#e4e4e4 !important;  /* RICK 2026-04-24: match off-white tone */
  color:#1b1b1b !important;
  text-decoration:none !important;
  box-shadow:none !important;
  transform:none !important;
}
.hub-link-buttons a:focus-visible,
article.profile .hub-link-buttons a:focus-visible{
  outline:2px solid #89cfff !important;
  outline-offset:2px !important;
}

/* TOC inline list */
.toc-inline-list{
  clear:both !important;
  margin:0 0 18px 0 !important;
  padding:0 !important;
}
.toc-inline-list .toc-title{
  margin:0 0 10px 0 !important;
}
.toc-inline-list ul{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.toc-inline-list li{
  display:inline !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.toc-inline-list li::after{
  content:" | ";
}
.toc-inline-list li:last-child::after{
  content:"";
}
.toc-inline-list a{
  display:inline !important;
  color:inherit !important;
  text-decoration:none !important;
  border-bottom:1px solid rgba(0,0,0,.25) !important;
  white-space:nowrap !important;
}
.toc-inline-list a:hover,
.toc-inline-list a:focus{
  text-decoration:none !important;
  border-bottom-color:rgba(0,0,0,.8) !important;
}

/* Deeper-dive accordion */
.profile details.dd,
article.profile details.dd{
  border:1px solid #e5e7eb !important;
  border-radius:10px !important;
  padding:0 !important;
  margin:.75rem 0 1rem 0 !important;
  background:#fff !important;
}
.profile details.dd > summary,
article.profile details.dd > summary{
  list-style:none !important;
  cursor:pointer !important;
  padding:.75rem .9rem !important;
  display:flex !important;
  align-items:center !important;
  gap:.6rem !important;
  font-weight:600 !important;
  margin:0 !important;
}
.profile details.dd > summary::-webkit-details-marker,
article.profile details.dd > summary::-webkit-details-marker{
  display:none !important;
}
/* DD-PILL-RESTORE v2 (2026-04-25) — pill kept; redundancy will be killed
   on the OTHER side by stripping "Deeper dive:" prefix from summary text
   (DD-DEDUP-SWEEP v1 + rpc_generator post-pass). */
.profile details.dd > summary::before,
article.profile details.dd > summary::before{
  content:"Deeper dive" !important;
  font-size:.8em !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
  padding:.12rem .45rem !important;
  border-radius:999px !important;
  border:1px solid #e5e7eb !important;
  opacity:.85 !important;
}
.profile details.dd > summary::after,
article.profile details.dd > summary::after{
  content:"▸" !important;
  margin-left:auto !important;
  font-size:1.1em !important;
  transition:transform 150ms ease !important;
  opacity:.75 !important;
}
.profile details.dd[open] > summary::after,
article.profile details.dd[open] > summary::after{
  transform:rotate(90deg) !important;
}
.profile .dd__body{
  padding:0 .9rem .9rem .9rem !important;
}
/* DD-SUMMARY-SANS 2026-05-02 — Rick directive: keep the button/pill label
   ("Deeper dive: ...") in Inter sans (UI affordance register); revert the
   body prose inside .dd__body to inherited Lora serif (matches surrounding
   article body). Replaces the broader DD-SANS v2 block (2026-04-25) which
   forced sans on both surfaces and read as off. */
.profile details.dd > summary,
article.profile details.dd > summary{
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Readable link pill */
.profile a.read-link{
  text-decoration:none;
  font-weight:600;
  padding:.12rem .4rem;
  border:1px solid #e5e7eb;
  border-radius:8px;
  white-space:nowrap;
}
.profile a.read-link:hover{
  text-decoration:underline;
}

/* Article-level cleanup */
article.profile{
  line-height:1.45;
}
article.profile p{
  display:block;
  margin:0 0 16px 0;
}
article.profile h1{
  margin:0 0 14px 0;
}
article.profile h2{
  margin:24px 0 10px 0;
  font-size:1.3rem !important;
}
article.profile h3{
  margin:20px 0 10px 0;
}
article.profile ul,
article.profile ol{
  margin:0 0 16px 22px;
  padding:0;
}
article.profile li{
  margin:0 0 10px 0;
}
article.profile li p{
  margin:0 0 10px 0;
}
article.profile nav[aria-label="Table of contents"]{
  clear:both;
}
article.profile nav ul,
article.profile nav ol{
  margin:0 0 12px 18px;
}
article.profile nav li{
  margin:0 0 6px 0;
}
article.profile h3 + ol{
  margin:0 0 12px 22px;
}
article.profile h3 + ol > li{
  margin:0 0 6px 0;
}
article.profile .footer-spacer{
  height:50px;
}
article.profile a.fn{
  display:inline;
  white-space:nowrap;
}
article.profile .profile-header-wrap{
  display:block;
}
article.profile .profile-photo{
  float:left;
  width:150px;
  height:220px;
  margin:10px 30px 20px 20px;
  object-fit:cover;
  background:#eee;
}
article.profile .header-clear{
  clear:both;
}
article.profile .hub-links-label{
  margin:0 0 10px 0;
}
article.profile .toc-title{
  margin:0 0 10px 0;
}
article.profile .spoke-title{
  margin:0 0 12px 0;
}
article.profile .page-footer{
  text-align:center;
  margin:0;
}
article.profile .page-updated{
  text-align:center;
  margin:10px 0 0 0;
}

/* Mobile */
@media (max-width:600px){
  article.profile .profile-header-wrap h1,
  article.profile .profile-header-wrap .spoke-title{
    text-align:center !important;
  }
  article.profile .photo-150x220{
    float:none !important;
    margin:0 auto 16px auto !important;
    display:block !important;
  }
  article.profile .spoke-title{
    clear:both !important;
  }
}

/* Site branding */
.custom-logo{
  display:block;
}
.site-branding{
  max-width:760px;
  margin:0 auto;
  padding-left:0;
}
.site-info{
  text-align:center;
}

@media (min-width:601px){
  body .site-branding,
  body.wp-theme-hello-elementor .site-branding,
  #site-header .site-branding{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
  }
  body .site-branding .custom-logo-link{
    display:inline-block !important;
    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;
  }
  body .site-branding .custom-logo{
    max-width:280px !important;
  }
  .esp-tagline{
    flex:0 0 auto !important;
    width:auto !important;
  }
}

@media (min-width:601px){
  /* Force all four stacked blocks to the same 900px width and
     zero vertical gap between them, so they read as one unit. */
  body .site-branding,
  body .esp-topnav,
  body .esp-breadcrumbs,
  body article.profile{
    max-width:900px !important;
    width:900px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    border-radius:0 !important;
    box-sizing:border-box !important;
  }
  body .site-branding{
    padding:12px 24px !important;
    justify-content:flex-start !important;
  }
  body .esp-topnav{
    border-top:1px solid #ebe4d7 !important;
    padding-top:8px !important;
  }
  body .esp-breadcrumbs{
    padding-top:6px !important;
    padding-bottom:4px !important;
  }
  body article.profile{
    border-radius:0 0 6px 6px !important;
    margin-bottom:1.5rem !important;
  }
  /* First block gets the rounded top; last keeps rounded bottom. */
  body .site-branding{
    border-radius:6px 6px 0 0 !important;
  }
}
		

/* fn-back mobile bump */
.page .entry-header .entry-title,header.entry-header h1.entry-title,h1.entry-title{display:none !important;}.profile a.hub-ext,article.profile a.hub-ext{color:inherit !important;text-decoration:none !important;text-decoration-line:none !important;background-image:none !important;box-shadow:none !important;border-bottom:1px dotted #b8b3a8 !important;transition:border-color 0.2s;}article.profile a.hub-ext:hover{border-bottom:1px dotted #1a1814 !important;color:inherit !important;}article.profile a.hub-ext:visited{color:inherit !important;}article.profile sup.fn-sup{display:none !important;}article.profile.show-sources sup.fn-sup{display:inline !important;}.src-toggle{display:inline-flex;align-items:center;gap:0.6em;font-size:0.28em;margin-left:0.9em;color:#6b6760;letter-spacing:0.05em;text-transform:uppercase;vertical-align:middle;font-weight:400;line-height:1;}.src-toggle label{cursor:pointer;display:inline-flex;align-items:center;gap:0.25em;}.src-toggle input[type=radio]{margin:0;accent-color:#8b6914;transform:scale(0.9);vertical-align:middle;}#references a.fn-back,details#references a.fn-back,article.profile a.fn-back{font-size:1.3em !important;margin-left:0.45em !important;}@media (max-width:1024px){#references a.fn-back,details#references a.fn-back,article.profile a.fn-back{font-size:1.5em !important;}}@media (max-width:600px){.src-toggle{font-size:0.35em;margin-left:0.5em;}}
/* BOTTOM-SPOKE-ARRAY-GAP v3 (2026-04-24 evening: +50px gap between bottom Sources details and the Deeper-dives spoke array on spokes/books per Rick). — Rick 2026-04-24: cut 40px between bottom references and the Deeper-dives spoke array. Two cases: spokes/books have <details> directly followed by .hub-links-label; hub inserts <div class="footer-spacer"> between them. */
details + .hub-links-label,
article.profile details + .hub-links-label,
html body article.profile details + .hub-links-label { margin-top:50px !important; }
.footer-spacer + .hub-links-label,
article.profile .footer-spacer + .hub-links-label,
html body article.profile .footer-spacer + .hub-links-label { margin-top:-40px !important; }

/* KEY-FINDINGS-WHITE-BG v1 — Rick 2026-04-24: Key Findings section background should be white, not transparent. Placed after the 'transparent' group rule to override. */
html body aside.key-findings,
html body article.profile aside.key-findings,
html body article.profile .key-findings,
html body article.profile section.key-findings { background:#ffffff !important; }

/* ARTICLE-BODY-WHITE-BG v2 — Rick 2026-04-24: article.profile card stays white on every viewport. The wrapper selectors moved into the mobile-only variant below (they were painting over PAGE-BG-DARK v2 black on desktop). */
html body article.profile { background:#ffffff !important; }
@media (max-width:899px){
  html body main > .page-content,
  html body main > .entry-content,
  html body.home main > .page-content { background:#ffffff !important; }
}

/* KF-BORDER-STRIP v1 — Rick 2026-04-24: kill black horizontal lines above/below Key Findings section. Overrides the earlier '.profile .key-findings { border:1px solid #e5e7eb }' rule. Covers both aside AND section variants of Key Findings container. */
html body article.profile aside.key-findings,
html body article.profile section.key-findings,
html body article.profile .key-findings,
html body .profile .key-findings {
  border:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  box-shadow:none !important;
}

/* MAIN-SITE-WHITE v2 — was v1 unconditional white; now gated to <=899px so desktop (PAGE-BG-DARK v2) can paint body black and let wrappers stay transparent. Mobile/tablet retain the single-white-canvas look. */
@media (max-width:899px){
  html body main.site-main,
  html body main.site-main > .page-content,
  html body main.site-main > .entry-content,
  html body main.site-main > div,
  html body div.page-content,
  html body div.entry-content,
  html body #primary,
  html body #content,
  html body.page main,
  html body.page .page-content { background:#ffffff !important; }
}

/* SKEPTIC-CLAIM-HEADER-SIZE v1 — Rick 2026-04-24: h3.skeptic-claim (skeptical-critiques section headers) are long-sentence claims that look aggressive at the article-wide 19px. Drop to 17px (-2px) specifically on this class. */
html body article.profile h3.skeptic-claim,
html body main > .page-content h3.skeptic-claim,
html body h3.skeptic-claim {
  font-size: 17px !important;
  line-height: 1.4 !important;
}

/* FN-SANSSERIF v1 — Rick 2026-04-24: footnote markers rendered in the serif body font look weird next to plain prose numbers. Force Inter (same as breadcrumbs) and drop the underline so the [N] just reads as a clean superscript number. */
html body a.fn,
html body sup.fn-sup a.fn,
html body sup a.fn,
html body article.profile a.fn {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
}

/* PAGE-BG-DARK v2 (2026-04-24) — Desktop only (>=900px). Paint the page
   area outside the 900px content card solid black to reduce glare from
   large cream/white margins. Wrappers (main, #content, .page-content,
   .entry-content) go transparent on pages with article.profile so the
   body's black bg shows through. The card (article.profile + its
   stacked siblings .site-branding/.esp-topnav/.esp-breadcrumbs) gets a
   1px white box-shadow on left+right — sits just outside the existing
   1px black vertical borders, visually floating the card on black.
   Tablet (601-899) stays mobile-white; phone (<=600) unchanged. */
@media (min-width:900px){
  html,body{background:#000000 !important;}
  html body main:has(article.profile),
  html body main.site-main:has(article.profile),
  html body main#content:has(article.profile),
  html body #content:has(article.profile),
  html body main:has(article.profile) > .page-content,
  html body main:has(article.profile) > .entry-content{
    background:transparent !important;
  }
  html body article.profile,
  html body .site-branding,
  html body.wp-theme-hello-elementor .site-branding,
  html body #site-header .site-branding,
  html body header#site-header .site-branding,
  html body .esp-topnav,
  html body .esp-breadcrumbs{
    box-shadow:none !important;
  }
}


/* TOPNAV-DISABLED v1 (2026-04-24) — nav items whose URL is '#' are
   placeholders for sections not yet built. Leave them visible so the
   overall menu structure is clear, but un-click and mute the label. */
html body .esp-topnav a[href="#"],
html body .esp-topnav a[href=""],
html body .esp-topnav a:not([href]){
  pointer-events:none !important;
  cursor:default !important;
  color:#a8a095 !important;
  opacity:.75 !important;
}

/* ═══ EXPERT-OVERRIDES START — managed by promote_expert_overrides.py ═══ */
/* ════════════════════════════════════════════════════════════════════════
   EXPERT-LEVEL LOOK & FEEL UPGRADES — proposed 2026-04-25
   Each rule is on its own subsection with a one-line rationale.
   ════════════════════════════════════════════════════════════════════════ */

/* A1 — OPTIMAL READING MEASURE (cap body text at ~68ch).
   Long lines tire the eye after ~75 characters; below 50 fragment cadence.
   Applied only to body p/li to preserve full-width tables & figures. */
article.profile > p,
article.profile > section > p,
article.profile > section > ul > li,
article.profile > section > ol > li {
  /* PROSE-CENTER-REVERT 2026-04-26 — back to flush-left. Centering
     disrupts the eye's left-edge anchor for sustained reading; the
     right-gutter problem will be solved by populating that gutter with
     marginalia (Tufte-style) in a follow-up design pass. */
  max-width: 68ch;
}

/* A2 — LEDE EMPHASIS: first paragraph after H1 gets larger size + looser
   leading. Signals "this is the orienting summary." Old-school house-style
   move from the New Yorker / NYRB. */
article.profile > section:first-of-type > p:first-of-type,
article.profile header.profile-header-wrap + p,
article.profile > p:first-of-type {
  font-size: 1.08em;
  line-height: 1.65;
  color: #2a2a2a;
}

/* A3 — DROP CAP on the lede first letter. Restored 2026-04-25 — Rick
   likes them. SEO-safe: ::first-letter is a CSS pseudo-element; the
   actual text is unchanged. Search engines + screen readers see the
   plain text. Gated to ≥720px so mobile doesn't get cramped first
   letter. */
@media (min-width: 720px) {
  article.profile > section:first-of-type > p:first-of-type::first-letter,
  article.profile > p:first-of-type::first-letter,
  body.page main .page-content > p:first-of-type::first-letter,
  body.page main .entry-content > p:first-of-type::first-letter {
    float: left;
    font-family: 'Lora','Georgia',serif;
    font-size: 3.6em;
    line-height: 0.84;
    margin: 0.04em 0.12em -0.08em 0;
    color: #8a6914;
    font-weight: 600;
  }
}

/* A4 — REFERENCES HANGING INDENT. Standard APA presentation; makes the
   year scannable down the left edge. Combined with year highlighting (A5)
   below for fast visual lookup. */
details#references ol,
details.src-toggle ol,
article.profile ol[id*="references"] {
  padding-left: 2.6em;
}
details#references ol > li,
details.src-toggle ol > li,
article.profile ol[id*="references"] > li {
  text-indent: -2.6em;
  padding-left: 2.6em;
  margin-bottom: 0.55em;
  line-height: 1.5;
}

/* A5 — REFERENCE YEAR ACCENT. The (YYYY) parenthetical in each <li>
   gets gold tint via a CSS string-match attribute selector. Pure CSS,
   no rendering changes. */
details#references li,
details.src-toggle li {
  font-feature-settings: "onum" 1;  /* old-style numerals — scholarly */
}

/* A6 — TIGHTER LEADING ON SOURCES. Compact list reads as data, not prose. */
details#references {
  font-size: 0.94em;
}

/* ──────────────────────────────────────────────────────────────────────
   B. HIERARCHY
   ────────────────────────────────────────────────────────────────────── */

/* B1 — SECTION DIVIDERS via top-margin + gold rule on H2.
   Gives the page a clearer reading rhythm without heavyweight borders. */
article.profile > section > h2,
article.profile h2.spoke-title {
  margin-top: 2.4em;
  padding-top: 1.0em;
  border-top: 1px solid #e3d6a8;
  letter-spacing: 0.01em;
}
/* Don't divide the very first H2 (already follows the lede with whitespace) */
article.profile > section:first-of-type > h2:first-child,
article.profile > h2:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

/* B2 — ANCHOR PERMALINKS on hover. § symbol appears next to H2/H3 when
   hovered; muted gold; clicking the heading itself jumps to that section.
   Pure CSS, no JS. Reveals on hover so it's not visually noisy. */
article.profile section[id] > h2,
article.profile section[id] > h3 {
  position: relative;
}
article.profile section[id] > h2::after,
article.profile section[id] > h3::after {
  content: " §";
  color: #c2a84e;
  opacity: 0;
  font-weight: normal;
  margin-left: 0.25em;
  transition: opacity 0.18s ease;
}
article.profile section[id] > h2:hover::after,
article.profile section[id] > h3:hover::after {
  opacity: 0.7;
}

/* B3 — TOC ACTIVE STATE via :target. When user clicks a TOC link, the
   matching section's TOC entry gets gold accent. Limited (only fires on
   the clicked entry, not on scroll position) — scroll-spy needs JS. */
nav.toc-inline-list a:target,
article.profile section:target > h2 {
  color: #6e5710;
}

/* B4 — BLOCKQUOTE TYPOGRAPHY. Gold left-rule, indent, italic body. */
article.profile blockquote {
  border-left: 3px solid #c2a84e;
  padding: 0.4em 0 0.4em 1.2em;
  margin: 1.2em 0;
  color: #3a3429;
  font-style: italic;
}

/* ──────────────────────────────────────────────────────────────────────
   C. INTERACTION
   ────────────────────────────────────────────────────────────────────── */

/* C1 — SMOOTH SCROLL for in-page anchor jumps (TOC, citations).
   Native, no JS. Respects prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* C2 — VISIBLE FOCUS RINGS for keyboard nav. WCAG 2.1 AAA requires
   focus-visible to be obvious. Gold outline matches the brand accent. */
article.profile a:focus-visible,
nav a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #c2a84e;
  outline-offset: 2px;
  border-radius: 2px;
}

/* C3 — CITE ANCHOR HOVER. The `[1]` superscripts get gold underline +
   subtle scale transition. Communicates "this is interactive." */
article.profile sup a[href^="#R"],
article.profile a[href^="#R"]:not(.fn-back) {
  text-decoration: none;
  color: #5a4718;
  background: rgba(194,168,78,0.10);
  padding: 0 2px;
  border-radius: 2px;
  transition: background 0.15s, color 0.15s;
}
article.profile sup a[href^="#R"]:hover,
article.profile a[href^="#R"]:not(.fn-back):hover {
  background: rgba(194,168,78,0.28);
  color: #2a2010;
}

/* C4 — FN-BACK ARROW polish. Already a project-level rule; this just
   adds a hover-emerge transition for delight. */
article.profile a.fn-back {
  transition: color 0.15s, transform 0.15s;
}
article.profile a.fn-back:hover {
  color: #8a6914;
  transform: translateY(-1px);
}

/* C5 — TOC LINK HOVER. Subtle gold tint without underline noise. */
nav.toc-inline-list a {
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  padding: 1px 4px;
  border-radius: 2px;
}
nav.toc-inline-list a:hover {
  color: #8a6914;
  background: rgba(194,168,78,0.12);
}

/* C6 — DEEPER-DIVE accordion polish: subtle hover on the summary,
   serif typeface for the summary text + body, transition on hover.
   Per Rick 2026-04-25: serif gives the deeper-dive button labels a
   scholarly footnote-marker feel that distinguishes them from chrome. */
details.dd > summary,
details.dd > summary > * {
  font-family: 'Lora','Georgia',serif !important;
  letter-spacing: 0;
  transition: background 0.15s;
}
details.dd > summary:hover {
  background: rgba(194,168,78,0.10);
}
/* C6b — body of the deeper-dive accordion: serif too for cohesion */
details.dd .dd__body,
details.dd .dd__body p,
details.dd .dd__body li {
  font-family: 'Lora','Georgia',serif;
}

/* C7 — PILLS: sans-serif + true white background per Rick 2026-04-25.
   The site's own CSS currently defaults pills to Lora serif AND a
   #f0f0ee off-white background (latent wp-custom-css shadowing
   regression — separate fix needed sitewide). Forcing both here so
   the preview shows the intended look. */
html body article.profile .hub-link-buttons,
html body article.profile .hub-link-buttons a,
html body article.profile .hub-link-buttons a:link,
html body article.profile .hub-link-buttons a:visited {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background: #ffffff !important;
}

/* ──────────────────────────────────────────────────────────────────────
   D. POLISH (small but felt)
   ────────────────────────────────────────────────────────────────────── */

/* D1 — Body text rhythm: bump line-height to 1.6 for long-form
   readability, but ONLY on prose elements. Button bars + footer-nav
   keep their compact height (otherwise the bottom .hub-link-buttons
   grow tall enough to collide with the -30px-margin'd footer-nav). */
article.profile > p,
article.profile > section > p,
article.profile > section > ul,
article.profile > section > ol,
article.profile > section > div > p,
article.profile blockquote {
  line-height: 1.6;
}

/* D2 — KEY FINDINGS box: more inviting. Soft gold tint, no borders. */
article.profile aside.key-findings {
  background: linear-gradient(180deg, rgba(255,250,232,0.9) 0%, rgba(255,247,220,0.5) 100%);
  border-radius: 4px;
  padding: 1em 1.2em;
}

/* D3 — PORTRAIT image: subtle warm shadow + slight rounding.
   Gives it a printed-photo feel without going full skeuomorph. */
article.profile img.photo-150x220 {
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(70,55,30,0.15),
              0 0 0 1px rgba(140,110,50,0.10);
}

/* D4 — SELECTION color matches brand. */
::selection {
  background: rgba(194,168,78,0.35);
  color: #1a1308;
}

/* D4b — BOTTOM-NAV GAP FIX (latent layout bug exposed during this preview):
   the existing site rule pulls .footer-nav up with margin-top: -30px,
   but the actual .hub-link-buttons row height (144px when wrapping at
   the current container width) makes that -30px pull cause a 16px
   overlap. Reset to a clean positive gap so the To-Top / Hub / Home nav
   sits cleanly below the spoke buttons. */
article.profile .hub-link-buttons + style + nav.footer-nav,
article.profile nav.footer-nav,
article.profile .footer-nav {
  margin-top: 1.4em !important;
}

/* ════════════════════════════════════════════════════════════════════
   F. HEADER REDESIGN (Option 3 horizontal centered + clock rotation)
   Rick approved 2026-04-25 from the 10-option gallery. SVG ψ-in-circle
   mark + Inter wordmark + SVG-path tagline, centered as one unit.
   ════════════════════════════════════════════════════════════════════ */

/* F1 — Hide the existing PNG logo; we replace via JS-injected SVG mark. */
.site-branding .custom-logo-link img.custom-logo,
.site-branding .esp-tagline { display: none !important; }

/* F2 — Center the .site-branding contents as a single horizontal unit.
   Match all the existing high-specificity selectors so we win on
   equal-specificity source-order. Also `margin: 0 auto` so the block
   itself centers within its parent on pages without an article-card
   constraint (homepage, scientists-index, etc.). */
html body article.profile > .site-branding,
html body article.profile > header.site-branding,
html body article.profile .site-branding,
html body main > .page-content > .site-branding,
html body main > .page-content > header.site-branding,
html body .site-branding,
html body header.site-branding,
body.wp-theme-hello-elementor .site-branding,
body.wp-theme-hello-elementor header.site-branding,
header.site-branding,
.site-branding {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 32px !important;
  column-gap: 32px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background-color: #fdfcf8 !important;
  background: #fdfcf8 !important;
  border: 0 !important;
  box-shadow: inset 0 -1px 0 rgb(227,214,168) !important; /* UNDERLINE-GOLD-MATCH 2026-04-27: was rgba(140,110,50,0.18) which read as grey on cream. Now solid rgb(227,214,168) matching .ctx-inner border-bottom — symmetric gold horizontals above + below the top items zone. */
  border-bottom: 0 !important;
  flex-wrap: nowrap !important;
  /* STICKY: header pinned to top of viewport on scroll. The .esp-topnav
     and breadcrumb stay in document flow (NOT sticky) — Rick 2026-04-25. */
  position: sticky !important;
  top: 0 !important;
  z-index: 99996 !important;
}
/* Admin-bar offset for sticky header */
body.admin-bar header.site-branding,
body.admin-bar .site-branding { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar header.site-branding,
  body.admin-bar .site-branding { top: 46px !important; }
}
@media (min-width: 601px) {
  html body .site-branding,
  body.wp-theme-hello-elementor .site-branding {
    gap: 32px !important;
    column-gap: 32px !important;
  }
}

/* F3 — The .custom-logo-link becomes the mark+wordmark container. */
html body .site-branding .custom-logo-link,
html body header.site-branding .custom-logo-link {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 32px 0 0 !important;
  border-right: 0 !important;        /* MENU-LOGO-BORDER-KILL 2026-05-01: was 1px solid #d4c188 — removed when PNG logo replaced separate wordmark span + tagline-svg, since PNG embeds both and the separator now falls visually inside the tagline area */
  width: auto !important;
  max-width: none !important;
  height: auto !important;
}
html body .site-branding .custom-logo-link > * {
  flex: 0 0 auto !important;
}

/* F4 — SVG mark (ψ in thin gold circle) */
.site-branding #opt3-mark {
  display: inline-block !important;
  width: 56px !important;
  height: 56px !important;
  flex-shrink: 0 !important;
}

/* F5 — Wordmark — Inter sans bold */
.site-branding #opt3-wordmark {
  font-family: 'Inter','-apple-system','Segoe UI',sans-serif !important;
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  color: #2a2010 !important;
  letter-spacing: -0.025em !important;
  line-height: 1 !important;
}

/* F6 — Tagline rendered as inline SVG (precision typographic control) */
.site-branding #opt3-tagline-svg {
  display: block !important;
  height: auto !important;
  width: 560px !important;
  flex-shrink: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   G. MOBILE RESPONSIVE — header + context bar tuned for narrow screens
   ════════════════════════════════════════════════════════════════════ */

/* G1 — Header: at <900px, stack mark+wordmark above the SVG tagline.
   At <600px, hide the SVG tagline entirely (keep mark + wordmark only).
   The aria-label still serves screen readers when SVG is hidden. */
@media (max-width: 899px) {
  html body main > .page-content > .site-branding,
  html body .site-branding {
    flex-wrap: wrap !important;
    gap: 12px !important;
    column-gap: 12px !important;
    padding: 14px 18px !important;
  }
  .site-branding #opt3-tagline-svg {
    width: 100% !important;
    max-width: 480px !important;
  }
  html body .site-branding .custom-logo-link {
    border-right: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 599px) {
  .site-branding #opt3-tagline-svg { display: none !important; }
  .site-branding #opt3-mark { width: 44px !important; height: 44px !important; }
  .site-branding #opt3-wordmark { font-size: 1.5rem !important; }
}

/* G2 — Context bar: tighter padding + truncate section name on mobile.
   Hide secondary controls (permalink, cite buttons) at narrow widths;
   keep only Sections dropdown + section name + trust signal. */
@media (max-width: 899px) {
  #section-indicator .ctx-inner { padding: 0 12px !important; gap: 10px !important; }
  #section-indicator .ctx-trust { display: none !important; }
  #section-indicator .ctx-btn[data-action="permalink"] { display: none !important; }
}
@media (max-width: 599px) {
  #section-indicator { font-size: 0.66rem !important; }
  #section-indicator .ctx-btn[data-action="cite-toggle"] {
    padding: 3px 6px !important;
    font-size: 0.62rem !important;
  }
  #section-indicator .si-name {
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   H. FOOTER POLISH — match the typographic register of the new header
   ════════════════════════════════════════════════════════════════════ */

/* H1 — .footer-nav (To Top / Hub / Home strip): Inter sans, tracked,
   muted gold-on-cream pills. Currently neutral grey; bring into the
   gold palette consistent with header. */
html body .footer-nav,
html body article.profile nav.footer-nav {
  margin-top: 1.6em !important;
  gap: 0.8rem !important;
}
html body .footer-nav a,
html body article.profile nav.footer-nav a {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #6e5710 !important;
  border: 1px solid rgba(194,168,78,0.5) !important;
  padding: 0.4rem 1rem !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  background: transparent !important;
  font-weight: 500 !important;
  transition: color 0.18s, border-color 0.18s, background 0.18s !important;
}
html body .footer-nav a:hover,
html body article.profile nav.footer-nav a:hover {
  color: #1a1308 !important;
  border-color: #8a6914 !important;
  background: rgba(194,168,78,0.06) !important;
}

/* H2 — Page-bottom Last updated / Copyright / Disclaimer lines:
   tighter typography, scholarly muted, separated by hairline rule. */
html body article.profile > p:has(small),
html body main .page-content > p:has(small) {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  color: #8a7d54 !important;
  letter-spacing: 0.02em !important;
}
html body article.profile > p:has(small):first-of-type,
html body main .page-content > p:has(small):first-of-type {
  margin-top: 1.4em !important;
  padding-top: 0.8em !important;
  border-top: 1px solid rgba(194,168,78,0.3) !important;
}

/* ════════════════════════════════════════════════════════════════════
   I. PRINT STYLESHEET — academic readers print pages. Strip chrome,
   maximize ink-economy + content fidelity. Citations preserved.
   ════════════════════════════════════════════════════════════════════ */
@media print {
  /* Hide ambient chrome */
  #reading-progress, #section-indicator,
  .esp-topnav, .esp-breadcrumbs, .footer-nav,
  .hub-link-buttons, .hub-links-label, .footer-spacer,
  .src-toggle, .pull-quote::before, .pull-quote::after,
  .ctx-toast, button {
    display: none !important;
  }
  /* Body becomes printable: white bg, black text, no shadows */
  html, body, main, article, article.profile {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Lora', 'Georgia', serif !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
  }
  /* Header: keep just the wordmark + tagline as title page */
  .site-branding {
    border-bottom: 1px solid #000 !important;
    margin-bottom: 1em !important;
    padding-bottom: 0.5em !important;
    page-break-after: avoid !important;
  }
  /* Headings: larger, with avoid-break-after */
  h1 { font-size: 18pt !important; page-break-after: avoid !important; }
  h2 { font-size: 14pt !important; page-break-after: avoid !important; }
  h3 { font-size: 12pt !important; page-break-after: avoid !important; }
  /* Reveal Sources accordion (always-open in print) */
  details, details[open] { display: block !important; }
  details > summary { font-weight: bold !important; font-size: 12pt !important;
                      cursor: default !important; list-style: none !important; }
  details > summary::-webkit-details-marker { display: none !important; }
  /* Cite anchors print as raised numerals; refs print as full APA list */
  sup a[href^="#R"] { color: #000 !important; text-decoration: none !important;
                       font-size: 0.78em !important; }
  /* URLs visible in print after links so reader can re-find sources */
  article.profile a.hub-ext::after,
  details#references a::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #444;
    word-break: break-all;
  }
  /* Page-break hints */
  section { page-break-inside: avoid; }
  blockquote, .pull-quote { page-break-inside: avoid; }
  img { max-width: 100% !important; page-break-inside: avoid !important; }
  /* Footer last-updated stays as small print */
  article.profile > p:has(small) { font-size: 8pt !important; color: #555 !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   E. STATE-OF-THE-ART KITCHEN-SINK (Rick 2026-04-25)
   Each upgrade is grounded in published research. Per-rule rationale below.
   "We can always take furniture out." — Rick
   ════════════════════════════════════════════════════════════════════════ */

/* E1 — OFF-WHITE BACKGROUND. Pure #fff fatigues the retina during long
   reads (Tinker & Paterson 1942; replicated NYT Magazine, Atlantic, Apple
   Books). #fdfcf8 is paper-warm without going sepia. */
/* E1-FIX 2026-04-26 — html, body REMOVED from this selector. Painting them cream defeated PAGE-BG-DARK v2 (which paints html/body #000 on desktop ≥900px). After this fix, on desktop html/body correctly fall through to PAGE-BG-DARK v2 black; on mobile/tablet they fall through to pre-EXPERT white rules. Per feedback_cross_origin_css_cascade + feedback_no_speculative_css_layers. */
main.site-main, article.profile, div.page-content {
  background-color: #fdfcf8 !important;
}

/* E2 — VARIABLE-FONT OPTICAL SIZING. Lora variable face adjusts serif
   stroke weight by render size; thinner serifs at 13px, fuller at 28px.
   OpenType 1.8 spec, ~7% legibility gain at body sizes. */
article.profile, article.profile * {
  font-optical-sizing: auto;
}

/* E3 — MODULAR TYPE SCALE on 1.333 ratio (perfect-fourth, Tschichold).
   Body 17px → H4 19, H3 22, H2 28, H1 36. Visually harmonic.
   APPLIED SITEWIDE 2026-04-25 — every selector group below covers ALL
   live page templates (scientist hubs, homepage, indexes, books, papers,
   etc.). Each rule matches the same high-specificity selectors the
   existing site CSS uses, so we win on equal-specificity source-order. */
html body article.profile,
html body main .page-content,
html body main .entry-content,
html body main > .page-content { font-size: 17px !important; }

html body article.profile p,
html body article.profile li,
html body main > .page-content p,
html body main > .page-content li,
html body main .page-content p,
html body main .page-content li,
html body main .entry-content p,
html body main .entry-content li {
  font-size: 17px !important; line-height: 1.6 !important;
}

html body article.profile h4,
html body article.profile section > h4,
html body main > .page-content h4,
html body main .page-content h4,
html body main .entry-content h4 { font-size: 1.125rem !important; }

html body article.profile h3,
html body article.profile section > h3,
html body main > .page-content h3,
html body main .page-content h3,
html body main .entry-content h3 { font-size: 1.296rem !important; }

html body article.profile h2,
html body article.profile section > h2,
html body article.profile h2.spoke-title,
html body main > .page-content h2,
html body main .page-content h2,
html body main .entry-content h2 { font-size: 1.65rem !important; line-height: 1.25 !important; }

html body article.profile h1,
html body main > .page-content h1,
html body main .page-content h1,
html body main .entry-content h1,
html body h1 { font-size: 2.20rem !important; line-height: 1.2 !important; letter-spacing: -0.005em !important; }

/* Mobile-rule defense: existing CSS sets H1 to 22px on max-width:600.
   Override to keep modular scale on small screens too (1.7rem ≈ 27px). */
@media (max-width: 600px) {
  html body article.profile header.profile-header-wrap h1,
  html body main > .page-content h1:not(.entry-title),
  html body main .page-content h1:not(.entry-title),
  html body main .entry-content h1:not(.entry-title) { font-size: 1.7rem !important; }
}

/* E4 — OLD-STYLE FIGURES in body, LINING figures in tabular contexts.
   APPLIED SITEWIDE — covers all main content areas. */
html body article.profile p,
html body article.profile li,
html body article.profile blockquote,
html body main .page-content p,
html body main .page-content li,
html body main .page-content blockquote,
html body main .entry-content p,
html body main .entry-content li,
html body main .entry-content blockquote {
  font-feature-settings: "onum" 1, "kern" 1, "liga" 1, "calt" 1 !important;
}
html body article.profile time,
html body article.profile cite,
html body main .page-content time,
html body main .entry-content time,
html body details#references li,
html body details.src-toggle li,
html body table {
  font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1, "liga" 1 !important;
}

/* E5 — SMALL CAPS for acronyms (ESP-Nexus, SPR, PA, JSE, NDE, OBE...).
   Pure all-caps SHOUTS visually; small caps preserve the abbreviation
   form without the optical noise. Bringhurst §3.2. Applied via class
   added by JS (E5-JS) to runs of 2+ uppercase letters. */

/* E6 — TUFTE SIDENOTES — KILLED 2026-04-25 per Rick's preview review. */

/* E7 — READING PROGRESS BAR + ACTIVE-SECTION INDICATOR (HUD strip).
   The fixed-top zone serves two ambient signals stacked vertically:
   a 3px gold progress strip (scroll %) and a thin "§ Section Name"
   indicator that fades in once the reader scrolls past the H1.
   Together they form a quiet heads-up display: "where am I, how far
   in." Total height when active: ~32px; fades away when at page top
   so doesn't compete with the H1 entry. */
#reading-progress {
  /* PSI-CLOCK-SCROLL 2026-04-26 — hidden. Scroll progress now indicated
     by the ψ symbol rotating in the site logo (0%→0°, 100%→360°).
     Element retained because JS still updates its width; nothing paints. */
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #c2a84e 0%, #8a6914 100%);
  width: 0%;
  z-index: 99998;
  transition: width 0.06s linear;
  pointer-events: none;
}
/* CONTEXT BAR — fixed-top thin strip with active-section indicator on
   the left and reader controls + trust signals on the right. Fades in
   once user scrolls past the H1; quietly disappears when at page top. */
#section-indicator {
  /* CHIP-INSIDE-RAILS 2026-04-26 — bg + backdrop-filter moved to .ctx-inner so
     the painted chip stops inside the 900px column rails (was painting
     cream-94%-blur over the inner black borders at z=99997, erasing them
     from y=3..35). Container is now visually inert; chip = .ctx-inner. */
  position: fixed;
  top: 3px;
  left: 0;
  right: 0;
  height: 0;
  overflow: visible;
  background: transparent;
  border-bottom: 0;
  z-index: 99997;
  opacity: 0;
  pointer-events: none;
  font-family: Inter, -apple-system, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: #5a4718;
  font-weight: 500;
}
/* No transition — JS-applied .visible class needs to flip rendering
   instantly. CSS transitions fail to fire when the source state hasn't
   been rendered yet (caught 2026-04-25 via Chrome MCP debugging — the
   transition got stuck at currentTime:0 forever). */
#section-indicator.visible {
  height: 32px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  border-bottom: 0 !important;
}
/* CHIP-INSIDE-RAILS 2026-04-26 — paint chip bg on .ctx-inner constrained
   to the cream-column width (900px) with its own 1px black L/R borders
   so the chip's borders ARE the column rails for y=3..35. Visually
   identical to before from the user's POV; the rails stay continuous
   instead of being erased by the chip's full-viewport bg. */
#section-indicator.visible .ctx-inner {
  max-width: 900px !important;
  height: 32px !important;
  background: rgba(253, 252, 248, 0.94) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-left: 1px solid #000000 !important;
  border-right: 1px solid #000000 !important;
  border-bottom: 1px solid #e3d6a8 !important;
  box-sizing: border-box !important;
}

/* STICKY HEADER (Rick 2026-04-25): header pinned to viewport top.
   Context bar is 35px tall fixed at top:0-35 (z-index higher) — header
   needs padding-top ≥ 38px so its content (mark/wordmark/tagline)
   isn't hidden behind the context bar. Match the high-specificity
   selectors of the existing site CSS to win on equal-specificity
   source-order. */
html body article.profile > .site-branding,
html body article.profile > header.site-branding,
html body article.profile .site-branding,
html body main > .page-content > .site-branding,
html body main > .page-content > header.site-branding,
html body header.site-branding,
html body .site-branding {
  padding: 42px 24px 14px 24px !important;
}
@media screen and (max-width: 782px) {
  html body article.profile > .site-branding,
  html body article.profile > header.site-branding,
  html body article.profile .site-branding,
  html body main > .page-content > .site-branding,
  html body main > .page-content > header.site-branding,
  html body header.site-branding,
  html body .site-branding {
    padding: 56px 16px 12px 16px !important;
  }
}

/* Defeat the existing rule `html body article.profile *` that forces
   transparent background on every descendant. Re-assert opaque bg with
   matching specificity selectors. */
html body article.profile > .site-branding,
html body article.profile > header.site-branding,
html body article.profile .site-branding {
  background: #fdfcf8 !important;
  background-color: #fdfcf8 !important;
}

/* STICKY TOPNAV — Rick 2026-04-25: keep the HOME/SCIENTISTS/...
   menu also pinned, just below the sticky header. The topnav must span
   the full parent width with opaque bg, otherwise the parent
   article.profile's white background leaks visible to the left/right
   of the cream-bg topnav strip when content scrolls behind it. */
html body .esp-topnav,
html body article.profile > .esp-topnav,
html body article.profile .esp-topnav,
html body main > .page-content > .esp-topnav,
.esp-topnav {
  position: sticky !important;
  top: 112px !important;
  z-index: 99995 !important;
  background: #fdfcf8 !important;
  background-color: #fdfcf8 !important;
  box-shadow: none !important; /* UNDERLINE-NO-OVERPAINT 2026-04-27 strip — was 1px white side-pads; user asked to remove side-lines around card. */
  border-bottom: 2px solid #ffffff !important;
  /* TOPNAV-STRUCTURAL v1: width/margin removed — nav is now a sibling of
     article.profile and inherits the 4-stacked-block 900px max-width rule. */
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
}
/* Also force the article.profile bg to match — defense in depth so the
   parent doesn't paint a different shade than the topnav's bg. */
html body article.profile {
  background-color: #fdfcf8 !important;
}
body.admin-bar .esp-topnav { top: 144px !important; }
@media screen and (max-width: 782px) {
  html body .esp-topnav,
  html body article.profile .esp-topnav { top: 132px !important; }
  body.admin-bar .esp-topnav { top: 178px !important; }
}
body.admin-bar .esp-topnav { top: 144px !important; }
@media screen and (max-width: 782px) {
  html body .esp-topnav,
  html body article.profile .esp-topnav { top: 132px !important; }
  body.admin-bar .esp-topnav { top: 178px !important; }
}

/* WP admin-bar offset for context bar */
body.admin-bar #reading-progress { top: 32px; }
body.admin-bar #section-indicator { top: 35px; }
@media screen and (max-width: 782px) {
  body.admin-bar #reading-progress { top: 46px; }
  body.admin-bar #section-indicator { top: 49px; }
}

/* No body padding-top needed when header is sticky (header is in
   document flow). Reset existing site-rule overrides that conflict. */
html:not(.admin-bar-active) body:not(.admin-bar) { padding-top: 0 !important; }
html.admin-bar-active body.admin-bar { padding-top: 0 !important; }
#section-indicator .ctx-inner {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.4em;
  gap: 1em;
}
#section-indicator .ctx-left {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  text-transform: uppercase;
}
@media (max-width: 599px) {
  #section-indicator .ctx-identity .ctx-id-word { display: none; }
  #section-indicator .ctx-identity { padding-right: 8px; }
}
#section-indicator .ctx-right {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-shrink: 0;
}
#section-indicator .si-marker {
  color: #c2a84e;
  margin-right: 0.45em;
  font-size: 1em;
}
#section-indicator .si-name {
  color: #2a2010;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#section-indicator .ctx-btn {
  background: none;
  border: 1px solid transparent;
  color: #5a4718;
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 3px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  position: relative;
  white-space: nowrap;
}
#section-indicator .ctx-btn:hover {
  background: rgba(194,168,78,0.14);
  border-color: rgba(194,168,78,0.5);
  color: #2a2010;
}
#section-indicator .ctx-trust {
  font-variant-numeric: tabular-nums;
  color: #5a4718;
  letter-spacing: 0.03em;
  text-transform: none;
  padding: 3px 8px;
  font-size: 0.72rem;
}
#section-indicator .ctx-trust .ctx-trust-num {
  color: #2a2010;
  font-weight: 600;
}
#section-indicator .ctx-trust .ctx-trust-sep {
  margin: 0 0.4em;
  opacity: 0.4;
}
/* Dropdown menus (Cite, TOC) */
#section-indicator .ctx-menu {
  position: absolute;
  top: 32px;
  right: 0;
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fdfcf8;
  border: 1px solid #c2a84e;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(40,30,15,0.14);
  padding: 0.4em 0;
  display: none;
  z-index: 99998;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
}
#section-indicator .ctx-menu.open { display: block; }
#section-indicator .ctx-menu-item {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 0.45em 1em;
  font: inherit;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  color: #2a2010;
  cursor: pointer;
  white-space: normal;
}
#section-indicator .ctx-menu-item:hover {
  background: rgba(194,168,78,0.14);
}
#section-indicator .ctx-menu-item .ctx-menu-label {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a7d54;
  display: block;
  margin-bottom: 1px;
}
#section-indicator .ctx-toast {
  position: absolute;
  top: 36px;
  right: 0;
  background: #2a2010;
  color: #f0e6c8;
  font-size: 0.72rem;
  padding: 5px 10px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  text-transform: none;
  letter-spacing: 0.02em;
}
#section-indicator .ctx-toast.visible { opacity: 1; }
@media (max-width: 720px) {
  #section-indicator .ctx-trust,
  #section-indicator .ctx-btn[data-action="permalink"] { display: none; }
}

/* E8 — READING TIME ESTIMATE. Subtitle under H1 ("12 min read · ~3,400
   words"). Restored 2026-04-25 — Rick liked it; my register argument
   was overruled. Justification stands: it sets cognitive expectation
   even on a reference page, and is a quiet feature (small uppercase
   subtitle, doesn't shout). */
.reading-time {
  display: block;
  margin-top: 0;  /* H1-TO-READING-TIME-5PX 2026-04-27 — was 0.3em (~3.5px). Now 0; the natural ~5px line-spacing from H1's line-height takes over. */
  font-family: Inter, -apple-system, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a7d54;
  font-weight: 500;
}

/* E9 — TOC SCROLL-SPY ACTIVE STATE. Current section's TOC link gets
   gold left-border + bold; gives a "you are here" indicator. JS toggles
   the .toc-active class via IntersectionObserver. */
nav.toc-inline-list a.toc-active,
nav.toc a.toc-active {
  color: #6e5710;
  font-weight: 600;
  border-left: 2px solid #c2a84e;
  padding-left: 0.45em;
  margin-left: -0.6em;
}

/* E10 — PULL-QUOTE. Restored 2026-04-25 — Rick liked it. Mid-article
   callout breaks long sections, re-engages depth-readers. NYT Magazine /
   NYRB / The Atlantic convention. Production version: generator emits
   these at high-density paragraph breaks at ~600-word intervals. */
.pull-quote {
  font-family: 'Lora','Georgia',serif;
  font-size: 1.4rem;
  line-height: 1.45;
  font-style: italic;
  color: #2a2010;
  margin: 1.6em auto;
  max-width: calc(100% - 0.4em);  /* PULLQUOTE-CENTER 2026-04-27 — was 'margin:1.6em -0.6em' which extended beyond container; auto-centers cleanly */
  padding: 0.8em 1.4em;
  border-top: 1px solid #c2a84e;
  border-bottom: 1px solid #c2a84e;
  text-align: center;
  letter-spacing: 0.005em;
}
.pull-quote::before { content: '\201C'; color: #c2a84e; font-size: 1.2em;
                     vertical-align: -0.15em; margin-right: 0.1em; }
.pull-quote::after  { content: '\201D'; color: #c2a84e; font-size: 1.2em;
                     vertical-align: -0.15em; margin-left: 0.1em; }

/* E11 — DARK MODE — KILLED 2026-04-25 per Rick's preview review. */

/* E12 — DROP CAP refinement — KILLED with A3 above. */

/* E13 — COLOR-BLIND-SAFE accent verification: Gold #c2a84e against
   white passes WCAG AA for large text; for body-size text we pair gold
   with a darker text color (#5a4718) — already in place above. No
   color-only signals (links also have underline); checked OK for
   protanopia / deuteranopia / tritanopia simulations. */

/* D5 — IN-CONTENT links: gold underline that decays on hover.
   Default browser blue is jarring on a scholarly site. */
article.profile p a:not(.fn-back):not([href^="#R"]):not([href^="#fnref"]),
article.profile li a:not(.fn-back):not([href^="#R"]):not([href^="#fnref"]) {
  color: #5a4718;
  text-decoration: underline;
  text-decoration-color: rgba(194,168,78,0.55);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.15s, color 0.15s;
}
article.profile p a:not(.fn-back):not([href^="#R"]):not([href^="#fnref"]):hover,
article.profile li a:not(.fn-back):not([href^="#R"]):not([href^="#fnref"]):hover {
  color: #2a2010;
  text-decoration-color: #8a6914;
}
/* ═══ EXPERT-OVERRIDES END ═══ */

/* ═══ TOPSTRIP-FIX 2026-04-26 — constrain progress bar + context bar to 900px card width on desktop, so PAGE-BG-DARK v2 dark margins extend up through y=0. Also adds an always-visible 3px track for the progress bar so the empty-state load doesn't show transparent strip. Rick 2026-04-26: "context menu... transparent so on page load it looks funky" + "didnt carry it up into the header". ═══ */
@media (min-width: 900px) {
  /* body::before progress-bar track REMOVED 2026-04-26 — it used left:50% of viewport, but the card centers within body (which is narrower than viewport by the scrollbar width). The ~7.5px offset painted faint-gold INTO the right dark margin at y=0-3. On desktop body's BLACK serves as a perfect track. Progress bar fills gold from left when scrolling. */
  /* Constrain progress bar to 900px card. Outside the card body's black shows through. */
  #reading-progress {
    left: 50% !important;
    margin-left: -450px !important;
    max-width: 900px !important;
  }
  /* Constrain context bar to 900px card + opaque cream (no transparency) */
  #section-indicator,
  #section-indicator.visible {
    width: 900px !important;
    max-width: 900px !important;
    left: 50% !important;
    right: auto !important;
    margin-left: -450px !important;
    background: #fdfcf8 !important;
  }
}
/* ═══ TOPSTRIP-FIX END ═══ */

/* ═══ FOOTER-PARA-WIDTH-FIX 2026-04-26 — paragraphs after nav.footer-nav (Last updated / Copyright / Disclaimer) are page chrome, not body prose. They should not be constrained by E1's 68ch reading-measure cap (which made the disclaimer wrap to 4 lines instead of 2). Override max-width to none so they span the full article card width (minus inline padding). ═══ */
html body article.profile > nav.footer-nav ~ p {
  max-width: none !important;
}
/* ═══ FOOTER-PARA-WIDTH-FIX END ═══ */



/* === HUB-LABEL-CENTER START (2026-04-25) === */
/* HUB-LABEL-CENTER v1 (2026-04-25) — .hub-links-label is a direct child
   of article.profile so it gets capped to 68ch by the OPTIMAL READING
   MEASURE rule. Without auto margins it sat flush-left. Center the
   block + the text so the "Deeper dives — <Name>:" label sits over
   the centered button row below it. */
/* HUB-LABEL-LEFT 2026-04-26 — reverse v1 centering. Rick prefers
   left-justified label over the centered button row below. */
html body article.profile .hub-links-label,
html body .hub-links-label{
  margin-left:0 !important;
  margin-right:auto !important;
  text-align:left !important;
}
/* === HUB-LABEL-CENTER END === */

/* === BREADCRUMB-IN-CTXBAR START (2026-04-25) === */
/* BREADCRUMB-IN-CTXBAR v1 (2026-04-25) — style .esp-breadcrumbs when it
   lives inside the sticky #section-indicator dark bar. Tight inline
   layout, muted gold links contrasting the dark bg. */
#section-indicator .ctx-left .esp-breadcrumbs{
  display:inline-flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  margin:0 0 0 34px !important;
  padding:0 !important;
  font-size:11px !important;
  letter-spacing:0.04em !important;
  color:#a89a78 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  border:0 !important;
  background:transparent !important;
}
#section-indicator .ctx-left .esp-breadcrumbs a{
  color:#c2a84e !important;
  text-decoration:none !important;
  border:0 !important;
  padding:0 !important;
}
#section-indicator .ctx-left .esp-breadcrumbs a:hover{
  color:#e6cf72 !important;
}
#section-indicator .ctx-left .esp-breadcrumbs .sep{
  color:#6b6760 !important;
  margin:0 0.4em !important;
}
#section-indicator .ctx-left .esp-breadcrumbs .cur{
  color:#d8d3c4 !important;
}
@media (max-width:760px){
  #section-indicator .ctx-left .esp-breadcrumbs{
    display:none !important;
  }
}
/* === BREADCRUMB-IN-CTXBAR END === */

/* === FOOTER-PARA-CENTER START (2026-04-26) === */
/* FOOTER-PARA-CENTER v1 (2026-04-26) — the trailing footer paragraphs
   (Last updated / Copyright / Disclaimer) are direct children of
   article.profile so they get capped to 68ch by the OPTIMAL READING
   MEASURE rule. The inline style sets margin:0 (no auto) so the
   block sits flush-left within the cap. Force auto-margins so the
   cap-width block self-centers within the article. Targets only
   the last 3 paragraphs (the footer block) by attribute selector
   to avoid touching prose paragraphs that legitimately use margin:0. */
html body article.profile > p[style*="text-align"][style*="text-align:center"],
html body article.profile > p[style*="text-align: center"]{
  margin-left:auto !important;
  margin-right:auto !important;
}
/* === FOOTER-PARA-CENTER END === */

/* ═══ SIDE-BORDER-MATCH-OVERRIDE 2026-04-26 — final-cascade override
   Multiple earlier rules use "border: 0 !important" shorthand on
   .site-branding and .esp-topnav, defeating the in-place SIDE-BORDER-MATCH
   edit at the rule level (F2 + others). This end-of-CSS rule uses
   main#content in the selector (1 ID = wins) to guarantee the L+R 1px
   black borders take effect. Desktop-only @media so mobile remains
   borderless per existing NO-SIDE-BORDERS-MOBILE v1 rule.
   ═══ */
@media (min-width: 900px) {
  html body main#content > .page-content > .site-branding,
  html body main#content > .page-content > header.site-branding,
  html body main#content > .page-content > .esp-topnav {
    border-left: 0 !important;
    border-right: 0 !important;
    box-sizing: border-box !important;
  }
}
/* ═══ SIDE-BORDER-MATCH-OVERRIDE END ═══ */


/* ════════════════════════════════════════════════════════════════════
   SECTION-INDICATOR-MACRO 2026-04-26 — fixed-width slot for .si-name.
   Macro labels max 10 chars ('Discussion'); 100px slot fits all 8 with
   margin to spare. Locking the slot prevents the right-side buttons
   (cite, TOC, trust) from shifting horizontally as the active section
   changes during scroll. Mobile keeps its existing 140px ellipsis rule
   (declared earlier in the file, narrower viewports already truncate).
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  #section-indicator .si-name {
    /* SI-NAME-SLOT-82 2026-04-26 — was 100px; longest label is 'Discussion' at 78px so 82 = 78+4px breathing. Saves 18px chip width per Rick's audit. */
    flex: 0 0 82px !important;
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    display: inline-block !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
}


/* SEARCH-RIGHT-ALIGN 2026-04-26 — form.esp-searchform is display:flex with
   default justify-content (flex-start), leaving ~54px empty trailing space
   inside the form. Right-align so the button's right edge matches the
   form's right edge — symmetric with H1's left gap from the card border. */
html body form.esp-searchform {
  justify-content: flex-end !important;
}


/* TOPNAV-BLUR-STRIP 2026-04-26 — 6px tall transparent strip just below
   the topnav's bottom edge with backdrop-filter:blur. Content scrolling
   up through this 6px window appears blurred before disappearing under
   the opaque sticky header. Position relative requires the topnav has a
   positioning context — it's sticky so already has one. */
html body .esp-topnav,
html body article.profile .esp-topnav {
  position: sticky !important;  /* (re-assert; needed for ::after positioning) */
}
html body .esp-topnav::after,
html body article.profile .esp-topnav::after {
  /* TOPNAV-BLUR-CANONICAL 2026-04-26 — proper frosted-glass fade pattern.
     Uniform 30px frosted strip (no buffer hack); fade-to-transparent
     achieved via mask-image, the standard CSS technique that fades the
     entire element including its backdrop-filter. Hardware-accelerated. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* TOPNAV-BLUR-HEIGHT-20 2026-04-26 — 30px → 20px */
  bottom: -21px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);  /* TOPNAV-BLUR-BG-ALPHA-20 2026-04-26 — was 0.4, too washy */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  pointer-events: none;
  z-index: 99994;
}


/* ARTICLE-BOTTOM-PADDING-V2 2026-04-26 — was 1.5em (overridden by
   higher-specificity rule = computed 0px). Bumped to 60px with stronger
   selector chain to win the cascade and give visible footer breathing
   room. Also targets the trailing footer paragraphs directly. */
html body main article.profile,
html body main > .page-content article.profile,
html body article.profile {
  padding-bottom: 60px !important;
}
html body article.profile > nav.footer-nav ~ p:last-of-type {
  margin-bottom: 30px !important;
}


/* FNBACK-UPARROW-BLACK 2026-04-26 — fn-back arrow in black, matching
   reference-font color (was inheriting gold from link styling). */
html body article.profile a.fn-back,
html body details a.fn-back {
  color: #000 !important;
  text-decoration: none !important;
}


/* FNBACK-ARROW-SMALLER 2026-04-26 — override inline font-size:1.1em
   on fn-back anchors to 0.7em. ↑ at full size looked like a tree. */
html body article.profile a.fn-back,
html body details a.fn-back {
  font-size: 0.7em !important;
  vertical-align: baseline !important;
}


/* ARTICLE-SIDE-PADDING-50 2026-04-26 — bump article.profile side
   padding to 50px (was ~30 effective). High-specificity override
   so it wins the cascade against earlier @media-scoped padding. */
html body main article.profile,
html body main > .page-content article.profile,
html body article.profile {
  padding-left: 50px !important;
  padding-right: 50px !important;
}


/* REFS-MARKER-NORMALIZE 2026-04-26 — defensive sitewide normalization
   of references-list markers. Some unknown rule was producing huge
   gray digits overlapping the text on Rick's view (couldn't reproduce
   in probe). This forces sane explicit values everywhere. */
html body details#references ol,
html body details.src-toggle ol {
  list-style: decimal outside !important;
  padding-left: 32px !important;
  margin-left: 0 !important;
}
html body details#references li,
html body details.src-toggle li {
  list-style-position: outside !important;
  text-indent: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
html body details#references li::marker,
html body details.src-toggle li::marker {
  font-size: 0.85em !important;
  color: #888 !important;
  font-weight: normal !important;
  /* REFS-MARKER-SERIF 2026-04-26 — was Inter sans; unified to Lora serif to match body */
  font-family: 'Lora', Georgia, serif !important;
}
html body details#references li::before,
html body details.src-toggle li::before {
  content: none !important;
  display: none !important;
}


/* FNBACK-HIDE 2026-04-26 — hide fn-back arrows in refs list pending a
   better icon. Citation popover wiring (EXPLORER-PANEL-PHASE1B) makes
   the back-arrow's purpose mostly redundant anyway. */
html body details#references a.fn-back,
html body details.src-toggle a.fn-back {
  display: none !important;
}


/* REFS-FORCE-SERIF 2026-04-26 — references-list children inherit Inter
   sans from the generic details.dd .dd__body rule (line ~2316). Override
   for the references list specifically so it reads as scholarly serif. */
html body article.profile details#references .dd__body,
html body article.profile details#references .dd__body p,
html body article.profile details#references .dd__body ol,
html body article.profile details#references .dd__body li,
html body article.profile details#references .dd__body div,
html body article.profile details#references .dd__body span,
html body article.profile details#references .dd__body strong,
html body article.profile details#references .dd__body em,
html body article.profile details#references .dd__body a,
html body article.profile details.src-toggle .dd__body,
html body article.profile details.src-toggle .dd__body p,
html body article.profile details.src-toggle .dd__body ol,
html body article.profile details.src-toggle .dd__body li,
html body article.profile details.src-toggle .dd__body div,
html body article.profile details.src-toggle .dd__body span,
html body article.profile details.src-toggle .dd__body strong,
html body article.profile details.src-toggle .dd__body em,
html body article.profile details.src-toggle .dd__body a {
  font-family: 'Lora', Georgia, serif !important;
}


/* H1-SMART-COLLAPSE 2026-04-26 — header.profile-header-wrap becomes
   sticky below the topnav. Full-size at top of page; collapses to a
   ~44px toolbar after scroll-past via JS-applied .compact class. */
html body article.profile header.profile-header-wrap {
  position: sticky !important;
  top: 146px !important;  /* topnav bottom — STICKY-TOP-FOLLOWS-TOPNAV 2026-04-26: was 154 (pre-anchor-vpad-trim); follows new topnav-bottom 146.59 */
  z-index: 99993 !important;
  background: #fdfcf8 !important;
  /* H1-COLLAPSE-FIX-MARGINS 2026-04-26 — was margin-left/right: -50px
     to extend bg through article side padding; that pushed the search
     box past the article right border on narrower viewports. Keep the
     wrap inside the normal article padding box. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transition: padding-top 0.18s ease, padding-bottom 0.18s ease;
}
/* CONTROLS-LOCK-COMPACT-PARITY 2026-04-26 — disabled compact-specific
   font-size/height/padding/width on .esp-searchform input AND .src-toggle.
   Reason: those differentials made the controls visually shift between
   default and compact states (search box height jumped 26.59 → 26.00 →
   0.30px form shift up; toggle font shrank). Lock them by stripping the
   differential — controls render identically in both states. Pairs with
   line 795 (.esp-searchform top:27px) and line 1351 (.src-toggle top:27px)
   which lock the vertical center. */


/* TOP-TIGHTEN-10-REVERT 2026-04-26 — reverted. Sitewide rule made
   spoke pages worse. Re-attempt scoped to hub-only after diagnosis. */


/* H1-FORCE-FLEX-REVERT 2026-04-26 — reverted. The display:flex+wrap
   broke the reading-time 'Specialist' line layout on hub. The 5px
   hub/spoke H1 text-baseline shift needs a structural fix (markup
   normalization between page types) — pinned for proper investigation. */


/* H1-MARGIN-TOP-6 2026-04-26 — H1 margin-top 16px → 6px (-10px). Move
   H1 up 10px on hub and spoke. Specific to H1, doesn't touch H2. */


/* KEY-FINDINGS-NO-BG-RESTORE 2026-04-26 — re-assert no-bg on
   key-findings sections. A later rule (line ~2877) reinstated a cream
   gradient bg; this overrides it sitewide with transparent. */
html body article.profile aside.key-findings,
html body article.profile section.key-findings,
html body article.profile .key-findings,
html body article.profile div.key-findings {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}


/* COMPACT-PAGENAME 2026-04-26 — second line in smart-collapsed bar
   showing the page-specific title (spoke/book name) so the reader
   always knows which page they're on. Lora italic to match lede. */


/* COMPACT-TWEAKS 2026-04-26 —
   1. Force H1 children to a single line in compact mode (sources + search
      sat below name, looking 6px too low — was wrapping).
   2. Page title (.compact-pagename) → Inter sans, no italic. */


/* COMPACT-PAGENAME-COLOR 2026-04-26 — match reading-time muted gold (#8a7d54). */


/* COMPACT-PAGENAME-MATCH-READING 2026-04-26 — exact match to .reading-time */


/* SPOKE-H2-ALIGN-PHOTO-TOP 2026-04-26 — measurement-based: hub
   photo at y=223, spoke H2 was at y=259. Need -36px to align. The
   right knob is margin-top (not padding). 24 → -12 = -36px shift. */
html body article.profile h2.spoke-title {
  margin-top: -13px !important;  /* SPOKE-H2-ALIGN-MINUS1 2026-04-26 — 1px more up per Rick's ruler */
  padding-top: 26.4px !important;
}


/* H1-SIZE-28 2026-04-26 — H1 24 → 28px so H1 > H2.spoke-title (26.4px).
   High-specificity override of earlier H1-SIZE rules. */
html body main article.profile h1,
html body main > .page-content article.profile h1,
html body article.profile header.profile-header-wrap h1,
html body article.profile h1 {
  font-size: 28px !important;
}


/* H2-SIZE-24 2026-04-26 — H2 26 → 24px. */
html body article.profile h2.spoke-title,
html body article.profile > section > h2 {
  font-size: 24px !important;
}


/* TOC-TITLE-24 2026-04-26 — h2.toc-title was 26.4px; sync with other
   page H2s at 24px. */
html body article.profile h2.toc-title {
  font-size: 24px !important;
}


/* COMPACT-WRAP-BLUR 2026-04-26 — same frosted-glass strip below the
   compact H1 wrap as below the topnav. Wrap covers the topnav strip,
   so this re-asserts the effect at the wrap's bottom. */


/* COMPACT-CONTROLS-LOCK-IN-PLACE 2026-04-26 — reverted: controls keep their full-mode positioning so they don't jump on compact transition. */


/* H1-ROW-UP-8-V2 2026-04-26 — match :not(.entry-title) specificity
   so we beat the competing rule that sets margin-top:16px. */
html body article.profile header.profile-header-wrap h1:not(.entry-title),
html body article.profile div.profile-header-wrap h1:not(.entry-title),
html body article.profile h1:not(.entry-title) {
  margin-top: 0 !important;  /* H1-UP-4-MORE 2026-04-27 — was 4; Rick: "move H1 up 4 px" */
}


/* H1-CONTROLS-UP-4-REVERT 2026-04-26 — reverted; broke layout. */

/* SITE-BRANDING-RAILS-GOLD 2026-04-27 — Rick: the vertical rail above the
   menu buttons reads grey on the cream background and asymmetric to the
   gold horizontal under the context-bar (.ctx-inner border-bottom is
   rgb(227,214,168)). Recoloring .site-branding L+R to match. The original
   black is set in the multi-element rule at line ~219; this overrides
   for .site-branding only (other rails — esp-topnav, esp-breadcrumbs,
   article.profile — stay black so the lower portion of the page keeps
   its existing black-on-cream framing). */
/* SITE-BRANDING-RAILS-GOLD REVERTED 2026-04-27 — Rick had flagged these
   gold L+R borders as not explicitly asked for. Reverting so the only
   gold remaining is the horizontal under the top items. */

/* CTX-BAR-BG-BLACK 2026-04-27 — Rick's experiment: black background on the
   top context bar. Font colors left untouched so he can see the contrast
   first. Originally rgba(253,252,248,0.94) at line 3354. */
#section-indicator.visible .ctx-inner {
  background: #000000 !important;
}
#section-indicator.visible {
  background: #000000 !important;
  top: 0 !important;  /* CTX-BAR-FLUSH-TOP 2026-04-27 — was 3px, leaving 3px of cream site-branding visible above the now-black bar. Pulled flush to viewport top. */
}

/* CTX-BAR-FONTS-WHITE 2026-04-27 — flip every dark text element inside the
   ctx-bar to white now that the bg is black. Covers the truly-black
   #2a2010 (.si-name, .ctx-trust-num) AND the dark-gold/brown #5A4718
   (.ctx-left/right parents, .ctx-trust, .ctx-trust-sep, .ctx-btn) AND
   the grey separators (.sep). Gold links (.esp-breadcrumbs a, .si-marker)
   and the current-page badge (.cur) stay their own color — they're
   already light enough to read on black. */
#section-indicator.visible .ctx-inner .si-name,
#section-indicator.visible .ctx-inner .ctx-trust-num,
#section-indicator.visible .ctx-inner .ctx-left,
#section-indicator.visible .ctx-inner .ctx-right,
#section-indicator.visible .ctx-inner .ctx-trust,
#section-indicator.visible .ctx-inner .ctx-trust-sep,
#section-indicator.visible .ctx-inner .ctx-btn,
#section-indicator.visible .ctx-inner .sep {
  color: #ffffff !important;
}

/* BREADCRUMB-SEP-CHEVRON 2026-04-27 — replace the literal " | " in
   <span class="sep"> with the conventional breadcrumb chevron " › ". Pipes
   are a menu/peer-level convention; chevrons signal hierarchy
   (parent → child → current). Hide the existing pipe text via font-size:0,
   render the chevron via ::before. CSS-only override; no JS or
   mu-plugin source change needed. */
#section-indicator.visible .ctx-inner .esp-breadcrumbs .sep {
  font-size: 0 !important;
}
#section-indicator.visible .ctx-inner .esp-breadcrumbs .sep::before {
  content: " \203A ";  /* › U+203A SINGLE RIGHT-POINTING ANGLE QUOTATION */
  font-size: 11px !important;
  color: #ffffff !important;
}

/* BREADCRUMB-DROP-HOME 2026-04-27 — Home is the implicit root of every
   page; the topnav already has an explicit Home link. Hide the first
   anchor (Home) AND the first .sep that follows it. Result: breadcrumb
   reads "Scientists › Berger" instead of "Home › Scientists › Berger".
   Saves ~50px in the ctx-bar's center cluster. */
#section-indicator.visible .ctx-inner .esp-breadcrumbs > *:nth-child(1),
#section-indicator.visible .ctx-inner .esp-breadcrumbs > *:nth-child(2) {
  display: none !important;
}

/* BREADCRUMB-DROP-ICON 2026-04-27 — REVERTED 2026-04-27: Rick wanted the
   leading marker to stay (he called it "the chevron" — meaning the
   visual cue at the breadcrumb start). Original ◉ restored via the
   line 707 rule. */
/* (no override here — falls through to ::before content:"\25C9") */

/* BREADCRUMB-CHEVRON-PADDING 2026-04-27 — give the › chevrons breathing
   room. Was content:" \203A " (single space each side); padding adds 5px
   of clear gap on each side independent of font-spacing quirks. */
#section-indicator.visible .ctx-inner .esp-breadcrumbs .sep::before {
  padding: 0 5px !important;
}

/* CTX-TRUST-NO-BORDERS 2026-04-27 — the .ctx-trust pill had 1px gold
   border-left + border-right (wheat #d4c188) which on the black ctx-bar
   bg rendered as gold vertical pipes flanking the trust crumbs. Strip
   them — the dot separators between numbers carry the visual rhythm
   without the framed-pill look. */
#section-indicator.visible .ctx-inner .ctx-trust {
  border-left: 0 !important;
  border-right: 0 !important;
}


/* BREADCRUMB-CHIP-NO-SHADOW 2026-04-27 — the SIDE-PADS-MATCH rule (2026-04-26) paints 1px white
   box-shadow on the L+R of .esp-breadcrumbs to give it side-pads matching
   article.profile's rail context. When the breadcrumb is moved into the
   chip (#section-indicator .ctx-left), those white shadows render as
   visible vertical pipes flanking the breadcrumb on the chip's black bg.
   Strip the shadow inside the chip only — keeps the side-pads where the
   breadcrumb sits in the article rail context. */
#section-indicator .ctx-inner .esp-breadcrumbs {
  box-shadow: none !important;
}


/* CHIP-RAILS-OFF 2026-04-27 — Rick: chip should appear to float on the black page margin
   above the cream content box. Strip the chip's L+R black border + white
   box-shadow side-pads so it visually detaches from the card rails below.
   Leaves all other rails (.site-branding/.esp-topnav/article.profile) intact. */
#section-indicator.visible .ctx-inner {
  border-left: 0 !important;
  border-right: 0 !important;
  /* Pure two-line crisp bevel under chip — two stacked sharp gold lines,
     no soft fade. Variant F per Rick 10-effect comparison
     (TOPNAV-BEVEL 2026-04-28 — variant F, hairline-only crisp). */
  box-shadow:
    inset 0 -1px 0 rgb(227,214,168),
    0 1px 0 0 rgba(90, 71, 24, 0.55),
    0 2px 0 0 rgba(90, 71, 24, 0.20) !important;
}

/* TOPNAV-CHIP-RECEDE v2 2026-04-27 — Refactor: dim chip siblings of the
   breadcrumb (section marker + name + identity word + permalink button
   area) at 0.55, keep breadcrumb at full brightness so it stands out as
   the navigation anchor. Hover anywhere on the chip restores everything
   to full for interaction. Chip chrome (bg/border/blur) untouched. */
#section-indicator.visible .ctx-left > *:not(.esp-breadcrumbs),
#section-indicator.visible .ctx-right {
  opacity: 0.45 !important;
  transition: opacity 180ms ease !important;
}
/* TOPNAV-BREADCRUMB-OPACITY 2026-04-27 — breadcrumb knob (currently 0.9). */
#section-indicator.visible .ctx-left > .esp-breadcrumbs {
  opacity: 0.9 !important;
  transition: opacity 180ms ease !important;
}
#section-indicator.visible:hover .ctx-left > *,
#section-indicator.visible:hover .ctx-right {
  opacity: 1 !important;
}

/* PULLQUOTE-HIDE-CITE 2026-04-27 — hide the inline cite anchor inside
   pull-quotes. The canonical sentence + its [N] citation live in the
   article body above; the pull-quote is a visual highlight and reads
   cleaner without the trailing digit. The reader can find the cite in
   the source paragraph (which is where they'd click anyway). */
html body article.profile .pull-quote sup,
html body article.profile .pull-quote .fn-sup,
html body article.profile blockquote.pull-quote sup,
html body article.profile blockquote.pull-quote .fn-sup,
html body .pull-quote sup,
html body .pull-quote .fn-sup { display: none !important; }

/* PULLQUOTE-FONT-SIZE 2026-04-27 — Rick: -4px (was 1.4rem ≈ 23.8px on 17px base; now ~19.8px). */
html body article.profile .pull-quote,
html body article.profile blockquote.pull-quote,
html body .pull-quote { font-size: calc(1.4rem - 4px) !important; }

/* PULLQUOTE-CENTER-LOCK 2026-04-27 — high-specificity center rule.
   The earlier auto-margin patch wasn't winning at desktop width;
   layered rule with article.profile prefix guarantees the auto margins
   apply. display:block + box-sizing:border-box defensive. */
html body article.profile .pull-quote,
html body article.profile blockquote.pull-quote,
html body .pull-quote {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* PULLQUOTE-PADDING-LOCK 2026-04-27 — some other rule is zeroing
   padding-right on .pull-quote (computed: 22px left, 0 right).
   Force symmetric 0.8em/1.4em padding with article.profile-prefix
   specificity. Same trick as PULLQUOTE-CENTER-LOCK above. */
html body article.profile .pull-quote,
html body article.profile blockquote.pull-quote,
html body .pull-quote {
  padding-top: 0.8em !important;
  padding-bottom: 0.8em !important;
  padding-left: 1.4em !important;
  padding-right: 1.4em !important;
}

/* COMPACT-H1-MARGIN-5PX 2026-04-28 — Rick: in smart-collapse compact
   mode, drop the page name 5px so it sits visually balanced inside the
   compact bar. Approved via local _tmp_smartcollapse_demo.html. */

/* CONTROLS-UP-2PX 2026-04-28 — top:27px → top:25px on .src-toggle + .esp-searchform (Rick: move both up 2px). */

/* HOMEPAGE-TEMPLATE 2026-04-28 — Rick: extend scientist-card cosmetic
   pattern to homepage. Cosmetic only — no content changes. Approved
   from local _tmp_homepage_template_demo.html.
   Selector uses main#content (ID) to beat the generic theme rule
   `body main#content { max-width:100% }`. */
@media (min-width: 900px) {
  html body.home,
  body.home { background: #000000 !important; }

  body.home .site-branding,
  body.home .esp-topnav { background-color: #fdfcf8 !important; }

  body.home main#content.site-main {
    background: #fdfcf8 !important;
    max-width: 900px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 clamp(12px, 3vw, 2rem) !important;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.05),
      0 4px 10px rgba(0,0,0,0.07),
      0 16px 32px rgba(0,0,0,0.09),
      0 32px 64px rgba(0,0,0,0.07) !important;
    min-height: 60vh !important;
    box-sizing: border-box !important;
    border-radius: 0 0 6px 6px !important;
  }

  body.home main#content.site-main > .page-header,
  body.home main#content.site-main > .page-content {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body.home main#content.site-main h1.entry-title {
    font-family: 'Lora', Georgia, serif !important;
    font-size: 28px !important;
    font-weight: 500 !important;
    color: #1a1814 !important;
    margin: 24px 0 12px !important;
    padding: 0 !important;
    letter-spacing: -0.005em !important;
  }

  body.home main#content.site-main p,
  body.home main#content.site-main li {
    font-family: 'Lora', Georgia, serif !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
    color: #1a1814 !important;
  }
}

/* HOME-INNER-BG-UNIFY 2026-04-28 v2 — 1 ID dominates the (0,4,4) class chain on body.home main.site-main > .page-content > article.profile. Transparent on article.profile + direct children so card cream (#fdfcf8 on main#content) shows uniformly. */
html body.home main#content article.profile,
html body.home main#content article.profile > * {
  background: transparent !important;
  background-color: transparent !important;
}


/* FOOTER-WRAP-DROPCAP-SUPPRESS 2026-04-28 — sitewide footer pattern uses <article class="profile esp-page-footer-wrap">; suppress the article.profile dropcap rule on its first <p>. Per Rick: this footer block is the canonical sitewide page-footer wrapper for all current + future pages. */
article.profile.esp-page-footer-wrap > p:first-of-type::first-letter,
article.profile.esp-page-footer-wrap > section:first-of-type > p:first-of-type::first-letter {
  float: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}


/* HOME-FOOTER-MATCH-HUB 2026-04-28 — make home's article#top.profile inner-width match hub (800px) so footer-nav and footer paragraphs land at identical viewport L/R coords. Mechanism: kill main#content's 32px side padding (zero it) and give article#top.profile 50px (hub-equivalent). 1-ID specificity beats existing 0-ID class rules. */
html body.home main#content.site-main {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body.home main#content > .page-content > article.profile,
html body.home article#top.profile {
  padding-left: 50px !important;
  padding-right: 50px !important;
  padding-bottom: 60px !important;
}/* HOME-FOOTER-TYPOGRAPHY-MATCH-HUB 2026-04-28 — body.home main#content...p rule (line ~4414) sets all home-card p to Lora 17px black with !important, overriding the footer-paragraph rule at line ~3102 (which sets Inter 0.72rem #8a7d54 muted gold for any article.profile > p:has(small)). Specificity (1,2,3) for prose rule vs (0,1,5) for footer rule — prose wins, hijacks the footer paragraphs as collateral. Re-apply hub footer typography on home footer paragraphs only. Selector spec (1,2,4) beats (1,2,3). */
body.home article#top.profile > p:has(small) {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  color: #8a7d54 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
}
body.home article#top.profile > p:has(small) > small {
  color: inherit !important;
  font-family: inherit !important;
}/* ENI-STAT-DEPILL 2026-04-28 — strip pill embellishment from .eni-stat (the "11 ready / 85 awaiting / 231 topic pages / 26 more in pipeline" stats on section index pages). They were misread as clickable buttons; per Rick: informational only, no embellishment. */
.eni-stat {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-weight: normal !important;
  box-shadow: none !important;
}
.eni-stat .eni-num {
  color: inherit !important;
  font-weight: 600 !important;
}
.eni-stats {
  gap: 1.25em !important;
  justify-content: center !important;
}


/* INDEX-HIDE-READINGTIME 2026-04-28 — hide auto-injected reading-time line on section index pages (profile--index). Index pages have no prose content; "20 min read / 4,584 words / SPECIALIST" is meaningless and misleading there. Per Rick. */
article.profile.profile--index .reading-time {
  display: none !important;
}/* MENU-ACTIVE-STATE 2026-04-28 — wayfinding: when reader is in a section, the menu item for that section is bold + accent gold + underlined. The parent-prefix match is set by sitewide JS (MENU-ACTIVE-JS marker). Critical for wayfinding on per-scientist pages and topic-page stubs where the H1 doesn't carry section context. Per Rick: "I didn't know where I was in the site." */
.esp-topnav a.active,
.esp-topnav a.esp-menu-active {
  font-weight: 700 !important;
  color: #c2a84e !important;          /* MENU-ACTIVE-NO-UNDERLINE-COLOR-GOLD 2026-05-01: was #2a2010 + gold underline; now gold label, no underline */
  border-bottom: 0 !important;        /* was: 2px solid #c2a84e */
  padding-bottom: 0 !important;       /* was: 2px (reserved space for the underline) */
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* BREADCRUMB-BRIGHTEN 2026-04-28 — was dim/hard to read; raise opacity so wayfinding signal is visible. */
#section-indicator.visible .ctx-left > .esp-breadcrumbs,
.esp-breadcrumbs {
  opacity: 1 !important;
  font-weight: 600 !important;
}


/* DROPCAP-UTILITY-KILL 2026-04-28 v4 — extended scope. Drop-cap should NEVER fire on:
   - utility/navigation paragraphs (footer-nav siblings, hub-links-label, page-footer)
   - ANY paragraph inside a stub placeholder page (profile--stub) — including section descendants */
nav.footer-nav ~ p::first-letter,
nav.footer-nav + p::first-letter,
.hub-links-label::first-letter,
p.hub-links-label::first-letter,
p:has(small)::first-letter,
article.profile.profile--stub p::first-letter,
article.profile.profile--stub section p::first-letter,
.stub-notice::first-letter,
p.stub-notice::first-letter {
  float: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  text-shadow: none !important;
  background: transparent !important;
}


/* H1-SMART-COLLAPSE-CSS-NEUTRALIZE 2026-04-28 — feature scrapped (minimal vertical savings). Force the compact class to behave like the natural state so even if any stale class lingers from cache or future code, no visual change occurs. */


/* GLASS-EDGE-DISABLE 2026-04-28 — Rick: glass/frosted-edge effect is now an accidental bug; disable sitewide. Underlying rules preserved in CSS for revisit:
   - TOPNAV-BLUR-BG-ALPHA-20 (esp-topnav::after) — original rule untouched
   - CHIP-INSIDE-RAILS (chip backdrop) — original rule untouched
   - compact-state ::after — original rule untouched
   This block hides the strip pseudo-elements + kills backdrop-filter sitewide on the chip elements. */
.esp-topnav::after,
article.profile .esp-topnav::after,
article.profile header.profile-header-wrap::after,
header.profile-header-wrap::after {
  display: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
#section-indicator,
#section-indicator .ctx-inner,
#section-indicator.visible .ctx-inner {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* HEADER-STICKY-TOP-REALIGN 2026-04-30 EVE — supersedes HEADER-STICKY-FIX 2026-04-28.
   The 2026-04-28 fix set top:151px when menu y_bot was 151. On 2026-04-30 the
   TOPNAV-BEVEL-TILE block added `padding-bottom:14px` to .esp-topnav, growing
   menu height by ~3px → new menu y_bot = 153.59375. Header sticky top was
   stale: at scroll=0 header flowed at y=153.59 but tried to stick at 151 on
   scroll → 2.6px jitter Rick reported as "moves 1-2px on scroll-up."
   Cascade dependency: if .esp-topnav padding-bottom or font-size changes again,
   re-measure menu y_bot and update both top values below.
   Admin-bar mode: menu sticky-top is 144 (not 112) → menu y_bot = 185.59. */
html body article.profile header.profile-header-wrap {
  top: 150px !important; /* INT-LOCKED 2026-05-01 = 112 menu_top + 38 menu_height */ /* RECOMPUTED 2026-05-01 menu y_bot now 149.59 after padding-bottom dropped from 14 to 10 with bevel-tile wrapper deletion */
  transition: none !important;
  background: #fdfcf8 !important;
  background-color: #fdfcf8 !important;
}
body.admin-bar html body article.profile header.profile-header-wrap,
html body.admin-bar article.profile header.profile-header-wrap {
  top: 182px !important; /* INT-LOCKED 2026-05-01 = 144 + 38 */ /* RECOMPUTED 2026-05-01 admin-bar menu y_bot = 144+37.59 */
}


/* HEADER-STICKY-FULLWIDTH 2026-04-28 — extend sticky header to article.profile's full 900px width so the 50px side slivers don't expose scrolling content. Header was 800px (article 900px - article padding 50px each side); we now negative-margin -50px each side and re-pad 50px to keep H1 content position identical while solid bg covers full card width. */
html body article.profile header.profile-header-wrap {
  margin-left: -50px !important;
  margin-right: -50px !important;
  padding-left: 50px !important;
  padding-right: 50px !important;
}


/* HEADER-STICKY-FULLWIDTH-COMPENSATE 2026-04-28 — HEADER-STICKY-FULLWIDTH widened the header box by 50px each side via negative margins. Absolute-positioned children (.esp-searchform at right:0; .src-toggle at right:234px) shifted +50px to the right of canonical. Compensate by adding 50px to their right values on desktop so they return to canonical card-edge alignment (search L=777 R=1017; src-toggle flush left of search). */
@media (min-width: 601px) {
  html body article.profile header.profile-header-wrap > .esp-searchform,
  html body article.profile header.profile-header-wrap .esp-searchform {
    right: 50px !important;
  }
  }


/* GHOST-GLASS-KILL 2026-04-28 — TOPNAV-BLUR-CANONICAL + COMPACT-WRAP-BLUR ::after pseudo-elements
   sat dormant after GLASS-EDGE-DISABLE 2026-04-28 (which only scoped .compact-pagename) and were
   still painting blur(20px) saturate(180%) at the menu/site-branding seam, creating a ghost
   visible under bevel-mirror experiments. Hard-disable both ::after pseudo-elements sitewide.
   Underlying source rules preserved above for revisit; this block neutralizes them at runtime. */
@media (min-width: 601px) {
  html body .esp-topnav::after,
  html body article.profile .esp-topnav::after {
    display: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
    box-shadow: none !important;
    content: none !important;
  }
}

/* FOOTER-NAV-CANONICAL 2026-04-28 — moved from sitewide_footer.py inline emission
   so generators no longer emit a stray <style> at article-children level.
   See memory/feedback_unbreakable_rules_mandate.md + Radin hub fix. */
.footer-nav{display:flex;justify-content:center;gap:0.6rem;margin:1.5rem 0 0.6rem 0;flex-wrap:wrap;}
.footer-nav a{display:inline-block;padding:0.35rem 0.95rem;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:#6b6760 !important;border:1px solid #c8c4bc;border-radius:3px;text-decoration:none !important;background:transparent;transition:color 0.2s,border-color 0.2s,background 0.2s;font-weight:500;}
.footer-nav a:hover{color:#1a1814 !important;border-color:#8b6914;background:rgba(139,105,20,0.04);}
.footer-nav a:visited{color:#6b6760 !important;}
@media (max-width:600px){.footer-nav{gap:0.4rem;}.footer-nav a{padding:0.3rem 0.7rem;font-size:0.65rem;}}

/* FOOTER-META-WRAPPER 2026-04-28 — sitewide_footer.render_meta_paragraphs now wraps
   the 3 meta-<p> in <div class="profile-footer-meta"> so they are contained,
   not floating siblings of nav.footer-nav. Visual default: inherit from inline
   styles already on each <p>; the wrapper just gives DOM containment. */
.profile-footer-meta{margin:0;padding:0;}

/* FN-BACK-MOBILE 2026-04-28 — moved from inline emission in rpc_generator.py
   and grounded_generator.py (which previously emitted a <style> block at
   article-children level on every spoke + hub). Single source of truth here. */
@media (max-width:600px){
  .fn-back{font-size:1.125em !important;}
}

/* HUB-INLINE-STYLES-CANONICAL 2026-04-28 — moved from inline emission in
   grounded_generator.py (ref_css block) which previously emitted a
   1134-char <style> at article-children level on every hub regen. All
   rules below were sitewide-applicable, not truly hub-specific. Single
   source of truth here per feedback_single_css_source.md. */
.page .entry-header .entry-title,
header.entry-header h1.entry-title,
h1.entry-title{display:none !important;}
.profile a.hub-ext,
article.profile a.hub-ext{
  color:inherit !important;
  text-decoration:none !important;
  text-decoration-line:none !important;
  background-image:none !important;
  box-shadow:none !important;
  border-bottom:1px dotted #b8b3a8 !important;
  transition:border-color 0.2s;
}
article.profile a.hub-ext:hover{
  border-bottom:1px dotted #1a1814 !important;
  color:inherit !important;
}
article.profile a.hub-ext:visited{color:inherit !important;}
article.profile sup.fn-sup{display:none !important;}
article.profile.show-sources sup.fn-sup{display:inline !important;}
.src-toggle{display:inline-flex;align-items:center;gap:0.6em;font-size:0.28em;margin-left:0.9em;color:#6b6760;letter-spacing:0.05em;text-transform:uppercase;vertical-align:middle;font-weight:400;line-height:1;}
.src-toggle label{cursor:pointer;display:inline-flex;align-items:center;gap:0.25em;}
.src-toggle input[type=radio]{margin:0;accent-color:#8b6914;transform:scale(0.9);vertical-align:middle;}
@media (max-width:600px){
  .src-toggle{font-size:0.35em;margin-left:0.5em;}
}

/* ========================================================================
   BOOK-METADATA-BOX-CANONICAL 2026-04-30
   Locked layout for the metadata block on every book page sitewide.
   Tweak HERE, all books reflect.
   ====================================================================== */
.book-details-after-header {
  margin-left: 0;
  clear: left;
}
.book-details-box {
  margin: 0.4rem 0 0.3rem 0;
  padding: 0.4rem 0;
  border-top: 1px solid #e6e2da;
  border-bottom: 1px solid #e6e2da;
}
.book-details-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0 50px;
}
.book-details-cell {
  text-align: center;
}
.book-details-label {
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8b8580;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 0.15rem;
}
.book-details-value {
  font-size: 0.85rem;
  color: #3a3631;
  line-height: 1.25;
  white-space: nowrap;
}
.book-details-link {
  color: #3a3631;
  text-decoration: none;
  border-bottom: 1px solid #cdc6b8;
  transition: border-color 0.15s ease;
}
.book-details-link:hover,
.book-details-link:focus {
  border-bottom-color: #3a3631;
}

/* ========================================================================
   BREADCRUMB-UNDER-H1 2026-04-30
   Hide the ::before ◉ icon on .esp-breadcrumbs since the under-H1
   position doesn't need a leading marker. Paired with JS swap that
   moves the breadcrumb out of the chip into under H1.
   ====================================================================== */
nav.esp-breadcrumbs::before {
  content: '' !important;
  display: none !important;
  margin-right: 0 !important;
}

/* ========================================================================
   TOPNAV-BEVEL-TILE 2026-04-30
   SVG image = vertically flipped chip bevel pixel sequence:
   cream / pale taupe / medium taupe / pale gold (top to bottom).
   ====================================================================== */
html body main#content .esp-topnav.esp-topnav,
html body main.site-main#content .esp-topnav.esp-topnav {
  position: sticky;
  padding-bottom: 14px !important;
  margin-bottom: 0 !important;
}
/* TOPNAV-BEVEL-TILE-AFTER KILLED 2026-04-30 evening (re-killed after stale-snapshot regression) */

/* MENU-LR-INSETS-KILLED 2026-04-30 evening — Rick: 'left and right side of the menu items there is an orange slash gold vertical line boxing it in... remove it completely.' Both MENU-FRAME-4SIDES 2026-04-28 + TOPNAV-NO-BOTTOM-LINE 2026-04-30 blocks deleted. Menu now has zero inset box-shadows. */

/* NO-SOURCES-OPT-OUT 2026-04-30 EVE — pages tagged <article class="profile no-sources">
   hide the Sources toggle (which sitewide JS auto-injects into the H1 row).
   For pages without citations (rosters, indexes, section landings) where the
   toggle is meaningless and visually overlaps long titles. Documented opt-out
   flag in templates/canonical_page.html. */
article.profile.no-sources .src-toggle,
article.profile.no-sources header.profile-header-wrap .src-toggle{display:none !important;}

/* BOOK-H2-VERTICAL-ALIGN 2026-05-01 — push the book-page H2.spoke-title down
   13px so its top sits at y=247, matching the hub portrait/lede top. Spec:
   Rick — "imeant h2" (override of his earlier H1 phrasing) confirming the
   visible primary book-title heading is the alignment target, not the
   small back-link H1. Empirical 29px margin-top tested in-tab; produces
   exactly y=247 (was y=234 with default -13px). Hub pages do NOT match
   the [class*="profile--book-"] selector. */
html body article#top.profile[class*="profile--book-"] h2.spoke-title {
  /* Visual alignment with hub portrait/drop-cap top at y=241. H2 box-top
     at y=241 was insufficient — line-height padding above the text glyphs
     means the visible text top was at y=270 (29px below box top). Total
     translateY(-35px) puts the text-glyph top at y=241, matching the
     portrait FRAME top (which has no internal padding). margin-top:29 +
     transform:-35 — header.profile-header-wrap margin-bottom:30 dominates
     margin-collapse so margin alone can't move h2; transform bypasses. */
  margin-top: 29px !important;
  transform: translateY(-35px) !important;
}
/* Cover + lede: same -35px transform so the H2-to-content gap matches the
   pre-transform distance. Without this, the H2 visually pulls up 35px
   while cover+lede stay at their original document y, ballooning the gap. */
html body article#top.profile[class*="profile--book-"] p.spoke-lede {
  transform: translateY(-35px) !important;
}


/* ============================================================== */
/* HEADER-MERGE-2026-05-02 — CSS adjuncts to the PHP restructure.  */
/* header.php now renders H1 + breadcrumb + searchform server-side */
/* inside <header class="esp-sticky-chrome"> > .esp-page-context.  */
/* The inline <header.profile-header-wrap> in article body is now  */
/* hidden via display:none below.                                  */
/* ============================================================== */

/* 1. Gray out the final breadcrumb crumb across all page types
      (hub / spoke / book). Was #2a2620 (near-black, bold-ish);
      now light warm gray for de-emphasis. Per Rick 2026-05-02. */
html body .esp-breadcrumbs .cur {
  color: #9b958a !important;
  font-weight: normal !important;
}

/* 2. Hide the inline <header class="profile-header-wrap"> in article
      body. Already-published pages still have this in their content;
      next-regen pages will stop emitting it. Hidden everywhere. */
html body article.profile > header.profile-header-wrap {
  display: none !important;
}

/* 3. Layout for the new .esp-page-context block inside .esp-sticky-chrome.
      Two-row grid: H1 + searchform on top, breadcrumb below. Mirrors the
      prior visual layout but inside one sticky container — no cross-
      container margin-collapse, no sticky-top:152 magic constant. */
.esp-sticky-chrome .esp-page-context {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "h1     search"
    "bcr    bcr";
  align-items: center;
  gap: 4px 16px;
  padding: 12px clamp(12px,3vw,2rem) 14px clamp(12px,3vw,2rem);
}
.esp-sticky-chrome .esp-page-context .esp-section-h1 {
  grid-area: h1;
  margin: 0 !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
}
/* BIO-PK-H1-OVERLAP-FIX 2026-06-22 PF-187 — reserve the absolute Sources toggle's
   horizontal band so a wrapped long chrome H1 (e.g. "Bio-PK / Distant Mental
   Influence on Living Systems") cannot run UNDER the toggle. The toggle
   (esp_custom_css rule SRC-TOGGLE-CHROME-H1) is position:absolute, width:155px,
   pinned at right:240px — it occupies the rightmost ~155px of the H1 (1fr) grid
   column at every desktop width, so without a reserve the title's first line
   wraps into it. 170px = 155px toggle + ~15px gap, confirmed to clear at
   768/900/1024/1280 with the title still wrapping to ≤2 lines on the widest.
   Desktop-only: below 768px the 1fr H1 column itself collapses under the
   absolute toggle (a PRE-EXISTING narrow-width cramp that needs a layout
   RESTRUCTURE, not a reserve — do NOT over-squeeze it here). Coupling: if the
   toggle's right:/width: changes, update this reserve (feedback_sticky_top_coupling). */
@media (min-width: 768px) {
  .esp-sticky-chrome .esp-page-context .esp-section-h1 { padding-right: 170px; }
}
.esp-sticky-chrome .esp-page-context .esp-searchform {
  grid-area: search;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.esp-sticky-chrome .esp-page-context .esp-breadcrumbs {
  grid-area: bcr;
  margin: 0 !important;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* 4. Drop the magic 152px sticky-top constant on the OLD second sticky
      (no longer needed since profile-header-wrap is hidden). Override
      the rule from main.css:65-67. */
html body article.profile header.profile-header-wrap {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* CHROME-H1 PHENOMENA/METHODS/THEORY 2026-05-03 — hide duplicate inline body H1
   on phenomena/methods/theory leaves. Body class .has-chrome-h1 is added by
   esp_chrome_h1_text() returning non-empty (functions.php body_class filter).
   Scientist pages have .has-chrome-h1 too but their generator omits the
   inline H1 inside .profile-header-wrap, so the selector is a no-op there. */
body.has-chrome-h1 article.profile > header.profile-header-wrap > h1 {
  display: none !important;
}


/* MULTILEVEL-NAV 2026-06-17 PF-164 -- primary-menu dropdowns (Research / Background) */
.esp-topnav .esp-nav-group{position:relative;display:inline-block;overflow:visible;}
.esp-topnav{overflow:visible;}
.esp-topnav .esp-nav-parent{font:inherit;color:#6b6760;background:none;border:0;cursor:pointer;padding:0 10px;border-radius:3px;letter-spacing:inherit;text-transform:inherit;}
.esp-topnav .esp-nav-group:hover .esp-nav-parent,.esp-topnav .esp-nav-group:focus-within .esp-nav-parent,.esp-topnav .esp-nav-parent:hover{color:#1a1814;background:rgba(139,105,20,0.07);}
.esp-topnav .esp-nav-group.is-current > .esp-nav-parent{color:#1a1814;font-weight:500;}
.esp-topnav .esp-nav-caret{margin-left:4px;font-size:0.7em;vertical-align:1px;}
.esp-topnav .esp-submenu{position:absolute;top:100%;left:7px;right:auto;transform:none;min-width:0;background:#fdfcf8;border:1px solid #e3d6a8;box-shadow:0 6px 20px rgba(20,16,8,0.16);padding:5px 0;display:none;z-index:1200;text-align:left;text-transform:none;}/* PF-165: dropdown anchored under its parent label (left:7px skips the leading "|" separator) + content-fit width (min-width:0; was center+210px = funky offset + wide dead space) */
.esp-topnav .esp-nav-group:hover .esp-submenu,.esp-topnav .esp-nav-group:focus-within .esp-submenu,.esp-topnav .esp-submenu.is-open{display:block;}
.esp-topnav .esp-submenu a{display:block !important;white-space:nowrap;padding:8px 18px !important;margin:0 !important;color:#3a352c !important;border-radius:0 !important;font-weight:400 !important;text-transform:none !important;letter-spacing:normal !important;}
.esp-topnav .esp-submenu a:hover{background:rgba(139,105,20,0.10) !important;color:#1a1814 !important;}
.esp-topnav .esp-submenu a.current{color:#1a1814 !important;font-weight:500 !important;background:rgba(139,105,20,0.06) !important;}
@media (max-width:600px){
.esp-topnav .esp-submenu{position:static;transform:none;left:auto;min-width:0;border:0;box-shadow:none;background:transparent;padding:0 0 6px;}
.esp-topnav .esp-submenu a{padding:5px 22px !important;font-size:0.92em;white-space:normal;}
}
/* END MULTILEVEL-NAV PF-164 */


/* MENU-FIX PF-164 2026-06-17 -- uniform separators incl. dropdown groups, crisp caret, clean dropdown */
.esp-topnav .esp-nav-group{display:inline-block;margin-left:24px;}
.esp-topnav > .esp-nav-group:first-child{margin-left:0;}
.esp-topnav .esp-nav-group:not(:first-child)::before{content:"|";color:#6b6760;}
.esp-topnav .esp-nav-parent{padding:4px 0;}
.esp-topnav .esp-submenu a::before,.esp-topnav .esp-submenu a::after{content:none !important;}
.esp-topnav .esp-nav-caret{font-size:0;line-height:0;display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:7px;vertical-align:middle;}
/* END MENU-FIX PF-164 */


/* ────────────────────────────────────────────────────────────────────────
   MOBILE-NAV PF-213 (2026-07-02, Rick: "the regular menu just doesn't scale
   on phones") — hamburger <=899px (the site's standing mobile breakpoint).
   Desktop >899px: burger hidden, nothing else changes. Mobile closed: the
   nav strip is hidden entirely (kills the 419px horizontal overflow).
   Mobile open (body.esp-nav-open): flat vertical panel; the Research /
   Background parents render as small-caps section LABELS with their
   children always expanded — no nested taps. Bank-trust register: cream
   panel, gold hairlines, Inter, no animation flourish.
   ──────────────────────────────────────────────────────────────────────── */
html body header.esp-sticky-chrome .esp-nav-burger{display:none !important;}
@media (max-width:899px){
  header.esp-sticky-chrome{position:relative;}
  html body header.esp-sticky-chrome .esp-nav-burger{
    display:flex !important;flex-direction:column;justify-content:center;gap:4px;
    position:absolute;top:44px;right:12px;width:42px;height:38px;
    padding:8px 9px;box-sizing:border-box;
    background:#fdfcf8;border:1px solid #e3d6a8;border-radius:6px;
    cursor:pointer;z-index:99998; /* above the 32px fixed #section-indicator (99997) */
  }
  /* the header logo lockup (343px) was the residual horizontal overflow on
     phones — cap it against the VIEWPORT (its parent row is itself oversized,
     so the sitewide max-width:100% cap never helped) */
  html body header.esp-sticky-chrome .site-branding img.custom-logo{
    max-width:calc(100vw - 120px) !important;width:auto !important;height:auto !important;
  }
  .esp-burger-bar{display:block;height:2px;background:#5a4718;border-radius:1px;}
  body.esp-nav-open .esp-nav-burger{background:#f3ead0;border-color:#8a6d2b;}

  /* closed: hide the desktop strip completely */
  html body .esp-topnav{display:none !important;}

  /* open: flat vertical panel in flow */
  html body.esp-nav-open .esp-topnav{
    display:block !important;position:static !important;top:auto !important;
    padding:6px 18px 14px !important;text-align:left;
    border-top:1px solid #e3d6a8 !important;border-bottom:1px solid #e3d6a8 !important;
  }
  body.esp-nav-open .esp-topnav > a{
    display:block !important;padding:11px 6px !important;margin:0 !important;
    font-size:15px;
  }
  body.esp-nav-open .esp-topnav .esp-nav-group{display:block;margin-left:0;}
  body.esp-nav-open .esp-topnav .esp-nav-group:not(:first-child)::before{content:none;}
  /* the pipe separators + link margins live in esp_custom_css at (0,2,4) with
     !important — beat them with a fuller chain for the open panel */
  html body.esp-nav-open header.esp-sticky-chrome nav.esp-topnav > a::before,
  html body.esp-nav-open header.esp-sticky-chrome nav.esp-topnav > a::after{content:none !important;}
  html body.esp-nav-open header.esp-sticky-chrome nav.esp-topnav > a{
    display:block !important;margin:0 !important;padding:11px 6px !important;text-align:left !important;
  }
  body.esp-nav-open .esp-topnav .esp-nav-parent{
    display:block;width:100%;text-align:left;padding:11px 6px 4px;
    pointer-events:none;   /* section label, not a control, on mobile */
    font-family:Inter,sans-serif;font-size:12px;letter-spacing:.08em;
    text-transform:uppercase;color:#8a6d2b;background:none;
  }
  body.esp-nav-open .esp-topnav .esp-nav-caret{display:none;}
  body.esp-nav-open .esp-topnav .esp-submenu{
    display:block !important;position:static !important;min-width:0;
    border:0 !important;box-shadow:none !important;background:transparent !important;
    padding:0 !important;
  }
  body.esp-nav-open .esp-topnav .esp-submenu a{
    padding:10px 6px 10px 18px !important;font-size:15px;white-space:normal;
  }
}
/* END MOBILE-NAV PF-213 */

/* PF-218 (2026-07-07, Rick: "hamburger only on phones, normal menu on tablets"):
   hamburger is now PHONE-ONLY. In the tablet band (768-899px) show the full
   horizontal .esp-topnav menu and hide the .esp-nav-burger. Verified the 6-item
   menu fits with zero overflow at 768/820/899. Phones <=767px keep the hamburger;
   desktop >=900px unchanged. */
@media (min-width:768px) and (max-width:899px){
  html body header.esp-sticky-chrome .esp-nav-burger{ display:none !important; }
  html body header.esp-sticky-chrome .esp-topnav{ display:flex !important; }
}