/* specimen-document · page-system.css
   The A4 scaffold, proven on the Wrenfield EPC specimen. Structure only: every colour and
   typeface is a token you REPLACE per specimen (see the identity ledger). Copy this file
   into the specimen folder and edit the :root block; do not edit the geometry.  */

:root{
  /* ── specimen 03 · Beckworth · bone stock, ink, and ONE colour ──────
     The sulphur field is the only colour in the document and it means exactly
     one thing: this is a figure we cannot sign. It is a FIELD behind ink,
     never a type colour. Verdicts A and B are carried by ink density alone. */
  --paper:#EFEFEA; --paper-2:#E4E4DC; --paper-3:#D4D5C9;
  --ink:#171A16;   --ink-2:#3B3F38;   --muted:#6B7067; --dim:#9AA096;
  --rule:#CFD1C6;  --rule-2:#B8BBAE;
  --key:#171A16;   --key-t:#E4E4DC;          /* verdict A · full ink */
  --pos:#6B7067;   --pos-t:#E4E4DC;          /* verdict B · half tone */
  --neg:#171A16;   --neg-t:#E3D257;          /* verdict C · the sulphur field */
  --flag:#E3D257;  --flag-2:#EFE49C;
  --display:'Schibsted Grotesk',-apple-system,'Segoe UI',Helvetica,sans-serif;
  --reading:'Literata',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* ── do not change: the page is a fixed box ─────────────────────── */
  --pw:210mm; --ph:297mm; --mx:18mm; --mt:15mm; --mb:12mm;
}
*{box-sizing:border-box}
html{background:#23251F}
body{margin:0;font-family:var(--display);color:var(--ink);-webkit-font-smoothing:antialiased;counter-reset:pg}

/* viewer chrome — reads as a PDF viewer, hidden on print */
.chrome{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;height:44px;
  padding:0 16px;background:rgba(23,26,22,.95);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(239,239,234,.14);font-size:11px;color:#E4E4DC}
.chrome .sp{flex:1}
/* an <svg> with no width/height in a flex bar inflates to page scale: the generic
   svg{max-width:100%} below caps its WIDTH against the viewport and never its height,
   so the file icon renders ~740x910 and lies across the document. Invisible in any PDF
   proof, because @media print hides .chrome. gate_layout measures it. */
.chrome svg{width:13px;height:16px;flex:none}
.chrome .meta{font-family:var(--mono);font-size:10px;color:#9AA096}
.chrome button{font:inherit;font-size:10.5px;font-family:var(--mono);background:transparent;
  color:#E4E4DC;border:1px solid rgba(228,228,220,.30);border-radius:3px;padding:4px 10px;cursor:pointer}
.doc{padding:26px 0 60px;display:flex;flex-direction:column;align-items:center;gap:22px}

/* the page. height is FIXED so that overflow is detectable, not absorbed. */
.pg{position:relative;width:var(--pw);height:var(--ph);flex:none;background:var(--paper);
  color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.35),0 14px 40px rgba(0,0,0,.34);
  padding:var(--mt) var(--mx) var(--mb);display:flex;flex-direction:column;
  counter-increment:pg;overflow:hidden}
.pg.dark{background:var(--ink);color:var(--paper-2)}
.body{flex:1;min-height:0;display:flex;flex-direction:column}
.push{margin-top:auto}          /* ⚠ an inline `margin` overrides this. Use `margin:auto X 0`. */

.rh{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);
  font-size:7.4pt;color:var(--dim);padding-bottom:2.6mm;border-bottom:.6px solid var(--rule);
  margin-bottom:7mm;flex:none}
.rf{margin-top:auto;padding-top:3mm;border-top:.6px solid var(--rule);display:flex;
  justify-content:space-between;font-family:var(--mono);font-size:7pt;color:var(--dim);flex:none}
.rf .n::after{content:counter(pg)}

/* full-bleed image band. `fill` absorbs the page's spare height, which is what stops a
   page bottoming out. Cap it with max-height, and see the crop law in SKILL.md. */
.band{margin:0 calc(-1 * var(--mx));overflow:hidden;background:var(--paper-2)}
.band img{display:block;width:100%;height:100%;object-fit:cover}
.band.fill{flex:1 1 auto;min-height:22mm;margin:8mm calc(-1 * var(--mx))}
.pg.dark .band{background:#20231E}

h1{font-size:25pt;line-height:1.06;letter-spacing:-.022em;font-weight:600;margin:0 0 4mm;max-width:88%}
h2{font-size:15.5pt;line-height:1.14;font-weight:600;margin:0 0 3mm}
h3{font-size:10pt;line-height:1.2;font-weight:600;margin:0 0 1.6mm}
h4{font-family:var(--mono);font-size:7.6pt;font-weight:500;letter-spacing:.05em;color:var(--muted);
  margin:0 0 2mm;text-transform:lowercase}
p{font-family:var(--reading);font-size:9.6pt;line-height:1.52;margin:0 0 3.2mm;color:var(--ink-2)}
.lede{font-family:var(--reading);font-size:12.4pt;line-height:1.42;color:var(--ink);margin-bottom:5mm}
.sm{font-size:8.4pt;line-height:1.46}
.note{font-family:var(--mono);font-size:6.9pt;line-height:1.5;color:var(--dim)}

table{width:100%;border-collapse:collapse;font-size:8.3pt}
th{font-family:var(--mono);font-size:6.9pt;font-weight:500;color:var(--muted);text-align:left;
  padding:0 0 2mm;border-bottom:.8px solid var(--ink);vertical-align:bottom}
td{padding:2.3mm 0;border-bottom:.6px solid var(--rule);vertical-align:top;line-height:1.35;color:var(--ink-2)}
th.n,td.n{text-align:right;font-family:var(--mono);font-size:7.8pt;white-space:nowrap}
/* a right-aligned data column beside anything collides without this. the pair rule
   below is the one that matters: THREE adjacent .n columns run into each other as
   "6,496,0008,120,0009,744,000", and no numeric gate can see it. */
td:not(.n)+td.n,td.n+td:not(.n),th:not(.n)+th.n,th.n+th:not(.n){padding-left:4mm}
td.n+td.n,th.n+th.n{padding-left:5mm}
table.tight td{padding:1.5mm 0;line-height:1.28}
tr.tot td{border-bottom:none;border-top:1.2px solid var(--ink);font-weight:600;color:var(--ink);padding-top:2.6mm}

.c2{display:grid;grid-template-columns:1fr 1fr;gap:9mm}
.c2b{display:grid;grid-template-columns:1.35fr 1fr;gap:9mm}
.c3{display:grid;grid-template-columns:repeat(3,1fr);gap:7mm}
.c4{display:grid;grid-template-columns:repeat(4,1fr);gap:5mm}
.stat{border-top:1.4px solid var(--ink);padding-top:2.6mm}
.stat .v{font-size:20pt;font-weight:600;letter-spacing:-.03em;line-height:1;display:block}
.stat .k{font-family:var(--mono);font-size:6.9pt;color:var(--muted);line-height:1.35;display:block;margin-top:1.8mm}
.box{border:.7px solid var(--rule-2);background:#fff;padding:4.5mm 5mm}
.box.tint{background:var(--paper-2);border-color:var(--rule)}
svg{display:block;max-width:100%}

@page{size:A4;margin:0}
@media print{
  html{background:#fff}
  .chrome{display:none}
  .doc{padding:0;gap:0}
  .pg{box-shadow:none;break-after:page;page-break-after:always}
  .pg:last-child{break-after:auto;page-break-after:auto}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}



/* ══ specimen 03 components ═══════════════════════════════════════════════
   Three of these carry the whole device. The verdict mark is LITERAL: a full
   square is a figure we can sign, a half-filled square is one that needs work,
   a sulphur square is one we cannot sign at all. Cover the caption and the
   mark still says which of the three it is. */

.vm{display:inline-block;width:3.2mm;height:3.2mm;border:.9px solid var(--ink);
    vertical-align:-.35mm;flex:none}
.vm.a{background:var(--ink)}
.vm.b{background:linear-gradient(to top,var(--ink) 0,var(--ink) 50%,transparent 50%)}
.vm.c{background:var(--flag)}
.pg.dark .vm{border-color:var(--paper-2)}
.pg.dark .vm.a{background:var(--paper-2)}
.pg.dark .vm.b{background:linear-gradient(to top,var(--paper-2) 0,var(--paper-2) 50%,transparent 50%)}
.vm.lg{width:5.2mm;height:5.2mm;vertical-align:-.9mm}

/* the one colour, as a field behind ink. never as type. */
.fl{background:var(--flag);box-shadow:0 0 0 .8mm var(--flag);
    -webkit-box-decoration-break:clone;box-decoration-break:clone}
.fl-b{background:var(--flag);padding:1.6mm 2.4mm;display:inline-block;color:var(--ink)}

/* the recurring exhibit plate: one size, generated square so nothing is cropped */
.plate{width:62mm;height:62mm;flex:none;overflow:hidden;background:var(--paper-2)}
.plate.wide{width:100%;height:auto;aspect-ratio:1/1}
.plate img{width:100%;height:100%;object-fit:cover;display:block}
.withplate{display:grid;grid-template-columns:1fr 62mm;gap:9mm;align-items:start}

/* a page that is one photograph */
.pg.full{padding:0}
.pg.full>img{width:100%;height:100%;object-fit:cover;display:block}

/* the divider's ledger strip: a working index, not a title card */
.led{display:grid;grid-template-columns:7mm 1fr 22mm 16mm;gap:0 4mm;align-items:baseline;
     font-size:8.6pt;border-top:1.2px solid var(--ink)}
.led>*{padding:2.1mm 0;border-bottom:.6px solid var(--rule)}
.led .cd{font-family:var(--mono);font-size:7.4pt;color:var(--muted)}
.led .tn{font-family:var(--mono);font-size:7.8pt;text-align:right;white-space:nowrap}
.led .pp{font-family:var(--mono);font-size:7.4pt;text-align:right;color:var(--muted)}

/* tonnage bars. the whole argument is one bar being 90.6% of the width. */
.bar{height:5.4mm;display:flex;background:var(--paper-3);overflow:hidden}
.bar i{display:block;height:100%}
.bar .a{background:var(--ink)}
.bar .b{background:var(--muted)}
.bar .c{background:var(--flag)}
.bar.slim{height:2.6mm}

.kv{display:flex;justify-content:space-between;gap:4mm;font-family:var(--mono);font-size:7.4pt;
    padding:1.7mm 0;border-bottom:.6px solid var(--rule);color:var(--muted)}
.kv b{font-weight:500;color:var(--ink);font-size:8pt}

.rule-t{border-top:1.2px solid var(--ink);padding-top:3mm}
.q{font-family:var(--reading);font-size:11.4pt;line-height:1.4;color:var(--ink)}

.led.tt>*{padding:1.1mm 0}
.plate.d{width:100%;height:auto;aspect-ratio:3/2}
.plate.d img{aspect-ratio:3/2}

/* ==== ENZWA SPECIMEN · PHONE READING VIEW · start ==========================
   An A4 sheet scaled to fit a phone is 6pt type, legible only by pinching. The
   zoom that did that also overflowed: 210mm at .62 is 492px in a 390px window,
   so the left 51px sat off-screen and every line was clipped mid-word.

   Below 760px the sheet reflows: full width, height driven by its content, print
   furniture hidden (a phone has no pages to number, and a running foot pinned by
   margin-top:auto lands on top of the body once the height is free), and the
   print grids collapsed to one column.

   ⛔ The A4 is untouched. @media print still emits the real document and the
   Print / save as PDF button still produces it: this is a reading view, not a
   redesign. Regenerate with _admin/apply_mobile_view.py, never by hand. */
@media screen and (max-width:760px){
  .doc{zoom:1;padding:0;gap:0}
  /* ⚠ Do NOT reach for `zoom` here. Scaling the page and compensating the width is
     the elegant-looking fix and it fails twice: it reintroduced 25px of sideways
     scroll and three text collisions, and `getComputedStyle` reports the PRE-zoom
     font size, so the gate below goes blind to the very thing being fixed. The
     sizes are raised explicitly instead, from what the gate measured. */
  .pg{width:100%;height:auto;min-height:0;overflow:visible;
      padding:8mm 5.5mm 9mm;box-shadow:none;border-bottom:1px solid var(--rule)}
  .pg:last-child{border-bottom:0}
  .rh,.rf{display:none}
  .push{margin-top:0}
  .body{display:block}
  .c2,.c2b,.c3,.c4,.c2c,.withplate,.rule-t{grid-template-columns:1fr;gap:6mm}

  /* Half the multi-column layouts in these documents are inline styles on the element,
     which no class selector can reach and no stylesheet rule can outrank. An attribute
     selector can do both. Beckworth page 11 was a two-column inline grid holding a
     nowrap figure ("+249,400 tCO2e (+2.9%)") in a 69px slot: 135px of content in a box
     that could not grow, pushing the whole document 46px sideways. */
  .pg [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .pg [style*="display:flex"],.pg [style*="display: flex"]{flex-wrap:wrap}

  /* ⚠ A grid or flex child defaults to min-width:auto, which means it can never be
     narrower than its own min-content. One money figure with white-space:nowrap
     therefore sets a floor under the whole column, and the page goes wider than the
     phone. This one line is what stops that, and it has to come before the grids. */
  .pg *{min-width:0}
  /* A single long word in a 25pt cover title is wider than a phone. On paper the
     measure was chosen so it never happened; at 348px it happens constantly. */
  .pg{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
  h1,h2,.stat .v{overflow-wrap:break-word}

  /* The viewer bar carries four things across a phone-width strip and wraps to three
     lines. The two metadata spans go: the page count and the date are both printed on
     the document's own cover, and the filename and the print button are the only parts
     that do anything. */
  .chrome{height:38px;padding:0 10px;gap:8px;font-size:10px}
  .chrome .meta{display:none}
  .chrome b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .chrome button{flex:none}

  /* ⚠ !important is load-bearing here, not laziness. The page system tells authors
     to write `margin:auto -18mm 0` on a band so the inline margin does not defeat
     .push, and an INLINE margin outranks any stylesheet rule. Without this the
     bands stay 68px proud of each edge and the document scrolls sideways. */
  .band{margin-left:-5.5mm!important;margin-right:-5.5mm!important;max-height:60vw}
  .band.fill{flex:none;margin-top:6mm!important;margin-bottom:6mm!important}
  .band img{max-height:60vw}

  .c2,.c2b,.c3,.c4,.c2c,.withplate,.rule-t{grid-template-columns:1fr;gap:6mm}

  /* Half the multi-column layouts in these documents are inline styles on the element,
     which no class selector can reach and no stylesheet rule can outrank. An attribute
     selector can do both. Beckworth page 11 was a two-column inline grid holding a
     nowrap figure ("+249,400 tCO2e (+2.9%)") in a 69px slot: 135px of content in a box
     that could not grow, pushing the whole document 46px sideways. */
  .pg [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .pg [style*="display:flex"],.pg [style*="display: flex"]{flex-wrap:wrap}

  /* ⚠ A grid or flex child defaults to min-width:auto, which means it can never be
     narrower than its own min-content. One money figure with white-space:nowrap
     therefore sets a floor under the whole column, and the page goes wider than the
     phone. This one line is what stops that, and it has to come before the grids. */
  .pg *{min-width:0}
  /* A single long word in a 25pt cover title is wider than a phone. On paper the
     measure was chosen so it never happened; at 348px it happens constantly. */
  .pg{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
  h1,h2,.stat .v{overflow-wrap:break-word}

  /* The viewer bar carries four things across a phone-width strip and wraps to three
     lines. The two metadata spans go: the page count and the date are both printed on
     the document's own cover, and the filename and the print button are the only parts
     that do anything. */
  .chrome{height:38px;padding:0 10px;gap:8px;font-size:10px}
  .chrome .meta{display:none}
  .chrome b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .chrome button{flex:none}

  /* ⚠ !important is load-bearing here, not laziness. The page system tells authors
     to write `margin:auto -18mm 0` on a band so the inline margin does not defeat
     .push, and an INLINE margin outranks any stylesheet rule. Without this the
     bands stay 68px proud of each edge and the document scrolls sideways. */
  .band{margin-left:-5.5mm!important;margin-right:-5.5mm!important;max-height:60vw}
  .band.fill{flex:none;margin-top:6mm!important;margin-bottom:6mm!important}
  .band img{max-height:60vw}

  /* ── diagrams ─────────────────────────────────────────────────────────────
     A chart is drawn on a ~620-unit canvas and rendered at whatever the column is
     wide. On A4 that column is 658px, so a label sits at about 9pt and reads. In a
     348px phone column the same label is 6.4px. Nothing about the SVG is wrong: it
     is scaling exactly as asked.

     So the diagram gets its own lane at the width its labels were drawn for, and
     the reader pans it, rather than the labels being shrunk to illegible. 600px
     brings the smallest of them back to 11px. Only diagrams carrying text: a
     decorative mark has nothing to read and must not be blown up. */
  img,svg{max-width:100%;height:auto}

  /* Diagrams get their own lane, inserted into the markup by _admin/wrap_diagrams.py.
     1000px lifts the labels from 4.3px to 12px on Ravensmoor and 4.2px to 10px on
     Wrenfield, at the cost of a 2.5x pan, which is how a dense chart is read on a
     phone anyway. The page itself
     stays exactly the width of the screen. */
  .figlane{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
           margin:4mm -5.5mm;padding:0 5.5mm}
  .figlane>svg{min-width:1000px;width:1000px;height:auto;max-width:none}

  /* A financial table is the one thing that cannot reflow: six columns of figures
     are six columns of figures. It scrolls in its own lane instead of pushing the
     whole document sideways. */
  table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
        margin-bottom:5mm}
  table>tbody,table>thead{display:table;width:100%;min-width:340px}
  /* A figure that was sized by `flex:1 1 auto` on the A4 page has no flex parent once
     .body becomes a block, so it needs its own separation or it butts into the
     scrolling table above it. WeWork page 15 had a chart drawn over a table cell. */
  .pg figure,.pg .fill{flex:none;margin-top:5mm;margin-bottom:5mm;clear:both}

  /* type set for paper at arm's length is too small on a phone */
  h1{font-size:22pt}
  h2{font-size:14.5pt}
  h3{font-size:11pt}
  h4{font-size:8.6pt}
  .lede{font-size:13pt;line-height:1.46}
  p{font-size:11.4pt;line-height:1.62}
  .sm{font-size:10pt}
  .note{font-size:8.4pt}
  table{font-size:9.6pt}
  th{font-size:8.2pt}
  th.n,td.n{font-size:9.2pt}
  .stat .v{font-size:18pt}
  .stat .k{font-size:9pt}

}
/* ==== ENZWA SPECIMEN · PHONE READING VIEW · end ============================ */

/* ==== ENZWA SPECIMEN · PHONE TYPE FLOOR · start ============================
   Every size these documents carry below 11px, raised. 11px is where a phone stops
   being readable at arm's length. Sizes stay in pt because the documents are
   authored in pt (1pt = 1.333px at 96dpi, so 8.8pt = 11.7px).

   The list is not invented: it is the union of every rule under 8.25pt found by
   parsing all five stylesheets, plus every selector the phone gate measured under
   11px in the rendered page. Some are inline declarations on the element, which no
   class selector reaches and no ordinary rule outranks: that is what the attribute
   selectors and the !important are for.

   ⛔ Subscripts are deliberately excluded. A subscript is meant to be smaller, and
   inflating CO₂ to 11px would be worse typography, not better.

   Regenerate with _admin/apply_mobile_view.py, never by hand. */
@media screen and (max-width:760px){
  .pg [style*="font-size:6"],.pg [style*="font-size: 6"],
  .pg [style*="font-size:7"],.pg [style*="font-size: 7"],
  .pg [style*="font-size:8.0"],.pg [style*="font-size:8.1"],
  .pg [style*="font-size:8.2"],.pg [style*="font-size:8pt"]{font-size:8.8pt!important}

  .pg h4,.pg .note,.pg .tag,.pg .crit,.pg .eyebrow,.pg .fig,.pg .kv,.pg .kv b,
  .pg .stat .k,.pg .led .cd,.pg .led .pp,.pg .led .tn,.pg ol.steps li::before,
  .pg .c,.pg .l,.pg .v,.pg .k,.pg .mono,.pg .r,.pg .m,.pg .lab,.pg .sep,.pg .rl,
  .pg .pp,.pg .cd,.pg .tn,.pg .s,.pg .lbl,.pg .cap,
  .pg .legend,.pg .wall div,.pg .wall b,.pg .colo,.pg .colo b{font-size:8.8pt!important}

  .pg th,.pg td,.pg th.n,.pg td.n,.pg dt,.pg dd{font-size:9.2pt!important}
  .pg b,.pg strong,.pg em,.pg i,.pg s,.pg u{font-size:inherit}
  /* ⚠ NOT a blanket `p` rule. `.pg p` outranks `.sm`, so a blanket rule promoted
     every small-print paragraph to body size, and on Ravensmoor page 34 three
     figures in one box grew until they overlapped each other. Small print stays
     small print; it just stops being under the floor. */
  .pg li{font-size:11.4pt}
  .pg p.sm,.pg .sm{font-size:9.4pt}

  /* The two presentations size their labels with an inline clamp() whose middle
     term is in vw: at 390px the vw term collapses and the clamp settles on its
     minimum, which is why a .55rem label renders at 8.8px on a phone and nowhere
     else. Only clamps that START below .7rem are raised, so display sizes that
     also use clamp() are untouched. */
  .pg [style*="clamp(.5"],.pg [style*="clamp(0.5"],
  .pg [style*="clamp(.6"],.pg [style*="clamp(0.6"]{font-size:.72rem!important}
}
/* ==== ENZWA SPECIMEN · PHONE TYPE FLOOR · end ============================== */
/* ==== ENZWA SPECIMEN · PHONE GRID COLLAPSE · start ========================
   Generated from this stylesheet by _admin/apply_mobile_view.py. Every selector
   below lays out more than one column on paper; none of them fits two columns
   in a 348px phone page. ⛔ Do not hand-edit: re-run the applier. */
@media screen and (max-width:760px){
  .pg .c2,
  .pg .c2b,
  .pg .c3,
  .pg .c4,
  .pg .led,
  .pg .withplate{grid-template-columns:1fr!important}
}
/* ==== ENZWA SPECIMEN · PHONE GRID COLLAPSE · end ========================== */