/* Strata: the country page, after docs/design-concepts/2026-10-15-country-page/c-strata.html,
   on the site's colour tokens (site.css) so dark and light both work. Loaded after site.css
   on country pages, the home page, and Countries, Editions, Fields, Corrections and About
   (their blocks are at the foot). The country page is chart-led: the editions strip, the plate, the find bar
   (site.css), the key figures as full-width small multiples, then a section per category,
   each led by a few charts of its key fields (Lede.php) and followed by the rest as rows, one
   per field with its strip of editions.

   The page's security policy allows no inline styles, so every measured width is an SVG
   attribute (bars) or a table cell width (bands), and the mockup's inline variants are
   classes here (.h28, .h40, .two, .sm, .gap). */

.strata-page { --ink: color-mix(in srgb, var(--text) 88%, var(--bg)); font-size: 16px; line-height: 1.55; }
.strata-page .k { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.strata-page .k a, .strata-page .h3 a { color: inherit; text-decoration: none; }
.strata-page .k a:hover, .strata-page .h3 a:hover { color: var(--accent-text); }
.strata-page .num { font-variant-numeric: tabular-nums lining-nums; }
.strata-page .dot { color: var(--control); }
.strata-page .est { color: var(--muted); }
.strata-page .pk::first-letter { text-transform: uppercase; }

/* The ruler: every edition as a cell under the site header, the year in each (its last two
   digits where the cells are narrower; on a phone no year, with the first and last under the
   row instead). The open edition is filled; years the country is absent from are dimmed and
   not links. Pointing at a year lights its column in every field's strip (site.js). */
.rulerbar { border-bottom: 1px solid var(--line); }
.ruler { padding: 10px 0; }
.ruler .cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.ruler .ed { display: flex; align-items: center; justify-content: center; min-width: 0; height: 36px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 11px; color: var(--soft); text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.ruler .ed::before { content: attr(data-y); }
.ruler a.ed:hover { background: var(--hover-bg); border-color: var(--hover-border); color: var(--text); }
.ruler a.ed:active { background: var(--press-bg); }
.ruler .ed[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.ruler .ed.none { color: var(--control); border-color: var(--line-soft); }
.ruler .axis { display: none; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--control); }
/* What the strips mean, on the plate. */
.legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 24px 0 0; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 12px; margin-right: 7px; border-radius: 1px; vertical-align: -1px; background: var(--line-soft); }
.legend i.o { background: var(--cell-on); } .legend i.x { background: var(--cell-chg); } .legend i.c { background: var(--accent); }

/* The plate: kicker, the name as large as its column allows, what it is, and the four
   facts that place it, feet aligned. */
.plate { --name-col: 796px; --name-max: 168px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; padding-top: 64px; padding-bottom: 32px; }
.plate.no-facts { --name-col: 1216px; }
.plate > div { min-width: 0; }
.plate .kicker { display: flex; flex-wrap: wrap; gap: 4px 0; }
.plate .kicker > * + *::before { content: "\00B7"; padding: 0 12px; color: var(--border); }
/* The name's size is its column's width over the length of its longest word (w4 to w18),
   capped by the whole name's length. Words never break. */
.plate h1 { margin: 10px 0 0; font-size: max(36px, min(var(--name-max), var(--name-fit, 168px))); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; text-wrap: balance; }
.plate h1.is-long { --name-max: 140px; }
.plate h1.is-longer { --name-max: 104px; letter-spacing: -0.04em; line-height: 0.95; }
.plate h1.is-longest { --name-max: 84px; letter-spacing: -0.03em; line-height: 1; }
.plate h1.w4 { --name-fit: calc(var(--name-col) / 2.48); } .plate h1.w5 { --name-fit: calc(var(--name-col) / 3.10); }
.plate h1.w6 { --name-fit: calc(var(--name-col) / 3.72); } .plate h1.w7 { --name-fit: calc(var(--name-col) / 4.34); }
.plate h1.w8 { --name-fit: calc(var(--name-col) / 4.96); } .plate h1.w9 { --name-fit: calc(var(--name-col) / 5.58); }
.plate h1.w10 { --name-fit: calc(var(--name-col) / 6.20); } .plate h1.w11 { --name-fit: calc(var(--name-col) / 6.82); }
.plate h1.w12 { --name-fit: calc(var(--name-col) / 7.44); } .plate h1.w13 { --name-fit: calc(var(--name-col) / 8.06); }
.plate h1.w14 { --name-fit: calc(var(--name-col) / 8.68); } .plate h1.w15 { --name-fit: calc(var(--name-col) / 9.30); }
.plate h1.w16 { --name-fit: calc(var(--name-col) / 9.92); } .plate h1.w17 { --name-fit: calc(var(--name-col) / 10.54); }
.plate h1.w18 { --name-fit: calc(var(--name-col) / 11.16); }
/* Under the name, two lines: the country's names, then what it is, each part capitalised,
   brackets dimmed. The local form may break after its slash. */
.plate .sub { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 20px; line-height: 1.4; color: var(--text); }
.plate .sub.facts { margin-top: 6px; font-size: 17px; color: var(--soft); }
/* One plain sentence on what the page is, and the names the country was published under. */
.plate .about { margin: 14px 0 0; max-width: 64ch; font-size: 17px; line-height: 1.5; color: var(--soft); }
.plate .about + .about { margin-top: 6px; }
.plate .sub > span { white-space: nowrap; }
.plate .sub > span::first-letter { text-transform: uppercase; }
/* The names flow as text, so the local form can break after its slash. */
.plate .sub.names { display: block; }
.plate .sub.names > span { display: inline; white-space: normal; }
.plate .sub.names .dot { margin: 0 10px; }
.plate .sub.names .flag { margin-right: 10px; vertical-align: -0.1em; }
.plate .sub .dot { color: var(--control); }
.plate .sub .dim { color: var(--muted); }
.plate .flag { font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal; font-weight: 400; font-size: 1.3em; line-height: 1; }
/* The facts: two columns; a long Location runs across both. */
.idgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; width: 380px; max-width: 100%; padding-bottom: 10px; font-size: 15px; }
.idgrid > div { min-width: 0; }
.idgrid > .wide { grid-column: 1 / -1; }
.idgrid b { display: block; font-weight: 600; color: var(--text); line-height: 1.4; }
.idgrid b.mono { font-weight: 500; }
.plate + .w-bar { margin-top: 8px; }

/* Key figures: a row per figure, its line across every edition between its name and its
   value in this edition; each point links to its edition. */
.strata { border-top: 1px solid var(--line); margin-top: 12px; }
.strata .row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 220px; gap: 24px; align-items: center; border-bottom: 1px solid var(--line-soft); padding: 6px 0; scroll-margin-top: 80px; transition: background-color 0.15s ease; }
.strata .row:hover { background: var(--bg-alt); }
.strata .l { font-size: 15px; font-weight: 600; line-height: 1.3; }
.strata .l small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); }
.strata .c { min-width: 0; }
.strip-chart { display: block; width: 100%; height: 56px; overflow: visible; }
.strip-now { stroke: var(--line); }
.strip-series { fill: none; stroke: var(--soft); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.strip-point .hit { fill: transparent; }
.strip-point .dot { fill: var(--accent); opacity: 0; transition: opacity 0.15s ease; }
.strip-point.current .dot { opacity: 1; }
.strip-chart a:hover .dot, .strip-chart a:focus-visible .dot { opacity: 1; }
.strip-chart a:focus-visible { outline: none; }
.strip-chart a:focus-visible .hit { fill: var(--band); }
.strata .v { text-align: right; line-height: 1; }
.strata .v b { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.strata .v .unit { font-size: 14px; color: var(--muted); }
.strata .v b.empty { font-size: 15px; font-weight: 500; color: var(--muted); }
.strata .v small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--muted); text-wrap: balance; }
.strata .axis { display: grid; grid-template-columns: 200px minmax(0, 1fr) 220px; gap: 24px; padding: 6px 0 0; }
.strata .axis div { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--control); }
.strata .axis .is-now { color: var(--accent-text); }
.correction { margin-top: 28px; }

/* Sections: a rule, the name, a line from the entry, the field count; the lede on a
   twelve-column grid; the ledger. */
.sec { padding-top: 72px; scroll-margin-top: 64px; }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; border-top: 1px solid var(--text); padding-top: 16px; margin-bottom: 28px; }
.sec-h h2 { margin: 0; font-size: clamp(36px, 4.5vw, 56px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; overflow-wrap: break-word; }
/* A line from the entry under the name, on a line of its own. */
.sec-h p { order: 1; flex: 0 0 100%; max-width: none; margin: 4px 0 0; font-size: 17px; line-height: 1.45; color: var(--soft); }
.sec-h p > span { display: inline-block; max-width: 640px; }
.sec-h .k { margin-left: auto; }
.lede { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; margin-bottom: 36px; }
.lede > div { min-width: 0; }
.c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
.h3 { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; font-size: 14px; font-weight: 700; line-height: 1.3; }
.h3 > span:first-child { flex: 1 1 auto; min-width: 0; }
.h3 .k { flex: none; font-weight: 400; text-align: right; }
.h3.gap, .rows.gap, .band.gap { margin-top: 22px; }
.h3.quiet { margin: 0 0 6px; font-weight: 400; color: var(--soft); }
.h3.quiet.gap { margin-top: 18px; }
.lede .sub { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.lede .sub .nt, .lede .sub .ln { display: block; }
.lede .sub .nt { font-size: 9px; }
.lede .sub .ln + .ln { margin-top: 2px; }
.lede details.sub-notes { margin-top: 6px; }
.lede details.sub-notes > summary { display: inline-block; font-size: 9px; font-weight: 500; color: var(--accent-text); cursor: pointer; list-style: none; }
.lede details.sub-notes > summary::-webkit-details-marker { display: none; }
.lede details.sub-notes > summary:hover { text-decoration: underline; }
.lede details.sub-notes > .sub { margin-top: 4px; }
.lede details.sub-notes.more > summary { font-size: 13px; }
.lede details.sub-notes > .ledger.one { columns: 1; margin-top: 6px; font-size: 13px; }
.lede .sub .sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lede .sub .ln > .nt, .leg .ln > .nt { display: inline; }
.leg .nt > .ln { display: block; }

/* Big figures: up to four in a row, two by two beside a chart. */
.bigs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.bigs.n1 { grid-template-columns: minmax(0, 1fr); }
.bigs.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bigs.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bigs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bigs > div { min-width: 0; }
.bigs .k { display: block; margin-bottom: 6px; }
.bigs .sub, .big + .sub { margin-top: 6px; }
.big { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-size: 64px; font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; }
.big.is-wide { font-size: 52px; }
.big.is-long, .big.sm { font-size: 40px; letter-spacing: -0.03em; }
.big .n { white-space: nowrap; }
.big small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; line-height: 1.3; }

/* Parts of a whole: a band, each part in its own colour and named where there is room. */
.strata-page .band { width: 100%; height: 56px; margin: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; border-radius: 4px; overflow: hidden; }
.strata-page .band.h40 { height: 40px; }
.strata-page .band.h32 { height: 32px; }
.strata-page .band.h28 { height: 28px; }
.strata-page .band td { padding: 0 0 6px 8px; vertical-align: bottom; overflow: hidden; white-space: nowrap; font-family: var(--mono); font-size: 12px; line-height: 1; color: var(--bg); }
.strata-page .band.h28 td, .strata-page .band.h32 td { padding-bottom: 7px; }
.strata-page .band td span::first-letter { text-transform: uppercase; }
.strata-page .band td.c1 { background: var(--cat-1); } .strata-page .band td.c2 { background: var(--cat-2); } .strata-page .band td.c3 { background: var(--cat-3); }
.strata-page .band td.c4 { background: var(--cat-4); } .strata-page .band td.c5 { background: var(--cat-5); }
.strata-page .band td.c6 { background: var(--cat-6); color: var(--text); } .strata-page .band td.c7 { background: var(--cat-more); color: var(--text); }
.strata-page .band td.rest { background: var(--line-soft); }
.leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13px; color: var(--soft); }
.leg i { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 2px; vertical-align: -1px; }
.leg .r { margin-left: auto; color: var(--muted); }
.leg .nt { flex-basis: 100%; color: var(--muted); }
.leg i.c1, .leg i.female, .leg i.left, .dots i.c1 { background: var(--cat-1); }
.leg i.c2, .dots i.c2 { background: var(--cat-2); } .leg i.c3, .dots i.c3 { background: var(--cat-3); }
.leg i.c4, .leg i.male, .leg i.right, .dots i.c4 { background: var(--cat-4); }
.leg i.c5, .dots i.c5 { background: var(--cat-5); } .leg i.c6, .dots i.c6 { background: var(--cat-6); } .leg i.c7, .dots i.c7 { background: var(--cat-more); }
.leg i.hollow, .dots i.hollow { background: none; border: 1.5px solid var(--control); box-sizing: border-box; }
.dots { display: flex; flex-wrap: wrap; gap: 4px; max-width: 720px; }
.dots.wide { max-width: 900px; }
.dots i { display: block; width: 14px; height: 14px; border-radius: 3px; }

/* Bars, in SVG with their widths as attributes: grey by default, amber for the row that
   sets the scale or a second unit, red for a negative. */
.hbar { display: block; width: 100%; height: 100%; }
.hbar rect { fill: var(--soft); }
.hbar.a rect { fill: var(--cat-1); }
.hbar.neg rect { fill: var(--del); }
.hbar.split rect.male { fill: var(--cat-4); }
.hbar.split rect.female { fill: var(--cat-1); }
.vbar { display: block; width: 100%; height: 100%; }
.vbar .track { fill: var(--line-soft); }
.vbar rect:not(.track) { fill: var(--accent); }

/* The age pyramid: oldest at the top, male to the left and female to the right. */
.pyr { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); gap: 8px 12px; align-items: center; font-size: 14px; }
.pyr .m, .pyr .f { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pyr .m { justify-content: flex-end; }
.pyr .hbar { flex: 1 1 auto; height: 44px; }
.pyr .m .hbar { border-radius: 3px 0 0 3px; }
.pyr .f .hbar { border-radius: 0 3px 3px 0; }
.pyr .m .hbar rect { fill: var(--cat-4); }
.pyr .f .hbar rect { fill: var(--cat-1); }
.pyr span { flex: none; font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.pyr .a { text-align: center; font-weight: 700; font-size: 16px; line-height: 1.2; }
.pyr .a small { display: block; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); }

/* Rows: a label, a bar and its figure. */
.rows { display: grid; grid-template-columns: fit-content(45%) minmax(64px, 1fr) auto; gap: 8px 14px; align-items: center; font-size: 14px; }
.rows .l { color: var(--soft); line-height: 1.3; }
.rows .b { height: 12px; background: var(--line-soft); border-radius: 2px; overflow: hidden; }
.rows .b.split { background: none; }
.rows .n { font-family: var(--mono); font-size: 13px; text-align: right; white-space: nowrap; }
/* Male · female with the totals: label and unit, total, split bar, the two figures. */
.mf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; align-items: start; }
.rows.mf { grid-template-columns: minmax(0, 1.4fr) minmax(48px, 1fr) auto; row-gap: 10px; }
.rows.mf.with-total { grid-template-columns: minmax(0, 1.4fr) auto minmax(48px, 1fr) auto; }
.rows.mf > .k { line-height: 1; }
.rows .l small { font-size: 11.5px; color: var(--muted); }
.rows .t { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--text); text-align: right; white-space: nowrap; }
.bigs.pop { margin-bottom: 22px; }

/* A mirror: bars to the left and the right of shared labels. */
.mirror { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); gap: 6px 10px; align-items: center; font-size: 14px; }
.mirror .L, .mirror .R { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 24px; }
.mirror .L { justify-content: flex-end; }
.mirror .hbar { flex: 1 1 auto; height: 24px; }
.mirror .L .hbar { border-radius: 3px 0 0 3px; }
.mirror .R .hbar { border-radius: 0 3px 3px 0; }
.mirror .L .hbar rect { fill: var(--cat-1); }
.mirror .R .hbar rect { fill: var(--cat-4); }
.mirror span { flex: none; font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.mirror .c { text-align: center; font-weight: 600; overflow-wrap: anywhere; }

/* Vertical bars. */
.vbars { display: flex; align-items: flex-end; gap: 28px; height: 200px; }
.vbars.h180 { height: 180px; }
.vbars > div { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; height: 100%; min-width: 0; }
.vbars .vbar { flex: 1 1 auto; min-height: 0; border-radius: 3px; overflow: hidden; }
.vbars b { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; overflow-wrap: anywhere; }
.vbars b.text { font-size: 17px; font-weight: 600; letter-spacing: 0; }
.vbars small { font-size: 13px; line-height: 1.3; color: var(--muted); }

/* The ledger: three columns of a label and one line, figures in mono. */
.ledger { columns: 3; column-gap: 40px; font-size: 14px; }
.ledger > div { break-inside: avoid; padding: 12px 0; border-top: 1px solid var(--line); scroll-margin-top: 92px; }
.ledger .k { display: block; margin-bottom: 4px; }
.ledger p { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.ledger p::first-letter { text-transform: uppercase; }
.ledger p.mono { font-family: var(--mono); font-size: 13px; color: var(--text); word-spacing: 0.1em; }
.ledger .pk { display: inline-block; }
.ledger .pk .colon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ledger .sep { color: var(--muted); }
.ledger .nt, .ledger .rank { display: block; margin-top: 3px; font-family: var(--font); font-size: 11px; line-height: 1.5; color: var(--muted); }
.ledger .nt { font-size: 9px; line-height: 1.5; }
.ledger .para { display: block; }
.ledger .para + .para { margin-top: 6px; }
.ledger p + p.intro-more, .ledger p.nt + p.nt { margin-top: 4px; }
/* An entry's sub-items as a small table of label and value, figures in mono; a list as a list. */
.ledger .pairs { margin: 0; display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: 3px 12px; font-size: 14px; }
.ledger .pairs > div { display: contents; }
.ledger .pairs dt { color: var(--muted); font-size: 13px; line-height: 1.5; }
.ledger .pairs dt::first-letter { text-transform: uppercase; }
.ledger .pairs dd { margin: 0; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.ledger .pairs dd::first-letter { text-transform: uppercase; }
.ledger .pairs dd .ln { display: block; }
.ledger .pairs dd .ln + .sep + .ln { margin-top: 4px; }
.ledger .pairs dd.mono { font-family: var(--mono); font-size: 13px; color: var(--text); }
.ledger .pairs .colon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ledger .pairs + p, .ledger p + .pairs, .ledger ul.items + p { margin-top: 6px; }
.ledger ul.items { margin: 0; padding-left: 1.1em; color: var(--ink); }
.ledger ul.items > li::marker { color: var(--control); }
.ledger ul.items > li::first-letter { text-transform: uppercase; }
.ledger ul.items > li + li { margin-top: 2px; }
/* Bullets read as running text: wrapped naturally, not balanced into short lines. */
.ledger ul.items.lines > li { text-wrap: pretty; }
.ledger div[id$="-text"] > p.mono { font-family: var(--mono); font-size: 13px; color: var(--text); }
/* The fields as rows (after docs/design-concepts/2026-10-19-home-and-country/a-ruler-country.html):
   the name, the text, and the field's strip of editions, a cell each (filled where the field
   is in that edition, brighter where its text changed from the edition before, amber for the
   open edition), linking to the field's history. */
.ledger.fields { columns: auto; }
.ledger.fields > .fr { display: grid; grid-template-columns: 210px minmax(0, 1fr) 252px; gap: 0 32px; padding: 14px 0; border-top: 1px solid var(--line-soft); transition: background-color 0.15s ease; }
.ledger.fields > .fr:first-child { border-top: 0; }
.ledger.fields > .fr:hover { background: var(--bg-alt); }
.lb { margin: 0; padding-top: 2px; font-size: 14px; font-weight: 700; line-height: 1.35; }
.lb a { color: inherit; text-decoration: none; }
.lb a:hover { color: var(--accent-text); }
.tx { min-width: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.tx p + p { margin-top: 8px; }
.st { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; height: 16px; margin-top: 3px; align-self: start; }
.st i { display: block; background: var(--line-soft); border-radius: 1px; transition: background-color 0.15s ease; }
.st i.o { background: var(--cell-on); }
.st i.x { background: var(--cell-chg); }
.st i.c { background: var(--accent); }
.st i.hl { outline: 1.5px solid var(--text); outline-offset: 0; }
.st:hover i.o { background: var(--muted); }
/* A cell that is an edition can be chosen (site.js): the row then shows that edition's text, the
   cell ringed, with the edition's year and the way back above the text. Pointing at a cell shows
   its edition in a small panel, and marks the year on the ruler. */
.js .st i.o, .js .st i.x, .js .st i.c { cursor: pointer; }
.st i.v { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--accent); }
.st-tip { position: fixed; z-index: 30; max-width: 340px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.45; color: var(--text); pointer-events: none; }
.st-tip .k { display: block; white-space: nowrap; }
.st-tip .t { display: block; margin-top: 3px; color: var(--soft); }
.st-tip .t.more { color: var(--muted); }
.ruler .ed.hl { border-color: var(--text); color: var(--text); }
.tx-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.tx-from .k { color: var(--accent-text); }
.tx-back { padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--accent-text); cursor: pointer; }
.tx-back:hover { text-decoration: underline; }
/* A field's history: the legend under the statement; the viewer's text set as the
   country page's rows are (site.css has the viewer). */
.strata-page > .wrap > .legend { margin: -8px 0 0; padding-bottom: 8px; }
.hi-box.ledger > div { padding: 0; border-top: 0; break-inside: auto; }
.hi-page .hi-kind[data-kind="first"] { color: var(--accent-text); }
.hi-page .tx .fl-note { margin: 0; }
.hi-page .tx .hi-marked { margin: 0; }
.hi-page .chart { margin: 36px 0 0; }
/* Lists of names as tags; the sub-items and headings within a field. */
.ledger ul.items.tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.ledger ul.items.tags > li { margin: 0; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font-size: 13px; line-height: 1.5; }
.ledger ul.items.tags + p { margin-top: 6px; }
.ledger .pairs:has(ul.items) { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.ledger .pairs dd > ul.items { margin-bottom: 8px; }
.ledger .list-head { margin: 0 0 6px; }
.ledger .pairs > div.long > dt, .ledger .pairs > div.long > dd { grid-column: 1 / -1; }
.ledger .ln.hd { margin-top: 10px; font-weight: 600; color: var(--text); }
.ledger .pairs > div.long > dd { margin-bottom: 4px; }
.ledger .lh { display: block; margin-bottom: 2px; font-family: var(--font); font-size: 14px; color: var(--ink); word-spacing: normal; }
/* Names with a figure each, a row each: the name, the figure to the right in mono. */
.ledger ul.items.ranked { padding: 0; list-style: none; }
.ledger ul.items.ranked > li { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0; padding: 3px 0; border-top: 1px solid var(--line-soft); }
.ledger ul.items.ranked > li:first-child { border-top: 0; }
.ledger ul.items.ranked .nm { min-width: 0; }
.ledger ul.items.ranked .n { flex: none; max-width: 50%; font-family: var(--mono); font-size: 12.5px; color: var(--text); text-align: right; }
.ledger ul.items.ranked .n .aside { font-family: var(--font); }
/* Shares, a row each: the name, a bar to scale against 100%, the figure. */
.ledger ul.items.shares { display: grid; grid-template-columns: minmax(0, 1fr) 56px max-content; align-items: center; gap: 4px 10px; padding: 0; list-style: none; }
.ledger ul.items.shares > li { display: contents; }
.ledger ul.items.shares .bar { width: 100%; height: 6px; }
.ledger ul.items.shares .n { font-family: var(--mono); font-size: 13px; color: var(--text); text-align: right; }
.ledger .pairs dd .ln > .sub-k { display: block; margin-bottom: 4px; font-size: 13px; color: var(--muted); }
.ledger .pairs dd .ln > .sub-k::first-letter { text-transform: uppercase; }
/* Dates and what happened then, in two columns: the date small in mono. */
.ledger ul.items.dates { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; padding: 0; list-style: none; }
.ledger ul.items.dates > li { display: contents; }
.ledger ul.items.dates .d { padding-top: 1px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ledger ul.items.dates .ev::first-letter { text-transform: uppercase; }
/* The parties as a list in columns, each leader quiet. */
.ledger ul.items.parties { columns: 3 16em; column-gap: 40px; padding: 0; list-style: none; }
.ledger ul.items.parties > li { break-inside: avoid; margin: 0 0 6px; }
.ledger .who { color: var(--muted); }
/* A figure over several years: the latest first, the earlier years under it, small. */
.ledger .older { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
.ledger .older > .dot:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ledger .flag { font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 1.5em; line-height: 1; vertical-align: -0.15em; margin-right: 4px; }
/* A long line: its opening, then "Read all" in place of the rest. */
.ledger .intro { margin: 0; max-width: none; }
.ledger .intro p { font-size: inherit; color: var(--ink); }
.ledger .intro p.mono { font-size: 13px; color: var(--text); }
.ledger .intro p.nt, .ledger .intro p.rank { font-size: 11px; color: var(--muted); }
.ledger .intro p.nt { font-size: 9px; }
.ledger .intro p + p { margin-top: 8px; }
.strata-page .ledger .intro-toggle { display: none; min-height: 0; margin: 2px 0 0; padding: 0; border: 0; background: none; font-size: inherit; font-weight: 500; color: var(--accent-text); }
.js .strata-page .ledger .intro-toggle { display: inline-flex; }
.strata-page .ledger .intro-toggle::after { display: none; }
/* When only notes wait behind it, the toggle is as small as they are. */
.strata-page .ledger .intro-toggle.quiet { font-size: 9px; }
.ledger ul.items.lines > li > ul.items.tags { margin-top: 4px; }
.ledger ul.items.tags > li.g { flex-basis: 100%; padding: 4px 0 0; background: none; color: var(--muted); font-size: 12px; }
.strata-page .ledger .intro-toggle:hover { text-decoration: underline; }


/* Buttons, as the mockup's: rectangles with a quiet amber hover. */
.strata-page .btn { display: inline-flex; align-items: center; height: 40px; min-height: 0; margin: 0; padding: 0 14px; background: transparent; color: var(--text); border: 1px solid var(--control); border-radius: var(--radius-sm); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.strata-page .btn::after { display: none; }
.strata-page .btn:hover { background: var(--hover-bg); border-color: var(--hover-border); color: var(--text); }
.strata-page .btn:active { background: var(--press-bg); }
.strata-page .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.strata-page .btn.primary:hover { color: var(--accent-ink); filter: brightness(1.05); }

/* The citation. */
.cite { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--text); font-size: 15px; color: var(--soft); }
.cite .citation { flex: 1 1 420px; margin: 0; padding: 0; background: none; border: 0; font-family: var(--mono); font-size: 14px; }
.cite .buttons { gap: 10px; }

@media (max-width: 1180px) {
  .ruler .ed::before { content: attr(data-yy); }
}
@media (max-width: 1200px) {
  .plate, .plate.no-facts { --name-col: calc(100vw - 80px); grid-template-columns: minmax(0, 1fr); align-items: start; gap: 28px; }
  .idgrid { width: auto; max-width: 560px; }
}
@media (max-width: 960px) {
  .strata .row, .strata .axis { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; padding: 12px 0; }
  .strata .l { grid-column: 1; grid-row: 1; }
  .strata .v { grid-column: 2; grid-row: 1; }
  .strata .c { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
  .strata .axis > div:first-child, .strata .axis > div:last-child { display: none; }
  .strata .axis > div:nth-child(2) { grid-column: 1 / -1; }
  .strip-chart { height: 44px; }
  .lede { gap: 28px 24px; }
  .c4, .c5, .c6, .c7, .c8 { grid-column: span 12; }
  .ledger { columns: 1; }
  .ledger.fields > .fr { grid-template-columns: minmax(0, 1fr); gap: 6px 0; }
  .st { max-width: 360px; }
  .mf-cols { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mf-cols > .rows + .rows > .hd { display: none; }
  .bigs, .bigs.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .big, .big.is-wide { font-size: 48px; }
  .big.is-long, .big.sm { font-size: 36px; }
  .vbars, .vbars.h180 { height: 160px; gap: 16px; }
  .pyr { grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ruler .cells { gap: 2px; }
  .ruler .ed { height: 16px; border-radius: 2px; }
  .ruler .ed::before { content: none; }
  .ruler .axis { display: flex; }
  .plate, .plate.no-facts { --name-col: calc(100vw - 48px); padding-top: 40px; }
  .plate .sub { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 17px; }
  .plate .sub > span { white-space: normal; }
  .plate .sub .dot { display: none; }
  .idgrid { gap: 12px 20px; }
  .strata .v b { font-size: 24px; }
  .sec { padding-top: 56px; }
  .bigs, .bigs.n3, .bigs.n2, .bigs.two { grid-template-columns: minmax(0, 1fr); }
  .big, .big.is-wide, .big.is-long, .big.sm { font-size: 44px; }
  .mirror { grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); }
  .pyr { grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); gap: 6px 8px; }
  .pyr .m span, .pyr .f span { display: none; }
  .pyr .hbar { height: 32px; }
  .rows.mf { grid-template-columns: minmax(0, 1fr) 44px 8.5em; column-gap: 10px; }
  .rows.mf.with-total { grid-template-columns: minmax(0, 1fr) 4em 44px 8.5em; }
}

@media print {
  .rulerbar, .legend, .strata-page .btn, .cite .buttons { display: none !important; }
  .ledger.fields > .fr { grid-template-columns: 40mm minmax(0, 1fr); break-inside: avoid; }
  .st { display: none; }
  .plate { display: block; padding-top: 0; }
  .plate h1 { margin-top: 6mm; font-size: 34pt !important; }
  .plate .sub { margin-top: 3mm; font-size: 12pt; }
  .idgrid { margin-top: 5mm; display: flex; flex-wrap: wrap; gap: 3mm 10mm; }
  .strata .row { grid-template-columns: 40mm minmax(0, 1fr) 50mm; padding: 1.5mm 0; break-inside: avoid; }
  .strata .v b { font-size: 14pt; }
  .sec { padding-top: 8mm; }
  .sec-h { padding-top: 3mm; margin-bottom: 4mm; }
  .sec-h h2 { font-size: 20pt; }
  .lede { display: block; }
  .lede > div { margin-bottom: 4mm; break-inside: avoid; }
  .bigs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .big, .big.is-wide, .big.is-long, .big.sm { font-size: 20pt; }
  .strata-page .band { height: 8mm; }
  .vbars { height: 40mm; }
  .ledger { columns: 2; }
  .js .intro:not(.is-open) .intro-more { display: inline; }
  .cite { margin-top: 10mm; padding: 4mm; border: 1px solid var(--line); }
}

/* The other pages, after the 2026-10-18 canvas: Fields and Corrections in Strata,
   Editions as a ruler, About as a statement. */

/* Fields: the sections, how the headings changed, then a line per field across every
   edition, a bar for each run of editions that published it. */
.fx-front { padding-top: 28px; }
.fx-sections ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fx-sections .pill { gap: 8px; min-height: 36px; padding: 0 12px; font-size: 14px; font-weight: 500; }
.fx-sections .pill small { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.fx-changes { margin-top: 48px; }
.fx-changes > .k { margin-bottom: 16px; }
.fx-change-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.fx-change { border-top: 1px solid var(--line); padding-top: 14px; }
.fx-change-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
.fx-change-h b { font-size: 15px; }
.fx-change-h .num { font-family: var(--mono); font-size: 26px; font-weight: 600; }
.fx-change-h .is-new { color: var(--accent-text); }
.fx-change-line { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.fx-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fx-tags a { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font-size: 13px; text-decoration: none; transition: background-color 0.15s ease; }
.fx-tags a:hover { background: var(--hover-bg); }
.fx-more { padding: 2px 4px; font-size: 13px; color: var(--muted); }
/* The fields as rows: the name, when and how often (quiet), and the field's strip of editions. */
.fx .ledger.fields > .fr { padding: 10px 0; }
.fx .lb { font-size: 15px; font-weight: 500; }
.fx .tx.fx-when { font-size: 12.5px; color: var(--muted); }
.fx .fx-when .mono { font-size: 11.5px; }
.fx .pg-hero .legend { margin-top: 28px; }
/* The field page: the entries as rows, the country's name with its rank and its name now. */
.fl-page .lb .fl-rank { display: inline-block; min-width: 2.4em; font-weight: 400; color: var(--muted); }
.fl-page .lb .fl-now { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.fl-page .tx.fl-text { max-width: none; font-size: 15px; color: var(--text); }
.fl-page .fl-front { padding-top: 36px; }
.fl-page .fl-front .fl-cover > .k { margin-bottom: 12px; }
.fl-page .fl-front .fl-order { margin-top: 36px; }
.fx-toggle { margin-bottom: 16px; }
.js .is-collapsed .ledger.fields > .fr[data-extra] { display: none; }
.js .w-body.is-finding .is-collapsed .ledger.fields > .fr[data-extra]:not([hidden]) { display: grid; }

/* Corrections: the entries by what was done, each correction across its editions, then a
   card each. */
.cx-overview { border-top: 1px solid var(--line); padding-top: 18px; }
.cx-overview > .k { margin-bottom: 10px; }
.strata-page .cx-band { height: 40px; }
.strata-page .band td.cx-exclude { color: var(--text); }
td.cx-map, i.cx-map { background: var(--chart-line); }
td.cx-exclude, i.cx-exclude { background: var(--border); }
td.cx-recover, i.cx-recover { background: var(--accent); }
td.cx-trim, i.cx-trim { background: var(--muted); }
.cx-spans rect.cx-trim { fill: var(--muted); }
.cx-labels { list-style: none; margin: 0; padding: 0; }
.cx-labels li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; padding: 12px 0; border-top: 1px solid var(--line); }
.cx-labels h3 { grid-column: 1; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.cx-labels .cx-years { grid-column: 1; }
.cx-labels .cx-why { grid-column: 1; margin: 0; font-size: 13px; color: var(--soft); }
.cx-labels .cx-n { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin: 0; text-align: right; }
.cx-when-h { flex-wrap: wrap; margin-top: 48px; }
.cx-spans { list-style: none; margin: 12px 0 0; padding: 0; }
.cx-spans li { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2px 24px; align-items: center; min-height: 18px; }
.cx-name { overflow: hidden; font-size: 12px; color: var(--soft); white-space: nowrap; text-overflow: ellipsis; }
.cx-spans svg { display: block; width: 100%; height: 12px; }
.cx-spans .track { fill: var(--line); }
.cx-spans rect.cx-map { fill: var(--chart-line); } .cx-spans rect.cx-exclude { fill: var(--control); } .cx-spans rect.cx-recover { fill: var(--accent); }
.cx-ticks { display: flex; justify-content: space-between; padding-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--control); }
.cx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.cx-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.cx-years { grid-column: 1; margin: 0; font-size: 12px; color: var(--muted); }
.cx-card h3 { grid-column: 1; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; }
.cx-arrow { color: var(--control); }
.cx-n { grid-column: 2; grid-row: 1 / 3; margin: 0; text-align: right; line-height: 1; }
.cx-n b { font-family: var(--mono); font-size: 24px; font-weight: 600; }
.cx-n small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.cx-why { grid-column: 1 / -1; max-width: 62ch; margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--soft); }
.cx-text { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.cx-text p { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--soft); }
.cx-text .k { margin: 0; }
.cx-text .cx-big { margin-top: 6px; font-size: 56px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text); }
.cx-big small { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.cx-text ul { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; padding-left: 1.1em; font-size: 14px; line-height: 1.5; color: var(--soft); }

/* Editions: a column per edition, as tall as its fields of text, over the form it was
   recovered from; the chosen one in figures under it. */
.rl-ruler { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: 24px; padding-bottom: 14px; }
.rl-cols { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.rl-cols li { flex: 1 1 0; min-width: 0; }
.rl-col { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 300px; color: var(--muted); text-decoration: none; }
.rl-bar { display: block; flex: 1 1 auto; width: 100%; min-height: 0; }
.rl-bar rect { fill: var(--border); transition: fill 0.15s ease; }
.rl-col:hover .rl-bar rect { fill: var(--chart-line); }
.rl-col[aria-current="true"] .rl-bar rect { fill: var(--accent); }
.rl-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rl-src { display: block; flex: none; height: 4px; border-radius: 1px; }
.rl-text { background: var(--chart-line); } .rl-html { background: var(--border); } .rl-json { background: var(--accent); }
.rl-y { flex: none; font-family: var(--mono); font-size: 10.5px; text-align: center; }
.rl-col[aria-current="true"] .rl-y { color: var(--accent-text); font-weight: 600; }
.rl-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 56px; align-items: end; padding-top: 40px; padding-bottom: 40px; }
.rl-chosen .k { margin: 0; }
.rl-chosen h2 { margin: 6px 0 0; font-family: var(--mono); font-size: 140px; font-weight: 600; letter-spacing: -0.04em; line-height: 0.85; }
.rl-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding-bottom: 8px; }
.rl-figs dd { margin: 4px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.rl-figs dd.rl-from { font-size: 20px; font-weight: 600; letter-spacing: 0; line-height: 1.6; }
.rl-buttons { flex-wrap: nowrap; padding-bottom: 8px; }
.rl-step { width: 48px; padding: 0; }
.rl-step[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.rl-decades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--line); padding-top: 32px; }
.rl-decades h3 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.rl-decades p { margin: 4px 0 10px; font-size: 14px; color: var(--muted); }
.rl-decades ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.rl-decades a { display: inline-block; padding: 4px 6px; border-radius: var(--radius-sm); font-family: var(--mono); font-size: 13px; color: var(--soft); text-decoration: none; transition: background-color 0.15s ease; }
.rl-decades a:hover { background: var(--hover-bg); color: var(--text); }
.rl-decades a[aria-current="true"] { background: var(--band); color: var(--text); }

/* About: the statement, the archive in figures, the promises, how it was checked. */
.ab-hero { padding-top: 96px; padding-bottom: 72px; }
.ab-hero h1 { margin: 0; font-size: clamp(52px, 7.8vw, 112px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; }
.ab-hero h1 span { color: var(--accent-text); }
.ab-lead { max-width: 760px; margin: 36px 0 0; font-size: 22px; line-height: 1.5; color: var(--soft); }
.ab-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: 36px; padding-bottom: 36px; }
.ab-figures p { margin: 0; }
.ab-figures .num { font-size: clamp(36px, 3.9vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.ab-figures .num + p { margin-top: 10px; font-size: 15px; color: var(--muted); }
.ab-promises ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ab-promises li { border-top: 1px solid var(--border); padding-top: 20px; }
.ab-promises .mono { font-size: 13px; color: var(--accent-text); }
.ab-promises h3 { margin: 10px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.ab-promises p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--soft); }
.ab-checked { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.ab-checked p { max-width: 62ch; font-size: 17px; line-height: 1.6; color: var(--soft); }
.ab-forms { list-style: none; margin: 16px 0; padding: 0; }
.ab-forms li { display: grid; grid-template-columns: 160px 140px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--soft); }
.ab-forms b { display: flex; align-items: center; gap: 8px; color: var(--text); }
.ab-forms i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.ab-forms .mono { font-size: 12px; color: var(--muted); }
.ab-match { margin: 0; padding: 32px; border-radius: var(--radius-sm); background: var(--panel); }
.ab-match .k { margin: 0; }
.ab-match .ab-pct { max-width: none; margin: 8px 0 0; font-size: clamp(64px, 8vw, 120px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--accent-text); }
.ab-match svg { display: block; width: 100%; height: 14px; margin-top: 20px; }
.ab-match rect { fill: var(--accent); }
.ab-match .track { fill: var(--line-soft); }
.ab-match figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }
.ab-statement { max-width: 820px; margin: 0; border-top: 1px solid var(--line); padding-top: 28px; font-size: 22px; font-weight: 600; line-height: 1.45; }
.ab-version { margin: 16px 0 0; font-size: 12px; color: var(--muted); }

@media (max-width: 960px) {
  .fx-change-cols, .cx-text { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cx-cards { grid-template-columns: minmax(0, 1fr); }
  .cx-spans li { grid-template-columns: 180px minmax(0, 1fr); gap: 2px 16px; }
  .rl-panel { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rl-chosen h2 { font-size: 96px; }
  .rl-decades, .ab-figures, .ab-promises ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-checked { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
  .cx-spans li { grid-template-columns: minmax(0, 1fr); }
  .cx-spans .cx-axis > span:first-child { display: none; }
  .rl-cols { overflow-x: auto; padding-bottom: 4px; }
  .rl-cols li { flex: 0 0 22px; }
  .rl-col { height: 220px; }
  .rl-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-figs dd { font-size: 26px; }
  .rl-buttons { flex-wrap: wrap; }
  .ab-hero { padding-top: 56px; padding-bottom: 48px; }
  .ab-lead { font-size: 18px; }
  .ab-figures { gap: 24px 20px; }
  .ab-figures .num { font-size: 30px; }
  .ab-promises ol { grid-template-columns: minmax(0, 1fr); }
  .ab-forms li { grid-template-columns: minmax(0, 1fr) auto; }
  .ab-forms li > span:last-child { grid-column: 1 / -1; }
}

/* Countries, the Atlas: the count large with its promise in amber, the regions as tiles,
   then every entry under large amber letters. */
.at-regions { padding-top: 28px; }
.at-regions > h2, .at-list-h h2 { margin: 0 0 16px; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; }
.at-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.at-tile { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; }
.at-tile:hover { background: var(--hover-bg); border-color: var(--hover-border); color: var(--text); }
.at-tile.is-former { background: var(--band); }
.at-tile-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.at-tile-h b { font-size: 16px; line-height: 1.3; }
.at-tile-h .num { font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1; }
.at-tile.is-former .num { color: var(--accent-text); }
.at-tile svg { display: block; width: 100%; height: 6px; }
.at-tile .track { fill: var(--line-soft); }
.at-tile .now, i.at-now { fill: var(--chart-line); background: var(--chart-line); }
.at-tile .left, i.at-left { fill: var(--accent); background: var(--accent); }
.at-tile-n { font-size: 12px; color: var(--muted); }
.at-tile .at-left { color: var(--accent-text); }
.at-list-h { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 72px; border-top: 1px solid var(--text); padding-top: 16px; }
.at-list-h h2 { margin: 0; }
.at-orders { display: flex; flex-wrap: wrap; gap: 8px; }
.at-orders .pill { min-height: 40px; padding: 0 14px; font-size: 14px; }
.at-letters { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px; }
.at-letters a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); font-size: 17px; font-weight: 800; text-decoration: none; transition: background-color 0.15s ease; }
.at-letters a:hover { background: var(--hover-bg); }
.at-group { padding-top: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.at-group > h2 { display: flex; align-items: baseline; gap: 16px; margin: 0 0 16px; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.at-group > h2 .k { margin-left: auto; }
.at-group.is-letter { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; }
.at-group.is-letter > h2 { margin: 0; font-size: 72px; letter-spacing: -0.04em; line-height: 0.9; color: var(--accent-text); }
.at-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 16px; align-content: start; }
.at-cty { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color 0.15s ease; }
.at-cty:hover { background: var(--hover-bg); color: var(--text); }
.at-flag { flex: none; width: 22px; text-align: center; font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 17px; line-height: 1; }
.at-name { min-width: 0; }
.at-cty small { flex: none; margin-left: auto; font-size: 10.5px; color: var(--muted); }
.at-cty.is-gone small { color: var(--accent-text); }
.at-key { margin: 28px auto 0; font-size: 14px; color: var(--muted); }
.js .w-body.is-finding .at-group:not(:has([data-field]:not([hidden]))) { display: none; }

/* One edition (edition.php): the Atlas under the ruler, with steps to the editions either side,
   the name the Factbook gives an entry now under the one the edition used, and the new in amber. */
.ed-page .pg-hero { padding-top: 56px; }
.ed-page .pg-hero > .k { margin-bottom: 20px; }
.ed-steps { margin-top: 32px; }
.ed-steps .button { gap: 8px; min-height: 44px; padding: 0 16px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ed-steps .button:last-child { font-family: inherit; }
.ed-now { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.at-cty.is-new small { color: var(--accent-text); }

/* Pages of text (cite.php, privacy.php, error.php), set as About is: numbered parts, the
   heading beside the text, a citation as a panel; on the error page, the ways back in. */
.ab-hero > .k { margin-bottom: 20px; }
.tx-parts { padding-top: 24px; }
.tx-part { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 64px; padding: 28px 0 32px; border-top: 1px solid var(--line); }
.tx-part:first-child { border-top-color: var(--text); }
.tx-part h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.tx-part h2 .mono { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--accent-text); }
.tx-body { min-width: 0; max-width: 68ch; }
.tx-body p, .tx-body ul { margin: 0; font-size: 17px; line-height: 1.6; color: var(--soft); }
.tx-body > :is(p, ul) + :is(p, ul) { margin-top: 14px; }
.tx-body ul { padding-left: 1.2em; }
.tx-body li + li { margin-top: 8px; }
.tx-body li::marker { color: var(--control); }
.tx-body .mono { font-size: 0.88em; color: var(--text); }
.tx-body p.tx-cite { padding: 18px 20px; border-radius: var(--radius-sm); background: var(--panel); font-size: 14px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.tx-body p.tx-note { font-size: 14px; color: var(--muted); }
.ab-text .ab-figures + .tx-parts { padding-top: 56px; }
.tx-search { margin-top: 36px; }
.tx-ways { padding-top: 8px; }
.tx-ways h2 { margin: 0 0 16px; border-top: 1px solid var(--text); padding-top: 16px; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; }

/* Search (search.php): the box under the question, then the names as an Atlas grid. */
.sr-page .pg-hero .k { margin-bottom: 20px; }
.sr-page .pg-hero h1 { overflow-wrap: anywhere; }
.sr-box { display: flex; margin-top: 36px; }
.sr-page .sr-how { max-width: 760px; margin-top: 16px; font-size: 15px; color: var(--muted); }
.sr-page .sec { padding-top: 48px; }
.sr-page .sec:first-of-type { padding-top: 24px; }
.sr-page .sec-h { margin-bottom: 16px; }
.sr-page .sec-h h2 { font-size: 32px; letter-spacing: -0.03em; }
.sr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sr-grid .at-cty small { flex: 0 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.sr-page .sr-list { margin-top: 0; }
.sr-page .sr-row:first-child { border-top: 0; padding-top: 4px; }

@media (max-width: 960px) {
  .tx-part { grid-template-columns: minmax(0, 1fr); }
  .sr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tx-part h2 { font-size: 24px; }
  .tx-body p, .tx-body ul { font-size: 16px; }
  .tx-ways h2 { font-size: 26px; }
  .sr-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .at-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-group.is-letter { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
  .at-group.is-letter > h2 { font-size: 52px; }
}
@media (max-width: 640px) {
  .at-tiles, .at-grid { grid-template-columns: minmax(0, 1fr); }
  .at-group.is-letter { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .at-group.is-letter > h2 { font-size: 44px; }
}