/*! RelaxingJazz.com · news.css · Smooth Jazz News (NEWS page builder)
 * Every rule is scoped under .page--news (the next page's stylesheet loads a moment before the router swaps
 * <main>). Colours come only from rj.css tokens, so Night and Day both work.
 *
 *  1. Hero + masthead (dateline and filter chips)
 *  2. Sections
 *  3. From the studio (featured post, earlier notes)
 *  4. New releases (cover grid)
 *  5. Headlines (groups, list, typographic tiles)
 *  6. Load more, states, skeletons
 *  7. Footer (attribution, sources, last updated)
 */

/* ============================================================== 1. Hero + masthead ================== */
/* Shared hero rhythm (contract C2) */
.page--news .news-hero {
  position: relative;
  padding-top: var(--page-hero-pad-top, clamp(3rem, 2rem + 4vw, 6rem));
  padding-bottom: var(--page-hero-pad-bottom, clamp(2rem, 1.5rem + 2vw, 3rem));
  overflow: hidden;
}
/* a crescent moon (Night) or a low sun (Day), far right: the page's quiet signature */
.page--news .news-hero::after {
  content: "";
  position: absolute;
  right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--space-6)));
  top: clamp(var(--space-6), 7vw, var(--space-8));
  width: clamp(40px, 5vw, 64px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset 11px -7px 0 0 var(--gold-2);
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--gold) 50%, transparent));
  transform: rotate(-18deg);
  opacity: 0.85;
  pointer-events: none;
  z-index: -1;
}
:root[data-theme="light"] .page--news .news-hero::after {
  box-shadow: none;
  background: color-mix(in srgb, var(--coral) 40%, var(--bg-raised));
  filter: drop-shadow(0 0 30px color-mix(in srgb, var(--coral) 45%, transparent));
  opacity: 0.45;
}
.page--news .news-hero__title { margin-top: var(--space-3); max-width: 14ch; font-size: var(--page-hero-title, var(--step-6)); }
.page--news .news-hero__lede { margin-top: var(--space-4); }

.page--news .news-masthead {
  position: relative;
  border-bottom: 1px solid var(--border);
}
.page--news .news-masthead::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--horizon);
  opacity: 0.6;
}
.page--news .news-masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-4);
}
.page--news .news-masthead__date {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-0);
  color: var(--text-2);
}
.page--news .news-filters { --cluster-gap: var(--space-2); }
.page--news .news-chip { min-height: 40px; }
@media (pointer: coarse), (max-width: 959px) { .page--news .news-chip { min-height: 44px; } }
.page--news .news-chip__count {
  min-width: 2.2em;
  padding: 0.05em 0.5em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.page--news .news-chip__count:empty { display: none; }
/* While the news loads, the chips keep room for their counts, so the chips (and on phones, the rows they wrap
   into) don't move when the numbers arrive (CLS). news.js drops .news--loading once everything has loaded. */
.page--news .news--loading .news-chip__count:empty:not([data-count="all"]) { display: inline-block; visibility: hidden; }

/* ============================================================== 2. Sections ========================= */
.page--news .news-body {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-8), 8vw, var(--space-9));
  padding-top: clamp(var(--space-6), 5vw, var(--space-8));
}
.page--news .news-nojs {
  max-width: 60ch;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  color: var(--text-2);
}
.page--news .news-section { position: relative; }
.page--news .news-section__head { margin-bottom: clamp(var(--space-5), 3.5vw, var(--space-6)); }
.page--news .news-section__head h2:focus { outline: none; }
.page--news .news-section__head h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: var(--radius-s); }
.page--news .news-section__note {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  max-width: 60ch;
  margin-top: var(--space-3);
  color: var(--text-2);
  font-size: var(--step--1);
  line-height: 1.55;
}
.page--news .news-section__note .icon { flex: none; width: 1.05em; height: 1.05em; color: var(--gold); vertical-align: -0.15em; }

/* ============================================================== 3. From the studio ================== */
.page--news .news-post {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-5);
  padding: clamp(var(--space-5), 4.5vw, var(--space-8));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface-solid);
  box-shadow: var(--shadow-2);
}
.page--news .news-post::before {
  /* the gold horizon along the top edge */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--horizon);
}
.page--news .news-post::after {
  /* warm sunset glow behind the dateline */
  content: "";
  position: absolute;
  z-index: -1;
  left: -12%;
  top: -40%;
  width: min(560px, 70%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 13%, transparent), transparent);
  pointer-events: none;
}
.page--news .news-post__pitons {
  position: absolute;
  z-index: -1;
  right: clamp(var(--space-4), 4vw, var(--space-7));
  bottom: 0;
  width: min(300px, 46%);
  color: var(--text-3);
  opacity: 0.16;
  pointer-events: none;
}
.page--news .news-post__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.page--news .news-post__dateline time { display: flex; align-items: baseline; gap: var(--space-3); }
.page--news .news-post__day {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-5);
  line-height: 0.9;
  color: var(--gold);
  font-variant-numeric: lining-nums;
}
.page--news .news-post__month {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.page--news .news-post__place {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--text-3);
  font-size: var(--step--1);
}
.page--news .news-post__place .icon { width: 1em; height: 1em; color: var(--gold); }
.page--news .news-post__main { min-width: 0; }
.page--news .news-post__title { font-size: var(--step-4); max-width: 22ch; }
.page--news .news-post__figure { margin-top: var(--space-5); }
.page--news .news-post__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-m);
  background: var(--bg-sunken);
}
.page--news .news-post__body { margin-top: var(--space-5); max-width: 66ch; }
.page--news .news-post__body h4 { font-size: var(--step-1); color: var(--text); margin-top: 1.6em; }
.page--news .news-post__body a.ext .icon--ext { margin-left: 0.2em; }
.page--news .news-post__foot {
  --cluster-gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.page--news .news-post__reply .icon { color: var(--gold); }
@media (min-width: 900px) {
  .page--news .news-post--featured { grid-template-columns: 10.5rem minmax(0, 1fr); gap: var(--space-7); }
  .page--news .news-post__aside {
    flex-direction: column;
    align-items: flex-start;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
    padding-right: var(--space-5);
    border-right: 1px solid var(--border);
    min-height: 9rem;
  }
  .page--news .news-post__dateline time { flex-direction: column; gap: var(--space-2); }
  .page--news .news-post__day { font-size: var(--step-6); }
}

/* Earlier notes (studio filter) */
.page--news .news-notes__title {
  margin-top: clamp(var(--space-7), 6vw, var(--space-8));
  margin-bottom: var(--space-3);
  font-size: var(--step-2);
}
.page--news .news-notes { border-top: 1px solid var(--border); }
.page--news .news-note { padding-block: var(--space-5); border-bottom: 1px solid var(--border); }
.page--news .news-note__date { color: var(--text-3); font-size: var(--step--1); letter-spacing: 0.04em; }
.page--news .news-note__title { margin-top: var(--space-2); font-size: var(--step-2); }
.page--news .news-note__excerpt { margin-top: var(--space-2); max-width: 66ch; color: var(--text-2); }
.page--news .news-note__more { margin-top: var(--space-3); }
.page--news .news-note__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  color: var(--gold);
  font-weight: 500;
  font-size: var(--step--1);
  cursor: pointer;
  list-style: none;
}
.page--news .news-note__toggle::-webkit-details-marker { display: none; }
.page--news .news-note__toggle::after { content: "+"; font-size: 1.2em; line-height: 1; }
.page--news .news-note__more[open] > .news-note__toggle::after { content: "−"; }

/* ============================================================== 4. New releases ===================== */
.page--news .news-releases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) clamp(var(--space-4), 2.5vw, var(--space-6));
}
@media (min-width: 640px) { .page--news .news-releases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .page--news .news-releases { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.page--news .news-release { min-width: 0; }
.page--news .news-release__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}
.page--news .news-release__cover { position: relative; }
.page--news .news-release__cover .art {
  --art-size: 100%;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.page--news .news-release__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--surface-solid);
  box-shadow: var(--shadow-1);
}
.page--news .news-release__body { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 auto; min-width: 0; }
.page--news .news-release__kind {
  color: var(--text-3);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.page--news .news-release__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--step-1);
  line-height: 1.25;
}
.page--news .news-release__artist { color: var(--text-2); font-size: var(--step--1); overflow-wrap: anywhere; }
.page--news .news-release__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  color: var(--gold);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
}
/* the whole card is the link, one tab stop */
.page--news .news-release__link::after { content: ""; position: absolute; inset: -6px; border-radius: var(--radius-m); }
.page--news .news-release__link:focus-visible { outline: none; }
.page--news .news-release__link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.page--news .news-release__card:hover .news-release__link { color: var(--gold-2); text-decoration: underline; }
.page--news .news-release__card:hover .art { box-shadow: var(--shadow-3), inset 0 0 0 1px var(--border); }
@media (prefers-reduced-motion: no-preference) {
  .page--news .news-release__card:hover .art { transform: translateY(-4px); }
}

/* ============================================================== 5. Headlines ======================== */
.page--news .news-group + .news-group { margin-top: clamp(var(--space-7), 6vw, var(--space-8)); }
.page--news .news-group__head { margin-bottom: var(--space-2); }
.page--news .news-group__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--step-3);
}
.page--news .news-group__title::after {
  /* a horizon that runs out to the edge */
  content: "";
  flex: 1 1 4rem;
  align-self: center;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 55%, transparent), transparent);
}
.page--news .news-group__sub {
  margin-top: var(--space-1);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--text-3);
}
.page--news .news-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(var(--space-6), 4vw, var(--space-8));
}
@media (min-width: 960px) {
  .page--news .news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page--news .news-item--lead { grid-column: 1 / -1; }
}
.page--news .news-item { min-width: 0; border-top: 1px solid var(--border); }
.page--news .news-item__inner {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  padding-block: var(--space-5);
}
@media (min-width: 600px) {
  .page--news .news-item__inner { grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-5); }
}
.page--news .news-item__media { position: relative; min-width: 0; }
.page--news .news-item__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.page--news .news-item__meta {
  /* reads first visually; in the DOM it follows the title so the heading leads for screen readers */
  order: -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5em;
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.page--news .news-item__source { color: var(--gold); }
.page--news .news-item__dot { color: var(--text-3); }
.page--news .news-ago { letter-spacing: 0.04em; text-transform: none; font-variant-numeric: tabular-nums; }
.page--news .news-item__title { font-size: var(--step-1); line-height: 1.3; overflow-wrap: anywhere; }
.page--news .news-item__link { color: var(--text); text-decoration: none; }
.page--news .news-item__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-m); }
.page--news .news-item__link:focus-visible { outline: none; }
.page--news .news-item__link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.page--news .news-item__inner:hover .news-item__link { color: var(--gold); }
.page--news .news-item__link .icon--ext { color: var(--text-3); }
.page--news .news-item__inner:hover .news-item__link .icon--ext { color: inherit; }
.page--news .news-item__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-2);
  font-size: var(--step--1);
  line-height: 1.6;
}
/* the lead story: a wide tile with the publisher's name set like a record label */
.page--news .news-item--lead .news-item__inner { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-6); }
@media (min-width: 720px) {
  .page--news .news-item--lead .news-item__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--space-5), 4vw, var(--space-7)); align-items: center; }
}
.page--news .news-item--lead .news-item__title { font-size: var(--step-3); line-height: 1.2; }
.page--news .news-item--lead .news-item__excerpt { -webkit-line-clamp: 5; font-size: var(--step-0); }

/* Typographic tile: no feed images by default, so each publisher gets its own little "sleeve" */
.page--news .news-tile {
  --tone: var(--gold);
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  container-type: inline-size;
  border-radius: var(--radius-m);
  background:
    radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--tone) 16%, transparent), transparent 70%),
    linear-gradient(165deg, color-mix(in srgb, var(--tone) 12%, var(--bg-raised)), var(--bg-sunken));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 28%, transparent);
  color: var(--tone);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.page--news .news-tile--coral { --tone: var(--coral); }
.page--news .news-tile--lagoon { --tone: var(--lagoon); }
.page--news .news-tile--ink { --tone: var(--text-2); }
.page--news .news-tile__mono {
  padding-bottom: 16%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  font-size: clamp(0.9rem, 30cqi, 2.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
}
.page--news .news-tile__name { display: none; }
/* the sea and the Pitons along the bottom */
.page--news .news-tile__sea {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tone) 70%, transparent), transparent);
}
.page--news .news-tile__sea::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 62%;
  aspect-ratio: 1200 / 160;
  transform: translateX(-50%);
  background: currentColor;
  opacity: 0.4;
  -webkit-mask: url("../img/pitons.svg") center bottom / 100% 100% no-repeat;
  mask: url("../img/pitons.svg") center bottom / 100% 100% no-repeat;
}
.page--news .news-item__inner:hover .news-tile { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 55%, transparent); }
.page--news .news-tile--lead { aspect-ratio: 16 / 9; }
.page--news .news-tile--lead .news-tile__mono { display: none; }
.page--news .news-tile--lead .news-tile__name {
  display: grid;
  justify-items: center;
  gap: 0.15em;
  padding: 0 8% 14%;
  text-align: center;
}
.page--news .news-tile__top {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-size: clamp(0.7rem, 3.6cqi, 1rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
}
.page--news .news-tile__word {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-4);
  font-size: clamp(1.6rem, 13cqi, 4rem);
  line-height: 1;
}
.page--news .news-tile--lead .news-tile__sea { bottom: 16%; }
.page--news .news-tile--lead .news-tile__sea::before { width: 44%; }

/* Feed image (only when the publisher allows images; see news.js imagesAllowed) */
.page--news .news-item__media--img {
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--border);
}
.page--news .news-item__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}
.page--news .news-item__img.is-loaded { opacity: 1; }
.page--news .news-item--lead .news-item__img { aspect-ratio: 16 / 9; }

/* ============================================================== 6. Load more, states, skeletons ===== */
.page--news .news-more {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  text-align: center;
}
.page--news .news-more__btn { min-width: 14rem; }
.page--news .news-more__count {
  padding-left: 0.7em;
  margin-left: 0.15em;
  border-left: 1px solid var(--border-strong);
  color: var(--text-3);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.page--news .news-more__note { color: var(--text-3); font-size: var(--step--1); }
.page--news .news-more__done { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-display); font-style: italic; font-size: var(--step-0); color: var(--text-2); }
.page--news .news-more__done .icon { color: var(--lagoon); }

.page--news .news-empty { position: relative; padding-top: clamp(var(--space-7), 6vw, var(--space-8)); }
.page--news .news-empty::before { width: 150px; }
.page--news .news-empty__orb {
  /* the moon (Night) or the sun (Day), rising over the Pitons */
  order: -1;
  width: 18px;
  height: 18px;
  margin-bottom: calc(-1 * var(--space-2));
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 12%, transparent), 0 0 28px 6px color-mix(in srgb, var(--gold) 35%, transparent);
}
:root:not([data-theme="light"]) .page--news .news-empty__orb {
  background: radial-gradient(circle at 65% 40%, transparent 46%, var(--gold-2) 48%);
  box-shadow: 0 0 26px 4px color-mix(in srgb, var(--gold) 26%, transparent);
}
.page--news .news-empty__hint { max-width: 46ch; color: var(--text-3); font-size: var(--step--1); line-height: 1.6; }
.page--news .news-page-state .empty-state,
.page--news .news-page-state .error-state { padding-block: clamp(var(--space-8), 8vw, var(--space-9)); }

.page--news .news-skel--post {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--space-6);
  padding: clamp(var(--space-5), 4.5vw, var(--space-8));
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
}
/* The featured post is tall (a full note), so its skeleton reserves a good share of that height: the sections
   below start off-screen and nothing visible moves when the post arrives (CLS). */
.page--news .news-section--studio .news-skel--post { min-height: clamp(22rem, 40vw, 34rem); align-content: start; }
.page--news .news-skel__date { width: 5rem; height: 5rem; border-radius: var(--radius-m); }
.page--news .news-skel__title { height: 1.3em; width: 80%; margin-block: 0.3em 0.5em; border-radius: 6px; }
.page--news .news-skel__cover { width: 100%; aspect-ratio: 1; margin-bottom: var(--space-3); border-radius: var(--radius-m); }
.page--news .news-skel__tile { width: 100%; aspect-ratio: 1; border-radius: var(--radius-m); }
.page--news .news-list--skel .news-item__body .skeleton__line:first-child { width: 30%; }
.page--news .news-releases--skel .news-release:nth-child(n + 3) { display: none; }
@media (min-width: 640px) { .page--news .news-releases--skel .news-release:nth-child(3) { display: block; } }
@media (min-width: 960px) { .page--news .news-releases--skel .news-release:nth-child(4) { display: block; } }

/* ============================================================== 7. Footer =========================== */
.page--news .news-foot {
  position: relative;
  padding-top: clamp(var(--space-6), 5vw, var(--space-7));
  border-top: 1px solid var(--border);
}
.page--news .news-foot::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: min(240px, 40%);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.page--news .news-foot__inner { max-width: var(--container-narrow); }
.page--news .news-foot__title { font-size: var(--step-2); margin-bottom: var(--space-4); }
.page--news .news-foot__note { max-width: 64ch; color: var(--text-2); font-size: var(--step--1); line-height: 1.65; }
.page--news .news-foot__note + .news-foot__note { margin-top: var(--space-2); }
.page--news .news-foot__note a { color: var(--gold); }
.page--news .news-sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.page--news .news-source {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.3em 0.9em;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size: var(--step--1);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.page--news .news-source:hover { border-color: var(--gold); color: var(--text); }
@media (pointer: coarse) { .page--news .news-source { min-height: 44px; } }
.page--news .news-foot__updated {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-5);
  color: var(--text-3);
  font-size: var(--step--1);
}
.page--news .news-foot__updated .icon { width: 1em; height: 1em; color: var(--gold); }

@media (max-width: 599px) {
  .page--news .news-masthead__inner { padding-block: var(--space-3) var(--space-4); }
  .page--news .news-post__title { font-size: var(--step-3); }
  .page--news .news-group__title { font-size: var(--step-2); }
  .page--news .news-skel--post { grid-template-columns: minmax(0, 1fr); }
  .page--news .news-skel__date { width: 8rem; height: 2.5rem; }
}