/* ── site/css/fonts.css ── */
/* ==========================================================================
   biblios · self-hosted faces (OFL-1.1), pinned:
     @fontsource-variable/imbue@5.3.0          display   wght 100–900, opsz 10–100
     @fontsource-variable/brygada-1918@5.3.0   text      wght 400–700, roman + italic
     @fontsource-variable/martian-mono@5.3.0   labels    wght 100–800, wdth 75–112.5
   Two subsets each: latin + latin-ext. latin-ext is required, not optional:
   it carries the dagger (U+2020), the second reference mark.
   Files live in site/fonts/ (licences in site/fonts/LICENSES.txt). The build
   appends ?v=<content hash> to each url() so /fonts/* can be cached forever.
   Family names match Fontsource's own CSS ("… Variable"), which the token
   stacks in tokens.css name first.
   ========================================================================== */

/* Imbue: "standard" files carry both axes (wght + opsz) */
@font-face {
  font-family: "Imbue Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/fonts/imbue-latin-ext-standard-normal.woff2?v=196448fa597f") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Imbue Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/fonts/imbue-latin-standard-normal.woff2?v=e7e6c5a67594") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Brygada 1918: wght axis, roman + italic */
@font-face {
  font-family: "Brygada 1918 Variable"; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url("/fonts/brygada-1918-latin-ext-wght-normal.woff2?v=d95d916dffa4") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Brygada 1918 Variable"; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url("/fonts/brygada-1918-latin-wght-normal.woff2?v=e5f15ca62eaa") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Brygada 1918 Variable"; font-style: italic; font-display: swap; font-weight: 400 700;
  src: url("/fonts/brygada-1918-latin-ext-wght-italic.woff2?v=d5ad346cb39f") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Brygada 1918 Variable"; font-style: italic; font-display: swap; font-weight: 400 700;
  src: url("/fonts/brygada-1918-latin-wght-italic.woff2?v=a0de27c9cef1") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Martian Mono: "standard" files carry both axes (wght + wdth) */
@font-face {
  font-family: "Martian Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800; font-stretch: 75% 112.5%;
  src: url("/fonts/martian-mono-latin-ext-standard-normal.woff2?v=21fce7e290a2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Martian Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800; font-stretch: 75% 112.5%;
  src: url("/fonts/martian-mono-latin-standard-normal.woff2?v=f9c1655c2c9d") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── site/css/tokens.css ── */
/* ==========================================================================
   biblios · house tokens · "Bibliotheca, the night stacks" · final v1
   ---------------------------------------------------------------------------
   The site is a uniform edition bound in navy cloth. Every mark is tooled one
   of two ways:
     BLIND  tone-on-tone impressions  -> structure, rules, quiet figure parts
     GILT   foil, one subject per view -> the thing that matters here
   The one light object on the dark page is the bone LABEL (call numbers,
   fidelity). Corners are square, like cloth boards.
   Faces are declared in fonts.css (self-hosted, pinned). This file holds
   tokens only: the screen root, one phone block, and the print edition.
   Contrast for every pair below is computed by contrast.mjs from this file.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- grounds: navy book cloth ---------------------------------------- */
  --ground:        #0B1424;  /* night cloth: the page                            */
  --ground-raised: #111D31;  /* boards: catalogue card, figure wells, sheets     */
  --ground-sunk:   #08101D;  /* endpapers, shelf interior                         */
  --cloth-1:       #13213A;  /* spine cloths: one edition, three dye lots        */
  --cloth-2:       #172848;
  --cloth-3:       #101C33;

  /* ---- tooling ---------------------------------------------------------- */
  --blind:         #1E2C44;  /* decorative tone-on-tone rule        1.32:1       */
  --rule:          #2C3D5B;  /* visible hairline, separators        1.69:1       */
  --rule-strong:   #5E7296;  /* axes, essential outlines, leaders   3.79:1       */
  --gilt:          #DDB052;  /* foil: the one subject per view      9.13:1       */

  /* ---- inks (text) ------------------------------------------------------ */
  --ink:           #EEE7D7;  /* vellum: body, headlines, label mains  14.96:1    */
  --ink-soft:      #B3BAC7;  /* decks, captions, label notes           9.44:1    */
  --ink-faint:     #8C98AD;  /* sources, ticks, micro; floor for text  6.33:1    */

  /* ---- the label: the only light object --------------------------------- */
  --label:         #E8E0CC;  /* bone                                               */
  --label-ink:     #0B1424;  /* on bone                              14.01:1       */

  /* ---- argument roles ----------------------------------------------------- */
  --problem:       #F07A83;  /* carmine: heat, cost, loss, the difficulty  6.86:1 */
  --resolution:    #7EC6F6;  /* cyanotype: cool, supply, the fix           9.91:1 */
  --highlight:     var(--gilt);
  --focus:         var(--gilt);

  /* ---- data inks: six + vellum, a lightness ladder (OKLab L) ------------- */
  --d-gilt:        #DDB052;  /* 1  L78  the subject series               9.13:1  */
  --d-cyanotype:   #7EC6F6;  /* 2  L80  resolution / supply / cool       9.91:1  */
  --d-carmine:     #F07A83;  /* 3  L72  problem / return / cost          6.86:1  */
  --d-celadon:     #A4E3A0;  /* 4  L85                                  12.35:1  */
  --d-heliotrope:  #8F7DE8;  /* 5  L65                                   5.50:1  */
  --d-slate:       #6A7995;  /* 6  L57  context, "other", the rest       4.20:1  */
  --d-vellum:      #EEE7D7;  /* 7  L93  ink series; never beside celadon 14.96:1 */

  /* ---- class tapes: a post's Dewey hundred picks its tape ---------------- */
  --class-000:     var(--d-slate);
  --class-100:     var(--d-slate);
  --class-200:     var(--d-slate);
  --class-300:     var(--d-celadon);     /* economics, money, land, law      */
  --class-400:     var(--d-slate);
  --class-500:     var(--d-cyanotype);   /* science, climate, surveying      */
  --class-600:     var(--d-heliotrope);  /* technology, engineering, energy  */
  --class-700:     var(--d-carmine);     /* planning, architecture, cities   */
  --class-800:     var(--d-slate);
  --class-900:     var(--d-gilt);        /* geography, history, places       */

  /* ---- figure kit (canvas reads these) ----------------------------------- */
  --fig-hatch:        #2A3A57;  /* 45° hatch on section cuts                    */
  --fig-cut-fill:     #111D31;  /* poché under the hatch                        */
  --fig-hair:         0.75px;   /* pedestals, grids, secondary edges            */
  --fig-leader:       0.9px;    /* flagpole leaders                             */
  --fig-line:         1.25px;   /* objects in section or elevation              */
  --fig-strong:       2px;      /* datum lines: slab tops, the deck, roofs      */
  --fig-flow:         2.25px;   /* nominal flow weight (band + core below)      */
  --fig-flow-band:    7px;      /* translucent band under a flow                */
  --fig-flow-core:    1.6px;    /* the flow line itself                         */
  --fig-flow-alpha:   0.2;      /* band opacity (print 0.16)                    */
  --fig-chevron-gap:  38px;     /* open chevrons along a flow                   */
  --fig-chevron-drift: 14;      /* px per second, only while on screen          */
  --fig-hatch-pitch:  5px;
  --fig-dash:         3px;      /* beyond / hidden: dash = gap                  */
  --fig-pin:          2.2px;    /* leader anchor radius                         */
  --fig-halo:         3.8px;    /* ground ring around pins, rings, keys         */
  --fig-label-size:   10px;     /* label main: mono caps                        */
  --fig-note-size:    12px;     /* label note: text italic                      */
  --fig-micro-size:   10px;     /* scale numerals, axis ticks                   */
  --fig-key-size:     20px;     /* reference marks inside a plate (the * glyph sits small) */
  --fig-water-pitch:  4px;      /* maps: engraved water-lining                  */

  /* ---- type ------------------------------------------------------------- */
  --font-display: "Imbue Variable", "Imbue", Didot, "Bodoni 72", Georgia, serif;
  --font-text:    "Brygada 1918 Variable", "Brygada 1918", "Iowan Old Style", Georgia, serif;
  --font-label:   "Martian Mono Variable", "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* light-on-navy renders heavier: screen weights sit below print weights */
  --wght-display:        440;
  --wght-display-strong: 560;
  --wght-text:           400;
  --wght-text-strong:    600;
  --wght-label:          380;
  --wght-label-strong:   520;
  --wdth-label:          87.5%;  /* Martian Mono semi-condensed, always */

  --fs-wordmark:   46px;                                        /* 38 on phone */
  --fs-display:    clamp(2.875rem, 1.6rem + 4.4vw, 5.5rem);    /* 46 -> 88    */
  --fs-h2:         clamp(2.25rem, 1.5rem + 2.9vw, 4.25rem);    /* 36 -> 68    */
  --fs-h3:         clamp(1.5rem, 1.25rem + .9vw, 2rem);        /* 24 -> 32    */
  --fs-stat:       clamp(2.75rem, 2rem + 2.6vw, 4.5rem);       /* 44 -> 72    */
  --fs-standfirst: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);    /* 20 -> 26    */
  --fs-deck:       clamp(1.0625rem, 1rem + .25vw, 1.1875rem);  /* 17 -> 19    */
  --fs-body:       1.0625rem;   /* 17 */
  --fs-small:      .9375rem;    /* 15 */
  --fs-label:      .6875rem;    /* 11, mono caps */
  --fs-micro:      .625rem;     /* 10, mono: call numbers, fidelity */
  --display-min:   22px;        /* Imbue never below this */
  --lh-display:    .94;
  --lh-text:       1.58;
  --track-label:   .02em;
  --track-caps:    .12em;

  /* ---- space: 4-pt ------------------------------------------------------ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---- layout ----------------------------------------------------------- */
  --max:           1440px;
  --gutter:        clamp(16px, 4vw, 64px);
  --col-margin:    92px;    /* signature letter, staircase, folio        */
  --col-copy-min:  290px;
  --col-copy-max:  360px;
  --col-gap:       44px;
  --measure:       34rem;
  --runhead:       44px;    /* sticky running head                       */
  --tap:           44px;    /* minimum touch target                      */
  --spine-lift:    18px;

  /* ---- radii: cloth boards are square ----------------------------------- */
  --r-0:     0;
  --r-label: 1px;           /* labels only: a die-cut softness            */
  --r-hole:  50%;           /* the catalogue card's rod hole              */

  /* ---- motion: films, not bounces ---------------------------------------- */
  --ease-film:  cubic-bezier(.22, .61, .18, 1);
  --dur-quick:  160ms;
  --dur-pull:   320ms;      /* a spine lifted from the shelf              */
  --dur-film:   3000ms;     /* a figure's full build                      */
  --dur-unit:   14ms;       /* unit grids fill one square per step        */
}

/* ---- phone ------------------------------------------------------------- */
@media (max-width: 700px) {
  :root {
    --runhead:     48px;
    --fs-wordmark: 38px;
  }
}

/* ==========================================================================
   PRINT EDITION: navy ink on white stock. Same book, reversed.
   Gilt becomes burnished ochre ink; the bone label becomes a navy block.
   ========================================================================== */
@media print {
  :root {
    color-scheme: light;
    --ground:        #FFFFFF;
    --ground-raised: #F3F5F8;
    --ground-sunk:   #F3F5F8;
    --cloth-1:       #E8ECF2;
    --cloth-2:       #E1E6EE;
    --cloth-3:       #ECEFF4;
    --blind:         #DCE1E9;
    --rule:          #C2C9D5;
    --rule-strong:   #7F8CA2;
    --gilt:          #7D5A0B;   /* 6.29:1, usable as text */
    --ink:           #0F1D35;
    --ink-soft:      #3D4A63;
    --ink-faint:     #56637B;
    --label:         #0F1D35;
    --label-ink:     #FFFFFF;
    --problem:       #B3263F;
    --resolution:    #1F5E99;
    --d-gilt:        #AD7B00;
    --d-cyanotype:   #1F5E99;
    --d-carmine:     #921833;
    --d-celadon:     #35A868;
    --d-heliotrope:  #7F62E4;
    --d-slate:       #4A5568;
    --d-vellum:      #0F1D35;
    --fig-hatch:     #B9C1CE;
    --fig-cut-fill:  #FFFFFF;
    --fig-flow-alpha: 0.16;
    --wght-display:        500;
    --wght-display-strong: 620;
    --wght-label:          430;
    --wght-label-strong:   580;
    --fs-display: 40pt;
    --fs-h2:      28pt;
    --fs-h3:      17pt;
    --fs-stat:    36pt;
    --fs-standfirst: 16pt;
    --fs-deck:    12pt;
    --fs-body:    10.5pt;
    --fs-small:   9.5pt;
    --fs-label:   8pt;
    --fs-micro:   7.5pt;
  }
}

/* ── site/css/site.css ── */
/* ==========================================================================
   biblios · the shell: "Bibliotheca, the night stacks" (DESIGN.md)
   Ported from the house specimen. Tokens live in tokens.css; the print edition
   in print.css. Blind tooling for structure, gilt once per view for the
   subject, bone for facts (call numbers, fidelity). Corners are square.
   ========================================================================== */

/* ---- base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--runhead) + 8px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground); }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-text);
  font-kerning: normal; font-variant-numeric: proportional-nums; /* Brygada cuts no onum: figures are lining */
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; transition: text-decoration-color var(--dur-quick), color var(--dur-quick); }
a:hover { text-decoration-color: var(--gilt); }
h1, h2, h3, p, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 1.5px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--gilt); color: var(--ground); }
mark.hl { background: none; color: var(--gilt); }            /* the house highlight: flat foil on the subject */
data.v, .nobr { white-space: nowrap; }
b, strong { font-weight: var(--wght-text-strong); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.mono {
  font-family: var(--font-label); font-stretch: var(--wdth-label); font-weight: var(--wght-label);
  font-size: var(--fs-label); line-height: 1.45; letter-spacing: var(--track-label); font-variant-numeric: lining-nums tabular-nums;
}
.caps { text-transform: uppercase; letter-spacing: var(--track-caps); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: absolute; left: var(--gutter); top: 8px; z-index: 30; padding: 10px 14px; background: var(--label); color: var(--label-ink);
  font-family: var(--font-label); font-stretch: var(--wdth-label); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--track-caps);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* double fillet: a bookbinder's thick–thin rule, tooled blind */
.fillet { height: 5px; background:
  linear-gradient(var(--rule), var(--rule)) 0 0 / 100% 2px no-repeat,
  linear-gradient(var(--rule), var(--rule)) 0 4px / 100% 1px no-repeat; }

/* the bone label: the only light object on the page */
.bone {
  display: inline-block; background: var(--label); color: var(--label-ink);
  font-family: var(--font-label); font-stretch: var(--wdth-label); font-weight: var(--wght-label-strong);
  font-size: var(--fs-micro); line-height: 1.3; letter-spacing: .04em;
  padding: 4px 7px; border-radius: var(--r-label); font-variant-numeric: lining-nums tabular-nums;
}
.tape { display: inline-block; flex: none; width: 10px; height: 10px; background: var(--tape, var(--gilt)); vertical-align: -1px; }

/* fidelity: every plate says how true it is, on bone, 5 measured to 1 schematic */
.fid {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; max-width: 100%;
  background: var(--label); color: var(--label-ink); padding: 5px 9px 5px 8px; border-radius: var(--r-label);
  outline: .75px solid color-mix(in srgb, var(--label-ink) 50%, transparent); outline-offset: -3px;
  font-family: var(--font-label); font-stretch: var(--wdth-label); font-weight: var(--wght-label);
  font-size: var(--fs-micro); line-height: 1.3; letter-spacing: .06em; text-transform: uppercase;
  font-variant-numeric: lining-nums tabular-nums;
}
.fid b { font-weight: var(--wght-label-strong); }
.fid b:not(:last-child)::after { content: "\00a0·"; font-weight: var(--wght-label); } /* the separator stays on line one if the note wraps */
.fid-cells { display: inline-flex; gap: 2px; }
.fid-cells i { width: 6px; height: 6px; box-shadow: inset 0 0 0 1px var(--label-ink); }
.fid[data-level="1"] i:nth-child(-n+1), .fid[data-level="2"] i:nth-child(-n+2), .fid[data-level="3"] i:nth-child(-n+3),
.fid[data-level="4"] i:nth-child(-n+4), .fid[data-level="5"] i:nth-child(-n+5) { background: var(--label-ink); }

/* reference marks key a number in the copy to the one place in the plate where it lives */
.key { font-family: var(--font-text); font-weight: var(--wght-text-strong); font-style: normal; color: var(--ink); }
sup.key { font-size: .42em; line-height: 0; vertical-align: .95em; margin-left: .08em; }

/* combed paper (tools/lib/comb.mjs): inks inherit into the <use>d symbols */
.comb { --cf: var(--blind); --ci: var(--rule); --cg: var(--gilt); --cx: var(--blind); }

/* ==========================================================================
   Headband + masthead
   ========================================================================== */
.headband {
  height: 3px; opacity: .9;
  background: repeating-linear-gradient(90deg, var(--gilt) 0 2px, transparent 2px 5px, var(--ink-faint) 5px 7px, transparent 7px 10px);
}
.mast { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 8px 40px; padding-block: 26px 18px; }
.brand { display: inline-flex; align-items: flex-end; gap: 12px; text-decoration: none; color: var(--ink); }
.brandmark { width: 30px; height: 30px; color: var(--gilt); flex: none; margin-bottom: 7px; }
.wordmark { font-family: var(--font-display); font-weight: var(--wght-display-strong); font-size: var(--fs-wordmark); line-height: .8; letter-spacing: -.005em; }
.mast-tag { font-style: italic; color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.35; max-width: 30ch; padding-bottom: 2px; }
.mast-nav { display: flex; gap: 22px; padding-bottom: 3px; }
.mast-nav a { text-decoration: none; color: var(--ink-soft); padding-block: 6px; }
.mast-nav a:hover { color: var(--ink); }
.mast-nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--gilt); }

/* ==========================================================================
   Home: the shelf of spines and the catalogue card
   ========================================================================== */
.home { padding-block: 40px 56px; }
.stacks { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 0 56px; align-items: end; }
.stacks-intro { grid-column: 2; grid-row: 1; align-self: start; padding-top: 6px; }
.home-title { font-family: var(--font-display); font-weight: var(--wght-display); font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: -.01em; max-width: 13ch; text-wrap: balance; }
.home-note { margin-top: 18px; color: var(--ink-soft); max-width: 36ch; font-style: italic; }
.home-new { margin-top: 16px; color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.45; max-width: 44ch; }
.home-new .mono { display: block; color: var(--ink-faint); margin-bottom: 2px; }
.home-new a { font-style: italic; text-decoration-color: var(--rule-strong); }
.home-new a:hover { text-decoration-color: var(--gilt); }
.shelf-wrap { grid-column: 1; grid-row: 1 / span 2; position: relative; min-width: 0; }
/* thirteen volumes and more: one bay per Dewey hundred, side by side like the sections of a bookcase,
   each on its own ruled shelf with its range guide; the card waits beside them */
.stacks--bays { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; align-items: start; }
.stacks--bays .shelf-wrap { grid-row: 1 / span 3; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 48px 40px; }
.stacks--bays .bay { flex: none; min-width: 0; max-width: 100%; }
.stacks--bays .shelf { min-height: 0; }
.stacks--bays .card-wrap { grid-row: 2 / span 2; position: sticky; top: 24px; }

.shelf { display: flex; align-items: flex-end; gap: 5px; min-height: 580px; padding-top: 28px; }
.vol { flex: none; position: relative; }
.vol::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; background: transparent; transition: background var(--dur-quick); }
.vol.is-active::after { background: var(--gilt); }

/* a spine: combed cloth (SVG), a plain title panel inside a blind double rule, the headband at its head */
.spine {
  --k: var(--spine-k, 1);
  --cf: var(--rule); --ci: var(--rule-strong); --cx: var(--rule); --cg: var(--gilt);
  position: relative; display: flex; flex-direction: column;
  width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k));
  padding: calc(var(--h) * var(--k) * .21 - 29px) 7px calc(var(--h) * var(--k) * .07);
  background: var(--cloth); color: var(--gilt); text-decoration: none;
  transition: transform var(--dur-pull) var(--ease-film);
}
.spine::before { /* headband: stitched silk at the head */
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--gilt) 0 2px, transparent 2px 4px, var(--ink-faint) 4px 6px, transparent 6px 8px);
}
.cloth { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.cloth--flat { display: none; }
.spine-panel {
  position: relative; flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
  padding-block: 10px; background: var(--cloth); overflow: hidden;
  border: 1px solid var(--rule); outline: 1px solid var(--blind); outline-offset: -4px;
}
.spine-no { flex: none; font-family: var(--font-text); font-weight: var(--wght-text-strong); font-size: 13px; line-height: 1; letter-spacing: .1em; color: var(--gilt); padding: 3px 0 6px; } /* Imbue never below 22 px */
.spine-title {
  flex: 1; min-height: 0; max-width: 100%; overflow: hidden; writing-mode: vertical-rl; text-orientation: mixed; text-wrap: balance;
  font-family: var(--font-display); font-weight: var(--wght-display-strong); font-size: max(var(--display-min), calc(var(--fs) * var(--k)));
  line-height: 1.04; letter-spacing: .005em; padding-inline: calc(8px * var(--k)) calc(12px * var(--k));
}
.spine-title .t-long { display: none; }
.spine-label {
  flex: none; display: flex; flex-direction: column; align-items: center; margin-top: 8px;
  width: calc(100% - 8px); padding: 0 4px 5px; text-align: center;
}
.spine-label .tape { display: block; width: calc(100% + 8px); height: 4px; margin: 0 -4px 4px; }
.vol.is-active .spine { transform: translateY(calc(-1 * var(--spine-lift))); }
.spine:focus-visible { outline-offset: 4px; }
.vol.is-draft .spine-panel { border-style: dashed; }
.draft-tag { color: var(--problem); }

.bookend { flex: none; align-self: flex-end; width: 12px; height: 188px; margin-left: 10px; background: var(--rule); box-shadow: inset 0 2px 0 var(--gilt); }
.shelf-edge--span { grid-column: 1 / -1; }
.shelf-edge {
  margin-top: 7px; padding-top: 12px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--ink-faint);
  background:
    linear-gradient(var(--rule-strong), var(--rule-strong)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 4px / 100% 1px no-repeat;
}

/* the catalogue card: 3 × 5 in proportion, rod hole at the foot */
.card-wrap { grid-column: 2; grid-row: 2; padding-top: 40px; display: grid; gap: 40px; }
.card {
  position: relative; background: var(--ground-raised); border: 1px solid var(--rule);
  padding: 22px 24px 14px 20px; max-width: 540px; display: flex; flex-direction: column;
}
.card-tab { position: absolute; top: -9px; left: 19px; width: 76px; height: 9px; background: var(--tape); }
.card-no { position: absolute; top: 10px; right: 14px; color: var(--ink-faint); }
.card-grid { display: grid; grid-template-columns: 76px 1fr; gap: 0 14px; flex: 1; }
.card-call { display: flex; flex-direction: column; color: var(--gilt); font-weight: var(--wght-label-strong); font-size: 12px; line-height: 1.5; padding-top: 3px; }
.card-body { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); padding-top: 6px; }
.card-body p { padding-left: 1.6em; text-indent: -1.6em; }
.card-body p + p { margin-top: 8px; }
.card-title a { text-decoration: none; }
.card-title a b { font-weight: var(--wght-text-strong); color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .18em; transition: text-decoration-color var(--dur-quick); }
.card-title a:hover b, .card-title a:focus-visible b { text-decoration-color: var(--gilt); }
.card-open { font-style: italic; }
.card-trace { color: var(--ink-faint); }
.card-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 18px; color: var(--ink-faint); }
.card-foot > :last-child { text-align: right; }
.hole { width: 13px; height: 13px; border-radius: var(--r-hole); border: 1px solid var(--rule-strong); background: var(--ground); }
/* with scripting, the card shows the lifted volume; without it, every card stands in the list */
@media (scripting: enabled) {
  .card-wrap .card:not(.is-active) { display: none; }
}

/* an empty shelf: the bay, a bookend, and a blank card waiting for its first entry */
.ghost { flex: none; width: calc(var(--w) * var(--spine-k, 1)); height: calc(var(--h) * var(--spine-k, 1)); border: 1px solid var(--blind); outline: 1px solid var(--blind); outline-offset: -5px; }
.card--blank .card-body p { min-height: 1.5em; border-bottom: 1px solid var(--blind); padding-left: 0; text-indent: 0; }
.card--blank .card-body p:first-child { color: var(--ink-soft); font-style: italic; border: 0; }

/* ==========================================================================
   Post: running head with the collation staircase
   ========================================================================== */
.post { position: relative; }
.runhead { position: sticky; top: 0; z-index: 10; background: var(--ground); border-bottom: 1px solid var(--blind); }
.runhead-in { height: var(--runhead); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 20px; }
.rh-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--font-display); font-weight: var(--wght-display-strong); font-size: 22px; line-height: 1; }
.rh-brand svg { width: 16px; height: 16px; color: var(--gilt); }
.rh-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); font-size: var(--fs-small); }
.rh-title i { color: var(--ink); }
.rh-title .mono { margin-left: 10px; color: var(--gilt); }
.rh-sig {
  appearance: none; background: none; border: 0; margin: 0; padding: 0; color: var(--ink-soft); cursor: pointer; font: inherit;
  min-width: 7.5em; min-height: var(--tap); text-align: right; text-transform: uppercase; letter-spacing: var(--track-caps);
}
.rh-sig.mono { font-family: var(--font-label); font-size: var(--fs-label); }
.rh-sig b { color: var(--gilt); font-weight: var(--wght-label-strong); }
.rh-sig:hover, .rh-sig[aria-expanded="true"] { color: var(--ink); }

/* contents sheet: the signatures as a list, opened from the running head */
.toc-wrap { position: relative; height: 0; }
.toc-sheet {
  position: absolute; top: 0; right: var(--gutter); width: min(430px, calc(100% - 2 * var(--gutter))); z-index: 11;
  background: var(--ground-raised); border: 1px solid var(--rule); border-top: 0; padding: 4px 0 8px;
  max-height: calc(100svh - var(--runhead) - 16px); overflow-y: auto;
}
.toc-sheet[hidden] { display: none; }
.toc-sheet li a {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 0 8px; min-height: var(--tap);
  padding-inline: 14px 16px; text-decoration: none; color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.3;
}
.toc-sheet li + li { border-top: 1px solid var(--blind); }
.toc-sheet b { font-family: var(--font-label); font-stretch: var(--wdth-label); font-weight: var(--wght-label-strong); font-size: var(--fs-label); color: var(--gilt); }
.toc-sheet a:hover { color: var(--ink); background: var(--ground); }
.toc-sheet .is-current a { color: var(--ink); }
.toc-sheet .is-current a::after { content: "here"; font-family: var(--font-label); font-stretch: var(--wdth-label); font-size: var(--fs-micro); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gilt); }

/* collation staircase: each signature is a fold; its mark steps down one notch */
.collation ol { display: flex; height: 28px; }
.collation li { position: relative; width: 13px; height: 28px; border-left: 1px solid var(--blind); }
.collation li:last-child { border-right: 1px solid var(--blind); }
.collation a { position: absolute; inset: 0; }
.collation li::before {
  content: ""; position: absolute; left: 2px; right: 2px; height: 4px;
  top: calc(2px + var(--i) * (20px / max(1, var(--n) - 1))); background: var(--rule);
  transition: background var(--dur-quick);
}
.collation li.is-read::before { background: var(--ink-faint); }
.collation li.is-current::before { background: var(--gilt); left: 1px; right: 1px; }
.collation li:hover::before { background: var(--ink); }

/* ==========================================================================
   Signature A: the title page (front endpaper verso + title recto)
   ========================================================================== */
.titlepage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100svh - var(--runhead)); max-width: var(--max); margin-inline: auto; }
.endpaper { position: relative; background: var(--ground-sunk); min-height: 320px; overflow: hidden; }
.endpaper .comb { position: absolute; left: 50%; top: 50%; translate: -50% -50%; max-width: none; }
.endpaper--front .comb { width: max(100%, 640px); height: max(100%, 1000px); }
.endpaper--back .comb { width: max(100%, 1920px); height: max(100%, 200px); }
.endpaper::after { /* the hinge: a blind double rule where the endpaper meets the title leaf */
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 5px;
  border-left: 1px solid var(--rule); border-right: 1px solid var(--blind);
}
.call-bone { position: absolute; left: var(--gutter); bottom: 28px; font-size: 11px; line-height: 1.35; padding: 0 8px 6px; }
.call-bone .tape { display: block; width: calc(100% + 16px); height: 4px; margin: 0 -8px 5px; }
.endpaper-note { position: absolute; left: calc(var(--gutter) + 92px); bottom: 30px; right: 16px; color: var(--ink-faint); max-width: 26ch; }
.endpaper-note span { background: var(--ground-sunk); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 1px 3px; }
.tp { display: flex; flex-direction: column; gap: 28px; padding: 56px var(--gutter) 44px clamp(24px, 5vw, 80px); min-width: 0; }
.kicker { display: flex; align-items: center; gap: 4px 10px; color: var(--ink-soft); flex-wrap: wrap; }
.kicker .call { color: var(--gilt); text-transform: none; }
.tp h1 {
  margin-top: auto; font-family: var(--font-display); font-weight: var(--wght-display); font-size: var(--fs-display);
  line-height: var(--lh-display); letter-spacing: -.012em; max-width: 16ch; text-wrap: balance;
}
.standfirst { font-style: italic; font-size: var(--fs-standfirst); line-height: 1.38; color: var(--ink-soft); max-width: 30ch; text-wrap: pretty; }
.draft-note { color: var(--problem); }
.imprint { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px 40px; padding-top: 18px; }
.imprint dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; color: var(--ink-soft); align-content: start; padding-top: 4px; }
.imprint dt { color: var(--ink-faint); }
.contents { color: var(--ink-soft); }
.contents li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding-block: 3px; border-top: 1px solid var(--blind); font-size: var(--fs-small); line-height: 1.35; }
.contents li:last-child { border-bottom: 1px solid var(--blind); }
.contents b { font-family: var(--font-label); font-stretch: var(--wdth-label); font-weight: var(--wght-label-strong); font-size: var(--fs-label); color: var(--gilt); padding-top: 2px; }
.contents a { text-decoration-color: transparent; }
.contents a:hover { color: var(--ink); text-decoration-color: var(--gilt); }
.contents .here { color: var(--ink); }

/* ==========================================================================
   Signatures B…: the sections. Layouts split | wide | full | text.
   ========================================================================== */
.sheet {
  display: grid; grid-template-columns: var(--col-margin) minmax(var(--col-copy-min), var(--col-copy-max)) minmax(0, 1fr);
  gap: 0 var(--col-gap); align-items: center; padding-block: 48px; border-top: 1px solid var(--blind);
}
.margin { align-self: start; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; color: var(--ink-faint); }
.sig-letter { font-family: var(--font-display); font-weight: var(--wght-display-strong); font-size: 56px; line-height: .8; color: var(--gilt); }
.sig-mark { height: 28px; width: auto; color: var(--rule); }
.sig-mark .r { fill: var(--ink-faint); }
.sig-mark .c { fill: var(--gilt); }
.copy { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.copy h2 { font-family: var(--font-display); font-weight: var(--wght-display); font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: -.01em; text-wrap: balance; }
.deck { font-size: var(--fs-deck); color: var(--ink-soft); line-height: 1.55; text-wrap: pretty; }
.deck em, .deck strong { color: var(--ink); }
.body { display: flex; flex-direction: column; gap: .85em; max-width: var(--measure); text-wrap: pretty; }
.body em, .body strong { color: var(--ink); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.stat { padding-top: 14px; min-width: 0; background:
  linear-gradient(var(--rule), var(--rule)) 0 0 / 100% 2px no-repeat,
  linear-gradient(var(--rule), var(--rule)) 0 4px / 100% 1px no-repeat; }
.stat:first-child { background: /* the subject stat: its fillet carries a gilt lead */
  linear-gradient(var(--gilt), var(--gilt)) 0 0 / 38px 2px no-repeat,
  linear-gradient(var(--rule), var(--rule)) 38px 0 / 100% 2px no-repeat,
  linear-gradient(var(--rule), var(--rule)) 0 4px / 100% 1px no-repeat; }
.stat > b { display: block; font-family: var(--font-display); font-weight: var(--wght-display); font-size: var(--fs-stat); line-height: 1; letter-spacing: -.01em; font-variant-numeric: lining-nums; white-space: nowrap; }
.stat > b small { font-size: .42em; font-family: var(--font-label); font-stretch: var(--wdth-label); font-weight: var(--wght-label); letter-spacing: 0; margin-left: 6px; color: var(--ink-soft); vertical-align: baseline; }
.stat > span { display: block; margin-top: 8px; color: var(--ink-soft); text-wrap: balance; }
.source { color: var(--ink-faint); padding-top: 12px; border-top: 1px solid var(--blind); text-wrap: pretty; }
.source .n { color: var(--ink-faint); margin-right: .6em; }
.source b { color: var(--ink-soft); font-weight: var(--wght-label-strong); }
.source a { color: var(--ink-soft); text-decoration: none; }
.source a:hover { color: var(--ink); }

/* split: [margin][copy][plate], vertically centred */
.sheet--split > .plate { grid-column: 3; }
/* wide: copy across two columns, then the plate across copy + plate */
.sheet--wide { align-items: start; row-gap: 36px; }
.sheet--wide > .copy { grid-column: 2 / 4; display: grid; grid-template-columns: minmax(0, 38rem) minmax(0, 1fr); gap: 20px 56px; align-items: end; }
.sheet--wide > .copy > * { grid-column: 1; }
.sheet--wide > .copy > .stats, .sheet--wide > .copy > .source { grid-column: 2; }
.sheet--wide > .copy > .stats { grid-row: 1 / span 3; align-self: end; }
.sheet--wide > .plate { grid-column: 2 / 4; }
/* text: the copy at the measure; a figure, if any, follows across the columns */
.sheet--text { align-items: start; row-gap: 36px; }
.sheet--text > .copy { grid-column: 2 / 4; max-width: var(--measure); }
.sheet--text > .plate { grid-column: 2 / 4; width: 100%; max-width: 60rem; }
/* full: copy on the grid, the plate bleeds to the edges (inner max 1920), its caption row back on the grid */
.sig-full { border-top: 1px solid var(--blind); padding-block: 0 48px; }
.sig-full > .sheet { border-top: 0; padding-bottom: 32px; align-items: start; }
.sig-full > .sheet > .copy { grid-column: 2 / 4; display: grid; grid-template-columns: minmax(0, 38rem) minmax(0, 1fr); gap: 20px 56px; align-items: end; }
.sig-full > .sheet > .copy > * { grid-column: 1; }
.sig-full > .sheet > .copy > .stats, .sig-full > .sheet > .copy > .source { grid-column: 2; }
.sig-full > .sheet > .copy > .stats { grid-row: 1 / span 3; }
.plate--full { width: 100%; max-width: 1920px; margin-inline: auto; padding: 0; border: 0; outline: 0; border-block: 1px solid var(--blind); }
.plate--full > .stage { --stage-cap: 92svh; }
.plate--full > figcaption { max-width: var(--max); margin-inline: auto; margin-top: 0; padding: 12px var(--gutter) 0 calc(var(--gutter) + var(--col-margin) + var(--col-gap)); border-top: 0; }
/* dark: an emphasis sheet on endpaper stock, full bleed */
.sheet--dark, .sig-full.sheet--dark { background: var(--ground-sunk); box-shadow: 0 0 0 100vmax var(--ground-sunk); clip-path: inset(0 -100vmax); }
.sheet--dark .plate { background: var(--ground-sunk); }

/* ==========================================================================
   Plates: canvas stage (kit), poster (print, no JS, failure), caption row
   ========================================================================== */
.plate { position: relative; min-width: 0; padding: 16px 16px 12px; border: 1px solid var(--blind); outline: 1px solid var(--blind); outline-offset: 3px; background: var(--ground); container-type: inline-size; }
/* CSS owns the stage size: full column width, height from the figure's fit ratio (wide ≥ 560 px, narrow below),
   never under its min height. The kit sizes its canvas to this box. */
.stage {
  position: relative; width: min(100%, calc(var(--stage-cap, 86svh) * var(--ratio-w, 1.6))); margin-inline: auto;
  aspect-ratio: var(--ratio-w, 1.6); min-height: var(--min-h, 0px);
}
@container (width < 560px) { .stage { width: 100%; aspect-ratio: var(--ratio-n, 1); } }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster { display: none; width: 100%; height: auto; background: var(--ground); }
.plate.failed .stage { display: none; }
.plate.failed .poster { display: block; }
@media (scripting: none) {
  .stage { display: none; }
  .poster { display: block; }
}
.poster--print { display: none !important; } /* paper only (print.css) */
.plate figcaption {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--blind);
}
.fig-no { color: var(--gilt); font-weight: var(--wght-label-strong); flex: none; }
/* caption row (a grid, so every plate sets the same way): Fig. no · caption and key lines · the fidelity label
   top-right; under the caption, legend and honesty tags on one quiet line; the data table last, full width. */
.plate figcaption > .fig-no { grid-column: 1; }
.cap { grid-column: 2; font-style: italic; color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.4; text-wrap: pretty; max-width: 62ch; }
.plate figcaption > .fid { grid-column: 3; grid-row: 1; align-self: start; justify-self: end; }
.cap-meta { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
@container (width < 620px) {
  .plate figcaption { grid-template-columns: auto minmax(0, 1fr); }
  .plate figcaption > .fid { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .cap-meta { grid-column: 1 / -1; }
}
.cap .keyline { display: block; margin-top: 2px; }
.cap .keyline .key { font-style: normal; margin-right: .2em; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-soft); }
.legend i { display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: 3px; background: var(--c); }
.tags { color: var(--ink-faint); }
.tags span + span::before { content: " / "; color: var(--rule-strong); }
.table { grid-column: 1 / -1; margin-top: 2px; }
.table summary { cursor: pointer; color: var(--ink-faint); list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.table summary::-webkit-details-marker { display: none; }
.table summary::before { content: ""; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; rotate: -45deg; transition: rotate var(--dur-quick); }
.table[open] summary::before { rotate: 45deg; }
.table summary:hover { color: var(--ink-soft); }
.table table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: var(--fs-small); line-height: 1.4; }
.table th, .table td { text-align: left; padding: 7px 12px 7px 0; border-top: 1px solid var(--blind); vertical-align: baseline; }
.table thead th { color: var(--ink-faint); font-weight: var(--wght-label); border-top: 0; }
.table td { color: var(--ink-soft); }
.table td.num { color: var(--ink); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.table td.src { color: var(--ink-faint); }
.table-wrap { overflow-x: auto; }

/* ==========================================================================
   Endmatter: sources, then the shelf this volume stands on
   ========================================================================== */
.endmatter { padding-block: 64px 72px; border-top: 1px solid var(--blind); }
.em-grid { display: grid; grid-template-columns: var(--col-margin) minmax(0, 1fr); gap: 0 var(--col-gap); }
.em-grid > .mono { color: var(--ink-faint); padding-top: 8px; }
.em-grid h2 { font-family: var(--font-display); font-weight: var(--wght-display); font-size: var(--fs-h3); line-height: 1; }
.em-grid .deck { margin-top: 10px; max-width: 60ch; }
.sources { counter-reset: src; margin-top: 24px; max-width: 60rem; }
.sources li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; padding-block: 10px; border-top: 1px solid var(--blind); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
.sources li:last-child { border-bottom: 1px solid var(--blind); }
.sources li:target { background: var(--ground-raised); }
.sources .n { color: var(--ink-faint); padding-top: 2px; }
.sources a { color: var(--ink); }
.sources .for { display: block; color: var(--ink-faint); }
.ledger { margin-top: 32px; max-width: 60rem; }
.ledger h3 { color: var(--ink-faint); font-weight: var(--wght-label-strong); margin-bottom: 8px; }
.ledger ul + h3 { margin-top: 24px; }
.ledger ul { columns: 2 22rem; column-gap: 48px; }
.ledger li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 5.5rem; gap: 0 14px; align-items: baseline;
  padding-block: 6px; border-top: 1px solid var(--blind); break-inside: avoid;
  font-size: var(--fs-small); line-height: 1.4; color: var(--ink-soft);
}
.ledger .v { color: var(--ink); font-size: 12px; text-align: right; white-space: nowrap; }
.ledger .how { color: var(--ink-faint); }

.beside {
  display: grid; grid-template-columns: var(--col-margin) minmax(var(--col-copy-min), var(--col-copy-max)) minmax(0, 1fr);
  gap: 0 var(--col-gap); align-items: end; padding-block: 64px 76px; border-top: 1px solid var(--blind);
}
.beside .margin { align-self: start; }
.beside .sig-mark { color: var(--ink-faint); }
.beside-copy { display: flex; flex-direction: column; gap: 14px; align-self: start; }
.beside-copy h2 { font-family: var(--font-display); font-weight: var(--wght-display); font-size: var(--fs-h3); line-height: 1; letter-spacing: -.005em; }
.beside-copy .deck { max-width: 34ch; }
.beside-shelf { position: relative; padding-bottom: 46px; min-width: 0; }
.shelf--beside { --spine-k: .72; min-height: 0; padding-top: 30px; }
.shelf--beside .vol:not(.is-active):hover .spine { transform: translateY(-8px); }
.beside-edge { height: 5px; margin-top: 7px; background:
  linear-gradient(var(--rule-strong), var(--rule-strong)) 0 0 / 100% 2px no-repeat,
  linear-gradient(var(--rule), var(--rule)) 0 4px / 100% 1px no-repeat; }
.vol-rel { position: absolute; left: 0; top: calc(100% + 24px); white-space: nowrap; color: var(--ink-faint); }
.vol.is-active .vol-rel { color: var(--gilt); }
.shelf-end { flex: none; align-self: stretch; display: flex; align-items: flex-end; gap: 16px; margin-left: 10px; }
.shelf-end i { flex: none; width: 12px; height: 124px; background: var(--rule); box-shadow: inset 0 2px 0 var(--gilt); }
.shelf-end p { max-width: 25ch; text-wrap: balance; padding-bottom: 2px; color: var(--ink-soft); font-style: italic; font-size: var(--fs-small); line-height: 1.4; }

/* ==========================================================================
   Colophon (every page ends on it; a volume adds its back endpaper)
   ========================================================================== */
.colophon { border-top: 1px solid var(--blind); }
.endpaper--back { height: 180px; min-height: 0; }
.endpaper--back::after { display: none; }
.colo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 56px; padding-block: 48px 40px; align-items: start; }
.colo-mark { display: flex; align-items: flex-end; gap: 10px; text-decoration: none; color: var(--ink); }
.colo-mark .wordmark { font-size: 34px; }
.colo-mark svg { width: 22px; height: 22px; color: var(--gilt); margin-bottom: 4px; }
.colo p { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.55; }
.colo-note { margin-top: 14px; }
.colo--short { grid-template-columns: minmax(0, 28rem); }
.colo h2 { font-family: var(--font-label); font-stretch: var(--wdth-label); font-weight: var(--wght-label-strong); font-size: var(--fs-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.colo dl { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 6px 14px; font-size: var(--fs-small); line-height: 1.45; }
.colo dt { font-family: var(--font-label); font-stretch: var(--wdth-label); font-size: var(--fs-label); color: var(--ink-faint); padding-top: 2px; text-transform: uppercase; letter-spacing: .08em; }
.colo dd { color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; }
.colo-foot { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding-block: 16px 28px; color: var(--ink-faint); border-top: 1px solid var(--blind); }
.colo-foot a { text-decoration: none; }
.colo-foot a:hover { color: var(--ink-soft); }

/* ==========================================================================
   Pages from site/: the colophon (about) and not-found
   ========================================================================== */
.page { padding-block: 48px 72px; }
.page-head { display: grid; grid-template-columns: var(--col-margin) minmax(0, 1fr); gap: 0 var(--col-gap); margin-bottom: 40px; }
.page-head > .mono { color: var(--ink-faint); padding-top: 10px; }
.page-head h1 { font-family: var(--font-display); font-weight: var(--wght-display); font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: -.01em; max-width: 18ch; text-wrap: balance; }
.page-head .standfirst { margin-top: 18px; max-width: 40ch; }
.leaf { display: grid; grid-template-columns: var(--col-margin) minmax(0, 1fr); gap: 0 var(--col-gap); padding-block: 40px; border-top: 1px solid var(--blind); }
.leaf > .mono { color: var(--ink-faint); padding-top: 6px; }
.leaf h2 { font-family: var(--font-display); font-weight: var(--wght-display); font-size: var(--fs-h3); line-height: 1.05; margin-bottom: 14px; }
.leaf .prose { max-width: var(--measure); display: flex; flex-direction: column; gap: .85em; color: var(--ink-soft); }
.leaf .prose em, .leaf .prose strong { color: var(--ink); }
.leaf dl.defs { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; max-width: 46rem; font-size: var(--fs-small); line-height: 1.5; }
.leaf dl.defs dt { font-family: var(--font-label); font-stretch: var(--wdth-label); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); padding-top: 2px; }
.leaf dl.defs dd { color: var(--ink-soft); }
.classes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 16px; margin-top: 20px; max-width: 66rem; }
.classes li { display: flex; align-items: baseline; gap: 10px; padding-top: 8px; border-top: 1px solid var(--blind); color: var(--ink-soft); font-size: var(--fs-small); }
.classes .mono { color: var(--ink); }
.ladder ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 16px; margin-top: 20px; max-width: 66rem; }
.ladder li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 12px; border-top: 1px solid var(--blind); }
.ladder li p { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.45; }
.swatches { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 20px; counter-reset: sw; max-width: 66rem; }
.swatches li { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.swatches .ink { height: 44px; background: var(--c); }
.swatches b { font-family: var(--font-label); font-stretch: var(--wdth-label); font-weight: var(--wght-label-strong); font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.swatches b::before { counter-increment: sw; content: counter(sw); color: var(--gilt); margin-right: 8px; }
.swatches span { color: var(--ink-faint); display: block; }
.marks-intro { margin-top: 28px; }
.marks { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 16px; color: var(--ink-soft); font-size: var(--fs-small); }
.marks .key { font-size: 20px; line-height: 1; margin-right: 8px; }

.lost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px 56px; align-items: center; padding-block: 64px 96px; }
.lost h1 { font-family: var(--font-display); font-weight: var(--wght-display); font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: -.01em; max-width: 12ch; }
.lost p { margin-top: 18px; color: var(--ink-soft); max-width: 34ch; }
.lost .lost-eyebrow { margin: 0 0 14px; color: var(--ink-faint); }

/* ==========================================================================
   The social card (/<slug>/og/): 1200 × 630, rendered by qa for og.png
   ========================================================================== */
.og-page { margin: 0; width: 1200px; height: 630px; overflow: hidden; }
.og { position: relative; width: 1200px; height: 630px; display: grid; grid-template-rows: 3px auto minmax(0, 1fr) 84px; background: var(--ground); }
.og-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 26px 48px 16px; border-bottom: 1px solid var(--blind); }
.og-head .brand .wordmark { font-size: 38px; }
.og-head .brandmark { width: 24px; height: 24px; margin-bottom: 5px; }
.og-head .kicker { font-size: 12px; }
.og-body { display: grid; grid-template-columns: minmax(0, 1fr) 640px; gap: 40px; align-items: center; padding: 22px 48px; min-height: 0; }
.og-body h1 { font-family: var(--font-display); font-weight: var(--wght-display); font-size: 60px; line-height: .96; letter-spacing: -.012em; text-wrap: balance; }
.og-body .standfirst { margin-top: 18px; font-size: 21px; max-width: 26ch; }
.og .plate { padding: 12px; container-type: normal; }
.og .stage { width: min(100%, calc(344px * var(--ratio-w, 1.6))); aspect-ratio: var(--ratio-w, 1.6); min-height: 0; max-height: 344px; }
.og-foot { position: relative; background: var(--ground-sunk); overflow: hidden; border-top: 1px solid var(--rule); }
.og-foot .comb { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 1920px; height: 200px; max-width: none; }
.og-foot .call-bone { left: 48px; bottom: 16px; }
.og-foot .og-url { position: absolute; right: 48px; bottom: 18px; color: var(--ink-soft); background: var(--ground-sunk); padding: 2px 6px; }

/* ==========================================================================
   Deck format: signatures snap on desktop (proximity), flow on phones
   ========================================================================== */
@media (min-width: 821px) and (min-height: 541px) {
  html.fmt-deck { scroll-snap-type: y proximity; }
  .fmt-deck .sig { scroll-snap-align: start; }
  .fmt-deck .sheet.sig, .fmt-deck .sig-full { min-height: calc(100svh - var(--runhead)); }
  .fmt-deck .sig-full { display: flex; flex-direction: column; justify-content: center; }
  .fmt-deck .sheet--text { align-content: center; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .shelf { --spine-k: .84; min-height: 500px; }
  .sheet { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0 36px; }
  .sheet > .margin { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; padding: 0 0 20px; }
  .sig-letter { font-size: 40px; }
  .sheet--split > .plate { grid-column: 2; }
  .sheet--wide > .copy, .sheet--wide > .plate, .sheet--text > .copy, .sheet--text > .plate,
  .sig-full > .sheet > .copy { grid-column: 1 / -1; }
  .plate--full > figcaption { padding-left: var(--gutter); }
  .beside { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0 36px; }
  .beside > .margin { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; padding: 0 0 20px; }
  .em-grid, .page-head, .leaf { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ladder ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .stacks { grid-template-columns: minmax(0, 1fr); }
  .stacks-intro, .shelf-wrap, .card-wrap { grid-column: 1; grid-row: auto; }
  .shelf { min-height: 0; }
  .sheet { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
  .sheet > *, .sheet--split > .plate { grid-column: 1; }
  .sheet--wide > .copy, .sig-full > .sheet > .copy { display: flex; flex-direction: column; align-items: stretch; }
  .sheet--wide > .copy > *, .sig-full > .sheet > .copy > * { align-self: stretch; }
  .titlepage { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .endpaper--front { min-height: 0; height: 168px; }
  .endpaper--front::after { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 5px; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--blind); }
  .colo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colo > :first-child { grid-column: 1 / -1; }
  .beside { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
  .lost { grid-template-columns: minmax(0, 1fr); }
  .ladder ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .classes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .mast { grid-template-columns: 1fr auto; align-items: center; padding-block: 18px 14px; gap: 6px 16px; }
  .brandmark { width: 24px; height: 24px; margin-bottom: 5px; }
  .mast-tag { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .mast-nav { grid-column: 2; grid-row: 1; gap: 14px; }
  .mast-nav .opt { display: none; }
  .home { padding-block: 22px 40px; }
  .home-title { font-size: 34px; max-width: 16ch; }
  .home-note { margin-top: 10px; font-size: var(--fs-small); }
  /* the shelf lies down: a stack of volumes, spines facing you */
  .shelf { flex-direction: column; align-items: stretch; gap: 3px; padding-top: 22px; }
  .vol { width: var(--len); margin-left: var(--off); }
  .vol::after { left: auto; top: 0; bottom: 0; right: -10px; width: 2px; height: auto; }
  .vol.is-active .spine { transform: translateX(-10px); }
  .spine { width: 100%; height: var(--t); flex-direction: row; padding: 6px 4px 6px 30px; }
  .spine::before { top: 0; bottom: 0; left: 0; right: auto; width: 3px; height: auto;
    background: repeating-linear-gradient(180deg, var(--gilt) 0 2px, transparent 2px 4px, var(--ink-faint) 4px 6px, transparent 6px 8px); }
  .cloth--stand { display: none; }
  .cloth--flat { display: block; }
  .spine-panel { flex-direction: row; align-items: center; padding: 0 6px 0 0; }
  .spine-no { width: 34px; text-align: center; padding: 0; }
  .spine-title {
    writing-mode: horizontal-tb; font-size: 22px; line-height: 1.02; padding: 0 12px 0 4px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  .spine-title .t-long { display: inline; }
  .spine-title .t-short { display: none; }
  .spine-label { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 5px; width: auto; max-width: 92px; margin: 0; padding: 0 6px 3px; }
  .bookend, .shelf-edge .opt, .shelf-edge--span { display: none; }
  .ghost { width: var(--len); height: var(--t); margin-left: var(--off); }
  .shelf-edge { margin-top: 18px; }
  .card-wrap { padding-top: 34px; }
  .card { padding: 20px 16px 12px 14px; }
  .card-grid { grid-template-columns: 60px 1fr; gap: 0 10px; }
  .card-call { font-size: 11px; }
  .runhead-in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; }
  .rh-title { display: none; }
  .collation { grid-column: 3; grid-row: 1; pointer-events: none; }
  .collation a { display: none; } /* the whole right side is the one contents button (DESIGN.md §10) */
  .collation li { width: 11px; }
  /* one full-height target over the label and the staircase: tap to open the contents */
  .rh-sig { grid-column: 2 / 4; grid-row: 1; z-index: 1; min-width: 0; min-height: var(--runhead); padding-right: calc(var(--n, 7) * 11px + 1px + 12px); }
  .toc-sheet { right: 0; width: 100%; }
  .tp { padding: 28px var(--gutter) 32px; gap: 20px; }
  .imprint { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sheet { padding-block: 32px 40px; }
  .plate { padding: 0; border: 0; outline: 0; }
  .plate figcaption { margin-top: 10px; }
  .plate--full > figcaption { padding-inline: var(--gutter); }
  .stats { gap: 14px; }
  .endmatter { padding-block: 40px 48px; }
  .colo { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 36px 28px; }
  .endpaper--back { height: 120px; }
  .beside { padding-block: 40px 48px; }
  .beside-shelf { padding-bottom: 0; }
  .beside-edge, .vol-rel, .shelf-end i { display: none; }
  .shelf-end { margin: 14px 0 0; }
  .shelf-end p { max-width: none; }
  .ladder ol { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger li { grid-template-columns: minmax(0, 1fr) auto; }
  .ledger .how { grid-column: 1 / -1; }
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
  .swatches .ink { height: 32px; }
  .swatches b { letter-spacing: .03em; }
  .page { padding-block: 32px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ── site/css/print.css ── */
/* ==========================================================================
   biblios · the print edition: navy ink on white stock (DESIGN.md §11)
   Tokens reverse in tokens.css (@media print); this sheet re-imposes the pages.
   Plates print their certified posters (the print-inked ones when qa made
   them; the canvases stay on screen), and the running head moves into the
   page margin. A volume page adds its own @top-center line (call number,
   title) in an inline <style>.
   ========================================================================== */
@page { size: A4; margin: 16mm 0 18mm; }
@page {
  @bottom-center { content: counter(page); font-family: "Martian Mono Variable", "Martian Mono", monospace; font-size: 7.5pt; color: #56637B; }
  @top-center { content: "biblios"; font-family: "Martian Mono Variable", "Martian Mono", monospace; font-size: 7pt; letter-spacing: .06em; color: #56637B; }
}

@media print {
  html { scroll-snap-type: none !important; }
  body { font-size: var(--fs-body); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .wrap { padding-inline: 14mm; max-width: none; }
  .skip, .headband, .mast-nav, .runhead, .toc-wrap, .beside, .home-note, .bookend, .table summary, .shelf-end { display: none !important; }
  a { text-decoration: none; }

  /* home */
  .mast { grid-template-columns: auto 1fr; padding-block: 0 10px; }
  .home { padding-block: 18px 12px; }
  .stacks { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0 8mm; }
  .stacks-intro { grid-column: 2; grid-row: 1; }
  .shelf-wrap { grid-column: 1; grid-row: 1 / span 2; }
  .card-wrap { grid-column: 2; grid-row: 2; padding-top: 6mm; }
  .card-wrap .card { display: flex !important; break-inside: avoid; }
  .shelf { min-height: 0; padding-top: 12px; }
  .spine { --k: .74; box-shadow: inset 0 0 0 .75pt var(--rule-strong); transform: none !important; }
  .spine::before { background: repeating-linear-gradient(90deg, var(--rule-strong) 0 2px, transparent 2px 4px); }
  .vol::after { display: none; }

  /* a volume */
  .titlepage, .sheet.sig, .sig-full { min-height: 0 !important; }
  .titlepage { grid-template-columns: 1fr; padding-inline: 14mm; break-after: page; }
  .endpaper--front { height: 60mm; min-height: 0; }
  .endpaper::after { display: none; }
  .call-bone { left: 6mm; }
  .tp { padding: 10mm 0 0; }
  .tp h1 { font-size: 40pt; }
  .sheet { display: block; padding-block: 3mm 6mm; }
  .sheet > * + * { margin-top: 4mm; }
  .sig-full > .sheet { padding-bottom: 0; }
  .sheet--dark, .sig-full.sheet--dark, .sheet--dark .plate { background: none; box-shadow: none; clip-path: none; }
  .margin { flex-direction: row !important; align-items: center; gap: 4mm; padding: 0 !important; break-after: avoid; }
  .sig-letter { font-size: 28pt; }
  .copy { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4mm 8mm; align-items: start !important; break-inside: avoid; break-after: avoid; max-width: none !important; }
  .copy > .kicker, .copy > h2 { grid-column: 1 / -1 !important; }
  .copy > .deck, .copy > .body { grid-column: 1 !important; grid-row: span 3; }
  .copy > .stats, .copy > .source { grid-column: 2 !important; grid-row: auto !important; align-self: start !important; }
  /* a text sheet keeps one measure: deck, body, stats and sources in a single column */
  .sheet--text > .copy { display: flex !important; flex-direction: column; max-width: 150mm !important; }
  .ledger ul { columns: 2; column-gap: 8mm; }
  .ledger { margin-top: 5mm; }
  .ledger li { font-size: 8.5pt; line-height: 1.3; grid-template-columns: minmax(0, 1fr) auto 4.4rem; padding-block: .8mm; }
  .colo dl { grid-template-columns: max-content minmax(0, 1fr); gap: 1mm 3mm; font-size: 8.5pt; line-height: 1.35; }
  .colo p { font-size: 8.5pt; }
  .plate, .plate--full { padding: 3mm 3.5mm 2.5mm; outline: 0; border: .5pt solid var(--rule); break-inside: avoid; margin-inline: 14mm; max-width: none; }
  .sheet .plate { margin-inline: 0; }
  .stage { display: none !important; }
  .poster { display: block !important; width: 100%; max-height: 130mm; object-fit: contain; }
  .poster--screen { display: none !important; }
  .poster--print { display: block !important; }
  .plate figcaption, .plate--full > figcaption { break-before: avoid; padding-left: 0; padding-right: 0; margin-top: 3mm; border-top: .5pt solid var(--rule); }
  .table { display: none; }
  .endmatter { break-before: page; padding-block: 0 8mm; }
  .sources li { break-inside: avoid; }
  .colophon { break-inside: avoid; }
  .endpaper--back { height: 26mm; }
  .colo { grid-template-columns: .8fr 1fr 1.25fr; gap: 6mm; padding-block: 6mm 3mm; }
  .colo > :first-child { grid-column: auto; }
  .page, .lost { padding-block: 6mm; }
  .og { display: none; }
}