:root {
  /* Sampled from the logo: ink #12182A, blue #0060FF, green #06EA96.
     Neutrals are tinted toward the ink rather than pure grey, so the whole page
     reads as one family with the mark instead of sitting next to it. */
  --paper:        #F7F8FB;
  --surface:      #FFFFFF;
  --surface-2:    #EEF1F7;
  --ink:          #12182A;
  --ink-2:        #454C60;
  --ink-3:        #6B7285;
  --rule:         #DCE1EB;
  --rule-soft:    #E8ECF4;
  --accent:       #0060FF;
  --accent-soft:  rgba(0, 96, 255, 0.09);
  /* The logo's rising arrow is literally the "climbing" colour. Darkened for
     contrast against white — #06EA96 as-is fails AA on a light background. */
  --up:           #05875A;
  --up-soft:      rgba(6, 234, 150, 0.16);
  --down:         #C2313A;
  --down-soft:    rgba(194, 49, 58, 0.10);
  --flat:         #6B7285;
  --shadow:       0 1px 2px rgba(16,17,20,.05), 0 10px 30px -18px rgba(16,17,20,.28);

  --serif: "Iowan Old Style", "Hoefler Text", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Grounds derived from the logo's ink rather than neutral black, so the
       navy in the mark reads as intentional against the page. */
    --paper:       #0A0E18;
    --surface:     #12182A;
    --surface-2:   #1A2136;
    --ink:         #E8EBF2;
    --ink-2:       #A5ADC0;
    --ink-3:       #7A85A0;
    --rule:        #253050;
    --rule-soft:   #1B2438;
    --accent:      #4D91FF;
    --accent-soft: rgba(77, 145, 255, 0.15);
    /* On dark, the logo green needs no darkening — it is already legible. */
    --up:          #06EA96;
    --up-soft:     rgba(6, 234, 150, 0.14);
    --down:        #FF6B72;
    --down-soft:   rgba(255, 107, 114, 0.14);
    --flat:        #818AA0;
    --shadow:      0 1px 2px rgba(0,0,0,.5), 0 12px 32px -20px rgba(0,0,0,.8);
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* Visually hidden but read aloud — movement badges pair every arrow with words. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .11em;
  font-weight: 600; color: var(--ink-3);
}

/* ---------- masthead ---------- */

.masthead { border-bottom: 1px solid var(--rule); background: var(--surface); }
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px 20px; max-width: 1080px; margin: 0 auto; flex-wrap: wrap;
}
/* Logo lockup: the brand mark beside live text.
   The supplied artwork is a vertical lockup — mark above wordmark — which would
   make the header three times taller than it needs to be. Laying the same two
   elements out horizontally keeps the header compact, and keeping the wordmark as
   real text means it stays crisp at any zoom and is readable to search engines. */
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.wordmark picture, .wordmark img { width: 38px; height: 38px; display: block; }
.wordmark .word {
  font-size: 25px; font-weight: 800; letter-spacing: -.025em;
  /* The artwork's wordmark is a heavy geometric sans, not a serif — match it. */
  font-family: var(--sans); color: var(--ink);
}
.wordmark .word em { font-style: normal; color: var(--accent); }
.tagline { font-size: 12.5px; color: var(--ink-3); margin-top: -2px; }

nav.primary { display: flex; gap: 4px; flex-wrap: wrap; }
nav.primary a {
  font-size: 13px; font-weight: 500; text-decoration: none; color: var(--ink-2);
  padding: 6px 11px; border-radius: 999px;
}
nav.primary a:hover { background: var(--surface-2); color: var(--ink); }
nav.primary a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

/* ---------- section furniture ---------- */

section { margin: 40px 0; }
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-bottom: 14px; flex-wrap: wrap;
}
h1 {
  font-family: var(--serif); font-size: 34px; font-weight: 700; margin: 0 0 6px;
  letter-spacing: -.02em; text-wrap: balance;
}
h2 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 0; }
.sub { color: var(--ink-3); font-size: 13.5px; margin: 0; }

.panel {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; box-shadow: var(--shadow); overflow: hidden;
}

/* ---------- chart table ---------- */

.chart-scroll { overflow-x: auto; }
table.chart { width: 100%; border-collapse: collapse; min-width: 560px; }
table.chart thead th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .11em;
  font-weight: 600; color: var(--ink-3); text-align: left;
  padding: 11px 14px; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
table.chart td { padding: 10px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
table.chart tbody tr:last-child td { border-bottom: 0; }
table.chart tbody tr:hover td { background: var(--surface-2); }
td.r, th.r { text-align: right; }

/* The hero: a column of big tabular numerals. */
.pos {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 600; letter-spacing: -.03em;
  width: 62px; text-align: right; color: var(--ink);
}
.pos-1 { color: var(--accent); }

.cover {
  width: 42px; height: 42px; border-radius: 5px; display: block;
  background: var(--surface-2); object-fit: cover;
}
.title { font-weight: 600; text-decoration: none; }
.title:hover { color: var(--accent); text-decoration: underline; }
.artist { font-size: 12.5px; color: var(--ink-3); }

/* Movement: arrow AND signed number, never colour alone. */
.move {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.move-up   { color: var(--up);   background: var(--up-soft); }
.move-down { color: var(--down); background: var(--down-soft); }
.move-flat { color: var(--flat); background: var(--surface-2); }
.move-new  { color: var(--accent); background: var(--accent-soft); }

.meta { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ink-3); }

/* ---------- stat tiles ---------- */

.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--rule-soft);
  border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
}
.tile { background: var(--surface); padding: 14px 16px; }
.tile-val {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 23px; letter-spacing: -.02em; margin-top: 3px;
}

/* ---------- movers ---------- */

.movers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.mover-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
  align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--rule-soft);
}
.mover-row:last-child { border-bottom: 0; }
.mover-arc { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-3); }

/* ---------- sparkline ---------- */

.spark { display: block; width: 100%; height: 120px; }
.spark-caption { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* ---------- subscribe ---------- */

.subscribe {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  padding: 24px; box-shadow: var(--shadow);
}
.subscribe h2 { margin-bottom: 4px; }
.subscribe-form { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.subscribe input[type="email"] {
  flex: 1 1 240px; min-width: 0; font: inherit; font-size: 14.5px;
  padding: 10px 13px; border: 1px solid var(--rule); border-radius: 7px;
  background: var(--paper); color: var(--ink);
}
.subscribe button {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 10px 20px; border: 0; border-radius: 7px;
  background: var(--accent); color: #fff;
}
.subscribe button:hover { filter: brightness(1.08); }
.note { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }
.flash { padding: 10px 13px; border-radius: 7px; font-size: 13.5px; margin-top: 12px; }
.flash-ok  { background: var(--up-soft);   color: var(--up); }
.flash-err { background: var(--down-soft); color: var(--down); }

/* ---------- boards grid ---------- */

.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.board-card {
  display: block; text-decoration: none; padding: 13px 15px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 9px;
}
.board-card:hover { border-color: var(--accent); }
.board-card .name { font-weight: 600; font-size: 14.5px; }
/* Two short lines rather than one that wraps mid-date. */
.board-card .meta { display: block; white-space: nowrap; }
.board-card .meta + .meta { margin-top: 1px; }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--rule); margin-top: 56px; padding: 26px 0 44px;
  font-size: 12.5px; color: var(--ink-3);
}
footer a { color: var(--ink-2); }
.attrib { margin-top: 8px; max-width: 62ch; }

/* ---------- prose ---------- */

.prose { max-width: 66ch; }
.prose p { margin: 0 0 14px; }
.prose h2 { margin: 26px 0 8px; }
.prose ul { padding-left: 20px; margin: 0 0 14px; }
.prose li { margin-bottom: 5px; }
.prose code {
  font-family: var(--mono); font-size: 13px;
  background: var(--surface-2); padding: 1px 5px; border-radius: 4px;
}

@media (max-width: 640px) {
  h1 { font-size: 27px; }
  .pos { font-size: 18px; width: 48px; }
  .hide-sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}