/*
Theme Name: AZDA TV
Theme URI: https://azda.tv
Author: Digiteria
Description: Custom classic WordPress theme for AZDA.TV — Tajik-primary independent news platform (RU + EN subdomains). Direction 3 "The Signal". Built from _project/design-spec.md v2.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: azda
License: Proprietary
*/

/* =========================================================================
   1. TOKENS — design-spec.md §1. Do not invent colours, fonts, spacing
      outside this block.
   ========================================================================= */

:root {
  /* 1.1 Colour */
  --blue-bright: #00B5FF;   /* logo/hero/large accents only — never text */
  --blue: #0A6CA8;          /* links, rules, kickers, active nav */
  --blue-strong: #084C74;   /* hover, nav/footer bg */
  --blue-tint: #E9F3FC;
  --focus: #0090D4;
  --link-visited: #6D4AA6;
  --orange-bright: #FE9803; /* play/video affordances only — never text */
  --orange-tint: #FFF4E2;
  --signal: #C2300C;        /* Breaking band only */
  --ink: #14181C;
  --ink-muted: #55606B;
  --paper: #F5F7FA;
  --surface: #FFFFFF;
  --surface-2: #EDF1F6;
  --hairline: #E3E7EC;
  --error: #9E2116;

  /* Tracker status chips (§11) */
  --chip-detained-fg: #9E2116;   --chip-detained-bg: #F7E4E1;
  --chip-trial-fg: #8A5A00;      --chip-trial-bg: #F7EDD6;
  --chip-sentenced-fg: #6B2E86;  --chip-sentenced-bg: #EFE1F5;
  --chip-released-fg: #0B5D3B;   --chip-released-bg: #DDF0E5;
  --chip-died-fg: #3A3A3A;       --chip-died-bg: #E0E0E0;
  --chip-unknown-fg: #55606B;    --chip-unknown-bg: #EAE6DF;

  /* 1.2 Typography */
  --ff: "Golos Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --fs-caption: 12px;
  --fs-meta: 13px;
  --fs-small: 15px;
  --fs-body: clamp(17px, 17px + 0.2vw, 18px);
  --fs-lead: clamp(19px, 17.6px + 0.4vw, 22px);
  --fs-h3: clamp(20px, 18.4px + 0.5vw, 24px);
  --fs-h2: clamp(24px, 20.8px + 1vw, 32px);
  --fs-h1: clamp(30px, 24px + 2vw, 46px);
  --fs-display: clamp(32px, 25px + 2.4vw, 52px);

  /* 1.3 Spacing (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* 1.4 Radii / borders / shadows */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
  --shadow-popover: 0 8px 24px rgba(0,0,0,.12);

  /* 1.5 Breakpoints (used as documentation; media queries hardcode px) */
  --page-max: 1200px;
  --gutter: 16px;
  --measure: 680px;
}

@media (min-width: 1025px) {
  :root { --gutter: 24px; }
}

/* =========================================================================
   2. RESET + BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
img, picture, video { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-strong); text-decoration: underline; }
a:visited { color: var(--link-visited); }
button { font-family: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue-strong);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  z-index: 1000;
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* =========================================================================
   3. LAYOUT SYSTEM — §2
   ========================================================================= */

.container {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); margin-inline: auto; }

/* =========================================================================
   4. FONT FACES — §1.2 / §7.4. Files must be supplied to assets/fonts/
      before ship (OQ-2 CI glyph gate — see inc/font-glyph-check.php).
   ========================================================================= */

@font-face {
  font-family: "Golos Text";
  src: url("assets/fonts/GolosText-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Golos Text";
  src: url("assets/fonts/GolosText-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Golos Text";
  src: url("assets/fonts/GolosText-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Golos Text";
  src: url("assets/fonts/GolosText-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* =========================================================================
   5. MASTHEAD + NAV — §3.1–3.3
   ========================================================================= */

.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 100;
  /* Mobile auto-hide (Sanjar, 2026-09-22): azda.js §9 toggles this class
     on scroll direction; neutralized on desktop below (§4.1 keeps the
     header always visible there — request was mobile-only). */
  transition: transform 200ms ease;
}
.masthead--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .masthead { transition: none; } }
.masthead__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  gap: var(--sp-3);
}
.masthead__logo img, .masthead__logo svg { height: 28px; width: auto; }
.masthead__tools { display: flex; align-items: center; gap: var(--sp-2); }

/* §4.1 Desktop masthead/nav: visible inline search pill replaces the
   icon-triggered overlay, ☰ is dropped entirely — icon buttons hidden,
   search-inline shown, only at ≥1025px (rule lives with the ≥1025px
   .nav override below, not duplicated here). */
.search-inline {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  width: 228px;
  height: 44px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  color: var(--ink-muted);
}
.search-inline input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  color: var(--ink);
}
.search-inline input::placeholder { color: var(--ink-muted); }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  border-radius: var(--r-md);
  color: var(--ink);
  cursor: pointer;
}
.iconbtn:hover { background: var(--surface-2); }
.iconbtn svg { width: 20px; height: 20px; fill: currentColor; }

/* Language switch — §3.2, zero-JS via <details> */
.lang { position: relative; }
.lang__btn {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-meta);
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
}
.lang__btn::-webkit-details-marker { display: none; }
.lang__btn:hover { background: var(--surface-2); }
.lang__caret { transition: transform 150ms ease; }
.lang[open] .lang__caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .lang__caret { transition: none; }
}
.lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 160px;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popover);
  list-style: none;
  margin: 0;
  padding: var(--sp-2) 0;
  z-index: 200;
}
.lang__menu a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  color: var(--ink);
}
.lang__menu a:hover { background: var(--surface-2); text-decoration: none; }
.lang__menu a[aria-current="true"] { font-weight: 700; }
.lang__check { color: var(--blue); }

/* Primary nav — §3.3 */
.nav {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-top: 1px solid var(--hairline);
}
.nav::-webkit-scrollbar { display: none; }
.nav__list {
  display: flex;
  list-style: none;
  /* Match .container's box model (§2) so nav items align with the
     masthead logo/tools row and the homepage content grid below it,
     instead of hugging the viewport's left edge on wide screens —
     Sanjar caught this live, 2026-09-11. */
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  gap: 18px;
  width: max-content;
}
.nav__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.nav__list a[aria-current="page"] {
  color: var(--blue);
  border-bottom-color: var(--blue);
}
/* M5: a label that fails to resolve to a real destination (see
   azda_render_nav_item(), inc/template-tags.php) renders as this span,
   not a dead "#" link — it had zero rules before, sitting unstyled/
   misaligned in the live nav. Same box as .nav__list a, muted instead of
   interactive. review.md 2026-09-11. */
.nav__list .nav__item--unresolved {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  cursor: default;
}

/* --- Mobile ☰ drawer, redesigned 2026-09-22 (Sanjar): a full-screen
   takeover — covers the header, the horizontal strip and the page behind
   it, not a small dropdown. "Both options" still holds: the horizontal
   strip is untouched underneath and reappears exactly as before once
   this closes. `[hidden]` keeps it inert until azda.js §9 opens it;
   neutralized entirely at desktop (§4.1 override below), which has no ☰
   to open it from. */
.nav-drawer[hidden] { display: none; }
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 300; /* above the search popup (200) and masthead (100) — a true takeover */
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow-y: auto;
}
.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding-inline: var(--gutter);
  flex: none;
}
.nav-drawer__logo svg, .nav-drawer__logo img { height: 26px; width: auto; }
.nav-drawer__close { color: var(--ink); }
.nav-drawer__nav { flex: none; }
.nav-drawer .nav__list {
  flex-direction: column;
  width: auto;
  max-width: none;
  margin: 0;
  gap: var(--sp-1); /* dividers removed 2026-09-22 — a little gap instead keeps rows from running together */
  padding-inline: var(--gutter);
}
.nav-drawer .nav__list a,
.nav-drawer .nav__list .nav__item--unresolved {
  width: 100%;
  min-height: 56px;
  border-radius: var(--r-md);
  font-size: var(--fs-lead); /* bigger, more deliberate type for a full-screen menu vs. the compact horizontal strip */
  font-weight: 700;
}
.nav-drawer .nav__list a[aria-current="page"] {
  background: var(--surface-2);
  /* .nav__list's shared base rule (used by the horizontal strip too) puts
     a 3px underline right under the text baseline — reads as cramped on
     this bigger full-screen row (Sanjar, 2026-09-22). A left accent bar
     with its own breathing room reads cleaner here instead. */
  border-bottom-color: transparent;
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding-left: var(--sp-3);
}
.nav-drawer__follow {
  margin-top: auto;
  flex: none;
  padding: var(--sp-5) var(--gutter) var(--sp-6);
  text-align: center;
}
.nav-drawer__follow .label { display: block; margin-bottom: var(--sp-3); }
.nav-drawer__social { justify-content: center; }
.nav-drawer__social .social-links__item { color: var(--ink); }
.nav-drawer__social .social-links__item:hover { background: var(--surface-2); }
body.nav-drawer-open { overflow: hidden; }

/* --- Modern ☰ → ✕ morph, pure CSS, no extra SVG asset. Swappable for a
   supplied mark later without touching the toggle logic. --- */
.menu-toggle__bars { position: relative; display: inline-block; width: 20px; height: 14px; }
.menu-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 200ms ease, opacity 150ms ease, top 200ms ease;
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 6px; }
.menu-toggle__bars span:nth-child(3) { top: 12px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .menu-toggle__bars span { transition: none; } }
@media (min-width: 1025px) {
  .nav { overflow-x: visible; }
  .nav__list { gap: 32px; width: auto; }

  /* §4.1 Desktop: icon-triggered search + ☰ replaced by the inline pill;
     confirmed against the approved file (6088:2) via get_metadata — its
     masthead `tools` frame has only search-inline + lang, no ☰. */
  .search-toggle,
  .menu-toggle { display: none; }
  .search-inline { display: flex; }
  .masthead--hidden { transform: none; } /* auto-hide is mobile-only, §5 above */
  .nav-drawer { display: none !important; } /* ☰ drawer is mobile-only; no ☰ here to open it from */

  /* §3.7 — the approved desktop hero (6090:6) has its duotone layer
     explicitly hidden (get_metadata: "hero media (duotone)" ...
     hidden="true"); mobile still carries it (no evidence there to remove
     it — its hero has no real photo layer in the file to check against).
     review.md 2026-09-11. */
  .card-lead__media::after { content: none; }
}

/* =========================================================================
   6. BREAKING BAND — §8
   ========================================================================= */

.breaking {
  background: var(--signal);
  color: #fff;
}
.breaking__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding-block: var(--sp-2);
}
.breaking__label {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
}
.breaking__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .breaking__dot { animation: none; }
}
.breaking__link {
  color: #fff;
  font-weight: 600;
  flex: 1;
  min-width: 0;
}
.breaking__link:hover { color: #fff; text-decoration: underline; }
.breaking__time { font-size: var(--fs-meta); white-space: nowrap; }
.breaking__count {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: #fff;
}
.breaking__dismiss {
  min-width: 44px; min-height: 44px;
  background: none; border: none; color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.breaking[hidden] { display: none; }

/* =========================================================================
   7. SECTION HEAD, LABELS, TIME — §3.5–3.6
   ========================================================================= */

.sec {
  margin-top: var(--sp-7);
  padding-inline: var(--gutter);
  max-width: var(--page-max);
  margin-inline: auto;
}
.sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  border-top: 3px solid var(--blue);
  padding-top: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.sec__title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; } /* M4 */
.sec__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--blue);
  white-space: nowrap;
}
.sec__more svg { width: 12px; height: 12px; fill: currentColor; }
/* m2: a section-more link that resolves to nothing (see content-tracker.php,
   content-video-strip.php) renders as this span instead of falling back to
   a dead "#" href — same rule the nav already follows. review.md 2026-09-11. */
.sec__more[aria-disabled="true"] { color: var(--ink-muted); cursor: default; }

.label {
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue);
}
.dot-sep::before { content: " · "; }
.time { font-size: var(--fs-caption); color: var(--ink-muted); }

/* =========================================================================
   8. CARDS — §3.7
   ========================================================================= */

.card-lead { display: block; }
.card-lead__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card-lead__media picture,
.card-lead__media img {
  display: block;
  width: 100%; height: 100%; object-fit: cover;
}
.card-lead__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--blue-bright), var(--ink));
  mix-blend-mode: multiply;
  opacity: .6;
}
/* m4: --surface-2 placeholder instead of a permanent flat --ink box when
   the hero post has no featured image. review.md 2026-09-11. */
.card-lead__media-placeholder { display: block; width: 100%; height: 100%; background: var(--surface-2); }
.card-lead__body { padding-top: var(--sp-3); }
.card-lead__headline {
  display: block;
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--ink);
  margin-top: var(--sp-2);
}
.card-lead__headline:hover { color: var(--blue-strong); text-decoration: none; }
.card-lead__dek { color: var(--ink-muted); margin-top: var(--sp-2); }
.card-lead__meta { margin-top: var(--sp-2); }

.essentials {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  /* Every other homepage module gets its gutter from .sec — this one
     rendered as a bare div with none, so it sat flush to the viewport
     edge on mobile while the hero/latest either side of it didn't.
     Sanjar, 2026-09-22. Desktop cancels this back out below, same as
     .sec/.ad already do inside .home-grid. */
  padding-inline: var(--gutter);
  max-width: var(--page-max);
  margin-inline: auto;
}
.card-essential {
  display: block;
  border-top: 1px solid var(--hairline);
  padding-top: var(--sp-3);
}
.card-essential__headline {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2; /* M4 */
  color: var(--ink);
  margin-top: var(--sp-2);
}
.card-essential__headline:hover { color: var(--blue); text-decoration: none; }
@media (min-width: 601px) {
  .essentials { grid-template-columns: 1fr 1fr; }
}

.feed { list-style: none; margin: 0; padding: 0; }
.feed li {
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--sp-3);
}
.feed li:first-child { border-top: 1px solid var(--hairline); }
.feed__headline {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}
.feed__headline:hover { color: var(--blue); text-decoration: none; }
.feed__meta { margin-top: var(--sp-1); }

.strip { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.strip__item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.strip__thumb {
  width: 88px; height: 88px; flex: none;
  background: var(--surface-2);
  border-radius: var(--r-md);
  object-fit: cover;
}
.strip__headline {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--sp-1);
}
.strip__headline:hover { color: var(--blue); text-decoration: none; }
@media (min-width: 601px) {
  .strip { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   9. INVESTIGATIONS DOSSIER — §3.9
   ========================================================================= */

.dossier__media {
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.dossier__media img { width: 100%; height: 100%; object-fit: cover; }
/* M6: --surface-2 placeholder instead of a permanent flat --ink box when
   a dossier post has no image (backstop — hero_image/hero_type are
   already ACF `required=>1`). review.md 2026-09-11. */
.dossier__media-placeholder { display: block; width: 100%; height: 100%; background: var(--surface-2); }
.dossier {
  display: block;
  border-left: 4px solid var(--blue-strong);
  padding-left: var(--sp-4);
}
.dossier__kicker { color: var(--blue); font-weight: 700; }
.dossier__title {
  display: block;
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2; /* M4 */
  color: var(--ink);
  margin-top: var(--sp-2);
}
.dossier__title:hover { color: var(--blue-strong); text-decoration: none; }
.dossier__dek { color: var(--ink-muted); margin-top: var(--sp-2); }
.dossier__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.chip-doc {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--fs-meta);
  font-weight: 600;
}
.dossier__byline { margin-top: var(--sp-3); }

/* =========================================================================
   10. TRACKER TEASER + STATUS CHIPS — §3.10, §11
   ========================================================================= */

.tracker-teaser__count {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.15; /* M4 */
}
.tracker-teaser__count-label {
  color: var(--ink-muted);
  margin-top: var(--sp-1);
}
.tracker-teaser__rows { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.tracker-teaser__row {
  border-top: 1px solid var(--hairline);
  padding-block: var(--sp-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.tracker-teaser__name { color: var(--blue); font-weight: 600; }
.tracker-teaser__data { color: var(--ink-muted); font-size: var(--fs-meta); flex-basis: 100%; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-meta);
  font-weight: 600;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--detained  { color: var(--chip-detained-fg);  background: var(--chip-detained-bg); }
.chip--trial     { color: var(--chip-trial-fg);     background: var(--chip-trial-bg); }
.chip--sentenced { color: var(--chip-sentenced-fg); background: var(--chip-sentenced-bg); }
.chip--released  { color: var(--chip-released-fg);  background: var(--chip-released-bg); }
.chip--died      { color: var(--chip-died-fg);      background: var(--chip-died-bg); }
.chip--unknown   { color: var(--chip-unknown-fg);   background: var(--chip-unknown-bg); }

/* =========================================================================
   11. VIDEO STRIP — §3.11
   ========================================================================= */

.progstrip {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-2);
  list-style: none;
  margin: 0;
}
.prog { flex: 0 0 78%; scroll-snap-align: start; }
.prog__media {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: var(--r-md);
  overflow: hidden;
}
.prog__media img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.prog__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.prog__play svg {
  width: 44px; height: 44px;
  fill: var(--orange-bright);
}
.prog__show { color: var(--blue); text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--sp-2); display: block; }
.prog__title { font-size: var(--fs-small); font-weight: 600; color: var(--ink); margin-top: var(--sp-1); display: block; }
.prog__title:hover { color: var(--blue); text-decoration: none; }
.prog__duration { margin-top: var(--sp-1); }
@media (min-width: 601px) { .prog { flex-basis: 44%; } }
@media (min-width: 1025px) { .prog { flex-basis: 30%; } }

/* =========================================================================
   12. AD SLOT — §12
   ========================================================================= */

.ad {
  margin-top: var(--sp-7);
  padding-inline: var(--gutter);
  max-width: var(--page-max);
  margin-inline: auto;
}
.ad--mrec {
  min-height: 280px;
  background: var(--surface-2);
  border: 1px dashed var(--hairline);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}
.ad__label {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* =========================================================================
   13. BUTTONS — §3.13
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  font-size: var(--fs-meta);
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-strong); color: #fff; text-decoration: none; }
.btn--ghost { background: none; border-color: var(--blue); color: var(--blue); }
.btn--ghost:hover { background: var(--blue-strong); border-color: var(--blue-strong); color: #fff; text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* =========================================================================
   14. FOOTER — §3.14
   ========================================================================= */

.site-footer {
  margin-top: var(--sp-8);
  border-top: 3px solid var(--blue);
  background: var(--blue-strong);
  color: #fff;
}
.site-footer a { color: #fff; }
.site-footer__grid {
  padding-block: var(--sp-6);
  display: grid;
  gap: var(--sp-6);
}
.site-footer__tagline { margin-top: var(--sp-2); opacity: .9; }
/* Shared base — footer (dark bg) and the ☰ drawer's follow row (light
   bg) both use this, each overriding colour only. */
.social-links { display: flex; gap: var(--sp-2); }
.footer__social { margin-top: var(--sp-3); }
.footer__social .social-links__item { color: #fff; }
.footer__social .social-links__item:hover { background: rgba(255,255,255,.15); }
.site-footer__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer__mirror {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-meta);
  opacity: .9;
}
@media (min-width: 1025px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* =========================================================================
   16. DESKTOP HOMEPAGE GRID + RAIL — §4.1 Desktop
   ========================================================================= */

/*
   Desktop uses named grid-areas rather than a wrapper div per column, so
   mobile keeps its exact spec-mandated linear source order (§4.1) with
   zero DOM duplication — mobile never sees .home-grid as a grid at all,
   it's plain block flow.

   FIXED 2026-09-11 (Sanjar caught it live): Latest feed / Editor's picks /
   Ad slot-home-2 used to be three INDEPENDENTLY `position:sticky` items,
   each in its own row-span, meant to hand off to each other as the reader
   scrolled. In practice that produced real bugs — competing stacking
   contexts, an item not releasing on scroll, z-index fights between the
   three. Latest feed + Editor's picks are now one physical wrapper
   (`.home-area--railtop`, built in front-page.php) that sticks together
   as a single unit; Ad slot-home-2 is a plain static block below it, not
   sticky at all — only one sticky element in the rail now, so there is
   nothing left for it to conflict with. rail-picks nested inside the
   wrapper is still `display:none` on mobile, so this changes nothing
   about mobile's layout. See decisions.md 2026-09-11.

   ad-1 (slot-home-1) is mobile-only, per review.md 2026-09-11: the
   approved desktop frame (6088:2) has exactly one ad slot (home-2, in the
   rail) — no home-1 anywhere in that file, confirmed via get_metadata, so
   it's hidden at desktop rather than placed in the main column. It still
   renders in the DOM (mobile needs it) — display:none only, not removed
   server-side, since layout can't depend on JS/UA sniffing.
*/
.rail-picks { display: none; }

@media (min-width: 1025px) {
  .home-grid {
    display: grid;
    grid-template-columns: 784px 392px;
    gap: 24px;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    align-items: start;
    grid-template-areas:
      "hero    railtop"
      "ess     railtop"
      "dossier railtop"
      "tracker ad2"
      "video   ad2"
      "sampler ad2";
  }
  .home-grid .sec,
  .home-grid .ad,
  .home-grid .essentials {
    padding-inline: 0;
    max-width: none;
  }
  .home-area--hero    { grid-area: hero; }
  .home-area--ess     { grid-area: ess; }
  .home-area--ad1     { display: none; }
  .home-area--dossier { grid-area: dossier; }
  .home-area--tracker { grid-area: tracker; }
  .home-area--video   { grid-area: video; }
  .home-area--sampler { grid-area: sampler; }
  .home-area--ad2     { grid-area: ad2; }

  .home-area--railtop {
    grid-area: railtop;
    position: sticky;
    top: 116px;
    align-self: start;
    z-index: 1;
  }

  .rail-picks { display: block; }
}

.rail-picks__list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.rail-picks__item {
  display: flex;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.rail-picks__item:first-child { border-top: none; padding-top: 0; }
.rail-picks__thumb { width: 64px; height: 64px; flex: none; background: var(--surface-2); border-radius: var(--r-md); object-fit: cover; }
.rail-picks__kicker {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.66px; color: var(--blue);
}
.rail-picks__headline { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink); margin-top: 4px; }
.rail-picks__headline:hover { color: var(--blue); text-decoration: none; }

/* =========================================================================
   17. ARTICLE / SINGLE — §4.2
   ========================================================================= */

.article {
  padding-inline: var(--gutter);
  padding-top: var(--sp-6);
}
.article__head { padding-top: var(--sp-6); }
.article__title {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
  margin-top: var(--sp-2);
}
.article__lead {
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--ink-muted);
  margin: var(--sp-3) 0 0;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding-top: var(--sp-4);
  font-size: var(--fs-meta);
}
.byline__name { color: var(--blue); font-weight: 600; }
.byline__role, .byline__date { color: var(--ink-muted); }

.article__hero {
  margin: var(--sp-5) 0 0;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.article__hero img { width: 100%; height: 100%; object-fit: cover; }
.article__hero--placeholder { background: var(--surface-2); }
.article__hero + figcaption,
figure.article__hero figcaption {
  font-size: var(--fs-meta);
  color: var(--ink-muted);
  margin-top: var(--sp-2);
}

.article__body {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
}
.article__body--1 { margin-top: var(--sp-6); }
.article__body--2 { margin-top: 0; }
.article__body > * + * { margin-top: var(--sp-4); }
.article__body h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.005em;
  font-weight: 700;
  border-top: 3px solid var(--blue);
  padding-top: var(--sp-3);
  margin-top: var(--sp-6) !important;
}
.article__body blockquote {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  border-left: 3px solid var(--blue);
  /* fs-h3 (20->24 clamp), not fs-h2 (24->32) - the mobile mock's "20px"
     numerically matches fs-h3's own minimum, and scaling to fs-h2's max
     would oversize the quote against 18px body copy at desktop. §4.2. */
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink);
}
.article__body img { border-radius: var(--r-md); }

/* --- Share popover (§3.18, redesigned 2026-09-22 — Sanjar, Al Jazeera
   reference): single icon trigger, icon-only popup. Zero-JS via
   <details>; azda.js §1 closes it on outside-click/Esc (generalized from
   the language switch's identical pattern). --- */
.share { position: relative; display: inline-block; padding-top: var(--sp-6); }
.share__trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  color: var(--ink);
  cursor: pointer;
}
.share__trigger::-webkit-details-marker { display: none; }
.share__trigger:hover { background: var(--surface-2); }
.share__menu {
  position: absolute;
  bottom: calc(100% + var(--sp-2));
  left: 0;
  z-index: 50;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--surface);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-popover);
  white-space: nowrap;
}
.share__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}
.share__icon svg { width: 18px; height: 18px; fill: #fff; stroke: #fff; }
.share__icon:hover { opacity: .85; }
/* Real platform colours, for recognizability at icon-only size — the
   only place this codebase uses a brand's own colour instead of AZDA's
   tokens, since these circles ARE each platform's mark. */
.share__icon--facebook { background: #1877F2; }
.share__icon--x { background: var(--ink); } /* X's own mark is black */
.share__icon--telegram { background: #229ED9; }
.share__icon--whatsapp { background: #25D366; }
.share__icon--print { background: var(--ink-muted); }

.article__related { margin-top: var(--sp-7); }

/* Article reuses the shared .ad/.ad--mrec partial (template-parts/ad-slot.php),
   but that partial's outer .ad wrapper is tuned for the homepage's 1200px
   grid — inside the Article's narrower 680px measure it would re-add
   gutter padding and try to expand back to 1200px. Neutralize the
   wrapper here and apply §4.2's exact per-slot isolation spacing
   (inline: 32 top+bottom; footer: 48 top / 32 bottom) directly. Scoped to
   .article-wrap, not .article, since slot-article-footer is a sibling of
   .article at desktop (§4.2 Desktop breakout, §22) but still needs the
   same baseline neutralizing. */
.article-wrap .ad { max-width: none; padding-inline: 0; margin-inline: 0; margin-top: 0; }
.article-wrap [data-ad-slot="slot-article-inline"] { margin: var(--sp-6) 0; }
.article-wrap [data-ad-slot="slot-article-footer"] { margin: var(--sp-7) 0 var(--sp-6); }

/* =========================================================================
   18. INVESTIGATIONS + TRACKER — §4.3–§4.6
   ========================================================================= */

/* --- Section masthead, shared by Investigations landing + Tracker directory --- */
.archive-head {
  border-top: 3px solid var(--blue-strong);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}
.archive-head--tracker { border-top-color: var(--blue); } /* §4.5: plainer rule than Investigations' --blue-strong, deliberate */
.archive-head__title {
  display: block;
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
  margin-top: var(--sp-2);
}
.archive-head__intro { color: var(--ink-muted); font-size: var(--fs-lead); line-height: 1.4; margin-top: var(--sp-3); }
.archive-head__counts { color: var(--blue); font-size: var(--fs-meta); font-weight: 600; margin-top: var(--sp-3); }

/* --- Investigations dossier list (§4.3) --- */
.dossier-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.dossier-list__item {
  display: flex;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.dossier-list__item:first-child { border-top: none; padding-top: 0; }
.dossier-list__thumb { width: 120px; height: 90px; flex: none; border-radius: var(--r-md); object-fit: cover; background: var(--surface-2); }
.dossier-list__content { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dossier-list__title { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.dossier-list__title:hover { color: var(--blue); text-decoration: none; }

/* --- Dossier header, single-investigation.php (§4.4) --- */
.dossier-head {
  border-left: 3px solid var(--blue-strong);
  padding-left: var(--sp-4);
  padding-top: var(--sp-6);
}

/* --- Evidence rail, Option A (§4.4) --- */
.evidence-rail {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.evidence-rail h2 { font-size: 17px; font-weight: 700; color: var(--ink); }
.evidence-rail .dossier__chips { margin-top: var(--sp-3); }
.evidence-rail .chip { margin-top: var(--sp-3); }
.article__hero--evidentiary::after { content: none; } /* no duotone — evidentiary images render plain, §4.4 */

/* --- Timeline, shared by Investigation article + Tracker entry (§4.4/§4.6) --- */
.timeline-section { margin-top: var(--sp-7); }
.timeline { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.timeline__item { display: flex; gap: var(--sp-3); padding-bottom: var(--sp-4); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__rail {
  flex: none;
  width: 16px;
  position: relative;
}
.timeline__rail::before {
  content: "";
  position: absolute;
  top: 4px; left: 4px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--blue-strong);
}
.timeline__rail::after {
  content: "";
  position: absolute;
  top: 13px; bottom: -16px; left: 8px;
  width: 2px;
  background: var(--hairline);
}
.timeline__item:last-child .timeline__rail::after { content: none; }
.timeline__content { display: flex; flex-direction: column; gap: 4px; }
.timeline__date { font-size: 13px; font-weight: 600; color: var(--ink); }
.timeline__desc { font-size: var(--fs-small); line-height: 1.4; color: var(--ink-muted); margin: 0; }

/* --- Conclusion + Sources, Investigation article (§4.4) --- */
.article__conclusion { margin-top: var(--sp-6); }
.article__conclusion p { color: var(--ink); font-size: var(--fs-body); line-height: 1.6; margin-top: var(--sp-2); }
.sources-section { margin-top: var(--sp-7); }
.sources-list { margin: var(--sp-3) 0 0; padding-left: var(--sp-5); }
.sources-list li { padding-block: var(--sp-3); border-top: 1px solid var(--hairline); font-size: var(--fs-small); color: var(--ink); }
.sources-list li:first-child { border-top: none; }
.sources-list--prose { padding-left: 0; } /* prisoner's `sources` field is freeform WYSIWYG, not a repeater */
.sources-list--prose ol { padding-left: var(--sp-5); }

/* --- Tracker filter (§4.5) --- */
.tracker-filter-wrap { margin-top: var(--sp-5); padding-inline: var(--gutter); max-width: var(--page-max); margin-inline: auto; }
.tracker-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tracker-filter .btn { padding-inline: var(--sp-4); }

/* --- Tracker directory list (§4.5) --- */
.tracker-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.tracker-list__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.tracker-list__row:first-child { border-top: none; padding-top: 0; }
.tracker-list__photo { width: 56px; height: 56px; flex: none; border-radius: var(--r-md); background: var(--surface-2); } /* flat, no icon/glyph — §11 safety note */
.tracker-list__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tracker-list__name { font-size: var(--fs-small); font-weight: 600; color: var(--blue); }
.tracker-list__data { font-size: var(--fs-meta); color: var(--ink-muted); }
.tracker-empty {
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-muted);
  margin-top: var(--sp-3);
}

/* --- Tracker entry (§4.6) --- */
/* Reusable convention: no separate left-arrow asset — rotate the same
   icon-arrow-right symbol 180deg. Apply this class wherever a "back"/
   left-pointing arrow is needed, sitewide, per Sanjar 2026-09-11. */
.icon-arrow-left { transform: rotate(180deg); }

.prisoner-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-top: var(--sp-6);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--blue);
}
.prisoner-back svg { width: 12px; height: 12px; fill: currentColor; }
.prisoner-identity { display: flex; gap: var(--sp-4); align-items: flex-start; margin-top: var(--sp-5); }
.prisoner-identity__photo { width: 88px; height: 88px; flex: none; border-radius: var(--r-lg); background: var(--surface-2); } /* flat, no icon/glyph — §11 safety note */
.prisoner-identity__content { display: flex; flex-direction: column; gap: var(--sp-2); }
.prisoner-identity__name { font-size: 30px; line-height: 1.15; font-weight: 800; color: var(--ink); }

.dl-facts {
  margin: var(--sp-5) 0 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-4) 4px;
}
.dl-facts__row { padding-block: var(--sp-3); border-top: 1px solid var(--hairline); }
.dl-facts__row:first-child { border-top: none; padding-top: 0; }
.dl-facts__row dt { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--blue); margin: 0; }
.dl-facts__row dd { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; color: var(--ink); margin: 4px 0 0; }

.prisoner-narrative {
  margin-top: var(--sp-6);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  border-left: 3px solid var(--blue);
}
.prisoner-narrative p { font-size: var(--fs-body); line-height: 1.6; color: var(--ink); margin-top: var(--sp-2); }

.correction-note { margin-top: var(--sp-5); font-size: var(--fs-meta); color: var(--ink-muted); }
.correction-note a { color: var(--blue); font-weight: 600; }

.article--prisoner .share { padding-top: var(--sp-6); }

/* =========================================================================
   19. VIDEO HUB — §4.7
   ========================================================================= */

.video-featured .label { display: block; margin-bottom: var(--sp-2); }
.video-featured__media { border-radius: var(--r-lg); } /* one radius bump vs. .prog__media's --r-md, per §4.7 */
.video-featured__play svg { width: 56px; height: 56px; }
.video-featured__title {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin-top: var(--sp-3);
}
.video-featured__title:hover { color: var(--blue); text-decoration: none; }
.video-featured__meta { display: block; margin-top: var(--sp-1); }

.video-programme__title-group { display: flex; align-items: center; gap: var(--sp-2); }
.video-programme__icon { color: var(--blue); flex: none; } /* stroke=currentColor in the sprite symbol */

/* =========================================================================
   20. CATEGORY ARCHIVE + SEARCH — §4.8–4.9
   ========================================================================= */

/* --- Ҳуқуқи Инсон companion link, §4.8 --- */
.archive-head__subsection {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  margin-top: var(--sp-3);
  padding: 0 var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--blue);
}
.archive-head__subsection svg { width: 12px; height: 12px; fill: currentColor; }
.archive-head__subsection:hover { text-decoration: none; background: var(--surface-2); }

/* --- .feed thumb+content row anatomy (§4.8) — reuses the Investigations
   dossier-list's thumb dimensions/tokens verbatim (§3.9/§4.3), applied to
   the site's plain .feed component instead of a second list component. --- */
.feed--thumb li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.feed__thumb {
  width: 120px;
  height: 90px;
  flex: none;
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--surface-2);
}
.feed__thumb--placeholder { display: block; } /* explicit, unlike the pre-existing .dossier-list__thumb--placeholder which relies solely on flex blockification */
.feed__content { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feed--thumb .feed__headline { margin-top: 0; }
/* Ad row sits inside the .feed list itself (§4.8) — neutralize the <li>'s
   own border/padding so the ad-slot partial supplies its own spacing,
   same "neutralize the shared partial's own box model" approach already
   used for the Article page's narrower measure (§17, .article .ad). */
.feed__ad-row { border: none !important; padding: 0 !important; }
.feed__ad-row .ad { margin-top: 0; }

/* --- Pagination (§4.8/§4.9) — styles core's own the_posts_pagination()
   markup so a real ?paged=N link list works with JS off (§9), rather than
   hand-rolling a query-var scheme. --- */
.pagination { margin-top: var(--sp-6); }
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--blue);
  font-size: var(--fs-meta);
  font-weight: 600;
}
.pagination .page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff; }
.pagination .page-numbers.dots { border: none; background: none; min-width: auto; color: var(--ink-muted); }
.pagination .page-numbers:hover { text-decoration: none; background: var(--surface-2); }
.pagination .page-numbers.current:hover { background: var(--blue-strong); }

/* --- Search form (§3.16/§4.9), also the visible on-page form searchform.php
   renders wherever get_search_form() is called. --- */
.search-form { display: flex; align-items: center; gap: var(--sp-2); }
.search-form__input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font: inherit;
  color: var(--ink);
  background: var(--surface);
}
.search-form__input::placeholder { color: var(--ink-muted); }

/* §4.9: form → H1 → meta, 16px gap between all three children (spec's own
   DOM order for this page, unlike every other .archive-head instance). */
.search-head { display: flex; flex-direction: column; gap: var(--sp-4); }
.search-head .archive-head__title { margin-top: 0; }
.search-head__meta { color: var(--ink-muted); font-size: var(--fs-small); margin: 0; }

/* --- Empty search state, #search-empty (§4.9) --- */
.search-empty {
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
}
.search-empty__message { font-size: var(--fs-small); font-weight: 600; color: var(--ink-muted); margin: 0; }
.search-empty__hint { font-size: var(--fs-meta); color: var(--ink-muted); margin-top: var(--sp-2); }
.search-empty__suggestions { margin-top: var(--sp-4); }
.search-empty__suggestions .label { display: block; margin-bottom: var(--sp-3); }
.search-empty__pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--blue);
  color: var(--blue);
  font-size: var(--fs-meta);
  font-weight: 600;
}
.pill:hover { background: var(--blue); color: #fff; text-decoration: none; }

/* =========================================================================
   21. ABOUT + AUTHOR ARCHIVE — §4.10–4.11, safety-critical (§3.17, §10)
   ========================================================================= */

/* --- Team directory row (§3.17) --- */
.team-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.team-list__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.team-list__row:first-child { border-top: none; padding-top: 0; }
/* Flat, no icon/glyph — same neutral-absence convention as the Tracker's
   protected-identity box (§4.5/§4.6). No photo-upload field exists yet
   (changelog.md), so Full and Pseudonym render this identical placeholder
   for now rather than the Figma-only tinted+glyph mockup device, which
   must never ship to production (§3.17's own explicit production note). */
.team-list__photo { width: 56px; height: 56px; flex: none; border-radius: var(--r-md); background: var(--surface-2); }
.team-list__content { display: flex; flex-direction: column; gap: 4px; }
.team-list__name { font-size: var(--fs-small); font-weight: 600; color: var(--blue); }
.team-list__role { font-size: var(--fs-meta); color: var(--ink-muted); }

.team-section__staff-note { margin-top: var(--sp-4); font-size: var(--fs-meta); color: var(--ink-muted); }

/* --- Standards + identity-protection statement (§4.10) --- */
.standards-section p { font-size: var(--fs-body); line-height: 1.6; color: var(--ink); margin-top: var(--sp-4); }
.standards-section__identity { margin-top: var(--sp-5); }
.standards-section__identity .label { display: block; margin-bottom: var(--sp-2); }
.standards-section__identity p { margin-top: 0; }

/* --- Contact card (§4.10) --- */
.contact-card {
  margin-top: var(--sp-4);
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.contact-card__row { display: flex; flex-direction: column; gap: 4px; }
.contact-card__row a { color: var(--blue); font-weight: 600; font-size: var(--fs-small); }
.contact-card__note { font-size: var(--fs-meta); color: var(--ink-muted); margin-top: 4px; }

/* --- Author archive identity + bio (§4.11) --- */
.author-back-wrap { padding-top: var(--sp-6); }
.author-back-wrap .prisoner-back { padding-top: 0; } /* wrapper supplies the top gap instead */
.author-identity {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
/* Same disclosed no-photo-field gap as .team-list__photo above — flat
   placeholder for both Full and Pseudonym until a real upload field
   exists; never the Figma-only tinted+glyph device in production. */
.author-identity__photo { width: 88px; height: 88px; flex: none; border-radius: var(--r-lg); background: var(--surface-2); }
.author-identity__content { display: flex; flex-direction: column; gap: var(--sp-2); }
.author-identity__name { font-size: 30px; line-height: 1.15; font-weight: 800; color: var(--ink); } /* same 2px-under-h1 precedent as the Tracker entry, §4.6 */
.author-bio { margin-top: var(--sp-6); }
.author-bio p { font-size: var(--fs-small); line-height: 1.4; color: var(--ink); margin: 0; }

/* =========================================================================
   22. DESKTOP ARTICLE — §4.2 Desktop
   ========================================================================= */

/*
   No main+rail grid, unlike the homepage — a long-form read has no
   rail-worthy secondary content, so this is a single centered 680px
   reading column (--measure) inside a full-bleed 1280px frame, not a
   two-column layout.

   .article itself still carries .measure (max-width:680, margin:auto) at
   every breakpoint, so it self-centers inside whatever box contains it.
   .article-wrap supplies that box at desktop: 1280px wide with 300px
   padding each side, which nets an available content width of 680px -
   the exact same number .measure independently caps to, so the two
   centering mechanisms agree rather than compete. Below 1025px
   .article-wrap has no rules at all (plain block flow, unchanged mobile
   markup/behavior).

   Type sizes need no desktop overrides here - every --fs-* token used on
   this page (h1/lead/body/h3-equivalent incl. the blockquote fix above)
   is already a clamp() that saturates to its max on its own by 1280px
   (§1.2); only structural width/centering and the two ad slots' exact
   reserved sizes are Article-specific desktop work. Masthead/nav/footer
   need no Article-specific desktop CSS either - header.php/footer.php
   are the same shared partials the homepage's own desktop pass already
   styles (§16), used pixel-identical here (§4.2 Desktop).
*/
@media (min-width: 1025px) {
  .article-wrap {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 300px;
  }
  .article { padding-inline: 0; }

  /* slot-article-inline: 336x280, stays nested in the 680px reading
     column, centered rather than stretched - a third-party mrec unit has
     no meaningful wide variant (same rule §4.1 set for the homepage). */
  .article-wrap [data-ad-slot="slot-article-inline"] {
    max-width: 336px;
    margin-inline: auto;
  }

  /* slot-article-footer: 728x90 leaderboard (114px reserved = 90px
     creative + ~24px label, §3.12/§12), wider than the 680px measure -
     breaks out of the reading column as a full-bleed 1280px sibling
     block instead of stretching. The outer .ad wrapper cancels
     .article-wrap's 300px padding to regain the full 1280px, then the
     inner box re-centers the 728px creative inside that. */
  .article-wrap .ad[data-ad-slot="slot-article-footer"] {
    margin-inline: -300px;
  }
  .article-wrap [data-ad-slot="slot-article-footer"] {
    max-width: 728px;
    min-height: 114px;
    margin-inline: auto;
  }
}

/* =========================================================================
   23. DESKTOP INVESTIGATIONS + TRACKER — §4.3-§4.6 Desktop
   ========================================================================= */

/*
   Two different width decisions, not one shared pattern - each template's
   own §4.x Desktop section in design-spec.md makes and justifies its own
   call, both reusing the .archive-head/.sec/.ad classes the Investigations
   Landing and Tracker Directory share, so scoping is by body class
   (post-type-archive-investigation / post-type-archive-prisoner /
   single-investigation / single-prisoner - all standard WP body_class()
   output, not invented) rather than by a shared layout rule:

   - Investigations Landing: full 1200px container (a listing page, not
     long-form prose) - only the featured card's headline/dek text and the
     dossier-list reflow to 2-up need desktop-specific rules; H1/intro/h2
     type sizes already scale on their own via the existing --fs-* clamp
     tokens, no override needed.
   - Investigation article, Tracker directory, Tracker entry: single
     680px --measure column, centered - the same "long-form/record content
     reads best at reading measure, not full width" call §4.2's own
     Desktop section already made. .measure already caps every breakpoint
     unconditionally, so single-investigation.php and single-prisoner.php
     (both already `class="measure article"`) need zero extra width CSS -
     only their ad slots (non-stretch, same rule as everywhere else) and,
     for the Tracker entry, the H1 override below need desktop rules.
*/

@media (min-width: 1025px) {
  /* --- 4.3 Investigations Landing: full-width listing --- */

  /* Featured dossier card stays full width (media/chips/byline included);
     only the prose text nodes cap at --measure, same "structural
     full-width, prose measure-capped" split as the section masthead
     intro below. Scoped to this page only - the shared .dossier
     component sits in a narrower 784px rail column on the homepage
     already and needs no change there. */
  .post-type-archive-investigation .dossier__title,
  .post-type-archive-investigation .dossier__dek,
  .post-type-archive-investigation .archive-head__intro {
    max-width: var(--measure);
  }

  .post-type-archive-investigation .dossier-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .post-type-archive-investigation .dossier-list__item {
    border-top: none;
  }
  .post-type-archive-investigation .dossier-list__thumb {
    width: 160px;
    height: 120px;
  }

  .ad--mrec[data-ad-slot="slot-invest"] {
    max-width: 300px;
    margin-inline: auto;
  }

  /* --- 4.4 Investigation article: centered 680px column --- */
  /* Both ad slots stay fixed 300x250, centered, never stretched - unlike
     single.php's Article, nothing here breaks out full-bleed, so no
     .article-wrap/markup change was needed, only this. */
  .single-investigation .ad--mrec[data-ad-slot] {
    max-width: 300px;
    margin-inline: auto;
  }

  /* --- 4.5 Tracker directory: centered 680px column, NOT 2-up --- */
  /* A record directory is read top-to-bottom in one scan order, unlike
     the Investigations Landing's browsable cards - §4.5 Desktop rejects
     2-up for exactly this reason. Type sizes (H1/intro/list heading) are
     already --fs-* tokens and scale on their own; row name/data stay
     fixed-size by design (§1.2) - only removing the page gutter once the
     column is already capped to measure (redundant otherwise, same
     "column already supplies the correct width" rule as §4.1/§4.2). */
  .post-type-archive-prisoner .archive-head,
  .post-type-archive-prisoner .tracker-filter-wrap,
  .post-type-archive-prisoner .sec {
    max-width: var(--measure);
    padding-inline: 0;
  }
  .ad--mrec[data-ad-slot="slot-tracker"] {
    max-width: 300px;
    margin-inline: auto;
  }

  /* --- 4.6 Tracker entry: centered 680px column --- */
  /* Every other type size on this page (dl-facts dd, narrative text,
     timeline/sources h2) is already a --fs-* token and scales on its
     own. The one deliberate exception: mobile's H1 was hand-set to 30px
     (not the standard clamp) specifically to avoid fighting the 88px
     photo for dominance in a 239px-wide mobile content column, per
     §4.6's own flagged mobile deviation. At 576px of desktop content
     width that constraint is gone, so this reverts to the standard
     --fs-h1 clamp max - not a new deviation, the mobile-only one not
     propagating past the breakpoint that justified it. */
  .prisoner-identity__name {
    font-size: var(--fs-h1);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
}

/* =========================================================================
   24. DESKTOP VIDEO HUB + CATEGORY + SEARCH + ABOUT + AUTHOR
       — §4.7-§4.11 Desktop
   ========================================================================= */

@media (min-width: 1025px) {
  /* --- 4.7 Video hub: full-width listing, no --measure cap --- */
  /* Page header/programme-row type and the .prog card's own 30%-at-desktop
     width (§2, line ~667) are already generic, unscoped rules that apply
     here automatically - the only template-specific value is the featured
     hero's title, hand-set between --fs-h3 and --fs-h2's desktop maxima
     (24-32px) per §4.7's own mobile precedent ("sized between --fs-h3 and
     --fs-h2"), so there is no single token to reuse here. slot-video is
     deliberately NOT capped like every other ad slot on the site - §4.7
     Desktop documents it as a genuinely different, responsive-width ad
     unit type, not an oversight. */
  .video-featured__title {
    font-size: 28px;
    line-height: 1.2;
  }

  /* --- 4.8 Category archive: single 720px column, NOT 2-up --- */
  /* A custom width, not --measure (680) or the full 1200 container -
     computed in §4.8 Desktop for this specific row shape (label+headline+
     time reading on one line without stretching into a wall of text).
     .archive:not(.post-type-archive) selects a plain taxonomy-category
     archive specifically - WP's own body_class() tags every CPT archive
     (Investigations/Tracker/Video) with .archive too, but only those also
     carry .post-type-archive, so this scopes correctly without needing to
     match a specific category slug. 2-up was considered and rejected here
     (§4.8 Desktop) for the opposite reason Investigations accepted it - a
     record/article list has one correct top-to-bottom scan order. */
  .archive:not(.post-type-archive) .archive-head:not(.archive-head--grid),
  .archive:not(.post-type-archive) .sec:not(.sec--grid):not(.archive-head--grid) {
    max-width: 720px;
    padding-inline: 0;
  }
  .archive:not(.post-type-archive) .feed__thumb {
    width: 160px;
    height: 120px;
  }
  .ad--mrec[data-ad-slot="slot-archive"] {
    max-width: 300px;
    margin-inline: auto;
  }

  /* --- 4.9 Search results: same 720px column, reused verbatim --- */
  /* Both templates share the exact "header + dense list + pagination"
     shape (§4.9 Desktop explicitly reuses §4.8's grid math rather than
     recomputing it), so the same width value applies here too. */
  .search .archive-head,
  .search .sec {
    max-width: 720px;
    padding-inline: 0;
  }
  .ad--mrec[data-ad-slot="slot-search"] {
    max-width: 300px;
    margin-inline: auto;
  }

  /* --- 4.10 About: two column widths, not one --- */
  /* 800px for the page header + Team section (room for a real 2-up staff
     grid); 680px --measure for Standards + Contact (prose/policy content,
     the site's own reading-measure rule, reused directly). The Contact
     section has no distinguishing class of its own - it's simply the .sec
     directly after .standards-section in page-about.php's DOM, so that
     adjacency is what scopes it, not a new class. */
  .page-about .archive-head,
  .page-about #team {
    max-width: 800px;
    padding-inline: 0;
  }
  .page-about .standards-section,
  .page-about .standards-section + .sec {
    max-width: 680px;
    padding-inline: 0;
  }
  .page-about .team-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  /* Same "gap supplies separation in a grid, dividers don't" call already
     made for the Investigations dossier-list (§23) - one rule removing
     every row's top hairline gets the identical result §4.10 Desktop
     achieved by hand-fixing one specific Figma node's stroke. */
  .page-about .team-list__row {
    border-top: none;
    padding-block: 0; /* the grid gap spaces rows; :first-child alone only zeroed the first cell, leaving cell 2 offset */
  }
  .ad--mrec[data-ad-slot="slot-about"] {
    max-width: 300px;
    margin-inline: auto;
  }

  /* --- 4.11 Author archive: single 680px column, like Article --- */
  /* .author-back-wrap/.author-identity/.author-bio also carry the shared
     .container class (1200px default) - targeted directly by their own
     unique classes here, NOT by ".author .container": .container is also
     the masthead row's and the footer grid's own class (site-header.php/
     site-footer.php, rendered on every page via get_header()/get_footer()),
     so scoping through a bare .container descendant selector would have
     narrowed those too on this one template. .sec (article-feed section)
     has no such collision, so it's scoped by the .author body class as
     usual. */
  .author-back-wrap,
  .author-identity,
  .author-bio,
  .author .sec {
    max-width: var(--measure);
    padding-inline: 0;
  }
  /* Mobile's identity H1 was hand-set to 30px (2px under the standard
     --fs-h1 clamp minimum) for the same "narrow column beside an 88px
     photo" reason as the Tracker entry (§4.6) - preserved as the same
     relationship at desktop (2px under the clamp's 46px MAX) rather than
     reverting to the full clamp like the Tracker entry did, because
     unlike the Tracker entry's 680px column this page's identity column
     is still comparatively narrow (576px net of the photo+gap out of
     680px total) - the constraint that caused the deviation hasn't gone
     away here, per §4.11 Desktop's own reasoning. */
  .author-identity__name {
    font-size: 44px;
    line-height: 51px;
  }
  .ad--mrec[data-ad-slot="slot-author"] {
    max-width: 300px;
    margin-inline: auto;
  }
}


/* =========================================================================
   25. SLIDER / CARD GRID / SEARCH POPUP (2026-09-21, Sanjar: OKO.press
       Multimedia slider + topic grid, CNN search panel)
   ========================================================================= */

/* --- Video slider: card track + prev/next arrows. Native scroll-snap
   carries it without JS; azda.js §8 adds the arrows. --- */
.vslider { position: relative; }
.progstrip--slider {
  gap: var(--sp-4);
  padding: var(--sp-2) 2px var(--sp-4);
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.progstrip--slider::-webkit-scrollbar { display: none; }
.progstrip--slider .prog {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 1px var(--hairline);
  overflow: hidden;
}
.progstrip--slider .prog__media { border-radius: 0; }
.progstrip--slider .prog__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.progstrip--slider .prog__show { margin-top: 0; }
.progstrip--slider .prog__title { font-size: var(--fs-small); line-height: 1.35; }
.progstrip--slider .prog__body > h4 { margin: 0 0 var(--sp-3); }
.prog__cta {
  align-self: flex-start;
  margin-top: auto;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: #fff;
  font-size: var(--fs-meta);
  font-weight: 600;
}
.prog__cta:hover { background: var(--blue-strong); color: #fff; text-decoration: none; }
.vslider__nav {
  display: none; /* shown by JS only; without it the track just swipes */
  position: absolute;
  top: 38%;
  z-index: 2;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: pointer;
}
.vslider__nav svg { width: 18px; height: 18px; fill: currentColor; }
.vslider__nav--prev { left: -8px; }
.vslider__nav--prev svg { transform: rotate(180deg); } /* one arrow asset, rotated; never a second SVG */
.vslider__nav--next { right: -8px; }
.vslider__nav:hover:not(:disabled) { background: var(--blue-strong); }
.vslider__nav:disabled { opacity: 0; pointer-events: none; }
.vslider--js .vslider__nav { display: inline-flex; }
@media (min-width: 1025px) {
  .vslider__nav--prev { left: -22px; }
  .vslider__nav--next { right: -22px; }
}

/* --- Category archive card grid: 1 / 2 / 3 columns --- */
.card-grid {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6) var(--sp-5);
}
@media (min-width: 601px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card-grid__item { min-width: 0; }
.card-grid__headline { overflow-wrap: anywhere; }
.card-grid__media {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--surface-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
.card-grid__media img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; display: block; }
.card-grid__placeholder { display: block; width: 100%; height: 100%; }
.card-grid__body { display: flex; flex-direction: column; gap: 6px; padding-top: var(--sp-3); }
.card-grid__headline {
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
@media (min-width: 1025px) { .card-grid__headline { font-size: 18px; } }
.card-grid__headline:hover { color: var(--blue); text-decoration: none; }
.card-grid__media:hover img { opacity: .92; }
.card-grid__ad { grid-column: 1 / -1; }

/* --- Search popup (CNN pattern): panel drops from the top under a dimmed
   backdrop. `hidden` keeps it inert until azda.js §7 opens it. --- */
.search-panel[hidden] { display: none; }
.search-panel { position: fixed; inset: 0; z-index: 200; } /* top set by JS to the masthead's bottom edge, so the header/nav stay visible above the panel */
.search-panel__backdrop { position: absolute; inset: 0; background: rgba(20, 24, 28, .55); }
.search-panel__box {
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-popover);
  padding-block: var(--sp-5);
  animation: azda-search-in 160ms ease-out;
}
@keyframes azda-search-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .search-panel__box { animation: none; } }
.search-panel__inner { display: flex; align-items: center; gap: var(--sp-3); }
.search-panel__form { position: relative; flex: 1; }
.search-panel__form input {
  width: 100%;
  height: 52px;
  padding: 0 52px 0 var(--sp-4);
  border: 1px solid var(--ink-muted);
  border-radius: var(--r-md);
  font: inherit;
  font-size: 18px;
  color: var(--ink);
  background: var(--surface);
}
.search-panel__form input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.search-panel__submit {
  position: absolute;
  top: 0; right: 0;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--ink); cursor: pointer;
}
.search-panel__submit svg { fill: none; }
@media (min-width: 1025px) {
  .search-panel__box { padding-block: var(--sp-6); }
  .search-panel__form { max-width: 760px; margin-inline: auto; }
  .search-panel__close { position: absolute; right: var(--gutter); }
}
body.search-open { overflow: hidden; }

/* --- Category archive header + grid: full layout width (--page-max), rule
   under the title instead of above it. Scoped to --grid so the Tracker
   directory's own .archive-head--tracker keeps its top rule. --- */
.archive-head.archive-head--grid {
  max-width: var(--page-max);
  padding-inline: var(--gutter);
  border-top: 0;
  border-bottom: 3px solid var(--blue);
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-4);
}
.sec.sec--grid { max-width: var(--page-max); padding-inline: var(--gutter); }

/* Category title consistency (Sanjar, 2026-09-22): migrated category
   names carry whatever casing the old site happened to store — some
   fully uppercase ("СИЁСАТ"), some not ("Умумӣ") — so the raw name was
   rendering as two different visual styles page to page. Forced uppercase
   here rather than in PHP so it's purely presentational and never touches
   the stored term name (SEO/admin lists/etc. keep showing the real data).
   Scoped to the category archive only — .archive-head__title is shared
   with Investigations/Tracker/Video/Search/Author, where forcing this
   would also shout real people's names. */
.archive-head.archive-head--grid .archive-head__title { text-transform: uppercase; }

/* --- About header: no rule at all (top rule removed, bottom rule tried and
   dropped 2026-09-21). Width/padding stay with the §4.10 rules. --- */
.page-about .archive-head {
  border-top: 0;
  border-bottom: 0;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-4);
}

/* Author photo (custom field, full visibility only): fills the existing frame. */
.team-list__photo, .author-identity__photo { overflow: hidden; }
.team-list__photo img, .author-identity__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }