/* 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 Rethinking Endometriosis
   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, text-rendering,
   font-weight, etc.) on bare HTML tags and `*` site-wide. Class-based rules
   below already out-specificity these for the properties they set
   explicitly, but this catches any gaps without touching intentional
   styling, since any class selector still wins over this due to higher
   specificity. */
.wrap, .wrap *{text-rendering:auto}
main :is(h1,h2,h3,h4,h5,h6,p,span,a,li,ul,ol,table){
  letter-spacing:normal;
  text-transform:none;
  width: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-
   rethinking-endo-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-rethinking-endo-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. If .wrap's preferred width ever comes out wider than the
   viewport (a wide, non-wrapping piece of content), it won't shrink to
   fit and will overflow. 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}
/* .org breakpoints: .container{padding-inline:50px} @850, {30px} @600 */
@media (max-width:850px){.wrap{padding:0 50px}}
@media (max-width:600px){.wrap{padding:0 30px}}

.wrap > main{display:block;padding-top:2.75rem}
.wrap 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;
  padding:2.5rem 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  text-align:center;
}
.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{
  font-size:0.82rem;
  color:var(--muted);
  margin:0 0 2.5rem;
  max-width:46ch;
  line-height:1.5;
}

.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, .section-icon, .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, .section-icon, .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 0 1.4rem 1.6rem;
  font-family:var(--font-body);
  font-weight:400;
  font-size:0.98rem;
  line-height:1.72;
  color:var(--prose);
  max-width:none;
}
.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}

.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 is white-space:nowrap by design, but some topic subtitles
     are too long to fit next to the name and count on a narrow row —
     they were overflowing past the reserved chevron padding and
     overlapping it. Drop the subtitle to its own full-width line
     instead, 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}
}



/* ---- Additions for this page ----
   Card, quote and heading treatments follow the72fund.org:
   cards are white with a 5px radius and the brand shadow, no border;
   quotes have no box at all. ------------------------------------- */

:root{
  --brand:#0c3e60;
  --card-shadow:0 2px 4px rgba(12,62,96,0.2);
}


/* --- hero ------------------------------------------------------ */
.hero{display:block;float:none;width:auto;margin:0}
.hero-figure{
  margin:0 0 1.75rem;
  text-align:center;
}
.hero-figure img{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  margin:0 auto;
}
.wrap h1{
  font-weight:300;
  font-size:clamp(2rem,4.4vw,2.75rem);
  line-height:1.25;
  color:var(--brand);
  text-align:center;
  max-width:none;
  margin:0 0 1.4rem;
}
.lede{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(1.15rem,2.1vw,1.5rem);
  line-height:1.42;
  letter-spacing:0.02em;
  color:var(--brand);
  max-width:none;
  margin:0 0 40px;
}
/* the72fund theme's global style.css has p:last-child{margin-bottom:0},
   which outranks the class selector above (it's the lede's last-child
   status combined with a pseudo-class, beating a single plain class) —
   the lede is always its section's last paragraph, so this always fires.
   Restate the bottom margin with matching specificity. */
.hero .lede:last-child{margin-bottom:40px}
.lede::first-letter{
  float:left;
  font-family:var(--font-display);
  font-weight:400;
  font-size:3.156em;
  line-height:0.86;
  padding:0.02em 0.085em 0 0;
  color:#0c3e60;
}

.lede a{color:inherit;text-decoration-color:var(--rule);text-underline-offset:4px}
.lede a:hover{text-decoration-color:currentColor}

/* --- divider + icon row, transcribed from the72fund.org theme ---
   .section-divider::after  content:''; display:block; width:290px; height:1px
   .TFT-gradient-line::after  transparent > full > transparent
   .section-divider.long::after  width:550px (290px under 640) -------- */
:root{--primary:12,62,96;--primary_100:206,216,223;--white:255,255,255}

.section-divider{margin-block:0 70px}
.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}

.section-icons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  width:100%;
  margin:-38px 0 40px;
}
.section-icon{
  position:relative;
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  width:24px;
  height:24px;
  padding:0;
  color:rgb(var(--primary));
  background:none;
  border:0;
  border-radius:0;
  appearance:none;
}
.section-icon:hover{border:0}
.section-icon img{display:block;width:initial;height:24px}
.section-icon-tooltip{
  display:block;
  width:max-content;
  max-width:220px;
  padding:10px 16px;
  color:rgb(var(--primary));
  background:rgb(var(--primary_100));
  border-radius:18px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:400;
  line-height:1;
  text-align:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  position:absolute;
  bottom:calc(100% + 22px);
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  transition:opacity 0.2s,visibility 0.2s;
}
.section-icon-tooltip::after{
  content:'';
  width:0;
  height:0;
  border-inline:10px solid transparent;
  border-top:13px solid rgb(var(--primary_100));
  position:absolute;
  top:calc(100% - 1px);
  left:50%;
  transform:translateX(-50%);
}
.section-icon:hover .section-icon-tooltip,
.section-icon:focus .section-icon-tooltip,
.section-icon.active .section-icon-tooltip{opacity:1;visibility:visible}
@media (max-width:640px){
  .section-divider.long::after{width:290px}
}


/* --- headings -------------------------------------------------- */
h2.part-title{
  font-weight:300;
  font-size:clamp(1.7rem,3.4vw,2.1rem);
  color:var(--brand);
  margin:0 0 0.7rem;
}
.part-intro{
  font-size:1.08rem;
  line-height:1.75;
  max-width:none;
  margin:0 0 2rem;
}
.era-name{color:var(--brand)}

/* --- cards ----------------------------------------------------- */
.figure-row{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin:0 0 1.25rem;
}
.figure{
  flex:1 1 calc(50% - 12px);
  min-width:13rem;
  background:var(--panel);
  border-radius:5px;
  box-shadow:var(--card-shadow);
  padding:24px 22px;
}
.figure .fig-num{
  display:block;
  font-family:var(--font-display);
  font-weight:300;
  font-size:1.85rem;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  margin:0 0 0.5rem;
}
.figure-1 .fig-num{color:var(--e1)}
.figure-2 .fig-num{color:var(--e2)}
.figure-3 .fig-num{color:var(--e3)}
.figure-4 .fig-num{color:var(--e4)}
.figure .fig-label{
  display:block;
  font-family:var(--font-display);
  font-weight:300;
  font-size:1rem;
  line-height:1.45;
  color:var(--brand);
  margin:0 0 0.6rem;
}
.figure .fig-src{
  display:block;
  font-size:0.72rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--muted);
}
.figure .fig-src a{color:inherit;text-decoration-color:var(--rule);text-underline-offset:3px}
.figure .fig-src a:hover{color:var(--ink);text-decoration-color:currentColor}
@media (max-width:640px){
  .figure{flex:1 1 100%}
}

.note{
  font-size:0.85rem;
  color:var(--muted);
  margin:0 0 2.5rem;
  max-width:none;
  line-height:1.55;
}
.note a{color:inherit;text-decoration-color:var(--rule);text-underline-offset:3px}
.note a:hover{color:var(--ink);text-decoration-color:currentColor}

/* --- quotes: no box, no border, no background ------------------ */
.callout{
  /* bottom margin only ever precedes the CTA link */
  margin:2.75rem 0 1.5rem;
  max-width:none;
}
.callout-kicker{
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 0.85rem;
}
.callout-expert .callout-kicker{color:var(--e1)}
.callout blockquote{
  margin:0 0 1.1rem;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(1.08rem,1.9vw,1.32rem);
  line-height:1.5;
  color:var(--brand);
}
.callout blockquote p{margin:0}
.callout blockquote p + p{margin-top:0.6rem}
.callout-attr{
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:600;
  line-height:1.35;
  color:var(--brand);
  margin:0;
}
.callout-attr span{
  display:block;
  font-size:0.85rem;
  font-weight:400;
  color:var(--muted);
  margin-top:0.2rem;
}

/* --- visualization card ---------------------------------------- */
.viz{
  display:block;
  background:var(--panel);
  border-radius:5px;
  box-shadow:var(--card-shadow);
  padding:24px 22px;
  margin:0 0 2.5rem;
  max-width:none;
  text-decoration:none;
  color:inherit;
  transition:box-shadow 150ms ease,transform 150ms ease;
}
.viz:hover{box-shadow:0 4px 10px rgba(12,62,96,0.26)}
.viz-kicker{
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--e2);
  margin:0 0 0.5rem;
}
.viz-title{
  font-family:var(--font-display);
  font-weight:300;
  font-size:1.3rem;
  line-height:1.3;
  color:var(--brand);
  margin:0 0 0.45rem;
}
.viz-desc{
  font-family:var(--font-display);
  font-weight:300;
  font-size:1rem;
  line-height:1.5;
  color:var(--prose);
  margin:0 0 1rem;
  max-width:none;
}
.viz-frame{
  border:1px solid var(--rule-soft);
  border-radius:5px;
  overflow:hidden;
  margin:0 0 1rem;
  line-height:0;
}
.viz-frame img{display:block;width:100%;height:auto}

.viz-cta{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  font-size:0.9rem;
  font-weight:600;
  color:var(--e2);
}

/* --- sources --------------------------------------------------- */
.link-cta-wrap{margin:0 0 2.5rem}
.link-cta{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  font-size:0.9rem;
  font-weight:600;
  color:var(--e2);
  text-decoration:none;
  padding:0.55rem 1.1rem;
  border:1px solid var(--e2);
  border-radius:100px;
  transition:background 150ms ease,color 150ms ease;
}
.link-cta:hover{background:var(--e2);color:var(--panel)}

.sources{
  display:block;
  margin-top:0.9rem;
  font-size:0.78rem;
  line-height:1.6;
  color:var(--muted);
}
.sources .sources-label{
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-size:0.7rem;
  margin-right:0.5rem;
}
.sources a{
  color:var(--muted);
  text-decoration-color:var(--rule);
  text-underline-offset:3px;
  white-space:nowrap;
}
.sources a:hover{color:var(--ink);text-decoration-color:currentColor}
.sources a + a::before{content:"·";margin:0 0.45rem;color:var(--rule);text-decoration:none;display:inline-block}




/* --- misc ------------------------------------------------------ */

.tk{
  background:var(--rule-soft);
  border-bottom:1px dashed var(--e3);
  color:var(--muted);
  font-style:normal;
  padding:0 0.15rem;
}
.draft-flag{
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--e3);
  border:1px solid var(--e3);
  border-radius:100px;
  padding:0.1rem 0.5rem;
  margin-left:0.5rem;
  white-space:nowrap;
  vertical-align:0.1em;
}

/* section two is a flat list of findings — no outer accordion */
.entry-list{
  border-top:2px solid var(--e2);
  margin:0 0 2.75rem;
}
.entry-list > .entry:first-of-type{border-top:none}

/* the accordion stack needs room when something follows it */
.part-section > .era:last-of-type{margin-bottom:2.75rem}
.era + .callout,
.era + .viz{margin-top:2.75rem}

/* slightly airier accordion rows, closer to the .org reading rhythm */
.era-name{font-size:1.35rem;font-weight:300}
.entry .body{font-size:1.02rem;line-height:1.75}
.ttl{font-size:1.05rem}


/* --- 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;
  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}
}

@media print{
  .site-header,.controls,.section-icons{display:none !important}
  body{padding-top:0}
  body::before,body::after{display:none}
  .era > summary::after,.entry > summary::after{display:none}
  .viz,.callout,.era,.entry,.hero-figure{break-inside:avoid}
}

/* 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;}