/* wealthbook-site — the house's tokens, worn by the front website.
   Copied from the app's apps/web/app/globals.css :root so the site and
   the book are one hand. Change the app first; this follows.

   The hero came from Claude Design's handoff (12 Sep 2026, "Paper"
   direction) drawn in Newsreader, Plex Mono and a green accent. It is
   redressed here in the house's own clothes: Cormorant Garamond for
   display, Instrument Sans for text, tabular figures in the display
   face for money (as the book's own showcase does), the kicker for
   every small-capitals label, and NO third colour — a draft is muted
   italic, a settled fact is ink. Two radii and no more. */
:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-text: 'Instrument Sans', system-ui, sans-serif;
  --paper: #fcfbf9;
  --panel: #ffffff;
  --ink: #1a1815;
  --muted: #8a8375;
  --soft: #6b6459;
  --hairline: #e8e4dc;
  --hairline-strong: #d8d2c6;
  --wash: #f5f2ec;
  --faint: #b0a893;
  /* The corner law: exactly two radii in the whole product. */
  --corner: 2px;
  --corner-soft: 8px;
  /* The page gutter: 64px on a desk, 20px in the hand. */
  --gutter: 64px;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; }

/* One column, the design's 1180 measure, centred. */
.page {
  width: min(1180px, 100%);
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── The kicker: the house's small capitals, used for every label ── */
.kicker {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Buttons: the house's .btn, a hairline box in ink; the primary
   is the same box filled. Hover only where hover exists (the
   sticky-hover law: a phone's tap never leaves a button inverted). ── */
.btn {
  display: inline-block;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  border: 1px solid var(--ink);
  border-radius: var(--corner);
  padding: 13px 22px;
  color: var(--ink);
  background: transparent;
  transition: background 0.15s, color 0.15s;
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.small { font-size: 13px; padding: 8px 16px; }
@media (hover: hover) {
  .btn:hover { background: var(--ink); color: var(--paper); }
  .btn.primary:hover { background: var(--paper); color: var(--ink); }
}
.btn:focus-visible { outline: 2px solid var(--faint); outline-offset: 3px; }
/* The quiet second door: text on a hairline, as the house underlines. */
.link-btn {
  font-size: 15px;
  text-decoration: none;
  padding: 13px 2px;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
}

/* ── Nav: wordmark left, the one real door right ── */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 28px var(--gutter);
  border-bottom: 1px solid var(--hairline);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}

/* ── Hero: words left, the entry card right ── */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  padding: 96px var(--gutter) 88px;
  align-items: center;
}
.hero-words { display: flex; flex-direction: column; gap: 28px; }
h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: pretty;
}
h1 em { font-weight: 400; font-style: italic; }
.lede {
  font-size: 19px;
  line-height: 1.5;
  color: var(--soft);
  max-width: 30em;
  margin: 0;
  text-wrap: pretty;
}
.hero-doors { display: flex; gap: 20px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

/* ── The entry card: one page of the book, writing itself ── */
.entry {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--corner);
  padding: 36px 40px 40px;
  box-shadow: 0 1px 0 #fff inset, 0 20px 50px rgba(26, 24, 21, 0.08);
  height: 700px;
}
/* The stitch along the top edge, in ink at a whisper. */
.entry::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 16px);
  opacity: 0.18;
}
/* The whole body fades for the page turn. */
.entry-body {
  display: flex; flex-direction: column; flex: 1;
  transition: opacity 900ms ease-in-out;
}
.entry-body.turning { opacity: 0; }
.running-head { display: flex; justify-content: space-between; }
.plate {
  position: relative;
  margin-top: 22px;
  height: 210px;
  background: var(--wash);
  border-bottom: 1px solid var(--hairline-strong);
  overflow: hidden;
}
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Until an illustration arrives, the plate says what it is for. */
.plate-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic; font-size: 17px;
  color: var(--faint); text-align: center; padding: 0 24px;
}
.entry-title {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  min-height: 36px;
  display: flex; align-items: baseline; gap: 8px;
}
.caret {
  display: inline-block; width: 2px; height: 26px; background: var(--ink);
  animation: blink 1s infinite;
}
.caret[hidden] { display: none; }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.rows {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 120px 1fr;
  row-gap: 12px; column-gap: 20px;
  font-size: 17px;
  align-items: baseline;
}
.row-label { color: var(--muted); }
.row-value {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  min-height: 52px; align-content: flex-start;
  color: var(--ink);
  transition: color 1200ms ease;
}
/* What you wrote, before the house settled it. */
.row-value.draft { color: var(--muted); font-style: italic; }
/* Money and figures wear the display face's lining tabular figures,
   as the book's own showcase does. */
.row-value.figure { font-family: var(--font-display); font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.row-value.figure.draft { font-weight: 500; }
.badge {
  font-family: var(--font-text); font-style: normal; font-weight: 500;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--ink);
  padding: 2px 7px; border-radius: var(--corner); line-height: 1.3;
}
.entry-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--hairline-strong);
  font-size: 13px; color: var(--muted);
  min-height: 34px; line-height: 1.4;
}

/* ── The strip: three quiet facts under the hero ── */
.strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
}
.strip > div {
  padding: 32px 40px 36px;
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 8px;
}
.strip > div:first-child { padding-left: var(--gutter); }
.strip > div:last-child { border-right: 0; padding-right: var(--gutter); }
.strip-title { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; }
.strip-body { font-size: 15.5px; line-height: 1.5; color: var(--soft); }

footer {
  border-top: 1px solid var(--hairline);
  padding: 20px var(--gutter) 32px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── In the hand: one column, the card full width, the strip stacked ── */
@media (max-width: 960px) {
  :root { --gutter: 32px; }
  .hero { grid-template-columns: 1fr; gap: 48px; padding: 64px var(--gutter) 56px; }
  .entry { height: auto; min-height: 640px; }
  .strip { grid-template-columns: 1fr; }
  .strip > div { border-right: 0; border-bottom: 1px solid var(--hairline); padding: 24px var(--gutter); }
  .strip > div:last-child { border-bottom: 0; }
}
@media (max-width: 600px) {
  :root { --gutter: 20px; }
  .nav { padding: 20px var(--gutter); }
  .entry { padding: 28px 22px 28px; }
  .rows { grid-template-columns: 96px 1fr; font-size: 16px; }
  .row-value { min-height: 44px; }
  .lede { font-size: 17px; }
}

/* Someone who asked for less motion gets the settled page, still. */
@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  .entry-body, .row-value { transition: none; }
}

/* ── THE FAMILY BOOK (Ian, 12 Sep 2026: "like those PDF readers — the
   first page on its own, then a left and a right, one goes one way and
   one the other… a subtle play in the middle"). The book sits under the
   headline because a spread needs the width. Every entry is a spread:
   the watercolour on the left page, the words on the right; the cover
   stands alone. A page-flip engine does the turning — the corner lifts
   under the pointer, the page bends and goes over the gutter with its
   shadow — and nothing turns unless the reader turns it or presses the
   quiet play in the gutter. ── */
body { background: var(--paper); color: var(--ink); }
.hero { display: block; padding: 72px var(--gutter) 40px; }
.hero-words { max-width: 760px; }
.sketch-note { font-size: 13px; color: var(--muted); padding: 14px 0 0; max-width: 60ch; }
.shelf { position: relative; padding: 16px var(--gutter) 88px; display: flex; flex-direction: column; align-items: center; }
.book { position: relative; width: min(1180px, 100%); }
.book .page { background: var(--panel); color: var(--ink); border: 1px solid var(--hairline-strong); overflow: hidden; }
/* The gutter's shading is a spread's: on a phone, one page at a time, there is no spine to shade (Ian, 12 Sep 2026). */
.book .--landscape .page.--left { border-right: 0; border-radius: var(--corner) 0 0 var(--corner); box-shadow: inset -14px 0 24px -18px rgba(26, 24, 21, 0.28); }
.book .--landscape .page.--right { border-left: 0; border-radius: 0 var(--corner) var(--corner) 0; box-shadow: inset 14px 0 24px -18px rgba(26, 24, 21, 0.28); }
.book .page.cover { background: var(--wash); border-radius: var(--corner); }
/* The cover: the family's name, in the display face, on parchment. */
.cover-inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px 36px; gap: 18px; }
.cover-inner .kicker { letter-spacing: 3px; }
.cover-name { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 44px); font-weight: 500; line-height: 1.05; }
.cover-rule { width: 56px; height: 1px; background: var(--hairline-strong); }
.cover-kept { font-size: 13.5px; color: var(--soft); }
/* A left page: the plate fills it, paper showing at the margins. */
/* A PICTURE IS SHOWN WHOLE (Ian, 12 Sep 2026, the boat cropped to a
   portrait page: "you're going to need to make it smaller… the whole
   picture on one page"). A watercolour is landscape; the page is not.
   So the plate keeps the picture's own shape, sits in the upper part of
   the page with paper around it, as a plate in a printed book does, and
   nothing is cut off. A chart, a sheet, a diary or a person still fills
   the page: those are drawn to fit. */
.plate-page { position: absolute; inset: 0; padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.plate-page .plate { flex: 1; margin: 0; height: auto; position: relative; }
.plate-page .plate.picture:has(.plate-empty) { background: var(--wash); }
.plate-page .plate.picture { flex: none; aspect-ratio: 16 / 9; width: 100%; background: transparent; border-bottom: 0; box-shadow: 0 1px 0 var(--hairline-strong); }
.plate-page .plate.picture img { width: 100%; height: 100%; object-fit: contain; display: block; }
.plate-page .caption { margin-top: 12px; font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--soft); text-align: center; }
/* A right page: the entry as the card held it. */
.words-page { position: absolute; inset: 0; padding: 30px 34px 32px; display: flex; flex-direction: column; }
.words-page .entry-title { margin-top: 6px; }
.words-page .rows { font-size: 16px; }
.words-page .row-value { min-height: 46px; }
.words-page .entry-foot { margin-top: auto; }
.folio-line { display: flex; justify-content: space-between; }
/* The running head on a left page: Contents (a link, at the outer edge)
   and the family's name toward the spine, in the folio line's clothes. */
.running-head { display: flex; justify-content: space-between; padding-top: 10px; margin-bottom: 12px; } /* on the right page's folio line */
.running-head a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--hairline-strong); padding-bottom: 1px; }
.running-head a:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* A chart or a ledger fills a left page the way a picture does. */
.plate-page .plate.chart, .plate-page .plate.ledger { background: var(--panel); border: 1px solid var(--hairline); }
.plate svg { display: block; width: 100%; height: 100%; }
.chart-title { position: absolute; top: 12px; left: 14px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.chart-end { position: absolute; top: 10px; right: 14px; font-family: var(--font-display); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.plate.ledger { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.ledger-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--soft); gap: 12px; }
.ledger-row b { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.ledger-row.total { border-top: 1px solid var(--hairline-strong); padding-top: 12px; margin-top: 6px; color: var(--ink); }
.ledger-row.total b { font-size: 24px; }
/* The shelf's controls: ‹ › either side, and the play in the gutter. */
.turns { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 18px; }
.turns button { all: unset; cursor: pointer; font-family: var(--font-text); font-size: 13px; color: var(--muted); padding: 6px 10px; border-radius: var(--corner); }
.turns button:hover { color: var(--ink); background: var(--wash); }
.turns button:focus-visible { outline: 2px solid var(--faint); outline-offset: 2px; }
.turns .where { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 9ch; text-align: center; }
.play { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 20; opacity: 0; transition: opacity 250ms ease; }
.book:hover .play, .play.on { opacity: 1; }
.play button { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--panel); color: var(--soft); box-shadow: 0 0 0 1px var(--hairline-strong), 0 6px 18px rgba(26, 24, 21, 0.12); }
.play button:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 6px 18px rgba(26, 24, 21, 0.12); }
.play button:focus-visible { outline: 2px solid var(--faint); outline-offset: 2px; }
.play svg { width: 11px; height: 11px; }
@media (hover: none) { .play { opacity: 1; } }
@media (max-width: 700px) { .plate-page { padding: 16px; } .words-page { padding: 22px 20px 22px; } .words-page .rows { font-size: 15px; grid-template-columns: 90px 1fr; } }

/* THE LEFT PAGE IS THE THING ITSELF (Ian, 12 Sep 2026: "why would you
   have a sketch of a diary… you want a pencil and a written diary note
   that you met someone"). A house gets its watercolour because the house
   is the thing; a diary day gets the diary — a dated page, faint rules,
   the note in pencil as it was scribbled — and the right page is what
   the book made of it: the surveyor linked, the boat linked, the date
   fixed, the invoice matched. Source on the left, record on the right. */
.plate.diary { background: #fdfcf9; border: 1px solid var(--hairline); padding: 26px 28px 24px; display: flex; flex-direction: column; background-image: repeating-linear-gradient(to bottom, transparent 0 31px, #ece7dd 31px 32px); background-position: 0 92px; }
.diary-day { font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.1; }
.diary-date { font-family: var(--font-text); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.diary-note { margin-top: 34px; font-family: 'Caveat', 'Segoe Print', cursive; font-size: 25px; line-height: 32px; color: #4a4640; transform: rotate(-0.6deg); white-space: pre-line; }
.diary-note .later { color: #8a8375; }
.diary-note .tick { display: inline-block; margin-left: 6px; }

/* SOMETIMES YOU TURN THE PAGE AND IT'S A SPREADSHEET (Ian, 12 Sep 2026:
   "sometimes when you turn the book there'll be a spreadsheet, sometimes
   another page with something on it"). The house workbook on a page:
   small capitals for the heads, hairline rules, figures right and
   tabular in the display face, the total ruled off. And a person's page:
   a face, who they are, what their schooling has cost so far. */
.plate.sheet { background: #fdfcf9; border: 1px solid var(--hairline); padding: 22px 22px 18px; display: flex; flex-direction: column; }
.sheet-name { font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.1; }
.sheet-sub { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 4px 0 14px; }
.sheet table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sheet th { font-weight: 500; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); text-align: right; padding: 0 0 8px 8px; border-bottom: 1px solid var(--ink); }
.sheet th:first-child, .sheet td:first-child { text-align: left; padding-left: 0; color: var(--soft); }
.sheet td { text-align: right; padding: 7px 0 7px 8px; border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.sheet tr.total td { border-bottom: 0; border-top: 1px solid var(--ink); font-family: var(--font-display); font-size: 16px; font-weight: 600; padding-top: 10px; }
.sheet tr.total td:first-child { font-family: var(--font-text); font-size: 12.5px; font-weight: 500; color: var(--ink); }
.sheet .over { color: #8a3b2e; }
.plate.person { background: #fdfcf9; border: 1px solid var(--hairline); padding: 30px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.person-face { width: 96px; height: 96px; border-radius: 50%; background: var(--wash); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 34px; font-weight: 600; color: var(--soft); letter-spacing: 1px; }
.person-name { margin-top: 18px; font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.1; }
.person-sub { margin-top: 6px; font-size: 13px; color: var(--soft); }
.person-ledger { margin-top: 28px; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.person-ledger .ledger-row { font-size: 13px; }
.person-ledger .ledger-row b { font-size: 17px; }
.person-ledger .ledger-row.total b { font-size: 22px; }

/* ── THE CLOSED BOOK, INVITING (Ian, 12 Sep 2026: "you have your book
   inviting you to turn the first page… when you turn the page you see
   the whole book on the page like a big image… and other menu items at
   the top"). At rest the hero is the words and the closed book beside
   them, its corner lifting under the pointer. Turn it and the book opens
   large across the page, on its own, and the reader flicks through. The
   menu along the top names the parts of the site; each is a section of
   this page until it earns a page of its own. ── */
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-family: var(--font-text); font-size: 14.5px; color: var(--soft); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 700px) { .nav-links a:not(.btn) { display: none; } }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; padding: 88px var(--gutter) 64px; }
.hero-words { max-width: none; }
/* The closed book in the hero: the cover, at reading distance, a little
   turned toward the reader, its corner curling as you go over it. */
.closed { position: relative; justify-self: center; width: min(360px, 100%); aspect-ratio: 460 / 640; perspective: 1400px; cursor: pointer; }
.closed-cover { position: absolute; inset: 0; overflow: hidden; background: var(--wash); border: 1px solid var(--hairline-strong); border-radius: var(--corner); box-shadow: 0 30px 60px -24px rgba(26, 24, 21, 0.35), 0 2px 0 rgba(255,255,255,0.6) inset; transform: rotateY(-8deg); transform-origin: left center; transition: transform 500ms ease, box-shadow 500ms ease; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px 32px; gap: 18px; }
.closed:hover .closed-cover, .closed:focus-visible .closed-cover { transform: rotateY(-3deg); box-shadow: 0 36px 70px -24px rgba(26, 24, 21, 0.4), 0 2px 0 rgba(255,255,255,0.6) inset; }
.closed-spine { position: absolute; left: 0; top: 2px; bottom: 2px; width: 10px; background: linear-gradient(to right, rgba(26, 24, 21, 0.18), rgba(26, 24, 21, 0)); border-radius: var(--corner) 0 0 var(--corner); pointer-events: none; }
/* THE CORNER THAT INVITES (Ian, 12 Sep 2026, with a reader's curl for
   reference: "it animates the corner inviting you to turn it"). A real
   curl, in three parts on one square at the bottom right: the page
   beneath, showing in the corner where the cover has lifted, with the
   flap's shadow lying across it; the flap itself, the cover's underside
   folded over toward the top left, lit at the fold and shaded toward
   its tip, its fold a soft curve; and a hairline of shadow under the
   flap's edge. It breathes — lifts a little and settles, slowly — and
   lifts further, and stays, under the pointer. */
.closed-curl { position: absolute; right: 0; bottom: 0; width: 56px; height: 56px; pointer-events: none;
  /* the page beneath, in the corner, with the flap's shadow lying across it */
  background: linear-gradient(225deg, #ffffff 0 22%, rgba(26, 24, 21, 0.20) 40%, rgba(26, 24, 21, 0.05) 49%, transparent 50%);
  transform-origin: bottom right; transform: scale(0.8);
  animation: peel 4.6s ease-in-out infinite; }
.closed-curl::before { content: ""; position: absolute; inset: 0;
  /* the flap: a curved cone from the fold to its lifted tip */
  clip-path: path('M0 56 Q 40 40 56 0 L 8 8 Z');
  background: linear-gradient(135deg, #bfb8aa 0%, #e6e2d9 38%, #fbfaf7 70%, #ffffff 100%);
  filter: drop-shadow(-1px -1px 1.5px rgba(26, 24, 21, 0.22)); }
@keyframes peel { 0%, 100% { transform: scale(0.8); } 50% { transform: scale(1.05); } }
.closed:hover .closed-curl { animation: none; transform: scale(1.45); transition: transform 450ms ease; }
@media (prefers-reduced-motion: reduce) { .closed-curl { animation: none; } }
.closed .cover-name { font-size: clamp(26px, 3.6vw, 34px); }
.closed-invite { position: absolute; left: 0; right: 0; bottom: -40px; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--muted); transition: color 300ms; }
.closed:hover .closed-invite { color: var(--ink); }
/* Once opened, the closed book is put away and the shelf shows. */
.shelf { display: none; }
.shelf .shelf-head { width: min(1180px, 100%); display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.shelf .shelf-head .kicker { margin: 0; }
.shelf .close-book { all: unset; cursor: pointer; font-family: var(--font-text); font-size: 13px; color: var(--muted); padding: 4px 8px; border-radius: var(--corner); }
.shelf .close-book:hover { color: var(--ink); background: var(--wash); }
/* The other parts of the site, as sections until they earn pages. */
.part { padding: 72px var(--gutter); border-top: 1px solid var(--hairline); }
.part-inner { max-width: 720px; }
.part h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4vw, 40px); line-height: 1.1; margin: 0 0 20px; text-wrap: balance; }
.part p { font-size: 17px; line-height: 1.55; color: var(--soft); margin: 0 0 16px; max-width: 60ch; }
.part p b { color: var(--ink); font-weight: 600; }
.acronym { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-family: var(--font-display); font-size: 20px; color: var(--soft); }
.acronym span::first-letter { color: var(--ink); font-weight: 600; }
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; gap: 56px; padding: 64px var(--gutter) 48px; } .closed { width: min(300px, 80%); } }

/* THE SCRAPBOOK (Ian, 12 Sep 2026: "every page is something different —
   a photo, a spreadsheet, a budget… the first page should be a picture
   of the family on the inside cover… then chapters, About us, Chattels,
   Property, our cash flow and spending… and they can be hyperlinks").
   Inside the cover: the family's watercolour on the left, and facing it
   the contents — every chapter a line you can press, which turns the
   book to it. Or you just keep turning. */
.contents-page { position: absolute; inset: 0; padding: 40px 38px; display: flex; flex-direction: column; }
.contents-title { font-family: var(--font-display); font-size: 30px; font-weight: 500; margin: 6px 0 22px; }
.contents-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.contents-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.contents-list a { color: var(--ink); text-decoration: none; font-size: 16.5px; }
.contents-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contents-list .folio { color: var(--muted); font-size: 12px; letter-spacing: 1.5px; }
.contents-foot { margin-top: auto; font-size: 13px; color: var(--muted); }
.plate.family { padding: 0; }
.plate-page.inside-cover { justify-content: center; padding-bottom: 40px; }
.plate-page.inside-cover .plate.picture { flex: none; aspect-ratio: 3 / 2; }

/* NO GAPS, NO DROP (Ian, 12 Sep 2026: "when you turn the page the text
   disappears over the other side… you've either got to use the page up
   or not"). Opening the book does not scroll the page: the words and
   the closed cover go, and the open book stands where they stood, under
   the menu. And a page is used up: the picture at the top of a left page
   with the thing's own facts beneath it; the story under the rows on the
   right; the page's shape set so the words fill it. */
.shelf { padding-top: 28px; animation: appear 600ms ease; }
.hero { animation: appear 600ms ease; }
.hero-words { animation: appear 650ms ease; }
@keyframes appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .shelf { animation: none; } }
.plate-page { justify-content: flex-start; padding: 26px 28px 24px; }
.plate-page .caption { margin-top: 10px; }
.left-facts { margin-top: 22px; border-top: 1px solid var(--hairline); padding-top: 16px; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; line-height: 1.45; }
.left-facts dt { color: var(--muted); }
.left-facts dd { margin: 0; color: var(--ink); }
.words-page { padding: 28px 34px 28px; }
.words-page .entry-title { font-size: 30px; }
.words-page .rows { margin-top: 16px; font-size: 16.5px; }
.words-page .row-value { min-height: 44px; }
.story { margin-top: 18px; font-family: var(--font-display); font-size: 18px; line-height: 1.5; color: var(--soft); text-wrap: pretty; }
.story::first-letter { font-size: 1.35em; color: var(--ink); }

/* A PART USES THE PAGE (Ian, 12 Sep 2026, on the Charlie section: "used
   up a bit of the page on this"): the thesis on the left, the three
   points on the right, the acronym across the foot. One column again on
   a phone. */
.part-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 72px; align-items: start; }
.part-lead p { font-size: 19px; max-width: none; }
.part-points { padding-top: 58px; }
.part-points p { max-width: none; }
.part-foot { grid-column: 1 / -1; border-top: 1px solid var(--hairline); padding-top: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; }
.part-foot p { margin: 0; }
.part-foot .acronym { margin: 0; }
@media (max-width: 900px) { .part-grid { grid-template-columns: 1fr; gap: 8px; } .part-points { padding-top: 0; } }

/* NICER FONTS IN THE BOOK (Ian, 12 Sep 2026): the pages' reading text in
   Newsreader, the face the design was first drawn in; Cormorant keeps
   the titles and the figures, Instrument Sans the small capitals. */
.words-page .rows, .words-page .row-value, .left-facts, .contents-list a, .cover-kept, .plate-page .caption, .ledger-row, .sheet td, .person-sub { font-family: 'Newsreader', var(--font-display), Georgia, serif; }
.words-page .rows { font-size: 17.5px; }
.left-facts { font-size: 15.5px; }
.left-facts dt, .row-label { font-family: var(--font-text); font-size: 13.5px; }
.contents-list a { font-size: 18px; }
/* One page at a time, on a phone: the contents at a size that fits, and
   no play button over a lone page's foot. */
.--portrait .contents-page { padding: 22px 22px 18px; }
.--portrait .contents-title { font-size: 26px; margin: 2px 0 10px; }
.--portrait .contents-list li { padding: 6px 0; }
.--portrait .contents-list a { font-size: 16.5px; }
.--portrait .contents-foot { margin-top: 12px; }
.book:has(.stf__wrapper.--portrait) .play { display: none; }
.--portrait .words-page { padding: 22px 20px 20px; }
.--portrait .plate-page { padding: 16px 18px 18px; }
.--portrait .left-facts { font-size: 14.5px; gap: 6px 14px; margin-top: 14px; padding-top: 12px; }
.--portrait .words-page .rows { font-size: 14.5px; grid-template-columns: 84px 1fr; row-gap: 8px; }
.--portrait .entry-body, .--portrait .end-body { font-size: 15px; line-height: 1.5; }
.--portrait .row-value.figure .fig { font-size: 17px; }
.--portrait .row-value.figure .fig-rest { font-size: 15px; }
/* The smallest phones: a notch smaller again, so every page still fits. */
@media (max-width: 370px) {
  .--portrait .words-page { padding: 18px 16px 16px; }
  .--portrait .words-page .rows { font-size: 13.5px; row-gap: 5px; grid-template-columns: 78px 1fr; }
  .--portrait .entry-body, .--portrait .end-body { font-size: 14px; }
  .--portrait .row-value.figure .fig { font-size: 16px; }
  .--portrait .row-value.figure .fig-rest { font-size: 14px; }
  .--portrait .plate-page { padding: 14px 14px 14px; }
  .--portrait .left-facts { font-size: 13.5px; gap: 5px 12px; margin-top: 10px; padding-top: 10px; }
  .--portrait .plate-page .caption { margin-top: 8px; font-size: 13px; }
  .--portrait .entry-title { font-size: 24px; }
}
.story { font-family: 'Newsreader', var(--font-display), Georgia, serif; font-size: 17.5px; }
.entry-foot { font-family: var(--font-text); }

/* The figure face for the sum alone; the words beside it in the page's text. */
.row-value.figure { font-family: inherit; font-size: inherit; font-weight: inherit; }
.row-value.figure .fig, .row-value.figure > span:only-child { font-family: var(--font-display); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.row-value.figure .fig-rest { font-family: 'Newsreader', var(--font-display), Georgia, serif; font-size: 17.5px; font-weight: 400; }
.row-value.figure .fig-rest-line { display: block; margin-top: 2px; }

/* ONE BOOK, CLOSED OR OPEN (Ian, 12 Sep 2026: "the first page still
   doesn't look right… the kind of page turn you want"). The closed book
   in the hero IS the engine's cover, standing alone in its seat, so its
   corner curls under the pointer exactly as every other page does. Turn
   it and the words go, the seat widens to the page, and the engine lays
   the pages out as a spread. Close the book and it all comes back. */
.book-seat { position: relative; justify-self: center; width: min(400px, 100%); }
/* The menu's anchor is no grid cell (it took the first one and pushed the book under the words). */
.hero { position: relative; } #the-book { position: absolute; top: 0; }
.seat-head, .turns { display: none; }
body.opened .hero { grid-template-columns: 1fr; padding-top: 28px; }
body.opened .hero-words { display: none; }
body.opened .book-seat { width: min(1180px, 100%); justify-self: stretch; }
body.opened .seat-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.seat-head .close-book { all: unset; cursor: pointer; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--hairline-strong); border-radius: var(--corner); background: #fff; font-family: var(--font-text); font-size: 13px; color: var(--ink); }
.seat-head .close-book:hover { border-color: var(--ink); }
body.opened .turns { display: flex; }
body.opened .closed-invite { display: none; }
.closed-invite { position: static; margin-top: 14px; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--muted); cursor: pointer; }
.book-seat:hover .closed-invite { color: var(--ink); }
/* At rest the cover wears the closed book's weight: a spine's shadow and a lift. */
body:not(.opened) .book .page.cover { box-shadow: 0 30px 60px -24px rgba(26, 24, 21, 0.35), inset 8px 0 14px -10px rgba(26, 24, 21, 0.25); transition: box-shadow 450ms ease; }
/* HOVER LIFTS THE CLOSED COVER (Ian, 12 Sep 2026: "it lifts up quite a
   bit so you understand what it does — it invites you in"): the book
   rises toward the reader and its shadow deepens; a hardback, so no curl. */
body:not(.opened) .book { cursor: pointer; }
/* THE OPEN BOOK IS A BOOK, NOT A RECTANGLE (Ian, 12 Sep 2026: "when it's
   folded out it just looks like a rectangle… a bit rounded, a bit more
   shade… this is a showcase for us"). What the web's book readers do,
   in our clothes: the boards of the hardback show a little all round
   the pages, rounded, with the book's own shadow on the desk; a soft
   shade down the gutter where the pages fall into the spine; the paper's
   depth at the outer edges as a few fine lines; the outer corners of the
   pages rounded the way pressed paper is. */
/* No boards round the pages (Ian, same day, seeing them: "I kind of like
   the little pages at the end left and right but I don't know if I like
   the surround — doesn't look like a book"): the pages, their edges, the
   gutter and the book's shadow on the desk. */
body.opened .book { padding: 0; }
body.opened .book .stf__wrapper { position: relative; z-index: 1; filter: drop-shadow(0 26px 40px rgba(26, 24, 21, 0.18)); }
body.opened .book:has(.stf__wrapper.--landscape)::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 120px; transform: translateX(-50%); pointer-events: none; z-index: 2; background: linear-gradient(90deg, rgba(26, 24, 21, 0) 0%, rgba(26, 24, 21, 0.07) 42%, rgba(26, 24, 21, 0.16) 50%, rgba(26, 24, 21, 0.07) 58%, rgba(26, 24, 21, 0) 100%); }
body.opened .book .--landscape .page.--left { border-radius: 5px 0 0 5px; box-shadow: inset -18px 0 30px -20px rgba(26, 24, 21, 0.30), -1px 0 0 #f6f3ed, -2px 0 0 #d8d2c6, -3px 0 0 #f6f3ed, -4px 0 0 #d8d2c6, -5px 0 0 #f6f3ed, -6px 0 0 #cfc8bb; }
body.opened .book .--landscape .page.--right { border-radius: 0 5px 5px 0; box-shadow: inset 18px 0 30px -20px rgba(26, 24, 21, 0.30), 1px 0 0 #f6f3ed, 2px 0 0 #d8d2c6, 3px 0 0 #f6f3ed, 4px 0 0 #d8d2c6, 5px 0 0 #f6f3ed, 6px 0 0 #cfc8bb; }
/* The play in the gutter sits above the shade. */
body.opened .book .play { z-index: 3; }
body:not(.opened) .book .stf__wrapper { transition: transform 450ms ease; }
/* Lifts, cleanly (Ian, 12 Sep 2026, on the tilt-and-curl: "it sort of
   jitters around… just lift up, and then you turn the page — make it
   clean"): the book rises and its shadow deepens; nothing else moves
   until it is pressed. */
body:not(.opened) .book:hover .stf__wrapper { transform: translateY(-10px); }
body:not(.opened) .book .play { display: none; }
/* "Turn the first page" throbs, quietly, until it is pressed. */
@keyframes throb { 0%, 100% { opacity: 0.55; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.closed-invite { animation: throb 2.6s ease-in-out infinite; }
.book-seat:hover .closed-invite { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .closed-invite { animation: none; opacity: 1; } body:not(.opened) .book .stf__wrapper { transition: none; } }
body:not(.opened) .book:hover .page.cover { box-shadow: 0 44px 70px -22px rgba(26, 24, 21, 0.45), inset 8px 0 14px -10px rgba(26, 24, 21, 0.25); }
/* The left page, with air (Ian: "raise the picture up a little… more
   space underneath… put the address in properly… make the text a bit
   better"). */
.plate-page { padding: 18px 28px 26px; }
.plate-page .caption { margin-top: 12px; }
.left-facts { margin-top: 18px; padding-top: 14px; gap: 7px 18px; font-size: 15px; line-height: 1.45; }
.left-facts dd { font-family: 'Newsreader', var(--font-display), Georgia, serif; font-size: 16.5px; }