/* Layout: a statistical yearbook set on map paper. One reading column (~72ch) with
   wide figures breaking out to 1120px; country pages read top-down like a yearbook chapter. */
:root {
  --paper: #f3f5f4;      /* cool map paper */
  --sheet: #ffffff;
  --ink: #1b2328;
  --ink-2: #4b575e;
  --rule: #d5dcdb;
  --accent: #1f4f8f;     /* yearbook blue */
  --g0: #b9781c;         /* born abroad: ochre */
  --g1: #2f7d6b;         /* both parents abroad: sea green */
  --g2: #8db9a9;         /* one parent abroad: pale green */
  --g3: #5d6b86;         /* both parents native: slate */
  --band: rgba(31,79,143,0.13);
  --warn: #9a4a12;
  --s1: #dde7f2; --s2: #aec5e2; --s3: #7a9fcd; --s4: #4673ad; --s5: #1f4f8f;  /* sequential blue, light -> dark */
  --land: #e3e8e7; --land-off: #eef1f0; --sea: transparent;
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300; --c7: #6250d6; --c8: #e34948; --c9: #9c5b2e; --c10: #0f8b99; --c11: #8c1c13; --c12: #4f7c3a; --c13: #8e2c8e; --c14: #6b7a00; --c15: #a3123a; --c16: #4e6e7e; --pl-home: #2f5d8a; --pl-nation: #6a4c9c; --pl-across: #1f8a7a; --pl-abroad: #b9791a; /* country series, fixed order */
  --f-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --f-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #111518; --sheet: #181d21; --ink: #e2e8ea; --ink-2: #9daab0; --rule: #2c3439;
  --accent: #7fa8e6; --g0: #e0a547; --g1: #6cc0aa; --g2: #3f7568; --g3: #93a3c4; --band: rgba(127,168,230,0.16); --warn: #e5915a; --s1: #22344a; --s2: #2c5282; --s3: #3d70ae; --s4: #6595d6; --s5: #a6c5f2; --land: #262e33; --land-off: #1e2428; --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767; --c9: #c07a48; --c10: #2bb3c2; --c11: #d65c50; --c12: #7fb069; --c13: #c86bc8; --c14: #b3c23a; --c15: #ef6f8f; --c16: #8fb0c0; --pl-home: #3f74ab; --pl-nation: #7d5fb3; --pl-across: #23998a; --pl-abroad: #c58a2a; color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #111518; --sheet: #181d21; --ink: #e2e8ea; --ink-2: #9daab0; --rule: #2c3439;
  --accent: #7fa8e6; --g0: #e0a547; --g1: #6cc0aa; --g2: #3f7568; --g3: #93a3c4; --band: rgba(127,168,230,0.16); --warn: #e5915a; --s1: #22344a; --s2: #2c5282; --s3: #3d70ae; --s4: #6595d6; --s5: #a6c5f2; --land: #262e33; --land-off: #1e2428; --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767; --c9: #c07a48; --c10: #2bb3c2; --c11: #d65c50; --c12: #7fb069; --c13: #c86bc8; --c14: #b3c23a; --c15: #ef6f8f; --c16: #8fb0c0; --pl-home: #3f74ab; --pl-nation: #7d5fb3; --pl-across: #23998a; --pl-abroad: #c58a2a; color-scheme: dark }

* { box-sizing: border-box }
body { background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--f-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
a { color: var(--accent) }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.wrap { max-width: 1120px; margin: 0 auto }
.read { max-width: 72ch }

header.top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
  padding-block: 20px 14px; border-bottom: 2px solid var(--ink) }
.mark { font: 700 1.15rem/1.1 var(--f-display); letter-spacing: 0.01em; text-decoration: none; color: var(--ink) }
.mark small { display: block; font: 500 0.7rem/1.3 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin-top: 4px }
nav.main { display: flex; gap: 18px; flex-wrap: wrap }
nav.main a { text-decoration: none; color: var(--ink-2); font-weight: 500; padding-block: 4px; border-bottom: 2px solid transparent }
nav.main a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent) }

h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; font-weight: 600; margin: 0 }
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -0.01em }
h2 { font-size: 1.55rem; line-height: 1.15 }
h3 { font-size: 1.1rem; line-height: 1.25 }
p { margin: 0 }
.eyebrow { font: 600 0.72rem/1.2 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2) }
.muted { color: var(--ink-2) }
.num { font-family: var(--f-data); font-variant-numeric: tabular-nums }

section.chap { padding-block: 40px; border-top: 1px solid var(--rule); display: grid; gap: 18px }
section.chap > header { display: grid; grid-template-columns: 3.2rem 1fr; gap: 4px 12px; align-items: baseline }
section.chap > header .sec { font: 500 0.9rem var(--f-data); color: var(--ink-2) }
section.chap > header p { grid-column: 2; color: var(--ink-2); max-width: 70ch }
@media (max-width: 560px) { section.chap > header { grid-template-columns: 1fr } section.chap > header p { grid-column: 1 } }

/* status tags: observed / estimate / derived / reconstructed / projection */
.tag { display: inline-block; font: 500 0.68rem/1 var(--f-data); letter-spacing: 0.04em; padding: 3px 6px 2px; border: 1px solid currentColor; border-radius: 2px; vertical-align: 1px; white-space: nowrap }
.tag.obs { color: var(--ink) }
.tag.est { color: var(--accent) }
.tag.der, .tag.rec { color: var(--warn); border-style: dashed }
.tag.proj { color: var(--accent); background: var(--band) }

/* figures strip */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule) }
.fig { padding: 14px 14px 12px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: grid; gap: 4px; align-content: start; min-width: 0 }
.fig .v { font: 500 1.45rem/1.15 var(--f-data); font-variant-numeric: tabular-nums }
.fig .s { font-size: 0.82rem; color: var(--ink-2) }
.fig .m { font-size: 0.72rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px }

/* definition ladder */
.ladder { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: stretch }
.rung { background: var(--sheet); border: 1px solid var(--rule); padding: 14px; display: grid; gap: 6px; align-content: start; min-width: 0 }
.rung .sw { width: 28px; height: 6px }
.rung p { font-size: 0.88rem; color: var(--ink-2) }
.arrow { align-self: center; font: 500 0.75rem/1.2 var(--f-data); color: var(--ink-2); text-align: center; max-width: 9ch }
@media (max-width: 760px) { .ladder { grid-template-columns: 1fr } .arrow { max-width: none } }

/* charts */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px }
figure { margin: 0; display: grid; gap: 8px; min-width: 0 }
figcaption { font-size: 0.8rem; color: var(--ink-2) }
figure h3 { font-size: 1rem }
svg.chart { width: 100%; height: auto; display: block; overflow: visible }
svg.chart text { fill: var(--ink-2); font: 11px var(--f-data) }
svg.chart .grid { stroke: var(--rule); stroke-width: 1 }
svg.chart .axis { stroke: var(--ink-2); stroke-width: 1 }
svg.chart .ln { fill: none; stroke-width: 2 }
svg.chart .thr { stroke: var(--ink); stroke-dasharray: 4 4; stroke-width: 1.2 }
svg.chart .now { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3 }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8rem; color: var(--ink-2) }
.legend i { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 6px }
.legend i.box { height: 10px; width: 10px }

/* timeline */
ol.tl { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-left: 1px solid var(--rule) }
ol.tl li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 12px; padding: 7px 0 7px 14px; position: relative }
ol.tl li::before { content: ""; position: absolute; left: -4px; top: 15px; width: 7px; height: 7px; background: var(--paper); border: 1px solid var(--ink-2); border-radius: 50% }
ol.tl .y { font: 500 0.9rem var(--f-data) }

/* projection lab */
.lab { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start }
@media (max-width: 900px) { .lab { grid-template-columns: 1fr } }
.controls { display: grid; gap: 16px; background: var(--sheet); border: 1px solid var(--rule); padding: 16px }
.ctl { display: grid; gap: 6px }
.ctl label, .ctl legend { font: 600 0.78rem/1.2 var(--f-body); letter-spacing: 0.04em; color: var(--ink) }
.ctl .hint { font-size: 0.75rem; color: var(--ink-2) }
fieldset.ctl { border: 0; padding: 0; margin: 0 }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule) }
.seg input { position: absolute; opacity: 0; pointer-events: none }
.seg label { font: 500 0.8rem var(--f-body); letter-spacing: 0; text-align: center; padding: 7px 4px; cursor: pointer; color: var(--ink-2) }
.seg label:not(:first-of-type) { border-left: 1px solid var(--rule) }
.seg input:checked + label { background: var(--ink); color: var(--paper) }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px }
select, input[type=range] { width: 100%; font: inherit; font-size: 0.88rem }
select { padding: 7px 8px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 0 }
input[type=range] { accent-color: var(--accent) }
.readout { display: grid; gap: 4px; padding: 14px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule) }
.readout .big { font: 600 1.6rem/1.15 var(--f-display) }
.readout .big .num { font-weight: 500 }
.sumtab { width: 100%; border-collapse: collapse; font-size: 0.85rem }
.sumtab th, .sumtab td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap }
.sumtab th:first-child, .sumtab td:first-child { text-align: left }
.sumtab thead th { font: 600 0.72rem var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2) }
.sumtab td { font-family: var(--f-data); font-variant-numeric: tabular-nums }
.scroll { overflow-x: auto }
.note { font-size: 0.82rem; color: var(--ink-2); border-left: 2px solid var(--rule); padding-left: 10px }
details.adv summary { cursor: pointer; font: 600 0.78rem var(--f-body); color: var(--accent) }
details.adv[open] { display: grid; gap: 14px }
.val { display: grid; gap: 8px }
.ok { color: var(--g1) }

/* pyramid */
.pyr-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px }
.pyr-ctl input { max-width: 360px }
.pyr-ctl output { font: 500 1.1rem var(--f-data) }

/* peoples */
dl.facts { display: grid; grid-template-columns: 12rem 1fr; gap: 10px 20px; margin: 0 }
dl.facts dt { font-weight: 600 }
dl.facts dd { margin: 0; color: var(--ink-2) }
@media (max-width: 560px) { dl.facts { grid-template-columns: 1fr } dl.facts dd { margin-bottom: 8px } }
.draft { display: inline-block; font: 500 0.72rem var(--f-data); color: var(--warn); border: 1px dashed currentColor; padding: 2px 6px; margin-left: 8px; vertical-align: 3px }
ol.src { padding-left: 1.4em; margin: 0; display: grid; gap: 4px; font-size: 0.88rem }

/* atlas index */
.hero { padding-block: 40px 28px; display: grid; gap: 14px }
.hero p.lede { font: 400 1.2rem/1.5 var(--f-display); max-width: 60ch }
.tilemap-wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 32px; align-items: start }
@media (max-width: 820px) { .tilemap-wrap { grid-template-columns: 1fr } }
.tiles { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; max-width: 560px }
.tiles.ang { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 220px }
.tile { aspect-ratio: 1; max-width: 100%; display: grid; place-items: center; font: 500 clamp(0.55rem, 1.4vw, 0.78rem) var(--f-data);
  border: 1px solid var(--rule); background: var(--sheet); color: var(--ink-2); text-decoration: none; position: relative }
.tile.live { background: var(--accent); border-color: var(--accent); color: var(--paper); font-weight: 600 }
.tile.live:hover { filter: brightness(1.12) }
.tile.trans { border-style: dashed }
.tile .tip { display: none }
.keyrow { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.8rem; color: var(--ink-2); align-items: center }
.keyrow span::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--rule); background: var(--sheet) }
.keyrow span.k-live::before { background: var(--accent); border-color: var(--accent) }
.keyrow span.k-trans::before { border-style: dashed }
.register { width: 100%; border-collapse: collapse; font-size: 0.88rem }
.register th, .register td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top }
.register thead th { font: 600 0.72rem var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink) }
.register td.st { font: 500 0.78rem var(--f-data); white-space: nowrap }
.filters { display: flex; flex-wrap: wrap; gap: 8px }
.filters button { font: 500 0.8rem var(--f-body); background: none; border: 1px solid var(--rule); color: var(--ink-2); padding: 5px 10px; cursor: pointer }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.side { display: grid; gap: 14px; font-size: 0.9rem }
.side h3 { font-size: 1rem }
footer.bot { padding-block: 28px 40px; border-top: 2px solid var(--ink); margin-top: 20px; font-size: 0.8rem; color: var(--ink-2); display: grid; gap: 6px }
.hover-tip { position: absolute; pointer-events: none; background: var(--sheet); border: 1px solid var(--rule); padding: 6px 8px; font: 11px/1.4 var(--f-data); color: var(--ink); white-space: nowrap; z-index: 5 }
.chartbox { position: relative }
@media (prefers-reduced-motion: no-preference) { .tile { transition: filter .15s } }

/* threshold tracker */
.tracker { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--ink); background: var(--sheet) }
.tracker > div { padding: 18px 20px; display: grid; gap: 8px; align-content: start; min-width: 0 }
.tracker > div + div { border-left: 1px solid var(--rule) }
@media (max-width: 760px) { .tracker { grid-template-columns: 1fr } .tracker > div + div { border-left: 0; border-top: 1px solid var(--rule) } }
.tracker .count { font: 600 clamp(2.4rem, 7vw, 4rem)/1 var(--f-display); letter-spacing: -0.02em }
.tracker .count small { font: 500 1rem var(--f-body); letter-spacing: 0; color: var(--ink-2); margin-left: 6px }
.tracker .units { display: flex; gap: 18px; flex-wrap: wrap }
.tracker .units div { display: grid }
.tracker .units b { font: 500 1.9rem/1 var(--f-data); font-variant-numeric: tabular-nums }
.tracker .units span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2) }
.meter { height: 10px; background: var(--paper); border: 1px solid var(--rule); position: relative }
.meter i { position: absolute; inset: 0 auto 0 0; background: var(--g3) }
.meter b { position: absolute; top: -4px; bottom: -4px; left: 50%; width: 2px; background: var(--ink) }
.trk-table td.y { font-family: var(--f-data) }
/* cross-country comparison */
.cmp-ctl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center }
.cmp-ctl .seg { grid-template-columns: repeat(4, auto); max-width: 640px }
@media (max-width: 560px) { .cmp-ctl .seg { grid-template-columns: repeat(2, auto) } .cmp-ctl .seg label:nth-of-type(3) { border-left: 0 } }
.cmp-ctl .seg label { padding: 7px 12px }
.sw-c { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; vertical-align: -1px }
svg.chart text.dl { font: 500 11px var(--f-body); fill: var(--ink) }
/* flags and sub-national cards */
.flag { height: .62em; width: auto; vertical-align: .08em; margin-right: .28em; box-shadow: 0 0 0 1px var(--rule); border-radius: 1px }
.subs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px }
.sub { display: grid; gap: 6px; padding: 14px 16px; background: var(--sheet); border: 1px solid var(--rule); text-decoration: none; color: var(--ink) }
.sub:hover { border-color: var(--accent) }
.sub .nm { font: 600 1.1rem var(--f-display); display: flex; align-items: center; gap: 8px }
.sub .nm img { height: 18px; width: auto; box-shadow: 0 0 0 1px var(--rule) }
.sub .nm .noflag { display: inline-block; width: 27px; height: 18px; border: 1px dashed var(--rule) }
.sub .v { font: 500 1.3rem var(--f-data) }
.sub .s { font-size: .8rem; color: var(--ink-2) }
/* people pages */
.more { display: inline-block; margin-top: 4px; font-weight: 600; font-size: .88rem; text-decoration: none; border-bottom: 1px solid currentColor }
.nat-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule) }
.nat-facts > div { padding: 14px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: grid; gap: 4px; align-content: start }
.nat-facts > div p { font-size: .88rem; color: var(--ink-2) }
.branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px }
.branch { background: var(--sheet); border: 1px solid var(--rule); border-top: 4px solid var(--st, var(--g3)); padding: 14px 16px 16px; display: grid; gap: 8px; align-content: start; min-width: 0 }
.branch .hd { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; justify-content: space-between }
.branch .end { font: italic 400 .95rem var(--f-display); color: var(--ink-2) }
.branch .st { font: 500 .66rem/1 var(--f-data); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px 3px; border: 1px solid var(--st); color: var(--ink); white-space: nowrap }
.branch p { font-size: .88rem; color: var(--ink-2) }
.branch p b { color: var(--ink); font-weight: 600 }
.stkey { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .78rem; color: var(--ink-2) }
.stkey span::before { content: ""; display: inline-block; width: 12px; height: 4px; margin-right: 6px; vertical-align: 2px; background: var(--st) }
/* origins */
.bars { display: grid; gap: 5px; font-size: .86rem }
.bars .r { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr 5.5rem; gap: 10px; align-items: center }
.bars .r .b { height: 12px; background: var(--paper); border: 1px solid var(--rule); position: relative; min-width: 0 }
.bars .r .b i { position: absolute; inset: 0 auto 0 0 }
.bars .r .n { font-family: var(--f-data); font-variant-numeric: tabular-nums; text-align: right; font-size: .8rem }
@media (max-width: 520px) { .bars .r { grid-template-columns: 6.5rem 1fr 4.5rem } }
.orig { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px 36px }
/* peoples */
.lead-p { font: 400 1.22rem/1.55 var(--f-display); max-width: 66ch }
.folk { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px }
.person { background: var(--sheet); border: 1px solid var(--rule); display: grid; grid-template-rows: auto 1fr; min-width: 0 }
.plate:has(img) { aspect-ratio: 4 / 3 }
.plate { min-height: 120px; max-width: 100%; position: relative; overflow: hidden; display: grid; align-content: end; padding: 16px; color: var(--paper); background: var(--plate, var(--g3)) }
.plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.plate .en { position: relative; font: 600 clamp(1.5rem, 3.2vw, 2.1rem)/1.05 var(--f-display); text-wrap: balance }
.plate .kind { position: relative; font: 500 .7rem var(--f-data); letter-spacing: .1em; text-transform: uppercase; opacity: .85; margin-bottom: 6px }
.plate.photo { aspect-ratio: 4 / 3; color: #fff }
.plate.photo::after { content: ""; position: absolute; inset: 58% 0 0; background: linear-gradient(to bottom, rgba(10,14,16,0), rgba(10,14,16,.66)) }
.plate.photo .kind, .plate.photo .en { z-index: 1; text-shadow: 0 1px 3px rgba(0,0,0,.55) }
.credit-line { font-size: .74rem !important; line-height: 1.45; color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-bottom: 9px }
.credit-line span { display: block; font-family: var(--f-data); font-size: .68rem; margin-top: 2px }
.person .txt { padding: 14px 16px 16px; display: grid; gap: 9px; align-content: start }
.person .txt p { font-size: .9rem; color: var(--ink-2) }
.person .txt p b { color: var(--ink); font-weight: 600 }
.person .cnt { font: 500 .78rem var(--f-data); color: var(--ink) }
.themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px }
.themes div { border-top: 2px solid var(--ink); padding-top: 10px; display: grid; gap: 6px }
.themes p { font-size: .9rem; color: var(--ink-2) }

.clock { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-block: 4px }
.clock div { display: grid; gap: 2px; border-top: 2px solid var(--ink); padding-top: 6px; min-width: 0 }
.clock b { font: 500 clamp(1.3rem, 3.6vw, 2.5rem)/1 var(--f-data); font-variant-numeric: tabular-nums }
.clock div:first-child b { font-family: var(--f-display); font-weight: 600 }
.clock span { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2) }
@media (max-width: 420px) { .clock { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* maps (boundaries pre-projected at build time; see geo.js) */
.map { position: relative; min-width: 0 }
.map svg { width: 100%; height: auto; display: block }
.map path.u { stroke: var(--sheet); stroke-width: .7; stroke-linejoin: round; vector-effect: non-scaling-stroke }
.map path.u.off { fill: var(--land-off); stroke: var(--rule) }
.map path.u.nodata { fill: var(--land) }
.map a path.u, .map path.u.hit { cursor: pointer }
.map path.u.hl, .map a:focus-visible path.u { stroke: var(--ink); stroke-width: 1.6 }
.map a:focus-visible { outline: none }
.map circle.micro { stroke: var(--sheet); stroke-width: 1; vector-effect: non-scaling-stroke }
.map .hover-tip { white-space: normal; max-width: 240px }
.mapfig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; align-items: start }
.mapfig .map { max-width: 520px; width: 100%; justify-self: center }
@media (max-width: 760px) { .mapfig { grid-template-columns: 1fr } }
.ramp { display: flex; align-items: stretch; gap: 2px; font: 11px var(--f-data); color: var(--ink-2) }
.ramp div { flex: 1; display: grid; gap: 3px; min-width: 0 }
.ramp i { height: 10px; display: block; border-radius: 1px }
.ramp.nd { flex: 0 0 auto; margin-left: 10px }
.ramp.nd div { flex: 0 0 auto }
.ramp.nd i { width: 26px; background: var(--land) }
.settler-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 480px }
.settler-row .map { border-top: 1px solid var(--rule); padding-top: 6px }
.settler-row .map span { font: 500 .72rem var(--f-data); color: var(--ink-2) }
@media (max-width: 520px) { .settler-row { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.maptab { font-size: .82rem }
.maptab td, .maptab th { padding: 4px 8px }

.tree-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:10px;padding:6px 4px;background:var(--sheet)}
.ftree{display:block;max-width:none}
.ftree .grid line{stroke:var(--rule);stroke-width:1}.ftree .grid line.now{stroke:var(--ink-2);stroke-dasharray:3 3}
.ftree .grid text{font:10.5px var(--f-body);fill:var(--ink-2);stroke:none}
.ftree line.cd{stroke-width:3.2;stroke-linecap:round}.ftree line.vt{stroke-width:2;stroke-dasharray:5 3;stroke-opacity:.7}.ftree line.tk{stroke-width:4;stroke-linecap:round}
.ftree .ma{fill:var(--sheet);stroke-width:2}.ftree .mx{stroke-width:2.2;fill:none}
.ftree text{font:11.5px/1 var(--f-body);fill:var(--ink);paint-order:stroke;stroke:var(--sheet);stroke-width:5px;stroke-linejoin:round}
.tl-ctl{margin:0 0 10px}.tl-ctl .seg label{font-size:.8rem}
.ftree a text{cursor:pointer}.ftree a:hover text,.ftree a:focus text{fill:var(--accent);text-decoration:underline}
.ftree .v{font-style:italic;fill:var(--ink-2)}.ftree .nt{font-size:10px;fill:var(--ink-2)}
.ftree .fork{fill:none;stroke-width:1.6;stroke-opacity:.8}.ftree .merge{fill:none;stroke-width:1.4;stroke-dasharray:3 2.5;stroke-opacity:.32}.ftree.hlon g.nd.hl:not(.hd) .merge{stroke-opacity:1;stroke-width:1.8}.tl-key .mg{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 2.5}.ftree .knot{stroke:var(--sheet);stroke-width:1.2}
.ftree .nm{font-weight:600}
.ftree.hlon g.nd{opacity:.22;transition:opacity .15s}.ftree.hlon g.nd.hl{opacity:1}
.tl-key .fk{fill:none;stroke:var(--ink);stroke-width:1.6}.tl-key circle{fill:var(--ink)}
.ftree g.nd[data-ctx]{opacity:.32}.ftree.hlon g.nd[data-ctx].hl{opacity:.6}
.tl-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.tl-tog{font:inherit;font-size:.8rem;padding:5px 11px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);cursor:pointer}
.tl-tog[aria-pressed="true"]{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.ftree line.hit{stroke:transparent;stroke-width:14;pointer-events:stroke}
/* family tree: outline view */
.tl-view{display:inline-flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden}
.tl-vw{font:inherit;font-size:.8rem;padding:5px 12px;border:0;background:var(--sheet);color:var(--ink-2);cursor:pointer}
.tl-vw[aria-pressed="true"]{background:var(--ink);color:var(--sheet)}
.tl-find{font:inherit;font-size:.85rem;padding:5px 10px;border:1px solid var(--rule);border-radius:999px;background:var(--sheet);color:var(--ink);min-width:0;width:13rem;max-width:100%}
.tl-act{font:inherit;font-size:.78rem;padding:4px 10px;border:1px solid var(--rule);border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer}
.tl-msg{font-size:.78rem}
.tl-key .om{width:12px;height:12px}
.otree{border:1px solid var(--rule);border-radius:10px;background:var(--sheet);font-size:.88rem}
.otree .or{display:grid;grid-template-columns:minmax(0,1fr) 8.6rem minmax(0,38%);align-items:center;gap:0 12px;padding:3px 10px 3px 0;border-top:1px solid color-mix(in srgb,var(--rule) 55%,transparent);position:relative}
.otree .or[hidden]{display:none}
.otree .ohead{position:sticky;top:0;z-index:2;background:var(--sheet);border-top:0;border-bottom:1px solid var(--rule);border-radius:10px 10px 0 0;font-size:.72rem;color:var(--ink-2);padding-block:6px}
.otree .obody{position:relative}
.otree .ogrid{position:absolute;top:0;bottom:0;right:10px;width:38%;pointer-events:none}
.otree .ogrid i{position:absolute;top:0;bottom:0;border-left:1px solid color-mix(in srgb,var(--rule) 70%,transparent)}
.otree .oaxis{height:1.1em}.otree .oaxis span{position:absolute;transform:translateX(-50%);white-space:nowrap}.otree .oaxis .now{color:var(--ink)}
.otree .on{display:flex;align-items:center;gap:6px;min-width:0;padding-left:calc(6px + var(--d) * 18px);flex-wrap:wrap;row-gap:0}
.otree .ot{width:20px;height:20px;flex:none;display:inline-grid;place-items:center;border:0;background:transparent;padding:0;color:var(--ink-2);cursor:pointer;border-radius:4px}
.otree span.ot{cursor:default}
.otree .ot svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .12s}
.otree .or[aria-expanded="true"] > .on .ot svg{transform:rotate(90deg)}
.otree button.ot:hover,.otree button.ot:focus-visible{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink)}
.otree .om{width:11px;height:11px;flex:none;overflow:visible}
.om .oma{fill:var(--sheet);stroke-width:1.8}.om .omx{stroke-width:2;fill:none}.om .omv{stroke-width:2;stroke-dasharray:3 2}
.otree .onm{font-weight:600;color:var(--ink);text-decoration:none;min-width:0;overflow-wrap:anywhere;max-width:calc(100% - 52px)}.otree a.onm:hover{text-decoration:underline;color:var(--accent)}
.otree .ov{font-style:italic;font-weight:500;color:var(--ink-2)}
.otree .otr .onm{font-style:normal;font-weight:700;color:var(--ink)}
.otree .oc{font-size:.7rem;padding:0 6px;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-2)}
.otree .onote{flex-basis:100%;padding-left:43px;font-size:.74rem;color:var(--ink-2);line-height:1.25;margin-top:-1px}
.otree .od{font-size:.76rem;color:var(--ink-2);font-variant-numeric:tabular-nums;line-height:1.2}
.otree .oe{display:block;font-size:.68rem}
.otree .obar{position:relative;height:12px}
.otree .obar i{position:absolute;top:4px;height:4px;border-radius:2px;background:var(--c)}
.otree .obar i.vb{height:0;top:5px;border-top:2px dashed var(--c);background:none;opacity:.7;border-radius:0}
.otree .octx{opacity:.45}
.otree.ofocus .or[data-id]:not(.olin){opacity:.28}
.otree .ofo{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.otree .ohit .onm{background:color-mix(in srgb,var(--accent) 22%,transparent);border-radius:3px}
.otree .or[data-id]{cursor:pointer}
@keyframes oflash{from{background:color-mix(in srgb,var(--accent) 35%,transparent)}to{background:transparent}}
.otree .oflash{animation:oflash 1.6s ease-out}
.intree{display:inline-block;width:auto;font:inherit;font-size:.75rem;margin-top:8px;padding:3px 10px;border:1px solid var(--rule);border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer}
.intree:hover{color:var(--ink);border-color:var(--ink-2)}
@media (max-width:700px){
  .otree .or{grid-template-columns:minmax(0,1fr) 5.6rem;padding-right:8px}
  .otree .obar,.otree .ogrid,.otree .ohead .oaxis{display:none}
  .otree .on{padding-left:calc(2px + var(--d) * 12px)}
  .otree .onote{padding-left:37px}
  .tl-find{width:100%}
}
.pm-wrap{position:relative;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--sheet);touch-action:pan-y}
svg.pm{display:block;width:100%;height:auto;cursor:grab;--k:1}svg.pm:active{cursor:grabbing}
.pm-sea{fill:color-mix(in srgb,var(--accent) 5%,var(--sheet))}.pm-land{fill:color-mix(in srgb,var(--ink) 9%,var(--sheet));stroke:color-mix(in srgb,var(--ink) 22%,var(--sheet));stroke-width:calc(.5px / var(--k));stroke-linejoin:round}
.pm-a{fill:none;stroke-width:calc(1.3px / var(--k));stroke-opacity:.5}.pm-a.pm-end{stroke-dasharray:calc(3px / var(--k)) calc(2px / var(--k));stroke-opacity:.35}
.pm-ahp{fill:var(--ink-2)}
.pm-d circle:not(.pm-hit){stroke:var(--sheet);stroke-width:calc(1px / var(--k))}.pm-d{cursor:pointer;outline:none}
.pm-d circle{transform-box:fill-box;transform-origin:center;transform:scale(calc(1 / var(--k)))}
.pm-hit{fill:transparent;stroke:none}
.pm-ring{fill:var(--sheet);stroke-width:2}.pm-d .pm-ring{stroke-width:calc(1.8px)}
.pm-r{fill:none;stroke:var(--ink-2);stroke-width:1.4;opacity:.7;transform-box:fill-box;transform-origin:center;transform:scale(calc(1 / var(--k)))}
svg.pm.pm-hl .pm-d:not(.on){opacity:.25}svg.pm.pm-hl .pm-a:not(.on){opacity:.12}svg.pm.pm-hl .pm-a.on{stroke-opacity:1;stroke-width:calc(2.2px / var(--k))}
.pm-noend .pm-end{display:none}
.locals{margin:10px 0 4px;font-size:.88rem}.locals summary{cursor:pointer;font-weight:600;color:var(--ink-2)}.locals ul{margin:6px 0 0;padding-left:18px}.locals li{margin:0 0 7px;line-height:1.4}.locals li:target{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.lst{display:inline-block;font-size:.7rem;padding:0 6px;border-radius:999px;background:color-mix(in srgb,var(--st) 18%,transparent)}
.seealso{font-size:.85rem;color:var(--ink-2);margin:12px 0 0}
.or.oloc .onm{font-size:.86em;color:var(--ink-2)}

.pm-af{fill:var(--c);fill-opacity:.42;stroke:var(--c);stroke-width:calc(.8px / var(--k));stroke-linejoin:round}
.pm-ar.pm-end .pm-af{fill-opacity:.1;stroke-dasharray:calc(2.5px / var(--k)) calc(1.5px / var(--k))}
.pm-ah{fill:url(#pm-hatch);pointer-events:none}.pm-hl-l{stroke:var(--ink-2);stroke-width:1.1;stroke-opacity:.55}
.pm-c{fill:var(--c);stroke:var(--sheet);stroke-width:calc(.8px / var(--k));transform-box:fill-box;transform-origin:center;transform:scale(calc(1 / var(--k)))}
.pm-ar{cursor:pointer;outline:none}.pm-ar:not(.pm-sm) .pm-c{display:none}.pm-ar:hover .pm-af,.pm-ar.on .pm-af{fill-opacity:.62;stroke-width:calc(1.6px / var(--k))}
svg.pm.pm-hl .pm-ar:not(.on){opacity:.22}
.pm-kh{fill:url(#pm-hatch);stroke:var(--ink-2);stroke-dasharray:2 1.5}
.pm-zoom{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:4px}
.pm-zoom button{width:30px;height:30px;border-radius:8px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);font:600 16px/1 var(--f-body);cursor:pointer}
.pm-tip{position:absolute;z-index:3;width:260px;max-width:calc(100% - 12px);background:var(--sheet);color:var(--ink);border:1px solid var(--rule);border-radius:10px;padding:10px 12px;font-size:.82rem;line-height:1.35;box-shadow:0 6px 24px rgba(0,0,0,.14)}
.pm-tip p{margin:.4em 0 0}.pm-tip b{display:block;font-size:.92rem}.pm-st{display:inline-block;margin-top:2px;font-size:.7rem;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--st) 18%,transparent);color:var(--ink)}
.pm-find{font:inherit;font-size:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.pm-key .pm-akey{fill:none;stroke:var(--ink-2);stroke-width:1.4}.pm-key .pm-ring{fill:none;stroke-width:1.8}
@media (max-width:700px){.pm-tip{left:6px!important;right:6px;width:auto;top:auto!important;bottom:6px}}
.tl-key{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8rem;color:var(--ink-2);margin:0 0 10px}
.tl-key span{display:inline-flex;align-items:center;gap:6px}.tl-key svg{overflow:visible}
.tl-key line{stroke:var(--ink);stroke-width:3}.tl-key path,.tl-key rect{fill:var(--ink)}.tl-key .ma{fill:var(--sheet);stroke:var(--ink);stroke-width:2}.tl-key .mx{stroke:var(--ink);stroke-width:2;fill:none}
.branch:target{outline:2px solid var(--accent);outline-offset:2px}
.branch2{background:var(--sheet);border:1px solid var(--rule);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.branch2 .band{background:var(--pl);color:#fff;padding:12px 14px 12px;display:grid;gap:6px}
.branch2.ended .band{opacity:.62}.branch2.gone .band{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 6px,transparent 6px 12px)}
.branch2 .top{display:flex;justify-content:space-between;gap:8px;font:600 .64rem/1.25 var(--f-data);letter-spacing:.08em;text-transform:uppercase}
.branch2 .top .fate{text-align:right;white-space:nowrap}
.branch2 .en2{font:600 1.32rem/1.15 var(--f-display);overflow-wrap:anywhere}
.branch2 .body{padding:12px 14px 14px;display:grid;gap:8px;align-content:start}
.branch2 h3{font:600 1.02rem/1.25 var(--f-display);margin:0}
.branch2 .when2{font-size:.76rem;color:var(--ink-2)}
.branch2 p{font-size:.88rem;color:var(--ink-2);margin:0}.branch2 p b{color:var(--ink);font-weight:600}
.branch2 .cshare{font:500 .78rem var(--f-data);color:var(--accent);background:none;border:1px solid var(--rule);border-radius:999px;padding:4px 10px;cursor:pointer;justify-self:start}
.branch2 details.cmore>summary{border:0;padding:0;cursor:pointer;font:500 .78rem var(--f-data);color:var(--accent);list-style:none}
.branch2 details.cmore>summary::-webkit-details-marker{display:none}
.branch2 details.cmore>summary::before{content:'+ ';}.branch2 details.cmore[open]>summary::before{content:'− '}
.branch2 details.cmore[open]>summary{margin-bottom:8px}.branch2 details.cmore>div{display:grid;gap:8px}
.branch2:target{outline:2px solid var(--accent);outline-offset:2px}
/* clear hover and press feedback on every clickable control */
summary,button,[role=button],.dyk-i,.g-jump button{cursor:pointer;-webkit-tap-highlight-color:color-mix(in srgb,var(--accent) 20%,transparent)}
.branch2 details.cmore>summary,details.locals>summary,.srcs summary{display:inline-block;padding:2px 8px;margin-left:-8px;border-radius:6px;transition:background .12s,color .12s,transform .06s;user-select:none}
.branch2 details.cmore>summary:hover,details.locals>summary:hover,.srcs summary:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.branch2 details.cmore>summary:active,details.locals>summary:active,.srcs summary:active,.intree:active,.cshare:active,.g-jump button:active,.endcta-b>*:active,.dyk-i:active{transform:scale(.97);opacity:.85}
summary:focus-visible,button:focus-visible,.dyk-i:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.intree:hover,.cshare:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.endcta-b>*:hover{border-color:var(--accent);filter:brightness(1.05)}
.branch2 .rel{font-size:.8rem;line-height:1.45}.branch2 .rel span{color:var(--ink-2)}.branch2 .rel a{color:var(--accent);text-decoration:none}.branch2 .rel a:hover{text-decoration:underline}
.branch2 .kofi-line{font-size:.78rem}.branch2 .kofi-line a{color:var(--accent)}
.guide{margin:18px 0 6px;padding:14px 16px;border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:8px;background:var(--sheet);display:grid;gap:10px}
.guide .g-hint{margin:0;font-size:.92rem;color:var(--ink-2)}.guide .g-hint b{color:var(--ink)}
.g-jump{display:flex;flex-wrap:wrap;gap:6px}
.g-jump button{font:500 .78rem var(--f-body);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:5px 11px;cursor:pointer;text-align:left}
.g-jump button:hover{border-color:var(--accent);color:var(--accent)}.g-jump .g-rand{color:var(--accent)}
.dyk .eyebrow{margin-bottom:6px}.dyk-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.dyk-i{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--paper);text-decoration:none;color:var(--ink)}
.dyk-i b{font:600 .95rem var(--f-display);color:var(--accent)}.dyk-i span{font-size:.8rem;color:var(--ink-2);line-height:1.35}.dyk-i:hover{border-color:var(--accent)}
.endcta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:26px 0 8px;padding:16px 18px;border:2px solid var(--accent);border-radius:10px;background:color-mix(in srgb,var(--accent) 7%,transparent)}
.endcta>div:first-child{flex:1 1 300px;display:grid;gap:4px}.endcta b{font-size:1rem}.endcta span{font-size:.88rem;color:var(--ink-2)}
.endcta-b{display:flex;flex-wrap:wrap;gap:8px}.endcta-b>*{font:600 .85rem var(--f-body);padding:8px 14px;border-radius:8px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);cursor:pointer;text-decoration:none}
.endcta-b a.pri{background:var(--accent);color:var(--paper);border-color:transparent}
.plkey{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8rem;color:var(--ink-2);align-items:center}
.plkey i{display:inline-block;width:13px;height:13px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.hero-fl{display:flex;gap:20px;align-items:center}.hero-fl img{height:64px;width:auto;border:1px solid var(--rule);border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
@media (max-width:600px){.hero-fl{gap:12px}.hero-fl img{height:40px}}

.pm-wrap{position:relative;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--sheet)}
.pmap{display:block;width:100%;height:auto}.pmap .land{fill:var(--g3);fill-opacity:.18;stroke:var(--ink-2);stroke-opacity:.35;stroke-width:.5}
.pmap circle{stroke:var(--sheet);stroke-width:1.5}.pmap a:hover circle,.pmap a:focus circle{stroke:var(--ink);stroke-width:2.2}
.pp-hero h1{font-size:clamp(2rem,5vw,3.2rem)}
.pp-stats{display:flex;gap:28px;margin-top:18px;flex-wrap:wrap}.pp-stats b{display:block;font:600 2rem/1 var(--f-display)}.pp-stats span{font-size:.8rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em}
.pp-key{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:.78rem;color:var(--ink-2);margin:6px 0 10px;padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pp-key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.pp-fam{margin-top:34px}.pp-fam header{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;margin-bottom:14px}
.pp-fam header .sw{width:14px;height:14px;border-radius:3px;align-self:center}.pp-fam header h2{font-size:1.45rem}.pp-fam header p{grid-column:2;margin:4px 0 0;color:var(--ink-2);max-width:60ch}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.pp-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px 18px 14px;background:var(--sheet);border:1px solid var(--rule);border-radius:12px;text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.pp-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--fam)}
.pp-card:hover,.pp-card:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.09);border-color:var(--fam)}
.pp-top{display:flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.pp-flag img{height:14px;width:auto;border-radius:2px;box-shadow:0 0 0 1px var(--rule);display:block}
.pp-card h3{font-size:1.5rem;line-height:1.1}.pp-end{font-style:italic;color:var(--ink-2);font-size:.9rem;margin-top:-4px}
.pp-card p{margin:0;font-size:.88rem;line-height:1.5;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pp-strip{width:100%;height:14px;display:block;margin-top:auto}.pp-strip line{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke}.pp-strip line.t{stroke-width:1.5;stroke-opacity:.8}
.pp-ax{display:flex;justify-content:space-between;font-size:.66rem;color:var(--ink-2);margin-top:-4px}
.pp-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;gap:1px;background:var(--rule)}.pp-bar i{display:block}
.pp-foot{display:flex;justify-content:space-between;font-size:.76rem;color:var(--ink-2)}.pp-card .go{color:var(--fam);font-weight:600}
.srcs{margin-top:12px}.srcs summary{cursor:pointer;font-weight:600}.srcs ol{font-size:13px;line-height:1.5;columns:2 320px;column-gap:28px;padding-left:20px}.srcs li{break-inside:avoid;margin-bottom:3px;overflow-wrap:anywhere}.srcs li.nat a{font-style:italic}

.sugg{display:block;margin-top:8px;background:none;border:0;padding:4px 0;color:var(--ink-2);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
.sugg:hover{color:var(--accent)}
.pp-card.sugg{display:flex;margin:0;padding:18px 18px 14px;border:1px solid var(--rule);background:var(--sheet);font-size:inherit;text-decoration:none;color:inherit}.pp-card.sugg h3{text-decoration:none}
.sg-back{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.sg-box{background:var(--sheet,#fff);color:var(--ink,#111);max-width:560px;width:100%;max-height:90vh;overflow:auto;border-radius:10px;padding:22px 22px 18px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.sg-box h3{margin:0 0 4px}.sg-box label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px}
.sg-box textarea,.sg-box input,.sg-box select{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:8px;border:1px solid var(--rule,#ccc);border-radius:6px;background:var(--paper,#fff);color:inherit}
.sg-box textarea{min-height:110px}.sg-row{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.sg-row button,.sg-row a{font:inherit;font-size:14px;padding:8px 14px;border-radius:6px;border:1px solid var(--rule,#ccc);background:none;color:inherit;cursor:pointer;text-decoration:none}
.sg-row .go{background:var(--accent,#1f4e8c);color:var(--paper,#fff);font-weight:600;border-color:transparent}.sg-note{font-size:12.5px;color:var(--ink-2,#555);margin:6px 0 0}
.sg-box{max-width:620px}.sg-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.sg-x{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--ink-2)}
.sg-ctx{display:flex;gap:8px;align-items:baseline;margin:6px 0 2px;font-size:13px;color:var(--ink-2)}.sg-ctx b{color:var(--ink)}
.sg-lab{font-size:13px;font-weight:600;margin:14px 0 6px}
.sg-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.sg-chip{display:grid;gap:3px;text-align:left;padding:10px 11px;border:1px solid var(--rule,#ccc);border-radius:8px;background:var(--paper,#fff);color:inherit;cursor:pointer;font:inherit}
.sg-chip b{font-size:13.5px}.sg-chip span{font-size:11.5px;color:var(--ink-2);line-height:1.3}
.sg-chip.on{border:2px solid var(--accent,#1f4e8c);padding:9px 10px;background:color-mix(in srgb,var(--accent,#1f4e8c) 8%,var(--sheet,#fff))}
.sg-box textarea::placeholder,.sg-box input::placeholder{color:var(--ink-2);opacity:.8}
.sg-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:560px){.sg-two{grid-template-columns:1fr}}
.sg-row{align-items:center}.sg-mail{margin-right:auto;border:0!important;padding-left:0!important;text-decoration:underline!important;color:var(--ink-2)!important}
.sg-msg:empty{display:none}.sg-alt textarea{min-height:80px;margin-top:6px}.sg-alt button{margin-top:6px;font:inherit;font-size:14px;padding:8px 14px;border-radius:6px;border:1px solid var(--rule,#ccc);background:none;color:inherit;cursor:pointer}
.sg-cta{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:18px 0 22px;padding:16px 18px;border:2px solid var(--accent,#1f4e8c);border-radius:10px;background:color-mix(in srgb,var(--accent,#1f4e8c) 8%,transparent)}
.sg-cta>div{flex:1 1 320px;display:flex;flex-direction:column;gap:4px}.sg-cta b{font-size:16px}.sg-cta span{font-size:14px;color:var(--ink-2)}
.sugg.sg-cta-btn{display:inline-block;margin:0;padding:10px 18px;border-radius:8px;background:var(--accent,#1f4e8c);color:#fff;text-decoration:none;font-weight:600;font-size:15px}
.sugg.sg-cta-btn:hover{color:#fff;filter:brightness(1.1)}
.endcta .endcta-b>.sugg{display:inline-block;margin:0;font:600 .85rem var(--f-body);padding:8px 14px;border:1px solid var(--rule);border-radius:8px;background:var(--sheet);color:var(--ink);text-decoration:none}
.ftree g.tg{cursor:pointer}.ftree g.tg rect{fill:var(--paper,#fff);stroke:var(--ink-2);stroke-width:1}.ftree g.tg text{font:600 13px var(--f-data,monospace);fill:var(--ink)}.ftree g.tg:hover rect,.ftree g.tg:focus rect{stroke:var(--accent);stroke-width:1.6}.ftree text.tgn{font:600 10.5px var(--f-data,monospace);fill:var(--ink-2)}
.pp-tree{margin-top:8px}.pp-acts{display:flex;gap:8px;margin:0 0 12px}
.pp-node{border-left:2px solid var(--rule);margin:6px 0 6px 0;padding-left:14px}.pp-node .pp-node{margin-left:6px}
.pp-node>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:8px 0}
.pp-node>summary::-webkit-details-marker{display:none}
.pp-fl{display:inline-flex;gap:4px;align-items:center;align-self:center}.pp-d0>summary .pp-fl img{height:18px}.pp-d1>summary .pp-fl img{height:16px}.pp-fl img{height:14px;width:auto;border:1px solid var(--rule);border-radius:1px;display:block}
.pp-node>summary::before{content:'▸';display:inline-block;width:12px;color:var(--ink-2);transition:transform .15s}
.pp-node[open]>summary::before{transform:rotate(90deg)}
.pp-nm{font-family:var(--f-head,serif);font-weight:600}.pp-d0>summary .pp-nm{font-size:26px}.pp-d1>summary .pp-nm{font-size:21px}.pp-d2>summary .pp-nm{font-size:18px}.pp-d3>summary .pp-nm{font-size:16px}
.pp-ct{font-size:12px;color:var(--ink-2);font-family:var(--f-data,monospace)}
.pp-ds{flex-basis:100%;margin-left:16px;font-size:14px;color:var(--ink-2);max-width:70ch}
.pp-sw{display:inline-flex;gap:2px}.pp-sw i{width:9px;height:9px;border-radius:2px;display:inline-block}
.pp-in>.pp-grid{margin:6px 0 14px}.pp-x .pp-xn{font-size:12px;margin:4px 2px 0}