/* ============================================================
   MEA INSTITUTE — COMPONENT STYLES
   assets/css/components.css

   Sections:
   1.  SITE HEADER
   2.  SEARCH OVERLAY
   3.  MOBILE NAV
   4.  SITE FOOTER
   5.  HERO SECTIONS
   6.  PUBLICATION CARD
   7.  CENTRE CARD
   8.  EXPERT CARD
   9.  EVENT CARD
   10. TRENDING TOPICS TILE
   11. EDITORIAL QUOTE BLOCK
   12. SPLIT-LAYOUT EDITORIAL
   13. METRICS BAND
   14. MISSION/VISION DUO
   15. FOUR-GRID VALUE BAND
   16. SUPPORT/DONATE BAND
   17. NEWSLETTER/JOIN BAND
   18. INQUIRY FORM
   19. FILTERS
   20. HOMEPAGE SECTIONS
   21. RESEARCH ARCHIVE
   22. POLICY CENTRES LANDING
   23. SINGLE POLICY CENTRE
   24. ABOUT PAGE
   25. OUR TEAM PAGE
   26. SINGLE EXPERT PROFILE
   27. EVENTS & MEDIA PAGE
   28. CONTACT PAGE
   29. CAREERS PAGE
   30. DONATE PAGE
   31. FAQ ACCORDION
   32. 404 PAGE
   33. SEARCH RESULTS
   34. MOTION / ANIMATION
   ============================================================ */


/* ============================================================
   1. SITE HEADER (spec 3.2)
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--color-white);
  height: var(--header-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-warmgrey-40);
  transition: height var(--transition-base), border-color var(--transition-base), background var(--transition-base), backdrop-filter var(--transition-base);
}

.site-header.scrolled {
  height: var(--header-height-scrolled);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  border-bottom-color: transparent;
}

.site-header.nav-open,
.site-header.scrolled.nav-open {
  background: var(--color-white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Logo */
.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 140px;
}

.site-header__logo img {
  height: 56px;
  width: auto;
  display: block;
  transition: height var(--transition-base);
}

.site-header.scrolled .site-header__logo img {
  height: 44px;
}

/* ─── BRAND LOCKUP — CIRIC beside the MEA Institute ──────────────
   Rendered by template-parts/brand-lockup.php in the header, the mobile
   drawer and the footer. The site states the MEA relationship in prose
   exactly once (the hero locator sentence); everywhere else it is carried
   by this lockup, so the lockup has to hold up at every size.

   The two marks are balanced OPTICALLY, not by bounding box: the CIRIC mark
   is roughly 2:1 and the MEA lockup 3.4:1, so matching their heights would
   leave MEA nearly twice as wide. Heights below are tuned so the two occupy
   comparable width, with MEA the quieter of the two. */

.brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.brand-lockup__self,
.brand-lockup__parent {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Rule colours come from the logo spec (assets/img/logo/README.md): navy at
   .28 on a light ground, white at .35 on navy. Not --color-border, which is
   warm grey — the same value but a different hue, and the two marks it
   separates are navy or white ink, nothing else. */
.brand-lockup__rule {
  width: 1px;
  align-self: center;
  background: rgba(var(--color-primary-rgb), 0.28);
  flex-shrink: 0;
}

.brand-lockup--light .brand-lockup__rule {
  background: rgba(255, 255, 255, 0.35);
}

.brand-lockup img {
  width: auto;
  display: block;
}

/* CIRIC alone (the header). Nothing to space against, so drop the gap — the
   modifier exists so the intent is legible, not because flex needs it. */
.brand-lockup--solo {
  gap: 0;
}

/* The parent mark is secondary: it sits back until hovered. */
.brand-lockup__parent {
  opacity: 0.78;
  transition: opacity var(--transition-base);
}

.brand-lockup__parent:hover,
.brand-lockup__parent:focus-visible {
  opacity: 1;
}

/* ── Header ── */
.brand-lockup--header .brand-lockup__self img {
  height: 48px;
  transition: height var(--transition-base);
}

.brand-lockup--header .brand-lockup__parent img {
  height: 36px;
  transition: height var(--transition-base);
}

.brand-lockup--header .brand-lockup__rule {
  height: 34px;
  transition: height var(--transition-base);
}

.site-header.scrolled .brand-lockup--header .brand-lockup__self img {
  height: 38px;
}

.site-header.scrolled .brand-lockup--header .brand-lockup__parent img {
  height: 29px;
}

.site-header.scrolled .brand-lockup--header .brand-lockup__rule {
  height: 26px;
}

/* ── Mobile drawer topbar ── */
.brand-lockup--drawer .brand-lockup__self img {
  height: 38px;
}

.brand-lockup--drawer .brand-lockup__parent img {
  height: 29px;
}

.brand-lockup--drawer .brand-lockup__rule {
  height: 26px;
}

/* ── Footer ──
   .site-footer__logo img previously forced width:200px and a bottom margin.
   The lockup carries the margin on the container instead, so both marks can
   be sized by height and stay on one baseline. */
.site-footer__logo.brand-lockup {
  margin-bottom: var(--space-xl);
}

.site-footer__logo.brand-lockup img {
  width: auto;
  margin-bottom: 0;
}

.brand-lockup--footer .brand-lockup__self img {
  height: 72px;
}

.brand-lockup--footer .brand-lockup__parent img {
  height: 46px;
}

.brand-lockup--footer .brand-lockup__rule {
  height: 48px;
}

/* Navigation */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
}

.site-nav__menu>li>a {
  position: relative;
  display: inline-block;
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-navy);
  padding-bottom: 4px;
  transition: color var(--transition-fast);
}

/* Active page: 2px Gold underline */
.site-nav__menu>li>a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 200ms ease;
}

.site-nav__menu>li>a:hover {
  color: var(--color-navy);
}

.site-nav__menu>li>a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.site-nav__menu>li.current-menu-item>a::after,
.site-nav__menu>li.current-menu-ancestor>a::after {
  transform: scaleX(1);
}

/* Dropdown sub-menu */
.site-nav__menu li {
  position: relative;
}

.site-nav__menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-white);
  border: 1px solid rgba(var(--color-neutral-rgb), 0.2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 240px;
  margin-top: 16px;
  padding: var(--space-sm);
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transition: opacity var(--transition-fluid), transform var(--transition-fluid);
  z-index: var(--z-overlay);
}

/* Invisible bridge: keeps the parent :hover active while the cursor
   travels across the 16px gap to the sub-menu. */
.site-nav__menu>.menu-item-has-children::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 20px;
  background: transparent;
  pointer-events: none;
}

.site-nav__menu>.menu-item-has-children:hover::after,
.site-nav__menu>.menu-item-has-children:focus-within::after {
  pointer-events: auto;
}

.site-nav__menu li:hover>.sub-menu,
.site-nav__menu li:focus-within>.sub-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.site-nav__menu .sub-menu li a {
  display: block;
  padding: 0.625rem 0.875rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.site-nav__menu .sub-menu li a::after {
  display: none;
}

.site-nav__menu .sub-menu li:last-child a {
  /* Removed border-bottom so no need to clear it */
}

.site-nav__menu .sub-menu li a:hover {
  background: var(--color-sky);
  color: var(--color-navy);
}

/* Utility cluster: primary CTAs + mobile hamburger.
   Without an explicit flex context the hamburger (display:flex at <=1024px)
   becomes its own block row, which overflows the fixed-height header bar. */
.site-header__utility {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: none;
}

/* Header actions: donate */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.site-header__donate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  height: 42px;
  padding: 0 1.5rem;
  background: var(--color-navy);
  color: var(--color-white);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fluid);
  text-decoration: none;
  line-height: 1;
}

.site-header__donate-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  background: var(--color-gold);
  color: var(--color-white);
}

/* Reading progress bar */
.reading-progress {
  height: 2px;
  background: var(--color-gold);
  width: 0%;
  position: fixed;
  top: var(--header-height);
  left: 0;
  z-index: var(--z-nav);
  transition: width 100ms linear;
}

.site-header.scrolled~.reading-progress {
  top: var(--header-height-scrolled);
}

/* Hamburger toggle */
.site-nav__toggle {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.hamburger-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-navy);
  transition: all var(--transition-base);
}

.site-nav__toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.site-nav__toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}

.site-nav__toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.site-nav__submenu-toggle {
  display: none;
}

/* Mobile-only drawer: hidden by default; revealed at <=1024px in responsive.css */
.mea-mobile-drawer {
  display: none;
}


/* ============================================================
   2. MOBILE NAV (spec 3.3)
   ============================================================ */

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  background: rgba(var(--color-primary-rgb), 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fluid);
  overflow-y: auto;
}

.mobile-nav.is-open {
  opacity: 1;
  pointer-events: all;
}

.mobile-nav__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1.75rem;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.mobile-nav__close:hover {
  color: var(--color-gold);
}

.mobile-nav__search {
  padding: var(--space-xl) var(--space-md) var(--space-md);
}

.mobile-nav__search-input {
  width: 100%;
  font-family: var(--font-base);
  font-size: var(--text-md);
  color: var(--color-white);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: var(--space-sm) 0;
  outline: none;
  border-radius: 0px;
}

.mobile-nav__search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.mobile-nav__menu {
  flex: 1;
  padding: var(--space-md);
  list-style: none;
}

.mobile-nav__menu>li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav__menu>li>a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-base);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--color-white);
  padding: var(--space-md) 0;
  transition: color var(--transition-fast);
}

.mobile-nav__menu>li>a:hover {
  color: var(--color-gold);
}

/* + indicator for dropdown items */
.mobile-nav__menu>li.has-children>a::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-warmgrey);
  transition: transform var(--transition-base);
}

.mobile-nav__menu>li.has-children.is-expanded>a::after {
  transform: rotate(45deg);
}

.mobile-nav__menu .sub-menu {
  list-style: none;
  padding-left: var(--space-md);
  display: none;
}

.mobile-nav__menu .is-expanded>.sub-menu {
  display: block;
}

.mobile-nav__menu .sub-menu li a {
  display: block;
  font-size: var(--text-md);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  padding: var(--space-xs) 0;
  transition: color var(--transition-fast);
}

.mobile-nav__menu .sub-menu li a:hover {
  color: var(--color-gold);
}

.mobile-nav__donate {
  padding: var(--space-md);
  margin-top: auto;
}

.mobile-nav__donate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold);
  background: transparent;
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fluid);
  text-decoration: none;
}

.mobile-nav__donate-btn:hover {
  background: var(--color-gold);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}


/* ============================================================
   4. SITE FOOTER (spec 3.4)
   ============================================================ */

.site-footer {
  background: var(--color-navy);
  color: var(--color-white);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-2xl);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Left column: logo, social, positioning statement */
.site-footer__logo img {
  width: 200px;
  height: auto;
  margin-bottom: var(--space-xl);
  display: block;
}

.site-footer__logo-text {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.site-footer__tagline {
  font-family: var(--font-reading);
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  max-width: 340px;
  margin-bottom: var(--space-md);
}

.site-footer__address {
  font-style: normal;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xl);
  line-height: 1.6;
}

.site-footer__social {
  display: flex;
  gap: var(--space-sm);
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.social-icon:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.social-icon svg {
  width: 12px;
  height: 12px;
}

/* Right column: nav groups.
   auto-fit rather than a fixed 2, because the number of groups is now an
   editor decision: the footer menu's top-level items ARE the columns. A hard
   repeat(2, 1fr) would wrap to a second row the first time someone adds a
   third group, weeks after this code was written and with no obvious cause. */
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-xl);
}

.site-footer__nav-group {
  display: flex;
  flex-direction: column;
}

.site-footer__nav-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-md);
}

.site-footer__nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.site-footer__nav-list li a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--transition-fast);
}

.site-footer__nav-list li a:hover {
  color: var(--color-gold);
}

/* Bottom bar: hairline + copyright */
.site-footer__bottom {
  padding-top: var(--space-md);
}

.site-footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.site-footer__copyright,
.site-footer__credit {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
}


/* ============================================================
   5. HERO SECTIONS
   ============================================================ */

/* ── hero--home: full-bleed bg image ── */
.hero--home {
  position: relative;
  min-height: calc(100vh - 88px);
  max-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-white);
}

.hero--home__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.hero--home__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--color-primary-rgb), 0.5);
  z-index: 1;
}

.hero--home__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 860px;
  padding: var(--space-xl) var(--container-pad);
}

.hero--home__headline {
  font-family: var(--font-base);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-5xl));
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
}

.hero--home__subheadline {
  font-family: var(--font-base);
  font-size: clamp(var(--text-lg), 2.5vw, 1.625rem);
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.5;
  margin-bottom: var(--space-xl);
  opacity: 0.9;
}

.hero--home__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── hero--page: navy bg with optional mandala watermark ── */
.hero--page {
  position: relative;
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-3xl) 0;
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero--page__watermark {
  position: absolute;
  right: -10%;
  top: 50%;
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
  opacity: 0.04;
  pointer-events: none;
}

.hero--page__content {
  position: relative;
  z-index: 1;
  max-width: 820px;
}

.hero--page__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.hero--page__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.hero--page__description {
  font-size: clamp(var(--text-base), 2vw, var(--text-lg));
  color: rgba(255, 255, 255, 0.7);
  max-width: 680px;
  line-height: 1.65;
}

.hero--page__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

/* ── hero--text: white bg text-only ── */
.hero--text {
  background: var(--color-white);
  padding: var(--space-3xl) 0;
  min-height: 480px;
  display: flex;
  align-items: center;
}

.hero--text__content {
  max-width: 820px;
}

.hero--text__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.hero--text__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.hero--text__description {
  font-size: clamp(var(--text-base), 2vw, var(--text-lg));
  color: var(--color-text-muted);
  max-width: 680px;
  line-height: 1.65;
}

/* Legacy hero support */
.hero {
  position: relative;
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-4xl) 0;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
}

.hero__bg-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}

.hero__eyebrow {
  display: block;
  margin-bottom: var(--space-md);
  color: var(--color-gold);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

.hero__headline {
  font-family: var(--font-base);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-white);
  margin-bottom: var(--space-md);
  line-height: 1.1;
}

.hero__subheadline {
  font-size: clamp(var(--text-base), 2vw, var(--text-lg));
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-xl);
  font-weight: 400;
}

.hero__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* Interior page hero */
.page-hero {
  background: var(--color-navy);
  padding: var(--space-2xl) 0;
  color: var(--color-white);
  min-height: 320px;
  display: flex;
  align-items: center;
}

.page-hero__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.page-hero__title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.page-hero__description {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.7);
  max-width: 680px;
  line-height: 1.65;
}


/* ============================================================
   6. PUBLICATION CARD (spec 5.2.1)
   ============================================================ */

.pub-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-warmgrey-40);
  border-radius: var(--radius-md);
  transition: all var(--transition-fluid);
}

.pub-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.pub-card:focus-within {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
}

/* 3:2 thumbnail */
.pub-card__image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-navy-10);
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}

.pub-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
  transition: transform var(--transition-slow);
}

.pub-card:hover .pub-card__image img {
  transform: scale(1.03);
}

.pub-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Content type tag */
.pub-card__type {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-text);
  margin-bottom: var(--space-xs);
}

/* Title: max 3 lines with ellipsis */
.pub-card__title {
  font-family: var(--font-base);
  font-size: clamp(1.25rem, 2vw, 1.375rem);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.3;
  margin-bottom: var(--space-xs);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pub-card__title a {
  color: inherit;
  transition: color var(--transition-fast);
}

.pub-card:hover .pub-card__title a {
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-underline-offset: 3px;
}

/* Meta description: 2 lines max */
.pub-card__excerpt {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0.8;
}

/* Byline footer */
.pub-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-warmgrey-60);
  padding-top: var(--space-sm);
  margin-top: auto;
}

.pub-card__authors {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.pub-card__date {
  font-size: 0.8125rem;
  /* Warm Grey is a border/hairline colour: as 13px text it is 2.37:1 on white. */
  color: var(--color-text-muted);
}

.pub-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.pub-card__link {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy);
  transition: color var(--transition-fast);
}

.pub-card__link:hover {
  color: var(--color-gold);
}


/* ============================================================
   7. CENTRE CARD (spec 5.2.2)
   ============================================================ */

.centre-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--color-white);
  border: 1px solid rgba(var(--color-neutral-rgb), 0.25);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-fluid), box-shadow var(--transition-fluid), border-color var(--transition-fluid);
}

.centre-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(var(--color-neutral-rgb), 0.15);
}

.centre-card__icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-md);
  color: var(--color-navy);
}

.centre-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.centre-card__name {
  font-family: var(--font-base);
  font-size: clamp(1.375rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
  line-height: 1.25;
}

.centre-card__name a {
  color: inherit;
  transition: color var(--transition-fast);
}

.centre-card__name a:hover {
  color: var(--color-gold);
}

/* Short desc: 3-line max */
.centre-card__description {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  flex: 1;
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.centre-card__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
  align-self: flex-start;
  transition: color var(--transition-fast);
  margin-top: auto;
}

.centre-card__link:hover {
  color: var(--color-gold);
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-underline-offset: 3px;
}

/* Navy-band variant */
.centre-card--navy {
  background: var(--color-navy);
  border-color: rgba(255, 255, 255, 0.12);
}

.centre-card--navy .centre-card__icon {
  color: var(--color-white);
}

.centre-card--navy .centre-card__name {
  color: var(--color-white);
}

.centre-card--navy .centre-card__description {
  color: rgba(255, 255, 255, 0.65);
}

.centre-card--navy .centre-card__link {
  color: var(--color-white);
}

.centre-card--navy .centre-card__link:hover {
  color: var(--color-gold);
}

/* White directory variant: hairlines between rows only */
.centre-card--directory {
  background: var(--color-white);
  border: none;
  border-bottom: 1px solid var(--color-warmgrey-60);
  padding: var(--space-md) 0;
  border-radius: 0px;
}

.centre-card--directory:last-child {
  border-bottom: none;
}


/* ============================================================
   8. EXPERT CARD (spec 5.2.3)
   ============================================================ */

.expert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-md);
  transition: all var(--transition-fluid);
  border: 1px solid transparent;
}

.expert-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-warmgrey-40);
}

.expert-card__photo-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-navy-10);
  margin-bottom: var(--space-md);
  flex-shrink: 0;
}

.expert-card__photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover tint overlay on photo */
.expert-card__photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--color-primary-rgb), 0.08);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 150ms ease;
}

.expert-card:hover .expert-card__photo-wrap::after {
  opacity: 1;
}

.expert-card__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy-10);
  color: var(--color-warmgrey);
  font-size: var(--text-2xl);
  font-weight: 300;
}

.expert-card__name {
  font-family: var(--font-base);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.25rem;
}

.expert-card__name a {
  color: inherit;
  transition: color var(--transition-fast);
}

.expert-card__name a:hover {
  color: var(--color-gold);
}

/* Role: 2 lines max */
.expert-card__position {
  font-size: var(--text-sm);
  color: var(--color-warmgrey);
  margin-bottom: var(--space-sm);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
}

/* Social icons */
.expert-card__social {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
}

.expert-card__social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--color-warmgrey);
  transition: color var(--transition-fast);
}

.expert-card__social-icon:hover {
  color: var(--color-navy);
}

.expert-card__social-icon svg {
  width: 18px;
  height: 18px;
}

.expert-card__bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.expert-card__link {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 2px;
  transition: color var(--transition-fast);
  margin-top: auto;
}

.expert-card__link:hover {
  color: var(--color-gold);
}


/* ============================================================
   9. EVENT CARD (spec 5.2.4)
   ============================================================ */

.event-card {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-warmgrey-60);
  border-radius: 0px;
}

.event-card:last-child {
  border-bottom: none;
}

.event-card__image {
  width: 240px;
  flex-shrink: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-navy-10);
  border-radius: 0px;
}

.event-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0px;
}

.event-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.event-card__type {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.event-card__title {
  font-family: var(--font-base);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.3;
}

.event-card__title a {
  color: inherit;
  transition: color var(--transition-fast);
}

.event-card__title a:hover {
  color: var(--color-gold);
}

.event-card__date {
  font-size: 0.9375rem;
  color: var(--color-navy);
}

.event-card__location {
  font-size: var(--text-sm);
  color: var(--color-warmgrey);
}

.event-card__action {
  margin-top: auto;
}

.event-card__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
  transition: color var(--transition-fast);
}

.event-card__link:hover {
  color: var(--color-gold);
}

/* Past events */
.event-card--past .event-card__type {
  color: var(--color-warmgrey);
}

.event-card__pip {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-warmgrey);
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--color-warmgrey-40);
  border-radius: 0px;
}


/* ============================================================
   11. EDITORIAL QUOTE BLOCK (spec 5.2.7)
   ============================================================ */

.editorial-quote {
  padding: var(--space-xl) 0;
}

.editorial-quote__inner {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.editorial-quote__rule {
  width: 3px;
  min-height: 48px;
  background: var(--color-gold);
  flex-shrink: 0;
  align-self: stretch;
}

.editorial-quote__text {
  font-family: var(--font-feature);
  font-size: clamp(2rem, 3vw, 2.5rem);
  color: var(--color-navy);
  line-height: 1.35;
}

.editorial-quote__attribution {
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: var(--space-md);
}

/* Pull quote variant (inline) */
.pull-quote {
  font-family: var(--font-feature);
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-xl));
  font-style: italic;
  color: var(--color-navy);
  line-height: 1.45;
  border-left: 3px solid var(--color-gold);
  padding-left: var(--space-lg);
}


/* ============================================================
   12. SPLIT-LAYOUT EDITORIAL (spec 5.2.8)
   ============================================================ */

.split-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
}

.split-editorial--reverse {
  direction: rtl;
}

.split-editorial--reverse>* {
  direction: ltr;
}

.split-editorial__image {
  position: relative;
  overflow: hidden;
  border-radius: 0px;
}

.split-editorial__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0px;
}

/* Image overlaps adjacent column */
.split-editorial__image--overlap {
  margin-right: -40px;
  position: relative;
  z-index: 1;
}

.split-editorial--reverse .split-editorial__image--overlap {
  margin-right: 0;
  margin-left: -40px;
}

.split-editorial__content {
  padding: var(--space-xl);
}

.split-editorial__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.split-editorial__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
  line-height: 1.25;
}

.split-editorial__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}


/* ============================================================
   13. METRICS BAND (spec 5.2.9)
   ============================================================ */

.metrics-band {
  padding: var(--space-xl) 0;
}

.metrics-band__grid {
  display: flex;
  justify-content: center;
}

.metrics-band__item {
  flex: 1;
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  position: relative;
}

/* 1px vertical hairline between stats */
.metrics-band__item+.metrics-band__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--color-warmgrey-60);
}

.metrics-band__number {
  font-family: var(--font-base);
  font-size: clamp(3.5rem, 5vw, 4.5rem);
  font-weight: 600;
  color: var(--color-gold);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xs);
}

.metrics-band__number--navy {
  color: var(--color-navy);
}

.metrics-band__label {
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Impact stats (legacy) */
.impact-stats {
  padding: var(--space-xl) 0;
}

.stats-grid {
  display: flex;
  justify-content: center;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  position: relative;
}

.stat-item+.stat-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: rgba(255, 255, 255, 0.15);
}

.stat-number {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
  font-weight: 600;
  color: var(--color-gold);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.stat-label {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}


/* ============================================================
   14. MISSION/VISION DUO (spec 5.2.10)
   ============================================================ */

.mission-vision {
  padding: var(--space-3xl) 0;
  background: var(--color-navy);
  color: var(--color-white);
}

.mission-vision__inner {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.mission-vision__divider {
  background: rgba(255, 255, 255, 0.3);
  align-self: stretch;
}

.mission-vision__block {
  padding: var(--space-md);
}

.mission-vision__kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-md);
}

.mission-vision__block h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.mission-vision__block p {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}


/* ============================================================
   15. FOUR-GRID VALUE BAND (spec 5.2.11)
   ============================================================ */

.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.value-grid__item {
  padding: var(--space-xl);
  position: relative;
}

/* Vertical hairlines between items */
.value-grid__item+.value-grid__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-md);
  bottom: var(--space-md);
  width: 1px;
  background: var(--color-warmgrey-60);
}

.value-grid__meta {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.value-grid__title {
  font-family: var(--font-base);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.value-grid__body {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* Brand pillars (legacy/alias) */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: var(--space-xl);
}

.pillar-card {
  padding: var(--space-lg);
  position: relative;
}

.pillar-card+.pillar-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-md);
  bottom: var(--space-md);
  width: 1px;
  background: var(--color-warmgrey-60);
}

.pillar-card__number {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.pillar-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.pillar-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}


/* ============================================================
   16. SUPPORT/DONATE BAND (spec 5.2.12)
   ============================================================ */

.support-band {
  padding: var(--space-3xl) 0;
  text-align: center;
}

.support-band--green {
  background: var(--color-green);
  color: var(--color-white);
}

.support-band--navy {
  background: var(--color-navy);
  color: var(--color-white);
}

.support-band--white {
  background: var(--color-white);
  color: var(--color-navy);
}

.support-band__headline {
  font-family: var(--font-base);
  font-size: clamp(var(--text-2xl), 3.5vw, 2.75rem);
  font-weight: 600;
  margin-bottom: var(--space-md);
  line-height: 1.2;
}

.support-band--green .support-band__headline,
.support-band--navy .support-band__headline {
  color: var(--color-white);
}

.support-band__body {
  font-size: var(--text-md);
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  line-height: 1.7;
}

.support-band--green .support-band__body,
.support-band--navy .support-band__body {
  color: rgba(255, 255, 255, 0.7);
}

.support-band__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* Legacy support banner */
.support-banner {
  background: var(--color-green);
  padding: var(--space-3xl) 0;
}

.support-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}

.support-banner__text {
  flex: 1;
}

.support-banner__headline {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.support-banner__copy {
  color: rgba(255, 255, 255, 0.72);
  max-width: 560px;
  line-height: 1.75;
  font-size: var(--text-base);
}

.support-banner__actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}


/* ============================================================
   17. NEWSLETTER/JOIN BAND (spec 5.2.13)
   ============================================================ */

.newsletter-band {
  padding: var(--space-3xl) 0;
  background: var(--color-sand-bg);
}

.newsletter-band__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-xl);
  align-items: center;
}

.newsletter-band__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
  line-height: 1.25;
}

.newsletter-band__copy {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.newsletter-band__form {
  display: flex;
  gap: 0;
}

.newsletter-band__input {
  flex: 1;
  height: 48px;
  padding: 0 var(--space-sm);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-warmgrey-60);
  border-right: none;
  border-radius: 0px;
  outline: none;
  transition: border-color var(--transition-fast);
  min-width: 0;
}

.newsletter-band__input:focus {
  border-color: var(--color-navy);
}

.newsletter-band__input::placeholder {
  color: var(--color-warmgrey);
}

.newsletter-band__btn {
  height: 48px;
  padding: 0 1.75rem;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-navy);
  color: var(--color-white);
  border: 1px solid var(--color-navy);
  border-radius: 0px;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
  white-space: nowrap;
  line-height: 1;
}

.newsletter-band__btn:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

/* Legacy newsletter signup */
.newsletter-signup {
  padding: var(--space-3xl) 0;
  background: var(--color-sand-bg);
  border-top: var(--hairline);
}

.newsletter-signup__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-xl);
  align-items: center;
}

.newsletter-signup__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.newsletter-signup__title {
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-xl));
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.newsletter-signup__form {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-sm);
}

.newsletter-signup__input {
  flex: 1;
  height: 48px;
  padding: 0 1.25rem;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-warmgrey-60);
  border-right: none;
  border-radius: 0px;
  outline: none;
  transition: border-color var(--transition-fast);
  min-width: 0;
}

.newsletter-signup__input:focus {
  border-color: var(--color-navy);
}

.newsletter-signup__input::placeholder {
  color: var(--color-warmgrey);
}

.newsletter-signup__btn {
  height: 48px;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 1.75rem;
  border: 1px solid var(--color-navy);
  border-radius: 0px;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base);
  white-space: nowrap;
  line-height: 1;
}

.newsletter-signup__btn:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.newsletter-signup__privacy {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.newsletter-signup__privacy a {
  color: var(--color-navy);
  border-bottom: 1px solid currentColor;
}

.newsletter-signup__privacy a:hover {
  color: var(--color-gold);
}

/* Newsletter + contact form feedback messages */
.newsletter-feedback,
.contact-form__feedback p {
  font-size: var(--text-sm);
  line-height: 1.6;
  padding: 0.75rem 1rem;
  border-radius: 2px;
}

.newsletter-feedback {
  margin-top: var(--space-sm);
}

.newsletter-feedback--success,
.contact-form__feedback--success {
  color: var(--color-feedback-success-fg);
  background: var(--color-feedback-success-bg);
  border-left: 3px solid var(--color-feedback-success);
}

.newsletter-feedback--error,
.contact-form__feedback--error {
  color: var(--color-feedback-error-fg);
  background: var(--color-feedback-error-bg);
  border-left: 3px solid var(--color-feedback-error);
}

/* CTA dialog: the newsletter pop-up that follows a download (inc/cta-dialog.php). A native <dialog>: top
   layer, focus trap, Escape and ::backdrop come with it. The global reset zeroes every margin, which would
   pin it to the top-left corner, so `margin: auto` is restated. No padding on the dialog itself: the script
   treats a click whose target is the dialog as a click on the backdrop, so the padding lives on __inner. */
.cta-dialog {
  margin: auto;
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0; overflow: auto;
  border: var(--hairline); border-radius: var(--radius-md);
  background: var(--color-white); color: var(--color-navy);
  box-shadow: var(--shadow-lg);
}
.cta-dialog::backdrop { background: rgba(var(--color-primary-rgb), 0.55); }
@media (prefers-reduced-motion: no-preference) {
  .cta-dialog[open] { animation: cta-dialog-in 0.18s ease-out; }
  .cta-dialog[open]::backdrop { animation: cta-dialog-fade 0.18s ease-out; }
}
@keyframes cta-dialog-in { from { opacity: 0; transform: translateY(0.5rem); } }
@keyframes cta-dialog-fade { from { opacity: 0; } }

.cta-dialog__inner { position: relative; display: grid; gap: var(--space-sm); padding: var(--space-md); }
.cta-dialog__close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 2.25rem; height: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--hairline); border-radius: 50%;
  background: var(--color-white); color: var(--color-navy);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.cta-dialog__close:hover,
.cta-dialog__close:focus-visible { background: var(--color-navy); color: var(--color-white); }

.cta-dialog__title {
  margin: 0 2.75rem 0 0;
  font-family: var(--font-feature);
  font-size: var(--text-xl); line-height: 1.15; font-weight: 400;
  color: var(--color-navy);
}
.cta-dialog__title:focus { outline: none; } /* focused by the script for screen readers, not a control */
.cta-dialog__text,
.cta-dialog__lead { margin: 0; font-size: var(--text-sm); line-height: 1.6; }
.cta-dialog__text { color: var(--color-navy); font-weight: 600; }
.cta-dialog__lead { color: var(--color-text-muted); }

.cta-dialog__form { display: grid; gap: var(--space-xs); padding-top: var(--space-sm); border-top: var(--hairline); }
.cta-dialog__field { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.cta-dialog__field .inquiry-form__input { flex: 1 1 14rem; min-width: 0; }
.cta-dialog__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* The answer is a .newsletter-feedback (colours and border come from there). Two classes, because the
   later `.newsletter-feedback { margin-top }` would win over one; empty = nothing to announce yet. */
.cta-dialog .cta-dialog__status { margin: 0; }
.cta-dialog__status:empty { display: none; }
.cta-dialog__privacy { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); }
.cta-dialog__privacy a { color: inherit; text-decoration: underline; }
.cta-dialog__actions { display: flex; justify-content: flex-end; }

.contact-form__feedback {
  margin-bottom: var(--space-lg);
}

.contact-form__feedback a {
  color: inherit;
  text-decoration: underline;
}


/* ============================================================
   18. INQUIRY FORM (spec 5.2.14)
   ============================================================ */

.inquiry-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.inquiry-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.inquiry-form__label {
  font-family: var(--font-base);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy);
}

.inquiry-form__label .required {
  color: var(--color-gold);
}

.inquiry-form__input,
.inquiry-form__textarea,
.inquiry-form__select {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-sm);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-warmgrey-60);
  border-radius: 0px;
  outline: none;
  transition: border-color var(--transition-fast);
}

.inquiry-form__textarea {
  height: 160px;
  padding: var(--space-sm);
  resize: vertical;
}

.inquiry-form__input:focus,
.inquiry-form__textarea:focus,
.inquiry-form__select:focus {
  border-color: var(--color-navy);
}

.inquiry-form__input::placeholder,
.inquiry-form__textarea::placeholder {
  color: var(--color-warmgrey);
}

.inquiry-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 2rem;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-navy);
  color: var(--color-white);
  border: 2px solid var(--color-navy);
  border-radius: 0px;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
  align-self: flex-start;
}

.inquiry-form__submit:hover {
  background: transparent;
  color: var(--color-navy);
}


/* ============================================================
   19. FILTERS (spec 5.2.15)
   ============================================================ */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  align-items: center;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 36px;
  padding: 0 var(--space-sm);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-navy);
  background: transparent;
  border: 1px solid var(--color-warmgrey-60);
  border-radius: 0px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.filter-chip:hover {
  border-color: var(--color-navy);
}

.filter-chip.is-active {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}

.filter-chip__remove {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
}

.filter-chip__remove:hover {
  opacity: 1;
}

.filter-search {
  height: 48px;
  padding: 0 var(--space-sm);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-warmgrey-60);
  border-radius: 0px;
  outline: none;
  min-width: 240px;
  transition: border-color var(--transition-fast);
}

.filter-search:focus {
  border-color: var(--color-navy);
}

.filter-search::placeholder {
  color: var(--color-warmgrey);
}


/* ============================================================
   20. HOMEPAGE SECTIONS
   ============================================================ */

/* Module 1: Positioning block (quote + text) */
.positioning-block {
  padding: var(--space-3xl) 0;
  border-bottom: var(--hairline);
}

.positioning-block__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.positioning-block__text p {
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

/* Module 2: Featured research */
.featured-research {
  padding: var(--space-3xl) 0;
}

.research-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* Module 4: Policy centres — text-based layout (no cards) */
.centres-text {
  background: var(--color-navy);
  padding: 64px 0 72px;
}

.centres-text__inner {
  display: grid;
  grid-template-columns: 35fr 1px 65fr;
  gap: var(--space-2xl);
  align-items: start;
}

.centres-text__intro {
  max-width: 380px;
}

.centres-text__heading {
  font-family: var(--font-base);
  font-size: clamp(var(--text-xl), 3vw, 2.75rem);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}

.centres-text__body {
  font-family: var(--font-base);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 40px;
}

.centres-text__link {
  display: inline-block;
  font-family: var(--font-base);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--transition-fast);
}

.centres-text__link:hover {
  color: var(--color-gold);
}

/* Vertical divider */
.centres-text__divider {
  background: rgba(255, 255, 255, 0.2);
  width: 1px;
  align-self: stretch;
}

/* Two-column centre links */
.centres-text__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.centres-text__col {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.centres-text__col li a {
  font-family: var(--font-base);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--color-white);
  text-decoration: underline;
  text-decoration-color: var(--color-white);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--transition-fast);
  line-height: 1.4;
}

.centres-text__col li a:hover {
  color: var(--color-white);
  text-decoration-color: var(--color-gold);
}


/* Module 5: Events — white bg, 50/50 split */
.hp-events {
  background: var(--color-white);
  padding: 96px 0 128px;
}

.hp-events__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.hp-events__kicker {
  display: block;
  font-family: var(--font-base);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 12px;
}

.hp-events__heading {
  font-family: var(--font-base);
  font-size: clamp(var(--text-xl), 3vw, 2.75rem);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.hp-events__body {
  font-family: var(--font-base);
  font-size: var(--text-base);
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.6;
  max-width: 420px;
  margin-bottom: 32px;
}

.hp-events__image-slot {
  width: 100%;
  height: 280px;
  overflow: hidden;
  margin-bottom: 24px;
}

.hp-events__image-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hp-events__see-all {
  display: inline-block;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--transition-fast);
}

.hp-events__see-all:hover {
  color: var(--color-gold);
}

/* Events list items */
.hp-events__list {
  display: flex;
  flex-direction: column;
}

.hp-events__item {
  display: flex;
  gap: 24px;
  padding: var(--space-lg) 0;
  border-top: var(--hairline);
}

.hp-events__item:last-child {
  border-bottom: var(--hairline);
}

.hp-events__date {
  flex-shrink: 0;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hp-events__day {
  font-family: var(--font-base);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1;
}

.hp-events__month {
  font-family: var(--font-base);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-warmgrey);
  margin-top: 4px;
}

.hp-events__title {
  font-family: var(--font-base);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.35;
}

.hp-events__title a {
  color: inherit;
  transition: color var(--transition-fast);
}

.hp-events__title a:hover {
  color: var(--color-gold);
}

.hp-events__location {
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: rgba(0, 0, 0, 0.6);
  margin-top: 4px;
}


/* Module 6: Axis and Arch — warm grey bg, 40/60 split */
.hp-media {
  background: var(--color-sand-bg);
  padding: 96px 0 128px;
}

.hp-media__inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 64px;
  align-items: start;
}

.hp-media__kicker {
  display: block;
  font-family: var(--font-base);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 12px;
}

.hp-media__heading {
  font-family: var(--font-base);
  font-size: clamp(var(--text-xl), 3vw, 2.75rem);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.hp-media__body {
  font-family: var(--font-base);
  font-size: var(--text-base);
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.6;
  max-width: 400px;
  margin-bottom: 32px;
}

/* Cover image slot */
.hp-media__cover {
  width: 100%;
  height: 240px;
  overflow: hidden;
  margin-bottom: 24px;
}

.hp-media__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hp-media__cover-fallback {
  width: 100%;
  height: 100%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-media__cover-fallback span {
  font-family: var(--font-base);
  font-size: 3rem;
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: -0.02em;
}

/* Platform icons */
.hp-media__platforms {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.hp-media__platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  transition: color var(--transition-fast);
}

.hp-media__platform-icon:hover {
  color: var(--color-gold);
}

.hp-media__listen-link {
  display: inline-block;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--transition-fast);
}

.hp-media__listen-link:hover {
  color: var(--color-gold);
}

/* Episode cards */
.hp-media__episodes {
  display: flex;
  flex-direction: column;
}

.hp-media__episode {
  display: flex;
  gap: 20px;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: background var(--transition-fast);
  cursor: pointer;
}

.hp-media__episode:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.hp-media__episode-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  overflow: hidden;
  background: var(--color-navy-10);
}

.hp-media__episode-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hp-media__episode-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.hp-media__episode-label {
  font-family: var(--font-base);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 4px;
}

.hp-media__episode-title {
  font-family: var(--font-base);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.35;
  transition: color var(--transition-fast);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hp-media__episode:hover .hp-media__episode-title {
  color: var(--color-gold);
}

.hp-media__episode-date {
  font-family: var(--font-base);
  font-size: 0.8125rem;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 8px;
}

.hp-media__episodes-footer {
  text-align: right;
  margin-top: var(--space-lg);
}

.hp-media__see-all {
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--transition-fast);
}

.hp-media__see-all:hover {
  color: var(--color-gold);
}


/* Positioning block: image fallback */
.positioning-block__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.positioning-block__photo-fallback {
  width: 100%;
  height: 100%;
  min-height: 380px;
  background: var(--color-sand-bg);
}

/* Publication card: Navy fill fallback for missing images */
.pub-card__image-fallback {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--color-navy-dark);
}

/* Module 5b: Watch & Listen (media spotlight) */
.media-spotlight {
  padding: var(--space-3xl) 0;
}

.media-spotlight__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.media-spotlight__heading {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-white);
}

.media-spotlight__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.media-spotlight__type {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.media-spotlight__embed {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  margin-bottom: var(--space-md);
  border-radius: 0px;
}

.media-spotlight__embed iframe {
  width: 100%;
  display: block;
  border: none;
}

.media-spotlight__embed .wp-block-embed__wrapper,
.media-spotlight__embed figure {
  margin: 0;
}

.media-spotlight__embed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: var(--space-md);
  color: rgba(255, 255, 255, 0.5);
  border-radius: 0px;
  transition: background var(--transition-base);
}

.media-spotlight__embed-placeholder:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-gold);
}

.media-spotlight__play-icon {
  font-size: 2rem;
  line-height: 1;
}

.media-spotlight__play-label {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.media-spotlight__title {
  font-size: clamp(var(--text-base), 1.8vw, var(--text-xl));
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.35;
  margin-bottom: 0.5rem;
}

.media-spotlight__desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.media-spotlight__byline {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
}

.media-spotlight__sidebar {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.media-spotlight__item {
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.media-spotlight__item-type {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.35rem;
}

.media-spotlight__item-title {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-white);
}

.media-spotlight__item-title a {
  color: inherit;
  transition: color var(--transition-fast);
}

.media-spotlight__item-title a:hover {
  color: var(--color-gold);
}

.media-spotlight__item-source {
  display: block;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.3);
  margin-top: 0.35rem;
}

.media-spotlight__see-all {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.media-spotlight__see-all:hover {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

/* Module 5c: Regional Spotlight */
.regional-spotlight {
  padding: var(--space-xl) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.regional-spotlight__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.regional-spotlight__label {
  color: var(--color-gold);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.regional-spotlight__regions {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex: 1;
  justify-content: center;
}

.regional-spotlight__region {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.regional-spotlight__region-name {
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--color-white);
  letter-spacing: -0.01em;
}

.regional-spotlight__region-desc {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
}

.regional-spotlight__divider {
  font-size: var(--text-2xl);
  color: var(--color-gold);
  font-weight: 200;
  line-height: 1;
}

/* Module 5d: Events Preview */
.events-preview {
  padding: var(--space-3xl) 0;
}

.events-preview__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.events-preview__item {
  border-top: 3px solid var(--color-gold);
  padding-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.events-preview__date {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.events-preview__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.4;
}

.events-preview__title a {
  color: inherit;
}

.events-preview__title a:hover {
  color: var(--color-gold);
}

.events-preview__location {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: auto;
}

.events-preview__register {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 1px;
  align-self: flex-start;
  transition: color var(--transition-fast);
}

.events-preview__register:hover {
  color: var(--color-gold);
}


/* ============================================================
   21. RESEARCH ARCHIVE
   ============================================================ */

.research-page {
  padding: 0 0 var(--space-3xl);
}

.research-page>.container {
  padding-top: var(--space-xl);
}

/* Sticky filter bar */
.research-filter-bar {
  position: sticky;
  top: var(--header-height);
  z-index: var(--z-overlay);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-warmgrey-40);
  box-shadow: var(--shadow-sm);
  transition: top var(--transition-base);
}

.research-filter-bar__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

.research-filter-bar__chips {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--container-pad) * -1);
  padding: 0 var(--container-pad);
}

.research-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-md);
  font-family: var(--font-base);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-warmgrey-40);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.research-filter-toggle {
  display: none;
}

.research-filter-panel {
  width: 100%;
}

.research-chip:hover {
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.research-chip.is-active {
  color: var(--color-white);
  background: var(--color-navy);
  border-color: var(--color-navy);
}

.research-filter-bar__row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: space-between;
}

.research-filter-bar__selects {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.research-select {
  position: relative;
  display: inline-flex;
  flex: 1 1 160px;
  max-width: 220px;
  min-width: 140px;
}

.research-select::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--color-navy);
  border-bottom: 1.5px solid var(--color-navy);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.research-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 40px;
  padding: 0 36px 0 14px;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-warmgrey-40);
  border-radius: 0;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.research-select select:hover {
  border-color: var(--color-navy);
}

.research-select select:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(var(--color-indigo-rgb), 0.14);
}

.research-search-form {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  width: 100%;
  max-width: 320px;
}

.research-search-form input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-warmgrey-40);
  border-right: none;
  border-radius: 0;
  outline: none;
  transition: border-color var(--transition-fast);
}

.research-search-form input[type="search"]:focus {
  border-color: var(--color-navy);
}

.research-search-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  background: var(--color-navy);
  color: var(--color-white);
  border: 1px solid var(--color-navy);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.research-search-form button:hover {
  background: #000;
}

.research-active-filters {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.research-active-filters__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-right: var(--space-xs);
}

.research-active-filters__tag {
  font-size: var(--text-xs);
}

.research-active-filters__clear {
  font-size: var(--text-xs);
  margin-left: var(--space-sm);
}

.research-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.research-filters {
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
  background: var(--color-white);
  border: 1px solid var(--color-warmgrey-40);
  padding: var(--space-lg);
  border-radius: 0px;
}

.research-filters__title {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: var(--hairline);
}

.filter-group {
  margin-bottom: var(--space-lg);
}

.filter-group__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  display: block;
}

.filter-group__options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}

.filter-option input[type="checkbox"] {
  accent-color: var(--color-navy);
}

.research-results {
  min-height: 400px;
}

.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: var(--hairline);
}

.results-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.results-sort {
  font-size: var(--text-sm);
  color: var(--color-navy);
  border: 1px solid var(--color-warmgrey-40);
  padding: 0.375rem 0.75rem;
  background: var(--color-white);
  border-radius: 0px;
  cursor: pointer;
}

.research-results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.no-results {
  padding: var(--space-xl);
  text-align: center;
  color: var(--color-text-muted);
  border: 1px solid var(--color-warmgrey-40);
  border-radius: 0px;
}


/* ============================================================
   22. POLICY CENTRES LANDING
   ============================================================ */

/* ── Intro paragraph band ── */
.pc-intro {
  padding: 96px 0;
}

.pc-intro__text {
  font-family: var(--font-base);
  font-size: var(--text-md);
  color: var(--color-navy);
  line-height: 1.85;
}

/* ── Directory grid ── */
.pc-directory {
  padding: 0 0 96px;
}

.pc-directory__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 48px;
}

/* ── Image-led policy centre card ── */
.pc-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.pc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Image slot: 16:9, overflow hidden for hover scale */
.pc-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-navy-dark);
  flex-shrink: 0;
}

.pc-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease-out;
}

.pc-card:hover .pc-card__image img {
  transform: scale(1.03);
}

/* Navy fallback when no image uploaded */
.pc-card__image-fallback {
  width: 100%;
  height: 100%;
  background: var(--color-navy-dark);
}

/* Text content below image */
.pc-card__body {
  display: flex;
  flex-direction: column;
  padding: 20px 24px 24px;
  flex: 1;
}

.pc-card__name {
  font-family: var(--font-base);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.25;
  margin-bottom: 10px;
  transition: color 150ms ease;
}

.pc-card:hover .pc-card__name {
  color: var(--color-gold);
}

.pc-card__desc {
  font-family: var(--font-base);
  font-size: 0.9375rem;
  color: rgba(0, 0, 0, 0.75);
  line-height: 1.5;
  margin-bottom: 16px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pc-card__link {
  font-family: var(--font-base);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-top: auto;
  transition: color 150ms ease;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  padding-bottom: 2px;
}

.pc-card:hover .pc-card__link {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

/* ── Hero tall variant for policy centres ── */
.page-hero--tall {
  min-height: 480px;
  display: flex;
  align-items: center;
}

.regional-programmes {
  padding: var(--space-3xl) 0;
  background: var(--color-sand-bg);
}

.regional-programmes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.regional-card {
  padding: var(--space-xl);
  background: var(--color-white);
  border: 1px solid var(--color-warmgrey-40);
  border-radius: 0px;
}

.regional-card__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.regional-card__description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}


/* ============================================================
   23. SINGLE POLICY CENTRE
   ============================================================ */

.centre-detail {
  padding: var(--space-3xl) 0;
}

.centre-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-xl);
  align-items: start;
}

.centre-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.centre-sidebar__box {
  padding: var(--space-lg);
  border: 1px solid var(--color-warmgrey-40);
  background: var(--color-white);
  border-radius: 0px;
}

.centre-sidebar__box-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: var(--hairline);
}

.focus-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.focus-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}

.focus-list li::before {
  content: '\2014';
  color: var(--color-gold);
  flex-shrink: 0;
  margin-top: 0.05em;
}

/* Director mini-profile */
.sidebar-expert-mini {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sidebar-expert-mini__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-navy-10);
  flex-shrink: 0;
}

.sidebar-expert-mini__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-expert-mini__name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-navy);
}

.sidebar-expert-mini__role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Expert list in centre sidebar */
.centre-experts-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.centre-expert-item {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0;
  border-bottom: var(--hairline);
}

.centre-expert-item:last-child {
  border-bottom: none;
}

.centre-expert-item__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
  transition: color var(--transition-fast);
}

.centre-expert-item__name:hover {
  color: var(--color-gold);
}

.centre-expert-item__role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}

.centre-related-pubs {
  padding: var(--space-3xl) 0;
  background: var(--color-sand-bg);
}


/* ============================================================
   24. ABOUT PAGE
   ============================================================ */

.about-page {
  padding: var(--space-3xl) 0;
}

/* About people section */
.about-people {
  padding: var(--space-3xl) 0;
  background: var(--color-navy);
  color: var(--color-white);
}

.about-people__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

@media (min-width: 768px) {
  .about-people__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.about-people__card {
  padding: var(--space-xl);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.about-people__card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-white);
}

.about-people__card-desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  flex: 1;
}

/* Brand pillars section */
.brand-pillars {
  padding: var(--space-3xl) 0;
}


/* ============================================================
   25. OUR TEAM PAGE
   ============================================================ */

.team-page {
  padding: var(--space-3xl) 0;
}

/* Sticky department anchor bar (Our Team) */
.dept-anchor-bar {
  position: sticky;
  top: var(--header-height);
  z-index: var(--z-overlay);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-warmgrey-40);
  box-shadow: var(--shadow-sm);
  transition: top var(--transition-base);
}

.dept-anchor-bar__inner {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.dept-anchor-bar__link {
  flex-shrink: 0;
  position: relative;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-md) var(--space-md);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.dept-anchor-bar__link::after {
  content: '';
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: 0;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease;
}

.dept-anchor-bar__link:hover {
  color: var(--color-navy);
}

.dept-anchor-bar__link:hover::after,
.dept-anchor-bar__link.is-active::after {
  transform: scaleX(1);
}

.dept-anchor-bar__link.is-active {
  color: var(--color-navy);
}

/* Anchor navigation for department sections */
.team-anchor-nav {
  display: flex;
  gap: var(--space-md);
  border-bottom: 2px solid var(--color-warmgrey-40);
  margin-bottom: var(--space-xl);
  overflow-x: auto;
  padding-bottom: 0;
}

.team-anchor-nav__link {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.75rem 0.5rem;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.team-anchor-nav__link:hover {
  color: var(--color-navy);
}

.team-anchor-nav__link.is-active {
  color: var(--color-navy);
  border-bottom-color: var(--color-gold);
}

/* Department section */
.team-department {
  margin-bottom: var(--space-xl);
}

.team-department__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: var(--hairline);
}

.team-department__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 576px) {
  .team-department__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .team-department__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* See more/less toggle */
.team-department__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
  background: none;
  border: none;
  cursor: pointer;
  margin-top: var(--space-md);
  padding: 0;
  transition: color var(--transition-fast);
}

.team-department__toggle:hover {
  color: var(--color-gold);
}

/* Leadership page */
.leadership-page {
  padding: var(--space-3xl) 0;
}

.leadership-listing {
  display: flex;
  flex-direction: column;
}

.leadership-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
  border-bottom: var(--hairline);
  text-decoration: none;
  color: inherit;
}

@media (min-width: 768px) {
  .leadership-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: start;
  }
}

.leadership-card__photo-wrap {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-navy-10);
  border-radius: var(--radius-md);
}

.leadership-card__photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.leadership-card__body {
  padding-top: var(--space-sm);
}

.leadership-card__name {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.25rem;
}

.leadership-card__position {
  font-size: var(--text-base);
  color: var(--color-gold);
  margin-bottom: var(--space-md);
  font-weight: 500;
}

.leadership-card__bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 640px;
}

/* Expert tabs and filters */
.experts-page {
  padding: var(--space-3xl) 0;
}

.expert-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-warmgrey-40);
  margin-bottom: var(--space-xl);
  overflow-x: auto;
}

.expert-tab {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  color: var(--color-text-muted);
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.expert-tab:hover {
  color: var(--color-navy);
}

.expert-tab.active {
  color: var(--color-navy);
  border-bottom-color: var(--color-gold);
}

.expert-filters {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.expert-filter-select {
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-navy);
  border: 1px solid var(--color-warmgrey-40);
  padding: 0.5rem 1rem;
  background: var(--color-white);
  border-radius: 0px;
  cursor: pointer;
  min-width: 180px;
}

.experts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 576px) {
  .experts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .experts-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.expert-card[style*="display: none"] {
  display: none !important;
}


/* ============================================================
   26. SINGLE EXPERT PROFILE
   ============================================================ */

.expert-profile__header {
  background: var(--color-navy);
  padding: var(--space-3xl) 0;
  color: var(--color-white);
}

.expert-profile__header-inner {
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
}

.expert-profile__photo-wrap {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-navy-20);
  flex-shrink: 0;
}

.expert-profile__photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.expert-profile__info {
  flex: 1;
  padding-top: var(--space-sm);
}

.expert-profile__name {
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 0.375rem;
  letter-spacing: -0.02em;
}

.expert-profile__position {
  font-size: var(--text-md);
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.expert-profile__centre {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-lg);
}

.expert-profile__centre a {
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.expert-profile__social {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.expert-profile__social a {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0px;
  padding: 0.5rem 1rem;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.expert-profile__social a:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.expert-profile__body {
  padding: var(--space-3xl) 0;
}

.expert-profile__layout {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .expert-profile__layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    align-items: start;
  }
}

.expert-profile__bio-section h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-lg);
}

.expert-profile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.expert-profile__sidebar-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  display: block;
}

.expert-pubs {
  padding: var(--space-3xl) 0;
  background: var(--color-sand-bg);
}


/* ============================================================
   27. EVENTS & MEDIA PAGE
   ============================================================ */

.events-media-split__grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--space-3xl);
  align-items: start;
}

.media-section-block {
  padding: var(--space-3xl) 0;
}

.media-section-block--alt {
  background: var(--color-sand-bg);
}

/* oEmbed responsive wrapper */
.media-embed-wrap {
  position: relative;
  width: 100%;
  background: var(--color-navy-10);
  border-radius: 0px;
}

.media-embed-wrap iframe,
.media-embed-wrap .wp-block-embed__wrapper iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
}

.media-embed-wrap .wp-block-embed__wrapper {
  position: relative;
}

/* Video/media grid */
.media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .media-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.media-card {
  background: var(--color-white);
  border: 1px solid var(--color-warmgrey-40);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
}

.media-card--featured {
  grid-column: 1 / -1;
}

.media-card__embed {
  background: var(--color-navy-10);
  border-radius: 0px;
}

.media-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.media-card__source {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.media-card__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.3;
}

.media-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.media-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: auto;
  padding-top: var(--space-xs);
}

/* Podcast list */
.podcast-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.podcast-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
  padding-bottom: var(--space-lg);
  border-bottom: var(--hairline);
}

.podcast-item:last-child {
  border-bottom: none;
}

.podcast-item--featured {
  grid-template-columns: 1fr;
}

.podcast-item__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-navy);
  margin-top: 0.25rem;
}

.podcast-item__meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.25rem;
}

/* Press/link rows */
.press-list {
  list-style: none;
  border-top: var(--hairline);
}

.press-item {
  border-bottom: var(--hairline);
}

.press-item__link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 1rem 0;
  color: var(--color-navy);
  transition: color var(--transition-fast);
}

.press-item__link:hover {
  color: var(--color-gold);
}

.press-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.press-item__source {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.press-item__link:hover .press-item__source {
  color: inherit;
}

.press-item__title {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
}

.press-item__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.press-item__arrow {
  font-size: var(--text-sm);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}

.press-item__link:hover .press-item__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Events list (legacy) */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.event-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: var(--hairline);
}

.event-item__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 0.625rem 1rem;
  flex-shrink: 0;
  min-width: 60px;
  text-align: center;
  border-radius: 0px;
}

.event-item__day {
  font-size: var(--text-xl);
  font-weight: 300;
  line-height: 1;
}

.event-item__month {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.event-item__body {
  flex: 1;
}

.event-item__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.event-item__location {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.event-item__link {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-gold);
  transition: color var(--transition-fast);
}

.event-item__link:hover {
  color: var(--color-gold);
}

.no-events {
  padding: var(--space-xl);
  background: var(--color-white);
  border: 1px solid var(--color-warmgrey-40);
  border-radius: 0px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* Empty state */
.media-empty-state {
  text-align: center;
  padding: var(--space-xl);
  border: 1px solid var(--color-warmgrey-40);
  border-radius: 0px;
  background: var(--color-sand-bg);
  max-width: 560px;
  margin-inline: auto;
}

.media-empty-state__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
}

.media-empty-state__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.media-empty-state__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
}


/* ============================================================
   28. CONTACT PAGE
   ============================================================ */

.contact-page {
  padding: var(--space-3xl) 0;
}

.contact-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .contact-body {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
  }
}

/* When the editor picks "No form — hide right column" the left info list
   takes the full width rather than stretching awkwardly across the grid. */
.contact-page--info-only .contact-body {
  display: block;
  max-width: 720px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact-detail__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-text);
  margin-bottom: 0.375rem;
}

.contact-detail p,
.contact-detail address {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
  font-style: normal;
}

.contact-detail a {
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-gold);
}

/* Social platform links */
.social-links {
  display: flex;
  flex-direction: column;
  border-top: var(--hairline);
}

.social-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: var(--hairline);
  color: var(--color-navy);
  transition: color var(--transition-fast);
}

.social-link:hover {
  color: var(--color-gold);
}

.social-link__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity var(--transition-fast);
}

.social-link:hover .social-link__icon {
  opacity: 1;
}

.social-link__name {
  flex: 1;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.social-link__arrow {
  font-size: var(--text-xs);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.social-link:hover .social-link__arrow {
  opacity: 1;
  transform: translateX(0);
}

.contact-form-wrap {
  background: var(--color-sand-bg);
  border: 1px solid var(--color-warmgrey-40);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
}

.contact-form-wrap h2 {
  font-size: var(--text-xl);
  margin-bottom: 0.375rem;
}

/* Gold underline accent on form heading */
.contact-form-wrap h2::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--color-gold);
  margin-top: 0.625rem;
  margin-bottom: var(--space-lg);
  border-radius: 999px;
}


/* ============================================================
   29. CAREERS PAGE — soft-premium revamp
   ------------------------------------------------------------
   Section order: hero → pillars → open positions → join network.
   All blocks share the soft-premium language: 6px radii, hairline
   borders, shadow-xs resting state, tactile hover lift, Sky focus
   outline (inherited from the global focus rules).
   ============================================================ */

.careers-page {
  padding: var(--space-3xl) 0;
}

/* --- Careers hero (section 1) ---------------------------------- */

.careers-hero {
  position: relative;
  isolation: isolate;
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: var(--space-3xl) 0;
  background: var(--color-navy);
  color: var(--color-white);
  overflow: hidden;
}

.careers-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.careers-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Dual-stop gradient reads as depth, not a flat scrim. */
.careers-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.35) 0%, rgba(var(--color-primary-rgb), 0.78) 65%, rgba(var(--color-primary-rgb), 0.9) 100%),
    radial-gradient(circle at 20% 20%, rgba(var(--color-accent-rgb), 0.12) 0%, transparent 60%);
}

.careers-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.careers-hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: var(--space-md);
}

.careers-hero__title {
  font-family: var(--font-base);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.careers-hero__description {
  font-size: clamp(var(--text-md), 1.6vw, var(--text-lg));
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 60ch;
  margin-bottom: var(--space-lg);
}

.careers-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.careers-hero__scroll-cue {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.careers-hero__scroll-cue::after {
  content: '';
  display: block;
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
}

/* --- Careers pillars (section 2) ------------------------------- */

.careers-pillars {
  padding: var(--space-3xl) 0;
  background: var(--color-white);
}

.careers-pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.careers-pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--color-white);
  border: 1px solid rgba(var(--color-neutral-rgb), 0.35);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-slow),
    transform var(--transition-slow);
}

.careers-pillar-card:hover,
.careers-pillar-card:focus-within {
  border-color: rgba(var(--color-accent-rgb), 0.6);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.careers-pillar-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-md);
  font-family: var(--font-feature);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-gold);
  background: rgba(var(--color-accent-rgb), 0.08);
  border: 1px solid rgba(var(--color-accent-rgb), 0.35);
  border-radius: var(--radius-circle);
  line-height: 1;
  letter-spacing: 0;
}

.careers-pillar-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-sm);
}

.careers-pillar-card__desc {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
}

/* --- Open positions (section 3) -------------------------------- */

.careers-positions {
  padding: var(--space-3xl) 0;
  background: var(--color-sand-bg);
}

.careers-positions__count {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 0.75rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  background: rgba(var(--color-primary-rgb), 0.06);
  border-radius: var(--radius-pill);
}

.jobs-listing {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.job-listing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-white);
  border: 1px solid rgba(var(--color-neutral-rgb), 0.35);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-slow),
    transform var(--transition-slow);
}

.job-listing:hover,
.job-listing:focus-within {
  border-color: rgba(var(--color-accent-rgb), 0.5);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.job-listing__body {
  flex: 1;
  min-width: 0;
}

.job-listing__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: var(--space-sm);
}

.job-listing__type {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 0.625rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  background: rgba(var(--color-accent-rgb), 0.08);
  border: 1px solid rgba(var(--color-accent-rgb), 0.3);
  border-radius: var(--radius-pill);
}

.job-listing__location {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

.job-listing__location::before {
  content: '·';
  margin-right: 0.5rem;
  opacity: 0.5;
}

.job-listing__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin-bottom: 0.375rem;
}

.job-listing__title a {
  color: inherit;
  background-image: linear-gradient(to right, var(--color-gold), var(--color-gold));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--transition-slow), color var(--transition-fast);
}

.job-listing:hover .job-listing__title a,
.job-listing__title a:hover,
.job-listing__title a:focus-visible {
  color: var(--color-gold);
  background-size: 100% 1px;
}

.job-listing__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
  max-width: 65ch;
}

.job-listing__aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
  text-align: right;
}

.job-listing__deadline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
  margin: 0 0 0.25rem 0;
}

.job-listing__deadline::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-gold);
  border-radius: var(--radius-circle);
}

.job-listing__actions {
  display: flex;
  gap: 0.5rem;
}

/* Empty state — premium */
.no-jobs {
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  background: var(--color-white);
  border: 1px solid rgba(var(--color-neutral-rgb), 0.35);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-xs);
  max-width: 720px;
  margin-inline: auto;
}

.no-jobs__heading {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.no-jobs__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  max-width: 52ch;
  margin-inline: auto;
}

/* Careers-scope focus ring — Sky outline language consistent with
   About, applied to interactive elements in any careers section. */
.careers-hero a:focus-visible,
.careers-hero button:focus-visible,
.careers-pillar-card:focus-visible,
.careers-pillar-card a:focus-visible,
.careers-positions a:focus-visible,
.careers-positions button:focus-visible,
.job-listing a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 4px;
}

/* --- Responsive rules ----------------------------------------- */

@media (max-width: 1024px) {
  .careers-pillars__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .careers-hero {
    min-height: 440px;
  }

  .careers-pillars__grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .job-listing {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-lg);
    gap: var(--space-md);
  }

  .job-listing__aside {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: left;
  }

  .job-listing__deadline {
    margin: 0;
  }

  .job-listing__actions {
    margin-left: auto;
  }

  .careers-hero__scroll-cue {
    display: none;
  }
}


/* ============================================================
   30. DONATE PAGE
   ============================================================ */

.donate-page {
  padding: var(--space-3xl) 0;
}

.donate-section {
  background: var(--color-navy);
  padding: var(--space-3xl) 0;
}

.donate-section__intro {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.donate-section__intro h2 {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.donate-section__intro p {
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.75;
}

/* Giving options */
.donate-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .donate-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.donate-card {
  padding: var(--space-xl);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
}

.donate-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.donate-card__desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

/* FAQ accordion for donate page */
.donate-faq {
  padding: var(--space-3xl) 0;
}


/* ============================================================
   31. FAQ ACCORDION
   ============================================================ */

.accordion {
  border-top: var(--hairline);
}

.accordion__item {
  border-bottom: var(--hairline);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md) 0;
  font-family: var(--font-base);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-navy);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: var(--space-md);
  transition: color var(--transition-fast);
}

.accordion__trigger:hover {
  color: var(--color-gold);
}

.accordion__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform var(--transition-slow);
}

.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  top: 50%;
  left: 50%;
}

.accordion__icon::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.accordion__icon::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
  transition: transform var(--transition-slow);
}

.accordion__item.is-open .accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.accordion__panel-inner {
  padding-bottom: var(--space-md);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.accordion__panel-inner p {
  margin-bottom: var(--space-sm);
}

.accordion__panel-inner p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   32. 404 PAGE
   ============================================================ */

.error-404 {
  min-height: calc(100vh - var(--header-height) - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3xl) var(--container-pad);
}

.error-404__code {
  font-family: var(--font-base);
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 600;
  color: var(--color-navy-10);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-md);
}

.error-404__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.error-404__desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  max-width: 480px;
  margin-inline: auto;
  line-height: 1.65;
}

.error-404__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}


/* ============================================================
   33. SEARCH RESULTS
   ============================================================ */

.search-results-page {
  padding: var(--space-3xl) 0;
}

.search-results__header {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: var(--hairline);
}

.search-results__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-xs);
}

.search-results__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.search-result-item {
  padding: var(--space-md) 0;
  border-bottom: var(--hairline);
}

.search-result-item__type {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.25rem;
}

.search-result-item__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

.search-result-item__title a {
  color: inherit;
  transition: color var(--transition-fast);
}

.search-result-item__title a:hover {
  color: var(--color-gold);
}

.search-result-item__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.search-no-results {
  text-align: center;
  padding: var(--space-xl);
}

.search-no-results__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.search-no-results__desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}


/* ============================================================
   34. PUBLICATION DETAIL
   ============================================================ */

.pub-hero {
  background: var(--color-navy);
  padding: var(--space-3xl) 0;
  color: var(--color-white);
  min-height: 480px;
  display: flex;
  align-items: center;
}

.pub-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.pub-hero__type {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.pub-hero__date {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
}

.pub-hero__sep {
  color: rgba(255, 255, 255, 0.3);
}

.pub-hero__title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: var(--space-md);
  max-width: 800px;
}

.pub-hero__authors {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-lg);
}

.pub-hero__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.pub-body {
  padding: var(--space-3xl) 0;
}

.pub-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.pub-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
}

.pub-sidebar__section {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: var(--hairline);
}

.pub-sidebar__section:last-child {
  border-bottom: none;
}

.pub-sidebar__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.pub-sidebar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.pub-toc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
  white-space: pre-line;
}

.pub-abstract {
  background: var(--color-sand-bg);
  border-left: 3px solid var(--color-gold);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--color-text);
  font-style: italic;
  border-radius: 0px;
}


/* ============================================================
   35. MOTION / ANIMATION
   ============================================================ */

/* Fade-in on scroll */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(0.25, 1, 0.5, 1), transform 600ms cubic-bezier(0.25, 1, 0.5, 1);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stagger-children>* {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms cubic-bezier(0.25, 1, 0.5, 1), transform 500ms cubic-bezier(0.25, 1, 0.5, 1);
}

.stagger-children.is-visible>*:nth-child(1) {
  transition-delay: 0ms;
}

.stagger-children.is-visible>*:nth-child(2) {
  transition-delay: 60ms;
}

.stagger-children.is-visible>*:nth-child(3) {
  transition-delay: 120ms;
}

.stagger-children.is-visible>*:nth-child(4) {
  transition-delay: 180ms;
}

.stagger-children.is-visible>*:nth-child(5) {
  transition-delay: 240ms;
}

.stagger-children.is-visible>*:nth-child(6) {
  transition-delay: 300ms;
}

.stagger-children.is-visible>* {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: all animations instant */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fade-in {
    opacity: 1;
    transform: none;
  }

  .stagger-children>* {
    opacity: 1;
    transform: none;
    transition-delay: 0ms !important;
  }

  .pub-card:hover,
  .centre-card:hover,
  .expert-card:hover,
  .event-card:hover {
    transform: none;
  }
}


/* ============================================================
   40. PUBLICATION DETAIL — UPDATED (spec section 18)
   ============================================================ */

/* Breadcrumb */
.pub-breadcrumb {
  background: var(--color-sand-bg);
  padding: var(--space-sm) 0;
  border-bottom: var(--hairline);
}

.pub-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.pub-breadcrumb__list li {
  display: flex;
  align-items: center;
}

.pub-breadcrumb__list li+li::before {
  content: '/';
  margin: 0 0.5rem;
  color: var(--color-warmgrey-40);
}

.pub-breadcrumb__list li a {
  color: var(--color-navy);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pub-breadcrumb__list li a:hover {
  color: var(--color-gold);
}

.pub-breadcrumb__list li[aria-current="page"] span {
  color: var(--color-text-muted);
}

/* Publication header (white bg) */
.pub-header {
  padding: var(--space-2xl) 0 var(--space-xl);
  border-bottom: var(--hairline);
}

.pub-header__inner {
  max-width: 800px;
}

.pub-header__content-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-md);
}

.pub-header__title {
  font-family: var(--font-base);
  font-size: clamp(2.75rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-navy);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}

.pub-header__subtitle {
  font-family: var(--font-reading);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  line-height: 1.5;
}

/* Byline: headshots + names + date */
.pub-header__byline {
  margin-bottom: var(--space-lg);
}

.pub-header__authors-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.pub-header__headshots {
  display: flex;
}

.pub-header__headshot {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-white);
  margin-right: -8px;
  position: relative;
}

.pub-header__headshot:last-child {
  margin-right: 0;
}

.pub-header__headshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pub-header__headshot-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-navy-10);
  color: var(--color-navy);
  font-size: var(--text-sm);
  font-weight: 600;
}

.pub-header__author-names {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
}

.pub-header__author-names a {
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-gold);
}

.pub-header__author-names a:hover {
  color: var(--color-gold);
}

.pub-header__authors-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.pub-header__meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pub-header__sep {
  color: var(--color-warmgrey-40);
}

/* Utility row */
.pub-header__utility {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.pub-header__share {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pub-header__share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-warmgrey-40);
  color: var(--color-navy);
  background: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pub-header__share-icon:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* Hero image */
.pub-hero-image {
  padding: var(--space-xl) 0 0;
}

.pub-hero-image__img {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.pub-hero-image__caption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
  font-style: italic;
  text-align: right;
}

/* Article layout: side rail left + body right */
.pub-layout--article {
  grid-template-columns: 220px 1fr;
  gap: var(--space-2xl);
}

.pub-main {
  max-width: 720px;
}

/* Side rail (sticky on desktop, collapses to static row on tablet/mobile via responsive.css) */
.pub-side-rail {
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.pub-side-rail__heading {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.pub-side-rail__toc-list {
  list-style: none;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pub-side-rail__toc-list li {
  counter-increment: toc;
}

.pub-side-rail__toc-list li a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  display: block;
  padding: 0.2rem 0;
  border-left: 2px solid transparent;
  padding-left: var(--space-sm);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.pub-side-rail__toc-list li a:hover,
.pub-side-rail__toc-list li a.is-active {
  color: var(--color-navy);
  border-left-color: var(--color-gold);
}

.pub-side-rail__back-top {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.pub-side-rail__back-top:hover {
  color: var(--color-gold);
}

.pub-side-rail__share-icons {
  display: flex;
  gap: var(--space-xs);
}

.pub-side-rail__share-icons a,
.pub-side-rail__share-icons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-warmgrey-40);
  color: var(--color-text-muted);
  background: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pub-side-rail__share-icons a:hover,
.pub-side-rail__share-icons button:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* End-of-article */
.pub-endmatter {
  padding: var(--space-2xl) 0;
  border-top: var(--hairline);
  background: var(--color-sand-bg);
}

.pub-endmatter__inner {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* Author cards */
.pub-author-cards__heading {
  margin-bottom: var(--space-lg);
}

.pub-author-cards__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.pub-author-card {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.pub-author-card__photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-navy-10);
  flex-shrink: 0;
}

.pub-author-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pub-author-card__name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.2rem;
}

.pub-author-card__name a {
  color: inherit;
}

.pub-author-card__name a:hover {
  color: var(--color-gold);
}

.pub-author-card__role {
  font-size: var(--text-sm);
  color: var(--color-gold);
  margin-bottom: var(--space-xs);
}

.pub-author-card__bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* Related publications grid */
.pub-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* Newsletter prompt */
.pub-newsletter {
  text-align: center;
  padding: var(--space-xl);
  background: var(--color-white);
  border: var(--hairline);
}

.pub-newsletter__heading {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-xs);
}

.pub-newsletter__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  max-width: 480px;
  margin-inline: auto;
  line-height: 1.65;
}

.pub-newsletter__form {
  display: flex;
  gap: 0;
  max-width: 440px;
  margin-inline: auto;
}

.pub-newsletter__input {
  flex: 1;
  padding: 0.75rem 1rem;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  border: 1px solid var(--color-warmgrey-40);
  border-right: none;
  outline: none;
  min-width: 0;
}

.pub-newsletter__input:focus {
  border-color: var(--color-navy);
}

.pub-newsletter .newsletter-feedback {
  max-width: 440px;
  margin-inline: auto;
  text-align: left;
}

/* Citation block */
.pub-citation {
  padding: var(--space-lg);
  background: var(--color-white);
  border: var(--hairline);
}

.pub-citation__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.pub-citation__block {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.65;
  padding: var(--space-md);
  background: var(--color-sand-bg);
  border-left: 3px solid var(--color-gold);
  margin-bottom: var(--space-md);
  /* The citation ends with the post's full permalink — one unbreakable
     "word". Long slugs otherwise overflow the panel. */
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.pub-citation__copy {
  margin-top: 0;
}


/* ============================================================
   41. SINGLE EXPERT — UPDATED (spec section 13)
   ============================================================ */

/* Split header */
.expert-header {
  background: var(--color-navy);
  padding: var(--space-2xl) 0;
  color: var(--color-white);
}

.expert-header__inner {
  display: flex;
  gap: var(--space-2xl);
  align-items: stretch;
}

.expert-header__photo {
  width: 40%;
  flex-shrink: 0;
  background: var(--color-navy-20);
  overflow: hidden;
}

.expert-header__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.expert-header__photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 300px;
  background: var(--color-navy-20);
  color: rgba(255, 255, 255, 0.3);
  font-size: var(--text-4xl);
  font-weight: 300;
}

.expert-header__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-lg) 0;
}

.expert-header__name {
  font-family: var(--font-base);
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xs);
}

.expert-header__role {
  font-size: var(--text-md);
  color: var(--color-gold);
  margin-bottom: var(--space-lg);
}

.expert-header__labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.expert-header__labels .tag {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}

.expert-header__labels .tag:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
}

.expert-header__labels .tag--navy {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}

.expert-header__social {
  display: flex;
  gap: var(--space-sm);
}

.expert-header__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.7);
  transition: all var(--transition-fast);
}

.expert-header__social a:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* Bio section */
.expert-bio {
  padding: var(--space-2xl) 0;
}

.expert-bio__body {
  max-width: 720px;
  font-family: var(--font-reading);
  font-size: 1.1875rem;
  line-height: 1.8;
}

/* Featured publications */
.expert-publications {
  padding: var(--space-2xl) 0;
  background: var(--color-sand-bg);
}

.expert-publications__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* Related experts */
.expert-related {
  padding: var(--space-2xl) 0;
}

.expert-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}


/* ============================================================
   42. SINGLE POLICY CENTRE — UPDATED (spec section 10)
   ============================================================ */

/* Centre hero */
.centre-hero {
  background: var(--color-navy);
  padding: var(--space-3xl) 0;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.centre-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
  position: relative;
  z-index: 1;
}

.centre-hero__text {
  flex: 1;
}

.centre-hero__kicker {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.centre-hero__name {
  font-family: var(--font-base);
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.centre-hero__tagline {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  max-width: 580px;
  line-height: 1.6;
}

.centre-hero__watermark {
  width: 200px;
  height: 200px;
  opacity: 0.12;
  flex-shrink: 0;
}

.centre-hero__watermark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Description section */
.centre-description {
  padding: var(--space-2xl) 0;
  background: var(--color-white);
}

.centre-description__body {
  max-width: 720px;
  font-family: var(--font-reading);
  font-size: 1.1875rem;
  line-height: 1.8;
}

/* Key themes chips */
.centre-themes {
  padding: var(--space-xl) 0;
  border-top: var(--hairline);
}

.centre-themes__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.centre-themes__chip {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  border: 2px solid var(--color-navy);
  padding: 0.375rem 1rem;
  line-height: 1.4;
}

/* Publications from centre */
.centre-publications {
  padding: var(--space-2xl) 0;
  background: var(--color-sand-bg);
}

.centre-publications__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* Experts from centre */
.centre-experts {
  padding: var(--space-2xl) 0;
}

.centre-experts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

/* Centre CTA band */
.centre-cta {
  background: var(--color-navy);
  padding: var(--space-2xl) 0;
  text-align: center;
}

.centre-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.centre-cta__heading {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-white);
}


/* ============================================================
   43. SINGLE EVENT — editorial layout
   ------------------------------------------------------------
   Synthesised from Hudson + Carnegie reference patterns, rebuilt
   in the MEA design language:
     · soft rounded treatments where the design system already uses them
     · hairline rules + gold accents
     · navy + sand palette
     · sticky sidebar metadata, editorial prose body,
       stacked speaker rows, related content bands
   ============================================================ */

/* Breadcrumb */
.event-breadcrumb {
  background: var(--color-sand-bg);
  padding: var(--space-lg) 0 0;
}

.event-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.event-breadcrumb__list li + li::before {
  content: '/';
  margin-right: 0.5rem;
  color: var(--color-warmgrey);
}

.event-breadcrumb__list a {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.event-breadcrumb__list a:hover {
  color: var(--color-navy);
}

/* ─── HEADER BLOCK ──────────────────────────────────────────── */
.event-header {
  background: var(--color-sand-bg);
  padding: var(--space-xl) 0 var(--space-2xl);
  border-bottom: var(--hairline);
}

.event-header__grid {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.event-header__media {
  overflow: hidden;
  background: var(--color-navy-10);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  aspect-ratio: 3 / 2;
}

.event-header__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-header__img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 320px;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
}

.event-header__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-md) 0;
}

.event-header__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.event-header__kicker {
  color: var(--color-gold);
}

.event-header__type,
.event-header__format {
  color: var(--color-text-muted);
}

.event-header__sep {
  color: var(--color-warmgrey);
}

.event-header__title {
  font-family: var(--font-base);
  font-size: clamp(var(--text-2xl), 3.4vw, var(--text-3xl));
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
}

.event-header__dek {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  max-width: 56ch;
}

.event-header__share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: var(--space-sm);
}

.event-header__share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-warmgrey-40);
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--color-navy);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.event-header__share-icon:hover,
.event-header__share-icon:focus-visible {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

/* ─── BODY: SIDEBAR + EDITORIAL ─────────────────────────────── */
.event-body {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.event-body__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* Sticky sidebar */
.event-rail {
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.event-rail__date {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.85rem;
  align-items: center;
  padding: 0 0 var(--space-md);
  border-bottom: var(--hairline);
  background: transparent;
  line-height: 1.2;
}

.event-rail__date-day {
  font-family: var(--font-base);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: -0.015em;
  line-height: 1;
  grid-row: 1 / span 2;
}

.event-rail__date-range {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  grid-row: 1 / span 2;
}

.event-rail__date-arrow {
  font-size: var(--text-md);
  color: var(--color-navy);
}

.event-rail__date-month {
  display: inline-block;
  margin-top: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-navy);
}

.event-rail__date-dow {
  display: inline-block;
  margin-top: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
}

/* Meta list */
.event-rail__meta {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.event-rail__row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-sm) 0;
  border-bottom: var(--hairline);
}

.event-rail__row:first-child {
  padding-top: 0;
}

.event-rail__row:last-child {
  border-bottom: none;
}

.event-rail__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.event-rail__value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy);
  line-height: 1.5;
}

.event-rail__icon {
  flex-shrink: 0;
  color: var(--color-gold);
}

/* Sidebar actions */
.event-rail__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.event-rail__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 1.25rem;
  font-family: var(--font-base);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-fluid);
}

.event-rail__cta--primary {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

.event-rail__cta--primary:hover,
.event-rail__cta--primary:focus-visible {
  background: var(--color-gold);
  border-color: var(--color-gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.event-rail__cta--ghost {
  background: transparent;
  border-color: var(--color-navy);
  color: var(--color-navy);
}

.event-rail__cta--ghost:hover,
.event-rail__cta--ghost:focus-visible {
  background: var(--color-navy);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xs);
}

.event-rail__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 1rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-warmgrey-40);
  border-radius: var(--radius-pill);
  background: var(--color-sand-bg);
}

/* Programme block */
.event-rail__programmes {
  padding-top: var(--space-md);
  border-top: var(--hairline);
}

.event-rail__heading {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.event-rail__programme-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.event-rail__programme-list li + li {
  margin-top: 0.4rem;
}

.event-rail__programme-list a {
  font-size: var(--text-sm);
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-gold);
  transition: color var(--transition-fast);
}

.event-rail__programme-list a:hover {
  color: var(--color-gold);
}

/* Editorial prose */
.event-prose {
  max-width: 760px;
}

.event-prose__body p:first-of-type {
  font-size: var(--text-md);
  line-height: 1.7;
}

/* H2 sections inside the editorial body get a thin gold underline */
.event-prose__body h2 {
  font-family: var(--font-base);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-warmgrey-40);
  position: relative;
}

.event-prose__body h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 2.5rem;
  height: 2px;
  background: var(--color-gold);
}

.event-prose__body h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

/* ─── SPEAKERS — stacked editorial rows ─────────────────────── */
.event-speakers {
  padding: var(--space-2xl) 0;
  background: var(--color-sand-bg);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}

.event-speakers__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.event-speakers__heading {
  font-family: var(--font-base);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.event-speakers__rule {
  flex: 1;
  height: 1px;
  background: var(--color-warmgrey-60);
  position: relative;
}

.event-speakers__rule::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 2.5rem;
  height: 2px;
  background: var(--color-gold);
}

.event-speakers__list {
  display: flex;
  flex-direction: column;
  max-width: 920px;
}

.event-speaker {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: var(--hairline);
}

.event-speaker:first-child {
  padding-top: 0;
}

.event-speaker:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.event-speaker__photo {
  width: 100px;
  height: 100px;
  overflow: hidden;
  background: var(--color-navy-10);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.event-speaker__photo a {
  display: block;
  width: 100%;
  height: 100%;
}

.event-speaker__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-speaker__photo-placeholder {
  font-family: var(--font-feature);
  font-size: var(--text-2xl);
  color: var(--color-navy);
}

.event-speaker__name {
  font-family: var(--font-base);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.15rem;
}

.event-speaker__name a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

.event-speaker__name a:hover {
  border-bottom-color: var(--color-gold);
}

.event-speaker__title {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.event-speaker__bio {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.65;
  margin: 0;
}

/* ─── RELATED BANDS ─────────────────────────────────────────── */
.event-related {
  padding: var(--space-2xl) 0;
}

.event-related--events {
  background: var(--color-sand-bg);
  border-top: var(--hairline);
}

.event-related__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-navy);
}

.event-related__heading {
  font-family: var(--font-base);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}

.event-related__more {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-gold);
  transition: color var(--transition-fast);
}

.event-related__more:hover {
  color: var(--color-gold);
}

.event-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* Mini event card (related events) */
.event-card-mini {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: var(--hairline);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--transition-fluid), box-shadow var(--transition-fluid);
}

.event-card-mini:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.event-card-mini__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-navy-10);
}

.event-card-mini__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-fluid);
}

.event-card-mini:hover .event-card-mini__media img {
  transform: scale(1.04);
}

.event-card-mini__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.event-card-mini__kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.event-card-mini__title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.3;
}

.event-card-mini__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}

/* ─── BOTTOM REGISTER CTA ───────────────────────────────────── */
.event-register-cta {
  background: var(--color-navy);
  padding: var(--space-2xl) 0;
  text-align: center;
}

.event-register-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.event-register-cta__heading {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-white);
}

.event-register-cta__text {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.65);
  max-width: 480px;
  line-height: 1.65;
}


/* ============================================================
   44. SINGLE JOB — UPDATED
   ============================================================ */

.job-header {
  background: var(--color-navy);
  padding: var(--space-2xl) 0;
  color: var(--color-white);
}

.job-breadcrumb {
  margin-bottom: var(--space-lg);
}

.job-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  font-size: var(--text-xs);
}

.job-breadcrumb__list li {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
}

.job-breadcrumb__list li+li::before {
  content: '/';
  margin: 0 0.5rem;
  color: rgba(255, 255, 255, 0.25);
}

.job-breadcrumb__list li a {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.job-breadcrumb__list li a:hover {
  color: var(--color-gold);
}

.job-header__title {
  font-family: var(--font-base);
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}

.job-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.job-header__badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-gold);
  color: var(--color-white);
  padding: 0.25rem 0.75rem;
}

.job-header__location,
.job-header__deadline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
}

.job-header__location svg,
.job-header__deadline svg {
  color: var(--color-gold);
  flex-shrink: 0;
}

.job-body {
  padding: var(--space-2xl) 0;
}

.job-apply-cta {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--color-sand-bg);
  border-left: 4px solid var(--color-gold);
  text-align: center;
}

.job-apply-cta--closed {
  border-left-color: var(--color-warmgrey);
}

.job-apply-cta--closed p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.job-back {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--hairline);
}


/* ============================================================
   45. 404 PAGE — UPDATED (spec section 21.3)
   ============================================================ */

.error-404__inner {
  max-width: 560px;
}

.error-404__heading {
  font-family: var(--font-base);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.25;
  margin-bottom: var(--space-md);
}

.error-404__text {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

.error-404__links {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
}

.error-404__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 2px;
  transition: color var(--transition-fast);
}

.error-404__link:hover {
  color: var(--color-gold);
}


/* ============================================================
   46. SEARCH RESULTS — UPDATED (spec section 3.5)
   ============================================================ */

.search-header {
  background: var(--color-navy);
  padding: var(--space-2xl) 0;
  color: var(--color-white);
}

.search-header__title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-xs);
}

.search-header__query {
  color: var(--color-gold);
}

.search-header__count {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-lg);
}

.search-header__form-wrap {
  max-width: 560px;
  margin-top: var(--space-lg);
}

.search-results {
  padding: var(--space-2xl) 0;
}

.search-group {
  margin-bottom: var(--space-2xl);
}

.search-group__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: var(--hairline);
}

.search-group__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
}

.search-group__count {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.search-group__results--publication {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.search-group__results--expert {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.search-group__results--policy_centre {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.search-group__results--event,
.search-group__results--media_episode {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

/* Generic search result card */
.search-result-card {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  border: var(--hairline);
  background: var(--color-white);
  transition: box-shadow var(--transition-base);
}

.search-result-card:hover {
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.08);
}

.search-result-card__image {
  width: 120px;
  height: 80px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--color-navy-10);
}

.search-result-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-result-card__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.3;
  margin-bottom: var(--space-xs);
}

.search-result-card__title a {
  color: inherit;
}

.search-result-card__title a:hover {
  color: var(--color-gold);
}

.search-result-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-xs);
}

.search-result-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Empty state */
.search-empty {
  text-align: center;
  padding: var(--space-3xl) 0;
}

.search-empty__heading {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.search-empty__text {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  max-width: 500px;
  margin-inline: auto;
}

.search-empty__links {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
}


/* ============================================================
   47. SEARCH FORM
   ============================================================ */

.search-form {
  display: flex;
  gap: 0;
}

.search-form__input {
  flex: 1;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-warmgrey-40);
  border-right: none;
  outline: none;
  min-width: 0;
  transition: border-color var(--transition-fast);
}

.search-form__input:focus {
  border-color: var(--color-navy);
}

.search-form__input::placeholder {
  color: var(--color-warmgrey);
}

.search-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  background: var(--color-navy);
  color: var(--color-white);
  border: 1px solid var(--color-navy);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.search-form__submit:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
}


/* ============================================================
   48. EXPERT CARD — Social icons row
   ============================================================ */

.expert-card__social {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.expert-card__social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-warmgrey-40);
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

.expert-card__social-icon:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.expert-card__photo-wrap {
  width: 160px;
  height: 160px;
}


/* ============================================================
   49. POLICY CENTRE CARD — Variants
   ============================================================ */

.centre-card--navy {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  border-top-color: var(--color-gold);
}

.centre-card--navy .centre-card__name,
.centre-card--navy .centre-card__name a {
  color: var(--color-white);
}

.centre-card--navy .centre-card__description {
  color: rgba(255, 255, 255, 0.6);
}

.centre-card--navy .centre-card__link {
  color: rgba(255, 255, 255, 0.8);
}

.centre-card--navy .centre-card__link:hover {
  color: var(--color-gold);
}

.centre-card--navy .centre-card__icon {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-gold);
}


/* ============================================================
   50. SUPPORT BANNER — Variants
   ============================================================ */

.support-banner--navy {
  background: var(--color-navy);
}

.support-banner--white {
  background: var(--color-white);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}

.support-banner--white .support-banner__headline {
  color: var(--color-navy);
}

.support-banner--white .support-banner__copy {
  color: var(--color-text-muted);
}

.support-banner--white .support-banner__actions .btn--ghost-white {
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.support-banner--white .support-banner__actions .btn--ghost-white:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

/* Sand variant — light background, dark text (mirrors the white variant) */
.support-banner--sand {
  background: var(--color-sand-bg);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}

.support-banner--sand .support-banner__headline {
  color: var(--color-navy);
}

.support-banner--sand .support-banner__copy {
  color: var(--color-text-muted);
}

.support-banner--sand .support-banner__actions .btn--ghost-white {
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.support-banner--sand .support-banner__actions .btn--ghost-white:hover {
  background: var(--color-navy);
  color: var(--color-white);
}


/* ============================================================
   51. TERMS OF USE PAGE (spec section 21.2)
   ============================================================ */

.terms-header {
  background: var(--color-navy);
  padding: var(--space-2xl) 0;
  color: var(--color-white);
}

.terms-header__title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.terms-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
}

.terms-header__version {
  font-weight: 600;
  color: var(--color-gold);
}

.terms-header__sep {
  color: rgba(255, 255, 255, 0.3);
}

.terms-body {
  padding: var(--space-2xl) 0;
}

.terms-body__layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* Sticky TOC sidebar */
.terms-toc {
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
}

.terms-toc__heading {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.terms-toc__list {
  list-style: none;
  counter-reset: terms-toc;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.terms-toc__list li a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: block;
  padding: 0.25rem 0 0.25rem var(--space-sm);
  border-left: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  line-height: 1.45;
}

.terms-toc__list li a:hover {
  color: var(--color-navy);
  border-left-color: var(--color-gold);
}

/* Content column */
.terms-content {
  max-width: 720px;
  font-family: var(--font-reading);
  font-size: var(--text-md);
  line-height: 1.8;
}

.terms-content h2 {
  font-family: var(--font-base);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  scroll-margin-top: calc(var(--header-height) + var(--space-lg));
}

.terms-content h3 {
  font-family: var(--font-base);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.terms-content p {
  margin-bottom: var(--space-md);
}

.terms-content ul,
.terms-content ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
  list-style: disc;
}

.terms-content ol {
  list-style: decimal;
}

.terms-content li {
  margin-bottom: var(--space-xs);
}


/* (Old podcast-preview styles removed — replaced by .hp-media in section 20.) */


/* ============================================================
   SECTION BACKGROUND VARIANTS
   ------------------------------------------------------------
   Editor-controlled background override available on every
   section-style ACF block. Adds a visible divider hairline so
   adjacent sections of the same colour still read as separate.
   Dark variants (navy/green) flip inner typography + link colours
   to preserve legibility and brand contrast automatically.
   ============================================================ */

.bg-variant-white {
  background: var(--color-white) !important;
}

.bg-variant-warm,
.bg-variant-sand {
  background: var(--color-sand-bg) !important;
}

.bg-variant-navy {
  background: var(--color-navy) !important;
  color: var(--color-white);
}

.bg-variant-green {
  background: var(--color-green) !important;
  color: var(--color-white);
}

/* Dark variant inner contrast — headings, muted text, hairlines. */
.bg-variant-navy h1,
.bg-variant-navy h2,
.bg-variant-navy h3,
.bg-variant-navy h4,
.bg-variant-navy h5,
.bg-variant-navy h6,
.bg-variant-green h1,
.bg-variant-green h2,
.bg-variant-green h3,
.bg-variant-green h4,
.bg-variant-green h5,
.bg-variant-green h6 {
  color: var(--color-white);
}

.bg-variant-navy .text-muted,
.bg-variant-green .text-muted,
.bg-variant-navy .section-intro,
.bg-variant-green .section-intro {
  color: rgba(255, 255, 255, 0.7);
}

.bg-variant-navy .section-header,
.bg-variant-green .section-header {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.bg-variant-navy a:not(.btn):not(.tag):hover,
.bg-variant-green a:not(.btn):not(.tag):hover {
  color: var(--color-gold-light);
}

/* --color-gold-text is darkened for legibility on WHITE and SAND. On the dark
   grounds that inverts: #8F6805 is 3.15:1 on navy. Put the bright gold back
   for anything gold-on-dark — eyebrows, labels, card types. */
.bg-variant-navy .text-gold,
.bg-variant-green .text-gold,
.bg-variant-navy .pub-card__type,
.bg-variant-green .pub-card__type,
.bg-variant-navy .contact-detail__label,
.bg-variant-green .contact-detail__label,
.page-hero .text-gold,
.ciric-hero .text-gold {
  color: var(--color-gold-light);
}

/* Only draw a hairline when two same-colour sections touch.
   Keeps the visual rhythm intact when colours already alternate. */
.bg-variant-white+.bg-variant-white,
.bg-variant-warm+.bg-variant-warm,
.bg-variant-sand+.bg-variant-sand,
.bg-variant-warm+.bg-variant-sand,
.bg-variant-sand+.bg-variant-warm {
  border-top: 1px solid rgba(var(--color-neutral-rgb), 0.4);
}

.bg-variant-navy+.bg-variant-navy,
.bg-variant-green+.bg-variant-green {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}


/* ============================================================
   ABOUT HERO (§4.1) — Navy band, optional image, Emissary ticker
   ============================================================ */

.about-hero {
  position: relative;
  isolation: isolate;
  min-height: 480px;
  display: flex;
  align-items: center;
  padding: var(--space-3xl) 0;
  background: var(--color-navy);
  color: var(--color-white);
  overflow: hidden;
}

.about-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.about-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about-hero__overlay {
  position: absolute;
  inset: 0;
  display: block;
}

.about-hero__mandala {
  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  height: 360px;
  z-index: 0;
  opacity: 0.10;
  background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.5) 0%, transparent 65%);
  pointer-events: none;
}

.about-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.about-hero__kicker {
  display: block;
  font-family: var(--font-base);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--space-lg);
}

.about-hero__heading {
  font-family: var(--font-base);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.08;
  margin: 0 0 var(--space-md);
}

.about-hero__subheadline {
  font-family: var(--font-base);
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 620px;
}

.about-hero__ticker {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-md);
}

.about-hero__ticker-kicker {
  font-family: var(--font-base);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.about-hero__ticker-link,
.about-hero__ticker-empty {
  font-family: var(--font-base);
  font-size: 0.9375rem;
  color: var(--color-white);
}

.about-hero__ticker-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
  transition: border-color 150ms ease-out;
}

.about-hero__ticker-link:hover,
.about-hero__ticker-link:focus-visible {
  border-bottom-color: var(--color-gold);
}


/* ============================================================
   MISSION STATEMENT (§4.2) — White centred single column
   ============================================================ */

.mission-statement {
  padding: var(--space-3xl) 0;
  background: var(--color-white);
}

.mission-statement__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.mission-statement__kicker {
  display: block;
  margin-bottom: var(--space-sm);
}

.mission-statement__heading {
  font-family: var(--font-base);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.15;
  margin: 0 0 var(--space-lg);
}

.mission-statement__body {
  font-family: var(--font-reading);
  font-size: 1.125rem;
  color: rgba(var(--color-primary-rgb), 0.85);
  line-height: 1.75;
  margin: 0 0 var(--space-md);
}

.mission-statement__link {
  display: inline-block;
  font-family: var(--font-base);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-navy);
  padding-bottom: 2px;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}

.mission-statement__link:hover,
.mission-statement__link:focus-visible {
  color: var(--color-navy);
  border-bottom-color: var(--color-gold);
}

/* Retained: legacy Mission/Vision duo (still available on other pages) */
.mission-vision__link {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-base);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-white);
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 2px;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}

.mission-vision__link:hover,
.mission-vision__link:focus-visible {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}


/* ============================================================
   STORY EXCERPT (§4.4) — split editorial, photo + founder quote
   ============================================================ */

.story-excerpt {
  padding: var(--space-3xl) 0;
  background: var(--color-sand-bg);
}

.story-excerpt__grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--space-2xl);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.story-excerpt__media {
  position: relative;
  padding-right: 32px;
  padding-bottom: 32px;
}

.story-excerpt__image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-navy);
}

.story-excerpt__image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-excerpt__image-fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(var(--color-primary-rgb)) 0%, var(--color-navy-dark) 100%);
}

.story-excerpt__accent {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
  height: 40%;
  background: rgba(var(--color-accent-rgb), 0.10);
  z-index: -1;
}

.story-excerpt__copy {
  max-width: 560px;
}

.story-excerpt__kicker {
  display: block;
  margin-bottom: var(--space-sm);
}

.story-excerpt__founding {
  font-family: var(--font-base);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(var(--color-primary-rgb), 0.7);
  line-height: 1.5;
  margin: 0 0 var(--space-sm);
}

.story-excerpt__heading {
  font-family: var(--font-base);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0 0 var(--space-md);
}

.story-excerpt__body {
  font-family: var(--font-reading);
  font-size: 1.125rem;
  color: rgba(var(--color-primary-rgb), 0.85);
  line-height: 1.7;
  margin: 0 0 var(--space-md);
}

.story-excerpt__quote {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin: var(--space-lg) 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-gold);
}

.story-excerpt__portrait {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-navy);
}

.story-excerpt__portrait--placeholder {
  display: inline-block;
  background: linear-gradient(135deg, rgb(var(--color-primary-rgb)), var(--color-navy-dark));
}

.story-excerpt__quote-body {
  flex: 1;
}

.story-excerpt__quote-text {
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--color-navy);
  line-height: 1.55;
  margin: 0 0 6px;
}

.story-excerpt__quote-attr {
  font-family: var(--font-base);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(var(--color-primary-rgb), 0.7);
  line-height: 1.4;
}

.story-excerpt__cta {
  display: inline-block;
  margin-top: var(--space-sm);
  font-family: var(--font-base);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-navy);
  padding-bottom: 2px;
  transition: border-color 150ms ease-out;
}

.story-excerpt__cta:hover,
.story-excerpt__cta:focus-visible {
  border-bottom-color: var(--color-gold);
}


/* ============================================================
   ABOUT RESEARCH (§4.5) — 3 pub cards + Emissary callout strip
   ============================================================ */

.about-research {
  padding: var(--space-3xl) 0;
  background: var(--color-sand-bg);
}

.about-research__header {
  max-width: 1080px;
  margin: 0 auto var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-warmgrey-60);
}

.about-research__kicker {
  display: block;
  margin-bottom: var(--space-sm);
}

.about-research__heading {
  font-family: var(--font-base);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.15;
  margin: 0;
}

.about-research__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: 1080px;
  margin: 0 auto;
}

.about-research__grid .pub-card {
  background: var(--color-white);
  border-top: 3px solid var(--color-gold);
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.about-research__grid .pub-card:hover {
  transform: translateY(-2px);
}

.about-research__see-all {
  max-width: 1080px;
  margin: var(--space-lg) auto 0;
  text-align: right;
}

.about-research__see-all-link {
  font-family: var(--font-base);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-navy);
  padding-bottom: 2px;
  transition: border-color 150ms ease-out;
}

.about-research__see-all-link:hover,
.about-research__see-all-link:focus-visible {
  border-bottom-color: var(--color-gold);
}

.about-research__emissary {
  margin-top: var(--space-2xl);
  padding: var(--space-xl) var(--space-2xl);
  background: var(--color-navy);
  color: var(--color-white);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xl);
  align-items: center;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.about-research__emissary-kicker {
  display: block;
  font-family: var(--font-base);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-xs);
}

.about-research__emissary-title {
  font-family: var(--font-base);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-white);
  margin: 0 0 var(--space-sm);
  line-height: 1.25;
}

.about-research__emissary-desc {
  font-family: var(--font-reading);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0;
  max-width: 560px;
}

.about-research__emissary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--space-lg);
  font-family: var(--font-base);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-white);
  border: 1.5px solid var(--color-white);
  background: transparent;
  text-decoration: none;
  transition: background 150ms ease-out, color 150ms ease-out;
  white-space: nowrap;
}

.about-research__emissary-cta:hover,
.about-research__emissary-cta:focus-visible {
  background: var(--color-white);
  color: var(--color-navy);
}


/* ============================================================
   PRIORITIES GRID (§4.6) — themed SVG cards, 3 up + 3 down,
                            last slot is cross-cutting thread
   ============================================================ */

.priorities-grid {
  padding: var(--space-3xl) 0;
  background: var(--color-white);
}

.priorities-grid__intro {
  max-width: 820px;
  margin: 0 auto var(--space-xl);
}

.priorities-grid__kicker {
  display: block;
  margin-bottom: var(--space-sm);
}

.priorities-grid__heading {
  font-family: var(--font-base);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.15;
  margin: 0 0 var(--space-md);
}

.priorities-grid__lede {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  color: rgba(var(--color-primary-rgb), 0.8);
  line-height: 1.7;
  max-width: 680px;
  margin: 0;
}

.priorities-grid__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.priorities-grid__cell {
  display: flex;
}

.priority-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-white);
  background: var(--color-navy);
  display: block;
  transition: transform 200ms ease-out;
}

.priority-card:hover,
.priority-card:focus-visible {
  transform: translateY(-3px);
}

.priority-card__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.priority-card__scene svg,
.priority-card__scene img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Photo variant: dim the image enough that the Gold frame + caption
   gradient stay legible without overpowering the photograph. */
.priority-card--photo .priority-card__scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.15) 0%, rgba(var(--color-primary-rgb), 0.55) 70%, rgba(var(--color-primary-rgb), 0.82) 100%);
  pointer-events: none;
}

.priority-card__frame {
  position: absolute;
  inset: 12px;
  z-index: 1;
  border: 1px solid rgba(var(--color-accent-rgb), 0.6);
  pointer-events: none;
}

.priority-card__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(to top,
      rgba(var(--color-primary-rgb), 0.95) 0%,
      rgba(var(--color-primary-rgb), 0.75) 55%,
      rgba(var(--color-primary-rgb), 0) 100%);
}

.priority-card__num {
  font-family: var(--font-base);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.priority-card__title {
  font-family: var(--font-base);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.25;
}

.priority-card__ref {
  font-family: var(--font-base);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}

.priorities-grid__cell--thread {
  background: var(--color-white);
}

.priority-thread {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  border-left: 1px solid var(--color-warmgrey-60);
  height: 100%;
}

.priority-thread__kicker {
  display: block;
  font-family: var(--font-base);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.priority-thread__body {
  font-family: var(--font-base);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.3;
  margin: 0;
}

.priority-thread__link {
  font-family: var(--font-base);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-navy);
  padding-bottom: 2px;
  transition: border-color 150ms ease-out;
  align-self: flex-start;
}

.priority-thread__link:hover,
.priority-thread__link:focus-visible {
  border-bottom-color: var(--color-gold);
}


/* ============================================================
   YOUTH LEADERSHIP BAND (§4.7) — Navy + mandala bleed, right-aligned
   ============================================================ */

.youth-band {
  position: relative;
  isolation: isolate;
  padding: var(--space-3xl) 0;
  background: var(--color-navy);
  color: var(--color-white);
  overflow: hidden;
}

.youth-band__mandala {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-30%, -50%);
  width: 580px;
  height: 580px;
  z-index: 0;
  opacity: 0.14;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

.youth-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
}

.youth-band__copy {
  max-width: 620px;
  width: 100%;
}

.youth-band__kicker {
  display: block;
  margin-bottom: var(--space-sm);
}

.youth-band__heading {
  font-family: var(--font-base);
  font-size: clamp(2rem, 4vw, 2.875rem);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.15;
  margin: 0 0 var(--space-lg);
}

.youth-band__lead {
  font-family: var(--font-reading);
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.75;
  margin: 0 0 var(--space-md);
}

.youth-band__secondary {
  font-family: var(--font-base);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  margin: 0 0 var(--space-xl);
}

.youth-band__stats {
  list-style: none;
  padding: var(--space-md) 0;
  margin: 0 0 var(--space-xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.youth-band__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.youth-band__stat-num {
  font-family: var(--font-base);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-gold);
  line-height: 1;
}

.youth-band__stat-label {
  font-family: var(--font-base);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}

.youth-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.youth-band__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--space-lg);
  font-family: var(--font-base);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
  white-space: nowrap;
}

.youth-band__cta--primary {
  background: var(--color-gold);
  color: var(--color-navy);
  border: none;
}

.youth-band__cta--primary:hover,
.youth-band__cta--primary:focus-visible {
  background: var(--color-gold-light);
  color: var(--color-navy);
}

.youth-band__cta--secondary {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid var(--color-white);
}

.youth-band__cta--secondary:hover,
.youth-band__cta--secondary:focus-visible {
  background: var(--color-white);
  color: var(--color-navy);
}


/* ============================================================
   VISION NARRATIVE (Our Vision page, § long-form body)
   ============================================================ */

.vision-narrative {
  padding: var(--space-3xl) 0;
  background: var(--color-white);
}

.vision-narrative__intro {
  max-width: 820px;
  margin: 0 auto var(--space-xl);
  text-align: left;
}

.vision-narrative__kicker {
  display: block;
  margin-bottom: var(--space-sm);
}

.vision-narrative__heading {
  font-family: var(--font-base);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0;
}

.vision-narrative__body {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-reading);
  font-size: var(--text-md);
  color: rgba(var(--color-primary-rgb), 0.8);
  line-height: 1.8;
}

.vision-narrative__body p {
  margin: 0 0 var(--space-md);
}

.vision-narrative__body p:last-child {
  margin-bottom: 0;
}

.vision-narrative__body a {
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-gold);
}

.vision-narrative__pullquote {
  max-width: 820px;
  margin: var(--space-2xl) auto;
  padding: var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--color-warmgrey-60);
  border-bottom: 1px solid var(--color-warmgrey-60);
  text-align: center;
}

.vision-narrative__pullquote blockquote {
  font-family: var(--font-feature);
  font-size: var(--text-2xl);
  line-height: 1.3;
  color: var(--color-navy);
  margin: 0 0 var(--space-md);
}

.vision-narrative__pullquote figcaption {
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vision-narrative__video {
  max-width: 960px;
  margin: var(--space-2xl) auto 0;
}

.vision-narrative__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.vision-narrative__video-frame iframe,
.vision-narrative__video-frame embed,
.vision-narrative__video-frame object,
.vision-narrative__video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vision-narrative__video figcaption {
  margin-top: var(--space-sm);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}


/* ============================================================
   STRATEGY DOWNLOAD (Our Vision page, closing section)
   ============================================================ */

.strategy-dl {
  padding: var(--space-3xl) 0;
  background: var(--color-white);
}

.strategy-dl__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}

.strategy-dl__copy {
  max-width: 480px;
}

.strategy-dl__kicker {
  display: block;
  margin-bottom: var(--space-sm);
}

.strategy-dl__heading {
  font-family: var(--font-base);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0 0 var(--space-md);
}

.strategy-dl__desc {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  color: rgba(var(--color-primary-rgb), 0.8);
  line-height: 1.7;
  margin: 0;
}

.strategy-dl__card {
  background: var(--color-navy);
  color: var(--color-white);
  padding: calc(var(--space-lg) + 4px);
}

.strategy-dl__card-kicker {
  display: block;
  font-family: var(--font-base);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.strategy-dl__card-title {
  font-family: var(--font-base);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.25;
  margin: 0 0 var(--space-md);
}

.strategy-dl__card-meta {
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--space-sm) 0;
  margin: 0 0 var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.strategy-dl__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--space-lg);
  background: var(--color-gold);
  color: var(--color-black);
  font-family: var(--font-base);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease-out;
}

.strategy-dl__cta:hover,
.strategy-dl__cta:focus-visible {
  background: var(--color-gold-light);
  color: var(--color-black);
}

.strategy-dl__cta--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ============================================================
   CAREERS COMMUNITY ("Our approach to community")
   ============================================================ */

.careers-community {
  padding: var(--space-3xl) 0;
  background: var(--color-sand-bg);
}

.careers-community__intro {
  max-width: 820px;
  margin: 0 auto var(--space-xl);
  text-align: left;
}

.careers-community__kicker {
  display: block;
  margin-bottom: var(--space-sm);
}

.careers-community__heading {
  font-family: var(--font-base);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0 0 var(--space-md);
}

.careers-community__body {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  color: rgba(var(--color-primary-rgb), 0.8);
  line-height: 1.7;
  max-width: 680px;
  margin: 0;
}

.careers-community__values {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-2xl);
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.careers-community__value {
  border-top: 1px solid var(--color-warmgrey-60);
  padding-top: var(--space-md);
}

.careers-community__value-title {
  font-family: var(--font-base);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 var(--space-sm);
  line-height: 1.3;
}

.careers-community__value-body {
  font-family: var(--font-reading);
  font-size: 1rem;
  color: rgba(var(--color-primary-rgb), 0.75);
  line-height: 1.7;
  margin: 0;
}


/* ============================================================
   ABOUT UX REFINEMENTS
   ------------------------------------------------------------
   Softer radii, default + hover shadows, hairline card borders,
   Sky-coloured focus outlines, improved utility-link hit areas.
   Scoped to About page sections only — does not affect the
   homepage, Research, Policy Centres, Experts, or any other
   template.
   ============================================================ */

/* --- Buttons: soft radius + tactile shadow -------------------- */

.youth-band__cta,
.about-research__emissary-cta {
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.06);
  transition:
    background 150ms ease-out,
    color 150ms ease-out,
    border-color 150ms ease-out,
    box-shadow 200ms ease-out,
    transform 200ms ease-out;
}

.youth-band__cta:hover,
.youth-band__cta:focus-visible,
.about-research__emissary-cta:hover,
.about-research__emissary-cta:focus-visible {
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.12);
  transform: translateY(-1px);
}

/* --- Cards: hairline border, default + hover shadow ----------- */

.about-research__grid .pub-card {
  border: 1px solid rgba(var(--color-neutral-rgb), 0.3);
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.06);
  overflow: hidden;
  transition:
    border-color 150ms ease-out,
    box-shadow 200ms ease-out,
    transform 200ms ease-out;
}

.about-research__grid .pub-card:hover,
.about-research__grid .pub-card:focus-within {
  border-color: rgba(var(--color-neutral-rgb), 0.48);
  box-shadow: 0 10px 28px rgba(var(--color-primary-rgb), 0.14);
  transform: translateY(-3px);
}

.about-research__emissary {
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.06);
}

/* Priority cards keep their artistic identity; soft radius +
   hover shadow without disturbing the inset Gold frame. */
.priority-card {
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.08);
  transition:
    transform 200ms ease-out,
    box-shadow 200ms ease-out;
}

.priority-card:hover,
.priority-card:focus-visible {
  box-shadow: 0 12px 28px rgba(var(--color-primary-rgb), 0.18);
}

.priority-card__frame {
  border-radius: 4px;
}

/* Story-excerpt editorial photograph matches the card language. */
.story-excerpt__image-frame {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.06);
}

/* --- Focus states: branded Sky outline, offset from element --- */

.about-hero a:focus-visible,
.about-hero button:focus-visible,
.mission-statement a:focus-visible,
.story-excerpt a:focus-visible,
.about-research a:focus-visible,
.about-research button:focus-visible,
.priorities-grid a:focus-visible,
.youth-band a:focus-visible,
.youth-band button:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Focus should not shift a white-bordered button's own border. */
.youth-band__cta--secondary:focus-visible,
.about-research__emissary-cta:focus-visible {
  outline-offset: 4px;
}

/* --- Utility links: generous line-height + comfortable hit area */

.mission-statement__link,
.story-excerpt__cta,
.about-research__see-all-link,
.priority-thread__link,
.about-hero__ticker-link {
  line-height: 1.65;
  padding-top: 6px;
  padding-bottom: 6px;
  display: inline-block;
}

/* ============================================================
   GLOBAL FOCUS-VISIBLE + FORM-INPUT FOCUS
   ------------------------------------------------------------
   Site-wide keyboard focus ring using the brand Sky token. Only
   shows for keyboard navigation (not mouse clicks) thanks to
   :focus-visible. Applied broadly so every interactive element
   — buttons, links, inputs, selects, textareas — has a
   consistent, brand-coloured focus indicator.
   ============================================================ */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

/* Form controls — use box-shadow so layout doesn't shift and the
   ring hugs the input border-radius correctly. */
input:not([type="hidden"]):focus-visible,
select:focus-visible,
textarea:focus-visible,
.newsletter-signup__input:focus-visible,
.newsletter-band__input:focus-visible {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(var(--color-indigo-rgb), 0.22);
}


/* ============================================================
   EXPERT BREADCRUMB + BACK LINK (single-expert.php)
   ============================================================ */

.expert-breadcrumb {
  padding: var(--space-md) 0 0;
}

.expert-back {
  padding: var(--space-xl) 0 var(--space-3xl);
  border-top: var(--hairline-light);
  margin-top: var(--space-xl);
}


/* ============================================================
   MEA FAQ ACCORDION BLOCK (mea-faq-accordion)
   ============================================================ */

.mea-faq {
  padding: var(--space-3xl) 0;
  background: var(--color-white);
}

.mea-faq__container {
  max-width: 860px;
}

.mea-faq__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-2xl);
}

.mea-faq__kicker {
  display: block;
  margin-bottom: var(--space-sm);
}

.mea-faq__heading {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: 300;
  color: var(--color-navy);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
}

.mea-faq__lede {
  font-family: var(--font-reading);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.75;
}

.mea-faq__group {
  margin-bottom: var(--space-2xl);
}

.mea-faq__group:last-child {
  margin-bottom: 0;
}

.mea-faq__group-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-gold);
}

.mea-faq__item {
  border-bottom: var(--hairline);
}

.mea-faq__q {
  margin: 0;
}

.mea-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md) 0;
  background: none;
  border: none;
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-navy);
  text-align: left;
  cursor: pointer;
  gap: var(--space-md);
  transition: color var(--transition-fast);
}

.mea-faq__toggle:hover,
.mea-faq__toggle[aria-expanded="true"] {
  color: var(--color-gold);
}

.mea-faq__q-text {
  flex: 1;
}

.mea-faq__icon {
  flex-shrink: 0;
  color: var(--color-gold);
  font-size: var(--text-xl);
  font-weight: 300;
  line-height: 1;
  width: 24px;
  text-align: center;
  transition: transform var(--transition-base);
}

.mea-faq__a {
  padding: 0 0 var(--space-md);
}

.mea-faq__a p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
  max-width: 720px;
  margin: 0 0 var(--space-sm);
}

.mea-faq__a p:last-child {
  margin-bottom: 0;
}

.mea-faq__footer {
  text-align: center;
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: var(--hairline-light);
}

.mea-faq__footer-title {
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--color-navy);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}

.mea-faq__footer-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 520px;
  margin: 0 auto var(--space-lg);
}

/* Dark-variant overrides so FAQ looks right on bg-variant-navy / green. */
.mea-faq.bg-variant-navy .mea-faq__toggle,
.mea-faq.bg-variant-green .mea-faq__toggle {
  color: var(--color-white);
}
.mea-faq.bg-variant-navy .mea-faq__a p,
.mea-faq.bg-variant-green .mea-faq__a p {
  color: rgba(255, 255, 255, 0.75);
}
.mea-faq.bg-variant-navy .mea-faq__item,
.mea-faq.bg-variant-green .mea-faq__item {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}


/* ============================================================
   MEA GIVING OPTIONS BLOCK (mea-giving-options)
   ============================================================ */

.mea-giving {
  padding: var(--space-3xl) 0;
}

.mea-giving__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-2xl);
}

.mea-giving__heading {
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl));
  font-weight: 300;
  color: var(--color-navy);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}

.mea-giving__lede {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: 1.75;
}

.mea-giving__grid {
  display: grid;
  gap: var(--space-lg);
  /* Single column by default — stack on phones + small tablets. */
  grid-template-columns: 1fr;
}

/* Two up at ≥720px, three up at ≥1024px. minmax with min(100%, N) is the
   "never overflow" pattern — grid tracks collapse on narrow viewports
   instead of blowing the parent width. */
@media (min-width: 720px) {
  .mea-giving__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .mea-giving__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mea-giving-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-xs);
  text-align: center;
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
  /* Critical on phones: stops a long CTA label / big word from forcing the
     card to be wider than the available track, which would spill horizontally. */
  min-width: 0;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.mea-giving-card--navy  { border-top-color: var(--color-navy); }
.mea-giving-card--green { border-top-color: var(--color-green); }

.mea-giving-card.is-featured {
  background: var(--color-sand-bg);
}

.mea-giving-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.mea-giving-card__kicker {
  display: block;
  margin-bottom: var(--space-md);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.mea-giving-card--navy  .mea-giving-card__kicker { color: var(--color-navy); }
.mea-giving-card--green .mea-giving-card__kicker { color: var(--color-green); }

.mea-giving-card__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.mea-giving-card__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 0 0 var(--space-lg);
  flex: 1;
}


/* ============================================================
   MEA EDITORIAL QUOTE BLOCK (mea-editorial-quote)
   ============================================================ */

.mea-eq {
  padding: var(--space-3xl) 0;
  background: var(--color-white);
}

.mea-eq__inner {
  max-width: 820px;
  text-align: center;
}

.mea-eq__quote {
  border-left: none;
  padding-left: 0;
  text-align: center;
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.mea-eq__attribution {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.mea-eq__cta {
  margin-top: var(--space-lg);
}


/* ============================================================
   MOBILE OVERFLOW GUARDS — DONATE PAGE + GLOBAL SAFETY NET
   ------------------------------------------------------------
   Stops any block from producing horizontal page scroll on phones
   (reported on the Donate page where the giving-options grid and
   the legacy stats-grid were spilling). Applied broadly so every
   section block on every page is contained.
   ============================================================ */

/* Every full-bleed section can't overflow the viewport horizontally. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* Give the stats band a CSS grid on narrow viewports so the four
   items stack predictably regardless of flex-basis arithmetic. */
@media (max-width: 768px) {
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }

  .stat-item {
    flex: none;
    padding: var(--space-md) var(--space-sm);
  }

  /* Divider pseudo only makes sense in a flex row; hide on mobile. */
  .stat-item + .stat-item::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  /* Giving card: extra breathing room at the smallest sizes. */
  .mea-giving-card {
    padding: var(--space-lg);
  }

  /* Editorial quote: size down on narrow screens. */
  .mea-eq__quote {
    font-size: var(--text-lg);
  }

  /* FAQ: tighten padding; prevent the question + icon from sharing
     a row that overflows when the question wraps. */
  .mea-faq__toggle {
    align-items: flex-start;
    gap: var(--space-sm);
  }
}

/* Any block CTA set to "width: 100%" via inline style should also
   respect its parent — belt and braces against an inline-style leak. */
.mea-giving-card .btn {
  max-width: 100%;
}


/* ============================================================
   CONTACT FORM 7 — inquiry-form template styles
   ============================================================ */

/* Wrapper */
.inquiry-form {
  width: 100%;
}

/* 2-column row — desktop */
.inquiry-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.inquiry-form__field--last {
  margin-bottom: var(--space-lg);
}

/* Labels */
.inquiry-form__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
  line-height: 1.4;
}

.inquiry-form__label .required {
  color: var(--color-gold);
}

/* CF7 injects a .wpcf7-form-control-wrap span around the input —
   make it block so the input sits on its own line. */
.inquiry-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Inputs / select */
.inquiry-form__input,
.inquiry-form__select {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-warmgrey-40);
  border-radius: var(--radius-xs);
  background: var(--color-white);
  color: var(--color-navy);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  line-height: 1.5;
  box-shadow: var(--shadow-xs);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  appearance: none;
  -webkit-appearance: none;
}

.inquiry-form__textarea {
  display: block;
  width: 100%;
  min-height: 140px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-warmgrey-40);
  border-radius: var(--radius-xs);
  background: var(--color-white);
  color: var(--color-navy);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  line-height: 1.5;
  resize: vertical;
  box-shadow: var(--shadow-xs);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.inquiry-form__input:focus,
.inquiry-form__select:focus,
.inquiry-form__textarea:focus {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-color: var(--color-navy);
  box-shadow: var(--shadow-sm);
}

/* Submit button */
.inquiry-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 0 1.75rem;
  margin-top: var(--space-xs);
  border: 2px solid var(--color-navy);
  border-radius: var(--radius-pill);
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fluid);
}

.inquiry-form__submit:hover {
  background: transparent;
  border-color: var(--color-gold);
  color: var(--color-gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.inquiry-form__submit:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Validation */
.inquiry-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-feedback-error);
}

.inquiry-form__input.wpcf7-not-valid,
.inquiry-form__select.wpcf7-not-valid,
.inquiry-form__textarea.wpcf7-not-valid {
  border-color: var(--color-feedback-error);
}

/* Response output */
.contact-form-wrap--plugin .wpcf7-response-output {
  margin: var(--space-md) 0 0;
  padding: var(--space-md);
  border: 1px solid var(--color-warmgrey-40);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.contact-form-wrap--plugin .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--color-feedback-success);
  background: var(--color-feedback-success-bg);
  color: var(--color-feedback-success-fg);
}

.contact-form-wrap--plugin .wpcf7 form.invalid .wpcf7-response-output,
.contact-form-wrap--plugin .wpcf7 form.failed .wpcf7-response-output,
.contact-form-wrap--plugin .wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--color-feedback-error);
  background: var(--color-feedback-error-bg);
  color: var(--color-feedback-error-fg);
}

/* Mobile: stack rows to 1 column, 16px font to prevent iOS zoom */

@media (max-width: 480px) {
  .contact-form-wrap--plugin {
    padding: var(--space-md);
  }

  .inquiry-form__row {
    grid-template-columns: 1fr;
  }

  .inquiry-form__input,
  .inquiry-form__select,
  .inquiry-form__textarea {
    font-size: 16px;
  }

  .inquiry-form__submit {
    width: 100%;
  }
}

/* ============================================================
   EVENTS & MEDIA ARCHIVES + SINGLE EPISODE
   Added for the Events / Media split. Tokens only — no new colours.
   ============================================================ */

/* ─── Shared utilities ─────────────────────────────────────── */
.is-hidden { display: none !important; }

.archive-empty {
  grid-column: 1 / -1;
  padding: var(--space-2xl) 0;
  color: var(--color-text-muted);
  font-size: var(--text-md);
}
.archive-empty a { color: var(--color-gold); }

.page-hero--archive { min-height: 240px; }

/* ─── Archive filter bar ───────────────────────────────────── */
.archive-filter-bar {
  border-bottom: var(--hairline);
  background: var(--color-white);
}
.archive-filter-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.archive-filter-bar--flush .archive-filter-bar__inner { padding-top: var(--space-sm); padding-bottom: var(--space-lg); }
.archive-filter-bar__selects {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.archive-filter-bar__search {
  flex-shrink: 0;
}

/* ─── Results header ───────────────────────────────────────── */
.archive-results-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin: var(--space-lg) 0 var(--space-md);
}
.archive-results-header .results-count {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.archive-clear {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-base);
}

.archive-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2xl);
}

/* ─── Events list ──────────────────────────────────────────── */
.event-list { display: flex; flex-direction: column; }

.event-row {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: var(--space-lg);
  align-items: start;
  padding: var(--space-lg) 0;
  border-top: var(--hairline);
}
.event-list .event-row:last-child { border-bottom: var(--hairline); }

/* Full-row click target */
.event-row__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.event-row > *:not(.event-row__link) { position: relative; }
.event-row__body { z-index: 0; }

.event-row__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  padding-top: 0.25rem;
}
.event-row__day {
  font-family: var(--font-feature);
  font-size: var(--text-3xl);
  color: var(--color-navy);
  line-height: 0.9;
}
.event-row__monthyear {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 0.4rem;
}

.event-row__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.event-row__status { color: var(--color-text-muted); }
.event-row--upcoming .event-row__status { color: var(--color-gold); }
.event-row__type { color: var(--color-navy); }
.event-row__fulldate { color: var(--color-text-muted); font-weight: 600; letter-spacing: 0.04em; text-transform: none; }
.event-row__sep { color: var(--color-warmgrey); }

.event-row__title {
  font-family: var(--font-base);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.25;
  margin-bottom: 0.4rem;
  transition: color var(--transition-fast);
}
.event-row--upcoming .event-row__title { font-weight: 700; }
.event-row:hover .event-row__title { color: var(--color-gold); }

.event-row__location {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}
.event-row__location svg { color: var(--color-gold); flex-shrink: 0; }

.event-row__summary {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 60ch;
}

.event-row__thumb {
  width: 200px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: var(--color-navy-8);
}
.event-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── Media: show introduction ─────────────────────────────── */
.media-show { padding: var(--space-3xl) 0; }
.media-show__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.media-show__label {
  display: block;
  font-family: var(--font-base);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
}
.media-show__desc {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}
.media-show__follow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.media-show__follow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border: var(--hairline);
  border-radius: var(--radius-pill);
  transition: all var(--transition-fast);
}
.media-show__follow-link:hover { background: var(--color-navy); color: var(--color-white); border-color: var(--color-navy); }
.media-show__follow-link svg { flex-shrink: 0; }

.media-show__aside { display: flex; flex-direction: column; gap: var(--space-md); }
.media-show__cover {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: var(--color-navy);
}
.media-show__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-show__cover-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-feature);
  font-size: var(--text-xl);
  text-align: center;
  padding: var(--space-lg);
}
.media-show__spotify { align-self: start; }

/* ─── Media: episode list + row ─────────────────────────────── */
.episode-list { display: flex; flex-direction: column; }

.episode-row {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-md) 0;
  border-top: var(--hairline);
  transition: background var(--transition-fast);
}
.episode-list .episode-row:last-child { border-bottom: var(--hairline); }

.episode-row__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.episode-row > *:not(.episode-row__link) { position: relative; }

.episode-row__cover {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--color-navy-8);
}
.episode-row__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-slow); }
.episode-row:hover .episode-row__cover img { transform: scale(1.04); }
.episode-row__cover-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-navy); color: var(--color-white);
}

.episode-row__body { min-width: 0; }
.episode-row__show {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.3rem;
}
.episode-row__title {
  font-family: var(--font-base);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.3;
  margin-bottom: 0.4rem;
  transition: color var(--transition-fast);
}
.episode-row:hover .episode-row__title { color: var(--color-gold); }
.episode-row__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.episode-row__date {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   SINGLE MEDIA EPISODE
   ============================================================ */

.episode-breadcrumb { padding: var(--space-md) 0; border-bottom: var(--hairline-light); }
.episode-breadcrumb__list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; font-size: var(--text-sm); color: var(--color-text-muted); }
.episode-breadcrumb__list li:not(:last-child)::after { content: '/'; margin-left: 0.5rem; color: var(--color-warmgrey); }
.episode-breadcrumb__list a { color: var(--color-navy); text-decoration: none; }
.episode-breadcrumb__list a:hover { color: var(--color-gold); }

/* Hero */
.episode-hero {
  position: relative;
  background-color: var(--color-navy);
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  padding: var(--space-4xl) 0;
}
.episode-hero--solid { padding: var(--space-3xl) 0; }
.episode-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--color-primary-rgb),0.55) 0%, rgba(var(--color-primary-rgb),0.85) 100%);
}
.episode-hero--solid .episode-hero__overlay { background: none; }
.episode-hero__inner { position: relative; text-align: center; max-width: 880px; margin-inline: auto; }
.episode-hero__show {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-md);
}
.episode-hero__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}
.episode-hero__meta { font-size: var(--text-md); color: rgba(255,255,255,0.8); }

/* Body + sidebar */
.episode-body { padding: var(--space-3xl) 0; }
.episode-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 720px) 280px;
  gap: var(--space-2xl);
  justify-content: center;
}
.episode-main { min-width: 0; }
.episode-prose { font-family: var(--font-reading); font-size: 1.1875rem; line-height: 1.75; color: var(--color-text); }
.episode-prose > *:first-child { margin-top: 0; }

.episode-player { margin: var(--space-xl) 0; }
.episode-player iframe { display: block; }
.episode-video { margin: var(--space-xl) 0; }
.episode-video__frame { position: relative; }
.episode-video__frame iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 12px; }

.episode-listen-links {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: var(--hairline-light);
  font-size: var(--text-sm);
}
.episode-listen-links__label { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); font-size: var(--text-xs); }
.episode-listen-links a { color: var(--color-gold); font-weight: 600; text-decoration: none; }
.episode-listen-links a:hover { text-decoration: underline; }

/* Sidebar rail */
.episode-rail { align-self: start; position: sticky; top: calc(var(--header-height) + 1.5rem); }
.episode-rail__meta { display: flex; flex-direction: column; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: var(--hairline); }
.episode-rail__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.35rem; }
.episode-rail__value { font-size: var(--text-sm); color: var(--color-navy); }
.episode-rail__topics { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.episode-rail__share { padding: var(--space-md) 0; border-bottom: var(--hairline); }
.episode-rail__share-icons { display: flex; gap: 0.5rem; }
.episode-rail__share-icons a,
.episode-rail__share-icons button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: var(--hairline); border-radius: var(--radius-circle);
  background: var(--color-white); color: var(--color-navy);
  cursor: pointer; transition: all var(--transition-fast);
}
.episode-rail__share-icons a:hover,
.episode-rail__share-icons button:hover { background: var(--color-navy); color: var(--color-white); border-color: var(--color-navy); }
.episode-rail__back { display: inline-block; margin-top: var(--space-md); font-weight: 600; color: var(--color-navy); text-decoration: none; }
.episode-rail__back:hover { color: var(--color-gold); }

/* Guests */
.episode-guests { padding: var(--space-2xl) 0; background: var(--color-sand-bg); }
.episode-section-head { margin-bottom: var(--space-xl); }
.episode-guests__row { display: flex; flex-wrap: wrap; gap: var(--space-xl); }
.episode-guest { width: 180px; text-align: center; }
.episode-guest__photo {
  display: block; width: 120px; height: 120px; margin: 0 auto var(--space-sm);
  border-radius: var(--radius-circle); overflow: hidden; background: var(--color-navy-8);
}
.episode-guest__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.episode-guest__photo-placeholder {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: var(--color-navy); color: var(--color-white); font-family: var(--font-feature); font-size: var(--text-xl);
}
.episode-guest__name { font-size: var(--text-md); font-weight: 600; line-height: 1.25; margin-bottom: 0.25rem; }
.episode-guest__name a { color: var(--color-navy); text-decoration: none; }
.episode-guest__name a:hover { color: var(--color-gold); }
.episode-guest__title { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.4; }

/* Related research */
.episode-related { padding: var(--space-2xl) 0; }
.episode-related__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xl); }
.episode-related__more { font-weight: 600; color: var(--color-gold); text-decoration: none; white-space: nowrap; }
.episode-related__more:hover { text-decoration: underline; }
.episode-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }


/* ─────────────────────────────────────────────────────────────────────────
   GOVERNMENT RESOURCES PAGE  (page-templates/page-government-resources.php)
   ───────────────────────────────────────────────────────────────────────── */

/* Hero — left-aligned, white, no image (matches the Contact hero) */
.gov-hero {
  padding: var(--space-3xl) 0;
  background: var(--color-white);
}

/* Two-column body — engagement framing (60%) + contact block (40%).
   Slightly reduced top padding tightens the gap below the hero on desktop. */
.gov-resources {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.gov-resources__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .gov-resources__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* framing 60% · contact 40% */
    gap: var(--space-2xl);
    align-items: start;
  }
}

.gov-resources__intro {
  font-family: var(--font-reading);
  font-size: 19px;
  line-height: 1.7;
  color: var(--color-text);
  max-width: 600px;
  margin-bottom: var(--space-xl);
}

.gov-resources__subheading {
  font-family: var(--font-base);
  font-size: var(--text-lg);
  font-weight: 600; /* Avenir Demi */
  color: var(--color-navy);
  margin-bottom: var(--space-md);
}

/* "How We Can Help" — indented rows, hairline separators, no bullets */
.gov-help-list {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  border-top: var(--hairline);
  max-width: 600px;
}

.gov-help-list__item {
  padding: var(--space-md) 0 var(--space-md) var(--space-md);
  border-bottom: var(--hairline);
  font-family: var(--font-reading);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}

.gov-help-list__item a,
.gov-resources__resources a {
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-gold);
  text-decoration: none;
}

.gov-help-list__item a:hover,
.gov-resources__resources a:hover {
  color: var(--color-gold);
}

.gov-resources__resources {
  font-family: var(--font-reading);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 600px;
}

/* WYSIWYG fields output <p> wrappers — strip their default margins so the
   list rows and the resources line keep their intended spacing. */
.gov-help-list__item p,
.gov-resources__resources p {
  margin: 0;
}

/* Right column — contact block (no border, no rounded corners) */
.gov-contact-block {
  background: var(--color-sand-bg);
  padding: var(--space-xl);
  border-radius: 0;
}

.gov-contact-block__label {
  display: block;
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 500; /* Avenir Medium */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-warmgrey);
  margin-bottom: var(--space-md);
}

.gov-contact-block__name {
  font-family: var(--font-base);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.25rem;
}

.gov-contact-block__title {
  font-family: var(--font-reading);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.gov-contact-block__email {
  margin-bottom: var(--space-lg);
}

.gov-contact-block__email a {
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-gold);
  text-decoration: none;
  font-size: var(--text-sm);
}

.gov-contact-block__email a:hover {
  color: var(--color-gold);
}

.gov-contact-block__cta {
  width: 100%;
}

/* ── Engagement carousel (standalone, centered section) ─────────────────── */
.gov-engagement {
  padding: var(--space-3xl) 0;
  background: var(--color-white);
}

/* Section heading — left-aligned, with a short gold underline */
.gov-resources__label {
  font-family: var(--font-base);
  font-size: 32px;
  font-weight: 600; /* Avenir Demi */
  color: var(--color-navy);
  margin: 0 0 var(--space-xl);
  padding-bottom: var(--space-sm);
}

.gov-resources__label::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: var(--space-sm);
  background: var(--color-gold);
}

/* Carousel — centred, held at the size it had as the right column.
   Sharp corners on the wrapper; full-width on phones (cap > viewport). */
.gov-carousel {
  max-width: 600px;
  margin-inline: auto;
  border-radius: 0;
}

/* One slide visible at a time; user-driven scroll-snap (no autoplay) */
.gov-carousel__viewport {
  overflow: hidden;
}

.gov-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gov-carousel__track::-webkit-scrollbar {
  display: none;
}

.gov-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
}

/* Landscape photo filling the carousel column, sharp corners, no border.
   3:2 is a balanced proportion; the column width keeps the height in check. */
.gov-carousel__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0;
  background: var(--color-navy-8);
}

.gov-carousel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tight bottom-to-top shadow so the overlaid caption stays readable.
   Kept low (≈40% of the image) and transparent up top so it reads as a
   gentle gradient, not a panel. */
.gov-carousel__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.2) 32%, rgba(0, 0, 0, 0) 58%);
}

.gov-carousel__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-feature);
  font-size: var(--text-2xl);
  letter-spacing: 0.04em;
}

/* Caption overlaid on the photo, bottom-right quadrant, white italic
   Garamond. A tight bottom gradient (on .gov-carousel__media::after) plus a
   soft text-shadow keep it legible on any image. Two lines maximum. */
.gov-carousel__caption {
  position: absolute;
  z-index: 1; /* sit above the gradient scrim */
  right: var(--space-lg);
  bottom: var(--space-lg);
  left: 50%;
  text-align: right;
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Controls below the image: dots bottom-left, arrows bottom-right */
.gov-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.gov-carousel__dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gov-carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: var(--radius-circle);
  background: var(--color-warmgrey);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.gov-carousel__dot:hover {
  opacity: 0.8;
}

.gov-carousel__dot.is-active {
  background: var(--color-navy);
  opacity: 1;
  transform: scale(1.2);
}

/* Circular arrow buttons — thin 1px border, white background, follow the
   site's circular-UI pattern (e.g. share icons) */
.gov-carousel__arrows {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.gov-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-warmgrey-40);
  border-radius: var(--radius-circle);
  background: var(--color-white);
  color: var(--color-navy);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.gov-carousel__arrow:hover {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

.gov-carousel__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}


/* ── Government Resources — mobile pass ────────────────────────────────────
   Placed at the END of the gov section on purpose: these overrides target
   elements whose base rules appear above, so equal-specificity rules must come
   later in source order to win on small screens. */
@media (max-width: 767px) {
  .gov-hero {
    padding: var(--space-xl) 0 var(--space-md);
  }

  .gov-resources {
    padding-top: var(--space-md);
    padding-bottom: var(--space-2xl);
  }

  .gov-engagement {
    padding: var(--space-2xl) 0;
  }

  .gov-resources__intro {
    font-size: 17px;
  }

  .gov-contact-block {
    padding: var(--space-lg);
  }

  .gov-resources__label {
    font-size: 26px;
    margin-bottom: var(--space-md);
  }

  /* Caption: span the full width, left-aligned, and unclamped so the whole
     caption is readable. Fluid size scales with the phone width (capped below
     the desktop 18px) so it stays legible without dominating the small photo. */
  .gov-carousel__caption {
    left: var(--space-md);
    right: var(--space-md);
    bottom: var(--space-md);
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.4;
    text-align: left;
    display: block; /* drop the desktop 2-line clamp */
    overflow: visible;
  }

  /* Slightly smaller arrow buttons to match the tighter layout. */
  .gov-carousel__arrow {
    width: 36px;
    height: 36px;
  }
}


/* ============================================================
   ENGAGEMENT FEATURE BLOCK (acf/mea-engagement-feature)
   Two-column homepage section: title + body on the left, a compact
   carousel on the right. The carousel reuses every .gov-carousel rule
   above; the overrides here just shrink it to fit a half-width column.
   ============================================================ */
.engagement-feature {
  padding: var(--space-3xl) 0;
  background: var(--color-white);
}

.engagement-feature__grid {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: var(--space-2xl);
  align-items: center;
}

.engagement-feature__intro {
  max-width: 460px;
}

.engagement-feature__heading {
  font-family: var(--font-base);
  font-size: clamp(var(--text-xl), 3vw, 2.5rem);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
}

.engagement-feature__heading::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: var(--space-md);
  background: var(--color-gold);
}

.engagement-feature__body {
  font-family: var(--font-base);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.engagement-feature__link {
  display: inline-block;
  font-family: var(--font-base);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--transition-fast);
}

.engagement-feature__link:hover {
  color: var(--color-gold);
}

/* Compact carousel: fill the column instead of the standalone 600px cap. */
.engagement-feature__carousel .gov-carousel {
  max-width: 100%;
  margin-inline: 0;
}

.engagement-feature__carousel .gov-carousel__caption {
  font-size: 16px;
}

@media (max-width: 767px) {
  .engagement-feature {
    padding: var(--space-2xl) 0;
  }

  .engagement-feature__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .engagement-feature__intro {
    max-width: none;
  }

  .engagement-feature__heading {
    font-size: var(--text-xl);
  }
}


/* ============================================================
   PRESS RELEASES (archive + single)
   Reuses .page-hero, .pub-header, .pub-hero-image, .pub-card,
   .research-grid, .research-filter-bar and .pub-sidebar. Only
   the press-release-specific accents are defined here.
   ============================================================ */

/* Hero CTA → Media Contact anchor */
.page-hero__cta {
  margin-top: var(--space-md);
}

/* Press release title is slightly smaller than a publication title */
.single-press_release .pub-header__title {
  font-size: clamp(2rem, 3vw, 2.5rem);
}

/* Hero image: ratio-controlled crop, slightly more panoramic than publication hero */
.single-press_release .pub-hero-image__img {
  aspect-ratio: 16 / 6;
  max-height: none;
}

/* "More Press Releases" band — full container width so the 3 cards breathe */
.pr-more-releases {
  padding: var(--space-2xl) 0 var(--space-3xl);
  border-top: var(--hairline);
  background: var(--color-sand-bg);
}

.pr-more-releases__heading {
  font-family: var(--font-base);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-xl);
}

.pr-more-releases .research-grid {
  margin-bottom: 0;
}

/* Single header: eyebrow tag + release date inline */
.pr-eyebrow-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.pr-eyebrow-row .pub-header__content-tag {
  margin-bottom: 0;
}

.pr-eyebrow-date {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* "For Immediate Release" label */
.pr-immediate-release {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-navy);
  background: var(--color-sand-bg);
  border: var(--hairline);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  margin-bottom: var(--space-md);
}

/* Dateline lead-in before the body */
.pr-dateline {
  font-family: var(--font-base);
  font-size: var(--text-md);
  color: var(--color-navy);
  margin-bottom: var(--space-md);
}

.pr-dateline strong {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Body + right-hand metadata sidebar (main first, rail right) */
.pub-layout--press {
  grid-template-columns: 1fr 300px;
}

.pr-meta__value {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0;
  line-height: 1.5;
}

.pr-meta__value + .pr-meta__value {
  margin-top: 2px;
}

.pr-meta__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0 0 2px;
}

/* Related topics row beneath the body */
.pr-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--hairline);
}

/* Media Contact block — bordered callout (matches .pub-citation pattern) */
.pr-media-contact {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.pr-media-contact__callout {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-white);
  border: var(--hairline);
  border-left: 3px solid var(--color-gold);
}

.pr-media-contact__heading {
  font-family: var(--font-base);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 var(--space-xs);
}

.pr-media-contact__intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
}

.pr-media-contact__person {
  margin: 0;
  line-height: 1.6;
}

.pr-media-contact__name {
  display: block;
  font-weight: 600;
  color: var(--color-navy);
}

.pr-media-contact__title {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pr-media-contact__email {
  display: inline-block;
  font-weight: 600;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-gold);
}

.pr-media-contact__email:hover {
  color: var(--color-gold);
}

/* ── Long-form body: blockquote / pullquote / speaker attribution ──
   Gutenberg blocks (.wp-block-quote / .wp-block-pullquote) were previously
   unstyled inside .content-body. Style them to match the site .pull-quote
   pattern so press releases (and all editor content) render consistently. */
.content-body blockquote,
.publication-body blockquote,
.content-body .wp-block-quote,
.publication-body .wp-block-quote {
  font-family: var(--font-feature);
  font-size: clamp(var(--text-lg), 2.2vw, var(--text-xl));
  font-style: italic;
  color: var(--color-navy);
  line-height: 1.45;
  border-left: 3px solid var(--color-gold);
  padding-left: var(--space-lg);
  margin: var(--space-lg) 0;
}

.content-body blockquote cite,
.publication-body blockquote cite,
.content-body .wp-block-quote cite,
.publication-body .wp-block-quote cite {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-base);
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.content-body .wp-block-pullquote,
.publication-body .wp-block-pullquote {
  border-top: 2px solid var(--color-gold);
  border-bottom: 2px solid var(--color-gold);
  padding: var(--space-lg) 0;
  margin: var(--space-xl) 0;
  text-align: center;
}

.content-body .wp-block-pullquote blockquote,
.publication-body .wp-block-pullquote blockquote {
  border-left: none;
  padding-left: 0;
  margin: 0;
}


/* ============================================================
   JOB APPLICATION PAGE  (page-templates/page-apply.php)
   ============================================================ */

/* ── Page layout ─────────────────────────────────────────── */
.apply-body {
  padding: var(--space-3xl) 0;
}

.apply-body__inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.apply-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.apply-sidebar__box {
  padding: var(--space-lg);
  background: var(--color-sand-bg);
  border: 1px solid var(--color-warmgrey-40);
  border-radius: var(--radius-xs);
}

.apply-sidebar__heading {
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-warmgrey-60);
}

.apply-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.apply-sidebar__list li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.apply-sidebar__box--contact {
  background: var(--color-navy);
  border-color: transparent;
}

.apply-sidebar__contact-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 var(--space-xs);
}

.apply-sidebar__contact-link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
  border-bottom: 1px solid var(--color-gold);
  word-break: break-all;
  transition: color var(--transition-fast);
}

.apply-sidebar__contact-link:hover {
  color: var(--color-gold);
}

.apply-sidebar__back {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.apply-sidebar__back:hover {
  color: var(--color-navy);
}

/* ── Form wrapper ─────────────────────────────────────────── */
.apply-form-wrap {
  background: var(--color-white);
  border: 1px solid var(--color-warmgrey-40);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-xs);
  padding: var(--space-xl) var(--space-2xl);
}

/* ── CF7 form: .app-form class (add to CF7 Additional CSS) ── */
.app-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.app-form__row {
  display: grid;
  gap: var(--space-md);
}

.app-form__row--2col {
  grid-template-columns: 1fr 1fr;
}

.app-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.app-form__label {
  font-family: var(--font-base);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  display: block;
}

.app-form__label abbr {
  color: var(--color-gold);
  text-decoration: none;
  margin-left: 2px;
}

.app-form__hint {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
  margin-left: var(--space-xs);
}

/* Department field (rendered by page template, sits above CF7 form) */
.app-form__field--dept {
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-warmgrey-40);
}

.app-dept-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-sm);
}

/* CF7 wpautop injects <br>/<p> between the labels, which breaks the flex
   row and stacks the pills. Neutralise both so they stay inline. */
.app-dept-radios br {
  display: none;
}

.app-dept-radios p {
  display: contents;
  margin: 0;
}

.app-dept-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 1rem;
  border: 1px solid var(--color-warmgrey-40);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-white);
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
  user-select: none;
}

.app-dept-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.app-dept-option:hover {
  border-color: var(--color-navy);
  color: var(--color-navy);
}

/* Selected state — driven by JS (.is-selected) with :has() as progressive
   enhancement, so the highlight works in every browser. */
.app-dept-option.is-selected,
.app-dept-option:has(input:checked) {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
  box-shadow: var(--shadow-xs);
}

.app-dept-empty {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Hidden CF7 text input — visually invisible but still submitted.
   Using sr-only technique so CF7 still validates it as required. */
.app-form__position-hidden,
.app-form input[name="position"].wpcf7-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Visible select injected by apply-form.js in place of the hidden input */
.app-form__position-select {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 2.5rem 0 1rem;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-navy);
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23152238'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--color-warmgrey-40);
  border-radius: var(--radius-xs);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-form__position-select:focus {
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(var(--color-indigo-rgb), 0.18);
}

.app-form__position-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* CF7 injects a span wrapper around every control */
.app-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Text / email inputs */
.app-form input[type="text"],
.app-form input[type="email"] {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 1rem;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-warmgrey-40);
  border-radius: var(--radius-xs);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}

.app-form input[type="text"]:focus,
.app-form input[type="email"]:focus {
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(var(--color-indigo-rgb), 0.18);
}

.app-form input[type="text"]::placeholder,
.app-form input[type="email"]::placeholder {
  color: var(--color-warmgrey);
}

/* Select */
.app-form select {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 2.5rem 0 1rem;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-navy);
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23152238'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--color-warmgrey-40);
  border-radius: var(--radius-xs);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}

.app-form select:focus {
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(var(--color-indigo-rgb), 0.18);
}

/* Textarea */
.app-form textarea {
  display: block;
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-warmgrey-40);
  border-radius: var(--radius-xs);
  outline: none;
  resize: vertical;
  min-height: 180px;
  line-height: 1.6;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}

.app-form textarea:focus {
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(var(--color-indigo-rgb), 0.18);
}

.app-form textarea::placeholder {
  color: var(--color-warmgrey);
}

/* File input */
.app-form input[type="file"] {
  display: block;
  width: 100%;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-navy);
  padding: 0.75rem 1rem;
  background: var(--color-sand-bg);
  border: 1px dashed var(--color-warmgrey-40);
  border-radius: var(--radius-xs);
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.app-form input[type="file"]:hover {
  border-color: var(--color-navy);
  background: var(--color-white);
}

/* Privacy note */
.app-form__privacy {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

.app-form__privacy a {
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-gold);
}

/* Submit button */
.app-form input[type="submit"],
.app-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 2.5rem;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-navy);
  color: var(--color-white);
  border: 2px solid var(--color-navy);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-fluid);
  align-self: flex-start;
  margin-top: var(--space-sm);
}

.app-form input[type="submit"]:hover,
.app-form .wpcf7-submit:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.app-form input[type="submit"]:focus-visible,
.app-form .wpcf7-submit:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* CF7 validation */
.app-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.375rem;
  font-size: var(--text-xs);
  color: var(--color-feedback-error);
}

.app-form input.wpcf7-not-valid,
.app-form select.wpcf7-not-valid,
.app-form textarea.wpcf7-not-valid {
  border-color: var(--color-feedback-error);
}

/* CF7 response messages */
.apply-form-wrap .wpcf7-response-output {
  margin: var(--space-md) 0 0;
  padding: 0.875rem var(--space-md);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  line-height: 1.6;
  border-radius: var(--radius-xs);
  border: 1px solid;
}

.apply-form-wrap .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--color-feedback-success);
  background: var(--color-feedback-success-bg);
  color: var(--color-feedback-success-fg);
}

.apply-form-wrap .wpcf7 form.invalid .wpcf7-response-output,
.apply-form-wrap .wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--color-feedback-error);
  background: var(--color-feedback-error-bg);
  color: var(--color-feedback-error-fg);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .apply-body__inner {
    grid-template-columns: 1fr;
  }

  .apply-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  .apply-sidebar__back {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .apply-form-wrap {
    padding: var(--space-lg);
  }

  .apply-sidebar {
    grid-template-columns: 1fr;
  }

  .app-form__row--2col {
    grid-template-columns: 1fr;
  }

  /* Prevent iOS zoom on focus */
  .app-form input[type="text"],
  .app-form input[type="email"],
  .app-form select,
  .app-form textarea {
    font-size: 16px;
  }
}


/* ============================================================
   PUBLICATION BODY — IMAGE ALIGNMENT & BREAKOUT
   ------------------------------------------------------------
   Scoped strictly to the publication reading column
   (.content-body.publication-body) so it cannot leak to other
   .content-body uses (e.g. press releases). Handles BOTH the
   classic-editor classes carried by legacy publication_body
   content (.alignleft/.alignright/.aligncenter, .wp-caption) AND
   the block-editor classes produced by the native editor
   (figure.wp-block-image, .alignwide, .alignfull, figcaption,
   .wp-element-caption).

   Reading measure: 720px (matches .pub-main).
   .alignwide breaks out to 960px; .alignfull to the viewport —
   both centred on the reading column. Captions: Warm Grey,
   italic, 13px. Every image has border-radius: 0 (design system,
   non-negotiable). Gold appears only on the existing pull-quote
   left border and inline link-hover underline — added here for
   the link-hover case inside the body column.
   ============================================================ */

/* Default block & classic images sit at the reading measure, centred. */
.content-body.publication-body img {
  height: auto;
  border-radius: 0;            /* non-negotiable: no rounded corners */
}

.content-body.publication-body figure,
.content-body.publication-body .wp-block-image,
.content-body.publication-body .wp-caption {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  max-width: 100%;
}

/* Block image without an explicit alignment: full column width, centred. */
.content-body.publication-body figure.wp-block-image,
.content-body.publication-body .wp-block-image > img {
  display: block;
  margin-inline: auto;
}

.content-body.publication-body figure.wp-block-image img {
  width: 100%;
}

/* ── Captions ── */
.content-body.publication-body figcaption,
.content-body.publication-body .wp-element-caption,
.content-body.publication-body .wp-caption-text {
  margin-top: var(--space-xs);
  font-family: var(--font-base);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-warmgrey);          /* Warm Grey #A1AAAD */
  text-align: left;
}

/* ── Float-aligned (classic editor + block left/right) ── */
.content-body.publication-body .alignleft {
  float: left;
  margin: 0.35rem var(--space-lg) var(--space-md) 0;
  max-width: 50%;
}

.content-body.publication-body .alignright {
  float: right;
  margin: 0.35rem 0 var(--space-md) var(--space-lg);
  max-width: 50%;
}

.content-body.publication-body .alignleft img,
.content-body.publication-body .alignright img {
  width: 100%;
}

/* ── Centred (classic + block) ── */
.content-body.publication-body .aligncenter {
  display: block;
  margin-inline: auto;
  text-align: center;
}

.content-body.publication-body .aligncenter > img {
  margin-inline: auto;
}

/* ── Wide breakout → 960px, centred on the reading column ──
   margin-left:50% + translateX(-50%) pins the element's centre to
   the column's centre line independent of the column's own width,
   so the breakout stays balanced over the text. Capped to the
   viewport so it never forces horizontal scroll. */
.content-body.publication-body .alignwide {
  width: min(960px, 92vw);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.content-body.publication-body .alignwide img {
  width: 100%;
}

/* ── Full breakout → viewport width, centred on the reading column.
   html/body carry overflow-x: clip (see mobile overflow guards), so
   any edge overhang is clipped rather than producing a scrollbar. */
.content-body.publication-body .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.content-body.publication-body .alignfull img {
  width: 100%;
}

/* Clear floats so headings / following blocks don't wrap under a float. */
.content-body.publication-body::after {
  content: '';
  display: block;
  clear: both;
}

.content-body.publication-body h2,
.content-body.publication-body h3 {
  clear: both;
}

/* Inline links inside the body column: Gold underline on hover only. */
.content-body.publication-body a:not(.btn):hover {
  color: var(--color-gold);
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-underline-offset: 3px;
}

/* ── Responsive, two-tier ──
   The publication layout collapses to a single column (TOC rail removed) at
   ≤1024px — see responsive.css. So the wide/full breakouts must also collapse
   there, otherwise their negative-margin/translate shift overflows the now
   centred column. Floats stay on tablet (they read as a proper magazine layout
   in a ~700px column) but stack on phones. */

/* Tablet & down: kill the breakout shift; wide/full sit at the column measure. */
@media (max-width: 1024px) {
  .content-body.publication-body .alignwide,
  .content-body.publication-body .alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }
}

/* Phones: left/right floats become full-width, centred, stacked images with
   even vertical rhythm — a normal mobile article flow. */
@media (max-width: 768px) {
  .content-body.publication-body .alignleft,
  .content-body.publication-body .alignright {
    float: none;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: var(--space-lg) auto;
  }

  .content-body.publication-body .alignleft img,
  .content-body.publication-body .alignright img {
    width: 100%;
  }

  /* Keep captions tucked directly under their (now full-width) image. */
  .content-body.publication-body .alignleft figcaption,
  .content-body.publication-body .alignright figcaption,
  .content-body.publication-body .wp-caption-text {
    text-align: left;
  }
}


/* ============================================================
   PUBLICATION BODY — RESPONSIVE MEDIA (embeds, tables, sized images)
   ------------------------------------------------------------
   The alignment rules above only cover aligned IMAGES. A real
   article body also contains embeds (YouTube/Spotify/etc.),
   tables, code, and — critically for the legacy classic-editor
   content stored in publication_body — images and [caption]
   wrappers that carry INLINE pixel widths (style="width:NNNpx" /
   width="NNN"). Class rules can't beat an inline width, so on
   phones those are normalised here with the scoped selector
   (high specificity) plus !important only where an inline style
   must be overridden. Scoped to .content-body.publication-body.
   ============================================================ */

/* Nothing in the body column may exceed it horizontally. */
.content-body.publication-body img,
.content-body.publication-body iframe,
.content-body.publication-body video,
.content-body.publication-body table,
.content-body.publication-body pre {
  max-width: 100%;
}

/* Responsive embeds (Gutenberg embed blocks + raw iframes). */
.content-body.publication-body .wp-block-embed,
.content-body.publication-body figure[class*="wp-block-embed"] {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.content-body.publication-body .wp-block-embed__wrapper {
  position: relative;
}

/* Video/audio providers → fluid 16:9; the wrapper keeps the ratio so the
   iframe scales with the column instead of overflowing on phones. */
.content-body.publication-body .wp-block-embed.is-type-video .wp-block-embed__wrapper,
.content-body.publication-body .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
  aspect-ratio: 16 / 9;
}

.content-body.publication-body .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe,
.content-body.publication-body .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Any bare iframe (e.g. pasted Spotify/SoundCloud) fills the column width. */
.content-body.publication-body iframe {
  width: 100%;
  border: 0;
}

/* Tables: let wide tables scroll horizontally inside the column rather than
   stretch the page. Gutenberg wraps tables in figure.wp-block-table; classic
   editor emits a bare <table>, so handle both. */
.content-body.publication-body figure.wp-block-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.content-body.publication-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.content-body.publication-body th,
.content-body.publication-body td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-warmgrey-40);
  text-align: left;
}

/* Code / preformatted blocks scroll instead of overflowing. */
.content-body.publication-body pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Phones: normalise inline-sized legacy media to the full column ──
   Classic-editor images, resized block images, and [caption] wrappers
   carry inline widths that otherwise stay fixed (and look stranded) on a
   narrow screen. Force them fluid. !important is required solely to beat
   the inline style="width:…" the editor wrote into the markup. */
@media (max-width: 768px) {
  .content-body.publication-body img,
  .content-body.publication-body figure,
  .content-body.publication-body .wp-block-image,
  .content-body.publication-body .wp-block-image.is-resized,
  .content-body.publication-body .wp-caption {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
  }

  /* Centre any standalone media and give it consistent vertical rhythm. */
  .content-body.publication-body figure,
  .content-body.publication-body .wp-caption {
    margin-left: 0;
    margin-right: 0;
  }
}


/* ============================================================
   PUBLICATION ARTICLE — OVERFLOW CONTAINMENT (grid blowout fix)
   ------------------------------------------------------------
   The article body sits in the 1fr track of .pub-layout--article.
   Grid AND flex children default to min-width:auto, so ONE wide
   descendant (a full-width image, an embed iframe, a long URL, a
   <pre>) stops the track from shrinking and pushes the entire
   column — body text, images, and the TOC rail — wider than the
   phone viewport. min-width:0 lets the track shrink to the screen;
   overflow-wrap breaks long strings instead of forcing width.
   This is the root mobile-fit fix for single publications.
   ============================================================ */

.pub-layout--article,
.pub-layout--article > * {
  min-width: 0;
}

.pub-main {
  min-width: 0;
  overflow-wrap: break-word;
}

.content-body.publication-body {
  min-width: 0;
  overflow-wrap: break-word;
}

/* No direct child of the body column may exceed it. */
.content-body.publication-body > * {
  max-width: 100%;
}

/* TOC rail (and its links) must also stay within the screen once the
   layout collapses to a single column at ≤1024px. */
@media (max-width: 1024px) {
  .pub-side-rail,
  .pub-side-rail__toc,
  .pub-side-rail__toc-list {
    min-width: 0;
    max-width: 100%;
  }

  .pub-side-rail__toc-list li a {
    overflow-wrap: break-word;
  }
}


/* ============================================================
   PUBLICATION BODY — CAPTION WIDTH FIX
   ------------------------------------------------------------
   WordPress core styles a centred image figure (and the classic
   [caption] wrapper) with display:table + fit-content width, so
   the figure shrink-wraps to the image and the caption inherits
   that narrow width — it reads as a cramped strip on the left.
   For NON-floated figures (default, centred, captioned), let the
   figure span the reading column so the caption runs the full
   text width, left-aligned. Floated (.alignleft/.alignright) and
   .alignwide/.alignfull figures keep their own widths — excluded.
   ============================================================ */

.content-body.publication-body figure.wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull),
.content-body.publication-body .wp-caption:not(.alignleft):not(.alignright) {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Image keeps its own size, centred over the full-width figure; the caption
   below runs the full column width and reads left-aligned. */
.content-body.publication-body figure.wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) > img,
.content-body.publication-body .wp-caption:not(.alignleft):not(.alignright) img {
  display: block;
  margin-inline: auto;
}

.content-body.publication-body figcaption,
.content-body.publication-body .wp-element-caption,
.content-body.publication-body .wp-caption-text {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: left;
}


/* ============================================================
   PUBLICATION BODY — EXPANDED GUTENBERG PALETTE
   ------------------------------------------------------------
   Frontend styles for the layout blocks enabled in the
   Publications editor (columns, group, cover, buttons, table,
   separator, details, footnotes) plus the sand utility panels
   used by the MEA Publication block patterns. Scoped strictly
   to .content-body.publication-body (and the pattern classes)
   so nothing leaks to other surfaces. Editor-canvas mirrors of
   these rules live in assets/css/editor-style.css — keep both
   in sync.
   ============================================================ */

/* ── Vertical rhythm for structural blocks ── */
.content-body.publication-body .wp-block-group,
.content-body.publication-body .wp-block-columns,
.content-body.publication-body .wp-block-cover,
.content-body.publication-body .wp-block-media-text,
.content-body.publication-body .wp-block-buttons,
.content-body.publication-body .wp-block-gallery,
.content-body.publication-body .wp-block-video,
.content-body.publication-body .wp-block-audio,
.content-body.publication-body .wp-block-table {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* ── Buttons → brand pill (navy). :not() guards keep any colour
   the editor picked from the brand palette intact. ── */
.content-body.publication-body .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.9rem 1.75rem;
  border: 2px solid var(--color-navy);
  border-radius: var(--radius-pill);
  line-height: 1;
  text-decoration: none;
  transition: all 200ms ease;
}

.content-body.publication-body .wp-block-button__link:not(.has-background) {
  background: var(--color-navy);
}

.content-body.publication-body .wp-block-button__link:not(.has-text-color) {
  color: var(--color-white);
}

.content-body.publication-body .wp-block-button__link:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
  text-decoration: none;
}

.content-body.publication-body .is-style-outline .wp-block-button__link:not(.has-background) {
  background: transparent;
}

.content-body.publication-body .is-style-outline .wp-block-button__link:not(.has-text-color) {
  color: var(--color-navy);
}

.content-body.publication-body .is-style-outline .wp-block-button__link:hover {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

/* ── Separator → short centred gold rule; wide style spans full width ── */
.content-body.publication-body .wp-block-separator {
  border: none;
  border-top: 2px solid var(--color-gold);
  width: 80px;
  margin: var(--space-xl) auto;
}

.content-body.publication-body .wp-block-separator.is-style-wide {
  width: 100%;
  border-top: 1px solid var(--color-border);
}

/* ── Table → sans, navy headers over gold rule ── */
.content-body.publication-body .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-base);
  font-size: var(--text-sm);
}

.content-body.publication-body .wp-block-table th {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-xs);
  color: var(--color-navy);
  text-align: left;
  padding: 0.75rem;
  border-bottom: 2px solid var(--color-gold);
}

.content-body.publication-body .wp-block-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

/* ── Cover → square corners; readable headings/text over the image ── */
.content-body.publication-body .wp-block-cover {
  border-radius: 0;
}

.content-body.publication-body .wp-block-cover h2,
.content-body.publication-body .wp-block-cover h3,
.content-body.publication-body .wp-block-cover p {
  color: inherit;
}

/* ── Media & text → square corners on the media side ── */
.content-body.publication-body .wp-block-media-text img,
.content-body.publication-body .wp-block-media-text video {
  border-radius: 0;
}

/* ── Details / accordion ── */
.content-body.publication-body .wp-block-details {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-sm) 0;
  margin: var(--space-lg) 0;
}

.content-body.publication-body .wp-block-details summary {
  font-family: var(--font-base);
  font-weight: 600;
  color: var(--color-navy);
  cursor: pointer;
}

/* ── Footnotes ── */
.content-body.publication-body .wp-block-footnotes {
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
  margin-top: var(--space-xl);
}

/* ── Sand utility panels (MEA Publication patterns) ──
   .pub-abstract on a group block inherits the existing panel
   styling defined earlier in this file; the two below are new. ── */
.pub-key-takeaways {
  background: var(--color-sand-bg);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
}

.pub-key-takeaways h3 {
  margin-top: 0;
  font-family: var(--font-base);
  color: var(--color-navy);
}

.pub-cta-box {
  background: var(--color-sand-bg);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  text-align: center;
}

/* ── Columns: rely on core stacking (<782px) but tighten the gap
   between stacked columns on phones ── */
@media (max-width: 781px) {
  .content-body.publication-body .wp-block-columns {
    gap: var(--space-sm);
  }
}


/* ============================================================
   PUBLICATION BODY — H2/H3 WEIGHT
   ------------------------------------------------------------
   Headings keep the original styling (sans, navy, original
   sizes/margins from brand.css) with ONE change: weight reduced
   from SemiBold 600 to Medium 500 — the editorial team found
   600 too heavy in long-form articles. Scoped to publications
   only; H4 and headings elsewhere on the site stay 600. The
   Nunito Sans 500 weight is loaded via the Google Fonts URL in
   functions.php. Mirror rule in editor-style.css — keep in sync.
   ============================================================ */

.content-body.publication-body h2,
.content-body.publication-body h3 {
  font-weight: 500;
}


/* ============================================================
   PUBLICATION BODY — FIGURE PATTERN (.pub-figure)
   ------------------------------------------------------------
   Used by the "Image / graphic with caption" block pattern.
   Full reading-column width, generous vertical breathing room,
   and a hairline rule between image and caption so charts and
   graphics read as proper editorial figures. Caption typography
   (warm grey, italic, 13px) comes from the existing publication
   caption rules. Mirror in editor-style.css — keep in sync.
   ============================================================ */

.content-body.publication-body .pub-figure {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.content-body.publication-body .pub-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.content-body.publication-body .pub-figure figcaption {
  border-top: 1px solid var(--color-border);
  padding-top: 0.625rem;
  margin-top: 0.75rem;
}


/* ============================================================
   PUBLICATION BODY — FOOTNOTES / ENDNOTES
   ------------------------------------------------------------
   Scholarly treatment for the core Footnotes block. The block
   itself renders a bare <ol class="wp-block-footnotes">; the
   "Notes" label is injected via ::before so editors get it for
   free. In-text references are <sup class="fn"><a>N</a></sup>.
   Clicking a reference jumps to the note (and back via the
   return arrow); :target highlighting + scroll-margin make the
   jump landing obvious and keep it clear of the sticky header.
   Mirror rules in editor-style.css — keep in sync.
   ============================================================ */

/* ── In-text reference markers ── */
.content-body.publication-body sup.fn {
  font-size: 0.7em;
  line-height: 0;                /* don't stretch the line box */
  vertical-align: super;
}

.content-body.publication-body sup.fn a {
  font-family: var(--font-base);
  font-weight: 700;
  color: var(--color-gold);
  text-decoration: none;
  padding: 0 0.1em;
}

.content-body.publication-body sup.fn a:hover {
  color: var(--color-navy);
  text-decoration: none;
}

/* Returning from a note highlights the reference you came from. */
.content-body.publication-body sup.fn a:target {
  background: var(--color-sand-bg);
  outline: 2px solid var(--color-sand-bg);
}

/* ── Endnotes list ── */
.content-body.publication-body .wp-block-footnotes {
  list-style: decimal;
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  padding-left: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Automatic section label — no heading block needed. */
.content-body.publication-body .wp-block-footnotes::before {
  content: 'Notes';
  display: block;
  margin-left: -1.5rem;          /* align with the text column, not the list indent */
  margin-bottom: var(--space-sm);
  font-family: var(--font-base);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.content-body.publication-body .wp-block-footnotes li {
  margin-bottom: 0.625rem;
  padding-left: 0.25rem;
}

.content-body.publication-body .wp-block-footnotes li::marker {
  font-weight: 600;
  color: var(--color-gold);
}

/* Jump landing: highlight the targeted note. */
.content-body.publication-body .wp-block-footnotes li:target {
  background: var(--color-sand-bg);
  outline: 4px solid var(--color-sand-bg);
}

/* Links inside notes (sources) + the ↩ return arrow. */
.content-body.publication-body .wp-block-footnotes li a {
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-color: var(--color-warmgrey-60);
  text-underline-offset: 2px;
}

.content-body.publication-body .wp-block-footnotes li a[aria-label] {
  text-decoration: none;
  font-weight: 700;
  padding-left: 0.25rem;
}

/* ── Anchor jumps clear the sticky header ── */
.content-body.publication-body sup.fn a,
.content-body.publication-body .wp-block-footnotes li {
  scroll-margin-top: 120px;
}


/* ============================================================
   PUBLICATION BODY — DATA TABLE PATTERN (.pub-table)
   ------------------------------------------------------------
   Used by the "Data table with caption" block pattern. Table
   typography (sans, navy headers over gold rule) comes from the
   existing .wp-block-table rules above; this adds the editorial
   breathing room and the caption/source treatment, matching the
   figure pattern. Mirror in editor-style.css — keep in sync.
   ============================================================ */

.content-body.publication-body .pub-table {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.content-body.publication-body .pub-table figcaption {
  padding-top: 0.625rem;
  text-align: left;
}


/* ============================================================
   PUBLICATION BODY — INSTITUTIONAL VIEWS NOTE (.pub-views-note)
   ------------------------------------------------------------
   Standard end-of-article note ("the Institute takes no
   institutional positions…"). Small muted sans text after a
   hairline rule, quieter than body copy so it reads as colophon
   matter, not content. Mirror in editor-style.css — keep in sync.
   ============================================================ */

.content-body.publication-body .pub-views-note {
  margin-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}

.content-body.publication-body .pub-views-note p {
  font-family: var(--font-base);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* ============================================================
   CIRIC additions — publication card "coming soon" + read link
   ============================================================ */
.pub-card__coming-soon {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15em 0.6em;
  font-family: var(--font-base);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: rgba(var(--color-primary-rgb), 0.06);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  vertical-align: middle;
}
.pub-card--coming-soon .pub-card__image { opacity: 0.72; }
.pub-card__read {
  margin-left: auto;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  white-space: nowrap;
}
.pub-card__read:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   CIRIC LANDING PAGE (page-ciric-landing.php)
   ============================================================ */
.container--narrow { max-width: 820px; margin-inline: auto; }

/* ── Hero ── */
.ciric-hero {
  position: relative;
  background: var(--color-navy);
  color: var(--color-white);
  padding-block: clamp(4rem, 12vw, 9rem);
  overflow: hidden;
}
.ciric-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.22; z-index: 0;
}
.ciric-hero__inner { position: relative; z-index: 1; text-align: center; }
.ciric-hero__eyebrow {
  font-family: var(--font-hero-eyebrow, var(--font-hero, var(--font-base)));
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: var(--space-md);
}
.ciric-hero__title {
  font-family: var(--font-hero-title, var(--font-hero, var(--font-feature)));
  color: var(--color-white);
  font-size: clamp(3.5rem, 10vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin: 0;
}
.ciric-hero__fullname {
  font-family: var(--font-hero-fullname, var(--font-hero, var(--font-reading)));
  font-size: clamp(1.125rem, 2.5vw, 1.6rem);
  margin-top: var(--space-md);
  color: rgba(255,255,255,0.92);
}
.ciric-hero__tagline {
  max-width: 640px; margin: var(--space-md) auto 0;
  color: rgba(255,255,255,0.72);
  font-size: var(--text-md);
  font-family: var(--font-hero-tagline, var(--font-hero, var(--font-base)));
}
.ciric-hero__ctas {
  display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap;
  margin-top: var(--space-xl);
}
.ciric-hero .btn--primary { background: var(--color-white); color: var(--color-navy); border-color: var(--color-white); }
.ciric-hero .btn--primary:hover { background: transparent; color: var(--color-white); }
.ciric-hero .btn--outline { border-color: rgba(255,255,255,0.6); color: var(--color-white); }
.ciric-hero .btn--outline:hover { background: var(--color-white); color: var(--color-navy); }

/* ── Section shell ── */
.ciric-section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.ciric-section__heading {
  font-family: var(--font-feature);
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--color-navy);
  margin-bottom: var(--space-lg);
  position: relative; padding-bottom: var(--space-sm);
}
.ciric-section__heading::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 64px; height: 2px; background: var(--color-gold);
}
.ciric-section__intro { margin-bottom: var(--space-xl); font-size: var(--text-md); }
.ciric-section__outro { margin-top: var(--space-lg); color: var(--color-text-muted); }
.ciric-prose { line-height: 1.75; }
.ciric-prose p { margin-bottom: var(--space-md); }
.ciric-empty { color: var(--color-text-muted); font-style: italic; }

/* ── Pillars ── */
.ciric-pillars__grid {
  display: grid; gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ciric-pillar {
  border-top: 2px solid var(--color-gold);
  padding-top: var(--space-md);
}
.ciric-pillar__num {
  font-family: var(--font-base); font-weight: 600;
  font-size: var(--text-sm); color: var(--color-gold); letter-spacing: 0.1em;
}
.ciric-pillar__title {
  font-family: var(--font-feature);
  font-size: var(--text-lg);
  color: var(--color-navy);
  margin: var(--space-xs) 0 var(--space-sm);
}
.ciric-pillar__body { color: var(--color-text); line-height: 1.7; }

/* ── Chips (member statuses on the Team page) ── */
.ciric-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.ciric-chip {
  font-family: var(--font-base); font-size: var(--text-sm);
  padding: 0.5em 1em;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-navy);
}

/* ── Coming this month ── */
/* Same visual language as the Events list (.event-row): a date block on the
   left, hairline-separated rows, the title as a link stretched over the row.
   Free-text items put a short phrase ("Late October") where the date goes. */
.coming-list { list-style: none; margin: 0; padding: 0; }
.coming-item {
  position: relative;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: var(--space-lg);
  align-items: start;
  padding: var(--space-lg) 0;
  border-top: var(--hairline);
}
.coming-item:last-child { border-bottom: var(--hairline); }

.coming-item__when { padding-top: 0.25rem; line-height: 1; }
.coming-item__when time { display: flex; flex-direction: column; align-items: flex-start; }
.coming-item__day {
  font-family: var(--font-feature);
  font-size: var(--text-3xl);
  color: var(--color-navy);
  line-height: 0.9;
}
.coming-item__monthyear {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 0.4rem;
}
.coming-item__whentext {
  font-family: var(--font-feature);
  font-size: var(--text-lg);
  color: var(--color-navy);
  line-height: 1.2;
}

.coming-item__type {
  margin: 0 0 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.coming-item__title {
  font-family: var(--font-base);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.25;
  margin-bottom: 0.4rem;
}
.coming-item__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.coming-item__title a::after { content: ""; position: absolute; inset: 0; }
.coming-item__title a:focus-visible { outline: none; }
.coming-item__title a:focus-visible::after { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.coming-item__arrow { color: var(--color-gold); }
.coming-item--linked:hover .coming-item__title a { color: var(--color-gold); }

.coming-item__detail {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}
.coming-item__summary {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 60ch;
}

/* ── Team ── */
.ciric-team__tier {
  font-family: var(--font-base); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: var(--text-sm); color: var(--color-navy);
  margin: var(--space-xl) 0 var(--space-md);
}
.ciric-team__grid { display: grid; gap: var(--space-xl); }
.ciric-team__grid--compact { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); }
.ciric-member { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-lg); align-items: start; }
.ciric-member--compact { grid-template-columns: 72px 1fr; gap: var(--space-md); align-items: center; }
.ciric-member__photo img,
.ciric-member__photo-fallback {
  width: 140px; height: 140px; object-fit: cover; border-radius: var(--radius-circle);
}
.ciric-member--compact .ciric-member__photo img,
.ciric-member--compact .ciric-member__photo-fallback { width: 72px; height: 72px; }
.ciric-member__photo-fallback {
  display: grid; place-items: center;
  background: var(--color-navy); color: var(--color-white);
  font-family: var(--font-feature); font-size: var(--text-2xl);
}
.ciric-member__name { font-family: var(--font-feature); font-size: var(--text-lg); color: var(--color-navy); margin: 0; }
.ciric-member__role { font-family: var(--font-base); font-size: var(--text-sm); color: var(--color-text-muted); margin: 0.15rem 0 var(--space-sm); }
.ciric-member__bio { line-height: 1.7; }
.ciric-member__quote {
  margin: var(--space-sm) 0 0; padding-left: var(--space-md);
  border-left: 3px solid var(--color-gold);
  font-family: var(--font-feature); font-style: italic; color: var(--color-navy);
}
.ciric-team__note { margin-top: var(--space-lg); color: var(--color-text-muted); font-style: italic; }

/* ── Events ── */
.ciric-events__empty {
  padding: var(--space-xl); text-align: center;
  border: 1px dashed var(--color-border); border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}
.ciric-events__empty-heading { font-family: var(--font-feature); color: var(--color-navy); margin-bottom: var(--space-xs); }
.ciric-events__invite { margin-top: var(--space-lg); }
.ciric-events__representation { color: var(--color-text); margin-bottom: var(--space-md); }
.ciric-events__representation p:last-child { margin-bottom: 0; }

/* ── Newsletter ── */
.ciric-newsletter { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--hairline); }
.ciric-newsletter__heading { font-family: var(--font-feature); color: var(--color-navy); margin-bottom: var(--space-sm); }
.ciric-newsletter__form { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); }
.ciric-newsletter__input {
  flex: 1 1 260px; padding: 0.75rem 1rem;
  border: 1px solid var(--color-border); font-family: var(--font-base); font-size: var(--text-sm);
  background: var(--color-white); color: var(--color-text);
}
.newsletter-feedback { margin-top: var(--space-sm); font-size: var(--text-sm); }
.newsletter-feedback--success { color: var(--color-feedback-success-fg); }
.newsletter-feedback--error { color: var(--color-feedback-error-fg); }

/* ── CIRIC: section "see all" button row (landing-page teasers → the
   dedicated Publications / Team pages) ─────────────────────────────── */
.ciric-section__more {
  margin-top: var(--space-xl);
  text-align: center;
}

/* ── CIRIC: member_status taxonomy chips inside a Team profile ─────── */
.ciric-member__statuses {
  margin: var(--space-xs) 0 var(--space-sm);
}

/* ── CIRIC: Team page — back/CTA row under strategic coordination ──── */
.ciric-team__back {
  margin-top: var(--space-xl);
}

/* ── CIRIC: direct email line on the landing-page contact teaser ───── */
.ciric-contact__direct {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--hairline);
  font-family: var(--font-base);
}
.ciric-contact__direct-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ── Contact form privacy / consent notice. Shared by the built-in form and
   any plugin-shortcode form (CF7 etc.), so the consent line survives a
   change of "Form source". ─────────────────────────────────────────────── */
.contact-form__privacy {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  line-height: 1.6;
}
.contact-form__privacy a {
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-gold);
}

/* ── Long-form enquiry route (Google Form link) ──────────────────────────────
   Sits below the split contact body, spanning its full width, and reads as a
   secondary offer rather than a competing form. Sand ground + a gold rule so
   it separates from the form above without shouting. Hidden entirely by the
   template when no URL is set, so there is no empty-state to style. ───────── */
.contact-longform {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--color-sand-bg);
  border-top: 2px solid var(--color-gold);
  border-radius: var(--radius-xs);
}

.contact-longform__heading {
  font-family: var(--font-feature);
  font-size: var(--text-lg);
  color: var(--color-navy);
  margin: 0 0 var(--space-sm);
}

.contact-longform__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 60ch;
}

.contact-longform__body p {
  margin: 0 0 var(--space-sm);
}

.contact-longform__cta {
  margin-top: var(--space-md);
}

/* ============================================================
   CIRIC: EDITOR-CHOSEN SECTION GROUNDS
   ------------------------------------------------------------
   inc/section-background.php prints one of the bg-variant-*
   classes (or an inline background-color for a custom hex) plus
   .ciric-bg--light / .ciric-bg--dark, which classify the ground
   rather than name it. Everything that has to flip for legible
   text hangs off .ciric-bg--dark below, so a custom colour and
   the navy preset behave identically and no editor choice can
   produce navy-on-navy.

   .bg-variant-navy already inverts headings and generic body
   colour (see "Dark variants" above); these rules add what the
   CIRIC sections and the event rows need on top of it.
   ============================================================ */

.bg-variant-sky {
  background: var(--color-sky) !important;
}

.ciric-bg--dark {
  color: rgba(255, 255, 255, 0.84);
}

.ciric-bg--dark .ciric-section__heading,
.ciric-bg--dark .ciric-events__empty-heading,
.ciric-bg--dark .ciric-newsletter__heading,
.ciric-bg--dark .event-row__day,
.ciric-bg--dark .event-row__title,
.ciric-bg--dark .event-row__type {
  color: var(--color-white);
}

.ciric-bg--dark .ciric-prose,
.ciric-bg--dark .ciric-prose p,
.ciric-bg--dark .ciric-events__representation,
.ciric-bg--dark .ciric-empty,
.ciric-bg--dark .event-row__monthyear,
.ciric-bg--dark .event-row__status,
.ciric-bg--dark .event-row__fulldate,
.ciric-bg--dark .event-row__location,
.ciric-bg--dark .event-row__summary {
  color: rgba(255, 255, 255, 0.72);
}

/* Gold is 3.4:1 on sand but darker still on navy — the light gold is the
   token meant for dark grounds (brand.css:44). */
.ciric-bg--dark .event-row--upcoming .event-row__status,
.ciric-bg--dark .event-row__location svg,
.ciric-bg--dark .event-row:hover .event-row__title {
  color: var(--color-gold-light);
}

.ciric-bg--dark .event-row,
.ciric-bg--dark .event-list .event-row:last-child {
  border-color: rgba(255, 255, 255, 0.18);
}

.ciric-bg--dark .event-row__sep {
  color: rgba(255, 255, 255, 0.4);
}

.ciric-bg--dark .ciric-events__empty {
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.72);
}

.ciric-bg--dark .ciric-newsletter {
  border-top-color: rgba(255, 255, 255, 0.18);
}

/* The outline button is navy-on-transparent by default, i.e. invisible here;
   the primary button is navy-on-navy, which is worse. Both invert to the
   knockout treatment the hero already uses on its navy ground. */
.ciric-bg--dark .btn--outline {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--color-white);
}

.ciric-bg--dark .btn--outline:hover {
  background: var(--color-white);
  color: var(--color-navy);
}

.ciric-bg--dark .btn--primary {
  background: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-white);
}

.ciric-bg--dark .btn--primary:hover {
  background: transparent;
  color: var(--color-white);
}

/* ── Contact section on a dark ground ──────────────────────────────
   The email line's label and rule, and the newsletter feedback colours,
   which are dark-on-light by design (brand.css:82). The input keeps its
   white field: dark text on white is correct on any ground. */
.ciric-bg--dark .ciric-contact__direct {
  border-top-color: rgba(255, 255, 255, 0.18);
}

.ciric-bg--dark .ciric-contact__direct-label {
  color: rgba(255, 255, 255, 0.72);
}

.ciric-bg--dark .ciric-contact__direct a:hover {
  color: var(--color-gold-light);
}

.ciric-bg--dark .newsletter-feedback--success {
  color: #7BD1A3;
}

.ciric-bg--dark .newsletter-feedback--error {
  color: #F0A3A3;
}

/* ── CIRIC: newsletter as its own band (Events page) ────────────────
   The landing page's capture sits at the foot of the Contact section,
   where the top rule separates it from the copy above. Standing alone
   in its own section it has nothing to be separated from. */
.ciric-newsletter--standalone {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   MAPPING ZAKAT — world map, filters, panel and table
   (page-ciric-zakat-map.php) and the country page (single-zakat_country.php).

   ONE set of colours. The map (assets/js/zakat-map.js reads these custom
   properties), the legend, the panel, the table and the country page all paint
   from --zm-gov-*, so they cannot disagree.

   The six governance models are CATEGORIES, not a scale: none is "more" or
   "better" than another, so they are distinct hues — never a light-to-dark ramp,
   never red/green (no good/bad reading). Checked with the dataviz validator in
   its strictest mode (--pairs all, because any two countries can touch): the
   five hues pass every hard gate (worst colour-blind ΔE 8.7, normal vision 16.3).
   Amber and aqua are under 3:1 on white, which that check allows only when the
   value can be read another way: every colour is also written out in the legend,
   the tooltip, the panel and the table, and the map itself is aria-hidden.
   "Under review" is a deliberate neutral grey: it means "not classified yet".
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --zm-gov-mandatory:  #2a78d6;
  --zm-gov-voluntary:  #eda100;
  --zm-gov-hybrid:     #1baf7a;
  --zm-gov-ngo:        #c2477f;
  --zm-gov-fragmented: #4a3aa7;
  --zm-gov-review:     #a1aaad;

  --zm-land:   #E4E1DA;            /* a country that is not on the map yet */
  --zm-stroke: var(--color-white);
  --zm-dim:    0.18;               /* fill opacity of a country outside the filters */
}

/* Whatever wears a governance colour takes it from --zm-c, set by its class. */
.zakat-gov-mandatory  { --zm-c: var(--zm-gov-mandatory); }
.zakat-gov-voluntary  { --zm-c: var(--zm-gov-voluntary); }
.zakat-gov-hybrid     { --zm-c: var(--zm-gov-hybrid); }
.zakat-gov-ngo        { --zm-c: var(--zm-gov-ngo); }
.zakat-gov-fragmented { --zm-c: var(--zm-gov-fragmented); }
.zakat-gov-review     { --zm-c: var(--zm-gov-review); }
.zakat-gov-land       { --zm-c: var(--zm-land); }

.zakat-swatch {
  display: inline-block; flex-shrink: 0;
  width: 0.85rem; height: 0.85rem;
  border-radius: 50%;
  background: var(--zm-c, var(--zm-land));
  box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.18);
}
.zakat-swatch--wide { width: 28px; height: 14px; border-radius: 3px; }
.zakat-swatch--dim { background: rgba(var(--color-primary-rgb), var(--zm-dim)); }

.zakat-missing { color: var(--color-text-muted); font-style: italic; }

/* ── Beta notice ── */
.zakat-beta { background: var(--color-sand-bg); border-bottom: var(--hairline); padding-block: var(--space-sm); }
.zakat-beta__inner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); }
.zakat-beta__tag {
  padding: 0.15rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: var(--color-navy);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.zakat-beta__text { margin: 0; font-weight: 600; color: var(--color-navy); }

/* ── Toolbar and filters ── */
.zakat-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs) var(--space-sm); margin-bottom: var(--space-md); }

/* Download: a <details> dressed as a button, its menu a small popover under it. */
.zakat-download { position: relative; }
.zakat-download > summary { list-style: none; cursor: pointer; user-select: none; }
.zakat-download > summary::-webkit-details-marker { display: none; }
.zakat-download > summary::after { content: ""; margin-left: 0.5rem; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.zakat-download[open] > summary::after { border-top: 0; border-bottom: 5px solid currentColor; }
.zakat-download__menu {
  position: absolute; z-index: var(--z-overlay);
  top: calc(100% + 0.4rem); left: 0;
  min-width: 11rem; margin: 0; padding: 0.35rem; list-style: none;
  background: var(--color-white);
  border: var(--hairline); border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
}
.zakat-download__menu a {
  display: flex; justify-content: space-between; gap: var(--space-sm);
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-xs);
  color: var(--color-navy); font-size: var(--text-sm); font-weight: 600; text-decoration: none;
}
.zakat-download__menu a:hover,
.zakat-download__menu a:focus-visible { background: var(--color-sand-bg); }
.zakat-download__hint { font-weight: 400; color: var(--color-text-muted); }

.zakat-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-sm);
  align-items: end;
  margin-bottom: var(--space-sm);
}
.zakat-filters[hidden] { display: none; }
@media (min-width: 900px) {
  .zakat-filters { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr) auto; }
}
.zakat-filters__field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.zakat-filters__label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.zakat-filters__reset { height: 48px; }

/* Country suggestions under the search box. The list is wider than the box (a
   column of the filter row) so a governance model fits beside the name. */
.zakat-suggest { position: relative; }
.zakat-suggest__list {
  position: absolute; z-index: var(--z-overlay);
  top: calc(100% + 0.3rem); right: 0;
  min-width: max(100%, 24rem); max-width: calc(100vw - 2 * var(--container-pad));
  max-height: 19rem; overflow-y: auto;
  margin: 0; padding: 0.35rem; list-style: none;
  background: var(--color-white);
  border: var(--hairline); border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
}
.zakat-suggest__list[hidden] { display: none; }
.zakat-suggest__option {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-xs);
  color: var(--color-navy); font-size: var(--text-sm);
  cursor: pointer;
}
.zakat-suggest__option:hover,
.zakat-suggest__option[aria-selected="true"] { background: var(--color-sand-bg); }
.zakat-suggest__option[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--color-navy); }
.zakat-suggest__name { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.zakat-suggest__gov { flex: 0 1 10.5rem; margin-left: auto; padding-left: var(--space-xs); font-size: var(--text-xs); color: var(--color-text-muted); text-align: right; }
.zakat-count { margin: 0 0 var(--space-md); font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── Map + panel ── */
.zakat-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.zakat-stage[hidden] { display: none; }
.zakat-stage,
.zakat-panel { scroll-margin-top: 6rem; }
@media (min-width: 1024px) {
  .zakat-stage { grid-template-columns: minmax(0, 1fr) 22.5rem; }
}

.zakat-map { position: relative; min-width: 0; }
.zakat-map__canvas {
  width: 100%;
  /* The world map is 900 × 441; the library fits it to this box. */
  aspect-ratio: 900 / 441;
  min-height: 220px;
}

/* A pointer only over a country that has something to open. */
.zakat-map .jvm-region { cursor: default; transition: stroke var(--transition-fast), fill-opacity var(--transition-fast); }
.zakat-map .jvm-region.is-mapped { cursor: pointer; }
.zakat-map .jvm-region.is-mapped:hover { stroke: var(--color-navy); stroke-width: 1.4; }
.zakat-map .jvm-marker { cursor: pointer; transition: fill-opacity var(--transition-fast); }
.zakat-map .jvm-region.is-selected,
.zakat-map .jvm-marker.is-selected { stroke: var(--color-navy); stroke-width: 2; }

/* The library's tooltip, in the theme's voice. */
.jvm-tooltip {
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  line-height: 1.45;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
  z-index: var(--z-overlay);
}

.zakat-map .jvm-zoom-btn {
  background: var(--color-white);
  color: var(--color-navy);
  border: var(--hairline);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-base);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.zakat-map .jvm-zoom-btn:hover { background: var(--color-navy); color: var(--color-white); }

/* ── Legend ── */
.zakat-legend { margin-top: var(--space-lg); }
.zakat-legend__title { margin: 0 0 var(--space-xs); font-weight: 600; color: var(--color-navy); }
.zakat-legend__items {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
}
.zakat-legend__item { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.zakat-legend__item[hidden] { display: none; }
.zakat-legend__item--gap { margin-left: var(--space-md); }

/* ── Panel (opens beside the map when a country is chosen) ── */
.zakat-panel {
  position: relative;
  padding: var(--space-md);
  background: var(--color-white);
  border: var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.zakat-panel[hidden] { display: none; }
@media (min-width: 1024px) {
  .zakat-panel { position: sticky; top: var(--space-md); max-height: calc(100vh - 2 * var(--space-md)); overflow-y: auto; }
}
/* Nothing chosen yet: a hint beside the map, nothing at all under it. */
.zakat-panel__hint { margin: 0; color: var(--color-text-muted); }
.zakat-panel:not(.is-empty) .zakat-panel__hint { display: none; }
.zakat-panel.is-empty .zakat-panel__close { display: none; }
@media (max-width: 1023.98px) {
  .zakat-panel.is-empty { display: none; }
}

.zakat-panel__close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 2.25rem; height: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--hairline); border-radius: 50%;
  background: var(--color-white); color: var(--color-navy);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.zakat-panel__close:hover,
.zakat-panel__close:focus-visible { background: var(--color-navy); color: var(--color-white); }

.zakat-panel__eyebrow {
  margin: 0;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.zakat-panel__title {
  margin: 0.25rem 2.75rem var(--space-xs) 0;
  font-family: var(--font-feature);
  font-size: var(--text-xl); line-height: 1.15; font-weight: 400;
  color: var(--color-navy);
}
.zakat-panel__title:focus { outline: none; }
.zakat-panel__gov {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 var(--space-sm);
  font-weight: 600; color: var(--color-navy);
}
.zakat-panel__summary { margin: 0 0 var(--space-md); font-size: var(--text-sm); line-height: 1.6; }
.zakat-panel__heading {
  margin: var(--space-md) 0 var(--space-xs);
  font-family: var(--font-base);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.zakat-panel__text { font-size: var(--text-sm); line-height: 1.6; }
.zakat-panel__text p:last-child { margin-bottom: 0; }
.zakat-panel__list,
.zakat-panel__sources { margin: 0; padding: 0; font-size: var(--text-sm); line-height: 1.5; }
.zakat-panel__list { list-style: none; display: grid; gap: 0.35rem; }
.zakat-panel__sources { padding-left: 1.25rem; display: grid; gap: 0.25rem; }
.zakat-panel__more { margin-top: var(--space-md); }

/* ── Badges (panel, country page): a fact per row, name above value ── */
.zakat-badges { margin: 0; }
.zakat-badge { padding: 0.55rem 0; border-top: var(--hairline); }
.zakat-badge dt {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.zakat-badge dd { margin: 0.15rem 0 0; font-size: var(--text-sm); color: var(--color-navy); }
.zakat-badges--wide .zakat-badge {
  display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: var(--space-md); align-items: baseline;
}
.zakat-badges--wide .zakat-badge dd { margin: 0; font-size: var(--text-base); }

/* A 0–5 level. Navy outline for every level on purpose: a level is a position
   on a ladder, not a grade, so it is never colour-coded. */
.zakat-level {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4rem; height: 1.4rem; padding: 0 0.3rem; margin-right: 0.4rem;
  border: 1px solid var(--color-navy); border-radius: var(--radius-pill);
  font-size: 0.7rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--color-navy);
  vertical-align: 0.05em;
}

/* ── Table ── */
.zakat-table-wrap { overflow-x: auto; }
.zakat-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.zakat-table th,
.zakat-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: var(--hairline);
}
.zakat-table thead th {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-navy);
}
.zakat-table tbody th { font-weight: 700; color: var(--color-navy); }
.zakat-table .zakat-table__num { text-align: right; }

/* The table is the widest thing on the page, so on a wide screen it breaks out of
   the text column, equally on both sides, up to the theme's wide container. Its
   heading stays on the column's edge, aligned with the rest of the page. The width
   is measured from the viewport minus a gutter, not from the column, so no ancestor
   needs to change; below 900px the column is already nearly the full width. */
@media (min-width: 900px) {
  .zakat-list-section .zakat-table-wrap {
    width: min(calc(100vw - 2 * clamp(1rem, 2.5vw, 2.5rem) - 1rem), var(--container-wide));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

.zakat-data-table { min-width: 60rem; font-size: var(--text-sm); background: var(--color-white); }
.zakat-data-table tbody th { white-space: nowrap; }
.zakat-data-table th,
.zakat-data-table td { padding: var(--space-sm); vertical-align: top; }
.zakat-data-table tbody a { color: var(--color-navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.zakat-data-table tbody a:hover,
.zakat-data-table tbody a:focus-visible { text-decoration-thickness: 2px; }
.zakat-data-table tbody tr.is-selected > * { background: rgba(var(--color-primary-rgb), 0.05); }
.zakat-cell-gov { display: flex; align-items: flex-start; gap: 0.5rem; }
.zakat-cell-gov .zakat-swatch { margin-top: 0.25em; }
.zakat-cell-year { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.zakat-table-none { margin: var(--space-md) 0 0; color: var(--color-text-muted); }
.zakat-table-none[hidden] { display: none; }

/* ── Help us improve ── */
.zakat-help { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.zakat-help__text { max-width: 62ch; }
.zakat-help__actions { display: grid; gap: var(--space-sm); }
.zakat-help__actions .btn { justify-content: center; text-align: center; }

/* ── Methodology ── */
.zakat-method { background: var(--color-white); border: var(--hairline); border-radius: var(--radius-md); }
.zakat-method > summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm);
  padding: var(--space-md);
  font-family: var(--font-feature); font-size: var(--text-lg); color: var(--color-navy);
  cursor: pointer; list-style: none;
}
.zakat-method > summary::-webkit-details-marker { display: none; }
.zakat-method > summary::after { content: "+"; font-size: 1.5rem; line-height: 1; }
.zakat-method[open] > summary::after { content: "\2212"; }
.zakat-method > summary:focus-visible { outline: 2px solid var(--color-navy); outline-offset: -2px; border-radius: var(--radius-md); }
.zakat-method__body { padding: 0 var(--space-md) var(--space-lg); }
.zakat-method__body h3 { margin: var(--space-lg) 0 var(--space-xs); font-size: var(--text-md); color: var(--color-navy); }
.zakat-scales { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-lg); margin-top: var(--space-md); }
.zakat-scales h4 { margin: 0 0 var(--space-xs); font-family: var(--font-base); font-size: var(--text-sm); font-weight: 700; color: var(--color-navy); }
.zakat-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: var(--text-sm); }
.zakat-ladder li { display: flex; align-items: flex-start; gap: 0.5rem; }
.zakat-ladder .zakat-level { margin-right: 0; flex-shrink: 0; }
.zakat-neq {
  list-style: none; margin: var(--space-xs) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.5rem var(--space-md);
}

/* ── Country page (single-zakat_country.php) ── */
.zakat-hero__gov {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin: var(--space-sm) 0 0;
  padding: 0.35rem 0.9rem;
  background: var(--color-white); color: var(--color-navy);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 600;
}
.zakat-hero__updated {
  margin: var(--space-md) 0 0;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
}

/* Facts grid: label on the left, answer on the right. */
.zakat-facts { margin: 0; }
.zakat-facts__row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: var(--hairline);
}
.zakat-facts__row:last-child { border-bottom: var(--hairline); }
.zakat-facts dt { font-weight: 600; color: var(--color-navy); }
.zakat-facts dd { margin: 0; }
.zakat-facts__hint {
  display: block; margin-top: 0.15rem;
  font-size: var(--text-sm); font-weight: 400;
  color: var(--color-text-muted);
}
.zakat-facts__main { margin: 0 0 var(--space-xs); font-weight: 600; }
.zakat-chips { gap: var(--space-xs); }

/* Distribution by asnaf: a bar per category. */
.zakat-asnaf { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.zakat-asnaf__item {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 3fr 5.5rem;
  gap: var(--space-md);
  align-items: center;
}
.zakat-asnaf__name { font-weight: 600; color: var(--color-navy); }
.zakat-asnaf__gloss { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); }
.zakat-asnaf__track {
  display: block; height: 10px;
  background: var(--zm-land);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.zakat-asnaf__bar { display: block; height: 100%; background: var(--color-navy); border-radius: var(--radius-pill); }
.zakat-asnaf__value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.zakat-asnaf__value.zakat-missing { font-weight: 400; font-size: var(--text-sm); }

.zakat-back { padding-block: var(--space-xl); }