/* ══════════════════════════════════════════════════════════════════════════
   /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); }
