/* ------------------------------------------------------------------
   DueStory site
   Plain CSS. No framework, no build step, NO JAVASCRIPT.

   The two scenes the reader operates — the invoice that moves a period,
   and the ledger that shows what survives one — are hidden radio buttons
   plus sibling selectors. Nothing to load, and they work with a keyboard.
   ------------------------------------------------------------------ */

:root {
  /* INK does the work. GILT carries the ornament. RED MEANS EXCEPTION,
     and nothing else on the page is allowed to use it. That one rule is
     most of why this reads as considered rather than decorated. */
  --ink:      #12151b;
  --ink-soft: #3c414b;
  --paper:    #f8f7f4;
  --paper-hi: #fdfcfa;
  --band:     #eeece6;
  --chrome:   #12151b;
  --card:     #fffefc;

  --gilt:     #a98b56;
  --gilt-lt:  #c9a978;
  --gilt-fade:rgba(169,139,86,.34);

  --alarm:    #9d3220;
  --alarm-lt: #d0805f;

  --border:   #e4e2db;
  --rule:     #d3cfc5;
  --muted:    #575c66;
  --faint:    #8b8f98;
  --success:  #1c5f45;
  --warning:  #8a6a1f;

  --serif: "Playfair Display", Georgia, "Iowan Old Style", Palatino, serif;
  --sans:  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  background-image: linear-gradient(180deg, var(--paper-hi) 0%, var(--paper) 340px);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  letter-spacing: -0.002em;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 30px; }
.num { font-variant-numeric: tabular-nums; }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ----------------------------------------------------- header, footer */

.chrome { background: var(--chrome); color: var(--paper); }
.chrome-row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px;
  padding-top: 22px; padding-bottom: 22px;
}
.mark { font-family: var(--serif); font-size: 24px; color: var(--paper); text-decoration: none; }
.mark .s { color: var(--gilt-lt); }

/* The footer is the one place the mark stands beside the wordmark. It is
   tall and narrow, so it is sized off the cap height rather than the em —
   matching the box would leave it towering over the letters. */
/* Exactly two flex children — the glyph and the whole wordmark. Leave the
   word as a bare text node and the flex gap opens up inside it: "Due Story". */
/* Exactly two flex children — the glyph and the whole wordmark. Leave the
   name as a bare text node and the flex gap opens up inside it: "Due Story". */
.lockup { display: inline-flex; align-items: center; gap: 12px; }
.lockup .wordmark { white-space: nowrap; }
.mark-glyph { height: 26px; width: auto; flex: none; }
.chrome-note { color: #a49c91; font-size: 14px; font-style: italic; font-family: var(--serif); }
.chrome-legal {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 10px;
  border-top: 1px solid #2a2e36;
  padding-top: 18px; padding-bottom: 26px;
  color: #8e867c; font-size: 13px;
}
.legal-links a {
  color: #8e867c; text-decoration: none;
  border-bottom: 1px solid #3b3f47; padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.legal-links a:hover { color: var(--paper); border-bottom-color: var(--gilt-lt); }
.chrome-cta {
  color: var(--paper); text-decoration: none; font-size: 13px; font-weight: 500;
  letter-spacing: .04em; padding: 8px 18px;
  border: 1px solid #45413b; border-radius: 999px;
  transition: border-color .18s ease, color .18s ease;
}
.chrome-cta:hover { border-color: var(--gilt-lt); color: var(--gilt-lt); }

/* ------------------------------------------------------------ layout */

section { padding: 92px 0; border-bottom: 1px solid var(--border); }
section.band { background: var(--band); }

/* ---------------------------------------------------------- ornament */

.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin: 0 0 28px;
  font-size: 8px; color: var(--gilt-lt); letter-spacing: 0;
}
.ornament span { display: block; width: 46px; height: 1px; background: currentColor; opacity: .45; }

/* -------------------------------------------------------------- type */

h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: 47px; line-height: 1.13;
  margin: 0 0 26px; letter-spacing: -0.02em;
}
h1 .accent { color: var(--ink-soft); font-style: italic; }

h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 32px; line-height: 1.26;
  margin: 0 0 22px; max-width: 22em; letter-spacing: -0.012em;
}
h3 { font-family: var(--sans); font-weight: 600; font-size: 15px; margin: 0 0 8px; }
p { margin: 0 0 18px; }

.lead { font-size: 19.5px; line-height: 1.6; max-width: 30em; margin-bottom: 30px; color: var(--ink-soft); }
.wide { max-width: 36em; }
.closing { color: var(--muted); }
.pull { font-family: var(--serif); font-size: 21px; font-style: italic; color: var(--ink-soft); margin-top: 34px; }

.brandline {
  font-family: var(--serif); font-size: 16px; font-style: italic;
  color: var(--faint); margin: 0 0 22px; padding-bottom: 20px;
  border-bottom: 1px solid var(--rule); max-width: 18em;
  letter-spacing: .01em;
}
.brandline.light {
  color: #a49c91; border-bottom-color: #3b3833;
  margin-left: auto; margin-right: auto; text-align: center;
}

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint);
  margin: 0 0 16px; display: flex; align-items: center; gap: 13px;
}
.num-mark {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--gilt); border: 1px solid var(--gilt-fade);
  border-radius: 999px; padding: 4px 9px; flex: none;
}

/* -------------------------------------------------------------- hero */

section.hero { padding: 96px 0 88px; }
.hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 60px; align-items: start; }

.btn {
  display: inline-block; background: var(--ink); color: var(--paper-hi);
  text-decoration: none; font-weight: 500; font-size: 14.5px;
  letter-spacing: .01em; padding: 14px 28px; border-radius: 999px;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: #000; transform: translateY(-1px); }
.cta-row { margin: 0 0 18px; }
.nudge { margin: 0; font-size: 13px; color: var(--faint); font-style: italic; font-family: var(--serif); }

/* Who this is for, said in the hero rather than left to the closing section.
   A firm that does not work this way should be able to rule itself out in the
   first screen, not the last. */
.who {
  margin: -12px 0 22px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--muted);
  max-width: 34em;
}


/* ------------------------------------------------------------ scenes */

.tabs { display: flex; margin-bottom: -1px; position: relative; z-index: 2; }
.tabs label {
  flex: 1 1 auto; padding: 11px 18px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  text-align: center; color: var(--faint);
  background: var(--band); border: 1px solid var(--rule);
  cursor: pointer; user-select: none;
  transition: color .18s ease, background .18s ease;
}
.tabs label:first-of-type { border-radius: 4px 0 0 0; border-right: 0; }
.tabs label:last-of-type  { border-radius: 0 4px 0 0; }
.tabs label:hover { color: var(--ink); }

#p-feb:checked ~ .tabs label[for="p-feb"],
#p-mar:checked ~ .tabs label[for="p-mar"],
#l-a:checked   ~ .tabs label[for="l-a"],
#l-b:checked   ~ .tabs label[for="l-b"] {
  background: var(--card); color: var(--ink); border-bottom-color: var(--card);
}
#p-feb:focus-visible ~ .tabs label[for="p-feb"],
#p-mar:focus-visible ~ .tabs label[for="p-mar"],
#l-a:focus-visible   ~ .tabs label[for="l-a"],
#l-b:focus-visible   ~ .tabs label[for="l-b"] { outline: 2px solid var(--alarm); outline-offset: -2px; }

/* ── The scenes move by themselves, once ──────────────────────────────
   NEITHER TAB IS CHECKED AT THE START. That is the whole mechanism: with
   no radio selected there is nothing for a :checked rule to win against,
   so the animation owns the card. The moment a reader presses a date, a
   :checked rule fires, cancels the animation and holds that period.

   THE RESTING STATE IS THE SECOND PERIOD, deliberately. Everything below
   sets .a hidden and .b shown as the plain, un-animated truth; the
   animation rewinds to .a and plays forward. So with animations off — or
   scripts off, or a reader who scrolled past — what remains on screen is
   the exception and the three rows that need somebody. The conclusion is
   never the thing that gets lost.

   2 seconds on the decision, a third of a second to cross, then it holds. */

.states { display: grid; }
.states > .state { grid-area: 1 / 1; }
.rows .st { display: grid; }
.rows .st > .state { grid-area: 1 / 1; }
.ledger-count { display: grid; }
.ledger-count > .state { grid-area: 1 / 1; }

.state.a { opacity: 0; visibility: hidden; }
.state.b { opacity: 1; visibility: visible; }

@keyframes ds-out { 0%, 71% { opacity: 1; visibility: visible; } 82%, 100% { opacity: 0; visibility: hidden; } }
@keyframes ds-in  { 0%, 71% { opacity: 0; visibility: hidden; }  82%, 100% { opacity: 1; visibility: visible; } }

.scene.run .state.a { animation: ds-out 2.8s both; }
.scene.run .state.b { animation: ds-in  2.8s both; }

/* the tab highlight travels with the card */
@keyframes ds-tab-off {
  0%, 71%   { background: var(--card); color: var(--ink); border-bottom-color: var(--card); }
  82%, 100% { background: var(--band); color: var(--faint); border-bottom-color: var(--rule); }
}
@keyframes ds-tab-on {
  0%, 71%   { background: var(--band); color: var(--faint); border-bottom-color: var(--rule); }
  82%, 100% { background: var(--card); color: var(--ink); border-bottom-color: var(--card); }
}
.scene.run .tabs label:first-of-type { animation: ds-tab-off 2.8s both; }
.scene.run .tabs label:last-of-type  { animation: ds-tab-on  2.8s both; }

/* the ledger's nine rows stepping back, and its three stepping forward */
@keyframes ds-quiet { 0%, 71% { opacity: 1; } 82%, 100% { opacity: .3; } }
@keyframes ds-live  { 0%, 71% { background: transparent; } 82%, 100% { background: rgba(157,50,32,.04); } }
.rows li.quiet { opacity: .3; }
.rows li.live  { background: rgba(157,50,32,.04); }
.scene.run .rows li.quiet { animation: ds-quiet 2.8s both; }
.scene.run .rows li.live  { animation: ds-live  2.8s both; }

/* ── A press beats the animation, in both directions ───────────────── */

#p-feb:checked ~ .tabs label[for="p-feb"],
#p-mar:checked ~ .tabs label[for="p-mar"],
#l-a:checked   ~ .tabs label[for="l-a"],
#l-b:checked   ~ .tabs label[for="l-b"] {
  animation: none; background: var(--card); color: var(--ink); border-bottom-color: var(--card);
}
#p-mar:checked ~ .tabs label[for="p-feb"],
#p-feb:checked ~ .tabs label[for="p-mar"],
#l-b:checked   ~ .tabs label[for="l-a"],
#l-a:checked   ~ .tabs label[for="l-b"] {
  animation: none; background: var(--band); color: var(--faint); border-bottom-color: var(--rule);
}
#p-feb:focus-visible ~ .tabs label[for="p-feb"],
#p-mar:focus-visible ~ .tabs label[for="p-mar"],
#l-a:focus-visible   ~ .tabs label[for="l-a"],
#l-b:focus-visible   ~ .tabs label[for="l-b"] { outline: 2px solid var(--alarm); outline-offset: -2px; }

#p-feb:checked ~ .panel .state.a,
#l-a:checked   ~ .rows .state.a,
#l-a:checked   ~ .ledger-count .state.a { animation: none; opacity: 1; visibility: visible; }
#p-feb:checked ~ .panel .state.b,
#l-a:checked   ~ .rows .state.b,
#l-a:checked   ~ .ledger-count .state.b { animation: none; opacity: 0; visibility: hidden; }
#p-mar:checked ~ .panel .state.a,
#l-b:checked   ~ .rows .state.a,
#l-b:checked   ~ .ledger-count .state.a { animation: none; opacity: 0; visibility: hidden; }
#p-mar:checked ~ .panel .state.b,
#l-b:checked   ~ .rows .state.b,
#l-b:checked   ~ .ledger-count .state.b { animation: none; opacity: 1; visibility: visible; }

#l-a:checked ~ .rows li.quiet { animation: none; opacity: 1; }
#l-a:checked ~ .rows li.live  { animation: none; background: transparent; }
#l-b:checked ~ .rows li.quiet { animation: none; opacity: .3; }
#l-b:checked ~ .rows li.live  { animation: none; background: rgba(157,50,32,.04); }

.scene-foot {
  margin: 14px 0 0; font-size: 12.5px; color: var(--faint);
  font-family: var(--serif); font-style: italic;
}

/* ------------------------------------------------- the invoice panel */

.panel {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 0 4px 4px 4px;
  box-shadow: 0 1px 1px rgba(33,31,28,.04), 0 14px 40px -12px rgba(33,31,28,.16);
  position: relative; z-index: 1;
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 14px 24px; border-bottom: 1px solid var(--border);
}
.rec { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: var(--faint); }
.rec-sub { font-size: 13px; font-weight: 500; }

.state { padding: 26px 24px 24px; }
.kicker {
  font-size: 10px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 10px;
}
.big { font-family: var(--serif); font-size: 28px; line-height: 1.15; margin: 0 0 20px; letter-spacing: -0.01em; }

dl.facts { margin: 0; }
dl.facts > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px;
}
dl.facts dt { color: var(--faint); margin: 0; }
dl.facts dd { margin: 0; font-weight: 500; }
dl.facts.compare > div { border-top-color: rgba(184,57,15,.15); }
dl.facts .short { color: var(--alarm); font-weight: 600; }

.statusline { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13.5px; }
.statusline.ok  { color: var(--success); }
.statusline.act { color: var(--alarm); font-weight: 500; }

.finding {
  padding: 18px 20px; background: rgba(184,57,15,.04);
  border-left: 2px solid var(--alarm); border-radius: 0 3px 3px 0;
}
.finding-line { margin: 0 0 14px; font-size: 15.5px; line-height: 1.45; font-weight: 500; }

.chip {
  display: inline-block; margin: 0 0 10px; padding: 3px 10px;
  background: var(--alarm); color: #fff;
  font-size: 9.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; border-radius: 999px;
}
.chip.small { margin: 0 0 12px; }

/* --------------------------------------------------------- statement */

section.statement { background: var(--chrome); color: var(--paper); border-bottom: 0; padding: 92px 0; }
section.statement .say {
  font-family: var(--serif); font-size: 33px; line-height: 1.42;
  margin: 0 auto; max-width: 17em; text-align: center; letter-spacing: -0.01em;
}
section.statement .accent { color: var(--gilt-lt); font-style: italic; }

/* ------------------------------------------------------------ scraps */

.scraps { display: flex; flex-wrap: wrap; gap: 26px; margin: 34px 0 0; }

.scrap {
  flex: 1 1 262px; margin: 0; padding: 20px 22px;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(33,31,28,.04), 0 12px 30px -14px rgba(33,31,28,.2);
  transition: transform .25s ease, box-shadow .25s ease;
}
.scrap:nth-child(1) { transform: rotate(-1.1deg); }
.scrap:nth-child(2) { transform: rotate(.7deg); }
.scrap:nth-child(3) { transform: rotate(-.5deg); }
.scraps:hover .scrap { transform: rotate(0deg); }

.scrap-meta { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--faint); }
.scrap-sub { margin: 8px 0 0; font-size: 13px; font-weight: 600; }
.scrap-text { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

.scrap.mail { border-top: 2px solid var(--rule); }
.scrap.sheet { background: #fdf8e6; border-color: #eadfb8; }
.scrap.sheet .scrap-text { font-family: var(--mono); font-size: 13px; }
.scrap.note { background: var(--card); }
.scrap.note .hand { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink); }
.scrap.note .scrap-meta { margin-top: 12px; }

/* ------------------------------------------------------- the ledger */

.ledger { margin-top: 30px; }
.ledger .tabs label { flex: 1 1 50%; }

.ledger-count {
  margin: 0; padding: 16px 24px; background: var(--card);
  border: 1px solid var(--rule); border-bottom: 0;
  font-size: 14.5px; color: var(--muted); position: relative; z-index: 1;
}
.ledger-count strong { color: var(--ink); font-weight: 500; }

ol.rows {
  list-style: none; margin: 0; padding: 0; background: var(--card);
  border: 1px solid var(--rule); border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 1px rgba(33,31,28,.04), 0 14px 40px -16px rgba(33,31,28,.18);
}
ol.rows li {
  display: grid; grid-template-columns: minmax(0,1.5fr) 64px minmax(0,108px) minmax(0,1.4fr);
  gap: 14px; align-items: baseline; padding: 12px 24px;
  border-top: 1px solid var(--border); font-size: 14px;
  transition: opacity .35s ease, background .35s ease;
}
ol.rows li:first-child { border-top: 0; }
.rows .v { font-weight: 500; }
.rows .i { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.rows .b { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.rows .st { color: var(--faint); font-size: 13px; }
.rows em.flag { font-style: normal; font-weight: 600; color: var(--alarm); }
.rows em.flag.gone { color: var(--warning); }


/* -------------------------------------------------- comparison table */

table.compare-table { border-collapse: collapse; width: 100%; margin-top: 8px; font-size: 15px; }
table.compare-table th {
  text-align: left; padding: 0 20px 12px 0;
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); border-bottom: 1px solid var(--ink);
}
table.compare-table td { padding: 16px 20px 16px 0; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--muted); }
table.compare-table td:first-child { color: var(--ink); font-weight: 500; width: 30%; }
table.compare-table td.raise { color: var(--alarm); font-weight: 600; width: 30%; }
table.compare-table td.raise.soft { color: var(--warning); }

/* ------------------------------------------------------------- track */

ol.track {
  list-style: none; margin: 32px 0 30px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
}
ol.track li { padding: 26px 24px 0 0; font-size: 14px; color: var(--muted); }
ol.track li + li { padding-left: 24px; border-left: 1px solid var(--border); }
ol.track strong { display: block; color: var(--ink); font-family: var(--serif); font-size: 19px; font-weight: 400; margin-bottom: 7px; }
ol.track span:last-child { display: block; }

/* ------------------------------------------------------------ ribbon */

ol.ribbon {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
}
ol.ribbon li { position: relative; padding: 34px 14px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
ol.ribbon li:before {
  content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 1px; background: var(--rule);
}
ol.ribbon li:after {
  content: ""; position: absolute; top: 4px; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--gilt);
}
ol.ribbon li:last-child:before { right: 14px; }
.beat {
  display: block; font-family: var(--serif); font-size: 19px;
  color: var(--ink); margin-bottom: 6px;
}
section.band ol.ribbon li:after { background: var(--band); }

/* ------------------------------------------------------------- rules */

dl.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin: 10px 0 0; }
dl.rules > div { padding: 32px 0; border-top: 1px solid var(--rule); }
dl.rules dt { font-family: var(--serif); font-size: 24px; line-height: 1.28; letter-spacing: -0.01em; }
dl.rules .rn {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .2em; color: var(--gilt); margin-bottom: 10px;
}
dl.rules dd { margin: 11px 0 0; color: var(--muted); font-size: 15px; }

/* ----------------------------------------------------------- closing */

section.close {
  background: var(--chrome); color: var(--paper);
  border-bottom: 0; text-align: center; padding: 96px 0;
}
section.close h2 { margin: 0 auto 22px; }
section.close .wide { margin: 0 auto 34px; color: #b9b1a6; }
.contact { margin: 0; }
.contact a {
  font-family: var(--serif); font-size: 30px; color: var(--paper);
  text-decoration: none; border-bottom: 1px solid rgba(224,122,81,.6); padding-bottom: 5px;
  transition: color .18s ease, border-color .18s ease;
}
.contact a:hover { color: var(--gilt-lt); border-color: var(--gilt-lt); }

/* ------------------------------------------------------------ narrow */

@media (max-width: 1000px) {
  ol.ribbon { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
}
@media (max-width: 960px) {
  ol.track { grid-template-columns: 1fr 1fr; }
  ol.track li:nth-child(odd) { padding-left: 0; border-left: 0; }
  ol.track li:nth-child(n+3) { margin-top: 26px; border-top: 1px solid var(--border); }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  dl.rules { grid-template-columns: 1fr; }
  h1 { font-size: 41px; }
  section.statement .say { font-size: 28px; }
}
@media (max-width: 700px) {
  ol.rows li { grid-template-columns: minmax(0,1fr) minmax(0,96px); row-gap: 4px; }
  .rows .i { grid-column: 1; font-size: 11px; }
  .rows .b { grid-column: 2; grid-row: 1; }
  .rows .st { grid-column: 1 / -1; }
  ol.track, ol.ribbon { grid-template-columns: 1fr; }
  ol.track li, ol.track li + li { padding-left: 0; border-left: 0; }
  ol.track li + li { border-top: 1px solid var(--border); margin-top: 0; }
  ol.ribbon li:before, ol.ribbon li:after { display: none; }
  ol.ribbon li { padding: 16px 0; border-top: 1px solid var(--border); }
  table.compare-table td:first-child, table.compare-table td.raise { width: auto; }
  .tabs label { font-size: 10.5px; letter-spacing: .08em; padding: 10px 8px; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  h1 { font-size: 32px; }
  h2 { font-size: 25px; }
  .lead { font-size: 17.5px; }
  section { padding: 60px 0; }
  section.hero { padding: 56px 0 52px; }
  section.statement, section.close { padding: 62px 0; }
  section.statement .say { font-size: 22px; }
  .contact a { font-size: 22px; }
  .big { font-size: 23px; }
  .pull { font-size: 18px; }
  .scraps { gap: 18px; }
  .scrap { transform: none !important; }
}


/* ------------------------------------------------------------ figures */

section.figures {
  background: var(--chrome); color: var(--paper);
  border-bottom: 0; padding: 74px 0;
}
.fig-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.fig-row > div { padding: 0 34px; border-left: 1px solid #2b2f38; }
.fig-row > div:first-child { padding-left: 0; border-left: 0; }
.fig-row > div:last-child { padding-right: 0; }
.fig {
  display: block; font-family: var(--serif); font-size: 62px; line-height: 1;
  color: var(--gilt-lt); margin-bottom: 16px; letter-spacing: -0.02em;
}
.fig-row p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #a8adb6; max-width: 17em; }

/* ----------------------------------------------------------- specimen */

.specimen {
  margin-top: 28px; background: var(--card);
  border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 1px 1px rgba(18,21,27,.03), 0 16px 44px -18px rgba(18,21,27,.18);
}
.spec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 15px 26px; border-bottom: 1px solid var(--border);
}

ol.trail { list-style: none; margin: 0; padding: 0; }
ol.trail li {
  display: grid; grid-template-columns: 118px 1fr;
  gap: 4px 26px; padding: 20px 26px;
  border-top: 1px solid var(--border);
}
ol.trail li:first-child { border-top: 0; }
.t-date {
  grid-column: 1; grid-row: 1 / span 3; margin: 0;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--faint); padding-top: 3px;
}
.t-label {
  grid-column: 2; margin: 0 0 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gilt);
}
.t-body { grid-column: 2; margin: 0 0 5px; font-size: 15px; line-height: 1.5; }
.t-who { grid-column: 2; margin: 0; font-size: 13px; color: var(--faint); }

ol.trail li.ex { background: rgba(157,50,32,.035); }
ol.trail li.ex .t-label { color: var(--alarm); }
ol.trail li.ex .t-body { font-weight: 500; }

/* --------------------------------------------------------------- asks */

.asks { margin-top: 26px; border-top: 1px solid var(--rule); }

.asks details { border-bottom: 1px solid var(--border); }
.asks summary {
  list-style: none; cursor: pointer;
  padding: 22px 40px 22px 0; position: relative;
  font-family: var(--serif); font-size: 21px; line-height: 1.35;
  letter-spacing: -0.01em;
  transition: color .18s ease;
}
.asks summary::-webkit-details-marker { display: none; }
.asks summary:hover { color: var(--gilt); }
.asks summary:focus-visible { outline: 2px solid var(--gilt); outline-offset: 3px; }

/* a hairline cross that becomes a minus when the answer is open */
.asks summary:before,
.asks summary:after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 13px; height: 1px; background: var(--gilt);
  transition: transform .22s ease, opacity .22s ease;
}
.asks summary:after { transform: rotate(90deg); }
.asks details[open] summary:after { transform: rotate(0deg); opacity: 0; }
.asks details[open] summary { color: var(--ink); }

.asks details p {
  margin: 0 0 24px; padding-right: 40px;
  max-width: 42em; color: var(--muted); font-size: 15.5px;
}

@media (max-width: 900px) {
  .fig-row { grid-template-columns: 1fr; gap: 30px; }
  .fig-row > div { padding: 0 0 0 24px; border-left: 1px solid #2b2f38; }
  .fig-row > div:first-child { padding-left: 24px; border-left: 1px solid #2b2f38; }
  .fig { font-size: 48px; margin-bottom: 10px; }
}

@media (max-width: 700px) {
  ol.trail li { grid-template-columns: 1fr; gap: 3px; }
  .t-date { grid-column: 1; grid-row: auto; margin-bottom: 6px; }
  .t-label, .t-body, .t-who { grid-column: 1; }
  .asks summary { font-size: 18px; padding-right: 32px; }
  section.figures { padding: 54px 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  /* No movement at all. The resting state is the second period, so a reader
     who asks for stillness still lands on the exception. */
  .scene.run .state.a, .scene.run .state.b,
  .scene.run .tabs label, .scene.run .rows li { animation: none !important; }
}

@media print {
  .chrome, section.statement, section.close { background: #fff; color: #000; }
  .contact a, section.statement .accent { color: #000; }
  .panel, ol.rows, .scrap { box-shadow: none; }
  .state.a, .state.b { animation: none !important; opacity: 1 !important; visibility: visible !important; position: static !important; }
  .states, .rows .st, .ledger-count { display: block !important; }
  .asks details { }
  .asks details p { display: block !important; }
  section.figures { background: #fff; color: #000; }
  .fig { color: #000; }
  section { page-break-inside: avoid; }
}