/* THE PAPER — one semantic document, one stylesheet, two shells (slice 9).
   Same data, one template: a theme is a stylesheet — `structure` was the
   first; `minimalist` and `classic` joined it Sep 15 (prototypes/paper.html).
   It runs bar-to-bottom and sits on THE grid: business 1–6 / meta 7–12;
   client 1–6 / project 7–12; note 1–6 beside totals 9–12 — the form's twin.
   Linked by studio.css's shell (Preview, print) and by the client shell
   (the pay page, the receipt): what the studio saw in Preview is what the
   client sees, by the same CSS. Reads tokens.css only. THE PRINTED PAPER IS THE SCREEN PAPER AT 944, SCALED TO THE SHEET (ruled
   Sep 23): the PDF lays out at the screen paper's width and its container zooms the whole to the page — see the print block. */
.paper,.paper *{box-sizing:border-box}
.paper b,.paper strong,.certificate b,.certificate strong{font-weight:500}   /* the heaviest weight the faces ship: nothing synthesized */
/* ── the paper ── */
.paper{background:#fff;margin:0;padding:var(--space-xxxxl) var(--content-edge);   /* xxxxl top and bottom is the paper's inset, and the client column's status head and foot read the same step, so the two heads sit level and the two columns end level (ruled Sep 22; the --paper-inset alias retired Sep 28) */min-height:calc(100vh - var(--bar) - var(--stroke));position:relative}   /* to the bottom of the viewport under the masthead/bar — its cell plus its line (the chrome pass, Sep 3) */
/* THE CONTAINER IS THE PAPER'S PARENT (Sep 15, the RWD pass's finding): a container query never matches the container itself, only its
   descendants — so a map on .paper inside @container paper is dead while the paper is the container. By construction the container is
   whatever holds the paper (`:has(> .paper)`), whose inline size IS the paper's in every shell — the record's sheet section, the pay
   page's sheet, the print view's main, the styleguide's sample — and the paper stops being one: every descendant rule keeps working,
   and the paper's own map (a theme's grid-template-areas) now answers. The paper answers to ITS OWN width — the preview column, the
   pay page beside its column, the PDF at its page's width — never the viewport's. */
:has(> .paper){container:paper / inline-size}
.paper{container:none}
.paper .p-head,.paper .p-who{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--space-lg)}
.p-head>.p-from{grid-column:1 / span 6}
.p-head>.p-meta{grid-column:7 / span 6}
.p-from{font-size:var(--text-sm);line-height:1.5;color:var(--ink2)}
.p-from b{display:block;color:var(--ink);font-weight:500;font-size:var(--text-sm)}
.p-from>*{margin-bottom:var(--space-xs-sm)}
.p-from>*:last-child{margin-bottom:0}   /* THE STUDIO BLOCK GROUPS BY FIELD (ruled Sep 22): the name, the address, then email · phone · website — each group its lines at line-height, 6 between groups; a group exists only when a field does */
.p-meta{text-align:right}
.p-meta .n{font:400 var(--text-xxxl)/1 var(--display)}
.p-meta .n{margin-bottom:var(--space-lg)}   /* BOTTOM-ONLY (Sep 28, Jessica's law): the numeral owns the 16 to the dates under it, every theme */
.p-meta dl{margin:0;display:grid;grid-template-columns:auto auto;justify-content:end;gap:var(--space-xs) var(--space-lg);font-size:var(--text-sm)}
.p-meta dt{color:var(--ink3);text-align:left}
.p-meta dd{margin:0;font-family:var(--mono)}
.paper .p-head{padding-bottom:var(--space-xxxxl)}   /* BOTTOM-ONLY: the head owns the 64 to the parties */
.p-who{padding-top:var(--space-lg);border-top:var(--hairline) solid var(--rule)}   /* a block that opens on a rule keeps its pad under the rule */
.p-who:has(+.p-items){margin-bottom:var(--space-xxxl)}   /* no bill row: the parties own the 48 to the items */
.p-who>div:first-child{grid-column:1 / span 6}
.p-who>div:last-child{grid-column:7 / span 6}
.p-lbl{font:var(--eyebrow-font);letter-spacing:var(--eyebrow-tracking);text-transform:var(--eyebrow-casing);color:var(--ink3);margin-bottom:var(--space-sm)}
.p-big{font:var(--item-title-font)}
.p-big:has(+.p-sm){margin-bottom:var(--space-sm)}
.p-sm{font-size:var(--text-sm);color:var(--ink2);line-height:1.6}
.p-items{width:100%;border-collapse:collapse;margin-bottom:var(--space-xxl);font-size:var(--text-sm)}   /* BOTTOM-ONLY: the items own the 32 to the foot — the note and the totals, every theme */
.p-items th{font:var(--eyebrow-font);letter-spacing:var(--eyebrow-tracking);text-transform:var(--eyebrow-casing);color:var(--ink3);text-align:left;padding:0 0 var(--space-sm-md);border-bottom:var(--hairline) solid var(--ink)}
.p-items td{padding:var(--space-md) 0;border-bottom:var(--hairline) solid var(--rule);vertical-align:top;line-height:1.4}
.p-items td.n{text-align:right;font-family:var(--mono);white-space:nowrap}
.p-items td.d,.p-items th:first-child{width:calc((100% - 11*var(--space-lg))/12*2 + var(--space-lg));font-family:var(--mono);font-size:var(--text-sm);color:var(--ink2)}
.p-items .sub{font-family:var(--mono);font-size:var(--text-xs);color:var(--ink2);margin-top:0}
.p-items .desc{font-size:var(--text-sm);color:var(--ink2);margin-top:0}
.p-row:has(+.p-sec){margin-bottom:var(--space-xl)}   /* A SECTION IS THE EYEBROW ON ITS RULE (issue #80, Sep 29; bottom-only: the line before it owns the 24): the paper's own .p-lbl between the rows, never a row; 24 above all but the first, which sits where the items begin */
.p-tot{display:grid;grid-template-columns:auto 1fr;gap:var(--space-sm) 0;margin:0 0 0 auto;font-size:var(--text-sm);width:calc((100% - 11*var(--space-lg))/12*4 + 3*var(--space-lg))}   /* cols 9–12, like the form's; THE LABEL COLUMN IS AUTO (#80, Sep 29): a section's name as long as "Support and Maintenance" wrapped at half the block */
.p-tot .k{color:var(--ink2)}.p-tot .v{text-align:right;font-family:var(--mono)}
.p-tot .big{font:400 var(--text-lg-xl)/1 var(--display);padding-top:var(--space-sm-md);border-top:var(--hairline) solid var(--ink)}
.p-tot .big.v{font-family:var(--mono);font-weight:500;font-size:var(--text-lg-xl)}
.p-pay{font-size:var(--text-sm);color:var(--ink2);line-height:1.6}
.p-pay b{color:var(--ink);font-weight:500}

/* ── THE BILL ROW (Chris, Sep 15; every theme): Bill to · Ship to · Shipping on one row under the parties, each present only when
   filled. The widths by construction: a block is four columns; THE LAST BLOCK RUNS TO THE EDGE. So one block is the full width, two
   are 4 + 8, three are 4 / 4 / 4 — one rule, no counting. Structure and Classic rule each label; Minimalist does not.
   THE CRAMPED WIDE (seen at 860 — the rail present, the paper 655): a value in a list never overflows its column — it wraps anywhere,
   and the list's value track is minmax(0,1fr), not 1fr (1fr's min is the email's width). ── */
.paper .p-bill{display:flex;gap:var(--space-lg);align-items:flex-start;--c:calc((100% - 11*var(--space-lg))/12)}
.paper .p-bill>div{flex:0 0 calc(4*var(--c) + 3*var(--space-lg));min-width:0}   /* four columns, in this container's terms */
.paper .p-bill>div:last-child{flex:1 1 auto}   /* the last runs to the edge */
.paper .p-bill .p-lbl{margin-bottom:var(--space-md)}   /* BOTTOM-ONLY: the label owns the 12 to its list */
.paper .p-bill{margin-bottom:var(--space-xxxl)}   /* and the bill row the 48 to the items */
.paper .p-bill .p-kv{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-lg);row-gap:var(--space-xs);font-size:var(--text-sm)}
.paper .p-bill .p-kv dt{color:var(--ink2)}.paper .p-bill .p-kv dd{margin:0;color:var(--ink);line-height:1.5;min-width:0;overflow-wrap:anywhere}
.paper .p-kv dd a{color:inherit;text-decoration:underline;text-underline-offset:.125rem}   /* a tracking number is a link where the carrier has a page */
/* THE DATE TRACK, every theme: minmax(max-content, two columns) — on the grid when there is room, never wrapped when there is not. */
.paper .p-row{--date:minmax(max-content,calc(2*var(--c) + var(--space-lg)))}

/* ── theme: STRUCTURE (the legacy template, mapped onto THE grid). A
   template is a stylesheet: this class on .paper is one. THE PAPER'S KIND (Sep 16): every theme rule is the invoice's
   (`.invoice.structure`, `.invoice.classic`, `.invoice.minimalist`) — a document can never match one; the head the document
   borrows from Structure (the studio block, the logo box and its rule, the address, the meta block, the numeral, the eyebrow,
   --pl) is drawn by `.paper:is(.invoice.structure,.document)`, one rule each, so it is drawn by a rule that names it. Vocabulary: logo ·
   vertical rule · business; INVOICE NO. over the numeral; label·rule·value
   blocks; key/value lists; numbered BOXED items. Paper lines are 1px ink —
   the paper prints. Rules by construction: the rule is the business block's
   own border; the logo is a box whose HEIGHT is the business block's
   (flex-stretch); the item number owns col 1, the box starts on col 2; the
   date column exists only if any item has a date. ── */
.paper:is(.invoice.structure,.document){--pl:var(--line)}   /* the paper's lines are THE line — same stroke, same color as the fields (Chris, Aug 29; matches the legacy Structure's mint rules). Print never overrides --pl (ruled Sep 17: one paper, one look). */
.paper:is(.invoice.structure,.document) .p-head{align-items:start;padding-bottom:var(--space-xxxxl)}
.paper:is(.invoice.structure,.document) .p-studio{grid-column:1 / span 6;display:flex;align-items:stretch;align-self:start;gap:var(--space-lg)}   /* as tall as its own text, never the meta column's */
/* THE LOGO'S ROOM (Chris, Sep 15): a box two columns wide made a 300×40 wordmark 15px tall. By construction instead: the address block
   takes the width its text needs (max-content, shrinkable), the logo box takes THE REST of the studio's six columns, never less than
   two — and object-fit decides the axis: a wide mark is bound by the box's width, a square or tall one by its height (the text
   block's). The box's HEIGHT is the text block's minus its 4px paddings (the text sets it), and the mark sits right-aligned against
   the rule, so the gutter to the rule equals the gutter past it. Structure and Classic share the block. */
.paper:is(.invoice.structure,.document) .p-logo{flex:1 0 calc((100% - 5*var(--space-lg))/6*2 + var(--space-lg));min-width:0;align-self:stretch;margin:var(--space-xs) 0;position:relative}
.paper:is(.invoice.structure,.document) .p-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right center;display:block}   /* out of the flow so it contributes no height — the old width:100%;height:100% pattern let the image inflate the row */
.paper:is(.invoice.structure,.document) .p-logo.stand-in{background:var(--rule)}   /* the styleguide's box when there is no mark */
.paper:is(.invoice.structure,.document) .p-from{flex:0 1 auto;width:max-content;max-width:100%;border-left:var(--pl);padding:var(--space-xs) 0 var(--space-xs) var(--space-lg)}
.paper:is(.invoice.structure,.document) .p-meta{grid-column:9 / span 4}
.paper:is(.invoice.structure,.document) .p-meta .lbl-no{font:var(--eyebrow-font);letter-spacing:var(--eyebrow-tracking);text-transform:var(--eyebrow-casing);color:var(--ink);margin-bottom:var(--space-xs-sm)}
.invoice.structure .p-who{padding-top:0;border-top:0;margin-bottom:var(--space-xxl)}   /* the parties own the 32 to the bill row */
.invoice.structure .p-who:has(+.p-items){margin-bottom:var(--space-xxxxl)}
.invoice.structure .p-lbl{color:var(--ink);line-height:1.3125rem;padding-bottom:var(--space-sm);border-bottom:var(--pl);margin-bottom:var(--space-md)}   /* Sep 2: the label's line box is the totals row's (21), the same 8 beneath: every label rule sits where a totals rule would */
.invoice.structure .p-big{font:var(--title-font)}   /* client and project at the numeral's size: one hierarchy */
.paper.invoice.structure .p-bill{margin-bottom:var(--space-xxxxl)}   /* Structure: the bill row owns the 64 to the items; the label's rule is its own and the list sits 12 under it */
.paper.invoice.structure .p-bill .p-kv{margin-top:0}
.invoice.structure .p-items{--c:calc((100% - 11*var(--space-lg))/12)}   /* one grid column, in this container's terms */
.invoice.structure .p-row{display:grid;grid-template-columns:calc(var(--c) + var(--space-lg)) var(--date) 1fr calc(2*var(--c) + var(--space-lg))}   /* num · date · item · amount — tracks on the grid, no gaps so the box is continuous */
.invoice.structure .p-items.nodates .p-row{grid-template-columns:calc(var(--c) + var(--space-lg)) 1fr calc(2*var(--c) + var(--space-lg))}
.invoice.structure .p-row>div{border:var(--pl);border-left:0;padding:var(--space-md) var(--space-md-lg);font-size:var(--text-sm);line-height:1.4}
.invoice.structure .p-row>.num{border:0;padding:var(--space-md) 0 0;font:400 var(--text-xxl)/1 var(--display);color:var(--ink)}
.invoice.structure .p-row>.num+div{border-left:var(--pl)}
.invoice.structure .p-row+.p-row>div{border-top:0}
.invoice.structure .p-sec>.p-lbl{margin-bottom:0}
.invoice.structure .p-sec+.p-row>div{border-top:0}   /* the label's rule IS the first line's top — the row under it draws none, or it is double-ruled */
.invoice.structure .p-row>.d{font-family:var(--mono);font-size:var(--text-sm);color:var(--ink2)}
.invoice.structure .p-row>.n{text-align:right;font-family:var(--mono);white-space:nowrap}
.invoice.structure .p-row .sub{font-family:var(--mono);font-size:var(--text-xs);color:var(--ink2);margin-top:0}
.invoice.structure .p-row .desc{font-size:var(--text-sm);color:var(--ink2);margin-top:0}
.invoice.structure .p-tot .big{border-top:var(--pl)}   /* the totals' own margin-top (Sep 2) was dead under .p-foot>.p-tot{margin:0} by order; the kind's extra class would have revived it (Sep 16), so it is gone */
.p-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--space-lg);align-items:start}   /* Sep 2: the form's twin — note on the left, totals on col 9 — one row, no divider */
.p-foot>.p-pay{grid-column:1 / span 6;margin:0;padding:0;border:0;display:block}
.p-foot>.p-tot{grid-column:9 / span 4;width:100%;min-width:max-content;justify-self:end;margin:0}   /* cols 9–12, never narrower than its longest name: it grows leftwards and stays on the right edge (#80), as the other themes' does */

/* ── THE GRID (the refactor, Sep 15): for a themed paper other than Structure, the head, the studio block and the foot dissolve and
   the paper is one twelve-column grid; a theme is a grid-template-areas. Every child is placed by area, so a theme that moves a
   block writes one map and no other rule. The container query below hands each narrow paper its own map, in reading order. ── */
.paper.invoice:is(.minimalist,.classic){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--space-lg);align-content:start;--pl:var(--hairline) solid var(--rule);--c:calc((100cqw - 2*var(--content-edge) - 11*var(--space-lg))/12)}   /* --c: one column, from the container (the paper's parent, whose width is the paper's), so a grid item can size itself in the paper's columns */
.paper.invoice:is(.minimalist,.classic) :is(.p-head,.p-foot){display:contents}   /* the studio block stays a block — Structure's flex row, placed in the studio area (Classic from the start; Minimalist since Sep 16) */
.paper.invoice:is(.minimalist,.classic) .p-logo{grid-area:logo}
.paper.invoice:is(.minimalist,.classic) .p-from{grid-area:from}
.paper.invoice:is(.minimalist,.classic) .p-meta{grid-area:meta}
.paper.invoice:is(.minimalist,.classic) .p-who{grid-area:who}
.paper.invoice:is(.minimalist,.classic) .p-bill{grid-area:bill}
.paper.invoice:is(.minimalist,.classic) .p-items{grid-area:items}
.paper.invoice:is(.minimalist,.classic) .p-pay{grid-area:pay}
.paper.invoice:is(.minimalist,.classic) .p-tot{grid-area:tot;margin:0;align-content:start;column-gap:0;justify-self:end;width:calc(4*var(--c) + 3*var(--space-lg));min-width:max-content}   /* four columns wide at the end of its six-column area, never narrower than its own figures; start: a two-row area must not stretch the totals apart */
.paper.invoice:is(.minimalist,.classic) .p-tot .k{padding-right:var(--space-lg)}   /* the label's room is padding, not a gap: the rule under it stays one line */
/* what the base paper set for the shell's sake and a grid item must not carry */
.paper.invoice:is(.minimalist,.classic) .p-who{margin:0;padding:0;border:0}
.paper.invoice:is(.minimalist,.classic) :is(.p-studio,.p-meta){margin-bottom:var(--space-xxxxl)}   /* BOTTOM-ONLY on the grid: the head row's items own the 64 to the parties (a grid item's margin grows its row) */
.paper.invoice:is(.minimalist,.classic) .p-items{margin:0 0 var(--space-xxl)}
.paper.invoice:is(.minimalist,.classic) .p-pay{margin:0;padding:0;border:0}
/* the logo box: 48 tall, the mark against the left (a wordmark reads from the left; the rule is Structure's reason to right-align) */
.paper.invoice:is(.minimalist,.classic) .p-logo{position:relative;height:calc(8*var(--u))}
.paper.invoice:is(.minimalist,.classic) .p-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;display:block}
.paper.invoice:is(.minimalist,.classic) .p-logo.stand-in{background:var(--rule)}
/* the ledger — both themes share the row grammar: number · (date) · item · amount on the grid's tracks, a hairline beneath each row */
.paper.invoice:is(.minimalist,.classic) .p-items{--c:calc((100% - 11*var(--space-lg))/12)}
.paper.invoice:is(.minimalist,.classic) .p-row{display:grid;grid-template-columns:var(--c) var(--date) 1fr calc(2*var(--c) + var(--space-lg));column-gap:var(--space-lg);padding:var(--space-md) 0;border-bottom:var(--pl);font-size:var(--text-sm);line-height:1.4;align-items:baseline}
.paper.invoice:is(.minimalist,.classic) .p-items.nodates .p-row{grid-template-columns:var(--c) 1fr calc(2*var(--c) + var(--space-lg))}   /* the ledger has no boxes, so its tracks are the grid's own, gutters between */
.paper.invoice:is(.minimalist,.classic) .p-row>.num{font:var(--figure-font);color:var(--ink2)}
.paper.invoice:is(.minimalist,.classic) .p-row>.d{font-family:var(--mono);font-size:var(--text-sm);color:var(--ink2)}
.paper.invoice:is(.minimalist,.classic) .p-row>.n{text-align:right;font-family:var(--mono);white-space:nowrap}
.paper.invoice:is(.minimalist,.classic) .p-row .sub{font-family:var(--mono);font-size:var(--text-xs);color:var(--ink2);margin-top:0}
.paper.invoice:is(.minimalist,.classic) .p-row .desc{font-size:var(--text-sm);color:var(--ink2);margin-top:0}
.paper.invoice:is(.minimalist,.classic) .p-tot .big{border-top:var(--hairline) solid var(--ink)}
.paper.invoice:is(.minimalist,.classic) .p-sec+.p-row{border-top:var(--pl)}   /* a section's eyebrow sits on its rule here too (#80): the theme's own rule, the first line's top — Classic's first row had it, and Minimalist's ledger rule moves under the eyebrow (below) */
.paper.invoice.minimalist .p-items:has(>.p-sec:first-child){border-top:0}

/* ── theme: MINIMALIST — the quiet paper (the sitting of Sep 15; the legacy theme read on the Roost invoice and INTERPRETED, not
   copied). The head is the studio block on six columns and the number block on four (Chris, Sep 16: the address sits in the head
   like the other two themes, at least for now — it had closed the paper at the foot as the sign-off, as the legacy's did): the logo
   box and the address side by side as Structure and Classic have them, in Minimalist's dress — no rule between them, the mark on the
   numeral's line at the numeral's height, the address in the same quiet text. Labels are eyebrows with no rule; the parties open on
   one soft rule; items are an open ledger — a rule above the block and beneath each row, no boxes, the numeral as a quiet mono
   figure; totals as the base paper's; the foot is note and totals. White only. ── */
.paper.invoice.minimalist{grid-template-areas:
  "studio studio studio studio studio studio . . meta meta meta meta"
  "who  who  who  who  who who who who who  who  who  who"
  "bill bill bill bill bill bill bill bill bill bill bill bill"
  "items items items items items items items items items items items items"
  "pay  pay  pay  pay  pay pay tot tot tot  tot  tot  tot";
  row-gap:0}
.paper.invoice.minimalist{--numeral:2.125rem}
.paper.invoice.minimalist .p-studio{display:flex;grid-area:studio;align-items:start;align-self:start;gap:var(--space-lg)}   /* Structure's row, start-aligned: the box keeps the numeral's height beside an address as tall as its text */
.paper.invoice.minimalist .p-logo{flex:1 0 calc((100% - 5*var(--space-lg))/6*2 + var(--space-lg));min-width:0;height:var(--numeral);margin-top:calc(.6875rem + var(--space-xs-sm))}   /* the logo's room (the address takes max-content, the box the rest, never less than two columns); the mark on the numeral's line, at the numeral's height: the top clears the eyebrow's line (11) and its margin (6), both set two rules down */
.paper.invoice.minimalist .p-from{flex:0 1 auto;width:max-content;max-width:100%}   /* no rule, no padding: the quiet text beside the mark */
.paper.invoice.minimalist .p-meta{text-align:right}
.paper.invoice.minimalist .p-meta .lbl-no{font:var(--eyebrow-font);letter-spacing:var(--eyebrow-tracking);text-transform:var(--eyebrow-casing);color:var(--ink3);margin-bottom:var(--space-xs-sm)}
.paper.invoice.minimalist .p-meta .n{font:400 var(--numeral)/1 var(--display)}
.paper.invoice.minimalist .p-who{padding-top:var(--space-xl);border-top:var(--pl);margin-bottom:var(--space-xxl-xxxl)}   /* the parties open on one soft rule — the base paper's, 8u under the head — and own the 40 to the bill row */
.paper.invoice.minimalist .p-who:has(+.p-items){margin-bottom:var(--space-xxxxl)}
.paper.invoice.minimalist .p-lbl{color:var(--ink3)}   /* eyebrows, no rule (the base) */
.paper.invoice.minimalist .p-bill{margin-bottom:var(--space-xxxxl)}
.paper.invoice.minimalist .p-items{border-top:var(--pl)}   /* the ledger: one rule above the block, one beneath each row */

/* ── theme: CLASSIC — the band (the sitting of Sep 15). The head is Structure's (logo · rule · address · meta) without the label
   rules; the PARTIES and the bill row sit on a full-bleed band in the studio's ground — the legacy derived a tint from the brand
   color; ours is a token, `--panel` (ruled Sep 15); the band bleeds by construction (the paper's own --content-edge, negated).
   Client and Project at the numeral's size; the bill labels ruled on the band's tone; items as ruled rows with a small mono number,
   no boxes; the Total a size up. The address stays in the head; the foot is note · totals. The band stays a band under 720. ── */
.paper.invoice.classic{--band:var(--panel);grid-template-areas:
  "studio studio studio studio studio studio . . meta meta meta meta"
  "who  who  who  who  who  who  who who who who who who"
  "bill bill bill bill bill bill bill bill bill bill bill bill"
  "items items items items items items items items items items items items"
  "pay  pay  pay  pay  pay  pay tot tot tot  tot  tot  tot";
  row-gap:0}
.paper.invoice.classic .p-studio{display:flex;grid-area:studio;align-items:stretch;align-self:start;gap:var(--space-lg)}   /* Structure's block: start — as tall as its own text, never the meta column's */
.paper.invoice.classic .p-logo{flex:1 0 calc((100% - 5*var(--space-lg))/6*2 + var(--space-lg));min-width:0;height:auto;align-self:stretch;margin:var(--space-xs) 0}   /* the logo's room, as Structure's: the address takes what its text needs, the box the rest of the six, the mark against the rule */
.paper.invoice.classic .p-logo img{object-position:right center}
.paper.invoice.classic .p-from{flex:0 1 auto;width:max-content;max-width:100%;border-left:var(--pl);padding:var(--space-xs) 0 var(--space-xs) var(--space-lg)}
.paper.invoice.classic .p-meta{text-align:right}
.paper.invoice.classic .p-meta .lbl-no{font:var(--eyebrow-font);letter-spacing:var(--eyebrow-tracking);text-transform:var(--eyebrow-casing);color:var(--ink);margin-bottom:var(--space-xs-sm)}
.paper.invoice.classic .p-meta .n{font:400 var(--text-xxxl)/1 var(--display)}
/* THE BAND: the parties AND the bill row on the studio's ground, edge to edge — the paper's own padding, negated, is the bleed;
   the same value pads it back. Two grid items, one ground: the parties open the band, the bill row closes it. */
.paper.invoice.classic .p-who{margin:0 calc(-1*var(--content-edge));padding:var(--space-xxl-xxxl) var(--content-edge) 0;background:var(--band);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--space-lg)}
.paper.invoice.classic .p-who:not(:has(+.p-bill)){padding-bottom:var(--space-xxxl);margin-bottom:var(--space-xxxl)}   /* no bill row: the parties close the band themselves */
.paper.invoice.classic .p-bill{margin:0 calc(-1*var(--content-edge)) var(--space-xxxl);padding:var(--space-xxl) var(--content-edge) var(--space-xxxl);background:var(--band)}
.paper.invoice.classic .p-bill .p-lbl{padding-bottom:var(--space-sm);border-bottom:var(--hairline) solid color-mix(in oklab,var(--ink) 30%,var(--band))}   /* the bill labels rule, as Structure's; the parties' do not */
.paper.invoice.classic .p-who>div:first-child{grid-column:1 / span 6}
.paper.invoice.classic .p-who>div:last-child{grid-column:7 / span 6}
.paper.invoice.classic .p-lbl{color:var(--ink)}
.paper.invoice.classic .p-big{font:var(--title-font)}   /* the numeral's size: one hierarchy, as Structure */
.paper.invoice.classic .p-row:first-child{border-top:var(--pl)}
.paper.invoice.classic .p-tot .big{font-size:var(--text-xl)}
.paper.invoice.classic .p-tot .big.v{font-size:var(--text-xl)}

/* ── the one breakpoint: the paper stacks — A CONTAINER QUERY on the paper's own width (Sep 15; was the viewport at 855). Under
   720 (600 until the bill row: with everything on, the wide paper is honest from 720; below it the stacked paper is the better
   paper even with the rail beside it) the paper is one column in reading order, the legacy Structure's narrow decisions in our
   grammar: the logo on its own row · the address block · the number as a label·value row and the dates as Bill To's list · Client,
   then Project · the bill row's blocks stacked · each item one box — the number the box's first cell beside the name, the quantity
   line and the amount on one line beneath, the description last · totals full width · the note under them. No track is ever
   narrower than its content: 1fr and auto, never minmax(0,…). ── */
@container paper (width < 45rem){
  .paper .p-head>*,.paper .p-who>div:first-child,.paper .p-who>div:last-child{grid-column:1 / span 12}   /* the who rules are :first-child/:last-child — the same specificity here, or the six-column rules win (the old viewport query lost this one) */
  .p-meta{text-align:left}.p-meta dl{justify-content:start}
  .p-who>div:first-child{margin-bottom:var(--space-xxl)}
  .p-tot{width:100%}
  .p-foot>.p-pay,.p-foot>.p-tot{grid-column:1 / span 12}
  .paper .p-foot>.p-tot,.paper.invoice:is(.minimalist,.classic) .p-tot{min-width:0}   /* the narrow foot spans the paper and a long name wraps, never past the edge */
  /* the bill row stacks: every block the full width, 4u between */
  .paper .p-bill{flex-direction:column;gap:var(--space-xxl)}
  .paper .p-bill>div,.paper .p-bill>div:last-child{flex:none;width:100%}
  /* 1. the logo on its own row, left: the same 2:1 box at 1.25× — 160 × 80, contained, the mark against the box's left; 24 to the address
     under it. THE LINE GOES WHEN THE HEAD STACKS (issue #73, Chris, seen at 371): the address's rule separated it from the logo beside it,
     and stacked there is nothing beside it. Classic's narrow map already drops its line; Minimalist draws none. */
  .paper:is(.invoice.structure,.document) .p-studio{flex-direction:column;align-items:start;grid-column:1 / span 12;gap:var(--space-xl)}
  .paper:is(.invoice.structure,.document) .p-logo{flex:none;width:calc(20*var(--u));height:calc(10*var(--u));margin:0}
  .paper:is(.invoice.structure,.document) .p-logo img{object-position:left center}
  .paper:is(.invoice.structure,.document) .p-from{width:auto;border-left:0;padding-left:0}
  /* 2. the meta: INVOICE NO. left and the numeral right on one row; Issued · Terms · Due as Bill To's list — label left, value right in mono */
  .paper:is(.invoice.structure,.document) .p-studio{margin-bottom:var(--space-xxl)}
  .paper:is(.invoice.structure,.document) .p-head>.p-meta{display:grid;grid-template-columns:auto 1fr;align-items:baseline;grid-column:1 / span 12}
  .paper:is(.invoice.structure,.document) .p-meta .lbl-no{margin:0}
  .paper:is(.invoice.structure,.document) .p-meta .n{text-align:right}
  .paper:is(.invoice.structure,.document) .p-meta .n{margin-bottom:var(--space-xxl)}
  .paper:is(.invoice.structure,.document) .p-meta dl{grid-column:1 / -1;margin:0;grid-template-columns:auto 1fr;justify-content:stretch}
  .paper:is(.invoice.structure,.document) .p-meta dt{color:var(--ink2)}
  .paper:is(.invoice.structure,.document) .p-meta dd{text-align:right;color:var(--ink)}
  /* 3. Client, then Project, stack by the rules above (one column, 32 between); the bill row's blocks under them — nothing to add. */
  /* 4. each item one box — a small grid: num · name-and-lines · amount. The item cell dissolves (display:contents) so its lines
     take rows of their own: the name beside the number (spanning to the box's edge); the date, when the invoice has dates, a mono
     sub-line under the name; the description on its own ruled line; the quantity line and the amount on one ruled line LAST —
     STACKED, THE AMOUNT IS THE LAST ROW (ruled Sep 22: name · description · amount, never name · amount · description; the same
     order on every theme and on the document's table). THE NUMBER'S CELL RUNS THE ROW'S FULL HEIGHT (Chris, Sep 15), so its rule
     meets the row's bottom instead of hanging above the quantity line; the description and the quantity line start at the second
     track. A fixed-fee item has no quantity line: its amount spans the line alone. */
  .paper.invoice.structure .p-items>.p-row{grid-template-columns:minmax(var(--fh),auto) 1fr auto;align-items:baseline;border:var(--pl);border-top:0}
  .paper.invoice.structure .p-items>.p-row:first-child{border-top:var(--pl)}
  .paper.invoice.structure .p-items>.p-row>div,.paper.invoice.structure .p-items>.p-row .sub,.paper.invoice.structure .p-items>.p-row .desc{border:0;padding:var(--space-md) var(--space-md-lg);margin:0}
  .paper.invoice.structure .p-items>.p-row>.num{grid-area:1 / 1 / 5 / 2;align-self:stretch;border-right:var(--pl);text-align:center}   /* stretch: the row aligns its items to baseline, which would leave the cell its own height */
  .paper.invoice.structure .p-items>.p-row>.it{display:contents}
  .paper.invoice.structure .p-items>.p-row .nm{grid-area:1 / 2 / 2 / 4;padding:var(--space-md) var(--space-md-lg)}
  .paper.invoice.structure .p-items:not(.nodates)>.p-row .nm{padding-bottom:0}
  .paper.invoice.structure .p-items>.p-row>.d{grid-area:2 / 2 / 3 / 4;padding-top:0;font-size:var(--text-xs)}
  .paper.invoice.structure .p-items>.p-row .desc{grid-area:3 / 2 / 4 / 4;border-top:var(--pl)}
  .paper.invoice.structure .p-items>.p-row .sub{grid-area:4 / 2 / 5 / 3;border-top:var(--pl);align-self:start;padding-top:var(--space-md-lg)}   /* the ruled line: both cells start-aligned so their rules meet; the 12px line sits 2 lower to share the amount's baseline (measured) */
  .paper.invoice.structure .p-items>.p-row>.n{grid-area:4 / 3 / 5 / 4;border-top:var(--pl);align-self:start}
  .paper.invoice.structure .p-items>.p-row>.it:not(:has(.sub))+.n{grid-column:2 / -1}
  /* 5. totals full width, first; the note under them */
  .invoice.structure .p-foot>.p-tot{order:-1;margin-bottom:var(--space-xxl)}   /* first, and owning the 32 to the note under it */
  /* ── THE THEMED PAPERS' NARROW MAPS, one per theme, in reading order; the base rules for .p-meta, .p-who's stacking and the
     totals apply unchanged. The band stays a band (it reads on a phone). ── */
  .paper.invoice:is(.minimalist,.classic){grid-template-columns:1fr;grid-template-areas:"studio" "meta" "who" "bill" "items" "tot" "pay"}   /* one map for both: the studio block first, the address under the mark */
  .paper.invoice:is(.minimalist,.classic) .p-studio{flex-direction:column;gap:var(--space-lg)}
  .paper.invoice:is(.minimalist,.classic) .p-logo{width:calc(16*var(--u));height:calc(8*var(--u));flex:none;margin:0;align-self:start}
  .paper.invoice:is(.minimalist,.classic) .p-logo img{object-position:left center}
  .paper.invoice.classic .p-from{border:0;padding:0}
  .paper.invoice:is(.minimalist,.classic) .p-from{margin:0;width:auto}
  .paper.invoice:is(.minimalist,.classic) .p-studio{margin-bottom:var(--space-xxl)}
  .paper.invoice:is(.minimalist,.classic) .p-meta{text-align:left;display:grid;grid-template-columns:auto 1fr;align-items:baseline}
  .paper.invoice:is(.minimalist,.classic) .p-meta .lbl-no{margin:0}
  .paper.invoice:is(.minimalist,.classic) .p-meta .n{text-align:right}
  .paper.invoice:is(.minimalist,.classic) .p-meta .n{margin-bottom:var(--space-xxl)}
  .paper.invoice:is(.minimalist,.classic) .p-meta dl{grid-column:1 / -1;margin:0;grid-template-columns:auto 1fr;justify-content:stretch}
  .paper.invoice:is(.minimalist,.classic) .p-meta dd{text-align:right;color:var(--ink)}
  .paper.invoice.classic .p-who{grid-template-columns:1fr}
  .paper.invoice.classic .p-who>div:first-child,.paper.invoice.classic .p-who>div:last-child{grid-column:1}
  .paper.invoice.classic .p-big{font-size:var(--text-xxl)}
  /* each item: the number at the row's head, the name beside it, the date (when any) a mono line under the name, the description, then the quantity line and the amount on one line LAST (ruled Sep 22) — Structure's narrow order, in the ledger's grammar */
  .paper.invoice:is(.minimalist,.classic) .p-items>.p-row{grid-template-columns:auto 1fr auto;column-gap:var(--space-md)}
  .paper.invoice:is(.minimalist,.classic) .p-items>.p-row>.it{display:contents}
  .paper.invoice:is(.minimalist,.classic) .p-items>.p-row>.num{grid-area:1 / 1 / 3 / 2}
  .paper.invoice:is(.minimalist,.classic) .p-items>.p-row .nm{grid-area:1 / 2 / 2 / 4}
  .paper.invoice:is(.minimalist,.classic) .p-items>.p-row>.d{grid-area:2 / 2 / 3 / 4;font-size:var(--text-xs);margin-top:var(--space-xxs)}
  .paper.invoice:is(.minimalist,.classic) .p-items>.p-row .desc{grid-area:3 / 2 / 4 / 4;margin-top:var(--space-xs-sm)}
  .paper.invoice:is(.minimalist,.classic) .p-items>.p-row .sub{grid-area:4 / 2 / 5 / 3;margin-top:var(--space-xs-sm)}
  .paper.invoice:is(.minimalist,.classic) .p-items>.p-row>.n{grid-area:4 / 3 / 5 / 4;margin-top:var(--space-xs-sm);align-self:end}
  .paper.invoice:is(.minimalist,.classic) .p-items>.p-row>.it:not(:has(.sub))+.n{grid-column:2 / 4}
  .paper.invoice:is(.minimalist,.classic) .p-tot{margin-bottom:var(--space-xxl);width:auto;justify-self:stretch}   /* stacked: the totals own the 32 to the note */
}

/* ── print: the paper's lines go to ink ── */
/* THE PAGE (ruled Sep 17): letter, 12mm on every side, and in print the paper fills the page's content box — no padding — so every
   rule lands inside the margin, in both shells (the hub's print view had no @page and took the browser's; studio.css's 16mm 12mm
   retires). BOUNDED BY THE PAGE'S OWN ARITHMETIC: Chrome lays a printed page out at its content width rounded UP to a whole pixel
   (725.29 → 726) and clips at the true box, so 100% alone is wider than the page — Structure's item box printed its right rule at
   37% of its left (measured at 300dpi, Sep 17). The paper's printed width is bounded by the sheet less the two margins, in the
   @page's own units: change one, change the other.
   THE PRINTED PAPER IS THE SCREEN PAPER AT 944, SCALED TO THE SHEET (ruled Sep 23, issue #29): at 725 with the screen's type and
   unit the PDF was the screen paper with a quarter of its width removed — every measure shorter, the type a third too large for the
   sheet. Now the paper lays out at the screen's 944 (--content) and its CONTAINER zooms by 725.29/944 = .768 — the same layout, the
   same container answers, the same folds, photographed smaller: 17px lands at 13.06 ≈ 9.8pt, the 36 display at ≈ 21pt. THE ZOOM SITS
   ON THE CONTAINER, NEVER THE PAPER (measured Sep 23): zoomed, the paper's parent stays at the page's 725 and every container query
   answers the narrow paper; zoomed itself, the parent measures 944.4 in its own units and 100cqw and the queries follow. Chrome
   clips at the true box, so 944 × the constant must stay ≤ 725.29 (0.768 → 724.99): change the margin, change the constant, here
   and in PaperThemeFlowTest.
   ONE PAPER, ONE LOOK (ruled Sep 17): print CSS keeps only what the medium needs — the page and its margins, hiding the chrome,
   page breaks, min-height:0, the geometry a padless page changes — and changes NOTHING about the design. THE line is THE line in
   the PDF and the tints are the tints: the ink swaps (--pl → 1px ink on Structure and the document, 1px ink2 on Minimalist and
   Classic, the slip's lines → ink3) were print-design convention, never a ruling, and made the PDF a different paper from the hub's. */
@page{size:letter;margin:12mm}
@media print{
  html{font-size:var(--text-md)}   /* THE SHEET IS PHYSICAL: the print arithmetic below assumes the paper at 944 CSS px, so the root is pinned here — the one px in the app, and the only medium where a reader's browser scale must not reach */
  :has(> .paper){zoom:.768}   /* 725.29 / 944 — the sheet's content width (8.5in − 2×12mm) over the screen paper's; the container, so the queries answer 944 */
  .paper{min-height:0;padding:0;width:59rem;max-width:none}   /* the screen paper's width (tokens.css --content); × .768 = 724.99, inside the sheet's 725.29 */
  .paper.invoice:is(.minimalist,.classic){--c:calc((100cqw - 11*var(--space-lg))/12)}   /* the paper's padding is 0 in print, so a column is the container's twelfth with no edge to subtract */
  .paper.invoice.classic :is(.p-who,.p-bill){margin-inline:0;padding-inline:0}   /* THE BAND'S BLEED IS THE PAPER'S PADDING, NEGATED — and the printed paper has none: left at --content-edge the band ran past the page's content box, and Chrome SHRINKS A PAGE TO FIT its overflow (uniformly, 725/(725 + the edge) ≈ 96%), which printed every block 28 short of the right margin and the type 4% small (measured Sep 22). Padless, the band is the content box edge to edge — the same band, the grid at the page's width */
}

/* ── THE RECEIPT IS A SLIP, NOT THE INVOICE (ruled Sep 17; prototypes/receipt.html is the spec, measured). The paper's box is the
   paper's (the padding, the white, the floor); nothing of the invoice's head or foot — the paper wears `receipt` and its theme and
   no invoice word. ONE column, six of the paper's twelve on the content edge (it never centres; the right half stays empty by
   design), the full width under the paper's fold — no other narrow map: a slip is already a phone's shape. THE RHYTHM: the paper's
   64 above the mark; then ONE section gap, 6u — mark → statement → account → details; 12 between the word, the figure and the date
   line; 12 of padding in every row. THE MARK's box IS the ink: width ≤ 240, height ≤ 48, the art's own aspect — no slack under a
   wide mark to pad the gap. THE LINES: THE line, everywhere — above every row, under each list's last row — EXCEPT the account,
   which closes on its Balance and not on a line (the rule after it would read as one more row's top). Balance is the one
   emphasized row, type only: Lorien for the word, IO medium 20 for the figure. No column gap in a list: each cell draws its own
   share of the row's line, so the line is one line; the label's room is its padding. ONE construction for the three themes: the
   theme dresses the label and moves nothing. ── */
.paper.receipt{--c:calc((100% - 11*var(--space-lg))/12)}
.paper.receipt .slip{width:calc(6*var(--c) + 5*var(--space-lg));max-width:100%}
.paper.receipt .r-mark{width:calc(30*var(--u));max-width:100%;margin-bottom:var(--space-xxxl)}   /* BOTTOM-ONLY: the mark owns the 48 to the word */
.paper.receipt .r-mark img{display:block;width:100%;height:auto;max-height:calc(6*var(--u));object-fit:contain;object-position:left top}
.paper.receipt .r-mark .name{font:400 var(--text-xxl)/3rem var(--display);color:var(--ink)}
.paper.receipt .r-word{margin-bottom:var(--space-md);font:var(--eyebrow-font);letter-spacing:var(--eyebrow-tracking);text-transform:var(--eyebrow-casing);color:var(--ink)}
.paper.receipt.minimalist .r-word{color:var(--ink3)}   /* the theme's label: Minimalist's eyebrow is ink3; Structure's and Classic's are ink */
.paper.receipt .r-sum{margin-bottom:var(--space-md);font:var(--sum-font-xl);color:var(--ink);letter-spacing:-.01em}   /* the paper's largest figure — a size above the numeral's 34: this is the whole document's subject */
.paper.receipt .r-when{margin-bottom:var(--space-xxxl);font-size:var(--text-sm);color:var(--ink2)}
.paper.receipt .r-lines{margin:0 0 var(--space-xxxl);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:0;font-size:var(--text-sm)}
.paper.receipt .r-lines>*{padding:var(--space-md) 0;border-top:var(--line);margin:0}
.paper.receipt .r-lines>dt{padding-right:var(--space-xl);color:var(--ink2)}
.paper.receipt .r-lines>dd{text-align:right;color:var(--ink);font-family:var(--mono);font-size:var(--text-sm);overflow-wrap:anywhere;line-height:1.6}
.paper.receipt .r-lines>dd.t{font-family:var(--ui);font-size:var(--text-sm)}   /* a name, not a figure: the UI face */
.paper.receipt .r-lines>dt:last-of-type,.paper.receipt .r-lines>dd:last-of-type{border-bottom:var(--line)}
.paper.receipt .r-lines.account>.big{border-bottom:0;padding-top:var(--space-md-lg);font:400 var(--text-lg-xl)/1 var(--display);color:var(--ink)}
.paper.receipt .r-lines.account>dd.big{font:var(--sum-font)}
.paper.receipt .slip>:last-child{margin-bottom:0}
.paper.receipt .r-id{font-size:var(--text-sm);line-height:1.6;color:var(--ink2)}   /* THE IDENTITY (ruled Sep 17): the slip's sign-off, the hub foot's facts in the quiet voice — no rule above it; the gap is the break. The same line on every theme */
.paper.receipt .r-id b{display:block;font-weight:500;color:var(--ink)}
@container paper (width < 45rem){
  .paper.receipt .slip{width:100%}
}

/* ── THE DOCUMENT (slice 12a; the client page's grammar transcribed from prototypes/proposal.html in 12b — the sitting of Sep 3,
   "I would send this"). The masthead is the invoice's: the studio block and, right, the KIND WORD over the NUMBER — nothing
   else on screen (the dates leave the paper; print gets them back). Then PREPARED FOR over the company at 22 (small display)
   with its facts as quiet lines, and PROJECT under it, the title at 22 on a nine-column measure. The BLOCK STACK is flat and
   typed: a headed block opens a section — a rule (--pl) the paper's full width, 48 before / 32 after, the heading in display
   22; unheaded blocks flow inside a section 24 apart, a table 32. Body text is Home's note voice: 15/24 regular --ink2, nine
   columns of measure. VERTICAL RHYTHM, all on 8u: masthead → parties 64 · parties → body 48 · a section 48/32 · blocks 24 ·
   the sign block is a section. Reads tokens.css only. ── */
.paper.document .p-meta dl.dates{display:none}
.paper.document .p-who{display:block;padding-top:0;border-top:0;margin-bottom:var(--space-xxxl)}   /* BOTTOM-ONLY: the parties own the 48 to the body */
.paper.document .p-who>.party{display:block}
.paper.document .p-who>.party.client{margin-bottom:var(--space-xxl)}
.paper.document .p-who>.party.project .p-big{max-width:calc((100% - 11*var(--space-lg))/12*9 + 8*var(--space-lg))}
.paper.document .p-who .p-lbl{color:var(--ink3);border-bottom:0;padding-bottom:0;line-height:1;margin-bottom:var(--space-sm)}   /* the parties, subdued (Chris, Sep 3): not the invoice's bill-to */
.paper.document .p-who .p-big{font:var(--item-title-font);letter-spacing:0;text-transform:none;margin:0;color:var(--ink)}   /* the title h1 as typed (Sep 22) */
.paper.document .p-who .p-big:has(+.addr){margin-bottom:var(--space-md)}
.paper.document .p-who .addr{font-size:var(--text-sm);line-height:1.5;color:var(--ink2)}
.paper.document .blk{margin:0 0 var(--space-xl)}   /* BOTTOM-ONLY: a block owns the 24 to the next; the stack's last gives it up */
.paper.document .blk:last-child{margin-bottom:0}
.paper.document .blk:has(>h2){border-top:var(--pl);padding-top:var(--space-xxl)}   /* a headed block opens a section — the rule generalised from Text to every kind (Sep 3 late) */
.paper.document .blk:has(+.blk.pricing:not(:has(>h2))),.paper.document .blk:is(.pricing,.schedule):has(+.blk:not(:has(>h2),.sign)){margin-bottom:var(--space-xxl)}   /* a block before a table owns 32, and a table owns 32 to an unheaded continuation — never a section: the :not keeps this rule off the one below, which it would outrank (Sep 17) */
.paper.document .blk:has(+.blk:is(:has(>h2),.sign)){margin-bottom:var(--space-xxxl)}   /* THE SECTION RULE, the only one: the block before a section — a headed block, or the sign block, the stack's last child — owns the 48 it opens at */
.paper.document .blk:first-child:has(>h2){border-top:0;padding-top:0}
.paper.document .blk h2{margin:0 0 var(--space-lg);font:var(--item-title-font);letter-spacing:0;text-transform:none;color:var(--ink)}   /* the block's heading — the studio's text AS TYPED (ruled Sep 22): on my. the paper sits in a .card, whose h2 is the caps row voice; Lorien wears no transform, so the paper says so itself */
.paper.document .blk.text>*{max-width:calc((100% - 11*var(--space-lg))/12*9 + 8*var(--space-lg))}   /* nine columns of measure for the words; the block — and its rule — runs the paper's full width */
.paper.document .blk.text p{margin:0 0 var(--space-md);font:var(--paragraph-font);color:var(--ink2)}   /* the voice of Home's note: 15/24, regular, the quiet ink */
.paper.document .blk.text p:last-child,.paper.document .blk.text ul:last-child,.paper.document .blk.text ol:last-child,.paper.document .blk.text blockquote:last-child{margin-bottom:0}
.paper.document .blk.text ul,.paper.document .blk.text ol{margin:0 0 var(--space-md);padding-left:var(--space-xl);font:var(--paragraph-font);color:var(--ink2)}
.paper.document .blk.text li{margin-bottom:var(--space-xs)}
.paper.document .blk.text li:last-child{margin-bottom:0}
.paper.document .blk.text ol{padding-left:var(--space-xl)}
.paper.document .blk.text li ol,.paper.document .blk.text li ul{margin:var(--space-xs-sm) 0 0}
.paper.document .blk.text strong,.paper.document .blk.text b{font-weight:500;color:var(--ink)}
.paper.document .blk.text a{color:var(--acting);text-decoration:underline;text-underline-offset:.1875rem}
.paper.document .blk.text blockquote{margin:0 0 var(--space-md);padding-left:var(--space-lg);border-left:var(--pl);font:var(--paragraph-font);color:var(--ink)}   /* the testimonial: a left rule, the attribution as a quiet line */
.paper.document .blk.text blockquote p{color:var(--ink)}
.paper.document .blk.text blockquote p:last-of-type{margin-bottom:var(--space-sm)}
.paper.document .blk.text blockquote cite{display:block;font-style:normal;font-size:var(--text-sm);color:var(--ink3)}
/* Image: a figure with a mono caption — every image in the decks carries one. */
.paper.document .blk.image figure{margin:0}
.paper.document .blk.image img{display:block;width:100%;height:auto;border:var(--pl);margin-bottom:var(--space-sm)}
.paper.document .blk.image figcaption{font:400 var(--text-xs)/1.5 var(--mono);color:var(--ink3)}
/* Pricing, the one-package case: a plain table — a header row on the rules' color (the eyebrow voice), rows of Date · Item ·
   Amount, then the Total row beneath with transparent borders so the amount ends on the column's edge. No item numbers (the
   invoice's big numeral is the line item's, not a schedule's — Chris, Sep 3). The Date column is opt-in as on the invoice:
   Invoiced · Milestone · Amount with dates, Item · Amount without. A per-unit line carries its qty × rate in mono under the item. */
.paper.document .blk.pricing{--c:calc((100% - 11*var(--space-lg))/12)}
.paper.document .blk.pricing>:is(.p-table,.pk,.addons){margin-bottom:var(--space-xl)}   /* BOTTOM-ONLY: the table, the packages, the add-ons each own the 24 to what follows */
.paper.document .blk.pricing>:last-child{margin-bottom:0}
.paper.document .p-table.whole{margin-top:var(--space-xl)}   /* THE FOOT (issue #77): two or more pricing blocks close on one Total · Deposit · Balance, the block's own rows, 24 under the last block as the running total sits */
.paper.document .p-table .p-row{display:grid;grid-template-columns:calc(3*var(--c) + 2*var(--space-lg)) 1fr calc(2*var(--c) + var(--space-lg))}
.paper.document .p-table.nodate .p-row{grid-template-columns:1fr calc(2*var(--c) + var(--space-lg))}
.paper.document .p-table .p-row>div{border:var(--pl);border-left:0;padding:var(--space-md) var(--space-md-lg);font-size:var(--text-sm);line-height:1.4}
.paper.document .p-table .p-row>div:first-child{border-left:var(--pl)}
.paper.document .p-table .p-row+.p-row>div{border-top:0}
.paper.document .p-table .p-row.hd>div{background:var(--field);border-color:var(--field);padding:var(--space-sm) var(--space-md-lg);font:var(--eyebrow-font);letter-spacing:var(--eyebrow-tracking);text-transform:var(--eyebrow-casing);color:var(--ink)}
.paper.document .p-table .p-row.hd>.n{text-align:right;font-family:var(--ui)}
.paper.document .p-table .p-row.tot>div{border-color:transparent;padding-top:var(--space-sm-md)}   /* the total: a plain row under the table — the borders kept but invisible, so the amount ends where the table's do */
.paper.document .p-table .p-row.tot>.k{grid-column:1 / span 2;text-align:right;font-weight:500;color:var(--ink)}
.paper.document .p-table.nodate .p-row.tot>.k{grid-column:1}
.paper.document .p-table .p-row.tot>.n{font-weight:500;color:var(--ink);display:flex;justify-content:flex-end}   /* flex-end: a wide total spills left, so the digits end where the column's do */
.paper.document .p-table .p-row.tot+.p-row.tot>div{padding-top:0}
.paper.document .p-table .p-row.tot.dep>.k,.paper.document .p-table .p-row.tot.dep>.n{font-weight:400;color:var(--ink2)}   /* THE DEPOSIT ROWS (issue #14): Deposit on signing · Balance under Total, in the total's row, quieter — the total leads */
.paper.document .p-table .p-row>.d{font-family:var(--mono);font-size:var(--text-sm);color:var(--ink2);white-space:nowrap}
.paper.document .p-table .p-row>.n{text-align:right;font-family:var(--mono);white-space:nowrap}
.paper.document .p-table .p-row .desc{font-size:var(--text-sm);color:var(--ink2);margin-top:0}
.paper.document .p-table .p-row .qr{font:400 var(--text-xs)/1.5 var(--mono);color:var(--ink2);margin-top:0}
/* Pricing with a CHOICE: packages as columns — name · description · LINES in the invoice's item grammar · the total footed — a
   radio group. Packages sit on the tint; the chosen one is white (the chosen thing); hover swaps to the panel. Add-ons are ticks
   beneath; the total derives (:has(), the generated rules). Stacking by container width: two need 576, three 872, more always stack. */
.paper.document .blk:is(.pricing,.schedule) .lead{margin:0 0 var(--space-lg);font:var(--paragraph-font);color:var(--ink2)}   /* the block's intro under its heading — pricing's, and the schedule's (issue #130): one rule */
.paper.document .blk.pricing.choice{container-type:inline-size}
.paper.document .pk{display:grid;grid-template-columns:1fr;gap:var(--space-lg)}
@container (min-width:36rem){.paper.document .pk:not(:has(>label:nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:54.5rem){.paper.document .pk:has(>label:nth-child(3)):not(:has(>label:nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))}}
.paper.document .pk label{display:flex;flex-direction:column;padding:var(--space-lg-xl) var(--space-lg-xl) var(--space-xl);border:var(--pl);background:var(--tint);cursor:pointer;min-width:0;margin:0}
.paper.document .pk label:hover{background:var(--panel)}
.paper.document .pk label:has(input:checked){background:#fff}
.paper.document .pk label:has(input:disabled){cursor:default}
.paper.document .pk label:has(input:focus-visible){outline:var(--stroke) solid var(--ink);outline-offset:-.25rem}
.paper.document .pk .eb{display:flex;align-items:center;justify-content:space-between;font:var(--eyebrow-font);letter-spacing:var(--eyebrow-tracking);text-transform:var(--eyebrow-casing);color:var(--ink3)}
.paper.document .pk .eb input{margin:0;width:1rem;height:1rem;accent-color:var(--acting);cursor:pointer}
.paper.document .pk .eb .chosen{color:var(--acting)}
.paper.document .pk .eb{margin-bottom:var(--space-md)}
.paper.document .pk h3{margin:0 0 var(--space-sm-md);font:var(--item-title-font);letter-spacing:0;text-transform:none;color:var(--ink)}   /* the package's name as typed (Sep 22), as the block heading */
.paper.document .pk h3:has(+.ln){margin-bottom:var(--space-lg)}
.paper.document .pk p{margin:0 0 var(--space-lg);font:var(--explainer-font);color:var(--ink2)}
.paper.document .pk .ln{margin:0 0 var(--space-md);border-top:var(--hairline) solid var(--rule)}
.paper.document .pk .ln>div{display:grid;grid-template-columns:1fr auto;gap:0 var(--space-lg);padding:var(--space-sm-md) 0;border-bottom:var(--hairline) solid var(--rule);font-size:var(--text-sm);line-height:1.4;color:var(--ink)}
.paper.document .pk .ln .desc{grid-column:1 / -1;margin-top:var(--space-xxs);font-size:var(--text-sm);color:var(--ink2)}
.paper.document .pk .ln .qr{display:block;font:400 var(--text-xs)/1.5 var(--mono);color:var(--ink2);margin-top:var(--space-xxs)}
.paper.document .pk .ln .n{font-family:var(--mono);white-space:nowrap;text-align:right}
.paper.document .pk .fee{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;font-size:var(--text-sm);color:var(--ink2)}   /* the total at the foot of every column: grid rows stretch, the flex column pushes it down — aligned across packages by construction */
.paper.document .pk .fee b{font:var(--sum-font);color:var(--ink)}
.paper.document .addons .head2{padding:0 0 var(--space-sm);font:var(--eyebrow-font);letter-spacing:var(--eyebrow-tracking);text-transform:var(--eyebrow-casing);color:var(--ink3)}
.paper.document .addons label{display:flex;align-items:center;gap:var(--space-md);min-height:var(--fh);padding:0 var(--space-md-lg);border:var(--pl);background:var(--tint);cursor:pointer;font-size:var(--text-sm);color:var(--ink);margin:0}
.paper.document .addons label+label{border-top:0}
.paper.document .addons label:hover{background:var(--panel)}
.paper.document .addons label:has(input:checked){background:#fff}
.paper.document .addons input{margin:0;width:1rem;height:1rem;accent-color:var(--acting)}
/* FACTS UNLESS CHOSEN (issue #122, ruled Sep 30): in a block that offers a choice, an unchosen package's add-ons are facts — the name, the description, the amount in the same rows, no box, no "choose any", muted like any closed thing — so a control exists only where it can act and nothing is a disabled control. This is the base state; Paper::addonRules generates, per package, the rule that makes its list live while its radio is checked. Keyed on the box's presence, so a paper with no inputs (frozen, a staff visit, a single package) is untouched. */
.paper.document .addons[data-package]:has(input) label{color:var(--ink3);pointer-events:none}
.paper.document .addons[data-package]:has(input) label:has(input:checked){background:var(--tint)}   /* a tick made under a package since un-chosen does not show */
.paper.document .addons[data-package]:has(input) .desc{color:var(--ink3)}
.paper.document .addons[data-package]:has(input) :is(input,.any){display:none}
.paper.document .addons .desc{color:var(--ink2);font-size:var(--text-sm)}
@container paper (width < 45rem){
/* ── THE DOCUMENT'S TABLE FOLDS TOO (ruled Sep 22; it had no narrow map — three columns overran a phone). Its own block, AFTER the
   document's wide rules: the fold's rules match them at equal specificity and win only by coming later. Each line one box in
   Structure's narrow grammar — the name, the date under it when the lines carry dates, the description on its own ruled line, the
     quantity line and the amount on one ruled line LAST; no head row (Structure's fold has none); the total row keeps its two cells. ── */
  .paper.document .p-table{border-top:var(--pl)}
  .paper.document .p-table .p-row,.paper.document .p-table.nodate .p-row{grid-template-columns:1fr auto;border:var(--pl);border-top:0}
  .paper.document .p-table .p-row.hd{display:none}
  .paper.document .p-table .p-row>div,.paper.document .p-table .p-row>div:first-child{border:0;padding:var(--space-md) var(--space-md-lg)}
  .paper.document .p-table .p-row>.it{display:contents}
  .paper.document .p-table .p-row .nm{grid-area:1 / 1 / 2 / 3;display:block;padding:var(--space-md) var(--space-md-lg)}
  .paper.document .p-table:not(.nodate) .p-row .nm{padding-bottom:0}
  .paper.document .p-table .p-row>.d{grid-area:2 / 1 / 3 / 3;padding-top:0;font-size:var(--text-xs)}
  .paper.document .p-table .p-row .desc{grid-area:3 / 1 / 4 / 3;margin:0;padding:var(--space-md) var(--space-md-lg);border-top:var(--pl)}
  .paper.document .p-table .p-row .qr{grid-area:4 / 1 / 5 / 2;margin:0;padding:var(--space-md-lg) var(--space-md-lg) var(--space-md);border-top:var(--pl)}
  .paper.document .p-table .p-row>.n,.paper.document .p-table .p-row+.p-row>.n{grid-area:4 / 1 / 5 / 3;border-top:var(--pl)}   /* the `+` form outranks the wide rule that clears a following row's top borders */
  .paper.document .p-table .p-row>.it:has(.qr)+.n{grid-column:2 / 3}
  .paper.document .p-table .p-row>.d:empty{display:none}   /* a dated table's undated line: no empty row keeping its padding */
  .paper.document .p-table .p-row.tot,.paper.document .p-table.nodate .p-row.tot{border:0}
  .paper.document .p-table .p-row.tot>.k,.paper.document .p-table.nodate .p-row.tot>.k{grid-area:1 / 1 / 2 / 2}
  .paper.document .p-table .p-row.tot>.n,.paper.document .p-table .p-row+.p-row.tot>.n{grid-area:1 / 2 / 2 / 3;border-top:0}   /* the total's two cells on one row, not the line's map */
  /* a package's line stacks the same way: the name (its quantity line under it), the description, the amount LAST */
  .paper.document .pk .ln>div{grid-template-columns:1fr}
  .paper.document .pk .ln .n{order:1}
}
.paper.document .addons .n{margin-left:auto;font-family:var(--mono);white-space:nowrap}
.paper.document .blk.pricing .tot2{display:flex;justify-content:flex-end;align-items:baseline;gap:var(--space-lg);padding:var(--space-sm-md) var(--space-md-lg) 0;font-size:var(--text-sm)}
.paper.document .blk.pricing .tot2 .k{font-weight:500}
.paper.document .blk.pricing .tot2 .n{font:500 var(--text-sm)/1.4 var(--mono)}
.paper.document .blk.pricing .tot2.dep{padding-top:var(--space-xs);font-size:var(--text-sm);color:var(--ink2)}   /* THE DEPOSIT ROWS (issue #14) under the running total: the same line, quieter */
.paper.document .blk.pricing .tot2.dep .k,.paper.document .blk.pricing .tot2.dep .n{font-weight:400}
.paper.document .blk.pricing .tot2.dep .n{font-size:var(--text-sm)}
.tot2 .n span{display:none}   /* the generated rules (main:has(…) [data-for]) show the one combo the choice makes — kept LOW in specificity so they win; the Balance row hides whole until a radio is chosen (issue #14) */
/* Schedule: rows of Phase · When, in the table grammar. */
.paper.document .blk.schedule{--c:calc((100% - 11*var(--space-lg))/12)}
.paper.document .s-row{display:grid;grid-template-columns:1fr calc(3*var(--c) + 2*var(--space-lg))}
.paper.document .s-row>div{border:var(--pl);border-left:0;padding:var(--space-md) var(--space-md-lg);font-size:var(--text-sm);line-height:1.4}
.paper.document .s-row>div:first-child{border-left:var(--pl)}
.paper.document .s-row+.s-row>div{border-top:0}
.paper.document .s-row>.d{font-family:var(--mono);font-size:var(--text-sm);color:var(--ink2);white-space:nowrap}
.paper.document .s-row.hd>div{background:var(--field);border-color:var(--field);padding:var(--space-sm) var(--space-md-lg);font:var(--eyebrow-font);letter-spacing:var(--eyebrow-tracking);text-transform:var(--eyebrow-casing);color:var(--ink)}
.paper.document .s-row.hd>.d{font-family:var(--ui)}
/* The sign block: a SECTION of its own (rule, 48/32), with an optional lead — the sentence that belongs to the signatures, 24
   above the lines. Two company slots in six columns each; the signature line is an input in the script face on both sides (the
   rendered one readonly) — same element, aligned by construction, no placeholder; typing is signing. Under it: company (500),
   then Name · Email at 13, then Signed (mono date); one 12 between each. The client's open slot: the line, the facts, the consent
   centred on its first line by 1lh, and ACCEPT & SIGN 48 below, gated by the consent and by an unmade choice (35% until both).
   The script face is Tilda Grande (ruled Sep 16; tokens.css); --script is the one place to set it, and the signature rule below
   is the one place its features are asked for. */
.paper.document .blk.sign{border-top:var(--pl);padding-top:var(--space-xxl)}   /* its 48 before is the section rule's, in the stack above */
.paper.document .blk.sign .lead{margin:0 0 var(--space-xl);font:var(--paragraph-font);color:var(--ink2);max-width:calc((100% - 11*var(--space-lg))/12*9 + 8*var(--space-lg))}
.paper.document .p-sign{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--space-lg)}
.paper.document .p-sign>.slot:first-child{grid-column:1 / span 6}
.paper.document .p-sign>.slot:last-child{grid-column:7 / span 6}
.paper.document .slot form{margin:0}
/* THE SIGNATURE BOX (measured in Chrome on prod, Sep 16) — one rule for the sign field and the signed signature alike: Tilda
   Grande 48px/48px in a 73 box on THE line (--line, never 1px ink). 16 left clears a capital's init stroke (the bare J overhangs
   5, the stroke more) — as a TEXT-INDENT, never padding: an input's inner editor clips at the content edge, so however much
   padding sat outside it the stroke was cut; the indent gives the overhang room inside the content box. 5 below puts the
   descenders just on the rule at this line-height; 32 above is what's left of 73. The field scrolls natively when a name
   outruns it; the signed render wears a length class instead (see the sizes below). */
.paper.document .slot input.sig{display:block;width:100%;height:calc(9*var(--u) + var(--hairline));padding:var(--space-xxl) 0 .3125rem 0;margin-bottom:var(--space-sm-md);text-indent:1rem;background:transparent;border:0;border-bottom:var(--line);border-radius:0;outline:0;font:400 var(--script-lg)/3rem var(--script);color:var(--ink)}
/* THE LENGTH CLASS (Signature::sizeClass sets it on the signed render only): 48 → 36 → 28, line-height the size. The input
   centres its line box in the 34 the box leaves, so the box's centre sits at 32 + 17 = 49 whatever the size; keeping the line
   box's bottom where 48's is (73) means top = 56 − size/2: 38 at 36, 42 at 28 — the descenders stay just on the rule. */
.paper.document .slot input.sig.sig-36{font-size:var(--script-md);line-height:var(--script-md);padding-top:2.375rem}
.paper.document .slot input.sig.sig-28{font-size:var(--script-sm);line-height:var(--script-sm);padding-top:2.625rem}
.paper.document .slot input.sig[readonly]{pointer-events:none}
.paper.document .slot input.sig:focus{background:var(--highlight)}
.paper.document .slot .co{margin-bottom:var(--space-md);font-size:var(--text-sm);font-weight:500;color:var(--ink)}
.paper.document .slot dl{margin:0 0 var(--space-md);display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-lg);row-gap:var(--space-xs);font-size:var(--text-sm)}
.paper.document .slot dt{color:var(--ink2)}.paper.document .slot dd{margin:0;color:var(--ink)}
.paper.document .slot .dt{font-family:var(--mono)}   /* the moment (12c): "electronically · " in the ui face, the day and time in mono */
.paper.document .slot .err{margin:0 0 var(--space-md);font-size:var(--text-sm);line-height:1.5;color:var(--late)}
.paper.document .slot .agree{display:flex;align-items:flex-start;gap:var(--space-sm-md);margin:0 0 var(--space-xxxl);font-size:var(--text-sm);line-height:1.5;color:var(--ink2);cursor:pointer}
.paper.document .slot .agree input{margin:calc((1lh - var(--space-lg)) / 2) 0 0;width:1rem;height:1rem;flex:0 0 1rem;accent-color:var(--acting)}   /* centred on the FIRST line by construction: the line-height unit gives the line box */
.paper.document .slot .agree:has(input:focus-visible){outline:var(--stroke) solid var(--ink);outline-offset:.25rem}
.paper.document .slot>:last-child{margin-bottom:0}
.paper.document .slot .go{display:flex;align-items:center;width:100%;height:var(--fh);padding:0 var(--space-xl);border:0;background:var(--acting);color:#fff;cursor:pointer;
  font:var(--action-font);letter-spacing:var(--action-tracking);text-transform:var(--action-casing)}
.paper.document .slot .go:hover{background:var(--ink)}
.paper.document .slot .go:focus-visible{outline:var(--stroke) solid var(--ink);outline-offset:.125rem}
.paper.document .slot:has(.agree input:not(:checked)) .go{opacity:.35;pointer-events:none}   /* the consent gates the action; the fill carries the state */
.paper.document:has(.pk:has(input[type=radio]):not(:has(input:checked))) .slot .go{opacity:.35;pointer-events:none}   /* a choice unmade cannot be signed — any block's (#77: a radio group per pricing block) */
/* framed: the frame is the letterhead — the paper's logo slot returns in print, and so do the dates */
@media (max-width:53.4375rem){
  .paper.document .p-sign>.slot:first-child,.paper.document .p-sign>.slot:last-child{grid-column:1 / span 12}   /* the same specificity as the six-column rules above, or they win and only the margin lands (12c) */
  .paper.document .p-sign>.slot:first-child{margin-bottom:var(--space-xxl)}
  .paper.document .blk.text>*,.paper.document .p-who>.party.project .p-big{max-width:none}
  .paper.document .pk{grid-template-columns:1fr}
}
@media print{
  .paper.document .p-meta dl.dates{display:grid}
  .paper.document .slot .agree,.paper.document .slot .go{display:none}
  .paper.document .blk.sign{break-inside:avoid}
  .paper.document .p-sign>.slot:first-child{grid-column:1 / span 6}   /* a letter sheet is narrower than 856 but wide enough: the two slots stay side by side in print (12c) */
  .paper.document .p-sign>.slot:last-child{grid-column:7 / span 6}
  .paper.document .p-sign>.slot:first-child{margin-bottom:0}
}

/* ── THE CERTIFICATE (ruled Sep 4; slice 12c): the evidence bundle as the signed PDF's last page — print-only after the paper,
   a page break before it; on the verify page (`.screen`) the same section stands alone in the hub's one-column room. The
   paper's voice: the section heading in display 22, facts as label · value rows on the soft rule, each party a slot — the
   typed signature in the script face over the company, then its facts. Plain, FLAGGED. Reads tokens.css only. ── */
.certificate{display:none;font-family:var(--ui);color:var(--ink)}
.certificate.screen{display:block;max-width:calc(var(--content) + 2*var(--content-edge));padding:var(--space-xxxl) var(--content-edge);box-sizing:border-box}
.certificate h2{margin:0;font:var(--title-font);letter-spacing:0;text-transform:none;color:var(--ink)}   /* the h1's size (body.studio h1, .card h1.title): it heads a page — the PDF's last, the verify page — not a block (ruled Sep 23, issue #33); an h2 in the outline */
/* THE FINGERPRINT (issue #33, ruled Sep 23): one figure, three sizes — the title's rule IS the strip (full width, 4 tall; the SVG's aspect is not
   preserved, so the 32 cells stretch to the measure), the mark beside the SHA-256 (192 × 12), and the verify page's hero (full width, 12 tall)
   over "The fingerprint should match the certificate's." Sized as a mark, never louder than the words. */
.certificate .fp{display:block}
.certificate .fp.rule{width:100%;height:.25rem;margin:var(--space-md) 0 var(--space-xl)}   /* the 24 the title kept under it, now under the rule */
.certificate .fp.c{width:12rem;height:.75rem;flex:none}
.certificate dd.hash{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap}
.certificate .fp.hero{width:100%;height:.75rem;margin:0 0 var(--space-sm)}
.certificate .fp-lead{margin:0 0 var(--space-xxxl);font-size:var(--text-sm);line-height:1.5;color:var(--ink2)}
.certificate dl{margin:0;display:grid;grid-template-columns:8.5rem minmax(0,1fr);column-gap:0;row-gap:0}   /* no gap: the gutter is the value's padding, so a row's rule is one rule (Sep 23, issue #32) */
.certificate dt,.certificate dd{margin:0;padding:var(--space-sm-md) 0;border-top:var(--hairline) solid var(--rule);font-size:var(--text-sm);line-height:1.5}
.certificate dd{padding-left:var(--space-lg)}
.certificate dt{color:var(--ink2)}
.certificate dd{color:var(--ink);overflow-wrap:anywhere}
.certificate dd.c{font-family:var(--mono);font-size:var(--text-xs)}
.certificate dd a{color:var(--acting);text-decoration:underline;text-underline-offset:.1875rem}
.certificate .ok{display:block;margin-top:var(--space-xxs);font-size:var(--text-xs);color:var(--ink2)}
/* THE PARTIES SHARE ONE GRID (ruled Sep 23, issue #32): four columns — label · value · label · value — the two parties' rows
   interleaved (the dl is display:contents; its dt/dd are the grid's own items), so a two-line cell raises the row on both sides
   by construction and a row's rule is ONE rule across the page: no column gap — the gutter is the second label's padding and
   the second signature's margin, so each half measures what the two-slot grid's did, (100% − gutter)/2. Narrow (the hub's
   /verify under 856) the parties stack, the second's items ordered after the first's: .p-sign's rule; print (a letter sheet)
   is the four columns again. */
.certificate .c-facts{margin-bottom:var(--space-xxxl)}   /* BOTTOM-ONLY: the facts own the 48 to the parties, the parties the 48 to the foot */
.certificate .c-parties{display:grid;grid-template-columns:8.5rem minmax(0,1fr) calc(8.5rem + var(--space-lg)) minmax(0,1fr);margin-bottom:var(--space-xxxl)}
.certificate .c-parties>.sig,.certificate .c-parties>.co{grid-column:span 2}
.certificate .c-parties>.sig+.sig,.certificate .c-parties>.co+.co{margin-left:var(--space-lg)}
.certificate .c-grid{display:contents}
.certificate .c-grid dt:nth-of-type(even){padding-left:var(--space-lg)}
/* The signature box again (the sign field's rule holds the numbers), derived for a div: the input centres its 48 line in the 34
   the box leaves it (73 − 32 − 5 − the 2px line), lifting it 7 above the padding edge where a div's line box starts — so 25 top
   (32 − 7), the same 5 below, and the same 16 as a text-indent (the init stroke's room is inside the box here too — overflow:
   hidden clips at the padding box, as the input's inner editor does at its content edge), on the same line. */
.certificate .c-parties>.sig{height:calc(9*var(--u) + var(--hairline));padding:1.5625rem 0 .3125rem 0;margin-bottom:var(--space-sm);text-indent:1rem;border-bottom:var(--line);font:400 var(--script-lg)/3rem var(--script);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The length class on the certificate: a div's line box starts at the padding edge, so top = 73 − size keeps its bottom at 73. */
.certificate .c-parties>.sig.sig-36{font-size:var(--script-md);line-height:var(--script-md);padding-top:2.3125rem}
.certificate .c-parties>.sig.sig-28{font-size:var(--script-sm);line-height:var(--script-sm);padding-top:2.8125rem}
.certificate .c-parties>.consent{grid-column:span 2;margin:0 0 var(--space-sm-md);font-size:var(--text-sm);line-height:1.5;color:var(--ink3)}   /* THE CONSENT IS THE SIGNATURE'S CAPTION (ruled Sep 23, issue #33): under the line, in the quiet size, before the party's name — never a row in the list, where it wrapped */
.certificate .c-parties>.consent+.consent{margin-left:var(--space-lg)}   /* the second party's gutter, as .sig+.sig and .co+.co take it */
.certificate .c-parties>.co{margin:0 0 var(--space-md);font-size:var(--text-sm);font-weight:500}
/* THE QR (issue #37, ruled Sep 23, prototypes/certificate.html): the certificate's last row is the footnotes and, right of them, the
   verify address as a QR code — on paper a URL gets typed; a QR gets scanned; the strip says compare, the QR says go check. Bottom-
   right: its base on the footnotes' last baseline (MD UI's 12/18 line box ends 6px under the baseline — measured in Chrome by
   ScreensTest's probe; the prototype's 5 left it a pixel low), its right edge on the rules'. 112px square on screen (33 modules → 3.4px each), ~86px ≈ 23mm on the PDF under the .768 zoom. No border, no quiet-
   zone padding: the paper's white is the quiet zone. Inline SVG, one path; the PDF fetches nothing. */
.certificate .c-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:calc(2*var(--space-lg))}
.certificate .c-note{margin:0 0 var(--space-md);font-size:var(--text-xs);line-height:1.5;color:var(--ink3);max-width:60ch}
.certificate .c-note:last-child{margin-bottom:0}   /* the footnote's two paragraphs: who signed, then what a match proves */
.certificate .qr{flex:none;width:7rem;height:7rem;margin-bottom:var(--space-xs-sm);fill:var(--ink)}
@media (max-width:53.4375rem){
  .certificate .c-parties{grid-template-columns:6rem minmax(0,1fr)}
  .certificate .c-parties>.sig+.sig,.certificate .c-parties>.consent+.consent,.certificate .c-parties>.co+.co{margin-left:0}
  .certificate .c-parties>.sig+.sig{margin-top:var(--space-xxl)}
  .certificate .c-grid dt:nth-of-type(even){padding-left:0}
  .certificate .c-parties>.sig+.sig,.certificate .c-parties>.consent+.consent,.certificate .c-parties>.co+.co,.certificate .c-grid dt:nth-of-type(even),.certificate .c-grid dd:nth-of-type(even){order:1}   /* the second party's items after the first's — its caption with its signature */   /* the second party's items after the first's: stacked, each under its own signature */
  .certificate dl{grid-template-columns:6rem minmax(0,1fr)}
  .certificate .c-foot{display:block}   /* NARROW, THE ROW IS A STACK (ruled Sep 23, issue #37): the footnotes at the full measure, the QR under them on the left — beside them it squeezed the words into a column */
  .certificate .c-notes{margin-bottom:var(--space-xl)}
  .certificate .qr{margin:0}
}
@media print{
  .certificate{display:block;break-before:page;page-break-before:always}
  .certificate .c-parties{grid-template-columns:8.5rem minmax(0,1fr) calc(8.5rem + var(--space-lg)) minmax(0,1fr)}   /* the page is narrower than 856 but the two slots fit a letter sheet — one page, symmetric */
  .certificate .c-parties>.sig+.sig,.certificate .c-parties>.consent+.consent,.certificate .c-parties>.co+.co{margin-left:var(--space-lg)}
  .certificate .c-parties>.sig+.sig{margin-top:0}
  .certificate .c-grid dt:nth-of-type(even){padding-left:var(--space-lg)}
  .certificate .c-parties>.sig+.sig,.certificate .c-parties>.consent+.consent,.certificate .c-parties>.co+.co,.certificate .c-grid dt:nth-of-type(even),.certificate .c-grid dd:nth-of-type(even){order:0}
  .certificate .c-foot{display:flex}   /* the sheet is narrower than 856 but the row fits a letter page: the QR bottom-right, as wide */
  .certificate .c-notes{margin-bottom:0}
  .certificate .qr{margin:0 0 var(--space-xs-sm)}
  .certificate .c-parties,.certificate .c-foot{break-inside:avoid}
}