/* evrythingg site styles. Shared by the explorer at / and the server-rendered
 * /q/ and /c/ pages. Tokens are copied from brand/tokens.css (source of truth
 * lives there; regenerate this block if the brand changes).
 * Text is always plain, untransformed DOM. Only decorative, glyph-free
 * elements are ever skewed. */
@import url("https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@50..150,100..900&family=Geologica:wght@100..900&display=swap");

:root {
  --abyss: #04161B; --bedrock: #0A2A32; --shale: #103A44; --slate: #1A4F5B; --seam: #2C6976;
  --bone: #F4EEE1; --silt: #A9C2C4; --dust: #8AADB2; --ink: #04161B;
  --aqua: #35E0C8; --sulphur: #FFD23F; --amber: #FF9A2E; --magma: #FF5B2E; --garnet: #F2608A;

  --year-2026: var(--sulphur); --year-2025: var(--magma); --year-2024: var(--bone);
  --year-2023: var(--aqua); --year-2022: var(--garnet); --year-2021: var(--amber);
  --wdth-2026: 150; --wdth-2025: 130; --wdth-2024: 110; --wdth-2023: 90; --wdth-2022: 70; --wdth-2021: 50;

  --cat-0: #F4EEE1; --cat-45: #FEC1D0; --cat-16: #FF7776; --cat-47: #D0947D; --cat-71: #FEAA79;
  --cat-18: #EB8F06; --cat-12: #FED48C; --cat-958: #E4BE01; --cat-65: #B1AE01; --cat-11: #CAE986;
  --cat-66: #88DA67; --cat-7: #0DC868; --cat-20: #7BF6C8; --cat-29: #02DFC6; --cat-67: #15BFC0;
  --cat-174: #9FCED3; --cat-13: #4BD2FF; --cat-5: #1AB3FF; --cat-533: #C6DDFE; --cat-19: #95B5EE;
  --cat-22: #9697FE; --cat-8: #D2B8FF; --cat-299: #B896C7; --cat-3: #E671EF; --cat-44: #FF96EB;
  --cat-14: #FE6CB1;

  --font-display: "Anybody", "Geologica", sans-serif;
  --font-text: "Geologica", "Noto Sans", "Noto Sans Devanagari", "Noto Sans Arabic", "Noto Sans JP", "Noto Sans SC", sans-serif;
  --tracking-display: -0.012em;
  --tracking-label: 0.08em;

  --dip: -14deg;
  --cut: polygon(var(--cut-w, 10px) 0, 100% 0, calc(100% - var(--cut-w, 10px)) 100%, 0 100%);
  --hairline: 1px solid var(--seam);

  --scene-bg:
    radial-gradient(90% 60% at 50% -8%, #1B5F6C 0%, rgba(27, 95, 108, 0) 70%),
    radial-gradient(70% 50% at 82% 108%, rgba(255, 91, 46, 0.16) 0%, rgba(255, 91, 46, 0) 70%),
    linear-gradient(180deg, #0A2A32 0%, #04161B 100%);
  --scene-fog: #0A2A32;
  --scene-floor: #04161B;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: 0.07;
  --shadow-deep: 0 1px 0 rgba(244, 238, 225, 0.06) inset, 0 18px 40px -18px rgba(1, 10, 13, 0.9);
  --focus-ring: 0 0 0 2px var(--bedrock), 0 0 0 4px var(--aqua);
  --ease-drill: cubic-bezier(0.7, 0, 0.2, 1);

  --cat: var(--cat-0);
  --strata: linear-gradient(180deg,
    var(--year-2026) 0 27%, var(--year-2025) 27% 50%, var(--year-2024) 50% 70%,
    var(--year-2023) 70% 85%, var(--year-2022) 85% 94%, var(--year-2021) 94% 100%);
  color-scheme: dark;
}

@property --slip { syntax: "<length>"; inherits: false; initial-value: 0px; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 16px/1.5 var(--font-text);
  color: var(--bone);
  background: var(--abyss);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--aqua); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--bone); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  padding: 8px 14px; background: var(--sulphur); color: var(--ink); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* every query string, wherever it appears */
.q { unicode-bidi: isolate; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ search */
.search { position: relative; min-width: 0; }
.search-input {
  width: 100%; height: 38px; padding: 0 14px 0 36px;
  background: rgba(4, 22, 27, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.5 3a5.5 5.5 0 1 0 3.4 9.8l4 4 1.4-1.4-4-4A5.5 5.5 0 0 0 8.5 3zm0 2a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7z' fill='%23A9C2C4'/%3E%3C/svg%3E") no-repeat 10px 50% / 18px;
  border: var(--hairline); border-radius: 0; color: var(--bone);
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
}
.search-input::placeholder { color: var(--dust); }
.search-input:focus { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 1px var(--aqua); }
.search-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 4px; list-style: none;
  background: var(--abyss); border: var(--hairline); box-shadow: var(--shadow-deep);
  max-height: min(74vh, 600px); overflow-y: auto; overscroll-behavior: contain;
}
.search-opt {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 10px;
  color: var(--bone); text-decoration: none; cursor: pointer;
  border-left: 3px solid transparent;
}
.search-opt .q { flex: 1; min-width: 0; }
.search-opt-go { color: var(--dust); font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.search-opt[aria-selected="true"], .search-opt:hover { background: var(--shale); border-left-color: var(--magma); color: var(--bone); }
.search-none { padding: 10px; color: var(--silt); font-size: 14px; }
.search-opt-guide { align-items: flex-start; gap: 12px; padding-block: 10px; }
.search-tag {
  --cut-w: 5px; flex: none; margin-top: 1px; padding: 3px 11px; background: var(--sulphur); color: var(--ink); clip-path: var(--cut);
  font: 900 11px/1.3 var(--font-display); font-stretch: 115%; text-transform: uppercase; letter-spacing: 0.04em;
}
.search-guide { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-guide-title { color: var(--bone); font-weight: 600; line-height: 1.3; }
.search-guide-facts { color: var(--silt); font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-opt-guide[aria-selected="true"], .search-opt-guide:hover { border-left-color: var(--sulphur); }
.search-sep { padding: 8px 10px 4px; margin-top: 4px; border-top: var(--hairline); color: var(--dust); font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; }

/* ============================================================ the explorer */
html:has(body.page-home) { height: 100%; overflow: hidden; }
body.page-home { height: 100%; overflow: hidden; background: var(--scene-bg), var(--abyss); }

.app {
  position: relative; height: 100vh; height: 100dvh; min-height: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 408px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "bar bar bar" "cats . panel" "dock dock panel";
}

.stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; touch-action: none; }
.stage canvas { display: block; width: 100%; height: 100%; outline: none; }
.stage canvas.is-grab { cursor: grab; }
.stage canvas.is-point { cursor: pointer; }
.stage canvas.is-grabbing { cursor: grabbing; }
.grain {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--grain); opacity: var(--grain-opacity); mix-blend-mode: overlay;
}
.tip {
  position: absolute; z-index: 5; left: 0; top: 0; pointer-events: none;
  max-width: min(280px, 70vw); padding: 5px 10px;
  background: var(--abyss); border: var(--hairline); color: var(--bone);
  font-size: 13px; line-height: 1.35; box-shadow: var(--shadow-deep);
}
.tip small { display: block; color: var(--silt); font-size: 12px; }
.hint {
  position: absolute; z-index: 2; margin: 0; pointer-events: none;
  left: 150px; top: 70px; max-width: 30ch;
  color: var(--silt); font-size: 13px; line-height: 1.4;
}

/* top bar */
.bar {
  grid-area: bar; position: relative; z-index: 20;
  display: flex; align-items: center; gap: 16px; padding: 10px 20px;
  background: linear-gradient(180deg, rgba(4, 22, 27, 0.9), rgba(4, 22, 27, 0));
}
.bar-brand { display: flex; align-items: center; flex: none; line-height: 0; }
.bar-lockup { height: 17px; width: auto; }
.bar-mark { display: none; height: 30px; width: auto; }
.bar .search { flex: 0 1 340px; margin-left: 8px; }
.bar-gap { flex: 1; }
.switch { display: flex; flex: none; }
.switch a {
  --cut-w: 7px; display: inline-flex; align-items: center; height: 38px; padding: 0 17px; margin-right: -5px;
  background: var(--shale); color: var(--silt); clip-path: var(--cut); font: 600 13px/1 var(--font-text); text-decoration: none; transition: background 0.2s;
}
.switch a:hover { background: var(--slate); color: var(--bone); }
.switch .switch-on { background: var(--bone); color: var(--ink); }
.switch a:focus-visible { box-shadow: none; outline: 2px solid var(--aqua); outline-offset: -3px; }
.btn {
  --cut-w: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 18px; border: 0; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 45%, rgba(4, 22, 27, 0.35)), var(--shale); color: var(--bone); clip-path: var(--cut);
  font: 600 13px/1 var(--font-text); letter-spacing: 0.02em; text-decoration: none;
  transition: background 0.2s;
}
.btn:hover { background-color: var(--slate); color: var(--bone); }
.btn[aria-pressed="true"] { background-color: var(--bone); color: var(--ink); }
.btn:focus-visible { box-shadow: none; outline: 2px solid var(--aqua); outline-offset: -2px; }

/* category control: a miniature stratigraphic column, same band order as the core.
 * Bands swell and name themselves under the pointer. */
.cats {
  grid-area: cats; position: relative; z-index: 10; align-self: center;
  display: flex; flex-direction: column; height: min(100%, 580px); padding: 4px 0 8px 26px;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
}
.col-cap { margin: 0 0 12px; color: var(--dust); font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.col-now { display: none; }
.col {
  --cut-h: 11px;
  position: relative; flex: 1; min-height: 0; width: 44px; display: flex; flex-direction: column; padding-bottom: var(--cut-h);
  filter: drop-shadow(0 16px 16px rgba(1, 10, 13, 0.75));
}
.col-band {
  flex: 1 1 0; min-height: 0; margin: 0 0 calc(var(--cut-h) * -1); padding: 0; border: 0; cursor: pointer;
  background: var(--c); clip-path: polygon(0 var(--cut-h), 100% 0, 100% calc(100% - var(--cut-h)), 0 100%);
  filter: saturate(0.8) brightness(0.78);
}
.col-band.is-hov, .col-band[aria-checked="true"] { filter: none; }
.col-band.is-none { background: repeating-linear-gradient(76deg, var(--shale) 0 4px, var(--seam) 4px 5px); }
.col-band:focus-visible { box-shadow: none; outline: none; filter: brightness(1.25); }
.col:has(:focus-visible) { outline: 2px solid var(--aqua); outline-offset: 7px; }
.col::after { /* the column is round: light from the upper left */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 22, 27, 0.55), rgba(4, 22, 27, 0) 28%, rgba(255, 255, 255, 0.24) 50%, rgba(4, 22, 27, 0.08) 68%, rgba(4, 22, 27, 0.6));
  clip-path: polygon(0 var(--cut-h), 100% 0, 100% calc(100% - var(--cut-h)), 0 100%);
}
.col-labels { position: absolute; inset: 0; pointer-events: none; }
.col-label {
  position: absolute; left: 84px; white-space: nowrap; opacity: 0;
  color: var(--silt); font-size: 13px; line-height: 18px; text-shadow: 0 0 8px var(--abyss), 0 0 2px var(--abyss);
  transition: opacity 0.15s;
}
.col-label::before { content: ""; display: inline-block; width: 10px; height: 1px; margin: 0 8px 4px 0; background: currentColor; opacity: 0.7; }
.col-label.is-hov { color: var(--bone); }
.col-label.is-sel { color: var(--c); font-size: 14px; font-weight: 600; }
.col-label.is-sel::before { width: 16px; height: 2px; margin-bottom: 3px; opacity: 1; }

/* dock: country and year */
.dock {
  grid-area: dock; position: relative; z-index: 10;
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px 12px; padding: 12px 20px 20px;
  pointer-events: none;
}
.dock > * { pointer-events: auto; }
.pick { position: relative; display: flex; flex: none; }
.pick select {
  --cut-w: 8px;
  appearance: none; -webkit-appearance: none;
  height: 44px; min-width: 190px; max-width: 250px; padding: 0 40px 0 20px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--magma); color: var(--ink); clip-path: var(--cut);
  font: 900 15px/1 var(--font-display); font-stretch: 125%; letter-spacing: var(--tracking-display);
  text-overflow: ellipsis;
}
.pick select option, .pick select optgroup { background: var(--abyss); color: var(--bone); font: 400 15px var(--font-text); }
.pick::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -7px;
  border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none;
}
.pick select:focus-visible { box-shadow: none; outline: 2px solid var(--bone); outline-offset: -4px; }
.dock .btn { height: 44px; }

.pick select, .dock .btn { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 45%, rgba(4, 22, 27, 0.3)); }
.years { display: flex; align-items: flex-end; min-width: 0; padding-right: 8px; }
.year {
  --cut-w: 10px; --rock: color-mix(in srgb, var(--yc) 30%, var(--abyss));
  flex: none; width: calc(var(--w) * 0.5px + 36px); height: 44px; margin-right: -7px; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%, rgba(4, 22, 27, 0.36)), var(--rock);
  color: var(--yc); clip-path: var(--cut);
  font: 900 17px/1 var(--font-display); font-stretch: calc(var(--w) * 1%); letter-spacing: var(--tracking-display);
  transition: translate 0.3s var(--ease-drill), background-color 0.2s;
}
.year:hover { --rock: color-mix(in srgb, var(--yc) 46%, var(--abyss)); }
.year[aria-checked="true"] { --rock: var(--yc); color: var(--ink); translate: 0 -7px; }
.year.is-none { --rock: transparent; color: var(--dust); background: repeating-linear-gradient(76deg, rgba(16, 58, 68, 0.9) 0 5px, rgba(44, 105, 118, 0.7) 5px 6px); }
.year.is-none[aria-checked="true"] { color: var(--bone); }
.year:focus-visible { box-shadow: none; outline: 2px solid var(--aqua); outline-offset: -3px; }
.year[aria-checked="true"]:focus-visible { outline-color: var(--ink); }

/* the list panel */
.panel {
  grid-area: panel; position: relative; z-index: 10; min-height: 0;
  display: flex; flex-direction: column; margin: 4px 20px 20px 0;
  background: rgba(4, 22, 27, 0.86); border: var(--hairline); border-top: 3px solid var(--c, var(--bone));
  box-shadow: var(--shadow-deep);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.panel-head { padding: 16px 18px 0; }
.panel-eyebrow {
  margin: 0 0 6px; color: var(--c, var(--bone)); font-size: 12px; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.panel-title {
  margin: 0; font: 900 30px/0.95 var(--font-display); font-stretch: 125%; letter-spacing: var(--tracking-display);
  color: var(--bone); overflow-wrap: anywhere;
}
.panel-title .yr { color: var(--yc, var(--bone)); font-stretch: calc(var(--w, 125) * 1%); margin-inline-start: 0.28em; white-space: nowrap; }
.tabs { display: flex; gap: 3px; margin-top: 14px; }
.tab {
  --cut-w: 6px;
  flex: 1; height: 32px; border: 0; cursor: pointer; background: var(--shale); color: var(--silt); clip-path: var(--cut);
  font: 600 13px/1 var(--font-text);
}
.tab:hover { color: var(--bone); background: var(--slate); }
.tab[aria-selected="true"] { background: var(--bone); color: var(--ink); }
.tab:focus-visible { box-shadow: none; outline: 2px solid var(--aqua); outline-offset: -2px; }

.rows-wrap { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 0 6px; }
/* A scrollbar with its own gutter: an overlay one sits on top of the rows' right edge and eats clicks there. */
.rows-wrap::-webkit-scrollbar { width: 8px; }
.rows-wrap::-webkit-scrollbar-thumb { background: var(--seam); }
.rows-wrap::-webkit-scrollbar-track { background: rgba(4, 22, 27, 0.6); }
.rows { margin: 0; padding: 0; list-style: none; }
.row { position: relative; }
.row-link {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 12px; align-items: baseline; gap: 8px;
  padding: 5px 16px 5px 16px; color: var(--bone); text-decoration: none; font-size: 15px; line-height: 1.3; cursor: pointer;
  border-bottom: 1px solid rgba(44, 105, 118, 0.26);
}
.row:nth-child(5n) .row-link { border-bottom-color: rgba(44, 105, 118, 0.85); }       /* read the list in fives */
.row:nth-child(-n+3) .row-link { padding-block: 8px; font-size: 19px; font-weight: 500; }
.row:nth-child(-n+3) .row-rank { font-size: 20px; font-stretch: 125%; }
.row-link::before { /* the bed: width is the search interest */
  content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 1%);
  background: var(--c, var(--bone)); opacity: 0.12; pointer-events: none; transition: opacity 0.15s;
}
.row-rank { font: 900 15px/1 var(--font-display); font-stretch: 110%; color: var(--c, var(--bone)); font-variant-numeric: tabular-nums; }
.row-val { color: var(--silt); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 3ch; text-align: end; }
.row-val.is-rise { color: var(--sulphur); }
.row-go { /* every row opens: say so */
  align-self: center; width: 7px; height: 7px; border: solid var(--silt); border-width: 2px 2px 0 0; rotate: 45deg; opacity: 0.6;
  transition: translate 0.15s, opacity 0.15s, border-color 0.15s;
}
.row-link:hover, .row-link:focus-visible, .row.is-hot .row-link { background: var(--slate); color: var(--bone); box-shadow: inset 4px 0 0 var(--c, var(--bone)); border-radius: 0; }
.row-link:hover::before, .row.is-hot .row-link::before { opacity: 0.26; }
.row-link:hover .row-go, .row-link:focus-visible .row-go, .row.is-hot .row-go { opacity: 1; border-color: var(--c, var(--bone)); translate: 3px 0; }
.row-link:focus-visible { outline: 2px solid var(--aqua); outline-offset: -2px; }

/* a query opened in place */
.card { padding: 4px 18px 14px; }
.card-back {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; cursor: pointer;
  color: var(--silt); font: 600 13px/1 var(--font-text);
}
.card-back::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 0 2px 2px; rotate: 45deg; }
.card-back:hover { color: var(--bone); }
.card-eyebrow { margin: 12px 0 6px; color: var(--c, var(--bone)); font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.card-title { margin: 0; font: 900 28px/1.02 var(--font-display); font-stretch: 125%; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.card-title:focus { outline: none; }
.card-title .q:lang(und) { line-height: 1.3; }
.card-open {
  --cut-w: 8px; display: inline-flex; align-items: center; gap: 10px; height: 40px; margin: 14px 0 4px; padding: 0 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 45%, rgba(4, 22, 27, 0.3)), var(--magma);
  color: var(--ink); clip-path: var(--cut); font: 900 14px/1 var(--font-display); font-stretch: 120%; text-decoration: none;
}
.card-open::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 2px 2px 0 0; rotate: 45deg; }
.card-open:hover { background-color: var(--sulphur); color: var(--ink); }
.card-open:focus-visible { box-shadow: none; outline: 2px solid var(--bone); outline-offset: -4px; }
.card-wait { margin: 14px 0; color: var(--silt); font-size: 14px; }
.card-answer { margin: 16px 0 4px; padding: 12px 14px 12px; background: var(--shale); border-left: 4px solid var(--sulphur); }
.card-answer-tag { margin: 0 0 4px; color: var(--sulphur); font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.card-answer-title { color: var(--bone); font-weight: 600; font-size: 16px; line-height: 1.3; }
.card-answer-sum { margin: 6px 0 0; color: var(--silt); font-size: 13px; line-height: 1.45; }
.card-answer-facts { margin: 6px 0 0; color: var(--bone); font-size: 12px; line-height: 1.4; }
.card-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 16px 0 0; color: var(--silt); font-size: 13px; }
.card-stat strong { color: var(--bone); font: 900 18px/1 var(--font-display); font-stretch: 115%; }
.card-h { margin: 18px 0 6px; color: var(--dust); font-size: 11px; font-weight: 400; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.card-hits { margin: 0 -18px; padding: 0; list-style: none; }
.card-hit {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; width: 100%;
  padding: 6px 18px; border: 0; border-bottom: 1px solid rgba(44, 105, 118, 0.26); background: none; text-align: start;
  color: var(--bone); font: 400 14px/1.3 var(--font-text);
}
button.card-hit { cursor: pointer; }
button.card-hit:hover, button.card-hit:focus-visible { background: var(--slate); box-shadow: inset 4px 0 0 var(--c); }
button.card-hit:focus-visible { outline: 2px solid var(--aqua); outline-offset: -2px; border-radius: 0; }
.card-hit-rank { color: var(--c); font: 900 14px/1 var(--font-display); font-stretch: 110%; }
.card-hit-val { color: var(--silt); font-size: 12px; white-space: nowrap; }
.card-hit-val.is-rise { color: var(--sulphur); }

.state { padding: 22px 18px; color: var(--silt); font-size: 15px; }
.state strong { display: block; margin-bottom: 8px; color: var(--bone); font: 900 22px/1 var(--font-display); font-stretch: 125%; letter-spacing: var(--tracking-display); }
.state p { margin: 0 0 8px; }
.panel-foot {
  display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between;
  padding: 10px 18px 12px; border-top: var(--hairline); color: var(--dust); font-size: 12px;
}
.panel-foot a { color: var(--silt); }
.panel-foot a:hover { color: var(--bone); }

/* 2D mode: the core drawn flat. Used without WebGL and with reduced motion. */
.flat { display: none; }
.is-2d .stage canvas { display: none; }
.is-2d .flat {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  inset: 64px 428px 96px 150px;
}
.seg {
  --W: 260px; --cut-h: calc(var(--W) * 0.2493); --hv: calc(var(--w) * 0.45px);
  --sw: calc(var(--W) * 0.2419); --bw: calc(var(--hv) * 0.03732);
  position: relative; flex: none; width: var(--W); height: calc(var(--hv) + var(--cut-h));
  margin-top: calc(6px - var(--cut-h));
  border: 0; padding: 0; cursor: pointer; background: none;
  transition: height 0.5s var(--ease-drill), transform 0.5s var(--ease-drill);
}
.seg:first-child { margin-top: 0; }
.seg::before { /* the rock: 26 category bands lying on the dip */
  content: ""; position: absolute; inset: 0;
  background: var(--bands);
  clip-path: polygon(0 var(--cut-h), 100% 0, 100% calc(100% - var(--cut-h)), 0 100%);
}
.seg::after { /* the year's own colour, a thin skin on top */
  content: ""; position: absolute; inset: 0; background: var(--yc);
  clip-path: polygon(0 var(--cut-h), 100% 0, 100% 5px, 0 calc(var(--cut-h) + 5px));
}
.seg-label {
  position: absolute; left: calc(100% + 14px); top: calc(var(--hv) / 2); translate: 0 -50%;
  color: var(--yc); font: 900 20px/1 var(--font-display); font-stretch: calc(var(--w) * 1%);
}
.seg[aria-pressed="true"] { --hv: 170px; transform: translate(-30px, 7px); }
.seg[aria-pressed="true"] .seg-label { font-size: 30px; }
.seg.is-none::before { background: repeating-linear-gradient(76deg, transparent 0 7px, rgba(44, 105, 118, 0.6) 7px 8px); }
.seg.is-none::after { background: var(--seam); }
.seg.is-none .seg-label { color: var(--dust); }
.seg:focus-visible { box-shadow: none; outline: 2px solid var(--aqua); outline-offset: 4px; }

/* phone and narrow: scene on top, controls, then the list */
@media (max-width: 899px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(150px, 30vh) auto auto minmax(0, 1fr);
    grid-template-areas: "bar" "stage" "dock" "cats" "panel";
  }
  .stage { position: relative; inset: auto; grid-area: stage; }
  .bar { padding: 8px 12px; gap: 10px; background: var(--abyss); }
  .bar-lockup { display: none; }
  .bar-mark { display: block; }
  .bar .search { flex: 1; margin-left: 0; }
  .bar-gap { display: none; }
  .switch .switch-on { display: none; }
  .switch a { margin-right: 0; padding: 0 13px; }
  .bar .btn { padding: 0 12px; }
  .hint { left: 12px; top: 8px; font-size: 12px; max-width: 22ch; animation: hint-out 0.6s 6s forwards; }
  .dock { padding: 8px 12px 0; gap: 6px; background: var(--abyss); pointer-events: auto; }
  .pick { flex: 1; }
  .pick select { width: 100%; max-width: none; min-width: 0; height: 40px; }
  .dock .btn { height: 40px; padding: 0 14px; }
  .years { flex: 1 0 100%; padding: 7px 7px 0 0; }
  .year { flex: var(--w) 1 0; width: auto; height: 38px; font-size: 14px; }
  .year[aria-checked="true"] { translate: 0 -5px; }
  .cats {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 6px 10px;
    height: auto; align-self: auto; padding: 9px 12px 10px; background: var(--abyss);
  }
  .col-cap { margin: 0; }
  .col-now { display: block; margin: 0; color: var(--c); font-size: 14px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .col { --cut-w: 9px; grid-column: 1 / -1; flex: none; flex-direction: row; width: 100%; height: 34px; padding: 0 var(--cut-w) 0 0; filter: none; }
  .col-band { height: 100%; margin: 0 calc(var(--cut-w) * -1) 0 0; clip-path: polygon(var(--cut-w) 0, 100% 0, calc(100% - var(--cut-w)) 100%, 0 100%); }
  .col::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 45%, rgba(4, 22, 27, 0.4));
    clip-path: polygon(var(--cut-w) 0, 100% 0, calc(100% - var(--cut-w)) 100%, 0 100%);
  }
  .col-labels { display: none; }
  .panel { margin: 0; border-inline: 0; border-bottom: 0; background: var(--abyss); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .panel-head { padding: 12px 12px 0; }
  .panel-title { font-size: 24px; }
  .tabs { margin-top: 10px; }
  .row-link { padding-inline: 10px 12px; }
  .card { padding-inline: 12px; }
  .card-hits { margin-inline: -12px; }
  .card-hit { padding-inline: 12px; }
  .card-title { font-size: 24px; }
  .state { padding: 18px 12px; }
  .panel-foot { padding: 8px 12px 10px; }
  .is-2d .flat { inset: 6px 70px 6px 12px; }
  .seg { --W: 150px; --hv: calc(var(--w) * 0.14px); margin-top: calc(4px - var(--cut-h)); }
  .seg[aria-pressed="true"] { --hv: 56px; transform: translate(-14px, 3px); }
  .seg-label { font-size: 14px; }
  .seg[aria-pressed="true"] .seg-label { font-size: 20px; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .app { grid-template-rows: auto minmax(110px, 22vh) auto auto minmax(0, 1fr); }
}

/* ===================================================== document pages */
body.page:not(.page-home) {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--scene-bg) fixed, var(--abyss);
}
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px 16px; padding: 10px max(16px, calc((100vw - 1120px) / 2));
  background: var(--abyss); border-bottom: var(--hairline);
}
.site-brand {
  flex: none; display: block; width: 166px; height: 38px; overflow: hidden;
  font-size: 0; color: transparent; text-decoration: none;
  background: url("/assets/lockup-small.svg") no-repeat left center / 166px auto;
}
.site-header .search { flex: 1 1 200px; max-width: 380px; margin-inline-start: auto; }
.site-nav { flex: none; }
.site-nav-link {
  --cut-w: 8px;
  display: inline-flex; align-items: center; height: 38px; padding: 0 18px;
  background: var(--magma); color: var(--ink); clip-path: var(--cut);
  font: 900 13px/1 var(--font-display); font-stretch: 125%; text-decoration: none; white-space: nowrap;
  transition: background 0.2s;
}
.site-nav-link:hover { background: var(--sulphur); color: var(--ink); }
.site-nav-link:focus-visible { box-shadow: none; outline: 2px solid var(--bone); outline-offset: -4px; }

.main { flex: 1; width: 100%; max-width: 1152px; margin: 0 auto; padding: 18px 16px 64px; }
.crumbs-list { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--silt); }
.crumb + .crumb::before { content: "/"; margin-inline-end: 10px; color: var(--seam); }
.crumb a { color: var(--silt); }
.crumb a:hover { color: var(--bone); }
.crumb-current { color: var(--bone); min-width: 0; }

.query-head, .cell-head { position: relative; z-index: 0; padding: 28px 0 0; }
.eyebrow {
  margin: 0 0 10px; color: var(--sulphur); font-size: 12px; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.query-title, .cell-title, .notfound-title {
  margin: 0; max-width: 20ch;
  font: 900 clamp(34px, 7.4vw, 84px)/0.92 var(--font-display); font-stretch: 150%;
  letter-spacing: var(--tracking-display); overflow-wrap: anywhere; text-wrap: balance;
}
.cell-title { font-size: clamp(30px, 5.6vw, 64px); max-width: 18ch; }
.q-title { display: inline-block; max-width: 100%; }
.q-title:not(:lang(en)):lang(und) { line-height: 1.25; } /* tall scripts need the room */
.query-summary, .cell-summary { max-width: 62ch; margin: 18px 0 0; color: var(--silt); font-size: 17px; font-weight: 300; }
.query-summary .q { color: var(--bone); font-weight: 500; }

/* the strata slab under every page head: six years on the dip, stepped across the fault.
 * Decorative and glyph-free, so skewing it is safe. */
.query-head::after, .cell-head::after, .notfound::after {
  content: ""; position: absolute; z-index: -1; right: 0; top: 150px; width: min(32%, 380px); height: 104px;
  background:
    var(--strata) left top / 58% 100% no-repeat,
    var(--strata) right var(--slip) / 41% 100% no-repeat;
  transform: skewY(var(--dip)); transform-origin: left bottom;
  --slip: 30px;
  animation: slip 0.9s 0.25s var(--ease-drill) backwards;
}
.notfound { position: relative; }
@keyframes slip { from { --slip: 0px; } }
@keyframes hint-out { to { opacity: 0; visibility: hidden; } }

.stats { display: flex; flex-wrap: wrap; gap: 14px 0; margin: 26px 0 0; }
.stat { padding: 0 28px 0 0; margin: 0 28px 0 0; border-inline-end: var(--hairline); }
.stat:last-child { border: 0; margin: 0; padding: 0; }
.stat dt { color: var(--dust); font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.stat dd { margin: 4px 0 0; font: 900 30px/1 var(--font-display); font-stretch: 125%; color: var(--bone); }
.stat:first-child dd { color: var(--sulphur); }

.section-title {
  margin: 0 0 6px; font: 900 22px/1.05 var(--font-display); font-stretch: 125%; letter-spacing: var(--tracking-display);
}
.section-note, .hits-note { margin: 0 0 14px; max-width: 70ch; color: var(--silt); font-size: 14px; }
.query-periods, .query-places, .related, .cat-nav { margin-top: 48px; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 7px 10px 7px 0; text-align: start; vertical-align: baseline; border-bottom: 1px solid rgba(44, 105, 118, 0.55); }
thead th { color: var(--dust); font-size: 12px; font-weight: 400; letter-spacing: var(--tracking-label); text-transform: uppercase; border-bottom: var(--hairline); }
tbody th { font-weight: 600; }
td a, th a { color: var(--bone); text-decoration-color: var(--seam); }
td a:hover, th a:hover { text-decoration-color: var(--aqua); }
.num { text-align: end; font-variant-numeric: tabular-nums; padding-inline: 10px 0; }
.periods { max-width: 640px; }
.hits { table-layout: fixed; }
.hits th:nth-child(1) { width: 22%; } .hits th:nth-child(2) { width: 36%; } .hits th:nth-child(3) { width: 14%; } .hits th:nth-child(4) { width: 11%; } .hits th:nth-child(5) { width: 17%; }
.hits td { overflow-wrap: anywhere; }
.periods-row td:first-of-type, .hit-rank { font: 900 16px/1 var(--font-display); font-stretch: 110%; color: var(--sulphur); }
.hit-rising .hit-value, .hit-rising .hit-list { color: var(--sulphur); }
.hit-list { color: var(--silt); font-size: 13px; }
.hit-value { color: var(--silt); }
tbody tr:hover { background: rgba(16, 58, 68, 0.6); }

/* a period is a stratum: its title carries the year's colour and width */
.period { --yc: var(--bone); --w: 110; margin-top: 40px; scroll-margin-top: 76px; overflow-x: auto; }
.period[id^="p-2026"] { --yc: var(--year-2026); --w: 150; }
.period[id^="p-2025"] { --yc: var(--year-2025); --w: 130; }
.period[id^="p-2024"] { --yc: var(--year-2024); --w: 110; }
.period[id^="p-2023"] { --yc: var(--year-2023); --w: 90; }
.period[id^="p-2022"] { --yc: var(--year-2022); --w: 70; }
.period[id^="p-2021"] { --yc: var(--year-2021); --w: 50; }
.period-title {
  display: flex; align-items: center; gap: 14px; margin: 0 0 14px;
  color: var(--yc); font: 900 30px/1 var(--font-display); font-stretch: calc(var(--w) * 1%); letter-spacing: var(--tracking-display);
}
.period-title::after { content: ""; flex: 1; height: 6px; background: var(--yc); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); opacity: 0.9; }
.query-places .period-title { font-size: 22px; }

.period-nav-list, .cat-nav-list, .related-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.period-nav { margin-top: 24px; }
.period-nav a, .cat-nav-item a, .cat-nav-item.is-current, .related-item .q-link {
  --cut-w: 7px;
  display: inline-flex; align-items: center; gap: 9px; min-height: 34px; padding: 4px 16px;
  background: var(--shale); color: var(--bone); clip-path: var(--cut);
  font-size: 14px; text-decoration: none; transition: background 0.2s;
}
.period-nav a { font: 900 14px/1 var(--font-display); font-stretch: 110%; }
.period-nav a:hover, .cat-nav-item a:hover, .related-item .q-link:hover { background: var(--slate); color: var(--bone); }
.period-nav a:focus-visible, .cat-nav-item a:focus-visible, .related-item .q-link:focus-visible { box-shadow: none; outline: 2px solid var(--aqua); outline-offset: -2px; }
.cat-nav-item a, .cat-nav-item.is-current { padding-inline-start: 0; }
.cat-nav-item a::before, .cat-nav-item.is-current::before { content: ""; align-self: stretch; width: 14px; margin-block: -4px; background: var(--c, var(--bone)); }
.cat-nav-item.is-current { background: var(--cat); color: var(--ink); font-weight: 600; }
.cat-nav-item.is-current::before { background: var(--ink); opacity: 0.25; }
.related-item .q-link { border-inline-start: 0; }

/* ranked lists on a country + category page */
.period-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px 40px; }
.list-title { margin: 0 0 8px; color: var(--silt); font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.list-rising .list-title { color: var(--sulphur); }
.ranklist { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.rank-item {
  counter-increment: rank; position: relative;
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: baseline; gap: 8px;
  padding: 5px 10px 5px 8px; border-bottom: 1px solid rgba(44, 105, 118, 0.4);
}
.rank-item::before {
  content: counter(rank, decimal-leading-zero);
  font: 900 16px/1 var(--font-display); font-stretch: 110%; color: var(--cat); font-variant-numeric: tabular-nums;
}
.rank-item::after { /* the bed */
  content: ""; position: absolute; inset: 1px auto 1px 0; width: calc(var(--v, 0) * 1%);
  background: var(--cat); opacity: 0.13; pointer-events: none;
}
.rank-item .q-link { color: var(--bone); text-decoration: none; min-width: 0; }
.rank-item .q-link:hover { color: var(--cat); text-decoration: underline; }
.rank-item:hover { background: rgba(16, 58, 68, 0.7); }
.val { color: var(--silt); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ranklist-rising .val { color: var(--sulphur); }
.empty { color: var(--silt); font-size: 14px; }
.to-core { margin: 22px 0 0; }
.to-core a { color: var(--aqua); font-weight: 600; }

.notfound { padding: 40px 0; }
.notfound-text { max-width: 50ch; color: var(--silt); font-size: 17px; margin: 18px 0; }
.notfound-home { color: var(--aqua); font-weight: 600; }

.site-footer {
  padding: 22px max(16px, calc((100vw - 1120px) / 2)) 30px; border-top: var(--hairline);
  background: var(--abyss); color: var(--dust); font-size: 13px;
}
.site-footer p { margin: 0 0 4px; max-width: 80ch; }
.site-footer a { color: var(--silt); }

@media (max-width: 640px) {
  .site-header { flex-wrap: wrap; }
  .site-header { gap: 10px 8px; padding-inline: 12px; }
  .site-brand { width: 118px; background-size: 118px auto; }
  .site-nav { margin-inline-start: auto; }
  .site-nav-link { height: 34px; padding: 0 12px; font-size: 11px; font-stretch: 110%; }
  .site-header .search { order: 3; flex: 1 0 100%; max-width: none; }
  .period { scroll-margin-top: 120px; }
  table { font-size: 14px; }
  th, td { padding-inline-end: 8px; }
  .stat { padding-inline-end: 18px; margin-inline-end: 18px; }
  .stat dd { font-size: 24px; }
  .query-head::after, .cell-head::after, .notfound::after { position: static; display: block; width: 52%; height: 40px; margin: 44px 0 0 auto; --slip: 12px; }
  .period-title { font-size: 24px; }
  .period { margin-top: 30px; }
}

/* category colours by id: the page's own, and each link to a sibling category */
body[data-cat="45"] { --cat: var(--cat-45); } body[data-cat="16"] { --cat: var(--cat-16); }
body[data-cat="47"] { --cat: var(--cat-47); } body[data-cat="71"] { --cat: var(--cat-71); }
body[data-cat="18"] { --cat: var(--cat-18); } body[data-cat="12"] { --cat: var(--cat-12); }
body[data-cat="958"] { --cat: var(--cat-958); } body[data-cat="65"] { --cat: var(--cat-65); }
body[data-cat="11"] { --cat: var(--cat-11); } body[data-cat="66"] { --cat: var(--cat-66); }
body[data-cat="7"] { --cat: var(--cat-7); } body[data-cat="20"] { --cat: var(--cat-20); }
body[data-cat="29"] { --cat: var(--cat-29); } body[data-cat="67"] { --cat: var(--cat-67); }
body[data-cat="174"] { --cat: var(--cat-174); } body[data-cat="13"] { --cat: var(--cat-13); }
body[data-cat="5"] { --cat: var(--cat-5); } body[data-cat="533"] { --cat: var(--cat-533); }
body[data-cat="19"] { --cat: var(--cat-19); } body[data-cat="22"] { --cat: var(--cat-22); }
body[data-cat="8"] { --cat: var(--cat-8); } body[data-cat="299"] { --cat: var(--cat-299); }
body[data-cat="3"] { --cat: var(--cat-3); } body[data-cat="44"] { --cat: var(--cat-44); }
body[data-cat="14"] { --cat: var(--cat-14); }
.cat-nav-item a[href$="/45"] { --c: var(--cat-45); } .cat-nav-item a[href$="/16"] { --c: var(--cat-16); }
.cat-nav-item a[href$="/47"] { --c: var(--cat-47); } .cat-nav-item a[href$="/71"] { --c: var(--cat-71); }
.cat-nav-item a[href$="/18"] { --c: var(--cat-18); } .cat-nav-item a[href$="/12"] { --c: var(--cat-12); }
.cat-nav-item a[href$="/958"] { --c: var(--cat-958); } .cat-nav-item a[href$="/65"] { --c: var(--cat-65); }
.cat-nav-item a[href$="/11"] { --c: var(--cat-11); } .cat-nav-item a[href$="/66"] { --c: var(--cat-66); }
.cat-nav-item a[href$="/7"] { --c: var(--cat-7); } .cat-nav-item a[href$="/20"] { --c: var(--cat-20); }
.cat-nav-item a[href$="/29"] { --c: var(--cat-29); } .cat-nav-item a[href$="/67"] { --c: var(--cat-67); }
.cat-nav-item a[href$="/174"] { --c: var(--cat-174); } .cat-nav-item a[href$="/13"] { --c: var(--cat-13); }
.cat-nav-item a[href$="/5"] { --c: var(--cat-5); } .cat-nav-item a[href$="/533"] { --c: var(--cat-533); }
.cat-nav-item a[href$="/19"] { --c: var(--cat-19); } .cat-nav-item a[href$="/22"] { --c: var(--cat-22); }
.cat-nav-item a[href$="/8"] { --c: var(--cat-8); } .cat-nav-item a[href$="/299"] { --c: var(--cat-299); }
.cat-nav-item a[href$="/3"] { --c: var(--cat-3); } .cat-nav-item a[href$="/44"] { --c: var(--cat-44); }
.cat-nav-item a[href$="/14"] { --c: var(--cat-14); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}