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

   Type is Cormorant Garamond (display) over Lora (body); 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 ─────────────────────────────────────────────────────────────── */
  --font-heading: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  --font-mono: "SFMono-Regular", Menlo, Consolas, monospace;
  --font-heading-weight: 600;
  --font-body-weight: 400;

  /* ── 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;

  /* ── 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: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
::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-body); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  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: 1180px; 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-body); font-size: 13px;
  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-body); 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: 1180px;
  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 {
  font-size: 60px; font-weight: 400;      /* display sizes take the lighter cut */
  line-height: 1.04; letter-spacing: -0.02em;
  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: 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-body); font-weight: 500;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  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 {
  font-size: 19px; font-variant-numeric: tabular-nums;
  color: var(--color-neutral-600);
}
.sh-cap {
  font-family: var(--font-body); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  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: Plotly hangs its
     mode bar inside the top-right corner of the chart, and the two controls
     would otherwise sit on each other */
  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". Plotly hangs its mode bar
   inside that same corner of the plot, so the button sits above it, in the
   band the card's deeper top padding leaves free. */
.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;
  /* a hairline ring, like every other edge on the site — no fill, no shadow */
  border: 1px solid var(--color-divider); border-radius: 50%;
  background: var(--color-bg); color: var(--color-neutral-600);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.figure-expand:hover {
  color: var(--color-accent-800);
  border-color: var(--color-accent-300); 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);
}
/* Every box between the overlay and the chart gives up its own size, so the
   chart has the whole screen to draw into and nothing holds it to the shape
   it was generated at. The wrapper Plotly puts around a figure carries the
   generated width and height inline, which is what the !important is for:
   left alone it crops the chart to a column-wide box in the middle of the
   screen. Width comes from here; the height is the script's, since a figure
   is allowed to ask for more than the window and scroll. */
.figure.is-full .figure-scroll {
  flex: 1; min-width: 0; min-height: 0;
  overflow-x: hidden; overflow-y: auto;
  /* reaching the end of a tall grid must not start scrolling the page under it */
  overscroll-behavior: contain;
}
.figure.is-full .figure-scroll > div {
  width: 100% !important; height: auto !important; margin: 0 !important;
}
/* height is left alone here — it is the one measurement the script writes */
.figure.is-full .plotly-graph-div { width: 100% !important; margin: 0 !important; }
.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;
  font-size: 12.5px; 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); }
  h1 { font-size: 40px; }
  h2 { font-size: 26px; }
  .nav-inner { padding: var(--space-2) var(--space-4); }
  .site-logo, .site-logo svg { height: 26px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.hero { padding: calc(var(--space-8) * 1.2) 0 var(--space-8); }
.eyebrow {
  font-family: var(--font-body); font-weight: 500;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  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-body); font-weight: 400; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  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);
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 12px; 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 (310px) + 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(338px, 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; }

.site-footer {
  max-width: 1180px; margin: 0 auto;
  padding: var(--space-6) var(--space-8) var(--space-8);
  border-top: 1px solid var(--color-divider);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  font-size: 12px; color: var(--color-neutral-600);
}
@media (max-width: 820px) {
  .strat-col { border-right: 0; }
  .site-footer { padding: var(--space-4); }
}