/* 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. */
.paper,.paper *{box-sizing:border-box}
/* ── the paper ── */
.paper{background:#fff;margin:0;padding:calc(8*var(--u)) var(--content-edge);min-height:calc(100vh - var(--bar) - 2px);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(--gutter)}
.p-head>.p-from{grid-column:1 / span 6}
.p-head>.p-meta{grid-column:7 / span 6}
.p-from{font-size:13px;line-height:1.5;color:var(--ink2)}
.p-from b{display:block;color:var(--ink);font-weight:500;font-size:14px}
.p-from>*+*{margin-top:6px}   /* 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 34px/1 var(--display)}
.p-meta dl{margin:14px 0 0;display:grid;grid-template-columns:auto auto;justify-content:end;gap:4px 16px;font-size:13px}
.p-meta dt{color:var(--ink3);text-align:left}
.p-meta dd{margin:0;font-family:var(--mono)}
.p-who{margin-top:56px;padding-top:16px;border-top:1px solid var(--rule)}
.p-who>div:first-child{grid-column:1 / span 6}
.p-who>div:last-child{grid-column:7 / span 6}
.p-lbl{font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.p-big{font:400 22px/1.2 var(--display)}
.p-sm{font-size:13px;color:var(--ink2);margin-top:8px;line-height:1.6}
.p-items{width:100%;border-collapse:collapse;margin-top:48px;font-size:14px}
.p-items th{font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);text-align:left;padding:0 0 10px;border-bottom:1px solid var(--ink)}
.p-items td{padding:12px 0;border-bottom:1px 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(--gutter))/12*2 + var(--gutter));font-family:var(--mono);font-size:13px;color:var(--ink2)}
.p-items .sub{font-family:var(--mono);font-size:12px;color:var(--ink2);margin-top:3px}
.p-items .desc{font-size:13px;color:var(--ink2);margin-top:3px}
.p-tot{display:grid;grid-template-columns:1fr 1fr;gap:var(--u) 0;margin:24px 0 0 auto;font-size:14px;width:calc((100% - 11*var(--gutter))/12*4 + 3*var(--gutter))}   /* cols 9–12, like the form's */
.p-tot .k{color:var(--ink2)}.p-tot .v{text-align:right;font-family:var(--mono)}
.p-tot .big{font:400 20px/1 var(--display);padding-top:10px;border-top:1px solid var(--ink)}
.p-tot .big.v{font-family:var(--mono);font-weight:500;font-size:20px}
.p-pay{font-size:14px;color:var(--ink2);line-height:1.7}
.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(--gutter);align-items:flex-start;--c:calc((100% - 11*var(--gutter))/12)}
.paper .p-bill>div{flex:0 0 calc(4*var(--c) + 3*var(--gutter));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-kv{margin:12px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:4px;font-size:13px}
.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:2px}   /* 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(--gutter)))}

/* ── 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:calc(8*var(--u))}
.paper:is(.invoice.structure,.document) .p-studio{grid-column:1 / span 6;display:flex;align-items:stretch;align-self:start;gap:var(--gutter)}   /* 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(--gutter))/6*2 + var(--gutter));min-width:0;align-self:stretch;margin:4px 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:4px 0 4px 16px}
.paper:is(.invoice.structure,.document) .p-meta{grid-column:9 / span 4}
.paper:is(.invoice.structure,.document) .p-meta .lbl-no{font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.paper:is(.invoice.structure,.document) .p-meta dl{margin-top:16px}
.invoice.structure .p-who{margin-top:0;padding-top:0;border-top:0}
.invoice.structure .p-lbl{color:var(--ink);line-height:21px;padding-bottom:var(--u);border-bottom:var(--pl);margin-bottom:12px}   /* 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:400 34px/1.1 var(--display)}   /* client and project at the numeral's size: one hierarchy */
.paper.invoice.structure .p-bill{margin-top:calc(4*var(--u))}   /* Structure: the label's rule is its own; the list sits 12 under it */
.paper.invoice.structure .p-bill .p-kv{margin-top:0}
.invoice.structure .p-items{margin-top:calc(8*var(--u));--c:calc((100% - 11*var(--gutter))/12)}   /* one grid column, in this container's terms */
.invoice.structure .p-row{display:grid;grid-template-columns:calc(var(--c) + var(--gutter)) var(--date) 1fr calc(2*var(--c) + var(--gutter))}   /* 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(--gutter)) 1fr calc(2*var(--c) + var(--gutter))}
.invoice.structure .p-row>div{border:var(--pl);border-left:0;padding:12px 14px;font-size:14px;line-height:1.4}
.invoice.structure .p-row>.num{border:0;padding:12px 0 0;font:400 26px/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-row>.d{font-family:var(--mono);font-size:13px;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:12px;color:var(--ink2);margin-top:3px}
.invoice.structure .p-row .desc{font-size:13px;color:var(--ink2);margin-top:3px}
.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(--gutter);align-items:start;margin-top:calc(4*var(--u))}   /* 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:auto;margin:0}

/* ── 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(--gutter);align-content:start;--pl:1px solid var(--rule);--c:calc((100cqw - 2*var(--content-edge) - 11*var(--gutter))/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(--gutter));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:16px}   /* 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) .p-items{margin:0}
.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(--gutter))/12)}
.paper.invoice:is(.minimalist,.classic) .p-row{display:grid;grid-template-columns:var(--c) var(--date) 1fr calc(2*var(--c) + var(--gutter));column-gap:var(--gutter);padding:12px 0;border-bottom:var(--pl);font-size:14px;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(--gutter))}   /* the ledger has no boxes, so its tracks are the grid's own, gutters between */
.paper.invoice:is(.minimalist,.classic) .p-row>.num{font:400 13px var(--mono);color:var(--ink2)}
.paper.invoice:is(.minimalist,.classic) .p-row>.d{font-family:var(--mono);font-size:13px;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:12px;color:var(--ink2);margin-top:3px}
.paper.invoice:is(.minimalist,.classic) .p-row .desc{font-size:13px;color:var(--ink2);margin-top:3px}
.paper.invoice:is(.minimalist,.classic) .p-tot .big{border-top:1px solid var(--ink)}

/* ── 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:34px}
.paper.invoice.minimalist .p-studio{display:flex;grid-area:studio;align-items:start;align-self:start;gap:var(--gutter)}   /* 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(--gutter))/6*2 + var(--gutter));min-width:0;height:var(--numeral);margin-top:calc(11px + 6px)}   /* 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:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.paper.invoice.minimalist .p-meta .n{font:400 var(--numeral)/1 var(--display)}
.paper.invoice.minimalist .p-meta dl{margin-top:16px}
.paper.invoice.minimalist .p-who{margin-top:calc(8*var(--u));padding-top:calc(3*var(--u));border-top:var(--pl)}   /* the parties open on one soft rule — the base paper's, at 8u from the head */
.paper.invoice.minimalist .p-lbl{color:var(--ink3)}   /* eyebrows, no rule (the base) */
.paper.invoice.minimalist .p-bill{margin-top:calc(5*var(--u))}
.paper.invoice.minimalist .p-items{margin-top:calc(8*var(--u));border-top:var(--pl)}   /* the ledger: one rule above the block, one beneath each row */
.paper.invoice.minimalist .p-pay{margin-top:calc(4*var(--u))}
.paper.invoice.minimalist .p-tot{margin-top:calc(4*var(--u))}

/* ── 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(--gutter)}   /* 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(--gutter))/6*2 + var(--gutter));min-width:0;height:auto;align-self:stretch;margin:4px 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:4px 0 4px 16px}
.paper.invoice.classic .p-meta{text-align:right}
.paper.invoice.classic .p-meta .lbl-no{font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.paper.invoice.classic .p-meta .n{font:400 34px/1 var(--display)}
.paper.invoice.classic .p-meta dl{margin-top:16px}
/* 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:calc(8*var(--u)) calc(-1*var(--content-edge)) 0;padding:calc(5*var(--u)) var(--content-edge) 0;background:var(--band);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.paper.invoice.classic .p-who:not(:has(+.p-bill)){padding-bottom:calc(6*var(--u))}   /* no bill row: the parties close the band themselves */
.paper.invoice.classic .p-bill{margin:0 calc(-1*var(--content-edge));padding:calc(4*var(--u)) var(--content-edge) calc(6*var(--u));background:var(--band)}
.paper.invoice.classic .p-bill .p-lbl{padding-bottom:var(--u);border-bottom:1px 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:400 34px/1.1 var(--display)}   /* the numeral's size: one hierarchy, as Structure */
.paper.invoice.classic .p-items{margin-top:calc(6*var(--u))}
.paper.invoice.classic .p-row:first-child{border-top:var(--pl)}
.paper.invoice.classic .p-pay{margin-top:calc(4*var(--u))}
.paper.invoice.classic .p-tot{margin-top:calc(4*var(--u))}
.paper.invoice.classic .p-tot .big{font-size:24px}
.paper.invoice.classic .p-tot .big.v{font-size:24px}

/* ── 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 < 720px){
  .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+div{margin-top:calc(4*var(--u))}
  .p-tot{width:100%}
  .p-foot>.p-pay,.p-foot>.p-tot{grid-column:1 / span 12}
  .p-foot>.p-tot{margin-top:calc(4*var(--u))}
  /* the bill row stacks: every block the full width, 4u between */
  .paper .p-bill{flex-direction:column;gap:calc(4*var(--u))}
  .paper .p-bill>div,.paper .p-bill>div:last-child{flex:none;width:100%}
  /* 1. the logo on its own row, left: 64 tall, capped at 2:1 (128 wide), the mark against the box's left; the address block under it, its rule intact */
  .paper:is(.invoice.structure,.document) .p-studio{flex-direction:column;align-items:start;grid-column:1 / span 12}
  .paper:is(.invoice.structure,.document) .p-logo{flex:none;width:calc(16*var(--u));height:calc(8*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}
  /* 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-head>.p-meta{margin-top:calc(4*var(--u));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 dl{grid-column:1 / -1;margin:calc(4*var(--u)) 0 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 quantity line and the amount on one ruled line; the description on its own ruled line last. 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 quantity line and the description 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:12px 14px;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:12px 14px}
  .paper.invoice.structure .p-items:not(.nodates)>.p-row .nm{padding-bottom:3px}
  .paper.invoice.structure .p-items>.p-row>.d{grid-area:2 / 2 / 3 / 4;padding-top:0;font-size:12px}
  .paper.invoice.structure .p-items>.p-row .sub{grid-area:3 / 2 / 4 / 3;border-top:var(--pl);align-self:start;padding-top:14px}   /* 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:3 / 3 / 4 / 4;border-top:var(--pl);align-self:start}
  .paper.invoice.structure .p-items>.p-row>.it:not(:has(.sub))+.n{grid-column:2 / -1}
  .paper.invoice.structure .p-items>.p-row .desc{grid-area:4 / 2 / 5 / 4;border-top:var(--pl)}
  /* 5. totals full width, first; the note under them */
  .invoice.structure .p-foot>.p-tot{order:-1;margin-top:0}
  .invoice.structure .p-foot>.p-pay>:first-child{margin-top:calc(4*var(--u))}
  /* ── 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:calc(2*var(--u))}
  .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-meta{margin-top:calc(4*var(--u));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 dl{grid-column:1 / -1;margin:calc(4*var(--u)) 0 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:26px}
  /* each item: the number at the row's head, the name beside it, the date (when any) a mono line under the name, the quantity line and the amount on one line beneath, the description last — 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:12px}
  .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:12px;margin-top:2px}
  .paper.invoice:is(.minimalist,.classic) .p-items>.p-row .sub{grid-area:3 / 2 / 4 / 3;margin-top:6px}
  .paper.invoice:is(.minimalist,.classic) .p-items>.p-row>.n{grid-area:3 / 3 / 4 / 4;margin-top:6px;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-items>.p-row .desc{grid-area:4 / 2 / 5 / 4;margin-top:6px}
  .paper.invoice:is(.minimalist,.classic) .p-tot{margin-top:calc(4*var(--u));width:auto;justify-self:stretch}
  .paper.invoice:is(.minimalist,.classic) .p-pay{margin-top:calc(4*var(--u))}
}

/* ── print: the paper's lines go to ink ── */
/* THE PAGE (ruled Sep 17): letter, 12mm on every side, and in print the paper IS the page's content box — width 100%, no pixel
   width, 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 max-width is the sheet less the two margins,
   in the @page's own units: change one, change the other. 12mm keeps the printable width at 725, over the paper's 720 fold — the
   PDF prints WIDE.
   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{
  .paper{min-height:0;padding:0;width:100%;max-width:calc(8.5in - 2*12mm)}   /* the sheet less the @page's two margins */
  .paper.invoice:is(.minimalist,.classic){--c:calc((100cqw - 11*var(--gutter))/12)}   /* the paper's padding is 0 in print, so a column is the container's twelfth with no edge to subtract */
}

/* ── 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(--gutter))/12)}
.paper.receipt .slip{width:calc(6*var(--c) + 5*var(--gutter));max-width:100%}
.paper.receipt .r-mark{width:calc(30*var(--u));max-width:100%}
.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 26px/48px var(--display);color:var(--ink)}
.paper.receipt .r-word{margin-top:calc(6*var(--u));font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;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-top:12px;font:500 48px/1 var(--mono);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-top:12px;font-size:14px;color:var(--ink2)}
.paper.receipt .r-lines{margin:calc(6*var(--u)) 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:0;font-size:14px}
.paper.receipt .r-lines>*{padding:12px 0;border-top:var(--line);margin:0}
.paper.receipt .r-lines>dt{padding-right:24px;color:var(--ink2)}
.paper.receipt .r-lines>dd{text-align:right;color:var(--ink);font-family:var(--mono);font-size:13px;overflow-wrap:anywhere;line-height:1.6}
.paper.receipt .r-lines>dd.t{font-family:var(--ui);font-size:14px}   /* 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:14px;font:400 20px/1 var(--display);color:var(--ink)}
.paper.receipt .r-lines.account>dd.big{font:500 20px/1 var(--mono)}
.paper.receipt .r-id{margin-top:calc(6*var(--u));font-size:13px;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 < 720px){
  .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;margin-top:0;padding-top:0;border-top:0}
.paper.document .p-who>.party{display:block}
.paper.document .p-who>.party.project{margin-top:calc(4*var(--u))}
.paper.document .p-who>.party.project .p-big{max-width:calc((100% - 11*var(--gutter))/12*9 + 8*var(--gutter))}
.paper.document .p-who .p-lbl{color:var(--ink3);border-bottom:0;padding-bottom:0;line-height:1;margin-bottom:8px}   /* the parties, subdued (Chris, Sep 3): not the invoice's bill-to */
.paper.document .p-who .p-big{font:400 22px/1.25 var(--display);letter-spacing:0;text-transform:none;margin:0;color:var(--ink)}   /* the title h1 as typed (Sep 22) */
.paper.document .p-who .addr{margin-top:12px;font-size:13px;line-height:1.5;color:var(--ink2)}
.paper.document .p-who .addr+.addr{margin-top:0}   /* A PARTY IS A NAME, THEN A PERSON (ruled Sep 22): 12 under the big name, then the lines at line-height with nothing between */
.paper.document .d-blocks{margin-top:calc(6*var(--u))}
.paper.document .blk{margin:0}
.paper.document .blk+.blk{margin-top:calc(3*var(--u))}
.paper.document .blk:has(>h2){border-top:var(--pl);padding-top:calc(4*var(--u))}   /* a headed block opens a section — the rule generalised from Text to every kind (Sep 3 late) */
.paper.document .blk.pricing,.paper.document .blk:is(.pricing,.schedule)+.blk:not(:has(>h2),.sign){margin-top:calc(4*var(--u))}   /* a table sits 32 from what precedes it, and an unheaded continuation 32 under a table — never a section: the :not keeps this rule off the one below, which it would outrank (Sep 17) */
.paper.document .blk+.blk:is(:has(>h2),.sign){margin-top:calc(6*var(--u))}   /* THE SECTION RULE, the only one: a section — a headed block, or the sign block, the stack's last child — always opens at 48 */
.paper.document .blk:first-child:has(>h2){border-top:0;padding-top:0}
.paper.document .blk h2{margin:0 0 calc(2*var(--u));font:400 22px/1.2 var(--display);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(--gutter))/12*9 + 8*var(--gutter))}   /* 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 12px;font:400 15px/24px var(--ui);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 12px;padding-left:22px;font:400 15px/24px var(--ui);color:var(--ink2)}
.paper.document .blk.text li+li{margin-top:4px}
.paper.document .blk.text ol{padding-left:24px}
.paper.document .blk.text li ol,.paper.document .blk.text li ul{margin:6px 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:3px}
.paper.document .blk.text blockquote{margin:0 0 12px;padding-left:16px;border-left:var(--pl);font:400 15px/24px var(--ui);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 cite{display:block;margin-top:8px;font-style:normal;font-size:13px;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)}
.paper.document .blk.image figcaption{margin-top:8px;font:400 12px/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(--gutter))/12)}
.paper.document .p-table+.addons{margin-top:calc(3*var(--u))}
.paper.document .p-table .p-row{display:grid;grid-template-columns:calc(3*var(--c) + 2*var(--gutter)) 1fr calc(2*var(--c) + var(--gutter))}
.paper.document .p-table.nodate .p-row{grid-template-columns:1fr calc(2*var(--c) + var(--gutter))}
.paper.document .p-table .p-row>div{border:var(--pl);border-left:0;padding:12px 14px;font-size:14px;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:9px 14px;font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;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:10px}   /* 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>.d{font-family:var(--mono);font-size:13px;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:13px;color:var(--ink2);margin-top:3px}
.paper.document .p-table .p-row .qr{font:400 12px/1.5 var(--mono);color:var(--ink2);margin-top:3px}
/* 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.pricing .lead{margin:0 0 16px;font:400 15px/24px var(--ui);color:var(--ink2)}
.paper.document .blk.pricing.choice{container-type:inline-size}
.paper.document .pk{display:grid;grid-template-columns:1fr;gap:var(--gutter)}
@container (min-width:576px){.paper.document .pk:not(:has(>label:nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:872px){.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:20px 20px 24px;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:2px solid var(--ink);outline-offset:-4px}
.paper.document .pk .eb{display:flex;align-items:center;justify-content:space-between;font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.paper.document .pk .eb input{margin:0;width:16px;height:16px;accent-color:var(--acting);cursor:pointer}
.paper.document .pk .eb .chosen{color:var(--acting)}
.paper.document .pk h3{margin:12px 0 0;font:400 22px/1.2 var(--display);letter-spacing:0;text-transform:none;color:var(--ink)}   /* the package's name as typed (Sep 22), as the block heading */
.paper.document .pk p{margin:10px 0 0;font:400 14px/1.5 var(--ui);color:var(--ink2)}
.paper.document .pk .ln{margin:16px 0 0;border-top:1px solid var(--rule)}
.paper.document .pk .ln>div{display:grid;grid-template-columns:1fr auto;gap:0 16px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:14px;line-height:1.4;color:var(--ink)}
.paper.document .pk .ln .desc{grid-column:1 / -1;margin-top:2px;font-size:13px;color:var(--ink2)}
.paper.document .pk .ln .qr{display:block;font:400 12px/1.5 var(--mono);color:var(--ink2);margin-top:2px}
.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;padding-top:12px;font-size:13px;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:500 20px/1 var(--mono);color:var(--ink)}
.paper.document .addons{margin-top:calc(3*var(--u))}
.paper.document .addons .head2{padding:0 0 8px;font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.paper.document .addons label{display:flex;align-items:center;gap:12px;min-height:var(--fh);padding:0 14px;border:var(--pl);background:var(--tint);cursor:pointer;font-size:14px;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:16px;height:16px;accent-color:var(--acting)}
.paper.document .addons .desc{color:var(--ink2);font-size:13px}
.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:16px;margin-top:calc(3*var(--u));padding:10px 14px 0;font-size:14px}
.paper.document .blk.pricing .tot2 .k{font-weight:500}
.paper.document .blk.pricing .tot2 .n{font:500 14px/1.4 var(--mono)}
.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 */
/* Schedule: rows of Phase · When, in the table grammar. */
.paper.document .blk.schedule{--c:calc((100% - 11*var(--gutter))/12)}
.paper.document .s-row{display:grid;grid-template-columns:1fr calc(3*var(--c) + 2*var(--gutter))}
.paper.document .s-row>div{border:var(--pl);border-left:0;padding:12px 14px;font-size:14px;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:13px;color:var(--ink2);white-space:nowrap}
.paper.document .s-row.hd>div{background:var(--field);border-color:var(--field);padding:9px 14px;font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;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:calc(4*var(--u))}   /* its 48 before is the section rule's, in the stack above */
.paper.document .blk.sign .lead{margin:0;font:400 15px/24px var(--ui);color:var(--ink2);max-width:calc((100% - 11*var(--gutter))/12*9 + 8*var(--gutter))}
.paper.document .blk.sign .lead+.p-sign{margin-top:calc(3*var(--u))}
.paper.document .p-sign{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.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) + 1px);padding:32px 0 5px 0;text-indent:16px;background:transparent;border:0;border-bottom:var(--line);border-radius:0;outline:0;font:400 48px/48px 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:36px;line-height:36px;padding-top:38px}
.paper.document .slot input.sig.sig-28{font-size:28px;line-height:28px;padding-top:42px}
.paper.document .slot input.sig[readonly]{pointer-events:none}
.paper.document .slot input.sig:focus{background:var(--highlight)}
.paper.document .slot .co{margin-top:10px;font-size:14px;font-weight:500;color:var(--ink)}
.paper.document .slot dl{margin:12px 0 0;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;font-size:13px}
.paper.document .slot dl+dl{margin-top:12px}
.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:12px 0 0;font-size:13px;line-height:1.5;color:var(--late)}
.paper.document .slot .agree{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--ink2);cursor:pointer}
.paper.document .slot .agree input{margin:calc((1lh - 16px) / 2) 0 0;width:16px;height:16px;flex:0 0 16px;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:2px solid var(--ink);outline-offset:4px}
.paper.document .slot .go{display:flex;align-items:center;width:100%;height:var(--fh);margin-top:calc(6*var(--u));padding:0 24px;border:0;background:var(--acting);color:#fff;cursor:pointer;
  font:500 12px/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.paper.document .slot .go:hover{background:var(--ink)}
.paper.document .slot .go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.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(input[name=package]):not(:has(input[name=package]:checked)) .slot .go{opacity:.35;pointer-events:none}   /* a choice unmade cannot be signed */
/* framed: the frame is the letterhead — the paper's logo slot returns in print, and so do the dates */
@media (max-width:855px){
  .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+.slot{margin-top:calc(4*var(--u))}
  .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+.slot{margin-top: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:calc(6*var(--u)) var(--content-edge);box-sizing:border-box}
.certificate h2{margin:0 0 calc(3*var(--u));font:400 22px/1.2 var(--display);letter-spacing:0;text-transform:none;color:var(--ink)}
.certificate dl{margin:0;display:grid;grid-template-columns:136px minmax(0,1fr);column-gap:var(--gutter);row-gap:0}
.certificate dt,.certificate dd{margin:0;padding:10px 0;border-top:1px solid var(--rule);font-size:13px;line-height:1.5}
.certificate dt{color:var(--ink2)}
.certificate dd{color:var(--ink);overflow-wrap:anywhere}
.certificate dd.c{font-family:var(--mono);font-size:12px}
.certificate dd a{color:var(--acting);text-decoration:underline;text-underline-offset:3px}
.certificate .ok{display:block;margin-top:2px;font-size:12px;color:var(--ink2)}
.certificate .c-parties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);margin-top:calc(6*var(--u))}
/* 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-party .sig{height:calc(9*var(--u) + 1px);padding:25px 0 5px 0;text-indent:16px;border-bottom:var(--line);font:400 48px/48px 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-party .sig.sig-36{font-size:36px;line-height:36px;padding-top:37px}
.certificate .c-party .sig.sig-28{font-size:28px;line-height:28px;padding-top:45px}
.certificate .c-party .co{margin:10px 0 12px;font-size:14px;font-weight:500}
.certificate .c-note{margin:calc(6*var(--u)) 0 0;font-size:12px;line-height:1.5;color:var(--ink3);max-width:calc((100% - 11*var(--gutter))/12*9 + 8*var(--gutter))}
@media (max-width:855px){
  .certificate .c-parties{grid-template-columns:1fr}
  .certificate .c-party+.c-party{margin-top:calc(4*var(--u))}
  .certificate dl{grid-template-columns:96px minmax(0,1fr)}
}
@media print{
  .certificate{display:block;break-before:page;page-break-before:always}
  .certificate .c-parties{grid-template-columns:repeat(2,minmax(0,1fr))}   /* the page is narrower than 856 but the two slots fit a letter sheet — one page, symmetric */
  .certificate .c-party+.c-party{margin-top:0}
  .certificate .c-party,.certificate .c-note{break-inside:avoid}
}