/* ============================================================
   ACCESSIBILITY UTILITIES
   ============================================================ */

/**
 * .sr-only: visually hidden but announced by screen readers.
 * Used wherever semantically important text must be hidden from
 * sighted users (e.g. the full event date below the circle).
 */
.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/**
 * Visible keyboard-focus indicator (WCAG 2.4.7) for controls that otherwise
 * inherit `outline: none` from their component styles.
 * .footer-icon-menu__link is handled at its own component rule, since its
 * combined :hover/:focus-visible block further down would cancel this outline.
 *
 * #header-search-input is deliberately excluded: it is a borderless input
 * stretched across the overlay, so a 2px offset outline drew an orange
 * rectangle on its edges, and because the overlay autofocuses it, on every
 * open rather than only for keyboard users. Its indicator is the
 * :focus-within underline on .search-live__form below.
 */
#nl-email:focus-visible {
  outline: 2px solid var(--ari-color-accent);
  outline-offset: 2px;
}

/* ============================================================
   SITE HEADER - v2 redesign (white, 3-row)
   ============================================================ */

.site-header {
  /* position: fixed on every viewport.
     WHY NOT sticky: sticky requires a scroll-container ancestor; overflow-x:hidden
     on html/body creates conflicting scroll containers that silently break sticky
     in many mobile browsers.  fixed is always relative to the true viewport and
     works regardless of ancestor overflow.                                       */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* z-index sits above page content (0) and mega-menus (90) but below the
     search overlay (280).  Mobile overrides this to 205 (above the drawer). */
  z-index: 200;
  background: linear-gradient(180deg, var(--ari-ink) 0%, var(--ari-ink) 100%);
  color: rgba(255,255,255,0.9);
  box-shadow: 0 1px 0 rgba(255,255,255,0.07);
  /* Own compositor layer: prevents layout reflow during height transitions */
  will-change: box-shadow;
  /* Ensure sub-pixel rounding never produces a 1px gap between header and content */
  backface-visibility: hidden;
  --ari-text-accent: var(--ari-apricot);
}

/* ── Body padding-top compensation ──────────────────────────────────────────
   Because the header is fixed (out of normal flow), the first row of page
   content would otherwise slide underneath it.  We push body down by exactly
   the header's rendered height, which JS measures and writes into
   --ari-header-height on <html> before the page becomes interactive.
   The fallback (148px) matches utility-row (32px) + brand-row (68px) +
   nav-row (48px) so there is no visible layout shift
   while JS initialises.                                                  */
body {
  padding-top: var(--ari-header-height, 148px);
}

/* ── WordPress admin bar compensation ───────────────────────────────────────
   When the admin bar is present, WordPress sets html { margin-top: 32px }.
   This pushes the body start down by 32px, creating a gap below the fixed
   header (which stays at top: 0).  Moving the header down by the admin bar
   height realigns it with the body content start.
   --wp-admin--admin-bar--height is set by WordPress core (32px desktop,
   46px mobile ≤782px) so no extra media query is needed here.              */
.admin-bar .site-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}

/* Each row inside the header must also be full-width */
.site-header__utility,
.site-header__brand-row,
.site-header__nav-row {
  width: 100%;
  box-sizing: border-box;
}

/* Scrolled (compact bar): utility row collapses, brand row shrinks */
.site-header.is-scrolled { box-shadow: none; }

.site-header__utility {
  background: rgba(255,255,255,0.018);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  /* Smooth collapse on scroll */
  overflow: hidden;
  max-height: 40px; /* slightly more than the 32px min-height to avoid clipping */
  opacity: 1;
  transition: max-height 220ms ease,
              opacity     220ms ease,
              border-color 220ms ease;
}
.site-header.is-scrolled .site-header__utility {
  max-height: 0;
  opacity: 0;
  border-bottom-color: transparent;
}

.site-header__utility-inner {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ari-space-4);
}

.header-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.header-social a {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.68);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.header-social a:hover,
.header-social a:focus-visible {
  color: #fff;
  border-color: var(--ari-color-accent);
  background: rgba(219, 89, 33, 0.2);
  transform: translateY(-1px);
}

.site-header__brand-row { border-bottom: 1px solid rgba(255,255,255,0.07); }

.site-header__brand-inner {
  min-height: 68px; display: flex; align-items: center;
  justify-content: space-between; gap: var(--ari-space-4);
  transition: min-height 220ms ease;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
  text-decoration: none;
}

/* Supplied lockup artwork (emblem + name); height drives size, width follows the 1000:175 ratio */
.site-brand__logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
  flex-shrink: 0;
  transition: height 220ms ease;
}

.site-brand--drawer .site-brand__logo { height: 40px; }

.header-actions { display: inline-flex; align-items: center; gap: var(--ari-space-3); }

.header-search-trigger {
  width: 2.5rem; height: 2.5rem;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent; color: rgba(255,255,255,0.75);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: color 160ms ease, border-color 160ms ease;
}
.header-search-trigger:hover, .header-search-trigger:focus-visible { color: #fff; border-color: var(--ari-color-accent); background: rgba(219, 89, 33, 0.15); }

.header-newsletter-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  background: var(--ari-color-accent-strong);
  color: #ffffff !important;
  border-radius: 0;
  font-weight: 600; font-size: 0.875rem; letter-spacing: 0.01em;
  white-space: nowrap; transition: background 160ms ease;
}
.header-newsletter-cta:hover, .header-newsletter-cta:focus-visible { background: var(--ari-color-accent-2); color: #ffffff !important; }
.header-newsletter-cta--full { width: 100%; justify-content: center; padding: 0.8rem 1.25rem; }

.header-menu-toggle {
  display: none; width: 2.5rem; height: 2.5rem;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent; color: rgba(255,255,255,0.75);
  cursor: pointer; align-items: center; justify-content: center;
  transition: color 160ms ease, border-color 160ms ease;
}
.header-menu-toggle:hover, .header-menu-toggle:focus-visible { color: #fff; border-color: var(--ari-color-accent); }
.header-menu-toggle__icon { display: flex; align-items: center; justify-content: center; }
.header-menu-toggle__icon--close { display: none; }
.site-header.is-menu-open .header-menu-toggle__icon--open { display: none; }
.site-header.is-menu-open .header-menu-toggle__icon--close { display: flex; }

.site-header__nav-row {
  background: rgba(255,255,255,0.014);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
/* Nav row inner: same u-container width as the brand row, aligned with the logo
   and lang switcher.
   Direct-child combinator: .u-container also appears inside the programs/
   topics/pub mega-menu panels (.site-header__nav-row > .programs-mega >
   .programs-mega__inner.u-container). A descendant selector matched those too,
   making each panel grid a shrink-to-fit flex item, so panels without a large
   intrinsic-size child (e.g. an empty category's placeholders) collapsed to a
   sliver. */
.site-header__nav-row > .u-container {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.primary-nav {
  width: 100%;
  max-width: none;
  display: flex;
  justify-content: center;
}

.primary-nav__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2.25rem);
  width: 100%;
  max-width: 100%;
}

.primary-nav__menu > li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.primary-nav__menu > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 48px;
  padding: 1px 0.125rem 0;
  color: rgba(255,255,255,0.86);
  font-weight: 500;
  font-size: 0.9rem;
  font-family: var(--ari-font-heading);
  white-space: nowrap;
  position: relative;
  letter-spacing: -0.006em;
  transition: color 160ms ease, min-height 220ms ease;
}

.primary-nav__menu > li > a::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 7px;
  height: 2px;
  background: var(--ari-color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms ease;
}

.primary-nav__menu > li > a:hover::before,
.primary-nav__menu > li > a:focus-visible::before,
.primary-nav .current-menu-item > a::before,
.primary-nav .current-menu-ancestor > a::before { transform: scaleX(1); }

.primary-nav__menu > li > a:hover,
.primary-nav__menu > li > a:focus-visible,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a { color: var(--ari-color-accent-2); }

.primary-nav .menu-item-has-children > a::after {
  content: ""; display: inline-block; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: 0.6; flex-shrink: 0;
}

.primary-nav li { position: relative; }

.primary-nav .sub-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 240px; list-style: none; margin: 0; padding: 0.5rem 0.5rem 0.5rem;
  padding-top: calc(0.5rem + 0.5rem); /* 0.5rem visual gap + 0.5rem inner padding */
  background: #ffffff; border: 1px solid var(--ari-color-border);
  border-radius: 0; box-shadow: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* Delay closing by 180ms so a slightly-wandering mouse doesn't collapse the menu */
  transition: opacity 180ms ease 180ms, transform 180ms ease 180ms, visibility 0ms linear 360ms;
  z-index: 90;
  --ari-text-accent: var(--ari-ink);
}
.primary-nav li:hover > .sub-menu, .primary-nav li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  /* Open immediately with no delay */
  transition: opacity 150ms ease 0ms, transform 150ms ease 0ms, visibility 0ms linear 0ms;
}
.primary-nav .sub-menu li { width: 100%; }
.primary-nav .sub-menu a { display: block; padding: 0.5rem 0.75rem; border-radius: 0; font-size: 0.9rem; font-weight: 400; color: var(--ari-color-text); }
.primary-nav .sub-menu a:hover, .primary-nav .sub-menu a:focus-visible { background: var(--ari-color-surface); color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.primary-nav .sub-menu a::before { display: none; }

/* ── Programs mega-menu trigger caret ─────────────────────────────── */
.primary-nav .has-programs-mega > a::after {
  content: ""; display: inline-block; width: 0; height: 0; flex-shrink: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: 0.6;
  transition: transform 200ms ease;
}
.primary-nav .has-programs-mega.is-mega-open > a::after { transform: rotate(180deg); }

/* ── Programs mega-menu panel ─────────────────────────────────────── */
.site-header__nav-row { position: relative; overflow: visible; }

.programs-mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  width: 100vw; max-width: calc(var(--ari-max-width) + 4rem);
  background: var(--ari-color-dark, var(--ari-ink));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  box-shadow: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 90;
  --ari-text-accent: var(--ari-apricot);
}
.programs-mega.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.programs-mega__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2rem 0 1.75rem;
}

.programs-mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.prog-card {
  display: flex; flex-direction: column; text-decoration: none;
  border-radius: 0; overflow: hidden;
  background: rgba(255,255,255,0.04);
  transition: background 180ms ease;
}
.prog-card:hover, .prog-card:focus-visible { background: rgba(255,255,255,0.09); outline: none; }

.prog-card__img {
  aspect-ratio: 16 / 9;
  background-size: cover; background-position: center;
  background-color: rgba(255,255,255,0.06);
}
.prog-card__img--empty { background-color: rgba(255,255,255,0.06); }

.prog-card__body { padding: 0.875rem 1rem 1rem; }

.prog-card__title {
  font-family: var(--font-role-reading); font-size: 0.9rem; font-weight: var(--weight-reading-h2); line-height: 1.35;
  color: #ffffff; margin: 0 0 0.4rem;
}

.prog-card__desc {
  font-size: 0.8125rem; color: rgba(255,255,255,0.6); margin: 0;
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.programs-mega__all {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1.25rem;
  color: var(--ari-text-accent); font-size: 0.875rem; font-weight: 600;
  text-decoration: none; transition: gap 150ms ease;
  text-decoration-color: var(--ari-color-accent);
}
.programs-mega__all:hover { gap: 0.65rem; }

/* ============================================================
   TOPICS MEGA MENU  (.topics-mega / .topic-mega-card)
   ============================================================ */

/* ── Trigger caret ────────────────────────────────────────── */
.primary-nav .has-topics-mega > a::after {
  content: ""; display: inline-block; width: 0; height: 0; flex-shrink: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: 0.6;
  transition: transform 200ms ease;
}
.primary-nav .has-topics-mega.is-mega-open > a::after { transform: rotate(180deg); }

/* ── Panel ────────────────────────────────────────────────── */
.topics-mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  width: 100vw; max-width: calc(var(--ari-max-width) + 4rem);
  background: var(--ari-color-dark, var(--ari-ink));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  box-shadow: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 90;
  --ari-text-accent: var(--ari-apricot);
}
.topics-mega.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.topics-mega__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2rem 0 1.75rem;
}

/* 4-col grid for up to 12 topic items */
.topics-mega__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}
/* ── Topic mega-menu card: text-only with left accent stripe ──────────
   Named distinctly from the editorial-tile `.topic-card` used on
   template-pages-topics.php (see the "TOPIC CARD: full-bleed editorial tile"
   section below). Sharing the unscoped selector let whichever block loaded
   later win on pages rendering both (e.g. /topics/, which shows this
   mega-menu and the editorial grid), turning these cards from flex to block.
   Keep the two components on separate class names. ─────────────────── */
.topic-mega-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
  text-decoration: none;
  border-radius: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  transition: background 180ms ease;
  min-height: 0;
}
.topic-mega-card:hover, .topic-mega-card:focus-visible {
  background: rgba(255,255,255,0.09);
  outline: none;
}
.topic-mega-card:hover .topic-mega-card__accent,
.topic-mega-card:focus-visible .topic-mega-card__accent { background: var(--ari-color-accent); }
.topic-mega-card:hover .topic-mega-card__arrow,
.topic-mega-card:focus-visible .topic-mega-card__arrow { opacity: 1; transform: translate(2px, -2px); }

/* Left accent stripe */
.topic-mega-card__accent {
  flex-shrink: 0;
  width: 3px;
  align-self: stretch;
  background: rgba(219, 89, 33, 0.35);
  transition: background 180ms ease;
}

/* Text body: right/bottom padding reserved so text never runs under the corner arrow */
.topic-mega-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem 0.85rem 1.75rem 0.85rem;
  min-width: 0;
}

.topic-mega-card__title {
  display: block;
  font-family: var(--font-role-reading);
  font-size: 0.875rem;
  font-weight: var(--weight-reading-h2);
  line-height: 1.3;
  color: #ffffff;
}

.topic-mega-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}

/* Arrow icon: pinned to the card's bottom corner, independent of text length/card height.
   inset-inline-start flips for RTL (Arabic) automatically; dim by default so it's visible
   without hover (touch devices), full strength on hover/focus. */
.topic-mega-card__arrow {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-start: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ari-text-accent);
  opacity: 0.45;
  transform: translate(0, 0);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

/* ── Footer row ───────────────────────────────────────────── */
.topics-mega__footer {
  display: block;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.topics-mega__all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ari-text-accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: gap 150ms ease;
  text-decoration-color: var(--ari-color-accent);
}
.topics-mega__all:hover { gap: 0.65rem; }

/* ============================================================
   PUBLICATIONS MEGA MENU
   ============================================================ */

/* Caret for Publications trigger */
.primary-nav .has-pub-mega > a::after {
  content: ""; display: inline-block; width: 0; height: 0; flex-shrink: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: 0.6;
  transition: transform 200ms ease;
}
.primary-nav .has-pub-mega.is-mega-open > a::after { transform: rotate(180deg); }

/* Publications has its own .pub-mega panel: suppress the default sub-menu so it doesn't show alongside it */
.primary-nav .has-pub-mega > .sub-menu { display: none !important; }

/* Panel container */
.pub-mega {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 100vw; max-width: calc(var(--ari-max-width) + 4rem);
  background: var(--ari-ink);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  box-shadow: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 90;
  --ari-text-accent: var(--ari-apricot);
}
.pub-mega.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.pub-mega__inner { padding: 2rem 0 2.25rem; }

/* Two-column layout */
.pub-mega__layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  min-height: 260px;
  /* .pub-mega__inner is flex (see .site-header__nav-row > .u-container);
     without an explicit width this grid is a flex item sized to its own
     content instead of filling the row, which used to collapse it whenever
     a panel's content had no large intrinsic size (ghost/placeholder cards,
     or any panel without real <img>s). */
  width: 100%;
}

/* ── Left column: category list ─────────────────────────── */
.pub-mega__cats {
  list-style: none; margin: 0; padding: 0;
  border-right: 1px solid rgba(255,255,255,0.08);
  padding-right: 0;
  display: flex; flex-direction: column; gap: 2px;
}

.pub-mega__cat a {
  display: block;
  padding: 0.65rem 1.25rem;
  font-size: 0.875rem; font-weight: 400;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  border-radius: 0;
  transition: color 150ms ease, background 150ms ease;
  white-space: nowrap;
}
.pub-mega__cat:hover a,
.pub-mega__cat.is-active a {
  color: #ffffff;
  background: rgba(255,255,255,0.06);
}
.pub-mega__cat.is-active a {
  color: var(--ari-text-accent);
  font-weight: 600;
  background: rgba(219, 89, 33, 0.08);
  text-decoration-color: var(--ari-color-accent);
}

/* ── Right column: card panels ───────────────────────────── */
.pub-mega__right { padding-left: 2rem; position: relative; }

.pub-mega__panel {
  position: relative; /* anchors the empty-state overlay below */
  display: none;
  flex-direction: column;
  gap: 1.25rem;
}
.pub-mega__panel.is-active { display: flex; }

/* Empty category: an invisible "ghost" card row, built from the exact same
   markup/CSS as a populated panel (minus any <img>, so nothing is
   fetched), reserves the same height/width as a populated panel at any
   viewport width, with no fixed/guessed pixel value. The actual message is
   absolutely positioned over it (so it doesn't add a 3rd flex-gap slot
   after cards + see-all) and centered. */
.pub-mega__cards--ghost,
.pub-mega__see-all--ghost { visibility: hidden; }
/* Ghost card bodies have no title/excerpt text, so without this they're
   just padding. Reserve the same height a real 2-line title + 2-line
   excerpt would take, matching .pub-card__title / .pub-card__excerpt's own
   font-size * line-height below, so the ghost row's height tracks a real
   card row instead of guessing a flat pixel value. */
.pub-mega__cards--ghost .pub-card__body {
  min-height: calc(2 * 0.875rem * 1.35 + 2 * 0.75rem * 1.55 + 0.4rem);
}
.pub-mega__empty {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  font-size: 0.875rem;
}

/* Card grid: 3 columns */
.pub-mega__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* Individual card: scoped to mega-menu to avoid conflicts with archive card styles */
.pub-mega .pub-card {
  display: flex; flex-direction: column;
  text-decoration: none;
  border-radius: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.pub-mega .pub-card:hover,
.pub-mega .pub-card:focus-visible {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-2px);
  outline: none;
}

.pub-mega .pub-card__img-wrap {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.pub-mega .pub-card__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 280ms ease;
}
.pub-mega .pub-card:hover .pub-card__img { transform: scale(1.04); }
.pub-mega .pub-card__img-placeholder {
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.05);
}

.pub-mega .pub-card__body {
  padding: 0.875rem 1rem 1rem;
  flex: 1; display: flex; flex-direction: column; gap: 0.4rem;
}

.pub-mega .pub-card__title {
  font-family: var(--font-role-reading); font-size: 0.875rem; font-weight: var(--weight-reading-h2);
  color: #ffffff !important; margin: 0;
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pub-mega .pub-card__title a {
  color: #ffffff !important;
  text-decoration: none;
}
.pub-mega .pub-card__title a:hover {
  color: var(--ari-text-accent) !important;
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}

.pub-mega .pub-card__excerpt {
  font-size: 0.8125rem; color: rgba(255,255,255,0.5);
  margin: 0; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.pub-mega .pub-card__meta { color: rgba(255,255,255,0.5); }
.pub-mega .pub-card__type { color: var(--ari-text-accent); }
.pub-mega .pub-card__date { color: rgba(255,255,255,0.45); }

/* See-all link */
.pub-mega__see-all {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--ari-text-accent);
  font-size: 0.8125rem; font-weight: 600;
  text-decoration: none; transition: gap 150ms ease;
  align-self: flex-start;
  text-decoration-color: var(--ari-color-accent);
}
.pub-mega__see-all:hover { gap: 0.65rem; }

/* Early stub to prevent FOUC; the footer section further down overrides it. */
.footer-nav__menu { list-style: none; margin: 0; padding: 0; }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */

.primary-menu-drawer {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: min(340px, 90vw); background: #ffffff; z-index: 200;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 300ms;
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: none;
  --ari-text-accent: var(--ari-ink);
}
.primary-menu-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
}

/* RTL: drawer sits at inline-start = right; hide by sliding RIGHT, shadow flips.
   Dual selector: [dir="rtl"] covers WPML html attr; body.rtl covers WP body_class(). */
[dir="rtl"] .primary-menu-drawer,
body.rtl .primary-menu-drawer {
  transform: translateX(100%);
  box-shadow: none;
}
[dir="rtl"] .primary-menu-drawer.is-open,
body.rtl .primary-menu-drawer.is-open { transform: translateX(0); }

.primary-menu-drawer__inner {
  display: flex; flex-direction: column; min-height: 100%;
  padding: var(--ari-space-5); gap: var(--ari-space-5);
}
.primary-menu-drawer__header { display: flex; align-items: center; justify-content: space-between; }

.primary-menu-drawer__close {
  width: 2.25rem; height: 2.25rem;
  border-radius: 0;
  border: 1px solid var(--ari-color-border);
  background: transparent; color: var(--ari-color-text);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: color 160ms ease, border-color 160ms ease;
}
.primary-menu-drawer__close:hover { color: var(--ari-text-accent); border-color: var(--ari-color-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.primary-menu-drawer__footer { margin-block-start: auto; display: flex; flex-direction: column; gap: var(--ari-space-4); }

.drawer-nav__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.drawer-nav__menu a { display: block; padding: 0.7rem 0.85rem; border-radius: 0; font-size: 1rem; font-weight: 500; color: var(--ari-color-text); transition: background 150ms ease, color 150ms ease; }
.drawer-nav__menu a:hover, .drawer-nav__menu a:focus-visible { background: var(--ari-color-surface); color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }

/* ── Collapsible submenus ─────────────────────────────────────────────────
   Each .menu-item-has-children becomes a flex-wrap row so the link and
   the injected toggle button sit side-by-side, and the <ul class="sub-menu">
   below them takes the full row width.                                    */
.drawer-nav .menu-item-has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.drawer-nav .menu-item-has-children > a {
  flex: 1 1 auto;
  min-width: 0; /* prevent long title from overflowing */
}

/* Chevron toggle button: injected by JS before each .sub-menu */
.drawer-submenu-toggle {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--ari-color-border);
  border-radius: 0;
  color: var(--ari-color-text-muted);
  cursor: pointer;
  margin-inline-start: 0.25rem;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.drawer-submenu-toggle:hover { color: var(--ari-text-accent); border-color: var(--ari-color-accent); background: rgba(219, 89, 33, 0.06);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.drawer-submenu-toggle:focus-visible { outline: 2px solid var(--ari-color-accent); outline-offset: 2px; }
.drawer-submenu-toggle svg { transition: transform 260ms ease; pointer-events: none; }
/* Rotate chevron 180° when parent is expanded */
.drawer-nav .menu-item-has-children.is-expanded > .drawer-submenu-toggle svg { transform: rotate(180deg); }

/* Sub-menu: full width row; height animated via JS (0px ↔ scrollHeight) */
/* Use logical padding so indentation flips correctly in RTL */
.drawer-nav .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 1rem;
  flex-basis: 100%;
  overflow: hidden;
  transition: height 260ms cubic-bezier(0.4, 0, 0.2, 1);
  /* height is managed by JS; initial state (open) set inline on page load */
}
.drawer-nav .sub-menu a { font-size: 0.9rem; color: var(--ari-color-text-muted); padding: 0.55rem 0.75rem; }

/* ── Active / current page indicators ────────────────────────────────────
   WordPress adds .current-menu-item on the active item and
   .current-menu-ancestor / .current-menu-parent on its ancestor chain.   */
.drawer-nav .current-menu-item > a {
  color: var(--ari-text-accent);
  font-weight: 600;
  background: rgba(219, 89, 33, 0.07);
  border-inline-start: 3px solid var(--ari-color-accent);
  /* Compensate left padding for the 3px border so text stays aligned */
  padding-inline-start: calc(0.85rem - 3px);
  text-decoration-color: var(--ari-color-accent);
}
.drawer-nav .current-menu-ancestor > a,
.drawer-nav .current-menu-parent > a {
  color: var(--ari-text-accent);
  background: rgba(219, 89, 33, 0.04);
  text-decoration-color: var(--ari-color-accent);
}

.site-overlay {
  position: fixed; inset: 0;
  background: rgba(10,5,3,0.45); backdrop-filter: blur(2px);
  z-index: 190; opacity: 0; visibility: hidden;
  transition: opacity 280ms ease, visibility 280ms ease;
}
.site-overlay.is-active { opacity: 1; visibility: visible; }

/* ============================================================
   NEWSLETTER POPUP
   Site-wide subscribe prompt (see inc/newsletter-popup.php).
   Reuses .nl-form* styles (defined near the /newsletters/ page rules)
   for the input/consent/submit so both surfaces stay visually in sync.
   ============================================================ */

.newsletter-popup-overlay {
  position: fixed; inset: 0;
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 4, 1, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  padding: 1.5rem;
  transition: opacity 240ms ease, visibility 240ms ease;
}
.newsletter-popup-overlay.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
}

.newsletter-popup {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  padding: 2.25rem 2rem 2rem;
  transform: translateY(12px) scale(0.98);
  transition: transform 240ms ease;
  --ari-text-accent: var(--ari-ink);
}
.newsletter-popup-overlay.is-open .newsletter-popup {
  transform: translateY(0) scale(1);
}

.newsletter-popup__close {
  position: absolute; top: 0.9rem; right: 0.9rem;
  width: 2.25rem; height: 2.25rem;
  border-radius: 0;
  border: 1.5px solid var(--ari-light-grey);
  background: transparent; color: var(--ari-warm-grey);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.newsletter-popup__close:hover,
.newsletter-popup__close:focus-visible {
  background: var(--ari-off-white); border-color: var(--ari-light-grey); color: var(--ari-ink);
}

.newsletter-popup__eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ari-text-accent);
}
.newsletter-popup__heading {
  margin: 0 0 0.6rem;
  font-family: var(--font-role-display);
  font-size: 1.5rem; font-weight: var(--weight-display-title); letter-spacing: -0.02em; line-height: 1.15;
  color: var(--ari-ink);
  padding-inline-end: 1.5rem; /* keep clear of the close button */
}
.newsletter-popup__desc {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem; line-height: 1.55;
  color: var(--ari-warm-grey);
}

.newsletter-popup__archive-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1.25rem;
  font-size: 0.85rem; font-weight: 600;
  color: var(--ari-warm-grey);
  text-decoration: none;
}
.newsletter-popup__archive-link:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }

/* ============================================================
   NEWSLETTER BAR
   Lightweight bottom teaser, distinct from the modal above (see
   inc/newsletter-popup.php). Sits below the search overlay (z-index 280)
   and the popup overlay (z-index 500) so both cover it if opened.
   ============================================================ */

.newsletter-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 250;
  background: var(--ari-ink);
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: none;
  padding: 0.9rem 0;
  transform: translateY(100%);
  transition: transform 320ms ease;
  --ari-text-accent: var(--ari-apricot);
}
.newsletter-bar.is-open { transform: translateY(0); }

.newsletter-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.newsletter-bar__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
}
.newsletter-bar__text strong {
  color: #fff;
  font-weight: 600;
  margin-inline-end: 0.3em;
}

.newsletter-bar__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.newsletter-bar__cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.6rem 1.35rem;
  border-radius: 0;
  border: none;
  background: var(--ari-color-accent-strong);
  color: #fff;
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}
.newsletter-bar__cta:hover,
.newsletter-bar__cta:focus-visible {
  background: var(--ari-ember-dark);
  transform: translateY(-1px);
}

.newsletter-bar__close {
  width: 2rem; height: 2rem;
  flex-shrink: 0;
  border-radius: 0;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: transparent;
  color: rgba(255,255,255,0.6);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.newsletter-bar__close:hover,
.newsletter-bar__close:focus-visible {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.08);
}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */

/* ── Overlay backdrop ──────────────────────────────────────────────────── */
.header-search-overlay {
  position: fixed; inset: 0;
  z-index: 280;
  display: flex; align-items: flex-start; justify-content: center;
  background: rgba(8, 4, 1, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
  padding-top: var(--ari-header-height, 80px);
}
.header-search-overlay.is-open {
  opacity: 1; pointer-events: auto;
}

/* ── Close button: top-right corner ───────────────────────────────────── */
.header-search-overlay__close {
  position: fixed; top: 1.25rem; right: 1.5rem;
  width: 2.5rem; height: 2.5rem;
  border-radius: 0;
  border: 1.5px solid rgba(255,255,255,0.3);
  background: transparent; color: rgba(255,255,255,0.8);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
  z-index: 1;
}
.header-search-overlay__close:hover,
.header-search-overlay__close:focus-visible {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.65);
  color: #fff;
}

/* ── Shell: card that holds all live-search UI ─────────────────────────── */
.header-search-overlay__shell {
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - var(--ari-header-height, 80px) - 2rem);
  margin: 0 1rem;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-8px);
  transition: transform 220ms ease;
  --ari-text-accent: var(--ari-ink);
}
.header-search-overlay.is-open .header-search-overlay__shell {
  transform: translateY(0);
}

/* ── Input bar ──────────────────────────────────────────────────────────── */
.search-live__bar {
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.search-live__form {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 1rem 0 1.25rem;
  /* Focus indicator for #header-search-input, drawn on the row rather than on
     the borderless input itself. box-shadow, not outline: it hugs the row and
     cannot straddle the overlay edge the way the old outline did. */
  box-shadow: inset 0 -2px 0 transparent;
  transition: box-shadow 160ms ease;
}
.search-live__form:focus-within {
  box-shadow: inset 0 -2px 0 var(--ari-color-accent);
}
@media (prefers-reduced-motion: reduce) {
  .search-live__form { transition: none; }
}
.search-live__icon {
  flex-shrink: 0;
  color: var(--ari-warm-grey);
  display: flex; align-items: center;
  margin-right: 0.65rem;
  pointer-events: none;
}
.search-live__input {
  flex: 1;
  padding: 1.1rem 0;
  border: none; outline: none;
  font-size: 1.1rem; font-family: var(--font-role-interface);
  color: var(--ari-color-text, var(--ari-ink));
  background: transparent;
  min-width: 0;
}
.search-live__input::placeholder { color: var(--ari-warm-grey); }
/* Suppress native webkit search chrome */
.search-live__input::-webkit-search-decoration,
.search-live__input::-webkit-search-cancel-button,
.search-live__input::-webkit-search-results-button,
.search-live__input::-webkit-search-results-decoration { display: none; }

/* Spinner, clear button and idle hint set display, which would override [hidden] */
.header-search-overlay [hidden] { display: none !important; }

.search-live__spinner {
  flex-shrink: 0;
  color: var(--ari-text-accent);
  display: flex; align-items: center;
  animation: ari-spin 0.8s linear infinite;
}
@keyframes ari-spin { to { transform: rotate(360deg); } }

/* Clear button */
.search-live__clear {
  flex-shrink: 0;
  width: 1.75rem; height: 1.75rem;
  border-radius: 0;
  border: none; background: var(--ari-off-white);
  color: var(--ari-warm-grey); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 140ms ease;
  --ari-text-accent: var(--ari-ink);
}
.search-live__clear:hover { background: #e4ddd8; color: var(--ari-ink); }

/* Submit button */
.search-live__submit {
  flex-shrink: 0;
  margin-left: 0.75rem;
  padding: 0.6rem 1.25rem;
  background: var(--ari-color-accent-strong);
  color: #fff; border: none; border-radius: 0;
  font-weight: 600; font-size: 0.88rem;
  cursor: pointer; white-space: nowrap;
  transition: background 160ms ease;
}
.search-live__submit:hover { background: var(--ari-color-accent-2, var(--ari-ember-dark)); }

/* ── Type-filter pills ─────────────────────────────────────────────────── */
.search-live__pills {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  overflow-x: auto;
  scrollbar-width: none;
}
.search-live__pills::-webkit-scrollbar { display: none; }

.search-live__pill {
  flex-shrink: 0;
  padding: 0.3rem 0.85rem;
  border-radius: 0;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: transparent;
  font-size: 0.8125rem; font-weight: 600;
  color: var(--ari-warm-grey); cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
  white-space: nowrap;
}
.search-live__pill:hover {
  border-color: var(--ari-color-accent);
  color: var(--ari-text-accent);
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}
.search-live__pill.is-active {
  border-color: var(--ari-color-accent);
  background: var(--ari-color-accent-strong);
  color: #fff;
}

/* ── Results panel ─────────────────────────────────────────────────────── */
.search-live__results {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* Idle + empty states */
.search-live__idle,
.search-live__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1.5rem;
  color: var(--ari-warm-grey);
  font-size: 0.9rem;
  text-align: center;
}
.search-live__empty svg { opacity: 0.4; }
.search-live__empty-text { margin: 0; font-size: 0.95rem; color: var(--ari-warm-grey); }

/* Groups wrapper */
.search-live__groups {
  padding-bottom: 0.5rem;
}

/* Single group (e.g. "Publications") */
.search-live__group {
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.search-live__group:last-child { border-bottom: none; }

.search-live__group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem 0.4rem;
}
.search-live__group-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ari-warm-grey);
}
.search-live__group-all {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ari-text-accent);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.25rem;
  transition: opacity 140ms ease;
}
.search-live__group-all:hover { opacity: 0.8; }

/* Individual result item */
.search-live__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 1.25rem;
  text-decoration: none;
  color: inherit;
  border-radius: 0;
  transition: background 120ms ease;
  outline-offset: -2px;
}
.search-live__item:hover,
.search-live__item:focus-visible,
.search-live__item.is-focused {
  background: rgba(219, 89, 33, 0.055);
  outline: none;
}

/* Thumbnail */
.search-live__item-thumb {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 0;
  overflow: hidden;
  background: var(--ari-off-white);
  position: relative;
  --ari-text-accent: var(--ari-ink);
}
.search-live__item-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Play badge on video items */
.search-live__item-thumb--video::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.3)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='white'%3E%3Cpolygon points='5 3 19 12 5 21'/%3E%3C/svg%3E")
    center/14px no-repeat;
  border-radius: 0;
  --ari-text-accent: var(--ari-ink);
}
/* Placeholder icon for items without a thumbnail */
.search-live__item-thumb--placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--ari-warm-grey);
}
.search-live__item-thumb--placeholder svg { opacity: 0.5; }

.search-live__item-body {
  flex: 1;
  min-width: 0;
}
.search-live__item-title {
  font-family: var(--font-role-reading);
  font-size: 0.9rem;
  font-weight: var(--weight-reading-h2);
  color: var(--ari-color-text, var(--ari-ink));
  margin: 0 0 0.18rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-live__item-meta {
  font-size: 0.8125rem;
  color: var(--ari-warm-grey);
  display: flex; align-items: center; gap: 0.4rem;
}
.search-live__item-type {
  display: inline-block;
  padding: 0.08em 0.5em;
  background: rgba(219, 89, 33, 0.1);
  color: var(--ari-text-accent);
  border-radius: 0;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.search-live__item-date { color: var(--ari-warm-grey); }

/* ── "See all N results" footer link ───────────────────────────────────── */
.search-live__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(0,0,0,0.07);
  background: var(--ari-sand);
  flex-shrink: 0;
  --ari-text-accent: var(--ari-ink);
}
.search-live__footer-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.88rem; font-weight: 600;
  color: var(--ari-text-accent);
  text-decoration: none;
  padding: 0.55rem 1.25rem;
  border: 1.5px solid currentColor;
  border-radius: 0;
  transition: background 140ms ease, color 140ms ease;
  text-decoration-color: var(--ari-color-accent);
}
.search-live__footer-link:hover {
  background: var(--ari-ember-dark);
  color: #fff;
}

/* ============================================================
   CONTENT GRIDS & CARDS
   ============================================================ */

.content-grid { display: grid; gap: 1rem; }

.content-card { background: #ffffff; border: 1px solid var(--ari-color-border); border-radius: 0; padding: 1rem; box-shadow: var(--ari-shadow);  --ari-text-accent: var(--ari-ink); }
.content-card h3, .content-card h2 { margin: 0.75rem 0 0; font-family: var(--font-role-reading); font-weight: var(--weight-reading-h2); line-height: 1.2; }

/* ============================================================
   PROGRAMS ARCHIVE  (archive-program.php)
   ============================================================ */

/* ── Archive section wrapper ─────────────────────────────────── */
.prog-arc-section {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}

/* ── Three-column grid ───────────────────────────────────────── */
.prog-arc-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* ── Program archive card ────────────────────────────────────── */
.prog-arc-card {
  position: relative;          /* contains the stretched-link ::after */
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ari-color-border);
  border-radius: 0;
  overflow: hidden;
  transition: box-shadow 240ms ease, transform 240ms ease;
  --ari-text-accent: var(--ari-ink);
}
.prog-arc-card:hover,
.prog-arc-card:focus-within {
  box-shadow: none;
  transform: translateY(-4px);
}

/* ── Image / color swatch ────────────────────────────────────── */
.prog-arc-card__img-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--ari-color-dark);
  flex-shrink: 0;
  --ari-text-accent: var(--ari-apricot);
}
/* Color variants mirror single-program hero tints */
.prog-arc-card__img-wrap--green     { background-color: var(--ari-umber); /* brand: no programme colour coding */  --ari-text-accent: var(--ari-apricot); }
.prog-arc-card__img-wrap--orange    { background-color: var(--ari-umber); /* brand: no programme colour coding */  --ari-text-accent: var(--ari-apricot); }
.prog-arc-card__img-wrap--kaki      { background-color: var(--ari-umber); /* brand: no programme colour coding */  --ari-text-accent: var(--ari-apricot); }
.prog-arc-card__img-wrap--turquoise { background-color: var(--ari-umber); /* brand: no programme colour coding */  --ari-text-accent: var(--ari-apricot); }
.prog-arc-card__img-wrap--purple    { background-color: var(--ari-umber); /* brand: no programme colour coding */  --ari-text-accent: var(--ari-apricot); }
.prog-arc-card__img-wrap--yellow    { background-color: var(--ari-umber); /* brand: no programme colour coding */  --ari-text-accent: var(--ari-apricot); }

.prog-arc-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms ease;
}
.prog-arc-card:hover .prog-arc-card__img,
.prog-arc-card:focus-within .prog-arc-card__img {
  transform: scale(1.05);
}
.prog-arc-card__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.06) 55%);
  pointer-events: none;
}

/* ── Body ────────────────────────────────────────────────────── */
.prog-arc-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.25rem 1.25rem 0.875rem;
  flex: 1;
}
.prog-arc-card__title {
  margin: 0;
  font-family: var(--font-role-reading);
  font-size: 1.05rem;
  font-weight: var(--weight-reading-h2);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Stretched link: ::after pseudo covers the entire card,
   making the whole surface clickable without nesting <a> tags.
   The lead expert link (z-index: 2) sits above the overlay. */
.prog-arc-card__title-link {
  color: var(--ari-color-text);
  text-decoration: none;
}
.prog-arc-card__title-link:hover,
.prog-arc-card:hover .prog-arc-card__title-link {
  color: var(--ari-text-accent);
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}
.prog-arc-card__title-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 0;
}
.prog-arc-card__title-link:focus-visible {
  outline: none;  /* outline moved to ::after so it covers the whole card */
}
.prog-arc-card__title-link:focus-visible::after {
  outline: 2px solid var(--ari-color-accent);
  outline-offset: -2px;
}

.prog-arc-card__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ari-color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Topic chips */
.prog-arc-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  margin: 0.375rem 0 0;
  padding: 0;
}
.prog-arc-card__tag {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ari-color-text-muted);
  background: var(--ari-color-surface);
  border-radius: 0;
  padding: 0.2rem 0.65rem;
  white-space: nowrap;
  line-height: 1.5;
  --ari-text-accent: var(--ari-ink);
}

/* ── Lead expert footer ──────────────────────────────────────── */
.prog-arc-card__expert {
  position: relative;
  z-index: 2;           /* above the stretched-link ::after */
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--ari-color-border);
  margin-top: auto;
}
.prog-arc-card__expert-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ari-color-text);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: color 160ms ease;
}
.prog-arc-card__expert-link:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.prog-arc-card__expert-link:focus-visible {
  outline: 2px solid var(--ari-color-accent);
  outline-offset: 2px;
  border-radius: 0;
}
.prog-arc-card__expert-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ari-color-border);
  background: var(--ari-color-surface);
  flex-shrink: 0;
  --ari-text-accent: var(--ari-ink);
}
.prog-arc-card__expert-initial {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ari-color-accent-strong);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.prog-arc-card__expert-name {
  /* truncate long names */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 18ch;
}

/* ── Empty state ─────────────────────────────────────────────── */
.prog-arc-empty {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 0;
  color: var(--ari-color-text-muted);
  font-size: 1rem;
}

/* ============================================================
   PROGRAM SINGLE PAGE
   ============================================================ */

/* ── Hero ──────────────────────────────────────────────────── */
.prog-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center center;
  background-color: var(--ari-ink);
  padding-bottom: 2.75rem;
  --ari-text-accent: var(--ari-apricot);
}
/* Two-layer overlay:
   1. Bottom-up gradient: darkens lower third for title legibility
   2. Left-side wash: gentle tint behind the text column only */
.prog-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(5, 8, 18, 0.85) 0%,
      rgba(5, 8, 18, 0.45) 38%,
      rgba(5, 8, 18, 0.12) 100%
    ),
    linear-gradient(
      to right,
      rgba(5, 8, 18, 0.50) 0%,
      rgba(5, 8, 18, 0.00) 58%
    );
}
.prog-hero .u-container { position: relative; z-index: 1; }
.prog-hero__inner { max-width: 560px; }
.prog-hero__title {
  font-family: var(--font-role-display);
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: var(--weight-display-title);
  color: #fff;
  line-height: 1.18;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.40);
}
/* "Programs:" prefix: white, same as rest of title; accent on hover only */
.prog-hero__back {
  color: #fff;
  text-decoration: none;
  transition: color 150ms;
}
.prog-hero__back:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.prog-hero__sep { color: #fff; }
/* Optional tagline under the title, campaign hero only (ari_project_tagline) */
.prog-hero__subtitle {
  font-family: var(--font-role-reading);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin: 0.625rem 0 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* ── Tab navigation ────────────────────────────────────────── */
.prog-tabs {
  background: var(--ari-off-white);
  position: sticky;
  top: var(--ari-header-height, 130px);
  z-index: 90;
  padding: 0.875rem 0;
  transition: box-shadow 200ms ease;
  --ari-text-accent: var(--ari-ink);
}
.prog-tabs.is-sticky { box-shadow: none; }
.prog-tabs__inner {
  display: inline-flex;
  gap: 0.15rem;
  overflow-x: auto;
  scrollbar-width: none;
  background: #fff;
  border: 1px solid var(--ari-light-grey);
  border-radius: 0;
  padding: 0.3rem;
  box-shadow: none;
  --ari-text-accent: var(--ari-ink);
}
.prog-tabs__inner::-webkit-scrollbar { display: none; }
.prog-tab {
  flex-shrink: 0;
  padding: 0.45rem 1.25rem;
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ari-warm-grey);
  text-decoration: none;
  transition: background 150ms, color 150ms;
  white-space: nowrap;
}
.prog-tab:hover { background: var(--ari-off-white); color: var(--ari-ink); }
.prog-tab.is-active {
  background: var(--ari-color-accent-strong);
  color: #fff;
}
/* Sub-entries for a type group auto-split out of a tab's mixed content
   (e.g. "Projects" surfaced from inside the "Publications" tab); same
   control as the primary tabs, styled identically so the nav reads as one
   consistent row instead of flagging the sub-entry as secondary. */

/* ── Two-column layout ─────────────────────────────────────── */
.prog-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
  padding: 3rem 0 4rem;
  align-items: start;
}
/* No sidebar: single column, content capped for readability */
.prog-layout--full {
  grid-template-columns: 1fr;
}
.prog-layout--full .prog-content {
  max-width: 820px;
  margin-inline: auto;
}
/* margin-inline:auto makes this grid item shrink to fit its content. Campaign
   page-builder blocks (media frames, timeline track) have no intrinsic width,
   so a campaign built mostly from blocks would get a narrow column. Fill the
   column instead (max-width caps above still apply). Scoped with :has() so
   other pages using .prog-layout are unaffected. */
.prog-layout--full .prog-content:has([class*="wp-block-ari-v2-campaign-"]) {
  width: 100%;
}
/* Opt out of the 820px prose cap: for pages whose sidebar-less content is
   mostly a related-items grid rather than long-form text (Issues already
   used "issue-layout" for this; "prog-layout--wide" is the same override
   under a name that isn't Issues-specific, for Campaigns/Dossiers). */
.issue-layout.prog-layout--full .prog-content,
.prog-layout--wide.prog-layout--full .prog-content {
  max-width: 100%;
}
/* ...but the prose blocks inside those wide layouts (the WP editor body and
   ACF "text" flex rows) still need the readability cap re-applied; the
   opt-out above is meant for full-width grids, not long-form paragraphs.
   Full lines of justified text at 1100+px are hard to read, and without
   this the Issues/Campaigns/Dossiers intro text stretches edge-to-edge. */
.issue-layout.prog-layout--full .prog-content .prog-body,
.prog-layout--wide.prog-layout--full .prog-content .prog-body {
  max-width: 820px;
  margin-inline: auto;
}
/* Page-builder blocks set to "Wide width" / "Full width" in the editor must be
   able to use the layout's width instead of the 820px prose cap. The cap moves
   from the wrapper to its plain children, so unaligned blocks and text keep the
   readable column while aligned ones fill the container. */
.prog-layout--wide.prog-layout--full .prog-content .prog-body:has(> .alignwide, > .alignfull) {
  max-width: 100%;
}
.prog-layout--wide.prog-layout--full .prog-content .prog-body:has(> .alignwide, > .alignfull) > :not(.alignwide):not(.alignfull) {
  max-width: 820px;
  margin-inline: auto;
}
.prog-layout--wide.prog-layout--full .prog-content .prog-body > .alignwide,
.prog-layout--wide.prog-layout--full .prog-content .prog-body > .alignfull {
  max-width: 100%;
  width: 100%;
}
/* Campaign blocks share the 820px column with prose, matching text-only campaigns.
   A block set to "Wide width" still breaks out via the alignwide rules above. */

/* ── Section wrapper ───────────────────────────────────────── */
/* scroll-margin-top makes clicking a .prog-tab (or any #tab-slug / #about
   hash link) land below both the sticky site header and the sticky
   .prog-tabs bar, instead of scrolling the title behind them.
   --ari-prog-tabs-height is set by theme.js from .prog-tabs' real height. */
.prog-section {
  scroll-margin-top: calc(var(--ari-sticky-top, 130px) + var(--ari-prog-tabs-height, 60px));
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--ari-light-grey);
  margin-bottom: 3rem;
}
.prog-section:last-child { border-bottom: none; margin-bottom: 0; }

.prog-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  /* Auto-split type groups and Experts/Partners get their own nav-anchor id
     directly on this element (not just the enclosing .prog-section), so it
     needs the same sticky-header/tab-bar clearance for direct anchor loads
     (not just JS-driven clicks, which already compute their own offset). */
  scroll-margin-top: calc(var(--ari-sticky-top, 130px) + var(--ari-prog-tabs-height, 60px));
}
/* A "View All" link with no paired heading (space-between has nothing to
   push it against with a single child, so it would otherwise sit flush
   left); see ari_v2_issue_render_head() in single-area_of_work.php. */
.prog-section__head--end {
  justify-content: flex-end;
}
/* A related_publications row can render more than one type group
   (Publications, then Projects, etc.; see ari_v2_issue_flex_item()); give the
   next group's heading breathing room above the previous group's grid. Scoped
   to this adjacency so a section's single trailing grid is unaffected. */
.prog-pub-grid + .prog-section__head {
  margin-top: 2.5rem;
}
.prog-section__title {
  font-family: var(--font-role-display);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: var(--weight-display-title);
  color: var(--ari-ink);
  margin: 0;
}
.prog-section__subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ari-ink);
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
}

/* ── Introduction text ─────────────────────────────────────── */
.prog-intro { margin-bottom: 2rem; }
.prog-intro__text {
  color: var(--ari-ink);
  line-height: 1.8;
  font-size: 1rem;
}

/* ── Body (editor content) ─────────────────────────────────── */
.prog-body { color: var(--ari-ink); line-height: 1.8; }
.prog-body h2 { font-size: 1.25rem; font-weight: 600; color: var(--ari-ink); margin: 2.25rem 0 0.75rem; line-height: 1.25; }
.prog-body h3 { font-size: 1.05rem; font-weight: 600; color: var(--ari-ink); margin: 1.75rem 0 0.6rem; line-height: 1.3; }
.prog-body p  { color: var(--ari-ink); line-height: 1.8; margin-bottom: 1rem; }
.prog-body a  { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); }
.prog-body a.read-more,
.prog-body a:where([class=""]) { font-weight: 600; }

/* ── Cross-cutting areas callout ───────────────────────────── */
.prog-cross-cutting {
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--ari-clay);
  border: 1px solid color-mix(in srgb, var(--ari-color-accent) 28%, var(--ari-light-grey));
  border-inline-start: 5px solid var(--ari-color-accent);
  border-radius: 0;
  background: var(--ari-sand);
  background: color-mix(in srgb, var(--ari-color-accent) 7%, #fff);
  --ari-text-accent: var(--ari-ink);
}
.prog-cross-cutting__text {
  max-width: 62ch;
  margin: 0;
  color: var(--ari-ink);
  font-family: var(--font-role-reading);
  font-size: 1.05rem;
  line-height: 1.7;
}
.prog-cross-cutting__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  color: var(--ari-text-accent);
  font-weight: 600;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--ari-color-accent);
}
.prog-cross-cutting--compact {
  max-width: 760px;
  margin: 2.5rem auto 0;
  padding: 1rem 1.25rem;
}
.prog-cross-cutting--top { max-width: none; margin: 0 0 2rem; }
.prog-cross-cutting--top .prog-cross-cutting__text { max-width: none; }
.prog-cross-cutting--compact .prog-cross-cutting__text { font-size: 1rem; }
.prog-cross-cutting--compact .prog-cross-cutting__link { margin-top: 0.5rem; }
.prog-cross-cutting__link:hover { text-decoration-thickness: 2px; }
.prog-cross-cutting__link:focus-visible {
  outline: 3px solid var(--ari-color-accent);
  outline-offset: 4px;
  border-radius: 0;
}

.single-dossier-page .dossier-intro-section {
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}
.single-dossier-page .dossier-intro-section .prog-body > :last-child { margin-bottom: 0; }
.single-dossier-page .dossier-intro-section .prog-body > p:empty,
.single-dossier-page .dossier-intro-section .prog-body > .wp-block-spacer { display: none; }

/* ── All images inside body: never overflow, always rounded ─ */
.prog-body img,
.prog-body figure img { max-width: 100%; height: auto; display: block; border-radius: 0; }
.prog-body figure { max-width: 100%; margin: 1.25rem 0; }
.prog-body figcaption { font-size: 0.8125rem; color: var(--ari-color-text-muted); /* not #888 (~3.5:1 on white, fails WCAG 1.4.3) */ margin-top: 0.4rem; text-align: center; }

/* ── Classic editor gallery shortcode [gallery] ─────────────── */
.prog-body .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 8px;
  margin: 1.5rem 0;
  clear: both;
}
.prog-body .gallery-item {
  margin: 0;
  overflow: hidden;
  border-radius: 0;
}
.prog-body .gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: 0;
  transition: transform 350ms ease;
}
.prog-body .gallery-item:hover img { transform: scale(1.04); }
.prog-body .gallery-icon { display: block; line-height: 0; height: 100%; }

/* Alternating wide-narrow pattern (repeats every 4 items):
   1 → wide (col 1-2), 2 → narrow (col 3)
   3 → narrow (col 1), 4 → wide (col 2-3) */
.prog-body .gallery-item:nth-child(4n+1) { grid-column: span 2; }
.prog-body .gallery-item:nth-child(4n+2) { grid-column: span 1; }
.prog-body .gallery-item:nth-child(4n+3) { grid-column: span 1; }
.prog-body .gallery-item:nth-child(4n+4) { grid-column: span 2; }

/* ── Gutenberg image block ──────────────────────────────────── */
.prog-body .wp-block-image { margin: 1.25rem 0; max-width: 100%; }
.prog-body .wp-block-image.alignfull,
.prog-body .wp-block-image.alignwide { max-width: 100%; }

/* ── Gutenberg gallery block: same alternating pattern ─────── */
.prog-body .wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 220px;
  gap: 8px;
  margin: 1.5rem 0;
}
/* Gutenberg v2 gallery uses <figure> children */
.prog-body .wp-block-gallery .wp-block-image,
/* Gutenberg v1 gallery uses <ul><li> */
.prog-body .wp-block-gallery li {
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  /* Core's own gallery CSS (.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image))
     sets a percentage `width` sized for ITS flex layout; that rule's :not(#id) selector
     out-specifies our grid-column spans above, so each image shrinks to a fraction of
     its own grid cell instead of filling it. Reset it so the grid item stretches full width. */
  width: auto !important;
}
.prog-body .wp-block-gallery .wp-block-image img,
.prog-body .wp-block-gallery li img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 350ms ease;
}
.prog-body .wp-block-gallery .wp-block-image:hover img,
.prog-body .wp-block-gallery li:hover img { transform: scale(1.04); }

/* Alternating wide-narrow for Gutenberg gallery */
.prog-body .wp-block-gallery .wp-block-image:nth-child(4n+1),
.prog-body .wp-block-gallery li:nth-child(4n+1) { grid-column: span 2; }
.prog-body .wp-block-gallery .wp-block-image:nth-child(4n+2),
.prog-body .wp-block-gallery li:nth-child(4n+2) { grid-column: span 1; }
.prog-body .wp-block-gallery .wp-block-image:nth-child(4n+3),
.prog-body .wp-block-gallery li:nth-child(4n+3) { grid-column: span 1; }
.prog-body .wp-block-gallery .wp-block-image:nth-child(4n+4),
.prog-body .wp-block-gallery li:nth-child(4n+4) { grid-column: span 2; }

/* ── Video / embed blocks ───────────────────────────────────── */
.prog-body .wp-block-embed,
.prog-body .wp-block-video,
.prog-body .jetpack-video-wrapper { margin: 1.5rem 0; }

/* Gutenberg embed wrapper → fluid 16:9 box */
.prog-body .wp-block-embed__wrapper {
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  overflow: hidden;
  border-radius: 0;
  background: var(--ari-ink);
  --ari-text-accent: var(--ari-apricot);
}
.prog-body .wp-block-embed__wrapper iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Jetpack oEmbed wrapper → same fluid treatment */
.prog-body .jetpack-video-wrapper {
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  overflow: hidden;
  border-radius: 0;
  background: var(--ari-ink);
  --ari-text-accent: var(--ari-apricot);
}
.prog-body .jetpack-video-wrapper iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Raw iframes inserted directly (classic editor URL auto-embed) */
.prog-body iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  border: 0;
  border-radius: 0;
}

/* ── Lists ──────────────────────────────────────────────────── */
.prog-body ul,
.prog-body ol { padding-left: 1.5rem; margin-bottom: 1rem; color: var(--ari-ink); line-height: 1.8; }
.prog-body li { margin-bottom: 0.3rem; }

/* ── Publication cards grid ────────────────────────────────── */
.prog-pub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.pub-card {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ari-light-grey);
  transition: box-shadow 200ms;
  --ari-text-accent: var(--ari-ink);
}
.pub-card:hover { box-shadow: none; }
.pub-card__img-wrap { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--ari-off-white);  --ari-text-accent: var(--ari-ink); }
.pub-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.pub-card__img-wrap:hover .pub-card__img { transform: scale(1.04); }
.pub-card__img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--ari-off-white), #d0d0d0);  --ari-text-accent: var(--ari-ink); }
.pub-card__body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.pub-card__meta { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; flex-wrap: wrap; }
.pub-card__type {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ari-text-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pub-card__date { font-size: 0.8125rem; color: var(--ari-color-text-muted); /* not #888 (~3.5:1 on white, fails WCAG 1.4.3) */ }
.pub-card__title {
  font-size: 0.9rem;
  font-family: var(--font-role-reading);
  font-weight: var(--weight-reading-h2);
  line-height: 1.4;
  margin: 0 0 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pub-card__title a { color: var(--ari-ink); text-decoration: none; }
.pub-card__title a:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.pub-card__author { font-size: 0.8125rem; color: var(--ari-color-text-muted); /* not #888 (~3.5:1 on white, fails WCAG 1.4.3) */ margin: auto 0 0; }

/* ── Project cards grid ────────────────────────────────────── */
.prog-project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.proj-card { border-radius: 0; overflow: hidden; border: 1px solid var(--ari-light-grey); }
.proj-card__img-wrap {
  display: block;
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--ari-off-white);
  --ari-text-accent: var(--ari-ink);
}
.proj-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; display: block; }
.proj-card__img-wrap:hover .proj-card__img { transform: scale(1.04); }
.proj-card__img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--ari-off-white), #d0d0d0);  --ari-text-accent: var(--ari-ink); }
.proj-card__status {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  font-size: 0.8125rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.2rem 0.6rem;
  border-radius: 0;
  background: rgba(0,0,0,0.5); color: #fff;
}
.proj-card__status--active   { background: var(--ari-color-accent-strong); }
.proj-card__status--completed { background: var(--ari-umber); }
.proj-card__body { padding: 1rem 1.1rem 1.25rem; }
.proj-card__meta { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.proj-card__type { font-size: 0.8125rem; font-weight: 600; color: var(--ari-text-accent); text-transform: uppercase; letter-spacing: 0.08em; }
.proj-card__timeline { font-size: 0.8125rem; color: var(--ari-color-text-muted); /* not #888 (~3.5:1 on white, fails WCAG 1.4.3) */ }
.proj-card__title { font-family: var(--font-role-reading); font-size: 0.9rem; font-weight: var(--weight-reading-h2); line-height: 1.4; margin: 0 0 0.5rem; }
.proj-card__title a { color: var(--ari-ink); text-decoration: none; }
.proj-card__title a:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.proj-card__excerpt { font-size: 0.82rem; color: var(--ari-warm-grey); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Projects archive (/projects/) ───────────────────────────
   Own namespace, matching every other top-level archive (ev-*,
   jobs-*, pub2-*, pcast-*): reuses the .proj-card component above. */
.proj-arc-section { padding: clamp(2rem, 4vw, 3rem) 0; }
.proj-arc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.proj-arc-empty {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 0;
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
  font-size: 1rem;
}

/* Hero status/timeline chips: single-project.php reuses .prog-hero for
   its dark banner (see that file's header comment) but needs an inline,
   non-absolute badge, unlike the card's positioned .proj-card__status. */
.proj-hero__badges { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.85rem; }
.proj-hero__status {
  display: inline-block;
  font-size: 0.8125rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.25rem 0.75rem;
  border-radius: 0;
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.proj-hero__status--active    { background: var(--ari-color-accent-strong); }
.proj-hero__status--completed { background: var(--ari-umber); }
.proj-hero__timeline { font-size: 0.85rem; color: rgba(255,255,255,0.75); }

/* ── Event cards grid ──────────────────────────────────────── */
.prog-event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.evt-card { border-radius: 0; overflow: hidden; border: 1px solid var(--ari-light-grey); background: #fff;  --ari-text-accent: var(--ari-ink); }
.evt-card__img-wrap {
  display: block;
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--ari-off-white);
  --ari-text-accent: var(--ari-ink);
}
.evt-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; display: block; }
.evt-card__img-wrap:hover .evt-card__img { transform: scale(1.04); }
.evt-card__img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--ari-off-white), #d0d0d0);  --ari-text-accent: var(--ari-ink); }
/* Topic badge overlaid on image bottom-left */
.evt-card__topic-badge {
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
  background: rgba(20,20,20,0.78);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.22rem 0.65rem;
  border-radius: 0;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.evt-card__body { padding: 0.85rem 1rem 1rem; }
.evt-card__meta { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
.evt-card__type { font-size: 0.8125rem; font-weight: 600; color: var(--ari-ink); }
.evt-card__sep { font-size: 0.8125rem; color: var(--ari-light-grey); }
.evt-card__date { font-size: 0.8125rem; color: var(--ari-color-text-muted); /* not #888 (~3.5:1 on white, fails WCAG 1.4.3) */ }
.evt-card__location { font-size: 0.8125rem; font-weight: 600; color: var(--ari-text-accent); text-transform: uppercase; letter-spacing: 0.08em; }
.evt-card__title { font-family: var(--font-role-reading); font-size: 0.88rem; font-weight: var(--weight-reading-h2); line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.evt-card__title a { color: var(--ari-ink); text-decoration: none; }
.evt-card__title a:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }

/* ── Video cards ───────────────────────────────────────────── */
.prog-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.prog-vid-card { border-radius: 0; overflow: hidden; border: 1px solid var(--ari-light-grey); }
.prog-vid-card__thumb-wrap {
  display: block; position: relative;
  aspect-ratio: 16/10; overflow: hidden; background: var(--ari-ink);
  --ari-text-accent: var(--ari-apricot);
}
.prog-vid-card__thumb { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; transition: opacity 200ms; }
.prog-vid-card__thumb-wrap:hover .prog-vid-card__thumb { opacity: 1; }
.prog-vid-card__thumb-placeholder { width: 100%; height: 100%; background: var(--ari-ink);  --ari-text-accent: var(--ari-apricot); }
.prog-vid-card__play-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.prog-vid-card__play-icon svg { filter: none; }
.prog-vid-card__body { padding: 0.85rem 1rem 1rem; }
.prog-vid-card__meta { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; }
.prog-vid-card__type { font-size: 0.8125rem; font-weight: 600; color: var(--ari-text-accent); text-transform: uppercase; letter-spacing: 0.08em; }
.prog-vid-card__date { font-size: 0.8125rem; color: var(--ari-color-text-muted); /* not #888 (~3.5:1 on white, fails WCAG 1.4.3) */ }
.prog-vid-card__title { font-family: var(--font-role-reading); font-size: 0.88rem; font-weight: var(--weight-reading-h2); line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prog-vid-card__title a { color: var(--ari-ink); text-decoration: none; }
.prog-vid-card__title a:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }

/* ── Sidebar ───────────────────────────────────────────────── */
.prog-sidebar { position: sticky; top: calc(var(--ari-header-height, 130px) + 1.5rem); display: flex; flex-direction: column; gap: 1.5rem; }
.prog-sidebar__box {
  background: #fff;
  border: 1px solid var(--ari-light-grey);
  border-radius: 0;
  padding: 1.4rem 1.5rem;
  --ari-text-accent: var(--ari-ink);
}
.prog-sidebar__heading {
  font-family: var(--font-role-interface);
  font-size: 0.8125rem;
  font-weight: var(--weight-interface);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ari-warm-grey);
  margin: 0 0 1.1rem;
}

/* Expert sidebar card (program/project/area-of-work sidebars).
   Named distinctly from the People-directory `.expert-card` (avatar-wrap
   version, further down / archive-people.php): sharing the unscoped selector
   let whichever block loaded later override `align-items`, `padding` and
   `border-bottom` on every page. Keep the two on separate class names. */
.expert-sidebar-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.expert-sidebar-card + .expert-sidebar-card { margin-top: 1rem; }
.expert-sidebar-card__photo {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--ari-light-grey);
}
.expert-sidebar-card--director .expert-sidebar-card__photo { width: 56px; height: 56px; }
.expert-sidebar-card__info { min-width: 0; }
.expert-sidebar-card__name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ari-ink);
  text-decoration: none;
  line-height: 1.3;
}
.expert-sidebar-card__name:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.expert-sidebar-card__org {
  font-size: 0.8125rem;
  color: var(--ari-warm-grey);
  margin: 0.15rem 0 0;
  line-height: 1.3;
}
.expert-sidebar-card__role {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ari-text-accent);
  margin: 0.15rem 0 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.expert-sidebar-card__specialty {
  font-size: 0.8125rem;
  color: var(--ari-color-text-muted); /* not #888 (~3.5:1 on white, fails WCAG 1.4.3) */
  margin: 0.2rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Experts list */
.prog-experts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }

/* Topics / Regions meta */
.prog-sidebar__meta { display: flex; flex-direction: column; gap: 0.75rem; }
.prog-meta-item { display: flex; flex-direction: column; gap: 0.2rem; }
.prog-meta-item__label { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ari-warm-grey); }
.prog-meta-item__value { font-size: 0.875rem; color: var(--ari-ink); }

/* ============================================================
   SINGLE ISSUE (area_of_work): single-area_of_work.php
   Reuses almost all .prog-* classes from the Program section above.
   Only issue-specific overrides and additions are defined here.
   ============================================================ */

/* ── Hero color-accent modifiers (shared with single-program.php) ── */
/* Fallback background-color when no featured image is set.          */
.prog-hero--green     { background-color: var(--ari-umber); /* brand: no programme colour coding */  --ari-text-accent: var(--ari-apricot); }
.prog-hero--orange    { background-color: var(--ari-umber); /* brand: no programme colour coding */  --ari-text-accent: var(--ari-apricot); }
.prog-hero--kaki      { background-color: var(--ari-umber); /* brand: no programme colour coding */  --ari-text-accent: var(--ari-apricot); }
.prog-hero--turquoise { background-color: var(--ari-umber); /* brand: no programme colour coding */  --ari-text-accent: var(--ari-apricot); }
.prog-hero--purple    { background-color: var(--ari-umber); /* brand: no programme colour coding */  --ari-text-accent: var(--ari-apricot); }
.prog-hero--yellow    { background-color: var(--ari-umber); /* brand: no programme colour coding */  --ari-text-accent: var(--ari-apricot); }

/* ── Issue hero extras ──────────────────────────────────────────── */
.issue-hero__inner { max-width: 680px; }

/* Flat (no featured image) topic hero: .prog-hero's min-height and overlay
   gradients exist to hold and darken a photo. Most topics never get one, so
   left as-is they render a tall, mostly-empty block. Collapse the hero to
   its content height instead and drop the now-pointless overlay. Mobile
   min-height override lives in responsive.css (max-width: 600px block). */
.issue-hero--flat {
  min-height: 0;
  padding: 3rem 0 2.5rem;
}
.issue-hero--flat .prog-hero__overlay { display: none; }

/* "Issues" back-link eyebrow above the title */
.issue-hero__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
}
.issue-hero__back {
  color: inherit;
  text-decoration: none;
  transition: color 150ms;
}
.issue-hero__back:hover { color: #fff; }

/* Hero description paragraph */
.issue-hero__desc {
  margin: 0.9rem 0 0;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  max-width: 560px;
}

/* ── Rich-text block (flex layout: text) ───────────────────────── */
.issue-text-block {
  margin-bottom: 2rem;
}
/* Inherits .prog-body typography: no extra rules needed */

/* ── In-content section heading (flex layout: title) ───────────── */
.issue-inline-heading {
  font-family: var(--font-role-reading);
  font-size: 1.15rem;
  font-weight: var(--weight-reading-h2);
  color: var(--ari-ink);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ari-color-accent);
  line-height: 1.25;
}

/* ── People / experts grid (flex layout: related_peoples) ─────── */
.issue-people-section {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  /* Experts/Partners get their own nav-anchor id here (see
     ari_v2_issue_extra_nav_entries() in single-area_of_work.php), so a
     direct anchor load needs the same sticky-header/tab-bar clearance
     .prog-section / .prog-section__head already get. */
  scroll-margin-top: calc(var(--ari-sticky-top, 130px) + var(--ari-prog-tabs-height, 60px));
}
.issue-people-section + .issue-people-section {
  padding-top: 1.5rem;
  border-top: 1px solid var(--ari-light-grey);
}
.issue-people-section__heading {
  font-family: var(--font-role-interface);
  font-size: 0.8125rem;
  font-weight: var(--weight-interface);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ari-color-text-muted); /* not #888 (~3.5:1 on white, fails WCAG 1.4.3) */
  margin: 0 0 1.25rem;
}
.issue-people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}
/* Partner grid: slightly wider cards (often logos) */
.issue-people-grid--partners {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
/* Inside the issue people grid, expert-sidebar-card stacks vertically */
.issue-people-grid .expert-sidebar-card {
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem;
  background: var(--ari-off-white);
  border-radius: 0;
  border: 1px solid var(--ari-light-grey);
  --ari-text-accent: var(--ari-ink);
}
.issue-people-grid .expert-sidebar-card__photo {
  width: 56px;
  height: 56px;
  margin-bottom: 0.65rem;
}

/* ============================================================
   FOOTER
   ============================================================ */

/* .site-footer's background/color are overridden by the "SITE FOOTER – v2
   redesign" block further down this file; only the padding is live. */
.site-footer { padding: 2rem 0; }

.will-animate { opacity: 0; transform: translateY(16px); transition: opacity 420ms ease, transform 420ms ease; }
.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   HOMEPAGE SECTIONS
   ============================================================ */

/* Hero Slider */
.home-hero {
  position: relative;
  overflow: hidden;
  background: var(--ari-ink);
  min-height: clamp(480px, 54vw, 680px);
  --ari-text-accent: var(--ari-apricot);
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease, visibility 600ms ease;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.hero-slide__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: var(--ari-ink);
  /* Parallax: inactive slides are slightly zoomed; they settle on activation */
  transform: scale(1.06);
  transition: transform 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  --ari-text-accent: var(--ari-apricot);
}
.hero-slide.is-active .hero-slide__bg {
  transform: scale(1);
}
.hero-slide__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,3,0,0.85) 0%, rgba(10,3,0,0.4) 50%, rgba(10,3,0,0.15) 100%);
}
.hero-slide__content {
  position: relative; z-index: 2;
  width: min(var(--ari-max-width), 92vw);
  margin-inline: auto;
  padding-block-start: clamp(2rem, 4vw, 3rem);
  /* 126px audio bar + 1.75rem gap so author row is always fully visible */
  padding-block-end: calc(126px + 1.75rem);
  display: flex; flex-direction: column; gap: 0.875rem;
  /* Content aligns to left edge of the shell, not centered */
  align-items: flex-start;
  /* Typography morph: inactive content rests below; rises on activation */
  transform: translateY(14px);
  transition: transform 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 150ms;
}
.hero-slide.is-active .hero-slide__content {
  transform: translateY(0);
}
/* Format label (brand manual): solid square block, white caps; Ember keeps white text AA */
.hero-slide__badge {
  display: inline-flex; align-items: center;
  border: 0;
  border-radius: 0;
  padding: 0.3rem 0.75rem;
  background: var(--ari-ember);
  color: #fff; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  width: fit-content;
  transition: background 160ms ease;
}
.hero-slide__badge:hover { background: var(--ari-ember-dark); color: #fff; }
.hero-slide__title {
  margin: 0; color: #fff;
  font-family: var(--font-role-display);
  font-size: clamp(1.625rem, 3vw, 2.75rem);
  font-weight: var(--weight-display-title); line-height: 1.2; letter-spacing: -0.02em;
  max-width: 20ch;
}
.hero-slide__title a { color: inherit; }
.hero-slide__title a:hover { color: rgba(255,255,255,0.85); }
.hero-slide__meta {
  display: flex; align-items: center; gap: 0.75rem;
  flex-wrap: wrap; color: rgba(255,255,255,0.8); font-size: 0.9rem;
}
.hero-slide__author {
  display: flex; align-items: center; gap: 0.5rem;
}
.hero-slide__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.12); /* visible while loading / for SVG placeholder */
  flex-shrink: 0;
}
.hero-slide__date { color: rgba(255,255,255,0.7); }
.hero-dots {
  position: absolute; bottom: 1.5rem; inset-inline: 0;
  display: flex; justify-content: center; gap: 0.5rem;
  z-index: 10;
}
.hero-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.4); border: none;
  cursor: pointer; padding: 0;
  transition: background 200ms ease, transform 200ms ease, opacity 200ms ease;
  /* Transparent on desktop: ghost arrows + counter serve as visual nav.
     Opacity is restored on mobile (≤980px) and on keyboard focus. */
  opacity: 0;
}
.hero-dot.is-active { background: #fff; transform: scale(1.3);  --ari-text-accent: var(--ari-ink); }
.hero-dot:hover     { background: rgba(255,255,255,0.7); opacity: 1; }
.hero-dot:focus-visible {
  opacity: 1;
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 3px;
}

/* ── Hero Audio Bar ──────────────────────────────────────────────────────── */

/* Extra bottom padding so slides don't hide behind the bar */
.home-hero { padding-bottom: 126px; }

.hero-audio-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 126px; /* Figma spec: Main One height: 126px */
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center;
  box-sizing: border-box;
  z-index: 10;
}

/*
 * Left diagonal block: Figma path M512.603 126L556.627 0H0V126H512.603Z
 * In a 557×126 viewBox: top is full-width, bottom cuts 44px from the right.
 * clip-path matches: top-left(0,0) → top-right(100%,0) → bottom-right(calc(100%-44px),100%) → bottom-left(0,100%)
 */
.hap-featured {
  flex-shrink: 0;
  width: calc(477px + max(4vw, calc((100vw - var(--ari-max-width)) / 2)));
  height: 100%;
  background: var(--ari-color-accent-strong);
  clip-path: polygon(0% 0%, 100% 0%, calc(100% - 44px) 100%, 0% 100%);
  display: flex; flex-direction: column; justify-content: center;
  /* Right padding must clear the 44px diagonal zone */
  padding: 0 5rem 0 max(4vw, calc((100vw - var(--ari-max-width)) / 2));
  box-sizing: border-box;
}

/*
 * Small orange accent parallelogram: Figma path in 78×126 viewBox, rotated -2.46°.
 * Vertices (normalised): top-left≈59%, top-right≈100%, bottom-right≈43%, bottom-left≈0%
 * clip-path: polygon(59% 0%, 100% 0%, 43% 100%, 0% 100%)
 * Width 83px → visible strip ≈ 33px wide at bottom, 34px at top.
 */
.hap-accent {
  flex-shrink: 0;
  width: 83px;
  align-self: stretch;
  /* Invisible spacer: keeps the reserved gap/wrap math intact (see mobile
     row-1 layout below) without the floating orange sliver; reference
     design shows a plain black gap between the panel and the controls. */
  background: transparent;
  clip-path: polygon(59% 0%, 100% 0%, 43% 100%, 0% 100%);
  transform: rotate(-2.46deg);
  transform-origin: center center;
  /* pull slightly left so it sits flush against the main block's diagonal */
  margin-left: -12px;
  margin-right: -1rem;
}

.hap-featured__label {
  font-size: 18px; font-weight: 400; letter-spacing: 0;
  /* Design uses title-case "Featured Audio", NOT all-caps */
  color: rgba(255,255,255,0.9);
  line-height: 1.2; margin-bottom: 0.45rem;
}

.hap-featured__title {
  font-family: var(--font-role-interface);
  font-size: 20px; font-weight: var(--weight-interface); line-height: 1.2;
  color: #fff;
  text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hap-featured__title:hover { color: rgba(255,255,255,0.8); }

/* Transport controls */
.hap-controls {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 0 0.875rem 0 0;
}

.hap-btn {
  background: transparent; border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  padding: 0;
  transition: color 150ms ease, background 150ms ease;
}
.hap-btn:hover { color: #fff; }
.hap-btn:focus-visible { outline: 2px solid var(--ari-color-accent); outline-offset: 2px; }

.hap-skip {
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.14);
}
.hap-skip:hover { background: rgba(255,255,255,0.2); }
.hap-skip svg { width: 18px; height: 18px; }

.hap-play-pause {
  width: 64px; height: 64px;
  background: var(--ari-color-accent-strong);
  color: #fff;
}
.hap-play-pause:hover { background: var(--ari-ember-dark); color: #fff; }
.hap-play-pause svg { width: 26px; height: 26px; }

/* RTL: play and skip arrows point the reading direction (pause bars are symmetric) */
body.rtl .hap-play-pause .icon-play,
body.rtl .hap-skip svg { transform: scaleX(-1); }

/* icon swap: default = play; is-playing = pause */
.hap-play-pause .icon-pause { display: none; }
.hap-play-pause.is-playing .icon-play  { display: none; }
.hap-play-pause.is-playing .icon-pause { display: block; }

/* Waveform scrubber: flex:1 expands to fill all space between controls and meta */
.hap-waveform {
  flex: 1; min-width: 0;
  height: 48px;
  display: flex; align-items: center; gap: clamp(2px, 0.28vw, 4px);
  padding: 0 0.65rem;
  cursor: pointer;
  overflow: hidden;
}

.hap-bar {
  flex: 1 1 3px;
  min-width: 2px;
  border-radius: 0;
  height: var(--h, 50%);
  background: rgba(255,255,255,0.55);
  transition: background 80ms ease;
}
.hap-bar.is-played { background: var(--ari-color-accent); }
.hap-bar.is-head   { background: #fff; flex-grow: 0; flex-basis: 3px; max-width: 3px;  --ari-text-accent: var(--ari-ink); }

/* Meta: time + volume + speed */
.hap-meta {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 18px;
  padding: 0 max(4vw, calc((100vw - var(--ari-max-width)) / 2)) 0 0.5rem;
}

.hap-time {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 20px; font-variant-numeric: tabular-nums;
  color: #fff; white-space: nowrap;
}
.hap-time__sep { color: rgba(255,255,255,0.85); }

.hap-volume { width: 24px; height: 24px; }
.hap-volume svg { width: 22px; height: 22px; }
.hap-volume .icon-vol-off { display: none; }
.hap-volume.is-muted .icon-vol-on  { display: none; }
.hap-volume.is-muted .icon-vol-off { display: block; }

.hap-speed {
  font-size: 20px; font-weight: 400; letter-spacing: 0;
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 0;
  min-width: 0; text-align: center;
  background: transparent;
}
.hap-speed:hover { color: #fff; }

/* Homepage audio bar: Figma node 4437:15933 (1440 × 102).
 * Keep these measurements scoped to the homepage: the same template part is
 * also used by podcast archive/single pages, where the episode selector needs
 * the existing, taller player geometry. */
.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) {
  --hap-secondary-control-size: 36px;
  --hap-primary-control-size: 46px;
  --hap-secondary-icon-size: 15px;
  --hap-primary-icon-size: 18px;
  --hap-control-gap: 8px;
  /* Match the primary header navigation typography (14px / 500). */
  --hap-meta-font-size: 0.8125rem;
  height: 84px;
  overflow: hidden;
  background: var(--ari-ink);
  border-top: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  --ari-text-accent: var(--ari-apricot);
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured {
  --hap-featured-corner: 18px;
  --hap-featured-diagonal: 32px;
  /* Size to the two-line title plus the diagonal safety padding. The left
     inset must track the same container gutter as .u-container /
     .hero-slide__content (max(4vw, calc((100vw - max-width)/2))); a capped
     clamp() leaves the text far left of the hero title / #stats content on
     ultra-wide screens. */
  width: calc(445px + max(4vw, calc((100vw - var(--ari-max-width)) / 2)));
  /* Fill the bar's actual height and centre the text within it, matching the
     play controls/waveform on the right (centred by the parent's
     align-items:center). A fixed height taller than the bar is clipped by the
     bar's overflow:hidden and top-aligns the text, drifting it out of vertical
     sync at intermediate desktop widths. */
  height: 100%;
  align-self: stretch;
  justify-content: center;
  padding-inline-start: max(4vw, calc((100vw - var(--ari-max-width)) / 2));
  padding-inline-end: 65px;
  background: var(--ari-color-accent-strong); /* not #f05921 (white title text on this fails WCAG 1.4.3) */
  position: relative;
  overflow: hidden;
  border-top-right-radius: 0;
  clip-path: none;
}

/* A separate overlay begins where the quarter-circle ends, producing a true
   rounded corner followed by the diagonal lower edge. */
.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: var(--hap-featured-corner);
  right: 0;
  bottom: 0;
  width: var(--hap-featured-diagonal);
  background: var(--ari-ink);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  --ari-text-accent: var(--ari-apricot);
}

body.rtl .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  clip-path: none;
}

body.rtl .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured::after {
  right: auto;
  left: 0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured__label {
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 4px;
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured__title {
  font-size: 16px;
  line-height: 19px;
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-accent {
  /* Compact spacer after the diagonal panel; recovered room belongs to the
     flexible waveform instead of an empty decorative gap. */
  width: 26px;
  margin: 0;
  transform: none;
  clip-path: none;
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-controls {
  gap: var(--hap-control-gap);
  padding: 0;
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-play-pause {
  width: var(--hap-primary-control-size);
  height: var(--hap-primary-control-size);
  background: var(--ari-color-accent);
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-play-pause svg {
  width: var(--hap-primary-icon-size);
  height: var(--hap-primary-icon-size);
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-skip {
  width: var(--hap-secondary-control-size);
  height: var(--hap-secondary-control-size);
  background: var(--ari-ink);
  border: 1px solid rgba(255,255,255,0.05);
  --ari-text-accent: var(--ari-apricot);
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-skip:hover {
  background: var(--ari-ink);
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-skip svg {
  width: var(--hap-secondary-icon-size);
  height: var(--hap-secondary-icon-size);
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-waveform {
  height: 36px;
  margin-inline: 10px;
  padding: 0;
  gap: 3px;
  justify-content: space-between;
}

/* The homepage renders the component's 80-bar dataset. Keep each bar slender
   on ultrawide screens instead of allowing flex-grow to turn it into a block. */
.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-bar {
  flex: 0 1 3px;
  width: 3px;
  min-width: 1px;
  max-width: 3px;
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-meta {
  gap: var(--hap-control-gap);
  padding: 0;
  /* Same container gutter as .hap-featured's start padding: keeps this end
     of the bar's content flush with #stats > .u-container above/below it. */
  padding-inline-end: max(4vw, calc((100vw - var(--ari-max-width)) / 2));
  font-family: var(--ari-font-heading);
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-time {
  width: auto;
  flex-shrink: 0;
  font-size: var(--hap-meta-font-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-volume,
.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-speed {
  width: var(--hap-secondary-control-size);
  height: var(--hap-secondary-control-size);
  flex: 0 0 var(--hap-secondary-control-size);
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-volume svg {
  width: var(--hap-secondary-icon-size);
  height: var(--hap-secondary-icon-size);
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-speed {
  margin-inline-start: 0;
  font-size: var(--hap-meta-font-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-volume:hover,
.home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-speed:hover {
  background: rgba(255,255,255,0.08);
}

/* Podcast-series episode player: match the refined homepage player while
   retaining the episode selector and its dropdown outside the orange panel. */
.pcast-hero .hero-audio-bar--episodes {
  --hap-secondary-control-size: 36px;
  --hap-primary-control-size: 46px;
  --hap-secondary-icon-size: 15px;
  --hap-primary-icon-size: 18px;
  --hap-control-gap: 8px;
  --hap-meta-font-size: 0.8125rem;
  height: 84px;
  overflow: visible;
  background: var(--ari-ink);
  border-top: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  --ari-text-accent: var(--ari-apricot);
}

.pcast-hero .hero-audio-bar--episodes .hap-featured {
  --hap-featured-corner: 18px;
  --hap-featured-diagonal: 32px;
  width: calc(445px + max(4vw, calc((100vw - var(--ari-max-width)) / 2)));
  height: 100%;
  align-self: stretch;
  justify-content: center;
  padding-inline-start: max(4vw, calc((100vw - var(--ari-max-width)) / 2));
  padding-inline-end: 65px;
  position: relative;
  overflow: hidden;
  border-top-right-radius: 0;
  clip-path: none;
}

.pcast-hero .hero-audio-bar--episodes .hap-featured::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: var(--hap-featured-corner);
  right: 0;
  bottom: 0;
  width: var(--hap-featured-diagonal);
  background: var(--ari-ink);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  --ari-text-accent: var(--ari-apricot);
}

body.rtl .pcast-hero .hero-audio-bar--episodes .hap-featured {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  clip-path: none;
}

body.rtl .pcast-hero .hero-audio-bar--episodes .hap-featured::after {
  right: auto;
  left: 0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.pcast-hero .hero-audio-bar--episodes .hap-ep-btn {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
  margin-bottom: 4px;
}

.pcast-hero .hero-audio-bar--episodes .hap-featured__title {
  font-size: 16px;
  line-height: 19px;
  margin: 0;
  -webkit-line-clamp: 2;
}

.pcast-hero .hero-audio-bar--episodes .hap-accent {
  width: 26px;
  margin: 0;
  transform: none;
  clip-path: none;
}

.pcast-hero .hero-audio-bar--episodes .hap-controls {
  gap: var(--hap-control-gap);
  padding: 0;
}

.pcast-hero .hero-audio-bar--episodes .hap-skip {
  width: var(--hap-secondary-control-size);
  height: var(--hap-secondary-control-size);
}

.pcast-hero .hero-audio-bar--episodes .hap-skip svg {
  width: var(--hap-secondary-icon-size);
  height: var(--hap-secondary-icon-size);
}

.pcast-hero .hero-audio-bar--episodes .hap-play-pause {
  width: var(--hap-primary-control-size);
  height: var(--hap-primary-control-size);
}

.pcast-hero .hero-audio-bar--episodes .hap-play-pause svg {
  width: var(--hap-primary-icon-size);
  height: var(--hap-primary-icon-size);
}

.pcast-hero .hero-audio-bar--episodes .hap-waveform {
  height: 36px;
  margin-inline: 10px;
  padding: 0;
  gap: 3px;
  justify-content: space-between;
}

.pcast-hero .hero-audio-bar--episodes .hap-bar {
  flex: 0 1 3px;
  width: 3px;
  min-width: 1px;
  max-width: 3px;
}

.pcast-hero .hero-audio-bar--episodes .hap-meta {
  gap: var(--hap-control-gap);
  padding: 0;
  padding-inline-end: max(4vw, calc((100vw - var(--ari-max-width)) / 2));
  font-family: var(--ari-font-heading);
}

.pcast-hero .hero-audio-bar--episodes .hap-time {
  width: auto;
  flex-shrink: 0;
  font-size: var(--hap-meta-font-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.pcast-hero .hero-audio-bar--episodes .hap-volume,
.pcast-hero .hero-audio-bar--episodes .hap-speed {
  width: var(--hap-secondary-control-size);
  height: var(--hap-secondary-control-size);
  flex: 0 0 var(--hap-secondary-control-size);
}

.pcast-hero .hero-audio-bar--episodes .hap-volume svg {
  width: var(--hap-secondary-icon-size);
  height: var(--hap-secondary-icon-size);
}

.pcast-hero .hero-audio-bar--episodes .hap-speed {
  margin-inline-start: 0;
  font-size: var(--hap-meta-font-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.pcast-hero .hero-audio-bar--episodes .hap-volume:hover,
.pcast-hero .hero-audio-bar--episodes .hap-speed:hover {
  background: rgba(255,255,255,0.08);
}

/* Reserve exactly the height of the (compacted) audio bar in the homepage hero. */
.home-hero { padding-bottom: 84px; }
.home-hero .hero-dots--above-bar { bottom: calc(84px + 0.8rem); }
.home-hero .hero-counter--above-bar { bottom: calc(84px + 1.1rem); }
.home-hero .hero-arrow { bottom: 84px; }

/* Dots shift up when audio bar is present */
.hero-dots--above-bar { bottom: calc(126px + 0.8rem); }

/* ── Ghost Arrow Buttons ─────────────────────────────────────────────────── */
.hero-arrow {
  position: absolute;
  top: 0;
  bottom: 126px;          /* stop at the audio bar zone */
  z-index: 10;
  width: clamp(60px, 10vw, 110px);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: rgba(255,255,255,0);
  transition: color 220ms ease, background 220ms ease;
}
.hero-arrow--prev { left: 0; }
.hero-arrow--next { right: 0; }
.hero-arrow--prev:hover {
  color: rgba(255,255,255,0.85);
  background: linear-gradient(to right, rgba(0,0,0,0.22) 0%, transparent 100%);
}
.hero-arrow--next:hover {
  color: rgba(255,255,255,0.85);
  background: linear-gradient(to left, rgba(0,0,0,0.22) 0%, transparent 100%);
}
.hero-arrow:focus-visible {
  color: rgba(255,255,255,0.85);
  outline: 2px solid var(--ari-color-accent);
  outline-offset: -6px;
}
.hero-arrow svg {
  transition: transform 220ms ease;
  pointer-events: none;
}
.hero-arrow:hover svg,
.hero-arrow:focus-visible svg {
  transform: scale(1.2);
}

/* ── Sweep-Line Counter ──────────────────────────────────────────────────── */
.hero-counter {
  position: absolute;
  bottom: 1.75rem;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 10;
  pointer-events: none;
}
.hero-counter--above-bar { bottom: calc(126px + 1.1rem); }

.hero-counter__line {
  width: clamp(48px, 7vw, 110px);
  height: 1.5px;
  background: rgba(255,255,255,0.18);
  position: relative;
  overflow: hidden;
  border-radius: 0;
}
.hero-counter__fill {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.9);
  transform-origin: left center;
  transform: scaleX(0);
}
@keyframes hero-sweep {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.hero-counter__fill.is-running {
  animation: hero-sweep 6000ms linear forwards;
}
.hero-counter__label {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  user-select: none;
}
.hero-counter__sep {
  color: rgba(255,255,255,0.3);
  font-weight: 400;
  margin: 0 0.15rem;
}

/* ── Reduced motion: strip parallax and sweep animation ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-slide__bg      { transition: none; transform: scale(1); }
  .hero-slide__content { transition: none; transform: translateY(0); }
  .hero-counter__fill  { animation: none !important; }
}

/* ── Episode-selector additions (audio-player-bar component, episode mode) ──
   The selector button replaces the static label inside .hap-featured.
   The dropdown list floats upward above the bar.                            */

.hap-ep-btn {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  /* Inherit the same typographic style as .hap-featured__label */
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.82);
  line-height: 1;
  margin-bottom: 0.35rem;
  transition: color 150ms;
}
.hap-ep-btn:hover,
.hap-ep-btn.is-open { color: #fff; }

.hap-ep-chevron {
  transition: transform 200ms ease;
}
.hap-ep-btn.is-open .hap-ep-chevron { transform: rotate(180deg); }

/* Dropdown: floats above the bar */
.hap-ep-list {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  width: 320px;
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  background: var(--ari-ink);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0;
  box-shadow: none;
  z-index: 300;
  overscroll-behavior: contain;
  --ari-text-accent: var(--ari-apricot);
}
.hap-ep-list[aria-hidden="true"] { display: none; }

.hap-ep-list li {
  padding: 0.55rem 1.1rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 140ms, color 140ms;
}
.hap-ep-list li:hover { background: rgba(255,255,255,0.07); color: #fff; }
.hap-ep-list li[aria-selected="true"] {
  background: var(--ari-color-accent-strong);
  color: #fff;
}

/* Shared Section Layout */
.home-section { padding: clamp(3rem, 6vw, 5rem) 0; }
.home-section--surface { background: var(--ari-color-surface);  --ari-text-accent: var(--ari-ink); }
.home-section--dark {
  background: linear-gradient(180deg, var(--ari-ink) 0%, var(--ari-ink) 100%);
  color: #fff;
  --ari-text-accent: var(--ari-apricot);
}
.home-section__head {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  gap: 1rem;
}
.home-section__title {
  margin: 0;
  font-family: var(--font-role-display);
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: var(--weight-display-title); letter-spacing: -0.025em; line-height: 1.1;
}
.home-section__title--white { color: #fff; }
.home-section__lead {
  margin: 0.75rem 0 0; max-width: 100%;
  color: rgba(255,255,255,0.6); font-size: 1rem; line-height: 1.65;
}
.see-all-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.875rem; font-weight: 600;
  color: var(--ari-text-accent); white-space: nowrap;
  flex-shrink: 0;
  transition: gap 160ms ease;
  text-decoration-color: var(--ari-color-accent);
}
.see-all-link:hover { gap: 0.55rem; color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.home-empty { color: var(--ari-color-text-muted); font-style: normal; }

/* Events – circular card design */
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  /*
   * align-items: stretch (default) makes every card in the same row the
   * same height, so margin-top:auto on .event-card__register can push all
   * three "Register Now" links to a common baseline.
   */
  align-items: stretch;
}

.event-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem; text-align: center;
  /* height:100% fills the stretched grid cell */
  height: 100%;
}

/* ── Circle container ───────────────────────────────────────────────────
   Wrapper:      200 × 200 px
   Ring:         ::after, inset:0, border:4px → ring center radius = 98px
   Inner image:  162px  → visible white gap = (200-162)/2 - 4px border = 15px
   Dots:         ::before at 270°/300°/240° on the ring path (left side)
   ─────────────────────────────────────────────────────────────────────── */
.event-circle {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 1.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer ring: 4px, gap cut from 253° to 287° (34° opening centred at 270° = 9 o'clock) */
.event-circle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid var(--ari-color-accent);
  -webkit-mask-image: conic-gradient(
    from 0deg,
    black    0deg,
    black  253deg,
    transparent 253deg,
    transparent 287deg,
    black  287deg,
    black  360deg
  );
  mask-image: conic-gradient(
    from 0deg,
    black    0deg,
    black  253deg,
    transparent 253deg,
    transparent 287deg,
    black  287deg,
    black  360deg
  );
  pointer-events: none;
  z-index: 5;
}

/* Three dots placed on the ring path (r = 98px from centre = 100,100):
     270° middle  → centre (2,   100) → left:-1px  top:97px
     282° upper   → centre (4.2,  80) → shadow  2px -20px
     258° lower   → centre (4.2, 120) → shadow  2px +20px   */
.event-circle::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--ari-color-accent);
  border-radius: 50%;
  left: -1px;
  top: 97px;
  box-shadow:
     2px -20px 0 0 var(--ari-color-accent),
     2px  20px 0 0 var(--ari-color-accent);
  z-index: 6;
}

/* Photo circle: 162px gives a clean 15px white gap inside the ring */
.event-circle__inner {
  width: 162px;
  height: 162px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 2;
  background: #fff;
  --ari-text-accent: var(--ari-ink);
}

.event-circle__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.event-card:hover .event-circle__img {
  transform: scale(1.1);
}

/* Outer ring hover animation: arc spins, dots fade out */
@keyframes ari-ring-spin {
  to { transform: rotate(360deg); }
}

.event-circle::after {
  will-change: transform;
  transform-origin: 50% 50%;
}

.event-circle::before {
  transition: opacity 0.25s ease;
}

.event-card:hover .event-circle::after {
  animation: ari-ring-spin 2s linear infinite;
}

.event-card:hover .event-circle::before {
  opacity: 0;
}

/* Dark overlay: stays strictly inside the photo circle */
.event-circle__overlay {
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 3;
}

/* Day: bold but sized to breathe inside the 162px circle */
.event-circle__day {
  font-size: 3.25rem;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  letter-spacing: -1px;
}

/* Month: compact so "February" / "September" never overflow */
.event-circle__month {
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  text-transform: capitalize;
  margin-top: 3px;
  max-width: 90%;
}

.event-circle__year {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  margin-top: 1px;
}

/* ── Card body typography ────────────────────────────── */

/* Time row: "6:00 PM AST – 7:00 PM AST", displayed above title */
.event-card__time {
  font-size: 0.925rem;
  color: var(--ari-color-text-muted);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

.event-card__title {
  margin: 0;
  font-family: var(--font-role-reading);
  font-size: 1.35rem; font-weight: var(--weight-reading-h2); line-height: 1.3;
  color: var(--ari-ink);
  /*
   * Clamp at 3 lines so no single card grows so tall that the
   * "Register Now" links across the row end up at different heights.
   */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-card__title a { color: inherit; }
.event-card__title a:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }

/* Speakers: "Speakers: Name One | Name Two" */
.event-card__speakers {
  font-size: 0.9rem;
  color: var(--ari-color-text-muted);
  margin: 0.75rem 0 1rem; line-height: 1.4;
}

/*
 * "Register Now": plain bold orange text link (no filled pill).
 * margin-top: auto pushes it to the bottom of every flex column so all
 * three links land on the same baseline regardless of title length.
 */
.event-card__register {
  display: inline-flex; align-items: center;
  font-size: 1.15rem; font-weight: 600;
  color: var(--ari-text-accent) !important;
  text-decoration: none;
  align-self: center;
  margin-top: auto;
  padding: 0.25rem 0;
  transition: all 150ms ease;
}
.event-card__register:hover {
  /* QA L4: Apricot is only AA on dark grounds; keep the context token. */
  color: var(--ari-text-accent) !important;
  transform: translateY(-2px);
}

/* Events carousel dots: hidden by default, shown on mobile via responsive.css */
.events-carousel-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-bottom: 0.5rem;
}

.events-carousel-dots .c-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.events-carousel-dots .c-dot.is-active {
  background: var(--ari-color-accent);
  transform: scale(1.35);
}

/* Country-related carousel dots: dark section, shown on mobile only */
.cr-cards-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-bottom: 0.5rem;
}
.cr-cards-dots .c-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.cr-cards-dots .c-dot.is-active {
  background: var(--ari-color-accent);
  transform: scale(1.35);
}

/* Publications / Podcasts / Videos carousel dots: hidden by default, shown on mobile */
.pub2-carousel-dots,
.pcast-carousel-dots,
.videos-carousel-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-bottom: 0.5rem;
}
.pub2-carousel-dots .c-dot,
.pcast-carousel-dots .c-dot,
.videos-carousel-dots .c-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.pub2-carousel-dots .c-dot.is-active,
.pcast-carousel-dots .c-dot.is-active,
.videos-carousel-dots .c-dot.is-active {
  background: var(--ari-color-accent);
  transform: scale(1.35);
}

/* Publications v2 – large featured + list */
.pub2-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.pub2-feat {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  min-height: 420px;
  /*
   * display:block, the <img> will be absolutely positioned (z-index 0)
   * and .pub2-feat__overlay also absolutely positioned (z-index 1).
   * No flex-column needed on the container itself.
   */
  display: block;
}

/*
 * The template outputs <img class="pub2-feat__img"> as a *direct child*
 * of .pub2-feat (no intermediate wrapper div).
 * We position it absolutely so it fills the card as a background image.
 */
.pub2-feat__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 400ms ease;
}
.pub2-feat:hover .pub2-feat__img { transform: scale(1.04); }

/* Kept for fallback / other templates that do use a wrapper */
.pub2-feat__img-wrap { position: absolute; inset: 0; z-index: 0; }
.pub2-feat__img-placeholder { width: 100%; height: 100%; background: var(--ari-color-surface);  --ari-text-accent: var(--ari-ink); }

/*
 * The template puts title + meta INSIDE .pub2-feat__overlay.
 * We therefore give the overlay flex-column layout and push its children
 * to the bottom, matching the "title then category | date" stack at the
 * bottom of the card as shown in the design.
 * The gradient (dark at bottom, transparent at top) keeps text readable.
 */
.pub2-feat__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to top,
    rgba(5,2,1,0.94) 0%,
    rgba(5,2,1,0.72) 35%,
    rgba(5,2,1,0.15) 70%,
    transparent 100%
  );
  display: flex; flex-direction: column;
  justify-content: flex-end;          /* anchor content to the bottom */
  padding: 1.5rem;
  gap: 0.5rem;
}

/*
 * .pub2-feat__body is NOT in the front-page template, kept for
 * other templates that use it but has no effect here.
 */
.pub2-feat__body {
  position: relative; z-index: 2;
  margin-top: auto;
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}

/*
 * Category label: plain uppercase orange text, NO bordered pill.
 * Matches the "Report | 3 May 2023" appearance in the design where
 * category reads the same weight/style as the adjacent date.
 */
.pub2-feat__cat {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ari-text-accent);
}

.pub2-feat__title {
  margin: 0;
  font-family: var(--font-role-reading);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: var(--weight-reading-h2); line-height: 1.3; color: #fff;
}
.pub2-feat__title a { color: inherit; }
.pub2-feat__title a:hover { color: rgba(255,255,255,0.85); }

.pub2-feat__meta {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: rgba(255,255,255,0.7);
  /*
   * No order override, source order is correct:
   * title comes first in the DOM so it renders above the meta row,
   * both pinned to the card bottom via justify-content:flex-end.
   */
}
.pub2-feat__meta__sep { opacity: 0.4; }

/* List side */
.pub2-list {
  display: flex; flex-direction: column; gap: 0;
}

.pub2-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ari-color-border);
  text-decoration: none;
}
.pub2-item:first-child { padding-top: 0; }
.pub2-item:last-child { border-bottom: none; }

.pub2-item__img-wrap {
  flex-shrink: 0;
  width: 80px; height: 60px; /* 4:3, fixed ratio, consistent across every item */
  border-radius: 0; overflow: hidden;
}
.pub2-item__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 280ms ease;
}
.pub2-item:hover .pub2-item__img { transform: scale(1.06); }
.pub2-item__img-placeholder {
  width: 100%; height: 100%;
  background: var(--ari-color-surface);
  --ari-text-accent: var(--ari-ink);
}

.pub2-item__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}

.pub2-item__meta {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem;
}
.pub2-item__cat {
  font-weight: 600; color: var(--ari-text-accent);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.pub2-item__sep { color: var(--ari-color-text-muted); opacity: 0.5; }
.pub2-item__date { color: var(--ari-color-text-muted); }

.pub2-item__title {
  margin: 0;
  font-family: var(--font-role-reading);
  font-size: 0.9375rem; font-weight: var(--weight-reading-h2); line-height: 1.35;
  color: var(--ari-color-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pub2-item:hover .pub2-item__title { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }

/* ============================================================
   INTERACTIVE COUNTRY MAP
   ============================================================ */

/* Wrapper */
.country-map {
  position: relative;
  margin-top: 2.5rem;
  border-radius: 0;
  overflow: hidden;
  user-select: none;
  background: linear-gradient(180deg, var(--ari-ink) 0%, var(--ari-ink) 100%);
  touch-action: none; /* let JS handle all touch gestures */
  --ari-text-accent: var(--ari-apricot);
}

/* ── Inline MENA SVG map ── */
.mena-map-svg {
  display: block;
  width: 100%;
  height: auto;
  background: linear-gradient(180deg, var(--ari-ink) 0%, var(--ari-ink) 100%);
  /* GPU layer for smooth zoom/pan transforms */
  will-change: transform;
  transform-origin: 0 0;
  transition: transform 60ms linear; /* snappy during pan; overridden during pinch */
  --ari-text-accent: var(--ari-apricot);
}
.mena-map-svg.is-panning { transition: none; }

/* ── Zoom control buttons (mobile only by default) ── */
.map-zoom-controls {
  position: absolute;
  bottom: 0.75rem;
  inset-inline-end: 0.75rem;
  display: none;            /* hidden on desktop; shown via responsive.css */
  flex-direction: column;
  gap: 0.3rem;
  z-index: 5;
}
.map-zoom-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: var(--ari-ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: none;
  font-size: 1.2rem; font-weight: 600; line-height: 1;
  transition: background 140ms, transform 100ms;
}
.map-zoom-btn:hover  { background: #fff; }
.map-zoom-btn:active { transform: scale(0.93); }

/* ── Mobile interaction hint ── */
.map-mobile-hint {
  position: absolute;
  bottom: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: none;           /* shown via responsive.css on touch screens */
  align-items: center;
  gap: 0.4rem;
  background: rgba(0,0,0,0.65);
  color: rgba(255,255,255,0.85);
  font-size: 0.8125rem;
  padding: 0.3rem 0.75rem;
  border-radius: 0;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(4px);
  margin: 0;
  transition: opacity 400ms ease;
  z-index: 6;
}
.map-mobile-hint.is-dismissed { opacity: 0; pointer-events: none; }

/* All country shapes: default very dark */
.mena-map-svg #Pays polygon,
.mena-map-svg #Pays path,
.mena-map-svg #Pays line,
.mena-map-svg #Pays circle {
  fill: var(--ari-umber);
  stroke: rgba(255,255,255,0.15);
  stroke-width: 0.4;
}

/* Context-only countries: slightly visible.
   #Pays raises specificity to (0,1,1,0) to beat the base rule (0,1,1,1). */
.mena-map-svg #Pays .mena-ctx {
  fill: var(--ari-umber);
}

/* MENA interactive countries: mid gray, pointer.
   Specificity (0,1,2,0): beats base (0,1,1,1). */
.mena-map-svg #Pays .mena-country {
  fill: var(--ari-umber);
  cursor: pointer;
  outline: none;
  transition: fill 180ms ease;
}

/* Hover state: specificity (0,1,3,0) beats base (0,1,1,1) */
.mena-map-svg #Pays .mena-country:hover,
.mena-map-svg #Pays .mena-country:focus-visible {
  fill: rgba(219, 89, 33, 0.65);
}

/* Active / selected state: specificity (0,1,3,0) */
.mena-map-svg #Pays .mena-country.is-active {
  fill: var(--ari-color-accent);
}

/* ── Country name tooltip ── */
.mena-map-tooltip {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  background: rgba(219, 89, 33, 0.92);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 0;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 120ms ease;
  transform: translate(-50%, calc(-100% - 8px));
}
.mena-map-tooltip.is-visible {
  opacity: 1;
}

/* Related Content Panel */
.country-related {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  animation: crFadeIn 280ms ease both;
}

@keyframes crFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.country-related__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  gap: 1rem;
}

.country-related__title {
  margin: 0;
  font-family: var(--font-role-display);
  font-size: var(--ari-scale-h2);
  font-weight: var(--weight-display-title);
  color: #fff;
  line-height: var(--ari-leading-h2-latin);
}

.country-related__country-name {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ari-text-accent);
  letter-spacing: 0.03em;
}

.country-related__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.country-related__empty {
  color: rgba(255,255,255,0.45);
  font-style: normal;
  grid-column: 1 / -1;
  padding: 1rem 0;
}

/* Content cards inside related panel */
.cr-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cr-card__img-wrap {
  display: block;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: rgba(255,255,255,0.06);
}

.cr-card__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 280ms ease;
}
.cr-card__img-wrap:hover .cr-card__img { transform: scale(1.04); }

.cr-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cr-card__date {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
}

.cr-card__title {
  margin: 0;
  font-family: var(--font-role-reading);
  font-size: 0.9375rem;
  font-weight: var(--weight-reading-h2);
  line-height: 1.35;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cr-card__title a { color: inherit; }
.cr-card__title a:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }

.cr-card__type {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ari-text-accent);
}

/* Stats */
/* Static global stats (kept for other uses) */
.stats-grid {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Country-specific stats: shown only when a country is selected on the map */
.country-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
  /* Fade-in when [hidden] is removed */
  animation: cstat-fadein 300ms ease both;
}
.country-stats[hidden] { display: none; }

@keyframes cstat-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.stat-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  padding: 1.75rem 1.5rem 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-align: center;
}
.stat-box__num {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 600; color: #ffffff; line-height: 1;
}
.stat-box__desc { margin: 0; font-size: 0.88rem; color: rgba(255,255,255,0.55); line-height: 1.6; }

/* Podcasts – immersive card design */
.pcast-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* ── Homepage podcast grid cards (.pcast-grid context) ──── */
/* Scoped to .pcast-grid to avoid conflict with archive .pcast-card block below */

.pcast-grid .pcast-card {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  min-height: 400px;
  display: flex; flex-direction: column;
  background: var(--ari-ink);
  transition: transform 220ms ease, box-shadow 220ms ease;
  --ari-text-accent: var(--ari-apricot);
}
.pcast-grid .pcast-card:hover { transform: translateY(-3px); box-shadow: none; }

/* Background image */
.pcast-card__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: var(--ari-ink);
  transition: transform 400ms ease;
  --ari-text-accent: var(--ari-apricot);
}
.pcast-grid .pcast-card:hover .pcast-card__bg { transform: scale(1.04); }

/* Strong dark gradient: obscures busy artwork */
.pcast-grid .pcast-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(5,2,1,0.60) 0%,
    rgba(5,2,1,0.72) 40%,
    rgba(5,2,1,0.97) 100%
  );
}

/* Content layer: fills card, content flows top-down, play button pinned to bottom */
.pcast-card__inner {
  position: absolute; inset: 0; z-index: 2;
  padding: 1.35rem 1.25rem 1.35rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}

/* Episode count: plain muted text, no pill */
.pcast-grid .pcast-card__badge {
  font-size: 0.8125rem; font-weight: 500;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: none;
  border: none; border-radius: 0; padding: 0;
  background: transparent;
}

/* Series title */
.pcast-grid .pcast-card__title {
  margin: 0;
  font-family: var(--font-role-reading);
  font-size: 1.3rem; font-weight: var(--weight-reading-h2);
  line-height: 1.25; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  /* Without this, the title's overflow:hidden (needed for the line-clamp)
     makes its flex automatic-minimum-size resolve to 0 per spec, so on the
     shorter mobile card (min-height:300px vs 400px) flexbox crushes the
     title to nothing before it touches the episode list, which has no
     overflow:hidden and so keeps its content-based size and stays visible.
     flex-shrink:0 keeps the (already clamped to 3 lines) title intact. */
  flex-shrink: 0;
}
.pcast-grid .pcast-card__title a { color: inherit; text-decoration: none; }
.pcast-grid .pcast-card__title a:hover { color: rgba(255,255,255,0.85); }

/* Short description fallback */
.pcast-card__desc {
  margin: 0;
  font-size: 0.82rem; line-height: 1.6;
  color: rgba(255,255,255,0.65);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0; /* same flex-auto-min-size trap as .pcast-card__title above */
}

/* Episodes sub-list header */
.pcast-card__ep-label {
  margin: 0.15rem 0 0.25rem;
  font-size: 0.8125rem; font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  text-transform: none;
}

.pcast-card__ep-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.55rem;
}

/* Each episode row: circle icon + truncated title */
.pcast-card__ep-item {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.9rem; color: rgba(255,255,255,0.88); line-height: 1.35;
  overflow: hidden;
}
.pcast-card__ep-item a {
  color: inherit; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcast-card__ep-item a:hover { color: #fff; }

/* Circular play icon */
.pcast-card__ep-icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  color: #fff;
}

/* "+ X more" link */
.pcast-card__ep-more { margin-top: 0.2rem; }
.pcast-card__ep-more a {
  font-size: 0.875rem; font-weight: 600;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
}
.pcast-card__ep-more a:hover { color: #fff; }

/* Play Now: white bordered pill (default), pinned to card bottom */
.pcast-card__play {
  display: inline-flex; align-items: center; gap: 0.45rem;
  align-self: flex-start; margin-top: auto;
  padding: 0.48rem 1.15rem;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.85);
  border-radius: 0;
  color: #fff !important;
  font-size: 0.8125rem; font-weight: 600;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}
.pcast-card__play:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
}

/* Middle card: orange filled pill */
.pcast-grid .pcast-card:nth-child(2) .pcast-card__play {
  background: var(--ari-color-accent-strong);
  border-color: var(--ari-color-accent-strong);
}
.pcast-grid .pcast-card:nth-child(2) .pcast-card__play:hover {
  background: var(--ari-ember-dark);
  border-color: var(--ari-ember-dark);
}

/* Videos – dark section layout */
.videos-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.75rem;
  align-items: start;
}

/* Featured (left) */
.video-featured { display: flex; flex-direction: column; gap: 1rem; }

/* Wrappers own the aspect-ratio so they keep their size after the button is hidden */
.video-featured__thumb-wrap {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 0;
  overflow: hidden;
}

/* Button fills wrapper absolutely; does not contribute to flow height */
.video-play-btn {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none; padding: 0; cursor: pointer;
  background: var(--ari-ink); border-radius: inherit;
  overflow: hidden;
  --ari-text-accent: var(--ari-apricot);
}

/* Thumbnail fills the button (wrapper controls ratio) */
.video-play-btn__thumb {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: opacity 220ms ease, transform 300ms ease;
}

.video-play-btn:hover .video-play-btn__thumb { opacity: 0.82; transform: scale(1.03); }

.video-play-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: transform 200ms ease;
}
.video-play-btn:hover .video-play-icon { transform: scale(1.08); }

/* Featured meta: larger title to match the hero weight in the design */
.video-featured__meta { display: flex; flex-direction: column; gap: 0.5rem; }
.video-featured__title {
  margin: 0;
  font-family: var(--font-role-reading);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: var(--weight-reading-h2);
  line-height: 1.25;
  color: #fff;
}
.video-featured__title a { color: inherit; }
.video-featured__title a:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.video-featured__date { font-size: 0.8125rem; color: rgba(255,255,255,0.5); }

/* Small videos (right stack) */
.video-stack { display: flex; flex-direction: column; gap: 1.25rem; }

.video-small { display: flex; flex-direction: column; gap: 0.65rem; }

.video-small__thumb-wrap {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 0;
  overflow: hidden;
}

.video-play-btn--sm { border-radius: 0; }
.video-play-icon--sm { /* inherits from .video-play-icon */ }

.video-small__meta { display: flex; flex-direction: column; gap: 0.25rem; }
.video-small__title {
  margin: 0;
  font-family: var(--font-role-reading);
  font-size: 1rem;
  font-weight: var(--weight-reading-h2);
  line-height: 1.35;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-small__title a { color: inherit; }
.video-small__title a:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.video-small__date { font-size: 0.8125rem; color: rgba(255,255,255,0.5); }

/* Newsletter – full-bleed orange section */
.newsletter-section {
  position: relative;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: var(--ari-color-accent-strong);
  overflow: hidden;
}

/* White content card: contains title, desc, and form */
.newsletter-card {
  position: relative; z-index: 1;
  background: #fff;
  border-radius: 0;
  padding: 2rem;
  /* Fixed (not tied to --ari-max-width) so the card stays capped at this
     width instead of growing with the page container on XL/ultra-wide
     screens. */
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
  box-shadow: none;
  --ari-text-accent: var(--ari-ink);
}

.newsletter-card__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-role-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: var(--weight-display-title);
  color: var(--ari-ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.newsletter-card__desc {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--ari-warm-grey);
  line-height: 1.6;
  max-width: 50ch;
  margin-inline: auto;
}

/* Email form: dark pill inside the white card */
.newsletter-form {
  max-width: 600px;
  margin: 2rem auto 0;
}

.newsletter-form__notice {
  margin: 0 0 0.9rem;
  padding: 0.75rem 1rem;
  border-radius: 0;
  font-size: 0.9375rem; line-height: 1.35;
  text-align: center;
}
.newsletter-form__notice--success { background: rgba(26,149,90,0.2); border: 1px solid rgba(138,255,196,0.35); color: #d5ffe8; }
.newsletter-form__notice--error   { background: rgba(197,49,49,0.2);  border: 1px solid rgba(255,169,169,0.35); color: #ffd7d7; }
.newsletter-form__notice--info    { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.35); color: #fff; }

.newsletter-form__row {
  display: flex;
  background: var(--ari-ink);
  border-radius: 0;
  padding: 0.5rem;
  box-shadow: none;
  --ari-text-accent: var(--ari-apricot);
}

.newsletter-form__field {
  flex: 1; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem;
}

.newsletter-form__icon { color: rgba(255,255,255,0.5); flex-shrink: 0; }

.newsletter-form__email {
  flex: 1; border: none; outline: none;
  font-size: 0.9375rem; font-family: var(--font-role-interface);
  color: rgba(255,255,255,0.9); background: transparent;
  min-width: 0;
}
.newsletter-form__email::placeholder { color: rgba(255,255,255,0.38); }

.newsletter-form__btn {
  flex-shrink: 0;
  padding: 0.75rem 1.5rem;
  background: var(--ari-color-accent-strong);
  color: #fff; border: none; border-radius: 0;
  font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.08em;
  cursor: pointer; transition: background 160ms ease;
}
.newsletter-form__btn:hover { background: var(--ari-color-accent-2); }

/* Hero dot aria-pressed state (matches .is-active for non-JS fallback) */
.hero-dot[aria-pressed="true"] { background: #fff; transform: scale(1.3);  --ari-text-accent: var(--ari-ink); }

/* Embed divs fill the wrapper absolutely, same layer as the button */
.video-featured__embed,
.video-small__embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.video-featured__embed iframe,
.video-small__embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================================
   SITE FOOTER – v2 redesign (dark 4-column)
   ============================================================ */

.site-footer {
  background: var(--ari-ink);
  color: rgba(255,255,255,0.75);
  --ari-text-accent: var(--ari-apricot);
}

.site-footer__body {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* 3-column grid: brand(wide) | menu (single nav, 2 CSS columns) | contact */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1.4fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

/* Brand column: two stacked icon menus (Jalsa podcast + social media). */
.footer-col--brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}

.footer-icon-menu__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.75rem;
}

.footer-icon-menu__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
  transition: background 160ms ease, transform 150ms ease;
}

.footer-icon-menu__link img {
  display: block;
  width: 16px;
  height: 16px;
  /* Icon files are flat, single-color brand marks (fill:#a9a196, see
     assets/img/footer-icons/); brighten them to near-white so they read
     clearly against the dark badge instead of adding a second muted grey. */
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity 160ms ease;
}

.footer-icon-menu__link:hover,
.footer-icon-menu__link:focus-visible {
  background: var(--ari-color-accent);
  transform: translateY(-2px);
}
.footer-icon-menu__link:hover img,
.footer-icon-menu__link:focus-visible img { opacity: 1; }
.footer-icon-menu__link:hover { outline: none; }
.footer-icon-menu__link:focus-visible {
  outline: 2px solid var(--ari-color-accent);
  outline-offset: 3px;
}

/* Nav columns */
.footer-col--nav { display: flex; flex-direction: column; gap: 0.875rem; }

/* Short accent-color underline instead of a full-width divider, under every
   footer section title (Podcast/Social icon menus, Menu, Contact Us). */
.footer-col__title {
  margin: 0;
  font-family: var(--font-role-interface);
  font-size: 0.8125rem; font-weight: var(--weight-interface);
  letter-spacing: 0.08em; text-transform: uppercase;
  /* Lower alphas miss the 4.5:1 AA threshold against the near-black #0a0604
     body (0.35 gives ~1.8:1); 0.62 matches the nav-link tier below. */
  color: rgba(255,255,255,0.62);
}
.footer-col__title::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 0.625rem;
  background: var(--ari-color-accent);
}

.footer-nav__menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
}
.footer-nav__menu li a {
  display: block;
  padding: 0.45rem 0;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 160ms ease, padding-inline-start 160ms ease;
  text-decoration: none;
}
.footer-nav__menu li:last-child a { border-bottom: none; }
.footer-nav__menu li a:hover,
.footer-nav__menu li a:focus-visible {
  color: #fff;
  padding-inline-start: 0.35rem;
}

/* Menu column holds one flat list (see footer.php); lay it out in two
   balanced CSS columns. */
.footer-col--menu .footer-nav__menu {
  display: block;
  column-count: 2;
  column-gap: 1.5rem;
}
.footer-col--menu .footer-nav__menu li {
  break-inside: avoid-column;
}

/* Contact column */
.footer-col--contact { display: flex; flex-direction: column; gap: 0.875rem; }

.footer-contact-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}

.footer-contact-list__item {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.45rem 0;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 160ms ease;
  text-decoration: none;
  overflow-wrap: break-word;
}
li:last-child .footer-contact-list__item { border-bottom: none; }
a.footer-contact-list__item:hover,
a.footer-contact-list__item:focus-visible { color: #fff; text-decoration: none; }
.footer-contact-list__item--addr { color: rgba(255,255,255,0.62); cursor: default; }

.footer-contact-list__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.5;
  margin-top: 1px;
}

/* Cities line */
.footer-cities {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Lower alphas miss AA against the near-black #0a0604 body (0.28 gives
     ~2.4:1); 0.62 matches the nav-link tier. */
  color: rgba(255,255,255,0.62);
}

.footer-cities__sep { color: rgba(255,255,255,0.15); }

/* Bottom bar */
.site-footer__bar { padding: 1.125rem 0; }

.footer-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-bar__copy {
  margin: 0; font-size: 0.8125rem;
  /* Lower alphas miss AA against the near-black #0a0604 bar (0.3 gives
     ~2.6:1); 0.62 matches the nav-link tier used elsewhere in the footer. */
  color: rgba(255,255,255,0.62);
}

.footer-bar__links {
  display: flex;
  gap: 1.25rem;
}

.footer-bar__links a {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  transition: color 160ms ease;
}

.footer-bar__links a:hover,
.footer-bar__links a:focus-visible { color: #fff; }

/* ── Dark header supplemental fixes ────────────────────────────── */

/* Custom logo: show as-is on dark header (already works on dark bg) */
.site-header .custom-logo {
  max-height: 44px;
}

/* ── Scrolled (mini) header ─────────────────────────────────────── */
/* Brand row shrinks from 68px → 56px; logo scales down slightly    */
.site-header.is-scrolled .site-header__brand-inner { min-height: 56px; }
.site-header.is-scrolled .site-header__brand-row { border-bottom-color: transparent; }
.site-header.is-scrolled .custom-logo { max-height: 34px; }
.site-header.is-scrolled .site-brand__logo { height: 36px; }

/* Nav row: tighten from 48px to 44px in the compact header */
.site-header.is-scrolled .site-header__nav-row {
  background: rgba(13, 7, 6, 0.92);
}
.site-header.is-scrolled .site-header__nav-row > .u-container {
  min-height: 44px;
}
.site-header.is-scrolled .primary-nav__menu > li > a {
  min-height: 44px;
}
.site-header.is-scrolled .primary-nav__menu > li > a::before {
  bottom: 6px;
}

/* Nav row is hidden below 980px; nothing extra needed here */

/* Hero gradient stronger at bottom for readability */
.hero-slide__overlay {
  background: linear-gradient(
    to top,
    rgba(5,2,1,0.92) 0%,
    rgba(5,2,1,0.5)  40%,
    rgba(5,2,1,0.1)  70%,
    transparent      100%
  );
}
/* ============================================================
   HEADER: Language Dropdown (brand row)
   ============================================================ */

.header-actions__sep {
  display: block;
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}

/* Language switcher: inline initials of the other languages, no dropdown
   (legacy pattern: plain links, opacity-based hover, current language omitted). */
.lang-switch__list {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.lang-switch__list li { margin-inline-start: 0.85rem; }
.lang-switch__list li:first-child { margin-inline-start: 0; }
.lang-switch__link {
  display: inline-block;
  font-size: 0.85rem; font-weight: 600;
  font-family: var(--font-role-interface);
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease;
  letter-spacing: 0.08em;
}
.lang-switch__link:hover,
.lang-switch__link:focus-visible { color: #fff; }
.lang-switch__link.is-current {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--ari-color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* ============================================================
   HERO: Floating newsletter CTA (top-right of hero)
   ============================================================ */

.hero-newsletter-float {
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 20; /* above .hero-arrow (z-index: 10), which otherwise overlaps this corner and steals the click */
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.05rem;
  background: var(--ari-color-accent-strong);
  color: #fff !important;
  border-radius: 0;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: none;
  transition: background 160ms ease, transform 160ms ease;
}
.hero-newsletter-float:hover,
.hero-newsletter-float:focus-visible {
  background: var(--ari-color-accent-2);
  color: #fff !important;
  transform: translateY(-1px);
}

/* When there is no audio bar the slide content still carries bottom padding
   sized for the bar: remove it so the hero doesn't waste that space.     */
.home-hero:not(.home-hero--has-bar) .hero-slide__content {
  padding-block-end: 2rem;
}
/* Matching hero height reduction when no bar is present.
   The base min-height (clamp 480–680px) already works; on mobile the 500px
   override is fine too since there is more breathing room without the bar. */
.home-hero:not(.home-hero--has-bar) {
  padding-bottom: 0;
}

/* ============================================================
   MOBILE DRAWER: Language list
   ============================================================ */

.drawer-lang__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 0.35rem; flex-wrap: wrap;
}
.drawer-lang__link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 0;
  font-size: 0.8125rem; font-weight: 500;
  color: rgba(255,255,255,0.65);
  transition: color 160ms ease, border-color 160ms ease;
}

/* ============================================================
   PUBLICATIONS ARCHIVE
   ============================================================ */

/* Page header: dark band matching design */
.pub-archive__header {
  background: var(--ari-ink);
  padding: 3rem 0 0;
  --ari-text-accent: var(--ari-apricot);
}
.pub-archive__header-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  align-items: center;
  padding-bottom: 2.5rem;
}
.pub-archive__title {
  font-family: var(--font-role-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--weight-display-title);
  line-height: 1.1;
  color: #fff;
  margin: 0;
  padding-inline-start: 1rem;
  border-inline-start: 4px solid var(--ari-color-accent);
}
.pub-archive__intro {
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  margin: 0;
}

/* Filter bar: white, sticky below the site header */
.pub-filter-bar {
  background: #fff;
  border-bottom: 1px solid transparent;
  position: sticky;
  top: var(--ari-sticky-top, 0px);
  z-index: 50;
  transition: border-bottom-color 200ms ease;
  --ari-text-accent: var(--ari-ink);
}
.pub-filter-bar.is-open {
  border-bottom-color: var(--ari-color-border, var(--ari-light-grey));
}

/* Main row: search input + Filters toggle + Clear all + Search btn */
.pub-filter__main-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0;
}
.pub-filter__main-row .pub-filter__search-wrap {
  flex: 1;
}

/* Filters toggle button */
.pub-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.9rem;
  height: 2.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ari-color-fg, var(--ari-ink));
  background: #fff;
  border: 1.5px solid var(--ari-color-border, var(--ari-light-grey));
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
  --ari-text-accent: var(--ari-ink);
}
.pub-filter__toggle:hover,
.pub-filter-bar.is-open .pub-filter__toggle {
  border-color: var(--ari-color-accent);
  color: var(--ari-text-accent);
  background: var(--ari-sand);
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}
.pub-filter__toggle-caret {
  transition: transform 250ms ease;
  color: currentColor;
  flex-shrink: 0;
}
.pub-filter-bar.is-open .pub-filter__toggle-caret {
  transform: rotate(180deg);
}
.pub-filter__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  background: var(--ari-color-accent-strong);
  color: #fff;
  border-radius: 0;
}

/* Collapsible filter body. The dropdown panels triggered from inside (.pub-filter__panel)
   are position:fixed and appended to <body> by JS, so they escape this overflow:hidden
   ancestor untouched even while collapsed/open. */
.pub-filter__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pub-filter-bar.is-open .pub-filter__body {
  /* Comfortably covers the chips row even when it wraps across multiple lines on narrow screens */
  max-height: 320px;
}
.pub-filter__body-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
}

.pub-filter {
  display: block;
}

/* Search input wrap */
.pub-filter__search-wrap {
  position: relative;
  flex: 1;
}
.pub-filter__search-input {
  width: 100%;
  height: 2.75rem;
  padding: 0 2.5rem 0 1rem;
  border: 1px solid var(--ari-color-border, var(--ari-light-grey));
  border-radius: 0;
  background: #fff;
  font-size: 0.9rem;
  color: var(--ari-color-fg, var(--ari-ink));
  outline: none;
  transition: border-color 160ms ease;
  --ari-text-accent: var(--ari-ink);
}
.pub-filter__search-input::placeholder { color: var(--ari-warm-grey); }
.pub-filter__search-input:focus { border-color: var(--ari-color-accent); }
.pub-filter__search-clear {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--ari-warm-grey);
  display: flex;
  align-items: center;
}
.pub-filter__search-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 1.25rem;
  height: 2.75rem;
  background: var(--ari-color-accent-strong);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  border: none;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease;
}
.pub-filter__search-btn:hover { background: var(--ari-ember-dark); }

.pub-filter__chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Individual chip: soft-edged filter button */
.pub-filter__chip {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--ari-color-border, var(--ari-light-grey));
  border-radius: 0;
  font-size: 0.82rem;
  position: relative;
  transition: border-color 160ms ease, background 160ms ease;
  --ari-text-accent: var(--ari-ink);
}
.pub-filter__chip:hover,
.pub-filter__chip.is-active {
  border-color: var(--ari-color-accent);
  background: var(--ari-sand);
}
/* Visible trigger button inside each chip */
.pub-filter__chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  border-radius: 0;
}
.pub-filter__chip-btn:focus-visible {
  outline: 2px solid var(--ari-color-accent);
  outline-offset: -2px;
}
.pub-filter__chip-label {
  font-weight: 600;
  color: var(--ari-color-fg, var(--ari-ink));
  white-space: nowrap;
  pointer-events: none;
}
/* Shows selected value text next to label (filled by JS) */
.pub-filter__chip-value {
  color: var(--ari-text-accent);
  font-weight: 400;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pub-filter__chip-caret {
  color: var(--ari-warm-grey);
  pointer-events: none;
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.pub-filter__chip.is-open .pub-filter__chip-caret {
  transform: rotate(180deg);
}
/* The native select is kept in DOM (hidden) for form submission */
.pub-filter__select {
  display: none;
}

/* ── Custom dropdown panel ─────────────────────────────────────────── */
/* Panels are appended to <body> by JS and positioned via getBoundingClientRect,
   so position:fixed escapes any overflow:hidden ancestor on the filter bar. */
.pub-filter__panel {
  display: none;
  position: fixed;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--ari-color-border, var(--ari-light-grey));
  border-radius: 0;
  box-shadow: none;
  z-index: 9999;
  padding: 4px;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
  --ari-text-accent: var(--ari-ink);
}
.pub-filter__panel.is-open {
  display: block;
}
/* Panel option button */
.pub-filter__panel-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-radius: 0;
  font-size: 0.82rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ari-color-fg, var(--ari-ink));
  white-space: nowrap;
  transition: background 100ms ease, color 100ms ease;
}
.pub-filter__panel-option:hover {
  background: var(--ari-off-white);
}
.pub-filter__panel-option.is-selected {
  color: var(--ari-text-accent);
  font-weight: 600;
  background: var(--ari-sand);
  --ari-text-accent: var(--ari-ink);
}
/* Check mark icon shown only when selected */
.pub-filter__panel-check {
  flex-shrink: 0;
  opacity: 0;
  width: 12px;
  height: 12px;
}
.pub-filter__panel-option.is-selected .pub-filter__panel-check {
  opacity: 1;
}
/* Divider after the "All" reset option */
.pub-filter__panel-option--reset {
  border-bottom: 1px solid var(--ari-color-border, var(--ari-light-grey));
  margin-bottom: 4px;
  padding-bottom: 0.6rem;
  color: var(--ari-color-text-muted); /* not #888 (~3.5:1 on white, fails WCAG 1.4.3) */
}
.pub-filter__panel-option--reset.is-selected {
  color: var(--ari-color-text-muted); /* not #888 (~3.5:1 on white, fails WCAG 1.4.3) */
  background: none;
  font-weight: 400;
}
.pub-filter__panel-option[hidden] {
  display: none;
}
.pub-filter__panel-option:focus-visible {
  outline: 2px solid var(--ari-color-accent);
  outline-offset: -2px;
}
/* Type-to-filter box on long panels; sticks to the top while the list scrolls */
.pub-filter__panel-search {
  position: sticky;
  top: -4px; /* cancels the panel's 4px padding */
  margin: -4px -4px 4px;
  padding: 8px;
  background: #fff;
  border-bottom: 1px solid var(--ari-color-border, var(--ari-light-grey));
  z-index: 1;
  --ari-text-accent: var(--ari-ink);
}
.pub-filter__panel-search-input {
  width: 100%;
  min-width: 220px;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--ari-color-border, var(--ari-light-grey));
  border-radius: 0;
  font: inherit;
  font-size: 0.82rem;
  text-align: start;
  background: #fff;
  color: var(--ari-color-fg, var(--ari-ink));
  --ari-text-accent: var(--ari-ink);
}
.pub-filter__panel-search-input:focus {
  outline: 2px solid var(--ari-color-accent);
  outline-offset: -1px;
  border-color: transparent;
}
.pub-filter__panel-empty {
  margin: 0;
  padding: 0.6rem 0.75rem;
  font-size: 0.82rem;
  color: var(--ari-color-text-muted);
}

/* Clear all link */
.pub-filter__clear-all {
  font-size: 0.8125rem;
  color: var(--ari-text-accent);
  text-decoration: underline;
  margin-inline-start: 0.5rem;
  white-space: nowrap;
}

.pub-archive__body {
  padding: 2.5rem 0 3rem;
}

/* Publication card grid */
.pub-arc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
}

/* Individual publication card */
.pub-arc-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pub-arc-card__img-wrap {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0;
  background: var(--ari-off-white);
  --ari-text-accent: var(--ari-ink);
}
.pub-arc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}
.pub-arc-card__img-wrap:hover .pub-arc-card__img { transform: scale(1.04); }
.pub-arc-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e0e0e0 0%, #c8c8c8 100%);
  --ari-text-accent: var(--ari-ink);
}
.pub-arc-card__body { display: flex; flex-direction: column; gap: 0.35rem; }
.pub-arc-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  margin: 0;
}
.pub-arc-card__type {
  font-weight: 600;
  color: var(--ari-text-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pub-arc-card__sep { color: var(--ari-warm-grey); }
.pub-arc-card__date { color: var(--ari-color-text-muted); }
.pub-arc-card__title {
  font-size: 0.95rem;
  font-family: var(--font-role-reading);
  font-weight: var(--weight-reading-h2);
  line-height: 1.4;
  color: var(--ari-color-fg, var(--ari-ink));
  margin: 0;
}
.pub-arc-card__title a {
  color: inherit;
  text-decoration: none;
}
.pub-arc-card__title a:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }

/* Author row on card (category archive variant) */
.pub-arc-card__author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ari-color-border, var(--ari-light-grey));
}
.pub-arc-card__author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.pub-arc-card__author-initial {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ari-color-accent-strong);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  flex-shrink: 0;
}
.pub-arc-card__author-name {
  font-size: 0.8125rem;
  font-family: var(--font-role-byline);
  font-weight: var(--weight-byline);
  font-style: var(--style-byline);
  color: var(--ari-color-fg, var(--ari-ink));
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pub-arc-card__author-name:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }

.ari-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  padding: 2rem 0 0;
}
.ari-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.6rem;
  border: 1px solid var(--ari-color-border, var(--ari-light-grey));
  border-radius: 0;
  font-size: 0.85rem;
  color: var(--ari-color-fg, var(--ari-ink));
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.ari-pagination .page-numbers:hover,
.ari-pagination .page-numbers.current {
  background: var(--ari-ember-dark);
  border-color: var(--ari-color-accent);
  color: #fff;
}
.ari-pagination .page-numbers.dots { border-color: transparent; }

/* ── Press Room: section headings ─────────────────────────────────── */
.press-room__section { padding: 2.5rem 0; }
.press-room__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.press-room__section-title {
  font-family: var(--font-role-reading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ari-color-fg, var(--ari-ink));
  margin: 0 0 1.5rem;
}
.press-room__section-head .press-room__section-title { margin-bottom: 0; }
.press-room__empty { margin: 0; padding: 2rem 0; color: var(--ari-warm-grey); font-size: 0.95rem; }
.press-room__view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ari-text-accent);
  text-decoration: none;
  white-space: nowrap;
  text-decoration-color: var(--ari-color-accent);
}
.press-room__view-all:hover { text-decoration: underline; }

/* Press Room: block-editor content reuses the section heading look */
.press-room__editor .entry-content h2,
.press-room__editor .entry-content h3 {
  font-family: var(--font-role-reading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ari-color-fg, var(--ari-ink));
  margin: 2rem 0 1rem;
}
.press-room__editor .entry-content h3 { font-size: 1.25rem; }
.press-room__editor .entry-content > :first-child { margin-top: 0; }

/* ── Press Room: Media Coverages card (mirrors .pub-arc-card) ───────── */
.press-room__section--media { padding-block: 1.125rem 4.25rem; }
.press-room__section--media .press-room__section-title {
  font-size: 2.25rem;
  line-height: 1.2;
  margin-bottom: 1.75rem;
}
.media-cov-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem clamp(2rem, 5vw, 4rem);
}
.media-cov-card { min-width: 0; display: flex; flex-direction: column; height: 100%; }
.media-cov-card__img-wrap {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0;
  background: var(--ari-off-white);
  margin-bottom: 1rem;
  --ari-text-accent: var(--ari-ink);
}
.media-cov-card__img { width: 100%; height: 100%; object-fit: cover; }
.media-cov-card__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.media-cov-card__meta {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-size: 0.8125rem;
  line-height: 1;
  margin: 0 0 1.25rem;
}
.media-cov-card__type {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.5rem 0.625rem;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  background: var(--ari-color-fg, var(--ari-ink));
  color: #fff;
  font-weight: 400;
  white-space: nowrap;
  --ari-text-accent: var(--ari-apricot);
}
.media-cov-card__type:last-child {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.media-cov-card__date {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.5rem 0.875rem;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  background: var(--ari-off-white);
  color: var(--ari-warm-grey);
  white-space: nowrap;
  --ari-text-accent: var(--ari-ink);
}
.media-cov-card__title {
  font-size: 0.9375rem;
  font-family: var(--font-role-reading);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ari-color-fg, var(--ari-ink));
  margin: 0 0 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.media-cov-card__excerpt {
  font-size: 0.9375rem;
  line-height: 1.12;
  color: var(--ari-color-fg, var(--ari-ink));
  margin: 0 0 1.35rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.media-cov-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ari-text-accent);
  text-decoration: none;
  margin-top: auto;
  text-decoration-color: var(--ari-color-accent);
}
.media-cov-card__link svg { width: 1rem; height: 1rem; }
.media-cov-card__link:hover { text-decoration: underline; }

/* ── Press Room: Media Coverages carousel (4-per-view, paged) ────────
   Same track/scroll-snap mechanics as .press-gallery__track and driven by
   the same initHorizontalCarousel() in theme.js; reuses
   .press-gallery__controls/__arrow/__dots for the prev/next + dots UI. */
.media-cov-carousel { min-width: 0; }
.media-cov-carousel__track {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.media-cov-carousel__track::-webkit-scrollbar { display: none; }
.media-cov-carousel__page {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

/* ── Press Room: Photo Gallery carousel ──────────────────────────────── */
.press-gallery { background: #fff;  --ari-text-accent: var(--ari-ink); }
.press-gallery .press-room__section {
  padding-block: 1.125rem 2rem;
}
.press-gallery .press-room__section-title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
.press-gallery__wrap { min-width: 0; }
.press-gallery__track {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.press-gallery__track::-webkit-scrollbar { display: none; }
.press-gallery__page {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 16vw, 190px);
  gap: 0.75rem;
}
.press-gallery__page--count-7 {
  aspect-ratio: 980 / 414;
  grid-template-columns: 1.35fr 1.85fr 1fr 1.35fr;
  grid-template-rows: 1fr 0.44fr 1.06fr;
  grid-auto-rows: auto;
}
.press-gallery__item {
  min-width: 0;
  border-radius: 0;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  display: block;
}
.press-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 240ms ease; }
.press-gallery__item:hover img { transform: scale(1.04); }
.press-gallery__item:focus-visible { outline: 2px solid var(--ari-color-accent); outline-offset: 2px; }
/* Seven-image desktop mosaic from the approved design. The middle feature
   overlaps the two lower grid bands while the outer columns stay balanced. */
.press-gallery__page--count-7 .press-gallery__item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.press-gallery__page--count-7 .press-gallery__item:nth-child(2) { grid-column: 2; grid-row: 1; }
.press-gallery__page--count-7 .press-gallery__item:nth-child(3) { grid-column: 3; grid-row: 1; }
.press-gallery__page--count-7 .press-gallery__item:nth-child(4) { grid-column: 4; grid-row: 1 / span 2; }
.press-gallery__page--count-7 .press-gallery__item:nth-child(5) { grid-column: 1; grid-row: 3; }
.press-gallery__page--count-7 .press-gallery__item:nth-child(6) { grid-column: 2 / span 2; grid-row: 2 / span 2; }
.press-gallery__page--count-7 .press-gallery__item:nth-child(7) { grid-column: 4; grid-row: 3; }
.press-gallery__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.875rem;
}
.press-gallery__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ari-text-accent);
  cursor: pointer;
  transition: transform 160ms ease, color 160ms ease;
}
.press-gallery__arrow svg { width: 1.25rem; height: 1.25rem; }
.press-gallery__arrow:hover { color: var(--ari-text-accent); transform: scale(1.12);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.press-gallery__arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.press-gallery__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.press-gallery__dots .c-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ari-sand);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
  --ari-text-accent: var(--ari-ink);
}
.press-gallery__dots .c-dot.is-active {
  background: var(--ari-color-accent);
  transform: scale(1.2);
}

/* ── Press Room: Photo Gallery lightbox ──────────────────────────────── */
.press-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10,8,6,0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
}
.press-gallery-lightbox[hidden] { display: none; }
.press-gallery-lightbox__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.press-gallery-lightbox__img {
  max-width: 85vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 0;
  box-shadow: none;
  user-select: none;
  -webkit-user-select: none;
}
.press-gallery-lightbox__counter {
  margin: 0;
  color: rgba(255,255,255,0.75);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}
.press-gallery-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease, transform 180ms ease;
  outline-offset: 2px;
}
.press-gallery-lightbox__close:hover { background: rgba(255,255,255,0.22); transform: scale(1.08); }
.press-gallery-lightbox__close:focus-visible { outline: 2px solid rgba(255,255,255,0.6); }
.press-gallery-lightbox__nav {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease, transform 180ms ease;
  outline-offset: 2px;
}
.press-gallery-lightbox__nav svg { width: 1.5rem; height: 1.5rem; }
.press-gallery-lightbox__nav:hover { background: rgba(255,255,255,0.2); transform: scale(1.08); }
.press-gallery-lightbox__nav:focus-visible { outline: 2px solid rgba(255,255,255,0.6); }

/* ── Press Room: consultation CTA ────────────────────────────────────── */
.press-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border-radius: 0;
  background: var(--ari-sand);
  --ari-text-accent: var(--ari-ink);
}
/* Supplied emblem (assets/img/ari-mark.svg) already carries its own orange
   disc, so it is shown as-is: no extra circle behind it. */
.press-cta__icon {
  flex: 0 0 auto;
  display: block;
  width: 3.5rem;
  height: 3.5rem;
}
.press-cta__icon img { display: block; width: 100%; height: 100%; }
.press-cta__body { flex: 1 1 auto; }
.press-cta__title {
  font-family: var(--font-role-reading);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ari-color-fg, var(--ari-ink));
  margin: 0 0 0.5rem;
}
.press-cta__text {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ari-color-fg-muted, var(--ari-warm-grey));
  margin: 0;
}
.press-cta__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 1.1rem;
  border-radius: 0;
  background: var(--ari-color-accent-strong);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.press-cta__btn:hover { background: var(--ari-ember-dark); }

/* Consultation form (inc/consultation-form.php): sits under the CTA heading */
#consultation { scroll-margin-top: calc(var(--ari-sticky-top, 130px) + 1rem); } /* clear the sticky header on #consultation loads */
.press-cta--form { flex-wrap: wrap; align-items: flex-start; padding: 2rem 1.75rem; }
.press-cta--form .press-cta__body { flex: 1 1 0; min-width: 0; }
.consult-form {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  margin-top: 0.5rem;
}
.consult-form__field--wide,
.consult-form__notice,
.consult-form__actions { grid-column: 1 / -1; }
.consult-form__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ari-ink);
}
.consult-form__opt { font-weight: 400; font-size: 0.9375rem; color: var(--ari-warm-grey); margin-inline-start: 0.25rem; }
.consult-form__input {
  display: block;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ari-light-grey);
  border-radius: 0;
  background: #fff;
  color: var(--ari-ink);
  font: inherit;
  font-size: 1rem; /* 16px stops iOS zooming on focus */
}
textarea.consult-form__input { resize: vertical; min-height: 7rem; }
.consult-form__input:focus-visible { outline: 2px solid var(--ari-orange); outline-offset: 1px; border-color: var(--ari-orange); }
.consult-form__input[aria-invalid="true"] { border-color: var(--ari-ember); }
.consult-form__error { margin: 0.35rem 0 0; font-size: var(--ari-text-xs); color: var(--ari-ember); }
.consult-form__notice {
  margin: 0;
  padding: 0.85rem 1rem;
  background: #fff;
  border-inline-start: 4px solid var(--ari-orange);
  font-size: var(--ari-text-sm);
  color: var(--ari-ink);
}
.consult-form__notice--error { border-inline-start-color: var(--ari-ember); }
.press-cta--form > .consult-form__notice { flex: 1 1 100%; margin-top: 0.5rem; }
.consult-form__submit { border: 0; cursor: pointer; font-family: inherit; font-size: 1rem; padding: 0.8rem 1.4rem; }
.consult-form__hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ari-pagination .prev,
.ari-pagination .next { padding: 0 0.9rem; font-size: 0.82rem; }

/* Empty state */
.pub-arc-empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--ari-color-text-muted);
}
.pub-arc-empty__reset {
  display: inline-flex;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--ari-text-accent);
  text-decoration: underline;
}

/* Write with ARI CTA below the publication results container. */
.pub-write-cta {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 3rem;
}

/* Category feature sections */
.pub-cat-sections {
  padding: 3rem 0 4rem;
  background: var(--ari-off-white);
  border-top: 1px solid var(--ari-color-border, var(--ari-light-grey));
  display: flex;
  flex-direction: column;
  gap: 0;
  --ari-text-accent: var(--ari-ink);
}
.pub-cat-section {
  padding: 3rem 0;
}
.pub-cat-section + .pub-cat-section {
  border-top: 1px solid var(--ari-color-border, var(--ari-light-grey));
}
.pub-cat-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.pub-cat-section--reversed .pub-cat-section__img-col { order: 2; }
.pub-cat-section--reversed .pub-cat-section__text-col { order: 1; }
.pub-cat-section__img-wrap {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0;
}
.pub-cat-section__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.pub-cat-section__img-wrap:hover .pub-cat-section__img { transform: scale(1.04); }
.pub-cat-section__img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #e0e0e0 0%, #c0c0c0 100%);
  border-radius: 0;
  --ari-text-accent: var(--ari-ink);
}
.pub-cat-section__text-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pub-cat-section__title {
  font-family: var(--font-role-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: var(--weight-display-title);
  color: var(--ari-color-fg, var(--ari-ink));
  margin: 0;
}
.pub-cat-section__desc {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--ari-color-fg-muted, var(--ari-warm-grey));
  margin: 0;
}
.pub-cat-section__explore {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ari-text-accent);
  text-decoration: none;
  transition: gap 160ms ease;
}
.pub-cat-section__explore:hover { gap: 0.65rem; }

.drawer-lang__link:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.drawer-lang__link.is-active { color: #fff; border-color: #fff; font-weight: 600; }

/* ============================================================
   PUBLICATION SINGLE
   ============================================================ */

.pub-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.pub-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  transform: scale(1.04);
}
.pub-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(5,8,18,0.92) 0%, rgba(5,8,18,0.55) 45%, rgba(5,8,18,0.18) 100%),
    linear-gradient(to right, rgba(5,8,18,0.6) 0%, rgba(5,8,18,0.0) 65%);
}
.pub-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 5rem;
  padding-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pub-hero__cat {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  background: var(--ari-ember);
  font-size: 0.8125rem;
  font-family: var(--font-role-interface);
  font-weight: var(--weight-interface);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.pub-hero__cat:hover { background: var(--ari-ember-dark); color: #fff; }
.pub-hero__title {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-family: var(--font-role-display);
  font-weight: var(--weight-display-title);
  line-height: 1.2;
  color: #fff;
  margin: 0;
  max-width: 720px;
}
.pub-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}
.pub-hero__tag {
  font-size: 0.8125rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 0;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease;
}
.pub-hero__tag:hover {
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}

/* Two-column layout */
.pub-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
  padding: 2.5rem 0 3rem;
  align-items: start;
}

/* Article body */
.pub-body { min-width: 0; }

/* AI voice reader: compact player in the publication sidebar
   (template-parts/listen-player.php) plus the browser-voice fallback toggle.
   See single-publication.php and documentation/architecture/ai-voice-reader.md. */
.ari-listen {
  --ari-listen-accent: var(--ari-color-accent, #c9430c);
  --ari-listen-line: #e9e2dc;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.25rem 1.1rem 1.15rem;
  background: var(--ari-sand);
  border: 1px solid var(--ari-light-grey);
  border-radius: 0;
  box-shadow: none;
  --ari-text-accent: var(--ari-ink);
}

/* Head: title, "Audio edition · length", decorative waveform mark */
.ari-listen__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.ari-listen__heading { min-width: 0; }
.ari-listen__title {
  margin: 0 0 0.3rem;
  font-family: var(--font-role-interface);
  font-size: 0.8125rem;
  font-weight: var(--weight-interface, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ari-color-text, var(--ari-ink));
}
.ari-listen__subtitle {
  margin: 0;
  font-family: var(--font-role-reading);
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
}
.ari-listen__dot { padding-inline: 0.15em; }
.ari-listen__wave {
  flex: 0 0 auto;
  color: var(--ari-text-accent);
  opacity: 0.45;
}
.ari-listen.is-playing .ari-listen__wave line {
  transform-box: fill-box;
  transform-origin: center;
  animation: ari-listen-wave 1.1s ease-in-out infinite;
}
.ari-listen.is-playing .ari-listen__wave line:nth-child(2n) { animation-delay: -0.35s; }
.ari-listen.is-playing .ari-listen__wave line:nth-child(3n) { animation-delay: -0.7s; }
@keyframes ari-listen-wave {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .ari-listen.is-playing .ari-listen__wave line { animation: none; }
}

/* Main row: play button + seek bar */
.ari-listen__main {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.ari-listen__play {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--ari-color-accent-strong);
  color: #fff;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ari-listen__play:hover {
  transform: translateY(-1px);
  box-shadow: none;
}
.ari-listen__icon-pause { display: none; }
.ari-listen.is-playing .ari-listen__icon-play { display: none; }
.ari-listen.is-playing .ari-listen__icon-pause { display: block; }
/* Optical centring of the play triangle (logical, so it mirrors in RTL). */
.ari-listen__icon-play { margin-inline-start: 3px; }
[dir="rtl"] .ari-listen__icon-play { transform: scaleX(-1); }

.ari-listen__progress {
  flex: 1 1 auto;
  min-width: 0;
}
.ari-listen__seek {
  --ari-listen-pct: 0%;
  display: block;
  width: 100%;
  height: 6px;
  margin: 0;
  border-radius: 0;
  background: linear-gradient(to right,
    var(--ari-listen-accent) var(--ari-listen-pct),
    var(--ari-listen-line) var(--ari-listen-pct));
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
/* Native range inputs run right-to-left in RTL documents. */
[dir="rtl"] .ari-listen__seek {
  background: linear-gradient(to left,
    var(--ari-listen-accent) var(--ari-listen-pct),
    var(--ari-listen-line) var(--ari-listen-pct));
}
.ari-listen__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ari-listen-accent);
  border: 3px solid #fff;
  box-shadow: none;
}
.ari-listen__seek::-moz-range-thumb {
  /* Firefox sizes the thumb without its border: 10 + 2 x 3 = 16px, as WebKit. */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ari-listen-accent);
  border: 3px solid #fff;
  box-shadow: none;
}
.ari-listen__time {
  display: flex;
  justify-content: space-between;
  margin-top: 0.45rem;
  font-family: var(--font-role-interface);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ari-color-text, var(--ari-ink));
  opacity: 0.8;
}

/* Controls row: skip pills | divider | speed dropdown pill */
.ari-listen__controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.ari-listen__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 2.4rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid #e6ddd6;
  border-radius: 0;
  background: #fff;
  color: var(--ari-color-text, var(--ari-ink));
  font-family: var(--font-role-interface);
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.15s ease;
  --ari-text-accent: var(--ari-ink);
}
.ari-listen__pill:hover { border-color: var(--ari-listen-accent); }
.ari-listen__divider {
  align-self: stretch;
  width: 1px;
  margin: 0.35rem 0.2rem;
  background: var(--ari-listen-line);
}
.ari-listen__speed { margin-inline-start: auto; padding-inline-end: 0.6rem; }
.ari-listen__speed select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  padding-inline-end: 1rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ari-listen__speed select:focus { outline: none; }
.ari-listen__chevron {
  position: absolute;
  inset-inline-end: 0.65rem;
  pointer-events: none;
}

.ari-listen__play:focus-visible,
.ari-listen__pill:focus-visible,
.ari-listen__speed:focus-within,
.ari-listen__seek:focus-visible {
  outline: 2px solid var(--ari-listen-accent);
  outline-offset: 2px;
}

.pub-audio__editor-note {
  margin: 0 0 0.75rem;
  overflow-wrap: anywhere;
  padding: 0.75rem 0.85rem;
  border-inline-start: 3px solid var(--ari-color-accent);
  background: rgba(219, 89, 33, 0.06);
  font-size: 0.875rem;
  line-height: 1.45;
}
.pub-audio__editor-note p { margin: 0; }
.pub-audio__editor-note-label {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-role-interface);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
}
.pub-audio__editor-note-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--ari-text-accent);
  text-decoration-color: var(--ari-color-accent);
}
.pub-audio__editor-note-detail {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
}
.pub-audio__editor-note-detail summary { cursor: pointer; }
.pub-audio__editor-note-detail code {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  white-space: normal;
}

.pub-audio__browser-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
  font-size: 0.82rem;
  font-family: var(--font-role-interface);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.pub-audio__browser-toggle:hover,
.pub-audio__browser-toggle:focus-visible { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }

.pub-audio__browser-player {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
  padding: 0.6rem 0.9rem;
  background: var(--ari-color-surface, var(--ari-off-white));
  border: 1px solid var(--ari-color-border, var(--ari-light-grey));
  border-radius: 0;
  --ari-text-accent: var(--ari-ink);
}
.pub-audio__browser-play,
.pub-audio__browser-stop {
  padding: 0.4rem 0.9rem;
  border-radius: 0;
  border: 1px solid var(--ari-color-border, var(--ari-light-grey));
  background: #fff;
  color: var(--ari-color-text, var(--ari-ink));
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  --ari-text-accent: var(--ari-ink);
}
.pub-audio__browser-play:disabled,
.pub-audio__browser-stop:disabled { opacity: 0.45; cursor: not-allowed; }
.pub-audio__browser-play:not(:disabled):hover,
.pub-audio__browser-stop:not(:disabled):hover { border-color: var(--ari-color-accent); }
.pub-audio__browser-status {
  font-size: 0.8125rem;
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
}

.pub-exec-summary {
  background: var(--ari-off-white);
  border-inline-start: 3px solid var(--ari-color-accent);
  padding: 1.25rem 1.5rem;
  border-radius: 0;
  margin-bottom: 2rem;
  --ari-text-accent: var(--ari-ink);
}
.pub-exec-summary__title {
  font-size: 1rem;
  font-family: var(--font-role-interface);
  font-weight: var(--weight-interface);
  color: var(--ari-text-accent);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
}
.pub-exec-summary__body { font-size: 0.92rem; line-height: 1.7; color: var(--ari-ink); margin: 0; }

/* Publication content typography */
.pub-content { font-size: 1rem; line-height: 1.75; color: var(--ari-ink); }
.pub-content h2 { font-size: 1.35rem; font-family: var(--font-role-reading); font-weight: var(--weight-reading-h2); margin: 2rem 0 0.75rem; color: var(--ari-ink); }
.pub-content h3 { font-size: 1.1rem; font-family: var(--font-role-reading); font-weight: var(--weight-reading-h2); margin: 1.5rem 0 0.5rem; color: var(--ari-ink); }
.pub-content p { margin: 0 0 1.1rem; }
.pub-content a { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); }
.pub-content img { max-width: 100%; height: auto; border-radius: 0; }
.pub-content figure { margin: 1.5rem 0; }
.pub-content figcaption { font-size: 0.8125rem; color: var(--ari-color-text-muted); /* not #888 (~3.5:1 on white, fails WCAG 1.4.3) */ margin-top: 0.4rem; }
.pub-content blockquote {
  border-inline-start: 3px solid var(--ari-color-accent);
  padding: 0.5rem 1.25rem;
  margin: 1.5rem 0;
  color: var(--ari-ink);
  font-family: var(--font-role-display);
  font-weight: var(--weight-display-quote);
  font-style: normal;
  font-size: var(--ari-scale-quote);
  line-height: var(--ari-leading-quote-latin);
}

.pub-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: calc(var(--ari-header-height, 64px) + 1.5rem);
}
.pub-sidebar__section {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--ari-color-border, var(--ari-light-grey));
}
.pub-sidebar__section:first-child { padding-top: 0; }
.pub-sidebar__section-title {
  font-family: var(--font-role-interface);
  font-size: 0.8125rem;
  font-weight: var(--weight-interface);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ari-warm-grey);
  margin: 0 0 0.85rem;
}

.pub-author-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.pub-author-card:last-child { margin-bottom: 0; }
.pub-author-card__avatar-wrap { flex-shrink: 0; }
.pub-author-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.pub-author-card__avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ari-color-accent-strong);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
}
.pub-author-card__info { display: flex; flex-direction: column; gap: 0.15rem; }
.pub-author-card__name {
  font-size: 0.9rem;
  font-family: var(--font-role-byline);
  font-weight: var(--weight-byline);
  font-style: var(--style-byline);
  color: var(--ari-ink);
  text-decoration: none;
  line-height: 1.3;
}
.pub-author-card__name:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.pub-author-card__org { font-size: 0.8125rem; color: var(--ari-color-text-muted); /* not #888 (~3.5:1 on white, fails WCAG 1.4.3) */ }
.pub-author-card__occ { font-size: 0.8125rem; color: var(--ari-text-accent); font-style: normal; }

/* Sidebar tags (category / topic chips) */
.pub-sidebar__meta-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pub-sidebar__tag {
  display: inline-flex;
  font-size: 0.8125rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--ari-color-border, var(--ari-light-grey));
  border-radius: 0;
  color: var(--ari-warm-grey);
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease;
}
.pub-sidebar__tag:hover {
  border-color: var(--ari-color-accent);
  color: var(--ari-text-accent);
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}

/* Sidebar download button */
.pub-sidebar__dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
  padding: 0.65rem 1rem;
  background: var(--ari-color-accent-strong);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 0;
  text-decoration: none;
  transition: background 160ms ease;
}
.pub-sidebar__dl-btn:hover { background: var(--ari-ember-dark); color: #fff; }

/* Sticky download bar */
.pub-dl-bar {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: var(--ari-ink);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 0.75rem 0;
  --ari-text-accent: var(--ari-apricot);
}
.pub-dl-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.pub-dl-bar__info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.pub-dl-bar__cat {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ari-text-accent);
}
.pub-dl-bar__title {
  font-family: var(--font-role-interface);
  font-size: 0.88rem;
  font-weight: var(--weight-interface);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pub-dl-bar__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  background: var(--ari-color-accent-strong);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 0;
  text-decoration: none;
  transition: background 160ms ease;
}
.pub-dl-bar__btn:hover { background: var(--ari-ember-dark); color: #fff; }

/* Related contents */
.pub-related {
  padding: 3rem 0 4rem;
  background: var(--ari-off-white);
  border-top: 1px solid var(--ari-color-border, var(--ari-light-grey));
  --ari-text-accent: var(--ari-ink);
}
.pub-related__title {
  font-family: var(--font-role-display);
  font-size: 1.4rem;
  font-weight: var(--weight-display-title);
  color: var(--ari-ink);
  margin: 0 0 1.75rem;
}

/* ============================================================
   PODCAST SERIES ARCHIVE
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────── */
.pcast-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* overflow is intentionally NOT hidden here so the episode dropdown
     can float above the bar. The bg/overlay are clipped by their own wrapper. */
}

/* Clip wrapper: contains the scaled bg image so it can't bleed outside the hero */
.pcast-hero__bg-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.pcast-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--ari-ink);
  transform: scale(1.02);
  transition: transform 8s ease;
  --ari-text-accent: var(--ari-apricot);
}
.pcast-hero:hover .pcast-hero__bg { transform: scale(1); }
.pcast-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,5,3,0.92) 0%, rgba(10,5,3,0.45) 55%, rgba(10,5,3,0.18) 100%);
}
.pcast-hero__content {
  position: relative; z-index: 1;
  /* Extra bottom padding clears the compact episode player at the hero's base. */
  padding-block: 2rem calc(84px + 2rem);
}
.pcast-hero__title {
  font-family: var(--font-role-display);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: var(--weight-display-title);
  line-height: 1.2;
  color: #fff;
  margin: 0;
  max-width: 700px;
}

/* ── Player bar ───────────────────────────────────────── */
.pcast-player {
  position: relative;
  z-index: 10;          /* above hero overlay and bg */
  background: var(--ari-ink);
  overflow: visible;    /* allow episode dropdown to float above hero */
  --ari-text-accent: var(--ari-apricot);
}
.pcast-player__inner {
  display: grid;
  grid-template-columns: auto 1px 1fr;
  align-items: stretch;
  min-height: 72px;
}
.pcast-player__episode-col {
  background: var(--ari-color-accent-strong);
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  min-width: 200px;
  /* Stacking context so the dropdown floats above everything else */
  position: relative;
  z-index: 200;
}
.pcast-ep-selector {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: rgba(255,255,255,0.9);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 0;
  /* Chevron rotates when open */
}
.pcast-ep-selector:hover { color: #fff; }
.pcast-ep-selector svg {
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.pcast-ep-selector[aria-expanded="true"] svg { transform: rotate(180deg); }

.pcast-ep-title {
  font-family: var(--font-role-interface);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

/* ── Episode dropdown list ─────────────────────────────
   Opens UPWARD so it floats over the hero image instead
   of covering the description content below.           */
.pcast-ep-list {
  position: absolute;
  bottom: calc(100% + 6px);   /* open upward, 6px gap */
  left: 0;
  min-width: 100%;
  max-width: 380px;
  background: var(--ari-ink);        /* dark, matches player */
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0;
  box-shadow: none;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  z-index: 300;
  max-height: 300px;
  overflow-y: auto;
  /* Smooth reveal */
  transform-origin: bottom left;
  animation: ep-list-in 160ms ease both;
  --ari-text-accent: var(--ari-apricot);
}
@keyframes ep-list-in {
  from { opacity: 0; transform: scaleY(0.92); }
  to   { opacity: 1; transform: scaleY(1); }
}
.pcast-ep-list[aria-hidden="true"] {
  display: none;
}
.pcast-ep-list li {
  padding: 0.6rem 1rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.78);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-left: 3px solid transparent;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.pcast-ep-list li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
  transition: background 120ms ease;
}
.pcast-ep-list li:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}
.pcast-ep-list li:hover::before { background: var(--ari-color-accent); }
.pcast-ep-list li[aria-selected="true"] {
  background: rgba(219, 89, 33, 0.15);
  color: #fff;
  border-left-color: var(--ari-color-accent);
  font-weight: 600;
}
.pcast-ep-list li[aria-selected="true"]::before { background: var(--ari-color-accent); }

/* Scrollbar styling for the episode list */
.pcast-ep-list::-webkit-scrollbar { width: 4px; }
.pcast-ep-list::-webkit-scrollbar-track { background: transparent; }
.pcast-ep-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 0;
}

.pcast-player__divider { background: rgba(255,255,255,0.12); width: 1px; flex-shrink: 0; }

.pcast-player__controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  flex-wrap: wrap;
}

/* Control buttons */
.pcast-ctrl-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  flex-shrink: 0;
  transition: color 150ms ease;
}
.pcast-ctrl-btn:hover { color: #fff; }
.pcast-ctrl-btn--play {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--ari-color-accent-strong);
  color: #fff;
  transition: background 150ms ease, transform 150ms ease;
}
.pcast-ctrl-btn--play:hover { background: var(--ari-ember-dark); transform: scale(1.06); }
.pcast-ctrl-btn--speed {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  min-width: 2rem;
}
.pcast-ctrl-btn--speed:hover { color: #fff; }

.pcast-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  cursor: pointer;
  flex: 1;
  min-width: 80px;
}
.pcast-waveform .hap-bar {
  flex: 1;
  background: rgba(255,255,255,0.25);
  border-radius: 0;
  transition: background 60ms ease;
}
.pcast-waveform .hap-bar.is-played { background: var(--ari-color-accent); }
.pcast-waveform .hap-bar.is-head   { background: #fff;  --ari-text-accent: var(--ari-ink); }

/* Time display */
.pcast-time {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Description ──────────────────────────────────────── */
.pcast-desc {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--ari-color-border, var(--ari-light-grey));
}
.pcast-desc__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem 3rem;
  align-items: start;
}
.pcast-desc__heading {
  font-family: var(--font-role-display);
  font-size: 1.4rem;
  font-weight: var(--weight-display-title);
  margin: 0 0 0.75rem;
  color: var(--ari-color-fg, var(--ari-ink));
}
.pcast-desc__body {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--ari-color-fg-muted, var(--ari-warm-grey));
  text-align: start;
}
.pcast-desc__date {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--ari-color-fg-muted, var(--ari-warm-grey));
}
.pcast-desc__series {
  margin: 1.25rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.pcast-desc__series a { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); }
.pcast-host {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
}
.pcast-host__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.pcast-host__label {
  font-size: 0.85rem;
  color: var(--ari-color-fg-muted, var(--ari-warm-grey));
  margin: 0;
}
.pcast-host__name {
  font-weight: 600;
  color: var(--ari-color-fg, var(--ari-ink));
  text-decoration: none;
}
.pcast-host__name:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }

/* ── Podcasts landing page (archive-podcast-serie.php): Jalsa intro,
   how-we-work, subscribe/platforms, listen-or-watch sections ──────── */
.pcast-landing__section {
  padding: 2rem 0;
  max-width: 860px;
}
.pcast-landing__heading {
  font-family: var(--font-role-reading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ari-color-fg, var(--ari-ink));
  margin: 0 0 1rem;
}
.pcast-landing__body {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ari-color-fg-muted, var(--ari-ink));
  text-align: start;
}
.pcast-landing__body p { margin: 0 0 1rem; }
.pcast-landing__body p:last-child { margin-bottom: 0; }
.pcast-landing__empty { padding: 1rem 0; color: var(--ari-color-fg-muted, var(--ari-warm-grey)); }

.pcast-platforms__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.pcast-platforms__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--ari-color-border, var(--ari-light-grey));
  border-radius: 0;
  color: var(--ari-color-fg, var(--ari-ink));
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.pcast-platforms__icon { display: inline-flex; flex-shrink: 0; }
.pcast-platforms__link:hover {
  background: var(--ari-ember-dark);
  border-color: var(--ari-color-accent);
  color: #fff;
}
.pcast-platforms__note {
  font-size: 0.9rem;
  color: var(--ari-color-fg-muted, var(--ari-warm-grey));
  margin: 0;
}

/* ── Subscribe-with bar (single-podcast-serie.php, under the hero/player) ── */
.pcast-platforms-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 1.25rem 0;
}
.pcast-platforms-bar__label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ari-color-fg, var(--ari-ink));
}
.pcast-platforms-bar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pcast-platforms-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--ari-color-border, var(--ari-light-grey));
  border-radius: 0;
  color: var(--ari-color-fg, var(--ari-ink));
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.pcast-platforms-bar__icon { display: inline-flex; flex-shrink: 0; }
.pcast-platforms-bar__link:hover,
.pcast-platforms-bar__link:focus-visible {
  background: var(--ari-ember-dark);
  border-color: var(--ari-color-accent);
  color: #fff;
}

.pcast-listen-watch__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.65rem 1.2rem;
  border-radius: 0;
  background: #FF0000;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.pcast-listen-watch__cta:hover { background: #d90000; }

/* ── Section headers ──────────────────────────────────── */
.pcast-series-section {
  padding: 2.5rem 0 3rem;
  /* Overrides the 860px reading-width cap inherited from .pcast-landing__section
     (shared for its padding): the series grid should use the full u-container width. */
  max-width: none;
}
.pcast-other-section {
  padding: 2.5rem 0 3.5rem;
  background: var(--ari-off-white);
  border-top: 1px solid var(--ari-light-grey);
  --ari-text-accent: var(--ari-ink);
}
.pcast-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.pcast-section-head__title {
  font-family: var(--font-role-display);
  font-size: 1.4rem;
  font-weight: var(--weight-display-title);
  color: var(--ari-color-fg, var(--ari-ink));
  margin: 0 0 1.5rem;
}
.pcast-section-head .pcast-section-head__title { margin-bottom: 0; }
.pcast-section-head__all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ari-text-accent);
  text-decoration: none;
  transition: gap 150ms ease;
  text-decoration-color: var(--ari-color-accent);
}
.pcast-section-head__all:hover { gap: 0.55rem; }

/* ── Card grid ────────────────────────────────────────── */
.pcast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  max-width: 1320px;
  margin-inline: auto;
}

/* ── Card ─────────────────────────────────────────────────
   Specificity note: the archive/single "Other Podcasts" grid and the homepage
   podcast grid share the ".pcast-grid" wrapper but render two different cards.
   The homepage rules (".pcast-grid .pcast-card…", 2 classes) outrank this
   section's ".pcast-card…" (1 class) on the properties both define (container
   box, overlay, title). The template part always adds "pcast-card--series" or
   "pcast-card--other" (see template-parts/podcast-series-card.php), so the
   conflicting rules below are scoped to
   ".pcast-grid .pcast-card.pcast-card--series/--other" (3 classes). Properties
   the homepage does not touch (__img, __body, __index, __meta, __cta) need no
   extra scoping. */
.pcast-grid .pcast-card.pcast-card--series,
.pcast-grid .pcast-card.pcast-card--other {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;    /* portrait: matches design */
  overflow: hidden;
  border-radius: 0;
  text-decoration: none;
}
.pcast-card:focus-visible {
  outline: 2px solid var(--ari-color-accent);
  outline-offset: 3px;
}

/* Background image fills the full card */
.pcast-card__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  width: 100%; height: 100%;
  transition: transform 500ms ease;
}
.pcast-card:hover .pcast-card__img { transform: scale(1.06); }

/* Poster-style gradient: near-clear at the top so the artwork stays
   visible, deepening toward the bottom where the text lockup sits. */
.pcast-grid .pcast-card.pcast-card--series .pcast-card__overlay,
.pcast-grid .pcast-card.pcast-card--other .pcast-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(6,4,2,0.05) 0%,
    rgba(6,4,2,0.1) 32%,
    rgba(6,4,2,0.55) 62%,
    rgba(6,4,2,0.93) 100%
  );
  transition: opacity 300ms ease;
}
.pcast-card:hover .pcast-card__overlay { opacity: 0.95; }

/* Series-number eyebrow: plain text label stacked above the title. */
.pcast-card__series-num {
  font-family: var(--font-role-interface);
  font-size: 1.05rem;
  font-weight: var(--weight-interface);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ari-text-accent);
  text-shadow: 0 1px 6px rgba(0,0,0,0.65);
}

/* Body: bottom-anchored, start-aligned text lockup (an editorial,
   poster-style layout instead of a centered symmetric stack) */
.pcast-card__body {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: start;
  padding: 1.5rem 1.35rem;
  gap: 0.65rem;
  z-index: 2;
}

/* Episode-count pill with mic icon: a small eyebrow above the title */
.pcast-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 6px rgba(0,0,0,0.65);
}
.pcast-card__meta svg {
  color: var(--ari-text-accent);
  flex-shrink: 0;
  filter: none;
}

/* Series title: largest, most visually dominant element on the card */
.pcast-grid .pcast-card.pcast-card--series .pcast-card__title,
.pcast-grid .pcast-card.pcast-card--other .pcast-card__title {
  font-size: 1.55rem;
  font-weight: var(--weight-reading-h2);
  color: #fff;
  margin: 0;
  line-height: 1.22;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-role-reading);
}

/* "View All" CTA: glass pill by default, fills with the accent color
   on hover; the arrow nudges forward for a bit of motion feedback. */
.pcast-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.55);
  padding: 0.45rem 0.9rem;
  border-radius: 0;
  width: fit-content;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background 150ms ease, border-color 150ms ease;
}
.pcast-card__cta svg { transition: transform 200ms ease; }
.pcast-card:hover .pcast-card__cta {
  background: var(--ari-color-accent-strong);
  border-color: var(--ari-color-accent);
}
.pcast-card:hover .pcast-card__cta svg { transform: translateX(3px); }

/* ── Pagination ───────────────────────────────────────── */
.pcast-pagination { margin-top: 2rem; }

/* ════════════════════════════════════════════════════════
   SINGLE PODCAST SERIES: Episode card grid
   ════════════════════════════════════════════════════════ */

/* Hero title tweak: single page title is larger */
.psingle-hero__title {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  max-width: 72ch;
}

/* ============================================================
   EPISODE NETFLIX SLIDER  (single-podcast-serie.php § 3)
   ============================================================ */

/* Full-width dark section */
.ep-slider-section {
  background: var(--ari-ink);
  padding: 2.5rem 0 3rem;
  overflow: hidden; /* clip the fade masks */
  position: relative;
  --ari-text-accent: var(--ari-apricot);
}

/* ── Section header ────────────────────────────────────────── */
.ep-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.ep-slider-head__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ep-slider-head__title {
  font-family: var(--font-role-display);
  font-size: 1.4rem;
  font-weight: var(--weight-display-title);
  color: #fff;
  margin: 0;
  letter-spacing: -0.02em;
}
.ep-slider-head__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 0.5rem;
  background: var(--ari-color-accent-strong);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 0;
  line-height: 1;
  flex-shrink: 0;
}
/* "Playing Episode N" indicator */
.ep-slider-head__playing {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  margin: 0;
}
.ep-slider-head__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ari-color-accent);
  animation: ep-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes ep-dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* ── Slider outer shell (positions arrows + fades) ─────────── */
.ep-slider-outer {
  position: relative;
}

/* ── Scrollable viewport ───────────────────────────────────── */
.ep-slider-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding: 0.75rem 0 1.25rem; /* vertical breathing room for box-shadows */
  cursor: grab;
}
.ep-slider-viewport::-webkit-scrollbar { display: none; }
.ep-slider-viewport:active { cursor: grabbing; }

/* ── Track: horizontal flex row ────────────────────────────── */
.ep-slider-track {
  display: flex;
  gap: 14px;
  width: max-content; /* grows to fit all cards */
  /* Mirror the u-container indent so the first card aligns with page content */
  padding-block: 0;
  padding-inline-start: max(1.5rem, calc((100vw - 1200px) / 2));
  padding-inline-end:   max(1.5rem, calc((100vw - 1200px) / 2));
}

/* ── Single episode card ───────────────────────────────────── */
.ep-slider__item {
  flex: 0 0 340px;
  width: 340px;
  aspect-ratio: 3 / 4;   /* portrait, matches pcast-card style */
  display: block;         /* thumb + body use absolute positioning */
  border-radius: 0;
  overflow: hidden;
  background: var(--ari-ink);
  cursor: pointer;
  position: relative;
  transition: transform 220ms ease, box-shadow 220ms ease;
  outline: 2px solid transparent;
  outline-offset: 0;
  user-select: none;
  --ari-text-accent: var(--ari-apricot);
}
.ep-slider__item:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: none;
  z-index: 2;
}
.ep-slider__item:focus-visible {
  outline-color: var(--ari-color-accent);
}

/* Active (currently playing) card */
.ep-slider__item--active {
  outline: 2px solid var(--ari-color-accent);
  outline-offset: 0;
}
.ep-slider__item--active:hover {
  outline-color: var(--ari-color-accent);
}

/* ── Thumbnail: fills the entire card (like pcast-card) ────── */
.ep-slider__thumb {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ari-ink);
  --ari-text-accent: var(--ari-apricot);
}
.ep-slider__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 320ms ease;
}
.ep-slider__item:hover .ep-slider__thumb-img {
  transform: scale(1.06);
}
.ep-slider__thumb-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--ari-ink) 0%, var(--ari-ink) 60%, var(--ari-ink) 100%);
  --ari-text-accent: var(--ari-apricot);
}

/* ── Overlay (ep number + play button + duration) ──────────── */
.ep-slider__thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.55rem 0.6rem;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    transparent 40%,
    transparent 55%,
    rgba(0,0,0,0.7) 100%
  );
  opacity: 0;
  transition: opacity 200ms ease;
}
.ep-slider__item:hover .ep-slider__thumb-overlay,
.ep-slider__item--active .ep-slider__thumb-overlay {
  opacity: 1;
}

/* Episode number pill: top-left */
.ep-slider__ep-num {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
  padding: 0.15rem 0.5rem;
  border-radius: 0;
  align-self: flex-start;
  line-height: 1.4;
}

/* Play button: centred in overlay */
.ep-slider__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ari-color-accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 200ms ease, background 160ms;
  box-shadow: none;
}
.ep-slider__item:hover .ep-slider__play-btn {
  transform: translate(-50%, -50%) scale(1);
}
.ep-slider__item--active .ep-slider__play-btn {
  transform: translate(-50%, -50%) scale(1);
  background: var(--ari-color-accent);
}

/* Duration: bottom-right */
.ep-slider__dur {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  align-self: flex-end;
  line-height: 1;
}

/* ── "Now playing" animated bars ───────────────────────────── */
.ep-slider__now-playing {
  position: absolute;
  bottom: 0.5rem;
  left: 0.55rem;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.ep-slider__now-playing span {
  display: block;
  width: 3px;
  border-radius: 0;
  background: var(--ari-color-accent-strong);
  animation: ep-bar-bounce 0.9s ease-in-out infinite;
}
.ep-slider__now-playing span:nth-child(1) { animation-delay: 0s;     height: 60%; }
.ep-slider__now-playing span:nth-child(2) { animation-delay: 0.15s;  height: 100%; }
.ep-slider__now-playing span:nth-child(3) { animation-delay: 0.3s;   height: 45%; }
.ep-slider__now-playing span:nth-child(4) { animation-delay: 0.45s;  height: 80%; }
@keyframes ep-bar-bounce {
  0%, 100% { transform: scaleY(0.35); }
  50%       { transform: scaleY(1);   }
}

/* ── Text body: gradient overlay pinned to card bottom ─────── */
.ep-slider__body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 3rem 0.9rem 0.9rem;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.55) 50%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  z-index: 3;
}
.ep-slider__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ari-text-accent);
  line-height: 1;
}
.ep-slider__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: var(--weight-reading-h2);
  line-height: 1.35;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-role-reading);
}
.ep-slider__date {
  margin: 0;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.55);
  line-height: 1;
}

/* ── Prev / Next arrow buttons ─────────────────────────────── */
.ep-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 160ms, border-color 160ms, transform 160ms;
  /* Hidden by default; show on section hover */
  opacity: 0;
  pointer-events: none;
}
.ep-slider-section:hover .ep-slider-btn {
  opacity: 1;
  pointer-events: auto;
}
.ep-slider-btn:hover {
  background: var(--ari-ember-dark);
  border-color: var(--ari-color-accent);
  transform: translateY(-50%) scale(1.1);
}
.ep-slider-btn--prev { left: 0.75rem; }
.ep-slider-btn--next { right: 0.75rem; }

/* ── Edge vignette fades ───────────────────────────────────── */
.ep-slider-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 5;
  pointer-events: none;
}
.ep-slider-fade--l {
  left: 0;
  background: linear-gradient(to right, var(--ari-ink), transparent);
  --ari-text-accent: var(--ari-apricot);
}
.ep-slider-fade--r {
  right: 0;
  background: linear-gradient(to left, var(--ari-ink), transparent);
  --ari-text-accent: var(--ari-apricot);
}

/* ============================================================
   EVENT SINGLE (single-event.php)
   ============================================================ */

/* ── Page shell ───────────────────────────────────────────── */
.ev-single {
  padding: 2.5rem 0 4rem;
}

/* ── Two-column layout: main | sidebar ────────────────────── */
.ev-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
  align-items: start;
}

/* ── Left: Main content ────────────────────────────────────── */
.ev-main { min-width: 0; }

/* ── Featured image ────────────────────────────────────────── */
.ev-hero-img-wrap {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 1.5rem;
  aspect-ratio: 16 / 9;
}
.ev-hero-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Overlaid type badges on hero image */
.ev-hero-badges {
  position: absolute;
  bottom: 0.75rem;
  inset-inline-start: 0.75rem;
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.ev-hero-badges .ev-type-badge {
  background: rgba(0,0,0,0.55);
  border-color: transparent;
  color: #fff;
  backdrop-filter: blur(4px);
}
.ev-hero-badges .ev-type-badge:hover {
  background: var(--ari-ember-dark);
  border-color: var(--ari-color-accent);
}

/* Standalone type badges (no image state) */
.ev-type-badges {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.ev-type-badge {
  display: inline-block;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ari-text-accent);
  text-decoration: none;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--ari-color-accent);
  border-radius: 0;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.ev-type-badge:hover { background: var(--ari-ember-dark); color: #fff; }

/* ── Event title ───────────────────────────────────────────── */
.ev-title {
  font-family: var(--font-role-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--weight-display-title);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ari-color-text);
  margin: 0 0 1.5rem;
}

/* ── Sub-sections wrapper ──────────────────────────────────── */
.ev-sections {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Individual section ────────────────────────────────────── */
.ev-section {
  border-top: 1px solid var(--ari-color-border);
  padding: 1.5rem 0;
}
.ev-section:last-child {
  border-bottom: 1px solid var(--ari-color-border);
}

.ev-section__header {
  margin-bottom: 1.1rem;
}

.ev-section__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-role-display);
  font-size: var(--ari-scale-h2);
  font-weight: var(--weight-display-title);
  color: var(--ari-color-text);
  margin: 0;
  line-height: var(--ari-leading-h2-latin);
}
.ev-section__title svg {
  color: var(--ari-text-accent);
  flex-shrink: 0;
}

.ev-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--ari-color-accent-strong);
  color: #fff;
  border-radius: 0;
  line-height: 1;
  margin-inline-start: 0.25rem;
}

.ev-section__body { /* body within each section */ }

.ev-section__empty {
  color: var(--ari-color-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* ── Single-event tabbed sections ──────────────────────────── */
.ev-stab-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 2px solid var(--ari-color-border);
  margin-bottom: 0;
}

.ev-stab-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.9rem 1.75rem 0.9rem 0;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;           /* overlap parent border so active line sits flush */
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ari-color-text-muted);
  cursor: pointer;
  transition: color 160ms, border-color 160ms;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ev-stab-nav__btn + .ev-stab-nav__btn {
  padding-inline-start: 1.75rem;
}
.ev-stab-nav__btn svg {
  flex-shrink: 0;
  transition: color 160ms;
}
.ev-stab-nav__btn:hover {
  color: var(--ari-color-text);
}
.ev-stab-nav__btn:focus-visible {
  outline: 2px solid var(--ari-color-accent);
  outline-offset: 2px;
  border-radius: 0;
}
.ev-stab-nav__btn--active {
  color: var(--ari-color-text);
  border-bottom-color: var(--ari-color-accent);
}
.ev-stab-nav__btn--active svg {
  color: var(--ari-text-accent);
}

/* Count badge on tab */
.ev-stab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--ari-color-border);
  color: var(--ari-color-text-muted);
  border-radius: 0;
  line-height: 1;
  transition: background 160ms, color 160ms;
}
.ev-stab-nav__btn--active .ev-stab-badge {
  background: var(--ari-color-accent-strong);
  color: #fff;
}

/* ── Tab panels ─────────────────────────────────────────────── */
.ev-stab-panels {
  padding-top: 1.75rem;
}

.ev-stab-panel {
  display: none;
}
.ev-stab-panel.is-active {
  display: block;
  animation: ev-stab-appear 220ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@keyframes ev-stab-appear {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ev-stab-panel.is-active { animation: none; }
}

.ev-stab-panel:focus          { outline: none; }
.ev-stab-panel:focus-visible  {
  outline: 2px solid var(--ari-color-accent);
  border-radius: 0;
}

/* Sub-sections within the people panel */
.ev-stab-sub-section {
  padding: 1.25rem 0;
}
.ev-stab-sub-section:first-child {
  padding-top: 0;
}
.ev-stab-sub-section + .ev-stab-sub-section {
  border-top: 1px solid var(--ari-color-border);
}

/* Sub-section label (shown only when speakers + moderators both present) */
.ev-stab-sub-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-role-interface);
  font-size: 0.8125rem;
  font-weight: var(--weight-interface);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ari-color-text-muted);
  margin: 0 0 0.9rem;
}
.ev-stab-sub-title svg {
  color: var(--ari-text-accent);
  flex-shrink: 0;
}

/* Registration notice above upcoming events' description (hidden once past) */
.ev-register-notice {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--ari-sand);
  border-inline-start: 4px solid var(--ari-orange);
  font-size: var(--ari-scale-body);
  line-height: var(--ari-leading-body-latin);
  color: var(--ari-ink);
}
html[lang^="ar"] .ev-register-notice { line-height: var(--ari-leading-body-arabic); }
.ev-register-notice p { margin: 0; }
.ev-register-notice p + p { margin-top: 0.5rem; }
.ev-register-notice a { color: var(--ari-ink); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.ev-register-notice a:hover { text-decoration-thickness: 2px; }

/* ── Description expandable ────────────────────────────────── */
.ev-description-wrap {
  position: relative;
}
.ev-description-wrap.is-collapsed .ev-description-content {
  max-height: 200px;
  overflow: hidden;
}
.ev-description-wrap.is-collapsed .ev-description-fade {
  display: block;
}
.ev-description-fade {
  display: none;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, #fff 85%);
  pointer-events: none;
  --ari-text-accent: var(--ari-ink);
}

/* Read-more toggle button */
.ev-read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ari-text-accent);
  cursor: pointer;
  transition: color 140ms;
  text-decoration-color: var(--ari-color-accent);
}
.ev-read-more-btn:hover { color: var(--ari-color-accent-2, var(--ari-text-accent));  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.ev-read-more-btn__icon {
  transition: transform 220ms ease;
}
.ev-read-more-btn[aria-expanded="true"] .ev-read-more-btn__icon {
  transform: rotate(180deg);
}
/* Toggle visible label */
.ev-read-more-btn__label-less[aria-hidden="true"] { display: none; }
.ev-read-more-btn__label-more[aria-hidden="true"] { display: none; }

/* ── Person list (speakers / moderators) ───────────────────── */
.ev-person-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.ev-person-list__item.is-hidden { display: none; }

.ev-person-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border: 1px solid var(--ari-color-border);
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  background: #fff;
  position: relative;
  transition: box-shadow 180ms, border-color 180ms, transform 180ms;
  --ari-text-accent: var(--ari-ink);
}
.ev-person-card:hover {
  box-shadow: none;
  border-color: var(--ari-color-accent);
  transform: translateY(-2px);
  background: #fff;
  border-radius: 0;
  padding-inline-start: 1.25rem;
  padding-inline-end: 1.25rem;
}

.ev-person-card__avatar-wrap {
  width: 72px; height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ari-off-white);
  border: 2px solid var(--ari-color-border);
  margin-bottom: 1rem;
  --ari-text-accent: var(--ari-ink);
}
.ev-person-card__avatar {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block;
}
.ev-person-card__avatar-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ari-warm-grey);
}

.ev-person-card__body {
  min-width: 0;
  flex: 1;
}

.ev-person-card__name {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ari-color-text);
  margin: 0 0 0.25rem;
  line-height: 1.3;
  padding-inline-end: 1.5rem; /* space for the arrow */
}
.ev-person-card__role {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ari-text-accent);
  margin: 0;
  line-height: 1.4;
}
.ev-person-card__affiliation {
  display: block;
  font-size: 0.8125rem;
  color: var(--ari-color-text-muted);
  margin: 0.2rem 0 0;
  line-height: 1.4;
}
.ev-person-card__arrow {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  color: var(--ari-warm-grey);
  flex-shrink: 0;
  transition: color 140ms, transform 140ms;
}
.ev-person-card:hover .ev-person-card__arrow {
  color: var(--ari-text-accent);
  transform: translate(2px, -2px);
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}

/* See-all button (below person list) */
.ev-see-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  padding: 0.5rem 1rem;
  background: none;
  border: 1.5px solid var(--ari-color-border);
  border-radius: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ari-color-text);
  cursor: pointer;
  transition: border-color 160ms, color 160ms;
}
.ev-see-all-btn:hover {
  border-color: var(--ari-color-accent);
  color: var(--ari-text-accent);
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}
.ev-see-all-btn svg { transition: transform 220ms ease; }
.ev-see-all-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── Right: Sidebar ────────────────────────────────────────── */
.ev-sidebar {
  position: sticky;
  top: calc(var(--ari-header-height, 130px) + 1.5rem);
}

/* ── Info card ─────────────────────────────────────────────── */
.ev-info-card {
  background: #fff;
  border: 1px solid var(--ari-color-border);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  --ari-text-accent: var(--ari-ink);
}

/* Date block: top area with calendar display */
.ev-info-card__date-block {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  /* Even padding on all four sides, and enough of it that the calendar tile is
     not crowded against the card edge. Was 1.25rem/1.25rem/1rem, which left the
     tile sitting tight against the rows below it. */
  padding: 1.5rem 1.5rem;
  background: var(--ari-ink);
  color: #fff;
  --ari-text-accent: var(--ari-apricot);
}

.ev-info-card__date-cal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ari-color-accent-strong);
  border-radius: 0;
  width: 64px;
  min-height: 72px;
  padding: 0.4rem 0.5rem;
  flex-shrink: 0;
  text-align: center;
}
.ev-info-card__date-month {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  line-height: 1;
  margin-bottom: 0.15rem;
}
.ev-info-card__date-day {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.03em;
}
.ev-info-card__date-year {
  display: block;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
  line-height: 1;
  margin-top: 0.15rem;
}

.ev-info-card__date-label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ev-info-card__date-label strong {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.ev-info-card__past-badge {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  padding: 0.2rem 0.55rem;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.2);
}

/* Info rows: time / location */
.ev-info-card__row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 1.25rem;
  font-size: 0.875rem;
  color: var(--ari-color-text);
  border-top: 1px solid var(--ari-color-border);
}
.ev-info-card__row svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--ari-text-accent);
}
.ev-info-card__row span { line-height: 1.4; }

.ev-info-card__divider {
  border: none;
  border-top: 1px solid var(--ari-color-border);
  margin: 0;
}

/* CTA buttons area */
.ev-info-card__register-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--ari-color-accent-strong);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 160ms;
  text-align: center;
}
.ev-info-card__register-btn:hover {
  background: var(--ari-color-accent-2, var(--ari-ember-dark));
  color: #fff;
}
.ev-info-card__register-btn--secondary {
  background: var(--ari-umber);
  --ari-text-accent: var(--ari-apricot);
}
.ev-info-card__register-btn--secondary:hover {
  background: var(--ari-umber);
}

/* Secondary CTA under Register: an "Add to calendar" link out to Google
   Calendar. */
.ev-info-card__calendar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.7rem 1rem;
  background: none;
  color: var(--ari-color-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  border-top: 1px solid var(--ari-color-border);
  cursor: pointer;
  transition: color 160ms, background 160ms;
  text-align: center;
}
.ev-info-card__calendar-btn:hover,
.ev-info-card__calendar-btn:focus-visible {
  color: var(--ari-color-text);
  background: var(--ari-color-surface, var(--ari-off-white));
}

/* Event type pills in sidebar */
.ev-info-card__types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--ari-color-border);
}

.ev-info-card__partners-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ari-color-text-muted);
  margin: 0;
  padding: 0.75rem 1.25rem 0.35rem;
}
/* Partners are a name-led vertical list, not an inline logo wall: few partner
   records have a logo, and partner names are long enough that wrapping them
   inline beside a logo reads as broken. One partner per row keeps the list
   legible whatever mix of logos and names it holds. */
.ev-info-card__partners {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0 1.25rem 1rem;
}
.ev-partner { margin: 0; }
.ev-partner__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ari-color-text);
  text-decoration: none;
}
/* Fixed slot so names stay aligned down the column whether or not the row has
   a logo. Only rendered when some partner in the list has one. */
.ev-partner__logo {
  flex: 0 0 38px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* contain, not cover: partner logos are supplied at wildly different aspect
   ratios and several are rasters with a solid background, so they must be
   fitted whole rather than cropped to fill. */
.ev-partner__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.ev-partner__name {
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
  min-width: 0;
}
.ev-partner__link:hover .ev-partner__name,
.ev-partner__link:focus-visible .ev-partner__name {
  color: var(--ari-text-accent);
  text-decoration: underline;
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}

/* ============================================================
   EVENTS ARCHIVE (Convenings)
   ============================================================ */

/* ── Page header ──────────────────────────────────────────── */
.ev-header {
  background: var(--ari-ink);
  --ari-text-accent: var(--ari-apricot);
}

/* ── Tab strip: anchored inside the dark header ──────────── */
.ev-tabs {
  background: #fff;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
  --ari-text-accent: var(--ari-ink);
}
.ev-tabs__inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* inherits u-container width, same max-width as the hero/content sections */
}
.ev-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem 1.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
  position: relative;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ev-tab:hover {
  color: var(--ari-color-text, var(--ari-ink));
  background: var(--ari-color-surface, var(--ari-off-white));
}
.ev-tab--active {
  color: var(--ari-color-text, var(--ari-ink));
  border-bottom-color: var(--ari-color-accent);
}
.ev-tab--active:hover { background: transparent; }
.ev-tab svg { flex-shrink: 0; }

/* Count pill inside tab */
.ev-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 0.4rem;
  background: var(--ari-color-accent-strong);
  color: #fff;
  border-radius: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}
.ev-header__inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 2rem 4rem;
  align-items: center;
}
.ev-header__title-col {
  border-inline-start: 4px solid var(--ari-color-accent);
  padding-inline-start: 1.25rem;
}
.ev-header__title {
  font-family: var(--font-role-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--weight-display-title);
  color: #fff;
  margin: 0;
  line-height: 1.1;
}
.ev-header__desc {
  font-size: 0.92rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.78);
}
.ev-header__desc p { margin: 0; }

/* ── Section titles ───────────────────────────────────────── */
.ev-section-title {
  font-family: var(--font-role-display);
  font-size: 1.55rem;
  font-weight: var(--weight-display-title);
  color: var(--ari-color-fg, var(--ari-ink));
  margin: 0 0 2rem;
}

/* ── Upcoming events section ──────────────────────────────── */
.ev-upcoming-section {
  padding: 3rem 0;
  border-bottom: 1px solid var(--ari-color-border, var(--ari-light-grey));
}
.ev-upcoming-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
}

/* ── Upcoming event card ──────────────────────────────────── */
.ev-upcoming-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}

/* Circle wrapper with side dots */
.ev-circ-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  /* The ring carries a 5px outer box-shadow that is not part of its box, so a
     0.25rem margin let it sit almost flush against the card edge above and the
     time line below. */
  margin: 0.5rem 0 1rem;
}

/* Orange decorative dots either side of the ring */
.ev-circ-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ari-color-accent);
  flex-shrink: 0;
}
.ev-circ-dot--l { margin-right: 6px; }
.ev-circ-dot--r { margin-left: 6px; }

/* The circle itself */
.ev-circ {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  border: 3px solid var(--ari-color-accent);
  box-shadow: none; /* brand: no glow */
  background-size: cover;
  background-position: center;
  background-color: var(--ari-ink);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  --ari-text-accent: var(--ari-apricot);
}
.ev-circ__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.48);
  border-radius: 50%;
}
.ev-circ__date {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 2px;
  color: #fff;
}
.ev-circ__day {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
}
.ev-circ__month {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ev-circ__year {
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
}

.ev-upcoming-card__time {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ari-color-muted, var(--ari-warm-grey));
}

.ev-upcoming-card__title {
  margin: 0;
  font-family: var(--font-role-reading);
  font-size: 1rem;
  font-weight: var(--weight-reading-h2);
  line-height: 1.4;
  color: var(--ari-color-fg, var(--ari-ink));
}
.ev-upcoming-card__title a {
  color: inherit;
  text-decoration: none;
}
.ev-upcoming-card__title a:hover {
  color: var(--ari-text-accent);
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}

.ev-upcoming-card__speakers {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ari-color-muted, var(--ari-warm-grey));
}
.ev-upcoming-card__speakers-label {
  font-weight: 600;
  color: var(--ari-color-fg, var(--ari-ink));
  margin-right: 0.25em;
}

/* Register Now link */
.ev-upcoming-card__register {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ari-text-accent);
  text-decoration: none;
  margin-top: 0.25rem;
  transition: color 150ms ease;
}
.ev-upcoming-card__register:hover {
  color: var(--ari-text-accent);
  text-decoration: underline;
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}

/* ── Past events section ──────────────────────────────────── */
.ev-past-section {
  padding: 3rem 0 4rem;
}
.ev-past-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
  margin-bottom: 2.5rem;
}

/* ── Past event card ──────────────────────────────────────── */
.ev-past-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ari-color-fg, var(--ari-ink));
  transition: transform 200ms ease;
}
.ev-past-card:hover { transform: translateY(-2px); }

/* Image area */
.ev-past-card__img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0;
  background: #e5e5e5;
  margin-bottom: 0.85rem;
  flex-shrink: 0;
  --ari-text-accent: var(--ari-ink);
}
.ev-past-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 350ms ease;
}
.ev-past-card:hover .ev-past-card__img { transform: scale(1.04); }
.ev-past-card__img-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #e8e4e0, #d0ccc8);
  --ari-text-accent: var(--ari-ink);
}

/* Topic badge: bottom-left of image */
.ev-past-card__tag-badge {
  position: absolute;
  bottom: 0.7rem;
  left: 0.7rem;
  background: rgba(13,13,18,0.72);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 0;
  backdrop-filter: blur(4px);
  line-height: 1.4;
}

/* Card text body */
.ev-past-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ev-past-card__meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ari-color-muted, var(--ari-warm-grey));
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.ev-past-card__sep { opacity: 0.4; }
.ev-past-card__type { font-weight: 600; }
.ev-past-card__title {
  margin: 0;
  font-family: var(--font-role-reading);
  font-size: 0.95rem;
  font-weight: var(--weight-reading-h2);
  line-height: 1.4;
  color: var(--ari-color-fg, var(--ari-ink));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ev-past-card:hover .ev-past-card__title {
  color: var(--ari-text-accent);
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}

/* Pagination: spacing override for event context */
.ev-pagination { margin-top: 0; }

/* ── Event-type taxonomy archive extras ───────────────────── */

/* "Convenings" breadcrumb eyebrow above the term title */
.ev-type-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
}
.ev-type-eyebrow__link {
  color: inherit;
  text-decoration: none;
  transition: color 150ms;
}
.ev-type-eyebrow__link:hover { color: #fff; }

/* Empty state: shown when no events match the term */
.ev-empty {
  padding: 4rem 0 6rem;
  text-align: center;
}
.ev-empty__msg {
  font-size: 1.1rem;
  color: var(--ari-warm-grey);
  margin-bottom: 1.25rem;
}
.ev-empty__back {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ari-text-accent);
  text-decoration: none;
  transition: opacity 150ms;
}
.ev-empty__back:hover { opacity: 0.75; }

/* ============================================================
   EXPERTS / PEOPLE ARCHIVE  (archive-people.php)
   ============================================================ */

/* ── Page header: remove bottom padding; tab strip follows ─ */
.experts-header {
  background: var(--ari-ink);
  --ari-text-accent: var(--ari-apricot);
}

/* ══ EXPERTS TAB: rich profile cards ═══════════════════════ */
.people-experts-wrap { padding: 2.5rem 0 4rem; }

/* Group section */
.people-experts-group { margin-bottom: 3rem; }
.people-experts-group__heading-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.people-experts-group__title {
  font-family: var(--font-role-display);
  font-size: var(--ari-scale-h2);
  font-weight: var(--weight-display-title);
  color: var(--ari-color-text);
  margin: 0;
  white-space: nowrap;
  letter-spacing: 0.01em;
  line-height: var(--ari-leading-h2-latin);
}
.people-experts-group__rule {
  flex: 1;
  height: 1px;
  background: var(--ari-color-border);
}

/* Card grid: 2 columns, border-bottom dividers (matches contributors layout) */
.people-experts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: 0.75rem;
}

/* Larger variant of expert-card used in the Experts tab */
.expert-card--lg {
  padding: 1.25rem 0;
  gap: 1.25rem;
  align-items: center;
}
.expert-card--lg .expert-card__avatar-wrap {
  width: 80px;
  height: 80px;
}
.expert-card--lg .expert-card__avatar-initials {
  font-size: 1.1rem;
}
.expert-card--lg .expert-card__name {
  font-size: 1.1rem;
}
.expert-card--lg .expert-card__occupation {
  font-size: 0.875rem;
  -webkit-line-clamp: 3;
}
.expert-card--lg .expert-card__bio {
  font-size: 0.9rem;
  -webkit-line-clamp: 4;
}

.experts-header__inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 2rem 4rem;
  align-items: center;
}
.experts-header__title-col {
  border-left: 4px solid var(--ari-color-accent);
  padding-left: 1.25rem;
}
.experts-header__title {
  font-family: var(--font-role-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--weight-display-title);
  color: #fff;
  margin: 0;
  line-height: 1.1;
}
.experts-header__desc {
  font-size: 0.92rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.78);
}
.experts-header__desc p { margin: 0; }

/* ── A–Z Navigation ───────────────────────────────────────── */
.experts-az-nav {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
}
.experts-az-nav__letter {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ari-color-muted, var(--ari-warm-grey));
  text-decoration: none;
  padding: 0.2rem 0.15rem;
  border-radius: 0;
  transition: color 140ms ease;
  line-height: 1;
}
.experts-az-nav__letter:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.experts-az-nav__letter.is-active {
  color: var(--ari-text-accent);
  font-weight: 600;
}
.experts-az-nav__sep {
  color: var(--ari-light-grey);
  font-size: 0.8125rem;
  padding: 0 0.2rem;
  user-select: none;
}

/* ── Results container ────────────────────────────────────── */
.experts-results {
  padding: 2.5rem 0 4rem;
}
.experts-empty {
  color: var(--ari-color-muted, var(--ari-warm-grey));
  font-size: 0.95rem;
  padding: 2rem 0;
  text-align: center;
}

/* ── Letter group ─────────────────────────────────────────── */
.experts-letter-group {
  margin-bottom: 2.5rem;
}
.experts-letter-group__heading-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.experts-letter-group__letter {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ari-color-fg, var(--ari-ink));
  margin: 0;
  line-height: 1;
  flex-shrink: 0;
}
.experts-letter-group__rule {
  flex: 1;
  height: 1px;
  background: var(--ari-color-border, var(--ari-off-white));
  --ari-text-accent: var(--ari-ink);
}

/* ── 2-column expert grid ─────────────────────────────────── */
.experts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

/* ── Expert card ──────────────────────────────────────────── */
.expert-card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.85rem 0;
  text-decoration: none;
  color: var(--ari-color-fg, var(--ari-ink));
  border-bottom: 1px solid var(--ari-color-border, var(--ari-light-grey));
  transition: background 150ms ease;
}
.expert-card:hover { background: var(--ari-sand); }

.expert-card__avatar-wrap {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
}
.expert-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.expert-card__avatar-initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--ari-off-white);
  color: var(--ari-color-muted, var(--ari-warm-grey)); /* not #6b7280 (~3.9:1 on #e5e7eb, fails WCAG 1.4.3) */
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
  --ari-text-accent: var(--ari-ink);
}

/* Info block */
.expert-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.expert-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ari-color-fg, var(--ari-ink));
  line-height: 1.3;
  transition: color 150ms ease;
}
.expert-card:hover .expert-card__name {
  color: var(--ari-text-accent);
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}
.expert-card__occupation {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ari-color-muted, var(--ari-warm-grey));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.expert-card__bio {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ari-color-muted, var(--ari-warm-grey));
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pagination spacing */
.experts-pagination { margin-top: 1rem; }

/* ============================================================
   SINGLE EXPERT / PEOPLE
   ============================================================ */

/* ── Dark band behind avatar ──────────────────────────────── */
.people-header-band {
  background: var(--ari-ink);
  height: 90px;
  --ari-text-accent: var(--ari-apricot);
}

/* ── Intro row: avatar | name+occ | social ────────────────── */
.people-intro {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0 2rem;
  padding-top: 0;
  padding-bottom: 2rem;
}

/* Avatar: overlaps the dark band by half */
.people-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 5px solid #fff;
  box-shadow: none;
  margin-top: -75px;          /* pull up by half the height */
  flex-shrink: 0;
  background: var(--ari-off-white);
  --ari-text-accent: var(--ari-ink);
}
.people-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 600;
  color: var(--ari-color-muted, var(--ari-warm-grey));
  background: var(--ari-off-white);
  border: 5px solid #fff;
  box-shadow: none;
  margin-top: -75px;
  width: 150px; height: 150px;
  border-radius: 50%;
  flex-shrink: 0;
  --ari-text-accent: var(--ari-ink);
}

/* Name + occupation */
.people-intro__info { min-width: 0; }
.people-intro__name {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 600;
  color: var(--ari-text-accent);
  margin: 0 0 0.3rem;
  line-height: 1.15;
}
.people-intro__occ {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ari-color-muted, var(--ari-warm-grey));
}

/* Social icons row */
.people-intro__social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.people-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--ari-light-grey);
  color: var(--ari-color-fg, var(--ari-ink));
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.people-social-link:hover {
  border-color: var(--ari-color-accent);
  color: var(--ari-text-accent);
  background: var(--ari-sand);
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}

/* ── Biography ────────────────────────────────────────────── */
.people-bio {
  padding: 0 0 2.5rem;
  border-bottom: 1px solid var(--ari-color-border, var(--ari-light-grey));
}
.people-bio__body {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--ari-color-fg, var(--ari-ink));
  text-align: start;
  max-width: 88ch;
}
.people-bio__body p { margin: 0 0 1em; }
.people-bio__body p:last-child { margin-bottom: 0; }

/* ── Section title ────────────────────────────────────────── */
.people-section-title {
  font-family: var(--font-role-display);
  font-size: 1.55rem;
  font-weight: var(--weight-display-title);
  color: var(--ari-color-fg, var(--ari-ink));
  margin: 0 0 1.75rem;
}

/* ── Highlighted Contributions ────────────────────────────── */
.people-contribs {
  padding: 2.5rem 0 3rem;
}
.people-contribs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
  margin-bottom: 2rem;
}

/* Contribution card */
.contrib-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ari-color-fg, var(--ari-ink));
  transition: transform 200ms ease;
}
.contrib-card:hover { transform: translateY(-2px); }

.contrib-card__img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0;
  background: var(--ari-off-white);
  margin-bottom: 0.85rem;
  flex-shrink: 0;
  --ari-text-accent: var(--ari-ink);
}
.contrib-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 350ms ease;
}
.contrib-card:hover .contrib-card__img { transform: scale(1.04); }
.contrib-card__img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #e8e4e0, #d0ccc8);
  --ari-text-accent: var(--ari-ink);
}

.contrib-card__body { display: flex; flex-direction: column; gap: 0.35rem; }
.contrib-card__meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ari-color-muted, var(--ari-warm-grey));
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.contrib-card__sep { opacity: 0.4; }
.contrib-card__type { font-weight: 600; }
.contrib-card__title {
  margin: 0;
  font-family: var(--font-role-reading);
  font-size: 0.95rem;
  font-weight: var(--weight-reading-h2);
  line-height: 1.4;
  color: var(--ari-color-fg, var(--ari-ink));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.contrib-card:hover .contrib-card__title {
  color: var(--ari-text-accent);
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}

.people-pagination { margin-top: 0; }

/* ── Video Carousel ───────────────────────────────────────── */
.people-videos-section {
  padding: 2.5rem 0 3.5rem;
  overflow: hidden;
}
.people-video-carousel-outer {
  position: relative;
  overflow: hidden;
  width: min(var(--ari-max-width), 92vw);   /* match .u-container edges exactly, no edge peeking */
  margin-inline: auto;
}
.people-video-track {
  display: flex;
  gap: 1.25rem;
  transition: transform 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.people-video-slide {
  flex: 0 0 calc(33.333% - 0.84rem);
  min-width: 0;
}

.people-video-card {
  border-radius: 0;
  overflow: hidden;
  background: var(--ari-ink);
  outline: none;
  --ari-text-accent: var(--ari-apricot);
}
.people-video-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--ari-ink);
  overflow: hidden;
  --ari-text-accent: var(--ari-apricot);
}
.people-video-card__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.28);
  transition: background 200ms ease;
}
.people-video-card:hover .people-video-card__overlay { background: rgba(0,0,0,0.38); }

.people-video-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  border: none;
  color: var(--ari-text-accent);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: transform 200ms ease, background 150ms ease;
  padding-left: 3px;  /* optical centre for play icon */
}
.people-video-card__play:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: #fff;
}

.people-video-card__meta { padding: 0.75rem 1rem; }
.people-video-card__title {
  margin: 0;
  font-family: var(--font-role-reading);
  font-size: 0.88rem;
  font-weight: var(--weight-reading-h2);
  line-height: 1.4;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(0.88rem * 1.4 * 2);   /* always reserve 2 lines so card heights stay aligned across the row */
}
.people-video-card__title a { color: inherit; text-decoration: none; }
.people-video-card__title a:hover { color: rgba(255,255,255,0.8); }

/* Arrow buttons */
.pv-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3);
  background: rgba(13,13,18,0.75);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  backdrop-filter: blur(4px);
  transition: background 150ms ease, border-color 150ms ease;
}
.pv-arrow:hover { background: var(--ari-ember-dark); border-color: var(--ari-color-accent); }
.pv-arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.pv-arrow--prev { left: 0.75rem; }
.pv-arrow--next { right: 0.75rem; }

/* Dot indicators */
.pv-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
}
.pv-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: #d1d5db;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
  padding: 0;
}
.pv-dot.is-active {
  background: var(--ari-color-accent);
  transform: scale(1.3);
}

/* ── Video Lightbox ───────────────────────────────────────── */
.pv-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.pv-lightbox[hidden] { display: none; }
.pv-lightbox__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 150ms ease;
}
.pv-lightbox__close:hover { background: rgba(255,255,255,0.15); }
.pv-lightbox__inner {
  width: 100%;
  max-width: 900px;
}
.pv-lightbox__iframe-wrap {
  position: relative;
  padding-top: 56.25%;  /* 16:9 */
  background: var(--ari-ink);
  border-radius: 0;
  overflow: hidden;
  --ari-text-accent: var(--ari-apricot);
}
.pv-lightbox__iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
}

/* ============================================================
   WRITE WITH ARI  (template-pages-write-with-ari.php)
   ============================================================ */

/* Page-level sizing tokens: the icon column width and the gap beside it are
   referenced by several rules (and by the no-icon indent that keeps a section
   without an icon aligned with the ones that have one), so they live in one
   place and responsive.css only has to change these two values. */
.wwa-page {
  --wwa-icon-size: 64px;
  --wwa-icon-gap: 1.75rem;
}

/* ── Highlighted keyword: accent-coloured mark ───────────── */
/* Applied by editors through Formats > ARI highlight in the wysiwyg fields. */
.wwa-body mark,
.wwa-body .wwa-highlight,
mark.wwa-highlight {
  background: linear-gradient(120deg, rgba(219, 89, 33, 0.13) 0%, rgba(219, 89, 33, 0.07) 100%);
  color: var(--ari-text-accent);
  font-weight: 600;
  padding: 0.05em 0.25em;
  border-radius: 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-style: normal; /* override <em> nesting if any */
}

/* ── Wysiwyg output container ─────────────────────────────── */
.wwa-wysiwyg-content {
  font-size: 0.9rem;
  color: var(--ari-color-text);
  line-height: 1.75;
}
.wwa-wysiwyg-content > :first-child { margin-top: 0; }
.wwa-wysiwyg-content > :last-child  { margin-bottom: 0; }
.wwa-wysiwyg-content p  { margin: 0 0 0.75rem; }
.wwa-wysiwyg-content ul,
.wwa-wysiwyg-content ol {
  margin: 0 0 0.75rem;
  padding-inline-start: 1.25rem; /* logical: flips for Arabic without an RTL override */
}
.wwa-wysiwyg-content li { margin-bottom: 0.35rem; }
.wwa-wysiwyg-content a {
  color: var(--ari-text-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ari-color-accent);
}
.wwa-wysiwyg-content a:hover { color: var(--ari-color-accent-2, var(--ari-text-accent));  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }

/* Prose readability cap: sections without a second column (e.g. "The Review
   Process") have nothing to keep their text narrow the way .wwa-split's
   two-up grid naturally does, so long lines would run the full width of
   .wwa-section__body. Cap just the text, and leave it flush after the icon
   column rather than centring it (centring would misalign it against the
   split section above and below). */
.wwa-section__body:not(.wwa-split) > .wwa-wysiwyg-content {
  max-width: 680px;
}

/* ── Page body ────────────────────────────────────────────── */
.wwa-body { padding: 2.5rem 0 4rem; }

/* ── Banner image ─────────────────────────────────────────── */
/* Fixed responsive height rather than the image's own ratio: the field takes
   any upload, and an image that is not a clean landscape crop would otherwise
   render as a hero-sized block on a wide screen. A height known from CSS also
   means the space is reserved before the file loads, so nothing below shifts. */
.wwa-banner {
  margin: 0 0 2rem;
  border-radius: 0;
  overflow: hidden;
  background: var(--ari-color-surface, var(--ari-off-white));
  --ari-text-accent: var(--ari-ink);
}
.wwa-banner__img {
  display: block;
  width: 100%;
  height: clamp(220px, 32vw, 420px);
  object-fit: cover;
}

/* ══ SECTION ROWS  (icon-left + content-right) ═══════════════ */
.wwa-section {
  display: flex;
  gap: var(--wwa-icon-gap);
  align-items: flex-start;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--ari-color-border);
}
.wwa-section--last { border-bottom: none; padding-bottom: 0.5rem; }

/* A section with no icon keeps its text on the same line as the rest, so the
   column of body copy stays straight down the page. */
.wwa-section--no-icon .wwa-section__body {
  padding-inline-start: calc(var(--wwa-icon-size) + var(--wwa-icon-gap));
}

/* Icon circle column */
.wwa-section__icon-col { flex-shrink: 0; }

.wwa-icon-circle {
  width: var(--wwa-icon-size, 64px);
  height: var(--wwa-icon-size, 64px);
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--ari-color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--ari-text-accent);
  box-shadow: none;
  --ari-text-accent: var(--ari-ink);
}
/* Tinted variant for resource cards */
.wwa-icon-circle--teal {
  background: var(--ari-sand);
  border-color: var(--ari-clay);
  color: var(--ari-umber);
}

/* Content column */
.wwa-section__body { flex: 1; min-width: 0; }
.wwa-section__title {
  font-family: var(--font-role-display);
  font-size: var(--ari-scale-h2);
  font-weight: var(--weight-display-title);
  color: var(--ari-color-text);
  margin: 0 0 0.75rem;
  line-height: var(--ari-leading-h2-latin);
  text-wrap: balance;
}
.wwa-section__subtitle {
  font-size: 0.975rem;
  font-weight: 600;
  color: var(--ari-color-text);
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

/* ── Split two-column layout (text + checklist) ───────────── */
.wwa-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2.5rem;
  align-items: start;
}

/* ── Checkmark list ───────────────────────────────────────── */
.wwa-check-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.wwa-check-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ari-color-text);
}
.wwa-check-list__icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(219, 89, 33, 0.1);
  border: 1.5px solid var(--ari-color-accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--ari-text-accent);
  margin-top: 0.05em;
}

/* ── Call-to-action card ──────────────────────────────────── */
.wwa-form-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1.5px solid var(--ari-color-accent);
  border-radius: 0;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  text-decoration: none;
  transition: background 160ms ease, box-shadow 160ms ease;
  --ari-text-accent: var(--ari-ink);
}
.wwa-form-card:hover,
.wwa-form-card:focus-visible {
  background: rgba(219, 89, 33, 0.03);
  box-shadow: none;
}
.wwa-form-card:focus-visible {
  outline: 2px solid var(--ari-color-accent);
  outline-offset: 3px;
}
.wwa-form-card__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 0;
  background: rgba(219, 89, 33, 0.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--ari-text-accent);
}
.wwa-form-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.wwa-form-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ari-color-text);
}
.wwa-form-card__desc {
  font-size: 0.82rem;
  color: var(--ari-color-text-muted);
  line-height: 1.5;
}
.wwa-form-card__arrow {
  flex-shrink: 0;
  color: var(--ari-text-accent);
  transition: transform 180ms ease;
}
.wwa-form-card:hover .wwa-form-card__arrow,
.wwa-form-card:focus-visible .wwa-form-card__arrow { transform: translateX(3px); }

/* ── Small print under a call to action ───────────────────── */
.wwa-note {
  font-size: 0.875rem;
  color: var(--ari-color-text-muted);
  line-height: 1.65;
  max-width: 680px;
}
.wwa-note p { margin: 0 0 0.5rem; }
.wwa-note > :last-child { margin-bottom: 0; }
.wwa-note a {
  color: var(--ari-text-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ari-color-accent);
}
.wwa-note a:hover { color: var(--ari-color-accent-2, var(--ari-text-accent));  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }

/* ── Resource cards (bottom two-up grid) ──────────────────── */
.wwa-resource-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 2.5rem 0 0;
  padding: 0;
}
.wwa-resource-card {
  background: var(--ari-color-surface, var(--ari-off-white));
  border: 1px solid var(--ari-color-border);
  border-radius: 0;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  --ari-text-accent: var(--ari-ink);
}
/* The card is not itself a link, so react to the state of the link inside it:
   hovering anywhere on the card and tabbing to its link both light it up. */
.wwa-resource-card:hover,
.wwa-resource-card:focus-within {
  border-color: var(--ari-clay);
  box-shadow: none;
  transform: translateY(-2px);
}
.wwa-resource-card__title {
  font-family: var(--font-role-reading);
  font-size: 1rem;
  font-weight: var(--weight-reading-h2);
  color: var(--ari-color-text);
  margin: 0;
  line-height: 1.4;
}
.wwa-resource-card__desc {
  font-size: 0.875rem;
  color: var(--ari-color-text-muted);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
.wwa-resource-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ari-text-accent);
  text-decoration: none;
  transition: gap 160ms ease;
  text-decoration-color: var(--ari-color-accent);
}
.wwa-resource-card__link:hover,
.wwa-resource-card__link:focus-visible {
  gap: 0.55rem;
  color: var(--ari-text-accent);
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}
.wwa-resource-card__link:focus-visible {
  outline: 2px solid var(--ari-color-accent);
  outline-offset: 3px;
  border-radius: 0;
}

/* ── Optional WP block-editor content (below the ACF sections) ─
   Unlike the icon-row sections above, this has no icon column to sit
   next to, so cap and centre it as its own readable column instead
   of leaving it flush left (matches .prog-body / .sprize-content). */
.wwa-editor-content {
  max-width: 820px;
  margin-inline: auto;
  padding-top: 2.5rem;
}

/* Motion is decorative here: the arrow nudge, the card lift and the gap
   easing all carry no information the static state does not. */
@media (prefers-reduced-motion: reduce) {
  .wwa-form-card,
  .wwa-form-card__arrow,
  .wwa-resource-card,
  .wwa-resource-card__link { transition: none; }
  .wwa-form-card:hover .wwa-form-card__arrow,
  .wwa-form-card:focus-visible .wwa-form-card__arrow { transform: none; }
  .wwa-resource-card:hover,
  .wwa-resource-card:focus-within { transform: none; }
}

/* ============================================================
   JOBS ARCHIVE  (archive-job.php)
   ============================================================ */

/* ── Intro: hiring policy + search ───────────────────────── */
.jobs-intro {
  padding-top: 2.75rem;
  padding-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.jobs-policy__title {
  font-family: var(--font-role-display);
  font-size: var(--ari-scale-h2);
  font-weight: var(--weight-display-title);
  margin: 0 0 0.65rem;
  color: var(--ari-ink);
  line-height: var(--ari-leading-h2-latin);
}
.jobs-policy__body {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--ari-warm-grey);
  max-width: 80ch;
}
.jobs-policy__body p { margin: 0; }

.jobs-search-form {
  width: 100%;
}
.jobs-search-field {
  position: relative;
  display: flex;
  align-items: center;
}
.jobs-search-icon {
  position: absolute;
  left: 1rem;
  color: var(--ari-warm-grey);
  pointer-events: none;
  flex-shrink: 0;
}
.jobs-search-input {
  width: 100%;
  height: 48px;
  padding: 0 3rem 0 2.75rem;
  border: 1.5px solid var(--ari-light-grey);
  border-radius: 0;
  font-size: 0.9rem;
  color: var(--ari-ink);
  background: #fff;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  --ari-text-accent: var(--ari-ink);
}
.jobs-search-input::placeholder { color: var(--ari-warm-grey); }
.jobs-search-input:focus {
  border-color: var(--ari-color-accent);
  box-shadow: 0 0 0 3px rgba(219, 89, 33, 0.12);
}
.jobs-search-clear {
  position: absolute;
  right: 0.875rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ari-warm-grey);
  transition: background 150ms ease, color 150ms ease;
}
.jobs-search-clear:hover {
  background: var(--ari-off-white);
  color: var(--ari-ink);
}

/* ── Job list container ───────────────────────────────────── */
.jobs-list-wrap {
  padding-top: 1rem;
  padding-bottom: 4rem;
}
.jobs-empty {
  padding: 3rem 0;
  color: var(--ari-warm-grey);
  font-size: 0.95rem;
}
.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Job row card ─────────────────────────────────────────── */
.job-row {
  border-bottom: 1px solid var(--ari-light-grey);
  transition: background 150ms ease;
}
.job-row:first-child { border-top: 1px solid var(--ari-light-grey); }
.job-row:hover { background: var(--ari-off-white); }
.job-row__main {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 1.5rem 1.75rem;
  align-items: center;
  padding: 1.5rem 0;
}
.job-row:hover .job-row__main {
  padding-left: 0.75rem;
  transition: padding-left 160ms ease;
}

/* ── Thumbnail column ───────────────────────────────────────── */
.job-row__thumb {
  width: 120px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 0;
  overflow: hidden;
  background: var(--ari-off-white);
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  --ari-text-accent: var(--ari-ink);
}
.job-row__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  min-height: 90px;
}
.job-row__thumb-placeholder {
  width: 100%;
  height: 100%;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ari-warm-grey);
  background: var(--ari-off-white);
  --ari-text-accent: var(--ari-ink);
}

/* Left border accent on hover */
.job-row {
  border-left: 3px solid transparent;
  padding-left: 0;
  transition: border-color 160ms ease, background 150ms ease, padding-left 160ms ease;
}
.job-row:hover {
  border-left-color: var(--ari-color-accent);
  padding-left: 0.5rem;
}

.job-row__title {
  font-family: var(--font-role-reading);
  font-size: 1.125rem;
  font-weight: var(--weight-reading-h2);
  margin: 0 0 0.5rem;
  line-height: 1.3;
  color: var(--ari-ink);
}
.job-row__title a {
  color: inherit;
  text-decoration: none;
}
.job-row__title a:hover {
  color: var(--ari-text-accent);
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}

.job-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin-bottom: 0.6rem;
}
.job-row__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  color: var(--ari-warm-grey);
  font-weight: 500;
}
.job-row__meta-item svg {
  flex-shrink: 0;
  color: var(--ari-warm-grey);
}
.job-row__meta-item--deadline {
  color: var(--ari-text-accent);
}
.job-row__meta-item--deadline svg {
  color: var(--ari-text-accent);
}
.job-row__meta-sep {
  color: var(--ari-light-grey);
  font-size: 0.8125rem;
}

.job-row__excerpt {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ari-warm-grey);
  line-height: 1.6;
  max-width: 72ch;
}

/* Apply Now button */
.job-row__action {
  flex-shrink: 0;
}
.job-row__apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  padding: 0.65rem 1.35rem;
  background: var(--ari-color-accent-strong);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0;
  text-decoration: none;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.job-row__apply-btn:hover {
  background: var(--ari-ember-dark);
  box-shadow: none;
  transform: translateY(-1px);
}
.job-row__apply-btn svg {
  flex-shrink: 0;
  transition: transform 150ms ease;
}
.job-row__apply-btn:hover svg {
  transform: translateX(3px);
}

/* ── Pagination: spacing override for jobs context ──────── */
.jobs-pagination { margin-top: 2.5rem; }

/* ============================================================
   SINGLE JOB  (single-job.php)
   ============================================================ */

.sjob-wrap {
  padding: 2.5rem 0 5rem;
}

/* Back link */
.sjob-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ari-warm-grey);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
  transition: color 150ms ease;
}
.sjob-back:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.sjob-back svg { flex-shrink: 0; }

.sjob-title {
  font-family: var(--font-role-display);
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: var(--weight-display-title);
  line-height: 1.2;
  color: var(--ari-ink);
  margin: 0 0 2rem;
  max-width: 80ch;
}

/* Meta strip */
.sjob-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0; /* gaps handled by border-right */
}
.sjob-meta__item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0 2.5rem 0 0;
  margin-right: 2.5rem;
  border-right: 1px solid var(--ari-light-grey);
}
.sjob-meta__item:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}
.sjob-meta__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ari-warm-grey);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sjob-meta__value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ari-ink);
  line-height: 1.2;
}
.sjob-meta__value--link {
  color: var(--ari-text-accent);
  text-decoration: none;
  text-decoration-color: var(--ari-color-accent);
}
.sjob-meta__value--link:hover { text-decoration: underline; }
.sjob-meta__value--closed { color: #b91c1c; }

.sjob-divider {
  border: none;
  border-top: 1px solid var(--ari-light-grey);
  margin: 2rem 0 2.25rem;
}

.sjob-content {
  max-width: 82ch;
  color: var(--ari-ink);
  font-size: 0.95rem;
  line-height: 1.8;
}
.sjob-content h2,
.sjob-content h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ari-ink);
  margin: 1.75rem 0 0.6rem;
}
.sjob-content p { margin: 0 0 1rem; }
.sjob-content ul,
.sjob-content ol {
  padding-left: 1.4rem;
  margin: 0 0 1rem;
}
.sjob-content li { margin-bottom: 0.4rem; }
.sjob-content a {
  color: var(--ari-text-accent);
  text-decoration: underline;
  text-decoration-color: var(--ari-color-accent);
}

/* Apply button */
.sjob-apply {
  margin-top: 2.5rem;
}
.sjob-apply__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 480px;
  padding: 1rem 2rem;
  background: var(--ari-color-accent-strong);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.sjob-apply__btn:hover {
  background: var(--ari-ember-dark);
  box-shadow: none;
  transform: translateY(-1px);
}
.sjob-apply__btn svg {
  flex-shrink: 0;
  transition: transform 150ms ease;
}
.sjob-apply__btn:hover svg { transform: translateX(3px); }

/* ============================================================
   VIDEO ARCHIVE  (archive-video.php)
   ============================================================ */

/* ── Video grid ───────────────────────────────────────────── */
.vid-grid-wrap {
  padding-top: 1.5rem;
  padding-bottom: 4rem;
}
.vid-empty {
  padding: 3rem 0;
  color: var(--ari-warm-grey);
  font-size: 0.95rem;
}
.vid-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
}

.vid-card {
  display: flex;
  flex-direction: column;
}
.vid-card__img-wrap {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  background: var(--ari-ink);
  margin-bottom: 0.85rem;
  --ari-text-accent: var(--ari-apricot);
}
.vid-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 380ms ease;
}
.vid-card__img-wrap:hover .vid-card__img { transform: scale(1.04); }
.vid-card__img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--ari-ink) 0%, var(--ari-umber) 100%);
  --ari-text-accent: var(--ari-apricot);
}

/* Play button */
.vid-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 200ms ease;
}
.vid-card__play::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  transition: background 200ms ease;
}
.vid-card__img-wrap:hover .vid-card__play::before { background: rgba(0,0,0,0.45); }
.vid-card__play svg {
  position: relative;
  z-index: 1;
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.92);
  color: var(--ari-ink);
  border-radius: 50%;
  padding: 14px 12px 14px 16px;
  box-shadow: none;
  transition: transform 200ms ease, background 200ms ease;
}
.vid-card__img-wrap:hover .vid-card__play svg {
  transform: scale(1.08);
  background: #fff;
}

/* Card body */
.vid-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  font-size: 0.8125rem;
}
.vid-card__type {
  font-weight: 600;
  color: var(--ari-ink);
}
.vid-card__sep { color: var(--ari-light-grey); }
.vid-card__date { color: var(--ari-warm-grey); }
.vid-card__title {
  font-family: var(--font-role-reading);
  font-size: 0.95rem;
  font-weight: var(--weight-reading-h2);
  line-height: 1.4;
  margin: 0;
  color: var(--ari-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vid-card__title a {
  color: inherit;
  text-decoration: none;
}
.vid-card__title a:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }

/* Pagination */
.vid-pagination { margin-top: 2.5rem; }

/* ============================================================
   SINGLE VIDEO  (single-video.php)
   ============================================================ */

/* ── Hero / player ────────────────────────────────────────── */
.svid-wrap { padding-bottom: 5rem; }

.svid-hero {
  width: 100%;
  background: var(--ari-ink);
  margin-bottom: 2.5rem;
  --ari-text-accent: var(--ari-apricot);
}

/* Poster (thumbnail + play btn, replaced by iframe on click) */
.svid-player {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.svid-player__poster {
  width: 100%; height: 100%;
  position: relative;
  display: block;
  cursor: pointer;
}
.svid-player__thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.svid-player__thumb-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--ari-ink) 0%, #2d2d44 100%);
  --ari-text-accent: var(--ari-apricot);
}

/* Play button circle */
.svid-player__play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 200ms ease;
}
.svid-player__play-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.32);
  transition: background 200ms ease;
}
.svid-player__poster:hover .svid-player__play-btn::before,
.svid-player__poster:focus .svid-player__play-btn::before {
  background: rgba(0,0,0,0.46);
}
.svid-player__play-btn svg {
  position: relative;
  z-index: 1;
  width: 80px; height: 80px;
  background: rgba(255,255,255,0.92);
  color: var(--ari-ink);
  border-radius: 50%;
  padding: 22px 20px 22px 26px;
  box-shadow: none;
  transition: transform 220ms ease, background 220ms ease;
}
.svid-player__poster:hover .svid-player__play-btn svg,
.svid-player__poster:focus .svid-player__play-btn svg {
  transform: scale(1.1);
  background: #fff;
}

/* Iframe (injected by JS after click) */
.svid-player__iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
}

/* ── Body content ─────────────────────────────────────────── */
.svid-body {
  padding-top: 0;
}
.svid-content {
  max-width: 860px;
  margin-bottom: 3.5rem;
}
.svid-title {
  font-family: var(--font-role-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--weight-display-title);
  line-height: 1.25;
  color: var(--ari-ink);
  margin: 0 0 1.25rem;
}
.svid-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--ari-ink);
}
.svid-desc p { margin: 0 0 1rem; }
.svid-desc p:last-child { margin-bottom: 0; }
.svid-desc a {
  color: var(--ari-text-accent);
  text-decoration: underline;
  text-decoration-color: var(--ari-color-accent);
}

/* ── Related contents ─────────────────────────────────────── */
.svid-related {
  padding-top: 2rem;
  border-top: 1px solid var(--ari-light-grey);
}
.svid-related__title {
  font-family: var(--font-role-display);
  font-size: var(--ari-scale-h2);
  font-weight: var(--weight-display-title);
  color: var(--ari-ink);
  margin: 0 0 1.5rem;
  line-height: var(--ari-leading-h2-latin);
}
.svid-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Related card */
.svid-rel-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.svid-rel-card__img-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  background: var(--ari-off-white);
  margin-bottom: 0.75rem;
  --ari-text-accent: var(--ari-ink);
}
.svid-rel-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease;
}
.svid-rel-card:hover .svid-rel-card__img { transform: scale(1.04); }
.svid-rel-card__img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--ari-off-white) 0%, var(--ari-off-white) 100%);
  --ari-text-accent: var(--ari-ink);
}

/* Small play badge on video related cards */
.svid-rel-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.22);
  transition: background 200ms ease;
}
.svid-rel-card:hover .svid-rel-card__play { background: rgba(0,0,0,0.38); }
.svid-rel-card__play svg {
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.9);
  color: var(--ari-ink);
  border-radius: 50%;
  padding: 10px 9px 10px 13px;
  box-shadow: none;
}

/* Card body */
.svid-rel-card__body { flex: 1; }
.svid-rel-card__date {
  font-size: 0.8125rem;
  color: var(--ari-warm-grey);
  margin: 0 0 0.35rem;
}
.svid-rel-card__title {
  font-family: var(--font-role-reading);
  font-size: 0.9rem;
  font-weight: var(--weight-reading-h2);
  line-height: 1.4;
  color: var(--ari-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svid-rel-card:hover .svid-rel-card__title {
  color: var(--ari-text-accent);
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}

/* ============================================================
   ARCHIVE HEADER: reusable component (template-parts/archive-hero.php)
   Compact dark page header matching the publication archive style:
   dark band, two-column grid, title with left orange accent bar.
   Used by: tag.php (country pages) and any archive needing this header.
   ============================================================ */

.archive-header {
  background: var(--ari-ink);
  padding: 3rem 0 0;
  --ari-text-accent: var(--ari-apricot);
}

/* Two-column: title left | description right */
.archive-header__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  align-items: center;
  padding-bottom: 2.5rem;
}

/* Single column when no description is provided */
.archive-header__inner--single {
  grid-template-columns: 1fr;
  max-width: 640px;
}

/* Left column wrapper */
.archive-header__left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Eyebrow: small accent label */
.archive-header__eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ari-text-accent);
}
.archive-header__eyebrow a { color: inherit; text-decoration: none; }
.archive-header__eyebrow a:hover { color: var(--ari-color-accent-2, var(--ari-text-accent));  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }

/* Title: left orange accent bar (same as pub-archive__title) */
.archive-header__title {
  font-family: var(--font-role-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--weight-display-title);
  line-height: 1.1;
  color: #fff;
  margin: 0;
  padding-inline-start: 1rem;
  border-inline-start: 4px solid var(--ari-color-accent);
}

/* Right column: description text */
.archive-header__desc {
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  margin: 0;
}

/* Tag pills below title */
.archive-header__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-inline-start: 1rem; /* align with title text */
}
.archive-header__pill {
  font-size: 0.8125rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 0;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: border-color 160ms, color 160ms;
}
.archive-header__pill:hover { border-color: rgba(255,255,255,0.6); color: #fff; }

/* Meta row: count + clear filters (below title, indented to match) */
.archive-header__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-inline-start: 1rem;
}
.archive-header__count {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
}
.archive-header__count strong {
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}
.archive-header__clear {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0;
  padding: 0.15rem 0.6rem;
  text-decoration: none;
  transition: color 160ms, border-color 160ms;
}
.archive-header__clear:hover { color: #fff; border-color: rgba(255,255,255,0.45); }

/* ============================================================
   SEARCH PAGE (search.php)
   ============================================================ */

.spage {
  padding: 2.5rem 0 4rem;
}
/* Tag archive: the archive-header is a direct child of <main class="spage">.
   Zero the main's top padding so the dark header touches the site header
   with no white gap, then restore spacing above the filters via spage__wrap. */
.tag-archive {
  padding-top: 0;
}
.tag-archive .spage__wrap {
  padding-top: 2rem;
}
.spage__wrap {
  display: flex; flex-direction: column; gap: 1.5rem;
}

/* ── Result count ─────────────────────────────────────────── */
.spage-count {
  font-size: 0.9rem; color: var(--ari-color-fg-muted, var(--ari-warm-grey));
  margin: 0;
}
.spage-count strong { color: var(--ari-color-text, var(--ari-ink)); }

/* ── Results grid ─────────────────────────────────────────── */
.spage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem 1.5rem;
}

/* ── Result card ──────────────────────────────────────────── */
.sresult-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform 200ms ease;
}
.sresult-card:hover { transform: translateY(-2px); }

.sresult-card__img-wrap {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0;
  background: var(--ari-off-white);
  margin-bottom: 0.85rem;
  --ari-text-accent: var(--ari-ink);
}
.sresult-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 350ms ease;
}
.sresult-card:hover .sresult-card__img { transform: scale(1.04); }
.sresult-card__img-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--ari-off-white), #d9d2ca);
  --ari-text-accent: var(--ari-ink);
}
.sresult-card__play-badge {
  position: absolute; bottom: 0.5rem; right: 0.5rem;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,0.65); color: #fff;
  display: flex; align-items: center; justify-content: center;
}

.sresult-card__body { display: flex; flex-direction: column; gap: 0.35rem; }

.sresult-card__meta {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0; font-size: 0.8125rem;
}
.sresult-card__type {
  font-weight: 600; color: var(--ari-color-text, var(--ari-ink));
}
.sresult-card__sep { color: var(--ari-light-grey); }
.sresult-card__date { color: var(--ari-color-text-muted); }

.sresult-card__title {
  margin: 0;
  font-family: var(--font-role-reading);
  font-size: 1rem; font-weight: var(--weight-reading-h2);
  line-height: 1.35; color: var(--ari-color-text, var(--ari-ink));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sresult-card:hover .sresult-card__title { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }

/* ── Pagination: uses shared .ari-pagination component ──── */
.spage-pagination { margin-top: 1rem; }

/* ── No-results state ─────────────────────────────────────── */
.spage-no-results {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; padding: 4rem 1rem; text-align: center;
}
.spage-no-results__icon { color: var(--ari-warm-grey); }
.spage-no-results__heading {
  font-family: var(--font-role-display);
  font-size: var(--ari-scale-h2); font-weight: var(--weight-display-title); margin: 0;
  color: var(--ari-color-text, var(--ari-ink));
  line-height: var(--ari-leading-h2-latin);
}
.spage-no-results__hint {
  font-size: 0.95rem; color: var(--ari-color-fg-muted, var(--ari-warm-grey)); margin: 0;
}
.spage-no-results__back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.65rem 1.5rem;
  background: var(--ari-color-accent-strong);
  color: #fff; border-radius: 0;
  font-weight: 600; font-size: 0.9rem;
  text-decoration: none;
  transition: background 160ms ease;
}
.spage-no-results__back:hover { background: var(--ari-color-accent-2, var(--ari-ember-dark)); }

/* ============================================================
   ABOUT US PAGE (template-pages-about-us.php)
   ============================================================
   Self-contained design system, scoped to .about-page so it never leaks
   onto other templates. Three knobs control the whole page:
     --about-accent  → brand orange used as the one punctuation moment
     --about-radius  → corner radius for every card/photo on this page
     --about-section--dark / --about-section--light (governance only,
       toggled in PHP via $governance_theme_dark)
   ============================================================ */

.about-page {
  --about-accent:      var(--ari-color-accent);
  --about-dark:        #16151a;
  --about-dark-soft:   #1d1c22;
  --about-light:       #f4f2ee;
  --about-ink:         #16151a;
  --about-ink-muted:   #5c5953;
  --about-line:        rgba(22, 21, 26, 0.1);
  --about-line-invert: rgba(255, 255, 255, 0.14);
  --about-radius:      20px;
  --about-radius-sm:   12px;
  --about-font-heading: var(--font-role-display);
  --about-font-body:    var(--font-role-reading);
  --about-max-text:     48rem; /* comfortable reading-width cap for prose columns */

  /* Type scale */
  --about-text-hero: clamp(2.5rem, 1.6rem + 3.4vw, 4.875rem);  /* up to 78px */
  --about-text-h2:   clamp(2.25rem, 1.55rem + 1.8vw, 3rem);     /* 36–48px */
  --about-text-lead: clamp(1.3125rem, 1.1rem + 0.6vw, 1.5rem);  /* 21–24px */
  --about-text-body: 1.0625rem;                                 /* 17px */

  font-family: var(--about-font-body);
  color: var(--about-ink);
  background: #fff;
  --ari-text-accent: var(--ari-ink);
}

/* Unified paragraph/list size + line-height across all About Us sections */
.about-page p,
.about-page li {
  font-size: var(--about-text-body);
  line-height: 1.65;
}

/* ── Eyebrow utility (hero, Who We Are, In Memoriam, Vision, Funding) ──── */
.about-eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  font-family: var(--font-role-interface);
  font-size: 0.8125rem;
  font-weight: var(--weight-interface);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--about-ink-muted);
}
.about-eyebrow--invert { color: rgba(255, 255, 255, 0.7); }

/* ── Drag-and-drop style image placeholder (founder photo, board grid) ── */
.about-img-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1.5px dashed var(--about-line);
  background: rgba(22, 21, 26, 0.03);
  color: var(--about-ink-muted);
}
.about-img-drop__label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ── In-page tab nav ──────────────────────────────────────── */
.about-tabs {
  position: sticky;
  /* --ari-sticky-top is the viewport-relative bottom of the fixed site header,
     set by theme.js via getBoundingClientRect().bottom so it accounts for the
     admin bar and any header height changes from the is-scrolled compact state. */
  top: var(--ari-sticky-top, 130px);
  z-index: 70;
  background: #fff;
  border-bottom: 2px solid var(--ari-color-border, var(--ari-light-grey));
  box-shadow: none;
  --ari-text-accent: var(--ari-ink);
}
.about-tabs__inner {
  display: flex; overflow-x: auto; gap: 0;
  scrollbar-width: none;
}
.about-tabs__inner::-webkit-scrollbar { display: none; }
.about-tab {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  padding: 0.9rem 1.25rem;
  font-family: var(--about-font-body);
  font-size: 0.88rem; font-weight: 600;
  color: var(--ari-color-fg-muted, var(--ari-warm-grey));
  text-decoration: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  transition: color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}
.about-tab:hover { color: var(--about-ink); }
.about-tab.is-active {
  color: var(--ari-text-accent);
  border-bottom-color: var(--about-accent);
}

/* ── Anchor scroll offset for all about-page sections ────── */
/* scroll-margin-top makes browser hash navigation and scrollIntoView()
   land below both the sticky site header and the sticky about-tabs bar.
   --ari-sticky-top    : header bottom (set by theme.js)
   --ari-about-tabs-height : tabs bar height (set by the page inline script) */
.about-section,
.about-memoriam,
.about-vision,
.about-funding {
  scroll-margin-top: calc(var(--ari-sticky-top, 130px) + var(--ari-about-tabs-height, 52px));
}

/* ── Shared section layout ────────────────────────────────── */
.about-section {
  padding: clamp(4rem, 7vw, 6.5rem) 0;
}
.about-section__content {
  position: relative; z-index: 1;
}
.about-section__title {
  font-family: var(--about-font-heading);
  font-size: var(--about-text-h2);
  font-weight: 600; line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 2.5rem;
  color: var(--about-ink);
}

/* ── Who We Are: light panel, sticky heading column ─────── */
.about-section--who {
  background: var(--about-light);
}
.about-who__grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr);
  gap: 4.5rem;
  align-items: start;
}
.about-who__head {
  position: sticky;
  top: calc(var(--ari-sticky-top, 130px) + var(--ari-about-tabs-height, 52px) + 2rem);
}
.about-who__head .about-section__title { margin: 0; }
.about-who__prose {
  color: var(--about-ink-muted);
}
.about-who__prose:not(:last-child) { margin-bottom: 1.5rem; }
.about-who__prose p { margin: 0 0 1.2rem; }
.about-who__prose p:last-child { margin-bottom: 0; }
.about-who__prose strong { color: var(--about-ink); }
.about-who__prose ul { padding-left: 1.25rem; margin: 0 0 1.2rem; }
.about-who__prose li { margin-bottom: 0.5rem; }

/* "Defining shift" numbered list, extracted from the trailing <ul> */
.about-shifts {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--about-line);
}
.about-shifts__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--about-line);
}
.about-shifts__num {
  font-family: var(--about-font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ari-text-accent);
}
.about-shifts__text {
  margin: 0;
  color: var(--about-ink);
}

/* ── What We Do: mission section (light, 3 cards) ───────── */
.about-section--what {
  background: #fff;
  border-top: 1px solid var(--about-line);
  --ari-text-accent: var(--ari-ink);
}
.about-section--what .about-section__title {
  color: var(--about-ink);
}
.about-mission-head {
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(320px, 0.42fr);
  gap: 3rem 4.5rem;
  align-items: start;
  margin-bottom: 3rem;
}
.about-mission-copy .about-section__title {
  margin-bottom: 2.5rem;
}
.about-mission-text {
  font-size: var(--about-text-lead);
  line-height: 1.55;
  color: var(--about-ink-muted);
  margin-bottom: 0;
}
.about-mission-text p { margin-top: 0; }
.about-mission-lens {
  position: relative;
  padding: 2rem;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(219, 89, 33, 0.12), rgba(22,21,26,0.03)),
    var(--about-light);
  border: 1px solid var(--about-line);
  overflow: hidden;
}
.about-mission-lens::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(219, 89, 33, 0.16);
  border-radius: 0;
  pointer-events: none;
}
.about-mission-lens__kicker {
  position: relative;
  margin: 0 0 1.25rem;
  font-family: var(--about-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ari-text-accent);
}
.about-mission-lens__list {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}
.about-mission-lens__item {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--about-line);
}
.about-mission-lens__item:last-child {
  padding-bottom: 0;
}
.about-mission-lens__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(219, 89, 33, 0.12);
  font-family: var(--about-font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ari-text-accent);
}
.about-mission-lens__item h3 {
  margin: 0 0 0.35rem;
  font-family: var(--about-font-heading);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--about-ink);
}
.about-mission-lens__item p {
  margin: 0;
  color: var(--about-ink-muted);
}

.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.about-pillar {
  display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start;
  padding: 2.25rem 2rem;
  background: var(--about-light);
  border-radius: 0;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.about-pillar:hover {
  box-shadow: none;
  transform: translateY(-3px);
}
.about-pillar__icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(219, 89, 33, 0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--ari-text-accent);
}
.about-pillar__verb {
  font-family: var(--about-font-heading);
  font-size: 1.25rem; font-weight: 600;
  margin: 0;
  color: var(--about-ink);
}
.about-pillar__verb em {
  font-style: normal;
  color: var(--ari-text-accent);
  text-transform: capitalize;
}
.about-pillar__desc {
  line-height: 1.65;
  color: var(--about-ink-muted);
  margin: 0;
}

/* ── Governance: dark by default, flip to light via PHP $governance_theme_dark ── */
.about-section--dark {
  background: var(--about-dark); color: #fff;
  --ari-text-accent: var(--ari-apricot);
}
.about-section--dark .about-section__title { color: #fff; }
.about-section--light {
  background: var(--about-light);
}

.about-governance__intro {
  font-size: var(--about-text-lead);
  line-height: 1.55;
  color: var(--about-ink-muted);
  margin: 0 0 3rem;
  max-width: var(--about-max-text);
}
.about-section--dark .about-governance__intro { color: rgba(255,255,255,0.65); }
/* Client request 2026-11-13: justify the Board Members description only.
   Deliberate exception to the Brand Manual "ragged, never justified" rule in
   base.css; scoped to #governance so the Partners intro (same class) stays
   ragged. Last line follows reading direction (left in EN/FR, right in AR). */
#governance .about-governance__intro {
  text-align: justify;
  text-align-last: start;
}

/* People grid: 4 cols → 3 → 2 → 1 */
.about-people-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
}

.about-person-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; text-decoration: none;
  gap: 1rem;
  transition: transform 200ms ease;
}
.about-person-card:hover { transform: translateY(-3px); }

.about-person-card__img-wrap {
  width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ari-off-white);
  border: 3px solid rgba(219, 89, 33, 0.15);
  transition: border-color 200ms ease;
  max-width: 148px;
  --ari-text-accent: var(--ari-ink);
}
.about-section--dark .about-person-card__img-wrap {
  background: var(--about-dark-soft);
  border-color: rgba(219, 89, 33, 0.25);
}
.about-person-card:hover .about-person-card__img-wrap {
  border-color: var(--about-accent);
}
.about-person-card__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  transition: transform 350ms ease;
}
.about-person-card:hover .about-person-card__img { transform: scale(1.06); }
.about-person-card__placeholder {
  width: 100%; height: 100%;
  border-radius: 50%;
  border-width: 1.5px;
}
.about-section--dark .about-person-card__placeholder {
  border-color: var(--about-line-invert);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.35);
}

.about-person-card__body { display: flex; flex-direction: column; gap: 0.3rem; }
.about-person-card__name {
  margin: 0; font-family: var(--about-font-heading);
  font-size: 1.1rem; font-weight: 600;
  color: var(--about-ink);
  line-height: 1.3;
}
.about-section--dark .about-person-card__name { color: #fff; }
.about-person-card__role {
  margin: 0; font-size: 0.875rem; line-height: 1.45;
  color: var(--ari-text-accent);
  font-weight: 500;
  /* Clamp to 2 lines and reserve that height up front (min-height, not just
     the clamp) so short and long bios both occupy the same space: keeps
     every row's photos aligned regardless of how long each person's role text is. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.9em;
}

/* ── Partners: logo wall ─────────────────────────────────── */
.about-partners-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem;
}
.about-partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--about-line);
  border-radius: 0;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 200ms ease, opacity 200ms ease, border-color 200ms ease;
  --ari-text-accent: var(--ari-ink);
}
a.about-partner-logo:hover,
a.about-partner-logo:focus-visible {
  filter: grayscale(0);
  opacity: 1;
  border-color: var(--about-accent);
}
.about-partner-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ── In Memoriam: Bassma Kodmani ─────────────────────────── */
.about-memoriam {
  background: var(--about-dark);
  color: #fff;
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  --ari-text-accent: var(--ari-apricot);
}
.about-memoriam__inner {
  display: grid;
  grid-template-columns: minmax(280px, 0.32fr) minmax(0, 1fr);
  gap: 4.5rem;
  align-items: center;
}
.about-memoriam__photo-col { flex-shrink: 0; }
.about-memoriam__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: 0;
  display: block;
}
/* Compound selector (two classes) beats .about-memoriam__photo's display:block
   on specificity, so flex-centering wins regardless of rule order below. */
.about-memoriam__photo.about-memoriam__photo--placeholder {
  display: flex;
  border-radius: 0;
  border-color: var(--about-line-invert);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.35);
  min-height: 400px;
}
.about-memoriam__name {
  font-family: var(--about-font-heading);
  font-size: var(--about-text-h2);
  font-weight: 600;
  color: #fff;
  margin: 0 0 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.about-memoriam__text {
  font-size: var(--about-text-body);
  color: rgba(255,255,255,0.7);
  line-height: 1.65;
}
.about-memoriam__text p { margin: 0 0 1.1rem; }
.about-memoriam__text p:last-child { margin: 0; }
.about-memoriam__closing {
  font-family: var(--about-font-heading);
  font-size: var(--about-text-lead);
  font-style: normal;
  font-weight: 600;
  color: rgba(255,255,255,0.92) !important;
  border-left: 3px solid var(--about-accent);
  padding-left: 1.25rem;
  margin-top: 2rem !important;
}

/* ── Our Vision: orange band, the one punctuation moment ─── */
.about-vision {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--about-accent);
  padding: clamp(4.5rem, 8vw, 7.5rem) 0;
  color: #fff;
  text-align: center;
}
.about-vision::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 0 28%, rgba(255, 255, 255, 0.2) 38%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.16), transparent 58%);
  opacity: 0;
  transform: translateX(-28%) skewX(-10deg) scaleX(0.82);
  transform-origin: left center;
}
.about-vision__inner {
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
}
.about-vision__mark {
  display: block;
  width: 2.25rem;
  height: 1.8rem;
  margin: 0 auto 1.5rem;
  color: rgba(255, 255, 255, 0.45);
}

/* ── Our Vision: scroll reveal ──────────────────────────────
   The generic .will-animate/.is-visible pair (added by theme.js's shared
   IntersectionObserver) fades + slides the whole section by default; that
   reads oddly for a solid-colour band, so it's neutralised here and replaced
   with a staggered reveal of each child (eyebrow → mark → quote → rule).
   The hidden state only exists once JS adds .will-animate, so content stays
   visible with no JS / prefers-reduced-motion / no IntersectionObserver. ── */
.about-vision.will-animate,
.about-vision.is-visible {
  opacity: 1;
  transform: none;
}
.about-vision.will-animate::before {
  opacity: 0;
}
.about-vision.is-visible::before {
  animation: aboutVisionSweep 1300ms cubic-bezier(0.16, 0.8, 0.3, 1) 300ms forwards;
}
.about-vision__inner > * {
  transition: opacity 700ms cubic-bezier(0.16, 0.8, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 0.8, 0.3, 1),
              clip-path 760ms cubic-bezier(0.16, 0.8, 0.3, 1);
}
.about-vision.will-animate .about-vision__inner > * {
  opacity: 0;
  transform: translateY(22px);
}
.about-vision.will-animate .about-vision__mark {
  transform: translateY(18px) scale(0.7);
}
.about-vision.will-animate .about-vision__quote {
  clip-path: inset(0 0 100% 0);
  transform: translateY(28px);
}
.about-vision.is-visible .about-vision__inner > * {
  opacity: 1;
  transform: translateY(0);
}
.about-vision.is-visible .about-vision__mark {
  transform: translateY(0) scale(1);
}
.about-vision.is-visible .about-vision__quote {
  clip-path: inset(0 0 0 0);
}
.about-vision__inner > *:nth-child(1) { transition-delay: 240ms; }
.about-vision__inner > *:nth-child(2) { transition-delay: 460ms; }
.about-vision__inner > *:nth-child(3) { transition-delay: 720ms; }
.about-vision__inner > *:nth-child(4) { transition-delay: 1100ms; }
.about-vision__rule {
  width: 0;
  height: 2px;
  margin: 2rem auto 0;
  background: rgba(255, 255, 255, 0.45);
  transition: width 720ms cubic-bezier(0.16, 0.8, 0.3, 1) 1100ms;
}
.about-vision.is-visible .about-vision__rule {
  width: 64px;
}
.about-vision__quote {
  margin: 0;
  padding: 0;
  border: none;
  font-family: var(--about-font-heading);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.0625rem); /* up to 33px, deliberately smaller than the section h2 scale, since the narrow 46rem column wraps to many lines at h2 size */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
}

@keyframes aboutVisionSweep {
  0% {
    opacity: 0;
    transform: translateX(-28%) skewX(-10deg) scaleX(0.82);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0) scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-vision::before {
    opacity: 1;
    transform: none;
  }
  .about-vision__inner > *,
  .about-vision__rule {
    transition: none;
  }
}

/* ── Our History ───────────────────────────────────────────── */
.about-section--history {
  background: var(--about-light);
  border-top: 1px solid var(--about-line);
}
.about-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.about-phase {
  background: #fff;
  border-radius: 0;
  padding: 2.25rem 2rem;
  border-top: 4px solid var(--about-accent);
  box-shadow: none;
  --ari-text-accent: var(--ari-ink);
}
.about-phase__era {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ari-text-accent);
  margin-bottom: 0.5rem;
}
.about-phase__label {
  font-family: var(--about-font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--about-ink);
  margin: 0 0 1rem;
  line-height: 1.2;
}
.about-phase__desc {
  color: var(--about-ink-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Our Funding: real space + independence pull-quote ──── */
.about-funding {
  padding: clamp(5rem, 9vw, 8rem) 0;
  background: #fff;
  border-top: 1px solid var(--about-line);
  --ari-text-accent: var(--ari-ink);
}
.about-funding__inner {
  display: grid;
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr);
  gap: 3rem 4.5rem;
  align-items: start;
}
.about-funding__title {
  font-family: var(--about-font-heading);
  font-size: var(--about-text-h2);
  font-weight: 600;
  margin: 0;
  line-height: 1.1;
  color: var(--about-ink);
}
.about-funding__body { padding-top: 0.25rem; } /* optical alignment with label */
.about-funding__lead {
  font-size: var(--about-text-body);
  color: var(--about-ink-muted);
  max-width: var(--about-max-text);
  margin: 0 0 2rem;
}
.about-funding__quote {
  margin: 0;
  padding: 0 0 0 1.5rem;
  border-left: 3px solid var(--about-accent);
  font-family: var(--about-font-heading);
  font-size: var(--about-text-lead);
  font-weight: 600;
  line-height: 1.5;
  color: var(--about-ink);
  max-width: var(--about-max-text);
}

/* ============================================================
   TOPICS LANDING PAGE  (template-pages-topics.php)
   ============================================================ */

/* ── Page wrapper: subtle dot-grid texture behind the cards ── */
.topics-page {
  /* Subtle dot pattern gives texture without clashing with card gradients */
  background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  background-color: var(--ari-off-white);
  --ari-text-accent: var(--ari-ink);
}
/* The sub-intro, bar, and CTA strip sit on solid backgrounds so they break up the pattern */
.topics-sub-intro,
.topics-bar,
.topics-cta-strip { position: relative; z-index: 1; }

/* ── Sub-intro bar ────────────────────────────────────────── */
.topics-sub-intro {
  background: var(--ari-ink);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 1.25rem 0;
  --ari-text-accent: var(--ari-apricot);
}
.topics-sub-intro__inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.topics-sub-intro__icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--ari-text-accent);
}
.topics-sub-intro__text {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  margin: 0;
}

/* ── Filter / count bar ───────────────────────────────────── */
.topics-bar {
  background: #fff;
  border-bottom: 1px solid var(--ari-color-border);
  padding: 0.875rem 0;
  position: sticky;
  top: var(--ari-header-height, 130px);
  z-index: 50;
  box-shadow: none;
  --ari-text-accent: var(--ari-ink);
}
.topics-bar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.topics-bar__count {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ari-color-text-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.topics-bar__count strong {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ari-color-text);
  line-height: 1;
}
.topics-bar__controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-left: auto;
  flex-wrap: wrap;
}

/* Filter select dropdowns */
.topics-filter-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.topics-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--ari-color-surface, var(--ari-off-white));
  border: 1px solid var(--ari-color-border);
  border-radius: 0;
  padding: 0.42rem 2.1rem 0.42rem 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ari-color-text);
  cursor: pointer;
  outline-offset: 2px;
  transition: border-color 160ms, background 160ms;
  --ari-text-accent: var(--ari-ink);
}
.topics-filter-select:hover,
.topics-filter-select:focus {
  border-color: var(--ari-color-accent);
  background: #fff;
}
.topics-filter__clear-all {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ari-text-accent);
  white-space: nowrap;
}
.topics-filter-caret {
  position: absolute;
  inset-inline-end: 0.7rem;
  pointer-events: none;
  color: var(--ari-color-text-muted);
}

/* Grid / List toggle */
.topics-view-toggle {
  display: flex;
  gap: 0.25rem;
}
.topics-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--ari-color-border);
  border-radius: 0;
  background: #fff;
  color: var(--ari-color-text-muted);
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms;
  --ari-text-accent: var(--ari-ink);
}
.topics-view-btn:hover { border-color: var(--ari-color-accent); color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.topics-view-btn.is-active {
  background: var(--ari-color-accent-strong);
  border-color: var(--ari-color-accent);
  color: #fff;
}

/* ── Topics grid ──────────────────────────────────────────── */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  padding: 2.5rem 0 4rem;
}

/* ══════════════════════════════════════════════════════════════
   TOPIC CARD: full-bleed editorial tile
   ══════════════════════════════════════════════════════════════ */
.topic-card {
  display: block;
  text-decoration: none;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  box-shadow: none;
  transition: transform 300ms cubic-bezier(0.34,1.3,0.64,1), box-shadow 300ms ease;
  /* Stacking context so z-index children work */
  isolation: isolate;
}
.topic-card:hover {
  transform: translateY(-7px) scale(1.015);
  box-shadow: none;
}
.topic-card:focus-visible {
  outline: 3px solid var(--ari-color-accent);
  outline-offset: 3px;
}

/* ── Visual tile (full card face) ─────────────────────────── */
.topic-card__visual {
  position: relative;
  aspect-ratio: 3 / 4;   /* portrait tiles feel editorial */
  overflow: hidden;
}

/* Background layer */
.topic-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.topic-card__bg-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 600ms ease;
}
.topic-card:hover .topic-card__bg-img { transform: scale(1.08); }
.topic-card__bg-grad {
  width: 100%; height: 100%;
  transition: filter 400ms ease;
}
.topic-card:hover .topic-card__bg-grad { filter: brightness(1.18) saturate(1.1); }

/* Dark scrim: subtle base darkening */
.topic-card__veil {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.28);
  z-index: 1;
  transition: background 300ms ease;
}
.topic-card:hover .topic-card__veil { background: rgba(0,0,0,0.18); }

/* Gradient overlay: strong at bottom for text legibility */
.topic-card__veil-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.72) 28%,
    rgba(0,0,0,0.25) 55%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* ── Icon: centred in upper 55 %, shown as a solid tinted chip so it
   stays legible over any background image or gradient ────────────── */
.topic-card__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -82%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px; height: 104px;
  color: #fff;
  transition: transform 320ms cubic-bezier(0.34,1.3,0.64,1);
}
/* Solid chip, tinted with the topic's own accent colour (--topic-accent), with a
   soft radial highlight and a light halo ring so it reads as a designed badge
   rather than a flat dot. */
.topic-card__icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.30), rgba(255,255,255,0) 55%),
    var(--topic-accent, rgba(20,20,30,0.6));
  border: 2px solid rgba(255,255,255,0.32);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: border-color 320ms ease, box-shadow 320ms ease;
}
.topic-card:hover .topic-card__icon {
  transform: translate(-50%, -82%) scale(1.1);
}
.topic-card:hover .topic-card__icon::before {
  border-color: rgba(219, 89, 33, 0.8);
  box-shadow: 0 0 0 8px rgba(219, 89, 33, 0.24), inset 0 1px 0 rgba(255,255,255,0.28);
}
.topic-card__icon svg {
  position: relative;
  z-index: 1;
  width: 50px; height: 50px;
  flex-shrink: 0;
  stroke-width: 1.5;
  filter: none;
}
/* Editor-uploaded icon (Custom Icon field): swaps in for the preset SVG above */
.topic-card__icon-img {
  position: relative;
  z-index: 1;
  width: 54px; height: 54px;
  object-fit: contain;
  flex-shrink: 0;
  filter: none;
}

/* ── Count badge: top right ──────────────────────────────── */
.topic-card__badge {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ari-color-accent-strong);
  color: #fff;
  border-radius: 0;
  padding: 0.3rem 0.6rem 0.35rem;
  line-height: 1;
  gap: 0.2rem;
  box-shadow: none;
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.topic-card:hover .topic-card__badge {
  transform: scale(1.08);
  box-shadow: none;
}
.topic-card__badge strong {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  display: block;
}
.topic-card__badge span {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.88;
  display: block;
}

/* ── Caption: bottom overlay area ───────────────────────── */
.topic-card__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: 1.5rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.topic-card__name {
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.4rem;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.topic-card__teaser {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.68);
  line-height: 1.55;
  margin: 0 0 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.topic-card__explore {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ari-text-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: gap 200ms ease;
}
.topic-card:hover .topic-card__explore { gap: 0.55rem; }
.topic-card__explore svg { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   LIST VIEW VARIANT
   ══════════════════════════════════════════════════════════════ */
.topics-grid--list {
  grid-template-columns: 1fr;
  gap: 0.875rem;
}
.topics-grid--list .topic-card {
  border-radius: 0;
}
.topics-grid--list .topic-card__visual {
  aspect-ratio: unset;
  height: 88px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
/* Thumbnail strip */
.topics-grid--list .topic-card__bg {
  position: relative;
  width: 110px;
  flex-shrink: 0;
  overflow: hidden;
}
.topics-grid--list .topic-card__bg-img {
  position: absolute;
  inset: 0;
}
.topics-grid--list .topic-card__bg-grad {
  position: absolute;
  inset: 0;
}
/* Hide full-cover veils in list; use a side shadow instead */
.topics-grid--list .topic-card__veil,
.topics-grid--list .topic-card__veil-grad { display: none; }

/* Icon: small circle overlaid on thumbnail */
.topics-grid--list .topic-card__icon {
  position: absolute;
  top: 50%; left: 55px;
  transform: translate(-50%,-50%);
  width: 40px; height: 40px;
  background: var(--topic-accent, rgba(0,0,0,0.45));
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  box-shadow: none;
}
.topics-grid--list .topic-card__icon::before { display: none; }
.topics-grid--list .topic-card:hover .topic-card__icon {
  transform: translate(-50%,-50%) scale(1.1);
}
.topics-grid--list .topic-card__icon svg { width: 20px; height: 20px; }
.topics-grid--list .topic-card__icon-img { width: 22px; height: 22px; }

.topics-grid--list .topic-card__badge {
  top: 50%; bottom: auto;
  inset-inline-end: 1rem;
  transform: translateY(-50%);
  flex-direction: row;
  gap: 0.3rem;
  padding: 0.22rem 0.55rem;
}
.topics-grid--list .topic-card:hover .topic-card__badge {
  transform: translateY(-50%) scale(1.06);
}
.topics-grid--list .topic-card__badge strong { font-size: 0.85rem; }
.topics-grid--list .topic-card__badge span { font-size: 0.8125rem; }

/* Caption: sits in the white/dark right area */
.topics-grid--list .topic-card__caption {
  position: static;
  flex: 1;
  flex-direction: row;
  align-items: center;
  padding: 0 3.5rem 0 1.25rem; /* right pad clears badge */
  gap: 1rem;
  background: #fff;
  border-radius: 0;
  --ari-text-accent: var(--ari-ink);
}
.topics-grid--list .topic-card__name {
  color: var(--ari-color-text);
  font-size: 0.92rem;
  text-shadow: none;
  margin: 0;
  min-width: 150px;
  -webkit-line-clamp: 1;
}
.topics-grid--list .topic-card__teaser {
  color: var(--ari-color-text-muted);
  font-size: 0.8125rem;
  margin: 0;
  flex: 1;
  -webkit-line-clamp: 1;
}
.topics-grid--list .topic-card__explore { display: none; }
.topics-grid--list .topic-card:hover {
  transform: translateX(4px);
  box-shadow: none;
}
/* Left orange accent stripe on list-card hover */
.topics-grid--list .topic-card::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--ari-color-accent);
  border-radius: 0;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 250ms ease;
  z-index: 10;
}
.topics-grid--list .topic-card:hover::before { transform: scaleY(1); }

/* ── Empty state ──────────────────────────────────────────── */
.topics-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 5rem 2rem;
  background: rgba(255,255,255,0.7);
  border-radius: 0;
  border: 1px dashed var(--ari-color-border);
  color: var(--ari-color-text-muted);
}
.topics-empty__reset {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.5rem 1.25rem;
  background: var(--ari-color-accent-strong);
  color: #fff;
  border-radius: 0;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 160ms;
}
.topics-empty__reset:hover { background: var(--ari-color-accent-2, var(--ari-ember-dark)); }

/* ── Bottom CTA strip ─────────────────────────────────────── */
.topics-cta-strip {
  background: var(--ari-color-surface, var(--ari-off-white));
  border-top: 1px solid var(--ari-color-border);
  padding: 1.75rem 0;
  margin-top: 1rem;
  --ari-text-accent: var(--ari-ink);
}
.topics-cta-strip__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.topics-cta-strip__icon {
  flex-shrink: 0;
  color: var(--ari-color-text-muted);
}
.topics-cta-strip__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}
.topics-cta-strip__text strong {
  font-size: 1rem;
  color: var(--ari-color-text);
}
.topics-cta-strip__text span {
  font-size: 0.875rem;
  color: var(--ari-color-text-muted);
}
.topics-cta-strip__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ari-color-accent-strong);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.65rem 1.25rem;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms;
  flex-shrink: 0;
}
.topics-cta-strip__btn:hover { background: var(--ari-color-accent-2, var(--ari-ember-dark)); color: #fff; }

/* ============================================================
   STUDENT PRIZE PAGE  (.sprize-*)
   ============================================================ */

/* ── Page shell ───────────────────────────────────────────── */
.sprize-page { background: #fff;  --ari-text-accent: var(--ari-ink); }

/* ── Body layout ──────────────────────────────────────────── */
.sprize-body {
  padding: 3.5rem 0 4rem;
}
.sprize-content {
  max-width: 820px;
  margin-inline: auto;
}
.sprize-content__title {
  margin: 0 0 1.5rem;
  font-family: var(--font-role-display);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: var(--weight-display-title);
  color: var(--ari-color-text, var(--ari-ink));
  line-height: 1.2;
}

/* ── Intro text ───────────────────────────────────────────── */
.sprize-intro {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ari-ink);
  margin-bottom: 2rem;
}
.sprize-intro p { margin: 0 0 1rem; }
.sprize-intro p:last-child { margin-bottom: 0; }

/* ── Video poster ─────────────────────────────────────────── */
.sprize-video {
  margin: 2rem 0;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
}
.sprize-video__poster {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ari-ink);
  --ari-text-accent: var(--ari-apricot);
}
.sprize-video__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sprize-video__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.38);
}
.sprize-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 200ms ease, transform 200ms ease;
}
.sprize-video:hover .sprize-video__play {
  background: rgba(255,255,255,0.30);
  transform: translate(-50%, -50%) scale(1.08);
}

/* ── Pull quote ───────────────────────────────────────────── */
.sprize-quote {
  margin: 2.5rem 0;
  padding: 1.75rem 2rem;
  border-left: 4px solid var(--ari-color-accent);
  background: var(--ari-sand);
  border-radius: 0;
  --ari-text-accent: var(--ari-ink);
}
.sprize-quote__text {
  margin: 0 0 0.75rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ari-ink);
  font-style: normal;
}
.sprize-quote__cite {
  display: block;
  font-size: 0.88rem;
  font-style: normal;
  color: var(--ari-warm-grey);
  line-height: 1.5;
}

/* ── Contest banner image ─────────────────────────────────── */
.sprize-banner {
  margin: 2rem 0;
  border-radius: 0;
  overflow: hidden;
}
.sprize-banner__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── FAQ accordion ────────────────────────────────────────── */
/* FAQ: styled by the FAQ block (src/blocks/faq/style.scss) */
.sprize-content .ari-faq {
  margin: 2.5rem 0 0;
}

/* ── Past Winners section ─────────────────────────────────── */
.sprize-winners {
  background: var(--ari-off-white);
  padding: 4rem 0 5rem;
  --ari-text-accent: var(--ari-ink);
}
.sprize-winners__title {
  margin: 0 0 2.5rem;
  font-family: var(--font-role-display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: var(--weight-display-title);
  color: var(--ari-color-text, var(--ari-ink));
}
.sprize-winners-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--ari-light-grey);
}

/* ── Winner card: horizontal row ─────────────────────────── */
.sprize-winner-card {
  background: #fff;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--ari-light-grey);
  transition: background 160ms ease;
  --ari-text-accent: var(--ari-ink);
}
.sprize-winner-card:hover { background: var(--ari-off-white); }

.sprize-winner-card__img-wrap {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ari-off-white);
  flex-shrink: 0;
  --ari-text-accent: var(--ari-ink);
}
.sprize-winner-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}
.sprize-winner-card:hover .sprize-winner-card__img {
  transform: scale(1.04);
}
.sprize-winner-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e0e0e8 0%, #c8c8d4 100%);
  --ari-text-accent: var(--ari-ink);
}
.sprize-winner-card__body {
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  justify-content: center;
}
.sprize-winner-card__year {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ari-text-accent);
}
.sprize-winner-card__title {
  margin: 0;
  font-family: var(--font-role-reading);
  font-size: 1.05rem;
  font-weight: var(--weight-reading-h2);
  line-height: 1.35;
}
.sprize-winner-card__title a {
  color: var(--ari-color-text, var(--ari-ink));
  text-decoration: none;
  transition: color 180ms ease;
}
.sprize-winner-card__title a:hover {
  color: var(--ari-text-accent);
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}
.sprize-winner-card__author {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.25rem;
  padding-top: 0.6rem;
}
.sprize-winner-card__author-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sprize-winner-card__author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ari-off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ari-warm-grey);
  --ari-text-accent: var(--ari-ink);
}
.sprize-winner-card__author-name {
  font-size: 0.82rem;
  color: var(--ari-warm-grey);
  text-decoration: none;
  font-family: var(--font-role-byline);
  font-weight: var(--weight-byline);
  font-style: var(--style-byline);
  transition: color 180ms ease;
}
.sprize-winner-card__author-name:hover {
  color: var(--ari-text-accent);
  text-decoration-color: var(--ari-color-accent);
  text-decoration-line: underline;
}

/* Prize Winners block (ari-v2/prize-winners) inside page content */
.ari-prize-winners {
  padding: 2.5rem clamp(1rem, 3vw, 2rem);
}

/* ============================================================
   ANNUAL FELLOWSHIPS PAGE  (.fellowships-*)
   ============================================================ */

/* ── About / description ──────────────────────────────────── */
.fellowships-about {
  background: #fff;
  padding: clamp(3rem, 6vw, 5rem) 0;
  --ari-text-accent: var(--ari-ink);
}
.fellowships-about__inner {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2.5rem 5rem;
  max-width: none;
  align-items: start;
}
/* Block-built content: full container width; editors set up columns with
   core/columns instead of the fixed 3fr/2fr body + aside grid above. */
.fellowships-about--blocks .fellowships-about__inner {
  display: block;
}
.fellowships-about--blocks .wp-block-columns {
  gap: 2.5rem 5rem;
}
.fellowships-about__body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ari-ink);
}
.fellowships-about__body p { margin-bottom: 1.1em; }
.fellowships-about__body ul { padding-left: 1.5rem; }
.fellowships-about__body a { color: var(--ari-text-accent); text-decoration: underline;  text-decoration-color: var(--ari-color-accent); }

/* Aside slot for the block-built path (documentation/specs/annual-fellowships-blocks.md):
   wraps the rendered ari-v2/highlighted-quote block, in the right column of
   the 2-col about layout. The block supplies its own panel styling (Sidebar
   block style); this wrapper only carries the sticky positioning that used
   to live on .fellowships-quote directly. */
.fellowships-about__aside {
  position: sticky;
  top: 2rem;
}

/* Pull-quote (legacy, classic-content path): lives in the right column of the 2-col about layout */
.fellowships-quote {
  margin: 0;
  padding: 2rem 2rem 2rem 2.5rem;
  border-left: 4px solid var(--ari-color-accent);
  background: var(--ari-sand);
  border-radius: 0;
  position: sticky;
  top: 2rem;
  --ari-text-accent: var(--ari-ink);
}
.fellowships-quote__text {
  font-family: var(--font-role-display);
  font-size: var(--ari-scale-quote);
  font-weight: var(--weight-display-quote);
  line-height: var(--ari-leading-quote-latin);
  color: var(--ari-ink);
  margin: 0 0 1rem;
  font-style: normal;
}
.fellowships-quote__cite {
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ari-text-accent);
  font-style: normal;
  letter-spacing: 0.02em;
}

/* ============================================================
   NEWSLETTERS PAGE  (.nl-*)
   ============================================================ */

/* ── Archives cue bar: sits between hero and subscribe form so the
   Newsletter Archives section further down the page isn't missed. ── */
.nl-archives-cue-bar {
  background: var(--ari-sand);
  border-bottom: 1px solid var(--ari-clay);
  --ari-text-accent: var(--ari-ink);
}
.nl-archives-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 0;
  text-decoration: none;
  text-align: center;
  color: var(--ari-text-accent);
}
.nl-archives-cue__text {
  font-size: 0.875rem;
  color: var(--ari-warm-grey);
}
.nl-archives-cue__text strong {
  color: var(--ari-text-accent);
  font-weight: 600;
  margin-left: 0.35em;
}
.nl-archives-cue__chevron {
  flex-shrink: 0;
  animation: nl-archives-cue-bounce 1.6s ease-in-out infinite;
}
.nl-archives-cue:hover .nl-archives-cue__chevron { animation-play-state: paused; transform: translateY(3px); }
@keyframes nl-archives-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .nl-archives-cue__chevron { animation: none; }
}

/* ── Subscribe: two-column layout ───────────────────────── */
.nl-subscribe {
  background: #fff;
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-bottom: 1px solid var(--ari-light-grey);
  --ari-text-accent: var(--ari-ink);
}
.nl-subscribe__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* Pitch column */
.nl-subscribe__title {
  font-family: var(--font-role-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: var(--weight-display-title);
  color: var(--ari-ink);
  margin: 0 0 1rem;
}
.nl-subscribe__lead {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ari-warm-grey);
  margin: 0 0 2rem;
}
.nl-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.nl-benefit {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.nl-benefit__icon {
  display: flex;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--ari-text-accent);
}
.nl-benefit__text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ari-ink);
}

.nl-form-card {
  background: var(--ari-off-white);
  border-radius: 0;
  padding: 2.25rem 2rem;
  border: 1px solid var(--ari-light-grey);
  --ari-text-accent: var(--ari-ink);
}
.nl-form-card__heading {
  font-family: var(--font-role-reading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ari-ink);
  margin: 0 0 1.5rem;
}
.nl-form-card__notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0;
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.nl-form-card__notice--success {
  background: var(--ari-off-white);
  color: #15803d;
  border: 1px solid #bbf7d0;
  --ari-text-accent: var(--ari-ink);
}
.nl-form-card__notice--error {
  background: var(--ari-off-white);
  color: #b91c1c;
  border: 1px solid #fecaca;
  --ari-text-accent: var(--ari-ink);
}
.nl-form-card__notice--info {
  background: var(--ari-off-white);
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  --ari-text-accent: var(--ari-ink);
}
.nl-form-card__privacy {
  font-size: 0.8125rem;
  color: var(--ari-color-text-muted); /* not #9a8f8a (~2.9:1 on light bg, fails WCAG 1.4.3) */
  margin: 1.25rem 0 0;
  text-align: center;
  line-height: 1.5;
}

/* Form fields */
.nl-form { display: flex; flex-direction: column; gap: 1.25rem; }
.nl-form__field { display: flex; flex-direction: column; gap: 0.4rem; }
.nl-form__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ari-ink);
}
.nl-form__required { color: var(--ari-text-accent); margin-inline-start: 2px; }
.nl-form__input-wrap {
  position: relative;
}
.nl-form__input-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ari-color-text-muted); /* not #9a8f8a (~2.9:1 on light bg, fails WCAG 1.4.3) */
  pointer-events: none;
}
.nl-form__input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  border: 1.5px solid var(--ari-light-grey);
  border-radius: 0;
  font-size: 0.95rem;
  color: var(--ari-ink);
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  box-sizing: border-box;
  --ari-text-accent: var(--ari-ink);
}
.nl-form__input:focus {
  outline: none;
  border-color: var(--ari-color-accent);
  box-shadow: 0 0 0 3px rgba(219, 89, 33, 0.12);
}
.nl-form__input::placeholder { color: var(--ari-warm-grey); }

/* Consent checkbox */
.nl-form__consent { padding-top: 0.25rem; }
.nl-form__consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ari-warm-grey);
  cursor: pointer;
}
.nl-form__checkbox {
  margin: 0;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--ari-color-accent);
  cursor: pointer;
}

/* Submit button */
.nl-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: var(--ari-color-accent-strong);
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
  letter-spacing: 0.01em;
}
.nl-form__submit:hover {
  background: var(--ari-ember-dark);
  transform: translateY(-1px);
}
.nl-form__submit:active { transform: translateY(0); }

/* ── Archives section ─────────────────────────────────────── */
.nl-archives {
  /* Light scheme to match the Press Room page (feedback 2026-11-03). */
  background: var(--ari-off-white); /* brand Off-White */
  padding: clamp(3rem, 6vw, 5rem) 0;
  scroll-margin-top: var(--ari-sticky-top, 130px);
  --ari-text-accent: var(--ari-ink);
}
.nl-archives__header { margin-bottom: 2.5rem; }
.nl-archives__heading {
  font-family: var(--font-role-display);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: var(--weight-display-title);
  color: var(--ari-ink);
  margin: 0 0 0.5rem;
}
.nl-archives__sub {
  font-size: 0.95rem;
  color: var(--ari-warm-grey);
  margin: 0;
}

/* ── Archive card grid ────────────────────────────────────── */
.nl-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.nl-archive-card {
  position: relative;
  display: block;
  text-decoration: none;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--ari-light-grey);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  --ari-text-accent: var(--ari-ink);
}
.nl-archive-card:hover {
  transform: translateY(-3px);
  box-shadow: none;
  border-color: var(--ari-color-accent);
}

.nl-archive-card__inner {
  position: relative;
  z-index: 1;
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 160px;
  justify-content: flex-end;
}

.nl-archive-card__year {
  display: block;
  font-family: var(--font-role-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: var(--weight-display-title);
  line-height: 1;
  color: var(--ari-ink);
  letter-spacing: -0.03em;
}

.nl-archive-card__count {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ari-warm-grey); /* brand: no orange text on light grounds */
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nl-archive-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ari-warm-grey);
  transition: color 180ms ease, gap 180ms ease;
}
.nl-archive-card:hover .nl-archive-card__cta {
  color: var(--ari-ink);
  gap: 0.55rem;
}

/* ============================================================
   NEWSLETTER ARCHIVE YEAR PAGE  (.nl-archive-*)
   ============================================================ */

.nl-archive-body {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  max-width: 860px;
}
.nl-archive-months { display: flex; flex-direction: column; gap: 2.5rem; }
.nl-archive-month__heading {
  font-family: var(--font-role-display);
  font-size: var(--ari-scale-h2);
  font-weight: var(--weight-display-title);
  color: var(--ari-ink);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ari-color-accent);
  display: inline-block;
  line-height: var(--ari-leading-h2-latin);
}
.nl-issue-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ari-light-grey); }
.nl-issue { border-bottom: 1px solid var(--ari-light-grey); }
.nl-issue__link {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 0.5rem;
  text-decoration: none;
  color: inherit;
  border-radius: 0;
  transition: background 160ms ease;
}
.nl-issue__link--no-date { grid-template-columns: 1fr auto; }
.nl-issue__link:hover { background: var(--ari-sand); }
.nl-issue__link:hover .nl-issue__title { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.nl-issue__date {
  font-size: 0.8125rem;
  color: var(--ari-warm-grey);
  font-weight: 500;
  white-space: nowrap;
}
.nl-issue__title {
  font-family: var(--font-role-reading);
  font-size: 0.95rem;
  font-weight: var(--weight-reading-h2);
  color: var(--ari-ink);
  line-height: 1.4;
  transition: color 160ms ease;
}
.nl-issue__icon {
  color: var(--ari-warm-grey);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: color 160ms ease;
}
.nl-issue__link:hover .nl-issue__icon { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.nl-archive-empty { color: var(--ari-warm-grey); font-size: 0.95rem; padding: 2rem 0; }

/* ============================================================
   FELLOWSHIP DETAIL PAGE  (.fd-*)
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.fd-hero {
  background: linear-gradient(135deg, var(--ari-ink) 0%, var(--ari-ink) 60%, var(--ari-ink) 100%);
  padding: clamp(3rem, 6vw, 5rem) 0;
  position: relative;
  overflow: hidden;
  --ari-text-accent: var(--ari-apricot);
}
.fd-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(219, 89, 33, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.fd-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.fd-hero__breadcrumb { margin-bottom: 1.5rem; }
.fd-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 160ms ease;
}
.fd-hero__back:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.fd-hero__title {
  font-family: var(--font-role-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: var(--weight-display-title);
  line-height: 1.15;
  color: #fff;
  margin: 0;
  padding-left: 1.25rem;
  border-left: 4px solid var(--ari-color-accent);
}
.fd-hero__badge {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ari-color-accent-strong);
  padding: 0.25rem 0.75rem;
  border-radius: 0;
}

/* ── Cover image (full-width group photo) ─────────────────── */
.fd-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 520px;
  background: #fff;
  border-top: 1px solid var(--ari-light-grey);
  border-bottom: 1px solid var(--ari-light-grey);
  padding: 2rem 0;
  --ari-text-accent: var(--ari-ink);
}
.fd-cover__img {
  width: auto;
  max-width: min(100%, 900px);
  height: auto;
  max-height: 460px;
  display: block;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

/* ── Cover trigger button ─────────────────────────────────── */
.fd-cover__trigger {
  display: block;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: zoom-in;
  position: relative;
  border-radius: 0;
  outline-offset: 3px;
}
.fd-cover__trigger:focus-visible {
  outline: 2px solid var(--ari-color-accent);
}
.fd-cover__zoom-hint {
  position: absolute;
  bottom: 0.65rem;
  right: 0.65rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}
.fd-cover__trigger:hover .fd-cover__zoom-hint,
.fd-cover__trigger:focus-visible .fd-cover__zoom-hint {
  opacity: 1;
  transform: scale(1);
}

/* ── Lightbox overlay ─────────────────────────────────────── */
.fd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10,8,6,0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 240ms ease;
}
.fd-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.fd-lightbox__img {
  max-width: 95vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 0;
  box-shadow: none;
  transform: scale(0.96);
  transition: transform 240ms ease;
  user-select: none;
  -webkit-user-select: none;
}
.fd-lightbox.is-open .fd-lightbox__img {
  transform: scale(1);
}
.fd-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease, transform 180ms ease;
  outline-offset: 2px;
}
.fd-lightbox__close:hover {
  background: rgba(255,255,255,0.22);
  transform: scale(1.08);
}
.fd-lightbox__close:focus-visible {
  outline: 2px solid rgba(255,255,255,0.6);
}

/* ── Page body ────────────────────────────────────────────── */
.fd-body {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 900px;
  margin-inline: auto;
}

/* ── Intro prose ──────────────────────────────────────────── */
.fd-intro {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ari-ink);
}
.fd-intro > p:first-child {
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--ari-ink);
}
.fd-intro p   { margin-bottom: 1.1em; }
.fd-intro ul  {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.5em;
}
.fd-intro li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.65em;
  line-height: 1.7;
}
.fd-intro li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ari-color-accent);
  flex-shrink: 0;
}
.fd-intro strong { font-weight: 600; }
.fd-intro h2 {
  font-family: var(--font-role-reading);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: var(--weight-reading-h2);
  margin: 2.5em 0 0.65em;
  color: var(--ari-ink);
  padding-bottom: 0.55em;
  border-bottom: 2px solid var(--ari-light-grey);
  position: relative;
}
.fd-intro h2::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--ari-color-accent);
}
.fd-intro h3 {
  font-family: var(--font-role-reading);
  font-size: 1.1rem;
  font-weight: var(--weight-reading-h2);
  margin: 2em 0 0.45em;
  color: var(--ari-ink);
  padding-left: 0.85rem;
  border-left: 3px solid var(--ari-color-accent);
  line-height: 1.35;
}
.fd-intro h4 {
  font-family: var(--font-role-reading);
  font-size: 0.95rem;
  font-weight: var(--weight-reading-h2);
  margin: 1.5em 0 0.35em;
  color: var(--ari-ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fd-intro a {
  color: var(--ari-text-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ari-color-accent);
}
.fd-intro a:hover { text-decoration-thickness: 2px; }

/* ── Horizontal divider ───────────────────────────────────── */
.fd-divider {
  border: none;
  border-top: 1px solid var(--ari-light-grey);
  margin: 2.5rem 0;
}

/* ── Pull-quote ───────────────────────────────────────────── */
.fd-quote {
  margin: 0 0 2.5rem;
  padding: 1.75rem 2rem;
  border-left: 4px solid var(--ari-color-accent);
  background: var(--ari-sand);
  border-radius: 0;
  --ari-text-accent: var(--ari-ink);
}
.fd-quote__text {
  font-family: var(--font-role-display);
  font-size: var(--ari-scale-quote);
  font-weight: var(--weight-display-quote);
  font-style: normal;
  line-height: var(--ari-leading-quote-latin);
  color: var(--ari-ink);
  margin: 0 0 1.25rem;
}
.fd-quote__cite {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-style: normal;
}
.fd-quote__cite-img-link { display: flex; flex-shrink: 0; }
.fd-quote__cite-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid #fff;
  box-shadow: none;
}
.fd-quote__cite-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.fd-quote__cite-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ari-ink);
  text-decoration: none;
  transition: color 160ms ease;
}
.fd-quote__cite-name:hover { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.fd-quote__cite-role {
  font-size: 0.8125rem;
  color: var(--ari-warm-grey);
}

/* ── Fellows section ──────────────────────────────────────── */
.fd-fellows {
  background: var(--ari-color-surface, var(--ari-off-white));
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--ari-color-border, var(--ari-light-grey));
  --ari-text-accent: var(--ari-ink);
}
.fd-fellows__heading {
  font-family: var(--font-role-display);
  font-size: clamp(1.3rem, 2.5vw, 1.65rem);
  font-weight: var(--weight-display-title);
  color: var(--ari-ink);
  margin: 0 0 2.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.fd-fellows__heading::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, var(--ari-color-accent), transparent);
}

/* ── Fellows grid ─────────────────────────────────────────── */
.fd-fellows-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}

/* ── Individual fellow card ───────────────────────────────── */
.fd-fellow {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.75rem 1rem 1.5rem;
  background: #fff;
  border-radius: 0;
  border: 1px solid var(--ari-color-border, var(--ari-light-grey));
  text-decoration: none;
  transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
  --ari-text-accent: var(--ari-ink);
}
a.fd-fellow:hover {
  box-shadow: none;
  border-color: var(--ari-color-accent);
  transform: translateY(-3px);
}

.fd-fellow__avatar-wrap {
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.fd-fellow__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid #fff;
  box-shadow: none;
}
.fd-fellow__avatar--placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ari-ink) 0%, var(--ari-ink) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(219, 89, 33, 0.3);
  --ari-text-accent: var(--ari-apricot);
}

.fd-fellow__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.fd-fellow__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ari-ink);
  line-height: 1.35;
  transition: color 160ms ease;
}
a.fd-fellow:hover .fd-fellow__name { color: var(--ari-text-accent);  text-decoration-color: var(--ari-color-accent); text-decoration-line: underline; }
.fd-fellow__sub {
  font-size: 0.8125rem;
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
  line-height: 1.3;
}

/* ============================================================
   PARTNERS (archive-partner.php / single-partner.php)
   ============================================================
   Deliberately uses base tokens (--ari-color-*, --ari-space-*,
   --ari-radius*) rather than the .about-page-scoped --about-* tokens the
   About Us logo wall uses, since those are intentionally private to
   .about-page (see components.css's ABOUT US PAGE section header) and
   would resolve to nothing outside it.
   ============================================================ */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ari-space-5, 1.5rem);
  padding: var(--ari-space-7, 3rem) 0;
}
.partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ari-space-3, 0.75rem);
  padding: var(--ari-space-5, 1.5rem) var(--ari-space-4, 1rem);
  background: var(--ari-color-bg, #fff);
  border: 1px solid var(--ari-color-border, var(--ari-light-grey));
  border-radius: 0;
  text-decoration: none;
  text-align: center;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  --ari-text-accent: var(--ari-ink);
}
.partner-card:hover,
.partner-card:focus-visible {
  border-color: var(--ari-color-accent);
  box-shadow: none;
}
.partner-card__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 88px;
}
.partner-card__logo-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.partner-card__logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ari-color-border, #e4ddd8);
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
  font-family: var(--font-role-display);
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  --ari-text-accent: var(--ari-ink);
}
.partner-card__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ari-color-text, var(--ari-ink));
  line-height: 1.3;
}
.partner-archive__empty {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 0;
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
  font-size: 1rem;
}

/* Single Partner content-area additions (hero/layout/sidebar reused from
   .prog-*; see single-partner.php's docblock) */
.partner-single-logo {
  max-width: 220px;
  margin-bottom: var(--ari-space-5, 1.5rem);
}
.partner-single-logo img {
  max-width: 100%;
  height: auto;
  display: block;
}
.partner-single-website {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--ari-space-5, 1.5rem);
  padding: 0.65rem 1.25rem;
  background: var(--ari-color-accent-strong);
  color: #fff;
  border-radius: 0;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 160ms ease;
}
.partner-single-website:hover,
.partner-single-website:focus-visible {
  background: var(--ari-color-accent-2, var(--ari-ember-dark));
}

/* ============================================================
   MEDIA COVERAGE ARCHIVE
   Compact, filterable editorial index. These selectors are scoped to the
   standalone archive so the Press Room carousel keeps its existing layout.
   ============================================================ */
.media-cov-archive {
  background: #fff;
  --ari-text-accent: var(--ari-ink);
}

.media-cov-archive__content {
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3.5rem, 6vw, 5.5rem);
}

.media-cov-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(14rem, 18rem);
  align-items: center;
  gap: 1rem 1.5rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ari-color-border, var(--ari-light-grey));
  font-size: 0.8125rem;
}

.media-cov-filters__types {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.media-cov-filters__types legend {
  float: inline-start;
  margin-inline-end: 0.35rem;
  padding: 0;
  font-weight: 600;
  color: var(--ari-color-text, var(--ari-ink));
}

.media-cov-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0;
  background: var(--ari-color-surface, var(--ari-off-white));
  color: var(--ari-color-text, var(--ari-ink));
  line-height: 1;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
  --ari-text-accent: var(--ari-ink);
}

.media-cov-filter-chip:hover,
.media-cov-filter-chip:focus-visible,
.media-cov-filter-chip.is-active {
  background: var(--ari-ember-dark);
  color: #fff;
}

.media-cov-filters__year {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  white-space: nowrap;
}

.media-cov-filters__year label {
  font-weight: 600;
}

.media-cov-filters__year select {
  min-height: 2rem;
  padding-block: 0.3rem;
  padding-inline: 0.65rem 1.8rem;
  border: 1px solid var(--ari-color-border, var(--ari-light-grey));
  border-radius: 0;
  background-color: #fff;
  color: var(--ari-color-text, var(--ari-ink));
  font: inherit;
  --ari-text-accent: var(--ari-ink);
}

.media-cov-filters__search {
  position: relative;
}

.media-cov-filters__search svg {
  position: absolute;
  inset-inline-start: 0.8rem;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
  pointer-events: none;
  transform: translateY(-50%);
}

.media-cov-filters__search input[type="search"] {
  width: 100%;
  min-height: 2.25rem;
  padding-block: 0.5rem;
  padding-inline: 2.25rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 0;
  outline: none;
  background: var(--ari-off-white);
  color: var(--ari-color-text, var(--ari-ink));
  font: inherit;
  --ari-text-accent: var(--ari-ink);
}

.media-cov-filters__search input[type="search"]:focus {
  border-color: var(--ari-color-accent);
  box-shadow: 0 0 0 2px rgba(219, 89, 33, 0.12);
}

.media-cov-archive .media-cov-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.media-cov-archive .media-cov-card {
  min-height: 19.5rem;
  overflow: hidden;
  border: 1px solid var(--ari-color-border, var(--ari-light-grey));
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  --ari-text-accent: var(--ari-ink);
}

.media-cov-archive .media-cov-card:hover {
  border-color: rgba(219, 89, 33, 0.45);
  box-shadow: none;
  transform: translateY(-2px);
}

.media-cov-archive .media-cov-card__img-wrap {
  display: none;
}

.media-cov-archive .media-cov-card__body {
  padding: 1.2rem;
}

.media-cov-archive .media-cov-card__meta {
  order: -1;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
}

.media-cov-archive .media-cov-card__type {
  min-height: 1.65rem;
  padding: 0.4rem 0.55rem;
  font-weight: 600;
  /* Standalone rounded pill, not joined to the date (overrides the
     base component's :last-child-only rounding, which assumes a date
     pill sits flush against it). */
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/* Plain text next to the badge, not the joined light-grey pill the base
   component uses elsewhere (Press Room carousel) — matches the approved
   archive list design. */
.media-cov-archive .media-cov-card__date {
  min-height: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
}

.media-cov-archive .media-cov-card__title {
  margin-bottom: 0.85rem;
  font-family: var(--font-role-reading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
  -webkit-line-clamp: 3;
}

.media-cov-archive .media-cov-card__excerpt {
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
  -webkit-line-clamp: 4;
}

.media-cov-card__source {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
}

.media-cov-archive .media-cov-card__link {
  gap: 0.45rem;
  margin-top: auto;
  font-size: 0.8125rem;
  font-weight: 600;
}

.media-cov-archive .media-cov-card__link svg {
  width: 0.8rem;
  height: 0.8rem;
  transition: transform 160ms ease;
}

.media-cov-archive .media-cov-card__link:hover svg,
.media-cov-archive .media-cov-card__link:focus-visible svg {
  transform: translate(2px, -2px);
}

.media-cov-archive .ari-pagination {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.media-cov-archive .ari-pagination .page-numbers {
  border-radius: 50%;
}

.media-cov-archive .ari-pagination .page-numbers.prev,
.media-cov-archive .ari-pagination .page-numbers.next {
  border-radius: 0;
}

.media-cov-archive__empty {
  padding-block: clamp(3rem, 8vw, 6rem);
  text-align: center;
}

.media-cov-archive__empty a {
  color: var(--ari-text-accent);
  font-weight: 600;
  text-decoration-color: var(--ari-color-accent);
}

/* Newsletter signup bar below the listing. Posts to the same
   ari_v2_newsletter_subscribe handler as the homepage's newsletter-card
   (see inc/helpers.php ari_v2_handle_newsletter_submission()), just in a
   compact horizontal bar instead of that section's large centered card. */
.media-cov-newsletter-section {
  padding-block: 0 clamp(3rem, 6vw, 5rem);
}

.media-cov-newsletter {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  border-radius: 0;
  background: var(--ari-sand);
  --ari-text-accent: var(--ari-ink);
}

.media-cov-newsletter__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1.5px solid var(--ari-color-accent);
  background: #fff;
  color: var(--ari-text-accent);
  --ari-text-accent: var(--ari-ink);
}

.media-cov-newsletter__body { flex: 1 1 auto; min-width: 0; }

.media-cov-newsletter__title {
  margin: 0;
  font-family: var(--font-role-reading);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ari-color-fg, var(--ari-ink));
}

.media-cov-newsletter__desc {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--ari-color-text-muted, var(--ari-warm-grey));
}

.media-cov-newsletter__notice {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
}
.media-cov-newsletter__notice--success { color: #1a955a; }
.media-cov-newsletter__notice--error   { color: #c53131; }
.media-cov-newsletter__notice--info    { color: var(--ari-color-text-muted, var(--ari-warm-grey)); }

.media-cov-newsletter__form {
  flex: 0 0 auto;
  display: flex;
  gap: 0.6rem;
}

.media-cov-newsletter__email {
  min-width: 16rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--ari-color-border, var(--ari-light-grey));
  border-radius: 0;
  background: #fff;
  color: var(--ari-color-fg, var(--ari-ink));
  font: inherit;
  --ari-text-accent: var(--ari-ink);
}
.media-cov-newsletter__email:focus {
  outline: none;
  border-color: var(--ari-color-accent);
  box-shadow: 0 0 0 2px rgba(219, 89, 33, 0.12);
}

.media-cov-newsletter__btn {
  flex: 0 0 auto;
  padding: 0.65rem 1.4rem;
  border: none;
  border-radius: 0;
  background: var(--ari-color-accent-strong);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 160ms ease;
}
.media-cov-newsletter__btn:hover { background: var(--ari-color-accent-2, var(--ari-ember-dark)); }

@media (prefers-reduced-motion: reduce) {
  .media-cov-filter-chip,
  .media-cov-archive .media-cov-card,
  .media-cov-archive .media-cov-card__link svg,
  .media-cov-newsletter__btn {
    transition: none;
  }
  .media-cov-archive .media-cov-card:hover {
    transform: none;
  }
}

/* Podcast landing: block-editor copy (template-parts/podcast-landing.php) reuses the section heading look */
.pcast-landing__editor .pcast-landing__body h2,
.pcast-landing__editor .pcast-landing__body h3 {
  font-family: var(--font-role-reading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ari-color-fg, var(--ari-ink));
  margin: 2rem 0 1rem;
}
.pcast-landing__editor .pcast-landing__body > :first-child { margin-top: 0; }
.pcast-landing__editor .pcast-landing__body .pcast-platforms { margin: 2rem 0; }


/* ============================================================
   BRAND MANUAL 2026: reading text and captions
   Body 18/29 (Barlow / Sans Thmanyah), lead 22/33, meta 14/18.
   ============================================================ */
.entry-content,
.prog-body,
.prog-body p,
.pub-content,
.pcast-landing__body,
.sjob-content,
.fd-intro {
  font-size: var(--ari-scale-body);
  line-height: var(--ari-leading-body-latin);
}
.fd-intro > p:first-child {
  font-size: var(--ari-scale-lead);
  line-height: var(--ari-leading-lead-latin);
}
.entry-content figcaption,
.prog-body figcaption,
.pub-content figcaption,
.wp-element-caption {
  font-size: var(--ari-scale-caption);
  line-height: var(--ari-leading-caption-latin);
}
[lang="ar"] .entry-content,
[lang="ar"] .prog-body,
[lang="ar"] .prog-body p,
[lang="ar"] .pub-content,
[lang="ar"] .pcast-landing__body,
[lang="ar"] .sjob-content,
[lang="ar"] .fd-intro,
[lang="ar"] .fd-intro > p:first-child {
  line-height: var(--ari-leading-body-arabic);
}
[lang="ar"] .pub-content blockquote,
[lang="ar"] .fellowships-quote__text,
[lang="ar"] .fd-quote__text {
  line-height: var(--ari-leading-quote-arabic);
}
[lang="ar"] .country-related__title,
[lang="ar"] .ev-section__title,
[lang="ar"] .people-experts-group__title,
[lang="ar"] .wwa-section__title,
[lang="ar"] .jobs-policy__title,
[lang="ar"] .svid-related__title,
[lang="ar"] .spage-no-results__heading,
[lang="ar"] .nl-archive-month__heading {
  line-height: var(--ari-leading-h2-arabic);
}

/* Arabic: card titles and excerpts need more leading than Latin. */
[lang="ar"] .prog-card__title,
[lang="ar"] .pub-card__title {
  line-height: 1.5;
}
[lang="ar"] .prog-card__desc,
[lang="ar"] .pub-card__excerpt,
[lang="ar"] .newsletter-bar__text {
  line-height: 1.7;
}

/* Accent text on image heroes and dark topic tiles is Apricot; light list rows stay Ink. */
.pub-hero,
.pub2-feat,
.topic-card {
  --ari-text-accent: var(--ari-apricot);
}
.topics-grid--list .topic-card {
  --ari-text-accent: var(--ari-ink);
}

/* ============================================================
   404 PAGE (404.php)
   ============================================================ */
.not-found__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem 3rem;
  padding-block: 3rem 4rem;
}
.not-found__label {
  display: block;
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ari-color-fg, var(--ari-ink));
}
.not-found__search-row {
  display: flex;
  max-width: 32rem;
}
.not-found__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--ari-color-border, var(--ari-light-grey));
  border-radius: 0;
  background: #fff;
  font-size: 0.9rem;
  color: var(--ari-color-fg, var(--ari-ink));
}
.not-found__input:focus-visible {
  outline: 2px solid var(--ari-color-accent);
  outline-offset: -2px;
}
.not-found__btn {
  flex: 0 0 auto;
  height: 2.75rem;
  padding: 0 1.25rem;
  background: var(--ari-color-accent-strong);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  border: none;
  border-radius: 0;
  cursor: pointer;
}
.not-found__btn:hover { background: var(--ari-ink); }
.not-found__btn:focus-visible {
  outline: 2px solid var(--ari-ink);
  outline-offset: 2px;
}
.not-found__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.not-found__links a {
  font-weight: 600;
  color: var(--ari-color-fg, var(--ari-ink));
  text-decoration: underline;
  text-decoration-color: var(--ari-color-accent);
  text-underline-offset: 0.25em;
}
.not-found__links a:hover { color: var(--ari-color-accent-strong); }

/* ============================================================
   Cookie consent banner (inc/cookie-consent.php)
   Above the newsletter bar (250) and popup overlay (500) so the
   choice is always reachable; the bar is hidden while it is open.
   ============================================================ */
.cookie-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 600;
  background: var(--ari-ink);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.14);
  padding: 1rem 0;
  --ari-text-accent: var(--ari-apricot);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.cookie-consent__title { margin: 0 0 0.25rem; font-weight: 600; font-size: 0.95rem; }
.cookie-consent__text { margin: 0; font-size: 0.875rem; line-height: 1.5; color: rgba(255,255,255,0.86); max-width: 70ch; }
.cookie-consent__text a { color: #fff; text-decoration: underline; text-decoration-color: var(--ari-color-accent); text-underline-offset: 0.2em; }
.cookie-consent__actions { display: flex; gap: 0.75rem; flex-shrink: 0; }
/* Accept and Reject share one style on purpose: equal prominence (CNIL). */
.cookie-consent__btn {
  min-height: 44px;
  padding: 0.6rem 1.4rem;
  border: 1px solid #fff;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.cookie-consent__btn:hover,
.cookie-consent__btn:focus-visible { background: #fff; color: var(--ari-ink); }
.cookie-consent__btn:focus-visible,
.cookie-consent__text a:focus-visible { outline: 2px solid var(--ari-apricot); outline-offset: 2px; }
.has-cookie-banner .newsletter-bar { display: none; }

/* QA L2: player times are numbers; keep "0:00 / 67:12" in LTR order on Arabic pages. */
.hap-time { direction: ltr; unicode-bidi: isolate; }

/* QA L3: visible focus ring on hero slider links (dark image ground). */
.hero-slide__badge:focus-visible,
.hero-slide__title a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* QA M7: consent checkbox on the homepage and Media Coverage signup forms. */
.newsletter-form__consent { margin-top: 0.875rem; }
.media-cov-newsletter__form { flex-wrap: wrap; }
.media-cov-newsletter__consent { flex: 1 1 100%; }
.media-cov-newsletter__consent .nl-form__consent-label { color: var(--ari-ink); }

/* QA L1: search page heading. */
.spage-title {
  margin: 0;
  font-family: var(--ari-font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.25;
  color: var(--ari-ink);
  overflow-wrap: anywhere;
}
.menu-item__toggle { cursor: pointer; }