@charset "UTF-8";
/* ==========================================================================
   Pakdis — articles archive
   --------------------------------------------------------------------------
   A standalone sheet for articles.html. It adds nothing to the identity —
   every colour, font, radius and easing here comes from the tokens in
   css/style.css. What it adds are the components an archive actually needs:
   a searchable banner, one spotlight article, a sticky filter toolbar, a
   grid ⇄ list switch over the existing .card component, and a pager.

   The .card, .section-head, .plate, .gallery, header and footer components
   are used exactly as style.css defines them — nothing is re-styled here
   except the two extra labels the archive puts on a card (category + read
   time) and the list-view geometry.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Page opening
   The featured slider is the banner on this page, so this block only has to
   supply the ground it sits on: the same purple flood and corner pattern the
   other inner pages open with, and the top clearance the fixed header needs.
   There is no headline, lead or stat row here — the slides carry the copy.
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  /* header height + the gap the slider needs beneath it */
  padding-block: var(--hero-top) 92px;
  background: var(--purple-flood);
  isolation: isolate;
}

.page-hero__pattern {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 352px;
  height: auto;
  max-width: none;
  opacity: .55;
  pointer-events: none;
}

.page-hero__glow {
  position: absolute;
  inset-inline-end: -180px;
  top: -220px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(187, 167, 96, .35) 0%, rgba(187, 167, 96, 0) 70%);
  pointer-events: none;
}

/* The page still needs exactly one <h1>; it just isn't drawn, because the
   slide headline is what the reader actually sees at the top of the page. */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Same component as contact.css carries, so both inner pages orient the
   reader identically. Sits above the slider card. */
.breadcrumb {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, .68);
}
.breadcrumb a { color: rgba(255, 255, 255, .68); transition: color .2s var(--ease); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: #fff; }
.breadcrumb__sep {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .6;
  rotate: 180deg;                      /* RTL: chevron points start-ward */
}

/* --------------------------------------------------------------------------
   1. Spotlight slider
   -------------------------------------------------------------------------- */
.spotlight {
  position: relative;
  z-index: 1;                          /* above the banner's pattern and glow */
}

.spotlight__card {
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 56px 20px;  /* the card radius, scaled up */
  background: linear-gradient(158deg, var(--purple-flood) 0%, #33206a 58%, #2a1758 100%);
  box-shadow: 0 40px 80px -40px rgba(24, 12, 52, .55);
}

.spotlight__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 20% 30%;
  opacity: .16;
  pointer-events: none;
}

/* -- the slider ----------------------------------------------------------- */
/* Native scroll-snap, the same mechanism the home page's gallery uses, so it
   inherits touch swipe, momentum and keyboard scrolling instead of
   reimplementing them in JS. `direction: ltr` on the track (restored to rtl on
   each slide) sidesteps RTL's inverted scrollLeft, so "next" always means
   increasing scrollLeft — the same trick .gallery__track relies on. */
.spotlight__viewport { position: relative; z-index: 1; }

.spotlight__track {
  display: flex;
  direction: ltr;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.spotlight__track::-webkit-scrollbar { display: none; }

/* min-height, not height: it holds every slide to the tallest reasonable
   size so the card doesn't resize as slides change — but a slide whose copy
   runs longer can still grow rather than clip. */
.spotlight__slide {
  direction: rtl;
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  min-height: 492px;
}

/* Both children need an explicit row as well as a column. With only
   `grid-column` set, sparse auto-placement walks the cursor forward after the
   first item, finds column 1 of row 1 already behind it, and drops the body
   into row 2 — which is exactly the stacked, half-empty card this replaces.
   `grid-row: 1` on both pins them side by side. */
.spotlight__media {
  position: relative;
  grid-column: 2;                      /* track 2 is the left-hand one in RTL */
  grid-row: 1;
  display: flex;
  padding: 28px;
}

/* The photo is framed and inset rather than bled to the card's edge: it lets
   the pattern breathe around it, keeps the crop away from the text seam, and
   lets the frame carry the same 12/12/35/12 corner signature the article
   cards below use — so the spotlight reads as the same family, one size up. */
.spotlight__frame {
  position: relative;
  display: block;
  flex: 1;
  overflow: hidden;
  border-radius: 12px 12px 35px 12px;
  box-shadow: 0 18px 40px -18px rgba(12, 5, 30, .6);
}
.spotlight__frame::after {             /* gold hairline, drawn over the photo */
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgb(187 167 96 / .38);
  border-radius: inherit;
  pointer-events: none;
}
.spotlight__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  transition: transform .6s var(--ease);
}
.spotlight__slide:hover .spotlight__frame img { transform: scale(1.03); }

/* A gold elbow set off from the frame's start corner — the same bracket move
   the brand rows use, reduced to a corner mark. It is what stops the framed
   photo from reading as a plain inset rectangle. */
.spotlight__corner {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  width: 96px;
  height: 96px;
  border-top: 1.4px solid rgb(187 167 96 / .5);
  border-inline-start: 1.4px solid rgb(187 167 96 / .5);
  border-start-start-radius: 14px;
  pointer-events: none;
}

.spotlight__body {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: 52px 48px;
  padding-inline: 56px 24px;           /* end padding meets the frame's gutter */
}

.spotlight__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.spotlight__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 14px;
  border: 1px solid rgb(187 167 96 / .5);
  border-radius: 999px 999px 999px 4px;  /* the card's one sharp corner, small */
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gold);
}
.spotlight__badge svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: none;
}

/* Position in the set, stated rather than implied by the dots alone —
   the dots say "there are three", this says "you are on the first". */
.spotlight__index {
  flex: none;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .42);
}
.spotlight__index b { font-size: 21px; font-weight: 700; color: var(--gold); }

.spotlight__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 30px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, .6);
}
.spotlight__tag {
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.spotlight__read { color: var(--gold); }

/* The gold spine beside the headline is the brand bracket's vertical run,
   isolated. It fades downward so the mark has a top and reads as a stroke
   rather than a border. */
.spotlight__title {
  position: relative;
  margin-top: 18px;
  padding-inline-start: 22px;
  max-width: 15em;
  font-size: 31px;
  font-weight: 900;
  line-height: 1.44;
  color: #fff;
}
.spotlight__title::before {
  content: "";
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(to bottom, var(--gold), rgb(187 167 96 / .1));
}

.spotlight__excerpt {
  margin-top: 18px;
  padding-inline-start: 22px;          /* aligns with the headline's spine */
  max-width: 40em;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(255, 255, 255, .78);
  text-align: justify;
  text-justify: inter-word;
}

.spotlight__link { margin-top: auto; padding-top: 32px; padding-inline-start: 22px; }
.spotlight__link:hover { color: #fff; }

/* -- slider controls ------------------------------------------------------ */
/* One cluster for the whole track, parked in the photo's bottom corner. That
   keeps it out of the text column entirely — a control sitting under the
   headline would compete with the "خواندن مقاله" link for the same role. */
.spotlight__controls {
  position: absolute;
  z-index: 3;
  bottom: 42px;
  inset-inline-end: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(17, 7, 53, .5);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.spotlight__arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: rgba(255, 255, 255, .85);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.spotlight__arrow svg {
  width: 10px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spotlight__arrow:hover { background: rgba(255, 255, 255, .16); color: var(--gold); }

.spotlight__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 6px;
}

/* Same treatment as the home hero's slider dots — width, not scale, so the
   active one reads as a small rule rather than a bigger circle. */
.spotlight__dot {
  position: relative;
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .4);
  transition: width .3s var(--ease), background-color .3s var(--ease);
}
/* A 9px dot is a 9px tap target. This grows the *hit* area without touching
   what's drawn. The horizontal inset is tied to the row's gap — half of it,
   so neighbouring targets meet exactly and never overlap; overlapping hit
   areas are worse than small ones, because the wrong slide answers. Widen
   the gap and this widens with it (see the ≤620 rule). */
.spotlight__dot::after {
  content: "";
  position: absolute;
  inset: -14px -4px;
}
.spotlight__dot:hover { background: rgba(255, 255, 255, .7); }
.spotlight__dot.is-active { width: 26px; background: var(--gold); }

/* --------------------------------------------------------------------------
   3. Archive band
   -------------------------------------------------------------------------- */
.archive {
  padding-block: 104px 118px;
  background: linear-gradient(180deg, #f7f7f9 0%, #fbfbfb 16%, #fdfdfd 32%, #fefefe 48%, #fefefe 100%);
}

/* -- sticky toolbar ------------------------------------------------------- */
/* Full-bleed rather than a floating pill inside the column, so cards can't
   slide past it at the column's edges. It parks directly under the stuck
   header; where `position: sticky` isn't honoured it simply scrolls away,
   which costs nothing. */
.toolbar-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  margin-bottom: 40px;
  border-block: 1px solid #ece8f2;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
}

.toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.toolbar__end {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}

/* Live result count, not a statistic: it's how a filter tells you it did
   something, and it's the aria-live region screen readers hear when the list
   changes. Kept quiet — grey, small, next to the control that changes it. */
.toolbar__count {
  font-size: 14px;
  font-weight: 400;
  color: var(--grey-600);
  white-space: nowrap;
}

/* -- toolbar search ------------------------------------------------------- */
/* Light-themed, because it now sits on the white toolbar rather than on the
   purple banner. Height is matched to the chips and the view switch beside it
   so the whole bar shares one optical baseline. */
.tool-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 262px;
  padding-inline: 16px 6px;
  border: 1.4px solid #e6e1ee;
  border-radius: 999px;
  background: #fff;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.tool-search:hover { border-color: #d6cde4; }
.tool-search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(187 167 96 / .18);
}

.tool-search__icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-search__input {
  flex: 1;
  min-width: 0;
  padding-block: 11px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink);
}
.tool-search__input::placeholder { color: var(--grey-400); font-weight: 300; }
/* The ring on the wrapper is the pointer focus indicator, so the native
   rectangle inside a pill is dropped — but a real outline comes back for
   keyboard focus, offset clear of the field and given the pill's radius. */
.tool-search__input:focus { outline: none; }
.tool-search__input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 8px;
  border-radius: 999px;
}
/* The UA's own clear glyph duplicates the styled button beside it. */
.tool-search__input::-webkit-search-cancel-button { display: none; }

.tool-search__clear {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--grey-400);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.tool-search__clear svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}
.tool-search__clear:hover { background: #f4f1f8; color: var(--purple); }

/* -- filter chip ---------------------------------------------------------- */
/* The active chip is a filled gold pill with the card's sharp bottom-start
   corner — the same "one corner breaks the radius" move the whole system
   uses, shrunk to control size. Purple text on gold, not white: white on
   #baa660 measures 2.4:1, the brand purple 4.6:1. */
.chip {
  padding: 9px 20px;
  border: 1.4px solid #e6e1ee;
  border-radius: 999px 999px 999px 6px;
  background: #fff;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--purple);
  white-space: nowrap;
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.chip:hover { border-color: var(--gold); transform: translateY(-2px); }
.chip.is-active {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--purple);
}
.chip:active { transform: translateY(0) scale(.97); }

/* -- grid ⇄ list switch --------------------------------------------------- */
.viewswitch {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1.4px solid #e6e1ee;
  border-radius: 12px;
  background: #fff;
}

.viewswitch__btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  border-radius: 8px;
  color: var(--grey-400);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.viewswitch__btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.viewswitch__btn:hover { color: var(--purple); background: #f5f2f9; }
.viewswitch__btn.is-active { background: var(--purple); color: #fff; }

/* -- the two labels the archive adds to a card ---------------------------- */
/* Both sit in the photo's top band, where the wash gradient is still at zero
   alpha, so they never fight the tint that builds up towards the panel.
   z-index clears .card__media::after, which paints last as a generated child. */
.card__tag,
.card__read {
  position: absolute;
  z-index: 1;
  top: 14px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.card__tag {
  inset-inline-start: 14px;
  background: rgba(255, 255, 255, .9);
  color: var(--purple);
}
.card__read {
  inset-inline-end: 14px;
  background: rgba(17, 7, 53, .42);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
}

/* Fallback tint alternation for the no-JS case. Once articles.js takes over
   it marks the grid `is-enhanced` and re-alternates the *visible* cards with
   .card--gold instead, so a filtered row never shows two golds in a row —
   scoping this to :not(.is-enhanced) is what keeps the two from fighting. */
.archive__grid:not(.is-enhanced) > .card:nth-child(even) {
  --tint: 187 167 96;
  --card-accent: var(--gold);
}

.archive__grid { row-gap: 34px; }

/* Empty state — a filter that returns nothing has to say so, otherwise the
   page just looks broken. */
.archive__empty {
  padding: 72px 24px;
  border: 1.4px dashed #e2dcec;
  border-radius: 14px 14px 32px 14px;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: var(--grey-600);
}

/* -- pager ---------------------------------------------------------------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 72px;
}

.pager__num,
.pager__step {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 12px;
  border: 1.4px solid #e6e1ee;
  border-radius: 12px 12px 12px 4px;
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  color: var(--purple);
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.pager__num:hover,
.pager__step:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

.pager__num.is-active {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--purple);
}
.pager__num.is-active:hover { transform: none; color: var(--purple); }

.pager__step svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pager__step.is-disabled {
  opacity: .38;
  pointer-events: none;
}

.pager__gap {
  min-width: 24px;
  text-align: center;
  color: var(--grey-400);
}

/* --------------------------------------------------------------------------
   4. List view
   The same .card markup, re-laid as a horizontal row: the media becomes a
   fixed-width column on the start edge and the panel takes the rest. Nothing
   in the component is replaced — only the four boxes that were absolutely
   positioned for the vertical card are given horizontal insets instead, so
   the tint, the wash, the notch and the line-clamps all still apply.

   Kept behind min-width so the 620px mobile layout never enters it: at phone
   widths a 300px media column would leave the text almost no measure, and the
   stacked card is already the right answer there.
   -------------------------------------------------------------------------- */
@media (min-width: 621px) {
  .archive__grid.is-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .is-list .card__link { height: 224px; }

  /* inset-inline-start is the right edge on this RTL page, so the photo keeps
     the reading-start position it has in the grid view. */
  .is-list .card__media {
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: 312px;
  }
  .is-list .card__media img { object-position: 50% 42%; }

  /* Wash turns with the layout: it now has to reach the panel sideways. */
  .is-list .card__media::after {
    background: linear-gradient(to left, rgb(var(--tint) / 0) 40%, rgb(var(--tint) / .96) 96%);
  }

  /* Panel fills the remaining width; the notch stays exactly where the base
     rule puts it — on the panel's top edge — so the drip reads identically in
     both views without a single override. */
  .is-list .card__panel {
    inset-inline: 328px 14px;
    top: 14px;
    bottom: 14px;
    height: auto;
    padding: 12px 26px 18px;
    border-radius: 10px 10px 29.6px 10px;
  }

  .is-list .card__meta    { font-size: 15.4px; }
  .is-list .card__title   { margin-top: 10px; font-size: 20px; line-height: 1.5; }
  .is-list .card__excerpt { margin-top: 12px; font-size: 13.6px; line-height: 1.75; }

  .is-list .card__read { display: none; }   /* the row has no room to spare */
}

/* --------------------------------------------------------------------------
   5. Responsive
   Same breakpoints as style.css — no new ones introduced.
   -------------------------------------------------------------------------- */
@media (max-width: 1500px) {
  .spotlight__slide { min-height: 452px; }
  .spotlight__title { font-size: 28px; }
  .spotlight__body { padding-block: 44px 42px; padding-inline: 46px 22px; }
}

@media (max-width: 1200px) {
  .spotlight__slide { grid-template-columns: minmax(0, 1fr) minmax(0, .94fr); min-height: 424px; }
  .spotlight__media { padding: 22px; }
  .spotlight__corner { width: 74px; height: 74px; }
  .spotlight__title { font-size: 26px; }
  .spotlight__excerpt { font-size: 15px; }
  .spotlight__controls { bottom: 34px; inset-inline-end: 36px; }

  /* style.css drops the 4th card here so the home page's 4-up row reflows to
     a clean 3-up. The archive is a real listing — every item has to survive
     the breakpoint — so that rule is undone for this grid only. */
  .archive__grid > .card:last-child { display: block; }

  /* Filters and controls stop sharing a line here; the filters keep the full
     width and the search/count/switch cluster drops beneath them. */
  .toolbar { flex-wrap: wrap; }
  .toolbar__filters { width: 100%; }
  .toolbar__end { margin-inline-start: auto; }

  .is-list .card__media { width: 250px; }
  .is-list .card__panel { inset-inline: 266px 14px; }
}

@media (max-width: 1024px) {
  /* Matches the home hero's pattern at this breakpoint (style.css ≤1024:
     170px / .55) so the pages read as one system. */
  .page-hero { padding-block: var(--hero-top) 72px; }
  .page-hero__pattern { width: 170px; opacity: .55; }

  /* Stacked: the photo goes back on top, where a lead image belongs, and the
     explicit two-column placement is undone. */
  .spotlight__slide { grid-template-columns: 1fr; min-height: 0; }
  .spotlight__media { grid-column: 1; grid-row: 1; min-height: 268px; padding: 20px 20px 0; }
  .spotlight__body  { grid-column: 1; grid-row: 2; padding: 32px 30px 34px; }
  .spotlight__corner { width: 64px; height: 64px; top: 8px; inset-inline-start: 8px; }
  .spotlight__title { font-size: 24px; max-width: none; }
  .spotlight__link { padding-top: 26px; }

  /* The controls can't stay at the card's bottom once the copy is underneath
     the photo — they would land on the excerpt. Moved to the photo's top
     corner, which is empty in this layout and keeps them on an image either
     way. */
  .spotlight__controls {
    bottom: auto;
    top: 32px;
    inset-inline-end: 32px;
  }

  .archive { padding-block: 76px 88px; }
  .pager { margin-top: 56px; }

  .is-list .card__link { height: 200px; }
  .is-list .card__media { width: 210px; }
  .is-list .card__panel { inset-inline: 224px 12px; padding: 10px 20px 16px; }
  .is-list .card__title { font-size: 17px; }

  .breadcrumb { font-size: 14px; }
  .tool-search { width: 236px; }

  /* Touch sizing starts here, not at the phone breakpoint: 1024 is where the
     nav becomes a burger, i.e. where this site is being driven by a finger
     rather than a cursor. Every control below was sized for a pointer and
     falls short of the 44px floor the design system sets. Only the box grows
     — the glyphs and type stay put, so nothing looks inflated. */
  .chip { padding-block: 11px; }
  .viewswitch { padding: 3px; }
  .viewswitch__btn { width: 44px; height: 44px; }
  .tool-search__clear { width: 38px; height: 38px; }
  .spotlight__arrow { width: 40px; height: 40px; }
}

@media (max-width: 620px) {
  /* Same pattern size as the home hero on mobile (style.css ≤620: 100px / .4). */
  .page-hero { padding-block: var(--hero-top) 52px; }
  .page-hero__pattern { width: 100px; opacity: .4; }

  .spotlight__card { border-radius: 14px 14px 32px 14px; }
  .spotlight__media { min-height: 196px; padding: 14px 14px 0; }
  .spotlight__corner { display: none; }        /* no room beside a 14px inset */
  .spotlight__body { padding: 26px 20px 26px; }
  .spotlight__top { flex-wrap: wrap; gap: 10px; }
  .spotlight__title { font-size: 20px; line-height: 1.5; padding-inline-start: 16px; }
  /* Justified text needs a wide measure to work. At ~300px the same setting
     opens rivers of white space between words, which in Persian — where the
     renderer stretches the gaps rather than the letters — is worse than a
     ragged edge. */
  .spotlight__excerpt {
    font-size: 14.5px;
    line-height: 1.75;
    padding-inline-start: 16px;
    text-align: start;
  }
  .spotlight__link { padding-inline-start: 16px; }
  .spotlight__controls { top: 20px; inset-inline-end: 20px; padding: 4px 6px; gap: 2px; }
  /* Gap and hit area move together — see the base .spotlight__dot::after rule.
     16px apart with an ±8px inset gives each dot a 25px-wide target whose
     edges just touch its neighbour's. */
  .spotlight__dots { gap: 16px; padding-inline: 6px; }
  .spotlight__dot::after { inset: -15px -8px; }
  .breadcrumb { font-size: 13.5px; }

  .archive { padding-block: 56px 68px; }

  /* The toolbar's rows stop fitting side by side well before the chips
     themselves do. Rather than let them wrap into a tall block that eats the
     viewport while stuck, the chip row scrolls sideways on its own — a
     standard filter-row affordance — and the search row sits under it. */
  /* Sticky is dropped on phones. Stacked, this bar runs ~150px tall; parked
     under a 96px header it would hold a third of a typical phone viewport
     permanently, leaving barely two card-heights of actual list. On a screen
     this size scrolling back up to the filters is cheaper than paying that
     rent on every screenful. */
  .toolbar-bar { position: static; margin-bottom: 24px; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 12px; padding-block: 12px; }
  /* These wrap onto as many rows as they need instead of scrolling sideways.
     A horizontal strip only works when the overflow is obviously scrollable;
     with five Persian labels the last one lands half-cut against the edge and
     just reads as broken, and options you can't see don't get used. Five
     filters is a small enough set to show all of them — two rows costs ~50px
     and removes the guesswork.
     `width: auto` releases the 100% set at 1200 so the row can size to its
     own content inside the stacked column. */
  .toolbar__filters {
    width: auto;
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Padding-block holds the 44px tap height; only the inline padding comes
     down. That trim is what buys the row: at 14px inline the five labels need
     three rows on a 390px phone, at 10px they settle into two. The tallest
     label sets the floor, so below ~375px it can still take a third row —
     acceptable, since the alternative is type too small to read. */
  .chip { padding: 11px 10px; font-size: 13px; }

  /* The list layout is gated behind min-width: 621px — at phone widths a
     300px media column leaves the text no measure, so the stacked card is
     the right answer and the two views render identically. A switch that
     visibly does nothing is worse than no switch, so it's withdrawn here
     rather than left to be pressed for no result. */
  .viewswitch { display: none; }

  .toolbar__end { margin-inline-start: 0; flex-wrap: wrap; gap: 10px 12px; }
  /* The field takes the row and pushes the count + switch onto the next one,
     which is the right priority order on a phone. */
  .tool-search { width: 100%; order: -1; }
  /* 16px is the threshold below which iOS Safari auto-zooms a focused field —
     the one size here that is not a visual choice. */
  .tool-search__input { font-size: 16px; padding-block: 10px; }
  .toolbar__count { margin-inline-end: auto; }

  .archive__grid { row-gap: 24px; }
  .archive__empty { padding: 48px 18px; font-size: 15px; }

  /* Held at 44px rather than shrunk to fit one line. Seven of them plus gaps
     overflow a narrow phone, but .pager already wraps — two rows of reachable
     buttons beats one row of targets too small to hit. */
  .pager { margin-top: 44px; gap: 6px; }
  .pager__num,
  .pager__step { min-width: 44px; height: 44px; padding-inline: 8px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   6. Filtered-out cards
   Last in the sheet on purpose. `[hidden]` is how articles.js takes a card
   out of the list, and the `display: block` restorations above sit at the
   same specificity — so this has to come after them, or a filtered card
   would reappear at exactly the widths those rules cover.
   -------------------------------------------------------------------------- */
.archive__grid > .card[hidden] { display: none; }