/* ============================================================
   Kadwood Atelier — editorial (magazine) primitives
   Loaded AFTER template.css by the magazine template pages.
   Reusable pieces: Didone display, drop caps, columns, rules,
   image-masked text, contents list, animated signatures.
   ============================================================ */

/* A full-height scroll surface for text-heavy editorial pages */
.sheet {
    position: relative;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    color: var(--ink);
    padding: clamp(28px, 6%, 64px);
    padding-bottom: 64px;
}
.sheet.paper { background: #f7f5f1; }   /* warm off-white */

/* ---------- Section eyebrow / kicker ---------- */
.kicker {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: clamp(10px, 1.4vw, 13px);
    margin: 0 0 1.2em;
}

/* ---------- Didone display headline ---------- */
.display {
    font-family: var(--font-serif);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: 0.005em;
    margin: 0;
}
.display .lg  { display: block; font-size: clamp(44px, 12vw, 120px); }
.display .md  { display: block; font-size: clamp(30px, 8vw, 78px); }
/* Mixed roman + italic stacked words (ref: "The way she wears it") */
.display-mix {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 0.9;
    margin: 0;
}
.display-mix span { display: block; }
.display-mix .i { font-style: italic; font-weight: 500; }

/* ---------- Italic serif standfirst / deck ---------- */
.standfirst {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(16px, 2.4vw, 26px);
    line-height: 1.3;
    margin: 0.6em 0 0;
}

/* ---------- Serif body copy ---------- */
.prose {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(12px, 1.55vw, 15px);
    line-height: 1.5;
    text-align: justify;
    hyphens: auto;
}
.prose p { margin: 0 0 0.9em; }
.prose.cols { column-count: 2; column-gap: clamp(18px, 3vw, 30px); }
.prose.tight { line-height: 1.45; }

/* Drop cap — put class on the first paragraph */
.prose .lead::first-letter,
.dropcap::first-letter {
    font-family: var(--font-serif);
    font-weight: 800;
    float: left;
    font-size: 3.4em;
    line-height: 0.72;
    padding: 0.06em 0.08em 0 0;
}

/* ---------- Rules ---------- */
.rule       { border: none; border-top: 2px solid var(--ink); margin: 0.6em 0; }
.rule-thin  { border: none; border-top: 1px solid var(--ink); margin: 0.6em 0; }
.rule-double{ border: none; border-top: 3px double var(--ink); margin: 0.6em 0; }

/* ---------- Credits (small caps, and a vertical margin variant) ---------- */
.credits {
    font-family: var(--font-body);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: clamp(8px, 1vw, 10px);
    line-height: 1.5;
    margin: 1.2em 0 0;
    opacity: 0.85;
}
.credit-vertical {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: rotate(180deg) translateX(50%);
    transform-origin: right center;
    writing-mode: vertical-rl;
    font-family: var(--font-body);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 8px;
    opacity: 0.6;
}

/* ---------- Folio (page number) ---------- */
.folio {
    position: absolute;
    bottom: 18px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.1em;
    opacity: 0.7;
}
.folio.left  { left: clamp(28px, 6%, 64px); }
.folio.right { right: clamp(28px, 6%, 64px); }

/* ============================================================
   1. Title over image
   ============================================================ */
.title-over { background: var(--ink); }
.title-over img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.title-over__panel {
    position: absolute;
    top: 4%;
    right: 5%;
    width: min(58%, 460px);
    text-align: right;
    color: var(--ink);          /* dark type over light photo; flip to blush over dark */
    text-shadow: 0 0 22px rgba(255,255,255,0.35);   /* halo keeps dark type legible on busy photos */
}
.title-over__panel.on-dark { color: var(--blush); text-shadow: 0 1px 24px rgba(0,0,0,0.55); }
.title-over__panel .display-mix .lg-w { font-size: clamp(40px, 11vw, 104px); }

/* ============================================================
   Full-image template & fashion magazine image notes
   ============================================================ */
.full-image { background: var(--ink); }
.full-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.image-note {
    position: absolute;
    bottom: clamp(18px, 5.5%, 36px);
    right: clamp(18px, 7.2%, 48px);
    text-align: right;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(8px, 1.1vw, 11px);
    line-height: 1.55;
    letter-spacing: 0.04em;
    color: var(--blush, #E8C7C3);
    background: var(--burgundy, #42141E);
    padding: 0.65em 1.05em;
    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: clamp(18px, 7.2%, 48px);
    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);
}

/* ============================================================
   2. Image-masked text on a colour field
   ============================================================ */
.mask-page {
    --sand: #c8bcae;            /* editable colour field */
    height: 100%;
    background: var(--sand);
    position: relative;
    overflow: hidden;
}
.mask-page__photo {
    position: absolute;
    top: 0; right: 0;
    width: 62%; height: 100%;
    object-fit: cover;
    display: block;
}
.mask-page__title {
    position: absolute;
    top: 50%; left: 6%;
    transform: translateY(-50%);
    margin: 0;
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 0.86;
    letter-spacing: 0.01em;
    font-size: clamp(46px, 15vw, 132px);
    /* the photo shows THROUGH the letters */
    background-image: var(--mask-img);
    background-size: 150% auto;
    background-position: 30% 30%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.mask-page__label {
    position: absolute;
    left: 6%;
    bottom: 12%;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: clamp(10px, 1.5vw, 14px);
    color: var(--ink);
}
.mask-page__label::after {
    content: "";
    display: block;
    width: 54px;
    border-top: 2px solid var(--ink);
    margin-top: 6px;
}

/* ============================================================
   3. Editorial article (left / right variants)
   ============================================================ */
.article-grid {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 3vw, 34px);
}
.article-grid .head-col  { display: flex; flex-direction: column; justify-content: flex-start; }
.article-grid .body-col  { display: flex; flex-direction: column; justify-content: flex-end; }
/* Right variant mirrors the columns */
.article-grid.flip .head-col { order: 2; }
.article-grid.flip .body-col { order: 1; text-align: left; }

/* ============================================================
   4. Contents (New Yorker style)
   ============================================================ */
.masthead {
    text-align: center;
    margin: 0 0 4px;
}
.masthead .name {
    font-family: var(--font-display);   /* Kadwood — brand moment */
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: clamp(30px, 6.5vw, 60px);
    margin: 0;
    line-height: 1;
}
.masthead .date {
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: clamp(10px, 1.4vw, 13px);
    margin: 8px 0 0;
}
.toc { margin-top: 10px; }
.toc-row {
    display: grid;
    grid-template-columns: minmax(90px, 1.1fr) 34px 2fr;
    column-gap: 14px;
    align-items: baseline;
    padding: 9px 0;
}
.toc-row .author {
    grid-column: 1;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: clamp(9px, 1.2vw, 11px);
    text-align: right;
    align-self: start;
    padding-top: 3px;
}
.toc-row .pg {   /* TOC page number — NOT the same as a book .page */
    grid-column: 2;
    font-family: var(--font-serif);
    font-size: clamp(12px, 1.6vw, 15px);
    text-align: right;
    align-self: start;
}
.toc-row .entry { grid-column: 3; justify-self: stretch; min-width: 0; font-family: var(--font-serif); }
.toc-row .entry .sec {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: clamp(11px, 1.5vw, 14px);
    font-weight: 500;
}
.toc-row .entry .title { display: block; font-size: clamp(12px, 1.6vw, 15px); }
.toc-row .entry .desc  { display: block; font-style: italic; font-size: clamp(11px, 1.5vw, 14px); opacity: 0.9; }
.toc-foot {
    font-family: var(--font-body);
    font-size: clamp(9px, 1.1vw, 11px);
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-top: 10px;
}
.toc-foot .lbl { font-weight: 700; letter-spacing: 0.12em; }

/* ============================================================
   5. Editor's note (columns + collage + signature)
   ============================================================ */
.note-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 30px); align-items: start; }
.note-sign { text-align: right; margin-top: 26px; line-height: 1.1; }
.note-sign .sig-write { cursor: pointer; }
.note-sign .l1 { font-size: clamp(20px, 3vw, 30px); }
.note-sign .l2 { font-size: clamp(30px, 5vw, 52px); display: block; margin-top: 4px; }
@media (max-width: 520px) { .note-top { grid-template-columns: 1fr; } }
.note-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(38px, 9vw, 92px);
    line-height: 0.95;
    text-align: center;
    margin: 0.1em 0 0.6em;
}
.note-kicker { text-align: center; }
.collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 6px;
    margin: 0 0 14px;
}
.collage img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 3/4; }
.collage .tall { grid-row: span 2; aspect-ratio: 3/5; }

/* Cover / section-divider scrim (keeps overlay title legible over any photo) */
.cover-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,13,13,0.15) 0%, rgba(13,13,13,0.55) 100%);
}

/* ============================================================
   6. Letter — a typed sheet, ca. 1910
   Everything on this page is Courier Prime at ONE size. A real
   typewriter had no second size and no bold: hierarchy comes from
   position, blank lines and capitals only. The single exception is
   the engraved letterhead (the wordmark) and the ink signature.
   ============================================================ */
.letter {
    font-family: var(--font-type);
    font-size: clamp(9px, 1.45vw, 13px);
    line-height: 1.6;
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* --- Letterhead: engraved mark, centred --- */
.lh { text-align: center; }
.letter .wordmark.lh-mark {
    font-family: var(--font-display);    /* Kadwood brand wordmark */
    font-weight: 400;
    letter-spacing: 0;                   /* see .wordmark ligature note */
    font-variant-ligatures: common-ligatures;
    text-transform: uppercase;
    font-size: clamp(20px, 3.6vw, 30px);
    line-height: 1;
    margin: 0;
}
.lh-house {
    font-family: var(--font-type);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.86em;
    margin: 0.9em 0 0;
    /* the typist could not centre perfectly; the tracking is the flourish */
    text-indent: 0.24em;
}
.lh-rule {
    border: 0;
    border-top: 1px solid currentColor;
    opacity: 0.5;
    margin: clamp(14px, 2.6vh, 22px) 0 0;
}

/* --- Date, right. Address, left. Both typed, not set. Both are inside
       .lt-block, so "right" is the measure's right edge — the same column
       the body copy wraps at — not the edge of the sheet. --- */
.lt-date {
    text-align: right;
    margin: clamp(20px, 4vh, 34px) 0 0;
}
.lt-to {
    font-style: normal;                  /* <address> italicises by default */
    line-height: 1.45;                   /* typed block, single-spaced */
    margin: clamp(14px, 2.6vh, 22px) 0 0;
}
/* --- The typed block: date, address, salutation, body and sign-off, centred
       on the sheet as one column. The measure lives here so every part of the
       letter shares the same left edge and the same width. --- */
.lt-block {
    width: 100%;
    max-width: 46ch;
    margin-inline: auto;
}
.lt-salute { margin: clamp(20px, 4vh, 34px) 0 0; }

/* --- Body. A tight typed block: single-spaced, ragged right, set to a
       narrow measure so it sits well inside the sheet the way a real
       typed page does. First line indented one tab stop. --- */
.lt-body { margin: 1.4em 0 0; }
.lt-body p {
    margin: 0;
    text-indent: 5ch;                    /* one 1910 tab stop */
    line-height: 1.45;                   /* single-spaced on the platen */
}
.lt-body p + p { margin-top: 1.45em; }   /* one blank typed line */

/* --- Sign-off --- */
.lt-signoff { margin: clamp(24px, 5vh, 42px) 0 0; }
.lt-valediction { margin: 0; }
.letter .sig-fade {
    margin: 0.2em 0 0;
    text-align: left;
    font-size: clamp(22px, 3.2vw, 32px);
}

/* --- Foot of the sheet --- */
.lt-foot { margin-top: auto; padding-top: clamp(20px, 4vh, 36px); }
.letter-addr {
    font-family: var(--font-type);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.78em;
    line-height: 1.7;
    text-align: center;
    margin: 0;
    opacity: 0.7;
}

/* ============================================================
   Animated signatures
   ============================================================ */

/* (a) Handwriting reveal — wipes left→right over any script text.
   Markup: <span class="sig-draw sig-write"><span class="ink">…</span></span> */
.sig-write .ink {
    font-family: var(--font-script);
    display: inline-block;
    clip-path: inset(0 100% 0 0);
}
.sig-write.drawn .ink {
    animation: sig-wipe var(--sig-dur, 2.6s) var(--sig-delay, 0s) steps(48, end) forwards;
}
@keyframes sig-wipe { to { clip-path: inset(0 -2% 0 0); } }

/* (b) SVG stroke draw — a true "being drawn" pen stroke.
   Markup: <svg class="sig-draw sig-svg"><path d="…"></path></svg>
   pageflip.js measures each path and animates stroke-dashoffset. */
.sig-svg { display: block; overflow: visible; width: min(360px, 70%); height: auto; margin: 10px auto 0; cursor: pointer; }
.sig-svg path {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* (c) Per-letter fade — script text that appears one character at a time.
   Markup: <p class="sig-draw sig-fade">Best vibes, E xx</p>
   pageflip.js splits the text into <span class="ch"> and staggers each one.
   Tune with --sig-step (gap per letter), --sig-dur, --sig-delay. */
.sig-fade {
    font-family: var(--font-script);
    font-size: clamp(24px, 3.6vw, 38px);
    line-height: 1.35;
    color: var(--ink);
    margin: clamp(26px, 6vh, 54px) auto 0;
    cursor: pointer;
}
.sig-fade .ch {
    display: inline-block;
    white-space: pre;
    text-indent: 0;                    /* see the note on .type-fade .wd */
    opacity: 0;
    transform: translateY(0.16em);
}
.sig-fade.drawn .ch {
    animation: sig-letter-in var(--sig-dur, 0.55s) ease forwards;
    animation-delay: calc(var(--sig-delay, 0s) + var(--i) * var(--sig-step, 60ms));
}
@keyframes sig-letter-in { to { opacity: 1; transform: translateY(0); } }

/* (d) Typewriter reveal — body copy arrives one WORD at a time, each word
   easing out of a soft blur so it reads as typing rather than blinking on.
   Markup: <div class="type-fade">…any paragraphs/inline markup…</div>
   pageflip.js wraps every word in <span class="wd"> and staggers them.
   Tune with --type-step (gap per word), --type-dur, --type-delay. */
.type-fade .wd {
    display: inline-block;
    /* An inline-block is a block container, so it INHERITS text-indent and
       re-applies it to its own first line — every word would get the
       paragraph's tab indent. Reset it here, not on the paragraph. */
    text-indent: 0;
    opacity: 0;
    filter: blur(3px);
    transform: translateY(0.1em);
}
.type-fade.drawn .wd {
    animation: type-word-in var(--type-dur, 0.45s) ease-out forwards;
    animation-delay: calc(var(--type-delay, 0s) + var(--i) * var(--type-step, 55ms));
}
@keyframes type-word-in {
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* Respect reduced-motion: show signatures fully, skip the draw */
@media (prefers-reduced-motion: reduce) {
    .sig-write .ink { clip-path: none !important; animation: none !important; }
    .sig-svg path   { stroke-dashoffset: 0 !important; transition: none !important; }
    .sig-fade .ch   { opacity: 1 !important; transform: none !important; animation: none !important; }
    .type-fade .wd  { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; }
}

/* ============================================================
   SIZING NOTE for sections 7-9 below
   ------------------------------------------------------------
   The older templates size type in `vw`, which measures the
   WINDOW. The page is a fixed portrait box inside a window of
   any shape, so on a wide window `vw` type runs off the page —
   the failure the README warns about for issue-02. Issue-02
   solves it with --page-w, but that is only published when
   #book carries data-engine="v2", and issue-01 does not.

   So these three templates put `container-type: inline-size` on
   an inner wrapper and size everything in `cqw`: 1cqw = 1% of
   the PAGE's content width, whatever the window is doing. No
   engine flag, no change to any existing rule.

   Put .cq on a block that is NOT the .page itself — a container
   is a containing block for its absolutely positioned children,
   and .page is StPageFlip's own element.
   ============================================================ */
.cq { container-type: inline-size; }

/* ============================================================
   7. Introduction / chapter opener
   Big Kadwood title floating in the top half, a rule, then two
   justified columns at the foot. Ref: a printed book opener.
   ============================================================ */
.intro {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

/* Running head — the small line at the very top of the sheet */
.intro__runhead {
    font-family: var(--font-body);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    text-indent: 0.22em;             /* optical re-centre: tracking adds a trailing gap */
    font-size: clamp(7px, 1.5cqw, 11px);
    text-align: center;
    opacity: 0.75;
    margin: 0;
}

/* Title block — centred in the free space, i.e. the top half */
.intro__head {
    grid-row: 2;
    align-self: center;
    text-align: center;
}
.intro__mark {
    font-family: var(--font-display);       /* Kadwood */
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    font-size: clamp(22px, 8.6cqw, 74px);
    line-height: 1.05;
    margin: 0;
}
/* LIGATURE: tracking kills the KADWOOD "OO" ligature (see template.css).
   Put .no-track on the title whenever the word is literally KADWOOD. */
.intro__mark.no-track {
    letter-spacing: 0;
    text-indent: 0;
    font-variant-ligatures: common-ligatures;
}
.intro__byline {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(9px, 2.1cqw, 16px);
    margin: 0.9em 0 0;
}

/* Body block — hairline, then the two columns, at the foot */
.intro__body { grid-row: 3; }
.intro__rule {
    border: none;
    border-top: 1px solid var(--ink);
    margin: 0 0 clamp(10px, 2.2cqw, 20px);
}
.intro__body .prose {
    font-size: clamp(8px, 1.65cqw, 14px);
    line-height: 1.55;
}
.intro__body .prose.cols { column-gap: clamp(12px, 3cqw, 28px); }
/* Printed-book paragraphing: indented, no blank line between */
.intro__body .prose p { margin: 0 0 0.25em; text-indent: 1.7em; }

/* ============================================================
   8. Newspaper — a whole broadsheet on one page
   Masthead + vol/date/price band + 3 columns + a fixed weather
   strip with a barcode. Four variants by article count; they
   differ only in how many .np-art blocks sit in the columns and
   in --np-body, which steps down as the page gets busier.
   ============================================================ */
.sheet.np-sheet {
    /* newspapers carry tighter margins than the editorial sheets */
    padding: clamp(16px, 3.6%, 38px);
    padding-bottom: clamp(28px, 6%, 56px);
}

.np {
    --np-body: clamp(6px, 1.28cqw, 11px);
    --np-gap:  clamp(6px, 1.5cqw, 14px);
    --np-rule: rgba(13, 13, 13, 0.26);
    /* min-height, NOT height: on a wide page the columns fit and the spare
       space goes under them (margin-top:auto pins the weather strip to the
       foot). On a phone-narrow page the type hits its clamp floor and the
       columns no longer fit — then .np grows, the weather strip is pushed
       below the copy, and the sheet scrolls. With height:100% the columns
       would instead overrun and print on top of the weather strip. */
    min-height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--ink);
}
.np--4 { --np-body: clamp(7px, 1.46cqw, 12.5px); }
.np--5 { --np-body: clamp(7px, 1.36cqw, 11.5px); }
.np--6 { --np-body: clamp(6px, 1.26cqw, 10.5px); }
.np--7 { --np-body: clamp(6px, 1.14cqw, 9.5px); }

/* ---------- Masthead + meta band ---------- */
.np__masthead {
    font-family: var(--font-display);       /* Kadwood */
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.03em;
    text-indent: 0.03em;
    /* Sized to fit ~14 characters on one line. A longer name wraps to two. */
    font-size: clamp(22px, 9.2cqw, 78px);
    line-height: 0.98;
    margin: 0;
    padding-bottom: clamp(3px, 0.8cqw, 8px);
    border-bottom: 2.5px solid var(--burgundy);
}
.np__masthead.no-track {          /* see the ligature note in section 7 */
    letter-spacing: 0;
    text-indent: 0;
    font-variant-ligatures: common-ligatures;
}
.np__meta {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    gap: clamp(6px, 1.5cqw, 14px);
    border-bottom: 1px solid var(--burgundy);
    padding: clamp(2px, 0.6cqw, 6px) 0;
    font-family: var(--font-body);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: clamp(5px, 1.05cqw, 9px);
}
.np__meta .r { text-align: right; }

/* ---------- Lead story: headline block + hero well, side by side ---------- */
.np__lead {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--np-gap);
    padding: var(--np-gap) 0;
    border-bottom: 1px solid var(--np-rule);
}

/* ---------- The three columns ---------- */
.np__cols {
    flex: 1 0 auto;                 /* grow into spare space, never shrink below the copy */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-top: var(--np-gap);
}
.np-col {
    display: flex;
    flex-direction: column;
    padding: 0 calc(var(--np-gap) / 2);
    min-width: 0;
}
.np-col:first-child { padding-left: 0; }
.np-col:last-child  { padding-right: 0; }
/* the hairline sits exactly on the column boundary, padded evenly either side */
.np-col + .np-col { border-left: 1px solid var(--np-rule); }

/* ---------- One article ---------- */
.np-art + .np-art {
    margin-top: calc(var(--np-gap) * 0.85);
    padding-top: calc(var(--np-gap) * 0.7);
    border-top: 1px solid var(--np-rule);
}
.np-art__hd {
    font-family: var(--font-display);       /* Kadwood, per the brief */
    font-weight: 400;
    font-size: clamp(9px, 2.5cqw, 21px);
    line-height: 1.1;
    margin: 0 0 0.3em;
}
.np__lead .np-art__hd { font-size: clamp(14px, 4.3cqw, 37px); }
.np-art__by {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: calc(var(--np-body) * 0.95);
    margin: 0 0 0.7em;
}
.np-art__body {
    font-family: var(--font-body);          /* Helvetica Neue, per the brief */
    font-weight: 300;
    font-size: var(--np-body);
    line-height: 1.42;
    text-align: justify;
    hyphens: auto;
}
.np-art__body p { margin: 0 0 0.5em; }
.np-art__body .lead::first-letter {
    font-family: var(--font-display);
    font-weight: 400;
    float: left;
    font-size: 2.6em;
    line-height: 0.78;
    padding: 0.04em 0.1em 0 0;
}
/* "Page 5" — the continuation marker at the foot of a column */
.np-art__pg {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 700;
    font-size: calc(var(--np-body) * 0.95);
    margin: 0.5em 0 0;
}

/* ---------- Image well + caption strip ----------
   Drop a real <img> inside .np-art__well and it covers the
   placeholder label edge to edge. Wells are 4:3 (~800×600);
   the lead's hero well is 3:2 (~1200×800). */
.np-art__fig { margin: 0 0 0.6em; }
.np-art__well {
    position: relative;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(66, 20, 30, 0.09);
    font-family: var(--font-body);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    font-size: calc(var(--np-body) * 0.9);
    color: var(--burgundy);
}
/* the hero is wide and shallow — it buys height back for the columns */
.np__lead .np-art__well { aspect-ratio: 2 / 1; }
/* seven stories and seven photos on one sheet: the wells go shallower still */
.np--7 .np-art__well { aspect-ratio: 16 / 9; }
.np-art__well img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.np-art__cap {
    background: var(--burgundy);
    color: var(--blush);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: calc(var(--np-body) * 0.85);
    line-height: 1.35;
    padding: 0.35em 0.6em;
    margin: 0;
}

/* ---------- Weather strip (static in all four variants) ---------- */
.np__weather {
    margin-top: auto;
    padding-top: var(--np-gap);
}
.np__weather-bar {
    background: var(--burgundy);
    color: var(--blush);
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: clamp(5px, 1.15cqw, 10px);
    padding: 0.4em clamp(4px, 1cqw, 9px);
}
.np__weather-bar .lc { text-transform: none; font-weight: 300; letter-spacing: 0.04em; }
.wx {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: clamp(6px, 1.8cqw, 18px);
    align-items: center;
    padding-top: clamp(4px, 1cqw, 9px);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(4.5px, 0.95cqw, 8px);
    line-height: 1.5;
}
.wx__now {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.1cqw, 10px);
}
.wx__now svg {
    flex: none;
    width: clamp(14px, 3.4cqw, 30px);
    height: auto;
    color: var(--burgundy);
}
.wx__now .ttl {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    display: block;
}
.wx__index {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(6px, 1.8cqw, 16px);
    row-gap: 0.2em;
}
.wx__index .row { display: flex; align-items: baseline; gap: 0.35em; }
.wx__index .dots {
    flex: 1 1 auto;
    border-bottom: 1px dotted currentColor;
    opacity: 0.55;
    transform: translateY(-0.22em);
}
.wx__barcode { text-align: center; }
.wx__barcode svg {
    display: block;
    width: clamp(40px, 10cqw, 88px);
    height: clamp(14px, 3.4cqw, 30px);
    color: var(--ink);
}
.wx__barcode .digits {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(4px, 0.8cqw, 7px);
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* ============================================================
   9. Full-bleed photo with the title three quarters down
   ============================================================ */
.page.fb { background: var(--ink); }
/* the container lives on an inner stage, never on .page itself */
.fb__stage { position: absolute; inset: 0; }
.fb__stage > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* keeps the type legible over a busy or pale lower third */
.fb__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(13, 13, 13, 0) 42%,
        rgba(13, 13, 13, 0.26) 74%,
        rgba(13, 13, 13, 0.44) 100%);
    pointer-events: none;
}
.fb__title {
    position: absolute;
    left: 0;
    right: 0;
    top: 74%;                       /* three quarters down */
    transform: translateY(-50%);
    margin: 0;
    padding: 0 clamp(14px, 5cqw, 48px);
    text-align: center;
    font-family: var(--font-display);       /* Kadwood */
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    font-size: clamp(24px, 11cqw, 92px);
    line-height: 0.98;
    color: #ffffff;
    text-shadow: 0 2px 26px rgba(13, 13, 13, 0.45);
}
.fb__title.no-track {             /* see the ligature note in section 7 */
    letter-spacing: 0;
    text-indent: 0;
    font-variant-ligatures: common-ligatures;
}
/* dark type instead, for a pale photo */
.fb__title.on-light {
    color: var(--ink);
    text-shadow: 0 0 24px rgba(255, 255, 255, 0.45);
}
.fb__sub {
    position: absolute;
    left: 0;
    right: 0;
    top: 82%;
    margin: 0;
    padding: 0 clamp(14px, 5cqw, 48px);
    text-align: center;
    font-family: var(--font-body);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    font-size: clamp(6px, 1.5cqw, 12px);
    color: #ffffff;
    opacity: 0.9;
}
.fb__title.on-light ~ .fb__sub { color: var(--ink); opacity: 0.75; }