/* ==========================================================================
   NEWS, GEAR, GUIDES, SETUP — the pages that used to be cream.

   Loaded after tokens.css, wire.css and hub.css, and it adds no new colours,
   type or spacing of its own: everything here composes the approved tokens the
   homepage already uses. What it adds is the vocabulary those pages need —
   product cards, comparison rows, key points and the checklist.
   ========================================================================== */

/* ----------------------------- page opener ----------------------------- *
   These pages have no hero photograph, so the opener is compact by design
   rather than a screen of empty black above the first useful thing. */
.topper {
  background:
    radial-gradient(100% 120% at 0% 0%, rgba(214, 255, 63, 0.09), transparent 60%),
    var(--ink);
  border-bottom: 1px solid var(--line);
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0 clamp(1.75rem, 3vw, 2.5rem);
}
.topper__in { width: min(var(--shell), 100% - var(--gutter) * 2); margin-inline: auto; }
.topper__t {
  margin: 0.7rem 0 0.6rem;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--cream);
  max-width: 22ch;
}
.topper__lede {
  margin: 0; max-width: 62ch; color: var(--cream-dim);
  font-size: clamp(1rem, 1.2vw, 1.0625rem); line-height: 1.6;
}
.topper__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1.4rem; }
.sect--tight { padding-top: clamp(1.5rem, 2.5vw, 2rem); padding-bottom: 0; }

/* ------------------------------ key points ------------------------------ */
.keypoints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.keypoint {
  border: 1px solid var(--line); border-left: 3px solid var(--lime);
  border-radius: var(--radius); background: var(--surface); padding: 1.1rem 1.25rem;
}
.keypoint--warn { border-left-color: var(--sunset); }
.keypoint__t { margin: 0 0 0.35rem; color: var(--cream); font-weight: 800; font-size: 1.0625rem; }
.keypoint__d { margin: 0; color: var(--cream-dim); font-size: 1rem; line-height: 1.55; }

/* ----------------------------- product cards ----------------------------- *
   No image frame at all, rather than an empty one with an apology in it. */
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.pcard {
  display: flex; flex-direction: column; gap: 0.85rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: clamp(1.15rem, 2vw, 1.5rem);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.pcard:hover { border-color: #3D464A; transform: translateY(-2px); }
.pcard__head { display: grid; gap: 0.15rem; }
.pcard__t { margin: 0; color: var(--cream); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.pcard__maker { margin: 0; color: var(--lime); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.pspec { margin: 0; display: grid; gap: 0.4rem; padding: 0.85rem 0; border-block: 1px solid var(--line); }
.pspec__row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; }
.pspec dt { color: var(--cream-dim); font-size: 0.875rem; }
.pspec dd { margin: 0; color: var(--cream); font-size: 1rem; font-weight: 600; }

.pcard__suits, .pcard__limits { margin: 0; color: var(--cream-dim); font-size: 1rem; line-height: 1.55; }
.pcard__lab {
  display: block; color: var(--cream); font-size: 0.8125rem; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 0.2rem;
}
.pcard__limits .pcard__lab { color: var(--sunset); }
.pcard__foot { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line); display: grid; gap: 0.5rem; justify-items: start; }
.pcard__chk { color: var(--cream-dim); font-size: 0.8125rem; }

/* ------------------------------- news ------------------------------- */
.leadstory {
  border: 1px solid rgba(214, 255, 63, 0.35); border-radius: var(--radius-lg);
  background: linear-gradient(100deg, rgba(214, 255, 63, 0.08) 0%, rgba(214, 255, 63, 0.02) 50%, transparent 78%), var(--surface);
  padding: clamp(1.35rem, 2.6vw, 2.1rem);
}
.leadstory__k { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; margin: 0 0 0.7rem; }
.leadstory__when, .leadstory__ver { color: var(--cream-dim); font-size: 0.875rem; }
.leadstory__t { margin: 0 0 0.6rem; color: var(--cream); font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; max-width: 26ch; }
.leadstory__s { margin: 0 0 1rem; color: var(--cream-dim); font-size: 1.0625rem; line-height: 1.6; max-width: 70ch; }
.leadstory__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.2rem; margin: 0; }
.leadstory__src { color: var(--lime); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(214, 255, 63, 0.4); padding-block: 6px; display: inline-block; }

.ncards--flat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ncard__link--flat { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------ guides ------------------------------ */
.guidegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.guidecard {
  position: relative; display: grid; gap: 0.5rem; align-content: start;
  padding: clamp(1.35rem, 2.4vw, 2rem); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.guidecard:hover, .guidecard:focus-visible { border-color: var(--lime); transform: translateY(-3px); }
.guidecard__n { color: var(--lime); font-size: 0.875rem; font-weight: 800; letter-spacing: 0.12em; }
.guidecard__t { color: var(--cream); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.guidecard__d { color: var(--cream-dim); font-size: 1rem; line-height: 1.55; }
.guidecard__go { color: var(--lime); font-size: 1.2rem; margin-top: 0.3rem; }

.nextgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.nextcard {
  display: grid; gap: 0.3rem; padding: 1.1rem 1.25rem; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink);
  transition: border-color 0.2s ease;
}
.nextcard:hover, .nextcard:focus-visible { border-color: var(--lime); }
.nextcard__t { color: var(--cream); font-weight: 800; }
.nextcard__d { color: var(--cream-dim); font-size: 0.9375rem; line-height: 1.5; }
.nextline { margin: 1.25rem 0 0; }

/* ----------------------------- checklist ----------------------------- */
.ckprogress {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.95rem;
  border-radius: 999px; border: 1px solid rgba(214, 255, 63, 0.4);
  background: rgba(214, 255, 63, 0.08); color: var(--lime); font-weight: 800;
}
.cklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.ckitem {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: 1.1rem 1.25rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ckitem__box { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ckitem__label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; cursor: pointer; align-items: start; }
.ckitem__n {
  width: 34px; height: 34px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--cream-dim);
  font-weight: 800; font-size: 0.875rem;
}
.ckitem__b { display: grid; gap: 0.25rem; }
.ckitem__t { color: var(--cream); font-weight: 800; font-size: 1.0625rem; }
.ckitem__d { color: var(--cream-dim); font-size: 1rem; line-height: 1.55; }
.ckitem__go { display: inline-block; margin: 0.75rem 0 0 calc(34px + 1rem); color: var(--lime); font-weight: 700; font-size: 0.9375rem; text-decoration: none; border-bottom: 1px solid rgba(214, 255, 63, 0.35); padding-block: 6px; }
.ckitem__box:checked + .ckitem__label .ckitem__n { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.ckitem__box:checked + .ckitem__label .ckitem__n::after { content: "\2713"; }
.ckitem__box:checked + .ckitem__label .ckitem__n { font-size: 1.05rem; }
.ckitem:has(.ckitem__box:checked) { border-color: rgba(214, 255, 63, 0.4); background: rgba(214, 255, 63, 0.05); }
.ckitem:has(.ckitem__box:checked) .ckitem__t { color: var(--cream-dim); text-decoration: line-through; text-decoration-color: rgba(214, 255, 63, 0.6); }
.ckitem__box:focus-visible + .ckitem__label .ckitem__n { outline: 3px solid var(--lime); outline-offset: 3px; }
.cknote { margin: 1.5rem 0 0; color: var(--cream-dim); font-size: 0.9375rem; }
.cknote a { color: var(--lime); }

/* ------------------------------ setup ------------------------------ */
.wizard { display: grid; gap: 1.5rem; }
.wizard__q { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 1.25rem; margin: 0; }
.wizard__legend { padding: 0 0.4rem; color: var(--cream); font-weight: 800; font-size: 1.0625rem; }
.wizard__opts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.85rem; }
.opt {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  padding: 0.5rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--ink); color: var(--cream); font-weight: 600;
}
.opt input { accent-color: var(--lime); width: 18px; height: 18px; }
.opt:has(input:checked) { border-color: var(--lime); background: rgba(214, 255, 63, 0.08); }
.opt:has(input:focus-visible) { outline: 3px solid var(--lime); outline-offset: 3px; }
.wizard__out {
  margin-top: 1.5rem; border: 1px solid rgba(214, 255, 63, 0.35); border-radius: var(--radius-lg);
  background: var(--surface); padding: clamp(1.15rem, 2vw, 1.6rem);
}
.wizard__out h2 { margin: 0 0 0.6rem; color: var(--cream); font-size: 1.3rem; font-weight: 800; }
.wizard__out p { margin: 0 0 0.85rem; color: var(--cream-dim); font-size: 1rem; line-height: 1.6; }
.wizard__out ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; color: var(--cream-dim); }
.wizard__out a { color: var(--lime); }

/* -------------------------- active navigation -------------------------- */
.nav a[aria-current="page"] { color: var(--lime); position: relative; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px;
  height: 2px; background: var(--lime); border-radius: 2px;
}

/* -------------------------------- narrow -------------------------------- */
@media (max-width: 1100px) {
  .pcards, .guidegrid, .nextgrid, .keypoints, .ncards--flat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pcards, .guidegrid, .nextgrid, .keypoints, .ncards--flat { grid-template-columns: minmax(0, 1fr); }
  .pspec__row { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .ckitem__go { margin-left: 0; }
}
@media (hover: none), (pointer: coarse) {
  .pcard:hover, .guidecard:hover { transform: none; }
}

/* ------------------------- the cast, and one profile ------------------------- *
   Every card used to carry the same "Named by Rockstar" tag and the same
   sentence, and every card linked to the same homepage anchor. The name is now
   the loudest thing on the card, and each card opens that character. */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.pers {
  display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer;
  font: inherit; color: inherit; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.pers:hover, .pers:focus-visible { border-color: var(--lime); transform: translateY(-3px); }
.pers:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.pers__media { display: block; aspect-ratio: 16 / 11; overflow: hidden; }
.pers__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.pers:hover .pers__media img { transform: scale(1.05); }
.pers__body { display: grid; gap: 0.4rem; padding: 1rem 1.15rem 1.15rem; }
.pers__n { color: var(--cream); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.pers__d { color: var(--cream-dim); font-size: 0.9375rem; line-height: 1.5; }
.pers__go { color: var(--lime); font-weight: 700; font-size: 0.9375rem; margin-top: 0.15rem; }
.casehead { margin-top: 2.5rem; }

.pdlg { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--gutter); }
.pdlg[hidden] { display: none; }
.pdlg__scrim { position: absolute; inset: 0; background: rgba(4, 6, 7, 0.82); backdrop-filter: blur(3px); }
.pdlg__panel {
  position: relative; width: min(640px, 100%); max-height: 88vh; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--ink);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9);
}
.pdlg__x {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; line-height: 1;
  border: 1px solid var(--line); background: rgba(4, 6, 7, 0.75); color: var(--cream);
}
.pdlg__x:hover { border-color: var(--lime); color: var(--lime); }
.pdlg__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.pdlg__body { padding: clamp(1.15rem, 2.4vw, 1.75rem); display: grid; gap: 0.5rem; justify-items: start; }
.pdlg__n { margin: 0; color: var(--cream); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.03em; }
.pdlg__line { margin: 0 0 0.4rem; color: var(--lime); font-weight: 700; }
.pdlg__lab { margin: 0.5rem 0 0; color: var(--cream); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.pdlg__lab--warn { color: var(--sunset); }
.pdlg__detail, .pdlg__unknown { margin: 0; color: var(--cream-dim); font-size: 1rem; line-height: 1.6; }
.pdlg__src { margin: 0.4rem 0 0.6rem; }
.pdlg__src a { color: var(--lime); font-size: 0.9375rem; text-decoration: none; border-bottom: 1px solid rgba(214, 255, 63, 0.35); padding-block: 6px; display: inline-block; }

@media (max-width: 1100px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }
@media (hover: none), (pointer: coarse) {
  .pers__media img { transition: none; }
  .pers:hover .pers__media img { transform: none; }
  .pers:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .pers__media img { transform: none !important; } }

/* The checklist sat in a 68ch column on a 1440px page, so half the width was
   empty beside it. It reads as a list, not as prose. */
.cklist, .cknote { max-width: 82ch !important; }
.ckitem__d { max-width: 68ch; }

/* ------------------------ an opener with a place in it ------------------------ *
   Each page now opens on a Rockstar press image chosen for that page, scrimmed
   hard enough that the type sits on black and the place still reads behind it. */
.topper--shot { isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 6vw, 5rem) clamp(2.25rem, 4vw, 3.25rem); }
.topper__media { position: absolute; inset: 0; z-index: 0; }
.topper__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.topper__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 10, 11, 0.97) 0%, rgba(8, 10, 11, 0.9) 38%, rgba(8, 10, 11, 0.6) 62%, rgba(8, 10, 11, 0.35) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(8, 10, 11, 0.35) 34%, transparent 66%),
    linear-gradient(180deg, rgba(8, 10, 11, 0.7) 0%, transparent 22%);
}
.topper--shot .topper__in { position: relative; z-index: 1; }
.topper__credit {
  position: absolute; z-index: 2; right: var(--gutter); bottom: 0.5rem;
  margin: 0; color: #8E9598; font-size: 0.8125rem; text-align: right; max-width: 46ch;
}

/* News cards now carry a picture, so they use the shared media treatment. */
.ncards--flat .ncard__link { grid-template-columns: minmax(0, 1fr); }
.ncards--flat .ncard__media { aspect-ratio: 16 / 9; overflow: hidden; }
.ncards--flat .ncard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Community cards get a place each. */
.comm { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.comm__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.comm__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comm > :not(.comm__media) { padding-inline: clamp(1.25rem, 2.3vw, 1.8rem); }
.comm__plat { padding-top: clamp(1rem, 1.8vw, 1.3rem); }
.comm__chk { padding-bottom: clamp(1.25rem, 2.3vw, 1.8rem); }

@media (max-width: 760px) {
  .topper__credit { position: static; text-align: left; max-width: none; padding: 0 var(--gutter) 1rem; margin-top: 1rem; }
  .topper--shot { display: flex; flex-direction: column; }
  .topper__media img { object-position: 55% 42%; }
}

/* The kind label ran into the link text: "Live searchRelease date discussion". */
.topic__links a { display: inline-flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; border-bottom: 0; }
.topic__kind {
  flex: none; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cream-dim); border: 1px solid var(--line); border-radius: 4px; padding: 0.1rem 0.4rem;
}
.topic__lab { border-bottom: 1px solid rgba(214, 255, 63, 0.3); }
.topic__links a:hover .topic__lab { border-bottom-color: var(--lime); }
.topper__media img { object-position: 55% 55%; }

/* The featured story was type in the left half of a wide card and nothing in
   the right. It now carries the picture its own grid cards do. */
.leadstory--split {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: 0; padding: 0; overflow: hidden; align-items: stretch;
}
.leadstory__media { overflow: hidden; min-height: 320px; }
.leadstory__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leadstory__body { padding: clamp(1.35rem, 2.6vw, 2.25rem); display: flex; flex-direction: column; justify-content: center; }
.leadstory--split .leadstory__t { max-width: 20ch; }
@media (max-width: 900px) {
  .leadstory--split { grid-template-columns: minmax(0, 1fr); }
  .leadstory__media { min-height: 0; aspect-ratio: 16 / 9; }
}

/* The dossier image had no height cap, so at 640px wide a 16:9 frame filled the
   whole panel and pushed the name, the sourcing and the close action below the
   fold. Opening a character showed a photograph and nothing else. */
.pdlg__img { aspect-ratio: auto; max-height: 32vh; height: 32vh; object-position: center 32%; }
.pdlg__panel { display: flex; flex-direction: column; }
.pdlg__body { overflow: auto; }
@media (max-height: 700px) { .pdlg__img { max-height: 26vh; height: 26vh; } }

/* ==========================================================================
   NEWS — the lead story as the opening visual, then a filterable body.
   Rebuilt 2026-09-19. The page used to open with a paragraph about how we
   work; it opens with what happened now.
   ========================================================================== */
.nlead {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(76vh, 640px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ink);
}
.nlead__media { position: absolute; inset: -5% 0; z-index: 0; overflow: hidden; }
.nlead__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* The wash sits under the headline, not over the whole photograph. */
.nlead__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(8,10,11,0.97) 0%, rgba(8,10,11,0.82) 26%, rgba(8,10,11,0.28) 56%, transparent 80%),
    radial-gradient(90% 70% at 20% 100%, rgba(255,79,163,0.22), transparent 62%);
}
.nlead__in {
  position: relative; z-index: 1;
  width: min(var(--shell), 100% - var(--gutter) * 2); margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  max-width: min(66ch, 100%);
}
.nlead__k { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin: 0 0 0.75rem; }
.nlead__subj {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pink); border: 1px solid rgba(255,79,163,0.5); background: rgba(255,79,163,0.12);
  border-radius: 999px; padding: 0.2rem 0.6rem;
}
.nlead__when { font-size: 0.9375rem; color: var(--cream-dim); font-weight: 600; }
.nlead__t {
  margin: 0 0 0.85rem;
  font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.04em;
  font-weight: 800; color: var(--cream); text-shadow: 0 2px 40px rgba(0,0,0,0.8);
}
.nlead__s { margin: 0 0 1.4rem; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--cream); max-width: 60ch; }
.nlead__acts { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0 0 0.9rem; }
.nlead__ver { margin: 0; font-size: 0.875rem; color: var(--cream-dim); }
/* Sized to its text and pushed right, so its box does not sit across the
   pause control on the left even though the words never reach it. */
.nlead__credit {
  position: relative; z-index: 1; width: fit-content; max-width: 46ch;
  margin: 0 var(--gutter) 0.6rem auto; font-size: 0.78rem; color: #868E91; text-align: right;
}

/* ------------------------------ varied cards ------------------------------ */
.ncards { display: grid; gap: clamp(0.9rem, 2vw, 1.4rem); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.ncard--big { grid-column: span 2; }
@media (max-width: 720px) { .ncard--big { grid-column: auto; } }
.ncard__media { position: relative; }
.ncard__wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(8,10,11,0.55) 100%);
}
.ncard__subj {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a);
}
.ncard__watch {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0.9rem 0.9rem;
  padding: 0.5rem 0.8rem; border-radius: var(--radius); min-height: 44px;
  border: 1px solid rgb(var(--a-rgb) / 0.45); background: rgb(var(--a-rgb) / 0.09);
  color: var(--a); font-weight: 700; font-size: 0.9375rem; text-decoration: none;
}
.ncard__watch:hover { background: rgb(var(--a-rgb) / 0.18); border-color: var(--a); }
.ncard__tri { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ncard[hidden], .hist__row[hidden] { display: none !important; }

.ncards__empty {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem;
  margin: 1rem 0 0; padding: 1rem 1.1rem; border-radius: var(--radius-lg);
  border: 1px dashed rgb(var(--a-rgb) / 0.4); background: rgb(var(--a-rgb) / 0.06);
  color: var(--cream); line-height: 1.55;
}
.ncards__empty[hidden] { display: none !important; }

/* News gained a real <h1>: the page had none once the lead story became the
   hero, so a reader (and a screen reader) had no statement of what the page
   was for. The story headline is the h2 beneath it. */
.nlead__top { margin-bottom: 1.1rem; }
.nlead__h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(0.85rem, 1.3vw, 1rem); font-weight: 800;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--pink);
}
.nlead__purpose { margin: 0; max-width: 54ch; font-size: 1rem; line-height: 1.55; color: var(--cream); }