/* page.css — one continuous drawing: a single canvas inside one frame, scrolled vertically.
   Shared by every page; a page is markup only. No script. Every size a page gives it (field places,
   drawing widths, numeral sizes) comes from inline_svg.py's rules, never from measuring a rendered page.

   Widths. The canvas is drawn at one of three fixed widths, its formats, chosen by the window's width alone:
   1400 from a 1440px window, 1160 from 1200, 900 from 940 (about two-thirds of a 13-inch laptop's screen).
   Each drawing carries its width and numeral size for every format (--dw-c1400, --n-c1400 ...), so numerals
   letter at 17px on every canvas. Below 940 the page takes the roll, which follows the window up to 540px;
   drawings carry a numeral size for each roll step (--n-r320 ... --n-r540), worked out for the narrowest
   window the step serves, and a sideways copy for the steps that need one. Orientation never decides. */

/* ---------- fonts: the publishers' own WOFF2 files, exactly as distributed, from eidographer/press/fonts/ ----------
   Nothing in the project converts a font. IBM Plex Sans (IBM's whole variable files, upright and italic) is the text
   face; Overpass (Red Hat, after Highway Gothic, regular, italic and bold) letters labels, squares, titles and the
   title block, and Overpass Mono sets the MRZ's fixed pitch. The digits-only face takes Plex's digits, whose width
   the numerals' collision rule is measured on; unicode-range only tells the browser which characters to use.
   URLs are relative to the publish folder, where the build puts the files in fonts/. */
@font-face { font-family: "Lettering Digits"; src: url("fonts/IBMPlexSansVar-Roman.woff2") format("woff2"); unicode-range: U+0030-0039; font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("fonts/overpass-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("fonts/overpass-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("fonts/overpass-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("fonts/overpass-bold-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Overpass Mono"; src: url("fonts/overpass-mono-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("fonts/IBMPlexSansVar-Roman.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("fonts/IBMPlexSansVar-Italic.woff2") format("woff2"); font-weight: 100 700; font-style: italic; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  color-scheme: light dark;
  --ink: #1b1c1e;
  --paper: #f5f2ea;
  --desk: #c9c6be;
  --shadow: rgba(0,0,0,.28);
  --font-lettering: "Lettering Digits", "Overpass", sans-serif;
  --font-title: "Overpass", sans-serif;
  --font-mono: "Overpass Mono", monospace;
  --font-text: "Plex Sans", serif;

  --rule: 1px;          /* every rule, zone tick and frame half is the ink between two 1px-apart cells */
  --hair: .5px;         /* rules inside a field: key rows, table rows */
  --trim-line: .75px;   /* outer line round the zone strips */
  --strip: 26px;        /* zone strips */
  --trim: 18px;         /* blank paper outside the zone strips */
  --pad: 30px;          /* inside every field */
  --canvas: 1400px;     /* the canvas format; see the media queries at the foot */

  /* one set of pens for every drawing, in screen px, whatever the drawing's scale */
  --pen-effect: non-scaling-stroke;
  --pen-sil: 2.2; --pen-sec: 1.3; --pen-fine: .8; --pen-hatch: 1; --pen-env: 1; --pen-axis: .8;
  --dash-env: 7 5; --dash-axis: 14 4 2 4;
}
/* dark: the same drawing inverted, near-white line on near-black paper, neutral grey with no tint */
@media (prefers-color-scheme: dark) {
  :root { --ink: #e4e4e4; --paper: #161616; --desk: #2a2a2a; --shadow: rgba(0,0,0,.6); }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* no face is ever faked: italic and bold come only from real files, and where a face has none it is set upright, regular */
html { font-synthesis: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: 32px 20px 48px;          /* the canvas formats need their width plus these 40px */
  /* a format is chosen by the window's width, which in some engines (Chromium) includes a classic scrollbar: the 20px
     side trim gives way evenly to the scrollbar, down to none, so the canvas stays centred and never overflows; a
     padding's percentage is of the width the scrollbar leaves */
  padding-inline: clamp(0px, (100% - var(--canvas)) / 2, 20px);
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* ---------- the canvas: paper, trim, one frame ---------- */
.canvas {
  width: var(--canvas);
  margin: 0 auto;
  padding: var(--trim);
  background: var(--paper);
  box-shadow: 0 1px 2px var(--shadow), 0 12px 40px -8px var(--shadow);
}
.frame { position: relative; border: var(--trim-line) solid var(--ink); }
/* the whole drawing is a column of rows (rulers and bands) with 1px of ink between them */
.rows { display: flex; flex-direction: column; gap: var(--rule); background: var(--ink); }

/* no centring marks: they belong to even grids, and on nine columns the centre column is the axis */

/* ---------- rulers and bands share one column grid: a strip, the nine zone columns, a strip ---------- */
.band, .ruler .nums {
  display: grid;
  grid-template-columns: var(--strip) repeat(9, minmax(0, 1fr)) var(--strip);
  gap: var(--rule);
  background: var(--ink);
}
/* a ruler: a corner, the nine numbers in their own grid (nine tracks and eight gaps are exactly the band's
   nine columns), a corner */
.ruler { display: grid; grid-template-columns: var(--strip) minmax(0, 1fr) var(--strip); gap: var(--rule); background: var(--ink); }
.ruler .nums { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.ruler > i, .ruler .nums > span {
  background: var(--paper);
  height: var(--strip);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-lettering); font-size: 12px; font-style: normal; line-height: 1; letter-spacing: .04em;
}
/* the frame line is two rules thick: the numbers' own 1px edge beside the 1px of ink between rows */
.ruler.top .nums { border-bottom: var(--rule) solid var(--ink); }
.ruler.bottom .nums { border-top: var(--rule) solid var(--ink); }

/* a band: one or more zone rows. Each row's letter stands centred in both strips, the way each number
   stands centred in its column; the page gives each cell its row and column (--gr, --gc) and each field
   its rows and columns spanned (--gh, --gs). Rows share the band's height as the grid sizes them; the
   page gives the band its row sizes (--rows): in a drawing's band the last row, the key's, is the one
   that takes any height the drawing needs beyond its stack. */
.band { grid-template-rows: var(--rows, auto); }
.zl, .zr {
  grid-row: var(--gr);
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-lettering); font-size: 12px; line-height: 1; letter-spacing: .04em;
  scroll-margin-top: 24px;
}
.zl { grid-column: 1; border-right: var(--rule) solid var(--ink); }
.zr { grid-column: 11; border-left: var(--rule) solid var(--ink); }
.zl:target, .zl:target + .zr { background: var(--ink); color: var(--paper); }

/* a --- in the source: a section line, a double rule across the whole canvas, strips included */
.band.section { padding-top: 2px; background: linear-gradient(to bottom, var(--paper) 0 1px, var(--ink) 1px 2px, var(--ink) 2px); }

.band > .field, .band > .pair {
  grid-row: var(--gr) / span var(--gh, 1);
  grid-column: calc(var(--gc) + 1) / span var(--gs);
}
.field { background: var(--paper); padding: 28px var(--pad) var(--pad); min-width: 0; margin: 0; scroll-margin-top: 24px; }

/* ---------- a field shorter than its row: honest empty paper, placed by the field's kind ----------
   text and the index start at the top and leave the paper below them; a key rests on the foot of its field, like
   a parts list on the title block; a drawing and a stamp stand in the middle; the headline stands on the foot. Nothing is
   stretched to fill. */
.f-key, .f-title { display: flex; flex-direction: column; justify-content: flex-end; }
.f-drawing { display: flex; flex-direction: column; }
/* a stamp: the one word of a field holding nothing else, in the middle of what its field leaves, in Overpass capitals.
   Its size follows from its length (--chars, counted by the tools) and the field's own width, so the word always fits
   on one line: the field is a size container and CSS does the division. .8 em is an Overpass capital's advance in a
   real word with the .03 em tracking (0.61 to 0.76 measured, 0.87 for W), capped at 84px on the canvas, 40px on the roll */
.f-stamp { display: flex; flex-direction: column; container-type: inline-size; }
.field.f-stamp > .value { margin: auto 0; padding-bottom: 6px; font-family: var(--font-title); font-size: min(84px, calc(100cqw / (var(--chars, 6) * .8))); line-height: 1.02; letter-spacing: .03em; text-transform: uppercase; overflow-wrap: normal; max-width: none; }

/* ---------- reached: a field's label turns to ink ---------- */
.field:target > .label, .view-box:target .view-title { background: var(--ink); color: var(--paper); box-shadow: 0 0 0 5px var(--ink); }
/* a reached view title drops its underline, so that the highlight is even on all four sides */
.view-box:target .view-title { border-bottom-color: transparent; padding-bottom: 0; margin-bottom: 7px; }

/* ---------- field typography ---------- */
.label {
  margin: 0 0 18px;
  font-family: var(--font-lettering);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  width: fit-content;
}
.f-key .label { margin-top: 0; }
.field p { margin: 0 0 .8em; max-width: 36em; }
.field p:last-child { margin-bottom: 0; }
/* a sub-heading (### to ######, one style): the text face in its semibold at the text's own size, so it reads as
   part of the field's text and stays below the field's label, which is lettering in spaced capitals */
.field .sub { margin: 1.3em 0 .35em; max-width: 36em; font-family: var(--font-text); font-size: 1em; font-weight: 600; line-height: 1.35; letter-spacing: 0; break-after: avoid; }
.flow > .sub:first-child { margin-top: 0; }
.f-text.opening .sub { font-size: 21px; }

/* title: the page's name, first thing on the canvas, set on the foot of its field */
.f-title { padding: 40px 40px 36px; }
.f-title h1 {
  margin: 0;
  font-family: var(--font-title); font-weight: 400;
  font-size: var(--h1, 76px); line-height: 1.02; letter-spacing: .02em;
  text-transform: uppercase;
}
.f-title .line { margin: 22px 0 0; font-family: var(--font-lettering); font-size: 24px; line-height: 1.3; letter-spacing: .03em; max-width: none; }

/* index: every field by zone, each a link to it */
/* index: a register, read like a drawing register. Two ruled lists, fields and drawings, each row a zone and
   a title in reading order; a double rule where the canvas has a section line. */
.f-index ol { margin: 0; padding: 0; list-style: none; }
.reg { display: grid; grid-template-columns: 2fr 1fr; column-gap: 56px; align-items: start; }
.f-index .reg-h { display: grid; grid-template-columns: var(--reg-cols); margin: 0; padding-bottom: 7px; max-width: none; border-bottom: var(--rule) solid var(--ink);
  font-family: var(--font-lettering); font-size: 10px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; }
.reg-fields, .reg-views { --zc: 66px; --cg: 40px; }   /* wide enough for the header Square */
.reg-fields { --reg-cols: var(--zc) 1fr; }
.reg-views { --reg-cols: var(--zc) 1fr; }
.reg li { break-inside: avoid; border-bottom: var(--hair) solid var(--ink); }
.reg li.sec { border-top: var(--hair) solid var(--ink); margin-top: 2px; }
.reg a { display: grid; grid-template-columns: var(--reg-cols); align-items: baseline; padding: 6px 0 5px; text-decoration: none; font-size: 15px; line-height: 1.3; }
.reg a:hover .t, .reg a:focus-visible .t { text-decoration: underline; }
.f-index .z { font-family: var(--font-lettering); font-size: 14px; letter-spacing: .03em; white-space: nowrap; }
/* across the whole width the fields run in two columns; in a narrower field the two lists stack, one column each */
.reg-fields ol { columns: 2; }
.f-index:not(.s9) .reg { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
.f-index:not(.s9) .reg-fields ol { columns: 1; }
.f-index:not(.s9) .reg-fields .reg-h { grid-template-columns: var(--reg-cols); }
.f-index:not(.s9) .reg-fields .reg-h span:nth-child(n+3) { display: none; }
/* the fields run in two columns under one header: its third cell starts where the second column does */
.f-index .reg-fields .reg-h { grid-template-columns: var(--zc) 1fr calc(var(--zc) + var(--cg)) 1fr; }
.reg-fields .reg-h span:nth-child(3) { padding-left: var(--cg); }
.reg-fields ol { column-gap: var(--cg); }

/* text: its parts in source order, paragraphs, lists and tables, with one paragraph's space between them; a long
   text runs in two columns, in passages short enough to read without scrolling back up, split only between parts;
   any text or list field six columns wide or more runs in two columns too */
.flow > :is(ul, ol, table):not(:last-child) { margin-bottom: .8em; }
/* the opening, the first unlabelled field of the cover group, is the page's lede: a step larger than body text */
.f-text.opening p { font-size: 21px; line-height: 1.48; }
/* a text across the whole width, or six columns wide or more (cols2, from the plan), runs in two columns */
.f-text.s9 .flow, .f-text.cols2 .flow { columns: 2; column-gap: 60px; }
.f-text.s9 .flow p, .f-text.cols2 .flow p { max-width: none; }
.f-text .flow + .flow { margin-top: 1.6em; }

/* lists: dashes for bullets; numbered notes numbered plainly, as a draftsman numbers general notes */
ul.dash, ol.steps, ul.key { margin: 0; padding: 0; list-style: none; }
ul.dash li { position: relative; padding-left: 26px; margin-bottom: .55em; max-width: 30em; break-inside: avoid; }
ul.dash li::before { content: ""; position: absolute; left: 0; top: .78em; width: 12px; height: var(--rule); background: var(--ink); }
ol.steps { counter-reset: step; }
ol.steps li { counter-increment: step; position: relative; padding-left: 2.2em; margin-bottom: .55em; break-inside: avoid; max-width: 40em; }
ol.steps li::before { content: counter(step) "."; position: absolute; left: 0; top: 0; font-family: var(--font-lettering); letter-spacing: .02em; }
ul.dash li:last-child, ol.steps li:last-child { margin-bottom: 0; }

/* key: reference numerals and their parts, ruled like a parts list */
ul.key li { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding: 7px 0 6px; border-top: var(--hair) solid var(--ink); }
ul.key li:last-child { border-bottom: var(--hair) solid var(--ink); }
ul.key .n { font-family: var(--font-lettering); font-size: 18px; letter-spacing: .02em; }
ul.key .p { font-size: 17px; line-height: 1.35; }
/* a key across the whole width: its lines cut into columns by the page (two or three, from the count), each its own
   ruled list, read down then across */
.key-cols { display: grid; grid-template-columns: repeat(var(--key-cols), minmax(0, 1fr)); column-gap: 56px; align-items: start; }

/* drawing: its title at the top in words; the drawing at the width its rule gives it (--dw), in the middle.
   The page gives each drawing its numeral size in drawing units for the canvas and the roll
   (--n-canvas, --n-roll), worked out from its viewBox and its width, so numerals letter at one size. */
.view-title {
  margin: 0;
  align-self: flex-start;
  font-family: var(--font-lettering);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .02em;
  padding-bottom: 6px;
  border-bottom: var(--rule) solid var(--ink);
}
.view { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding-top: 28px; }
.view svg { display: block; width: var(--dw-c1400); max-width: 100%; height: auto; --num-size: var(--n-c1400); }
.view svg.turned { display: none; }
/* a numeral lettered larger than its drawing file letters it (--num-kit) grows away from the line it labels: the
   page tools give it --nx and --ny, its shift for each unit it grows, so under a brace its top stays put, beside a
   leader the side the leader touches, its middle on the leader's start. Numerals without them grow from their
   baseline. The shift is in the drawing's own units, before the numeral's own transform, so it turns with the art. */
.view svg .num[style] {
  translate: calc((var(--num-size, 30px) - var(--num-kit, 30px)) * var(--nx, 0)) calc((var(--num-size, 30px) - var(--num-kit, 30px)) * var(--ny, 0));
}

/* detail circles: a separate system from part numerals. A circle's label, and its key line, show the square of the
   view that enlarges it (linked by file name), as a link to that view. The dashed circle is the detail circle's own
   line, the only sign of the system.
   Both squares, in the drawing and in the key, are plain links, underlined as the page's text links are, with nothing
   on hover; keyboard focus keeps the browser's own outline. */
.view a { cursor: pointer; }
.view a .num { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
/* in the key a detail circle's line gives the square of the view it points to, lettered like a numeral */
ul.key li.dm a.n { justify-self: start; }

/* table: header in lettering, hairline rows, natural height */
.field table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.4; }
.field th {
  text-align: left; vertical-align: bottom; white-space: nowrap;
  font-family: var(--font-lettering); font-weight: 400; font-size: 12px; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase;
  padding: 0 20px 10px 0; border-bottom: var(--rule) solid var(--ink);
}
.field td { vertical-align: top; padding: 11px 20px 11px 0; border-bottom: var(--hair) solid var(--ink); }
.field th:last-child, .field td:last-child { padding-right: 0; }
.field td.ref { font-family: var(--font-lettering); font-size: 17px; width: 3.2em; }

/* ---------- title block: the last band, framed heavier, in two zone rows ---------- */
.band.tb { padding-top: 1px; background: var(--ink); }                 /* its top rule is doubled */
.tb .field { padding: 10px 16px 12px; }
.tb .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rule); background: var(--ink); }
.tb-k {
  display: block;
  font-family: var(--font-lettering); font-size: 10px; line-height: 1.2;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 5px;
}
.tb-v { display: block; font-family: var(--font-lettering); font-size: 17px; line-height: 1.25; letter-spacing: .03em; }
.tb-title .tb-v { font-family: var(--font-title); font-size: 21px; text-transform: uppercase; letter-spacing: .02em; }
/* a cell that wraps splits its lines evenly; the grid's letters are words of a line, not flex items, so that they balance
   too, their space widened to the 10px gap the estimate counts (an Overpass space is about .265 em) */
.tb .field { text-wrap: balance; }
.tb-grid .tb-v { word-spacing: calc(10px - .265em); }
.tb-grid a { text-decoration: none; }
.tb-grid a:hover { text-decoration: underline; }

/* licence: the licence alone, its name linked to its deed and Creative Commons' icons beside it, drawn inline
   in the page's paper and ink so that they turn with the page in dark mode. The author and year are the
   Author cell's, never repeated here. */
.lic { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; max-width: none; }
.lic-icons { display: flex; gap: 3px; }
.cc { display: block; width: 24px; height: 24px; }
.cc .disc { fill: var(--paper); }
.cc path { fill: var(--ink); }
.lic-n { font-family: var(--font-lettering); font-size: 15px; line-height: 1.3; letter-spacing: .03em; }
.tb-licence .lic { min-height: 21px; }

/* ---------- machine-readable zone: the frame's last row, as a passport carries its zone on the data page ----------
   links for machines, the source's fingerprint, and three lines of the page's identity set at a fixed pitch in
   chevron form */
.band.mrz-band { padding-top: 1px; background: var(--ink); }            /* ruled off heavier, like the title block */
.f-mrz { padding: 12px 16px 14px; }
.f-mrz .mrz-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 0 0 12px; max-width: none; font-family: var(--font-lettering); font-size: 11px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; }
.mrz-head .k { flex: 1 1 auto; }
.mrz-head a { text-decoration: none; border-bottom: var(--rule) solid var(--ink); }
.mrz-head a:hover { background: var(--ink); color: var(--paper); }
.f-mrz .mrz-fp { display: block; margin: 10px 0 0; max-width: none; font-family: var(--font-lettering); font-size: 11px; line-height: 1.4; letter-spacing: .08em; }
.mrz-lines { display: block; width: 100%; max-width: 980px; height: auto; }
.mrz-lines text { font-family: var(--font-mono); font-size: 15px; fill: var(--ink); letter-spacing: 0; }
.f-mrz:target .mrz-head .k { background: var(--ink); color: var(--paper); box-shadow: 0 0 0 5px var(--ink); }

/* ---------- canvas formats ---------- */
@media (max-width: 1439.98px) {
  :root { --canvas: 1160px; --pad: 28px; --h1: 66px; }
  .view svg { width: var(--dw-c1160); --num-size: var(--n-c1160); }
}
@media (max-width: 1199.98px) {
  :root { --canvas: 900px; --pad: 22px; --h1: 52px; }
  body { font-size: 16px; padding: 28px 20px 40px; padding-inline: clamp(0px, (100% - var(--canvas)) / 2, 20px); }
  .view svg { width: var(--dw-c900); --num-size: var(--n-c900); }
  .field { padding-top: 22px; }
  .label { font-size: 12px; margin-bottom: 14px; }
  .f-title { padding: 30px 28px 28px; }
  .f-title .line { font-size: 20px; margin-top: 16px; }
  .reg { column-gap: 36px; }
  .reg-fields, .reg-views { --zc: 60px; --cg: 28px; }
  .reg a { font-size: 14px; }
  .f-index .z { font-size: 12px; }
  .f-text.s9 .flow, .f-text.cols2 .flow { column-gap: 40px; }
  .f-text.opening p { font-size: 18px; }
  ul.dash li { padding-left: 20px; }
  ul.dash li::before { width: 10px; }
  ul.key li { grid-template-columns: 36px 1fr; }
  .key-cols { column-gap: 36px; }
  ul.key .n { font-size: 16px; }
  ul.key .p { font-size: 15px; }
  .view-title { font-size: 18px; }
  .view { padding-top: 20px; }
  .field table { font-size: 14px; }
  .field th { font-size: 11px; padding-right: 14px; }
  .field td { padding-right: 14px; }
  .tb .field { padding: 8px 12px 10px; }
  .tb-v { font-size: 15px; }
  .tb-title .tb-v { font-size: 18px; }
  .lic-n { font-size: 14px; }
  .cc { width: 22px; height: 22px; }
}

/* ---------- roll: phones and genuinely narrow windows, the window's width up to 540px ---------- */
@media (max-width: 939.98px) {
  :root { --strip: 18px; --trim: 8px; --pad: 22px; --canvas: min(100%, 540px); --pen-sil: 1.7; --pen-sec: 1.1; --pen-fine: .7; }
  body { padding: 0; font-size: 17px; }
  .canvas { box-shadow: none; }
  .band { grid-template-columns: var(--strip) minmax(0, 1fr) var(--strip); }
  .ruler .nums { background: var(--paper); height: var(--strip); }
  .ruler .nums > span { display: none; }              /* the nine column numbers mean nothing in one column */

  /* one field per row, in file order; each field carries its zone's letter in both strips */
  .band { grid-template-rows: none; }
  .zl, .zr { display: none; }
  .band > .field, .band > .pair { grid-row: auto; grid-column: 2; position: relative; }
  .band > .field::before, .band > .field::after, .band > .pair::before, .band > .pair::after {
    content: attr(data-z);
    position: absolute; top: 0; bottom: 0; width: calc(var(--strip) - 1px);
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: var(--paper);
    font-family: var(--font-lettering); font-size: 10px; line-height: 1.15; letter-spacing: .02em; font-weight: 400; text-transform: none;
  }
  .band > .field::before, .band > .pair::before { left: calc(-1 * var(--strip) - 1px); }
  .band > .field::after, .band > .pair::after { right: calc(-1 * var(--strip) - 1px); }

  .field { padding-top: 22px; }
  .label { font-size: 12px; }
  .f-title { padding: 26px var(--pad) 24px; }
  .f-title h1 { font-size: 34px; }
  .f-title .line { font-size: 18px; margin-top: 14px; }
  .reg { grid-template-columns: 1fr; row-gap: 26px; }
  .reg-fields ol { columns: 1; }
  .f-index .reg-fields .reg-h { grid-template-columns: var(--reg-cols); }
  .reg-fields .reg-h span:nth-child(n+3) { display: none; }
  .reg-fields, .reg-views { --zc: 60px; }
  .f-index .zc { display: none; }                     /* column numbers are hidden here, so only the letters are given */
  .f-text.s9 .flow, .f-text.cols2 .flow { columns: 1; }
  .f-text.opening p { font-size: 18px; line-height: 1.45; }
  .field.f-stamp > .value { font-size: min(40px, calc(100cqw / (var(--chars, 6) * .8))); margin: 2px 0 0; padding: 0; }
  .f-text .flow + .flow { margin-top: .8em; }
  /* one column of key lines on the roll: the columns' lists join into one, ruled once between them */
  .key-cols { display: block; }
  .key-cols ul.key + ul.key li:first-child { border-top: 0; }

  .view-title { font-size: 18px; }
  .f-drawing { padding-left: 12px; padding-right: 12px; }
  .f-drawing .view-title { margin: 0 calc(var(--pad) - 12px); }
  .view { padding-top: 18px; }
  .view svg { width: 100%; --num-size: var(--n-r540); }

  /* table: each row becomes a small ruled record. The records share one grid, so every label column
     lines up on every row, and labels never wrap. */
  .field table { display: grid; grid-template-columns: var(--refcol, 0) max-content minmax(0, 1fr); border-bottom: var(--hair) solid var(--ink); }
  .field table.has-ref { --refcol: 40px; }
  .field thead { display: none; }
  .field tbody { display: contents; }
  .field tr { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; padding: 12px 0 10px; border-top: var(--hair) solid var(--ink); }
  .field td { border: 0; padding: 1px 0; font-size: 15px; }
  .field td.ref { grid-column: 1; }
  .field td.head { grid-column: 1 / -1; font-family: var(--font-lettering); font-size: 17px; margin-bottom: 4px; }
  .field td.ref + td.head { grid-column: 2 / -1; }
  .field td.kv { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; }
  .field td.kv::before { content: attr(data-k); white-space: nowrap; font-family: var(--font-lettering); font-size: 10px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; padding: .45em 14px 0 0; }

  .f-mrz { padding: 10px 12px 12px; }
  /* at every width the zone shows exactly three MRZ lines, each its full 64 characters on one row at the zone's
     fixed pitch, in order, with its < fillers, as on a passport data page; on the roll the same lines scale down
     to the field's width (taking 8px of its padding on each side) and are never wrapped, cut, shortened, scrolled
     or hidden (the human's decision of 2026-10-02, replacing two rows of 32 per line) */
  .mrz-lines { width: calc(100% + 16px); max-width: none; margin: 0 -8px; }
}
@media (min-width: 540px) and (max-width: 939.98px) {
  body { padding: 24px 0; }
  .canvas { box-shadow: 0 1px 2px var(--shadow), 0 12px 40px -8px var(--shadow); }
}

/* roll steps: each drawing's numeral size for the narrowest window of the step; a drawing whose numerals
   would touch upright at a step shows the sideways copy there, which the tool draws turned a quarter turn,
   numerals and all, top to the left. The window's width decides, never its orientation. */
@media (max-width: 539.98px) { .view svg { --num-size: var(--n-r480); } .turn-r480 svg.upright { display: none; } .turn-r480 svg.turned { display: block; width: 100%; --num-size: var(--n-r480); } }
@media (max-width: 479.98px) { .view svg { --num-size: var(--n-r430); } .view svg.upright { display: block; } .view svg.turned { display: none; }
  .turn-r430 svg.upright { display: none; } .turn-r430 svg.turned { display: block; width: 100%; --num-size: var(--n-r430); } }
@media (max-width: 429.98px) { .view svg { --num-size: var(--n-r390); } .view svg.upright { display: block; } .view svg.turned { display: none; }
  .turn-r390 svg.upright { display: none; } .turn-r390 svg.turned { display: block; width: 100%; --num-size: var(--n-r390); } }
@media (max-width: 389.98px) { .view svg { --num-size: var(--n-r360); } .view svg.upright { display: block; } .view svg.turned { display: none; }
  .turn-r360 svg.upright { display: none; } .turn-r360 svg.turned { display: block; width: 100%; --num-size: var(--n-r360); } }
@media (max-width: 359.98px) { .view svg { --num-size: var(--n-r320); } .view svg.upright { display: block; } .view svg.turned { display: none; }
  .turn-r320 svg.upright { display: none; } .turn-r320 svg.turned { display: block; width: 100%; --num-size: var(--n-r320); } }
@media (min-width: 540px) and (max-width: 939.98px) { .turn-r540 svg.upright { display: none; } .turn-r540 svg.turned { display: block; width: 100%; --num-size: var(--n-r540); } }