/* =========================================================================
   ML Capital Corp. — mlcapital.ca
   "Annual report — ink on stock." One stylesheet, system fonts only,
   no external requests. Light + dark, both driven by prefers-color-scheme.
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* surfaces */
  --paper:       #FAF9F6;
  --paper-alt:   #F1EFE9;

  /* ink */
  --ink:         #1A1D2B;
  --ink-2:       #454A5E;
  --muted:       #63687C;

  /* brand — inherited from the existing wordmark */
  --navy:        #2E3558;
  --navy-deep:   #1E2440;
  --tint-pos:    46 53 88;

  /* the only second colour on the site */
  --negative:    #8C2F2A;
  --tint-neg:    140 47 42;

  /* hero scrim — paper at two strengths, for text laid over the photograph */
  --scrim-0: rgb(250 249 246 / .96);
  --scrim-1: rgb(250 249 246 / .68);

  /* rules */
  --rule:        #DFDCD4;
  --rule-strong: #B7B3A8;
  --focus:       #2E3558;

  /* table tint alphas — hard cap 0.20 */
  --a1: 0.05; --a2: 0.10; --a3: 0.15; --a4: 0.20;

  /* type stacks */
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino,
           "Book Antiqua", Cambria, Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --num:   var(--sans);

  /* type scale */
  --fs-hero:    clamp(2.5rem, 1.55rem + 3.6vw, 4.25rem);
  --fs-h1:      clamp(2rem, 1.55rem + 1.8vw, 2.75rem);
  --fs-h2:      clamp(1.5rem, 1.32rem + 0.75vw, 1.875rem);
  --fs-h3:      1.25rem;
  --fs-lede:    clamp(1.125rem, 1.05rem + 0.32vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-eyebrow: 0.6875rem;
  /* Sized so the longest figure ("+1,703.3%", 4.98em) still clears its column's
     padding at every width down to the 900px four-column breakpoint. */
  --fs-stat:    clamp(1.75rem, 4.4vw - 10px, 2.5rem);
  --fs-table:   0.875rem;
  --fs-nav:     0.8125rem;

  /* spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px;
  /* the big section gap breathes on desktop, compresses on phones */
  --s-9: clamp(56px, 12vw, 96px);
  --section: clamp(64px, 9vw, 128px);
  --gutter:  clamp(20px, 5vw, 56px);
  --wrap:    1180px;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:#12141F; --paper-alt:#191C2A;
    --ink:#E9E7E1; --ink-2:#ADB1C0; --muted:#7F849A;
    --navy:#B9C0DE; --navy-deep:#D5DAEE;
    --tint-pos: 185 192 222;
    --negative:#DE9187;
    --tint-neg: 222 145 135;
    --scrim-0: rgb(18 20 31 / .94);
    --scrim-1: rgb(18 20 31 / .66);
    --rule:#292D3D; --rule-strong:#3C4256; --focus:#B9C0DE;
    --a1:0.06; --a2:0.10; --a3:0.14; --a4:0.18;
  }
}

/* ---------- 2. RESET + BASE --------------------------------------------- */

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

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  hyphens: none;
  overflow-x: hidden;         /* the page body never scrolls sideways */
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  text-wrap: balance;
}
p { text-wrap: pretty; }

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
a:hover { color: var(--navy-deep); border-bottom: 2px solid var(--navy-deep); padding-bottom: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

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

/* ---------- 3. LAYOUT PRIMITIVES ---------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.measure { max-width: var(--measure); }

/* marginal-label grid — the structural move borrowed from print */
.mgrid { display: grid; gap: var(--s-3); }
/* Grid items default to min-width:auto, which makes them refuse to shrink below
   their content. Without this the 760px-min returns table blows out its column
   instead of scrolling inside it. */
.mgrid > * { min-width: 0; }
.mgrid > .mlabel {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
@media (min-width: 1000px) {
  .mgrid { grid-template-columns: 10rem minmax(0, 1fr); column-gap: 4rem; gap: 0; }
  .mgrid > .mlabel { padding-top: .55em; }
}
/* wide artifacts — chart, table — break out of the label grid to full width */
.mgrid > .full { grid-column: 1 / -1; margin-top: var(--s-5); }

section { padding-block: var(--section); }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: var(--s-3);
}

/* ---------- 4. HEADER / NAV --------------------------------------------- */

.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .55em;
  border: 0;
  padding: 0;
}
.wordmark:hover { border: 0; }
.wordmark .mark {
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: -.005em;
  color: var(--navy);
}
.wordmark .corp {
  font-family: var(--sans);
  font-size: .625rem;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav { display: flex; gap: var(--s-6); }
.site-nav a {
  font-family: var(--sans);
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  border: 0;
  padding-block: 12px;
  position: relative;
}
.site-nav a:hover { color: var(--ink); border: 0; }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 5px;
  border-bottom: 1px solid var(--navy);
}

@media (max-width: 719px) {
  .site-header .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-1);
    padding-block: var(--s-4);
    min-height: 0;
  }
  .site-nav { gap: var(--s-5); flex-wrap: wrap; }
  .wordmark .mark { font-size: 1.4rem; }
}
/* Narrow phones: the four links must hold ONE line — a wrapped nav orphans
   CONTACT onto its own row and the header eats a quarter of the screen. */
@media (max-width: 479px) {
  .site-nav { gap: var(--s-4); flex-wrap: nowrap; }
  .site-nav a { font-size: 0.75rem; letter-spacing: .06em; }
}
/* 320-class screens: one notch tighter or the nowrap row clips the page edge */
@media (max-width: 379px) {
  .site-nav { gap: var(--s-3); }
  .site-nav a { font-size: 0.7rem; letter-spacing: .04em; }
}

/* ---------- 5. PAGE HEAD ------------------------------------------------ */

.page-head { padding-top: var(--s-9); padding-bottom: 0; }
.page-head h1 { font-size: var(--fs-h1); line-height: 1.12; letter-spacing: -.01em; }

.head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.stamp {
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the page rule — the only ornament in the system, once per page */
.page-rule {
  position: relative;
  border: 0;
  border-top: 1px solid var(--rule);
  margin-top: var(--s-5);
}
.page-rule::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 64px;
  border-top: 2px solid var(--navy);
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-2);
  margin-top: var(--s-5);
}

/* ---------- 6. HOME ------------------------------------------------------ */

/* Full-bleed photographic hero — the client's lighthouse, carried over from
   the previous site. The headline sits over the open ocean on a paper-fade
   scrim, so contrast holds in both colour modes without touching the photo;
   the lighthouse stays clear on the right. The bottom edge fades into the
   page so the image reads as part of the document, not a banner ad. */
.hero-photo { position: relative; padding-block: 0; }   /* flush under the header */
.hero-img {
  display: block;
  width: 100%;
  height: clamp(440px, 60vh, 680px);
  object-fit: cover;
  object-position: 76% 30%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--paper) 0%, transparent 24%),
    linear-gradient(90deg, var(--scrim-0) 0%, var(--scrim-0) 16%, var(--scrim-1) 46%, transparent 70%);
}
.hero-copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.hero-copy .wrap { width: 100%; }
.hero-copy h1 {
  font-size: var(--fs-hero);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--navy);
  max-width: 12ch;
}
.hero-copy .lede { margin-top: var(--s-6); }

/* Small screens: overlaid text on a short crop is where this treatment goes
   wrong, so the copy drops below the image onto plain paper. */
@media (max-width: 719px) {
  .hero-photo { --hero-h: clamp(240px, 52vw, 400px); }
  .hero-img { height: var(--hero-h); }
  /* The copy is static below the image here, so the scrim must cover ONLY the
     image band — full-section inset would wash the text out. */
  .hero-scrim {
    inset: 0 0 auto 0;
    height: var(--hero-h);
    background: linear-gradient(0deg, var(--paper) 0%, transparent 30%);
  }
  .hero-copy { position: static; }
  .hero-copy .wrap { padding-top: var(--s-6); }
}
@media (prefers-color-scheme: dark) {
  /* soften the photo so it doesn't glare against the dark paper */
  .hero-img { filter: brightness(.82) saturate(.92); }
}

.prose p + p { margin-top: var(--s-5); }
.prose { color: var(--ink-2); }

/* ---------- 7. STAT STRIPS ---------------------------------------------- */

.strip {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
  grid-template-columns: repeat(4, 1fr);
}
.strip.two-row { grid-template-columns: repeat(4, 1fr); }
.strip > div {
  background: var(--paper);
  padding: var(--s-5) var(--s-4);
}
/* The leftmost cell of each row sits flush with the page grid; every other cell
   is inset from the divider on both sides so no figure ever touches a rule. */
.strip > div:nth-child(4n + 1) { padding-left: 0; }
.strip .k {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.strip .v {
  display: block;
  font-family: var(--num);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--fs-stat);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--ink);
  margin-top: var(--s-3);
}
.strip .v.neg, .strip .v .neg { color: var(--negative); }
.strip .q {
  display: block;
  font-family: var(--sans);
  font-size: .75rem;
  color: var(--muted);
  margin-top: var(--s-2);
}
.strip-note {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-top: var(--s-3);
}

/* Two columns, then one. --fs-stat is calibrated to the four-column case (the
   binding one — columns narrow faster than the viewport-scaled type does), so
   the wider layouts can carry a larger figure. */
@media (max-width: 899px) {
  .strip, .strip.two-row { grid-template-columns: repeat(2, 1fr); }
  .strip > div:nth-child(odd)  { padding-left: 0; }
  .strip > div:nth-child(even) { padding-left: var(--s-4); }
  .strip .v { font-size: clamp(1.75rem, 6.5vw, 2.5rem); }
}
/* Phones keep TWO columns — a single-file stack of stat cells is ~600px of
   scrolling on the home page and double that on Performance. The stat size
   drops so "+1,703.3%" (the longest figure, 4.98em) still clears a half-width
   column at 320px. */
@media (max-width: 479px) {
  .strip .v { font-size: 1.35rem; margin-top: var(--s-2); }
  .strip .q { font-size: 0.6875rem; }
  .strip > div { padding-block: var(--s-4); }
}

/* ---------- 8. GROWTH CHART --------------------------------------------- */

.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.chart-head h2 { font-size: var(--fs-h2); }

/* readout row — this site has no tooltips */
.readout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  border-block: 1px solid var(--rule);
  padding-block: var(--s-3);
  min-height: 62px;
  align-content: center;
}
.readout .k {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
}
.readout .v {
  display: block;
  font-family: var(--num);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: .8125rem;
  color: var(--ink);
  margin-top: 3px;
}
.readout .v.neg { color: var(--negative); }
@media (max-width: 559px) {
  .readout { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); min-height: 0; }
}

.chart-wrap { position: relative; touch-action: pan-y; margin-top: var(--s-4); }
.chart-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.chart-wrap svg { display: block; width: 100%; height: auto; }

/* The drawdown band must be filled from CSS, not an SVG presentation attribute:
   a nested var() inside rgb() does not substitute in an attribute and resolves
   to opaque black. */
.chart-wrap .dd-band { fill: rgb(var(--tint-neg) / .06); }

.nojs-note {
  font-family: var(--sans);
  font-size: var(--fs-small);
  color: var(--ink-2);
  padding-block: var(--s-5);
}

.caption {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-top: var(--s-3);
}
.caption + .caption { margin-top: var(--s-1); }

details.data-dump { margin-top: var(--s-5); }
details.data-dump > summary {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  color: var(--muted);
  cursor: pointer;
  list-style-position: outside;
}
details.data-dump > summary:hover { color: var(--ink); }
details.data-dump table {
  margin-top: var(--s-4);
  border-collapse: collapse;
  font-family: var(--num);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--fs-caption);
  min-width: 260px;
}
details.data-dump th, details.data-dump td {
  padding: 6px 16px 6px 0;
  border-bottom: 1px solid var(--rule);
  text-align: right;
  font-weight: 400;
  color: var(--ink-2);
}
details.data-dump th { text-align: left; color: var(--muted); font-family: var(--sans); }

/* ---------- 9. RETURNS TABLE -------------------------------------------- */

.tscroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin-top: var(--s-5);
}
.tscroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.scroll-hint {
  display: none;
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: .06em;
  color: var(--muted);
  margin-top: var(--s-4);
}
@media (max-width: 720px) { .scroll-hint { display: block; } }

#returns {
  table-layout: fixed;
  width: 100%;
  min-width: 760px;
  border-collapse: separate;      /* mandatory: collapse + sticky is broken on iOS */
  border-spacing: 0;
  font-family: var(--num);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--fs-table);
}
#returns th, #returns td { padding: 9px 10px; text-align: right; }

#returns thead th {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper);
}
#returns thead th:first-child { text-align: left; }
#returns thead th.yr { color: var(--ink); }

#returns tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
#returns tbody td {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  background-color: var(--paper);
}
#returns tbody td.neg { color: var(--negative); }
#returns tbody td.nil { color: var(--muted); }
#returns tbody tr:last-child th,
#returns tbody tr:last-child td { border-bottom: 1px solid var(--rule-strong); }

/* the YEAR summary column */
#returns .yr {
  border-left: 1px solid var(--rule);
  background-color: var(--paper-alt);
  font-weight: 600;
}
#returns thead th.yr { background-color: var(--paper); }

/* Magnitude in the background, sign in the ink — four bins, hard cap 0.20.
   The tint is a background-IMAGE so it composites over whatever background-color
   the cell already has: --paper for months, --paper-alt for the YEAR column.
   That also keeps the sticky cells fully opaque, which they must be. */
#returns td.t1 { background-image: linear-gradient(rgb(var(--tint-pos)/var(--a1)) 0 0); }
#returns td.t2 { background-image: linear-gradient(rgb(var(--tint-pos)/var(--a2)) 0 0); }
#returns td.t3 { background-image: linear-gradient(rgb(var(--tint-pos)/var(--a3)) 0 0); }
#returns td.t4 { background-image: linear-gradient(rgb(var(--tint-pos)/var(--a4)) 0 0); }
#returns td.t1.neg { background-image: linear-gradient(rgb(var(--tint-neg)/var(--a1)) 0 0); }
#returns td.t2.neg { background-image: linear-gradient(rgb(var(--tint-neg)/var(--a2)) 0 0); }
#returns td.t3.neg { background-image: linear-gradient(rgb(var(--tint-neg)/var(--a3)) 0 0); }
#returns td.t4.neg { background-image: linear-gradient(rgb(var(--tint-neg)/var(--a4)) 0 0); }

/* sticky year + total columns, so mobile scrubbing keeps its anchors */
#returns tbody th, #returns thead th:first-child {
  position: sticky; left: 0; z-index: 2;
  border-right: 1px solid var(--rule);
}
#returns .yr { position: sticky; right: 0; z-index: 2; }

.tscroll.is-scrolled #returns tbody th,
.tscroll.is-scrolled #returns thead th:first-child { box-shadow: 1px 0 0 var(--rule); }

@media (max-width: 900px) { #returns { font-size: .8125rem; } }
@media (max-width: 639px) {
  #returns { font-size: .75rem; }
  #returns th, #returns td { padding: 8px 6px; }
}

/* desktop hover — must never repaint a cell background, it would fight the tint */
@media (hover: hover) {
  #returns tbody tr:hover td,
  #returns tbody tr:hover th {
    box-shadow: inset 0 1px 0 var(--rule-strong), inset 0 -1px 0 var(--rule-strong);
  }
  #returns tbody tr:hover th { color: var(--navy); }
  #returns tbody td:hover { outline: 1px solid var(--ink); outline-offset: -1px; }
}

.summary-line {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

/* ---------- 10. NOTES / CONTACT ----------------------------------------- */

.notes p {
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-2);
}
.notes p + p { margin-top: var(--s-4); }

.deflist { border-top: 1px solid var(--rule); margin-top: var(--s-6); }
.deflist > div {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.deflist dt {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.deflist dd { margin: 0; color: var(--ink); }
.deflist dd.tabular { font-family: var(--num); font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) {
  .deflist > div { grid-template-columns: 10rem minmax(0, 1fr); column-gap: 4rem; gap: 0; }
  .deflist dt { padding-top: .35em; }
}

.principal { margin-top: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--rule); }
.principal .name { font-family: var(--serif); font-size: var(--fs-h3); color: var(--ink); }
.principal .role {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--s-2);
}

/* ---------- 11. FOOTER --------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: var(--s-7);
  padding-block: 56px;
  font-family: var(--sans);
  font-size: var(--fs-caption);
  color: var(--muted);
}
.site-footer .cols {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .site-footer .cols { grid-template-columns: repeat(3, 1fr); } }
.site-footer a { color: var(--muted); border-bottom-color: var(--rule); }
.site-footer a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-top: var(--s-1); }
.site-footer .legal {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-size: .75rem;
}

/* ---------- 12. PRINT ---------------------------------------------------- */

@media print {
  :root {
    --paper:#fff; --paper-alt:#f4f4f4;
    --ink:#000; --ink-2:#222; --muted:#555;
    --navy:#2E3558; --negative:#8C2F2A;
    --rule:#ccc; --rule-strong:#999;
    --a1:.10; --a2:.10; --a3:.15; --a4:.15;
  }
  @page { margin: 14mm; }
  body { background: #fff; font-size: 10pt; }
  .site-nav, .site-footer ul, .scale-toggle, .scroll-hint, .more, details.data-dump { display: none; }
  .site-header { border-bottom: 1px solid #999; }
  .print-head { display: block !important; }
  section { padding-block: 14pt; }
  .tscroll { overflow: visible; }
  #returns { min-width: 0; font-size: 9pt; break-inside: avoid; }
  #returns thead { display: table-header-group; }
  #returns tbody th, #returns thead th:first-child, #returns .yr {
    position: static; box-shadow: none;
  }
  .chart-wrap { width: 16cm; break-inside: avoid; }
  .notes { break-before: avoid; }
  a { border-bottom: 0; }
}
.print-head { display: none; }