/* ============================================================
   Ledgerline — single-page site
   Plain CSS. No framework. No build step. No third-party requests.

   Direction: an accountant's columnar pad, kept. Warm paper, ruled
   hairlines doing the structural work, ink type, one spot colour
   used like a rubber stamp, and a monospace face saved for figures.

   Palette, and one rejected alternative on the record: the obvious
   move for a "paper" product is a near-black page with an amber
   accent and a display serif. That combination is a default, and a
   tax tool dressed as a whisky label is off-message. Paper kept;
   the accent is ledger red, the colour of the correction pen.

   Type: Fraunces (display) — the soft, slightly wonky serif of
   mid-century account books and rubber-stamped invoices. Public
   Sans (text) — built for forms and tabular figures. Azeret Mono
   (figures only) — statement lines, references, amounts, labels.
   All three self-hosted as variable woff2.
   ============================================================ */

@font-face{
  font-family:"Fraunces";
  src:url("fonts/fraunces-var.woff2") format("woff2");
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("fonts/publicsans-var.woff2") format("woff2");
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Azeret Mono";
  src:url("fonts/azeretmono-var.woff2") format("woff2");
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  /* surface — the paper itself */
  --paper:#f6f1e6;
  --paper-2:#fffdf7;
  --paper-3:#efe8d8;

  /* ink */
  --ink:#1b1a16;
  --ink-2:#4b4840;
  --ink-3:#635e52;

  /* ruled hairlines */
  --rule:#ded5c1;
  --rule-2:#c9bfa6;

  /* the single spot colour, plus its text-safe weight */
  --accent:#a8382a;
  --accent-ink:#8c2c20;
  --accent-wash:#f6e5df;

  /* one status colour, with a named job: reconciled */
  --ok:#2f6b4a;
  --ok-wash:#e4eede;

  --shadow:0 1px 0 rgba(27,26,22,.04), 0 27px 44px -34px rgba(27,26,22,.5);

  --font-display:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-text:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-fig:"Azeret Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* the whole type ramp — five sizes, nothing improvised */
  --fs-hero:clamp(2.1rem,5.4vw,3.4rem);
  --fs-h2:clamp(1.5rem,2.9vw,2.05rem);
  --fs-h3:clamp(1.05rem,1.5vw,1.22rem);
  --fs-body:1.0625rem;
  --fs-meta:.8125rem;

  /* two corner values, and only two */
  --r:3px;
  --r-pill:999px;

  --shell:1060px;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:var(--fs-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:24px;
}

/* ---------- type ---------- */
h1,h2,h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.012em;
  line-height:1.14;
  color:var(--ink);
}
h1{
  font-size:var(--fs-hero);
  line-height:1.04;
  letter-spacing:-.022em;
  max-width:20ch;
}
h2{font-size:var(--fs-h2);max-width:26ch;}
h3{font-size:var(--fs-h3);}

p{margin:0;}
code{
  font-family:var(--font-fig);
  font-size:.86em;
  letter-spacing:-.01em;
}

.lede{
  margin-block-start:24px;
  max-width:60ch;
  font-size:var(--fs-body);
  color:var(--ink-2);
}
.say{
  margin-block-start:16px;
  max-width:68ch;
  color:var(--ink-2);
}
.how-rule{margin-block-start:24px;}

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

/* ---------- focus: always visible, never removed ---------- */
a:focus-visible,
summary:focus-visible,
.btn:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:2px;
}
.skip{
  position:absolute;
  left:16px;
  top:-60px;
  z-index:30;
  background:var(--ink);
  color:var(--paper);
  padding:8px 16px;
  border-radius:var(--r);
  text-decoration:none;
}
.skip:focus{top:12px;}

::selection{background:var(--accent-wash);color:var(--ink);}

/* ---------- header ---------- */
.site-head{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--paper);
  border-bottom:1px solid var(--rule-2);
}
.head-inner{
  display:flex;
  align-items:center;
  gap:16px;
  padding-block:12px;
}
.wordmark{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-h3);
  letter-spacing:-.01em;
  color:var(--ink);
  text-decoration:none;
}
.wordmark .mark{flex:none;color:var(--ink);}
.site-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-inline-start:auto;
  font-size:var(--fs-meta);
}
.site-nav a,.foot-nav a{
  color:var(--ink-2);
  text-decoration:none;
}
.site-nav a:hover,.foot-nav a:hover{color:var(--ink);text-decoration:underline;}
.head-cta{
  color:var(--accent-ink);
  font-weight:600;
  font-size:var(--fs-meta);
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap;
}
.head-cta:hover{color:var(--ink);}

/* ---------- layout rhythm ---------- */
section{padding-block:40px;}
.hero{padding-block:56px 32px;}
.board-wrap{padding-block:8px 24px;}
.start{padding-block:56px;background:var(--paper-3);border-top:1px solid var(--rule-2);}
.site-foot{
  margin-block-start:56px;
  padding-block:32px;
  background:var(--paper-2);
  border-top:1px solid var(--rule-2);
}

/* ---------- hero ---------- */
.cta-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 20px;
  margin-block-start:32px;
}
.cta-note{
  margin-block-start:16px;
  font-size:var(--fs-meta);
  color:var(--ink-3);
}

.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff6f1;
  border:1px solid #7c2418;
  border-radius:var(--r);
  padding:12px 20px;
  font-family:var(--font-text);
  font-weight:600;
  font-size:var(--fs-body);
  line-height:1.1;
  text-decoration:none;
}
.btn:hover{background:#932f22;}
.btn:active{background:#7c2418;}
.btn-lg{padding:16px 24px;font-size:var(--fs-h3);}

.tlink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent-ink);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.tlink:hover{color:var(--ink);}
.tlink::after{content:"↓";font-family:var(--font-fig);font-size:.9em;}

/* ---------- the board: bank lines resolving into invoices ---------- */
.board{
  margin:0;
  background:var(--paper-2);
  border:1px solid var(--rule-2);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.board-head{
  display:grid;
  grid-template-columns:1.05fr 1.45fr auto auto;
  background:var(--paper-3);
  border-bottom:1px solid var(--rule-2);
}
.bh{
  padding:8px 20px;
  font-family:var(--font-fig);
  font-size:var(--fs-meta);
  letter-spacing:.04em;
  color:var(--ink-3);
}
.board-head .bh:nth-child(2){grid-column:2 / -1;}

.rows{list-style:none;margin:0;padding:0;}
.row{
  display:grid;
  grid-template-columns:1.05fr 1.45fr auto auto;
  align-items:center;
  column-gap:16px;
  row-gap:4px;
  padding:12px 20px;
  border-top:1px solid var(--rule);
}
.rows .row:first-child{border-top:0;}
.row .src code{font-size:var(--fs-meta);color:var(--ink-2);}
.row .dst{color:var(--ink);}
.row .dst .inv{
  font-family:var(--font-fig);
  font-weight:500;
  color:var(--accent-ink);
  margin-right:8px;
}
.row .amt{
  font-family:var(--font-fig);
  font-size:var(--fs-meta);
  color:var(--ink);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.row .chip{
  justify-self:start;
  font-family:var(--font-fig);
  font-size:var(--fs-meta);
  padding:4px 12px;
  border-radius:var(--r-pill);
  background:var(--paper-3);
  color:var(--ink-3);
  white-space:nowrap;
}
.row[data-tone="ok"] .chip{background:var(--ok-wash);color:var(--ok);}
.row[data-tone="ask"]{background:var(--accent-wash);}
.row[data-tone="ask"] .chip{background:var(--paper-2);color:var(--accent-ink);}
.row[data-tone="muted"] .dst{color:var(--ink-2);}

.board-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 24px;
  padding:16px 20px;
  background:var(--paper-3);
  border-top:1px solid var(--rule-2);
}
.board-foot .tot{
  font-family:var(--font-fig);
  font-size:var(--fs-meta);
  color:var(--ink-2);
}
.board-foot .tot b{color:var(--ink);font-weight:600;}
.board-foot .note{
  max-width:50ch;
  font-size:var(--fs-meta);
  color:var(--ink-2);
}

/* the one orchestrated moment: five lines settling into place.
   Gated on .js, so with JavaScript off nothing is ever hidden. */
@keyframes settle{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:none;}
}
.js .rows .row{animation:settle .5s cubic-bezier(.2,.7,.25,1) both;}
.js .rows .row:nth-child(1){animation-delay:0ms;}
.js .rows .row:nth-child(2){animation-delay:70ms;}
.js .rows .row:nth-child(3){animation-delay:140ms;}
.js .rows .row:nth-child(4){animation-delay:210ms;}
.js .rows .row:nth-child(5){animation-delay:280ms;}

/* ---------- the raw statement ---------- */
.printout{
  margin-block-start:24px;
  background:var(--paper-2);
  border:1px solid var(--rule-2);
  border-radius:var(--r);
  overflow:hidden;
}
.printout-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 16px;
  padding:12px 20px;
  background:var(--paper-3);
  border-bottom:1px solid var(--rule-2);
  font-family:var(--font-fig);
  font-size:var(--fs-meta);
  color:var(--ink-3);
}
.printout-lines{list-style:none;margin:0;padding:0;}
.printout-lines li{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) auto;
  gap:16px;
  align-items:baseline;
  padding:8px 20px;
  border-top:1px solid var(--rule);
}
.printout-lines li:first-child{border-top:0;}
.printout-lines .lt{font-family:var(--font-fig);font-size:var(--fs-meta);color:var(--ink-3);}
.printout-lines code{color:var(--ink);}
.printout-lines .la{
  font-family:var(--font-fig);
  font-size:var(--fs-meta);
  color:var(--ink-2);
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ---------- the ledger table ---------- */
.ledger{
  width:100%;
  margin-block-start:24px;
  border-collapse:collapse;
  text-align:left;
}
.ledger th{
  padding:8px 16px;
  border-bottom:1px solid var(--rule-2);
  font-family:var(--font-fig);
  font-weight:500;
  font-size:var(--fs-meta);
  letter-spacing:.04em;
  color:var(--ink-3);
  vertical-align:bottom;
}
.ledger td{
  padding:16px;
  border-top:1px solid var(--rule);
  vertical-align:top;
  color:var(--ink-2);
}
.ledger tbody tr:first-child td{border-top:0;}
.ledger td:first-child{width:30%;}
.ledger td:first-child code{font-size:var(--fs-meta);color:var(--ink);}

/* ---------- the accountant pack ---------- */
.pack-list{margin:0;}
.pack-list > div{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:24px;
  padding:16px 0;
  border-top:1px solid var(--rule);
}
.pack-list > div:first-child{border-top:0;}
.pack-list dt{
  font-family:var(--font-fig);
  font-size:var(--fs-meta);
  color:var(--accent-ink);
}
.pack-list dd{
  margin:0;
  max-width:64ch;
  color:var(--ink-2);
}

/* ---------- voices ---------- */
.voices-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.quote{
  margin:0;
  padding-block-start:16px;
  border-top:1px solid var(--rule-2);
}
.quote blockquote{margin:0;}
.quote p{
  margin:0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--fs-h3);
  line-height:1.34;
  color:var(--ink);
}
.quote figcaption{
  margin-block-start:12px;
  font-size:var(--fs-meta);
  color:var(--ink-3);
}

/* ---------- price: one row, not a pair of columns ---------- */
.price-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:24px 32px;
  padding-block:24px;
  border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
}
.price-what p{margin-block-start:8px;max-width:44ch;color:var(--ink-2);}
.price-num{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 12px;
}
.price-num .figure{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-h2);
  line-height:1;
  color:var(--ink);
}
.price-num .per{color:var(--ink-2);}
.price-num .sub{
  width:100%;
  font-family:var(--font-fig);
  font-size:var(--fs-meta);
  color:var(--ink-3);
}
.price-includes{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 32px;
}
.price-includes li{
  padding-block:4px;
  border-top:1px solid var(--rule);
  color:var(--ink-2);
  font-size:var(--fs-meta);
}

/* ---------- questions ---------- */
.qa{margin-block-start:8px;border-top:1px solid var(--rule-2);}
.qa details{border-bottom:1px solid var(--rule);}
.qa summary{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-h3);
  color:var(--ink);
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{
  content:"+";
  flex:none;
  font-family:var(--font-fig);
  color:var(--accent);
}
.qa details[open] summary::after{content:"–";}
.qa details p{
  margin:0 0 16px;
  max-width:70ch;
  color:var(--ink-2);
}

/* ---------- footer ---------- */
.foot-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px 32px;
}
.foot-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  font-size:var(--fs-meta);
}
.fine{
  width:100%;
  font-size:var(--fs-meta);
  color:var(--ink-3);
}

/* ---------- narrow ---------- */
@media (max-width:840px){
  .price-row{grid-template-columns:1fr;gap:16px;}
  .price-row .btn{justify-self:start;}
}

@media (max-width:720px){
  .site-nav{display:none;}
  .board-head{display:none;}
  .row{
    grid-template-columns:1fr auto;
    column-gap:16px;
    padding:16px 16px;
  }
  .row .src{grid-column:1 / -1;}
  .row .dst{grid-column:1;}
  .row .amt{grid-column:2;grid-row:2;}
  .row .chip{grid-column:1 / -1;}
  .voices-grid{grid-template-columns:1fr;gap:24px;}
}

@media (max-width:640px){
  .shell{padding-inline:20px;}
  .ledger thead{display:none;}
  .ledger,.ledger tbody,.ledger tr,.ledger td{display:block;width:auto;}
  .ledger tr{padding-block:16px;border-top:1px solid var(--rule-2);}
  .ledger tbody tr:first-child{padding-block-start:0;border-top:0;}
  .ledger td{padding:0 0 8px;border:0;}
  .ledger td:last-child{padding-bottom:0;}
  .ledger td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:4px;
    font-family:var(--font-fig);
    font-size:var(--fs-meta);
    letter-spacing:.04em;
    color:var(--ink-3);
  }
  .ledger td:first-child{width:auto;}
  .pack-list > div{grid-template-columns:1fr;gap:4px;padding:16px 0;}
  .price-includes{grid-template-columns:1fr;}
  .printout-lines li{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;}
  .printout-lines .lt{grid-column:1 / -1;grid-row:2;}
  .btn,.btn-lg{display:block;text-align:center;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .rows .row{animation:none;}
}