/* blog.css — news feed + article (owner: Blog). REVISION-2 over DESIGN-SPEC §4.2/§4.3: Medium text on
   borderless clay, light only. 21st.dev 24338 (wells), 7618 (split, underline), 3176 (lift), 2318 (press),
   29471 (byline). Id-scoped; !important only for the ledger's .news-card border/background. */

/* ==== 0. small-surface recipes (clay tokens: type.css) */
#news-content, #pub-list, #news-article, #news-related, #news-aside, .page-hero--news {
  --b-sheet: #FFFFFF; --b-chip-bg: var(--clay); --b-media: var(--clay-media-shadow);
  --b-chip-sm: 2px 2px 4px rgb(23 42 82 / .11), -2px -2px 4px rgb(255 255 255 / .85);
  --b-chip-hover: 5px 5px 10px rgb(23 42 82 / .16), -4px -4px 9px rgb(255 255 255 / 1);
  --b-well: inset 2px 2px 5px rgb(23 42 82 / .16), inset -2px -2px 5px rgb(255 255 255 / .9);
  --b-shadow-sm: 8px 8px 18px -6px rgb(23 42 82 / .16), -6px -6px 14px -6px rgb(255 255 255 / 1),
    inset 2px 2px 5px rgb(255 255 255 / .9), inset -3px -3px 8px rgb(23 42 82 / .06);
  --b-sep: rgb(23 42 82 / .08); --b-sep-hi: rgb(255 255 255 / .75);
  --b-btn: var(--clay-navy); --b-btn-ink: #FFFFFF;
  --b-btn-shadow: 6px 6px 14px -4px rgb(0 28 66 / .38), -4px -4px 10px -4px rgb(255 255 255 / .9),
    inset 2px 2px 4px rgb(255 255 255 / .16), inset -3px -3px 6px rgb(0 0 0 / .28);
  /* R11/b/c: tones are type.css --clay-a/-b (no top bar); row bands lighter still (≤ #F3F7FD / #FEF9EC) */
  --b-band-a: color-mix(in oklab, var(--clay-a) 65%, #FFFFFF); --b-band-b: color-mix(in oklab, var(--clay-b) 65%, #FFFFFF);
}
/* R14: one container. Feed, article sheet, related grid, the type.css slab and the footer share type.css
   --page-inset (--container-wide = min(94vw, 1920px) centred, never closer to the edge than the gutter);
   the fallback is the same formula. A token stream: 100% resolves against each user's containing block. */
#news-content, #news-related, #news-article, #main-content:has(> #news-article) {
  --b-inset: var(--page-inset, max(var(--gutter, 1rem), (100% - var(--container-wide, min(94vw, 1920px))) / 2));
}

/* kill list */
#news-article .article-body::before,
#news-article .article-body ol > li::before,
#news-article .article-column--missing .article-body > p:last-child::after,
#news-related .news-card::before,
#news-related .news-card::after,
#news-related .news-card__media::after { content: none; }

/* hold a viewport until JS renders (CLS) */
#news-article:empty,
#news-content:empty { min-height: 100vh; }
#news-article:empty { margin-top: calc(-1 * var(--nav-h)); }

/* line-clamp box */
#news-content :is(.news-hero__title, .news-hero__dek, .news-row__title, .news-row__dek),
#news-related :is(.news-card__title, .news-card__excerpt),
#news-article .article-pager__title, #news-aside .article-aside__headline { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

/* ==== 1. hero: intro left, filters right from 1024px */
.page-hero--news .news-hero-head { display: grid; gap: 1.25rem 3rem; }
.page-hero--news .news-hero-head__intro { min-width: 0; }
/* the intro never narrows below its longest word ("announcements"): the title breaks between words, never
   inside one (type.css overflow-wrap: break-word would otherwise split it at 1024–1279); the form gives way */
@media (min-width: 1024px) {
  .page-hero--news .news-hero-head { grid-template-columns: minmax(min-content, 1fr) minmax(0, 34rem); align-items: end; }
}

.page-hero .news-filter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: .625rem; margin: 0; }
.page-hero .news-filter__search { grid-column: 1 / -1; position: relative; display: block; min-width: 0; }
.page-hero .news-filter__icon { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--ink-2); }
/* clay wells on the slab */
.page-hero .news-filter :is(input, select) {
  width: 100%; height: 2.75rem; margin: 0; padding-block: 0; border: 0; border-radius: 999px;
  background: var(--clay); color: var(--ink); box-shadow: var(--b-well); font-family: var(--font-sans);
  font-size: .9375rem; font-weight: 400; line-height: 1.2;
  transition: box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.page-hero .news-filter input { padding-inline: 2.6rem 1rem; }
.page-hero .news-filter select { padding-inline: 1rem 2rem; cursor: pointer; }
.page-hero .news-filter input::placeholder { color: var(--ink-2); opacity: 1; }
.page-hero .news-filter :is(input, select):is(:focus, :focus-visible) {
  outline: var(--focus-ring); outline-offset: 2px; background: var(--b-sheet); box-shadow: var(--b-well);
}
.page-hero .news-filter__submit,
.page-hero .news-filter__clear {
  display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; padding-inline: 1.25rem;
  border: 0; border-radius: 999px; font: 600 .9375rem/1 var(--font-sans); white-space: nowrap; text-decoration: none;
  cursor: pointer;
}
/* white raised pill on navy */
.page-hero .news-filter__submit {
  background: #FFFFFF; color: var(--clay-navy);
  box-shadow: 0 8px 16px -8px rgb(0 0 0 / .55), inset 0 -2px 0 rgb(23 42 82 / .12), inset 0 2px 0 rgb(255 255 255 / .9);
}
.page-hero .news-filter__clear { padding-inline: .9rem; background: none; color: rgb(255 255 255 / .86); }
.page-hero .news-filter__clear:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: .25em; }
.page-hero .news-filter :is(.news-filter__submit, .news-filter__clear):focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.page-hero .news-filter__submit:active { box-shadow: inset 2px 2px 5px rgb(23 42 82 / .25); }
@media (max-width: 639px) {
  .page-hero .news-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-hero .news-filter__submit { grid-column: 1 / -1; }
  /* 16px: no iOS focus zoom */
  .page-hero .news-filter :is(input, select) { font-size: 1rem; }
}

/* ==== 2. feed: sheet + rail from 1024px; the page-1 lead spans both (1024–1599) or the feed column (≥ 1600) */
#news-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) var(--section-py); }
/* the slab's edges at every width (R14); (1,0,0) over .container-standard's cap and padding */
#news-content, #news-related { max-width: none; margin-inline: var(--b-inset); padding-inline: 0; }
@media (min-width: 1024px) {
  #news-content { grid-template-columns: minmax(0, 1fr) clamp(17rem, 13rem + 6vw, 20rem); gap: 1.5rem; align-items: start; }
  #news-content > .news-hero { grid-column: 1 / -1; }
  #news-content > .news-rail { position: sticky; top: calc(var(--nav-h) + 1rem); }
}
/* ≥ 1600: lead + sheet share the feed column; the rail runs beside both from the top */
@media (min-width: 1600px) {
  #news-content > :is(.news-hero, .news-sheet) { grid-column: 1; }
  #news-content > .news-rail { grid-column: 2; }
  #news-content:has(> .news-hero) > .news-rail { grid-row: 1 / span 2; }
}

/* white clay sheet: the A/B row bands read on it */
#news-content {
  .news-sheet {
    min-width: 0; padding: clamp(.5rem, .3rem + .6vw, .875rem); border-radius: 1.75rem;
    background: var(--b-sheet); box-shadow: var(--clay-shadow);
  }
  .news-status {
    margin: 0; padding: .875rem clamp(.75rem, .5rem + .8vw, 1.25rem);
    font: 400 .9375rem/1.45 var(--font-sans); color: var(--ink-2); font-variant-numeric: tabular-nums;
  }
  .news-status__query { color: var(--ink-strong); font-weight: 600; }
  .news-empty { padding: 2.5rem 1rem; text-align: center; }
  .news-empty__message { margin: 0; font: 400 1.0625rem/1.6 var(--font-sans); color: var(--ink-2); }
}

/* primary clay pill */
#news-content :is(.news-empty__reset, .news-hero__more),
#news-article .article-cta,
#news-article .article-missing__actions a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.25rem; border: 0;
  border-radius: 999px; background: var(--b-btn); color: var(--b-btn-ink); box-shadow: var(--b-btn-shadow);
  font: 600 .9375rem/1.2 var(--font-sans); text-decoration: none;
}
#news-content .news-empty__reset { margin-top: 1.25rem; }
#news-content .news-hero__more svg,
#news-article .article-cta svg { width: 1rem; height: 1rem; flex: none; }

/* ==== 3. lead card (7618), tone A */
#news-content {
  .news-hero {
    --b-chip-bg: #FFFFFF;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: .625rem; border-radius: 1.75rem;
    background: var(--clay-a); box-shadow: var(--clay-shadow); color: var(--ink); text-decoration: none;
  }
  .news-hero:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
  .news-hero__media {
    position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 1.25rem; background: var(--paper-2);
    box-shadow: var(--b-media);
  }
  .news-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
  .news-hero__media.is-lowres { background: var(--navy-panel); }
  .news-hero__media.is-lowres .news-hero__img { object-fit: scale-down; }
  .news-hero__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 1rem .875rem 1.125rem; }
  .news-hero__title {
    margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem); font-weight: 700;
    line-height: 1.15; letter-spacing: -0.02em; color: var(--ink-strong); text-wrap: pretty; -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  .news-hero__dek {
    margin: .75rem 0 0; font: 400 1.0625rem/1.55 var(--font-sans); color: var(--ink-2); -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  .news-hero__byline {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .625rem; margin: 1rem 0 0;
    font: 500 .875rem/1.4 var(--font-sans); color: var(--ink-2);
  }
  .news-hero__author { color: var(--ink-strong); font-weight: 600; }
  .news-hero__when { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-variant-numeric: tabular-nums; }
  .news-hero__more { margin-top: 1.25rem; }
}
/* split from 1024; the photo fills the card height */
@media (min-width: 1024px) {
  #news-content .news-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; gap: clamp(1.25rem, 3vw, 2.75rem); }
  #news-content .news-hero__media { aspect-ratio: auto; min-height: 17rem; }
  #news-content .news-hero__img { position: absolute; inset: 0; }
  #news-content .news-hero__text { justify-content: center; padding: 1.25rem 1.75rem 1.25rem 0; }
}

/* ==== 4. rows: title, dek, meta, 3:2 thumb; A/B bands alternate */
#news-content {
  .news-feed { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; }
  .news-row {
    --b-chip-bg: #FFFFFF; border-radius: .75rem; background: var(--b-band-a);
    box-shadow: 3px 4px 10px -6px rgb(23 42 82 / .2), inset 1px 1px 0 rgb(255 255 255 / .9);
  }
  .news-row:nth-child(even) { background: var(--b-band-b); }
  .news-row__link {
    display: flex; align-items: center; gap: clamp(1rem, .5rem + 1.5vw, 2rem);
    padding: 1.25rem clamp(1rem, .6rem + 1.2vw, 1.75rem); color: var(--ink); text-decoration: none;
  }
  .news-row__link:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: .75rem; }
  .news-row__text { flex: 1 1 auto; min-width: 0; }
  .news-row__title {
    margin: 0; font-family: var(--font-display); font-size: var(--fs-feed-title); font-weight: 650; line-height: 1.25;
    letter-spacing: -0.012em; color: var(--ink-strong); text-wrap: pretty; -webkit-line-clamp: 3; line-clamp: 3;
  }
  .news-row__dek { margin: .5rem 0 0; font: 400 1rem/1.5 var(--font-sans); color: var(--ink-2); -webkit-line-clamp: 2; line-clamp: 2; }
}
#news-content .news-row__meta,
#news-related .news-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; margin: .75rem 0 0;
  font: 500 .8125rem/1.5rem var(--font-sans); color: var(--ink-2); font-variant-numeric: tabular-nums;
}
:is(#news-content, #news-article, #news-related, #news-aside) time { font-family: inherit; }   /* site.css 3283: mono */
#news-content :is(.news-meta__when, .news-meta__src) { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
:is(#news-content, #news-article, #news-related, #news-aside) .dot { color: var(--ink-2); opacity: .7; }

#news-content {
  .news-row__media {
    position: relative; flex: none; display: grid; place-items: center; width: 160px; aspect-ratio: 3 / 2;
    overflow: hidden; border-radius: 1rem; background: var(--paper-2); box-shadow: var(--b-media);
  }
  .news-row__thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
  .news-row__media--plate {
    background:
      radial-gradient(circle, rgb(255 255 255 / .10) 1px, transparent 1.2px) 0 0 / 12px 12px,
      var(--clay-navy);
    color: color-mix(in oklab, var(--cat, var(--brand-gold)) 60%, white);
  }
  .news-row__media--plate svg { width: 32px; height: 32px; opacity: .85; }
}
/* ≥ 1600 (R14): rows flow in two columns inside the sheet, left to right (date order reads across), like
   Medium's two-column tag pages. Each row keeps its anatomy and a ~400–550px text measure; the bands become
   a checkerboard (A B / B A) so neither a row nor a column neighbour shares a tone; the link fills the
   stretched cell so the focus ring and hit area cover the band. */
@media (min-width: 1600px) {
  #news-content {
    .news-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
    .news-row { display: grid; }
    .news-row:is(:nth-child(4n + 1), :nth-child(4n)) { background: var(--b-band-a); }
    .news-row:is(:nth-child(4n + 2), :nth-child(4n + 3)) { background: var(--b-band-b); }
    .news-row__link { gap: 1.25rem; padding: 1.125rem 1.25rem; }
    .news-row__title { font-size: clamp(1.25rem, .75rem + .5vw, 1.375rem); }   /* 20 → 22: Medium's 2-col size */
    .news-row__media { width: clamp(7.5rem, 9vw - 2rem, 10rem); }
    /* an odd count (page 2+, a filtered view, a single result) would leave half the sheet empty beside the
       last row: it spans both columns instead as a closing mini-lead (photo first and larger, title one step
       up, text to ~95 characters), so what space is left falls at the line ends, not as a hollow cell */
    .news-row:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .news-row:last-child:nth-child(odd) .news-row__link { flex-direction: row-reverse; justify-content: flex-end; gap: 1.75rem; }
    .news-row:last-child:nth-child(odd) .news-row__text { flex: 0 1 54rem; }
    .news-row:last-child:nth-child(odd) .news-row__title { font-size: clamp(1.5rem, 1rem + .5vw, 1.75rem); line-height: 1.2; }
    .news-row:last-child:nth-child(odd) .news-row__dek { font-size: 1.0625rem; }
    .news-row:last-child:nth-child(odd) .news-row__media { width: clamp(13rem, 14vw - 2rem, 18rem); }
    .news-row:last-child:nth-child(odd) .news-row__media--plate svg { width: 44px; height: 44px; }
  }
}

/* 7618 underline draw */
:is(.news-row__title-text, .news-hero__title-text, .news-card__title-text) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; }
#news-content .news-row__link:is(:hover, :focus-visible) .news-row__title,
#news-content .news-hero:is(:hover, :focus-visible) .news-hero__title,
#news-related .news-card:is(:hover, :focus-visible) .news-card__title { color: var(--accent-ink); }
#news-content .news-row__link:is(:hover, :focus-visible) .news-row__title-text,
#news-content .news-hero:is(:hover, :focus-visible) .news-hero__title-text,
#news-related .news-card:is(:hover, :focus-visible) .news-card__title-text { background-size: 100% 2px; }

/* ==== 5. chips (R3 clay mini-surfaces) */
:is(#news-content, #news-article, #news-related) .news-chip {
  display: inline-flex; align-items: center; gap: .4rem; height: 1.5rem; padding: 0 .625rem; border-radius: 999px;
  background: var(--b-chip-bg); box-shadow: var(--b-chip-sm); font: 600 .75rem/1 var(--font-sans);
  letter-spacing: .005em; color: var(--ink-strong); white-space: nowrap;
}
:is(#news-content, #news-article, #news-related) .news-chip::before {
  content: ""; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--cat, var(--accent-ink));
}
/* no gold-on-gold on tone B */
:is(#news-content, #news-article, #news-related) .news-chip--featured { color: var(--gold-ink); }
:is(#news-content, #news-article, #news-related) .news-chip--featured::before { background: var(--brand-gold); }
/* lab mark on a white squircle */
#news-content .news-hero__mark,
#news-article .article-meta__mark {
  display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: .5rem;
  background: #FFFFFF; box-shadow: var(--b-chip-sm);
}
#news-content .news-hero__mark img { display: block; width: 1.125rem; height: 1.125rem; }

/* ==== 6. rail + aside panels; count wells; pressed = active */
#news-content .news-rail { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
@media (min-width: 640px) and (max-width: 1023px) {
  #news-content .news-rail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
#news-content .news-rail__panel,
#news-aside .article-aside__panel { padding: 1.25rem 1.25rem 1.375rem; border-radius: var(--clay-radius); background: var(--clay); box-shadow: var(--clay-shadow); }
#news-content .news-rail__title,
#news-aside .article-aside__title {
  margin: 0 0 .875rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 650; line-height: 1.3;
  letter-spacing: -0.012em; color: var(--ink-strong);
}
:is(#news-content, #news-aside) .news-rail__chips { display: flex; flex-wrap: wrap; gap: .625rem .5rem; margin: 0; padding: 0; list-style: none; }
:is(#news-content, #news-aside) .news-rail__chip {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .5rem 0 .875rem;   /* 44px tap */
  border-radius: 999px; background: var(--b-chip-bg); box-shadow: var(--clay-chip-shadow); font: 500 .875rem/1 var(--font-sans);
  color: var(--ink); text-decoration: none;
}
:is(#news-content, #news-aside) .news-rail__chip--topic::before {
  content: ""; flex: none; width: .5rem; height: .5rem; margin-left: -.125rem; border-radius: 50%;
  background: var(--cat, var(--accent-ink));
}
:is(#news-content, #news-aside) .news-rail__count {
  display: inline-grid; place-items: center; min-width: 1.625rem; height: 1.625rem; padding: 0 .4rem;
  border-radius: 999px; background: var(--clay); box-shadow: var(--b-well); font: 600 .75rem/1 var(--font-sans);
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
:is(#news-content, #news-aside) .news-rail__chip:hover { color: var(--accent-ink); }
:is(#news-content, #news-aside) .news-rail__chip:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
#news-content .news-rail__chip[aria-current="true"] { box-shadow: var(--clay-pressed); color: var(--accent-ink); font-weight: 650; }
#news-content .news-rail__chip[aria-current="true"] .news-rail__count { background: var(--b-btn); color: var(--b-btn-ink); box-shadow: none; }

/* ==== 7. pagination. The news pager is styled here in full. publications.css owns the #pub-list pager's
   skin (fills, current page, hover/press); the structural #pub-list selectors that remain below (sizing,
   padding, prev/next layout, chevron-only phones) are ones that pager still relies on: move them into
   publications.css §5 before dropping #pub-list from this file. */
#news-content .pagination--editorial a { background: var(--b-chip-bg); box-shadow: var(--b-chip-sm); color: var(--ink); }
#news-content .pagination--editorial a:hover { background: var(--b-chip-bg); color: var(--accent-ink); }
/* current: navy fill = 3:1+ state cue */
#news-content .pagination--editorial [aria-current="page"] {
  background: var(--clay-navy); box-shadow: inset 3px 3px 6px rgb(0 0 0 / .35), inset -2px -2px 5px rgb(255 255 255 / .14);
  color: #FFFFFF; font-weight: 700;
}
#news-content .pagination--editorial .pagination__gap { color: var(--ink-2); }
:is(#news-content, #pub-list) .pagination--editorial {
  margin-top: 0; padding: 1.25rem .5rem .75rem; gap: .5rem; font: 500 .875rem/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
:is(#news-content, #pub-list) .pagination--editorial :is(a, [aria-current="page"], .pagination__gap, .pagination__nav) {
  min-width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px;
}
:is(#news-content, #pub-list) .pagination--editorial a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
:is(#news-content, #pub-list) .pagination--editorial .pagination__nav {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding-inline: .9rem; white-space: nowrap; font: 600 .875rem/1 var(--font-sans);
}
:is(#news-content, #pub-list) .pagination--editorial span.pagination__nav { box-shadow: var(--b-well); }
:is(#news-content, #pub-list) .pagination--editorial .pagination__nav svg { flex: none; }
/* tablets and touch screens: 44px keys */
@media (max-width: 1023.98px), (pointer: coarse) {
  #news-content .pagination--editorial :is(a, [aria-current="page"], .pagination__nav) { min-width: 2.75rem; height: 2.75rem; }
}
/* phones: chevron-only prev/next; news: one 44px row (news.js narrows the window) */
@media (max-width: 480px) {
  :is(#news-content, #pub-list) .pagination--editorial { gap: .25rem; }
  :is(#news-content, #pub-list) .pagination--editorial :is(a, [aria-current="page"], .pagination__gap, .pagination__nav) { min-width: 2rem; padding-inline: .5rem; }
  #news-content .pagination--editorial { flex-wrap: nowrap; }
  #news-content .pagination--editorial :is(a, [aria-current="page"], .pagination__nav) { min-width: 2.75rem; height: 2.75rem; }
  #news-content .pagination--editorial .pagination__gap { min-width: 1.25rem; padding-inline: 0; }
  :is(#news-content, #pub-list) .pagination--editorial .pagination__nav > span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}

/* ==== 8. article: pill bar, white clay sheet, head */
/* blue ring (1,2,1) over site.css 3617's gold (1,1,1) */
#news-article > section.article-pubbar:first-child { --focus-ring: 2px solid var(--accent-ink); }
#news-article {
  .article-pubbar { background: none; }
  /* R14: the pill bar and the sheet span the container (the slab's edges); the 680px column stays centred */
  .article-pubbar__inner {
    width: auto; margin-inline: var(--b-inset); padding: .75rem 0 1rem; display: flex;
    align-items: center;
  }
  .article-pubbar__back {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 1.1rem 0 .85rem;
    border-radius: 999px; background: var(--clay); box-shadow: var(--clay-chip-shadow); font: 600 .875rem/1 var(--font-sans);
    color: var(--ink-strong); text-decoration: none;
  }
  .article-pubbar__back:hover { color: var(--accent-ink); }
  .article-pubbar__back:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
  .article-pubbar__back svg { flex: none; }

  .article-column {
    width: auto; margin-inline: var(--b-inset);
    padding: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(1.25rem, .25rem + 5vw, 5.5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
    border-radius: 1.75rem; background: var(--b-sheet); box-shadow: var(--clay-shadow);
  }
  :is(.article-head, .article-body, .article-end) { width: 100%; max-width: var(--measure-reading); margin-inline: auto; }
  .article-title {
    margin: 0; font-family: var(--font-display); font-size: var(--fs-article-h1); font-weight: 700; line-height: 1.2;
    letter-spacing: -0.02em; color: var(--ink-strong); text-align: start; text-wrap: wrap; -webkit-hyphens: manual;
    hyphens: manual; overflow-wrap: break-word;
  }
}
@media (min-width: 728px) {
  #news-article .article-title { line-height: 52px; }      /* Medium: 42/52 */
}
#news-article {
  .article-dek { margin: .5625rem 0 0; font: 400 var(--fs-dek)/1.4 var(--font-sans); color: var(--ink-2); text-wrap: pretty; }
  .article-meta { display: flex; align-items: center; gap: .875rem; margin-top: 1.5rem; }
  .article-meta__mark { width: 2.75rem; height: 2.75rem; border-radius: .875rem; box-shadow: var(--clay-chip-shadow); }
  .article-meta__mark img { display: block; width: 1.5rem; height: 1.5rem; }
  .article-meta__lines { display: grid; gap: .3rem; min-width: 0; }
  .article-meta__by {
    display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; margin: 0;
    font: 600 .9375rem/1.4 var(--font-sans); color: var(--ink-strong);
  }
  .article-meta__stats {
    display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0;
    font: 400 .875rem/1.4 var(--font-sans); color: var(--ink-2); font-variant-numeric: tabular-nums;
  }

  /* ==== 9. action bar: clay share circles */
  .article-share {
    display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin-top: 1.5rem; padding: .875rem 0;
    border: 0; box-shadow: 0 -1px 0 var(--b-sep), 0 1px 0 var(--b-sep);
  }
  .article-share--end { margin-top: 2.5rem; padding-bottom: 0; box-shadow: 0 -1px 0 var(--b-sep); }
  /* phones: label + every circle on one row; with the sixth (native share) circle the decorative label
     (aria-hidden; the group keeps its aria-label) gives way so the row still fits at 360px */
  @media (max-width: 25em) {
    .article-share { gap: .375rem; }
    .article-share:has(> [data-native-share]) { gap: .25rem; justify-content: space-between; }
    .article-share:has(> [data-native-share]) .article-share__label { display: none; }
  }
  .article-share__label { margin-right: auto; font: 500 .9375rem/1 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
  .share-btn { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--clay); box-shadow: var(--clay-chip-shadow); color: var(--ink-2); }
  .share-btn:is(:hover, :focus-visible) { color: var(--net); background: var(--clay); }
  .share-btn:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
  .share-btn:active { box-shadow: var(--clay-pressed); }
  :is(.share-btn--copy, .share-btn[data-native-share]) { --net: var(--ink-strong); }
  .share-btn--email { --net: var(--accent-ink); }

  /* ==== 10. lead figure: the sheet's width up to Medium's 1032px outset (fills a wide sheet; text stays 680) */
  .article-figure { width: min(100%, 1032px); max-width: none; margin: 2.5rem auto 0; }
  /* R22: the image at its real shape — no 16:9 frame, no fill behind it, height capped so a tall
     image never runs past the screen. article.js crops a file padded on a painted border
     (.article-figure__crop) back to its subject; a small image shows at its own size, centred. */
  .article-figure img {
    display: block; width: auto; max-width: min(100%, 42.5rem); height: auto; max-height: min(60vh, 28rem);
    aspect-ratio: auto; object-fit: contain;   /* site.css 4213 still forces 16 / 9 + cover: undo both */
    margin: 0 auto; border: 0; border-radius: .75rem; background: none; box-shadow: var(--b-media);
  }
  /* A small file (< 600px wide, e.g. a 129px portrait) is drawn at 2x its own size (article.js sets
     --lowres-w), capped by the rules above, so it reads as a photo rather than a thumbnail. */
  .article-figure.is-lowres img { width: var(--lowres-w, auto); background: none; }
  .article-figure__crop {
    position: relative; display: block; overflow: hidden; margin: 0 auto;
    /* user: "reduce image size so that looks visually aesthetic" — sized to sit within the text column */
    width: min(100%, 42.5rem, calc(min(60vh, 28rem) * var(--crop-ar, 1.7778)));   /* ≤ the 680px text column, ≤ 448px tall */
    aspect-ratio: var(--crop-ar, 1.7778);
    border-radius: .75rem; box-shadow: var(--b-media);
  }
  .article-figure__crop > img {
    position: absolute; max-width: none; max-height: none; height: auto; margin: 0;
    border-radius: 0; box-shadow: none;
  }
  .article-figure figcaption { margin-top: .625rem; text-align: center; font: 400 .875rem/1.4 var(--font-sans); color: var(--ink-2); }
}

/* ==== 11. body: Source Serif 4 20/32, ragged */
#news-article {
  .article-body {
    margin-top: 2.25rem; font-family: var(--font-serif); font-size: var(--fs-reading); font-weight: 400;
    line-height: var(--lh-reading); letter-spacing: var(--track-reading); color: var(--ink); text-align: start;
    -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; text-wrap: pretty; font-kerning: normal;
    font-optical-sizing: auto; font-variant-numeric: var(--nums-prose);
  }
  .article-head + .article-body { margin-top: 2.5rem; }
  /* R16: body paragraphs and list items justified from 640px up (inter-word, never hyphenated; article.js
     glueHonorifics keeps "Dr. Name" whole); phones stay ragged-right, where unhyphenated justified text opens
     rivers. Headings, captions, quotes and meta keep their own start/centre alignment. */
  @media (min-width: 40em) {
    .article-body > p,
    .article-body :is(ul, ol) > li { text-align: justify; text-justify: inter-word; }
  }
  .article-body :is(p, li) {
    max-width: none; margin-inline: 0; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: 400;
    line-height: inherit; letter-spacing: inherit; color: inherit;
  }
  /* p→p 34px, p→h2 37px, h→p 12px, hr/figure 56px */
  .prose.article-body > * { margin-block: 0; }
  .prose.article-body > * + * { margin-block-start: 1.7em; }
  .prose.article-body > * + h2 { margin-block-start: 1.85em; }
  .prose.article-body > * + :is(h3, h4) { margin-block-start: 1.7em; }
  .prose.article-body > :is(h2, h3, h4) + * { margin-block-start: .6em; }
  .prose.article-body > * + :is(hr, figure) { margin-block-start: 2.8em; }
  .prose.article-body > :is(hr, figure) + * { margin-block-start: 2.15em; }

  .article-body :is(h2, h3, h4) { font-family: var(--font-display); font-weight: 650; color: var(--ink-strong); }
  .article-body h2 { font-size: 24px; line-height: 30px; letter-spacing: -0.015em; text-wrap: balance; }
  .article-body h3 { font-size: 20px; line-height: 26px; letter-spacing: -0.01em; }
  .article-body h4 { font-size: 18px; line-height: 24px; letter-spacing: 0; }
  .article-body :is(strong, b) { font-weight: 600; color: inherit; background: none; }
  .article-body :is(em, i) { font-style: italic; }
  .article-body :is(sup, sub) { font-size: .75em; line-height: 0; }

  .article-body a {
    color: inherit; text-decoration-line: underline; text-decoration-color: currentColor;
    text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-skip-ink: auto; -webkit-hyphens: manual;
    hyphens: manual; overflow-wrap: anywhere;
  }
  .article-body a:hover { color: var(--accent-ink); text-decoration-thickness: 2px; }
  .article-body a.is-url { word-break: break-all; }

  .article-body blockquote {
    width: calc(100% + 20px); margin-inline: -20px 0; padding: 0 0 0 23px; border: 0; border-radius: 0;
    background: none; box-shadow: inset 3px 0 0 0 var(--ink-strong); font-style: italic; color: var(--ink);
  }
  .article-body blockquote > p { margin: 0; }
  .article-body blockquote > p + p { margin-block-start: 1.7em; }
  .article-body blockquote.pull {
    width: auto; max-width: 580px; margin-inline: auto; padding: 0; box-shadow: none; text-align: center;
    font: italic 400 clamp(1.5rem, 1.3rem + .9vw, 1.875rem)/1.45 var(--font-serif); letter-spacing: -0.009em;
  }

  .article-body :is(ul, ol) {
    margin-inline: 0; padding: 0; list-style: none; border: 0; border-radius: 0; background: none; box-shadow: none;
    counter-reset: none; color: inherit;
  }
  .article-body li { display: list-item; margin: 0 0 0 30px; padding: 0; border: 0; list-style: disc outside; }
  .article-body ol > li { list-style: decimal outside; }
  .article-body ol[type="a"] > li { list-style: lower-alpha outside; }
  .article-body li + li { margin-block-start: .68em; border-top: 0; }
  .article-body li::marker { color: var(--ink); font-family: inherit; font-size: inherit; font-weight: 400; }

  .article-body figure img { width: 100%; height: auto; margin: 0; border-radius: 1rem; box-shadow: var(--b-media); }
  .article-body figcaption { margin-top: .625rem; text-align: center; font: 400 .875rem/1.4 var(--font-sans); color: var(--ink-2); }
  .article-body code { padding: 2px 5px; border-radius: 6px; background: var(--clay); font: 400 .8em/1 var(--font-mono); }
  .article-body table { width: 100%; border-collapse: collapse; font: 400 16px/1.5 var(--font-sans); }
  .article-body :is(th, td) { padding: .5rem .75rem; border: 1px solid var(--b-sep); text-align: left; }

  .article-body hr { width: auto; height: auto; margin-inline: 0; border: 0; background: none; text-align: center; }
  .article-body hr::after { content: "\00B7\2003\00B7\2003\00B7"; font: 400 30px/1 var(--font-sans); letter-spacing: .2em; color: var(--ink); }

  .article-body > p:last-child::after {
    content: "\00A0"; content: "\00A0" / ""; padding-inline-start: .5em;
    background: linear-gradient(var(--accent-ink), var(--accent-ink)) 100% 62% / .42em .42em no-repeat;
  }

  /* ==== 12. article end: CTA, share, pager */
  .article-end { margin-top: 2.5rem; font-size: 1rem; }
  .article-cta-row { margin: 0; }
  .article-missing__actions { margin-top: 2rem; }

  .article-pager { gap: 1rem; margin-top: 1.75rem; border: 0; }
  .article-pager__link {
    display: flex; flex-direction: row; align-items: center; gap: .875rem; min-width: 0;
    padding: .875rem 1.125rem .875rem .875rem; border: 0; border-radius: 1.25rem; background: var(--clay);
    box-shadow: var(--b-shadow-sm); color: var(--ink); text-align: start; text-decoration: none;
  }
  .article-pager__link--newer { flex-direction: row-reverse; padding: .875rem .875rem .875rem 1.125rem; text-align: end; }
  .article-pager__link:only-child { grid-column: 1 / -1; }
  .article-pager__link:hover { background: var(--clay); }
  .article-pager__link:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: 1.25rem; }
  .article-pager__well {
    flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .875rem;
    background: var(--clay); box-shadow: var(--clay-pressed); font: 600 1.125rem/1 var(--font-sans);
    color: var(--accent-ink);
  }
  .article-pager__text { display: grid; gap: .25rem; min-width: 0; }
  .article-pager__title {
    font-family: var(--font-display); font-size: 1.0625rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em;
    color: var(--ink-strong); -webkit-line-clamp: 2; line-clamp: 2;
  }
  .article-pager__nobreak { white-space: nowrap; }      /* article.js: the clamp ends on a whole word */
  /* end-aligned clamp: Chrome sets the "…" past the content edge; give it room without moving the text */
  .article-pager__link--newer .article-pager__title { padding-inline-end: .375rem; margin-inline-end: -.375rem; }
  .article-pager__link:is(:hover, :focus-visible) .article-pager__title { color: var(--accent-ink); }
  .article-pager__note { display: inline-flex; flex-wrap: wrap; justify-content: inherit; gap: 0 .4rem; font: 500 .8125rem/1.3 var(--font-sans); color: var(--ink-2); }
  .article-pager__link--newer .article-pager__note { justify-content: flex-end; }
}

/* ==== 13. "More from the lab" */
#news-related { padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem) var(--section-py); }
#news-related .section-header { margin-bottom: 1.25rem; }
#news-related .news-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
/* article.js sends up to four; the fourth shows only where it completes a row: 2 × 2 at 768–1023 and
   4-up from 1800 (R14: more columns, not wider cards). (1,2,0) over the (1,1,0) display: flex below. */
#news-related .news-card:nth-child(n + 4) { display: none; }
/* 768–1023: 2 cols; a lone last card runs full width */
@media (min-width: 768px) and (max-width: 1023px) {
  #news-related .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #news-related .news-card:nth-child(4) { display: flex; }
  #news-related .news-card:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
  #news-related .news-card:last-child:nth-child(odd) .news-card__media { flex: 0 0 44%; aspect-ratio: auto; min-height: 12rem; }
  #news-related .news-card:last-child:nth-child(odd) .news-card__body { padding: .75rem 1rem .5rem 1.25rem; }
}
@media (min-width: 1024px) {
  #news-related .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1800px) {
  #news-related .news-grid:has(> .news-card:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #news-related .news-card:nth-child(4) { display: flex; }
}
/* R11: tone A / tone B */
#news-related {
  .news-card {
    --b-chip-bg: #FFFFFF;
    display: flex; flex-direction: column; height: 100%; padding: .625rem; overflow: visible; border: 0 !important;
    border-radius: var(--clay-radius); background: var(--clay-a) !important; box-shadow: var(--clay-shadow);
    will-change: auto; isolation: auto; color: var(--ink); text-decoration: none;
  }
  .news-card:nth-child(even) { background: var(--clay-b) !important; }
  .news-card:focus-visible { outline: var(--focus-ring); outline-offset: 4px; border-radius: var(--clay-radius); }
  .news-card__media {
    position: relative; aspect-ratio: 2 / 1; margin: 0; overflow: hidden; border: 0; border-radius: 1rem;
    background: var(--paper-2); box-shadow: var(--b-media);
  }
  .news-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .news-card__media.is-lowres { background: var(--clay-navy); }
  .news-card__media.is-lowres img { inset: 10% 0; height: 80%; object-fit: contain; }
  .news-card__media--plate {
    display: grid; place-items: center; color: color-mix(in oklab, var(--cat, var(--brand-gold)) 60%, white);
    background: radial-gradient(circle, rgb(255 255 255 / .10) 1px, transparent 1.2px) 0 0 / 14px 14px, var(--clay-navy);
  }
  .news-card__glyph { position: static; width: 44px; height: 44px; opacity: .85; color: inherit; }
  .news-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 1rem .75rem .625rem; background: none; }
  .news-card__title {
    margin: 0; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 650; line-height: 1.3;
    letter-spacing: -0.012em; color: var(--ink-strong); text-wrap: pretty; -webkit-line-clamp: 3; line-clamp: 3;
  }
  .news-card__excerpt {
    margin: .5rem 0 0; font: 400 .9375rem/1.5 var(--font-sans); color: var(--ink-2); -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .news-card__meta { margin-top: auto; padding-top: .875rem; text-transform: none; letter-spacing: 0; }
  .news-card--text .news-card__meta { padding-right: 0; }
}

/* ==== 13b. aside ≥ 1200px: <main> = sheet | sticky aside, inset to the container (R14): the sheet's left
   edge and the aside's right edge sit on the slab's edges. The story leads: sheet 75%, aside 25% (never
   under 19rem, so a 1200px screen still sets the rail's dates and headlines comfortably). At that width the
   rail's "Latest news" is one column; the two- and three-column container queries below only wake on
   ultra-wide screens (rail ≥ 42rem, ~3100px up). */
#news-aside { display: none; }
@media (min-width: 1200px) {
  #main-content:has(> #news-article + .article-aside) {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(19rem, 1fr);
    column-gap: 1.5rem;
    align-items: start;
    padding-inline: var(--b-inset);
  }
  #news-article:has(+ .article-aside) { grid-column: 1; min-width: 0; }
  #news-article:has(+ .article-aside) :is(.article-column, .article-pubbar__inner) { width: auto; margin-inline: 0; }
  #main-content:has(> #news-article + .article-aside) > #news-related { grid-column: 1 / -1; width: auto; margin-inline: 0; }
  #news-aside { display: block; grid-column: 2; align-self: stretch; margin-top: 4.25rem; }
  #news-aside .article-aside__inner { display: grid; gap: 1.25rem; position: sticky; top: calc(var(--nav-h) + 1rem); }
}
#news-aside {
  .article-aside__list { display: grid; margin: 0; padding: 0; list-style: none; }
  /* separators sit on top of each following row, so hidden rows never leave a stray rule */
  .article-aside__list > li + li { box-shadow: 0 -1px 0 var(--b-sep-hi), 0 -2px 0 var(--b-sep); }
  /* article.js sends up to 24 rows: three in the one-column rail (three rows of 1, 2 or 3 columns, below);
     the reading pane (§13c) shows them all */
  .article-aside__list > li:nth-child(n + 4) { display: none; }
  .article-aside__item { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; color: var(--ink); text-decoration: none; }
  .article-aside__item:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: .75rem; }
  .article-aside__date {
    flex: none; display: grid; place-content: center; gap: .125rem; width: 2.75rem; height: 3rem; border-radius: .75rem;
    background: var(--clay); box-shadow: var(--b-well); text-align: center; font: 600 .6875rem/1 var(--font-sans);
    color: var(--ink-2);
  }
  .article-aside__date > span:last-child { font: 700 1.125rem/1 var(--font-display); color: var(--ink-strong); font-variant-numeric: tabular-nums; }
  .article-aside__text { display: grid; gap: .25rem; min-width: 0; }
  .article-aside__headline {
    font-family: var(--font-display); font-size: .9375rem; font-weight: 600; line-height: 1.35;
    letter-spacing: -0.005em; color: var(--ink-strong); -webkit-line-clamp: 3; line-clamp: 3;
  }
  .article-aside__item:is(:hover, :focus-visible) .article-aside__headline { color: var(--accent-ink); }
  .article-aside__meta { display: flex; flex-wrap: wrap; gap: 0 .375rem; font: 500 .8125rem/1.3 var(--font-sans); color: var(--ink-2); }
  .article-aside__all { display: inline-flex; gap: .3rem; margin-top: .625rem; font: 600 .875rem/1.4 var(--font-sans); color: var(--accent-ink); text-decoration: none; }
  .article-aside__all:hover { text-decoration: underline; text-underline-offset: .2em; }
  .article-aside__all:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: .25rem; }
}
/* an ultra-wide rail (≥ 42rem, ~3100px up at 25%; each column ≥ 19rem): "Latest news" sets six stories in
   two columns, read across (date order, like the two-column feed), so the wide rail is filled, not a strip */
@media (min-width: 1200px) {
  #news-aside { container: news-aside / inline-size; }
}
@container news-aside (min-width: 42rem) {
  #news-aside .article-aside__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  #news-aside .article-aside__list > li:nth-child(-n + 6) { display: list-item; }
  #news-aside .article-aside__list > li:nth-child(2) { box-shadow: none; }
  #news-aside .article-aside__list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* ≥ 62rem (rail of an ~4500px screen): nine stories, three rows of three */
@container news-aside (min-width: 62rem) {
  #news-aside .article-aside__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #news-aside .article-aside__list > li:nth-child(n + 7) { display: list-item; }
  #news-aside .article-aside__list > li:nth-child(3) { box-shadow: none; }
  #news-aside .article-aside__list > li:last-child:nth-child(odd) { grid-column: auto; }
}

/* ==== 13c. reading pane (screens ≥ 1200 × 640, article.js READING_PANE): the sheet scrolls on its own and
   the aside holds still beside it, so no bare ground shows under short panels however long the story. The
   sheet runs from the pill bar to 1rem above the fixed stats ticker (article.js measures --pane-top and
   --pane-foot on an unscrolled page) or ends with a shorter story; the aside is stretched to the sheet's
   height (contain: size keeps its own content from growing the row), and "Latest news" takes every pixel
   the Topics panel leaves, scrolling inside when the stories outrun it. At the end of the story the wheel
   chains to the page for "More from the lab" and the footer. */
@media screen and (min-width: 1200px) and (min-height: 40rem) {
  #main-content:has(> #news-article + .article-aside) {
    --pane-h: calc(100dvh - var(--pane-top, 10.625rem) - var(--pane-foot, 1.75rem) - 1rem);
  }
  #news-article:has(+ .article-aside) > .article-column {
    max-height: var(--pane-h); overflow-y: auto; overscroll-behavior-y: auto;
    scrollbar-width: thin; scrollbar-color: rgb(23 42 82 / .28) transparent;
  }
  #news-article:has(+ .article-aside) > .article-column:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
  #news-aside { align-self: stretch; margin-top: 4.5rem; contain: size; }
  #news-aside .article-aside__inner { position: static; height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
  #news-aside .article-aside__panel:has(> .article-aside__list) { display: flex; flex-direction: column; min-height: 0; }
  #news-aside .article-aside__list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start;
    scrollbar-width: thin; scrollbar-color: rgb(23 42 82 / .24) transparent;
  }
  #news-aside .article-aside__list > li:nth-child(n) { display: list-item; }
}

/* ==== 14. motion */
@media (prefers-reduced-motion: no-preference) {
  :is(.news-row__title-text, .news-hero__title-text, .news-card__title-text) { transition: background-size 420ms var(--ease-out); }
  #news-content :is(.news-row__title, .news-hero__title),
  #news-related .news-card__title,
  #news-article .article-pager__title { transition: color var(--duration-standard) var(--ease-out); }

  #news-content .news-hero,
  #news-related .news-card,
  #news-article .article-pager__link { transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
  #news-content .news-hero:hover,
  #news-related .news-card:hover { transform: translateY(-4px); box-shadow: var(--clay-shadow-hover); }
  #news-article .article-pager__link:hover { transform: translateY(-3px); box-shadow: var(--b-chip-hover), var(--b-shadow-sm); }
  #news-content .news-hero:active,
  #news-related .news-card:active,
  #news-article .article-pager__link:active { transform: translateY(0) scale(.99); box-shadow: var(--clay-pressed); }

  #news-content .news-hero__img,
  #news-content .news-row__thumb,
  #news-related .news-card__media img { transition: transform 600ms var(--ease-out); }
  #news-content .news-hero:hover .news-hero__media:not(.is-lowres) .news-hero__img,
  #news-related .news-card:hover .news-card__media:not(.is-lowres) img { transform: scale(1.04); }
  #news-content .news-row__media { transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
  #news-content .news-row__link:hover .news-row__media { transform: translateY(-3px); box-shadow: var(--b-media), var(--b-chip-hover); }
  #news-content .news-row__link:hover .news-row__thumb { transform: scale(1.05); }

  #news-content .pagination--editorial a,
  :is(#news-content, #news-aside) .news-rail__chip,
  #news-article :is(.share-btn, .article-pubbar__back, .article-cta),
  #news-content :is(.news-hero__more, .news-empty__reset),
  .page-hero .news-filter__submit { transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), color var(--duration-fast) var(--ease-out); }
  :is(#news-content, #news-aside) .news-rail__chip:not([aria-current="true"]):hover,
  #news-content .pagination--editorial a:hover,
  #news-article :is(.share-btn, .article-pubbar__back):hover { transform: translateY(-2px); box-shadow: var(--b-chip-hover); }
  #news-article .article-cta:hover,
  #news-content .news-empty__reset:hover,
  .page-hero .news-filter__submit:hover { transform: translateY(-2px); }
  :is(#news-content, #news-aside) .news-rail__chip:active,
  #news-content .pagination--editorial a:active,
  #news-article :is(.share-btn, .article-pubbar__back, .article-cta):active { transform: translateY(0) scale(.97); box-shadow: var(--clay-pressed); }
  #news-article .article-pubbar__back svg,
  #news-article .article-cta svg,
  #news-content .news-hero__more svg { transition: transform 180ms var(--ease-settle); }
  #news-article .article-pubbar__back:hover svg { transform: translateX(-2px); }
  #news-article .article-cta:hover svg,
  #news-content .news-hero:hover .news-hero__more svg { transform: translate(2px, -2px); }
}

/* ==== 15. small screens, forced colours, print */
@media (max-width: 760px) {
  #news-article .article-body blockquote { width: 100%; margin-inline: 0; padding-left: 20px; }
}
@media (max-width: 640px) {
  #news-content .news-row__link {
    display: grid; grid-template-columns: minmax(0, 1fr) 72px;
    grid-template-areas: "title thumb" "dek dek" "meta meta"; gap: 0 .875rem; align-items: start; padding: 1.125rem .75rem;
  }
  #news-content .news-row__text { display: contents; }
  #news-content .news-row__title { grid-area: title; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.005em; }
  #news-content .news-row__dek { grid-area: dek; }
  #news-content .news-row__meta { grid-area: meta; }
  #news-content .news-row__media { grid-area: thumb; width: 72px; border-radius: .75rem; margin-top: .125rem; }
  #news-content .news-row__media--plate svg { width: 22px; height: 22px; }
  #news-content .news-meta__src { display: none; }
  #news-content .news-hero__title { -webkit-line-clamp: 4; line-clamp: 4; }
  #news-content .news-sheet { padding: .5rem; border-radius: 1.5rem; }
  #news-article .article-column { padding-inline: 1.125rem; border-radius: 1.5rem; }
}
@media (max-width: 40em) {
  #news-article .article-body { font-size: 1.125rem; line-height: 1.6667; }            /* 18/30 */
  #news-article .article-title { line-height: 1.2; }
}
@media (forced-colors: active) {
  #news-content :is(.news-sheet, .news-hero, .news-rail__panel),
  #news-article :is(.article-column, .article-pager__link) { border: 1px solid CanvasText; }
  #news-related .news-card { border: 1px solid CanvasText !important; }
  :is(#news-content, #news-article, #news-related) .news-chip,
  #news-content .news-rail__chip,
  #news-article .share-btn { border: 1px solid CanvasText; }
  #news-content .news-row { border: 1px solid CanvasText; }
  #news-article .article-body blockquote { border-inline-start: 3px solid CanvasText; box-shadow: none; }
  #news-article .article-body hr { border-top: 0; }
  #news-article .article-body > p:last-child::after { content: none; }
}
@media print {
  #news-article :is(.article-pubbar, .article-share, .article-pager),
  #news-related { display: none; }
  #news-article .article-column { width: auto; margin-inline: 0; padding: 0; box-shadow: none; border-radius: 0; }
  #news-article .article-body { font-size: 12pt; line-height: 1.55; }
}