/* the72fund theme sets :root{font-size:22px} globally, but this stylesheet's
   rem values were authored against the standard 16px root, inflating every
   rem-based size by 22/16 (1.375x). Force the standard root size back for
   this page only (this stylesheet loads only on the Timeline Article
   template) so rem math resolves as intended. */
:root{font-size:16px !important;}

:root{
  --font-display:"Averia Serif Libre",Georgia,serif;
  --font-body:"Work Sans",system-ui,sans-serif;

  --ink:#16283c;
  --paper:#faf8f5;
  --panel:#ffffff;
  --rule:#ddd8d0;
  --rule-soft:#e9e5de;
  --muted:#5f6b7a;
  --prose:#33414f;

  --e1:#2e5c8a;
  --e2:#1f7a6b;
  --e3:#b5801f;
  --e4:#a9436a;
  --e5:#4a4a66;
  --focus:#2e5c8a;

  --t1:#3f7a3f;
  --t2:#c2762c;
  --t3:#6a7f3f;
  --t4:#2f6f7a;
  --t5:#7a3f5a;
  --t6:#4a5a8f;
  --t7:#9c5a9c;
  --t8:#5a3f8f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Safety net: the72fund theme's global style.css sets aggressive defaults
   (letter-spacing, text-transform, list-style, table width, etc.) on bare
   HTML tags site-wide. Class-based rules below already out-specificity
   these for the properties they set explicitly, but this catches any gaps
   (a property the global rule sets that a specific rule below doesn't
   mention) without touching intentional styling, since any class selector
   still wins over this due to higher specificity. */
main :is(h1,h2,h3,h4,h5,h6,p,span,a,li,ul,ol,table){
  letter-spacing:normal;
  text-transform:none;
  width:auto;
}
.wrap, .wrap *{text-rendering:auto;}
main :is(ul,ol){list-style-type:disc; margin:0; padding:0;}
main a{text-decoration:none; color:inherit;}
body{
  margin:0;
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  font-weight:400;
  line-height:1.6;
  position:relative;
  padding-top:66px;
}
/* Only the real (position:fixed) header's height needs to be reserved
   here — the breadcrumb bar below it is position:sticky now, so it
   occupies its own space in normal flow instead of needing a second
   reservation the way the old position:fixed version did.
   The site's own js/functions.js sets an inline padding-top on
   .page-content equal to the fixed header's height, to clear it; this
   overrides that redundant inline value (via !important, since inline
   styles otherwise beat external stylesheets) so the two don't stack. */
#main-content.page-content{padding-top:0 !important;}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:200;
  background:rgba(255,255,255,0.8);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 2px 4px rgba(12,62,96,0.2);
}
.site-header-inner{
  position:relative;
  max-width:1440px;
  margin:0 auto;
  display:flex;
  align-items:center;
  padding:14px 32px;
}
.site-logo{display:flex;flex:0 0 auto}
.site-logo img{display:block;height:38px;width:auto}

/* --- primary nav, transcribed from the72fund.org theme ------------
   .header_menu a  border:3px solid #2f6d84; border-radius:100px; padding:12px 24px
   .special-btn  background:#2f6d84; color:#fff; border-radius:100px; padding:4px 24px
   centered in the row; hamburger stays visible at every width, like
   the72fund.org's own header; nav + Insights hide below 1165px ----- */
.site-nav{
  display:flex;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.site-nav-menu{display:flex;align-items:center;gap:0.85rem;list-style:none;margin:0;padding:0}
.site-nav-menu a{
  display:block;
  padding:0.5rem 1.1rem;
  border:2px solid #2f6d84;
  border-radius:100px;
  font-family:var(--font-body);
  font-size:0.85rem;
  font-weight:600;
  color:#2f6d84;
  text-decoration:none;
  white-space:nowrap;
}
.site-nav-menu a:hover{background:rgba(47,109,132,0.08)}

.site-insights-btn{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  margin-left:auto;
  padding:0.5rem 1.15rem;
  border-radius:100px;
  background:#2f6d84;
  color:#fff;
  font-family:var(--font-body);
  font-size:0.85rem;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.site-insights-btn:hover{background:#255769}
.site-insights-btn img{width:15px;height:15px;display:block}

.site-nav-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.4rem;
  height:2.4rem;
  margin-left:0.75rem;
  padding:0;
  border:none;
  background:none;
  cursor:pointer;
  flex:0 0 auto;
}
.hamburger-icon,.hamburger-icon::before,.hamburger-icon::after{
  display:block;
  width:1.4rem;
  height:2px;
  background:var(--ink);
  border-radius:2px;
}
.hamburger-icon{position:relative}
.hamburger-icon::before,.hamburger-icon::after{content:'';position:absolute;left:0}
.hamburger-icon::before{top:-6px}
.hamburger-icon::after{top:6px}

/* --- slide-out menu, transcribed from the72fund.org's slicknav -----
   #slicknav  position:fixed; right:0; width:480px; background:#0c3e60
   .slicknav-content  padding:65px 90px 85px 24px
   .slicknav-close  43px circle, white, top:30px right:50px
   .slideout_menu a  Work Sans 18px/600, white, padding:19px 0 --------- */
.nav-overlay{
  position:fixed;
  inset:0;
  z-index:210;
  background:#fff;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.25s;
}
.nav-overlay.is-open{opacity:0.7;visibility:visible}

.nav-panel{
  position:fixed;
  top:0;
  right:0;
  z-index:220;
  width:min(420px,100%);
  height:100%;
  overflow-y:auto;
  background:rgb(var(--primary));
  padding:64px 56px 48px 28px;
  transform:translateX(100%);
  transition:transform 0.25s;
}
.nav-panel.is-open{transform:translateX(0)}

.nav-panel-close{
  position:absolute;
  top:20px;
  right:20px;
  width:2.6rem;
  height:2.6rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  background:#fff;
  padding:0;
  cursor:pointer;
}
.close-x{position:relative;width:1rem;height:1rem}
.close-x::before,.close-x::after{
  content:'';
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:2px;
  border-radius:2px;
  background:rgb(var(--primary));
}
.close-x::before{transform:rotate(45deg)}
.close-x::after{transform:rotate(-45deg)}

.nav-panel-menu{list-style:none;margin:0;padding:0}
.nav-panel-menu a{
  display:block;
  padding:0.8rem 0;
  border-bottom:1px solid rgba(255,255,255,0.18);
  font-family:var(--font-body);
  font-size:1.05rem;
  font-weight:600;
  color:#fff;
  text-decoration:none;
}
.nav-panel-menu a:hover{opacity:0.75}

.nav-panel-social{display:flex;gap:1rem;margin-top:1.4rem}
.nav-panel-social a{display:flex;width:26px;height:26px}
.nav-panel-social svg{width:26px;height:26px;fill:#fff;transition:opacity 0.25s}
.nav-panel-social a:hover svg{opacity:0.75}

/* --- breadcrumb row: back-to-Insights + persistent search --------- */
header.header{top:0;}
/* This was `position:fixed`, which triggered a well-known iOS Safari bug:
   a fixed element can go completely unpainted on first load, and nothing
   short of an actual user scroll reliably brings it back. Three attempts
   at working around that (dropping backdrop-filter for an opaque flat
   background, GPU-layer promotion via translateZ/will-change, and finally
   a JS trick that forced a repaint by toggling display:none/'' on load)
   all failed on a real device — the JS version even made it WORSE, since
   it depends on requestAnimationFrame actually firing to restore
   visibility, and that can itself be delayed or suspended by the browser.
   `position:sticky` sidesteps the whole bug class (it's never pulled into
   its own compositing layer the way `fixed` is), but a sitewide
   `overflow:hidden` on .page-wrapper — there to clip decorative background
   art on pages that have it — was blocking it from ever actually engaging:
   any ancestor with overflow other than visible becomes the element's
   scroll container for sticky purposes, and .page-wrapper itself never
   scrolls, so "stuck" could never trigger. So it's turned off just for
   this template rather than sitewide — see the body.page-template-page-
   timeline-article-php rule further down. With that ancestor no longer in
   the way, position:sticky actually sticks, giving back the "stays
   visible while scrolling" behavior with none of position:fixed's
   compositing-bug baggage.

   That override originally just set `overflow:visible`, which turned out
   to also un-clip things that only ever relied on .page-wrapper's overflow
   for CLIPPING, not for blocking sticky — mainly the mobile off-canvas nav
   (.slicknav), which sits off-screen at a large negative `right` offset
   when closed. With nothing clipping that anymore, real mobile browsers
   were expanding the page's layout viewport to fit it, which is what
   showed up as a several-pixel gap of unstyled space down the right edge
   on an iPhone (confirmed: window.innerWidth/scrollWidth were larger than
   document.documentElement.clientWidth on this template, and matched
   exactly on every other page, which still has the sitewide
   overflow:hidden). `overflow-x:clip` fixes that: unlike `hidden`, setting
   `clip` on only one axis does NOT force the other axis's `visible` to
   `auto` (a real CSS rule — mixing visible with hidden/scroll/auto on the
   same element normally upgrades the visible one to auto, which would have
   silently made .page-wrapper a scroll container again and broken sticky
   right back). `clip` was verified to keep overflow-y genuinely `visible`
   (not auto-upgraded) and sticky stayed pinned in testing. */
.site-breadcrumb-fixed{
  position:sticky;
  top:66px;
  z-index:99;
  background:#d7edf7f0;
}
body.page-template-page-timeline-article-php .page-wrapper{overflow-x:clip; overflow-y:visible;}
.site-breadcrumb{
  display:flex;
  align-items:center;
  gap:0.75rem;
  max-width:1440px;
  margin:0 auto;
  padding:0.55rem 32px;
  border-top:1px solid var(--rule-soft);
}
.breadcrumb-back{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  font:inherit;
  font-family:var(--font-body);
  font-size:0.82rem;
  color:var(--muted);
  text-decoration:none;
  white-space:nowrap;
}
.breadcrumb-back:hover{color:var(--ink)}
.breadcrumb-back .arrow{font-family:var(--font-body);line-height:1}

@media (max-width:1165px){
  .site-nav,.site-insights-btn{display:none}
}

@media (max-width:640px){
  .site-header-inner{padding:10px 20px}
  .site-logo img{height:32px}
  .site-breadcrumb{padding:0.5rem 20px;flex-wrap:wrap;row-gap:0.4rem}
  .nav-panel{padding:56px 28px 40px}
  .controls{margin-left:0;flex:1 1 auto;justify-content:flex-end}
  .search-input{width:100%;max-width:9rem}
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:url("assets/paper-texture.png");
  background-repeat:repeat;
  opacity:0.1;
  pointer-events:none;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:
    url("assets/watercolor-blue-left.webp"),
    url("assets/watercolor-pink-right.webp");
  background-repeat:no-repeat,no-repeat;
  background-position:left top,right bottom;
  background-size:220px auto,220px auto;
  opacity:0.3;
  pointer-events:none;
}

/* The site's own #main-content.page-content is a column flexbox. On a
   flex item, `margin:0 auto` in the cross axis (horizontal, here) makes
   the browser center the item at its own preferred/content width instead
   of stretching it to fill the container — auto margins suppress
   align-items:stretch by design, the same way they'd center a narrower
   block box. .wrap's preferred width came out wider than a phone
   viewport, so it never shrank to fit and overflowed. Setting width:100%
   sidesteps that: the box is explicitly full-width (capped by max-width),
   and the auto margins center whatever's left over once max-width caps
   it on wide screens — same result as before there, correct on narrow
   ones. min-width:0 additionally guards against the separate, unrelated
   min-width:auto flex-shrink floor on the main axis. */
.wrap{max-width:920px;width:100%;min-width:0;margin:0 auto;padding:0 64px;position:relative}
@media (max-width:850px){.wrap{padding:0 50px}}
@media (max-width:600px){.wrap{padding:0 30px}}

.wrap > main{display:block;padding-top:2.75rem}
h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.7rem,3.2vw,2.4rem);
  line-height:1.15;
  letter-spacing:-0.005em;
  margin:0 0 0.7rem;
  max-width:22ch;
}
h2.part-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.6rem,4vw,2.15rem);
  line-height:1.2;
  margin:0 0 0.6rem;
  max-width:24ch;
}
.part-kicker{
  font-family:var(--font-body);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 0.5rem;
}
.standfirst{
  font-family:var(--font-display);
  font-size:clamp(0.92rem,1.1vw,1rem);
  font-weight:300;
  line-height:1.55;
  max-width:56ch;
  margin:0 0 1.4rem;
  color:var(--prose);
}
.standfirst a{color:inherit;text-decoration-color:var(--rule);text-underline-offset:3px}
.standfirst a:hover{text-decoration-color:currentColor}

.part-section{display:block; float:none; width:auto; margin:0 0 1.5rem}
.part-intro{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.68;
  color:var(--prose);
  max-width:58ch;
  margin:0 0 2rem;
}
.part-divider{
  margin:4rem 0 3rem;
  text-align:center;
}
.part-divider::before,
.part-divider::after{
  content:'';
  display:block;
  width:550px;
  height:1px;
  margin-inline:auto;
  background:linear-gradient(to right,
    rgba(var(--primary),0) 0%,
    rgba(var(--primary),1) 25%,
    rgba(var(--primary),1) 75%,
    rgba(var(--primary),0) 100%);
}
.part-divider::before{margin-bottom:2.5rem}
.part-divider::after{margin-top:2.5rem}
@media (max-width:640px){
  .part-divider::before,
  .part-divider::after{width:290px}
}
.part-divider p{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.05rem;
  color:var(--muted);
  max-width:72ch;
  margin:0 auto;
  line-height:1.6;
}

.ruler{margin:0 0 1rem}
.ruler svg{display:block;width:100%;height:auto;overflow:visible}
.ruler svg .tick{transition:stroke-width 120ms ease,opacity 120ms ease}
.ruler svg .tick-hit{cursor:pointer}
.ruler svg .tick.is-hover{stroke-width:5}
.tick-tooltip{
  position:fixed;
  z-index:1001;
  pointer-events:none;
  transform:translate(-50%,calc(-100% - 10px));
  background:#16283c;
  color:#f4f1ea;
  font-family:var(--font-body);
  font-size:0.8rem;
  line-height:1.4;
  padding:0.5rem 0.7rem;
  border-radius:3px;
  max-width:15rem;
  width:max-content;
  box-shadow:0 6px 18px rgba(0,0,0,0.22);
}
.tick-tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:#16283c;
}
.tick-tooltip .tt-year{opacity:0.65;margin-right:0.4rem;font-variant-numeric:tabular-nums}
.ruler-note, .ruler-note-mobile{
  font-size:0.82rem;
  color:var(--muted);
  margin:0 0 2.5rem;
  max-width:46ch;
  line-height:1.5;
}
/* On mobile this sits directly above the ruler card (not after it, the way
   .ruler-note still does on desktop), paired with .ruler-eyebrow-mobile
   right above it — so it needs a short bottom margin to stay a tight unit
   with the card below, not the wide 2.5rem gap that made sense when it was
   trailing spacing before the era list further down. */
.ruler-note-mobile{display:none; margin-bottom:0.9rem}
/* Both .ruler-eyebrow-mobile and .ruler-eyebrow-desktop reuse .part-kicker's
   exact styling (same font/size/weight/tracking/case/color) for visual
   parity with "Part One · 1908–2011" above — these rules are just the
   responsive display toggles layered on top of it. .part-kicker's own
   0.5rem bottom margin already keeps each eyebrow tight against the
   description line directly below it, on both breakpoints. */
.ruler-eyebrow-mobile{display:none}

/* Fisheye Scrubber — mobile-only condensed timeline with a drag-to-magnify
   interaction. .ruler-scrub collapses to a zero box (display:contents) at
   every width above the mobile breakpoint, so the desktop .ruler/svg/.tick
   markup and behavior above are provably unaffected regardless of whether
   this JS ever runs or a resize crosses the breakpoint mid-session. The
   .ruler element itself is never resized/rewidened on mobile — it stays the
   same condensed, full-container-width strip as desktop; only the JS-driven
   tick x1/x2 positions locally warp during a drag. */
.ruler-scrub{display:contents}
.ruler-preview, .ruler-playhead, .ruler-scrub-year, .ruler-goto-btn{display:none}

@media (max-width:600px){
  /* The whole dial — preview, ruler, and go-to button — reads as one
     contained, tappable instrument (white face, rounded corners) rather
     than loose controls floating on the page. Tall enough that a resting
     thumb has clear room to drag across the strip without covering the
     title or the button above/below it. */
  .ruler-scrub{
    display:block;
    position:relative;
    margin:0 0 0.75rem;
    padding:1.4rem 1.1rem 1.7rem;
    background:var(--panel,#fff);
    border:1px solid var(--rule);
    border-radius:20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
  }

  .ruler-preview{display:flex; align-items:center; gap:0.5rem; margin:0 0 2.75rem}

  .ruler-preview-card{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:0.5rem; padding:0.55rem 0.2rem; text-align:left; font:inherit; background:none; border:none;}
  .ruler-preview-dot{flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--e1)}
  .ruler-preview-title{flex:1 1 auto; min-width:0; font-size:0.88rem; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

  /* Floating year label, pinned to the SAME x as .ruler-playhead (both set
     from the same live focus position by JS — see positionIndicator in
     timeline-article.js) so the bubble always sits exactly on the line
     instead of jumping to wherever the nearest tick happens to be. Only
     its text (the year) changes discretely as you cross from one event to
     the next, and that swap crossfades rather than snapping.
     `top` is set by JS to the exact same value as .ruler-playhead's own
     top, and this -100% (no extra offset) lands the bubble's OWN bottom
     edge exactly there too — so the bubble and the line visibly connect,
     rather than the line's top overshooting past the bubble (which is
     what a few extra px of gap here used to cause). */
  .ruler-scrub-year{
    display:block;
    position:absolute;
    transform:translate(-50%,-100%);
    font-family:var(--font-body);
    font-size:0.75rem;
    font-weight:600;
    color:var(--ink,#16283c);
    background:var(--panel,#fff);
    padding:0.15rem 0.55rem;
    border:1px solid var(--rule);
    border-radius:999px;
    white-space:nowrap;
    pointer-events:none;
    font-variant-numeric:tabular-nums;
    transition:opacity 0.12s ease;
  }

  /* Claim horizontal drags for the fisheye/scrub gesture while still letting
     an initial vertical gesture fall through to normal page scroll. */
  .ruler-scrub .ruler{touch-action:pan-y}
  /* .tick-hit is the desktop IIFE's invisible hover/click target around each
     tick — relying on JS (preventDefault in pointerdown) to stop a tap from
     reaching it turned out not to be fully reliable on a real iPhone, still
     letting the desktop tooltip pop up. Removing it from hit-testing here
     means no tap, synthetic mouse event, or long-press can ever reach it on
     mobile at all — the fisheye drag still works identically since pointer
     events simply pass through to .ruler underneath, which is what drives
     the scrub gesture regardless of which child was actually hit. */
  .ruler-scrub .ruler svg .tick-hit{pointer-events:none}
  /* Taller than the plain aspect-ratio scale would give it, so there's a
     bigger, easier-to-land touch target and the strip reads more like a
     dial gauge than a thin rule. preserveAspectRatio="none" lets this
     stretch independently of the viewBox's horizontal scale. */
  .ruler-scrub .ruler svg{height:60px}
  /* The condensed strip is too narrow for the baked-in 1900/1950/2000
     <text> labels to stay legible once ticks start warping, so hide them
     on mobile; the live preview card's year field replaces that context,
     and it tracks the actual scrub position besides. */
  .ruler-scrub .ruler svg text{display:none}
  .ruler-scrub .ruler svg .tick{cursor:pointer}

  /* Always visible — a resting indicator of "this is the current event",
     not just a drag cursor — colored to the current era and positioned
     live by JS (left/top/height set in positionIndicator, in sync with
     .ruler-scrub-year above). Full opacity: partial alpha here let the
     tick color underneath show through and blend with the line's own
     color, which read as the line and tick being slightly misaligned even
     when they were pixel-exact — solid color removes that illusion.
     Width is 1px wider than the tick's own 2px stroke: the two are
     computed to the same x, but SVG stroke rendering and a CSS div's box
     can round a fractional pixel position differently, which still showed
     as a hairline offset at some positions (most visible at the very first
     tick). The extra width absorbs that rounding difference either way. */
  .ruler-playhead{
    display:block;
    position:absolute;
    width:3px;
    background:var(--ink,#16283c);
    opacity:1;
    transform:translateX(-50%);
    pointer-events:none;
  }

  .ruler-note{display:none}
  .ruler-eyebrow-desktop{display:none}
  .ruler-note-mobile{display:block}
  .ruler-eyebrow-mobile{display:block}

  .ruler-goto-btn{
    display:block;
    width:100%;
    margin-top:1rem;
    padding:0.7rem;
    background:var(--panel,#fff);
    color:var(--ink,#16283c);
    border:1px solid var(--rule);
    border-radius:999px;
    font-family:var(--font-body);
    font-size:0.85rem;
    font-weight:600;
    text-align:center;
    cursor:pointer;
  }
  .ruler-goto-btn:active{background:var(--rule-soft)}
}

.topic-index{
  display:flex;
  flex-wrap:wrap;
  gap:0.55rem;
  margin:0 0 1rem;
  padding:0;
}
.topic-chip{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font:inherit;
  font-family:var(--font-body);
  font-size:0.82rem;
  font-weight:600;
  color:var(--prose);
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:100px;
  padding:0.4rem 0.85rem 0.4rem 0.6rem;
  cursor:pointer;
  transition:border-color 150ms ease,background 150ms ease;
}
.topic-chip .swatch{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.topic-chip:hover{background:var(--rule-soft)}
.topic-chip.is-active{border-color:currentColor}
.topic-1{color:var(--t1)} .topic-1 .swatch{background:var(--t1)}
.topic-2{color:var(--t2)} .topic-2 .swatch{background:var(--t2)}
.topic-3{color:var(--t3)} .topic-3 .swatch{background:var(--t3)}
.topic-4{color:var(--t4)} .topic-4 .swatch{background:var(--t4)}
.topic-5{color:var(--t5)} .topic-5 .swatch{background:var(--t5)}
.topic-6{color:var(--t6)} .topic-6 .swatch{background:var(--t6)}
.topic-7{color:var(--t7)} .topic-7 .swatch{background:var(--t7)}
.topic-8{color:var(--t8)} .topic-8 .swatch{background:var(--t8)}
.topic-index-note{
  font-size:0.82rem;
  color:var(--muted);
  margin:0 0 2.5rem;
  max-width:46ch;
  line-height:1.5;
}

.controls{display:flex;align-items:center;gap:0.5rem;margin-left:auto}
.search-wrap{position:relative}
.search-input{
  font:inherit;
  font-size:0.85rem;
  line-height:1.2;
  color:var(--ink);
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:20px;
  padding:0.35rem 1.9rem 0.35rem 0.7rem;
  height:2.15rem;
  width:11rem;
  max-width:34vw;
}
/* iOS Safari auto-zooms the page on focusing any input with a computed
   font-size under 16px — the site's own 0.85rem above (13.6px, given this
   stylesheet's 16px root) was well under that, which is what made tapping
   the search field zoom the whole page in. 16px is the actual fix; it's
   kept smaller on desktop where the zoom behavior doesn't apply and the
   original size still reads fine. This has to come AFTER the base
   .search-input rule above (not inside the earlier @media(max-width:640px)
   block near the top of the file) — same selector, same specificity, so
   without that ordering the later base rule would just win and silently
   undo this override.

   16px still reads visually larger next to "Back to Insights" (0.82rem).
   Since the computed font-size has to stay 16px, the whole pill is scaled
   down 0.82x (matching Back to Insights) with transform, and search-wrap
   plus every box dimension below is inflated by the inverse (1/0.82) so
   they land back at their original on-screen size once scaled — text and
   pill both end up visually at the original size, iOS just never sees a
   font-size under 16px. transform-origin is the box's own top-left corner
   (where search-wrap's box also starts), so the scaled result lines up
   exactly with search-wrap's fixed size and the clear button/dropdown,
   neither of which are part of this transform, stay put. */
@media (max-width:640px){
  .search-wrap{width:9rem;height:2.15rem}
  .search-input{
    font-size:16px;
    width:10.98rem;
    max-width:none;
    height:2.62rem;
    padding:0.427rem 2.317rem 0.427rem 0.854rem;
    border-width:1.22px;
    border-radius:999px;
    transform:scale(0.82);
    transform-origin:0 0;
  }
}
/* The browser's own native search-cancel glyph is WebKit-only (Safari
   renders one, Chrome/Firefox don't — which is why it looked entirely
   missing "on desktop" there) and can't be styled or relied on
   cross-browser, so it's replaced with the explicit #search-clear button
   below and hidden here to avoid the two ever appearing stacked in Safari. */
.search-input::-webkit-search-cancel-button{display:none}
.search-input::placeholder{color:var(--muted)}
.search-clear{
  position:absolute;
  top:50%;
  right:0.5rem;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:1.3rem;
  height:1.3rem;
  padding:0;
  border:none;
  border-radius:50%;
  background:var(--rule-soft);
  color:var(--muted);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
}
.search-clear:hover{background:var(--rule);color:var(--ink)}
.search-clear[hidden]{display:none}
mark.search-match{background:#ffdd7a;color:#3a2c00;border-radius:2px;padding:0 1px}
mark.search-match.is-current{background:#b5801f;color:#fff}
.search-nav{display:flex;align-items:center;gap:0.2rem}
.search-nav[hidden]{display:none}
.search-count{
  font-size:0.75rem;
  color:var(--muted);
  white-space:nowrap;
  min-width:2.4rem;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.icon-btn-sm{width:1.6rem;height:1.6rem}
.chev-single{
  width:6px;
  height:6px;
  border-style:solid;
  border-color:var(--muted);
  border-width:0 2px 2px 0;
}
.chev-single.chev-up{transform:rotate(-135deg)}
.chev-single.chev-down{transform:rotate(45deg)}
.icon-btn-sm:hover .chev-single{border-color:var(--ink)}

.search-suggestions{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  z-index:50;
  margin:0;
  padding:0.3rem;
  list-style:none;
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:4px;
  box-shadow:0 8px 20px rgba(0,0,0,0.14);
  max-height:14rem;
  overflow-y:auto;
}
.search-suggestions li{margin:0}
.search-suggestions li button{
  display:block;
  width:100%;
  text-align:left;
  border:none;
  background:none;
  padding:0.4rem 0.5rem;
  font-size:0.85rem;
  color:var(--prose);
  border-radius:3px;
  cursor:pointer;
}
.search-suggestions li button:hover,
.search-suggestions li button.is-active{background:var(--rule-soft);color:var(--ink)}
:is(.wrap, .site-breadcrumb) button:not(.topic-chip, .ruler-step, .ruler-preview-card, .ruler-goto-btn, .search-clear){
  font:inherit;
  font-size:0.85rem;
  background:none;
  border:1px solid var(--rule);
  border-radius:2px;
  color:var(--muted);
  padding:0.35rem 0.8rem;
  cursor:pointer;
}
:is(.wrap, .site-breadcrumb) button:not(.topic-chip, .ruler-step, .ruler-preview-card, .ruler-goto-btn, .search-clear):hover{color:var(--ink);border-color:var(--muted)}
/* Scoped to .site-breadcrumb (where the search prev/next buttons live) —
   the site's own real header "Insights" button also carries a bare
   .icon-btn class in its markup (unrelated, pre-existing theme
   convention), and an unscoped rule here was colliding with it,
   squashing it down to this circular icon-button size sitewide. */
.site-breadcrumb .icon-btn{
  width:2.15rem;
  height:2.15rem;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}


.era{border-top:1px solid var(--ink);margin:0;scroll-margin-top:135px}
.entry{scroll-margin-top:135px}
.era:last-of-type{border-bottom:1px solid var(--ink)}
/* --tint: a very light wash of the era/topic's own color, inherited from
   here down through .era-inner to every .entry inside it (custom properties
   inherit through any number of intermediate elements, unlike ordinary
   properties). Used below for an open entry's background, its hover state,
   and the tick-hover highlight — one shared definition instead of writing
   the same color-mix out three separate times per era/topic. */
.era-1{border-top-color:var(--e1); --tint:color-mix(in srgb, var(--e1) 6%, transparent)} .era-1 .swatch{background:var(--e1)}
.era-2{border-top-color:var(--e2); --tint:color-mix(in srgb, var(--e2) 6%, transparent)} .era-2 .swatch{background:var(--e2)}
.era-3{border-top-color:var(--e3); --tint:color-mix(in srgb, var(--e3) 6%, transparent)} .era-3 .swatch{background:var(--e3)}
.era-4{border-top-color:var(--e4); --tint:color-mix(in srgb, var(--e4) 6%, transparent)} .era-4 .swatch{background:var(--e4)}
.era-5{border-top-color:var(--e5); --tint:color-mix(in srgb, var(--e5) 6%, transparent)} .era-5 .swatch{background:var(--e5)}
.tcolor-1{border-top-color:var(--t1); --tint:color-mix(in srgb, var(--t1) 6%, transparent)} .tcolor-1 .swatch{background:var(--t1)}
.tcolor-2{border-top-color:var(--t2); --tint:color-mix(in srgb, var(--t2) 6%, transparent)} .tcolor-2 .swatch{background:var(--t2)}
.tcolor-3{border-top-color:var(--t3); --tint:color-mix(in srgb, var(--t3) 6%, transparent)} .tcolor-3 .swatch{background:var(--t3)}
.tcolor-4{border-top-color:var(--t4); --tint:color-mix(in srgb, var(--t4) 6%, transparent)} .tcolor-4 .swatch{background:var(--t4)}
.tcolor-5{border-top-color:var(--t5); --tint:color-mix(in srgb, var(--t5) 6%, transparent)} .tcolor-5 .swatch{background:var(--t5)}
.tcolor-6{border-top-color:var(--t6); --tint:color-mix(in srgb, var(--t6) 6%, transparent)} .tcolor-6 .swatch{background:var(--t6)}
.tcolor-7{border-top-color:var(--t7); --tint:color-mix(in srgb, var(--t7) 6%, transparent)} .tcolor-7 .swatch{background:var(--t7)}
.tcolor-8{border-top-color:var(--t8); --tint:color-mix(in srgb, var(--t8) 6%, transparent)} .tcolor-8 .swatch{background:var(--t8)}
.tcolor-8{border-bottom-color:var(--t8)}

.era > summary{
  display:flex;
  align-items:baseline;
  gap:0.9rem;
  padding:1.25rem 2rem 1.25rem 0.15rem;
  cursor:pointer;
  position:relative;
  list-style:none;
}
.era > summary::-webkit-details-marker{display:none}
.era > summary::after{
  content:"";
  position:absolute;
  right:0.6rem;
  top:50%;
  width:9px;
  height:9px;
  border-style:solid;
  border-color:var(--muted);
  border-width:0 2px 2px 0;
  transform:translateY(-50%) rotate(-45deg);
  transition:transform 150ms ease;
}
.era[open] > summary::after{transform:translateY(-50%) rotate(45deg)}
.era > summary:hover{background:var(--panel)}
.swatch{width:10px;height:10px;border-radius:50%;flex:0 0 auto;transform:translateY(-2px)}
.era-name{
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.42rem;
  letter-spacing:0;
  flex:1;
  line-height:1.3;
}
.era-meta{font-size:0.82rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.era-count{
  flex:0 0 auto;
  width:1.7rem;
  height:1.7rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.78rem;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  border:1px solid var(--rule);
  background:var(--panel);
}
.era-1 .era-count{border-color:var(--e1);color:var(--e1)}
.era-2 .era-count{border-color:var(--e2);color:var(--e2)}
.era-3 .era-count{border-color:var(--e3);color:var(--e3)}
.era-4 .era-count{border-color:var(--e4);color:var(--e4)}
.era-5 .era-count{border-color:var(--e5);color:var(--e5)}
.tcolor-1 .era-count{border-color:var(--t1);color:var(--t1)}
.tcolor-2 .era-count{border-color:var(--t2);color:var(--t2)}
.tcolor-3 .era-count{border-color:var(--t3);color:var(--t3)}
.tcolor-4 .era-count{border-color:var(--t4);color:var(--t4)}
.tcolor-5 .era-count{border-color:var(--t5);color:var(--t5)}
.tcolor-6 .era-count{border-color:var(--t6);color:var(--t6)}
.tcolor-7 .era-count{border-color:var(--t7);color:var(--t7)}
.tcolor-8 .era-count{border-color:var(--t8);color:var(--t8)}
.era-inner{padding:0 0 1.5rem}
.era.era-highlight > summary{background:var(--panel)}

.entry{border-top:1px solid var(--rule-soft);transition:background 200ms ease}
.entry[open]{background:var(--tint, var(--panel))}
.entry.entry-highlight{background:var(--tint, var(--panel))}
.entry.entry-flash{animation:entry-flash 1.1s ease}
@keyframes entry-flash{
  0%{background:var(--tint, var(--panel))}
  40%{background:var(--tint, var(--panel))}
  100%{background:transparent}
}
.entry > summary{
  display:flex;
  gap:1.1rem;
  align-items:baseline;
  padding:0.8rem 2rem 0.8rem 1.6rem;
  cursor:pointer;
  position:relative;
  list-style:none;
}
.entry > summary::-webkit-details-marker{display:none}
.entry > summary::after{
  content:"";
  position:absolute;
  right:0.7rem;
  top:50%;
  width:7px;
  height:7px;
  border-style:solid;
  border-color:var(--muted);
  border-width:0 2px 2px 0;
  transform:translateY(-50%) rotate(-45deg);
  transition:transform 150ms ease;
}
.entry[open] > summary::after{transform:translateY(-50%) rotate(45deg)}
.entry > summary:hover{background:var(--tint, var(--panel))}
.yr{
  flex:0 0 8.2rem;
  font-size:0.85rem;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  padding-top:0.15rem;
}
.ttl{flex:1;font-size:1rem;line-height:1.45}
.body{
  padding:0 2rem 1.4rem 10.9rem;
  font-family:var(--font-body);
  font-weight:400;
  font-size:0.98rem;
  line-height:1.72;
  color:var(--prose);
  max-width:68ch;
}
.body p{margin:0}
.body p + p{margin-top:0.85rem}
.body em{font-style:italic}
.body .aside{
  display:block;
  margin-top:0.7rem;
  padding-left:0.75rem;
  border-left:2px solid var(--rule);
  border-radius:0;
  font-size:0.82rem;
  line-height:1.5;
  color:var(--muted);
}

.source-compare{margin-top:0.7rem;font-size:0.85rem}
.source-compare > summary{
  position:relative;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  color:var(--muted);
  list-style:none;
  width:1.1rem;
  height:1.1rem;
}
.source-compare > summary::-webkit-details-marker{display:none}
.source-compare > summary:hover{color:var(--ink)}
.source-compare[open] > summary{margin-bottom:0.6rem}
.source-compare > summary::after{
  content:"Original source text";
  position:absolute;
  left:calc(100% + 0.5rem);
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  font-size:0.78rem;
  font-style:normal;
  color:var(--muted);
  background:var(--panel);
  border:1px solid var(--rule);
  padding:0.2rem 0.55rem;
  border-radius:3px;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
  opacity:0;
  pointer-events:none;
  transition:opacity 120ms ease;
  z-index:5;
}
.source-compare > summary:hover::after,
.source-compare > summary:focus-visible::after{opacity:1}
.compare-icon{width:1.1rem;height:1.1rem;display:block}
.source-quote{
  margin:0;
  padding:0.75rem 1rem;
  background:var(--rule-soft);
  border-left:3px solid var(--muted);
  border-radius:2px;
  font-style:italic;
  font-size:0.92rem;
  line-height:1.6;
  color:var(--prose);
}
.source-quote p{margin:0}
/* the72fund theme's global style.css adds decorative curly quotes via
   ::before/::after on the first/last blockquote paragraph; this quoted
   text already includes its own quote marks, so suppress the site's to
   avoid doubling them up (same fix as rethinking-endo.css's .callout
   blockquote). */
.source-quote p:first-of-type::before,
.source-quote p:last-of-type::after{content:none}

.wrap > footer{
  margin:0 0 5rem;
  padding-top:0;
  border-top:none;
  font-size:0.85rem;
  line-height:1.6;
  color:var(--muted);
  max-width:none;
  background:none;
  float:none;
  width:auto;
  z-index:auto;
}
.wrap > footer h3{
  font-family:var(--font-body);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink);
  margin:1.6rem 0 0.5rem;
}
.wrap > footer h3:first-of-type{margin-top:0}
.wrap > footer a{color:var(--ink);text-decoration-color:var(--rule);text-underline-offset:3px}
.wrap > footer a:hover{text-decoration-color:currentColor}

@media (max-width:640px){
  .wrap > main{padding-top:1.75rem}
  .era > summary{padding-right:1.7rem;flex-wrap:wrap}
  .era-name{font-size:1.25rem}
  /* era-meta ("Who it affects", "Competing mechanisms", etc.) is
     white-space:nowrap by design, but on a narrow row some of these
     topic subtitles are too long to fit next to the name and count —
     they were overflowing past the reserved chevron padding and
     overlapping it. Drop the subtitle to its own full-width line
     instead of letting it collide, indented to align under the name. */
  .era-meta{flex-basis:100%;order:1;padding-left:calc(10px + 0.9rem);white-space:normal}
  /* The chevron (.era > summary::after) is `top:50%` of the whole
     summary box — fine when it was one line, but now that era-meta
     wraps to a second line below, 50% of the box lands well below the
     count badge, which only sits on line 1. Anchor it to line 1's
     center instead (measured empirically: padding-top + half the count
     badge's height, consistent across every row). */
  .era > summary::after{top:2.22rem}
  .entry > summary{gap:0.8rem;padding-left:0.6rem;padding-right:1.7rem;flex-wrap:wrap}
  .yr{flex-basis:100%;order:1;font-size:0.78rem}
  .ttl{order:0}
  .body{padding-left:0.6rem;padding-right:0}
}
@media (prefers-reduced-motion:no-preference){
  summary,button,.topic-chip{transition:background 120ms ease,color 120ms ease,border-color 120ms ease}
}


:root{--primary:12,62,96;--primary_100:206,216,223;--white:255,255,255}


/* --- divider, transcribed from the72fund.org theme ---
   .section-divider::after  content:''; display:block; width:290px; height:1px
   .section-divider.long::after  width:550px (290px under 640) -------- */
.footer-divider{margin-block:3.5rem 2.25rem}
.section-divider::after{
  content:'';
  display:block;
  width:290px;
  height:1px;
  margin-inline:auto;
  background:linear-gradient(to right,
    rgba(var(--primary),0) 0%,
    rgba(var(--primary),1) 25%,
    rgba(var(--primary),1) 75%,
    rgba(var(--primary),0) 100%);
}
.section-divider.long::after{width:550px}
@media (max-width:640px){
  .section-divider.long::after{width:290px}
}

/* --- site footer, transcribed from the72fund.org theme -----------
   footer{background:rgb(var(--primary))}  .container.large{max-width:1440px}
   .container{padding-inline:64px}  footer .container{padding-block:112px 30px}
   ---------------------------------------------------------------- */
.site-footer{
  position:relative;
  width:100%;
  margin:5rem 0 0;
  padding-top:0;
  border-top:none;
  max-width:none;
  background-color:rgb(var(--primary));
  overflow:hidden;
  z-index:95;
}
.site-footer img.watercolor{
  opacity:0.5;
  mix-blend-mode:color-burn;
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  pointer-events:none;
}
.site-footer .container{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:1440px;
  padding-block:112px 30px;
  padding-inline:64px;
  margin:0 auto;
  z-index:2;
}
.site-footer .footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  width:100%;
  margin-bottom:80px;
}
.site-footer .footer-left{display:flex;flex-direction:column}
.site-footer .footer-logo img{width:initial;max-width:241px;height:auto;max-height:145px}
.site-footer .footer-right{display:flex;align-items:flex-start}
.site-footer .footer-social{display:none}
.site-footer ul.footer_menu{display:flex;gap:40px;list-style:none;margin:0;padding:0}
.site-footer ul.footer_menu > li{list-style:none}
.site-footer ul.footer_menu li.mobile-only{display:none}
.site-footer ul.footer_menu a{
  display:block;
  margin-bottom:14px;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:600;
  line-height:1;
  color:rgb(var(--white));
  text-decoration:underline;
}
.site-footer ul.sub-menu{display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0}
.site-footer ul.sub-menu a{margin:0;text-decoration:none}
.site-footer ul.sub-menu a:hover{text-decoration:underline}
.site-footer .footer-bottom nav.footer-menu,
.site-footer .footer-bottom nav.footer-menu .sub-menu,
.site-footer .footer-bottom nav.footer-menu .social-icons{display:none}
.site-footer .footer-copyright{
  font-family:var(--font-body);
  font-size:16px;
  font-weight:600;
  text-align:center;
  color:rgb(var(--white));
}
.site-footer .footer-copyright a{color:rgb(var(--white));text-decoration:underline}
.site-footer .footer-copyright.mobile-only{display:none;flex-direction:column;align-items:center}
.site-footer .footer-bottom .divider{width:100%;max-width:392px;margin-block:40px 24px}
.site-footer .footer-bottom .divider::after{
  content:'';
  display:block;
  width:100%;
  height:1px;
  background:linear-gradient(to right,
    rgba(var(--white),0) 0%,
    rgba(var(--white),1) 25%,
    rgba(var(--white),1) 75%,
    rgba(var(--white),0) 100%);
}
.site-footer .social-icons{display:flex;flex-wrap:wrap;justify-content:flex-start}
.site-footer .social-icons .social-link{display:flex;flex-direction:column;align-items:center;margin-right:15px}
.site-footer .social-icons a{
  display:flex;
  justify-content:center;
  align-items:center;
  width:26px;
  height:26px;
  text-decoration:none;
}
.site-footer .social-icons svg{display:block;width:26px;height:26px;fill:rgb(var(--white));transition:opacity 0.25s}
.site-footer .social-icons a:hover svg{opacity:0.75}
.site-footer .social-icons span{
  font-family:var(--font-body);
  font-size:12px;
  color:rgb(var(--white));
  margin-top:2px;
}
@media screen and (max-width:1150px){
  .site-footer .footer-logo img{max-width:166px;max-height:100px}
  .site-footer ul.footer_menu{gap:20px}
}
@media screen and (max-width:1023px){
  .site-footer .container{padding-block:30px}
  .site-footer .footer-top{align-items:center;margin-bottom:40px}
  .site-footer .footer-social{display:flex}
  .site-footer .social-icons svg{width:30px;height:30px}
  .site-footer .social-icons a{width:30px;height:30px}
  .site-footer .footer-top nav.footer-menu{display:none}
  .site-footer .footer-bottom nav.footer-menu{display:block;max-width:500px;margin:0 auto}
  .site-footer .footer-bottom ul.footer_menu{flex-direction:column;flex-wrap:wrap;gap:0;max-height:175px}
  .site-footer .footer-bottom ul.footer_menu li.mobile-only{display:block}
  .site-footer .footer-copyright.desktop-only{display:none}
  .site-footer .footer-copyright.mobile-only{display:flex}
}
@media screen and (max-width:850px){
  .site-footer .container{padding-inline:50px}
}
@media screen and (max-width:600px){
  .site-footer .container{padding-inline:30px}
}

/* The related-articles section's eyebrow heading is normally styled by
   style.css alone, inheriting the sitewide h4 default of 'Averia Serif
   Libre' from :root. On this template specifically, body{font-family:
   var(--font-body)} above (Work Sans, for the article's own prose) also
   cascades down into #related since it's a page-wide rule, silently
   overriding that default. Restated explicitly here to match how this
   same component renders on an ordinary post. */
#related .eyebrow-title{font-family:'Averia Serif Libre', serif;}