/* ══════════════════════════════════════════════════════════════════════════
   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, built by classical.js from the "… Score N / 100" heading ── */
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 {
  overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: var(--space-3); margin: 0 0 var(--space-3);
  background: transparent;
}
/* Plotly nests the graph div inside a wrapper. Before classical.js runs the
   wrapper still carries the figure's native width, so centring it centres the
   chart; afterwards the wrapper is full-width and the graph div itself is the
   sized box, so centre that too. A figure narrower than its frame sits in the
   middle of it; one that overflows (the .figure-scroll frames) is unaffected,
   since auto margins collapse to zero when there's no room to spare. */
.figure > div { margin: 0 auto; }
.figure > div > .plotly-graph-div { margin: 0 auto; }

/* dense multi-subplot grids stay large and pan inside their frame */
.figure.figure-scroll > div {
  width: 100%; margin: 0; overflow: auto;
  max-height: 82vh; overscroll-behavior: contain;
  scrollbar-color: var(--color-neutral-400) transparent;
}
.figure.figure-scroll > div::-webkit-scrollbar { width: 11px; height: 11px; }
.figure.figure-scroll > div::-webkit-scrollbar-track { background: var(--color-neutral-100); }
.figure.figure-scroll > div::-webkit-scrollbar-thumb {
  background: var(--color-neutral-400); border-radius: var(--radius-sm);
}
.figure.figure-scroll > div::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }
.figure.figure-scroll > div::-webkit-scrollbar-corner { background: transparent; }

@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);
  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); }
}