/* ============================================================
   KADWOOD — The Book, Issue 02. The magazine layer.

   Loaded AFTER template.css and editorial.css. The book is built
   on the /templates magazine set: Didone display, justified serif
   columns with drop caps, the New Yorker contents, the typed
   letter, the image-masked divider, the broadsheet.

   This file does four jobs and nothing else.

   1 · THE PAGE BOX. A magazine template is a scroll surface. A
       book page is not: it is a fixed 1:1.414 box, and copy that
       does not fit is data loss, not a scrollbar.

   2 · THE SIZING BRIDGE. This is the important one. editorial.css
       sizes type in `vw`, which measures the WINDOW. The book page
       is a fixed portrait box inside a window of any shape, so on
       a wide desktop that type runs clean off the page: the
       headline is sized against 1440px while the page is 560px.
       templates/README.md already prescribes the fix for exactly
       this — put `container-type: inline-size` on a wrapper and
       size in `cqw`, where 1cqw is 1% of the PAGE, whatever the
       window is doing. Everything below re-states editorial.css's
       clamps in cqw. Nothing else about the design changes.

       Two containers, because the magazine set has two shapes:
         .sheet   the text surface. Its own padding means
                  1cqw = 0.88% of the page width.
         .stage   a full-bleed layer for plates and dividers,
                  where 1cqw = 1% of the page width.

   3 · THE PALETTE. Paper and ink from the magazine set carry the
       reading pages. Burgundy carries the structure: endpapers,
       part dividers, plates. Gold appears three times.

   4 · BOOK PARTS THE MAGAZINE SET HAS NO PIECE FOR. The Mandala,
       the technical drawings, the index, the fill markers.
   ============================================================ */

/* ------------------------------------------------------------
   1 · THE PAGE BOX
   ------------------------------------------------------------ */
:root {
    --paper:    #F7F5F1;
    --ivory:    #FFFFFF;
    --deep:     #0D0D0D;
    --burgundy: #42141E;
    --gold:     #B08D3F;
    --pink:     #E8C7C3;   /* Kadwood signature soft pink / blush */
    --blush:    #E8C7C3;
    --stock:    #F0E7D8;   /* Field Notes only: warmer, uncoated */
    --crimson:  #8E2436;
    --sand:     #C8BCAE;

    /* Fallback page box so a fragment still renders anywhere.
       pageflip.js overrides these on :root at run time; the
       reading pages and the proof sheet override on a wrapper. */
    --page-w: 560px;
    --page-h: 792px;
}

html, body { height: 100%; }
body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    background: #0B0908;
    overflow: hidden;               /* the book itself never scrolls */
}
#book { position: relative; margin: 0 auto; }
.stf__parent { margin: 0 auto !important; }

.page {
    background: var(--paper);
    color: var(--deep);
    position: relative;
    display: block;
    overflow: hidden;               /* copy that does not fit is a copy bug */
}

/* A magazine .sheet scrolls. A book leaf does not: if it cannot
   hold its copy at the smallest page the book draws, the copy is
   too long and the fix is to cut it or turn the leaf. */
.sheet {
    overflow: hidden;
    container-type: inline-size;
    height: 100%;
    padding: 7.6% 7.2%;
    padding-bottom: 9.5%;
}
.sheet.paper { background: var(--paper); }
.sheet.white { background: var(--ivory); }

/* Full-bleed layer for plates, dividers and covers. */
.stage {
    position: absolute;
    inset: 0;
    container-type: inline-size;
    overflow: hidden;
}
.stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.page[data-page-id="plate-suit-ready"] .stage::after,
.page[data-page-id="plate-fibres"] .stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(66, 20, 30, 0.10);
    pointer-events: none;
    z-index: 1;
}

/* Woven bookcloth binding. Every mark scales with the leaf, including on phones. */
.page.cover .stage {
    background-color: var(--burgundy);
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 4%, rgba(255, 255, 255, .025) 5%, transparent 7%),
        repeating-linear-gradient(0deg, rgba(232, 199, 195, .07) 0, rgba(232, 199, 195, .07) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, .15) 1px, transparent 1px, transparent 3px),
        linear-gradient(135deg, #42141e, #2c1118);
    box-shadow: inset 1px 0 2px rgba(232, 199, 195, .15);
}
.page.cover .cover-title { padding: 8%; }
.page.cover .cover-title h1 {
    font-size: 16.5cqw;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
.page.cover .cover-tagline {
    font-family: var(--font-body);
    font-size: 2.65cqw;
    line-height: 1.5;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-wrap: balance;
    margin: 2em 0 0;
    max-width: 80%;
}

/* A softened photograph behind statement leaves. */
.page.has-photo-overlay {
    background: var(--burgundy);
    color: var(--paper);
}
.page.has-photo-overlay .who-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.page.has-photo-overlay .who-background img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    filter: blur(2px);
    transform: scale(1.04);
}
.page[data-page-id="size-you"] .who-background img { object-position: 85% center; }
.page.has-photo-overlay .who-background__overlay {
    position: absolute;
    inset: 0;
    background: rgba(66, 20, 30, 0.72);
}
.page.has-photo-overlay .sheet {
    position: relative;
    z-index: 1;
    background: transparent;
    color: var(--paper);
}
.page[data-page-id="who-we-made-for"] .prose { margin-top: 1em; }
.page[data-page-id="imprint"] .kicker,
.page[data-page-id="discovery-session"] .kicker,
.page[data-page-id="congruence"] .kicker,
.page[data-page-id="congruence"] .statement-quote,
.page[data-page-id="craft-timeline"] .kicker,
.page[data-page-id="craft-timeline"] .credit-vertical,
.page[data-page-id="by-invitation"] .kicker,
.page[data-page-id="natural-fibres"] .kicker,
.page[data-page-id="natural-fibres"] .credit-vertical { color: inherit; }
.page[data-page-id="discovery-session"] .rule-thin,
.page[data-page-id="by-invitation"] .rule-thin,
.page[data-page-id="congruence"] .rule-thin { border-top-color: var(--paper); }
.page.has-photo-overlay .invitation-dock .cta-button:focus-visible {
    outline-color: var(--paper);
}
@media (max-width: 700px) {
    .page.has-photo-overlay:has(> .leaf-foot)::after {
        background: linear-gradient(to bottom, transparent, var(--burgundy) 52%);
    }
}
.suit-magazine .sheet { display: flex; flex-direction: column; gap: 6cqw; }
.suit-magazine-photo { margin: 0; height: 47%; flex-shrink: 0; overflow: hidden; }
.suit-magazine-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.suit-magazine-copy h1 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 8cqw;
    line-height: 1.05;
    margin: 0 0 .5em;
}

/* Grounds */
.page.burgundy { background: var(--burgundy); color: var(--paper); }
.page.burgundy .sheet { background: transparent; color: var(--paper); }
.page.stock    { background: var(--stock); }
.page.stock .sheet { background: var(--stock); }

/* ------------------------------------------------------------
   2 · THE SIZING BRIDGE. Every clamp() below replaces a `vw`
   clamp in editorial.css with the same design intent in `cqw`.
   ------------------------------------------------------------ */
.kicker            { font-size: max(var(--t-floor-small, 0px), clamp(6px, 1.85cqw, 11.5px)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--burgundy, #42141E); margin: 0 0 0.8em; }
.display .lg       { font-size: clamp(26px, 13.6cqw, 104px); }
.display .md       { font-size: clamp(18px, 9.2cqw, 70px); }
.display-mix       { font-size: clamp(22px, 11cqw, 84px); }
.title-over__panel .display-mix .lg-w { font-size: clamp(24px, 12cqw, 92px); }
.standfirst        { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: max(var(--t-floor-body, 0px), clamp(9.5px, 3.1cqw, 19.5px)); line-height: 1.35; margin: 0.6em 0 1.5em; opacity: 0.88; }
.prose             { font-family: var(--font-serif); font-weight: 400; font-size: max(var(--t-floor-body, 0px), clamp(8px, 2.7cqw, 16px)); line-height: 1.68; text-align: left; hyphens: auto; }
.prose p           { margin: 0 0 0.9em; }
.prose p:last-child { margin-bottom: 0; }
.prose.cols        { column-gap: clamp(10px, 3.2cqw, 26px); }
.credits           { font-size: max(var(--t-floor-small, 0px), clamp(6px, 1.85cqw, 11.5px)); font-family: var(--font-body); letter-spacing: 0.08em; }
.credit-vertical   { font-size: max(var(--t-floor-small, 0px), clamp(6px, 1.85cqw, 11.5px)); font-family: var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--burgundy, #42141E); opacity: 0.55; }
.folio             { font-size: max(var(--t-floor-small, 0px), clamp(6px, 1.85cqw, 11.5px)); font-family: var(--font-body); letter-spacing: 0.08em; bottom: 3.4%; }
.folio.left        { left: 7.2%; right: auto; }
.folio.right       { right: 7.2%; left: auto; }
.masthead .name    { font-size: clamp(18px, 8.4cqw, 62px); }
.masthead .date    { font-size: clamp(6px, 2.05cqw, 13px); }
.toc-row           { grid-template-columns: minmax(0, 1.05fr) 6.5cqw 2fr; column-gap: 2.4cqw; padding: 1.05cqw 0; }
.toc-row .author   { font-size: max(var(--t-floor-small, 0px), clamp(5px, 1.75cqw, 11px)); }
.toc-row .pg       { font-size: max(var(--t-floor-toc, 0px), clamp(7px, 2.45cqw, 15px)); }
.toc-row .entry .sec   { font-size: max(var(--t-floor-small, 0px), clamp(6px, 2.15cqw, 14px)); }
.toc-row .entry .title { font-size: max(var(--t-floor-toc, 0px), clamp(7px, 2.45cqw, 15px)); }
.toc-row .entry .desc  { font-size: max(var(--t-floor-small, 0px), clamp(6px, 2.15cqw, 14px)); }
.toc-foot          { font-size: clamp(5px, 1.7cqw, 11px); }
.note-title        { font-size: clamp(22px, 10.4cqw, 80px); }
.note-sign .l1     { font-size: clamp(11px, 4.4cqw, 30px); }
.note-sign .l2     { font-size: clamp(15px, 7.2cqw, 50px); }
.note-top          { gap: clamp(9px, 3.2cqw, 28px); }
.article-grid      { gap: clamp(9px, 3.2cqw, 32px); }
.mask-page__title  { font-size: clamp(30px, 19cqw, 150px); }
.mask-page__label  { font-size: clamp(6px, 2.1cqw, 14px); }
.mask-page__label::after { width: 9cqw; margin-top: 0.7cqw; }
/* NOT on .letter itself. .letter IS the .sheet, and an element can
   never query its own container: cqw inside it falls back to the
   VIEWPORT, so on a wide window this pinned the typed sheet to its
   13px ceiling and the letter ran a third past the foot of the leaf.
   The size goes on the letter's children, which are inside the
   container and resolve correctly. */
.letter > *        { font-size: max(var(--t-floor-body, 0px), clamp(5px, 2.05cqw, 13px)); }
/* The typed copy sits two levels down, so the floor has to name it. */
.letter .lt-body,
.letter .lt-body p { font-size: max(var(--t-floor-body, 0px), clamp(5px, 2.05cqw, 13px)); }
.letter .wordmark.lh-mark { font-size: clamp(14px, 5.2cqw, 32px); }
.letter .sig-fade  { font-size: clamp(13px, 5cqw, 32px); }
.sig-fade          { font-size: clamp(13px, 5.2cqw, 38px); }

/* The drop cap is sized in em, so it follows the prose. On the
   narrowest page it would eat a third of the column, so it steps
   down with the page rather than staying at 3.4em. */
.prose .lead::first-letter,
.dropcap::first-letter { font-size: 3.2em; line-height: 0.74; }

/* The magazine set justifies everything. A justified column needs
   a measure to justify INTO — under about 45 characters it opens
   rivers instead. Anything narrower than half a page reads ragged
   right, which is the honest setting at that width. */
.article-grid .body-col .prose,
.note-top .prose { text-align: left; hyphens: auto; }

/* ------------------------------------------------------------
   3 · THE PALETTE ON THE MAGAZINE PARTS
   ------------------------------------------------------------ */
.kicker            { color: var(--burgundy); }
.page.burgundy .kicker,
.page.burgundy .folio { color: var(--paper); opacity: 0.7; }
.rule, .rule-thin, .rule-double { border-top-color: var(--deep); }
a, a:visited       { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover            { border-bottom-width: 2px; }
.toc-row a, .index-cols a { border-bottom: none; }
.toc-row a:hover .title, .index-cols a:hover { border-bottom: 1px solid currentColor; }

/* ------------------------------------------------------------
   4 · BOOK PARTS THE MAGAZINE SET HAS NO PIECE FOR
   ------------------------------------------------------------ */

/* A fact only the house can supply. The book's first rule is that
   a missing sentence costs less than a wrong one, so a gap is
   SHOWN rather than guessed. Delete the wrapper when the real
   fact arrives; nothing else changes. */
.fill {
    background: rgba(176, 141, 63, 0.20);
    border-bottom: 1px dotted var(--gold);
    padding: 0 0.18em;
    font-style: italic;
}
.gap {
    border: 1px solid currentColor;
    border-left: 3px solid var(--gold);
    padding: 1em 1.1em;
    margin: 1.3em 0;
}
.gap-tag {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: clamp(5px, 1.6cqw, 10px);
    opacity: 0.6;
    margin-bottom: 0.6em;
}
.gap p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(6px, 2.4cqw, 14px);
    line-height: 1.5;
    text-align: left;
    margin: 0 0 0.5em;
}
.gap p:last-child { margin-bottom: 0; }

/* Section head inside a chapter. Sans, tracked, like the kicker. */
.subhead {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: clamp(5px, 1.85cqw, 11px);
    line-height: 1.5;
    margin: 1.7em 0 0.6em;
    text-align: left;
    color: var(--burgundy);
}
.prose > .subhead:first-child { margin-top: 0; }

/* Inline lead-in: THE ARMHOLE. Cut high and cut small. */
.lede {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.86em;
}

/* A centred point where a section turns and a rule would be loud. */
.dinkus { text-align: center; opacity: 0.5; margin: 1.4em 0; }

/* The only place in the book that asks for anything, and it asks
   in the same voice as the copy: a price, a duration, a door. */
.cta {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(5px, 1.9cqw, 12px);
    letter-spacing: 0.05em;
    line-height: 1.6;
    text-align: left;
    margin: 1.6em 0 0;
    color: var(--burgundy);
}
.cta a { white-space: nowrap; }

/* Ledger rows: the price list, the calendar, the gatherings. */
.ledger { margin: 0.8em 0 0; padding: 0; list-style: none; font-family: var(--font-serif); }
.ledger li {
    display: flex; align-items: baseline; gap: 0.7em;
    font-size: clamp(6px, 2.5cqw, 15px);
    line-height: 2;
}
.ledger .k { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82em; white-space: nowrap; }
.ledger .lead-rule { flex: 1; border-bottom: 1px dotted currentColor; opacity: 0.45; transform: translateY(-0.25em); }
.ledger .v { white-space: nowrap; }

/* Questions answered. Printed copy, not markup hidden for
   machines: the FAQPage schema describes what is on the leaf. */
.qa { margin: 0; padding: 0; list-style: none; }
.qa > li { margin: 0 0 1.2em; }
.qa > li:last-child { margin-bottom: 0; }
.qa .q {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(5px, 2cqw, 12px);
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--burgundy);
}
.qa .a {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(6px, 2.5cqw, 15px);
    line-height: 1.5;
    margin-top: 0.3em;
}

/* Index of facts, grouped. Two columns is correct here and only
   here: the entries are short. */
.index-cols {
    column-count: 2;
    column-gap: clamp(10px, 3.2cqw, 26px);
    font-family: var(--font-serif);
    font-size: clamp(5px, 2.15cqw, 13px);
    line-height: 1.62;
    text-align: left;
}
.index-cols .ix-g { break-inside: avoid; margin: 0 0 1.3em; }
.index-cols .ix-h {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.8em;
    color: var(--burgundy);
    margin-bottom: 0.25em;
}

.page[data-page-id="index-of-facts"] .index-cols {
    font-size: clamp(11.5px, 2.3cqw, 13px);
    line-height: 1.5;
}
.page[data-page-id="index-of-facts"] .note-title { font-size: clamp(19px, 9.1cqw, 70px); }
.page[data-page-id="index-of-facts"] .kicker { font-size: max(var(--t-floor-small, 0px), clamp(6px, 1.65cqw, 10px)); }
.page[data-page-id="index-of-facts"] .ix-h { letter-spacing: .12em; }
@media (max-width: 700px) {
    .page[data-page-id="index-of-facts"] .index-cols {
        column-count: 1;
        font-size: 12.5px;
    }
    .page[data-page-id="index-of-facts"] .note-title { font-size: clamp(18px, 7.5cqw, 70px); }
    .page[data-page-id="index-of-facts"] .ix-h { font-size: 12px; }
}

/* The locations leaf is a small atlas, followed by an accessible directory. */
.location-page .sheet { padding-top: 6%; }
.location-page .note-title { font-size: clamp(26px, 8.5cqw, 52px); margin: .15em 0 .35em; }
.location-page .locations-intro { font-family: var(--font-serif); font-size: 14px; line-height: 1.5; margin: 0; }
.location-page .locations-map { margin: 18px -3% 22px; }
.location-page .location-atlas { display: block; width: 100%; height: auto; color: var(--burgundy); }
.location-page .atlas-grid { stroke: var(--burgundy); stroke-width: .6; opacity: .1; fill: none; }
.location-page .atlas-land { fill: #EDE7DE; stroke: var(--burgundy); stroke-width: .65; stroke-linejoin: round; opacity: .75; }
.location-page .atlas-region,
.location-page .atlas-ocean,
.location-page .atlas-north { font-family: var(--font-body); font-size: 11px; fill: var(--burgundy); letter-spacing: 3px; }
.location-page .atlas-ocean { font-size: 9px; letter-spacing: 4px; opacity: .45; }
.location-page .atlas-north { text-anchor: middle; font-size: 9px; letter-spacing: 0; }
.location-page .atlas-compass { fill: none; stroke: var(--burgundy); stroke-width: .8; }
.location-page .atlas-leader { stroke: var(--burgundy); stroke-width: .75; fill: none; opacity: .5; }
.location-page .atlas-pin { fill: var(--burgundy); }
.location-page .atlas-hit { fill: transparent; }
.location-page .atlas-badge { fill: var(--paper); stroke: var(--burgundy); stroke-width: 1; }
.location-page .atlas-number { fill: var(--burgundy); text-anchor: middle; dominant-baseline: central; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0; pointer-events: none; }
.location-page .atlas-sydney .atlas-badge { fill: var(--pink); stroke: var(--gold); stroke-width: 1.5; }
.location-page .atlas-sydney .atlas-pin { fill: var(--gold); }
.location-page .atlas-location a:hover .atlas-badge,
.location-page .atlas-location a[aria-pressed="true"] .atlas-badge,
.location-page .atlas-location a:focus-visible .atlas-badge { fill: var(--pink); stroke-width: 2.5; }
.location-page .atlas-location a:focus-visible { outline: none; }
.location-page .locations-map figcaption { font-family: var(--font-body); font-size: 11px; line-height: 1.5; text-align: center; color: var(--burgundy); opacity: .75; margin-top: 8px; }
.location-page .locations-sydney { border-top: 1px solid rgba(66,20,30,.25); border-bottom: 1px solid rgba(66,20,30,.25); padding: 16px 0; }
.location-page .locations-eyebrow,
.location-page .locations-group h2 { font-family: var(--font-body); text-transform: uppercase; font-size: 11px; letter-spacing: .12em; color: var(--burgundy); }
.location-page .locations-sydney h2 { font-family: var(--font-display); font-size: 27px; line-height: 1.2; font-weight: 400; margin: 8px 0; }
.location-page .location-details { min-height: 135px; box-sizing: border-box; }
.location-page .location-details p { font-family: var(--font-serif); font-size: 14px; line-height: 1.6; margin: 4px 0 0; }
.location-page .locations-sydney a { display: inline-block; font-family: var(--font-serif); font-size: 14px; line-height: 1.6; padding: 4px 0; border: 0; }
.location-page .locations-contacts { margin: 18px 0 24px; font-family: var(--font-body); font-size: 12px; }
.location-page .locations-contacts > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; border: 0; }
.location-page .locations-contacts > div { display: flex; flex-wrap: wrap; column-gap: 16px; }
.location-page .locations-contacts > div a { display: inline-flex; align-items: center; min-height: 44px; border: 0; }
.location-page .locations-directory { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.location-page .locations-group h2 { margin: 0 0 10px; padding-top: 12px; border-top: 1px solid rgba(66,20,30,.25); }
.location-page .locations-group ul { padding: 0; margin: 0; list-style: none; }
.location-page .locations-group li { margin: 0; }
.location-page .locations-group li a { display: flex; gap: 9px; align-items: flex-start; padding: 8px 0; min-height: 44px; box-sizing: border-box; border: 0; font-size: 13px; line-height: 1.45; }
.location-page .location-number { font-family: var(--font-body); font-size: 10px; padding-top: 2px; color: var(--burgundy); }
.location-page .locations-group strong { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.location-page .location-hotel { display: block; font-family: var(--font-serif); }
.location-page .locations-contacts a:hover,
.location-page .locations-group a:hover,
.location-page .locations-sydney a:hover { text-decoration: underline; text-underline-offset: 3px; }
.location-page .locations-contacts a:focus-visible,
.location-page .locations-group a:focus-visible,
.location-page .locations-sydney a:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
@media (max-width: 700px) {
    .location-page .locations-directory { grid-template-columns: 1fr; gap: 18px; }
    .location-page .locations-group li a,
    .location-page .locations-group strong { font-size: 14px; }
    .location-page .locations-map figcaption,
    .location-page .locations-eyebrow,
    .location-page .locations-group h2 { font-size: 12px; }
}

/* Cloth specimen grid. */
.swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(7px, 2.6cqw, 22px); margin-top: 1em; }
.swatch .chip { aspect-ratio: 1 / 0.7; display: block; border: 1px solid rgba(13,13,13,0.2); }
.swatch .lbl {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: clamp(5px, 1.7cqw, 10px);
    line-height: 1.5;
    margin-top: 0.55em;
}
.swatch .mill { display: block; font-weight: 300; text-transform: none; letter-spacing: 0.02em; opacity: 0.8; }

/* Technical drawings: hairline weight, no shading, as a pattern
   house would draw them. */
.tech { display: block; width: 100%; height: auto; }
.tech path, .tech line, .tech polyline, .tech circle, .tech rect, .tech ellipse {
    fill: none; stroke: currentColor; stroke-width: 1.1;
    stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.tech .solid { fill: currentColor; stroke: none; opacity: 0.9; }

/* The Mandala. Four rooms and a centre. Seven appearances, named
   once, at Chapter 17. */
.mandala { display: block; margin: 0 auto; }
.mandala .ring { fill: none; stroke: currentColor; stroke-width: 1.1; opacity: 0.55; }
.mandala .quad { fill: currentColor; opacity: 0.13; stroke: currentColor; stroke-width: 0.8; stroke-opacity: 0.5; }
.mandala .quad.lit { fill: var(--gold); opacity: 1; stroke: none; }
.mandala .core { fill: currentColor; opacity: 0.3; }
.mandala.full .quad { opacity: 1; }
.mandala.full .q1 { fill: #7C2B3B; }
.mandala.full .q2 { fill: var(--gold); }
.mandala.full .q3 { fill: #4A5D4E; }
.mandala.full .q4 { fill: #C4A484; }
.mandala.full .core { fill: var(--burgundy); opacity: 1; }
.mandala.emboss .quad { fill: currentColor; opacity: 0.07; }
.mandala.emboss .ring { opacity: 0.22; }

/* Caption strip on a plate. Real HTML text, never baked into the
   image: a caption in a photograph has no value to a crawler. */
.plate-cap {
    position: absolute;
    left: 7.2%; right: 7.2%; bottom: 5.5%;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(5px, 1.85cqw, 12px);
    line-height: 1.6;
    letter-spacing: 0.04em;
}

/* Fashion magazine image note (product details + price).
   Positioned in corner over full-bleed photography. */
.image-note {
    position: absolute;
    bottom: 5.5%;
    right: 7.2%;
    text-align: right;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: max(var(--t-floor-small, 0px), clamp(6px, 1.85cqw, 11.5px));
    line-height: 1.45;
    letter-spacing: 0.08em;
    color: var(--pink, #E8C7C3);
    background: var(--burgundy, #42141E);
    padding: 0.65em 1.1em;
    border-radius: 2px;
    z-index: 2;
    pointer-events: none;
    max-width: 85%;
}
.image-note em {
    font-style: italic;
    font-weight: 300;
}
.image-note .title {
    display: block;
    font-weight: 300;
}
.image-note .meta {
    display: block;
    font-weight: 300;
    opacity: 0.88;
}
.image-note.left {
    right: auto;
    left: 7.2%;
    text-align: left;
}
.image-note.on-light {
    color: var(--ink, #2B1810);
    background: rgba(247, 245, 241, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 700px) {
    .page .image-note {
        box-sizing: border-box;
        width: max-content;
        max-width: 92%;
        right: 4%;
        font-size: clamp(9.5px, 2.8cqw, 11px);
        letter-spacing: 0.04em;
        padding: 0.55em 0.6em;
    }
    .page .image-note.left {
        right: auto;
        left: 4%;
    }
}

/* Editorial call-to-action button */
.cta-wrap {
    margin-top: clamp(16px, 3cqw, 28px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.cta-wrap.centered {
    align-items: center;
    text-align: center;
    margin-top: clamp(18px, 3.2cqw, 32px);
}

/* Standardized leaf containers and layout elements */
.sheet.is-centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.sheet.is-offset {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.offset-body {
    max-width: 25em;
    text-align: left;
}
.centered-head {
    max-width: 26em;
    margin: 0 auto;
    text-align: center;
}
.centered-body {
    max-width: 25em;
    margin: 0 auto;
    text-align: left;
}
.centered-body.text-center {
    text-align: center;
}

/* Statement pull-quote in deep Burgundy */
.statement-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(19px, 4.2cqw, 38px);
    line-height: 1.22;
    margin: 0.6em auto 0.8em;
    max-width: 19em;
    color: var(--burgundy, #42141E);
}

hr.rule-thin {
    border: none;
    border-top: 1px solid var(--deep, #0D0D0D);
    opacity: 0.25;
    max-width: 4.5em;
    margin: 1.2em auto;
}

.cta-button,
.cta-line a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    padding: clamp(8px, 1.35cqw, 12px) clamp(16px, 2.6cqw, 26px);
    background-color: var(--burgundy, #42141E);
    background-image:
        repeating-linear-gradient(0deg, rgba(232, 199, 195, 0.035) 0, rgba(232, 199, 195, 0.035) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.08) 1px, transparent 1px, transparent 3px),
        linear-gradient(to bottom, rgba(102, 44, 56, 0.4), rgba(32, 8, 14, 0.25));
    color: var(--paper, #F7F5F1) !important;
    border: 0;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: clamp(8.5px, 1.25cqw, 11px);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22), inset 0 -2px 3px rgba(0, 0, 0, 0.12);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    line-height: 1.2;
    text-align: center;
}

.cta-button:hover,
.cta-line a:hover {
    background-color: #260A10;
    color: #FFFFFF !important;
    border: 0;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.28), inset 0 -2px 3px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
    opacity: 1;
}

.cta-button:active,
.cta-line a:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15);
}

.cta-button .arrow,
.cta-line a .arrow {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: 1.15em;
    line-height: 1;
    transition: transform 0.22s ease;
}

.cta-button:hover .arrow,
.cta-line a:hover .arrow {
    transform: translateX(4px);
}

/* Invitation buttons share a fixed slot outside the scrolling copy. */
.page.has-invitation .sheet {
    height: calc(100% - 112px);
    padding-bottom: 24px;
    justify-content: flex-start;
}
.page.has-invitation .sheet .folio { display: none; }
.invitation-dock {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 52px;
    display: flex;
    justify-content: center;
    z-index: 3;
}
.invitation-dock .cta-button {
    box-sizing: border-box;
    width: 240px;
    max-width: 85%;
    height: 44px;
    padding: 8px 16px;
    font-size: 10px;
}
.invitation-dock .cta-button,
.invitation-dock .cta-button:visited,
.invitation-dock .cta-button:hover,
.invitation-dock .cta-button:active {
    border: 0;
    text-decoration: none;
}
.invitation-dock .cta-button:focus-visible {
    outline: 2px solid var(--burgundy);
    outline-offset: 4px;
}
.page.has-photo-overlay .invitation-dock .cta-button,
.page.burgundy .invitation-dock .cta-button {
    background-color: var(--pink, #E8C7C3);
    background-image:
        repeating-linear-gradient(0deg, rgba(66, 20, 30, 0.035) 0, rgba(66, 20, 30, 0.035) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(66, 20, 30, 0.025) 0, rgba(66, 20, 30, 0.025) 1px, transparent 1px, transparent 3px),
        linear-gradient(to bottom, rgba(247, 245, 241, 0.2), rgba(66, 20, 30, 0.05));
    color: var(--burgundy, #42141E) !important;
    border: 0;
}
.page.has-photo-overlay .invitation-dock .cta-button:hover,
.page.burgundy .invitation-dock .cta-button:hover {
    background-color: #F0D7D3;
    color: var(--burgundy, #42141E) !important;
}
.page.burgundy .invitation-dock .cta-button:focus-visible {
    outline-color: var(--paper);
}

/* Part divider. The image-masked title from text-mask.html, with
   the numeral and the epigraph the book adds. */
.mask-page__num {
    position: absolute;
    left: 6%; top: 9%;
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(14px, 6.5cqw, 52px);
    line-height: 1;
}
.mask-page__epi {
    position: absolute;
    left: 6%; right: 40%; bottom: 22%;
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(6px, 2.5cqw, 16px);
    line-height: 1.4;
}
.mask-page__emblem { position: absolute; right: 6%; bottom: 10%; width: 13%; }

/* Field Notes run on a different stock, in Erin's register. */
.page.stock .prose { text-align: left; }
.fn-date { font-family: var(--font-serif); font-style: italic; font-size: clamp(7px, 2.8cqw, 17px); }
.fn-place { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: clamp(5px, 1.7cqw, 10px); margin-left: 0.9em; opacity: 0.65; }

/* ------------------------------------------------------------
   READING PAGES AND THE PROOF SHEET
   Both render leaves outside the flipbook, so they set --page-w
   on a wrapper. Named read-sheet / proof-sheet, never .sheet:
   editorial.css already owns that class as the page surface.
   ------------------------------------------------------------ */
body.reading, body.proofing { display: block; overflow: auto; background: #0B0908; }
body.reading { padding: 4vh 0 0; }
.read-sheet { --page-w: min(600px, 94vw); --page-h: calc(var(--page-w) * 1.414); width: var(--page-w); margin: 0 auto; }
.read-sheet .page { width: var(--page-w); height: var(--page-h); margin: 0 auto 3vh; box-shadow: 0 2px 40px rgba(0,0,0,0.55); }
.read-nav {
    display: flex; justify-content: space-between; gap: 1.5em;
    width: min(600px, 94vw); margin: 1vh auto 6vh;
    font-family: var(--font-body); font-size: 13px; letter-spacing: 0.06em;
    color: var(--paper); opacity: 0.65;
}
.read-nav a { color: inherit; }

body.proofing { color: var(--paper); padding: 2rem; font-family: var(--font-body); }
.proof-head { max-width: 60em; margin: 0 auto 2rem; }
.proof-head h1 { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.1em; font-size: 26px; margin: 0 0 0.5em; }
.proof-head p { font-size: 14px; line-height: 1.7; opacity: 0.75; margin: 0 0 1em; }
#report {
    font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.7;
    white-space: pre-wrap; background: rgba(247,245,241,0.06);
    border-left: 3px solid var(--gold); padding: 0.9em 1.1em; margin: 0;
}
.proof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(375px, 1fr)); gap: 2rem 1.5rem; justify-items: center; }
.proof-card { margin: 0; }
.proof-card figcaption { font-family: ui-monospace, Menlo, monospace; font-size: 11px; opacity: 0.55; margin-bottom: 0.5em; }
.proof-sheet { --page-w: 375px; --page-h: 530px; }
.proof-sheet .page { width: var(--page-w); height: var(--page-h); box-shadow: 0 1px 18px rgba(0,0,0,0.5); }
.proof-card.over figcaption { color: #E4674F; opacity: 1; }
.proof-card.over .page { outline: 2px solid #E4674F; outline-offset: 2px; }

/* ------------------------------------------------------------
   split.html on a book leaf. template.css gives .split-body a
   scrollbar and sizes its padding in vw; a leaf has neither.
   ------------------------------------------------------------ */
.page .split { height: 100%; container-type: inline-size; }
.page .split-body { overflow: hidden; padding: 6.5% 7.2% 9.5%; }
.page .split-media { overflow: hidden; background: var(--deep); }

/* article-grid on a leaf. The magazine version is a full-height
   two-column grid with the headline top-left and the body bottom
   right. On a portrait book page the body column needs the room,
   so the split favours it and the head column stops stretching. */
.page .article-grid { grid-template-columns: 0.92fr 1fr; }
.page .article-grid .body-col { justify-content: flex-start; }

/* The editor's-note collage is four cells on a magazine spread.
   On a portrait leaf it sits beside a single column, so the cells
   go smaller and the tall one stops spanning. */
.page .collage { gap: 0.8cqw; }

/* The typed letter. Courier at one size, and no scrollbar. */
.page .letter { overflow: hidden; }
.page .lt-block { width: min(100%, 34em); margin: 0 auto; }

/* The broadsheet already sizes itself in cqw (see editorial.css
   section 8), so it needs only its container and its ground. */
.page .np-sheet, .page .sheet.np-sheet { background: var(--paper); }

/* Folio bottom OUTER. StPageFlip tags each leaf --left / --right, so
   a verso's number moves to the outer edge instead of sitting in the
   gutter. This wins over whichever side the magazine markup names,
   which means a leaf can be reordered without editing its folio. */
.page[class~="--left"]  .folio { left: 7.2%; right: auto; }
.page[class~="--right"] .folio { right: 7.2%; left: auto; }

/* The letter's vertical rhythm is set in `vh` in editorial.css, which
   measures the WINDOW: on a tall desktop the gaps between the date,
   the salutation and the sign-off grow while the leaf they sit on does
   not, and the footer is pushed off the foot. Same class of bug as the
   `vw` type, same fix. */
.page .lt-salute  { margin: 4.5cqw 0 0; }
.page .lt-body    { margin: 1.2em 0 0; }
.page .lt-signoff { margin: 5cqw 0 0; }
.page .lt-foot    { padding-top: 4cqw; }
.page .lh-rule    { margin: 2.6cqw auto 0; }
.page .lt-date    { margin-bottom: 0.4em; }

/* A book leaf is portrait, so the split gives the copy more of it than
   a magazine spread would: the image still leads, but the text below
   has to hold a whole chapter opening without clipping. */
.page .split { grid-template-rows: 40% 60%; }

/* The collage is four cells beside a full column on a magazine
   spread. On a portrait leaf the column is half the width and twice
   as tall, so the tall cell stops spanning and they sit as a square. */
.page .collage .tall { grid-row: span 1; aspect-ratio: 3/4; }

/* A split leaf whose copy is the point rather than the photograph.
   The image still leads the page; it just takes a third instead of
   two fifths. Used where BOOK-COPY runs long and cutting it would
   lose a fact rather than a flourish. */
.page .split--copy { grid-template-rows: 32% 68%; }

/* The sign-off on the second preface leaf lands under a full letter
   rather than at the top of a fresh sheet, so the hand sets smaller. */
.page .lt-signoff .sig-fade { font-size: clamp(11px, 4.2cqw, 28px); }
.page .lt-foot { padding-top: 2.6cqw; }

/* .letter is a flex column at height 100%, so when the typed block is
   a few pixels taller than the sheet, flexbox SHRINKS it and the last
   line is clipped inside a box that still reports the right height.
   That is silent data loss, and the proof sheet is what caught it.
   Take the block out of the shrink: if it ever does run past the foot
   it now shows as a real overflow rather than eating a line. */
.page .lt-block { flex: 0 0 auto; }

/* The divider title is masked type: the photograph shows through the
   letterforms. Two things it needs on a book leaf that a magazine
   spread does not — a right bound, so a long part name cannot run off
   the edge, and a smaller ramp, because the leaf is portrait. */
.mask-page__title { right: 6%; font-size: clamp(24px, 15cqw, 118px); }

/* A drop cap belongs on running prose. Where a paragraph opens with a
   small-caps lead-in, ::first-letter lands inside it and blows one
   tracked capital up to three lines: "2025 · WINDOW SHOPPING" becomes
   a giant 2 followed by 025. Guard it in the stylesheet as well as in
   the markup, so it cannot come back with the next edit. */
.prose .lead:has(> .lede:first-child)::first-letter,
.dropcap:has(> .lede:first-child)::first-letter {
    font-size: inherit; float: none; line-height: inherit; padding: 0; font-weight: inherit;
}

/* The magazine article grid hangs the body column off the FOOT of the
   page, under the headline's white space. That is the layout, and
   top-aligning it leaves the leaf looking unfinished. */
.page .article-grid .body-col { justify-content: flex-end; }

/* The divider is not a full-bleed plate: it is a colour field with the
   photograph over the right 62% of it, and the title masked out of
   that photograph. So it carries its own query container rather than
   .stage, whose img rule would stretch the photo over the field and
   leave the letters invisible against it. */
.page .mask-page { container-type: inline-size; }

/* The reference divider masks two short words (SIZE / YOU). A part
   name is longer, and where the letters run over the photo strip they
   are filled with the same pixels they are sitting on and vanish. So
   the strip is narrower on a book leaf and the title is sized to clear
   it, with the epigraph and the emblem kept on the field side. */
.page .mask-page__photo { width: 44%; }
.page .mask-page__title { font-size: clamp(18px, 10.5cqw, 80px); right: 48%; }
.page .mask-page__epi   { right: 50%; bottom: 20%; }
.page .mask-page__emblem { left: 6%; right: auto; bottom: 7%; width: 11%; }

/* ------------------------------------------------------------
   THE TYPED SHEET, word by word

   This was letter by letter, and letter by letter is what made the
   book stutter. Every character became an inline-block carrying its
   own animation and its own filter: blur() — 568 of them on the
   preface, 356 on a field note, all starting in the frame the turn
   landed on. Measured on the turn onto the preface: 40 dropped
   frames, and field-note-1 ran at 30fps. By word it is ~110 boxes
   with no blur at all, and the same turn drops nothing.

   Two properties are animated and no others. opacity and transform
   are the only two the compositor can run without repainting the
   text; filter cannot, which is why the blur is gone and must not
   come back. If the reveal ever needs to look softer, make it
   slower — do not reach for blur.
   ------------------------------------------------------------ */
/* The word is an ATOMIC inline box, so a line breaks between words
   but never inside one ("my first o / rder"). text-indent is reset
   because an inline-block is a block container and would otherwise
   re-apply the paragraph's tab stop to itself. */
.type-fade .wd {
    display: inline-block;
    text-indent: 0;
    opacity: 0;
    filter: none;                   /* overrides the blur in editorial.css */
    transform: translateY(0.08em);
}
.type-fade.drawn .wd {
    animation: type-word-in-book var(--type-dur, 0.34s) ease-out forwards;
    animation-delay: calc(var(--type-delay, 0s) + var(--i) * var(--type-step, 55ms));
}
/* Its own keyframes, not editorial.css's type-word-in: that one
   animates filter, which is the cost this change exists to remove. */
@keyframes type-word-in-book {
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .type-fade .wd { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; }
}

/* A reading page is a real leaf, and clicking it opens the book there.
   The cursor is the only affordance: the page must still read as the
   page, because that is what a search result landed on. */
body.reading .read-sheet .page { cursor: pointer; }
body.reading .read-sheet .page a { cursor: pointer; }
.read-nav .open-book { font-weight: 500; opacity: 1; }


/* ------------------------------------------------------------
   MOBILE · THE TYPE FLOOR

   Type in this book is sized from the PAGE, not the window, which
   is what keeps a leaf looking like the same leaf everywhere. On a
   390px phone that arithmetic lands body copy at 9px, and 9px is a
   picture of text rather than text. Measured across all 104 leaves
   at 390px: 5.9px smallest, 9.1px median.

   So every text role carries a floor it may not go under, held in
   one variable per role. They default to 0px — no floor, the
   original behaviour — and are only switched on where a page is
   too narrow to earn the small type.

   RAISING A FLOOR COSTS SPACE. That is the whole trade: a leaf that
   held its copy at 9px will not hold it at 15px. A leaf that no
   longer fits has three honest answers, in this order:
     1. cut the copy       — usually the right one
     2. split the leaf     — data-part-of, the way a smaller trim
                             size gives a real book more pages
     3. let it scroll      — data-scroll, below; for letters and
                             field notes, where the form is a
                             continuous sheet and a scroll reads as
                             one
   ------------------------------------------------------------ */
@media (max-width: 700px) {
    .page {
        --t-floor-body:  15px;
        --t-floor-toc:   13px;
        --t-floor-small: 12px;
    }
}

/* ------------------------------------------------------------
   A LEAF THAT SCROLLS · data-scroll

   Opt in per leaf, never globally:
       <div class="page" data-page-id="field-note-1" data-scroll>

   For the forms that are already a continuous sheet — a letter, a
   field note — where running on reads as the object rather than as
   a broken page. Everything else stays a fixed leaf, because a
   scrollbar inside a coffee-table page is a bug, not a feature.

   touch-action: pan-y hands vertical movement to the browser, so
   scrolling never fights the swipe that turns the page (pageflip.js
   ignores a gesture that is more vertical than horizontal anyway).
   ------------------------------------------------------------ */
.page[data-scroll] .sheet {
    overflow-y: auto;
    touch-action: pan-y;
    overscroll-behavior: contain;      /* the book behind must not scroll too */
    -webkit-overflow-scrolling: touch;
}
/* The sheet is the ONE scroller. Every box inside it stops clipping and
   stops holding a height, so its copy flows into that single scroll —
   nested scrollers fight each other and strand text in the middle one. */
.page[data-scroll] .letter:not(.sheet),
.page[data-scroll] .prose:not(.sheet),
.page[data-scroll] .lt-block,
.page[data-scroll] .lt-body,
.page[data-scroll] .body,
.page[data-scroll] .leaf { overflow: visible; height: auto; }
/* The foot of a scrolling leaf fades, so there is a visible reason
   to keep going. It sits above the folio and never over it. */
.page[data-scroll]::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 9%;
    z-index: 1;                        /* under the folio, over the copy */
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--paper) 78%);
}
.page[data-scroll].burgundy::after { background: linear-gradient(to bottom, transparent, var(--burgundy) 78%); }
.page[data-scroll].stock::after    { background: linear-gradient(to bottom, transparent, var(--stock) 78%); }
/* The page number is the one thing the fade must not wash out. */
.page[data-scroll] .folio { z-index: 2; }

/* Nothing to fade on a desktop-sized leaf that already fits. */
@media (min-width: 701px) {
    .page[data-scroll]:not([data-scroll="always"])::after { content: none; }
}


/* ------------------------------------------------------------
   MOBILE · LAYOUTS THAT ONLY WORK WIDE

   A two-column article grid on a 375px leaf gives the copy a 91px
   measure — about six characters a line. That is why leaves with
   only a hundred words of copy were running to 1041px on a 530px
   page: not too much writing, a column too narrow to set it in.
   Measured on the-trouser before this rule: 101 words, 1041px tall.

   One column on a phone. The head sits above the body, which is the
   order they are already in the markup and the order they are read.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
    .page .article-grid { grid-template-columns: 1fr; }
    /* .flip reverses the columns side by side; stacked, that would put
       the body above its own heading. */
    .page .article-grid.flip .head-col { order: 1; }
    .page .article-grid.flip .body-col { order: 2; }
    /* The body column is bottom-aligned so it sits on the baseline of a
       tall neighbour. Stacked there is no neighbour, so it just adds a gap. */
    .page .article-grid .body-col { justify-content: flex-start; }

    .page .note-top { grid-template-columns: 1fr; }

    /* Display type is set as a share of the page, so it shrinks with the
       leaf — but a chapter title still takes three or four lines on a
       phone where it took two in the hand. Easing the scale back buys
       those lines for the copy without the titles stopping being display. */
    .page .display .lg  { font-size: clamp(24px, 11.4cqw, 104px); }
    .page .display .md  { font-size: clamp(17px, 7.8cqw, 70px); }
    .page .display-mix  { font-size: clamp(20px, 9.2cqw, 84px); }
    .page .note-title   { font-size: clamp(20px, 8.6cqw, 80px); }

    /* A smaller trim size takes tighter margins — a paperback is not a
       coffee-table book with the same white space photographed smaller.
       7.6/9.5% of a 551px leaf is 42px at the head and 52px at the foot,
       which is a coffee-table margin on a phone. At 6% it still reads as
       a margin and gives roughly two lines back to every leaf, which is
       what most of the near-misses needed. */
    .page .sheet {
        padding: 6% 6.4%;
        padding-bottom: 10.5%;   /* clearance for the footer bar */
    }
    /* Tighten the space BETWEEN paragraphs, not the space inside them.
       Line-height is readability and stays where it is; the gap between
       paragraphs is composition, and on a leaf a third the size it can
       close without anything getting harder to read. Five paragraphs at
       0.85em of a 15px line is 64px of a 551px leaf. */
    .page .prose { line-height: 1.5; }
    .page .prose p { margin: 0 0 0.62em; }
    .page .kicker { margin: 0 0 0.9em; }

    /* The Jacket and The Trouser carry an inline pattern drawing in the
       head column. Side by side it is a third of the leaf; stacked at
       full width its aspect ratio makes it half the leaf again, which is
       why those two got TALLER when the grid collapsed. The drawing is
       the argument on these leaves, so it keeps its place — it just
       stops claiming the whole page. */
    /* Same problem as the drawings, different element: a 3:2 photo in a
       head column is a third of the leaf side by side and 215px of a
       551px leaf once stacked. It keeps its place and stops taking the
       page — signature-scent is 88 words and was still 122px over. */
    .page .article-grid img,
    .page .article-grid figure {
        max-height: 19cqh;
        width: 100%;
        object-fit: cover;
    }
    .page .article-grid .head-col svg,
    .page .head-col > svg {
        max-height: 25cqh;
        width: auto;
        margin: 0 auto;
        display: block;
    }

    /* Four portraits at 3/4 stacked two-up is 424px of a 530px leaf,
       before the four bios that have to sit under them. */
    /* Four portraits two-up is still 320px of a 551px leaf before a word
       of copy. The collage keeps all four faces and takes a third of the
       page, which is what it takes in the printed book too. */
    /* max-height on a grid does not shrink content-sized rows — the rows
       have to be told their height. Two rows of 15cqh is a third of the
       leaf, which is what the collage takes in the printed book too. */
    .page .collage { grid-auto-rows: 15cqh; }
    .page .collage img { aspect-ratio: auto; height: 100%; object-fit: cover; }
    .page .collage .tall { grid-row: span 1; aspect-ratio: auto; }
}

/* ------------------------------------------------------------
   THE PHONE FOOTER

   A bar the printed book does not need: the house name, and a way
   back to the contents from anywhere. Built in build-issue2.mjs
   (addFoot) as a direct child of .page, NOT of .sheet — a leaf
   marked data-scroll makes .sheet the scroller, and .sheet carries
   container-type: inline-size, which makes it the containing block
   for anything positioned inside it. The folio used to scroll away
   with the copy and drift across the middle of the leaf. Out here
   it is positioned against .page and holds still.
   ------------------------------------------------------------ */
.leaf-foot {
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 6.4%; right: 6.4%; bottom: 2.4%;
    z-index: 3;
    color: inherit;
}
.leaf-foot__contents {
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: inherit;
    opacity: 0.7;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
@media (min-width: 701px) {
    .leaf-foot__mark { display: none; }
}
.page:has(> .leaf-foot) .folio { display: none; }

@media (max-width: 700px) {
    .leaf-foot {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        position: absolute;
        left: 6.4%; right: 6.4%; bottom: 2.4%;
        z-index: 3;                    /* above the scroll fade */
        line-height: 1;
        color: inherit;
    }
    /* LIGATURE: the overlapping OO is a real liga glyph in the Kadwood
       face, and browsers switch ligatures off the moment letter-spacing
       is non-zero. Any tracking here silently breaks the logo. */
    .leaf-foot__mark {
        font-family: 'Kadwood', var(--font-display), serif;
        text-transform: uppercase;
        letter-spacing: 0;
        font-variant-ligatures: common-ligatures;
        font-size: 15px;
        opacity: 0.85;
    }
    .leaf-foot__contents {
        font-family: var(--font-body);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 9.5px;
        color: inherit;
        opacity: 0.7;
        text-decoration: none;
        border-bottom: 1px solid currentColor;
        padding-bottom: 2px;
    }
    /* Text leaves have no printed footer page number. */
    .page .sheet .folio { display: none; }
    .page.burgundy .leaf-foot { color: var(--paper); }

    /* ------------------------------------------------------------
       THE NEWSPAPER, STACKED

       A dispatch is a three-column broadsheet. Three columns on a
       375px leaf is 104px a column — narrower than the article grid
       was, and unreadable. Stacked, each article runs full measure
       in running order, and the rules move from the column edges to
       between the articles, which is where a stacked paper puts them.
       ------------------------------------------------------------ */
    .page .np__lead { grid-template-columns: 1fr; }
    .page .np__cols { grid-template-columns: 1fr; }
    .page .np-col { padding: 0; }
    .page .np-col + .np-col {
        border-left: none;
        border-top: 1px solid var(--np-rule);
        margin-top: calc(var(--np-gap) * 0.85);
        padding-top: calc(var(--np-gap) * 0.7);
    }
    /* Set for one column, not three. */
    .page .np-art__hd           { font-size: clamp(17px, 5.4cqw, 37px); }
    .page .np__lead .np-art__hd { font-size: clamp(21px, 7cqw, 44px); }
    .page .np-art__dek,
    .page .np-art p             { font-size: max(var(--t-floor-body, 0px), 1em); }

    /* ------------------------------------------------------------
       THE DISPATCH INDEX, ONE COLUMN
       Eighteen months set two-up is two 150px columns of dotted
       leader. One column gives the whole line to the entry and lets
       the type come up to a readable size. The inline column-count
       on the list is why this needs !important.
       ------------------------------------------------------------ */
    .page .ledger { column-count: 1 !important; font-size: 15px; }
    .page .ledger li { padding: 0.42em 0; }
}

/* ------------------------------------------------------------
   THE FOOTER BAR MUST OWN ITS STRIP

   Three things were fighting over the foot of the leaf:

   TWO FOLIOS. The hide rule named .page .sheet .folio, but the
   split template (fibre, the-workroom, how-we-operate) has no
   .sheet at all — its folio is a direct child of .page, so it
   survived and printed on top of the bar's own number. Every
   in-leaf folio goes now, whatever it is nested in; the bar
   carries the number.

   COPY UNDER THE BAR. The last line ran straight through the
   wordmark. Every text box that reaches the foot of a leaf now
   ends above the strip, not level with it.

   NOTHING TO SAY THERE IS MORE. The bar sits over the copy, so
   the copy has to fade into it — which also reads as an invitation
   to scroll on the leaves that scroll.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
    /* one number a leaf, and it lives in the bar */
    .page .folio { display: none; }

    /* the strip the bar owns, kept clear of the copy */
    /* A fixed clearance, not a percentage: percentage padding resolves
       against the container's WIDTH, so 13% of a 375px leaf is 49px of
       clearance for a bar measured against the HEIGHT. Stating the strip
       in px is the only way it means what it says. */
    .page .sheet,
    .page .split-body,
    .page .letter { padding-bottom: 52px; }

    /* The fade belongs to the bar, so it goes on every leaf that has
       one — not only the scrolling leaves, where it started life. */
    .page:has(> .leaf-foot)::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 13%;
        z-index: 1;                    /* over the copy, under the bar */
        pointer-events: none;
        background: linear-gradient(to bottom, transparent, var(--paper) 52%);
    }
    .page.burgundy:has(> .leaf-foot)::after { background: linear-gradient(to bottom, transparent, var(--burgundy) 52%); }
    .page.stock:has(> .leaf-foot)::after    { background: linear-gradient(to bottom, transparent, var(--stock) 52%); }

    /* The split template scrolls in its body column; it has no .sheet. */
    .page[data-scroll] .split-body {
        overflow-y: auto;
        touch-action: pan-y;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .page[data-scroll] .split { height: 100%; }
}

/* ------------------------------------------------------------
   A SCROLLING LEAF STARTS AT THE TOP

   The imprint sets its sheet to justify-content: flex-end — two
   thirds white, the small type sitting at the foot, which is the
   whole idea of the leaf in the hand. On a phone the copy is
   TALLER than the leaf, and bottom-aligning taller-than-the-box
   content pushes the head of it off the top: the kicker and the
   first line were simply gone, with no way to reach them.

   Any leaf that scrolls has to begin at its beginning. The inline
   style on the sheet is why this needs !important.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
    .page[data-scroll] .sheet {
        justify-content: flex-start !important;
    }
}