@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-normal-latin.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-normal-latin-ext.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-italic-latin.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-italic-latin-ext.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-latin.woff2) format("woff2");font-weight:100 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193,U+21BA,U+2212,U+2264-2265,U+2752,U+25B6}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-latin-ext.woff2) format("woff2");font-weight:100 700;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}

/* Night ink and a fever red. Romania = vermilion; Europe = slate; each other country = a pale thread. */
:root{
  --bg:#f5f3ee;--card:#fffdf9;--text:#151a24;--muted:#4a5162;--rule:#d5d3cc;--rule-soft:#e6e3db;--grid:#e3e0d8;--axis:#8d93a0;
  --acc:#b8321d;--acc-ink:#a32b18;--focus:#0b57b0;--btn-ink:#fff;
  --ro:#c2361f;--ro0:#efb2a4;--eu:#56657e;--one:#c3c9d3;--rest:#b9c1cc;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--top:46px;color-scheme:light
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#10141d;--card:#171c27;--text:#eef0f4;--muted:#c0c6d2;--rule:#2e3546;--rule-soft:#222838;--grid:#232a39;--axis:#717a8c;
  --acc:#ff7d63;--acc-ink:#ff9a85;--focus:#8ab8ff;--btn-ink:#1d0b06;
  --ro:#ff6f55;--ro0:#7b3a30;--eu:#a6b4cc;--one:#3a4357;--rest:#4a5468;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#10141d;--card:#171c27;--text:#eef0f4;--muted:#c0c6d2;--rule:#2e3546;--rule-soft:#222838;--grid:#232a39;--axis:#717a8c;
  --acc:#ff7d63;--acc-ink:#ff9a85;--focus:#8ab8ff;--btn-ink:#1d0b06;
  --ro:#ff6f55;--ro0:#7b3a30;--eu:#a6b4cc;--one:#3a4357;--rest:#4a5468;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top) + 14px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.62 var(--serif);overflow-x:hidden}
a{color:var(--acc-ink);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
strong{font-weight:650}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--card);color:var(--text);padding:8px 12px;z-index:60}.skip-link:focus{left:8px}

.topbar{position:sticky;top:0;z-index:40;height:var(--top);display:flex;align-items:center;gap:10px;padding:0 14px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:1px solid var(--rule-soft);font:500 14px/1 var(--sans)}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.brand-mark{flex:none;color:var(--acc);display:grid;place-items:center}
.topnav{display:flex;gap:16px;margin-left:14px}.topnav a{color:var(--muted);text-decoration:none;white-space:nowrap}.topnav a:hover{color:var(--text)}
.spacer{flex:1}
.chip{color:var(--muted);text-decoration:none;padding:6px 7px;border-radius:6px}.chip[aria-current="page"]{color:var(--text);background:var(--rule-soft)}
.icon-btn{flex:none;border:1px solid var(--rule);background:transparent;color:var(--text);border-radius:8px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer}
:root[data-theme="dark"] .i-moon{display:none}:root[data-theme="light"] .i-sun{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme]) .i-sun{display:none}}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .i-moon{display:none}}
@media (max-width:1040px){.topnav{display:none}}
.progress{position:sticky;top:var(--top);z-index:39;height:2px;margin-bottom:-2px}
.progress i{display:block;height:2px;transform-origin:0 50%;transform:scaleX(0);background:var(--ro)}

.rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:6px;opacity:0;transition:opacity .3s}
.rail.on{opacity:1}
.rail-dot{position:relative;display:block;width:16px;height:16px}
.rail-dot .dot{position:absolute;left:5px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--axis)}
.rail-dot[aria-current] .dot{background:var(--acc);transform:scale(1.45)}
.rail-label{position:absolute;right:22px;top:-2px;white-space:nowrap;font:500 12.5px var(--sans);background:var(--card);color:var(--text);border:1px solid var(--rule);border-radius:6px;padding:2px 7px;opacity:0;pointer-events:none;transition:opacity .15s}
.rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{opacity:1}
@media (max-width:1320px){.rail{display:none}}

/* hero */
.hero{max-width:1240px;margin:0 auto;padding:34px 20px 8px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:44px;align-items:start}
.kicker{font:600 12.5px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--acc-ink);margin:0 0 10px}
h1{font:700 40px/1.1 var(--serif);margin:0 0 16px;letter-spacing:-.012em;text-wrap:balance}
.deck{font-size:19px;line-height:1.55;color:var(--muted);margin:0 0 12px}.deck strong{color:var(--ro)}
.deck2{font-size:17.5px;line-height:1.5;margin:0 0 18px;padding-left:12px;border-left:3px solid var(--ro)}
.hero-fig{margin:6px 0 0}
.btn{display:inline-flex;align-items:center;gap:6px;font:600 15px/1 var(--sans);padding:11px 15px;border-radius:9px;border:1px solid var(--rule);background:var(--card);color:var(--text);text-decoration:none;cursor:pointer;min-height:44px}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--btn-ink)}
.btn.ghost{background:transparent}
.jump{margin:0;display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:980px){.hero{grid-template-columns:1fr}h1{font-size:31px}.deck,.deck2{font-size:17.5px}}
@media (max-width:420px){h1{font-size:27px}}

/* charts */
.hero-svg,.es-svg,.age-svg,.ct-svg{width:100%;height:auto;display:block;overflow:visible}
.grid{stroke:var(--grid);stroke-width:1}
.ax-t{font:500 12.5px var(--sans);fill:var(--muted)}
.l-one{fill:none;stroke:var(--one);stroke-width:1.4}
.l-one:hover{stroke:var(--muted);stroke-width:2.2}
.l-one-t{font:500 12px var(--sans);fill:var(--muted)}
.l-eu{fill:none;stroke:var(--eu);stroke-width:3.2;stroke-linejoin:round}
.l-eu-t{font:600 13px var(--sans);fill:var(--eu)}
.l-ro{fill:none;stroke:var(--ro);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.p-ro{fill:var(--ro);stroke:var(--bg);stroke-width:2}
.v-ro{font:700 15px var(--serif);fill:var(--ro);paint-order:stroke;stroke:var(--bg);stroke-width:4px}
.v-ro.big{font-size:30px}
.v-ro-n{font:600 13px var(--sans);fill:var(--ro)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font:500 13.5px/1.3 var(--sans);color:var(--muted);margin:0 0 8px;align-items:center}
.legend span{display:inline-flex;align-items:center;gap:6px}
.k{display:inline-block;width:18px;height:10px;border-radius:2px}
.k-ro{background:var(--ro)}.k-eu{background:var(--eu)}.k-one{background:var(--one);height:3px}
.b-ro0{fill:var(--ro0);background:var(--ro0)}.b-ro1{fill:var(--ro);background:var(--ro)}.b-eu{fill:var(--eu);background:var(--eu)}.b-rest{fill:var(--rest)}
.ag{cursor:pointer}.ag-hit{fill:transparent}
.ag:hover .ag-hit,.ag:focus-visible .ag-hit{fill:color-mix(in srgb,var(--text) 5%,transparent)}
.ag:focus-visible{outline:none}.ag:focus-visible .ag-hit{stroke:var(--focus);stroke-width:2}
.ag.on .ag-hit{fill:color-mix(in srgb,var(--ro) 10%,transparent)}
.age-svg.picked .ag:not(.on) rect:not(.ag-hit){opacity:.38}
.ag-x{font:600 17px var(--sans);fill:var(--text)}.ag-r{font:700 26px var(--serif);fill:var(--ro)}.ag-v{font:500 13px var(--sans);fill:var(--muted)}
.one{stroke:var(--axis);stroke-width:1;stroke-dasharray:3 3}
.bar-l{font:500 14px var(--sans);fill:var(--text)}.bar-v{font:600 13px var(--sans);fill:var(--muted)}
.bar-l.ro,.bar-v.ro{font-weight:700;fill:var(--ro)}
@media (max-width:600px){.hero-svg .ax-t{font-size:20px}.l-one-t,.l-eu-t,.v-ro-n{font-size:19px}.v-ro{font-size:22px}.v-ro.big{font-size:38px}
  .ag-x{font-size:24px}.ag-v{font-size:19px}.ag-r{font-size:34px}.es-svg .ax-t,.es-svg .v-ro,.es-svg .l-eu-t{font-size:21px}.ct-svg .bar-l,.ct-svg .bar-v{font-size:17px}}

/* sections */
.sec{max-width:760px;margin:0 auto;padding:30px 20px 8px}
.sec.wide{max-width:1180px}
.sec.wide>p{max-width:760px}
h2{font:700 28px/1.2 var(--serif);margin:26px 0 12px;text-wrap:balance}
h3{font:650 20px/1.3 var(--serif);margin:22px 0 6px}
.anchor{margin-left:8px;font:400 .62em var(--sans);color:var(--axis);text-decoration:none;opacity:0;transition:opacity .15s}
h2:hover .anchor,.anchor:focus-visible{opacity:1}
.sec p{margin:0 0 14px}
.fig{margin:18px 0 10px}
figcaption{font:400 14.5px/1.5 var(--sans);color:var(--muted);margin-top:8px}

/* age picker */
.picker{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:6px 0 14px;font:500 15px var(--sans)}
.picker label,.pk-l{font-weight:600}
.picker select{font:500 16px var(--sans);min-height:44px;padding:8px 10px;border-radius:9px;border:1px solid var(--rule);background:var(--card);color:var(--text)}
.segs{display:inline-flex;border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.seg{font:600 15px var(--sans);min-height:44px;padding:8px 14px;border:0;background:var(--card);color:var(--muted);cursor:pointer}
.seg+.seg{border-left:1px solid var(--rule)}
.seg[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.age-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:28px;align-items:start}
@media (max-width:900px){.age-grid{grid-template-columns:1fr;gap:10px}}
.age-fig{margin-top:0}
.panel{background:var(--card);border:1px solid var(--rule-soft);border-radius:14px;padding:16px 18px 10px;position:sticky;top:calc(var(--top) + 16px)}
@media (max-width:900px){.panel{position:static}}
.p-sent{font-size:19px;line-height:1.5;margin:0 0 8px}.p-more{font:400 15px/1.55 var(--sans);color:var(--muted);margin:0 0 8px}
.shared-line{font:500 15px/1.4 var(--sans);background:var(--card);border-left:3px solid var(--ro);padding:8px 10px;border-radius:6px;margin:0 0 12px}

.ladder{list-style:none;padding:0;margin:8px 0 18px;font:500 15px/1.3 var(--sans)}
.ladder li{display:grid;grid-template-columns:minmax(0,10em) 1fr 4.4em;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--rule-soft)}
.ladder .ld-bar{height:12px;background:var(--rule-soft);border-radius:6px;overflow:hidden}.ladder .ld-bar i{display:block;height:100%;background:var(--ro0);border-radius:6px}
.ladder b{text-align:right;font:700 17px var(--serif)}
.ladder .ld-all{border-top:2px solid var(--text);margin-top:4px}.ladder .ld-all .ld-bar i{background:var(--ro)}
@media (max-width:520px){.ladder li{grid-template-columns:1fr 4em}.ladder .ld-bar{grid-column:1/-1;grid-row:2}}

.how{padding-left:20px}.how li{margin:0 0 10px}
.src{padding-left:20px;font-size:16px}.src li{margin:0 0 8px}
.share{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:12px 0 6px;font:500 14.5px var(--sans)}
.share-lab{margin-right:4px;color:var(--muted)}
.sbtn{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--rule);background:transparent;color:var(--text);text-decoration:none;cursor:pointer}
.sbtn:hover,.sbtn:focus-visible{color:var(--acc-ink);border-color:var(--acc)}
@media (pointer:coarse){.sbtn{width:44px;height:44px}}
@media (max-width:480px){.share-lab{flex-basis:100%}}
.share-msg{font-size:14px;color:var(--muted);margin-left:6px}
.site-footer{max-width:1180px;margin:40px auto 0;padding:22px 20px 40px;border-top:1px solid var(--rule-soft);display:flex;flex-wrap:wrap;gap:8px 22px;font:400 14px var(--sans);color:var(--muted)}
.site-footer a{color:var(--muted)}
.place-page main{max-width:760px;margin:0 auto;padding:30px 20px;font-family:var(--sans)}.place-page img{max-width:100%;height:auto}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
