/* EcomIQ. Ledger paper and ink. One accent: ledger red, used only for money
   leaving. Two faces: Newsreader for figures and headings, IBM Plex Sans for
   prose and ledger rows. Grounds change per chapter on a hard edge. */

@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/newsreader.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("assets/fonts/newsreader-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/plex-sans.woff2") format("woff2");
}

:root {
  --sc-canvas:     #0B1B44;   /* deep blue ground */
  --sc-surface:    #102557;
  --sc-ink:        #E4EBFF;   /* light blue text */
  --sc-ink-soft:   #A5B6EC;
  --sc-accent:     #A98BFF;   /* violet */
  --sc-accent-ink: #0B1B44;
  --sc-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --sc-font-text:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-shadow-color: 222 55% 10%;

  --paper:   #0B1B44;
  --raised:  #142F73;
  --loss:    #FF7B6E;   /* money going out, losses. The only red. */
  --paper2:  #0F2358;
  --bill:    #F8FAFF;
  --desk:    #071233;
  --rule:    #1D3573;
  --rule-strong: #3C5AA3;
  --margin-red: color-mix(in oklab, var(--sc-accent) 38%, transparent);
  --line: 2.25rem;            /* ledger line pitch */
  --r: 3px;                   /* one radius for the page: barely there */
}

html { background: var(--paper); color-scheme: dark; }
body { background: var(--paper); font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
b { font-weight: 600; }
.nowrap { white-space: nowrap; }

.mark {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: 1.25rem; letter-spacing: -0.01em; color: var(--sc-ink);
}
.mark--sm { font-size: 1rem; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--sc-ink); color: var(--paper); padding: 0.6rem 0.9rem;
  border-radius: var(--r); text-decoration: none;
}
.skip:focus-visible { top: 1rem; }

/* ------------------------------------------------------------- the folio --
   The page's only navigation, in the margin like a printed folio. It names the
   chapter you are in. Desktop only; on a phone the chapter heads carry it. */
.folio {
  position: fixed; left: clamp(0.9rem, 1.6vw, 1.6rem); top: 50%; z-index: 60;
  writing-mode: vertical-rl; transform: rotate(180deg) translateY(50%);
  display: none; gap: 0.5rem; align-items: center;
  font-size: var(--sc-t-xs); letter-spacing: 0.06em; color: var(--sc-ink-soft);
  /* Its own ground, so it stays legible while a dark chapter slides under it. */
  background: var(--paper); padding: 0.7rem 0.3rem; border-radius: var(--r);
  transition: color 200ms var(--sc-ease-out), background-color 200ms var(--sc-ease-out);
}
.folio__mark { font-weight: 600; color: var(--sc-ink); transition: color 200ms var(--sc-ease-out); }
.folio__now { text-decoration: none; }
.folio.is-dark { color: #B2C2E4; background: var(--desk); }
.folio.is-dark .folio__mark { color: var(--sc-ink); }
@media (min-width: 1100px) { .folio { display: flex; } }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0.85rem 1.4rem;
  background: var(--sc-ink); color: var(--paper);
  font-weight: 500; font-size: var(--sc-t-base); text-decoration: none; white-space: nowrap;
  border-radius: var(--r);
  box-shadow: var(--sc-e1);
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.btn::after { content: "→"; margin-left: 0.6rem; transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--sc-accent); box-shadow: var(--sc-e2); }
  .btn:hover::after { transform: translateX(3px); }
}
.btn:active { transform: translateY(1px) scale(0.99); }

/* ------------------------------------------------------- 1 · title page -- */
.title {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding: clamp(1.1rem, 3vh, 2.2rem) var(--sc-gutter) clamp(1.25rem, 4vh, 2.75rem);
  background: var(--paper);
}
.title__mast {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule-strong);
}
.title__kind { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.title__claim { align-self: end; max-width: 54rem; }
.title__h1 {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(2.35rem, 1.1rem + 4.6vw, 5.6rem);
  line-height: 1.02; letter-spacing: -0.028em;
  text-wrap: balance; color: var(--sc-ink);
}
.title__sub {
  margin-top: clamp(1rem, 2.4vh, 1.5rem);
  font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft);
  max-width: 34ch; text-wrap: pretty;
}
.title__claim .btn { margin-top: clamp(1.4rem, 3.4vh, 2.25rem); }

.title__fig {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem;
  border-top: 1px solid var(--rule-strong); padding-top: 0.75rem;
}
.title__fig figcaption {
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft); padding-bottom: 0.6em;
}
.title__ex { font-size: var(--sc-t-xs); font-style: italic; font-family: var(--sc-font-display); font-size: 0.95rem; }
.title__num {
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: clamp(4rem, 17vw, 13.5rem); line-height: 0.82; letter-spacing: -0.035em;
  font-variant-numeric: lining-nums tabular-nums;
  color: #7287C8;      /* quiet: the figure everyone already looks at */
}

/* -------------------------------------------------------------- chapters -- */
.ch { position: relative; padding-block: clamp(4.5rem, 12vh, 9rem); }
.ch__wrap { max-width: 82rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
.ch__wrap--split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 7rem); align-items: center;
}
.ch__no {
  font-family: var(--sc-font-display); font-style: italic; font-weight: 400;
  font-size: var(--sc-t-xl); color: var(--sc-accent); line-height: 1;
  margin-bottom: 0.9rem;
}
.ch__no--inline { display: inline; font-size: 1em; margin: 0 0.35em 0 0; }
.ch__h {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-3xl); line-height: 1.04; letter-spacing: -0.025em;
  text-wrap: balance; margin-bottom: clamp(1.25rem, 3vh, 2rem);
}
.ch p { max-width: 38rem; text-wrap: pretty; }
.ch p + p { margin-top: 1rem; }

[data-ground="paper2"] { background: var(--paper2); }
[data-ground="paper"]  { background: var(--paper); }

/* ----------------------------------------------------------- the ledger -- */
.ledger { font-variant-numeric: lining-nums tabular-nums; }
.ledger__row {
  display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto;
  align-items: baseline; gap: 0.5rem;
  min-height: var(--line); padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule-strong);
}
.ledger__sign { color: var(--loss); font-weight: 600; }
.ledger__name { color: var(--sc-ink); }
.ledger__amt {
  position: relative; min-width: 6.5ch; text-align: right;
  font-family: var(--sc-font-display); font-size: 1.15em; font-weight: 500;
}
.ledger__amt--blank::before, .amt__blank {
  content: ""; position: absolute; right: 0; bottom: 0.2em; width: 5.5ch;
  border-bottom: 1.5px dotted var(--sc-ink-soft);
}
.ledger__q { color: var(--sc-accent); }
.ledger__row--open .ledger__amt { color: var(--sc-ink); }
.ledger__row--total { border-bottom: 0; border-top: 3px double var(--sc-ink); margin-top: -1px; }
.ledger__row--total .ledger__name { font-weight: 600; }

.where__sheet {
  background: var(--paper);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--r);
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.ex-note {
  margin-top: 1rem; font-family: var(--sc-font-display); font-style: italic;
  font-size: 0.98rem; color: var(--sc-ink-soft);
}

/* -------------------------------------------------- 3 · the statement ----
   The peak. Ruled ledger paper with a red double margin. site.js writes
   --eaten (0 to 0.9), --ruled (0 to 1) and --land (0 to 1) on the stage, and
   --w (0 to 1) on each debit row. The defaults below are the FINISHED
   statement, so without JS the page still says the whole thing. */
.stmt {
  --eaten: 0.9; --ruled: 1; --land: 1;
  height: 100vh; height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(1rem, 3.5vh, 2.25rem) var(--sc-gutter) clamp(1rem, 4vh, 2.5rem);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px), var(--rule) var(--line));
}
/* The red double margin of a ledger sheet. */
.stmt::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--sc-gutter) - 0.9rem);
  width: 0.35rem; border-left: 1px solid var(--margin-red); border-right: 1px solid var(--margin-red);
  pointer-events: none;
}
.stmt__head {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.35rem 0 0.8rem; border-bottom: 1px solid var(--rule-strong);
  background: var(--paper);
}
.stmt__title {
  font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl);
  letter-spacing: -0.015em;
}
.stamp {
  display: inline-block;
  font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.01em;
  color: var(--sc-accent); background: var(--paper);
  border: 1px solid var(--sc-accent); border-radius: var(--r);
  padding: 0.3rem 0.55rem;
}

.stmt__fig { align-self: center; min-width: 0; }
.fig__label {
  position: relative; height: 1.6em;
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.fig__l {
  position: absolute; left: 0; top: 0; background: var(--paper); padding-right: 0.4em;
  transition: opacity 200ms var(--sc-ease-out);
}
.fig__l--sales  { opacity: 0; }
.fig__l--left   { opacity: 0; }
.fig__l--profit { opacity: 1; }
.stmt[data-phase="sales"] .fig__l--sales  { opacity: 1; }
.stmt[data-phase="left"]  .fig__l--left   { opacity: 1; }
.stmt:is([data-phase="sales"], [data-phase="left"]) .fig__l--profit { opacity: 0; }

.fig {
  position: relative; display: inline-block;
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: min(10vw, 15vh, 9rem); line-height: 1.02; letter-spacing: -0.04em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap; margin: 0.08em 0 0.12em;
}
.fig__ink {
  position: relative; display: block; color: var(--sc-ink);
  clip-path: inset(-0.1em calc(var(--eaten) * 100%) -0.2em -0.1em);
  opacity: calc(1 - var(--land));
}
/* The eaten part is not gone, it is spent: a red outline where the ink was. */
.fig__ghost {
  position: absolute; inset: 0;
  color: transparent; -webkit-text-stroke: 1.25px var(--loss);
  clip-path: inset(-0.1em -0.1em -0.2em calc((1 - var(--eaten)) * 100%));
  opacity: calc(0.75 * (1 - var(--land)));
}
.fig__land {
  position: absolute; left: 0; top: 0; color: var(--sc-ink);
  opacity: var(--land);
  transform: translateY(calc((1 - var(--land)) * 0.1em));
}
.fig__note { font-size: var(--sc-t-base); color: var(--sc-ink-soft); max-width: 30rem; }
.fig__note b { color: var(--sc-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.fig__note--run { opacity: clamp(0, calc(1 - var(--land) * 2), 1); }
.fig__notes { display: grid; }
.fig__notes > * { grid-area: 1 / 1; }
.fig__note--land {
  color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.4;
  opacity: clamp(0, calc(var(--land) * 2 - 1), 1); text-wrap: pretty;
}

.stmt__ledger { align-self: center; background: var(--paper); }
.ledger--live .ledger__row[data-debit] { --w: 1; }
.amt__val {
  display: inline-block; color: var(--loss);
  clip-path: inset(-0.2em calc((1 - var(--w)) * 100%) -0.3em -0.2em);
}
.amt__blank { opacity: calc(1 - var(--w)); }
.ledger--live .ledger__row[data-debit] .ledger__name {
  color: color-mix(in oklab, var(--sc-ink) calc(70% + var(--w) * 30%), var(--paper));
}
.dbl { display: grid; gap: 3px; margin-top: 0.7rem; }
.dbl i { display: block; height: 1.5px; background: var(--sc-ink); transform-origin: left; transform: scaleX(var(--ruled)); }
.dbl i + i { transform: scaleX(clamp(0, calc(var(--ruled) * 1.25 - 0.25), 1)); }
.ledger__row--profit {
  border-bottom: 0; font-size: var(--sc-t-lg);
  opacity: var(--land);
}
.ledger__row--profit .ledger__name { font-weight: 600; }
.ledger__row--profit .ledger__amt { font-weight: 600; }

/* --------------------------------------------------------- 4 · the report */
.ch--report { background: var(--desk); color: var(--sc-ink); }
.ch--report .ch__h { color: #EEF2FB; }
.ch--report .report__copy > p { color: #B8C6E6; }
.ch--report .ch__no { color: #BBA2FF; }
.four { margin-top: clamp(1.5rem, 4vh, 2.5rem); counter-reset: four; display: grid; gap: 0; }
.four li {
  counter-increment: four;
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.5rem;
  padding: 0.9rem 0; border-top: 1px solid #2A4378;
  color: #B8C6E6; max-width: 36rem;
}
.four li::before {
  content: counter(four); font-family: var(--sc-font-display); font-size: 1.35rem; line-height: 1.2; color: #BBA2FF;
}
.four b { color: #EEF2FB; font-weight: 500; }

.report__desk { position: relative; padding: 1.5rem 0 1.5rem 1.5rem; }
.sheet {
  position: relative; z-index: 1;
  background: var(--raised); color: var(--sc-ink);
  border: 1px solid #2B4A96;
  padding: clamp(1.25rem, 2.6vw, 2.25rem);
  border-radius: var(--r);
  box-shadow: 0 2px 4px hsl(222 55% 8% / 0.35), 0 22px 48px -12px hsl(222 55% 8% / 0.6);
  font-size: var(--sc-t-sm); line-height: 1.5;
  max-width: 34rem; margin-left: auto;
}
.sheet--under {
  position: absolute; inset: 0.2rem 1.6rem 2.6rem 0; z-index: 0;
  max-width: none; background: #1C3A82;
  rotate: -2.5deg;
  box-shadow: 0 18px 40px -14px hsl(222 55% 8% / 0.6);
}
.sheet__head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--rule-strong); padding-bottom: 0.6rem; }
.sheet__brand { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.05rem; }
.sheet__meta { color: var(--sc-ink-soft); }
.stamp--sheet { margin: 0.8rem 0 0; }
.sheet__k {
  font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--sc-ink-soft);
  margin-bottom: 0.35rem;
}
.sheet__profit { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.sheet__big {
  font-family: var(--sc-font-display); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums;
}
.sheet__vs { margin-top: 0.35rem; color: var(--loss); font-weight: 500; font-variant-numeric: tabular-nums; }
.sheet__prod { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.ptab { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.ptab th, .ptab td { padding: 0.28rem 0; text-align: right; font-weight: 400; }
.ptab th:first-child { text-align: left; }
.ptab thead th { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--sc-ink-soft); border-bottom: 1px solid var(--rule-strong); }
.ptab tbody tr + tr > * { border-top: 1px solid var(--rule); }
.ptab__loss th, .ptab__loss td { color: var(--loss); font-weight: 600; }
.ptab tfoot > tr > * { border-top: 3px double var(--sc-ink); font-weight: 600; padding-top: 0.4rem; }
.sheet__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.sheet ul li { position: relative; padding-left: 0.9rem; }
.sheet ul li + li { margin-top: 0.45rem; }
.sheet ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.35rem; height: 1px; background: var(--sc-ink-soft); }
.sheet__act { padding: 1rem 0 0.4rem; }
.sheet__act p:last-child { font-family: var(--sc-font-display); font-size: 1.2rem; line-height: 1.35; }
.sheet__sign { margin-top: 0.9rem; font-family: var(--sc-font-display); font-style: italic; color: var(--sc-ink-soft); text-align: right; }

/* --------------------------------------------------------- 5 · access ---- */
.how__head .ch__h { max-width: 18ch; }
.how__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.steps li {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem;
  padding: 1.25rem 0; border-top: 1px solid var(--rule-strong);
}
.steps li:last-child { border-bottom: 1px solid var(--rule-strong); }
.steps__n {
  font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 0.9;
  color: var(--sc-ink); font-variant-numeric: lining-nums;
}
.steps h3 { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl); line-height: 1.15; letter-spacing: -0.012em; margin-bottom: 0.4rem; }
.steps p { color: var(--sc-ink-soft); }
.access {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--paper2); border-radius: var(--r);
  border: 1px solid var(--rule-strong);
}
.access__h { font-size: var(--sc-t-sm); font-weight: 600; letter-spacing: 0.04em; color: var(--sc-ink-soft); margin-bottom: 1rem; }
.access p + p { margin-top: 0.9rem; }
.access b { color: var(--sc-ink); }
.price {
  margin-top: clamp(3rem, 8vh, 5rem);
  display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; align-items: baseline;
  padding-top: 1rem; border-top: 3px double var(--sc-ink); max-width: none !important;
}
.price__k { font-size: var(--sc-t-sm); font-weight: 600; letter-spacing: 0.04em; color: var(--sc-ink-soft); }
.price__v { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.3; letter-spacing: -0.01em; }
.price__v b { font-weight: 500; color: var(--sc-ink); }

/* ------------------------------------------------------- 6 · colophon --- */
.colophon {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  padding: clamp(4rem, 12vh, 8rem) var(--sc-gutter) clamp(1.25rem, 4vh, 2rem);
}
.colophon__body { align-self: center; width: 100%; max-width: 46rem; margin-inline: auto; }
.colophon__h {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-2xl); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance;
}
.blank-line {
  margin-top: clamp(1.75rem, 5vh, 3rem);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1.5rem;
  padding: 0.6rem 0; border-top: 1px solid var(--rule-strong); border-bottom: 3px double var(--sc-ink);
}
.blank-line__k { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.blank-line__v { display: inline-flex; align-items: baseline; gap: 0.3rem; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); }
.blank-line__rule { display: inline-block; width: 8rem; border-bottom: 1.5px solid var(--sc-accent); height: 1px; }
.colophon__run { margin-top: 1.5rem; color: var(--sc-ink-soft); max-width: 36rem; text-wrap: pretty; }
.colophon__ask { margin-top: 1.25rem; }
.ask {
  display: inline-flex; align-items: center; min-height: 3rem;
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-xl); letter-spacing: -0.012em; color: var(--sc-ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em;
  text-decoration-color: var(--sc-accent);
  transition: text-decoration-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.ask::after { content: "→"; display: inline-block; margin-left: 0.5rem; font-family: var(--sc-font-text); font-size: 0.8em; transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ask:hover { text-decoration-color: var(--sc-ink); }
  .ask:hover::after { transform: translateX(3px); }
}
.ask:active { transform: translateY(1px); }
.colophon__alt { margin-top: 0.75rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.foot {
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule-strong);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
.foot p { max-width: 44rem; }

/* ----------------------------------------------------------- the phone -- */
@media (max-width: 860px) {
  .ch__wrap--split, .how__grid { grid-template-columns: minmax(0, 1fr); }
  .title__kind { display: none; }
  .title__fig { flex-direction: column-reverse; align-items: flex-start; gap: 0.25rem; }
  .title__fig figcaption { flex-direction: row; flex-wrap: wrap; gap: 0 0.6rem; padding: 0; }
  .title__num { font-size: clamp(4rem, 23vw, 9rem); }
  .ch__h { font-size: var(--sc-t-2xl); }

  .stmt {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    align-content: start;
    --line: 2rem;
  }
  .stmt__head { padding-bottom: 0.6rem; }
  .stmt__title { font-size: var(--sc-t-lg); }
  .stmt__fig { align-self: start; padding-top: clamp(0.6rem, 2.5vh, 1.5rem); }
  .fig { font-size: min(15vw, 9vh); }
  .fig__note { font-size: var(--sc-t-sm); }
  .fig__note--land { font-size: var(--sc-t-base); }
  .stmt__ledger { align-self: start; margin-top: clamp(0.75rem, 3vh, 1.75rem); font-size: 0.94rem; }
  .stmt .ledger__row { padding: 0.32rem 0; min-height: 0; }

  .report__desk { padding: 0.5rem 0 0.5rem 0.75rem; }
  .sheet__cols { grid-template-columns: minmax(0, 1fr); }
  .price { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .fig { font-size: min(14vw, 8vh); }
  .stmt .ledger__row { padding: 0.18rem 0; }
  .stmt__ledger { font-size: 0.86rem; }
}

/* ----------------------------------------------------- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .sheet--under { transform: none !important; }
  .fig__land { transform: none; }
}

/* Where each line comes from. Written in with its debit (--w), so the reader
   watches the data being pulled in from each source. */
.ledger__src { display: block; margin-top: 0.1rem; font-size: var(--sc-t-xs); font-weight: 400; letter-spacing: 0.01em; color: var(--sc-ink-soft); }
.ledger--live .ledger__row[data-debit] .ledger__src { opacity: var(--w); transform: translateX(calc((1 - var(--w)) * -0.4rem)); }
.ledger--live .ledger__src::before { content: ""; display: inline-block; width: 0.35rem; height: 0.35rem; margin-right: 0.4rem; border-radius: 50%; background: var(--sc-accent); vertical-align: 0.05em; }
.ledger__row--open .ledger__src { opacity: 1; }

/* ------------------------------------------------------- 3b · the join ----
   Four wires drawn from the sources into the report as the reader scrolls.
   site.js writes --k (0 to 1) on each row and --done on the stage. The
   defaults are the FINISHED join, so without JS the page still says it all. */
.link {
  --done: 1;
  height: 100vh; height: 100svh;
  display: grid; grid-template-rows: auto 1fr;
  padding: clamp(1.25rem, 5vh, 3rem) var(--sc-gutter) clamp(1rem, 4vh, 2.5rem);
  background: var(--paper2);
}
.link__head { max-width: 46rem; }
.link__h { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-2xl); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.link__sub { margin-top: 0.8rem; color: var(--sc-ink-soft); max-width: 38rem; text-wrap: pretty; }
.link__board { align-self: center; width: 100%; max-width: 64rem; margin-inline: auto; }
.link__cols, .link__row, .link__foot {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(2rem, 3fr) minmax(0, 4fr); align-items: stretch;
}
.link__cols { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--sc-ink-soft); padding-bottom: 0.5rem; }
.link__cols span:last-child { padding-left: 1rem; }
.link__rows { display: grid; }
.link__row { --k: 1; min-height: 4.4rem; }
.src { display: block; align-self: center; padding: 0.7rem 0; border-top: 1px solid var(--rule-strong); height: 100%; }
.src b { display: block; font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl); line-height: 1.15; letter-spacing: -0.01em; }
.src small { display: block; margin-top: 0.15rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.wire { position: relative; align-self: stretch; }
.wire::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dotted var(--sc-ink-soft); opacity: 0.55; }
.wire i { position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--sc-accent); transform-origin: left; transform: scaleX(var(--k)); }
.wire u {
  position: absolute; top: 50%; left: calc(var(--k) * 100%); width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--sc-accent); translate: -50% -50%; opacity: clamp(0, calc(var(--k) * 25), 1);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 18%, transparent);
}
.tgt {
  display: flex; align-items: center; padding: 0.7rem 1rem;
  background: var(--paper); border-left: 1px solid var(--rule-strong); border-right: 1px solid var(--rule-strong);
  border-top: 1px solid var(--rule);
  font-family: var(--sc-font-display); font-size: 1.15rem; line-height: 1.25;
  color: color-mix(in oklab, var(--sc-ink) calc(var(--k) * 100%), var(--paper));
  opacity: calc(0.45 + 0.55 * var(--k));
}
.link__row:first-child .tgt { border-top: 1px solid var(--rule-strong); }
.link__foot { margin-top: 0; }
.tgt--sum {
  display: grid; gap: 0.2rem; align-content: center; opacity: var(--done);
  border-top: 3px double var(--sc-ink); border-bottom: 1px solid var(--rule-strong);
  font-size: 1.15rem;
}
.tgt--sum b { font-weight: 600; }
.tgt--sum em { font-size: 0.95rem; color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .link { grid-template-rows: auto 1fr; }
  .link__h { font-size: var(--sc-t-xl); }
  .link__sub { font-size: var(--sc-t-sm); }
  .link__cols, .link__row, .link__foot { grid-template-columns: minmax(0, 5fr) minmax(1.25rem, 1.6fr) minmax(0, 5fr); }
  .link__row { min-height: 3.6rem; }
  .src b { font-size: 1.05rem; }
  .src small { font-size: 0.72rem; }
  .tgt { padding: 0.5rem 0.6rem; font-size: 0.95rem; }
  .link__cols span:last-child { padding-left: 0.6rem; }
  .tgt--sum { font-size: 0.95rem; }
  .tgt--sum em { font-size: 0.8rem; }
}

/* ------------------------------------------------------ violet touches ---- */
.hl { color: var(--sc-accent); }
.sheet { border-top: 4px solid var(--sc-accent); }
.title__num { color: color-mix(in oklab, var(--sc-ink) 65%, var(--sc-accent)); }

/* --------------------------------------------- the stacks of coins ------
   96 gold coins in 12 stacks, each worth about $500 of sales. Each cost makes
   a stack go missing, top coin first: the coins turn red, drift up and away,
   and are gone for good. Ten coins are left, which is the profit. site.js
   builds and drives them. */
.pile { container-type: inline-size; position: relative; width: 100%; max-width: 40rem; height: clamp(8rem, 30vh, 17rem); margin: 0.4rem 0 1.1rem; }
.coin {
  position: absolute; width: 7.4cqi; height: 2.9cqi; --k: 0;
  --ci: color-mix(in oklab, var(--loss) calc(var(--k) * 100%), #7A4F00);
  will-change: transform, opacity;
}
.coin__side {
  position: absolute; left: 0; right: 0; top: 1.45cqi; height: 2cqi;
  background: color-mix(in oklab, var(--loss) calc(var(--k) * 100%), #D9A300);
  border: 1.5px solid var(--ci); border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.coin__top {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--loss) calc(var(--k) * 35%), #FFD84D);
  border: 1.5px solid var(--ci);
  font-family: var(--sc-font-display); font-weight: 700; font-size: 2.2cqi; line-height: 1;
  color: color-mix(in oklab, var(--loss) calc(var(--k) * 100%), #7A4F00);
}
@media (max-width: 860px) { .pile { height: clamp(5rem, 13vh, 8rem); } }
@media (max-width: 860px) and (max-height: 700px) { .pile { height: 4rem; } }

/* --------------------------------------------------------- the lead form -- */
.lead { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; max-width: 40rem; }
.lead__f { display: grid; gap: 0.35rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.lead__f span { font-weight: 600; letter-spacing: 0.02em; }
.lead input {
  font: inherit; font-size: var(--sc-t-base); color: var(--sc-ink);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--r);
  padding: 0.8rem 0.9rem; min-height: 3rem; width: 100%;
}
.lead input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 70%, var(--paper)); }
.lead input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: var(--sc-accent); }
.lead__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead .btn { grid-column: 1 / -1; justify-self: start; border: 0; cursor: pointer; font-family: inherit; }
.lead .btn[disabled] { opacity: 0.6; cursor: progress; }
.lead__msg { grid-column: 1 / -1; min-height: 1.4em; color: var(--sc-accent); font-size: var(--sc-t-sm); }
.lead__fine { grid-column: 1 / -1; margin-top: -0.4rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
@media (max-width: 560px) { .lead { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------- statement: rows sit on the rules --
   One ledger row is exactly two ruled lines of the paper on the left, and each
   row border lands on every second rule. site.js nudges the ledger and the coin
   pile so their edges sit on a rule. */
.stmt { --line: clamp(1.4rem, calc((100svh - 9rem) / 15.5), 2.25rem); }
.stmt__ledger { align-self: start; position: relative; }
.stmt .ledger__row {
  height: calc(var(--line) * 2); min-height: 0; padding: 0;
  align-items: center; box-sizing: border-box;
}
.stmt .ledger__name { line-height: 1.2; }
.stmt .dbl { height: var(--line); margin: 0; align-content: center; gap: 3px; }
.stmt .ledger__row--profit { height: calc(var(--line) * 2); }
.pile { position: relative; }
@media (max-width: 860px) {
  .stmt { --line: clamp(1.25rem, 3.2svh, 1.5rem); }
  .stmt .ledger__row { padding: 0; }
}