:root{
  --paper:#f5efe2;
  --paper-raised:#efe7d4;
  --ink:#241d15;
  --ink-soft:#5a4f3f;
  --rule:#d9cdb0;
  --menarche:#b8501f;
  --menarche-soft:#e3ad8c;
  --menopause:#233a63;
  --menopause-soft:#93a6c9;
  --band:rgba(184,80,31,0.07);
  --focus:#8a6b1e;
  --mono:"Space Mono",ui-monospace,monospace;
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Space Grotesk","Inter",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1a1611;
    --paper-raised:#221c15;
    --ink:#efe6d4;
    --ink-soft:#c3b494;
    --rule:#453a29;
    --menarche:#e0855a;
    --menarche-soft:#8a5236;
    --menopause:#8ea3cf;
    --menopause-soft:#33445e;
    --band:rgba(224,133,90,0.09);
    --focus:#d8b258;
  }
}
:root[data-theme="dark"]{
  --paper:#1a1611;
  --paper-raised:#221c15;
  --ink:#efe6d4;
  --ink-soft:#c3b494;
  --rule:#453a29;
  --menarche:#e0855a;
  --menarche-soft:#8a5236;
  --menopause:#8ea3cf;
  --menopause-soft:#33445e;
  --band:rgba(224,133,90,0.09);
  --focus:#d8b258;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.6;
}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.25rem}
.top{padding-top:1.25rem;font-family:var(--sans);font-size:0.85rem}
.top a{color:var(--ink-soft);text-decoration:none}
.top a:hover{color:var(--ink)}
.langbar{font-family:var(--sans);font-size:0.85rem;margin:1.5rem 0 0;color:var(--ink-soft)}
.langbar a{color:var(--ink-soft)}
.langbar .current{color:var(--ink);font-weight:600}
.masthead{margin:1.5rem 0 2rem}
.kicker{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.78rem;
  color:var(--ink-soft);
  margin:0 0 0.6rem;
}
h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.1rem,6vw,3rem);
  line-height:1.08;
  margin:0 0 0.9rem;
  letter-spacing:-0.01em;
}
.deck{
  font-family:var(--sans);
  font-size:1.15rem;
  line-height:1.5;
  color:var(--ink-soft);
  margin:0;
  max-width:38rem;
}
article p, article li{max-width:36rem}
.lede{font-size:1.08rem}
h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.55rem;
  margin:2.6rem 0 0.9rem;
  letter-spacing:-0.005em;
}
a{color:var(--menarche)}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.stat-row{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);margin:1.8rem 0;border:1px solid var(--rule)}
.stat{flex:1 1 12rem;background:var(--paper-raised);padding:1rem 1.1rem}
.stat .num{font-family:var(--mono);font-size:1.35rem;font-weight:700;color:var(--ink)}
.stat .lbl{font-family:var(--sans);font-size:0.85rem;color:var(--ink-soft);margin-top:0.3rem}

.instrument{
  margin:2rem 0;
  border:1px solid var(--rule);
  background:var(--paper-raised);
  padding:1.25rem 1.1rem 1.4rem;
}
.instrument-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--sans);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--ink-soft);margin-bottom:0.6rem;
}
.chart-caption{font-family:var(--sans);font-size:0.82rem;color:var(--ink-soft);margin:0.7rem 0 0}
svg.slopechart{width:100%;height:auto;display:block}
.slopechart text{font-family:var(--sans)}
.slope-line{fill:none;stroke-width:3;stroke-linecap:round}
.slope-line.menarche{stroke:var(--menarche)}
.slope-line.menopause{stroke:var(--menopause)}
.window-bar{stroke-width:6;stroke-linecap:round}
.window-bar.c1936{stroke:var(--menarche-soft)}
.window-bar.c1960{stroke:var(--menopause-soft)}
.slope-dot{stroke:var(--paper-raised);stroke-width:2}
.slope-dot.menarche{fill:var(--menarche)}
.slope-dot.menopause{fill:var(--menopause)}
.slope-label{font-family:var(--mono);font-size:14px;font-weight:700}
.slope-label.menarche{fill:var(--menarche)}
.slope-label.menopause{fill:var(--menopause)}
.axis-label{font-family:var(--sans);font-size:12.5px;fill:var(--ink-soft)}
.col-label{font-family:var(--sans);font-size:13px;font-weight:600;fill:var(--ink)}

.era-stepper{margin:1.4rem 0 0}
.era-tabs{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem}
.era-tab{
  font-family:var(--sans);font-size:0.85rem;font-weight:600;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink-soft);
  padding:0.5rem 0.8rem;cursor:pointer;border-radius:2px;
}
.era-tab[aria-pressed="true"]{background:var(--menarche);border-color:var(--menarche);color:var(--paper)}
.era-tab:hover{color:var(--ink)}
.era-bars{display:flex;flex-direction:column;gap:0.55rem;margin-bottom:0.9rem}
.era-bar-row{display:flex;align-items:center;gap:0.7rem;font-family:var(--sans);font-size:0.85rem}
.era-bar-track{flex:1;height:0.6rem;background:var(--rule);position:relative;border-radius:2px;overflow:hidden}
.era-bar-fill{position:absolute;inset:0 auto 0 0;background:var(--menarche);border-radius:2px;transition:width 0.25s ease}
.era-bar-name{width:6rem;flex:0 0 auto;color:var(--ink-soft)}
.era-bar-val{font-family:var(--mono);width:5.5rem;flex:0 0 auto;text-align:right}
.era-note{font-family:var(--sans);font-size:0.92rem;color:var(--ink-soft);margin:0}

.method{
  font-family:var(--sans);font-size:0.92rem;color:var(--ink-soft);
  border-top:1px solid var(--rule);margin-top:2.6rem;padding-top:1.4rem;
}
.method h2{font-size:1.15rem;margin-top:0}
.sources-list{font-family:var(--sans);font-size:0.88rem;color:var(--ink-soft);padding-left:1.1rem}
.sources-list li{margin-bottom:0.5rem}

footer{
  font-family:var(--sans);font-size:0.82rem;color:var(--ink-soft);
  margin:3rem 0 2.5rem;padding-top:1.2rem;border-top:1px solid var(--rule);
}
footer a{color:var(--ink-soft)}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (max-width:480px){
  body{font-size:16.5px}
  .stat{flex:1 1 100%}
}

@media (prefers-reduced-motion: reduce){
  .era-bar-fill{transition:none}
}
