/* ==========================================================================
   News — a real multi-category news operation, not a listing. Its own
   layout language: a masthead nav, a breaking ticker, a lead-plus-shelves
   front page, and a hard-news article template. Nothing here reuses
   section.css's card grid — that pattern fits a section chosen by comparing
   facts; news is chosen by what happened today.
   ========================================================================== */

/* --- Front-page masthead -------------------------------------------------- */
.news-nav {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-3);
  padding-block: var(--s-4); margin-block-end: 0;
  border-block: 1px solid var(--text);
}
.news-nav__brand { display: flex; flex-direction: column; line-height: 1.15; gap: 2px; }
.news-nav__brand-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -.01em; color: var(--text);
}
.news-nav__brand-tag { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); }
.news-nav__cats { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.news-nav__cats a {
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted);
  padding-bottom: 2px;
}
.news-nav__cats a.is-current,
.news-nav__cats a:hover { color: var(--text); border-bottom: 2px solid var(--accent); }

/* On a narrow screen the row scrolls sideways instead of wrapping.
   Wrapping was not broken, but it left one category stranded on a second
   line, and a seventh (Jobs, once a story is filed there) makes that
   worse. A masthead reads as a masthead when it is one line.

   `scrollbar-width: none` plus the WebKit pseudo-element hides the bar
   itself; the row is still scrollable by touch, wheel, and keyboard,
   because it is a real scroll container rather than a clipped one. */
@media (max-width: 899px) {
  .news-nav__cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Room for the current item's underline, which a clipped overflow
       would otherwise cut off. */
    padding-bottom: var(--s-1);
    /* Let the row run to the container edge so the last item does not
       look like the end of the list when it is not. */
    margin-inline: calc(var(--s-4) * -1);
    padding-inline: var(--s-4);
  }
  .news-nav__cats::-webkit-scrollbar { display: none; }
  .news-nav__cats a { flex: none; scroll-snap-align: start; }
}

/* --- Breaking ticker --------------------------------------------------------
   Always a solid dark bar with white text, like a real breaking-news strip —
   deliberately independent of the site's light/dark theme so it never
   inverts to a light bar (which happens if it tracks --text). Five headlines
   rotate through one slot, crossfading in and out ("taking breath") rather
   than scrolling — a JS-driven fade, not the sideways-marquee style used by
   the sitewide listings ticker in the header. */
.news-ticker { background: #12161C; }
.news-ticker__inner { display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-3); }
.news-ticker__live {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  padding: 3px var(--s-2); border-radius: 3px; letter-spacing: .04em;
}
.news-ticker__live span { width: 6px; height: 6px; border-radius: 999px; background: #fff; animation: pip-pulse 2s var(--ease) infinite; }
@keyframes pip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.news-ticker__stage { position: relative; flex: 1; min-width: 0; height: 1.4em; }
.news-ticker__item {
  position: absolute; inset: 0; display: flex; align-items: center;
  color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(5px);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
}
.news-ticker__item.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.news-ticker__item:hover { color: var(--sec-news-soft, #FFE8ED); text-decoration: underline; }

.news-ticker__dots { flex: none; display: flex; align-items: center; gap: 6px; }
.news-ticker__dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.32); border: 0; padding: 0; cursor: pointer; }
.news-ticker__dot.is-active { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .news-ticker__item { transition: none; }
}

/* --- Lead + secondary + sidebar -------------------------------------------- */
.news-lead-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-8);
  padding-block: var(--s-6) 0;
}
.news-secondary-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4);
  padding-block-start: var(--s-6); margin-block-start: var(--s-6); border-block-start: 1px solid var(--border);
}
/* A category page's "rest of the section" grid, below its lead + secondary
   picks — same separator treatment as the secondary grid above. */
.news-feed-rest { padding-block-start: var(--s-6); margin-block-start: var(--s-6); border-block-start: 1px solid var(--border); }

/* --- Story card, three sizes ------------------------------------------------ */
.news-story { display: block; }
.news-story__media {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  aspect-ratio: 16 / 9; margin-block-end: var(--s-3);
}
.news-story__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-story__cat { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .05em; margin-block-end: 4px; }
.news-story__body h3 { margin: 0 0 4px; font-weight: var(--fw-semi); color: var(--text); line-height: var(--lh-snug); }
.news-story__body p { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-base); max-width: 58ch; }
.news-story__time { font-size: var(--fs-xs); color: var(--text-faint); }

.news-story--lead .news-story__media { aspect-ratio: 16 / 8; }
.news-story--lead .news-story__body h3 { font-size: var(--fs-2xl); line-height: 1.2; }
.news-story--secondary .news-story__media { aspect-ratio: 4 / 3; margin-block-end: var(--s-2); }
.news-story--secondary .news-story__body h3 {
  font-size: var(--fs-sm); line-height: var(--lh-snug);
  -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.news-story--shelf .news-story__media { aspect-ratio: 4 / 3; }
.news-story--shelf .news-story__body h3 { font-size: var(--fs-sm); -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Sidebar: most read, related ------------------------------------------- */
.news-sidebar { display: flex; flex-direction: column; gap: var(--s-5); }
.news-mostread,
.news-related {
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5);
}
.news-mostread__head,
.news-related__head {
  font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent); margin-block-end: var(--s-4);
}
.news-mostread ol { list-style: none; margin: 0; padding: 0; }
.news-mostread li { display: flex; gap: var(--s-3); padding-block: var(--s-2); border-block-end: 1px solid var(--bg-subtle); }
.news-mostread li:last-child { border-block-end: 0; }
.news-mostread li span { flex: none; width: 20px; font-family: Georgia, serif; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-muted); }
.news-mostread li a { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); line-height: var(--lh-snug); }
.news-related a { display: block; padding-block: var(--s-3); border-block-end: 1px solid var(--bg-subtle); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); line-height: var(--lh-snug); }
.news-related a:last-child { border-block-end: 0; padding-block-end: 0; }
/* The "Related listings" variant mixes post types, so each link names which
   section it's from — absent from "Related coverage", where every link is
   already known to be news. */
.news-related__listing span { display: block; margin-block-start: 2px; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; }

/* --- Category archive: empty state -------------------------------------------
   News category pages don't load section.css (they use this shelf grid, not
   the shared card grid), so the empty state needs its own copy here rather
   than depending on styles that aren't loaded.

   Pagination used to be duplicated here for the same reason, and the two
   copies were identical. It now lives once in components.css, which every
   page loads. */
.news-empty { padding-block: var(--s-10); text-align: center; color: var(--text-muted); }
.news-empty b { display: block; color: var(--text); font-size: var(--fs-md); margin-block-end: var(--s-2); }
.news-empty p { margin: 0; font-size: var(--fs-sm); }

/* --- Category shelves -------------------------------------------------------- */
.news-shelf { margin-block: var(--s-8) 0; padding-block-start: var(--s-6); border-block-start: 1px solid var(--border); }
.news-shelf__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--s-4); }
.news-shelf__head h2 { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); display: flex; align-items: center; gap: var(--s-2); }
.news-shelf__head h2 span { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.news-shelf__head a { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.news-shelf__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }

@media (max-width: 900px) {
  .news-lead-layout { grid-template-columns: 1fr; }
  .news-secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .news-secondary-grid { grid-template-columns: 1fr; }
}

/* --- Single story: "The Wire Report" ---------------------------------------- */
.news-story-head { border-block-end: 1px solid var(--border); padding-block: var(--s-5) var(--s-6); }
.news-story-head__kicker { margin-block-end: var(--s-2); }
.news-story-head__kicker a { font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .05em; }
.news-story-head h1 { margin: 0 0 var(--s-3); font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1.2; max-width: 38ch; }
.news-story-head__meta { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-muted); flex-wrap: wrap; }
.news-story-head__updated { color: var(--accent); font-weight: var(--fw-semi); }

/* Sized by its parent (.news-story-prose, max-width: 68ch) rather than its
   own fixed width — the hero image matches the article's text column
   instead of running wider than the copy beneath it. */
.news-story-hero { position: relative; margin: 0 0 var(--s-6); aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; }
.news-story-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Overlaid on the image itself, same as .post-hero — a caption here is
   almost always just a photo credit, not worth the extra vertical space
   a caption below the image would cost this narrower column. */
.news-story-hero figcaption {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: var(--s-6) var(--s-4) var(--s-3);
  font-size: 11px; color: rgba(255,255,255,.8);
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
}

.news-story-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-8);
  max-width: 1180px; padding-block-start: var(--s-6);
}
.news-story-prose { max-width: 68ch; }
.news-story-prose blockquote {
  margin: var(--s-6) 0; padding-inline-start: var(--s-5);
  border-inline-start: 3px solid var(--accent);
  font-size: var(--fs-lg); font-style: italic; color: var(--text); line-height: 1.5;
}
.news-story-prose blockquote p { margin: 0; }

@media (max-width: 900px) {
  .news-story-layout { grid-template-columns: 1fr; }
  .news-story-head h1 { font-size: var(--fs-2xl); max-width: none; }
}

/* --- What to know / Why it matters ---------------------------------------
   The two blocks that make a rewritten wire story worth landing on rather
   than the wire copy itself. The bullets sit above the article for a reader
   with ten seconds; the context line sits below it for one who read on. */
.keypoints {
  margin-block: var(--s-5) var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-subtle);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-md);
}
.keypoints__head {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}
.keypoints ul { margin: 0; padding-inline-start: var(--s-5); display: grid; gap: var(--s-2); }
.keypoints li { font-size: var(--fs-base); line-height: var(--lh-base); }

.whymatters {
  margin-block: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.whymatters b {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.whymatters p { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); }

.place-link {
  display: flex; align-items: center; gap: var(--s-2);
  margin-block: var(--s-5); font-size: var(--fs-sm);
}
.place-link svg { color: var(--text-muted); flex: none; }

@media print { .place-link { display: none; } }