/* Paulo Cisneros Zapata: site styles, version 2.
   The look borrows from an accountant's working papers: ledger-green paper,
   bottle-green ink, figures in brackets when negative, double rules under
   totals, and red pencil tick marks on figures agreed to a source. */

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

/* Colour is built in two layers.

   The ramp below is Paulo's four colours extended by lightness. It never
   changes with the theme, and it is written in hsl() so the derivation from
   the four source hexes stays readable.

   Under it sit about twenty semantic names. Those are the only names the rest
   of this file and charts.js ever use, and a theme is just a reassignment of
   them. Nothing else has to know a theme exists.

   None of the four source colours can carry body text: on a light paper the
   best of them reaches 4.44:1 against a 4.5:1 requirement, and three fall
   below the 3:1 a chart stroke needs. So ink and paper are derived from the
   teal, and each colour appears at a step tuned for the theme it is used in.
   The raw hexes (--teal-500 and friends) are for fills, never strokes or text. */

:root {
  --teal-900: hsl(191 44% 13%);
  --teal-700: hsl(191 42% 30%);
  --teal-600: hsl(191 38% 38%);
  --teal-500: #5E9FAD;            /* Paulo's teal */
  --teal-300: hsl(191 40% 68%);
  --teal-100: hsl(191 38% 91%);

  /* The blue is the prose ink. It is deliberately not used for anything drawn
     on a chart: at hue 206 it sits only fifteen degrees from the teal, and the
     two as adjacent series would be 1.2:1 apart - near indistinguishable, and
     worse for anyone with a colour vision deficiency. As text, where nothing
     has to be told apart from the teal, it reads as a second ink. */
  --blue-700: hsl(206 28% 28%);
  --blue-500: #779CB9;            /* Paulo's blue */
  --blue-200: hsl(206 30% 80%);

  --coral-800: hsl(10 58% 26%);
  --coral-700: hsl(10 62% 40%);
  --coral-600: hsl(10 68% 46%);
  --coral-500: #F07B63;           /* Paulo's coral */
  --coral-400: hsl(10 84% 74%);
  --coral-100: hsl(10 78% 92%);

  --grey-950: hsl(206 14% 10%);
  --grey-900: hsl(206 12% 14%);
  --grey-800: hsl(206 11% 20%);
  --grey-700: hsl(206 10% 28%);
  --grey-600: hsl(206  8% 42%);
  --grey-500: #6F7376;            /* Paulo's grey */
  --grey-400: hsl(206  7% 60%);
  --grey-300: hsl(206 10% 77%);
  --grey-200: hsl(206 14% 87%);
  --grey-100: hsl(206 18% 93%);

  --serif: "Besley", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(0.55, 0.05, 0.35, 1);
}

/* Light: ink and paper derived from the teal, so the working papers keep their
   character. Every pair here was measured; see the palette lab. */
:root {
  color-scheme: light;
  --paper:      hsl(191 26% 97%);
  --paper-deep: hsl(191 24% 93%);
  --sheet:      hsl(191 30% 99%);
  --ink:        var(--teal-900);   /* 14.1:1 on paper */
  --ink-2:      var(--blue-700);   /*  8.7:1, and a different ink from the headings */
  --muted:      hsl(191 12% 40%);  /*  5.1:1 */
  --rule:       hsl(191 16% 78%);
  --rule-soft:  hsl(191 18% 88%);
  /* The heaviest rules, the ones that divide the page rather than a list.
     The red pencil already ticks a figure agreed to source; here it also
     rules off a section, which is the other thing that pencil does on a
     working paper. 6.1:1 on this paper, against the 3:1 a graphic needs. */
  --rule-strong: var(--coral-700);
  --portfolio:  var(--teal-700);   /* 6.5:1 as a stroke */
  --benchmark:  var(--grey-500);   /* 4.5:1 */
  --series-1:   var(--teal-700);
  --series-2:   var(--coral-700);
  /* The coral inherits the red pencil's job: a tick on a figure agreed to
     source, and the drawn underline. It stays rare, which is what keeps it
     legible as a mark rather than as decoration. */
  --pencil:     var(--coral-600);

}

/* Dark: the same twenty names, reassigned. Nothing else in this file changes,
   and charts.js re-tints for free because it stores the literal string
   "var(--portfolio)" and never resolves a colour itself.

   Paulo's four finally sit near full strength here - on a dark ground they
   clear 6:1 where on paper they could not reach 3:1.

   The rules are deliberately lighter, relative to their ground, than the light
   theme's are dark: 2.24:1 and 1.60:1 against 1.54:1 and 1.22:1. Gridlines
   tuned to be discreet on paper disappear completely on a dark page, and a
   chart quietly loses its scale without anyone noticing in review. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:      hsl(191 30% 8%);
  --paper-deep: hsl(191 26% 12%);
  --sheet:      hsl(191 24% 15%);
  --ink:        hsl(191 22% 93%);  /* 15.6:1 on paper */
  --ink-2:      var(--blue-200);   /* 11.2:1 */
  --muted:      hsl(191 12% 62%);  /*  7.0:1 */
  --rule:       hsl(191 14% 30%);
  --rule-soft:  hsl(191 14% 22%);
  --rule-strong: var(--coral-400);   /* 8.3:1 on the dark paper */
  --portfolio:  var(--teal-300);   /*  9.2:1 as a stroke */
  --benchmark:  var(--grey-400);   /*  6.3:1 */
  --series-1:   var(--teal-300);
  --series-2:   var(--coral-400);
  --pencil:     var(--coral-400);

}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

p, h1, h2, h3, h4, ol, ul, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* Links: a quiet hairline underline, and an ink line that draws across on hover. */
a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--muted), var(--muted));
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px, 100% 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 280ms var(--ease);
}
a:hover, a:focus-visible { color: var(--ink); background-size: 100% 2px, 100% 1px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 16px; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 16px; color: var(--paper); }

.wrap {
  width: 100%;
  max-width: calc(1200px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Header */

.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 24px; min-height: 72px; }
.brand { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); background: none; }
.brand { margin-right: auto; }

/* Theme toggle. Hidden without JavaScript, because a switch that cannot switch
   is worse than no switch. One icon per theme, chosen in CSS so there is no
   flash of the wrong glyph and no JavaScript needed to set the initial state. */
.theme-toggle { display: none; }
.js .theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; color: var(--muted); cursor: pointer;
}
.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--ink); }
.theme-icon { width: 20px; height: 20px; }
.theme-icon--sun { display: none; }
:root[data-theme="dark"] .theme-icon--sun { display: block; }
:root[data-theme="dark"] .theme-icon--moon { display: none; }
.brand:hover { color: var(--ink); }
.site-nav ul { list-style: none; padding: 0; display: flex; gap: 36px; font-size: 16px; }
.site-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); background: none; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform 280ms var(--ease); }
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.menu-toggle { display: none; }

/* Page scaffolding */

main { flex: 1; }
.page { display: flex; flex-direction: column; gap: 112px; padding-block: 64px 112px; }
.page--inner { gap: 88px; }

.h1 { font-family: var(--serif); font-size: 48px; line-height: 1.1; font-weight: 600; letter-spacing: -0.015em; }
.h2 { font-family: var(--serif); font-size: 36px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.h2--sm { font-size: 24px; line-height: 1.25; letter-spacing: 0; }
.h3 { font-size: 18px; line-height: 1.4; font-weight: 600; }
.lede { max-width: 36em; font-size: 21px; line-height: 1.5; color: var(--ink-2); }
.fine { max-width: 46em; font-size: 14px; line-height: 1.6; color: var(--muted); }
.caption { font-size: 14px; line-height: 1.5; color: var(--muted); }

.opening { display: flex; flex-direction: column; gap: 56px; }
/* The one loud moment on the page. Headings everywhere else stay restrained
   (see the typography note in CLAUDE.md) so this is the thing that stands out. */
.intro { max-width: 12em; font-family: var(--serif); font-size: clamp(40px, 7vw, 88px); line-height: 1.02; font-weight: 700; letter-spacing: -0.025em; }

.page-head { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }

.split { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 72px; }
.split--wide { grid-template-columns: 300px minmax(0, 1fr); }
.split-aside { display: flex; flex-direction: column; gap: 12px; }
.split-aside p { font-size: 16px; line-height: 1.55; color: var(--muted); }

.stack { display: flex; flex-direction: column; gap: 32px; }

/* Sections rising into place as they are reached. The class is applied by
   site.js and only to blocks that start below the fold, so this rule can never
   hide something the reader can already see. */

@media (prefers-reduced-motion: no-preference) {
  .will-reveal { opacity: 0; transform: translateY(16px); }
  .will-reveal.is-revealed {
    opacity: 1; transform: none;
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  }
}

/* Masthead: the lede, then the facts a reader scanning for thirty seconds
   needs before anything else. Nationality first: it is a binary filter. */

.masthead { display: flex; flex-direction: column; gap: 32px; }

/* Six facts on a three-column grid: two clean rows, so the nth-child rules
   below assume six items. Change the count and revisit them. */
.identity { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.identity > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 28px 12px 0; }
.identity > div:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid var(--rule-soft); }
.identity > div:nth-child(-n + 3) { border-bottom: 1px solid var(--rule-soft); }
.identity dt { font-size: 14px; line-height: 1.4; color: var(--muted); }
.identity dd { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; }

/* Statement of performance */

.statement { display: flex; flex-direction: column; gap: 4px; max-width: 900px; }
.statement-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 32px; padding-bottom: 14px; border-bottom: 2px solid var(--rule-strong); }
.statement-title { font-family: var(--serif); font-size: 24px; line-height: 1.25; font-weight: 600; }
.statement-sub { margin-top: 4px; font-size: 16px; color: var(--muted); }
.statement-date { font-size: 16px; color: var(--ink-2); }
.statement-lede { max-width: 52em; margin-top: 16px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }

.ledger { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.ledger thead th { padding: 12px 0 10px; border-bottom: 1px solid var(--rule); font-size: 14px; font-weight: 400; line-height: 1.35; color: var(--muted); text-align: right; vertical-align: bottom; }
.ledger thead th:first-child { text-align: left; }
.ledger tbody th { padding: 16px 24px 16px 0; border-bottom: 1px solid var(--rule-soft); font-size: 18px; font-weight: 400; line-height: 1.4; color: var(--ink-2); text-align: left; vertical-align: baseline; }
.ledger td { padding: 16px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: baseline; }
.ledger tbody tr:last-child th, .ledger tbody tr:last-child td { border-bottom: 0; }
.ledger .num, .ledger .num-h { width: 200px; padding-right: 32px; text-align: right; }
.ledger .num { position: relative; font-size: 30px; line-height: 1.2; font-weight: 500; color: var(--ink); white-space: nowrap; }
.ledger .ref { width: 56px; text-align: right; font-size: 15px; }
.ledger .ref a { color: var(--muted); }
.ledger .fig { display: inline-block; }
/* An invisible closing bracket keeps positive figures aligned with bracketed negatives. */
.ledger .fig:not(.neg)::after { content: ")"; visibility: hidden; }
.ledger .total th { font-weight: 600; color: var(--ink); }
.ledger .total .fig { padding: 6px 0 4px; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }

.tickmark { position: absolute; right: 4px; top: 50%; width: 20px; height: 20px; margin-top: -13px; fill: none; stroke: var(--pencil); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tickmark path { stroke-dasharray: 24; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* Undrawn until the statement is actually on screen, then struck one by one
     in reading order, the way someone ticking a schedule would work down it. */
  .js .ledger .tickmark path { stroke-dashoffset: 24; }
  .js .ledger.is-revealed .tickmark path { animation: tick-draw 420ms var(--ease) both; animation-delay: calc(120ms + var(--i, 0) * 260ms); }
}
@keyframes tick-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

.statement-key { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.5; color: var(--muted); }
.statement-key .tickmark { position: static; flex: none; width: 16px; height: 16px; margin: 0; transform: translateY(3px); }

/* Exhibits: charts and their controls */

.performance { display: flex; flex-direction: column; gap: 56px; }
.exhibit { display: flex; flex-direction: column; gap: 16px; }
.exhibit-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.exhibit-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 64px; padding-top: 20px; border-top: 1px solid var(--rule); }
.cta { font-size: 16px; font-weight: 600; white-space: nowrap; }

.chart-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }

.segmented { display: inline-flex; max-width: 100%; border: 1px solid var(--ink); }
.segmented button {
  height: 44px; padding: 0 18px; border: 0; background: transparent;
  font: inherit; font-size: 15px; color: var(--ink); white-space: nowrap; cursor: pointer;
}
.segmented button + button { border-left: 1px solid var(--ink); }
.segmented button:hover { background: var(--paper-deep); }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--paper); font-weight: 600; }
.segmented button:focus-visible { outline: 2px solid var(--pencil); outline-offset: -5px; }

.legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 10px; }

/* site.js upgrades the legend of a chart it can match to buttons that show and
   hide each line. Until then it is an ordinary list, and it stays one without
   JavaScript. A switched-off series keeps its place so the row never reflows. */
.legend-btn {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 4px 0; min-height: 32px;
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
}
.legend--interactive li { padding: 0; }
.legend-btn[aria-pressed="false"] { color: var(--muted); }
.legend-btn[aria-pressed="false"] .key { opacity: 0.3; }
.legend-btn .key { transition: opacity 200ms var(--ease); }
.legend-btn:hover, .legend-btn:focus-visible { color: var(--ink); }
.key { flex: none; width: 24px; height: 0; border-top: 2px solid; }
.key--portfolio { border-color: var(--portfolio); }
.key--benchmark { border-color: var(--benchmark); border-top-style: dashed; }
.key--series-1 { border-color: var(--series-1); }
.key--series-2 { border-color: var(--series-2); }

/* Small multiples: one measure per chart, side by side on a shared horizontal axis */
.multiples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; }
.multiple { display: flex; flex-direction: column; min-width: 0; }
.multiple-title { font-size: 15px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 760px) {
  .multiples { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* Charts (drawn by charts.js) */

.chart { position: relative; margin-top: 8px; touch-action: pan-y; }
.chart svg { display: block; overflow: visible; }
.chart:focus-visible { outline-offset: 8px; }
.chart .grid { stroke: var(--rule-soft); stroke-width: 1; shape-rendering: crispEdges; }
.chart .grid.zero { stroke: var(--ink); stroke-opacity: 0.5; }
.chart .tick { font-family: var(--sans); font-size: 13px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: var(--paper); stroke-width: 2; }
.chart .crosshair { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.chart .end-value { font-family: var(--sans); font-size: 17px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }
.chart .end-name { font-family: var(--sans); font-size: 14px; fill: var(--muted); }

.chart-tooltip {
  position: absolute; z-index: 2; pointer-events: none;
  min-width: 200px; padding: 10px 12px;
  background: var(--sheet); border: 1px solid var(--ink);
  font-size: 14px; line-height: 1.5; white-space: nowrap;
}
.tt-date { margin-bottom: 4px; font-size: 13px; color: var(--muted); }
.tt-row { display: flex; align-items: center; gap: 8px; }
.tt-key { flex: none; width: 14px; height: 2px; }
.tt-value { min-width: 60px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.tt-name { color: var(--muted); }

.table-view { padding-top: 4px; border-top: 1px solid var(--rule); }
.table-view summary { display: list-item; min-height: 44px; padding-top: 10px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.table-view summary:hover { text-decoration-thickness: 2px; }
.table-view[open] summary { margin-bottom: 8px; }
.table-view .caption { margin-bottom: 8px; }

/* Tables */

.table-scroll { overflow-x: auto; }
.data { width: 100%; border-collapse: collapse; font-size: 17px; font-variant-numeric: tabular-nums lining-nums; }
.data th { padding: 10px 0; border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 400; color: var(--muted); text-align: right; vertical-align: bottom; }
.data td { padding: 16px 0; border-bottom: 1px solid var(--rule); text-align: right; }
.data th + th, .data td + td { padding-left: 16px; }
.data th:first-child, .data td:first-child { text-align: left; }
.data .strong { font-weight: 600; }
.data .left { text-align: left; }
.bracket-pad { visibility: hidden; }
.data--compact { font-size: 16px; }
.data--compact td { padding: 12px 0; }
.data--compact th + th, .data--compact td + td { padding-left: 12px; }

/* Definition rows and notes */

.defs { max-width: 800px; border-top: 1px solid var(--ink); }
.def { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.def p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }

.notes { list-style: none; padding: 0; max-width: 820px; border-top: 1px solid var(--ink); }
.notes li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding: 20px 12px 20px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 24px; }
.notes li:target { background: var(--paper-deep); box-shadow: -12px 0 0 var(--paper-deep); }
.notes-n { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--muted); }
.notes-body { display: flex; flex-direction: column; gap: 6px; }
.notes-body p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }

/* Projects list */

.section-head { display: flex; flex-direction: column; gap: 6px; }
.section-head span { max-width: 52ch; font-size: 16px; color: var(--muted); }

.projects { list-style: none; padding: 0; border-top: 2px solid var(--rule-strong); }
.project-row { display: grid; grid-template-columns: 280px minmax(0, 1fr) 220px 200px; gap: 40px; padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.project-row--head { padding: 12px 0; font-size: 14px; color: var(--muted); }
.project-title { font-family: var(--serif); font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--ink); text-decoration: none; }
a.project-title:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.project-desc { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.project-meta { font-size: 16px; line-height: 1.5; color: var(--muted); }

/* How I can help: six cells, the last one the call to action */

.help-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--rule-strong); }
.help-list li { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--rule-soft); }
.help-list p { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.help-cta .h3 { font-family: var(--serif); font-size: 22px; }

/* About */

.about { display: grid; grid-template-columns: 280px minmax(0, 1fr) 320px; gap: 40px; scroll-margin-top: 24px; }
.prose { display: flex; flex-direction: column; gap: 20px; max-width: 36em; font-size: 18px; line-height: 1.65; color: var(--ink-2); }

.facts { display: flex; flex-direction: column; gap: 18px; padding-top: 14px; border-top: 2px solid var(--rule-strong); }
.facts > div { display: flex; flex-direction: column; gap: 2px; }
.facts dt { font-size: 14px; color: var(--muted); }
.facts dd { font-size: 17px; line-height: 1.45; }
.facts .links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* Project pages */

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.project-head { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 96px; align-items: start; }
.project-head .page-head { gap: 24px; max-width: 720px; }

.note { display: flex; gap: 14px; align-items: flex-start; max-width: 860px; padding: 16px 20px; background: var(--paper-deep); border-left: 3px solid var(--ink); color: var(--ink); }
.note svg { flex: none; margin-top: 4px; }
.note p { font-size: 17px; line-height: 1.55; }

.steps { list-style: none; padding: 0; max-width: 720px; border-top: 1px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.step-n { font-family: var(--serif); font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--ink); }
.step-body { display: flex; flex-direction: column; gap: 6px; }
.step-body h3 { font-size: 19px; line-height: 1.35; font-weight: 600; }
.step-body p { font-size: 17px; line-height: 1.55; color: var(--muted); }

.finding { max-width: 30em; font-family: var(--serif); font-size: 24px; line-height: 1.4; font-weight: 500; }

.takeaway { display: flex; flex-direction: column; gap: 8px; max-width: 720px; padding-top: 18px; border-top: 2px solid var(--rule-strong); }
.takeaway p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }

.card { border-top: 2px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px 0; }
.kpi + .kpi { padding-left: 20px; border-left: 1px solid var(--rule); }
.kpi dt { font-size: 15px; line-height: 1.35; color: var(--muted); }
.kpi dd { font-size: 30px; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; }

.chart-card { display: flex; flex-direction: column; gap: 12px; padding: 20px 0 8px; border-top-width: 1px; }
.chart-card .chart { margin-top: 8px; }
.table-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; margin-bottom: 12px; }

.bullets { display: flex; flex-direction: column; gap: 14px; max-width: 720px; padding-left: 22px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.bullets li::marker { color: var(--muted); }

.pager { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 28px; border-top: 2px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.pager-back { font-size: 17px; color: var(--muted); }
.pager-back:hover { color: var(--ink); }
.pager-next { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; text-align: right; }
.pager-next span { font-size: 14px; color: var(--muted); }
.pager-next a { font-family: var(--serif); font-size: 24px; font-weight: 600; }

/* Interactive tools on the project pages.

   Inputs are styled as a schedule rather than as a form: ruled, aligned right
   like the figures they produce, so changing one reads as amending a working
   paper. */

.calc { display: flex; flex-direction: column; gap: 32px; align-items: stretch; }
/* The segmented control is inline-flex, but a flex column stretches its
   children, so it has to opt out and hug its buttons. */
.calc > .segmented { align-self: flex-start; }
.calc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 16px 20px 18px 0; }
.field:not(:nth-child(3n + 1)) { padding-left: 20px; border-left: 1px solid var(--rule-soft); }
.field:nth-child(-n + 3) { border-bottom: 1px solid var(--rule-soft); }
/* One row of three: the container's own rule closes it, so the fields need none. */
.calc-fields--3 .field { border-bottom: 0; }
.field label { font-size: 15px; line-height: 1.35; color: var(--muted); }
.field input {
  width: 100%; padding: 6px 0;
  font-family: var(--sans); font-size: 21px; font-weight: 500; line-height: 1.3;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink); background: none;
  border: 0; border-bottom: 1px solid var(--rule);
  border-radius: 0;
  transition: border-color 200ms var(--ease);
}
.field input:hover { border-bottom-color: var(--ink-2); }
.field input:focus { outline: 0; border-bottom-color: var(--pencil); border-bottom-width: 2px; padding-bottom: 5px; }
.field input:invalid { border-bottom-color: var(--pencil); }

.calc-problem { max-width: 46em; padding: 14px 18px; background: var(--paper-deep); border-left: 3px solid var(--pencil); font-size: 16px; line-height: 1.5; }

[data-calc-results] { display: flex; flex-direction: column; gap: 32px; transition: opacity 200ms var(--ease); }
[data-calc-results].is-stale { opacity: 0.35; }   /* inputs are not valid: the figures below are last known good */
.calc-entry caption { padding-bottom: 10px; font-size: 14px; color: var(--muted); text-align: left; }
.calc-entry tbody tr:last-child td { border-bottom: 3px double var(--ink); }

@media (max-width: 760px) {
  .calc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field:nth-child(n) { padding-left: 0; border-left: 0; border-bottom: 1px solid var(--rule-soft); }
  .field:not(:nth-child(2n + 1)) { padding-left: 20px; border-left: 1px solid var(--rule-soft); }
  .field input { font-size: 19px; }
}

/* The scenario grid: every run the backtester produced, as a schedule you can
   pick from. Positive cells are the exception in this table, so they are the
   ones that get marked; the base case carries a tick like an agreed figure. */

.grid-table caption { padding-bottom: 10px; max-width: 46em; font-size: 14px; line-height: 1.5; color: var(--muted); text-align: left; }
.grid-table td { padding: 0; }
.grid-table th[scope="row"] { font-variant-numeric: tabular-nums; }

.grid-cell {
  display: block; width: 100%; padding: 12px 10px;
  font: inherit; font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-2); text-align: right;
  background: none; border: 0; cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.grid-cell:hover { background: var(--paper-deep); color: var(--ink); }
.grid-cell.is-gain { color: var(--portfolio); font-weight: 600; }
.grid-cell.is-empty { color: var(--muted); }
.grid-cell[aria-pressed="true"] { background: var(--ink); color: var(--paper); font-weight: 600; }
.grid-cell[aria-pressed="true"].is-gain { color: var(--paper); }
.grid-cell:focus-visible { outline: 2px solid var(--pencil); outline-offset: -4px; }

/* The base case, ticked the way an agreed figure is ticked elsewhere. */
.grid-cell.is-base::after {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px;
  vertical-align: baseline; background-color: var(--pencil);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 11.5c1.6 1.1 3 2.6 4.3 4.3C9.4 11 12.3 6.8 17 3' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 11.5c1.6 1.1 3 2.6 4.3 4.3C9.4 11 12.3 6.8 17 3' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.grid-cell[aria-pressed="true"].is-base::after { background-color: var(--paper); }

/* Heavy rule above a main section, as on a front page */

.section-rule { padding-top: 16px; border-top: 4px solid var(--rule-strong); }

/* The homepage intro: La Paz, into the mist, out over Geneva.

   The static version is the default: one screen, the poster, the first beat.
   That is what a reader gets with no JavaScript, with reduced motion, or on a
   thin connection. intro.js adds .intro-live to turn it into the tall scroll
   track with the stage pinned inside it.

   The footage is a photograph and light in both themes, so the text over it
   uses fixed inks rather than the theme tokens: --ink turns pale in dark mode
   and would vanish into the dawn sky. Each block of text carries its own soft
   pool of paper behind it, which is what holds it above 4.5:1 over the
   brightest and busiest frames. */

.intro-scroll { position: relative; }
.intro-scroll.intro-live { height: 300vh; }

.intro-stage {
  position: relative;
  height: 100vh; height: 100svh; min-height: 540px;
  overflow: hidden;
  background: hsl(206 30% 88%);   /* the sky's average, while the poster loads */
}
.intro-live .intro-stage { position: sticky; top: 0; }

.intro-poster, .intro-video {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.intro-video { opacity: 0; transition: opacity 300ms linear; pointer-events: none; }
.intro-scroll.is-painted .intro-video { opacity: 1; }

/* The hand-over to the page: the footage dissolves into the paper, whichever
   theme the paper is in. */
.intro-stage::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 18%;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
}

.intro-beat {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: flex-start;
  padding-top: clamp(32px, 9vh, 120px);
}
.intro-beat--2 { align-items: center; padding-top: 0; }
.intro-beat--2 .intro-text { margin-inline: auto; text-align: center; }
.intro-beat--3 .intro-text { margin-left: auto; text-align: right; }
.intro-beat--2 .intro-line, .intro-beat--3 .intro-line { margin-inline: auto 0; }
.intro-beat--2 .intro-line { margin-inline: auto; }
.intro-scroll:not(.intro-live) .intro-beat--2,
.intro-scroll:not(.intro-live) .intro-beat--3 { display: none; }

.intro-text { position: relative; isolation: isolate; width: fit-content; max-width: 100%; }
.intro-text::before {
  content: ""; position: absolute; z-index: -1; inset: -22% -12%;
  background: radial-gradient(closest-side,
    hsl(191 26% 97% / 0.82), hsl(191 26% 97% / 0.6) 60%, hsl(191 26% 97% / 0));
}

.intro-beat .intro { font-size: clamp(34px, 5.4vw, 76px); color: var(--teal-900); }
.intro-facts { margin-top: 20px; font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--blue-700); }
.intro-line { max-width: 14em; font-family: var(--serif); font-size: clamp(28px, 4vw, 56px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--teal-900); }
.intro-sub { margin-top: 14px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; color: var(--blue-700); }
.intro-next { display: inline-block; margin-top: 24px; font-weight: 600; color: var(--teal-900); }
/* The small lines cannot rely on the soft pool: they sit at its fading edge,
   and the facts line crosses Illimani's dark rock. A near-opaque band of paper
   holds them at 7:1 or better over the darkest frame. */
.intro-facts, .intro-sub, .intro-next {
  width: fit-content; padding: 4px 10px; margin-inline: -10px;
  background: hsl(191 26% 97% / 0.88); border-radius: 2px;
}
.intro-beat--2 .intro-sub { margin-inline: auto; }
.intro-beat--3 .intro-sub, .intro-beat--3 .intro-next { margin-left: auto; margin-right: -10px; }

/* Each beat's lines rise in one after another as the beat arrives. Only when
   live: the static version shows everything at once. */
.intro-live .intro-text > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.intro-live .is-in .intro-text > * { opacity: 1; transform: none; }
.intro-live .is-in .intro-text > :nth-child(2) { transition-delay: 150ms; }
.intro-live .is-in .intro-text > :nth-child(3) { transition-delay: 300ms; }

@media (max-width: 760px) {
  .intro-scroll.intro-live { height: 220vh; }
  .intro-beat { padding-top: 28px; }
  .intro-beat .intro { font-size: 32px; line-height: 1.1; }
  .intro-facts { font-size: 15px; }
  .intro-beat--3 .intro-text { text-align: left; margin-left: 0; }
  .intro-beat--3 .intro-line { margin-inline: 0; }
  .intro-beat--3 .intro-sub, .intro-beat--3 .intro-next { margin-inline: -10px auto; }
}

/* Projects as a front page: one lead story and a column of shorter ones */

.stories { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-top: 1px solid var(--rule); }
.story { display: flex; flex-direction: column; gap: 10px; }
.story--lead { padding: 28px 48px 32px 0; }
.stories-side { border-left: 1px solid var(--rule); }
.stories-side .story { padding: 24px 0 24px 40px; }
.stories-side .story + .story { border-top: 1px solid var(--rule); }
.story-tag { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.story-title { font-family: var(--serif); font-size: 24px; line-height: 1.2; font-weight: 600; }
.story--lead .story-title { font-size: 36px; line-height: 1.15; letter-spacing: -0.01em; }
.story-desc { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.story--lead .story-desc { max-width: 30em; font-size: 21px; line-height: 1.5; }
.story-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 15px; color: var(--muted); }

/* A single figure as proof, in the same idiom as the mini-ledger's .fig:
   a real number carries more than a description of the same thing. */
.story-proof-num { font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.story-proof-label { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }

.mini-ledger { width: 100%; max-width: 30em; margin-top: 10px; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums lining-nums; }
.mini-ledger caption { padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: 14px; color: var(--muted); text-align: left; }
.mini-ledger th { padding: 8px 16px 8px 0; border-bottom: 1px solid var(--rule-soft); font-weight: 400; color: var(--ink-2); text-align: left; }
.mini-ledger td { padding: 8px 0; border-bottom: 1px solid var(--rule-soft); text-align: right; white-space: nowrap; }
.mini-ledger tr:last-child th, .mini-ledger tr:last-child td { border-bottom: 0; }
.mini-ledger .fig { display: inline-block; }
.mini-ledger .fig:not(.neg)::after { content: ")"; visibility: hidden; }
.mini-ledger .total th { font-weight: 600; color: var(--ink); }
.mini-ledger .total .fig { padding: 4px 0 2px; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); font-weight: 600; }

.byline { font-size: 15px; color: var(--muted); }

/* Pencil underline: the mark from the tick marks, drawn under a headline on hover.
   The squiggle is a mask, not an image, so only its alpha channel is used and the
   colour comes from --pencil like everything else. Painting it as a background
   image would bake the colour in, because CSS variables cannot reach inside a
   data URL. */

.story-title a, .pager-next a { position: relative; display: inline-block; background: none; }
.story-title a::after, .pager-next a::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: -6px; height: 10px;
  background-color: var(--pencil);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.5C38 3.5 74 8 112 5.2S178 3.6 198 5.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.5C38 3.5 74 8 112 5.2S178 3.6 198 5.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 420ms var(--ease);
}
.story-title a:hover::after, .story-title a:focus-visible::after,
.pager-next a:hover::after, .pager-next a:focus-visible::after { clip-path: inset(0 0 0 0); }

@media (max-width: 900px) {
  .identity, .help-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .identity > div:nth-child(n) { padding-left: 0; border-left: 0; }
  .identity > div:not(:nth-child(2n + 1)) { padding-left: 28px; border-left: 1px solid var(--rule-soft); }
  .identity > div:nth-child(-n + 4) { border-bottom: 1px solid var(--rule-soft); }

  .stories { grid-template-columns: minmax(0, 1fr); }
  .story--lead { padding-right: 0; }
  .stories-side { border-left: 0; border-top: 1px solid var(--rule); }
  .stories-side .story { padding-left: 0; }
}

@media (max-width: 760px) {
  .story--lead .story-title { font-size: 28px; }
  .story--lead .story-desc { font-size: 18px; }
  .story-title { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  a, .site-nav a::after, .story-title a::after, .pager-next a::after { transition: none; }
}

/* Footer */

.site-footer { border-top: 1px solid var(--rule); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 80px; padding-block: 44px; }
.site-footer span { font-size: 14px; color: var(--muted); white-space: nowrap; }

/* Narrower screens */

@media (max-width: 1180px) {
  .project-row { grid-template-columns: 220px minmax(0, 1fr) 170px 150px; gap: 28px; }
  .about { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; row-gap: 24px; }
  .about .h2 { grid-column: 1 / -1; }
  .split, .split--wide { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; }
  .project-head { gap: 56px; grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 900px) {
  .page { gap: 88px; padding-block: 48px 88px; }
  .page--inner { gap: 64px; }
  .h1 { font-size: 40px; }
  .intro { font-size: 30px; }
  .project-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0; }
  .project-row--head { display: none; }
  .project-meta { font-size: 15px; }
  .split, .split--wide, .project-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .project-head { gap: 32px; }
  .ledger .num, .ledger .num-h { width: 150px; padding-right: 30px; }
  .ledger .num { font-size: 26px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(odd) { padding-left: 0; border-left: 0; }
  .kpi:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .site-header .wrap { min-height: 64px; }
  .brand { font-size: 19px; }
  .js .menu-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px; padding: 0;
    background: none; border: 0; color: var(--ink); cursor: pointer;
  }
  .site-nav { flex-basis: 100%; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding-bottom: 8px; }
  .site-nav li + li { border-top: 1px solid var(--rule); }
  .site-nav a::after { bottom: 8px; }

  .page { gap: 64px; padding-block: 32px 64px; }
  .page--inner { gap: 56px; }
  .opening { gap: 36px; }
  .performance { gap: 40px; }
  .intro { font-size: 24px; line-height: 1.3; }
  .masthead { gap: 24px; }
  .identity, .help-list { grid-template-columns: minmax(0, 1fr); }
  .identity > div { padding: 10px 0; }
  .identity > div:nth-child(n) { padding-left: 0; border-left: 0; border-bottom: 0; }
  .identity > div + div { border-top: 1px solid var(--rule-soft); }
  .statement-lede { margin-top: 12px; font-size: 16px; }
  .h1 { font-size: 32px; }
  .h2 { font-size: 28px; }
  .h2--sm { font-size: 22px; }
  .lede { font-size: 18px; }

  .statement-title { font-size: 21px; }
  .statement-sub, .statement-date { font-size: 15px; }
  .ledger thead th { font-size: 13px; }
  .ledger tbody th { padding-right: 12px; font-size: 15px; }
  .ledger td { padding: 12px 0; }
  .ledger .num, .ledger .num-h { width: 96px; padding-right: 22px; }
  .ledger .num { font-size: 21px; }
  .ledger .ref { display: none; }
  .tickmark { right: 2px; width: 16px; height: 16px; margin-top: -11px; }
  .statement-key { font-size: 14px; }

  .segmented button { padding: 0 12px; font-size: 14px; }
  .legend { flex-direction: column; gap: 8px; font-size: 14px; }
  .chart { margin-top: 4px; }
  .about { grid-template-columns: minmax(0, 1fr); }
  .prose { font-size: 17px; gap: 16px; }
  .facts dd { font-size: 16px; }
  .def, .notes li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .def p, .notes-body p { font-size: 16px; }
  .data { font-size: 15px; }
  .data td { padding: 12px 0; }
  .data th { font-size: 13px; }
  .note { padding: 14px 16px; gap: 12px; }
  .note p, .step-body p, .bullets { font-size: 16px; }
  .finding { font-size: 20px; }
  .kpi { padding: 14px 14px 16px 0; }
  .kpi + .kpi { padding-left: 14px; }
  .kpi dd { font-size: 24px; }
  .steps li { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; }
  .step-n { font-size: 20px; }
  .site-footer .wrap { flex-direction: column; padding-block: 32px; }
  .pager-next a { font-size: 20px; }
}