/* ============================================================
   QUITUS — expertise comptable & audit, Port-Louis.

   The spine: a balance sheet is not read, it is checked. Five
   vouchers, and the difference falls to zero.
   The moment: the écart rolls, digit by digit, with the carry.

   No photograph anywhere. The page is ledger paper: buff, with
   green rules, ink, and one red figure that turns green at the
   end. Type: Archivo (display and reading, one family, two
   widths), JetBrains Mono for every figure.
   ============================================================ */

:root{
  --room:#0E1013;          /* the office at night */
  --room-2:#15181D;
  --chalk:#EDE9E0;         /* type on the dark */
  --chalk-2:#A9ADB4;
  --chalk-3:#6E7279;
  --paper:#F4F1EA;         /* the ledger, lit */
  --paper-2:#EBE6DA;
  --paper-3:#E2DCCD;
  --ink:#14161A;
  --ink-2:#4A4F57;
  --ink-3:#8A8E95;
  --rule:#7E9C88;
  --rule-soft:rgba(126,156,136,.42);
  --rule-faint:rgba(126,156,136,.22);
  --red:#FF5347;           /* the écart, red ink under the lamp */
  --red-ink:#B8322A;       /* red on the paper */
  --green:#4BD68A;         /* balanced */
  --green-ink:#2F6B48;
  --line:rgba(237,233,224,.14);
  --line-2:rgba(237,233,224,.3);

  --text:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;

  --bal-h:64px;     /* the balance line's height on a wide screen */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--room);
  color:var(--chalk);
  font-family:var(--text);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-variant-numeric:tabular-nums;
}

/* ---------------- THE BALANCE LINE ----------------
   Fixed to the top edge. Débits · écart · crédits, each an odometer q.js
   builds and rolls. The écart is the page's one figure in red. */
.balance{
  position:fixed; top:0; left:0; right:0; z-index:45;
  height:var(--bal-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 clamp(1rem,4vw,2.5rem);
  padding-top:env(safe-area-inset-top);
  background:rgba(14,16,19,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  pointer-events:none;
}
.bal{
  display:flex; flex-direction:column; gap:.2rem; line-height:1;
  padding:.38rem .7rem .42rem;
  background:#07080A; border:1px solid rgba(255,255,255,.07); border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7), inset 0 6px 18px rgba(0,0,0,.6), 0 0 0 1px rgba(237,233,224,.04);
  position:relative; overflow:hidden;
}
/* the scan: one thin band of light crossing every readout, like a display refresh */
.bal::after,.figure__disp::after{
  content:""; position:absolute; left:0; right:0; top:-40%; height:38%;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.09) 50%, rgba(255,255,255,0));
  animation:scan 5.5s linear infinite; pointer-events:none;
}
.figure__disp::after{animation-duration:7s}
@keyframes scan{from{transform:translateY(0)} to{transform:translateY(400%)}}
.bal--e{align-items:center; text-align:center}
.bal--c{align-items:flex-end; text-align:right}
.bal__l{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  color:var(--chalk-3);
}
.odo{
  display:inline-flex; align-items:flex-end;
  font-family:var(--mono); font-weight:500; font-size:.98rem;
  color:var(--chalk); line-height:1;
  white-space:nowrap;
}
.odo--big{font-size:1.6rem; color:var(--red); font-weight:600;
  text-shadow:0 0 10px rgba(255,83,71,.55), 0 0 28px rgba(255,83,71,.25)}
.odo.is-zero{text-shadow:0 0 10px rgba(75,214,138,.55), 0 0 28px rgba(75,214,138,.25)}
/* the bar's écart waits until the giant one has flown into it (q.js) */
.js .bal--e .odo{opacity:0}
.odo.is-zero{color:var(--green)}
/* one digit column: eleven glyphs stacked (0…9, then 0 again for the wrap),
   translated by q.js in percent of its own height. Overflow hides the rest. */
.dg{
  position:relative; display:inline-block;
  width:.62em; height:1em; overflow:hidden;
  text-align:center;
}
.dg i{
  position:absolute; left:0; right:0; top:0;
  display:block; font-style:normal;
  will-change:transform;
}
.dg i b{display:block; height:1em; line-height:1; font-weight:inherit}
/* the unlit segments of the display: an 8 behind every digit, a comma behind
   the comma, at a whisper — what makes a row of figures read as a readout */
.dg em,.sp em{
  position:absolute; left:0; right:0; top:0; height:1em; line-height:1;
  font-style:normal; color:var(--chalk); opacity:.09; text-shadow:none; pointer-events:none;
}
.sp{position:relative}
.sp em{opacity:.07}
.dg.dim,.sp.dim{opacity:.22}
.sp{display:inline-block; width:.34em; height:1em; line-height:1; text-align:center}
.sp--th{width:.3em}

/* ---------------- THE FIGURE ----------------
   The écart, as big as the screen allows, centred, red. The page opens on
   it counting up from nothing; the first scroll flies it into the balance
   line (q.js writes the transform), and the small one takes over. */
.figure{
  position:fixed; left:44vw; right:clamp(1.25rem,4vw,3rem); top:50%; z-index:22;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  pointer-events:none;
  padding-left:0;
}
.figure__l{
  font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; font-weight:700;
  color:var(--chalk-3);
}
.figure__disp{position:relative; overflow:hidden; padding:.2em .3em; border-radius:10px;
  transform-origin:center center; will-change:transform, opacity}
/* fine scanlines over the big readout */
.figure__disp::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.figure .odo--hero{
  font-size:clamp(3.6rem,6.6vw,8.4rem); font-weight:600; color:var(--red);
  letter-spacing:-.04em;
  text-shadow:0 0 18px rgba(255,83,71,.65), 0 0 70px rgba(255,83,71,.3);
  animation:breathe 3.2s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{text-shadow:0 0 18px rgba(255,83,71,.65), 0 0 70px rgba(255,83,71,.3)}
  50%{text-shadow:0 0 26px rgba(255,83,71,.85), 0 0 110px rgba(255,83,71,.42)}
}
.figure__l::after{content:"_"; color:var(--red); margin-left:.2em; animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.figure .odo--hero .sp{width:.3em}
.figure .odo--hero .sp--th{width:.26em}
.figure.is-off{display:none}

/* ---------------- the veil under the chrome ----------------
   Copy reaching the top between two beats would run under the wordmark.
   Its own layer, above the session, below the nav. */
.veil{
  position:fixed; top:var(--bal-h); left:0; right:0; height:120px; z-index:25;
  background:linear-gradient(180deg, rgba(14,16,19,.94) 0%, rgba(14,16,19,.55) 46%, rgba(14,16,19,0) 100%);
  pointer-events:none;
}

/* ---------------- furniture ---------------- */
.nav{
  position:fixed; top:var(--bal-h); left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem clamp(1rem,4vw,2.5rem);
  pointer-events:none;
}
.nav > *{pointer-events:auto}
.brand{
  position:relative;
  font-family:var(--text); font-weight:700; font-variation-settings:'wdth' 112;
  font-size:clamp(1rem,2vw,1.2rem); letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; color:var(--chalk);
}
.brand::after{content:"";position:absolute;left:0;right:0;top:50%;height:2.75rem;transform:translateY(-50%)}

.lang{display:flex; gap:.1rem; align-items:center;
  border:1px solid var(--line-2); border-radius:999px; padding:.18rem; position:relative;
  background:rgba(14,16,19,.4); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.lang input{position:absolute; opacity:0; width:0; height:0}
.lang label{
  position:relative; font-size:.66rem; letter-spacing:.14em; font-weight:700;
  padding:.34rem .62rem; border-radius:999px; cursor:pointer; opacity:.6; color:var(--chalk);
  transition:opacity .3s ease, background .3s ease;
}
.lang label::after{content:""; position:absolute; inset:-.55rem -.35rem}
.lang input:checked + label{opacity:1; background:rgba(237,233,224,.16)}

/* ---------------- the desk: the ledger ----------------
   Fixed behind everything. On a wide screen the book sits in the right
   column beside the copy; on a phone it takes the top half. */
.desk{
  position:fixed; inset:0; height:100svh; z-index:0;
  background:var(--room);
  overflow:hidden;
}
/* the lamp: one pool of warm light on the desk where the ledger lies */
.desk::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(52% 58% at 72% 52%, rgba(255,226,180,.16), rgba(255,226,180,.05) 45%, rgba(14,16,19,0) 72%);
  pointer-events:none;
  animation:lamp 9s ease-in-out infinite;
}
@keyframes lamp{0%,100%{opacity:.8}50%{opacity:1}}
.book{
  position:absolute;
  top:calc(var(--bal-h) + 4.6rem); bottom:4rem;
  left:44vw; right:clamp(1.25rem,4vw,3rem);
  display:flex; flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 50px 120px rgba(0,0,0,.7), 0 10px 30px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.8) inset;
  font-family:var(--mono);
  --lh:2.6rem;            /* one ruled line */
}
.book__head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.9rem 1.1rem .5rem;
  font-family:var(--text); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--ink-2);
  border-bottom:1px solid var(--rule);
}
.book__head b{font-family:var(--mono); font-weight:500; color:var(--ink-3); letter-spacing:.1em}
.book__cols,.row{
  display:grid;
  grid-template-columns:3.2em minmax(0,1fr) 7.4em 7.4em 1.6em;
  gap:0 .8em;
  align-items:center;
  padding:0 1.1rem;
  height:var(--lh);
  border-bottom:1px solid var(--rule-faint);
  font-size:.86rem;
}
.book__cols{
  height:1.9rem; font-family:var(--text); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--ink-3); border-bottom:1px solid var(--rule-soft);
}
.book__cols .num{text-align:right}
.row .dt{color:var(--ink-3); font-size:.78rem}
.row .lb{font-family:var(--text); font-size:.9rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .lb sup{font-size:.6em}
.row .num{text-align:right; font-weight:500; color:var(--ink); white-space:nowrap}
.row .num.red{color:var(--red-ink); font-weight:600}
.row .num.green{color:var(--green-ink); font-weight:600}
.row--open,.row--close{background:var(--paper-2)}
.row--close{border-top:1px solid var(--rule); border-bottom:3px double var(--rule)}
/* the audit tick: drawn by --k, from 0 to 1 */
.row .tk{display:flex; justify-content:center; color:var(--green-ink)}
.row .tk svg{display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.row .tk path{stroke-dasharray:24; stroke-dashoffset:calc(24 - 24 * var(--k, 1))}
/* posting: --s from 0 to 1 slides the line onto the page. Never owns
   visibility: with no JS every line shows and every tick is drawn. */
.row{--s:1; --k:1}
.js .row{opacity:var(--s); transform:translateX(calc((1 - var(--s)) * -14px))}
.js .row--open{--s:1}
/* the dark over the ledger while the figure holds the room: an overlay, not
   opacity, so the page stays opaque and copy sliding under it on a phone is
   never seen through it. q.js lifts it as the figure flies. */
.book__dim{
  position:absolute; inset:-1px; z-index:5; pointer-events:none;
  background:var(--room); opacity:0;
}

/* the empty lines under the last entry: the rest of the ruled page */
.book::after{
  content:""; flex:1;
  background:repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 1px), var(--rule-faint) calc(var(--lh) - 1px) var(--lh));
}
/* the stamp: the opinion, over the empty lines, at the end */
.stamp{
  position:absolute; right:1.6rem; bottom:1.6rem;
  padding:.55rem .9rem .5rem; border:2px solid var(--green-ink); border-radius:4px;
  color:var(--green-ink); font-family:var(--text); font-weight:800; font-variation-settings:'wdth' 118;
  font-size:.86rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.15;
  transform:rotate(-7deg) scale(var(--s,1)); opacity:var(--s,1);
  transform-origin:60% 40%;
  mix-blend-mode:multiply;
}
.stamp small{display:block; font-weight:500; font-size:.6rem; letter-spacing:.2em; margin-top:.25rem; opacity:.8}
.js .stamp{--s:0}

/* ---------------- the session ----------------
   Seven beats, each a screen tall. The copy runs in the left column,
   beside the book. */
.audit{position:relative; z-index:10}

.beat{
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(4rem,12vh,9rem) 0 clamp(4rem,12vh,9rem) clamp(1.25rem,5vw,3.5rem);
  padding-top:calc(var(--bal-h) + clamp(4rem,12vh,9rem));
}
.beat__in{max-width:26rem}

.kicker{
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; font-weight:700;
  color:var(--green); margin:0 0 1.6rem;
}
.code{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
  color:var(--chalk-3); margin:0 0 1rem;
}

/* the voucher's amount, as big as the column: an outline that fills with red
   from the bottom as the amount rolls off the écart (--f, from q.js) */
.amt{
  position:relative; display:inline-block;
  font-family:var(--mono); font-weight:600;
  font-size:clamp(3.2rem,7.2vw,7.6rem); line-height:.95; letter-spacing:-.05em;
  margin:0 0 .6rem; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(237,233,224,.42);
  --f:0;
}
.amt b{
  position:absolute; left:0; top:0; font-weight:inherit;
  color:var(--red); -webkit-text-stroke:0;
  clip-path:inset(calc((1 - var(--f)) * 100%) -2px 0 0);
}

.beat h1,.beat h2{
  font-family:var(--text); font-weight:800; font-variation-settings:'wdth' 66;
  text-transform:uppercase;
  line-height:.9; letter-spacing:-.005em;
  margin:0 0 1.2rem;
  text-wrap:balance;
}
.beat h1{font-size:clamp(3.2rem,8.2vw,7.4rem)}
.beat h2{font-size:clamp(2.8rem,6.4vw,5.6rem)}
.beat h1 em,.beat h2 em{font-style:normal; font-weight:300; font-variation-settings:'wdth' 96; color:var(--red)}
.beat--zero h2{font-family:var(--mono); font-weight:600; font-size:clamp(4rem,11vw,9rem); letter-spacing:-.05em; text-transform:none}
.beat--zero h2 em{font-weight:600; color:var(--green); font-style:normal; text-shadow:0 0 50px rgba(75,214,138,.3)}

.beat p:not(.kicker):not(.code):not(.amt){
  font-size:clamp(1rem,1.25vw,1.12rem);
  max-width:26rem; margin:0; color:var(--chalk-2);
}

/* the arrival of type. Never owns visibility: `.rise` with no JS is fully
   visible, and the class only ever gets ADDED. */
.rise{opacity:1}
.js .rise{opacity:0; transform:translateY(1.1rem);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1)}
.js .rise.in{opacity:1; transform:none}
.js .rise--2{transition-delay:.12s}
.js .rise--3{transition-delay:.22s}
@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1; transform:none; transition:none}
  .bal::after,.figure__disp::after,.figure__l::after{animation:none}
  .figure .odo--hero,.desk::before{animation:none}
}

/* ---------------- after the accounts ---------------- */
.after{
  position:relative; z-index:10;
  background:var(--room-2); color:var(--chalk);
  border-top:1px solid var(--line);
}
.after__in{
  max-width:64rem; margin:0 auto;
  padding:clamp(4rem,12vh,8rem) clamp(1.25rem,6vw,4rem);
}
.after h2{
  font-family:var(--text); font-weight:800; font-variation-settings:'wdth' 66; text-transform:uppercase;
  font-size:clamp(2.4rem,6vw,4.6rem); line-height:.92; letter-spacing:-.005em; margin:0 0 2.2rem;
  text-wrap:balance;
}
.after h2 em{font-style:normal; font-weight:300; font-variation-settings:'wdth' 96; color:var(--red)}

/* ⚠️ NOT a card grid. A rule, a name, a rhythm, a sentence. */
.horizon{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2)}
.horizon li{
  border-bottom:1px solid var(--line);
  padding:1.6rem 0;
  display:grid; gap:.35rem .5rem;
  grid-template-columns:1fr auto;
  align-items:baseline;
}
.horizon .x__name{
  font-weight:800; font-variation-settings:'wdth' 72; text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(1.5rem,2.8vw,2.1rem);
}
.horizon .x__when{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--green); text-align:right;
}
.horizon .x__note{grid-column:1/-1; font-size:1rem; color:var(--chalk-2); max-width:44rem; margin:0}

/* the ask */
.ask{border-top:1px solid var(--line-2); margin-top:clamp(4rem,10vh,7rem); padding-top:clamp(2.5rem,7vh,4rem)}
.ask h2{margin-bottom:1.6rem}
.ask__form{display:grid; gap:1.1rem 1.6rem; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:52rem}
.f{display:flex; flex-direction:column; gap:.4rem}
.f__l{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--green)}
.f input,.f select{
  appearance:none; -webkit-appearance:none;
  background:transparent; color:var(--chalk);
  border:0; border-bottom:1px solid var(--line-2); border-radius:0;
  padding:.55rem 0; font:inherit; font-size:1rem; min-height:44px;
  color-scheme:dark;
}
.f select{background-image:linear-gradient(45deg,transparent 50%,var(--chalk-2) 50%),linear-gradient(135deg,var(--chalk-2) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size:5px 5px; background-repeat:no-repeat; padding-right:1.4rem}
.f input:focus,.f select:focus{outline:none; border-bottom-color:var(--red)}
.ask__note{grid-column:1/-1; font-size:.86rem; color:var(--chalk-2); max-width:40rem; margin:.2rem 0 0}
.btn{
  grid-column:1/-1; justify-self:start;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.4rem; border-radius:999px; text-decoration:none;
  background:var(--chalk); color:var(--room);
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  transition:transform .25s ease, background .25s ease; min-height:44px;
}
.btn:hover{background:#fff; transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{flex:none}

footer{position:relative; z-index:10; background:var(--room-2); color:var(--chalk)}
footer .foot,footer .credit{max-width:64rem; margin:0 auto}
.foot{
  border-top:1px solid var(--line);
  padding:2rem clamp(1.25rem,6vw,4rem) 0; font-size:.78rem; color:var(--chalk-3); line-height:1.7;
}
.credit{padding:1rem clamp(1.25rem,6vw,4rem) calc(5.2rem + env(safe-area-inset-bottom)); font-size:.8rem; color:var(--chalk-3)}
.credit a{color:var(--chalk); text-decoration:none; border-bottom:1px solid var(--line-2)}

/* ---------------- the way back ---------------- */
.sn-back{
  position:fixed; left:max(1rem,env(safe-area-inset-left));
  bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:50;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem .5rem .72rem; border-radius:999px;
  background:rgba(14,16,19,.76); color:var(--chalk);
  font-family:var(--text);
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--line-2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 22px rgba(20,22,26,.18);
  transition:background .25s ease, transform .25s ease, opacity .25s ease;
  opacity:.94;
}
.sn-back svg{flex:none}
.sn-back:hover{background:rgba(14,16,19,.95); transform:translateY(-1px); opacity:1}
.sn-back:focus-visible{outline:2px solid var(--green); outline-offset:3px; opacity:1}
.sn-back::before{content:""; position:absolute; inset:-6px -12px}
@media print{.sn-back,.balance{display:none}}

/* ---------------- the two columns ---------------- */
.lang-en .fr,.lang-fr .en{display:none}

/* ---------------- phone ----------------
   The balance line stays on the top edge, tighter; the book takes the top
   half of the screen under it; the copy reads below the book. */
@media (max-width:47.99em), (orientation:portrait) and (max-width:64em){
  :root{--bal-h:56px}
  .balance{padding:0 .9rem; padding-top:env(safe-area-inset-top)}
  .bal{padding:.3rem .5rem .32rem}
  .odo{font-size:.68rem}
  .odo--big{font-size:1.18rem}
  .bal__l{font-size:.52rem; letter-spacing:.18em}
  .veil{height:90px}
  .nav{padding:.7rem 1.25rem}
  /* on a phone the copy slides UNDER the book, not over it: the desk goes above
     the session and turns transparent, the book alone is opaque paper, and the
     ruling moves to the body. Once the accounts are signed and the gallery
     arrives (body.done, set by q.js) the ledger leaves. */
  .desk{z-index:20; background:transparent; transition:opacity .5s ease}
  .desk::before{display:none}
  body.done .desk{opacity:0}
  .book{
    top:calc(var(--bal-h) + 3.4rem); bottom:auto; height:44svh;
    left:1rem; right:1rem;
    --lh:2.15rem;
  }
  .book__head{padding:.6rem .8rem .35rem; font-size:.6rem; letter-spacing:.14em}
  .book__cols,.row{grid-template-columns:3.1em minmax(0,1fr) 7em 1.3em; gap:0 .45em; padding:0 .8rem; font-size:.74rem}
  .book__cols{height:1.6rem; font-size:.54rem; letter-spacing:.1em}
  /* the credit column goes on a phone: every voucher is a debit, the two
     balance lines carry their figure in the one column that is left */
  .book__cols .c{display:none}
  .row .num:nth-child(4){display:none}
  .row--open .num:nth-child(3),.row--close .num:nth-child(3){display:none}
  .row--open .num:nth-child(4),.row--close .num:nth-child(4){display:block}
  .row .lb{font-size:.78rem}
  .row .dt{font-size:.68rem}
  .row .tk svg{width:14px; height:14px}
  /* the phone's page has no empty lines under the entries: the stamp lands over
     the narratives of the last vouchers, left, clear of every figure */
  .stamp{right:auto; left:2.6rem; bottom:3.1rem; font-size:.66rem; padding:.4rem .6rem .35rem; transform:rotate(-9deg) scale(var(--s,1))}

  /* flex-start, not flex-end: a chapter taller than the space under the book must
     grow downward, never overflow upward over the ledger */
  .beat{align-items:flex-start; padding:calc(var(--bal-h) + 3.4rem + 44svh + 1.6rem) 1.25rem 3.5rem}
  .beat__in{max-width:none}
  .beat h1{font-size:clamp(2.6rem,12vw,3.6rem)}
  .beat h2{font-size:clamp(2.3rem,10.5vw,3.2rem)}
  .beat--zero h2{font-size:clamp(3rem,16vw,4.4rem)}
  .amt{font-size:clamp(2.6rem,12.5vw,3.8rem)}
  .figure .odo--hero{font-size:clamp(2.6rem,13vw,4rem)}
  .figure{left:0; right:0; top:calc(var(--bal-h) + 3.4rem + 22svh)}
  .book{box-shadow:0 14px 40px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.8) inset}
  .kicker{margin-bottom:1rem}
  .code{margin-bottom:.8rem}

  .horizon li{grid-template-columns:1fr}
  .horizon .x__when{text-align:left}
  .ask__form{grid-template-columns:1fr}
}