/* ══════════════════════════════════════════════════════════════════════════
   Sort Finance — the Classical design, whole: tokens, base elements and
   page layout in one sheet. This is the site's only stylesheet.

   Type is three voices: Cormorant Garamond displays, Lora sets the prose,
   Inter carries the interface. The ground is a soft near-white and structure
   is carried by hairline rules rather than fills, shadows or heavy radii.
   The accent ramp is the logo's — deep navy #112D4E, steel #3F72AF,
   mist #DBE2EF.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── type ─────────────────────────────────────────────────────────────── */
  /* Three faces, each with one job. Cormorant Garamond displays — the site's
     elegance lives in its headings. Lora sets the prose, where a serif still
     reads best at length. Inter takes everything that is interface rather
     than argument: labels, controls, captions, chart furniture and any number
     small enough that a serif's thin strokes start to disappear. The mix is
     what keeps the page from reading as a facsimile of a printed book. */
  --font-heading: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono: "SFMono-Regular", Menlo, Consolas, monospace;
  --font-heading-weight: 600;
  --font-body-weight: 400;
  /* Uppercase micro-labels, all set in the sans. A grotesque opens up with
     less tracking than a serif does at the same size, and holding one value
     keeps every label on the page in step. */
  --tracking-label: 0.09em;

  /* ── ground + ink ─────────────────────────────────────────────────────── */
  --color-bg: #faf9f5;
  --color-text: #201f1d;
  --color-text-muted: #67635b;
  /* structure is a hairline, never a fill */
  --color-divider: #e2ddd3;

  /* ── neutrals: warm greys tuned to the ink ────────────────────────────── */
  --color-neutral-50: #f7f5f1;
  --color-neutral-100: #efede7;
  --color-neutral-200: #e2dfd8;
  --color-neutral-300: #cfcbc2;
  --color-neutral-400: #b0aba1;
  --color-neutral-500: #8a857b;
  --color-neutral-600: #67635b;
  --color-neutral-700: #4a4741;
  --color-neutral-800: #33302b;
  --color-neutral-900: #201f1d;

  /* ── accent: taken from the logo — mist through steel to deep navy ────── */
  --color-accent: #3F72AF;
  --color-accent-100: #e6edf6;
  --color-accent-200: #c9d9ec;
  --color-accent-300: #a5c0dd;
  --color-accent-400: #7ba1c9;
  --color-accent-500: #3F72AF;
  --color-accent-600: #33608f;
  --color-accent-700: #234b74;
  --color-accent-800: #16375a;
  --color-accent-900: #112D4E;

  /* ── space: a 4px base step ───────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* ── the page's column ────────────────────────────────────────────────
     Header, content and footer are all held to this one width, so the rules
     above and below the page line up with the text between them. Prose keeps
     its own measure in ch — a wider page gives the charts and the strategy
     grid more room without stretching a line of reading past comfort. */
  --page-width: 1280px;

  /* ── radius: barely there ─────────────────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}

/* ── base elements ──────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  font-size: 16px;
  line-height: 1.68;
  /* Let the faces do what they were drawn to do: optical sizes on the display
     face, kerning pairs and the standard ligatures everywhere. */
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--color-accent-100); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-wrap: balance;
}
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
dl { margin: 0 0 var(--space-4); }
dd { margin: 0 0 var(--space-2); }

a {
  color: var(--color-accent-700);
  text-decoration: none; text-underline-offset: 2px;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
a:hover { color: var(--color-accent-800); border-bottom-color: var(--color-accent); }

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

strong, b { font-weight: 600; }
small { font-size: 0.85em; color: var(--color-neutral-600); }

hr {
  border: 0; border-top: 1px solid var(--color-divider);
  margin: var(--space-6) 0;
}

blockquote {
  margin: var(--space-4) 0; padding-left: var(--space-4);
  border-left: 1px solid var(--color-accent);
  font-style: italic; color: var(--color-text-muted);
}

code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.88em; }
pre {
  overflow-x: auto; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: transparent;
}

img, svg, video { max-width: 100%; }

table {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
}
th, td {
  padding: var(--space-2) var(--space-3); text-align: left;
  border-bottom: 1px solid var(--color-divider);
}
th {
  font-family: var(--font-ui); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--color-neutral-600);
}

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

/* ── header bar (the system's .nav pattern) ─────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-bg);
  position: sticky; top: 0; z-index: 20;
}
.nav-inner {
  max-width: var(--page-width); margin: 0 auto;
  padding: var(--space-2) var(--space-8);
  display: flex; align-items: center;
}
.site-logo { display: inline-flex; align-items: center; height: 32px; flex: 0 0 auto; }
.site-logo svg { height: 32px; width: auto; display: block; }
.site-logo svg .st0 { fill: #DBE2EF !important; }
.site-logo svg .st1, .site-logo svg .st2 { fill: #112D4E !important; }

.site-nav { display: flex; gap: var(--space-4); margin-left: auto; align-items: center; }
.site-nav a {
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  color: var(--color-text); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--color-accent-700); border-bottom-color: var(--color-accent); }

.nav-search {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: 5px 10px;
}
.nav-search:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.nav-search:focus-within { border-color: var(--color-accent); }
.nav-search svg { width: 15px; height: 15px; color: var(--color-neutral-600); stroke-width: 1.5; }
.nav-search input {
  border: 0; background: transparent; outline: none; width: 150px;
  font-family: var(--font-ui); font-size: 14px; color: var(--color-text);
  caret-color: var(--color-accent);
}
.nav-search input::placeholder { color: var(--color-neutral-500); }

/* ── the page ──────────────────────────────────────────────────────────── */
.content {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-8) calc(var(--space-8) * 2);
}

/* masthead: flush-left display heading over a hairline, as the system asks */
h1 {
  /* fluid: the masthead grows with the window rather than stepping down once
     at a breakpoint, so the line never sits at an awkward in-between size */
  font-size: clamp(38px, 6.4vw, 60px);
  font-weight: 400;                       /* display sizes take the lighter cut */
  line-height: 1.04; letter-spacing: -0.022em;
  margin: var(--space-4) 0 var(--space-3);
  text-wrap: balance; max-width: 26ch;
}
.strategy-description {
  font-size: 17px; max-width: 62ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
h1 + .strategy-description {
  font-style: italic; font-size: 19px; line-height: 1.5;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
  margin: 0 0 var(--space-4);
}

h2 {
  font-size: clamp(26px, 3.4vw, 32px);
  font-weight: var(--font-heading-weight); letter-spacing: -0.015em;
  margin: calc(var(--space-8) * 1.3) 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.content h3 {
  font-family: var(--font-ui); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--color-accent-700);
  margin: var(--space-6) 0 var(--space-3);
  display: flex; align-items: center; gap: var(--space-3);
}
.content h3::after { content: ""; height: 1px; background: var(--color-divider); flex: 1 1 auto; }

/* ── score line: the dataset heading and its composite score, one row ────── */
h2.score-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
}
.sh-title { flex: 1 1 auto; }
.sh-score {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-heading); flex: 0 0 auto;
  padding-bottom: 3px;
}
.sh-num {
  font-size: 44px; font-weight: 400; line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-accent-700);
}
.sh-den {
  /* Cormorant's default figures are old-style, which sets "100" as three
     different heights next to a 44px lining "72" — the denominator has to ask
     for the same lining cut the numerator is drawn in. */
  font-size: 19px; font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-neutral-600);
}
.sh-cap {
  font-family: var(--font-ui); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--color-neutral-600); margin-left: var(--space-2);
  align-self: center;
}

/* ── prose: how it works, formulas ─────────────────────────────────────── */
.strategy-steps {
  counter-reset: step; list-style: none; padding: 0;
  margin: 0 0 var(--space-4); max-width: 76ch;
}
.strategy-steps li {
  counter-increment: step; position: relative;
  padding: var(--space-2) 0 var(--space-3) 44px;
  border-bottom: 1px solid var(--color-divider);
  text-align: justify; hyphens: auto;
}
.strategy-steps li:last-child { border-bottom: 0; }
.strategy-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: calc(var(--space-2) + 2px);
  font-family: var(--font-heading); font-size: 19px; font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-accent);
}

.worked-example {
  max-width: 76ch; margin: var(--space-4) 0;
  padding: var(--space-4) 0 var(--space-4) var(--space-4);
  border-left: 1px solid var(--color-accent);
  font-style: italic; font-size: 15px;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.worked-example b {
  font-style: normal; font-weight: 500;
  font-variant: small-caps; letter-spacing: 0.05em;
  color: var(--color-text);
}

.formulas { margin: var(--space-4) 0 0; }
.formulas dt {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 21px; margin: var(--space-6) 0 var(--space-1);
}
.formula-desc {
  margin: 0 0 var(--space-2); max-width: 76ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.formula-desc b {
  font-weight: 500; font-variant: small-caps; letter-spacing: 0.05em;
  color: var(--color-text);
}
/* LaTeX set in KaTeX's Computer Modern — the classic math face */
.formula-tex {
  display: block; overflow-x: auto;
  padding: var(--space-2) 0 var(--space-3); margin: 0 0 var(--space-2);
  color: var(--color-text);
}
.formula-tex .katex { font-size: 1.24em; }
.formula-tex .katex-display { margin: 0; text-align: left; }
.formula-tex .katex-display > .katex { text-align: left; }

/* ── figures: bordered, unfilled surfaces (the system's .card treatment) ── */
.figure {
  position: relative;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  /* the deeper top edge is the full-screen button's own band, so the one
     control on a card sits above the chart rather than on it */
  padding: var(--space-3); padding-top: var(--space-7);
  margin: 0 0 var(--space-3);
  background: transparent;
}
.figure-scroll {
  /* charts arrive at a fixed size, so on a window too narrow to hold one the
     card itself is the viewport it pans in — no script decides this */
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--color-neutral-400) transparent;
}
/* Plotly nests the graph div in a wrapper carrying the figure's width; centre
   it, and a chart narrower than its card sits in the middle. Auto margins
   collapse to zero when it overflows, so the panning case is unaffected. */
.figure-scroll > div { margin: 0 auto; }
.figure-scroll > div > .plotly-graph-div { margin: 0 auto; }

.figure-scroll::-webkit-scrollbar { height: 11px; }
.figure-scroll::-webkit-scrollbar-track { background: var(--color-neutral-100); }
.figure-scroll::-webkit-scrollbar-thumb {
  background: var(--color-neutral-400); border-radius: var(--radius-sm);
}
.figure-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* ── the full-screen button ─────────────────────────────────────────────
   Always on the card, never hover-only: a control that has to be discovered
   by pointing at the chart is a control most readers never find. It keeps its
   corner in the overlay, where it reads as "close". */
.figure-expand {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  /* the mark alone, on the card's own ground: at 28px a ring around a glyph
     this small reads as a second, competing edge next to the card's. What the
     hover paints is a square, like the mark it sits behind — barely rounded,
     the way every other corner on the site is. */
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-neutral-600);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.figure-expand:hover {
  color: var(--color-accent-800); background: var(--color-accent-100);
}
.figure-expand .icon-collapse { display: none; }
.figure.is-full .figure-expand .icon-expand { display: none; }
.figure.is-full .figure-expand .icon-collapse { display: block; }

/* ── a figure as a modal overlay ────────────────────────────────────────
   The card itself is lifted over the page — the chart keeps its Plotly
   instance, so nothing is redrawn from scratch. The page stays faintly
   visible through the ground, blurred so it reads as depth and never as
   content. That ground is the modal's backdrop: clicking it, or Escape, or
   the button closes. */
.figure.is-full {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  margin: 0; padding: var(--space-5);
  border: 0; border-radius: 0;
  /* the ground is the page's own near-white, with barely enough left of the
     page underneath to say the overlay is sitting over something */
  background: rgba(250, 249, 245, 0.985);
}
/* The box the chart is drawn into, and the viewport it is panned in when the
   chart is larger than the screen — which a grid of two dozen panels is, by
   design. The sizes themselves are the script's: it writes them onto the
   chart and onto the wrapper Plotly puts around it, which carries the
   generated size inline and would otherwise crop what it holds. */
.figure.is-full .figure-scroll {
  flex: 1; min-width: 0; min-height: 0;
  overflow: auto;
  /* reaching the edge of a big grid must not start scrolling the page under it */
  overscroll-behavior: contain;
}
/* The auto margins that centre a chart in its card would fight the panning.
   Not the heading bands, though: they earn their place in the flow back with
   a negative margin, which this would flatten. */
.figure.is-full .figure-scroll > div:not([class^="figure-freeze"]),
.figure.is-full .plotly-graph-div { margin: 0 !important; }

/* ── headings that stay against the edges of a scrolled grid ────────────
   Two boxes of no size, pinned to one edge each and free along the other,
   holding copies of the labels the chart drew. Free of size and of pointer
   events, they change nothing about the chart underneath: at rest each copy
   sits exactly where the original was, and the original is what is hidden. */
.figure-freeze-top, .figure-freeze-left {
  /* solid ground the length of the chart, sized and placed by the script:
     the panels pass under it rather than around it, so a heading is never
     read against the lines of the chart it is labelling */
  position: sticky; z-index: 3; pointer-events: none;
  background: var(--color-bg);
}
.figure-freeze-top { top: 0; }
.figure-freeze-left { left: 0; }
.figure-freeze-key-layer {
  position: sticky; width: 0; height: 0; z-index: 4; pointer-events: none;
}
/* the key is stuck to both edges: it belongs to every panel, not to a row or
   a column, so no amount of scrolling should take it off the screen */
.figure-freeze-key-layer { top: 0; left: 0; }
.figure-freeze-key {
  position: absolute; display: block;
  padding: 2px 8px; border-radius: var(--radius-sm);
  background: var(--color-bg);
  /* the layer it hangs in takes no pointer, but this copy is the only key on
     the screen — a name in it has to be clickable the way the original is */
  pointer-events: auto; cursor: pointer;
}
/* the layer it hangs in has no width, and the sheet's blanket max-width would
   read that as the limit and collapse the copy to nothing */
.figure-freeze-key svg { display: block; max-width: none; }
/* the band is the ground; a heading needs nothing of its own */
.figure-freeze-label {
  position: absolute; white-space: nowrap;
  transform: translate(-50%, -50%);
  color: var(--color-text);
  font-family: var(--font-ui); line-height: 1.2;
}
.figure-freeze-label.is-rotated { transform: translate(-50%, -50%) rotate(-90deg); }
/* Plotly numbers an axis title after its axis — ytitle, y5title, y9title —
   so the originals are hidden by shape, the same way they were gathered.
   Scoped twice over: to the chart, since the copies sit outside it, and to
   the layer the chart's own furniture is drawn in — a unified hover label is
   also a g.legend, and hiding that is hiding the tooltip. */
.figure.is-frozen .plotly-graph-div .infolayer text.annotation-text,
.figure.is-frozen .plotly-graph-div .infolayer text[class$="title"],
.figure.is-frozen .plotly-graph-div .infolayer > g.legend { display: none; }
.figure.is-full .figure-expand { top: var(--space-3); right: var(--space-3); }

/* ── the overlay's header ───────────────────────────────────────────────
   On the page the headings around a card already name the chart, so this is
   dead weight there and appears only once the card is on its own. The right
   margin is the close button's seat. */
.figure-head { display: none; }
.figure.is-full .figure-head {
  display: block; flex: none;
  padding: 0 var(--space-7) var(--space-3) 0;
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
/* scoped past .content h3, which turns every heading in the column into the
   site's small-caps section label — a title standing on its own reads as one */
.figure-head .figure-title {
  display: block; margin: 0;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: 1.2; letter-spacing: -0.01em;
  text-transform: none; color: var(--color-text);
}
.figure-head .figure-title::after { content: none; }
.figure-head .figure-subtitle {
  margin: 2px 0 0;
  /* set with the chart's own labels — the metric names down the side of the
     grid and the timeframes across it, which the overlay draws at 13px
     (FULL_TYPE_SIZE in figures.js) */
  font-family: var(--font-ui); font-size: 13px; line-height: 1.5;
  color: var(--color-text-muted);
}
/* the page behind the overlay holds still instead of scrolling under it */
.figure-open, .figure-open body { overflow: hidden; }

@media (max-width: 820px) {
  .content { padding: var(--space-6) var(--space-4) var(--space-8); }
  .nav-inner { padding: var(--space-2) var(--space-4); }
  .site-logo, .site-logo svg { height: 26px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHARE ROW
   ══════════════════════════════════════════════════════════════════════════ */
/* A row of hairline chips at the foot of a strategy page. Same treatment as
   every other control on the site: no fill at rest, the border and the ink
   move to the accent on hover, and the icon inherits the text's colour so
   the two never disagree. */
.share-list {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  list-style: none; margin: 0; padding: 0;
}
.share-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 7px var(--space-3);
  border: 1px solid var(--color-divider); border-radius: var(--radius-sm);
  background: none; color: var(--color-text); text-decoration: none;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  /* One of these chips is a <button>, which takes no line-height from the
     body the way the anchors beside it do — left alone it sets its label on a
     shorter line and stands a few pixels lower than the rest of the row. The
     row is sized here instead: every chip is one 15px line tall, the height
     of the icon in it, whether or not it has one. */
  line-height: 15px; margin: 0;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.share-link:hover { color: var(--color-accent-700); border-color: var(--color-accent); }
.share-link svg { display: block; flex: 0 0 auto; }
/* the chips are links, so undo the underline the base <a> rule paints */
a.share-link { border-bottom: 1px solid var(--color-divider); }
a.share-link:hover { border-bottom-color: var(--color-accent); }
/* the copy button holds its confirmation until the script puts the label back */
.share-copy.is-copied { color: var(--color-accent-700); border-color: var(--color-accent); }
.share-copy-label { min-width: 8ch; text-align: left; }

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.hero { padding: calc(var(--space-8) * 1.2) 0 var(--space-8); }
.eyebrow {
  font-family: var(--font-ui); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--color-accent-700); margin: 0 0 var(--space-3);
}
.hero h1 { max-width: 30ch; margin: 0; }

.strategy-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0; border-top: 1px solid var(--color-divider);
}
.strat-col {
  padding: var(--space-4) var(--space-4) var(--space-6);
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.strat-col:last-child { border-right: 0; }
.strat-col h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 21px; letter-spacing: -0.01em; margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
}
.strat-col h3::after {
  content: attr(data-count);
  /* this pseudo carries the count, not the trailing hairline .content h3::after
     draws — undo that rule's 1px painted box, which otherwise renders as a
     line sitting directly on top of the text */
  height: auto; background: none;
  font-family: var(--font-ui); font-weight: 500; font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--color-neutral-600); flex: 0 0 auto;
}
.strat-col ol { counter-reset: s; list-style: none; margin: 0; padding: 0; }
.strat-col ol li { counter-increment: s; display: flex; gap: var(--space-2); padding: 5px 0; }
.strat-col ol li::before {
  content: counter(s, decimal-leading-zero);
  /* small enough that the display face's hairlines break up: the sans holds
     the column of numbers together where a 12px Garamond figure would fade */
  font-family: var(--font-ui); font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 11px; color: var(--color-neutral-500);
  flex: 0 0 22px; padding-top: 3px;
}
.strat-col ol li a {
  color: var(--color-text); text-decoration: none; font-size: 14px; line-height: 1.45;
  border-bottom: 1px solid transparent;
}
.strat-col ol li a:hover { color: var(--color-accent-700); border-bottom-color: var(--color-accent); }

.rollups {
  display: grid;
  /* track ≥ a rollup chart (343px) + the figure's 28px padding, which puts
     all three in one row at full column width and folds them to two, then
     one, as the window narrows. Never wider than the grid itself, or the
     track would overflow the page on a phone. */
  grid-template-columns: repeat(auto-fit, minmax(min(371px, 100%), 1fr));
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.rollups .figure.figure-wide { grid-column: 1 / -1; }

.content > ul { max-width: 76ch; padding-left: var(--space-4); }
.content > ul li { padding: 3px 0; }

/* The rule runs the width of the window and the line under it is held to the
   text column — the same two parts the header is built from, so the page is
   closed by an edge of the same length it was opened by. */
.site-footer {
  border-top: 1px solid var(--color-divider);
}
.footer-inner {
  max-width: var(--page-width); margin: 0 auto;
  padding: var(--space-6) var(--space-8) var(--space-8);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  font-family: var(--font-ui); font-size: 12px; color: var(--color-neutral-600);
}
@media (max-width: 820px) {
  .strat-col { border-right: 0; }
  .footer-inner { padding: var(--space-4); }
}