@font-face {
    font-family: 'Old London';
    src: url('fonts/custom/Old%20London.ttf') format('truetype');
    font-display: swap;
  }

  :root {
    /* The Index branding palette + OWID house tones */
    --paper:        #F9F8F3;
    --paper-deep:   #F1EDE0;
    --ink:          #1D1D1D;
    --ink-soft:     #2c2a26;
    --muted:        #776B63;
    --rule:         #1D1D1D;
    --rule-soft:    #d8d2c2;
    --wine:         #480003;
    --brown:        #57372A;
    --gray-warm:    #776B63;
    --black:        #000000;

    /* categorical chart palette — uses the new branding tones first */
    --c1: #480003;  /* wine */
    --c2: #57372A;  /* brown */
    --c3: #776B63;  /* warm gray */
    --c4: #2a6f97;  /* quiet blue */
    --c5: #b8893a;  /* gold */
    --c6: #1D1D1D;  /* charcoal */
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Lato', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image:
      radial-gradient(circle at 17% 22%, rgba(29,29,29,0.025) 1px, transparent 2px),
      radial-gradient(circle at 63% 78%, rgba(29,29,29,0.020) 1px, transparent 2px);
    background-size: 320px 320px, 280px 280px;
    pointer-events: none;
    z-index: 0;
  }

  .page {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 32px 100px;
  }

  /* ─────────────  TOP BAR  ───────────── */
  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ink);
  }
  .topbar a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted); }
  .topbar a:hover { color: var(--wine); border-bottom-color: var(--wine); }

  /* ─────────────  MASTHEAD  ───────────── */
  .masthead { text-align: center; padding: 18px 0 12px; border-bottom: 3px double var(--ink); }
  .masthead-title {
    font-family: 'Old London', serif;
    font-size: clamp(48px, 8.5vw, 96px);
    line-height: 0.95;
    color: var(--ink);
  }
  .masthead-meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .masthead-meta .center {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
  }

  /* ─────────────  PAGE HEADER  ───────────── */
  .pageheader { max-width: 880px; margin: 56px auto 32px; }
  .kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--wine); margin-bottom: 14px;
  }
  .kicker::before { content: ''; width: 32px; height: 1px; background: var(--wine); }
  h1.headline {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.012em;
    margin-bottom: 14px;
  }
  .standfirst {
    font-family: 'Source Serif 4', Georgia, serif;
    font-style: italic;
    font-size: clamp(18px, 1.8vw, 21px);
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 660px;
  }

  /* ─────────────  CHART CARD  ───────────── */
  .chart {
    margin: 56px 0;
    padding: 22px 24px 18px;
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: 4px 4px 0 var(--paper-deep);
  }
  .chart-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--wine);
    margin-bottom: 6px;
  }
  .chart-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.18;
    color: var(--ink);
  }
  .chart-sub {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: var(--muted);
    margin-top: 4px;
    margin-bottom: 14px;
  }

  /* tab strip — Chart / Table */
  .tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: 12px;
  }
  .tab {
    padding: 6px 14px;
    background: transparent;
    border: none;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.12s, border-color 0.12s;
  }
  .tab:hover { color: var(--ink); }
  .tab.active { color: var(--wine); border-bottom-color: var(--wine); }

  /* controls row (toggles, sliders, play) */
  .controls {
    display: flex; flex-wrap: wrap; gap: 12px 18px;
    align-items: center;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--rule-soft);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted);
  }
  .ctl-label { color: var(--muted); margin-right: 6px; }
  .toggle-group { display: inline-flex; border: 1px solid var(--ink); }
  .toggle-group button {
    background: transparent; border: none; padding: 5px 12px;
    font-family: inherit; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink); cursor: pointer;
    border-right: 1px solid var(--ink);
  }
  .toggle-group button:last-child { border-right: none; }
  .toggle-group button.active { background: var(--ink); color: var(--paper); }
  .toggle-group button:hover:not(.active) { background: var(--paper-deep); }

  .slider-wrap { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 240px; }
  .slider-wrap input[type=range] {
    flex: 1;
    -webkit-appearance: none; appearance: none;
    height: 2px;
    background: var(--ink);
    outline: none;
  }
  .slider-wrap input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    background: var(--wine);
    border: 2px solid var(--paper);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--ink);
  }
  .slider-wrap input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px;
    background: var(--wine);
    border: 2px solid var(--paper);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--ink);
  }
  .slider-wrap .year-readout {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    color: var(--wine);
    min-width: 56px;
    text-align: right;
    letter-spacing: 0;
    text-transform: none;
  }

  .play-btn {
    width: 30px; height: 30px;
    border: 1px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    font-family: inherit; font-size: 12px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s;
  }
  .play-btn:hover { background: var(--ink); color: var(--paper); }
  .play-btn.playing { background: var(--wine); color: var(--paper); border-color: var(--wine); }

  /* legend */
  .legend {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    margin: 8px 0 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .legend-item { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
  .legend-item .swatch { width: 12px; height: 12px; display: inline-block; border: 1px solid var(--ink); }
  .legend-item.muted { opacity: 0.35; }
  .legend-item:hover { color: var(--wine); }

  /* SVG common */
  .chart-svg { display: block; width: 100%; height: auto; cursor: crosshair; }
  .ax-line  { stroke: var(--ink); stroke-width: 1; }
  .grid-line { stroke: rgba(29,29,29,0.10); stroke-width: 1; }
  .ax-text  {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    fill: var(--muted);
    letter-spacing: 0.04em;
  }
  .ax-text.bigger { font-size: 11px; fill: var(--ink-soft); }
  .label-text {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    fill: var(--ink);
    font-weight: 700;
  }
  .annot-text {
    font-family: 'Source Serif 4', Georgia, serif;
    font-style: italic;
    font-size: 12px;
    fill: var(--ink-soft);
  }
  .series-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
  .series-line.dim { opacity: 0.18; }
  .series-area { opacity: 0.85; }

  /* tooltip */
  .tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    padding: 8px 12px;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    color: var(--ink);
    transform: translate(-50%, calc(-100% - 12px));
    transition: opacity 0.08s;
    z-index: 50;
    min-width: 140px;
  }
  .tooltip-year {
    font-family: 'Playfair Display', serif;
    font-weight: 700; font-style: italic;
    font-size: 14px;
    color: var(--wine);
    margin-bottom: 4px;
    border-bottom: 1px solid var(--rule-soft);
    padding-bottom: 4px;
  }
  .tooltip-row { display: flex; justify-content: space-between; gap: 14px; padding: 1px 0; }
  .tooltip-row .name { color: var(--ink-soft); }
  .tooltip-row .val  { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; color: var(--ink); }
  .tooltip-row .swatch { width: 8px; height: 8px; display: inline-block; margin-right: 6px; vertical-align: 1px; }
  .tooltip.hidden { opacity: 0; }

  /* hover guide line */
  .hover-guide { stroke: var(--ink); stroke-width: 0.6; stroke-dasharray: 2 3; pointer-events: none; }
  .hover-dot   { fill: var(--paper); stroke-width: 2; pointer-events: none; }

  /* source */
  .chart-source {
    margin-top: 12px; padding-top: 8px;
    border-top: 1px solid var(--rule-soft);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted);
  }
  .chart-source .pub { color: var(--ink); font-weight: 700; letter-spacing: 0.22em; }

  /* table view */
  .table-view { display: none; max-height: 360px; overflow: auto; margin-top: 10px; }
  .table-view.active { display: block; }
  .chart-area.hidden { display: none; }
  .table-view table { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; }
  .table-view th, .table-view td {
    text-align: left; padding: 5px 10px; border-bottom: 1px solid var(--rule-soft);
  }
  .table-view th {
    font-weight: 700; color: var(--ink);
    letter-spacing: 0.14em; text-transform: uppercase;
    font-size: 10px;
    background: var(--paper-deep);
    position: sticky; top: 0;
  }
  .table-view td.num { font-variant-numeric: tabular-nums; color: var(--ink-soft); text-align: right; }

  /* color-grid map */
  .map-grid { display: grid; gap: 2px; }
  .map-cell {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    color: var(--paper);
    cursor: pointer;
    transition: transform 0.08s;
  }
  .map-cell:hover { transform: scale(1.06); z-index: 2; outline: 1.5px solid var(--ink); }
  .map-cell.no-data { background: var(--paper-deep); color: var(--muted); cursor: default; }
  .map-legend {
    display: flex; align-items: center; gap: 6px;
    margin-top: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted);
  }
  .map-legend .ramp {
    flex: 0 0 220px; height: 14px;
    background: linear-gradient(to right, #f1ede0, #c4a896, #8e6557, #5d2f25, #480003);
    border: 1px solid var(--ink);
  }

  /* footer */
  .page-foot {
    margin-top: 64px; padding-top: 16px;
    border-top: 3px double var(--ink);
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--muted);
  }

  @media (max-width: 720px) {
    .page { padding: 16px 14px 80px; }
    .chart { padding: 14px 14px 12px; margin: 32px -4px; }
    .tabs { overflow-x: auto; }
    .controls { flex-direction: column; align-items: stretch; gap: 12px; }
    .slider-wrap { width: 100%; }
  }