/*
  Field Guide: a document set like a naturalist's field guide or a museum
  catalogue. Newsreader for headings and prose, Sometype Mono for every label:
  the section number reads as a catalogue number, a figure sits on a plate
  ground with a typewritten plate label, the facts grid reads as three numbered
  specimen entries, and tables keep Ledger's ruled-off book treatment.

  From St. Clair AI, Lahe Styles (https://stclair.ai/lahe-styles.html),
  version 1.1.1. This style's page: https://stclair.ai/lahe-styles/field-guide.html

  Load this file after lib/templates/system-tokens.css and
  lib/templates/document.css. It self-hosts its two fonts from ./fonts/, sets
  its own raw palette, points the base's colour roles and settings at it, and
  adds rule blocks only where no token reaches the thing. Its layout (the
  margin rail) is the last block in the file, so this one file is the whole
  style over the base.

  Where it came from. Ledger's all-mono direction read to Ken as short of his
  bar for high design, and he suggested a field guide theme would make the mono
  work. So mono stops being the whole page and becomes the label voice, the way
  a catalogue typewrites its entry numbers and specimen labels beside set prose.
  Tear sheet C, "Field Notes", is the nearest earlier attempt. Its verdict was
  about the website, so it was free to borrow from, but its warm beige, olive
  and serif-plus-Karla pairing pull toward a craft notebook, and this style has
  to stay tech-literate. So the paper is a near-white with no brown in it, the
  ink is blue-black, and the colour is printer's ink: vermilion, slate, fern.

  Measured contrast. Every number from scripts/contrast.py, which is the only
  place these are produced, written here by scripts/sync_headers.py. Floors:
  4.5:1 for body and anything under 24px, 3.0:1 for a drawn mark or rule.

  BEGIN MEASURED
    body text on folio                              #141c26 on #f7f6f1    15.86:1
    secondary copy and the lede                     #3f4a57 on #f7f6f1     8.33:1
    meta, captions, calendar heads                  #56606c on #f7f6f1     5.91:1
    a boxed table head on the plate ground          #56606c on #ecebe3     5.34:1
    a slate link in running prose                   #2f5277 on #f7f6f1     7.48:1
    the vermilion catalogue number, 15px            #bd3a1f on #f7f6f1     5.12:1
    the vermilion plate label on the plate ground   #bd3a1f on #ecebe3     4.63:1
    a plate caption on the plate ground             #3f4a57 on #ecebe3     7.54:1
    body text on the plate ground                   #141c26 on #ecebe3    14.35:1
    body text on a boxed table's alternate row      #141c26 on #f2f1ea    15.15:1
    body text in the fern tint panel                #141c26 on #e3eee5    14.40:1
    body text on the slate tint and code            #141c26 on #e4eaf1    14.17:1
    body text on the vermilion tint                 #141c26 on #f8e5dd    14.09:1
    the slate insight label on its tint             #2f5277 on #e4eaf1     6.68:1
    the deep vermilion caveat label on its tint     #9b2c17 on #f8e5dd     6.23:1
    white on the ink band and callout               #ffffff on #141c26    17.16:1
    chalk on the ink band                           #e7e5dc on #141c26    13.60:1
    the section number on the ink band              #c9c8bf on #141c26    10.21:1
    the dot bullet on the ink band                  #c9c8bf on #141c26    10.21:1
    white on the slate band and callout             #ffffff on #2f5277     8.10:1
    the chalk number on the slate band              #e7e5dc on #2f5277     6.41:1
    white on the deep vermilion band and callout    #ffffff on #9b2c17     7.59:1
    the chalk number on the deep vermilion band     #e7e5dc on #9b2c17     6.01:1
    white on the fern callout and circle            #ffffff on #2f6b43     6.35:1
    the today marker: folio on ink                  #f7f6f1 on #141c26    15.86:1
    the fern dot on folio                           #2f6b43 on #f7f6f1     5.87:1
    the fern dot in the fern tint panel             #2f6b43 on #e3eee5     5.33:1
    the fern all-day label and numerals, 12px       #2f6b43 on #f7f6f1     5.87:1
    the ink hanging rule                            #141c26 on #f7f6f1    15.86:1
    the ink keyline of a specimen label             #141c26 on #f7f6f1    15.86:1
    the error panel's label on its tint             #9b2c17 on #f8e5dd     6.23:1
    the error panel's deep vermilion frame on folio #9b2c17 on #f7f6f1     7.02:1
    the deep vermilion emphasis icon on folio       #9b2c17 on #f7f6f1     7.02:1
    a tinted stat tile's typed label on the plate   #56606c on #ecebe3     5.34:1
    a tinted stat tile's meta line on the plate     #3f4a57 on #ecebe3     7.54:1
    the slate badge on its tint                     #2f5277 on #e4eaf1     6.68:1
    the fern status dot on a fern tint badge        #2f6b43 on #e3eee5     5.33:1
    a band head's white rule on the ink band        #ffffff on #141c26    17.16:1
  END MEASURED

  Pairs tried and dropped, with their numbers, are listed in scripts/contrast.py
  under REJECTED.
*/

/* ---------- fonts, self-hosted ----------
   A style is a folder the switcher can point at, and a folder that reaches the
   network for its type renders wrong on a plane or in a PDF export. Google's
   css2 endpoint returns one latin variable woff2 per family and style, so each
   rule declares the whole weight range the file covers.

   | File                                 | Family        | Style  | Range      | Google version |
   | ------------------------------------ | ------------- | ------ | ---------- | -------------- |
   | newsreader-variable.woff2            | Newsreader    | normal | 200 to 800 | v26            |
   | newsreader-italic-variable.woff2     | Newsreader    | italic | 200 to 800 | v26            |
   | sometype-mono-variable.woff2         | Sometype Mono | normal | 400 to 700 | v4             |
   | sometype-mono-italic-variable.woff2  | Sometype Mono | italic | 400 to 700 | v4             |

   Newsreader carries an optical size axis (6 to 72), so the same file draws a
   sturdier text cut at 17px and a finer display cut at the title size without
   a second family. The italics are vendored because captions and the lede use
   them, and a browser-slanted roman looks wrong beside a real italic.

   All SIL Open Font License 1.1; fonts/LICENSE carries both copyright lines.
   To update: fetch the css2 URL with a browser User-Agent so Google returns
   woff2 blocks, pull the url() out of each latin block, copy the files over
   these, and update the version column above.

     curl -H "User-Agent: Mozilla/5.0 ... Chrome/126.0 Safari/537.36" \
       "https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Sometype+Mono:ital,wght@0,400..700;1,400..700&display=swap"
*/

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./fonts/newsreader-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("./fonts/newsreader-italic-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Sometype Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/sometype-mono-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Sometype Mono";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/sometype-mono-italic-variable.woff2") format("woff2");
}

:root{
  /* ---------- type ----------
     The base draws every label (the section number, table heads, the facts
     figure, the insight label, calendar heads) in --font-display. Pointing that
     token at the mono is what turns all of them into typewritten labels in one
     line; the headings are then handed back to the serif by one rule below.
     Labels sit at 500, not 600: a typewriter has one weight, and a heavy mono
     label reads as a terminal rather than a printed catalogue. */
  --font-display:"Sometype Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-body:"Newsreader",Georgia,"Times New Roman",serif;
  --font-mono:"Sometype Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --w-display:500;
  --w-bold:700;

  /* The serif title can run bigger than a mono one: a proportional face at 52px
     still fits a title on two lines. The lede comes up a step because it is
     set in italic, which reads lighter than the roman at the same size. */
  --text-h1:clamp(38px,5vw,58px);
  --text-h2:clamp(26px,3vw,34px);
  --text-h3:clamp(20px,2vw,24px);
  --text-h4:19px;
  --text-figure:19px;
  --text-lede:22px;
  --text-body:18px;

  /* ---------- the palette, in the field guide's own words ----------
     Folio is the page and plate is the slightly darker ground a figure is
     printed on. Iron gall is the ink. Vermilion is the printer's red for plate
     and catalogue numbers, and its deep shade carries the one caveat. Slate is
     the accent. Fern is the botanical green for dots and the quiet panel. */
  --folio:#f7f6f1;
  --plate:#ecebe3;
  --plate-stripe:#f2f1ea;      /* the boxed table's alternate rows */
  --hairline:#cfcdc2;          /* rules only, never text */
  --iron-gall:#141c26;
  --iron-gall-soft:#3f4a57;
  --iron-gall-faint:#56606c;
  --vermilion:#bd3a1f;         /* catalogue numbers and plate labels */
  --vermilion-deep:#9b2c17;    /* emphasis: the caveat, its band and callout */
  --vermilion-tint:#f8e5dd;
  --slate:#2f5277;
  --slate-deep:#213d5a;
  --slate-tint:#e4eaf1;
  --fern:#2f6b43;
  --fern-deep:#224f31;
  --fern-tint:#e3eee5;
  --chalk:#e7e5dc;             /* secondary copy on a filled ground */
  --chalk-dim:#c9c8bf;         /* numbers and dots on the ink band */

  /* Families for the specimen's palette view; the format is explained where
     system-tokens.css declares the house version. */
  --palette-families:"folio plate plate-stripe hairline: The page, the plate ground under a figure and a table head, alternate rows, hairlines \
    | iron-gall iron-gall-soft iron-gall-faint chalk chalk-dim: Body text and headings, the ink band, and the light text on it \
    | vermilion vermilion-deep vermilion-tint: Catalogue and plate numbers, and in its deep shade the one caveat \
    | slate slate-deep slate-tint: The accent: links, the insight label, code \
    | fern fern-deep fern-tint: Dots and numerals, the third fill, the default quiet panel";

  /* ---------- roles ---------- */
  --surface:var(--folio);
  --surface-raised:var(--plate);
  --on-surface:var(--iron-gall);
  --on-surface-soft:var(--iron-gall-soft);
  --on-surface-faint:var(--iron-gall-faint);
  --border:var(--hairline);

  --accent:var(--slate);
  --accent-hover:var(--slate-deep);
  --accent-tint:var(--slate-tint);
  --link:var(--slate);
  --focus:var(--slate);

  --mark:var(--fern);
  --fill:var(--fern);
  --on-fill:#ffffff;
  --tint:var(--fern-tint);
  --emphasis:var(--vermilion-deep);
  --emphasis-hover:var(--vermilion-deep);
  --emphasis-tint:var(--vermilion-tint);

  --structure:var(--iron-gall);
  --on-structure:#ffffff;
  --on-structure-soft:var(--chalk);
  --on-structure-faint:var(--chalk-dim);

  /* ---------- lines and radius ----------
     Fine rules, as a printed page has. The hanging rule is a single ink
     hairline rather than the base's 2px bar, so the vermilion number and the
     heading carry the section's weight instead of the rule. Square corners
     throughout: a plate and a label are cut, not rounded. */
  --divider:1px solid var(--iron-gall);
  --line:1px solid var(--hairline);
  --line-ink:1px solid var(--iron-gall);
  --r:0px;
  --r-lg:0px;
  /* The base rounds inline code and the calendar's today marker a little and
     fully. A pill is a house no, and the page has no rounded corners anywhere
     else, so both are squared: today reads as a stamped date. */
  --r-code:0px;
  --r-pill:0px;

  /* ---------- the base's settings ----------
     Headings come back to the serif, since --font-display is the label voice
     here. A display optical size at 500 gives Newsreader's finer,
     higher-contrast cut at heading sizes, the look of a set title rather than
     an enlarged text face. */
  --font-heading:var(--font-body);
  --w-heading:var(--w-medium);
  --tracking-heading:-.01em;
  /* The catalogue number is printed in vermilion. */
  --number-color:var(--vermilion);
  /* The ruled table, from Ledger: a double ink rule under the head, and the
     head in full ink, since the column names are read, not skipped. */
  --thead-color:var(--on-surface);
  --thead-rule:3px double var(--iron-gall);
  --thead-rule-boxed:3px double var(--iron-gall);
  /* Figures are plates: the plate ground inside a hairline frame, and a
     typewritten caption in the soft ink. */
  --figure-border:var(--line);
  --figure-ground:var(--plate);
  --figure-pad:var(--s4);
  --font-caption:var(--font-mono);
  --caption-color:var(--on-surface-soft);
}

/* ---------- the title ----------
   The headings' face and weight are set by the tokens above. The title alone
   drops to the regular weight and tightens further, the way a set title is
   lighter than the section heads under it. */
h1,.ladder--h1{font-weight:var(--w-body);letter-spacing:-.02em}

/* The lede is the field guide's introductory note: italic, in the soft ink. */
.lede,.ladder--lede{font-style:italic}

/* Mono letters sit in fixed cells; the base's display tightening makes the
   cells collide, so every label set in the mono goes back to 0. */
.facts dt,.sheet-head .n,.fold-head .n,thead th{letter-spacing:0}

/* ---------- the catalogue number ----------
   The section number moves in front of the heading, as an entry number stands
   before the name in a catalogue; --number-color prints it in vermilion. It
   stays on the heading's baseline, and the row still wraps on a narrow screen. */
.sheet-head,details.fold summary.fold-head{justify-content:flex-start;column-gap:var(--gutter)}
.sheet-head .n,details.fold summary.fold-head .n{order:-1;font-variant-numeric:tabular-nums}
/* A fixed column for the number, so every heading on the page starts on the
   same line whether the number is 5 or 22. In a mono a ch is exact, and 11ch
   holds "Section 100". */
.sheet-head .n,details.fold summary.fold-head .n{flex:0 0 11ch}

/* ---------- running head and time stamps ----------
   The masthead's meta line and a check-in's time are catalogue data, not
   prose, so they are typed in the mono. The meta line sits over a hairline,
   the running head of a printed page. */
.masthead .meta,.checkin .checkin-head .time{font-family:var(--font-mono)}
.masthead .meta{padding-bottom:var(--s2);border-bottom:var(--line)}
/* In a fold the number keeps its column and the chevron sits between it and
   the heading, so the fold's number lines up with every other section's. */
details.fold summary.fold-head .n{order:-2}
details.fold summary.fold-head .fold-arrow{order:-1}
/* On a filled band the vermilion would sit on ink or on its own deep shade,
   so the number there takes the band's own light text colour. */
.band .sheet-head .n{color:var(--on-structure-faint)}
.band--purple .sheet-head .n{color:var(--on-structure-soft)}
.band--cobalt .sheet-head .n{color:var(--on-structure-soft);opacity:1}

/* ---------- figures as plates ----------
   The frame, ground and caption face are the settings above. The image
   carries its own ink keyline, and plates are numbered by the page in roman
   numerals, the way a field guide numbers its colour plates; the counter is
   on the body so figures in different sections keep counting. */
body{counter-reset:plate}
figure{counter-increment:plate}
figure img{display:block;border:var(--line-ink)}
figcaption{margin-top:var(--s3)}
figcaption::before{
  content:"Plate " counter(plate, upper-roman) ".";
  color:var(--vermilion);
  margin-right:1ch;
}

/* ---------- the facts grid as specimen entries ----------
   Each entry is a specimen label: a hairline box on the plate ground, a
   vermilion entry number typed above the term, the term in the mono, and the
   note under it in the serif. The number is generated so it can never be
   written two ways on one page. */
.facts{counter-reset:specimen;gap:var(--block-gap)}
.facts > div{
  counter-increment:specimen;
  border:var(--line-ink);
  padding:var(--s4);
  background:var(--surface);
}
.facts > div::before{
  content:"No. " counter(specimen, decimal-leading-zero);
  display:block;
  margin-bottom:var(--s3);
  padding-bottom:var(--s2);
  border-bottom:var(--line);
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  color:var(--vermilion);
}
.facts dd{color:var(--on-surface)}

/* ---------- the ruled table, from Ledger ----------
   The head's double rule and full ink are the settings above. The rest makes
   it a ruled book page rather than a web table: a single ink rule closes the
   last row, so it reads as totalled, and figures are tabular so a column of
   numbers lines up in the serif. */
table{font-variant-numeric:tabular-nums lining-nums}
thead th{white-space:nowrap}
tbody tr:last-child td{border-bottom:var(--line-ink)}
/* The base lets a cell break anywhere, which in an auto-sized table shrinks
   every column to one letter wide. break-word still breaks a long URL, only
   when it overflows. */
td{overflow-wrap:break-word}
table.boxed{border:var(--line-ink)}
table.boxed tbody tr:nth-child(even) td{background:var(--plate-stripe)}
table.boxed tr:last-child td{border-bottom:0}

/* List markers inside a band: the base leaves them in page-ground colours. */
.band ul li::before{background:var(--on-structure-faint)}
.band ol li::before{color:var(--on-structure-faint)}

/* =========================================================================
   THE 1.1 COMPONENTS, as catalogue pieces.

   The base added stat tiles, the pull quote, badges, the eyebrow, the boxed
   step sequence, the data table's total row, the checklist, the caption
   plate, option cards, five image treatments, the error panel, two smaller
   section heads and the icon reference. Where a base rule already reads
   right through this style's tokens (badges, the eyebrow, the checklist,
   the icon colours) nothing is restated. The rest follow the field guide's
   three habits: an ink keyline round anything that is an entry, a mono
   label typed above a hairline, and vermilion only on a number.
   ========================================================================= */

:root{
  /* Every image treatment draws the ink keyline a plate's picture already
     carries, so a screenshot sits on the page the way a plate does. Square,
     from --r. */
  --image-frame:var(--line-ink);
  /* The error panel. The style has no house red: its printer's red, in the
     deep shade, is the colour for a problem. The panel's full keyline and its
     bold label keep it apart from the caveat, which uses the same red as a
     tint with no frame. */
  --danger:var(--vermilion-deep);
  --danger-tint:var(--vermilion-tint);
}

/* ---------- stat tiles as specimen labels ----------
   A bordered tile is cut like the facts grid's specimen entry: an ink
   keyline, the label typed in the mono above a hairline, and the figure set
   in the serif, the way a catalogue sets a measurement. The tinted tile sits
   on the plate ground, the style's own quiet ground, and drops the keyline. */
.stat{border:var(--line-ink);background:var(--surface)}
.stat--tint{background:var(--surface-raised);border-color:transparent}
.stat-label{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--on-surface-faint)}
.stat .stat-label{padding-bottom:var(--s2);border-bottom:var(--line)}
.stat-value{
  font-family:var(--font-heading);
  font-weight:var(--w-medium);
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums lining-nums;
}
/* The large tile sets its label beside the figure, so the label's hairline
   would underline half a row; it goes. */
.stat--large .stat-label{padding-bottom:0;border-bottom:0}

/* ---------- the pull quote as an epigraph ----------
   A field guide quotes in the text face's italic, never in the label mono.
   The attribution is typed, like a specimen's collector line. */
blockquote.pullquote p{
  font-family:var(--font-heading);
  font-weight:var(--w-body);
  font-style:italic;
  letter-spacing:-.01em;
  line-height:1.3;
}
blockquote.pullquote footer{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--on-surface-faint)}

/* ---------- the step sequence as numbered entries ----------
   Each step is an entry: its number typed as "No. 01" in vermilion over a
   hairline, the same label the facts grid prints. In ruled rows the number
   stands alone in the list's inset column. */
ol.sequence > li::before{
  content:"No. " counter(seq, decimal-leading-zero);
  padding-bottom:var(--s2);
  border-bottom:var(--line);
  font-family:var(--font-mono);
  font-weight:var(--w-display);
  font-size:var(--text-micro);
  color:var(--number-color);
}
ol.sequence--rows > li::before{
  content:counter(seq, decimal-leading-zero);
  padding:0;
  border:0;
  font-size:var(--text-small);
  line-height:inherit;
}

/* ---------- the data table's total ----------
   A ledger totals a column under a double rule, the same double ink rule
   that closes the head, so the sum reads as the sum. */
tfoot td{border-top:var(--thead-rule)}
table.boxed tfoot td{border-top:var(--thead-rule-boxed)}

/* ---------- the caption plate ----------
   An ink keyline round the whole plate. The author numbers this figure in
   the caption's bold lead, so the page's own "Plate I." counter stands down
   here and the typed number takes the vermilion instead; a page never says
   the number twice. The picture's own keyline goes, since the plate's frame
   is the edge. */
figure.plate{counter-increment:none;border:var(--line-ink)}
figure.plate > :is(img,svg,picture){border:0}
figure.plate figcaption{font-family:var(--font-mono);font-size:var(--text-meta)}
figure.plate figcaption::before{content:none}
figure.plate figcaption b{font-family:var(--font-mono);font-weight:var(--w-display);color:var(--number-color)}

/* ---------- option cards as specimen entries ---------- */
.option{border:var(--line-ink);background:var(--surface)}

/* ---------- images on the plate ground ----------
   Image beside text prints its picture as a small plate: the plate ground
   round it inside the keyline. Image cards keep the keyline on the card and a
   hairline between the picture and its name. */
.media > img{padding:var(--s3);background:var(--surface-raised)}
.image-card > img{border-bottom:var(--line)}

/* The full-width image runs to both page edges, so its keyline is drawn
   only top and bottom, as the base draws it; the plate keyline that every
   figure's picture carries would otherwise add two at the screen's edges. */
.bleed > :is(img,picture,svg,video){border-inline:0}

/* ---------- the two smaller section heads ----------
   The large head prints a vermilion number and an ink rule under the
   heading. The medium head keeps the rule and the place of the number but
   types its label in faint ink; the small head drops the label and its rule
   becomes a hairline. Neither carries a rule above, like the large head. */
.sheet-head--medium{border-top:0;padding-top:0}
.sheet-head--medium .n{color:var(--on-surface-faint)}
.sheet-head--small{border-top:0;padding-top:0;padding-bottom:var(--s2);border-bottom:var(--line)}

/* ---------- the icon reference as a typed index ---------- */
.icon-set li{font-family:var(--font-mono);font-size:var(--text-micro)}

/* =========================================================================
   LAYOUT: the margin rail.

   Everything above sets colour, type and the plate, label and table looks.
   Everything below changes structure only, on the shared markup: the section
   head, the page grid, alignment, the opening, and rhythm. It reads the
   base's --layout-rail.

     1. A rail runs down the left of the page: a narrow column with a
        hairline on its inner edge, continuous from the opening to the last
        section. It carries the catalogue numbers and the plate captions, the
        way a field guide keeps its index data out of the prose.
     2. The heading sits in the main column with a fine rule below it, so
        the rule underlines the name of the entry instead of hanging above it.
     3. The number sits in the rail on the heading's baseline, set against
        the rail line.
     4. Plates are set wider than the prose: a figure fills the main column
        and centres its image there, and its caption moves into the rail.
     5. Under 820px the rail folds away: the number goes back in front of
        the heading and captions sit under plates.
   ========================================================================= */

:root{
  --layout-rail:9rem;   /* the rail; matches the base default, stated so a change there does not move this page */
  /* The house page's prose measure as a length: the base's 68ch, in Hanken
     Grotesk at 17px, measured at 647px. The rail and the text column together
     fit inside it, so Field Guide's prose ends where the house's prose ends
     and no wider. A review layer docked at the right of the window (the Lahe
     rail) covers the page past that edge on a 1440 screen, and it covers
     nobody's prose there. */
  --layout-house-measure:40.4375rem;
}

@media (min-width:821px){
  /* ---------- the measure ----------
     The rail and its gap come out of the house measure, so the rail plus the
     text column is the house's text width, not wider. At 18px Newsreader the
     column that is left is still a book's measure. The title and the lede,
     which the base lets run past the
     measure, keep to it here for the same reason. */
  :root{--read:calc(var(--layout-house-measure) - var(--layout-rail) - var(--section-gap-narrow))}
  .hero h1{max-width:min(17ch, var(--read))}
  .hero .lede{max-width:var(--read)}
  /* The base caps a pull quote at half the measure; half of this narrower
     measure is a few words a line in the italic, so it takes the whole. */
  blockquote.pullquote p{max-width:var(--read)}

  /* ---------- the rail ----------
     Every block that carries the column gets the same two columns, and the
     rail's hairline is drawn on each at the same offset, so the line runs
     unbroken down the page where the blocks touch. */
  :is(body, .band) > :is(.masthead, .hero, section.sheet, details.fold, .checkin, footer){
    position:relative;
  }
  :is(body, .band) > :is(.masthead, .hero, section.sheet, details.fold, .checkin)::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:calc(var(--gutter) + var(--layout-rail) + var(--section-gap-narrow) / 2);
    border-left:var(--line);
  }
  .masthead,.hero,section.sheet{
    display:grid;
    grid-template-columns:[rail] var(--layout-rail) [main] minmax(0,1fr);
    column-gap:var(--section-gap-narrow);
    align-items:start;
  }
  :is(.masthead, .hero, section.sheet) > *{grid-column:main}
  /* The masthead's meta line is catalogue data, so it goes in the rail. */
  .masthead{padding-bottom:var(--s4)}
  .masthead > .meta{grid-column:rail;border-bottom:0;padding-bottom:0}
  .hero{padding-bottom:var(--section-gap-narrow)}

  /* ---------- the head ----------
     The head dissolves so the number and the heading are grid items on one
     row: the number in the rail, right-set against the line, and the heading
     in the main column with its rule. The number sits on the heading's
     first baseline, so a heading that wraps keeps its number by its first
     line. */
  section.sheet > .sheet-head:not(.sheet-head--medium, .sheet-head--small){display:contents}
  section.sheet > .sheet-head > h2{
    grid-column:main;
    grid-row:1;
    align-self:baseline;
    padding-bottom:var(--s3);
    border-bottom:var(--line-ink);
    margin-bottom:var(--gutter);
  }
  .sheet-head:not(.sheet-head--medium, .sheet-head--small) > .n{
    grid-column:rail;
    grid-row:1;
    align-self:baseline;
    justify-self:end;
    text-align:right;
  }

  /* The fold and the check-in keep their own rows, pushed onto the main
     column; the fold's number keeps its place in the rail. */
  :is(body, .band) > :is(details.fold, .checkin){padding-inline-start:calc(var(--gutter) + var(--layout-rail) + var(--section-gap-narrow))}
  details.fold summary.fold-head .n{
    position:absolute;
    left:calc(-1 * (var(--layout-rail) + var(--section-gap-narrow)));
    width:var(--layout-rail);
    text-align:right;
  }
  details.fold summary.fold-head{position:relative}

  /* ---------- plates ----------
     The figure spans the rail and the main column so its caption can sit in
     the rail; the plate ground and its frame move onto the image's own box,
     which fills the main column. */
  section.sheet > figure{
    grid-column:rail / -1;
    display:grid;
    grid-template-columns:var(--layout-rail) minmax(0,1fr);
    column-gap:var(--section-gap-narrow);
    background:none;
    border:0;
    padding:0;
  }
  section.sheet > figure > img{
    grid-column:2;
    justify-self:center;
    width:100%;
    padding:var(--s4);
    background:var(--surface-raised);
    outline:1px solid var(--border);
  }
  section.sheet > figure > figcaption{
    grid-column:1;
    grid-row:1;
    margin:0;
    text-align:right;
  }
  section.sheet > figure > figcaption::before{display:block;margin:0 0 var(--s1)}
  /* A caption plate placed straight in a section keeps its own frame and
     caption strip in the main column; it does not split across the rail. */
  section.sheet > figure.plate{grid-column:main;display:block;border:var(--line-ink);background:var(--surface)}
  section.sheet > figure.plate > :is(img,svg,picture){padding:var(--s5) var(--s5) var(--s4);outline:0;background:none}
  section.sheet > figure.plate--tint > :is(img,svg,picture){background:var(--surface-raised)}
  section.sheet > figure.plate > figcaption{margin:0;text-align:left}

  /* ---------- the medium head in the rail ----------
     The medium head is laid out like the large one: its label in the rail,
     right-set against the line, and the heading in the main column over its
     rule. The small head stays in the main column. */
  section.sheet > .sheet-head--medium{
    grid-column:rail / -1;
    display:grid;
    grid-template-columns:var(--layout-rail) minmax(0,1fr);
    column-gap:var(--section-gap-narrow);
    align-items:baseline;
  }
  .sheet-head--medium > h3{grid-column:2;grid-row:1;margin:0;padding-bottom:var(--s2);border-bottom:var(--line-ink)}
  .sheet-head--medium > .n{grid-column:1;grid-row:1;justify-self:end;text-align:right}

  /* ---------- the full-width plate ----------
     The picture runs edge to edge; its caption comes back onto the rail, the
     plate label in the rail and the words in the main column, with the
     rail's hairline picked up again under the picture. */
  .bleed > figcaption{
    position:relative;
    display:grid;
    grid-template-columns:var(--layout-rail) minmax(0,1fr);
    column-gap:var(--section-gap-narrow);
    margin-top:0;
    padding-block:var(--s3) var(--s4);
  }
  .bleed > figcaption::before{margin:0;text-align:right}
  .bleed > figcaption::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:calc(var(--gutter) + var(--layout-rail) + var(--section-gap-narrow) / 2);
    border-left:var(--line);
  }
}

/* ---------- the heading's rule on a phone ----------
   Without the grid the head is a flex row again; the fine rule moves to the
   row's foot so the heading keeps its underline. */
@media (max-width:820px){
  .sheet-head{border-top:0;padding-top:0;border-bottom:var(--line-ink);padding-bottom:var(--s3)}
  .sheet-head--medium{padding-bottom:var(--s2)}
  .sheet-head--small{border-bottom:var(--line);padding-bottom:var(--s2)}
}

/* =========================================================================
   1.1.1 AUDIT: real documents under Lahe.

   Each rule below fixes one flaw found by opening real documents (a
   rendered Markdown proposal, the switcher showcase, Lahe's CLI reference
   and a test page) under this style in Lahe. AUDIT.md lists each flaw, where
   it showed and the before and after screenshots.
   ========================================================================= */

/* A section head outside a section (a head written straight into a band's
   wrapper, say) took the base's hanging rule above it. The style's head
   carries its rule under the heading everywhere. Inside a section on a wide
   screen the head dissolves into the rail grid and draws no box, so this
   only shows where that grid does not reach. */
.sheet-head:not(.sheet-head--small){border-top:0;padding-top:0;border-bottom:var(--line-ink);padding-bottom:var(--s3)}
/* On a filled band the head's rule was drawn in ink on the ink ground, so it
   vanished. It takes the band's own light line, as the base's rule does. */
.band .sheet-head,.band section.sheet > .sheet-head > h2{border-bottom-color:var(--on-structure)}

/* The fold's head and the check-in's head still hung the base's rule above
   the heading, so on one page two kinds of head disagreed. They carry the
   ink rule under the heading like every other head. */
details.fold summary.fold-head,.checkin .checkin-head{border-top:0;padding-top:0;border-bottom:var(--line-ink);padding-bottom:var(--s3)}

/* Inline code inside a table cell broke mid-token ("--state-" over "dir")
   because the style lets a cell break a long word. A flag or a path reads
   as one thing, so it stays on one line; the table scrolls on a phone. */
td code{white-space:nowrap}

/* An image that Markdown writes as a paragraph of its own is a figure, so it
   is printed as a plate like every other figure here: the plate ground
   round it inside the ink keyline. Before this a screenshot of a white page
   sat on the folio with no edge at all. */
p > img:only-child{
  display:block;
  padding:var(--s3);
  background:var(--surface-raised);
  border:var(--line-ink);
}

@media (min-width:821px){
  /* A rendered Markdown page wraps the hero and the sections in main, so
     the rail's hairline, drawn on body children only, never appeared on one.
     main already carries the column's gutter, so here the line sits at the
     rail's own offset. */
  main > :is(.hero, section.sheet){position:relative}
  main > :is(.hero, section.sheet)::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:calc(var(--layout-rail) + var(--section-gap-narrow) / 2);
    border-left:var(--line);
  }

  /* A long section heading ran the width of the main column, past the
     house's prose edge and under a review layer docked on the right. The
     heading's words now wrap at the measure; its rule still runs the full
     column, because the padding is inside the rule. */
  section.sheet > .sheet-head > h2{padding-inline-end:calc(100% - var(--read))}
  /* The medium head is a grid on the rail; its rule is on its heading. */
  section.sheet > .sheet-head--medium{border-bottom:0;padding-bottom:0}

  /* A band whose content is a plain wrapper, not a section, laid its head
     and text from the column's left edge, across the rail. The wrapper
     moves onto the main column and its number hangs in the rail, the way a
     fold's does. */
  .band > div:not([class]){padding-inline-start:calc(var(--gutter) + var(--layout-rail) + var(--section-gap-narrow))}
  .band > div:not([class]) > .sheet-head{position:relative;justify-content:flex-start}
  .band > div:not([class]) > .sheet-head .n{
    position:absolute;
    left:calc(-1 * (var(--layout-rail) + var(--section-gap-narrow)));
    width:var(--layout-rail);
    text-align:right;
  }

  /* A callout written straight into the body ran from the column's left
     edge, across the rail and its line. It now sits on the main column,
     both edges level with the section text and rules around it. */
  body > .callout:not(.band){   /* :not() lifts this over the page's column rule */
    max-width:none;
    margin-inline:calc(var(--layout-bleed) + var(--layout-rail) + var(--section-gap-narrow)) var(--layout-bleed);
  }
}