/* ── MinVaris shared styles ── */

/* ── Self-hosted fonts (latin subset) ──
   Served from same origin instead of Google Fonts, so Safari's advanced
   privacy protection has no cross-site request to flag. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Inter-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Inter-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/Inter-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/SourceSerif4-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/SourceSerif4-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/SourceSerif4-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/SourceSerif4-500italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Pin the designed palette — opts out of Chrome Android's Auto Dark Theme,
       which would otherwise invert backgrounds and text on its own heuristics. */
    color-scheme: light;

    /* Accent roles — keep usage consistent:
       --steel-blue  interactive: links, CTA buttons, nav hover
       --sienna      structural accents: rules, borders, connectors, arrows, active-tab underline
       --ochre       data highlight: the single figure/marker that carries the argument (e.g. pool-average marker) */
    --navy: #1B2A47;
    /* Lighter navies — the two upper stops of the hero gradient. */
    --navy-mid: #243559;
    --navy-light: #2D4068;
    --steel-blue: #4A6FA5;
    --sienna: #A0522D;
    /* Light partner for --sienna. No single accent tone can clear 4.5:1 on
       both white and the navy hero gradient, so dark backgrounds use this. */
    --sienna-light: #CDA390;
    --ochre: #BE7F45;
    --slate-100: #F5F7FA;
    --slate-200: #E8ECF1;
    --slate-400: #94A3B8;
    --slate-700: #334155;
    --white: #FFFFFF;
    --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--white);
    color: var(--slate-700);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Accessible focus styles ── */
:focus-visible {
    outline: 2px solid var(--steel-blue);
    outline-offset: 2px;
}

/* ── Navigation ──
   Scoped to .site-nav rather than the bare `nav` element: every other <nav>
   on the site (the note pager, the page sub-nav) would otherwise inherit the
   header's sticky positioning, translucent background and 48px padding. */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 48px;
    width: 100%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

.site-nav.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

.nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.logo {
    max-width: 200px;
    height: 48px;
    width: auto;
    display: block;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--navy);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--slate-700);
    text-decoration: none;
    transition: color 0.2s ease;
    letter-spacing: 0.02em;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
    color: var(--steel-blue);
}

.cta-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: var(--steel-blue);
    text-decoration: none;
    padding: 10px 24px;
    border: 1px solid var(--steel-blue);
    border-radius: 4px;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}

.nav-links a.cta-link:hover,
.nav-links a.cta-link[aria-current="page"] {
    background: var(--steel-blue);
    color: var(--white);
}

/* ── Layout ── */
main {
    flex: 1;
}

section {
    padding: 80px 0;
    max-width: 100%;
}

section.bg-slate {
    background-color: var(--slate-100);
}

.section-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 48px;
}

/* ── Scroll-triggered reveal animations ── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.25s; }

/* ── Hero (home) ── */
section.hero {
    max-width: 100%;
    padding: 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, var(--navy-light) 100%);
}

section.hero::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255,255,255,0.1);
}

.hero-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 100px 48px;
    position: relative;
    z-index: 2;
}

section.hero h1 {
    color: var(--white);
}

section.hero .lead {
    color: rgba(255, 255, 255, 0.85);
    max-width: 680px;
}

.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Interior pages get a quieter variant of the home hero's network canvas —
   consistent motif, but Home reads as the primary treatment. */
.page-hero .hero-canvas {
    opacity: 0.5;
}

/* ── Flow diagram ──
   Equal-width stages on a shared grid, so the chain reads as one pipeline
   rather than four boxes each sized to its own label. The top rule ramps
   steel-blue → sienna across the chain: the pale stages are preparation,
   the sienna terminal stage is the output the note argues toward. That
   makes the accent the culmination of a system rather than a stray rule
   on the last box. */
.flow-diagram {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch;
    margin: 40px 0 10px;
    counter-reset: flow-step;
}

.flow-step {
    counter-increment: flow-step;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-top: 3px solid var(--slate-400);
    border-radius: 6px;
    padding: 14px 16px 15px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--navy);
    letter-spacing: 0.02em;
    text-align: center;
    box-shadow: 0 2px 10px rgba(27, 42, 71, 0.05);
}

/* Stage numbers are presentational only — .flow-diagram carries role="img"
   with an aria-label describing the whole chain, so nothing here is
   announced separately. Matches the 01–04 numbering on What We Do. */
.flow-step::before {
    content: counter(flow-step, decimal-leading-zero);
    font-family: var(--font-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--slate-400);
}

/* Sequential ramp — steps are children 1, 3, 5, 7 (arrows sit between). */
.flow-diagram > .flow-step:nth-child(1) { border-top-color: #C9D4E4; }
.flow-diagram > .flow-step:nth-child(3) { border-top-color: #A5B7D2; }
.flow-diagram > .flow-step:nth-child(5) { border-top-color: #809AC0; }

.flow-step.accent {
    border-top-color: var(--sienna);
    background: #FDF8F5;
}

.flow-step.accent::before {
    color: var(--sienna);
}

.flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: var(--sienna);
    font-size: 15px;
    font-weight: 700;
}

.flow-caption {
    display: block;
    margin: 0 0 34px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--slate-400);
}

/* Below ~640px four columns leave each label too narrow to read; stack the
   chain and turn the connectors to point down it. */
@media (max-width: 640px) {
    .flow-diagram {
        grid-template-columns: 1fr;
    }

    .flow-arrow {
        padding: 7px 0;
        transform: rotate(90deg);
    }
}

/* ── Method comparison ── */
.method-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 40px 0;
}

/* The 3px top rule is reserved on both columns — otherwise only .ours has it
   and its contents sit 2px lower, so the rows that are meant to be compared
   line up off by a hair. */
.method-col {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--slate-200);
    border-top: 3px solid var(--slate-200);
    border-radius: 4px;
    padding: 28px;
    background: var(--slate-100);
}

.method-col.ours {
    background: var(--white);
    border-top-color: var(--sienna);
}

.method-col h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.method-col.pool h3 { color: var(--slate-400); }
.method-col.ours h3 { color: var(--sienna); }

/* Columns can hold different numbers of steps (4 vs 5 in Note 02). Spreading
   the shorter chain to full height keeps the dead space from pooling at the
   bottom of one column and reading as a layout fault. */
.method-steps {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}

.method-step {
    display: block;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: 4px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    text-align: center;
}

.method-col.pool .method-step {
    color: var(--slate-400);
    font-weight: 500;
}

.method-down {
    text-align: center;
    font-weight: 700;
    color: var(--sienna);
    line-height: 1;
}

.method-col.pool .method-down { color: var(--slate-400); }

/* ── Dual oversight framework ── */
.oversight-diagram {
    margin: 40px 0 0;
}

.oversight-rule {
    display: flex;
    align-items: center;
    gap: 20px;
}

.oversight-rule::before,
.oversight-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--sienna);
}

.oversight-root-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--navy);
    white-space: nowrap;
}

/* Drop-ticks share the grid of .oversight-grid so they land on column centres. */
.oversight-ticks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.oversight-ticks span {
    width: 1px;
    height: 20px;
    margin: 0 auto;
    background: var(--sienna);
}

.oversight-diagram + .oversight-grid {
    margin-top: 0;
}

.oversight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 40px 0;
}

.oversight-col {
    border: 1px solid var(--slate-200);
    border-top: 3px solid var(--sienna);
    border-radius: 4px;
    padding: 28px;
    background: var(--white);
}

.oversight-col h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sienna);
    margin-bottom: 8px;
}

.oversight-col p {
    font-size: 14px;
    color: var(--slate-700);
    margin-bottom: 16px;
}

.oversight-col ul {
    margin: 0;
    padding-left: 18px;
}

.oversight-col li {
    font-size: 14px;
    color: var(--navy);
    margin-bottom: 8px;
}

.oversight-col li:last-child {
    margin-bottom: 0;
}

/* ── Formula cards (investment risk drivers) ── */
.formula-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 40px 0;
}

.formula-card {
    border: 1px solid var(--slate-200);
    border-radius: 4px;
    padding: 28px;
    background: var(--slate-100);
}

.formula-card h3 {
    font-size: 16px;
    color: var(--navy);
    margin-bottom: 12px;
}

.formula-card .insight-math {
    background: var(--white);
    margin: 0 0 16px;
}

.formula-card p {
    font-size: 14px;
    color: var(--slate-700);
    margin: 0 0 12px;
}

.formula-card p:last-child {
    margin-bottom: 0;
}

.plain-terms,
.formula-card p.plain-terms {
    font-size: 13px;
    font-style: italic;
    color: var(--slate-700);
}

/* ── Illustrative distribution chart ── */
.distribution-chart {
    background: var(--slate-100);
    border: 1px solid var(--slate-200);
    border-radius: 4px;
    padding: 24px 28px 20px;
    margin: 32px 0;
}

.distribution-chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.distribution-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

.distribution-chart-legend .swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 50%;
}

.swatch-loans { background: var(--steel-blue); opacity: 0.65; }
.swatch-avg { background: var(--ochre); box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--ochre); }

.distribution-chart-caption {
    text-align: center;
    font-size: 12px;
    color: var(--slate-400);
    margin: 12px 0 0;
    font-style: italic;
}

.chart-avg-marker {
    r: 7px;
    stroke-width: 2.5px;
}

.chart-avg-label {
    font-size: 14px;
}

.chart-avg-sublabel {
    font-size: 12px;
}

.chart-axis-label {
    font-size: 13px;
}

.chart-crosshair {
    stroke-width: 1px;
}

/* Below ~640px the chart's viewBox scales down enough that fine text/markers
   would become illegible; boost the focal elements and drop the secondary
   labels rather than let everything shrink uniformly. */
@media (max-width: 640px) {
    .chart-axis-label,
    .chart-avg-sublabel {
        display: none;
    }
    .chart-avg-label {
        font-size: 30px;
    }
    .chart-avg-marker {
        r: 15px;
        stroke-width: 5px;
    }
    .chart-crosshair {
        stroke-width: 2px;
        stroke-dasharray: 6 6;
    }
}

.distribution-chart-note {
    font-size: 14px;
    color: var(--slate-700);
    margin: 20px 0 12px;
    padding-top: 20px;
    border-top: 1px solid var(--slate-200);
}

/* ── How we think ── */
.think-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 32px;
}

.think-cell {
    padding: 28px;
    border-radius: 4px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

.think-cell span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0.7;
}

.think-cell.mean {
    background: var(--white);
    color: var(--slate-400);
    border: 1px solid var(--slate-200);
}

.think-cell.dist {
    background: var(--navy);
    color: var(--white);
}

/* ── Coverage ── */
.coverage-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
    padding: 0;
    list-style: none;
}

.coverage-list li {
    padding: 8px 20px;
    border: 1px solid var(--steel-blue);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--steel-blue);
    letter-spacing: 0.03em;
}

/* ── Page hero (subpages) ── */
section.page-hero {
    max-width: 100%;
    padding: 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, var(--navy-light) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.page-hero-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 48px 64px;
    position: relative;
    z-index: 2;
}

section.page-hero h1 {
    color: var(--white);
    font-size: 40px;
}

section.page-hero .lead {
    color: rgba(255, 255, 255, 0.85);
    max-width: 720px;
    margin-bottom: 0;
}

/* ── Page sub-nav (in-page section tabs) ── */
.page-subnav {
    position: sticky;
    top: 81px;
    z-index: 90;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--slate-200);
}

.page-subnav-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    gap: 32px;
    overflow-x: auto;
}

.page-subnav a {
    display: inline-block;
    padding: 16px 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--slate-400);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.page-subnav a:hover {
    color: var(--navy);
}

.page-subnav a.active {
    color: var(--navy);
    border-bottom-color: var(--sienna);
}

/* ── Typography ── */
h1 {
    color: var(--navy);
    font-family: var(--font-serif);
    font-size: 48px;
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

h2 {
    color: var(--navy);
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

.section-subhead {
    color: var(--navy);
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 40px 0 16px;
}

.lead {
    font-size: 20px;
    color: var(--slate-700);
    margin-bottom: 32px;
    font-weight: 400;
}

p {
    margin-bottom: 16px;
    font-size: 16px;
}

.highlight-quote {
    border-left: 1px solid var(--sienna);
    padding-left: 24px;
    margin: 32px 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 19px;
    color: var(--navy);
}

.highlight-quote cite {
    display: block;
    margin-top: 12px;
    font-family: var(--font-sans, inherit);
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--slate-400);
}

.eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sienna);
    margin-bottom: 12px;
}

/* Eyebrows sitting on the navy hero gradient need the light partner tone.
   section.hero carries no eyebrow today but shares the same gradient. */
section.hero .eyebrow,
section.page-hero .eyebrow {
    color: var(--sienna-light);
}

.text-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: var(--steel-blue);
    text-decoration: none;
    letter-spacing: 0.02em;
    margin-top: 8px;
    transition: color 0.2s ease;
}

.text-link::after {
    content: ' \2192';
}

.text-link:hover {
    color: var(--navy);
}

/* ── Data Cards ── */
.data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 40px 0;
}

.data-card {
    background: var(--white);
    padding: 32px;
    border-radius: 4px;
    border: 1px solid var(--slate-200);
    text-align: left;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.data-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(27, 42, 71, 0.08);
}

.data-card h3 {
    color: var(--steel-blue);
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 38px;
    margin-bottom: 8px;
}

.data-card p {
    color: var(--slate-400);
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Comparison Table ── */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 40px;
    border: 1px solid var(--slate-200);
    border-radius: 4px;
}
.comparison-table thead tr {
    border-bottom: 2px solid var(--slate-200);
    background: var(--slate-100);
}
.comparison-table th {
    padding: 14px 20px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.comparison-table th.col-dim  { color: var(--slate-400); width: 22%; }
.comparison-table th.col-pub  { color: var(--slate-400); width: 39%; }
.comparison-table th.col-abf  { color: var(--sienna); width: 39%; }
.comparison-table tbody tr {
    border-bottom: 1px solid var(--slate-200);
}
.comparison-table tbody tr:last-child {
    border-bottom: none;
}
.comparison-table td {
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.6;
    vertical-align: middle;
}
.comparison-table td.col-dim {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--navy);
    border-right: 1px solid var(--slate-200);
    background: var(--slate-100);
}
.comparison-table td.col-pub { color: var(--slate-400); }
.comparison-table td.col-abf { color: var(--navy); font-weight: 500; }

/* ── Investment Universe table ── */
.universe-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 40px;
    border: 1px solid var(--slate-200);
    border-radius: 4px;
}
.universe-table thead tr {
    border-bottom: 2px solid var(--slate-200);
    background: var(--slate-100);
}
.universe-table th {
    padding: 14px 20px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--slate-400);
}
.universe-table th.col-strategy { width: 30%; }
.universe-table tbody tr {
    border-bottom: 1px solid var(--slate-200);
}
.universe-table tbody tr:last-child {
    border-bottom: none;
}
.universe-table td {
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.6;
    vertical-align: top;
}
.universe-table td.col-strategy {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--navy);
    border-right: 1px solid var(--slate-200);
    background: var(--slate-100);
}
.universe-table td.col-investments { color: var(--slate-700); }

/* ── Research architecture — stage timeline ── */
.stage-list {
    margin-top: 48px;
}

.stage-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 28px;
    padding: 32px 0;
    border-bottom: 1px solid var(--slate-200);
}

.stage-item:first-child {
    padding-top: 0;
}

.stage-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.stage-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.stage-number {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    color: var(--sienna);
}

.stage-marker::after {
    content: '';
    width: 1px;
    flex: 1;
    margin-top: 14px;
    background: var(--slate-200);
}

.stage-item:last-child .stage-marker::after {
    display: none;
}

.stage-content h3 {
    color: var(--navy);
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.stage-content p {
    font-size: 15px;
    color: var(--slate-700);
    margin: 0;
    max-width: 640px;
}

/* ── Strategy / market cards ── */
.strategy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.strategy-card {
    background: var(--white);
    padding: 32px;
    border-radius: 4px;
    border: 1px solid var(--slate-200);
    border-top: 3px solid var(--steel-blue);
}

.strategy-card.market {
    border-top-color: var(--sienna);
}

.strategy-card h3 {
    color: var(--navy);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 10px;
}

.strategy-card .market-tag {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sienna);
    margin-bottom: 8px;
}

.strategy-card p {
    font-size: 15px;
    margin: 0;
}

.strategy-closing {
    margin-top: 40px;
    font-size: 17px;
    color: var(--navy);
    border-left: 1px solid var(--sienna);
    padding-left: 24px;
}

/* ── Team ── */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.team-member {
    background: var(--slate-100);
    border: 1px solid var(--slate-200);
    border-top: 3px solid var(--sienna);
    border-radius: 4px;
    padding: 32px 28px;
}

section.bg-slate .team-member {
    background: var(--white);
}

.team-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--slate-200);
}

/* Portraits are pre-cropped on a shared eye-line at a uniform head scale,
   so the circle mask lands identically on all three. */
.team-portrait {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--slate-200);
    box-shadow: 0 0 0 1px var(--slate-200), 0 0 0 3px var(--white), 0 0 0 4px var(--sienna);
    margin-bottom: 22px;
    flex-shrink: 0;
}

.team-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 88px;
}

.team-member h3 {
    color: var(--navy);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
}

.team-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4;
    color: var(--steel-blue);
    margin-bottom: 0;
}

.team-member p {
    font-size: 14px;
    margin-bottom: 0;
}

.team-bio-list {
    margin: 0;
    padding-left: 16px;
}

.team-bio-list li {
    font-size: 13px;
    line-height: 1.5;
    color: var(--slate-700);
    margin-bottom: 10px;
}

.team-bio-list li:last-child {
    margin-bottom: 0;
}

.team-bio-list strong {
    color: var(--navy);
}

/* ── Insights ── */
.insight-list {
    margin-top: 40px;
}

.insight-card {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: 4px;
    padding: 36px 40px;
    margin-bottom: 24px;
}

.insight-meta {
    display: flex;
    gap: 16px;
    align-items: baseline;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.insight-meta .insight-tag { color: var(--sienna); }
.insight-meta .insight-date { color: var(--slate-400); font-weight: 500; }

.insight-card h3 {
    color: var(--navy);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.insight-card p {
    font-size: 15px;
    margin-bottom: 12px;
}

.insight-card p:last-child {
    margin-bottom: 0;
}

.insight-card details {
    margin-top: 16px;
}

.insight-card summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--steel-blue);
    letter-spacing: 0.02em;
    list-style: none;
    display: inline-block;
    transition: color 0.2s ease;
}

.insight-card summary::-webkit-details-marker {
    display: none;
}

.insight-card summary::after {
    content: ' \2192';
}

.insight-card details[open] summary::after {
    content: ' \2191';
}

.insight-card summary:hover {
    color: var(--navy);
}

.insight-full {
    margin-top: 24px;
    border-top: 1px solid var(--slate-200);
    padding-top: 8px;
}

.insight-full h2 {
    color: var(--navy);
    font-size: 16px;
    font-weight: 700;
    margin: 24px 0 8px;
    letter-spacing: -0.01em;
}

.insight-full p {
    font-size: 15px;
    margin-bottom: 12px;
}

.insight-math {
    background: var(--slate-100);
    border: 1px solid var(--slate-200);
    border-radius: 4px;
    padding: 20px 24px;
    margin: 20px 0;
    text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    color: var(--navy);
    letter-spacing: 0.02em;
}

.insight-math .math-caption {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--slate-400);
    font-weight: 500;
    margin-top: 10px;
    letter-spacing: 0.03em;
}

/* Drawn on a 720-unit viewBox and capped at 720px, so the figure renders
   about 1:1 and its 11–12px annotations stay at annotation size. At 460px
   the charts sat as small islands in a ~900px column. */
.chart-block svg {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    margin: 0 auto;
}

/* A 720-unit viewBox on a phone is a ~2.3x downscale, which would put the
   annotations near 7px. Scaling the type up in viewBox units instead pushes
   labels into the curves they sit beside, so hold the figure at a legible
   minimum and let it scroll within its own box — the page itself never
   scrolls sideways. */
@media (max-width: 640px) {
    .chart-block {
        padding-left: 0;
        padding-right: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .chart-block svg {
        min-width: 600px;
    }

    .chart-block .math-caption {
        padding: 0 16px;
    }
}

/* ── At a Glance (research note key takeaways) ── */
.at-a-glance {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-left: 3px solid var(--sienna);
    border-radius: 4px;
    padding: 24px 28px;
    margin: 24px 0 32px;
}

.at-a-glance-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sienna);
    margin-bottom: 12px;
}

.at-a-glance-list {
    margin: 0;
    padding-left: 18px;
}

.at-a-glance-list li {
    font-size: 15px;
    color: var(--navy);
    margin-bottom: 10px;
}

.at-a-glance-list li:last-child {
    margin-bottom: 0;
}

/* ── Newsletter signup (research listing + note pages) ── */
.newsletter-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-left: 3px solid var(--sienna);
    border-radius: 4px;
    padding: 28px 32px;
    margin-top: 40px;
}

.newsletter-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sienna);
    margin-bottom: 6px;
}

.newsletter-copy p {
    margin: 0;
    font-size: 15px;
    color: var(--navy);
    font-weight: 500;
}

.newsletter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.newsletter-form input[type="email"] {
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--navy);
    background: var(--slate-100);
    border: 1px solid var(--slate-200);
    border-radius: 4px;
    min-width: 220px;
    transition: border-color 0.2s ease;
}

.newsletter-form input[type="email"]::placeholder {
    color: var(--slate-400);
}

.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--steel-blue);
}

.newsletter-submit {
    padding: 11px 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--white);
    background: var(--navy);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.newsletter-submit:hover {
    background: var(--steel-blue);
}

.newsletter-status {
    flex-basis: 100%;
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--slate-400);
    display: none;
}

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


.insight-standfirst {
    font-size: 16px;
    color: var(--navy);
    font-weight: 500;
    border-left: 1px solid var(--sienna);
    padding-left: 20px;
    margin: 16px 0;
}

/* ── Research index (restrained list) ── */
.note-list {
    margin-top: 40px;
}

.note-list-item {
    padding: 32px 0;
    border-bottom: 1px solid var(--slate-200);
}

.note-list-item:first-child {
    padding-top: 0;
}

.note-list-item:last-child {
    border-bottom: none;
}

.note-list-item h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 4px 0 8px;
}

.note-list-item h3 a {
    color: var(--navy);
    text-decoration: none;
    transition: color 0.2s ease;
}

.note-list-item h3 a:hover {
    color: var(--steel-blue);
}

.note-list-item .insight-standfirst {
    margin-bottom: 12px;
}

.note-abstract {
    font-size: 15px;
    color: var(--slate-700);
    margin-bottom: 0;
}

/* A forthcoming note has no page to link to, so nothing else on the card
   signals that it is unreadable. Draining the ink and badging the date makes
   "Forthcoming" read as a state rather than as a publication month. */
.note-list-item.is-forthcoming h3,
.note-list-item.is-forthcoming .insight-tag,
.note-list-item.is-forthcoming .note-abstract,
.note-list-item.is-forthcoming .insight-standfirst {
    color: var(--slate-400);
}

.note-list-item.is-forthcoming .insight-date {
    padding: 2px 8px;
    border: 1px solid var(--slate-200);
    border-radius: 3px;
    background: var(--white);
    color: var(--slate-400);
}

.note-byline {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate-400);
    margin-bottom: 8px;
}

/* ── Note detail page ── */
.note-hero-byline {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 8px;
    margin-bottom: 0;
}

.note-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin: 32px 0;
}

.note-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.note-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 7px 7px 7px 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--navy);
    background: var(--white);
    border: 1px solid var(--slate-400);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.note-pdf-btn:hover {
    border-color: var(--navy);
    background: var(--slate-100);
}

.note-pdf-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    min-width: 26px;
    max-width: 26px;
    min-height: 26px;
    max-height: 26px;
    background: var(--navy);
    border-radius: 6px;
}

.note-pdf-icon svg {
    display: block;
    width: 11px;
    height: 11px;
}

.note-share {
    display: flex;
    align-items: center;
    gap: 12px;
}

.note-share-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
}

.note-share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--navy);
    border: 1px solid var(--slate-400);
    border-radius: 50%;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.note-share-icon svg {
    width: 15px;
    height: 15px;
}

.note-share-icon:hover {
    border-color: var(--navy);
    background: var(--slate-100);
}

.note-pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--slate-200);
}

/* Columns are assigned explicitly rather than by source order, so the middle
   button stays centred on the first and last notes, where one of the two
   adjacent links is absent. */
.note-pager-prev {
    grid-column: 1;
    justify-self: start;
}

.note-pager-index {
    grid-column: 2;
    justify-self: center;
}

.note-pager-next {
    grid-column: 3;
    justify-self: end;
}

.note-pager-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 22px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--navy);
    background: var(--white);
    border: 1px solid var(--slate-400);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.note-pager-btn:hover {
    border-color: var(--navy);
    background: var(--slate-100);
}

.note-pager-arrow {
    color: var(--sienna);
    font-weight: 700;
}

/* The row stays on a single line at every width; on narrow screens the
   Previous/Next buttons drop to arrows only rather than wrapping or stacking.
   Their accessible names come from aria-label on the anchor, so nothing is
   lost when the words are hidden. */
@media (max-width: 560px) {
    .note-pager {
        gap: 8px;
    }

    .note-pager-word {
        display: none;
    }

    .note-pager-btn {
        padding: 9px 14px;
        font-size: 13px;
    }

    .note-pager-prev,
    .note-pager-next {
        padding: 9px 13px;
    }
}

.btn-light {
    display: inline-block;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--navy);
    background: var(--white);
    border: none;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-light:hover {
    background: var(--slate-100);
    transform: translateY(-1px);
}

.contact-form {
    max-width: 640px;
}

/* Hidden target for the contact form's POST to the Google Form backend —
   keeps the submission on-page (no redirect) while the styled form stays on-brand. */
.gform-target {
    display: none;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate-700);
    margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 15px;
    color: var(--navy);
    background: var(--slate-100);
    border: 1px solid var(--slate-200);
    border-radius: 4px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--slate-400);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--steel-blue);
    background: var(--white);
}

.form-group textarea {
    min-height: 140px;
    resize: vertical;
}

.form-submit {
    display: inline-block;
    padding: 12px 32px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--white);
    background: var(--navy);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.form-submit:hover {
    background: var(--steel-blue);
    transform: translateY(-1px);
}

.form-status {
    margin-top: 16px;
    font-size: 14px;
    color: var(--navy);
    display: none;
}

/* ── Footer ── */
.footer {
    text-align: left;
    padding: 48px 0;
    border-top: 1px solid var(--slate-200);
    margin-top: auto;
    background: var(--slate-100);
}

/* Mirrors .section-content so the footer column lines up with page content. */
.footer-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 48px;
}

.footer p {
    font-size: 12px;
    color: var(--slate-400);
    margin: 0 0 16px 0;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    list-style: none;
    margin-bottom: 24px;
    padding: 0;
}

.footer-nav a {
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-700);
    text-decoration: none;
}

.footer-nav a:hover {
    color: var(--steel-blue);
}

.disclaimer {
    font-size: 11px;
    line-height: 1.4;
    color: var(--slate-700);
    text-align: left;
    margin: 24px 0 0;
    padding: 20px 24px;
    background: var(--white);
    border-radius: 4px;
    border: 1px solid var(--slate-200);
}

.disclaimer p {
    margin-bottom: 12px;
}

.disclaimer p:last-child {
    margin-bottom: 0;
}

/* ── Responsive — medium screens ── */
@media (max-width: 1024px) {
    .data-grid { grid-template-columns: repeat(2, 1fr); }
    .team-grid { gap: 16px; }
    .team-member { padding: 24px 18px; }
}

/* ── Responsive — mobile ── */
@media (max-width: 768px) {
    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
    section.page-hero h1 { font-size: 32px; }
    .data-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }
    .site-nav { padding: 12px 24px; }
    section { padding: 48px 0; }
    .section-content { padding: 0 24px; }
    .footer-content { padding: 0 24px; }
    .hero-content { padding: 72px 24px; }
    .page-hero-content { padding: 56px 24px 48px; }
    .logo { height: 36px; }
    .page-subnav { top: 61px; }
    .page-subnav-inner { padding: 0 24px; gap: 24px; }
    .nav-toggle { display: flex; }
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 10;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        background: var(--white);
        padding: 8px 24px 20px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        border-top: 1px solid var(--slate-200);
    }
    .nav-links.open { display: flex; }
    .nav-links a { display: block; padding: 10px 0; width: 100%; }
    .nav-links .cta-link { display: inline-block; width: auto; padding: 10px 24px; margin-top: 8px; }
    .comparison-table { min-width: 480px; }
    .comparison-table-wrap { overflow-x: auto; }
    .strategy-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .insight-card { padding: 28px 24px; }
    .method-compare { grid-template-columns: 1fr; }
    .think-compare { grid-template-columns: 1fr; }
    .oversight-grid { grid-template-columns: 1fr; }
    .oversight-ticks { grid-template-columns: 1fr; }
    .oversight-ticks span:last-child { display: none; }
    .oversight-rule { gap: 12px; }
    .oversight-root-label { font-size: 11px; letter-spacing: 0.1em; white-space: normal; text-align: center; }
    .formula-grid { grid-template-columns: 1fr; }
    .note-pager { gap: 10px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal {
        transition: none;
        opacity: 1;
        transform: none;
    }
    .data-card {
        transition: none;
    }
}

/* ── Print-only elements (research note masthead / colophon) ──
   Rendered in the DOM but shown only on paper. */
.print-only {
    display: none;
}

/* ── Print ──
   Target: an institutional white paper, not a screenshot of the page.
   Two constraints drive the choices below:
   1. Readers commonly print with "Background graphics" off, which drops every
      background-color. So structure is carried by borders and rules, which
      always print, never by fills.
   2. Page numbers and the source URL come from the browser's own print
      header/footer; CSS @page margin boxes are not supported in Chrome or
      Safari, so there is no reliable way to set running headers here. */
@media print {

    @page {
        size: A4;
        /* Wider side margins hold the measure near 80 characters at 10.5pt. */
        margin: 18mm 22mm 16mm;
    }

    /* ── Base ── */
    body {
        font-family: var(--font-serif);
        font-size: 10.5pt;
        line-height: 1.55;
        color: #1A1A1A;
        background: #FFFFFF;
        display: block;
    }

    /* Strip the screen shell: sticky nav, animated hero canvas, section tabs. */
    .site-nav,
    .hero-canvas,
    .page-subnav,
    .note-actions-row,
    .note-actions,
    .note-share,
    .note-pager,
    .newsletter-band,
    .gform-target,
    .footer-nav {
        display: none !important;
    }

    section.hero::after {
        display: none;
    }

    /* The reveal animation leaves elements at opacity 0 until scrolled into
       view; printing must never inherit that state. */
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    /* ── Layout — page margins define the measure, not the screen container ── */
    section {
        padding: 0;
    }

    section.bg-slate {
        background: none;
    }

    .section-content,
    .page-hero-content,
    .footer-content {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* ── Masthead ── */
    .print-only {
        display: block;
    }

    .print-masthead {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding-bottom: 6pt;
        border-bottom: 1.5pt solid var(--navy);
        margin-bottom: 22pt;
    }

    .print-masthead-logo {
        width: 34mm;
        height: auto;
    }

    .print-masthead-meta {
        font-family: 'Inter', sans-serif;
        font-size: 8pt;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--navy);
    }

    /* ── Note title block ── */
    section.page-hero {
        background: none;
        border-bottom: 0;
        overflow: visible;
    }

    section.page-hero .eyebrow {
        display: none;
    }

    section.page-hero h1 {
        color: #111111;
        font-size: 24pt;
        line-height: 1.15;
        margin-bottom: 8pt;
    }

    .note-hero-byline {
        font-family: 'Inter', sans-serif;
        font-size: 8.5pt;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #555555;
        margin: 0 0 20pt;
        padding-bottom: 12pt;
        border-bottom: 0.5pt solid #C8C8C8;
    }

    /* ── Headings — never leave one stranded at a page foot ── */
    h1, h2, h3, .section-subhead {
        break-after: avoid;
        page-break-after: avoid;
    }

    .insight-full h2 {
        font-family: 'Inter', sans-serif;
        font-size: 12pt;
        font-weight: 700;
        color: var(--navy);
        margin: 20pt 0 7pt;
    }

    .insight-full h3,
    .section-subhead {
        font-family: 'Inter', sans-serif;
        font-size: 10pt;
        font-weight: 700;
        color: var(--navy);
        margin: 14pt 0 6pt;
    }

    /* ── Body copy ── */
    p, .insight-full p, li {
        font-size: 10.5pt;
        line-height: 1.55;
        orphans: 3;
        widows: 3;
    }

    .insight-full p {
        margin-bottom: 8pt;
        text-align: justify;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    .lead {
        font-size: 12pt;
        color: #333333;
        margin-bottom: 14pt;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    /* ── At a Glance — rule, not a filled card ── */
    .at-a-glance {
        background: none;
        border: 0;
        border-left: 2pt solid var(--sienna);
        border-radius: 0;
        padding: 2pt 0 2pt 14pt;
        margin: 0 0 20pt;
        break-inside: avoid;
    }

    .at-a-glance-label {
        font-size: 8pt;
        margin-bottom: 7pt;
    }

    .at-a-glance-list {
        padding-left: 12pt;
    }

    .at-a-glance-list li {
        font-size: 9.5pt;
        line-height: 1.45;
        color: #1A1A1A;
        margin-bottom: 5pt;
    }

    /* ── Formulae and charts — unboxed, centred, never split ── */
    .insight-math {
        background: none;
        border: 0;
        border-radius: 0;
        padding: 6pt 0;
        margin: 14pt 0;
        font-size: 13pt;
        break-inside: avoid;
    }

    .insight-math .math-caption {
        font-size: 8pt;
        color: #555555;
        line-height: 1.4;
        margin-top: 7pt;
    }

    .chart-block {
        margin: 18pt 0;
    }

    /* Widened with the 720-unit viewBox — at the old 105mm the annotations
       came out around 5pt. */
    .chart-block svg {
        max-width: 150mm;
    }

    /* Chart palette is set with SVG presentation attributes; the screen greys
       are too light to survive print. CSS wins over those attributes. The two
       accent inks are re-asserted afterwards, because they carry meaning: the
       sienna labels name the loss, the navy one names realised performance. */
    .chart-block svg text {
        fill: #444444;
    }

    .chart-block svg text[fill="#A0522D"] {
        fill: var(--sienna);
    }

    .chart-block svg text[fill="#1B2A47"] {
        fill: #111111;
    }

    .chart-block svg [stroke="#E8ECF1"] {
        stroke: #AAAAAA;
    }

    .chart-block svg [stroke="#CBD5E1"] {
        stroke: #999999;
    }

    .chart-block svg [stroke="#94A3B8"] {
        stroke: #777777;
    }

    .chart-block svg circle[fill="#94A3B8"] {
        fill: #777777;
    }

    /* ── Comparison columns and flow diagrams ──
       The print canvas is ~627px wide, so the 768px mobile breakpoint applies
       and would collapse this to one column. A side-by-side contrast is the
       whole point of the block, so restore the two-column grid here. */
    .method-compare {
        grid-template-columns: 1fr 1fr;
        gap: 12pt;
        margin: 18pt 0;
        break-inside: avoid;
    }

    /* The border shorthand resets the reserved top rule, so restate it here —
       otherwise only .ours carries one in print and the compared rows fall
       out of alignment again. */
    .method-col {
        background: none;
        border: 0.5pt solid #C8C8C8;
        border-top: 2pt solid #C8C8C8;
        border-radius: 0;
        padding: 12pt;
    }

    .method-col.ours {
        border-top-color: var(--sienna);
    }

    .method-col h3 {
        font-size: 8pt;
        margin-bottom: 10pt;
    }

    .method-col.pool h3 {
        color: #666666;
    }

    .method-step {
        background: none;
        border: 0.5pt solid #D5D5D5;
        border-radius: 0;
        padding: 6pt 8pt;
        font-size: 8.5pt;
        line-height: 1.35;
    }

    .method-col.pool .method-step,
    .method-col.pool .method-down {
        color: #666666;
    }

    /* Tightened so the full chain fits one line at 166mm. Keeps the grid
       (and therefore the equal column widths) — only the ink is reduced. */
    .flow-diagram {
        margin: 18pt 0 4pt;
        break-inside: avoid;
    }

    .flow-step {
        background: none;
        border: 0.5pt solid #C8C8C8;
        border-top: 1.5pt solid #C8C8C8;
        border-radius: 0;
        padding: 5pt 6pt;
        font-size: 8pt;
        gap: 2pt;
        box-shadow: none;
    }

    .flow-step::before {
        font-size: 6.5pt;
        color: #888888;
    }

    .flow-diagram > .flow-step:nth-child(1),
    .flow-diagram > .flow-step:nth-child(3),
    .flow-diagram > .flow-step:nth-child(5) {
        border-top-color: #C8C8C8;
    }

    .flow-step.accent {
        border-top: 1.5pt solid var(--sienna);
        background: none;
    }

    .flow-arrow {
        padding: 0 4pt;
        font-size: 9pt;
    }

    .flow-caption {
        margin: 0 0 12pt;
        font-size: 7.5pt;
        color: #666666;
    }

    .highlight-quote {
        font-size: 12pt;
        margin: 18pt 0;
        padding-left: 14pt;
        color: #111111;
        break-inside: avoid;
    }

    .data-card {
        background: none;
        border: 0.5pt solid #C8C8C8;
        break-inside: avoid;
    }

    .data-card:hover {
        transform: none;
        box-shadow: none;
    }

    /* ── Colophon and legal footer — compact, legible, kept together ── */
    .print-colophon {
        font-family: 'Inter', sans-serif;
        font-size: 8pt;
        color: #555555;
        margin-top: 22pt;
        padding-top: 8pt;
        border-top: 0.5pt solid #C8C8C8;
        break-inside: avoid;
    }

    .footer {
        background: none;
        border-top: 0;
        padding: 0;
        margin-top: 14pt;
        break-before: avoid;
        break-inside: avoid;
    }

    .footer p {
        font-family: 'Inter', sans-serif;
        font-size: 7.5pt;
        color: #666666;
        margin: 0;
    }

    .disclaimer {
        background: none;
        border: 0;
        border-radius: 0;
        max-width: none;
        padding: 0;
        margin: 8pt 0 0;
        font-family: 'Inter', sans-serif;
        font-size: 7pt;
        line-height: 1.4;
        color: #555555;
    }

    .disclaimer p {
        font-size: 7pt;
        line-height: 1.4;
        margin-bottom: 5pt;
        text-align: left;
    }
}