@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/spectral-400.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/spectral-400italic.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/spectral-600.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/spectral-700.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/hankengrotesk-variable.woff2') format('woff2'); }

@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/librecaslontext-400.woff2') format('woff2'); }
@font-face { font-family: 'Libre Caslon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/librecaslontext-400italic.woff2') format('woff2'); }
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/librecaslontext-700.woff2') format('woff2'); }
@font-face { font-family: 'Libre Caslon Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/librecaslondisplay-400.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/schibstedgrotesk-variable.woff2') format('woff2'); }

/* Space pair: only referenced by ?type=a */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/spacegrotesk-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/spacemono-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/spacemono-700.woff2') format('woff2'); }

/* Themes E to H (?type=e|f|g|h): loaded only when a theme uses them */
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/alegreya-variable.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/alegreyasans-400.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/alegreyasans-500.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/alegreyasans-700.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans SC'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/alegreyasanssc-400.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans SC'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/alegreyasanssc-500.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans SC'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/alegreyasanssc-700.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/newsreader-variable.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/publicsans-variable.woff2') format('woff2'); }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/librefranklin-variable.woff2') format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/librebaskerville-variable.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('fonts/sourceserif4-variable.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('fonts/sourcesans3-variable.woff2') format('woff2'); }

:root {
  /* Type theme D (default): Spectral for display, text and numbers; Hanken Grotesk for small UI type.
     ?type=c and ?type=a select the themes below (inline script in index.html, before first paint). */
  --font-display: 'Spectral', Georgia, serif;
  --font-text: 'Spectral', Georgia, serif;
  --font-ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: var(--font-ui);             /* numbers and readout text are always the pairing's sans; the serif is for the title sentence only */
  --font-read: var(--font-ui);
  --size-ui: 15px;
  --size-small: 13px;
  --font-label: var(--font-ui);
  --font-strong: var(--font-display);
  --font-country: var(--font-ui);
  --country-case: upper;
  --grot: var(--font-ui);   /* legacy aliases, same roles as before the tokens */
  --mono: var(--font-label);
  --title-weight: 600;
  --title-tracking: -0.012em;
  --title-strong-weight: 700;
  --head-weight: 600;
  --head-tracking: -0.012em;
  --ui-weight: 600;
  --ui-tracking: 0.12em;
  --label-weight: 600;
  --label-tracking: 0.14em;
  --kicker-tracking: 0.15em;
  --meta-weight: 400;
  --meta-tracking: 0.01em;
  --read-size: 16px;
  --about-size: 17px;
  --num-weight: 600;
  --num-tracking: 0em;
  --num-variant: tabular-nums lining-nums;
  --num-feature: "tnum" 1, "lnum" 1;
  --ratio-weight: 600;
  --ratio-tracking: -0.02em;
  --ink: rgb(30, 42, 56);
  --ink-soft: rgb(78, 95, 114);
  --ink-faint: rgb(112, 128, 146);
  --line: rgba(60, 85, 115, 0.26);
  --ground: #e9edf0;
  --halo: rgba(240, 243, 246, 0.95);
  --halo-soft: rgba(240, 243, 246, 0.75);
  --hl: var(--ink-faint);
}

/* Theme C: Libre Caslon Display / Text with Schibsted Grotesk; Caslon's own proportional figures. */
:root[data-type="c"] {
  --font-display: 'Libre Caslon Display', Georgia, serif;
  --font-text: 'Libre Caslon Text', Georgia, serif;
  --font-ui: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-strong: 'Libre Caslon Text', Georgia, serif;
  --title-weight: 400;
  --title-tracking: -0.004em;
  --head-weight: 400;
  --head-tracking: -0.004em;
  --kicker-tracking: 0.14em;
  --num-weight: 500;
  --ratio-weight: 600;
  --ratio-tracking: -0.02em;
}

/* Theme A: the original Space Grotesk / Space Mono pairing. */
:root[data-type="a"] {
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'Space Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --font-label: 'Space Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --title-weight: 500;
  --title-tracking: -0.015em;
  --head-weight: 700;
  --head-tracking: -0.022em;
  --ui-tracking: 0.16em;
  --label-weight: 400;
  --label-tracking: 0.2em;
  --kicker-tracking: 0.28em;
  --meta-tracking: -0.01em;
  --read-size: 15px;
  --about-size: 16.5px;
  --num-weight: 400;
  --num-tracking: -0.01em;
  --num-variant: tabular-nums;
  --num-feature: "tnum" 1;
  --ratio-weight: 700;
  --ratio-tracking: -0.035em;
}

/* Theme E "atlas": Alegreya with Alegreya Sans; country names in Alegreya Sans SC, set in mixed case so
   the lower-case letters become letterspaced small caps. */
:root[data-type="e"] {
  --font-display: 'Alegreya', Georgia, serif;
  --font-text: 'Alegreya', Georgia, serif;
  --font-ui: 'Alegreya Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-country: 'Alegreya Sans SC', 'Alegreya Sans', system-ui, sans-serif;
  --country-case: none;
  --title-weight: 600;
  --title-tracking: -0.005em;
  --title-strong-weight: 800;
  --head-weight: 600;
  --head-tracking: -0.005em;
  --ui-weight: 500;
  --ui-tracking: 0.14em;
  --label-weight: 500;
  --label-tracking: 0.14em;
  --kicker-tracking: 0.16em;
  --read-size: 18px;
  --about-size: 18px;
  --size-ui: 16px;
  --size-small: 14px;
  --num-weight: 500;
  --num-variant: tabular-nums lining-nums;
  --num-feature: "tnum" 1, "lnum" 1;
  --ratio-weight: 700;
  --ratio-tracking: -0.015em;
}

/* Theme F "news": Newsreader with Public Sans; numbers in Public Sans, tabular. */
:root[data-type="f"] {
  --font-display: 'Newsreader', Georgia, serif;
  --font-text: 'Newsreader', Georgia, serif;
  --font-ui: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --title-weight: 500;
  --title-tracking: -0.01em;
  --title-strong-weight: 700;
  --head-weight: 500;
  --head-tracking: -0.01em;
  --ui-weight: 600;
  --ui-tracking: 0.1em;
  --label-weight: 600;
  --label-tracking: 0.1em;
  --kicker-tracking: 0.12em;
  --read-size: 17px;
  --about-size: 17.5px;
  --num-weight: 600;
  --num-variant: tabular-nums;
  --num-feature: "tnum" 1;
  --ratio-weight: 600;
  --ratio-tracking: -0.03em;
}

/* Theme G "franklin": Libre Franklin for the title and UI, Libre Baskerville for body and readout text,
   numbers in Libre Franklin. */
:root[data-type="g"] {
  --font-display: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Libre Baskerville', Georgia, serif;
  --font-ui: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --title-weight: 700;
  --title-tracking: -0.022em;
  --title-strong-weight: 800;
  --head-weight: 700;
  --head-tracking: -0.022em;
  --ui-weight: 600;
  --ui-tracking: 0.12em;
  --label-weight: 600;
  --label-tracking: 0.12em;
  --kicker-tracking: 0.14em;
  --read-size: 15px;
  --about-size: 16px;
  --num-weight: 600;
  --num-variant: tabular-nums;
  --num-feature: "tnum" 1;
  --ratio-weight: 700;
  --ratio-tracking: -0.035em;
}

/* Theme H "source": Source Serif 4 with Source Sans 3. */
:root[data-type="h"] {
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-text: 'Source Serif 4', Georgia, serif;
  --font-ui: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --title-weight: 600;
  --title-tracking: -0.01em;
  --title-strong-weight: 700;
  --head-weight: 600;
  --head-tracking: -0.01em;
  --ui-weight: 600;
  --ui-tracking: 0.12em;
  --label-weight: 600;
  --label-tracking: 0.13em;
  --kicker-tracking: 0.15em;
  --read-size: 16px;
  --about-size: 17px;
  --num-weight: 600;
  --num-variant: tabular-nums lining-nums;
  --num-feature: "tnum" 1, "lnum" 1;
  --ratio-weight: 600;
  --ratio-tracking: -0.02em;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }

.num {
  font-family: var(--font-num);
  font-weight: var(--num-weight);
  font-variant-numeric: var(--num-variant);
  font-feature-settings: var(--num-feature);
  letter-spacing: var(--num-tracking);
}

#app {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(320px, 400px) 1fr;
  grid-template-rows: 1fr auto;
}

/* ---------- Left column ---------- */
#panel, #foot { font-family: var(--font-read); }
#panel {
  grid-column: 1;
  grid-row: 1;
  padding: 30px 28px 16px 32px;
  overflow-y: auto;
  z-index: 2;
}

.controls { display: flex; flex-direction: column; gap: 6px; margin-bottom: 36px; }
.toggle { display: flex; gap: 22px; }
.toggle button {
  font-family: var(--font-label);
  font-weight: var(--label-weight);
  font-size: var(--size-small);
  letter-spacing: var(--ui-tracking);
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 8px 0 6px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.toggle button:hover { color: var(--ink); }
.toggle button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.toggle button:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.kicker {
  margin: 0 0 10px;
  min-height: 1em;
  font-family: var(--font-label);
  font-weight: var(--label-weight);
  font-size: var(--size-small);
  line-height: 1;
  letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
  color: var(--ink-faint);
}

#r-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--title-weight);
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.14;
  letter-spacing: var(--title-tracking);
  text-wrap: balance;
}
#r-title b { font-family: var(--font-strong); font-weight: var(--title-strong-weight); }

.swatch { width: 10px; height: 10px; background: var(--hl); display: inline-block; transition: background 0.25s ease; }
.note { margin: 20px 0 0; max-width: 34ch; font-size: var(--read-size); line-height: 1.45; color: var(--ink-soft); }

/* ---------- Stage ---------- */
#stage {
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
  min-width: 0;
  min-height: 0;
}
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#gl.grabbing { cursor: grabbing; }

#preloader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ground);
  transition: opacity 0.6s ease;
  z-index: 3;
}
#preloader.done { opacity: 0; pointer-events: none; }
#preloader[hidden] { display: none; }
.pre-inner { width: min(280px, 70%); }
#pre-text {
  margin: 0 0 12px;
  font-family: var(--font-label);
  font-weight: var(--label-weight);
  font-size: var(--size-small);
  letter-spacing: var(--ui-tracking);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pre-track { height: 1px; background: var(--line); }
#pre-bar { height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }

#detail {
  position: absolute;
  right: 24px;
  bottom: 20px;
  margin: 0;
  font-family: var(--font-label);
  font-weight: var(--label-weight);
  font-size: var(--size-small);
  letter-spacing: var(--ui-tracking);
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
  pointer-events: none;
}
#detail.on { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ---------- View switch, search, arrows ---------- */
#views {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
#views > * { pointer-events: auto; }
#views .toggle button { text-shadow: 0 0 4px var(--ground), 0 0 9px var(--ground); }
#v-search { position: relative; width: min(260px, 62vw); }
#v-q {
  width: 100%;
  font: inherit;
  font-family: var(--font-ui);
  font-size: var(--size-ui);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
  text-align: center;
  outline: none;
  text-shadow: 0 0 4px var(--ground), 0 0 9px var(--ground);
  transition: border-color 0.2s ease;
}
#v-q::placeholder { color: var(--ink-faint); }
#v-q:focus { border-bottom-color: var(--ink); }
#v-list { position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 4px 0; list-style: none; background: var(--ground); }
#v-list[hidden] { display: none; }
#v-list li { padding: 8px 4px; font-family: var(--font-ui); font-size: var(--size-ui); line-height: 1.2; color: var(--ink-soft); cursor: pointer; text-align: center; }
#v-list li[aria-selected="true"] { color: var(--ink); background: var(--line); }
#v-list li.none { color: var(--ink-faint); cursor: default; }

.v-arrow {
  position: absolute;
  top: 50%;
  width: 56px;
  height: 96px;
  margin-top: -48px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, color 0.2s ease, visibility 0s 0.25s;
}
.v-arrow svg { width: 24px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.5; }
#v-prev { left: 8px; }
#v-next { right: 8px; }
#stage.country .v-arrow { opacity: 1; visibility: visible; transition-delay: 0s; }
#stage.country .v-arrow:hover:not(:disabled) { color: var(--ink); }
#stage.country .v-arrow:disabled { opacity: 0.25; cursor: default; }
.v-arrow:focus-visible { outline: 1px solid var(--ink); outline-offset: -8px; }

@media (max-width: 860px) { .v-arrow { width: 40px; } #v-prev { left: 0; } #v-next { right: 0; } }

/* ---------- Footer ---------- */
#foot {
  grid-column: 1;
  grid-row: 2;
  padding: 12px 28px 22px 32px;
  z-index: 2;
}
#foot p { margin: 0 0 6px; font-size: var(--size-small); line-height: 1.4; color: var(--ink-faint); }
#foot p:last-child { color: var(--ink-soft); margin-bottom: 0; }

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; }
  #panel { grid-column: 1; grid-row: 1; padding: 16px 16px 4px; overflow: visible; }
  #stage { grid-column: 1; grid-row: 2; }
  #foot { grid-column: 1; grid-row: 3; padding: 8px 16px 14px; }
  .controls { flex-direction: row; flex-wrap: wrap; gap: 0 20px; margin-bottom: 14px; }
  .toggle { gap: 16px; }
  .kicker { margin-bottom: 6px; }
  #r-title { font-size: 20px; }
  .note { margin-top: 10px; font-size: 14px; max-width: none; }
  #foot p { display: inline; }
  #foot p::after { content: ' '; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}