/* The Factbook. Design: "Strata" (dark by default, light mode by device setting or toggle). */

/* Fonts: Libre Franklin (variable, 100–900, with its italic) and IBM Plex Mono, Latin
   subset, self-hosted. SIL Open Font License 1.1: see /assets/fonts/OFL-libre-franklin.txt
   and /assets/fonts/OFL.txt. */
@font-face { font-family: "Libre Franklin"; src: url("/assets/fonts/libre-franklin-latin-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("/assets/fonts/libre-franklin-latin-var-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* Tokens ------------------------------------------------------------------ */

:root {
  --bg: #0A0D12;
  --bg-alt: #0D1117;
  --panel: #11161E;
  --line: #222B37;
  --line-soft: #1A222D;
  --border: #3A4757;
  --control: #58677A;
  --text: #E8ECF1;
  --soft: #B6C0CC;
  --muted: #9AA6B5;
  --accent: #FFB547;
  --accent-ink: #0A0D12;
  --accent-text: #FFB547;
  --band: rgba(255, 181, 71, 0.12);
  --add: #7CC4FF;
  --del: #FF9A8F;
  --cell-on: #58677A;
  --cell-chg: #C9D2DC;
  --chart-line: #6A8DB0;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  /* Parts of a whole (land use, religions, GDP by sector): amber leads, then hues that
     stay apart from each other; a long tail of small parts shares one grey. */
  --cat-1: #FFB547;
  --cat-2: #9B8AD6;
  --cat-3: #D97C6E;
  --cat-4: #7CC4FF;
  --cat-5: #5E9C77;
  --cat-6: #58677A;
  --cat-more: #3A4757;

  --font: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --wrap: 1280px;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F5F7FA;
    --bg-alt: #EDF0F4;
    --panel: #FFFFFF;
    --line: #D7DDE5;
    --line-soft: #E3E8EE;
    --border: #9AA6B5;
    --control: #7A8694;
    --text: #0F1419;
    --soft: #4A5563;
    --muted: #5B6673;
    --accent: #F2A53A;
    --accent-ink: #0F1419;
    --accent-text: #0369A1;
    --band: rgba(242, 165, 58, 0.16);
    --add: #0B5CAD;
    --del: #B3261E;
    --cell-on: #B8C2CF;
    --cell-chg: #3A4757;
    --chart-line: #52698A;
    --shadow: 0 14px 40px rgba(15, 20, 25, 0.16);
    --cat-1: #F2A53A;
    --cat-2: #7B6BC0;
    --cat-3: #C2604F;
    --cat-4: #4A9BE0;
    --cat-5: #3F8560;
    --cat-6: #7A8694;
    --cat-more: #B8C2CF;
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #F5F7FA;
  --bg-alt: #EDF0F4;
  --panel: #FFFFFF;
  --line: #D7DDE5;
  --line-soft: #E3E8EE;
  --border: #9AA6B5;
  --control: #7A8694;
  --text: #0F1419;
  --soft: #4A5563;
  --muted: #5B6673;
  --accent: #F2A53A;
  --accent-ink: #0F1419;
  --accent-text: #0369A1;
  --band: rgba(242, 165, 58, 0.16);
  --add: #0B5CAD;
  --del: #B3261E;
  --cell-on: #B8C2CF;
  --cell-chg: #3A4757;
  --chart-line: #52698A;
  --shadow: 0 14px 40px rgba(15, 20, 25, 0.16);
  --cat-1: #F2A53A;
  --cat-2: #7B6BC0;
  --cat-3: #C2604F;
  --cat-4: #4A9BE0;
  --cat-5: #3F8560;
  --cat-6: #7A8694;
  --cat-more: #B8C2CF;
  color-scheme: light;
}

/* Base -------------------------------------------------------------------- */

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}
main { flex: 1; }
/* While another edition is fetched to replace this one in place (site.js), if it is slow. */
main.is-swapping { cursor: progress; }
/* Changing edition: the entry fades a little and the next one fades in, quickly, so the
   change is seen. The docked bar stays as it is. */
[data-swap-entry] > :not([data-swap-steady]) { transition: opacity 0.22s ease-out; }
main.is-fading [data-swap-entry] > :not([data-swap-steady]) { opacity: 0.3; transition-duration: 0.12s; transition-timing-function: ease-in; }
@media (prefers-reduced-motion: reduce) { [data-swap-entry] > * { transition: none; } }
/* As it arrives, the new entry takes its final shape at once, so the page does not move
   (the fade above is opacity only, so it is kept). */
.is-settling main *:not([data-swap-entry] > *), .is-settling main *::before, .is-settling main *::after { transition: none !important; }

h1, h2, h3 { line-height: 1.1; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(40px, 6vw, 80px); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -0.02em; }
h3 { font-size: 19px; font-weight: 700; }
/* No orphans: no paragraph, list item, label or cell ends with one word alone on its last
   line. Text wraps pretty (headings, above, are balanced), and site.js keeps the last two
   words of each piece of text together in a .nobr span, which every browser honours. */
body { text-wrap: pretty; }
.nobr { white-space: nowrap; }
/* Short text (menus, labels, captions, list entries) is balanced, so a wrapped label never
   leaves one word on its second line. */
nav a, nav li, dt, th, label, figcaption, button, .k, .sub-k, .y-sub, ul.items.cols > li, ul.items.lines > li { text-wrap: balance; }
p { margin: 0; }

a { color: var(--text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: -9999px; top: 12px; z-index: 10; background: var(--panel); color: var(--text); padding: 10px 14px; border-radius: var(--radius); }
.skip:focus { left: 12px; }

/* Header ------------------------------------------------------------------ */

.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 14px; padding-bottom: 14px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; letter-spacing: -0.025em; text-decoration: none; white-space: nowrap; }
.logo svg { color: var(--accent-text); flex: 0 0 auto; }

.search { flex: 999 1 280px; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; background: var(--panel); border: 1px solid var(--control); border-radius: var(--radius); }
.search svg { color: var(--muted); flex: 0 0 auto; }
.search input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.search input:focus { outline: none; }
.search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }


/* Suggestions under a search box (site.js): the pages the words typed so far name, in a
   panel the width of the box, and last a row that searches the text. The row chosen, by
   the arrow keys or the pointer, takes a tint of the accent; no edges. */
.search, .page-search { position: relative; }
.sg { position: absolute; top: calc(100% + 6px); left: -1px; right: -1px; z-index: 30; margin: 0; padding: 6px; list-style: none; text-align: left; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); max-height: min(60vh, 480px); overflow-y: auto; }
.sg[hidden] { display: none; }
.sg li { margin: 0; padding: 0; }
.sg a { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text); font-size: 15px; font-weight: 500; line-height: 1.35; text-decoration: none; text-wrap: balance; transition: background-color 0.15s ease; }
.sg li[aria-selected="true"] a { background: var(--hover-bg); color: var(--text); }
.sg li[aria-selected="true"] a:active { background: var(--press-bg); }
.sg-when { font-size: 11px; font-weight: 400; color: var(--muted); }
.sg li[data-kind="search"] { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.sg li[data-kind="search"] a { font-weight: 400; color: var(--soft); }
.sg li[data-kind="search"][aria-selected="true"] a { color: var(--text); }
.sg li:only-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 640px) {
  .sg { max-height: min(50vh, 400px); }
}

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; font-size: 16px; font-weight: 500; }
.site-nav a { text-decoration: none; padding: 10px 0; }
/* Phones: the colour-mode button sits beside the logo, the search under them, then the navigation. */
@media (max-width: 640px) {
  .site-header .wrap { gap: 10px 20px; padding-top: 14px; padding-bottom: 12px; }
  .logo { order: 1; }
  .theme-toggle { order: 2; margin-left: auto; }
  .search { order: 3; flex-basis: 100%; }
  .site-nav { order: 4; flex-basis: 100%; justify-content: space-between; gap: 0 8px; font-size: clamp(14px, 4vw, 15px); }
}
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }

.theme-toggle { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; color: var(--text); border: 1px solid var(--control); border-radius: var(--radius); cursor: pointer; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: inline; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: inline; }
}

/* Footer ------------------------------------------------------------------ */

.site-footer { border-top: 1px solid var(--line); margin-top: 128px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 40px; padding-top: 48px; padding-bottom: 64px; font-size: 15px; color: var(--muted); }
.site-footer p { max-width: 600px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-footer nav a { color: var(--soft); padding: 10px 0; }
.site-credit { flex-basis: 100%; font-size: 14px; }
.site-credit a { color: var(--soft); }

/* Shared components --------------------------------------------------------- */

.breadcrumb { font-size: 15px; color: var(--muted); margin-bottom: 32px; }
.breadcrumb a { color: var(--soft); }


.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--radius); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.button.primary { background: var(--accent); color: var(--accent-ink); }
.button.primary:hover { color: var(--accent-ink); filter: brightness(1.05); }
.button.secondary { background: transparent; color: var(--text); border-color: var(--control); font-weight: 600; }

/* Controls: rectangles with a small radius, never pills. On hover they take a faint wash
   of the accent and an amber border, with the text kept at full strength; pressing
   deepens the wash. Selected controls keep their solid accent fill. */
:root {
  --hover-bg: color-mix(in srgb, var(--accent) 8%, transparent);
  --hover-border: color-mix(in srgb, var(--accent) 70%, var(--control));
  --press-bg: color-mix(in srgb, var(--accent) 15%, transparent);
}
.button, .pill, .more-toggle {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.button.secondary:hover, .pill:not([aria-current="true"]):not([aria-pressed="true"]):hover,
.more-toggle:hover {
  background: var(--hover-bg); border-color: var(--hover-border); color: var(--text);
}
.button.secondary:active, .pill:not([aria-current="true"]):not([aria-pressed="true"]):active,
.more-toggle:active { background: var(--press-bg); }
.button:active, .pill:active, .more-toggle:active { transform: translateY(1px); }
.more-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 20px; padding: 0 16px; background: transparent; color: var(--text); border: 1px solid var(--control); border-radius: var(--radius-sm); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.more-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s ease; }
.more-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.more-toggle:hover::after { transform: translateY(-1px) rotate(45deg); }
.more-toggle[aria-expanded="true"]:hover::after { transform: translateY(1px) rotate(-135deg); }
.more-toggle .open, .more-toggle[aria-expanded="true"] .closed { display: none; }
.more-toggle[aria-expanded="true"] .open { display: inline; }
.js .is-collapsed [data-extra] { display: none; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; }

.pill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--control); border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; text-decoration: none; }
.pill[aria-current="true"], .pill[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.note { padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--soft); font-size: 15px; max-width: 760px; }
.note strong { color: var(--text); }


/* Country page ------------------------------------------------------------------- */



/* Introduction: the Background text as a lead, with the rest behind "Read more". */
.intro { margin-top: 40px; max-width: 760px; }
.intro h2 { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.intro p { font-size: 18px; color: var(--soft); }
.intro p + p { margin-top: 18px; }
/* With a script, the rest of the text waits behind the button; without one, it all shows. */
.js .intro:not(.is-open) .intro-more { display: none; }
.intro-toggle { display: none; align-items: center; min-height: 44px; margin-top: 6px; padding: 0; background: none; border: 0; color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; }
.js .intro-toggle { display: inline-flex; }
.intro-toggle::after { content: ""; width: 7px; height: 7px; margin-left: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.intro.is-open .intro-toggle::after { transform: translateY(2px) rotate(-135deg); }

.spark polyline { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark circle { fill: var(--accent); }

.chart-title p { margin-top: 8px; color: var(--soft); }
.chart-title h2, .chart-title h3 { font-size: 22px; }
.chart { margin: 36px 0 0; padding: 28px 28px 20px; }
.chart .grid .zero { stroke: var(--border); stroke-dasharray: 4 4; }
.chart-scroll { overflow-x: auto; }
.chart svg { display: block; min-width: 640px; width: 100%; height: auto; }
.chart .grid line { stroke: var(--line); }
.chart .grid text, .chart .years text { fill: var(--muted); font-family: var(--mono); font-size: 13px; }
.chart .series { fill: none; stroke: var(--chart-line); stroke-width: 2.5; stroke-linejoin: round; }
.chart .point circle { fill: var(--chart-line); stroke: var(--panel); stroke-width: 2; }
.chart .point a:hover circle, .chart .point a:focus circle { fill: var(--accent); }
.chart .point.current circle { fill: var(--accent); }
.chart .now { fill: var(--band); }
.chart-note { margin-top: 16px; font-size: 14px; color: var(--muted); }



/* Field text by shape (see Text::fieldHtml): sub-items as a small table, dates in brackets,
   notes and the world ranking set quietly. Labels and values start with a capital and
   labels lose their colon on screen only: the text in the page is as published. */
.pairs { margin: 0; display: grid; grid-template-columns: fit-content(14em) minmax(0, 1fr); gap: 4px 20px; }
.pairs > div { display: contents; }
.pairs dt { color: var(--muted); font-size: 15px; }
.pairs dd { margin: 0; min-width: 0; color: var(--text); }
.pairs dd > * + * { margin-top: 6px; }
/* Lists the source runs together with semicolons, and runs of short lines such as parties. */
ul.items { margin: 0; padding-left: 1.15em; }
ul.items > li + li { margin-top: 5px; }
ul.items > li::marker { color: var(--muted); }
ul.items.lines > li + li { margin-top: 3px; }
.est { color: var(--muted); font-size: 0.88em; }
.dated { list-style: none; margin: 0; padding: 0; }
.dated li { font-size: 15px; color: var(--muted); }
.dated li:first-child { font-size: inherit; color: var(--text); }
.pairs .rank dt, .pairs .rank dd { font-size: 13px; color: var(--muted); }
.pairs .rank dd { font-family: var(--mono); }
.dated li.rank { font-size: 13px; }
.field-note { font-size: 15px; color: var(--muted); }
.field-note .sub { font-weight: 600; }
.rank { font-size: 13px; color: var(--muted); }
.rank span { font-family: var(--mono); }
@media (max-width: 480px) { .pairs { grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: 4px 12px; } }
.pairs dt::first-letter, .pairs dd::first-letter, .pairs dd > p::first-letter, ul.items > li::first-letter, .figures .k::first-letter,
.y-field > p::first-letter, .fl-text > p::first-letter, .hi-text > p::first-letter, .hi-plain > p::first-letter { text-transform: uppercase; }
.pairs .colon, .est.dup, .u.dup, .items .sep, .list-head > .sep, .pairs dd .sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Lists the source runs together with commas: short items in columns, percentages aligned. */
ul.items.cols { columns: 3 8.5rem; column-gap: 28px; }
ul.items.cols > li { break-inside: avoid; margin: 0 0 4px; }
ul.items.cols.many { columns: 4 7rem; font-size: 0.94em; }
ul.items.cols.many > li { margin-bottom: 2px; }
ul.items.figures { list-style: none; padding-left: 0; }
ul.items.figures > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; margin: 0; padding: 5px 0; border-top: 1px solid var(--line-soft); }
.figures .after { order: 5; flex-basis: 100%; font-size: 0.92em; }
ul.items.figures > li:first-child { border-top: 0; padding-top: 0; }
.figures .k { flex: 1 1 8em; min-width: 0; overflow-wrap: anywhere; }
.figures .n { flex: none; min-width: 3.4em; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.figures.bars .bar { flex: 0 0 34%; align-self: flex-start; height: 8px; margin-top: 0.5em; }
.items .aside { color: var(--soft); }
.sub-line { display: block; margin-top: 2px; }
.sub-k::first-letter { text-transform: uppercase; }
.sub-k { display: inline-block; margin-right: 0.3em; color: var(--muted); font-size: 0.92em; }
/* Sub-items with long values: each a paragraph led by its label. */
dl.pairs.runin { display: block; }
dl.pairs.runin > div { display: block; }
dl.pairs.runin > div + div { margin-top: 10px; }
dl.pairs.runin dt { display: inline-block; margin-right: 0.25em; font-size: inherit; font-weight: 600; color: var(--text); }
.y-field dl.pairs.runin dt { font-size: 15.5px; }
dl.pairs.runin dd { display: inline; }
dl.pairs.runin dd > p:first-child { display: inline; }
dl.pairs.runin dd > ul { margin-top: 6px; }
.pairs.runin .colon { position: static; width: auto; height: auto; overflow: visible; clip: auto; }

/* A figure by year: the latest set large with its date under it, earlier years as a table. */
.lead { line-height: 1.15; }
.lead .n { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.lead .u { font-size: 17px; font-weight: 600; color: var(--soft); }
.lead .est { display: block; margin-top: 5px; font-size: 13px; }
.dated.earlier li { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--soft); font-variant-numeric: tabular-nums; }
.dated.earlier li > .est:last-child { order: -1; font-size: inherit; }
.dated.earlier li.rank { display: block; font-size: 13px; color: var(--muted); }
/* A share of something by year: a bar under the latest, and one in each earlier year. */
.lead .bar { display: block; width: 100%; max-width: 420px; height: 10px; margin-top: 10px; }
.dated.earlier.bars li { align-items: center; }
.dated.earlier.bars li > .bar { flex: 1 1 auto; max-width: 45%; height: 6px; margin-left: auto; }
/* A few short figures as a row; percentages as bars to scale. One date shows once, under them. */
dl.pairs.stats { display: flex; flex-wrap: wrap; gap: 14px 28px; }
dl.pairs.stats > div { display: block; min-width: 0; max-width: 100%; }
.stats dt { font-size: 13px; }
.stats dd { margin-top: 2px; line-height: 1.2; }
.stats dd > *, .bars dd > * { margin-top: 0; }
.stats .bar { display: block; width: 100%; min-width: 7rem; height: 6px; margin-top: 7px; }
.stats .n { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stats .u { font-size: 14px; color: var(--soft); }
.stats .est { display: block; margin-top: 3px; font-size: 12.5px; }
dl.pairs.stats > .rank { order: 1; flex-basis: 100%; display: flex; gap: 6px; }
.stats > .rank dd { margin: 0; }
dl.pairs.bars { grid-template-columns: fit-content(40%) minmax(0, 1fr); align-items: start; gap: 8px 14px; }
.bars dd { display: grid; grid-template-columns: minmax(0, 1fr) 3.8em; align-items: center; gap: 2px 12px; }
.bars .rank dd { display: block; }
.bars dd .after { grid-column: 1 / -1; font-size: 0.9em; color: var(--soft); }
.bars dd .whole { grid-column: 1 / -1; }
.bars dd .pre { grid-column: 1 / -1; font-size: 0.9em; color: var(--muted); }
.bars dd .pre::first-letter { text-transform: uppercase; }
.bar { display: block; width: 100%; height: 10px; }
.bar rect { fill: var(--chart-line); }
.bar rect.track { fill: var(--line-soft); }
.bar rect.zero { fill: var(--muted); }
.bars .n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Parts that make a whole (shares summing to 100%): drawn once as a band, each part in its
   own colour (amber first, then hues that stay apart), with a swatch by each label below. */
.band { width: 100%; height: 40px; margin: 2px 0 12px; table-layout: fixed; border-collapse: separate; border-spacing: 0; border-radius: 4px; overflow: hidden; }
.band td { padding: 0 0 7px 8px; vertical-align: bottom; overflow: hidden; white-space: nowrap; font-family: var(--mono); font-size: 12px; line-height: 1; color: var(--accent-ink); border-right: 1px solid var(--bg); }
.band td:last-child { border-right: 0; }
.band td span::first-letter { text-transform: uppercase; }
.band td.c1 { background: var(--cat-1); } .band td.c2 { background: var(--cat-2); } .band td.c3 { background: var(--cat-3); } .band td.c4 { background: var(--cat-4); }
.band td.c5 { background: var(--cat-5); } .band td.c6 { background: var(--cat-6); color: var(--text); } .band td.c7 { background: var(--cat-more); color: var(--text); }
.whole > .c1 > dt::before, .whole > li.c1 > .k::before { background: var(--cat-1); }
.whole > .c2 > dt::before, .whole > li.c2 > .k::before { background: var(--cat-2); }
.whole > .c3 > dt::before, .whole > li.c3 > .k::before { background: var(--cat-3); }
.whole > .c4 > dt::before, .whole > li.c4 > .k::before { background: var(--cat-4); }
.whole > .c5 > dt::before, .whole > li.c5 > .k::before { background: var(--cat-5); }
.whole > .c6 > dt::before, .whole > li.c6 > .k::before { background: var(--cat-6); }
.whole > .c7 > dt::before, .whole > li.c7 > .k::before { background: var(--cat-more); }
.whole > div > dt::before, .whole > li > .k::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 2px; vertical-align: 0; }
.whole .bar rect:not(.track):not(.zero) { fill: var(--soft); }
.one-date { position: relative; padding-bottom: 28px; }
.one-date .est:not(.dup) { position: absolute; left: 0; bottom: 0; margin: 0; font-size: 13px; }


.cite { padding: 36px; }
.cite h2 { font-size: 22px; letter-spacing: 0; }
.cite p.citation { margin-top: 16px; padding: 18px; font-family: var(--mono); font-size: 14px; background: var(--bg-alt); border-radius: var(--radius); overflow-wrap: anywhere; }
.cite .buttons { margin-top: 20px; }



/* Reading width for the text, left-aligned with the page heading above it. */
.prose > * { max-width: 720px; }
.prose p, .prose ul { margin-top: 20px; color: var(--soft); }
.prose h2 { margin-top: 64px; font-size: 26px; }
.prose > :first-child { margin-top: 16px; }

/* Small screens ------------------------------------------------------------------ */

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .site-footer { margin-top: 88px; }
}





/* Tables ------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin-top: 32px; }

/* Misc ---------------------------------------------------------------------------- */

.pager { display: flex; gap: 12px; margin-top: 32px; }
.citation { padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; overflow-wrap: anywhere; }


/* Broadsheet: country, field and history pages ------------------------------------------ */

/* Every country page, field page and history page is set as a broadsheet: a nameplate,
   a find bar that docks at the top as the running head, a front page, and a page per
   section under a double rule. Text and headings are in Libre Franklin, extra bold for
   names and section headings; datelines and figures in IBM Plex Mono. */

/* Flag emoji, for systems without them (Windows): Twemoji flags, only for those characters. */
@font-face { font-family: "Twemoji Country Flags"; src: url("/assets/fonts/twemoji-country-flags.woff2") format("woff2"); unicode-range: U+1F1E6-1F1FF; font-display: swap; }

/* Figure values ------------------------------------------------------ */

.unit { font-family: var(--font); font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.empty { font-family: var(--font); font-size: 16px; color: var(--muted); }

/* Menus in the docked bar --------------------------------------------------------------- */

.j-menu { position: relative; }
.j-menu > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--control); border-radius: var(--radius-sm); cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; transition: background-color 0.15s ease, border-color 0.15s ease; }
.j-menu > summary:hover { background: var(--hover-bg); border-color: var(--hover-border); color: var(--text); }
.j-menu[open] > summary { background: var(--press-bg); border-color: var(--hover-border); color: var(--text); }
.j-menu > summary svg { transition: transform 0.15s ease; }
.j-list a { transition: background-color 0.15s ease, color 0.15s ease; }
.j-list a:hover { background: var(--hover-bg); color: var(--text); }
.j-menu > summary::-webkit-details-marker { display: none; }
.j-menu[open] > summary svg { transform: rotate(180deg); }
.j-pop { position: absolute; top: calc(100% + 8px); left: 0; width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 640px); overflow-y: auto; padding: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.j-list { list-style: none; margin: 0; padding: 0; }
.j-list a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 10px; border-radius: var(--radius); text-decoration: none; font-size: 15px; }
.j-list a[aria-current="true"] { background: var(--bg-alt); color: var(--text); font-weight: 600; }
.j-n { font-family: var(--mono); font-size: 12px; color: var(--muted); width: 22px; }
.j-c { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.j-pop-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 12px 10px 6px; border-top: 1px solid var(--line); }
.j-progress { height: 2px; background: transparent; }
.j-progress span { display: block; height: 100%; width: 0; background: var(--accent); }

/* Find bar ------------------------------------------------------------------------------ */

.a-bar { position: sticky; top: 0; z-index: 6; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.a-bar.is-stuck { background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); border-top-color: transparent; }
.a-bar-inner { display: flex; align-items: center; gap: 10px; padding-top: 20px; padding-bottom: 20px; transition: padding 0.15s; }
.a-bar.is-stuck .a-bar-inner { padding-top: 8px; padding-bottom: 8px; }
.a-search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; background: var(--panel); border: 1px solid var(--control); border-radius: var(--radius); color: var(--muted); transition: height 0.15s; }
.a-bar.is-stuck .a-search { height: 44px; }
.a-search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.a-search input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; color: var(--text); font: inherit; font-size: 18px; }
.a-bar.is-stuck .a-search input { font-size: 16px; }
.a-search input:focus { outline: none; }
.a-status { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
/* Without a script there is nothing to find with; the menus still work. */
.a-search { display: none; }
.js .a-search { display: flex; }
.js .a-menu { display: none; }
.js .a-bar.is-stuck .a-menu { display: block; }
.a-menu > summary { min-height: 44px; }
.a-years .mono { font-size: 15px; }
.a-pop-years { width: min(340px, calc(100vw - 32px)); left: auto; right: 0; padding: 14px; }
.a-pop-h { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.a-years-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.a-years-list .pill { width: 100%; justify-content: center; min-height: 36px; padding: 0; font-size: 13px; }
.j-top-link { font-size: 14px; color: var(--soft); text-decoration: none; }
.a-bar .j-progress span { transition: width 0.1s linear; }
.a-bar:not(.is-stuck) .j-progress { visibility: hidden; }
.a-empty { margin-top: 40px; }
[data-field][hidden] { display: none !important; }
[data-field] { scroll-margin-top: 96px; }
@media (max-width: 640px) {
  .a-bar-inner { gap: 6px; }
  .a-status { display: none; }
  .a-search { min-width: 132px; padding: 0 12px; gap: 8px; }
  .a-menu .j-label { max-width: 5.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .a-menu > summary { gap: 4px; }
  .a-years > summary svg { display: none; }
  .a-menu > summary { padding: 0 10px; }
}

.is-finding [data-more-toggle] { display: none; }
mark.f-hit { background: var(--band); color: var(--text); box-shadow: 0 0 0 1px var(--accent); border-radius: 2px; padding: 0 1px; }
.f-empty { margin-top: 40px; padding: 24px; border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--soft); text-align: center; }

/* Nameplate, front page and sections ---------------------------------------------------- */

.y-plate { padding-top: 48px; text-align: center; }
.y-dateline { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.y-dateline span + span::before { content: "\00B7"; padding: 0 14px; color: var(--border); }
.y-name { margin-top: 36px; font-size: clamp(60px, 9vw, 128px); font-weight: 800; line-height: 0.95; letter-spacing: -0.035em; }
.y-sub { margin-top: 24px; font-size: 19px; color: var(--soft); display: flex; flex-wrap: wrap; justify-content: center; row-gap: 2px; }
.y-sub .sep { padding: 0 12px; color: var(--border); }
.y-flag { margin-right: 16px; 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.8em; line-height: 1; align-self: center; }
.y-ears { margin-top: 40px; padding: 18px 0; border-top: 3px double var(--text); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; text-align: left; }
.y-ears .breadcrumb { margin: 0; }
.y-run-dates { font-family: var(--mono); font-size: 13px; color: var(--muted); }

.y-head-step { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--control); border-radius: var(--radius-sm); text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; }
.y-head-step:hover { background: var(--hover-bg); border-color: var(--hover-border); color: var(--text); }
.y-head-step:active { background: var(--press-bg); }
.y-head-step[aria-disabled="true"] { color: var(--border); border-color: var(--line); pointer-events: none; }
.y-head-page { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); }

.y-front { padding-top: 64px; }
.y-kicker, .y-box-h, .y-index h2 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.y-lead.intro { margin: 0; max-width: none; }
.y-columns { columns: 2 300px; column-gap: 48px; column-rule: 1px solid var(--line-soft); }
.y-columns p { font-size: 16.5px; line-height: 1.65; color: var(--text); margin: 0 0 18px; }
.y-columns > p:first-child { font-size: 19.5px; line-height: 1.55; }
.y-lead .intro-toggle { margin-top: 0; }
/* The Background: a larger opening paragraph, then the rest at one reading size. */
.y-lead .intro-text p { max-width: 62ch; font-size: 17.5px; line-height: 1.7; }
.y-lead .intro-text > p:first-child { font-size: 20px; line-height: 1.55; }
.y-lead .intro-text > p:first-child::first-letter { float: left; margin: 0.07em 0.08em 0 -0.02em; font-size: 3.6em; font-weight: 800; line-height: 0.8; color: var(--text); }

.y-figures { padding-top: 22px; border-top: 3px double var(--text); }
.y-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.y-table th, .y-table td { text-align: left; padding: 13px 12px 13px 0; border-bottom: 1px solid var(--line-soft); vertical-align: baseline; }
.y-table thead th { padding-top: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.y-table tbody th { font-weight: 500; }
.y-table tbody th a { text-decoration: none; }
.y-table tbody th a:hover { color: var(--accent-text); }
.y-table .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.y-table td.num { font-size: 17px; font-weight: 500; }
.y-table td.num .unit { display: block; font-size: 11px; white-space: normal; }
.y-table td.num .empty { font-size: 13px; }
.y-box-more { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 14px; font-size: 14px; font-weight: 600; text-decoration: none; }
.y-box-more span { color: var(--accent-text); }

.y-index { margin-top: 72px; padding-top: 22px; border-top: 3px double var(--text); }
.y-index ol { list-style: none; margin: 0; padding: 0; columns: 3 280px; column-gap: 56px; }
.y-index li { break-inside: avoid; }
.y-index a { display: flex; align-items: baseline; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; font-size: 16px; }
.y-index a:hover .y-index-name { color: var(--accent-text); }
.y-index-name { font-weight: 500; }
.y-index-count { font-size: 13px; color: var(--muted); }
.y-index-page { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; }

.y-sheet { margin-top: 112px; scroll-margin-top: 60px; }
.y-sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding: 24px 0 22px; border-top: 3px double var(--text); border-bottom: 1px solid var(--line); }
.y-sheet-head h2 { font-size: clamp(40px, 5vw, 68px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.y-sheet-n { order: 3; margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.y-sheet-body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 40px 72px; margin-top: 40px; align-items: start; }
.y-sheet-main { min-width: 0; }

.y-run { columns: 2 320px; column-gap: 56px; column-rule: 1px solid var(--line-soft); }
.y-field { break-inside: avoid; padding: 20px 0 28px; border-top: 1px solid var(--line); scroll-margin-top: 64px; }
.y-field h3 { font-size: 17.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; margin-bottom: 12px; }
.y-field-h { text-decoration: none; }
.y-field-h:hover { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; }
.y-field > * + * { margin-top: 12px; }
.y-field > p, .y-field .pairs dd, .y-field .dated:not(.earlier) li:first-child { font-size: 15.5px; }
.y-field .pairs { grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: 2px 14px; }
.y-field .pairs dt { font-size: 14px; }
.y-sheet .more-toggle { margin-top: 28px; }

@media (max-width: 960px) {
  .y-sheet-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .y-sub { flex-direction: column; font-size: 17px; }
  .y-sub .sep { display: none; }
  .y-flag { margin: 0 0 6px; }
  .y-sheet { margin-top: 72px; }
  .y-sheet-n { flex-basis: 100%; margin-left: 0; order: -1; }
}
.y-table .num { font-variant-numeric: tabular-nums; }
.y-chart { margin-top: 24px; padding: 0; background: none; border: 0; }

/* The docked bar and pages -------------------------------------------------------------- */

/* F's find bar under Y's nameplate. Docked, it carries the running head: the page being
   read between steps to the previous and next, the contents and the year menu. */
.w-bar { margin-top: 40px; }
.w-pager { display: flex; align-items: center; gap: 6px; }
.js .w-pager { display: none; }
.js .a-bar.is-stuck .w-pager { display: flex; }
.w-pager .y-head-step { width: 44px; height: 44px; }
.w-contents > summary { min-height: 44px; width: 15em; }
.w-contents .j-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-contents .y-head-page { margin-left: auto; }
.w-pop { left: auto; right: 0; }

/* The margin comes first, so "Show all" is reached before the fields it shows; it is
   drawn beside them, and stays in view while they are read. */
.w-margin { grid-column: 2; grid-row: 1; }
.w-margin .more-toggle { width: 100%; justify-content: space-between; margin: 0 0 24px; }

.w-margin li[hidden] { display: none; }

/* Finding: matches only, from every field. */
.w-body .y-front[hidden] { display: none; }
.js .w-body.is-finding .is-collapsed [data-extra]:not([hidden]) { display: block; }
.w-body.is-finding .y-run:not(:has(> [data-field]:not([hidden]))) { display: none; }

@media (max-width: 960px) {
  .w-margin { grid-column: 1; grid-row: auto; }
  /* Small windows: the margin is only "Show all", held under the docked bar. */
  .w-margin.has-toggle { display: block; position: sticky; top: 63px; z-index: 2; padding: 8px 0; background: var(--bg); contain: none; align-self: start; }
  .w-margin.has-toggle h3 { display: none; }
  .w-margin .more-toggle { width: auto; margin: 0; }
  .is-finding .w-margin.has-toggle { display: none; }
}
@media (max-width: 640px) {
  .w-contents > summary { width: auto; max-width: 9.5em; padding: 0 10px; gap: 6px; }
  .w-contents .y-head-page, .w-pager .y-head-step { display: none; }
}


/* Field pages: the Y+F broadsheet for one field across every entry, and the list of
   fields. ------------- */

.fl-name { font-size: clamp(48px, 7vw, 104px); line-height: 1; text-wrap: balance; }
.fl-about { max-width: 64ch; }
.fl-lead { font-size: 19px; line-height: 1.6; color: var(--text); }
.fl-note { margin-top: 16px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* Every edition: a bar for each, as tall as the number of entries that published it. */
.coverage { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.coverage-base { stroke: var(--line); }
.coverage-bar { fill: var(--chart-line); transition: fill 0.15s ease; }
.coverage-bar.current { fill: var(--accent); }
.coverage-hit { fill: transparent; }
.coverage-gap { fill: var(--border); }
.coverage a:hover .coverage-bar:not(.current), .coverage a:focus-visible .coverage-bar:not(.current) { fill: var(--text); }
.coverage text { fill: var(--muted); font-family: var(--mono); font-size: 13px; }

.fl-order { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 64px; }
.fl-order-h { margin-right: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fl-order .pill { min-height: 40px; padding: 0 14px; font-size: 14px; }
.fl-order .fl-order-off, .fl-order .fl-order-off:hover { opacity: 0.45; color: var(--muted); border-color: var(--border); background: transparent; cursor: not-allowed; transform: none; }

/* An entry's row. */
.fl-row { break-inside: avoid; padding: 18px 0 22px; border-top: 1px solid var(--line); scroll-margin-top: 92px; }
.fl-rank { display: inline-block; min-width: 2.6em; font-size: 13px; font-weight: 400; color: var(--muted); }
.fl-now { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--muted); }
.fl-text { min-width: 0; font-size: 15.5px; color: var(--soft); overflow-wrap: anywhere; }
.fl-text > * + * { margin-top: 8px; }
.fl-text .pairs { grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: 2px 14px; }
.fl-text .lead .n, .hi-text .lead .n { font-size: 22px; }
/* Entries compared down a list keep their figures as a table. */
.fl-text dl.pairs.stats { display: grid; gap: 2px 14px; }
.fl-text dl.pairs.stats > div { display: contents; }
.fl-text .stats dd { margin-top: 0; line-height: inherit; }
.fl-text .stats .n { font-size: inherit; font-weight: 600; }
.fl-text .stats .u { font-size: inherit; }
.fl-text .stats .est { display: inline; font-size: 0.88em; }
.fl-text .lead .u, .hi-text .lead .u { font-size: 15px; }
.fl-label { font-size: 13px; color: var(--muted); }

/* The list of fields: each with a strip of its editions, its first and last, and how many. */
.fl-entries { list-style: none; margin: 40px 0 0; padding: 0; columns: 2 440px; column-gap: 72px; }
.fl-entry { break-inside: avoid; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); scroll-margin-top: 92px; }
.fl-entry-name { font-weight: 500; text-decoration: none; }
.fl-entry-name:hover { color: var(--accent-text); }
.fl-entry-when { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.presence { display: block; width: 107px; height: 10px; }
.presence-on { fill: var(--chart-line); }
.presence-off { fill: var(--line); }
.fl-entry:hover .presence-on { fill: var(--text); }
.fl-key-row { columns: auto; margin-top: 0; }
.fl-key-row .fl-entry { border-top: 1px solid var(--line-soft); }
.fl-rare-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 48px; margin-top: 28px; }
.fl-rare-head .fl-note { margin: 0; max-width: 64ch; }
.fl-rare-head .more-toggle { margin: 0; }
.js .w-body.is-finding .is-collapsed .fl-entry[data-extra]:not([hidden]) { display: flex; }

@media (max-width: 720px) {
  .fl-entry { flex-direction: column; align-items: flex-start; }
  .fl-order-h { flex-basis: 100%; }
}

/* History pages: one country's field in every edition. -------------------------------- */

.hi-marks { min-height: 44px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
.hi-marks[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hi-chart { margin-top: 64px; }
.fl-note ins, .hi-marked ins { text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--add) 22%, transparent); border-radius: 2px; padding: 0 2px; }
.fl-note del, .hi-marked del { color: var(--del); text-decoration: line-through; text-decoration-thickness: 1px; }
.hi-marked del + ins { margin-left: 0.35em; }

.hi-rewrite-note { display: inline-block; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.hi-text { min-width: 0; max-width: 76ch; font-size: 15.5px; color: var(--soft); overflow-wrap: anywhere; }
.hi-text > * + *, .hi-plain > * + * { margin-top: 8px; }
.hi-text .pairs { grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: 2px 14px; }
.hi-marked { display: none; line-height: 1.7; color: var(--text); }
.is-marking .hi-marked { display: block; }
.is-marking .hi-plain { display: none; }

/* The viewer, one edition at a time: the year as the heading with what that edition did,
   the text, and beside it the strip of editions with the steps and Mark changes, in view
   while the text is read (above the text, docked at the top, on narrower screens). */
.hi-stage { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 56px; align-items: start; }
.hi-side { grid-column: 2; grid-row: 1; position: sticky; top: 24px; display: grid; gap: 16px; }
.hi-box { grid-column: 1; grid-row: 1; min-width: 0; min-height: 200px; }
.hi-steps { display: flex; align-items: center; gap: 8px; }
.hi-now { min-width: 3.4em; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; color: var(--text); }
.hi-steps .hi-marks { margin-left: auto; }
.hi-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; height: 32px; margin-top: 14px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hi-strip > * { display: block; min-width: 0; border-radius: 1px; background: var(--line-soft); transition: background-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease; }
.hi-strip > span { opacity: 0.45; }
.hi-strip a.o { background: var(--cell-on); }
.hi-strip a.x { background: var(--cell-chg); }
.hi-strip a.c { background: var(--accent); }
.hi-strip a:hover { box-shadow: 0 0 0 1.5px var(--hover-border); }
.hi-strip a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hi-strip a.is-miss { opacity: 0.2; }
.hi-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--control); }
.hi-hover { color: var(--soft); text-align: center; }
.hi-find { height: 44px; }
.hi-find input { font-size: 15px; }
.hi-box .hi-entry { margin: 0 0 14px; font-size: 13px; }
.hi-entry a { color: var(--soft); }
.hi-entry a:hover { color: var(--text); }
.hi-box .hi-run { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.hi-run + .hi-text { margin-top: 12px; }
.hi-box .f-empty { margin-top: 0; }

@media (max-width: 960px) {
  .hi-stage { grid-template-columns: minmax(0, 1fr); }
  .hi-side { display: contents; }
  .hi-pick { grid-row: 1; position: sticky; top: 0; z-index: 5; padding: 10px 0 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .hi-find { grid-row: 2; margin-top: 16px; }
  .hi-box { grid-column: 1; grid-row: 3; margin-top: 20px; }
}
@media (max-width: 720px) {
  .hi-marks { padding: 0 10px; }
}

/* Lists, search and articles in the broadsheet ------------------------------------------- */

.sheet-intro { margin-top: 24px; max-width: 68ch; color: var(--soft); }

.y-ears .buttons { gap: 10px; }

/* The home page, set as Strata (strata.css is loaded with it): the heading, one figure
   across every edition with a switch between countries, the search, the ways in, two
   editions compared, and the promises. */
.hm-hero { padding-top: 84px; padding-bottom: 56px; }
.hm-kicker { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.hm-kicker .sep { color: var(--border); }
.hm-hero h1 { margin-top: 20px; max-width: 1200px; font-size: clamp(42px, 7.2vw, 104px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.92; }
.hm-lede { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; margin-top: 44px; }
.hm-lede p { max-width: 660px; font-size: 22px; line-height: 1.5; color: var(--soft); }
/* The series: the switch (a script shows one country at a time; without one, all show),
   then each country's row, axis and note. */
.hm-series-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 14px; }
.hm-switch { display: none; flex-wrap: wrap; gap: 8px; }
.js .hm-switch { display: flex; }
.hm-switch .pill { min-height: 40px; }
.hm-series[hidden] { display: none; }
.hm .strata { margin-top: 0; }
.hm .strata .row, .hm .strata .axis { grid-template-columns: 220px minmax(0, 1fr) 260px; gap: 32px; }
.hm .strata .row { padding: 14px 0; }
.hm .strata .l { font-size: 17px; }
.hm .strata .l a { text-decoration: none; }
.hm .strata .l a:hover { color: var(--accent-text); }
.hm .strata .v b { font-size: 34px; }
.hm .strata .v small { margin-top: 8px; }
.hm-series-notes { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; margin-top: 24px; }
.hm-series-notes p { max-width: 720px; font-size: 17px; color: var(--soft); }
.hm-cap, .hm-series-notes p.hm-cap { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.hm-series-notes p.hm-cap { margin-top: 0; }
.hm-cap a { color: var(--soft); }
/* The search: a large field, then searches to try. */
.hm-bigq { display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 12px 0 22px; background: var(--panel); border: 1px solid var(--control); border-radius: var(--radius); color: var(--muted); }
.hm-bigq:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.hm-bigq input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; color: var(--text); font: inherit; font-size: 22px; }
.hm-bigq input:focus { outline: none; }
.hm-chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hm-try { margin-right: 4px; font-size: 14px; color: var(--muted); }
.hm-chips .pill { min-height: 36px; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--soft); border-color: var(--border); }
.hm-chips .pill:hover { color: var(--text); }
/* Ways in: the regions and the editions, side by side. */
.hm-two { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 72px; align-items: start; }
.hm-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.hm-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hm-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; text-decoration: none; }
.hm-list .n { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.hm-az { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.hm-az a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 13px; color: var(--soft); text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.hm-az a:hover { background: var(--hover-bg); border-color: var(--hover-border); color: var(--text); }
.hm-eds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.hm-ed { display: block; padding: 12px 12px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 15px; line-height: 1.3; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.hm-ed small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.hm-ed:hover { background: var(--hover-bg); border-color: var(--hover-border); color: var(--text); }
.hm-ed[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.hm-ed[aria-current="true"] small { color: var(--accent-ink); opacity: 0.75; }
/* Two editions of one figure, the later with its changes marked (Diff). */
.hm-panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.hm-pane { display: block; padding: 24px 26px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color 0.15s ease; }
.hm-pane:hover { border-color: var(--hover-border); color: var(--text); }
.hm-pane h3 { margin-top: 10px; font-size: 19px; }
.hm-pane p { margin-top: 10px; font-family: var(--mono); font-size: 15px; line-height: 1.7; color: var(--soft); }
.hm-panes + .buttons { margin-top: 24px; }
.hm-prom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.hm-prom h3 { margin-bottom: 10px; }
.hm-prom p { color: var(--soft); }
@media (max-width: 960px) {
  .hm-two, .hm-panes, .hm-prom, .hm-series-notes { grid-template-columns: minmax(0, 1fr); }
  .hm-series-notes { gap: 12px; }
}
@media (max-width: 720px) {
  .hm-hero { padding-top: 48px; padding-bottom: 32px; }
  .hm-lede p { font-size: 19px; }
  /* The row stacks: label and value on one line, the chart under them. */
  .hm .strata .row, .hm .strata .axis { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .hm .strata .c, .hm .strata .axis > div:nth-child(2) { grid-column: 1 / -1; }
  .hm .strata .axis > div:first-child, .hm .strata .axis > div:last-child { display: none; }
  .hm .strata .v b { font-size: 26px; }
  .hm-bigq { height: 60px; padding-left: 16px; }
  .hm-bigq input { font-size: 18px; }
  .hm-bigq .button { padding: 0 14px; min-height: 40px; }
  .hm-cols2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hm-cols2 .hm-list + .hm-list { border-top: 0; }
  .hm-eds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Editions: a ledger per decade. */
.ed-table { margin-top: 32px; max-width: 880px; }
.ed-year { font-family: var(--mono); font-size: 18px; font-weight: 600; text-decoration: none; }
.ed-year:hover { color: var(--accent-text); }
.y-table td.mono-cell { font-family: var(--mono); white-space: nowrap; }
.y-table.corrections { margin-top: 28px; }
.y-table.corrections td { vertical-align: top; }
.y-table.corrections td.reason { min-width: 320px; color: var(--soft); }

/* Search: the box under the nameplate, then a row per result. */
.page-search { flex: 1 1 420px; min-width: 0; max-width: min(640px, 100%); display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 6px 0 16px; background: var(--panel); border: 1px solid var(--control); border-radius: var(--radius); color: var(--muted); }
.page-search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-search input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; color: var(--text); font: inherit; font-size: 18px; }
.page-search input:focus { outline: none; }
.page-search .button { min-height: 44px; padding: 0 18px; }
.sr-list { list-style: none; margin: 32px 0 0; padding: 0; }
.sr-row { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 6px 32px; padding: 22px 0 24px; border-top: 1px solid var(--line); }
.sr-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sr-title { font-size: 17px; font-weight: 700; text-decoration: none; }
.sr-title:hover { color: var(--accent-text); }
.sr-meta { font-size: 12px; color: var(--muted); }
.sr-text { min-width: 0; max-width: 72ch; }
.sr-field { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sr-snippet { margin-top: 6px; color: var(--soft); overflow-wrap: anywhere; }
.sr-snippet mark { background: var(--band); color: var(--text); padding: 0 2px; border-radius: 2px; }
.sr-snippet .dot { color: var(--control); }
.sr-none { margin-top: 32px; color: var(--soft); }
.y-sheet .pager { margin-top: 40px; }

/* Articles (About, How to cite): a reading column under the nameplate, each part under a rule. */
.prose.article { padding-top: 32px; }
.prose.article h2 { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.prose.article > h2:first-child { margin-top: 32px; }
.prose.article .article-note { color: var(--muted); font-style: italic; }
.prose.article .article-h { margin-top: 32px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 720px) {
  .sr-row { grid-template-columns: minmax(0, 1fr); }
  .page-search { flex-basis: 100%; }
  .page-search .button { padding: 0 12px; }
}
/* Long lists (countries, an edition's entries): letter pages closer together. */

/* Small phones: names and section headings scale with the screen, so a long single word
   (Liechtenstein, Communications) fits; a word that still cannot fit breaks rather than
   pushing the page sideways. The figures table drops its small trend lines. */
.y-name, .y-sheet-head h2 { overflow-wrap: break-word; }
@media (max-width: 600px) {
  .y-name { font-size: clamp(40px, 13vw, 60px); }
  .fl-name { font-size: clamp(34px, 10vw, 48px); }
  .y-sheet-head h2 { font-size: clamp(30px, 9vw, 40px); }
}

/* Print ------------------------------------------------------------------------------------ */

/* Printed or saved as PDF: black on white, without menus, controls or the docked bar. Every
   "Show all" is opened before printing (site.js), the whole Background prints, and fields
   and headings are kept whole across page breaks. The citation prints at the end. */
@media print {
  html:root, html:root[data-theme], html:root:not([data-theme]) {
    --bg: #FFFFFF; --bg-alt: #FFFFFF; --panel: #FFFFFF; --line: #BBBBBB; --line-soft: #DDDDDD;
    --border: #999999; --control: #999999; --text: #000000; --soft: #222222; --muted: #555555;
    --accent: #000000; --accent-ink: #FFFFFF; --accent-text: #000000; --band: #EEEEEE;
    --add: #0B5CAD; --del: #B3261E; --chart-line: #444444; --shadow: none;
    color-scheme: light;
  }
  @page { margin: 16mm 14mm; }
  body { font-size: 10.5pt; line-height: 1.45; background: #FFFFFF; }
  .wrap { max-width: none; padding: 0; }
  .skip, .site-nav, .search, .theme-toggle, .a-bar, .w-margin, .fl-order,
  .y-ears .buttons, .intro-toggle, .more-toggle, .y-box-more, [data-copy],
  .cite .buttons, .page-search, .sg, .pager, .hi-side, .hi-entry, .y-index, .site-credit { display: none !important; }
  .site-header { border: 0; }
  .site-header .wrap { padding: 0 0 6mm; }
  .site-footer { margin-top: 10mm; }
  .site-footer .wrap { padding: 4mm 0 0; font-size: 8.5pt; }
  .site-footer nav { display: none; }
  .js .intro:not(.is-open) .intro-more { display: inline; }
  .js .intro:not(.is-open) p.intro-more { display: block; }
  .js .is-collapsed [data-extra] { display: block; }
  .y-plate { padding-top: 0; }
  .y-name { margin-top: 6mm; font-size: 34pt; }
  .fl-name { font-size: 28pt; }
  .y-sub { margin-top: 3mm; font-size: 12pt; }
  .y-ears { margin-top: 5mm; padding: 2mm 0; }
  .y-front { padding-top: 6mm; }
  .y-sheet-body { display: block; }
  .y-figures { margin-top: 6mm; }
  .y-columns p, .y-columns > p:first-child, .fl-lead { font-size: 10.5pt; line-height: 1.5; }
  .y-sheet { margin-top: 8mm; }
  .y-sheet-head { padding: 3mm 0; }
  .y-sheet-head h2 { font-size: 20pt; }
  .y-sheet-body { margin-top: 4mm; }
  .y-sheet-head, .y-kicker, .y-box-h, h3 { break-after: avoid; }
  .y-field, .fl-row, .fl-entry, .sr-row, .y-table tr { break-inside: avoid; }
  .y-field, .fl-row { padding: 3mm 0 4mm; }
  .y-field > p, .y-field .pairs dd, .fl-text, .hi-text,   .y-field h3 { font-size: 11pt; }
  .lead .n { font-size: 16pt; }
  .stats .n { font-size: 13pt; }
  .chart, .y-chart, .hi-chart { break-inside: avoid; margin-top: 4mm; }
  .chart svg { min-width: 0; }
  a { text-decoration: none; }
  .y-flag { font-size: 1em; }
}

/* The statement that heads a page (partials/plate.php, Fields and Corrections), after About:
   a dateline, the name or a figure large with a line in amber, then what the page is, its
   facts as a row of large figures, and the breadcrumb with any picker. */
.pg-hero { padding-top: 80px; padding-bottom: 48px; }
.pg-hero h1 { margin: 0; font-size: clamp(52px, 7.8vw, 112px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; }
.pg-hero h1 > span { display: block; color: var(--accent-text); }
.pg-hero p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--soft); }
.pg-hero .pg-lead { max-width: 760px; margin-top: 32px; font-size: 22px; }
.pg-hero.is-long h1 { font-size: clamp(40px, 5.2vw, 76px); letter-spacing: -0.04em; }
.pg-hero.is-long h1 > span { margin-top: 8px; font-size: 0.62em; }
.pg-plate h1 > span { margin-top: 10px; font-size: 0.6em; letter-spacing: -0.035em; }
.pg-kicker { margin: 0 0 18px; line-height: 1.7; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pg-kicker > * { white-space: nowrap; }
.pg-kicker > :not(:last-child)::after { content: "\00B7"; padding-left: 10px; color: var(--border); }
.pg-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 40px 0 0; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pg-facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0; }
.pg-facts dd { margin: 0; font-size: clamp(36px, 3.9vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; }
.pg-facts dt { margin-top: 10px; font-size: 15px; line-height: 1.4; color: var(--muted); }
.pg-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; margin-top: 28px; }
.pg-side .breadcrumb { margin: 0; font-size: 14px; }
.pg-hero .pg-note { font-size: 13px; color: var(--muted); }
.pg-side .page-search { flex: 1 1 420px; max-width: 640px; }
@media (max-width: 960px) { .pg-kicker > * { display: block; white-space: normal; } .pg-kicker > :not(:last-child)::after { content: none; } }
@media (max-width: 640px) {
  .pg-hero { padding-top: 48px; padding-bottom: 32px; }
  .pg-hero p { font-size: 16px; }
  .pg-hero .pg-lead { margin-top: 24px; font-size: 18px; }
  .pg-facts { gap: 20px; margin-top: 28px; padding: 24px 0; }
  .pg-facts dd { font-size: 28px; }
  .pg-facts dt { font-size: 13px; }
  .pg-side { margin-top: 24px; }
}
@media (max-width: 480px) {
  .pg-facts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pg-facts > div { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 12px; }
  .pg-facts dt { margin: 0; }
}