/* ══════════════════════════════════════════════════════════════════════════
   /news (session 181b): THE FEED.

   Rebuilt after the owner's verdict on the first build ("severely ugly ...
   not designed for the attention economy"). The world is the site's own feed
   (white posts on the warm canvas, navy ink, crimson action, the Apple UI
   stack); what is new is the cover, built from each story's own number, and
   the pace of a feed: rings, posts, a sideways rail every few posts.

   Section fields come from the site palette and every one carries white text
   above 6:1: AI #2F5BA8, civil #9E4814 (terracotta-800), electronics and
   energy #13234B (navy-800), Nepal #116B37 (forest-700). They arrive as the
   custom property --nwc-field from src/data/news.js, never typed here twice.

   No script except the story viewer the site already ships
   (public/js/profile-stories.js). The programme filter is radios + :has().
   ══════════════════════════════════════════════════════════════════════════ */

.page-news {
  --nw-bce: #D9702C;
  --nw-bct: #2F5BA8;
  --nw-bei: #5A6478;
  --nw-paper: #FAF7F2;
  --nw-ink: #17181C;
  --nw-radius: 16px;
  --nw-col: 680px;
}
[data-theme="dark"] .page-news {
  --nw-bce: #F0A97A;
  --nw-bct: #8FACDA;
  --nw-bei: #B5BAC1;
}
.page-news ::selection { background: #F0A97A; color: #17181C; }
.page-news a:focus-visible,
.page-news .nwf__radio:focus-visible + label {
  outline: 3px solid var(--ice-color-action, #C41E3A);
  outline-offset: 3px;
  border-radius: 6px;
}
/* The site sets `section { padding: var(--sec) 0 }` for its marketing bands;
   a news section is a block in a column, so it starts at zero. :where() keeps
   this at class weight so each component's own padding still wins. */
.page-news :where(.nw section) { padding-top: 0; padding-bottom: 0; }
/* The site colours every h1 navy; these two sit on a colour field. */
.page-news .nwm .nwm__title, .page-news .nwa__next * { color: #fff; }
.page-news .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Programme chips ───────────────────────────────────────────────────── */
.page-news .nw-chip {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px; border: 1.5px solid currentColor;
  font-size: 0.74rem; font-weight: 750; letter-spacing: 0.02em; line-height: 1.5;
  text-decoration: none;
}
.page-news .nw-prog--bce { color: var(--nw-bce); }
.page-news .nw-prog--bct { color: var(--nw-bct); }
.page-news .nw-prog--bei { color: var(--nw-bei); }

/* ── The page frame ────────────────────────────────────────────────────── */
.page-news .nw { padding-bottom: 56px; }
.page-news .nw__stamp { max-width: var(--nw-col); margin: 32px auto 0; padding: 0 20px; }

/* ── THE COVER ─────────────────────────────────────────────────────────── */
.page-news .nwc {
  position: relative; display: block; overflow: hidden;
  container-type: inline-size;
  aspect-ratio: 4 / 5;
  background: var(--nwc-field);
  color: #fff;
  isolation: isolate;
}
.page-news .nwc--hero { aspect-ratio: 1 / 1; }
.page-news .nwc--tile { aspect-ratio: 4 / 5; border-radius: 12px; }
@media (min-width: 760px) {
  .page-news .nwc--post { aspect-ratio: 16 / 11; }
  .page-news .nwc--hero { aspect-ratio: 21 / 9; }
}
.page-news .nwc__photo { position: absolute; inset: 0; z-index: -2; }
.page-news .nwc__photo > *,
.page-news .nwc__photo picture,
.page-news .nwc__photo img {
  display: block; width: 100%; height: 100%; max-width: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  object-fit: cover;
}
/* A duotone, not a wash: the photo goes greyscale and MULTIPLIES over the
   section field, so its highlights take the section's own colour and its
   shadows go dark. Luminosity blending (the first try) let a bright photo turn
   the navy and forest fields grey (finish verdict R1). White type stays on a
   field at least as dark as the field itself. */
/* The blend sits on the WRAPPER: .nwc__photo has a z-index, so it is its own
   stacking context, and a blend on the img inside it only ever saw transparency
   (which is why both earlier tries looked washed out). */
.page-news .nwc__photo { mix-blend-mode: multiply; opacity: 0.9; }
.page-news .nwc__photo img { filter: grayscale(1) contrast(1.05) brightness(1.2); }
/* The veil is for legibility at the foot, where the band and label sit. */
.page-news .nwc::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--nwc-deep) 78%, transparent) 100%);
}
.page-news .nwc__face {
  position: absolute; left: 7cqw; right: 7cqw; top: 8cqw;
  display: flex; flex-direction: column; gap: 3cqw;
}
.page-news .nwc__fig {
  font-weight: 900;
  font-size: min(calc(135cqw / var(--nwc-len)), 34cqw);
  line-height: 0.88;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.page-news .nwc__lab {
  max-width: 34ch;
  font-size: max(4.6cqw, 13px);
  font-weight: 650;
  line-height: 1.22;
  color: rgba(255, 255, 255, 0.94);
  text-wrap: balance;
}
.page-news .nwc--hero .nwc__fig { font-size: min(calc(150cqw / var(--nwc-len)), 30cqw); }
@media (min-width: 760px) {
  .page-news .nwc--post .nwc__fig { font-size: min(calc(112cqw / var(--nwc-len)), 24cqw); }
  .page-news .nwc--post .nwc__lab { font-size: max(3.2cqw, 14px); }
  .page-news .nwc--hero .nwc__face { top: 6cqw; left: 6cqw; right: 40cqw; }
  .page-news .nwc--hero .nwc__fig { font-size: min(calc(96cqw / var(--nwc-len)), 17cqw); }
  .page-news .nwc--hero .nwc__lab { font-size: max(2.1cqw, 16px); }
}
.page-news .nwc--tile .nwc__lab { font-size: max(5.4cqw, 11px); }

/* The printed band: paper, crowded, across the foot of the cover. */
.page-news .nwc__band {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4em 1.2em;
  padding: 2.4cqw 7cqw;
  background: var(--nw-paper); color: var(--nw-ink);
}
.page-news .nwc__beat { color: var(--nwc-field); }
.page-news .nwc__credits {
  display: flex; flex-wrap: wrap; gap: 0.2em 0.9em;
  font-size: max(2.5cqw, 10px); font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase;
  color: #3F4147;
}
.page-news .nwc__credits span + span::before { content: '/'; margin-right: 0.9em; color: #A8ACBA; }
@media (min-width: 760px) {
  .page-news .nwc--post .nwc__band { padding: 1.6cqw 7cqw; }
  .page-news .nwc--post .nwc__credits { font-size: max(1.7cqw, 10.5px); }
  .page-news .nwc--hero .nwc__band { padding: 1.2cqw 6cqw; }
  .page-news .nwc--hero .nwc__credits { font-size: max(1.05cqw, 11px); }
}
.page-news .nwc--tile .nwc__credits > :not(.nwc__beat) { display: none; }
.page-news .nwc--tile .nwc__band { padding: 2.6cqw 7cqw; }
.page-news .nwc--tile .nwc__credits { font-size: max(4.6cqw, 10px); }

/* ── Masthead and rings (hub) ──────────────────────────────────────────── */
.page-news .nwh {
  max-width: calc(var(--nw-col) + 40px); margin: 0 auto; padding: 28px 20px 4px;
}
.page-news .nwh__title {
  margin: 0; font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 850;
  letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; color: var(--ice-color-text);
}
.page-news .nwh__sub { margin: 10px 0 14px; color: var(--ice-color-text-muted); font-size: 1rem; max-width: 60ch; }
.page-news .nwh .srail { margin: 6px 0 0; }

/* ── Section masthead ──────────────────────────────────────────────────── */
.page-news .nwm {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--nwc-field); color: #fff;
  padding: clamp(28px, 6vw, 72px) 20px clamp(26px, 5vw, 56px);
}
.page-news .nwm__photo { position: absolute; inset: 0; z-index: -2; }
.page-news .nwm__photo picture,
.page-news .nwm__photo { mix-blend-mode: multiply; opacity: 0.85; }
.page-news .nwm__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(1.2); display: block; }
.page-news .nwm::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--nwc-deep) 70%, transparent), transparent 75%);
}
.page-news .nwm__text { max-width: var(--nw-col); margin: 0 auto; }
.page-news .nwm__crumb ol { list-style: none; display: flex; gap: 8px; margin: 0 0 14px; padding: 0; font-size: 0.85rem; font-weight: 650; }
.page-news .nwm__crumb li + li::before { content: '/'; margin-right: 8px; opacity: 0.6; }
.page-news .nwm__crumb a { color: #fff; }
.page-news .nwm__title {
  margin: 0; font-size: clamp(2.3rem, 8vw, 5.2rem); font-weight: 900;
  letter-spacing: -0.04em; line-height: 0.95; max-width: 14ch; text-wrap: balance;
}
.page-news .nwm__blurb { margin: 16px 0 6px; font-size: clamp(1.02rem, 2vw, 1.25rem); font-weight: 550; max-width: 46ch; color: rgba(255,255,255,0.94); }
.page-news .nwm__count { margin: 0; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.82); }

/* ── Section tabs ──────────────────────────────────────────────────────── */
.page-news .nwt {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  max-width: calc(var(--nw-col) + 40px); margin: 14px auto 0; padding: 4px 20px 10px;
}
.page-news .nwt::-webkit-scrollbar { display: none; }
.page-news .nwt__tab {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--ice-color-border); background: var(--ice-color-surface);
  color: var(--ice-color-text); font-weight: 700; font-size: 0.92rem; text-decoration: none;
  transition: background 0.18s ease-out, color 0.18s ease-out;
}
.page-news .nwt__tab::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--nwc-field, var(--ice-color-text));
}
.page-news .nwt__tab span { color: var(--ice-color-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.page-news .nwt__tab:hover { background: var(--ice-color-bg, #FAF7F2); }
.page-news .nwt__tab[aria-current="page"] { background: var(--ice-color-text); color: var(--ice-color-surface); border-color: transparent; }
.page-news .nwt__tab[aria-current="page"] span { color: inherit; opacity: 0.75; }
.page-news .nwt__tab[aria-current="page"]::before { background: currentColor; }

/* ── Grid: feed + side column ──────────────────────────────────────────── */
.page-news .nwg {
  max-width: calc(var(--nw-col) + 40px); margin: 0 auto; padding: 8px 20px 0;
}
@media (max-width: 560px) {
  .page-news .nwg { padding: 8px 0 0; }
  .page-news .nwq, .page-news .nwb--quiet { padding-left: 16px; padding-right: 16px; }
}

/* ── Filter ────────────────────────────────────────────────────────────── */
.page-news .nwf__filter { border: 0; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
@media (max-width: 560px) {
  .page-news .nwf .nwf__filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 16px 2px; margin-bottom: 12px; }
  .page-news .nwf__filter::-webkit-scrollbar { display: none; }
  .page-news .nwf__chip { flex: none; padding: 6px 12px; }
  .page-news .nwh { padding-top: 18px; }
  .page-news .nwh__sub { display: none; }
  .page-news .nwh .srail__item { width: 64px; }
  .page-news .nwh .srail__ring { width: 58px; height: 58px; }
  .page-news .nwt { margin-top: 8px; }
}
.page-news .nwf__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.page-news .nwf__chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; border: 1.5px solid currentColor;
  font-size: 0.86rem; font-weight: 750;
  color: var(--ice-color-text);
}
.page-news .nwf__chip span { font-weight: 600; opacity: 0.7; font-variant-numeric: tabular-nums; }
.page-news .nwf__radio:checked + .nwf__chip,
.page-news .nwf__radio:checked + .nwf__chip span { color: var(--ice-color-surface); }
.page-news .nwf__radio:checked + .nwf__chip { background: var(--ice-color-text); border-color: var(--ice-color-text); }
.page-news .nwf__radio:checked + .nwf__chip.nw-prog--bce { background: var(--nw-bce); border-color: var(--nw-bce); }
.page-news .nwf__radio:checked + .nwf__chip.nw-prog--bct { background: var(--nw-bct); border-color: var(--nw-bct); }
.page-news .nwf__radio:checked + .nwf__chip.nw-prog--bei { background: var(--nw-bei); border-color: var(--nw-bei); }
.page-news .nwf:has(.nwf__radio--bce:checked) .nwp:not(.nwp--bce),
.page-news .nwf:has(.nwf__radio--bct:checked) .nwp:not(.nwp--bct),
.page-news .nwf:has(.nwf__radio--bei:checked) .nwp:not(.nwp--bei),
.page-news .nwf:has(.nwf__radio--bce:checked) .nwr,
.page-news .nwf:has(.nwf__radio--bct:checked) .nwr,
.page-news .nwf:has(.nwf__radio--bei:checked) .nwr { display: none; }

/* ── THE POST ──────────────────────────────────────────────────────────── */
/* minmax(0, 1fr), not the default auto track: a rail's min-content is eight
   covers wide, and an auto track would stretch every post to match it. */
.page-news .nwf__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.page-news .nwr, .page-news .nwp { min-width: 0; }
.page-news .nwp {
  position: relative;
  background: var(--ice-color-surface); border: 1px solid var(--ice-color-border);
  border-radius: var(--nw-radius); overflow: hidden;
  box-shadow: 0 1px 2px rgba(19, 35, 75, 0.05), 0 8px 24px rgba(19, 35, 75, 0.06);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-news .nwp:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(19, 35, 75, 0.06), 0 18px 40px rgba(19, 35, 75, 0.12); }
@media (max-width: 560px) { .page-news .nwp { border-radius: 0; border-left: 0; border-right: 0; } }
.page-news .nwp__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; position: relative; z-index: 2; }
.page-news .nwp__avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--nwc-field); color: #fff; font-weight: 850; font-size: 0.95rem;
  box-shadow: 0 0 0 2px var(--ice-color-surface), 0 0 0 3.5px var(--nwc-field);
}
.page-news .nwp__who { display: flex; flex-direction: column; line-height: 1.25; }
.page-news .nwp__section { font-weight: 750; color: var(--ice-color-text); text-decoration: none; font-size: 0.94rem; }
.page-news .nwp__section:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-news .nwp__when { font-size: 0.8rem; color: var(--ice-color-text-muted); }
.page-news .nwp__body { padding: 16px 18px 18px; }
.page-news .nwp__title { margin: 0 0 8px; font-size: clamp(1.18rem, 2.4vw, 1.4rem); font-weight: 780; line-height: 1.22; letter-spacing: -0.015em; text-wrap: balance; }
.page-news .nwp__title a { color: var(--ice-color-text); text-decoration: none; }
.page-news .nwp__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.page-news .nwp:hover .nwp__title a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.page-news .nwp__dek { margin: 0 0 10px; font-size: 1.02rem; font-weight: 550; color: var(--ice-color-text); line-height: 1.45; }
.page-news .nwp__why {
  margin: 0 0 14px; color: var(--ice-color-text-muted); line-height: 1.5; font-size: 0.95rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.page-news .nwp__for { color: var(--ice-color-text); font-weight: 750; }
.page-news .nwp__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.page-news .nwp__read { font-weight: 800; color: var(--ice-color-text-action, #C41E3A); font-size: 0.95rem; display: inline-flex; align-items: center; gap: 6px; }
.page-news .nwp__read::after {
  content: ''; width: 8px; height: 8px; border-right: 2.5px solid currentColor; border-top: 2.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-news .nwp:hover .nwp__read::after { transform: translateX(3px) rotate(45deg); }
.page-news .nwp__chips { display: inline-flex; gap: 6px; }

/* ── The rail ──────────────────────────────────────────────────────────── */
.page-news .nwr { margin: 6px 0; }
.page-news .nwr__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.page-news .nwr__title { margin: 0; font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ice-color-text); }
.page-news .nwr__more { font-weight: 750; font-size: 0.9rem; color: var(--ice-color-text-action, #C41E3A); white-space: nowrap; }
.page-news .nwr__list {
  list-style: none; margin: 0; padding: 2px 2px 12px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 172px; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.page-news .nwr__item { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; gap: 8px; }
.page-news .nwr__link {
  font-size: 0.9rem; font-weight: 700; line-height: 1.3; color: var(--ice-color-text); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.page-news .nwr__link::after { content: ''; position: absolute; inset: 0; }
.page-news .nwr__item:hover .nwr__link { text-decoration: underline; text-underline-offset: 3px; }
.page-news .nwr__item .nwc { transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.page-news .nwr__item:hover .nwc { transform: translateY(-3px); }
@media (max-width: 560px) { .page-news .nwr { padding: 0 16px; } }

/* ── After the feed: how these are written ─────────────────────────────── */
.page-news .nwb--quiet { margin: 34px 0 0; }
.page-news .nwb__title { margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; color: var(--ice-color-text); }
.page-news .nwb--quiet p { margin: 0 0 10px; font-size: 0.92rem; line-height: 1.55; color: var(--ice-color-text-muted); max-width: 68ch; }

/* ── Section question ──────────────────────────────────────────────────── */
.page-news .nwq { margin: 4px 0 22px; }
.page-news .nwq__q { margin: 0 0 8px; font-size: clamp(1.25rem, 2.6vw, 1.55rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; color: var(--ice-color-text); text-wrap: balance; }
.page-news .nwq__a { margin: 0; max-width: 68ch; line-height: 1.6; color: var(--ice-color-text); }

/* ══ THE ARTICLE ══════════════════════════════════════════════════════════ */
.page-news-article .nwa__cover { max-width: 1400px; margin: 0 auto; }
.page-news .nwa__body { max-width: 720px; margin: 0 auto; padding: 24px 20px 0; }
.page-news .nwa__crumb ol { list-style: none; display: flex; gap: 8px; margin: 0 0 12px; padding: 0; font-size: 0.86rem; font-weight: 700; }
.page-news .nwa__crumb li + li::before { content: '/'; margin-right: 8px; color: var(--ice-color-text-muted); }
.page-news .nwa__crumb a { color: var(--ice-color-text-muted); }
.page-news .nwa__title {
  margin: 0 0 12px; font-size: clamp(1.95rem, 5.4vw, 3.2rem); font-weight: 850;
  letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; color: var(--ice-color-text);
}
.page-news .nwa__dek { margin: 0 0 18px; font-size: clamp(1.08rem, 2.2vw, 1.28rem); font-weight: 550; line-height: 1.4; color: var(--ice-color-text-muted); }
.page-news .nwa__by {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  margin: 0 0 22px; padding: 14px 0; border-top: 1px solid var(--ice-color-border); border-bottom: 1px solid var(--ice-color-border);
}
.page-news .nwa__avatar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--nwc-field); color: #fff; font-weight: 850; font-size: 0.72rem; letter-spacing: 0.04em;
}
.page-news .nwa__byline { display: flex; flex-direction: column; line-height: 1.3; font-weight: 700; font-size: 0.95rem; color: var(--ice-color-text); flex: 1 1 220px; }
.page-news .nwa__meta { font-weight: 500; font-size: 0.82rem; color: var(--ice-color-text-muted); }
.page-news .nwa__chips { display: inline-flex; gap: 6px; }
.page-news .nwa__lede { margin: 0 0 24px; font-size: clamp(1.14rem, 2.3vw, 1.3rem); line-height: 1.55; font-weight: 550; color: var(--ice-color-text); }

.page-news .nwk { margin: 0 0 30px; }
.page-news .nwk__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px;
}
.page-news .nwk__item {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 16px;
  border-radius: 12px; background: var(--ice-color-surface); border: 1px solid var(--ice-color-border);
}
.page-news .nwk__v { font-size: clamp(1.3rem, 2.6vw, 1.6rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1; color: var(--nwc-field); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-theme="dark"] .page-news .nwk__v { color: var(--ice-color-text); }
.page-news .nwk__l { font-size: 0.86rem; line-height: 1.35; color: var(--ice-color-text-muted); overflow-wrap: break-word; hyphens: auto; }

.page-news .nwa__sec { margin: 0 0 30px; }
.page-news .nwa__sec h2 { margin: 36px 0 12px; font-size: clamp(1.3rem, 2.8vw, 1.6rem); font-weight: 820; letter-spacing: -0.02em; line-height: 1.2; color: var(--ice-color-text); }
.page-news .nwa__sec p { margin: 0 0 16px; font-size: 1.08rem; line-height: 1.72; color: var(--ice-color-text); max-width: 68ch; }

.page-news .nwc-courses { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.page-news .nwc-course a {
  display: flex; flex-direction: column; gap: 3px; height: 100%;
  padding: 14px 16px; border-radius: 12px; text-decoration: none;
  background: var(--ice-color-surface); border: 1.5px solid currentColor;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-news .nwc-course a:hover { transform: translateY(-2px); }
.page-news .nwc-course__code { font-weight: 900; font-size: 1.05rem; letter-spacing: 0.01em; }
.page-news .nwc-course__name { font-weight: 700; color: var(--ice-color-text); line-height: 1.3; }
.page-news .nwc-course__sem { font-size: 0.8rem; color: var(--ice-color-text-muted); }

.page-news .nwa__gloss dl { margin: 0; display: grid; gap: 4px 0; }
.page-news .nwa__gloss dt { font-weight: 800; color: var(--ice-color-text); margin-top: 12px; }
.page-news .nwa__gloss dd { margin: 0; line-height: 1.6; color: var(--ice-color-text); max-width: 68ch; }
.page-news .nwa__src ul { margin: 0 0 12px; padding-left: 1.1em; line-height: 1.8; }
.page-news .nwa__src a { color: var(--ice-color-text-action, #C41E3A); font-weight: 650; }
.page-news .nwa__sec .nwa__note { font-size: 0.9rem; color: var(--ice-color-text-muted); line-height: 1.55; }

.page-news .nwa__more { max-width: 1040px; margin: 34px auto 0; padding: 0 20px; display: grid; gap: 24px; }
.page-news .nwa__next {
  position: relative; display: grid; gap: 4px; padding: clamp(22px, 4vw, 34px);
  border-radius: 18px; background: var(--nwc-field); color: #fff; text-decoration: none; overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-news .nwa__next:hover { transform: translateY(-3px); }
.page-news .nwa__nextlab { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.8); }
.page-news .nwa__nextfig { font-size: clamp(2.6rem, 9vw, 4.6rem); font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; }
.page-news .nwa__nexttitle { font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 750; line-height: 1.3; max-width: 40ch; }

@media (prefers-reduced-motion: reduce) {
  .page-news .nwp, .page-news .nwr__item .nwc, .page-news .nwa__next, .page-news .nwc-course a, .page-news .nwp__read::after { transition: none; }
  .page-news .nwp:hover, .page-news .nwr__item:hover .nwc, .page-news .nwa__next:hover { transform: none; }
}

/* The section tabs wrap on a wide screen now the column is one feed wide;
   on a phone they stay one swipeable row. */
/* Kept one swipeable row at every width (verdict R2: wrapping pushed the first
   cover's figure below the fold on desktop). */

/* The explainer diagram in an article (session 181f). A drawn figure on white,
   one per story, sized to the reading column; the caption says what to notice. */
.page-news .nwd { margin: 26px 0 30px; }
.page-news .nwd img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--ice-color-border); border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(19, 35, 75, 0.05), 0 10px 28px rgba(19, 35, 75, 0.07);
}
.page-news .nwd figcaption { margin-top: 10px; display: grid; gap: 2px; }
.page-news .nwd__cap { font-size: 0.95rem; line-height: 1.45; color: var(--ice-color-text); font-weight: 550; }
.page-news .nwd__credit { font-size: 0.8rem; color: var(--ice-color-text-muted); }

/* Pager and archive (session 181g). */
.page-news .nwpg { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 30px 0 6px; flex-wrap: wrap; }
.page-news .nwpg__nums { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.page-news .nwpg__num, .page-news .nwpg__step {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--ice-color-border); background: var(--ice-color-surface);
  color: var(--ice-color-text); font-weight: 750; text-decoration: none; font-variant-numeric: tabular-nums;
}
.page-news a.nwpg__num:hover, .page-news a.nwpg__step:hover { border-color: var(--ice-color-text); }
.page-news .nwpg__num[aria-current="page"] { background: var(--ice-color-text); color: var(--ice-color-surface); border-color: transparent; }
.page-news .nwpg__step--off { opacity: 0.4; }
.page-news .nwpg__arch { margin: 10px 0 0; font-size: 0.92rem; }
.page-news .nwpg__arch a { color: var(--ice-color-text-action, #C41E3A); font-weight: 700; }
.page-news .nwx { list-style: none; margin: 18px 0 0; padding: 0; }
.page-news .nwx__row { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--ice-color-border); }
.page-news .nwx__date { flex: none; width: 6.5rem; font-size: 0.86rem; color: var(--ice-color-text-muted); font-variant-numeric: tabular-nums; }
.page-news .nwx__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.page-news .nwx__title { font-weight: 750; color: var(--ice-color-text); text-decoration: none; line-height: 1.35; }
.page-news .nwx__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-news .nwx__meta, .page-news .nwx__count { font-size: 0.84rem; color: var(--ice-color-text-muted); }
@media (max-width: 560px) { .page-news .nwx__row { flex-direction: column; gap: 4px; } }
.page-news .nwx__intro { margin: 0 0 8px; max-width: 68ch; line-height: 1.6; color: var(--ice-color-text); }
@media (max-width: 560px) {
  .page-news .nwpg { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "nums nums" "prev next"; padding: 0 16px; row-gap: 12px; }
  .page-news .nwpg__nums { grid-area: nums; justify-content: center; }
  .page-news .nwpg > .nwpg__step:first-child { grid-area: prev; justify-self: start; }
  .page-news .nwpg > .nwpg__step:last-child { grid-area: next; justify-self: end; }
  .page-news .nwpg__arch { padding: 0 16px; }
}

/* Sub-topics (session 181i): chips on a section page, slim masthead and empty state. */
.page-news .nwtopics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px;
  max-width: calc(var(--nw-col) + 40px); margin: 12px auto 4px; padding: 0 20px;
}
.page-news .nwtopic {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 12px; text-decoration: none;
  background: var(--ice-color-surface); border: 1px solid var(--ice-color-border);
  box-shadow: inset 4px 0 0 0 var(--nwc-field);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease-out;
}
.page-news .nwtopic:hover { transform: translateY(-2px); border-color: var(--nwc-field); }
.page-news .nwtopic__label { font-weight: 750; color: var(--ice-color-text); line-height: 1.25; }
.page-news .nwtopic__n { flex: none; font-size: 0.8rem; font-weight: 700; color: var(--ice-color-text-muted); font-variant-numeric: tabular-nums; }
.page-news .nwm--slim { padding: clamp(24px, 4vw, 44px) 20px clamp(22px, 3.5vw, 36px); }
.page-news .nwm--slim .nwm__text { max-width: calc(var(--nw-col) + 40px); }
.page-news .nwm--slim .nwm__title { font-size: clamp(2rem, 6vw, 3.6rem); max-width: 20ch; }
.page-news .nwe { padding: 22px 20px; border: 1px dashed var(--ice-color-border); border-radius: 14px; background: var(--ice-color-surface); margin: 6px 0 20px; }
.page-news .nwe p { margin: 0; line-height: 1.55; color: var(--ice-color-text-muted); }
.page-news .nwe .nwe__head { margin-bottom: 6px; font-weight: 800; font-size: 1.1rem; color: var(--ice-color-text); }
@media (max-width: 560px) { .page-news .nwtopics { grid-template-columns: 1fr 1fr; padding: 0 16px; } }

/* ── Session 187: the cinematic article ────────────────────────────────────
   Owner: news pages are "so boring" and the articles "very passive". A story
   with entries in src/data/news-images.json gets a full-bleed hero with the
   headline set on the image, a full-bleed frame after its first paragraph and
   a pair further down. Every image is an AI illustration and says so. The
   text gets three marks from src/lib/inline-emphasis.js: strong (the fact),
   em (the term) and mark (the one line per section not to miss), the mark in
   the section's own field colour. */
.page-news .nwhero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(420px, 78vh, 760px); display: flex; align-items: flex-end;
  background: #0b0d12; color: #fff;
}
.page-news .nwhero__img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center 40%;
  animation: nwhero-drift 22s ease-out both;
}
.page-news .nwhero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8,10,16,0.55) 0%, rgba(8,10,16,0) 26%),
    linear-gradient(0deg, rgba(8,10,16,0.94) 0%, rgba(8,10,16,0.72) 32%, rgba(8,10,16,0) 68%);
}
.page-news .nwhero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--nwc-field);
}
.page-news .nwhero__text { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px clamp(34px, 6vw, 64px); }
.page-news .nwhero__crumb a { color: rgba(255,255,255,0.86); }
.page-news .nwhero__crumb li + li::before { color: rgba(255,255,255,0.6); }
.page-news .nwhero__crumb li:last-child a {
  display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--nwc-field); color: #fff;
}
.page-news .nwhero__title {
  margin: 0 0 14px; max-width: 22ch; font-size: clamp(2.1rem, 6.2vw, 4.4rem); font-weight: 850;
  letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.page-news .nwhero__dek {
  margin: 0; max-width: 54ch; font-size: clamp(1.08rem, 2.2vw, 1.32rem); font-weight: 550; line-height: 1.45;
  color: rgba(255,255,255,0.9);
}
.page-news .nwhero__credit {
  position: absolute; top: 14px; right: 16px; padding: 4px 10px; border-radius: 999px;
  background: rgba(8,10,16,0.55); color: rgba(255,255,255,0.88); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
@keyframes nwhero-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .page-news .nwhero__img { animation: none; } }

/* Full-bleed frame: breaks out of the 720px column to the viewport edge. */
.page-news .nwi { margin: 28px 0; }
.page-news .nwi img { display: block; width: 100%; height: auto; border-radius: 14px; background: #0b0d12; }
.page-news .nwi figcaption { margin-top: 8px; font-size: 0.86rem; line-height: 1.45; color: var(--ice-color-text-muted); }
.page-news .nwi--wide {
  width: min(1240px, 100vw); margin-left: 50%; transform: translateX(-50%);
}
.page-news .nwi--wide img { aspect-ratio: 21 / 9; object-fit: cover; border-radius: 0; }
.page-news .nwi--wide figcaption { max-width: 680px; margin: 8px auto 0; padding: 0 20px; }
@media (min-width: 1240px) { .page-news .nwi--wide img { border-radius: 18px; } }
.page-news .nwi-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0; }
.page-news .nwi-pair img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; background: #0b0d12; }
.page-news .nwi-pair__cap { grid-column: 1 / -1; margin: 0 !important; font-size: 0.86rem !important; line-height: 1.45 !important; color: var(--ice-color-text-muted) !important; }
.page-news .nwi-pair--1 { grid-template-columns: 1fr; }
.page-news .nwi-pair--1 img { aspect-ratio: 16 / 9; }
@media (max-width: 560px) { .page-news .nwi-pair { grid-template-columns: 1fr; } .page-news .nwi-pair img { aspect-ratio: 16 / 10; } }

/* The marks. */
.page-news .nwa__sec strong, .page-news .nwa__lede strong { font-weight: 800; color: var(--ice-color-text); }
.page-news .nwa__sec em, .page-news .nwa__lede em { font-style: italic; font-family: Georgia, 'Times New Roman', serif; font-size: 1.04em; }
.page-news .nw-hl {
  color: inherit; padding: 0.06em 0.18em; border-radius: 4px; font-weight: 650;
  background: linear-gradient(transparent 52%, color-mix(in srgb, var(--nwc-field, #2F5BA8) 26%, transparent) 52%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
[data-theme="dark"] .page-news .nw-hl { background: linear-gradient(transparent 52%, color-mix(in srgb, var(--nwc-field, #2F5BA8) 55%, transparent) 52%); }
.page-news .nwa__lede strong { color: var(--nwc-field, var(--ice-color-text)); }
[data-theme="dark"] .page-news .nwa__lede strong { color: var(--ice-color-text); }