/* ============================================================
   Ludumina Labs — Build Log (news).  OWNED BY: news-builder.
   Everything scoped under [data-section="news"].
   ============================================================ */

[data-section="news"] {
  --nx-gap:    clamp(1rem, 1.6vw, 1.5rem);
  --nx-pad:    clamp(1.15rem, 1.5vw, 1.6rem);
  --nx-acc:    var(--ink);           /* per-category accent, set below */
  --nx-acc-08: rgba(255, 255, 255, .07);
  --nx-acc-30: rgba(255, 255, 255, .28);
  position: relative;
  background:
    radial-gradient(120% 62% at 84% 0%, rgba(123, 92, 255, .07), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 46%, var(--bg) 100%);
}

/* faint top hairline so the band reads as its own plate */
[data-section="news"]::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  pointer-events: none;
}

/* ---- per-category accents ------------------------------------- */
[data-section="news"] .cat-proto { --nx-acc: var(--cy); --nx-acc-08: rgba(63,224,208,.09);  --nx-acc-30: rgba(63,224,208,.34); }
[data-section="news"] .cat-ai    { --nx-acc: var(--vi); --nx-acc-08: rgba(123,92,255,.11);  --nx-acc-30: rgba(123,92,255,.40); }
[data-section="news"] .cat-art   { --nx-acc: var(--am); --nx-acc-08: rgba(255,178,63,.09);  --nx-acc-30: rgba(255,178,63,.34); }
[data-section="news"] .cat-sci   { --nx-acc: var(--mg); --nx-acc-08: rgba(255,61,139,.09);  --nx-acc-30: rgba(255,61,139,.34); }
/* history: cold marble, sampled off the arena stone and the Parthenon columns —
   distinct from the four luminous accents without inventing a fifth of them */
[data-section="news"] .cat-hist  { --nx-acc: #9FB8D8;  --nx-acc-08: rgba(159,184,216,.10); --nx-acc-30: rgba(159,184,216,.36); }
[data-section="news"] .cat-plat  { --nx-acc: #FFFFFF;   --nx-acc-08: rgba(255,255,255,.07); --nx-acc-30: rgba(255,255,255,.30); }

/* ---- standfirst ------------------------------------------------ */
[data-section="news"] .nx-standfirst {
  max-width: 66ch;
  margin: calc(var(--nx-gap) * -0.6) 0 clamp(2.25rem, 4vw, 3.5rem);
  color: var(--ink-60);
  font-size: clamp(0.96rem, 1.08vw, 1.115rem);
  line-height: 1.65;
  text-wrap: pretty;
}

/* ---- log stack ------------------------------------------------- */
[data-section="news"] .nx-log {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.6vw, 2.4rem);
}

[data-section="news"] .nx-trio,
[data-section="news"] .nx-tail {
  display: grid;
  gap: var(--nx-gap);
  align-items: stretch;
}
[data-section="news"] .nx-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* the tail is billed as "wide + note" — make the wide actually wide, so the
   two shapes read as different objects rather than two near-equal cards */
[data-section="news"] .nx-tail { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }

/* Two trios of three would be six identical cards — the bar's own sin.
   The worlds trio keeps the cinematic 16:9; the workbench trio runs
   letterbox strips, which is also the crop these ultrawide captures
   actually want. */
[data-section="news"] .nx-trio--work .nx-frame { aspect-ratio: 21 / 9; }

/* ---- the article shell ----------------------------------------- */
[data-section="news"] .nx {
  position: relative;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip-both);
  transition:
    background-color .55s var(--ease),
    box-shadow .55s var(--ease);
}
[data-section="news"] .nx:hover,
[data-section="news"] .nx:focus-within {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--nx-acc-30);
}

/* a thin accent seam down the leading edge, lit on interaction */
[data-section="news"] .nx::after {
  content: "";
  position: absolute;
  left: 0;
  top: var(--notch);
  bottom: var(--notch);
  width: 2px;
  background: var(--nx-acc);
  opacity: 0;
  transform: scaleY(.35);
  transform-origin: 50% 50%;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
[data-section="news"] .nx:hover::after,
[data-section="news"] .nx:focus-within::after { opacity: .75; transform: scaleY(1); }

/* ---- media frame ----------------------------------------------- */
[data-section="news"] .nx-frame {
  position: relative;
  overflow: hidden;
  /* width must be pinned: with only aspect-ratio + height:100% the frame
     derives its width from its height and overflows the grid column. */
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #04050C;
}
[data-section="news"] .nx-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.06) contrast(1.04);
  transition: transform 1.1s var(--ease), filter .7s var(--ease);
  will-change: transform;
}
[data-section="news"] .nx:hover .nx-frame img,
[data-section="news"] .nx:focus-within .nx-frame img {
  transform: scale(1.085);
  filter: saturate(1.16) contrast(1.07);
}

/* the anatomy plate is genuinely dark — lift it so it reads small */
[data-section="news"] .nx-frame--lift img {
  filter: brightness(1.3) contrast(1.1) saturate(1.16);
}
[data-section="news"] .nx:hover .nx-frame--lift img,
[data-section="news"] .nx:focus-within .nx-frame--lift img {
  filter: brightness(1.46) contrast(1.14) saturate(1.28);
}

/* the nucleus plate is a blown-out magenta render — by far the brightest
   object in the section. Pull the exposure down so it stops out-shouting
   the lead. */
[data-section="news"] .nx-frame--dim img {
  filter: brightness(.40) contrast(1.22) saturate(.88);
}
[data-section="news"] .nx:hover .nx-frame--dim img,
[data-section="news"] .nx:focus-within .nx-frame--dim img {
  filter: brightness(.5) contrast(1.26) saturate(.96);
}

[data-section="news"] .nx-frame--lead { aspect-ratio: 2 / 1;  min-height: 15rem; }
[data-section="news"] .nx-frame--sq   { aspect-ratio: 4 / 3; height: 100%; min-height: 12rem; }

/* The lead is the largest plate in the section and its caption promises a
   learner inside it. Uncropped, the right third is washed blue haze and the
   figure is a 6px speck on the bottom edge. This crop — 1.35x, anchored
   down-left — lands on the wooden floor, the hypogeum cross and the banked
   seating, and brings the figure up to roughly four-fifths height. */
[data-section="news"] .nx-frame--lead img {
  transform: scale(1.35);
  transform-origin: 11.6% 96%;
}
[data-section="news"] .nx--lead:hover .nx-frame--lead img,
[data-section="news"] .nx--lead:focus-within .nx-frame--lead img { transform: scale(1.42); }

/* scrim: keeps soft phone-capture footage from looking like a flat photo */
[data-section="news"] .nx-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,6,15,.34) 0%, transparent 26%, transparent 58%, rgba(5,6,15,.66) 100%),
    radial-gradient(112% 88% at 50% 44%, transparent 44%, rgba(5,6,15,.5) 100%);
}
/* the lead carries a figure low in the frame — the standard bottom band
   would bury him, so this one is lighter */
[data-section="news"] .nx-frame--lead .nx-scrim {
  background:
    linear-gradient(180deg, rgba(5,6,15,.30) 0%, transparent 24%, transparent 68%, rgba(5,6,15,.44) 100%),
    radial-gradient(122% 94% at 50% 46%, transparent 54%, rgba(5,6,15,.40) 100%);
}

/* small corner tick — engineered chrome, lead only */
[data-section="news"] .nx-tick {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 54px;
  pointer-events: none;
  border-left: 1px solid var(--nx-acc-30);
  border-bottom: 1px solid var(--nx-acc-30);
  clip-path: polygon(0 0, 1px 0, 1px calc(100% - 1px), 100% calc(100% - 1px), 100% 100%, 0 100%);
  opacity: .8;
}

/* ---- body ------------------------------------------------------ */
[data-section="news"] .nx-body {
  padding: var(--nx-pad);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

/* ---- meta row: index / chip / status --------------------------- */
[data-section="news"] .nx-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .6rem;
  margin-bottom: .1rem;
}
[data-section="news"] .nx-idx {
  color: var(--ink-60);
  letter-spacing: .16em;
  padding-right: .55rem;
  border-right: 1px solid var(--line);
}

/* The category is the least load-bearing thing in the row — the headline
   already says whether it is a temple or a cell. Plain grey text. */
[data-section="news"] .nx-chip {
  padding: 0;
  color: var(--ink-60);
  background: none;
  box-shadow: none;
  clip-path: none;
  letter-spacing: .2em;
  order: 3;
}

/* ---- THE STATE LADDER -----------------------------------------
   This is the section's whole editorial premise: nothing has shipped,
   so each entry declares how real its subject actually is. It is
   ranked, and the rank is legible without reading the word —
   fill weight descends and the glyph steps
   filled → half → ringed → dashed, the same vocabulary the roadmap
   legend teaches.
   ---------------------------------------------------------------- */
[data-section="news"] .nx-status {
  --st: var(--cy);
  --st-fill: transparent;
  --st-edge: .5;
  --notch: 5px;
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .34em .7em .3em;
  font-size: .675rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--st);
  background: var(--st-fill);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  clip-path: var(--clip-both);
}
/* the glyph — a second, non-colour encoding of the same rank */
[data-section="news"] .nx-status::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: currentColor;
}

/* 1 — playable: you can play it. Solid, and the only solid thing here. */
[data-section="news"] .nx-status[data-state="playable"] {
  color: #04121A;
  background: var(--cy);
  box-shadow: 0 0 20px -6px var(--cy);
}
/* 2 — walkable: you can be inside it */
[data-section="news"] .nx-status[data-state="walkable"] {
  --st: var(--cy);
  background: rgba(63, 224, 208, .15);
  box-shadow: inset 0 0 0 1px rgba(63, 224, 208, .85);
}
/* 3 — in engine: it runs, you are not walking it yet */
[data-section="news"] .nx-status[data-state="engine"] {
  --st: var(--am);
  background: rgba(255, 178, 63, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 178, 63, .62);
}
[data-section="news"] .nx-status[data-state="engine"]::before {
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50%);
}
/* 4 — computed: the science is solved, no world around it */
[data-section="news"] .nx-status[data-state="computed"] {
  --st: var(--am);
  box-shadow: inset 0 0 0 1px rgba(255, 178, 63, .45);
}
[data-section="news"] .nx-status[data-state="computed"]::before {
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50%);
}
/* 5 — source model built: geometry exists, nothing runs */
[data-section="news"] .nx-status[data-state="model"] {
  --st: #A99BFF;                       /* --vi lifted to clear 4.5:1 at 10.8px */
  box-shadow: inset 0 0 0 1px rgba(169, 155, 255, .40);
}
[data-section="news"] .nx-status[data-state="model"]::before { background: transparent; }
/* 6 — in source: code only */
[data-section="news"] .nx-status[data-state="source"] {
  --st: var(--ink-60);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .20);
}
[data-section="news"] .nx-status[data-state="source"]::before {
  background: transparent;
  border-style: dashed;
}

/* ---- headline + trigger ---------------------------------------- */
[data-section="news"] .nx-title { font-weight: 400; }

[data-section="news"] .nx-trigger {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-wrap: balance;
}
[data-section="news"] .nx-trigger::after {
  /* full-card hit target so the whole article is clickable, one control only */
  content: "";
  position: absolute;
  inset: 0;
}
[data-section="news"] .nx-trigger:focus-visible { outline: none; }
[data-section="news"] .nx-trigger:focus-visible::after {
  outline: 2px solid var(--cy);
  outline-offset: -4px;
}

[data-section="news"] .nx-sweep {
  display: inline;
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.12vw, 1.16rem);
  line-height: 1.28;
  letter-spacing: -.014em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(var(--nx-acc), var(--nx-acc));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .6s var(--ease);
  padding-bottom: .12em;
}
[data-section="news"] .nx:hover .nx-sweep,
[data-section="news"] .nx:focus-within .nx-sweep { background-size: 100% 1px; }

/* the lead speaks in the display face */
[data-section="news"] .nx-title--lead .nx-sweep {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.02rem, 1.52vw, 1.44rem);
  line-height: 1.24;
  letter-spacing: -.01em;
  background-size: 0% 1px;
}
[data-section="news"] .nx--lead:hover .nx-title--lead .nx-sweep,
[data-section="news"] .nx--lead:focus-within .nx-title--lead .nx-sweep { background-size: 100% 1px; }

/* ---- dek + expandable detail ----------------------------------- */
[data-section="news"] .nx-dek {
  color: var(--ink-60);
  font-size: .945rem;
  line-height: 1.62;
  text-wrap: pretty;
}
[data-section="news"] .nx--lead .nx-dek { font-size: 1.005rem; max-width: 46ch; }
/* an in-world name, quoted as it appears over the NPC's head */
[data-section="news"] .nx-dek em { color: var(--ink-80); font-style: italic; }

[data-section="news"] .nx-more {
  display: grid;
  grid-template-rows: 1fr;              /* no-JS fallback: detail is visible */
  transition: grid-template-rows .55s var(--ease);
}
[data-section="news"] .nx-more-in { overflow: hidden; min-height: 0; }
[data-section="news"] .nx-more p {
  margin-top: .7rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
  color: var(--ink-60);
  font-size: .9rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* JS present: collapse by default, expand on demand */
.is-ready [data-section="news"] .nx-more { grid-template-rows: 0fr; }
.is-ready [data-section="news"] .nx-more-in {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s .55s, opacity .3s var(--ease);
}
.is-ready [data-section="news"] .nx.is-open .nx-more { grid-template-rows: 1fr; }
.is-ready [data-section="news"] .nx.is-open .nx-more-in {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s 0s, opacity .45s var(--ease) .12s;
}

/* the affordance: a hairline "+ / −" that only exists once JS can drive it */
[data-section="news"] .nx-cue {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: .5rem;
  margin-top: .15rem;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ink-60);
  transition: color .45s var(--ease);
}
[data-section="news"] .nx:hover .nx-cue,
[data-section="news"] .nx:focus-within .nx-cue { color: var(--nx-acc); }
[data-section="news"] .nx-cue-glyph {
  position: relative;
  width: 11px;
  height: 11px;
  flex: none;
}
[data-section="news"] .nx-cue-glyph::before,
[data-section="news"] .nx-cue-glyph::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
}
[data-section="news"] .nx-cue-glyph::before { width: 11px; height: 1px; }
[data-section="news"] .nx-cue-glyph::after {
  width: 1px; height: 11px;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
[data-section="news"] .nx.is-open .nx-cue-glyph::after { transform: scaleY(0); opacity: 0; }

/* trio cards share a baseline: bodies fill, the cue sits on the floor */
[data-section="news"] .nx--card { display: flex; flex-direction: column; }
[data-section="news"] .nx--card .nx-body { flex: 1 1 auto; }
/* the cue is the last child, so it stays pinned to the card floor and the
   detail panel opens above it rather than shoving it down the card */
[data-section="news"] .nx--card .nx-cue { margin-top: auto; padding-top: .45rem; }

/* ---- LEAD layout ----------------------------------------------- */
[data-section="news"] .nx--lead {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  align-items: stretch;
}
/* the copy column is short, so left alone the hero plate collapses to a
   2.2:1 letterbox and the architecture in it stops reading as architecture */
[data-section="news"] .nx--lead .nx-frame--lead {
  height: 100%;
  aspect-ratio: auto;
  min-height: clamp(18rem, 27vw, 25.5rem);
}
[data-section="news"] .nx--lead .nx-body {
  padding: clamp(1.4rem, 2.1vw, 2.35rem);
  justify-content: center;
  gap: .7rem;
}

/* ---- WIDE (science) card: image beside text -------------------- */
[data-section="news"] .nx--wide {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  align-items: stretch;
}

/* ---- NOTE card: no image, deliberate ---------------------------- */
[data-section="news"] .nx--note {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  display: flex;
}
[data-section="news"] .nx--note .nx-body {
  padding: clamp(1.25rem, 1.8vw, 1.85rem);
  gap: .6rem;
  width: 100%;
  justify-content: center;
}
/* faint engineered pattern instead of a photograph */
[data-section="news"] .nx--note::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.04) 0 1px, transparent 1px 10px);
  mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 62%);
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 62%);
}

/* ---- foot rule: the ladder, keyed -------------------------------
   Replaces a repeat of the standfirst's disclaimer with the one thing
   the reader actually needs — the order the states run in. */
[data-section="news"] .nx-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .7rem 1.5rem;
  margin-top: clamp(1.6rem, 2.6vw, 2.5rem);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
[data-section="news"] .nx-foot-k { color: var(--ink-60); white-space: nowrap; }

[data-section="news"] .nx-ladder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  font-family: var(--f-mono);
  font-size: .655rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
}
[data-section="news"] .nx-ladder li {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--ink-60);
}
/* the same six-step key, drawn once */
[data-section="news"] .nx-ladder li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: currentColor;
}
[data-section="news"] .nx-ladder li:not(:last-child)::after {
  content: "›";
  margin-left: .3em;
  color: var(--ink-60);
  font-weight: 400;
}
[data-section="news"] .nx-ladder [data-state="playable"] { color: var(--cy); }
[data-section="news"] .nx-ladder [data-state="walkable"] { color: var(--cy); }
[data-section="news"] .nx-ladder [data-state="engine"]   { color: var(--am); }
[data-section="news"] .nx-ladder [data-state="computed"] { color: var(--am); }
[data-section="news"] .nx-ladder [data-state="model"]    { color: #A99BFF; }
[data-section="news"] .nx-ladder [data-state="walkable"]::before { background: currentColor; }
[data-section="news"] .nx-ladder [data-state="engine"]::before,
[data-section="news"] .nx-ladder [data-state="computed"]::before {
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50%);
}
[data-section="news"] .nx-ladder [data-state="model"]::before { background: transparent; }
[data-section="news"] .nx-ladder [data-state="source"]::before {
  background: transparent;
  border-style: dashed;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* below ~1200 a 21:9 third-column strip drops under 150px and stops being a
   picture — the workbench trio goes back to 16:9 */
@media (max-width: 1200px) {
  [data-section="news"] .nx-trio--work .nx-frame { aspect-ratio: 16 / 9; }
}

@media (max-width: 1080px) {
  [data-section="news"] .nx-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the odd card spans both columns — but goes horizontal, so its thumbnail
     never grows larger than the lead's and the hierarchy holds */
  [data-section="news"] .nx-trio > :last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
    align-items: stretch;
  }
  [data-section="news"] .nx-trio > :last-child .nx-frame {
    aspect-ratio: 4 / 3;
    height: 100%;
    min-height: 11rem;
  }
  [data-section="news"] .nx-tail { grid-template-columns: minmax(0, 1fr); }
  [data-section="news"] .nx--lead { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
}

@media (max-width: 860px) {
  [data-section="news"] .nx--lead { grid-template-columns: minmax(0, 1fr); }
  [data-section="news"] .nx--lead .nx-frame--lead {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }
  [data-section="news"] .nx--lead .nx-dek { max-width: none; }
}

@media (max-width: 700px) {
  [data-section="news"] { --notch: 11px; }
  [data-section="news"] .nx-trio { grid-template-columns: minmax(0, 1fr); }
  /* undo the ≤1080 horizontal span: single column, back to a stacked card */
  [data-section="news"] .nx-trio > :last-child {
    grid-column: auto;
    display: flex;
    flex-direction: column;
  }
  [data-section="news"] .nx-trio > :last-child .nx-frame {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }
  /* a 21:9 strip is too shallow once a card is the full width of a phone */
  [data-section="news"] .nx-trio--work .nx-frame { aspect-ratio: 16 / 9; }
  [data-section="news"] .nx--wide { grid-template-columns: minmax(0, 1fr); }
  [data-section="news"] .nx-frame--sq { aspect-ratio: 16 / 9; height: auto; }
  [data-section="news"] .nx-tick { width: 40px; height: 40px; }
  [data-section="news"] .nx-standfirst { font-size: .96rem; }
  [data-section="news"] .nx-meta { gap: .45rem .55rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-section="news"] .nx,
  [data-section="news"] .nx::after,
  [data-section="news"] .nx-frame img,
  [data-section="news"] .nx-sweep,
  [data-section="news"] .nx-chip,
  [data-section="news"] .nx-more,
  [data-section="news"] .nx-more-in,
  [data-section="news"] .nx-cue,
  [data-section="news"] .nx-cue-glyph::after { transition: none; }
  [data-section="news"] .nx:hover .nx-frame img,
  [data-section="news"] .nx:focus-within .nx-frame img { transform: scale(1.02); }
}