/* KITCHEN TABLE — the look
   ---------------------------------------------------------------------------
   Deliberately NOT the house dark-terminal style, and deliberately not the
   default dark-slate-and-one-metallic-accent that every AI-built dashboard
   reaches for. THE CHAIR is a war room. This is the other side of the desk, so
   it is the other side of the design: a scrubbed pine kitchen table with the
   week's paperwork laid out on it on a Sunday night.

   The world, in three materials:
     WOOD   — the ground. Everything sits ON something.
     PAPER  — manila stock, a fold, a torn edge, a ruled ledger.
     INK    — a rubber stamp in red, a fountain pen in blue-black, a biro in
              the margin where somebody has done the sum again by hand.

   Signature motif: the rubber stamp heads every section.
   Friendly, not cute: warm light, generous spacing, a hand in the margins.
*/

:root {
  /* the table */
  --wood:       #7a5334;
  --wood-dark:  #5c3d26;
  --wood-lit:   #8d6340;

  /* the paper */
  --paper:      #f3ead6;
  --paper-hi:   #fdf8ea;
  --paper-lo:   #e9dcc0;
  --paper-edge: #cdbb95;

  /* the ink */
  --ink:        #241f19;
  --ink-soft:   #5f5546;
  --ink-faint:  #8b7f6b;
  --rule:       #c9b590;
  --stamp:      #a63a2a;
  --pen:        #2f5170;
  --ledger:     #3a6b4f;
  --debt:       #a63a2a;

  /* on the table */
  --on-wood:      #f6ecd8;
  --on-wood-soft: #ecd9b8;
  --on-wood-link: #f0bd76;

  --display: 'Zilla Slab', Rockwell, Georgia, serif;
  --body:    'Lora', Georgia, 'Times New Roman', serif;
  --figures: 'Courier Prime', 'Courier New', monospace;
  --hand:    'Caveat', 'Bradley Hand', cursive;
}

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

body {
  /* scrubbed pine, running in planks down the page */
  background-color: var(--wood);
  background-image:
    /* the warm lamp over the table */
    radial-gradient(80% 55% at 50% -5%, rgba(255,226,175,.30) 0%, rgba(255,226,175,0) 70%),
    /* plank seams */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.00) 0 168px,
      rgba(0,0,0,.20) 168px 170px,
      rgba(255,255,255,.05) 170px 172px),
    /* grain */
    repeating-linear-gradient(88deg,
      rgba(255,255,255,.035) 0 2px,
      rgba(0,0,0,.035) 2px 5px,
      rgba(0,0,0,.00) 5px 11px),
    linear-gradient(180deg, var(--wood-lit) 0%, var(--wood) 42%, var(--wood-dark) 100%);
  background-attachment: fixed;
  color: var(--on-wood);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* The sheets are rotated a fraction of a degree, which pushes their corners a
     few pixels past the viewport on a narrow phone. Everything genuinely wide
     (the reveal table) already scrolls inside its own .scroller, so nothing is
     lost by refusing the page a horizontal scrollbar. */
  overflow-x: hidden;
}

/* ── the rubber stamp: the signature object ────────────────────────────── */
.stamp {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stamp);
  background: rgba(253,248,234,.9);
  border: 2px solid var(--stamp);
  border-radius: 3px;
  padding: 5px 15px 4px;
  margin: 0 0 18px;
  transform: rotate(-1.8deg);
  box-shadow: inset 0 0 0 1px rgba(166,58,42,.28), 0 2px 6px -3px rgba(0,0,0,.5);
}
.stamp--blue  { color: var(--pen);    border-color: var(--pen);    box-shadow: inset 0 0 0 1px rgba(47,81,112,.28), 0 2px 6px -3px rgba(0,0,0,.5); transform: rotate(1.4deg); }
.stamp--paid  { color: var(--ledger); border-color: var(--ledger); box-shadow: inset 0 0 0 1px rgba(58,107,79,.28), 0 2px 6px -3px rgba(0,0,0,.5); }

/* ── header: a card tacked to the wall above the table ─────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 2px solid rgba(0,0,0,.34);
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.6);
  padding: 11px 16px 10px;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,236,196,.12), rgba(0,0,0,.18)),
    var(--wood-dark);
}
.masthead__title {
  font-family: var(--display); font-weight: 700; font-size: 19px;
  letter-spacing: .17em; text-transform: uppercase; margin: 0;
  color: var(--on-wood); text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.masthead__who { font-size: 13px; color: var(--on-wood-soft); font-style: italic; }
.masthead__stat {
  font-family: var(--figures); font-size: 13px;
  padding: 3px 10px; border: 1px solid rgba(246,236,216,.35); border-radius: 2px;
  background: rgba(253,248,234,.92); color: var(--ink); white-space: nowrap;
}
.masthead__stat--debt { color: var(--debt); }
/* how the household is holding up — solvency, not wear */
.masthead__status { font-weight: 700; letter-spacing: .1em; }
.masthead__status--stable    { color: var(--ledger); }
.masthead__status--stretched { color: #8a6a1f; }
.masthead__status--strained  { color: #b4600f; }
.masthead__status--nocushion { color: #b4600f; border-color: rgba(180,96,15,.5); }
.masthead__status--crisis    { color: #fff0e6; background: var(--debt); border-color: var(--debt); }
.iconbtn--icon { font-size: 14px; letter-spacing: 0; padding: 3px 9px; }
.iconbtn {
  font-family: var(--display); font-size: 12px; letter-spacing: .12em;
  color: var(--on-wood); background: transparent;
  border: 1px solid rgba(246,236,216,.4); border-radius: 2px;
  padding: 4px 9px; cursor: pointer; transition: background .15s, color .15s;
}
.iconbtn:hover, .iconbtn:focus-visible { background: rgba(246,236,216,.92); color: var(--wood-dark); outline: none; }

/* ── footer, also on the table ─────────────────────────────────────────── */
.pagefoot {
  margin-top: auto;
  border-top: 2px solid rgba(0,0,0,.3);
  padding: 20px 16px 30px;
  font-size: 13px; line-height: 1.8;
  color: var(--on-wood-soft);
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.28));
}
.pagefoot a { color: var(--on-wood-link); }
.pagefoot__row { max-width: 720px; margin: 0 auto 6px; }
.pagefoot__rule { font-size: 12px; opacity: .82; }

/* ── layout ────────────────────────────────────────────────────────────── */
.stage { width: 100%; max-width: 660px; margin: 0 auto; padding: 30px 16px 46px; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; }
h1 { font-size: clamp(30px, 7vw, 48px); line-height: 1.08; margin: 0 0 12px; text-shadow: 0 2px 4px rgba(0,0,0,.4); }
h2 { font-size: 26px; margin: 0 0 14px; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
h3 { font-size: 17px; margin: 0 0 8px; letter-spacing: .07em; text-transform: uppercase; }
.sheet h2, .sheet h3 { text-shadow: none; color: var(--ink); }

p { margin: 0 0 14px; }
.lede { font-size: 19px; color: var(--on-wood-soft); font-style: italic; }
.tiny { font-size: 13px; color: var(--ink-faint); }
.sheet .lede { color: var(--ink-soft); }

/* ── paper laid on the table ───────────────────────────────────────────── */
.sheet {
  position: relative;
  background:
    linear-gradient(180deg, var(--paper-hi) 0%, var(--paper) 55%, var(--paper-lo) 100%);
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 2px 3px rgba(0,0,0,.20),
    0 14px 26px -12px rgba(0,0,0,.55);
  padding: 27px 23px 25px;
  margin: 0 0 24px;
  text-align: center;
  color: var(--ink);
  transform: rotate(-.22deg);
}
.sheet + .sheet { transform: rotate(.28deg); }
.sheet .tiny { color: var(--ink-faint); }

/* one crease down anything that came in the post */
.sheet--folded::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid rgba(120,98,58,.20);
  box-shadow: 0 1px 0 rgba(255,255,255,.6);
  pointer-events: none;
}
/* the torn edge of an opened envelope */
.sheet--torn {
  border-top: none; padding-top: 32px; --tooth: 11px;
  -webkit-mask: radial-gradient(var(--tooth) at 50% 0, transparent 99%, #000 100%) 50% 0 / calc(var(--tooth)*2) var(--tooth) repeat-x, linear-gradient(#000 0 0) 0 var(--tooth) / 100% calc(100% - var(--tooth)) no-repeat;
          mask: radial-gradient(var(--tooth) at 50% 0, transparent 99%, #000 100%) 50% 0 / calc(var(--tooth)*2) var(--tooth) repeat-x, linear-gradient(#000 0 0) 0 var(--tooth) / 100% calc(100% - var(--tooth)) no-repeat;
}
/* somebody put a cup down on this one. Painted into the paper's own
   background so it stays UNDER the text where a stain belongs. */
.sheet--ring {
  background:
    radial-gradient(circle at calc(100% - 54px) 46px,
      rgba(122,83,52,0) 0 27px,
      rgba(122,83,52,.13) 28px 34px,
      rgba(122,83,52,.05) 35px 39px,
      rgba(122,83,52,0) 40px),
    linear-gradient(180deg, var(--paper-hi) 0%, var(--paper) 55%, var(--paper-lo) 100%);
}

/* the quiet line that says what the number is actually worth */
.damage {
  font-size: 14.5px; line-height: 1.5; color: var(--ink-soft);
  border-top: 1px dotted var(--rule); border-bottom: 1px dotted var(--rule);
  padding: 9px 0; margin: 14px auto 0; max-width: 28rem;
}
.damage b { color: var(--debt); font-family: var(--figures); }

/* ── the job ───────────────────────────────────────────────────────────────
   M5 brief P0.1. Typed onto a slip and clipped to the front of the file, not
   written into the prose — a player skims past a sentence and stops at a label.
   It reads as filed instruction rather than advice, which is the whole trick:
   it says what the job is without ever hinting at how to do it.

   The plate shows up in two places on two different backgrounds — clipped to
   the opener card, which is paper, and standing on the bare table at Q1. The
   ink palette is unreadable on the wood (2.4:1) so the WOOD version is the
   default here and the paper version is the override, exactly as .progress
   already does it further down. Both sides measured, both clear AA. */
.goal {
  max-width: 30rem; margin: 16px auto 0; padding: 11px 15px 11px 14px;
  text-align: left; font-size: 15.5px; line-height: 1.45; color: var(--on-wood);
  background: rgba(246,236,216,.07);
  border: 1px solid rgba(246,236,216,.2); border-left: 4px solid var(--on-wood-link);
  border-radius: 2px;
}
.goal__tag {
  display: block;
  font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: #f7d9a4; margin-bottom: 3px;
}
/* on paper, it goes back to being a red-ruled slip */
.sheet .goal {
  color: var(--ink);
  background: rgba(122,83,52,.055);
  border-color: var(--rule); border-left-color: var(--stamp);
}
.sheet .goal__tag { color: var(--stamp); }

/* ── the beat ──────────────────────────────────────────────────────────────
   M5 brief P1.3. The thing that turns up on the table between the month's
   figures and the button. It sits on the WOOD, not on paper, and has no sheet
   around it — it is not another document to read, it is something happening in
   the room. Slower entrance than the sheets above it so it lands after them
   rather than with them. */
.beat {
  max-width: 30rem; margin: 26px auto 20px;
  font-family: var(--body); font-style: italic;
  font-size: 17px; line-height: 1.5; color: var(--on-wood);
  animation: beat-in .5s cubic-bezier(.2,.8,.3,1) .34s both;
}
.beat::before, .beat::after {
  content: ''; display: block; width: 34px; height: 1px;
  margin: 0 auto; background: var(--on-wood-soft); opacity: .5;
}
.beat::before { margin-bottom: 13px; }
.beat::after  { margin-top: 13px; }
@keyframes beat-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; } }

/* ── the hand in the margin ────────────────────────────────────────────── */
.hand {
  font-family: var(--hand);
  font-size: 23px;
  line-height: 1.25;
  color: var(--pen);
  transform: rotate(-1.4deg);
  margin: 14px auto 2px;
  max-width: 420px;
}
/* The stamp red is a PAPER colour. On the bare table it measures 1.04:1 against
   the wood — the first-time nudges on Q1 were, strictly speaking, invisible.
   Found while placing the goal plate next to one. Paper keeps the stamp red;
   the wood gets a red that survives the background it is actually on. */
.hand--red { color: var(--stamp); }
.stage > .hand--red { color: #f7c4b2; }

/* ── the ledger ────────────────────────────────────────────────────────── */
.ledger { text-align: left; max-width: 470px; margin: 0 auto; border-top: 1px solid var(--rule); }
.ledger__row { display: flex; align-items: baseline; gap: 10px; padding: 7px 6px 6px; border-bottom: 1px solid var(--rule); }
.ledger__row--total { border-bottom: 3px double var(--ink); font-weight: 700; }
.ledger__label { font-size: 15px; }
.ledger__dots { flex: 1; border-bottom: 1px dotted var(--ink-faint); transform: translateY(-4px); }
.ledger__fig { font-family: var(--figures); font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger__fig--in  { color: var(--ledger); }
.ledger__fig--out { color: var(--debt); }

/* ── decision slips ────────────────────────────────────────────────────── */
.slips { display: grid; gap: 14px; margin: 20px 0 4px; }
.slip {
  position: relative; display: block; width: 100%;
  text-align: left; font-family: var(--body); font-size: 17px; color: var(--ink);
  background: linear-gradient(180deg, #fefaef, #f6eeda);
  border: 1px solid var(--paper-edge);
  border-left: 5px solid var(--ink-faint);
  border-radius: 2px;
  padding: 15px 17px 14px 16px;
  cursor: pointer;
  box-shadow: 0 2px 5px -3px rgba(0,0,0,.5);
  transition: transform .17s cubic-bezier(.2,.8,.3,1), box-shadow .17s, border-left-color .17s, background .17s;
}
.slip:hover, .slip:focus-visible {
  transform: translateY(-3px) rotate(-.4deg);
  box-shadow: 0 12px 20px -12px rgba(0,0,0,.65);
  border-left-color: var(--stamp);
  background: linear-gradient(180deg, #fffdf5, #faf3e2);
  outline: none;
}
.slip:active { transform: translateY(0) rotate(0); }
.slip__key {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--figures); font-size: 11px; color: var(--ink-faint);
  border: 1px solid var(--rule); border-radius: 2px; padding: 0 5px;
}
.slip__label { font-family: var(--display); font-weight: 700; font-size: 18px; display: block; margin-bottom: 3px; padding-right: 26px; }
.slip__note  { font-size: 14px; color: var(--ink-soft); display: block; line-height: 1.5; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-hi); background: var(--ink);
  border: 1px solid rgba(0,0,0,.5); border-radius: 2px;
  padding: 13px 27px; cursor: pointer; margin: 8px 6px 0;
  display: inline-block; text-decoration: none;
  box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 8px 16px -8px rgba(0,0,0,.7);
  transition: transform .14s, background .14s, box-shadow .14s;
}
.btn:hover, .btn:focus-visible { background: var(--stamp); transform: translateY(-2px); box-shadow: 0 5px 0 rgba(0,0,0,.35), 0 12px 20px -8px rgba(0,0,0,.7); outline: none; }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.btn--ghost { background: rgba(253,248,234,.92); color: var(--ink); }
.btn--ghost:hover { background: var(--paper-hi); color: var(--stamp); }

/* ── the quarter's notes ───────────────────────────────────────────────── */
.notes { list-style: none; padding: 0; margin: 4px auto 4px; max-width: 500px; text-align: left; }
.notes li { position: relative; padding: 9px 0 9px 27px; border-bottom: 1px solid rgba(201,181,144,.6); font-size: 15.5px; }
.notes li::before { content: '—'; position: absolute; left: 4px; color: var(--stamp); font-family: var(--figures); }
.notes li:last-child { border-bottom: none; }

/* ── strain: a pencil mark on the doorframe ────────────────────────────── */
.strain { max-width: 330px; margin: 20px auto 4px; text-align: left; }
.strain__scale {
  position: relative; height: 26px;
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(36,31,25,.26) 9px 10px);
}
.strain__mark { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--stamp); transition: left .6s cubic-bezier(.2,.8,.3,1); }
.strain__mark::after {
  content: attr(data-label); position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-size: 10px; letter-spacing: .12em; color: var(--stamp); white-space: nowrap;
}
.strain__caption { font-size: 12.5px; color: var(--ink-faint); font-style: italic; margin-top: 9px; }

/* ── the reveal table ──────────────────────────────────────────────────── */
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -8px; padding: 0 8px; }
.reveal { width: 100%; max-width: 560px; margin: 12px auto 6px; border-collapse: collapse; font-family: var(--figures); font-size: 13.5px; }
.reveal th, .reveal td { border-bottom: 1px solid var(--rule); padding: 6px 7px; text-align: right; font-variant-numeric: tabular-nums; }
.reveal th { font-family: var(--display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid var(--ink); }
.reveal td:first-child, .reveal th:first-child { text-align: left; }
.reveal tbody tr:hover { background: rgba(201,181,144,.24); }

/* ── the counterfactual ────────────────────────────────────────────────── */
.cost {
  border: 2px solid var(--stamp); border-radius: 2px;
  background: linear-gradient(180deg, #fdf6e8, #f6ecd6);
  padding: 21px 19px 19px; margin: 22px 0;
  box-shadow: 0 12px 22px -14px rgba(0,0,0,.6);
  color: var(--ink);
}
.cost__fig { font-family: var(--figures); font-size: 31px; color: var(--stamp); display: block; margin: 7px 0 5px; font-variant-numeric: tabular-nums; }
.cost--good { border-color: var(--ledger); }
.cost--good .cost__fig { color: var(--ledger); }

/* ── percentile dial: a pencil mark along the whole shelf of lives ─────── */
.rank { max-width: 460px; margin: 6px auto 4px; }
.rank__bar {
  position: relative; height: 34px; border: 1px solid var(--rule); border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(122,83,52,.10) 0 1px, transparent 1px 6px),
    linear-gradient(90deg, rgba(166,58,42,.16), rgba(233,220,192,.5) 50%, rgba(58,107,79,.18));
}
.rank__you {
  position: absolute; top: -7px; bottom: -7px; width: 3px; background: var(--ink);
  transition: left .9s cubic-bezier(.2,.8,.3,1);
}
.rank__you::after {
  content: 'YOU'; position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-size: 10px; letter-spacing: .16em; color: var(--ink);
}
.rank__ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-faint); font-family: var(--display); letter-spacing: .09em; margin-top: 9px; text-transform: uppercase; }
.rank__count { font-family: var(--figures); font-size: 26px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── the epilogue ──────────────────────────────────────────────────────── */
.epilogue { text-align: left; max-width: 520px; margin: 0 auto; padding: 0; }
.epilogue li { margin: 0 0 16px; list-style: none; padding-left: 16px; border-left: 3px solid var(--rule); }
.epilogue b { font-family: var(--display); letter-spacing: .04em; }

/* the question you take to a real person — set as a thing to be read aloud */
.askline {
  font-family: var(--display); font-size: 19px; line-height: 1.42;
  color: var(--ink); font-style: italic;
  border-left: 4px solid var(--stamp); margin: 16px auto 0; padding: 4px 0 4px 16px;
  text-align: left; max-width: 30rem;
}

/* ── the old man ────────────────────────────────────────────────────────
   He is the warm one. Everything else in this game is deliberately cool, so
   his sheet gets the pen-hand and a little more air. */
.oldman { border-left: 4px solid var(--pen); }
.oldman__says {
  font-family: var(--hand); font-size: 24px; line-height: 1.35;
  color: var(--pen); margin: 0; text-align: left; max-width: 30rem;
  margin-inline: auto;
}

/* ── the same decision, twice ──────────────────────────────────────────── */
.twice { text-align: left; max-width: 34rem; margin: 0 auto 26px; }
.twice:last-of-type { margin-bottom: 6px; }
.twice__theme {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 10px; padding-bottom: 5px; border-bottom: 2px solid var(--ink);
}
.twice__side { padding: 9px 0 9px 14px; border-left: 3px solid var(--rule); margin-bottom: 8px; }
.twice__era {
  display: block; font-family: var(--figures); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.twice__chose { display: block; font-family: var(--display); font-weight: 700; font-size: 16.5px; margin: 1px 0 2px; }
.twice__cost { display: block; font-size: 13.5px; color: var(--ink-soft); }
.twice__cost--bad { color: var(--debt); }
.twice__principle {
  font-size: 15px; line-height: 1.55; color: var(--ink-soft);
  margin: 10px 0 0; padding-left: 14px; border-left: 3px solid var(--stamp);
}

/* ── then · now ────────────────────────────────────────────────────────── */
.bridge { text-align: left; max-width: 520px; margin: 0 auto; padding: 0; list-style: none; }
.bridge li { margin: 0 0 20px; padding: 0 0 0 18px; border-left: 3px solid var(--pen); }
.bridge li:last-child { margin-bottom: 4px; }
.bridge__then {
  display: block; font-family: var(--hand); font-size: 20px; line-height: 1.3;
  color: var(--pen); margin-bottom: 5px;
}
.bridge__now { display: block; font-size: 15.5px; line-height: 1.55; }

/* ── the ledger book (look back) ───────────────────────────────────────── */
.book { text-align: left; max-width: 520px; margin: 0 auto; padding: 0; list-style: none; }
.book li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.book li:last-child { border-bottom: none; }
.book__q { font-family: var(--display); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
.book__choice { font-family: var(--display); font-weight: 700; font-size: 17px; display: block; margin: 2px 0 3px; }
.book__fig { font-family: var(--figures); font-size: 14px; color: var(--ink-soft); }

/* ── the quarter ticker ────────────────────────────────────────────────── */
.progress { display: flex; gap: 5px; justify-content: center; margin: 0 0 22px; }
.progress span {
  width: 26px; height: 6px; border-radius: 1px;
  background: rgba(253,248,234,.28); border: 1px solid rgba(253,248,234,.35);
  transition: background .3s, transform .3s;
}
.progress span.done { background: var(--paper-hi); border-color: var(--paper-hi); }
.progress span.now  { background: var(--stamp); border-color: #d9705e; transform: scaleY(1.5); }
/* the ticker inside the intro sits on paper, not on the table — invert it or
   the pages you've already read simply vanish */
.sheet .progress span { background: var(--paper-lo); border-color: var(--rule); }
.sheet .progress span.done { background: var(--ink); border-color: var(--ink); }
.sheet .progress span.now  { background: var(--stamp); border-color: var(--stamp); }

/* ── the overlay (onboarding) ──────────────────────────────────────────── */
.veil {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(30,18,8,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fade .3s both;
}
.veil__card { max-width: 460px; width: 100%; margin: 0; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ── the drawer (the book) ─────────────────────────────────────────────────
   M5 brief P1.4. Deliberately NOT .veil. The scrim is light enough to read the
   quarter through, because the point of the change is that consulting the book
   is not leaving the game. Desktop: slides in from the right, the width of a
   ledger page. Phone: comes up from the bottom, because a side drawer on a
   375px screen is just a modal that arrived at an angle. */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(30,18,8,.34);
  opacity: 0; transition: opacity .26s ease;
}
.drawer-scrim.is-open { opacity: 1; }

.drawer {
  position: fixed; z-index: 56;
  top: 0; right: 0; bottom: 0; width: min(430px, 88vw);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--paper-hi) 0%, var(--paper) 60%, var(--paper-lo) 100%);
  /* the drawer is paper but hangs off <body>, which is wood — without this the
     rows that do not set their own colour inherit the wood palette and vanish */
  color: var(--ink);
  border-left: 1px solid var(--paper-edge);
  box-shadow: -14px 0 34px rgba(20,10,2,.4);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.25,.9,.3,1);
}
.drawer.is-open { transform: translateX(0); }
.drawer__inner { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 22px 20px 14px; }
.drawer__inner .book { max-width: none; }
.drawer__shut {
  flex: none; width: 100%;
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink); background: var(--paper-lo);
  border: none; border-top: 1px solid var(--rule);
  padding: 15px 10px; cursor: pointer;
}
.drawer__shut:hover { background: var(--paper-edge); }

@media (max-width: 560px) {
  .drawer {
    top: auto; left: 0; right: 0; width: auto;
    max-height: 78vh; border-left: none;
    border-top: 1px solid var(--paper-edge);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -14px 34px rgba(20,10,2,.4);
    transform: translateY(100%);
  }
  .drawer.is-open { transform: translateY(0); }
  .drawer__inner { padding: 18px 15px 10px; }
}

/* ── entrances ─────────────────────────────────────────────────────────── */
@keyframes drop-in { from { opacity: 0; transform: translateY(-14px) rotate(-1.1deg); } to { opacity: 1; } }
.animate-in { animation: drop-in .4s cubic-bezier(.2,.8,.3,1) both; }
.animate-in:nth-of-type(2) { animation-delay: .07s; }
.animate-in:nth-of-type(3) { animation-delay: .13s; }
@keyframes thump { 0% { opacity: 0; transform: scale(1.5) rotate(-9deg); } 60% { opacity: 1; transform: scale(.94) rotate(-1.8deg); } 100% { transform: scale(1) rotate(-1.8deg); } }
.stamp.animate-in { animation: thump .34s cubic-bezier(.3,1.4,.5,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .sheet, .sheet + .sheet, .stamp { transform: none; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .sheet { padding: 22px 15px 20px; }
  /* Three rows of sticky chrome eats half a phone screen. Let it scroll away. */
  .masthead { position: static; gap: 4px 8px; padding: 8px 8px 7px; }
  .masthead__title { font-size: 15px; }
  .masthead__who { display: none; }
  .masthead__stat { font-size: 11px; padding: 2px 7px; }
  .iconbtn { font-size: 11px; padding: 3px 7px; }
  .reveal { font-size: 12px; }
  .reveal th, .reveal td { padding: 5px 4px; }
  .hand { font-size: 21px; }
  .sheet--ring { background: linear-gradient(180deg, var(--paper-hi) 0%, var(--paper) 55%, var(--paper-lo) 100%); }
}

/* ── the ad slip ────────────────────────────────────────────────────────────
   Two places only, both of them outside the game: low on the landing page and
   at the very foot of the debrief. See js/ads.js for why, and for the rule that
   the ad network is never even loaded for a player who has paid to be rid of it.

   It is a slip of paper weighted down at the edge of the table, deliberately
   quieter than a .sheet: no lift, no shadow, half a degree of tilt. It should
   read as something that came with the table, not as part of the run.

   Both slots sit on the WOOD, so the label and the offer take the on-wood
   palette. A component authored against paper and then dropped onto the table
   goes unreadable and does not look broken in a screenshot — the stamp red
   measured 1.04:1 out here and the first-time nudges were invisible for a week. */
.adslip {
  display: block;
  max-width: 660px;
  margin: 6px auto 26px;
  padding: 10px 12px 12px;
  border: 1px dashed rgba(246,236,216,.30);
  border-radius: 3px;
  background: rgba(0,0,0,.13);
  transform: rotate(-.4deg);
  text-align: center;
}
.adslip__tag {
  display: block;
  font-family: var(--figures);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-wood-soft);
  opacity: .72;
  margin-bottom: 8px;
}
.adslip__body { min-height: 0; }
.adslip__body .adsbygoogle { margin: 0 auto; }
.adslip__off {
  margin-top: 10px;
  font-family: var(--body);
  font-size: 12px;
  color: var(--on-wood-link);
  background: transparent;
  border: 1px solid rgba(240,189,118,.42);
  border-radius: 2px;
  padding: 4px 11px;
  cursor: pointer;
}
.adslip__off:hover { background: rgba(240,189,118,.10); }

/* At the foot of the debrief the run is over and the card has been taken;
   give it a little more air so it cannot be mistaken for a last beat. */
.adslip--debrief { margin-top: 30px; border-top-style: solid; }

@media (prefers-reduced-motion: reduce) { .adslip { transform: none; } }
@media (max-width: 560px) { .adslip { margin-bottom: 20px; padding: 9px 8px 10px; } }

/* ── citations ──────────────────────────────────────────────────────────────
   A small class marker after a claim: [A] recorded, [R] representative,
   [B] authored. Deliberately legible rather than a superscript dot — the whole
   point is that a player can see WHICH KIND of number they are being shown
   without having to go and look it up. */
.cite {
  font-family: var(--figures);
  font-size: 10px;
  vertical-align: super;
  line-height: 0;
  margin-left: 3px;
  padding: 1px 2px;
  color: var(--pen);
  text-decoration: none;
  border-bottom: none;
  white-space: nowrap;
}
.cite:hover { background: rgba(47,81,112,.12); border-radius: 2px; }
.cite--none { color: var(--ink-faint); cursor: help; }

.refs {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: left;
}
.refs li { margin: 0 0 4px; padding-left: 13px; text-indent: -13px; }
.refs a { color: var(--pen); }

/* ── the Rule of 72 panel ───────────────────────────────────────────────── */
.r72__rule {
  font-family: var(--figures);
  font-size: clamp(15px, 3.4vw, 19px);
  font-weight: 700;
  color: var(--ink);
  background: rgba(201,181,144,.20);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 11px 8px;
  margin: 16px 0 18px;
  letter-spacing: .01em;
}
.r72__table { margin: 0 0 4px; text-align: left; }
.r72__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px 14px;
  align-items: baseline;
  padding: 8px 2px;
  border-bottom: 1px solid var(--rule);
}
.r72__row--head {
  font-family: var(--figures); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); border-bottom-width: 2px;
}
.r72__row--head span:nth-child(2), .r72__row--head span:nth-child(3) { text-align: right; }
.r72__k { font-size: 15px; color: var(--ink); }
.r72__r { font-family: var(--figures); font-size: 14px; color: var(--ink-soft); text-align: right; white-space: nowrap; }
.r72__d { font-family: var(--figures); font-size: 14px; font-weight: 700; color: var(--ink); text-align: right; white-space: nowrap; min-width: 96px; }
.r72__row--debt .r72__d { color: var(--debt); }
.r72__row--total { border-bottom: 3px double var(--rule); border-top: 1px solid var(--rule); margin-top: 2px; }
.r72__row--total .r72__k, .r72__row--total .r72__d { font-weight: 700; }
.r72__row--total .r72__d { color: var(--pen); }
.r72__punch {
  font-family: var(--hand);
  font-size: 22px;
  line-height: 1.35;
  color: var(--pen);
  margin: 16px 0 0;
}
@media (max-width: 560px) {
  .r72__rule { font-size: 15px; padding: 9px 5px; }
  .r72__punch { font-size: 20px; }
}

/* ── the first choice ───────────────────────────────────────────────────────
   Andrew's review, 2 Aug 2026, item 6: "Set-Up the First Choice with different
   colors & flair on the home Page."

   These are still slips of paper on the same table — the material language does
   not change between eras, because the table is the game. What changes is how
   the paper has aged and what colour the era printed things in: 1979 is warm
   stock, burnt orange and avocado; 2021 is cleaner stock with a phone-screen
   cast to it. Nothing here is an image file. */
.picks {
  display: grid;
  gap: 18px;
  max-width: 660px;
  margin: 16px auto 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .picks { grid-template-columns: 1fr 1fr; } }

.pick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  text-decoration: none;
  padding: 18px 18px 16px;
  overflow: hidden;
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
  box-shadow: 0 10px 22px -14px rgba(0,0,0,.75), 0 2px 0 rgba(0,0,0,.20);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pick:hover, .pick:focus-visible {
  transform: translateY(-3px) rotate(-.25deg);
  box-shadow: 0 18px 30px -16px rgba(0,0,0,.8), 0 2px 0 rgba(0,0,0,.20);
  outline: none;
}
/* the era's colour, banded across the head of the slip like a printed form */
.pick::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 6px;
}
/* the ghost year, set enormous and nearly invisible, the way a year is printed
   on the cover of a filing folder */
.pick__year {
  position: absolute; right: 10px; bottom: -18px;
  font-family: var(--display); font-weight: 700; font-size: 84px;
  line-height: 1; letter-spacing: -.03em; pointer-events: none;
}
.pick__title {
  font-family: var(--display); font-weight: 700; font-size: 22px;
  line-height: 1.15; margin-top: 4px;
}
.pick__who {
  font-family: var(--figures); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase;
}
.pick__note { font-size: 14.5px; line-height: 1.5; margin-top: 7px; position: relative; }
.pick__go {
  font-family: var(--figures); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; margin-top: 12px; font-weight: 700;
}
.pick__prop { position: absolute; right: 14px; top: 14px; width: 54px; height: 54px; opacity: .5; }

/* 1979: aged stock, burnt orange and avocado. The decade printed everything in
   these two colours and then put them on a kitchen appliance. */
.pick--79 {
  background:
    linear-gradient(180deg, #f7edd3 0%, #f0e2c0 60%, #e6d4ac 100%);
  color: #33240f;
}
.pick--79::before { background: linear-gradient(90deg, #b4531f 0 34%, #d9a327 34% 67%, #6f7a33 67% 100%); }
.pick--79 .pick__year { color: rgba(180,83,31,.13); }
.pick--79 .pick__who  { color: #8a5a22; }
.pick--79 .pick__note { color: #4a3a21; }
.pick--79 .pick__go   { color: #b4531f; }

/* 2021: the same paper, but the light in the room is coming off a screen. */
.pick--21 {
  background:
    radial-gradient(120% 80% at 82% 6%, rgba(96,150,168,.20) 0%, rgba(96,150,168,0) 58%),
    linear-gradient(180deg, #f8f3e6 0%, #eee7d5 60%, #e3dbc6 100%);
  color: #23201c;
}
.pick--21::before { background: linear-gradient(90deg, #2f6f7c 0 40%, #c8672f 40% 72%, #e0b25c 72% 100%); }
.pick--21 .pick__year { color: rgba(47,111,124,.14); }
.pick--21 .pick__who  { color: #2f6f7c; }
.pick--21 .pick__note { color: #45403a; }
.pick--21 .pick__go   { color: #c8672f; }

/* 2024–26, twice. Both of these live in the same quiet economy, so they share a
   paper and differ only in the colour of the thing on the table: a printed
   roster in olive, a ring binder that has been in a van in oxblood. Cooler and
   flatter than the other two on purpose — there is no drama in this window and
   the card should not promise any. */
.pick--26h {
  background:
    radial-gradient(120% 80% at 18% 8%, rgba(107,122,47,.16) 0%, rgba(107,122,47,0) 56%),
    linear-gradient(180deg, #f6f2e4 0%, #ece7d4 62%, #e0dbc4 100%);
  color: #24241c;
}
.pick--26h::before { background: linear-gradient(90deg, #6b7a2f 0 46%, #9aa46b 46% 74%, #d9cfa8 74% 100%); }
.pick--26h .pick__year { color: rgba(107,122,47,.15); }
.pick--26h .pick__who  { color: #5c6a2a; }
.pick--26h .pick__note { color: #42422f; }
.pick--26h .pick__go   { color: #6b7a2f; }
.pick--26h .pick__prop { color: #6b7a2f; }

.pick--26l {
  background:
    radial-gradient(120% 80% at 84% 8%, rgba(125,59,82,.15) 0%, rgba(125,59,82,0) 56%),
    linear-gradient(180deg, #f7f1e8 0%, #ece4d9 62%, #e0d6c9 100%);
  color: #261e21;
}
.pick--26l::before { background: linear-gradient(90deg, #7d3b52 0 42%, #b07a6a 42% 72%, #ddc7ab 72% 100%); }
.pick--26l .pick__year { color: rgba(125,59,82,.15); }
.pick--26l .pick__who  { color: #7d3b52; }
.pick--26l .pick__note { color: #443539; }
.pick--26l .pick__go   { color: #7d3b52; }
.pick--26l .pick__prop { color: #7d3b52; }

@media (prefers-reduced-motion: reduce) {
  .pick:hover, .pick:focus-visible { transform: none; }
}

/* ── things folded away ─────────────────────────────────────────────────────
   Review item 5: the landing gave up too much before anybody had pressed play.
   Nothing was deleted; the long-form honesty about the model now lives behind a
   summary line for the reader who wants it. */
.fold { max-width: 660px; margin: 0 auto; text-align: left; }
.fold__sum {
  cursor: pointer; list-style: none;
  font-family: var(--figures); font-size: 13px; letter-spacing: .04em;
  color: var(--on-wood-soft);
  padding: 9px 12px;
  border: 1px dashed rgba(246,236,216,.28);
  border-radius: 2px;
  text-align: center;
}
.fold__sum::-webkit-details-marker { display: none; }
.fold__sum::after { content: ' ▾'; opacity: .7; }
.fold[open] .fold__sum::after { content: ' ▴'; }
.fold__sum:hover { background: rgba(246,236,216,.07); color: var(--on-wood); }

/* ── the table dressing ─────────────────────────────────────────────────────
   Andrew's review: "adding some more fun graphical elements of the time periods
   in the background to enhance the authenticity of the experiences."

   Objects from the era, sitting on the wood either side of the paper — a rotary
   phone and a transistor radio in 1979, a phone and a paper coffee cup in 2021.
   They live in the MARGINS and only appear when there are margins to live in,
   which is why they are gated at 1080px: the paper column is 660px and nothing
   may ever crowd it. Drawn as inline SVG by the scenario that owns them (see
   the PROPS array in js/scenario-*.js) — no image files, and no era knowledge
   in the engine. */
.dressing {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  display: none;
}
.dressing__prop { position: absolute; opacity: .16; filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)); }
.dressing__prop--l { left: max(18px, calc(50vw - 500px)); }
.dressing__prop--r { right: max(18px, calc(50vw - 500px)); }
.dressing__prop--t { top: 96px; }
.dressing__prop--b { bottom: 60px; }
@media (min-width: 1080px) { .dressing { display: block; } }
/* The stage and the masthead have to sit above the dressing, or a prop drawn at
   the edge of the margin would be behind a rotated sheet's corner. */
.masthead, .stage, .pagefoot { position: relative; z-index: 1; }
.pick--79 .pick__prop { color: #b4531f; }
.pick--21 .pick__prop { color: #2f6f7c; }

/* The same fold, on paper rather than on the wood. Review item 14 — the exact
   arithmetic behind the Rule of 72 is now opt-in, and it lives inside a sheet. */
.fold--paper { max-width: none; }
.fold--paper .fold__sum {
  color: var(--pen);
  border-color: var(--rule);
  background: rgba(201,181,144,.14);
  text-align: left;
}
.fold--paper .fold__sum:hover { background: rgba(47,81,112,.10); color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE AAA PASS
   Andrew's enhancement brief, 4 August 2026. Everything below belongs to one
   of its systems; each block says which section it answers so a future edit
   can find the argument as well as the rule.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── the room: what the household thinks ────────────────────────────────────
   Brief Part II §4. Two people who want different things, sitting between the
   figures and the buttons. Typeset as a margin conversation rather than as UI:
   these are voices, not options, and a player must never be able to mistake
   one for something clickable. */
.voices {
  margin: 18px 0 4px;
  padding: 12px 14px;
  text-align: left;
  border-left: 3px solid var(--rule);
  background: rgba(201,181,144,.13);
}
.voice { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.voice:last-child { margin-bottom: 0; }
.voice__who {
  display: inline-block;
  font-family: var(--figures); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--stamp); margin-right: 8px;
}
.voice__line { color: var(--ink-soft); }

/* ── the narrator, and the whisper ──────────────────────────────────────────
   Brief Part IV §16 and Part III §10. Two different voices and they must not
   look the same: the narrator is the WORLD observing a contradiction, in the
   pen hand on the wood; the whisper is a principle firing, quieter and drier,
   and it never repeats within a run. */
.narr {
  font-family: var(--hand);
  font-size: 21px; line-height: 1.35;
  color: var(--on-wood-link);
  margin: 20px auto 6px; max-width: 520px;
}
.whisper {
  font-family: var(--figures);
  font-size: 12.5px; letter-spacing: .04em;
  color: var(--on-wood-soft);
  margin: 0 auto 14px; max-width: 480px;
  padding-top: 8px;
  border-top: 1px dotted rgba(246,236,216,.25);
}

/* ── two numbers that disagree ──────────────────────────────────────────────
   Brief Part IV §12: "Never say merely 'inflation was 8%.' Show what the
   household lost the ability to buy." The pips are the whole feature — a row
   that had eleven and now has nine says it without a percentage in sight. */
.basket { margin: 14px 0 4px; text-align: left; }
.basket__head {
  font-family: var(--figures); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 8px;
}
.basket__row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  gap: 4px 8px; align-items: center;
  padding: 4px 0; border-bottom: 1px dotted var(--rule);
}
.basket__n    { font-family: var(--figures); font-weight: 700; font-size: 17px; color: var(--ink); }
.basket__what { font-size: 13.5px; color: var(--ink-soft); }
.basket__pips { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.pip {
  width: 8px; height: 11px; border-radius: 1.5px;
  background: var(--ledger); display: inline-block;
}
/* The ones the same money no longer reaches. Not deleted — faded, because the
   point is that they were there and nothing was spent to lose them. */
.pip--gone { background: transparent; border: 1px dashed var(--stamp); opacity: .55; }
.basket__more { font-family: var(--figures); font-size: 11px; color: var(--ink-faint); }
.basket__was  { font-family: var(--figures); font-size: 11px; color: var(--stamp); min-width: 42px; text-align: right; }
.basket__note { font-size: 12.5px; color: var(--ink-soft); margin: 8px 0 0; font-style: italic; }
.basket__src  { font-size: 11px; color: var(--ink-faint); margin: 4px 0 0; }

/* ── the four acts ──────────────────────────────────────────────────────────
   Brief Part II §9. A rule across the wood with a number on it: the debrief had
   all this material and no shape, so the two best things in it sat where a
   player who had stopped scrolling never got to them. */
.act {
  display: flex; align-items: baseline; gap: 12px;
  max-width: 660px; margin: 40px auto 14px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(246,236,216,.28);
}
.act__n {
  font-family: var(--figures); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-wood-link); white-space: nowrap;
}
.act__t {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(19px, 4vw, 24px); color: var(--on-wood);
  text-align: left; line-height: 1.15;
}

/* ── the ending archetype ───────────────────────────────────────────────── */
.arch { text-align: left; }
.arch__name  { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 5vw, 30px); margin: 0; color: var(--ink); }
.arch__blurb { font-family: var(--hand); font-size: 21px; color: var(--pen); margin: 2px 0 14px; }
.arch__also  { margin: -8px 0 14px; }
.arch__two   { display: grid; gap: 14px; margin: 0 0 18px; }
@media (min-width: 620px) { .arch__two { grid-template-columns: 1fr 1fr; gap: 20px; } }
.arch__two p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.arch__lbl {
  font-family: var(--figures); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.arch__why { border-top: 1px dotted var(--rule); padding-top: 10px; margin-top: 4px; }

/* the six readings, deliberately never totalled */
.dims { display: grid; gap: 7px; margin: 0 0 12px; }
.dim  { display: grid; grid-template-columns: minmax(0,150px) 1fr 34px; gap: 10px; align-items: center; }
.dim__k { font-size: 13px; color: var(--ink-soft); }
.dim__bar { height: 8px; background: rgba(139,127,107,.26); border-radius: 2px; overflow: hidden; }
.dim__bar i { display: block; height: 100%; background: var(--ledger); border-radius: 2px; }
.dim__v { font-family: var(--figures); font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; }
@media (max-width: 480px) { .dim { grid-template-columns: minmax(0,110px) 1fr 30px; gap: 7px; } }

/* ── skill and luck: the 2×2 ────────────────────────────────────────────────
   Brief Part II §9 Act 4. Drawn as a real grid because the DIAGONAL is the
   content — the two boxes on it teach nothing and the two off it are where all
   the information is. A list would throw that away. */
.tt {
  display: grid;
  grid-template-columns: minmax(60px, auto) 1fr 1fr;
  gap: 6px; margin: 16px 0 4px; text-align: left;
}
.tt__corner { }
.tt__h, .tt__s {
  font-family: var(--figures); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
  align-self: end; padding-bottom: 4px;
}
.tt__s { align-self: center; padding: 0 6px 0 0; text-align: right; }
.tt__c {
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 10px 11px; background: rgba(253,248,234,.55);
  min-height: 76px;
}
.tt__c--earned    { border-color: rgba(58,107,79,.55);  background: rgba(58,107,79,.10); }
.tt__c--unlucky   { border-color: rgba(47,81,112,.5);   background: rgba(47,81,112,.09); }
.tt__c--lucky     { border-color: rgba(166,120,26,.5);  background: rgba(166,120,26,.09); }
.tt__c--avoidable { border-color: rgba(166,58,42,.5);   background: rgba(166,58,42,.08); }
.tt__c--empty     { opacity: .55; }
.tt__label {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 14px; color: var(--ink); margin-bottom: 6px;
}
.tt__list { list-style: none; margin: 0 0 8px; padding: 0; }
.tt__list li { margin: 0 0 5px; font-size: 12.5px; line-height: 1.35; }
.tt__list b { display: block; font-family: var(--figures); font-size: 10px; letter-spacing: .1em; color: var(--ink-faint); }
.tt__list span { color: var(--ink-soft); }
.tt__note { font-size: 11.5px; line-height: 1.4; color: var(--ink-faint); font-style: italic; }
.tt__none { font-size: 12px; color: var(--ink-faint); }
@media (max-width: 560px) {
  .tt { grid-template-columns: 1fr 1fr; }
  .tt__corner, .tt__s { display: none; }
  .tt__c::before {
    content: attr(data-row); display: block;
    font-family: var(--figures); font-size: 9px; letter-spacing: .1em;
    color: var(--ink-faint); margin-bottom: 3px;
  }
}

/* ── the decision autopsy ────────────────────────────────────────────────── */
.case { margin-bottom: 8px; }
.case__tag {
  font-family: var(--figures); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px; margin-left: 6px; white-space: nowrap;
}
.case__tag--earned    { color: #24503a; background: rgba(58,107,79,.18); }
.case__tag--unlucky   { color: #2f5170; background: rgba(47,81,112,.16); }
.case__tag--lucky     { color: #6a4a12; background: rgba(166,120,26,.18); }
.case__tag--avoidable { color: #7a2b20; background: rgba(166,58,42,.15); }
.case__tag--tossup    { color: #5f5546; background: rgba(95,85,70,.12); }

/* ── what the run demonstrated ──────────────────────────────────────────── */
.princ { text-align: left; padding: 14px 0; border-bottom: 1px dotted var(--rule); }
.princ:last-of-type { border-bottom: none; }
.princ__head { margin: 0 0 6px; font-size: 16px; line-height: 1.35; }
.princ__tier {
  font-family: var(--figures); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; padding: 2px 6px; border-radius: 2px;
  margin-right: 8px; white-space: nowrap; cursor: help;
}
.princ__tier--A { color: #24503a; background: rgba(58,107,79,.18);  border: 1px solid rgba(58,107,79,.45); }
.princ__tier--S { color: #2f5170; background: rgba(47,81,112,.16);  border: 1px solid rgba(47,81,112,.45); }
.princ__tier--P { color: #6a4a12; background: rgba(166,120,26,.16); border: 1px solid rgba(166,120,26,.45); }
.princ__tier--N { color: #5f5546; background: rgba(95,85,70,.12);   border: 1px solid rgba(95,85,70,.35); }
.princ__body { margin: 0 0 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.princ__who  { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-faint); font-style: italic; }
/* Printed every single time, and that is the point: it is the difference
   between citing a body of work and borrowing its reputation. Brief §26. */
.princ__not {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft);
  padding-left: 10px; border-left: 2px solid var(--stamp);
}

/* ── accessibility ──────────────────────────────────────────────────────────
   Brief Part XI: "Add reduced motion, captions, and mute controls." The mute
   was already there. This is the rest: nothing in the AAA pass may animate for
   a reader who has asked the operating system for stillness. */
@media (prefers-reduced-motion: reduce) {
  .animate-in, .dim__bar i, .tt__c { animation: none !important; transition: none !important; }
  .pick:hover, .pick:focus-visible, .slip:hover, .slip:focus-visible { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* The two-year-window caveat on the skill/luck grid. Deliberately styled as a
   warning rather than as small print: the grid looks authoritative, and without
   this it would quietly overrule the epilogue on the single most important
   decision in the game. */
.tt__warn {
  margin: 16px 0 0;
  padding: 11px 13px;
  font-size: 13px; line-height: 1.55; text-align: left;
  color: var(--ink-soft);
  background: rgba(166,58,42,.07);
  border-left: 3px solid var(--stamp);
}

/* ── the pop-up ─────────────────────────────────────────────────────────────
   Andrew, 17 Aug: "lots of mtv pop-ups delivering insights w/ links out."
   Pop-Up Video, on a kitchen table.

   It replaces `.whisper`, which was a dotted rule and a line of small grey
   prose — correct information, invisible delivery, and one more paragraph on a
   page he has told us has too many. Same content, now an object on the wood:
   a note somebody pinned there, tilted a degree and a half so it reads as
   placed rather than typeset.

   The tilt is deliberately tiny. Two degrees starts to look like a sticker. */
.popup {
  position: relative;
  display: block;
  max-width: 440px;
  margin: 16px auto 18px;
  padding: 14px 16px 12px;
  text-align: left;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  transform: rotate(-1.5deg);
  box-shadow: 0 1px 0 var(--paper-hi) inset, 0 6px 16px rgba(0, 0, 0, .28);
  animation: popup-in .34s cubic-bezier(.2, 1.4, .4, 1) both;
}

/* The pin. A drawing pin pushed through the top-left corner — the reason the
   note sits at an angle at all. */
.popup__pin {
  position: absolute; top: -6px; left: 16px;
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #d8574a, #8c2c22 70%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.popup__text {
  margin: 0;
  font-family: var(--body);
  font-size: 15px; line-height: 1.45;
  color: var(--ink);
}

.popup__cite {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 10px;
  margin: 10px 0 0; padding-top: 8px;
  border-top: 1px dotted var(--rule);
  font-family: var(--figures);
  font-size: 11px; letter-spacing: .06em;
  color: var(--ink-faint);
}

/* The door out. Underlined rather than coloured: this sits on paper, and a
   blue web link on a 1979 kitchen table breaks the whole conceit. */
.popup__more {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.popup__more:hover,
.popup__more:focus-visible { color: var(--ink); }

@keyframes popup-in {
  from { opacity: 0; transform: rotate(-1.5deg) translateY(10px) scale(.94); }
  to   { opacity: 1; transform: rotate(-1.5deg) translateY(0)    scale(1); }
}

/* A note that springs onto the page is a nice touch and a genuine problem for
   some people. Everything above still arrives; it just arrives already there. */
@media (prefers-reduced-motion: reduce) {
  .popup { animation: none; }
}