/* ============================================================
   NEWS — /news (archive) and /news/<slug> (single post)
   Layered on base.css + v3.css + v9.css. Tokens, type and accent
   inherited, so both layouts track every palette automatically.

   ⚠️ ONE SHEET, TWO LAYOUTS. This is the only stylesheet on the site
   loaded by more than one page that is not a page-type sheet, and it
   is deliberate: an archive and its single post share the meta line,
   the card shapes and the onward rail, and splitting them into two
   sheets is how those drift apart. Sections are marked ARCHIVE ONLY
   and SINGLE ONLY below — check which you are in before editing.

   Every selector is prefixed .nw- and no other page loads this file,
   so nothing here can reach the rest of the site (CLAUDE.md § Layout).

   Shapes are borrowed from about.css (crumb, next-grid, cards, CTA
   panel) rather than invented: this is About-tier trust content and
   should read as one system.
   ============================================================ */

/* ============================================================
   SHARED — both layouts
   ============================================================ */

/* ---------- Breadcrumb (shared shape with .ab-crumb / .cd-crumb) ---------- */
.nw-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--slate-mid);
}
.nw-crumb a { color: var(--slate-mid); text-decoration: none; border: 0; transition: color 160ms var(--ease); }
.nw-crumb a:hover { color: var(--fg-strong); opacity: 1; }
.nw-crumb .sep { opacity: 0.5; }
.nw-crumb .here { color: var(--fg-strong); }

/* ---------- The outlet name ----------
   Used by the archive card's foot. ⚠️ --slate-mid is 3.23:1 on --bg and fails
   AA; this line names the publisher, which is real information, so it takes
   --sage-deep. */
.nw-outlet {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

.nw-standfirst {
  margin-top: 28px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.62;
  color: var(--slate-dark);
  max-width: var(--measure-wide);
}

/* ============================================================
   ARCHIVE ONLY — /news
   ============================================================ */

.nw-hero {
  padding: 43px 0 0;
  border-bottom: 1px solid var(--border-soft);
}
.nw-hero-text { padding: 8px 0 64px; }
.nw-hero h1 {
  margin: 26px 0 0;
  /* ⚠️ `.display.large` (0,2,0) out-specifies this rule (0,1,1) and supplies
     the size in practice — the same arrangement as `.ab-hero h1`. Kept here
     so the hero sheets stay comparable. Both ramps cap at 68px, which is what
     stops the H1 gaining a line above 1440, where the container stops growing
     and vw type does not (CLAUDE.md § Layout). */
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: 1.02;
  max-width: none;
}
.nw-hero h1 em { font-style: italic; }

.nw-index { padding: var(--section-py) 0; background: var(--bg-alt); }

/* ---------- The item card ---------- `[DECISION — Jacob, 9 Sept 2026: D2]`
   Two-up, every item identical. ⛔ No featured slot: one feature plus five
   leaves a hole in the second row of a three-up, and a lead item has to be
   re-chosen every time a post lands. Six items fill three clean rows here.

   🔴 THE CHASSIS IS base.css `.condition-card`, NOT AN APPROXIMATION OF IT.
   --bg-card, **6px** radius, **no border**, and the soft
   `0 8px 24px rgba(31,42,38,0.06)` lift on `translateY(-2px)`. An earlier
   draft of this card used a 12px radius, a 1px border and a
   `0 20px 48px / 0.28` shadow — three values the site's own cards do not
   carry anywhere. ⛔ Do not reintroduce them; check `.condition-card`
   (base.css:902) before changing anything here.

   `overflow: hidden` is the one addition, and it is load-bearing: it is what
   clips the bled image to the card's top corners. */
.nw-index-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.nw-item-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.nw-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(31,42,38,0.06);
  opacity: 1;
}
/* Bled to the top and both sides — no padding above or beside it. */
.nw-item-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* `.condition-card` is `32px 34px 28px`. The image carries the top mass here,
   so the body opens tighter and closes deeper; the 34px side padding is
   unchanged, which is what keeps the two card types feeling related. */
.nw-item-body {
  padding: 26px 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}
.nw-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
/* base.css `.condition-tag`, verbatim. ⚠️ 10px is below the 13px reading
   floor on purpose — §4's second ramp covers uppercase tracked labels, and
   this is the same component the condition cards already ship. The tag is
   also never the only carrier of its information: the outlet name repeats in
   the foot at 12px. */
.nw-tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.nw-item-date {
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  color: var(--slate-dark);
}
/* `.condition-card h3` — serif 28, 1.12, -0.01em. */
.nw-item-card h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
  margin: 0;
}
.nw-item-card h2 em { font-style: italic; }
.nw-item-card p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--slate-dark);
  margin: 0;
}
/* `.condition-card .more` pins itself with `margin-top: auto`, so cards of
   uneven copy length still line their footers up. */
.nw-item-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--border-soft);
}
/* ⛔ Not the coral uppercase treatment. `.condition-card .more` is 13px,
   weight 500, --fg-strong — quiet and dark. */
.nw-more {
  font-size: var(--fs-note);
  font-weight: 500;
  color: var(--fg-strong);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.nw-more .arrow { transition: transform 160ms var(--ease); }
.nw-item-card:hover .nw-more .arrow { transform: translateX(4px); }

/* ============================================================
   SINGLE ONLY — /news/<slug>   `[DECISION — Jacob, 9 Sept 2026: H + rail]`

   🔴 THIS IS patient-story.css's ANATOMY, NOT A NEW ONE. The site already
   has a long-form article type and it settled these questions in August:

     · the back link sits at the TOP, before the title (`.ps-back`), not at
       the foot where this page first carried it
     · the hero is TWO COLUMNS, text left and media right (`.ps-hero-cols`).
       🔴 That is what removes the stepping: the image sits BESIDE the title,
       so there is never a second full-width edge below the text to misalign
       against.
     · the reading column is **780px FLUSH LEFT, not centred** — the comment
       at patient-story.css:228 carries the measurement, 780 at 20px renders
       80 characters at 1440 `[DECISION — Jacob, 8 Aug 2026]`
     · body copy is 20px / 1.78, and the pull-quote breaks WIDER than the
       column at 960 with a 2px --accent left border

   ⛔ Do not restore the 900px centred column this page shipped first. It
   contradicted the site's own long-form decision, and it is what made the
   stepped edges visible.
   ============================================================ */

.nw-post-head { padding: 48px 0 8px; }
.nw-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--slate-mid);
}
.nw-back:hover { color: var(--fg-strong); opacity: 1; }
.nw-back .arrow { transition: transform 160ms var(--ease); }
.nw-back:hover .arrow { transform: translateX(-3px); }

/* 🔴 ONE GRID, USED TWICE — the hero and the body both take it, which is what
   puts the source rail directly beneath the hero image sharing its edges.
   ⛔ Do not give them different tracks.

   The numbers are chosen, not rounded: at 1440 the container's content box is
   1240, so 1240 − 400 − 60 = **780**, the site's decided prose measure,
   exactly. Change the rail width or the gap and the prose column stops being
   780 at the reference width. */
.nw-post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 60px;
  align-items: start;
}
/* 🔴 THE HERO RUNS 56 / 44, THE BODY DOES NOT `[Jacob, 9 Sept 2026]` — a
   bigger image up top, taken up in two steps (60/40, then another 10% on the
   image). The arithmetic, since 44 looks arbitrary otherwise: the available
   width at 1440 is 1240 − 60 = 1180, and 44% of that is 519, which is 472 ×
   1.1 exactly. Written as `fr` rather than a pixel width so the ratio holds at
   every container width instead of only at 1440.

   ⚠️ THE CONSEQUENCE, so nobody "fixes" it later: the image and the rail no
   longer share a LEFT edge. They still share the right one — both end at the
   container — but the image now starts 112px further left at 1440 (821
   against 933). That is the price of the bigger image, and it is deliberate.

   ⛔ Do not make the body match by widening the rail. The body's tracks are
   what hold the prose at 780, the measure Jacob settled on 8 Aug 2026; a
   472px rail would drag the reading column down to 708. The hero has no such
   constraint, which is why only the hero moves. */
.nw-post-head .nw-post-grid {
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  align-items: center;
}
/* `min-width: 0` on both hero columns, exactly as patient-story.css:58 does
   for `.ps-hero-text` / `.ps-hero-media`. A grid item's default
   `min-width: auto` refuses to shrink below its content, so one long unbroken
   string in either column pushes the track past its fr share instead of
   wrapping. */
.nw-post-intro { min-width: 0; }
.nw-post-head .nw-post-media { min-width: 0; }

/* `.ps-hero-eyebrow` / `.ps-cond` / `.ps-country` — the same chip row a
   patient story uses for condition + country. The category chip here is the
   same idea as the archive card's `.nw-tag`. */
.nw-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 26px;
}
.nw-chip-cat {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.nw-chip-src {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-mid);
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.nw-chip-src::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--slate-light);
}

.nw-post-head h1 {
  margin: 0;
  /* `.ps-hero-cols .ps-h1` — the .display.large ramp, so a news post's title
     is the same size as /about, /costs and a patient story. */
  font-size: clamp(40px, 4.2vw, 68px);
  line-height: 1.03;
  letter-spacing: -0.018em;
  max-width: none;
}
.nw-post-head h1 em { font-style: italic; }
/* ⛔ NO STANDFIRST ON THE POST HEADER `[Jacob, 9 Sept 2026]`. The header runs
   chips -> h1 -> image and nothing else. The `.ps-standfirst` override that
   used to live here is deleted rather than left unused; `.nw-standfirst`
   itself stays, because the archive hero still uses it. */

.nw-post-media { margin: 0; }
.nw-post-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  object-fit: cover;
}
.nw-post-media figcaption {
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  /* Captions carry real information, so --slate-dark, not --slate-mid. */
  color: var(--slate-dark);
}

/* ---------- The reading column ---------- */
.nw-post-body { padding: 76px 0 96px; }
/* The left track. ⛔ It sets NO max-width — the prose blocks inside carry the
   780 measure, and the pull-quote between them is allowed to exceed it. Clamp
   this and the pull silently stops breaking wide. */
.nw-post-col { min-width: 0; }
.nw-prose { max-width: 780px; margin: 0; }
.nw-kicker {
  display: block;
  margin-bottom: 30px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-deep);
}
/* 🔴 `:root:root` IS LOAD-BEARING, and patient-story.css:238 documents why:
   v3.css:567 carries `:root:root p` at (0,2,1) setting --fs-body, so a plain
   `.nw-prose p` at (0,1,1) LOSES and the 20px below would never ship. The page
   would quietly render 17px and nothing would look broken. ⛔ Do not simplify
   this to `.nw-prose p`. Anything overriding it must outrank (0,3,1). */
:root:root .nw-prose p {
  font-size: 20px;
  line-height: 1.78;
  color: var(--slate-dark);
  margin: 0 0 1.35em;
}
/* (0,4,1) — must stay above the rule it overrides */
:root:root .nw-prose p.lede {
  font-size: clamp(21px, 2vw, 25px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 1.4em;
}
.nw-prose h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin: 48px 0 18px;
  max-width: none;
}
.nw-prose a:not(.nw-btn-out) {
  color: var(--accent-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.nw-prose a:not(.nw-btn-out):hover { opacity: 0.75; }

/* ---------- The cited headline, as `.ps-pull` ----------
   🔴 The only words quoted from the article anywhere on this site, and they
   are the headline, used as a citation. ⛔ Do not extend this with sentences
   from the piece — it is copyrighted and marked personal, non-commercial use.
   Describe, link, do not reproduce.
   ⚠️ It breaks WIDER than the 780 column, at 960, deliberately — that is the
   `.ps-pull` behaviour and it is the one element allowed to. */
.nw-pull {
  max-width: 960px;
  margin: 52px 0;
  padding-left: 34px;
  border-left: 2px solid var(--accent);
}
.nw-pull blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.24;
  letter-spacing: -0.008em;
  color: var(--fg-strong);
  text-wrap: pretty;
}
.nw-pull blockquote a { color: inherit; border: 0; }
.nw-pull blockquote a:hover { color: var(--accent-deep); opacity: 1; }
.nw-pull .cite {
  display: block;
  margin-top: 20px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--slate-mid);
}
.nw-pull .cite b { color: var(--fg-strong); font-weight: 600; }

/* ---------- The source rail ----------
   Sits in the grid's right track, directly under the hero image and sharing
   its edges. ⚠️ IT IS OPTIONAL COPY, NOT CHROME: a post with no external
   source omits the <aside> and the prose still sits at 780 in the left track,
   because the track is sized by the grid and not by its contents. ⛔ Do not
   add an empty rail to "balance" such a page.

   The rail carries the FACTS and the button; the pull-quote above carries the
   headline. ⛔ Do not repeat the headline here. */
.nw-rail {
  position: sticky;
  top: 104px;
  padding: 26px 24px;
  background: var(--bg-alt);
  border-radius: 12px;
}
.nw-rail h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin: 0 0 18px;
}
.nw-rail dl { margin: 0; display: flex; flex-direction: column; gap: 15px; }
.nw-rail dt {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-mid);
  margin-bottom: 4px;
}
.nw-rail dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg-strong);
}
.nw-rail .nw-btn-out {
  margin-top: 24px;
  width: 100%;
  justify-content: center;
  padding: 12px 16px;
  font-size: 13px;
}
.nw-rail .nw-paywall { display: block; margin-top: 14px; font-size: 12px; }

/* ---------- The "what is not repeated here" note ----------
   🔴 Ordinary copy, NOT a suppression primitive. Chrome spec §5 retired the
   review-system classes; this is a paragraph a patient is meant to read.
   ⛔ Do not give it a flag, badge or hidden state. */
.nw-note {
  margin-top: 56px;
  background: var(--sage-pale);
  border-radius: 12px;
  padding: clamp(24px, 3vw, 34px);
}
.nw-note h2 { margin-top: 0; color: var(--sage-ink); }
:root:root .nw-note p { font-size: 17px; line-height: 1.66; color: var(--sage-ink); }
.nw-note p + p { margin-top: 16px; }
.nw-note a { color: var(--sage-ink) !important; }

/* ⚠️ The in-flow "read the article" button exists ONLY below 1080, where the
   rail is gone. Above that the rail carries it, and showing both would put
   two buttons to the same URL on one screen. */
.nw-readmore { display: none; }
.nw-btn-out {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fg-strong);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 13px 26px;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.nw-btn-out:hover { border-color: var(--accent-deep); background: var(--bg-alt); opacity: 1; }
.nw-btn-out .arrow { transition: transform 160ms var(--ease); }
.nw-btn-out:hover .arrow { transform: translate(3px, -3px); }
.nw-paywall {
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  color: var(--slate-dark);
}

/* ============================================================
   SHARED — onward rail and closing CTA
   ⚠️ The 1000–1200px band is the known weak spot for a four-up grid,
   so it is stepped explicitly below (CLAUDE.md § Layout).
   ============================================================ */
.nw-next { padding: var(--section-py) 0; background: var(--bg-alt); }
.nw-next .section-head { margin-bottom: 44px; }
.nw-next-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.nw-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 30px 28px 26px;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.nw-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px -24px rgba(31,42,38,0.28);
  opacity: 1;
}
.nw-card h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.16;
  letter-spacing: -0.005em;
  color: var(--fg-strong);
  margin: 0;
}
.nw-card p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--slate-dark);
  flex: 1;
}
.nw-card .go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.nw-card .go .arrow { transition: transform 160ms var(--ease); }
.nw-card:hover .go .arrow { transform: translateX(4px); }

/* 🔴 THE CLOSING CTA IS `.ab-cta-panel`, THE ONE ON /about — copy left,
   photograph right. Same tracks (1.1fr / 0.9fr), same gap ramp, same
   4 / 4.4 portrait crop pinned to `center top`, same 12px radius on the
   image against the panel's 16px.

   ⚠️ It reuses `/about`'s photograph too, and that is the point rather than
   laziness: `suh-patient-with-nurse.webp` is already published on this site,
   so it carries no new consent or provenance question. ⛔ Do not swap in an
   unpublished image here without checking both. */
.nw-cta-sec { padding: var(--section-py) 0 calc(var(--section-py) * 1.2); }
.nw-cta-panel {
  background: var(--sage-pale);
  border-radius: 16px;
  padding: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
/* `.ab-cta-copy` — the left COLUMN, not the paragraph. ⚠️ This class used to
   name the paragraph on this page; it now names the column, as it does on
   /about, so the two sheets read the same. */
.nw-cta-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.nw-cta-panel h2 { max-width: 18ch; color: var(--sage-ink); }
.nw-cta-panel h2 em { font-style: italic; }
.nw-cta-panel p {
  max-width: var(--measure);
  color: var(--sage-ink);
  opacity: 0.86;
}
.nw-cta-media { margin: 0; }
.nw-cta-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.4;
  border-radius: 12px;
  object-fit: cover;
  /* ⚠️ `center top`, not `center`. The source is 814 x 992 and a centred crop
     takes the heads off. */
  object-position: center top;
}
.nw-cta-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE — 1600 / 1440 / 1200 / 1080 / 820 / 640 / 390
   ============================================================ */
@media (max-width: 1200px) {
  .nw-next-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  /* The rail narrows before it goes, so the prose keeps its measure longer. */
  .nw-post-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; }
}
@media (max-width: 1080px) {
  .nw-hero-text { padding-bottom: 48px; }
  /* 🔴 The rail and the two-column hero both collapse HERE, not at 640. The
     1000–1200 band is the site's known weak spot for a side column, and a
     320px rail beside a 20px reading column is the first thing to fail in it.
     ⛔ Do not try to keep either through this band. */
  .nw-post-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* 🔴 THE HERO NEEDS ITS OWN LINE HERE, and the reason is specificity, not
     taste. `.nw-post-head .nw-post-grid` is (0,2,0) and the rule above is
     (0,1,0); a media query adds nothing, so without this the hero KEEPS its
     60/40 tracks all the way down — measured 533/356 at 1024, the image
     squeezed to 356 while the body had already collapsed. ⛔ Any future
     per-section override of .nw-post-grid needs a matching line in this
     block. */
  .nw-post-head .nw-post-grid { grid-template-columns: minmax(0, 1fr); }
  /* about.css:318 collapses its CTA panel at exactly this width. */
  .nw-cta-panel { grid-template-columns: 1fr; gap: 36px; }
  .nw-rail { display: none; }
  /* ...and the button the rail was carrying comes back into the flow. */
  .nw-readmore {
    display: flex;
    margin-top: 44px;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: none;
  }
  .nw-post-head h1 { max-width: 22ch; }
  .nw-post-media img { aspect-ratio: 16 / 9; }
  /* 🔴 AND THIS IS WHERE THE PULL-QUOTE GETS ITS BREAK BACK. Above 1080 the
     grid's left track IS 780, so `max-width: 960px` never applies — measured
     780 at 1440 — and that is correct: there is a rail in the space it would
     break into. Once the rail goes and the column is the page, the 960 is
     reachable again and the quote breaks 180px wide, as `.ps-pull` does on a
     story page. ⛔ Do not clamp it here. */
}
@media (max-width: 820px) {
  /* Two-up -> one. ⚠️ At 820 the card is ~330px and the 28px serif headline
     starts breaking mid-phrase; the single column buys it back the measure. */
  .nw-index-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nw-index, .nw-next { padding: 64px 0; }
  .nw-post-body { padding: 48px 0 64px; }
  .nw-post-head { padding: 32px 0 8px; }
  .nw-cta-sec { padding: 64px 0 80px; }
  .nw-next-grid { grid-template-columns: 1fr; }
  .nw-readmore { flex-direction: column; align-items: flex-start; gap: 14px; }
  .nw-post-media img { border-radius: 10px; }
  /* 34px of side padding is a fifth of a 375 card. The image stays bled. */
  .nw-item-body { padding: 22px 24px 26px; }
  /* 20px/1.78 is the desktop reading size; on a 335px column it gives ~34
     characters a line, which is below the comfortable band. patient-story.css
     steps its own prose down here for the same reason. */
  :root:root .nw-prose p { font-size: 18px; line-height: 1.7; }
  .nw-pull { padding-left: 22px; margin: 40px 0; }
  /* The chip row wraps to two lines at 375, and the dot then strands at the
     end of line one. Stack them and drop it. */
  .nw-chips { flex-direction: column; align-items: flex-start; gap: 7px; }
  .nw-chip-src::before { display: none; }
  /* ⚠️ `display: inline`, not `gap: 0`. The chip is an inline-FLEX box, so
     zeroing the gap made the outlet, the middot and the date flex siblings
     with no space at all between them — "JOURNAL·SEPTEMBER". Dropping back to
     inline restores the ordinary word spacing in the markup. */
  .nw-chip-src { display: inline; }
}

/* ---------- Keeping "CAR T-cell" on one line ----------
   ⚠️ `&nbsp;` between CAR and T-cell is not enough: the hyphen inside
   "T-cell" is its own break opportunity, and both big headings split there
   ("CAR T-" / "cell therapy"). Same fix about.html:245 already uses for
   "CAR-T". ⛔ Do not wrap the whole phrase including "therapy" — at 375 that
   is wider than the card. */
.nw-nb { white-space: nowrap; }