/* ==========================================================================
   /news — the newsroom

   A DATED FEED. Everything is scoped under `.nws`, per the house rule that page
   CSS never leaks globally. The blog (insights.css) is a separate design and
   shares nothing with this file except feed.css's pager.

   Logical properties throughout — one set of rules serves fa (RTL) and en.
   ========================================================================== */

.nws {
  --nws-thumb: 168px; /* archive row thumbnail — also the row's min height */
  --nws-gutter: var(--s-6);
}

/* ============================================================== masthead */

.nws-head {
  background: linear-gradient(
    200deg,
    #eef1f7 0%,
    var(--c-paper) 58%,
    var(--c-surface) 100%
  );
  border-block-end: 1px solid var(--c-line);
  padding-block: var(--s-12) var(--s-10);
}

/* Title + illustration side by side, as in the reference. */
.nws-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.nws-head__art {
  display: flex;
  justify-content: center;
}
/* The drawing's colours live in `illus.css` (loaded by this page's controller);
   this page owns only where it sits and how big it is. */
.nws-head__art .il {
  max-inline-size: 400px;
}

.nws-head__crumb {
  display: flex;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-muted);
  margin-block-end: var(--s-6);
}
.nws-head__crumb a {
  color: var(--c-muted);
}
.nws-head__crumb a:hover {
  color: var(--c-primary);
}

.nws-head__eyebrow {
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  color: var(--c-primary);
  margin: 0 0 var(--s-2);
}

.nws-head__title {
  font-size: var(--t-2xl);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin: 0;
}

.nws-head__rule {
  display: block;
  inline-size: 56px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--c-primary);
  margin-block: var(--s-4) var(--s-5);
}

.nws-head__lede {
  max-inline-size: 62ch;
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  color: var(--c-body);
  margin: 0;
}

.nws-head__count {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-6);
  font-size: var(--t-sm);
  color: var(--c-muted);
}
/* ⚠️ An `icon()` inside a text line MUST be sized here. The SVG carries no
   width of its own, so it inherits the block's — which rendered this calendar
   at ~500px and pushed the whole masthead down the page. */
.nws-head__count-icon {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  color: var(--c-line-strong);
}
.nws-head__count b {
  color: var(--c-ink);
  font-size: var(--t-lg);
  font-weight: 700;
}

/* ============================================================ lead story */

.nws-lead {
  padding-block: var(--s-12) 0;
}

/* One bordered card holding image and text, as in the reference — it was a bare
   two-column grid, which at this size read as two unrelated things. */
.nws-lead__card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  padding: clamp(16px, 2vw, 28px);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}
/* ⚠️ PICTURE AT THE INLINE-START, text after it — the user's reference image
   (2026-08-16) puts the photograph on the side the locale starts from and the
   headline beside it. This was the other way round until then; if it ever needs
   to go back, swap these two `order`s and the column ratio above together.
   Done with `order` and NOT by swapping the markup: the media is `aria-hidden`
   + `tabindex="-1"` precisely so the title is the first thing a keyboard or a
   screen reader reaches, and moving it in the DOM would put a dead link ahead
   of the headline again. */
.nws-lead__media {
  order: 1;
}
.nws-lead__body {
  order: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.nws-lead__media {
  display: block;
  aspect-ratio: 2.5 / 2;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-wash);
  position: relative;
}
.nws-lead__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-2, 0.3s) ease;
}
.nws-lead__card:hover .nws-lead__media img {
  transform: scale(1.03);
}

/* Several migrated posts genuinely have no image; a flat grey slab the size of
   the lead card is worse than a marked empty state. */
.nws-lead__media.is-empty {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  border: 1px dashed var(--c-line-strong);
}
.nws-lead__glyph {
  inline-size: 48px;
  block-size: 48px;
  color: var(--c-line-strong);
}

.nws-lead__badge {
  display: inline-block;
  background: var(--c-primary-soft);
  color: var(--c-primary-deep);
  font-size: var(--t-xs);
  font-weight: 500;
  padding: 3px var(--s-3);
  border-radius: 20px;
  margin: 0 0 var(--s-4);
}

.nws-lead__title {
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  margin: 0;
}
.nws-lead__title a {
  color: var(--c-ink);
}
.nws-lead__title a:hover {
  color: var(--c-primary-deep);
  text-decoration: none;
}

.nws-lead__sum {
  margin-block: var(--s-4) 0;
  color: var(--c-body);
  line-height: var(--lh-body);
}

/* Date · views, split by a hairline. `align-items: center` rather than a
   baseline: the two icons are optical, not text, and baselining them sits them
   a pixel low against Persian digits. */
.nws-lead__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-block: var(--s-5) 0;
  font-size: var(--t-sm);
  color: var(--c-muted);
}
.nws-lead__metaitem {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  white-space: nowrap;
}
.nws-lead__metaicon {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  color: var(--c-line-strong);
}
.nws-lead__metasep {
  inline-size: 1px;
  block-size: 14px;
  background: var(--c-line);
}

.nws-lead__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-5);
  color: var(--c-primary-deep);
  font-size: var(--t-sm);
  font-weight: 500;
}

/* ============================================================== most read */

.nws-trend {
  padding-block: var(--s-12) 0;
}

.nws-trend__title {
  font-size: var(--t-lg);
  color: var(--c-ink);
  margin: 0 0 var(--s-5);
  padding-block-end: var(--s-3);
  border-block-end: 1px solid var(--c-line);
}

/* The rail: arrows OUTSIDE the scroller, so a card is never hidden behind one. */
.nws-trend__rail {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* ⚠️ `overflow-x: auto` and NOT a JS-transformed strip. The buttons only call
   `scrollBy`, which means the rail is still a working horizontal scroller under
   touch, trackpad and keyboard if the script never runs — and `scroll-snap`
   leaves it resting on a card edge rather than mid-card. */
.nws-trend__track {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-inline-size: 0;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--s-5) * 2) / 3);
  gap: var(--s-5);

  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 0;

  /* The scrollbar is redundant next to two arrows and eats 15px of card. */
  scrollbar-width: none;
}
.nws-trend__track::-webkit-scrollbar {
  display: none;
}

/* ⚠️ Order inside the card is thumb → text → rank, which is the reference's.
   The rank is LAST so it lands at the inline-end, where it reads as a quiet
   tally rather than a numbered-list marker in front of the headline. */
.nws-trend__item {
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background: var(--c-surface);
  transition: border-color var(--dur-1, 0.15s), box-shadow var(--dur-1, 0.15s);
}
.nws-trend__item:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-1);
}

.nws-trend__rank {
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--c-line-strong);
  line-height: 1;
  padding-inline: var(--s-2);
}

/* Round, quiet until hovered. `disabled` rather than removed at the ends of the
   track: a control that vanishes mid-interaction moves everything beside it. */
.nws-trend__arw {
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-body);
  cursor: pointer;
  transition: border-color var(--dur-1, 0.15s), color var(--dur-1, 0.15s),
    opacity var(--dur-1, 0.15s);
}
.nws-trend__arw:hover:not(:disabled) {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.nws-trend__arw:disabled {
  opacity: 0.4;
  cursor: default;
}
.nws-trend__arw[hidden] {
  display: none;
}
/* `chevron` is drawn pointing DOWN; a quarter turn aims each button along its
   own direction of travel, and the pair mirrors as a pair in LTR. */
.nws-trend__arw svg {
  inline-size: 18px;
  block-size: 18px;
}
[data-trend-prev] svg {
  transform: rotate(-90deg);
}
[data-trend-next] svg {
  transform: rotate(90deg);
}
[dir="rtl"] [data-trend-prev] svg {
  transform: rotate(-90deg);
}
[dir="rtl"] [data-trend-next] svg {
  transform: rotate(90deg);
}

.nws-trend__thumb {
  display: block;
  inline-size: 72px;
  block-size: 56px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-wash);
  flex: none;
}
.nws-trend__thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.nws-trend__link {
  color: var(--c-ink);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  font-weight: 500;

  /* Titles run to 80+ characters in the migrated data; without a clamp one
     card sets a row height the other two cannot fill. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nws-trend__link:hover {
  color: var(--c-primary-deep);
  text-decoration: none;
}

.nws-trend__date {
  display: block;
  margin-block-start: var(--s-1);
  font-size: var(--t-xs);
  color: var(--c-muted);
}

/* ================================================================ toolbar */

.nws-archive {
  padding-block: var(--s-12) var(--sec-y);
}

/* Two rows, as in the reference: the heading owns the first, the controls sit
   on the second and are pushed to the inline-END. It was one row with a heavy
   2px ink rule under it, which fought the pale controls it was drawn beneath. */
.nws-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
}

.nws-bar__title {
  flex: 1 1 100%;
  font-size: var(--t-lg);
  color: var(--c-ink);
  margin: 0;
}

.nws-bar__form {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-inline-start: auto; /* the far edge — the left in fa */
}

.nws-search {
  position: relative;
  display: flex;
  align-items: center;
  min-inline-size: 260px;
}
.nws-search__icon {
  position: absolute;
  inset-inline-start: var(--s-3);
  inline-size: 18px;
  block-size: 18px;
  color: var(--c-muted);
  pointer-events: none;
}
.nws-search__input {
  inline-size: 100%;
  block-size: 40px;
  padding-inline: calc(var(--s-3) * 2 + 18px) calc(var(--s-3) * 2 + 18px);
  border: 1px solid var(--c-line);
  border-radius: 24px;
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--t-sm);
}
.nws-search__input:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
  border-color: var(--c-primary);
}
/* Unstyleable and pinned to the wrong edge in RTL. */
.nws-search__input::-webkit-search-cancel-button {
  display: none;
}

.nws-search__clear {
  position: absolute;
  inset-inline-end: var(--s-2);
  inline-size: 26px;
  block-size: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--c-wash);
  color: var(--c-body);
  cursor: pointer;
}
.nws-search__clear[hidden] {
  display: none;
}
.nws-search__clear svg {
  inline-size: 14px;
  block-size: 14px;
}

.nws-sort {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.nws-sort__select {
  appearance: none;
  block-size: 40px;
  padding-inline: var(--s-4) calc(var(--s-4) + 18px);
  border: 1px solid var(--c-line);
  border-radius: 24px;
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}
.nws-sort__chev {
  position: absolute;
  inset-inline-end: var(--s-3);
  inline-size: 16px;
  block-size: 16px;
  color: var(--c-muted);
  pointer-events: none;
}

/* Only reachable without JS — post-feed.js submits on input/change and hides
   this so the toolbar does not carry a button that never has anything to do. */
.nws--js .nws-bar__go {
  display: none;
}

/* ---- the category picker ------------------------------------------------
   Replaced the chip rail: news has ONE category, so the rail was a single chip
   that selected everything. A select reading "همه دسته‌بندی‌ها" is honest at that
   size and grows on its own when a second category gets posts. */
.nws-pick {
  position: relative;
  display: flex;
  align-items: center;
}
.nws-pick__select {
  appearance: none;
  block-size: 40px;
  padding-inline: var(--s-4) calc(var(--s-4) + 18px);
  border: 1px solid var(--c-line);
  border-radius: 24px;
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}
.nws-pick__select:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
}
.nws-pick__chev {
  position: absolute;
  inset-inline-end: var(--s-3);
  inline-size: 16px;
  block-size: 16px;
  color: var(--c-muted);
  pointer-events: none;
}

/* ---- the «فیلترها» button and its panel --------------------------------- */

.nws-filters__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  block-size: 40px;
  padding-inline: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: 24px;
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: border-color var(--dur-1, 0.15s), color var(--dur-1, 0.15s);
}
.nws-filters__btn:hover,
.nws-filters__btn.is-open {
  border-color: var(--c-primary);
  color: var(--c-primary-deep);
}
.nws-filters__icon {
  inline-size: 17px;
  block-size: 17px;
  flex: none;
  color: var(--c-muted);
}
.nws-filters__btn:hover .nws-filters__icon,
.nws-filters__btn.is-open .nws-filters__icon {
  color: inherit;
}
/* A filter is on but the panel is shut — without this the button is the only
   thing on screen and it looks identical either way. */
.nws-filters__dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--c-primary);
}
.nws-filters__dot[hidden] {
  display: none;
}

/* ⚠️ `flex-basis: 100%` — the panel is a child of the FORM (so the year links
   and the sort select still work with JS off) but has to break onto its own
   row instead of squeezing in beside the search field. */
.nws-filters {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-5) var(--s-8);
  margin-block-start: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background: var(--c-paper);
}
.nws-filters[hidden] {
  display: none;
}
.nws-filters__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  min-inline-size: 0;
}
.nws-filters__group--sort {
  margin-inline-start: auto;
}
.nws-filters__label {
  font-size: var(--t-sm);
  color: var(--c-muted);
  white-space: nowrap;
}

.nws-filters__years {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.nws-filters__year {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: 20px;
  font-size: var(--t-sm);
  color: var(--c-body);
  background: var(--c-surface);
}
.nws-filters__year:hover {
  border-color: var(--c-primary);
  color: var(--c-primary-deep);
  text-decoration: none;
}
.nws-filters__year.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.nws-filters__n {
  font-size: var(--t-xs);
  opacity: 0.7;
}

.nws-count {
  margin-block: var(--s-5) 0;
  font-size: var(--t-sm);
  color: var(--c-muted);
}
.nws-count b {
  color: var(--c-ink);
  font-weight: 700;
}

/* ================================================================ archive */

.nws-list {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Year divider. A presentational <li> in the same flat sequence as the rows,
   so post-feed.js can rebuild the whole list as one pass. */
.nws-year {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-block: var(--s-8) var(--s-4);
}
.nws-year::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--c-line);
}
.nws-year:first-child {
  margin-block-start: 0;
}
.nws-year__label {
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--c-primary-deep);
  letter-spacing: 0.02em;
}

/* ⚠️ The chevron column is `auto` and LAST in the template, so it lands at the
   row's inline-END — the left in fa. The date sits beside it. Rows without a
   date still line up, because both trailing columns are `auto`. */
/* A bordered card per row, as in the reference — it was a flat list separated by
   hairlines, which read as a table once the rows carried a thumbnail each. */
.nws-row {
  display: grid;
  grid-template-columns: var(--nws-thumb) minmax(0, 1fr) auto auto;
  gap: var(--nws-gutter);
  align-items: center;
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background: var(--c-surface);
  transition: border-color var(--dur-1, 0.15s), box-shadow var(--dur-1, 0.15s);
}
.nws-row:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-1);
}
.nws-row:hover .nws-row__thumb img {
  transform: scale(1.04);
}
.nws-row:hover .nws-row__go {
  color: var(--c-primary);
}

.nws-row__thumb {
  display: block;
  inline-size: var(--nws-thumb);
  aspect-ratio: 14 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-wash);
}
.nws-row__thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-2, 0.3s) ease;
}
.nws-row__thumb.is-empty {
  display: grid;
  place-items: center;
  border: 1px dashed var(--c-line-strong);
}
.nws-row__thumb.is-empty svg {
  inline-size: 28px;
  block-size: 28px;
  color: var(--c-line-strong);
}

.nws-row__title {
  font-size: var(--t-md);
  font-weight: 500;
  line-height: var(--lh-snug);
  margin: 0;
}
.nws-row__title a {
  color: var(--c-ink);
}
.nws-row__title a:hover {
  color: var(--c-primary-deep);
  text-decoration: none;
}

.nws-row__sum {
  margin-block: var(--s-2) 0;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-muted);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The hairline that separates the headline from the date in the reference. It
   is a border on the date rather than an extra element, so a row with no date
   simply has no rule — nothing to hide and nothing to lay out around. */
.nws-row__date {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-muted);
  white-space: nowrap;
  padding-inline-start: var(--nws-gutter);
  border-inline-start: 1px solid var(--c-line);
  align-self: stretch;
}
.nws-row__cal {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  color: var(--c-line-strong);
}

/* The chevron turns to point along the reading direction: `chevron` is drawn
   pointing DOWN, so a quarter turn aims it at the inline-end in en and the
   opposite way in fa. */
.nws-row__go {
  inline-size: 18px;
  block-size: 18px;
  color: var(--c-line-strong);
  align-self: center;
  transform: rotate(-90deg);
  transition: color var(--dur-1, 0.15s);
}
[dir="rtl"] .nws-row__go {
  transform: rotate(90deg);
}

/* ============================================================ empty state */

.nws-empty {
  text-align: center;
  padding-block: var(--s-16);
}
.nws-empty[hidden] {
  display: none;
}
.nws-empty__glyph {
  inline-size: 40px;
  block-size: 40px;
  color: var(--c-line-strong);
}
.nws-empty__title {
  margin-block: var(--s-4) var(--s-2);
  font-size: var(--t-lg);
  color: var(--c-ink);
}
.nws-empty__text {
  margin: 0 0 var(--s-6);
  color: var(--c-muted);
}

/* ============================================================= responsive */

@media (max-width: 1000px) {
  .nws-lead__card {
    gap: var(--s-6);
  }
  /* Below this the drawing would be either tiny or taller than the title it
     decorates, and it carries no information — so it goes. */
  .nws-head__grid {
    grid-template-columns: 1fr;
  }
  .nws-head__art {
    display: none;
  }
  /* Two cards in view instead of three; the rail simply scrolls further. */
  .nws-trend__track {
    grid-auto-columns: calc((100% - var(--s-5)) / 2);
  }
}

@media (max-width: 820px) {
  .nws-lead__card {
    grid-template-columns: 1fr;
  }
  .nws-head__title {
    font-size: var(--t-xl);
  }
  .nws-head__lede {
    font-size: var(--t-md);
  }
  .nws-bar {
    align-items: stretch;
  }
  .nws-bar__form {
    inline-size: 100%;
  }
  .nws-search {
    flex: 1 1 200px;
    min-inline-size: 0;
  }
}

@media (max-width: 640px) {
  .nws {
    --nws-thumb: 96px;
    --nws-gutter: var(--s-4);
  }
  /* The date leaves the row and joins the body, or the title is squeezed into
     a column too narrow to read at this width. */
  .nws-row {
    grid-template-columns: var(--nws-thumb) minmax(0, 1fr);
  }
  /* The rule and the inset belong to a date in its own COLUMN; down here it is
     a line under the title, so both come off or it draws a stray vertical. */
  .nws-row__date {
    grid-column: 2;
    align-self: start;
    padding-block-start: var(--s-2);
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .nws-row__sum {
    display: none;
  }
  /* One card at a time. The arrows are doing real work at this width. */
  .nws-trend__track {
    grid-auto-columns: 100%;
  }
  /* The toolbar is a stack here, so the sort must not try to hold a far edge. */
  .nws-filters__group--sort {
    margin-inline-start: 0;
  }
}

/* ---- justified body copy · centred blocks keep their centring ------------
   The `:where(p, blockquote, dd)` rule in hitco.css declares alignment ON the
   paragraph, and a direct declaration outranks the `text-align: center` these
   containers pass DOWN to it by inheritance. Re-inheriting restores them.
   Add a centred container that holds a paragraph and it belongs in this list. */
.nws-empty :where(p, blockquote, dd) {
  text-align: inherit;
}