/* ── Ledgerline ──────────────────────────────────────────────────────────────
   One page. No JavaScript. No trackers. Faces are self-hosted OFL subsets.

   Design notes (for the audit):
   · Type     Newsreader (display, optical-size axis on) · Hanken Grotesk (text)
              · DM Mono (figures only — amounts, dates, labels). Digit figures
              are set in mono because that is what a ledger is: a column of
              tabular figures.
   · Colour   paper + ink + ONE chromatic colour, red ink, doing exactly one
              job: a line that needs a human decision. Nothing else is coloured.
   · Shape    Structure is ruled lines, not shadows, not cards-in-cards. Two
              radii exist on the whole page (3px, 12px). No gradients at all —
              the ruled line is drawn with borders.
   · Motion   One moment: statement lines settle onto the ruled line and pick
              up their category as they land. Runs once, ~1s, ends at rest, and
              is pure CSS, so it runs with scripting off.
   ─────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;
  font-display:swap;src:url('./fonts/newsreader-300800-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;
  font-display:swap;src:url('./fonts/HankenGrotesk.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;
  font-display:swap;src:url('./fonts/dm-mono-400-normal.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;
  font-display:swap;src:url('./fonts/dm-mono-500-normal.woff2') format('woff2')}

:root{
  --paper:#f3f2e9;      /* page */
  --card:#fbfaf4;       /* document panels */
  --band:#e9e7da;       /* panel header strips */
  --ink:#191b16;
  --ink-2:#5b5e51;
  --rule:#dedcd0;
  --rule-2:#c6c5b4;
  --red:#b23a1e;
  --red-deep:#8d2b13;
  --red-tint:#f7e5dd;

  --wrap:1080px;
  --gut:clamp(18px,5vw,64px);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --r-sm:3px; --r-lg:12px;

  --t-xl:clamp(2.35rem,7.4vw,4.1rem);
  --t-lg:clamp(1.5rem,3.6vw,2.15rem);
  --t-md:clamp(1.12rem,1.7vw,1.32rem);
  --t-base:1.0625rem;
  --t-sm:.8125rem;

  --ff-display:'Newsreader',Georgia,'Times New Roman',serif;
  --ff-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --ff-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:var(--t-base)/1.62 var(--ff-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%}
h1,h2,h3{margin:0;font-family:var(--ff-display);font-weight:500;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:var(--t-xl);line-height:1.02}
h2{font-size:var(--t-lg);line-height:1.12}
h3{font-family:var(--ff-body);font-size:var(--t-base);font-weight:700;line-height:1.4;letter-spacing:0}
p{margin:0;text-wrap:pretty}
a{color:inherit}
ul,ol,figure,table{margin:0}
table{border-collapse:collapse;width:100%}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(48px,7.5vw,92px);border-top:1px solid var(--rule)}
.sec > h2 + p{margin-top:var(--s5)}
.prose{max-width:60ch;color:var(--ink-2);font-size:var(--t-md);line-height:1.55}
.sec > .prose{margin-top:var(--s5)}

.mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* focus — one visible ring for everything */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:var(--r-sm)}
.skip{position:absolute;left:var(--gut);top:12px;z-index:40;transform:translateY(-260%);
  background:var(--ink);color:var(--paper);padding:11px 16px;border-radius:var(--r-sm);
  font-weight:700;text-decoration:none;transition:transform .12s ease}
.skip:focus{transform:none}

/* ── masthead ─────────────────────────────────────────────────────────── */
.top{border-bottom:1px solid var(--rule)}
.top__in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s6);
  padding-block:var(--s4)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--ff-display);font-weight:600;font-size:1.32rem;letter-spacing:-.01em}
.brand .mark{display:block;width:26px;height:26px;border-radius:7px}
.nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-left:auto}
.nav a{text-decoration:none;font-size:.9375rem;color:var(--ink-2);padding-block:3px;
  border-bottom:1px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--rule-2)}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4.6vw,60px);
  align-items:start;padding-block:clamp(42px,6.5vw,84px)}
.hero__lede{max-width:33ch}
.hero h1{margin-bottom:var(--s5)}
.lede{font-size:var(--t-md);color:var(--ink-2);line-height:1.5;max-width:48ch}
.ctas{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.note{margin-top:var(--s5);font-family:var(--ff-mono);font-size:var(--t-sm);
  color:var(--ink-2);line-height:1.55;max-width:42ch}

.btn{display:inline-flex;align-items:center;gap:var(--s2);padding:13px 20px;
  border:1px solid transparent;border-radius:var(--r-sm);text-decoration:none;
  font-weight:700;font-size:.9688rem;line-height:1;transition:background .14s ease,border-color .14s ease,color .14s ease}
.btn--primary{background:var(--red);border-color:var(--red);color:#fff8f4}
.btn--primary:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn--ghost{border-color:var(--rule-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:#fff}

/* ── the board (hero document) ────────────────────────────────────────── */
.panel{background:var(--card);border:1px solid var(--rule-2);border-radius:var(--r-lg);overflow:hidden}
.panel__bar{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding:11px 16px;background:var(--band);border-bottom:1px solid var(--rule-2);
  font-family:var(--ff-mono);font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.06em}
.panel__bar span:last-child{color:var(--ink-2)}

.lines{list-style:none;padding:0}
.line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px var(--s3);
  align-items:baseline;padding:13px 16px;border-bottom:1px solid var(--rule)}
.line:last-child{border-bottom:0}
.line__date{font-size:var(--t-sm);color:var(--ink-2);white-space:nowrap}
.line__desc{min-width:0;overflow-wrap:anywhere;font-size:.875rem;letter-spacing:-.012em}
.line__amt{font-size:.9375rem;white-space:nowrap}
.line__res{grid-column:1/-1;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  margin-top:7px;font-family:var(--ff-mono);font-size:.75rem;color:var(--ink-2)}
.line__res--flag{color:var(--red-deep)}
.chip{display:inline-block;padding:2px 7px;border:1px solid var(--rule-2);border-radius:var(--r-sm);
  background:#fff;font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.02em;color:var(--ink-2);
  text-transform:lowercase}
.chip--flag{border-color:var(--red);background:var(--red-tint);color:var(--red-deep)}
.board__foot{display:flex;flex-wrap:wrap;gap:3px var(--s4);padding:11px 16px;
  background:var(--band);border-top:1px solid var(--rule-2);font-family:var(--ff-mono);
  font-size:.75rem;color:var(--ink-2);line-height:1.5}
.board__foot span{white-space:nowrap}
.board__foot .foot-flag{color:var(--red-deep)}

@keyframes settle{from{transform:translateY(6px)}to{transform:none}}
@keyframes slidein{from{transform:translateX(-5px)}to{transform:none}}
/* No animation-delay and no backwards fill on purpose. A headless render, a
   hidden tab or a frozen animation clock parks an animation at t=0, where it
   would apply the first keyframe; so the offset is kept tiny (6px, 5px) and
   the fill is the default, meaning the paint is still correct either way.
   Speed varies per row via --i so the four lines land as a short wave. */
.board .line{animation:settle calc(.42s + var(--i,0) * .06s) cubic-bezier(.22,.82,.24,1)}
.board .line__res{animation:slidein calc(.42s + var(--i,0) * .06s) cubic-bezier(.22,.82,.24,1)}

/* ── sample month ─────────────────────────────────────────────────────── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,32px);margin-top:var(--s7);align-items:start}
.tbl{font-family:var(--ff-mono);font-size:.8125rem;font-variant-numeric:tabular-nums}
.tbl caption{text-align:left}
.tbl th,.tbl td{padding:11px 16px;border-bottom:1px solid var(--rule);vertical-align:baseline;text-align:left}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td.d{white-space:nowrap;color:var(--ink-2);width:5.5ch}
.tbl td.n{text-align:right;white-space:nowrap}
.tbl td.desc{overflow-wrap:anywhere;letter-spacing:-.02em}
.tbl .grp{padding-top:var(--s4);padding-bottom:4px;background:var(--band);
  border-bottom:1px solid var(--rule-2);font-size:.6875rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-2)}
.tbl .grp:first-child{border-top:0}
.tbl .k{font-family:var(--ff-body);font-size:.9375rem;font-weight:600;letter-spacing:0}
.tbl .sub{display:block;font-family:var(--ff-mono);font-size:.6875rem;color:var(--ink-2);
  font-weight:400;letter-spacing:0;margin-top:2px}
.tbl .tot td{font-weight:500;border-top:1px solid var(--rule-2);background:var(--band)}
.tbl .flag td{color:var(--red-deep)}
.tbl .flag .chip{margin-left:6px}

/* ── ledger list (how it works) ───────────────────────────────────────── */
.ledger{list-style:none;padding:0;margin-top:var(--s7);border-top:1px solid var(--rule-2)}
.ledger li{display:grid;grid-template-columns:minmax(9ch,15ch) minmax(0,1fr);gap:var(--s3) var(--s7);
  padding-block:var(--s5);border-bottom:1px solid var(--rule)}
.ledger dt,.ledger .k{font-family:var(--ff-mono);font-size:var(--t-sm);color:var(--ink);
  letter-spacing:.02em;padding-top:4px}
.ledger p{color:var(--ink-2);max-width:66ch}
.ledger p b{color:var(--ink);font-weight:600}

/* ── fit / not fit ───────────────────────────────────────────────────── */
.fits{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,54px);margin-top:var(--s7);align-items:start}
.fits h3{margin-bottom:var(--s3)}
.fits ul{list-style:none;padding:0;border-top:1px solid var(--rule-2)}
.fits li{padding-block:11px;border-bottom:1px solid var(--rule);color:var(--ink-2);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3)}
.fits li::before{content:"—";color:var(--rule-2);font-family:var(--ff-mono);font-size:.8125rem}
.fits .no li::before{content:"×";color:var(--red)}
.fits .no li{color:var(--ink)}

/* ── price ───────────────────────────────────────────────────────────── */
.price{margin-top:var(--s7);border-top:1px solid var(--rule-2);display:grid;
  grid-template-columns:minmax(0,22ch) minmax(0,1fr);gap:var(--s5) clamp(28px,5vw,72px);
  padding-top:var(--s6)}
.figure{font-family:var(--ff-display);font-size:clamp(3rem,7vw,4.4rem);line-height:.95;
  font-weight:500;letter-spacing:-.03em}
.figure small{display:block;font-family:var(--ff-mono);font-size:.75rem;font-weight:400;
  letter-spacing:.03em;color:var(--ink-2);margin-top:10px}
.includes{list-style:none;padding:0}
.includes li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);
  padding-block:11px;border-bottom:1px solid var(--rule)}
.includes li::before{content:"✓";font-family:var(--ff-mono);color:var(--ink);font-size:.875rem}
.reckon{margin-top:var(--s6);padding:var(--s4) var(--s5);background:var(--band);
  border-left:3px solid var(--ink);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--t-base);max-width:62ch}
.reckon b{font-weight:700}
.price .ctas{margin-top:var(--s6)}

/* ── faq ─────────────────────────────────────────────────────────────── */
.faq{margin-top:var(--s7);border-top:1px solid var(--rule-2)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding-block:var(--s5);display:flex;
  gap:var(--s4);align-items:baseline;font-weight:700;font-size:1.0625rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--ff-mono);color:var(--ink-2);font-weight:500}
.faq details[open] summary::before{content:"–"}
.faq summary:hover{color:var(--red-deep)}
.faq .a{padding:0 0 var(--s5) calc(1ch + var(--s4));color:var(--ink-2);max-width:66ch}
.faq summary:focus-visible{outline-offset:-3px}

/* ── footer ──────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule-2);padding-block:var(--s7) var(--s8);margin-top:0}
.foot__in{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s8);align-items:flex-start;
  justify-content:space-between}
.foot p{color:var(--ink-2);max-width:38ch;font-size:.9375rem;margin-top:var(--s3)}
.foot .nav{margin-left:0;flex-direction:column;gap:var(--s2)}
.foot__fine{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:.75rem;color:var(--ink-2)}

/* ── narrow ──────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero__lede,.lede,.note{max-width:none}
  .lede{max-width:52ch}
  .grid2,.fits{grid-template-columns:1fr}
  .price{grid-template-columns:1fr}
}
@media (max-width:620px){
  .ledger li{grid-template-columns:1fr;gap:6px}
  .panel__bar{font-size:.6875rem}
  .tbl td.d{width:auto}
  .tbl th,.tbl td{padding:10px 12px}
  .line{padding:12px}
}
@media (max-width:460px){
  .line{grid-template-columns:minmax(0,1fr) auto}
  .line__date{grid-row:1;grid-column:1}
  .line__amt{grid-row:1;grid-column:2}
  .line__desc{grid-row:2;grid-column:1/-1}
  .line__res{grid-row:3}
  .tbl .hide-s{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0ms !important;
    transition-duration:.001ms !important}
}
@media print{
  .top,.ctas,.skip{display:none}
  body{background:#fff}
}