/*
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(22px, 19.5px + 0.9vw, 28px);
  --fs-h1: clamp(26px, 22px + 1.5vw, 36px);
  --fs-display: clamp(28px, 23px + 1.8vw, 40px);

  /* 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); }

/* "Хабар фиристед" CTA (client request 2026-10-16). Phones have no room
   left in the masthead row (logo + search + lang + ☰ fill 360-390px), so
   below 600px the same link shows as a full-width button in the ☰ drawer
   instead (.nav-drawer__send); the homepage submit banner also covers it. */
.masthead__send,
.nav-drawer__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--blue);
  color: #fff;
  font-size: var(--fs-meta);
  font-weight: 700;
  white-space: nowrap;
}
/* a:visited (0,1,1) outranks the bare class — keep white on blue. */
.masthead__send:visited,
.nav-drawer__send:visited { color: #fff; }
.masthead__send:hover,
.nav-drawer__send:hover { background: var(--blue-strong); color: #fff; text-decoration: none; }
.masthead__send svg,
.nav-drawer__send svg { width: 18px; height: 18px; flex: none; }
.masthead__send { display: none; }
@media (min-width: 600px) { .masthead__send { display: inline-flex; } }
.nav-drawer__send { display: flex; min-height: 48px; margin: var(--sp-4) var(--gutter) 0; }

/* §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;
  text-transform: uppercase;
}
.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: 26px;
  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;
  text-transform: uppercase;
}
.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 FLASH (left-edge widget) — §8
   ========================================================================= */

/* Zero-height anchor right under the header: the widget overlays the top-left
   of the page content and scrolls away with it. */
.flash-anchor { position: relative; height: 0; z-index: 90; }
.flash {
  position: absolute;
  left: 0;
  top: var(--sp-3);
  animation: flash-in 520ms cubic-bezier(.2, .8, .2, 1) 600ms both;
}
@keyframes flash-in { from { transform: translateX(-110%); } to { transform: none; } }

.flash__tab {
  position: relative;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 48px;
  min-height: 48px;
  padding: 0 14px 0 13px;
  background: var(--signal);
  color: #fff;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  box-shadow: var(--shadow-popover);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.flash__tab::-webkit-details-marker { display: none; }
/* Pulsing ring — the "something important" cue; box-shadow only, no layout. */
.flash__tab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: flash-ring 2.2s ease-out infinite;
}
@keyframes flash-ring {
  0%   { box-shadow: 0 0 0 0 rgba(194, 48, 12, .55); }
  70%  { box-shadow: 0 0 0 16px rgba(194, 48, 12, 0); }
  100% { box-shadow: 0 0 0 0 rgba(194, 48, 12, 0); }
}
.flash__bolt { animation: flash-shake 3.6s ease-in-out 1.4s infinite; transform-origin: 50% 60%; }
@keyframes flash-shake {
  0%, 12%, 100% { transform: none; }
  3%  { transform: rotate(-14deg) scale(1.12); }
  6%  { transform: rotate(12deg) scale(1.12); }
  9%  { transform: rotate(-8deg); }
}
.flash__x { display: none; }
.flash[open] .flash__bolt { display: none; }
.flash[open] .flash__x { display: block; }
.flash[open] .flash__tab::after { animation: none; }

/* Words only where there is room; the accessible name stays on small screens. */
.flash__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 1025px) {
  .flash__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .flash__tab { padding-inline: 14px var(--sp-5); }
}

.flash__body {
  position: absolute;
  left: 0;
  top: calc(100% + var(--sp-2));
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  /* Width follows the headline: short title = compact card (min 220px),
     long title wraps onto more rows and the card grows taller. */
  width: max-content;
  min-width: 220px;
  max-width: min(420px, calc(100vw - var(--sp-4)));
  padding: var(--sp-4);
  max-height: 70vh; /* up to 4 stories (breaking.php); scroll, never off-screen */
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  border-left: 4px solid var(--signal);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  box-shadow: var(--shadow-popover);
}
.flash[open] .flash__body { animation: flash-body 260ms ease-out both; }
@keyframes flash-body { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.flash__time { font-size: var(--fs-meta); color: var(--signal); font-weight: 700; }
.flash__link { overflow-wrap: anywhere; font-weight: 700; font-size: var(--fs-body); color: var(--ink); }
.flash__link:hover { color: var(--blue); }
.flash__more {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) 0 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.flash__more li { display: flex; flex-direction: column; gap: 2px; }
.flash__more-link { overflow-wrap: anywhere; font-weight: 600; font-size: var(--fs-meta); color: var(--ink); }
.flash__more-link:hover { color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  .flash, .flash__tab::after, .flash__bolt, .flash[open] .flash__body { animation: none; }
}
.flash[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__head--plain { border-top: 0; padding-top: 0; } /* About: no coloured rule above h2s (client 2026-10-09) */
.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: clamp(18px, 16.5px + 0.5vw, 21px);
  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 {
  display: block;
  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); width: fit-content; }
.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%; } }

/* =========================================================================
   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; max-width: 52ch; font-size: var(--fs-meta); line-height: 1.55; }
.site-footer__slogan { font-size: var(--fs-meta); }
.site-footer__slogan { margin-top: var(--sp-3); font-weight: 700; }
/* 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: 0; flex-wrap: wrap; }
.footer__social .social-links__item { color: #fff; }
.footer__social .social-links__item:hover { background: rgba(255,255,255,.15); }
.site-footer__heading {
  font-size: var(--fs-meta);
  font-weight: 700;
  opacity: .7;
  margin-bottom: var(--sp-3);
}
/* Footer is never ALL-CAPS on any page/category; nav links and headings get
   capitalize (Sanjar, 2026-09-30). */
.site-footer,
.site-footer * { text-transform: none; }
.site-footer__heading { text-transform: uppercase; }
.site-footer__nav {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-5);
}
.site-footer__nav a,
.site-footer__nav .nav__item--unresolved {
  display: block;
  text-transform: lowercase; /* menu labels are typed in ALL CAPS in wp-admin */
  padding-block: 6px;
  font-size: var(--fs-small);
  color: #fff;
  opacity: .92;
}
.site-footer__nav a::first-letter,
.site-footer__nav .nav__item--unresolved::first-letter { text-transform: uppercase; }
.site-footer__nav a:hover { opacity: 1; text-decoration: underline; }
.site-footer__mirror {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-meta);
  line-height: 1.5;
  opacity: .9;
}
.site-footer__mirror svg { flex: none; margin-top: 2px; }
.site-footer__bar { border-top: 1px solid rgba(255,255,255,.18); }
.site-footer__bar-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  font-size: var(--fs-meta);
  opacity: .8;
}
.site-footer__bar-row .site-footer__mirror { margin: 0; flex: 1 1 320px; }
@media (min-width: 1025px) {
  .site-footer__grid { grid-template-columns: 2fr 1.6fr 1fr; gap: var(--sp-7); }
  .site-footer__nav { grid-template-columns: repeat(3, minmax(0, 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: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto auto auto; /* spare rail height lands in the tracker row only */
    column-gap: 40px;
    row-gap: 0; /* .sec supplies the 48px rhythm; a row gap doubled it */
    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 railtop"
      "video   video"
      "sampler sampler"
      "banner  banner";
  }
  .home-grid .sec,
  .home-grid .essentials {
    padding-inline: 0;
    max-width: none;
  }
  .home-area--hero    { grid-area: hero; }
  .home-area--ess     { grid-area: ess; }
  .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--banner  { grid-area: banner; }
  .home-area--ad2     { display: none; } /* Keep the empty wrapper out of grid placement. */

  /*
     2026-10-02: the whole right column is ONE static block — Latest, then
     Editor's picks, then the ad directly under it. It used to be sticky,
     which let it slide over the ad/video rows when scrolled; static means
     it can never overlap anything. Ad-1 (slot-home-1) lives here in the
     DOM so mobile order is unchanged (Latest → Ad-1).
  */
  .home-area--railtop {
    grid-area: railtop;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .home-area--railtop > .sec {
    margin-inline: 0;
  }
  .rail-blog {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .rail-blog__list {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .rail-blog__list > li {
    flex: 1;
  }

  .rail-picks { display: block; }
}

.rail-picks__list { list-style: none; margin: 0; padding: 0; }
.rail-picks__item {
  padding-block: var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.rail-picks__item:first-child { border-top: none; padding-top: 0; }
.rail-picks__link { display: flex; gap: var(--sp-3); text-decoration: none; }
.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__link:hover .rail-picks__headline { 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: 0; }
.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;
  align-items: center;
  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, .byline__updated { color: var(--ink-muted); }

/* News / Opinion tag above the article title (client request 2026-10-16).
   Opinion is filled so readers can't mistake it for reporting. */
.type-tag {
  display: inline-block;
  margin-right: var(--sp-2);
  padding: 2px 8px;
  border: 1px solid var(--blue);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue);
  vertical-align: middle;
}
.type-tag--opinion { background: var(--blue-strong); border-color: var(--blue-strong); color: #fff; }
/* Top share icon (client request) sits on this same line, right after
   the date — the row's own gap already spaces it. */
.byline .share { margin-left: 0; padding-top: 0; }

.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); }
/* Caption + photo source overlay the image's bottom edge: the figure is a
   fixed 16:9 box with overflow hidden, so a caption below it would be clipped. */
figure.article__hero { position: relative; }
figure.article__hero figcaption {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-3);
  font-size: var(--fs-meta);
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}

/* Keep source text at the image's bottom left without changing its size. */
.credited-image,
.dossier__media,
.card-grid__media { position: relative; }
.credited-image { display: inline-block; overflow: hidden; vertical-align: top; }
.credited-image > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.image-source {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  max-width: 100%;
  padding: 3px 6px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: 10px;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.article__hero > .image-source { font-size: var(--fs-caption); }
figure.article__hero figcaption { padding-bottom: 30px; }
.article__body .credited-image { max-width: 100%; }
.card-grid__media > .credited-image { display: block; width: 100%; height: 100%; }

.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);
}
.single-investigation .article__body blockquote {
	font-weight: 600;
}
/* Nested quote blocks share the outer quote's border and spacing. */
.single-investigation .article__body blockquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}
.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;
  gap: var(--sp-2);
  min-width: 44px;
  height: 44px;
  padding-inline: 12px var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  color: var(--ink);
  cursor: pointer;
}
.share__label { font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; }
.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); }

/* =========================================================================
   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__intro--rule { border-top: 3px solid var(--blue); padding-top: 20px; }
.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; }


/* Reveal each case update once; the unenhanced timeline stays readable. */
@media (prefers-reduced-motion: no-preference) {
  .article--prisoner .timeline__item.is-revealed .timeline__content {
    animation: timeline-content-in 420ms ease-out var(--timeline-delay, 0ms) backwards;
  }
  .article--prisoner .timeline__item.is-revealed .timeline__rail::before {
    animation: timeline-dot-in 320ms ease-out var(--timeline-delay, 0ms) backwards;
  }
  .article--prisoner .timeline__item.is-revealed .timeline__rail::after {
    transform-origin: top;
    animation: timeline-line-in 500ms ease-out var(--timeline-delay, 0ms) backwards;
  }
  .article--prisoner .timeline__item:focus-within .timeline__content,
  .article--prisoner .timeline__item:focus-within .timeline__rail::before,
  .article--prisoner .timeline__item:focus-within .timeline__rail::after {
    animation: none;
  }
}
@keyframes timeline-content-in {
  from { opacity: 0.45; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes timeline-dot-in {
  from { transform: scale(0.75); }
  to { transform: scale(1); }
}
@keyframes timeline-line-in {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@media print {
  .article--prisoner .timeline__item.is-revealed .timeline__content,
  .article--prisoner .timeline__item.is-revealed .timeline__rail::before,
  .article--prisoner .timeline__item.is-revealed .timeline__rail::after {
    animation: none;
  }
}

/* --- 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);
}

/* Prisoner photos (client request 2026-10-05) — only ever rendered for
   non-protected records (azda_tracker_photo(), azda-core/inc/tracker.php). */
.tracker-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.tracker-list__photo, .prisoner-identity__photo, .tracker-teaser__photo { overflow: hidden; }
.tracker-teaser__photo { display: block; width: 56px; height: 56px; flex: none; border-radius: var(--r-md); background: var(--surface-2); }
.tracker-teaser__row:has(.tracker-teaser__photo) { align-items: center; }
.tracker-teaser__row:has(.tracker-teaser__photo) .tracker-teaser__name { flex: 1; min-width: 0; }
.tracker-teaser__row:has(.tracker-teaser__photo) .tracker-teaser__data { padding-left: 0; }

/* --- 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: 1; min-width: 0; flex-direction: column; gap: var(--sp-2); }
.prisoner-identity__name { font-size: 24px; 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); }
/* Keep sharing beside the identity on wider screens. */
.article--prisoner .prisoner-identity .share { padding-top: 0; margin-left: auto; align-self: flex-start; }
.article--prisoner .prisoner-identity .share__menu { left: auto; right: 0; }
.article--prisoner { overflow-wrap: anywhere; }
.article--prisoner .timeline__content { min-width: 0; }

@media (max-width: 600px) {
  /* Give the name room beside the photo; sharing gets its own row. */
  .prisoner-identity { display: grid; grid-template-columns: 88px minmax(0, 1fr); }
  .article--prisoner .prisoner-identity .share {
    grid-column: 1 / -1;
    justify-self: end;
    margin-left: 0;
  }
}

/* =========================================================================
   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--below { margin: 0 0 var(--sp-5); }
.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; }
/* Homepage Latest: thumb left of every row, a touch smaller than the archive's. */
.feed--home .feed__thumb-link { flex: none; display: block; }
.feed--home .feed__thumb { width: 96px; height: 72px; }

/* --- 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: 0 0 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 {
    --article-pad: clamp(var(--gutter), calc((100vw - var(--measure)) / 2), 300px);
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--article-pad);
  }
  .article { padding-inline: 0; }


}

/* =========================================================================
   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 --- */

  .post-type-archive-investigation .dossier-card {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 40px;
  }
  .post-type-archive-investigation .dossier-card > * {
    flex: 1 1 0;
    min-width: 0;
  }
  .post-type-archive-investigation .dossier__media {
    margin-bottom: 0;
  }

  .post-type-archive-investigation .dossier__title,
  .post-type-archive-investigation .dossier__dek {
    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__item:nth-child(-n+2) {
    padding-top: 0;
  }
  .post-type-archive-investigation .dossier-list__thumb {
    width: 160px;
    height: 120px;
  }

  /* --- 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;
  }

  /* --- 4.6 Tracker entry: centered 680px column --- */
  /* Keep names proportionate to the identity photo on wider screens. */
  .prisoner-identity__name {
    font-size: 28px;
    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;
  }

  /* Client: featured video + featured dossier image too large. Cap the
     media (not the page) so text/rules keep their full-width structure. */
  .post-type-archive-investigation .dossier__media {
    max-width: 560px;
  }

  /* Video hub featured hero, design-spec §4.7 Option A: 560px media left,
     label/title/date column right, vertically centred. DOM order is
     unchanged (mobile stacks), grid areas place it on desktop. Gap is
     40px, not a --sp-* token (spec value; --sp-8 is 64px). */
  .video-featured {
    display: grid;
    grid-template-columns: 560px minmax(0, 1fr);
    /* 1fr spacer rows above/below the text rows centre the block against
       the media (a spanning item would otherwise stretch the auto rows). */
    grid-template-areas: "media ." "media label" "media title" "media meta" "media .";
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 40px;
  }
  .video-featured .label { grid-area: label; align-self: end; margin-bottom: var(--sp-3); }
  .video-featured__media { grid-area: media; max-width: 560px; }
  .video-featured__title {
    grid-area: title;
    margin-top: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .video-featured__meta { grid-area: meta; align-self: start; margin-top: var(--sp-3); }

  /* --- 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;
  }

  /* --- 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;
  }

  /* --- 4.10 About: full --page-max width, same as every other section on
     the site (Sanjar 2026-09-24 — was a narrower 800px column, but the new
     history/mission section added between the header and Team wasn't part
     of that override's selector list, so it rendered wider than its
     siblings; matching the default .sec width everywhere fixes that
     inconsistency instead of adding a 4th selector to the old override). */
  .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 */
  }

  /* --- 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;
  }
}


/* =========================================================================
   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-2);
  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 > h3 { 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; object-position: 50% 20%; 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; }

/* --- 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);
  margin-top: var(--sp-4);
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-3);
}
.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; }

/* --- Contact page "Тамос бо мо" (client request 2026-10-05) --- */
.contact-channels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.contact-channel {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 64px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
}
.contact-channel:hover { background: var(--surface-2); text-decoration: none; }
.contact-channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}
.contact-channel--telegram .contact-channel__icon { background: #229ED9; }
.contact-channel--signal .contact-channel__icon { background: #3A76F0; }
.contact-channel__text { display: flex; flex-direction: column; min-width: 0; }
.contact-channel__label { font-size: var(--fs-meta); color: var(--ink-muted); }
.contact-channel__value { font-weight: 700; overflow-wrap: anywhere; }
@media (min-width: 601px) {
  .contact-channels { grid-template-columns: 1fr 1fr; }
}

/* --- Nav dropdown group "Тарҳҳои мо" (client request 2026-10-05) --- */
.nav__group { position: relative; list-style: none; }
.nav__group-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  font: inherit;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.nav__group-toggle svg { fill: none; stroke: currentColor; transition: transform 150ms ease; }
.nav__group.is-open .nav__group-toggle svg { transform: rotate(180deg); }
.nav__submenu { list-style: none; margin: 0; padding: 0; }

/* Horizontal strip below desktop: it scrolls sideways, so a popover would be
   clipped — flatten the children inline instead. */
.masthead > .nav .nav__group,
.masthead > .nav .nav__submenu { display: contents; }
.masthead > .nav .nav__submenu { display: flex; gap: 18px; }
.masthead > .nav .nav__group-toggle { display: none; }

/* ☰ drawer: group label is an accordion toggle (chevron), children collapsed
   until opened (2026-10-10 — a flat fully-expanded list was too long on mobile). */
.nav-drawer .nav__group-toggle {
  width: 100%;
  min-height: 44px;
  justify-content: space-between;
  font-size: var(--fs-lead);
  font-weight: 700;
  text-align: left;
}
.nav-drawer .nav__group-toggle svg { width: 14px; height: 14px; flex: none; }
.nav-drawer .nav__submenu { display: none; padding-left: var(--sp-4); flex-direction: column; gap: var(--sp-1); }
.nav-drawer .nav__group.is-open > .nav__submenu { display: flex; }
.nav-drawer .nav__submenu a { font-size: var(--fs-body); font-weight: 600; }

@media (min-width: 1025px) {
  .masthead > .nav .nav__group { display: block; }
  .masthead > .nav .nav__group-toggle { display: flex; }
  .masthead > .nav .nav__submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 150;
    min-width: 220px;
    padding: var(--sp-2);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-popover);
  }
  .masthead > .nav .nav__group.is-open .nav__submenu,
  .masthead > .nav .nav__group:focus-within .nav__submenu { display: block; }
  @media (hover: hover) {
    .masthead > .nav .nav__group:hover .nav__submenu { display: block; }
  }
  .masthead > .nav .nav__submenu a { min-height: 40px; padding-inline: var(--sp-3); border-bottom: 0; text-transform: uppercase; font-size: var(--fs-small); }
  .masthead > .nav .nav__submenu a:hover { background: var(--surface-2); color: var(--blue); text-decoration: none; }
}

/* --- Search filters (client request 2026-10-05, ozodi.org reference):
   underlined selects, label above, applied via plain GET. --- */
.search-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-4);
}
.search-filters__custom { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.search-filters__custom[hidden] { display: none; }
.search-filters__field { display: flex; flex-direction: column; gap: 2px; min-width: 150px; flex: 1 1 150px; max-width: 260px; }
.search-filters__field label { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.search-filters select,
.search-filters input[type="date"] {
  min-height: 44px;
  padding: 0 var(--sp-2);
  font: inherit;
  font-size: var(--fs-small);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
}
.search-filters select:focus-visible,
.search-filters input[type="date"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* --- Scroll-to-top (client request 2026-10-06): replaces the footer link.
   Shown by azda.js after ~600px of scroll. Uses the one arrow asset rotated
   -90deg (arrow-right -> up), per the single-arrow convention. --- */
.to-top {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--blue-strong);
  color: #fff;
  box-shadow: var(--shadow-popover);
  cursor: pointer;
}
.to-top[hidden] { display: none; }
.to-top svg { width: 18px; height: 18px; fill: currentColor; transform: rotate(-90deg); }
.to-top:hover { background: var(--blue); }

/* Video hub: no coloured rule above the page header (client request 2026-10-06). */
.post-type-archive-video .archive-head { border-top: 0; padding-top: var(--sp-4); }

/* Investigations hub: no coloured rule above the header; the intro's own rule
   runs the full width of the column (client request 2026-10-06). */
.post-type-archive-investigation .archive-head { border-top: 0; padding-top: var(--sp-4); }
.archive-head__intro--rule,
.post-type-archive-investigation .archive-head__intro { max-width: none; }

/* --- Homepage lower block (client request 2026-10-06): from Video down the
   page is full width (no right rail / no side ad); Society + Migration sit
   side by side; a "send us your news" banner closes it. --- */
.sampler .strip { grid-template-columns: 1fr; }
/* ONE full-width rule above both columns, not one per column. */
.sampler__inner { border-top: 3px solid var(--blue); padding-top: var(--sp-3); }
.sampler .sec__head { border-top: 0; padding-top: 0; }
@media (min-width: 769px) {
  .sampler--two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
}
@media (min-width: 1025px) {
  /* Full-width video row: four cards in view instead of three. */
  .home-area--video .progstrip--slider .prog { flex-basis: calc(25% - 12px); }
}

/* ---- Homepage submit banner (2026-10-06) ---- */
.submit-banner {
  position: relative;
  isolation: isolate;            /* motif sits at z-index:-1 inside this context */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4);        /* 24 / 16 */
  background: var(--blue-strong);
  color: #fff;
  border-radius: var(--r-md);
}
.submit-banner__motif {
  position: absolute;
  z-index: -1;
  top: -8px;
  right: -48px;
  width: 200px;
  height: auto;
  color: var(--blue-bright);     /* strokes use currentColor, opacity set in markup (<= .35) */
  pointer-events: none;
}
.submit-banner__text { max-width: 560px; }
.submit-banner__title {
  font-size: var(--fs-h2);       /* 22px @375 -> 28px */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: #fff;
}
.submit-banner__sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);    /* 15px mobile */
  line-height: 1.5;
  color: #fff;
}
.submit-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;              /* >= 44 target */
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--blue-strong);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;            /* long PL/RU/EN labels may wrap to 2 lines; never truncate */
  text-decoration: none;
  transition: background-color 160ms ease-out;
}
/* Beat the global a:visited / a:hover colours (a:visited is (0,1,1) and
   would turn the label purple on a plain .class rule). */
.submit-banner a.submit-banner__cta,
.submit-banner a.submit-banner__cta:visited,
.submit-banner a.submit-banner__cta:hover,
.submit-banner a.submit-banner__cta:focus { color: var(--blue-strong); text-decoration: none; }
.submit-banner__cta svg { width: 14px; height: 14px; fill: currentColor; flex: none; transition: transform 160ms ease-out; }
/* Whole banner is the click target: stretch the link's box over the banner
   (banner is position:relative, CTA is static, so inset:0 = banner). */
.submit-banner__cta::after { content: ""; position: absolute; inset: 0; }
.submit-banner:hover .submit-banner__cta { background: var(--blue-tint); }
.submit-banner:hover .submit-banner__cta svg { transform: translateX(4px); }
/* Focus: ring on the button (white on blue-strong 9.15:1) + ring on the whole
   banner where :has() exists (--focus on paper ~3.3:1). Outline never removed. */
.submit-banner__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.submit-banner:has(.submit-banner__cta:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

@media (max-width: 480px) {
  .submit-banner__cta { width: 100%; }        /* full-width thumb target at 375 */
}
@media (min-width: 601px) {
  .submit-banner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    min-height: 160px;
    padding: var(--sp-5) var(--sp-6);          /* 24 / 32 */
  }
  .submit-banner__motif { top: 0; right: 200px; height: 100%; width: auto; }
  .submit-banner__text { align-self: center; }
  .submit-banner__sub { font-size: var(--fs-body); }
  .submit-banner__cta { flex: none; }
}
@media (min-width: 1025px) {
  .submit-banner { min-height: 176px; padding: var(--sp-6) var(--sp-7); }  /* 32 / 48 */
  .submit-banner__motif { right: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .submit-banner__cta, .submit-banner__cta svg { transition: none; }
  .submit-banner:hover .submit-banner__cta svg { transform: none; }
}
@media (forced-colors: active) {
  .submit-banner { border: 1px solid CanvasText; }
  .submit-banner__motif { display: none; }
}

/* Contact page header: same anatomy as About (no rule above the title; the
   rule sits under it, on the intro). */
.archive-head--plain { border-top: 0; padding-top: var(--sp-5); padding-bottom: var(--sp-4); }

/* --- Spacing audit fixes (2026-10-06, design-spec "Banner + spacing audit") --- */
/* P1-4: headers with no top rule: 24px above the title, no extra .sec margin. */
.post-type-archive-video .archive-head,
.post-type-archive-investigation .archive-head,
.page-about .archive-head,
.archive-head--plain { margin-top: 0; padding-top: var(--sp-5); }
/* P1-5: category archive - no dead band under the closing rule. */
.archive-head--grid + .sec--grid { margin-top: var(--sp-5); }
/* P2-4: hero closer to the masthead (both home columns start level on desktop). */
.home-area--hero .sec,
.home-area--railtop > .sec:first-child { margin-top: var(--sp-5); }

/* --- Nav dropdown for a REAL WP Menu (live site): wp_nav_menu() emits
   li.menu-item-has-children > a + ul.sub-menu, not the fallback's
   .nav__group markup. Same behaviour: closed by default; desktop popover on
   hover/focus/click; mobile strip flattens children inline; drawer lists them
   under the parent as a heading. A parent with href="#" is never a link. --- */
.nav__list .sub-menu { list-style: none; margin: 0; padding: 0; }
.masthead > .nav .menu-item-has-children,
.masthead > .nav .menu-item-has-children > .sub-menu { display: contents; }
.masthead > .nav .menu-item-has-children > a { display: none; }

.nav-drawer .menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  cursor: pointer;
}
.nav-drawer .menu-item-has-children > a::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-right: 3px;
  transition: transform 150ms ease;
}
.nav-drawer .menu-item-has-children.is-open > a::after { transform: rotate(-135deg); }
.nav-drawer .menu-item-has-children > .sub-menu { display: none; padding-left: var(--sp-4); flex-direction: column; gap: var(--sp-1); }
.nav-drawer .menu-item-has-children.is-open > .sub-menu { display: flex; }
@media (prefers-reduced-motion: reduce) {
  .nav-drawer .menu-item-has-children > a::after, .nav-drawer .nav__group-toggle svg { transition: none; }
}
.nav-drawer .menu-item-has-children > .sub-menu a { font-size: var(--fs-body); font-weight: 600; }

@media (min-width: 1025px) {
  .masthead > .nav .menu-item-has-children { display: block; position: relative; }
  .masthead > .nav .menu-item-has-children > a { display: flex; gap: 6px; }
  .masthead > .nav .menu-item-has-children > a::after {
    content: "";
    width: 6px; height: 6px;
    margin-top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 150ms ease;
  }
  .masthead > .nav .menu-item-has-children.is-open > a::after { transform: rotate(-135deg); margin-top: 3px; }
  .masthead > .nav .menu-item-has-children > .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 150;
    min-width: 220px;
    padding: var(--sp-2);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-popover);
  }
  .masthead > .nav .menu-item-has-children.is-open > .sub-menu,
  .masthead > .nav .menu-item-has-children:focus-within > .sub-menu { display: block; }
  @media (hover: hover) {
    .masthead > .nav .menu-item-has-children:hover > .sub-menu { display: block; }
  }
  .masthead > .nav .sub-menu a { min-height: 40px; padding-inline: var(--sp-3); border-bottom: 0; text-transform: uppercase; font-size: var(--fs-small); }
  .masthead > .nav .sub-menu a:hover { background: var(--surface-2); color: var(--blue); text-decoration: none; }
}

/* About: no coloured top rule on any h2 (page-body h2s included) or the intro (client 2026-10-09). */
.page-about .article__body h2,
.page-about .sec__head,
.page-about .archive-head__intro--rule { border-top: 0; padding-top: 0; }