/* Generated by newsgen from templates/figures.js and templates/news.css. Edit those, not this file. */

.news-body img { max-width: 100%; height: auto; }
.news-body figure { width: fit-content; max-width: 100%; margin: 1.5rem 0; }
.news-body figure img { display: block; }
.news-body figcaption { font-size: .875em; color: #6c757d; margin-top: .5rem; }
.dark-mode .news-body figcaption { color: #adb5bd; }

/*
 * Styles for the generated news pages (web/news/*.html).
 *
 * The build copies this file to web/news/news.css, adding the image/caption
 * rules from templates/figures.js at the end, and links it from every news
 * page with a ?v=<hash> on the URL so browsers pick up changes straight away.
 * It is kept out of the site-wide css/styles.css on purpose.
 *
 * Colours are CSS variables, set for light mode on body.news-page and
 * overridden for the site's dark mode (body.dark-mode, toggled by
 * js/scripts.js), so every rule below works in both.
 */

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
}

/* ---------- colours ---------- */

body.news-page {
  --nc-bg: #ffffff;
  --nc-surface: #f5f7fa;
  --nc-text: #14202e;
  --nc-muted: #4f5d6b;
  --nc-border: #dbe2ea;
  --nc-link: #0d67b5;
  --nc-link-hover: #094d88;
  --nc-accent: #0d67b5;
  --nc-tile: #e2edf8;
  --nc-tile-fg: #0d4f8c;
  --nc-band: #0b1a2a;          /* banner background behind/without an image */
  --nc-card: rgba(9, 18, 29, 0.9);
  --nc-card-muted: #c6d1dc;
  --nc-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Category chip colours, picked per category in categories.json */
  --nc-chip-blue-bg: #e2eefa;   --nc-chip-blue-fg: #0b4c86;
  --nc-chip-green-bg: #e3f3e7;  --nc-chip-green-fg: #1d6232;
  --nc-chip-gray-bg: #eceff3;   --nc-chip-gray-fg: #3c4753;
  --nc-chip-purple-bg: #efe8fa; --nc-chip-purple-fg: #5a2d91;
  --nc-chip-amber-bg: #fcf0d9;  --nc-chip-amber-fg: #6e4a06;
  --nc-chip-teal-bg: #dff3f1;   --nc-chip-teal-fg: #0f5c56;
  --nc-chip-rose-bg: #fbe4e6;   --nc-chip-rose-fg: #8a1c2b;
}

body.news-page.dark-mode {
  --nc-bg: #121212;
  --nc-surface: #1c1e21;
  --nc-text: #f1f3f5;
  --nc-muted: #a9b2bc;
  --nc-border: #30353b;
  --nc-link: #4db8ff;
  --nc-link-hover: #8fd1ff;
  --nc-accent: #2f8fe0;
  --nc-tile: #16273a;
  --nc-tile-fg: #9fcbff;
  --nc-band: #0b1520;

  --nc-chip-blue-bg: #10314f;   --nc-chip-blue-fg: #a8d4ff;
  --nc-chip-green-bg: #173822;  --nc-chip-green-fg: #a3dfb5;
  --nc-chip-gray-bg: #2b2f34;   --nc-chip-gray-fg: #cfd6dd;
  --nc-chip-purple-bg: #2d2140; --nc-chip-purple-fg: #d4bdf5;
  --nc-chip-amber-bg: #3a2c0d;  --nc-chip-amber-fg: #f3d9a0;
  --nc-chip-teal-bg: #113533;   --nc-chip-teal-fg: #9fe0d8;
  --nc-chip-rose-bg: #3d1a20;   --nc-chip-rose-fg: #f5b8c1;
}

/* ---------- page frame ---------- */

/* Sticky footer: keeps the footer at the bottom on short pages */
body.news-page { display: flex; flex-direction: column; min-height: 100vh; }
body.news-page .news-main { flex: 1 0 auto; }

/* ---------- shared bits ---------- */

.nc-chip {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--nc-chip-gray-bg);
  color: var(--nc-chip-gray-fg);
  white-space: nowrap;
}
.nc-chip--blue { background: var(--nc-chip-blue-bg); color: var(--nc-chip-blue-fg); }
.nc-chip--green { background: var(--nc-chip-green-bg); color: var(--nc-chip-green-fg); }
.nc-chip--gray { background: var(--nc-chip-gray-bg); color: var(--nc-chip-gray-fg); }
.nc-chip--purple { background: var(--nc-chip-purple-bg); color: var(--nc-chip-purple-fg); }
.nc-chip--amber { background: var(--nc-chip-amber-bg); color: var(--nc-chip-amber-fg); }
.nc-chip--teal { background: var(--nc-chip-teal-bg); color: var(--nc-chip-teal-fg); }

.nc-version {
  font-family: var(--nc-mono);
  font-weight: 700;
  font-size: .8125rem;
  padding: .1rem .45rem;
  border-radius: 6px;
  background: var(--nc-text);
  color: var(--nc-bg);
}

.nc-mono { font-family: var(--nc-mono); }

/* Tile shown in place of an image for posts that don't have one */
.nc-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border-radius: .75rem;
  background: var(--nc-tile);
  color: var(--nc-tile-fg);
  font-family: var(--nc-mono);
  font-weight: 700;
  font-size: 2rem;
}

/* ---------- article: banner ---------- */

.na-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 40vw, 560px);
  background: var(--nc-band);
  overflow: hidden;
}
.na-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.na-banner-inner {
  position: relative;
  width: 100%;
  max-width: 808px;            /* 760px column + padding, matching the body */
  margin: 0 auto;
  padding: 3rem 24px 2.5rem;
  box-sizing: border-box;
}
.na-titlecard {
  background: var(--nc-card);
  color: #ffffff;
  border-radius: 1rem;
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
/* No header image: a plain band, so the title card needs no box of its own */
.na-banner--plain { min-height: 0; }
.na-banner--plain .na-titlecard { background: none; padding: 0; }
.na-banner--plain .na-banner-inner { padding: 3.5rem 24px 3rem; }

.na-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .6rem;
  font-size: .875rem;
}
.na-kicker a,
.dark-mode .na-kicker a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
}
.na-kicker a:hover { border-bottom-color: #ffffff; color: #ffffff; }
.na-kicker-sep { color: #b8c4d1; }
.na-kicker .nc-version { background: #ffffff; color: #0b1520; }
.na-title {
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #ffffff;
}
.na-meta {
  margin: 0;
  font-family: var(--nc-mono);
  font-size: .875rem;
  color: var(--nc-card-muted);
}
.na-banner-caption {
  max-width: 760px;
  margin: .75rem auto 0;
  padding: 0 24px;
  box-sizing: content-box;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--nc-muted);
}

/* ---------- article: body ---------- */

.na-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 24px 0;
  box-sizing: content-box;
}
.na-body {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--nc-text);
}
.na-body > * + * { margin-top: 1.35rem; }
.na-body p { margin-bottom: 0; }
.na-body .na-lede {
  font-size: 1.375rem;
  line-height: 1.5;
  font-weight: 500;
}
.na-body h2, .na-body h3, .na-body h4 {
  margin-top: 2.25rem;
  margin-bottom: 0;
  font-weight: 700;
  line-height: 1.25;
}
.na-body h2 { font-size: 1.75rem; }
.na-body h3 { font-size: 1.5rem; }
.na-body h4 { font-size: 1.25rem; }
.na-body ul, .na-body ol { padding-left: 1.4rem; margin-bottom: 0; }
.na-body li + li { margin-top: .35rem; }
.na-body a { color: var(--nc-link); }
.na-body a:hover { color: var(--nc-link-hover); }
.na-body blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 1rem 1.25rem;
  border-radius: .75rem;
  background: var(--nc-surface);
  color: var(--nc-text);
}
.na-body blockquote > :last-child { margin-bottom: 0; }
.na-body code {
  font-family: var(--nc-mono);
  font-size: .9em;
  color: inherit;
}
.na-body hr { border-color: var(--nc-border); opacity: 1; }

/* Captions under images in the body (figures.js builds the <figure>) */
.na-body figcaption { color: var(--nc-muted); font-size: .875rem; line-height: 1.5; }
.dark-mode .na-body figcaption { color: var(--nc-muted); }

/* Numbered figures: only captioned images get a number */
.na-body { counter-reset: nc-fig; }
.na-body figure { margin-top: 2rem; margin-bottom: 2rem; }
.na-body figcaption::before {
  counter-increment: nc-fig;
  content: 'Fig. ' counter(nc-fig);
  font-family: var(--nc-mono);
  font-weight: 700;
  color: var(--nc-text);
  margin-right: .6em;
}

/* ---------- article: changelog (templates/changelog.js) ---------- */

.na-body .nc-changelog {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.na-body .nc-changelog li + li { margin-top: 0; }
.nc-change { display: flex; gap: .75rem; align-items: baseline; }
.nc-change-text { min-width: 0; }
.nc-badge,
.nc-change--plain::before {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 6em;
  font-family: var(--nc-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: center;
  padding: .1rem .45rem;
  border-radius: 6px;
  position: relative;
  top: -.1em;
}
/* Items without a recognised verb keep the same indent as badged ones */
.nc-change--plain::before { content: '•'; color: var(--nc-muted); }
.nc-badge--update { background: var(--nc-chip-blue-bg); color: var(--nc-chip-blue-fg); }
.nc-badge--add { background: var(--nc-chip-green-bg); color: var(--nc-chip-green-fg); }
.nc-badge--remove { background: var(--nc-chip-rose-bg); color: var(--nc-chip-rose-fg); }
.nc-badge--fix { background: var(--nc-chip-teal-bg); color: var(--nc-chip-teal-fg); }
.nc-badge--change { background: var(--nc-chip-gray-bg); color: var(--nc-chip-gray-fg); }
.nc-arrow { color: var(--nc-link); font-weight: 700; padding: 0 .1em; }

/* ---------- article: at a glance ---------- */

.na-glance {
  margin-bottom: 2.25rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--nc-border);
  border-radius: 1rem;
  background: var(--nc-surface);
  color: var(--nc-text);
}
.na-glance-title {
  margin: 0 0 .9rem;
  font-family: var(--nc-mono);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nc-muted);
}
.na-glance dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .9rem 1.25rem;
}
.na-glance-item { min-width: 0; }
.na-glance-item:not(.na-glance-item--big) { grid-column: 1 / -1; }
.na-glance dt { font-size: .875rem; font-weight: 400; color: var(--nc-muted); }
.na-glance dd { margin: .1rem 0 0; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.na-glance-item--big dd { font-family: var(--nc-mono); font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.na-glance a { color: var(--nc-link); }

/* With an "At a glance" box, wide screens get two columns: text on the left,
   the box on the right (and it stays in view while scrolling). */
@media (min-width: 992px) {
  .na-has-glance .na-banner-inner { max-width: 1124px; }
  .na-has-glance .na-banner-caption { max-width: 1076px; }
  .na-has-glance .na-wrap {
    max-width: 1076px;
    display: grid;
    grid-template-columns: minmax(0, 720px) 300px;
    justify-content: space-between;
    align-items: start;
  }
  .na-has-glance .na-glance {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: 1.5rem;
    margin-bottom: 0;
  }
  .na-has-glance .na-glance dl { grid-template-columns: 1fr; }
  .na-has-glance .na-body { grid-column: 1; grid-row: 1; }
  .na-has-glance .news-nav { grid-column: 1; grid-row: 2; }
}

/* ---------- article: older / newer ---------- */

.news-nav {
  border-top: 1px solid var(--nc-border);
  margin-top: 3.5rem;
  padding-top: 1rem;
}
.news-nav-link { max-width: 40%; }
.news-nav-link:empty { visibility: hidden; }
.news-nav-all { flex-shrink: 0; }
.news-nav a { color: var(--nc-link); text-decoration: none; font-weight: 600; }
.news-nav a:hover { color: var(--nc-link-hover); text-decoration: underline; }

/* ---------- article: more news ---------- */

.na-more {
  max-width: 1160px;
  margin: 4rem auto 0;
  padding: 2.5rem 24px 4.5rem;
  box-sizing: border-box;
  border-top: 1px solid var(--nc-border);
}
.na-more-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.na-more-head h2 { margin: 0; font-size: 1.6rem; font-weight: 700; }
.na-more-head a { color: var(--nc-link); font-weight: 600; text-decoration: none; }
.na-more-head a:hover { color: var(--nc-link-hover); text-decoration: underline; }
.na-more-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.na-more-card {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  text-decoration: none;
  color: var(--nc-text);
}
.dark-mode .na-more-card { color: var(--nc-text); }
.na-more-card:hover { color: var(--nc-text); }
.na-more-card img {
  width: 100%;
  height: auto;               /* let aspect-ratio win over the height attribute */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: .75rem;
}
.na-more-card time { font-family: var(--nc-mono); font-size: .8125rem; color: var(--nc-muted); }
.na-more-title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.na-more-card:hover .na-more-title,
.na-more-card:focus-visible .na-more-title { text-decoration: underline; }

/* ---------- news listing (web/news/index.html) ---------- */

body.news-listing { background: var(--nc-page); }
body.news-page { --nc-page: #f5f7fa; --nc-card-bg: #ffffff; }
body.news-page.dark-mode { --nc-page: #121212; --nc-card-bg: #1c1e21; }

.nl-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3.5rem 24px 5rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  color: var(--nc-text);
}
.nl-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.nl-intro { max-width: 640px; }
.nl-eyebrow {
  margin: 0 0 .6rem;
  font-family: var(--nc-mono);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nc-accent);
}
.dark-mode .nl-eyebrow { color: var(--nc-link); }
.nl-header h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.02em;
}
.nl-lead { margin: .75rem 0 0; font-size: 1.125rem; line-height: 1.5; color: var(--nc-muted); }
.nl-rss,
.dark-mode .nl-rss {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--nc-border);
  border-radius: 10px;
  background: var(--nc-card-bg);
  color: var(--nc-text);
  font-weight: 600;
  text-decoration: none;
}
.nl-rss:hover { color: var(--nc-text); border-color: var(--nc-muted); }

.nl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .5rem;
  font-size: .8125rem;
  color: var(--nc-muted);
}
.nl-latest {
  font-family: var(--nc-mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--nc-accent);
  color: #ffffff;
}

/* Featured: the newest post */
.nl-featured {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  background: var(--nc-card-bg);
  border: 1px solid var(--nc-border);
  border-radius: 1rem;
  overflow: hidden;
}
.nl-featured-media { background: var(--nc-band); min-height: 260px; }
.nl-featured-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: 0;
  aspect-ratio: auto;
  font-size: 3rem;
}
.nl-featured-body {
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.nl-featured-title { margin: 0; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.15; font-weight: 700; }
.nl-featured-excerpt { margin: 0; font-size: 1.125rem; line-height: 1.55; color: var(--nc-muted); }
.nl-button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: 10px;
  background: var(--nc-accent);
  color: #ffffff;
  font-weight: 600;
}

/* Titles are the links; stretched-link makes the whole card clickable */
.nl-featured-title a,
.nl-card-title a,
.dark-mode .nl-featured-title a,
.dark-mode .nl-card-title a { color: var(--nc-text); text-decoration: none; }
.nl-featured:hover .nl-featured-title a,
.nl-card:hover .nl-card-title a,
.nl-featured-title a:focus-visible,
.nl-card-title a:focus-visible { text-decoration: underline; }
.nl-featured:hover .nl-button { filter: brightness(1.1); }

/* Category filter */
.nl-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.nl-filters[hidden] { display: none; }
.nl-filter {
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--nc-border);
  background: var(--nc-card-bg);
  color: var(--nc-text);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}
.nl-filter:hover { border-color: var(--nc-muted); }
.nl-filter[aria-pressed='true'] { background: var(--nc-accent); border-color: var(--nc-accent); color: #ffffff; }

/* Archive, grouped by year */
.nl-archive { display: flex; flex-direction: column; gap: 3rem; }
.nl-year[hidden], .nl-card[hidden], .nl-featured[hidden] { display: none; }
.nl-year-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.nl-year-head h2 { margin: 0; font-family: var(--nc-mono); font-size: 1.75rem; font-weight: 700; }
.nl-year-rule { flex: 1; height: 1px; background: var(--nc-border); }
.nl-year-count { font-size: .875rem; color: var(--nc-muted); }
.nl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 2rem;
}
.nl-card { position: relative; display: flex; flex-direction: column; gap: .8rem; }
.nl-card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: .75rem;
}
.nc-tile.nl-card-img,
.nc-tile.nl-featured-img { display: flex; }
.nl-card-title { margin: 0; font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.nl-card-excerpt {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--nc-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nl-empty { margin: 0; color: var(--nc-muted); }

@media (max-width: 575.98px) {
  .nl-wrap { padding: 1.75rem 16px 3.5rem; gap: 2rem; }
  .nl-featured-body { padding: 1.25rem; }
  .nl-featured-media, .nl-featured-img { min-height: 0; }
  .nl-featured-img { aspect-ratio: 16 / 10; height: auto; }
  .nl-button { align-self: stretch; justify-content: center; }
  /* Filters scroll sideways instead of wrapping */
  .nl-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px;
    scrollbar-width: none;
  }
  .nl-filters::-webkit-scrollbar { display: none; }
  .nl-filter { flex: 0 0 auto; white-space: nowrap; }
  .nl-grid { gap: 1.75rem; }
}

/* ---------- news listing cards (landing page teaser block) ---------- */

.news-card { position: relative; }
.news-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.news-card:hover .stretched-link,
.news-card .stretched-link:focus-visible { text-decoration: underline; }

/* ---------- phones ---------- */

@media (max-width: 575.98px) {
  /* The banner image sits above the title card instead of behind it */
  .na-banner { display: block; min-height: 0; overflow: visible; background: none; }
  .na-banner-img { position: static; display: block; height: 300px; }
  .na-banner-inner { padding: 0 12px; margin-top: -64px; }
  .na-titlecard { padding: 1.25rem; border-radius: .9rem; background: #09121d; }
  .na-banner--plain { background: var(--nc-band); }
  .na-banner--plain .na-banner-inner { margin-top: 0; padding: 2.25rem 16px 2rem; }
  .na-banner-caption { padding: 0 16px; }

  .na-wrap { padding: 2rem 16px 0; }
  .na-body { font-size: 1.0625rem; }
  .na-body .na-lede { font-size: 1.1875rem; }

  /* More news scrolls sideways */
  .na-more { padding: 2rem 0 3.5rem; }
  .na-more-head { padding: 0 16px; }
  .na-more-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;  /* snap to the padding, not the screen edge */
    gap: .9rem;
    padding: 0 16px 4px;
    scrollbar-width: none;
  }
  .na-more-list::-webkit-scrollbar { display: none; }
  .na-more-list > li { flex: 0 0 260px; scroll-snap-align: start; }

  /* Older / newer links stack instead of being cut short */
  .news-nav { flex-direction: column; align-items: flex-start !important; gap: .25rem !important; }
  .news-nav-link { max-width: 100%; white-space: normal; padding: .5rem 0; }
  .news-nav-link:empty { display: none; }
  .news-nav-all { order: 3; padding: .5rem 0; }
}