/* ============================================
   African Renaissance Trust — Site Stylesheet
   Design tokens per approved spec (May 2026)
   ============================================ */

/* Fonts are enqueued by the plugin via wp_enqueue_style (two separate
   handles, see art-elements.php). The @import below is a fallback for the
   Elementor editor preview, which sometimes loads this stylesheet outside
   the normal enqueue order. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

:root {
  /* Color tokens */
  --maroon: #5A1A2B;
  --maroon-dark: #3D0F1C;
  --lime: #C4D82E;
  --lime-soft: #D8E667;
  --gold: #D4A52A;
  --peach: #E89B6C;
  --ink: #1A1814;
  --slate: #5C5A55;
  --bone: #FAF7F1;
  --sand: #F0EBDF;
  --border: #D9D2C2;

  /* Pillar accent colours — independent from the shared brand tokens above.
     Changing --pillar-ge/he/se only affects pillar cards, section borders,
     eyebrows and stat numbers scoped to that pillar. */
  --pillar-ge:      #C4D82E;  /* Gender Equality — main accent */
  --pillar-ge-dark: #6b7a17;  /* Gender Equality — text on light bg */
  --pillar-he:      #D4A52A;  /* Health Equity — main accent */
  --pillar-he-dark: #8a6a1a;  /* Health Equity — text on light bg */
  --pillar-se:      #E89B6C;  /* Socio-Economic Justice — main accent */
  --pillar-se-dark: #b06941;  /* Socio-Economic Justice — text on light bg */

  /* Hero overlay — the gradient scrim laid over the ART Hero background image.
     Editable from ART Design ▸ Hero. The per-stop alphas are derived from
     --hero-overlay-opacity so one slider scales the whole scrim. */
  --hero-overlay-from:    #3D0F1C;
  --hero-overlay-to:      #5A1A2B;
  --hero-overlay-opacity: .75;
  --hero-overlay-angle:   120;

  /* Type */
  --serif: "Fraunces", "Source Serif 4", Georgia, serif;
  --sans:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing */
  --container: 1240px;
  --reading: 720px;
  --section-y: clamp(64px, 9vw, 120px);
  --card-pad: clamp(24px, 3vw, 32px);

  /* Type scale */
  --text-hero: clamp(40px, 5.5vw, 68px);
  --text-h1:   clamp(36px, 5vw, 56px);
  --text-h2:   clamp(28px, 3.4vw, 36px);
  --text-h3:   clamp(20px, 1.8vw, 24px);
  --text-lead: clamp(18px, 1.6vw, 22px);
  --text-body: clamp(16px, 1.15vw, 17px);
  --text-small: 14px;
}

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip kills sideways scrolling from off-canvas decorations and
   hidden nav flyouts without creating a scroll container (keeps sticky). */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--sans) !important;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--maroon); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--maroon-dark); }

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6 {
  font-family: var(--serif) !important;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
  font-optical-sizing: auto;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-weight: 600; }
p, li, small, span, label, input, textarea, select, button,
.elementor-widget-text-editor, .elementor-text-editor,
.elementor-widget-text-editor p, .elementor-text-editor p,
.elementor-button, .elementor-button-text,
.elementor-widget-icon-list, .elementor-icon-list-text,
.elementor-widget-image-box .elementor-image-box-content,
.elementor-widget-call-to-action,
.elementor-widget-form input, .elementor-widget-form textarea, .elementor-widget-form select {
  font-family: var(--sans) !important;
}
p { margin: 0 0 1em; }

/* Containers & rhythm */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); box-sizing: border-box; }
.reading { max-width: var(--reading); margin-inline: auto; }
section { padding-block: var(--section-y); }
.eyebrow {
  display: inline-block;
  font-size: var(--text-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 16px;
}

/* ============================================
   Header / Nav
   ============================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
  overflow: visible;
}
.header .container { overflow: visible; }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 72px;
  flex-wrap: nowrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  color: var(--maroon);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.005em;
}
.brand img {
  width: auto;
  height: 36px;
  max-width: 320px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand svg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: contain;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  font-family: var(--serif) !important;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--header-text, var(--ink));
}
.brand-text small { font-family: var(--sans) !important; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--header-text, var(--ink)) 60%, transparent); font-weight: 600; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap;
}
.nav-links > li { white-space: nowrap; }
.nav-links a {
  color: var(--header-text, var(--ink));
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .005em;
  padding: 6px 2px;
  position: relative;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--maroon); }
.nav-links a[aria-current="page"]::after,
.nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--maroon);
}
.nav-cta {
  background: var(--maroon);
  color: var(--bone);
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 4px;
  transition: background .2s ease;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--maroon-dark); color: var(--bone); }

/* Dropdown submenu */
.has-sub { position: relative; }
.nav-parent { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: transparent; border: 0; }
.nav-parent .caret { font-size: 10px; transform: translateY(1px); color: var(--slate); transition: transform .2s ease; }
.has-sub.open .nav-parent .caret { transform: translateY(1px) rotate(180deg); }
.subnav {
  position: absolute;
  top: calc(100% + 6px);
  left: -12px;
  min-width: 240px;
  background: var(--bone);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 16px 36px rgba(0,0,0,.10);
  list-style: none;
  padding: 8px;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  /* Hover intent: the panel lingers once the pointer leaves, so a diagonal
     move toward a child item — which can skim a sibling item on the way, or
     pause in the offset below — doesn't slam it shut. Opening stays instant;
     the :hover rule resets this to 0. */
  transition-delay: .35s;
  z-index: 60;
}
.has-sub:hover > .subnav,
.has-sub:focus-within > .subnav,
.has-sub.open > .subnav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Hover bridges. Each panel is offset from the item that opens it (6px below
   for L1, 6px to the side for L2), and that offset is dead space: the pointer
   crossing it is over neither the item nor the panel, so :hover drops and the
   menu closes before it can be reached. These invisible strips span the
   offsets, keeping the pointer inside the item's subtree the whole way. They
   only exist while a panel is open — a hidden panel can't be hovered.

   Desktop only, deliberately: below 980px the panels become a static inline
   accordion driven by tap, so there is no gap to bridge. Left unscoped, these
   would anchor to .has-sub instead and become invisible tap-blockers — and the
   L2 one would reach 8px past the left edge, reintroducing the very horizontal
   scrollbar the overflow:clip rule above exists to prevent. */
@media (min-width: 981px) {
  .subnav:not(.subnav--l2)::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 100%;
    height: 8px; /* ≥ the 6px top offset */
  }
  .subnav--l2::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    right: 100%;
    width: 8px; /* ≥ the 6px side offset */
  }
  .subnav--l2.flip-left::before { right: auto; left: 100%; }
}
.subnav li { white-space: nowrap; }
.subnav a {
  display: block;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--ink);
}
.subnav a:hover { background: var(--sand); color: var(--maroon); }
.subnav a[aria-current="page"] { background: var(--sand); color: var(--maroon); }
.subnav a[aria-current="page"]::after { display: none; }

/* ── Level-2 (sub-sub) flyout — opens to the right ── */
.subnav--l2 {
  top: -8px;
  left: 100%;
  margin-left: 6px;
}
.subnav--l2.flip-left {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 6px;
}
/* While closed, clip the L2 flyout inside its parent item: its hidden
   (visibility:hidden) box otherwise widens the page and causes the
   horizontal scrollbar. Hover/focus restores normal overflow instantly. */
.subnav .has-sub { overflow: clip; }
.subnav .has-sub:hover,
.subnav .has-sub:focus-within,
.subnav .has-sub.open { overflow: visible; }
.subnav .nav-parent .caret {
  font-size: 12px;
  transform: none;
  transition: opacity .15s ease;
}
.subnav .has-sub.open .nav-parent .caret,
.subnav .has-sub:hover .nav-parent .caret {
  transform: none;
  opacity: .6;
}

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 24px;
  color: var(--maroon);
  cursor: pointer;
}

@media (max-width: 980px) {
  .menu-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 72px;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bone);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px 24px;
    transform: translateY(-110%);
    transition: transform .25s ease;
    box-shadow: 0 12px 32px rgba(0,0,0,.06);
    visibility: hidden;
  }
  .nav-links.open { transform: translateY(0); visibility: visible; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--border); }
  .nav-links li:last-child a { border-bottom: 0; }
  .nav-cta { margin-top: 12px; text-align: center; padding: 12px 18px; }
  .nav-cta-li a { border-bottom: 0 !important; }
  /* Inline submenu on mobile */
  .has-sub > .subnav {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 0 14px;
  }
  .has-sub > .subnav a { font-size: 14px; padding: 10px 0; }
  .nav-parent .caret { display: none; }
}
@media (max-width: 720px) {
  .brand-text { display: none; }
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 26px !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
.btn-primary { background: var(--gold) !important; color: var(--bone) !important; border: 0 !important; }
.btn-primary:hover { background: #b88d22 !important; color: var(--bone) !important; transform: translateY(-1px) !important; }
.btn-maroon { background: var(--maroon) !important; color: var(--bone) !important; border: 0 !important; }
.btn-maroon:hover { background: var(--maroon-dark) !important; color: var(--bone) !important; transform: translateY(-1px) !important; }
.btn-ghost { background: transparent !important; color: var(--bone) !important; border: 1.5px solid #FAF7F1 !important; }
.btn-ghost:hover { background: rgba(250,247,241,.15) !important; color: #FAF7F1 !important; }
.btn-gold-on-maroon { background: var(--gold) !important; color: var(--maroon) !important; border: 0 !important; }
.btn-gold-on-maroon:hover { background: #c49520 !important; color: var(--maroon) !important; transform: translateY(-1px) !important; }
.btn-white-on-maroon { background: #FAF7F1 !important; color: var(--maroon) !important; border: 0 !important; }
.btn-white-on-maroon:hover { background: #ede8e0 !important; color: var(--maroon) !important; transform: translateY(-1px) !important; }
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--maroon);
  font-weight: 600;
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 2px;
}
.btn-link:hover { color: var(--maroon-dark); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow, .btn-link:hover .arrow { transform: translateX(3px); }

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: center;
  color: var(--bone);
  overflow: hidden;
  /* Asymmetric: the top is tighter than the bottom so the eyebrow sits
     close under the header and the hero gives that space back instead
     of re-centring into it. */
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(56px, 8vw, 96px);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(
      calc(var(--hero-overlay-angle, 120) * 1deg),
      color-mix(in srgb, var(--hero-overlay-from, #3D0F1C) calc(var(--hero-overlay-opacity, .75) * 113%), transparent) 0%,
      color-mix(in srgb, var(--hero-overlay-to,   #5A1A2B) calc(var(--hero-overlay-opacity, .75) *  87%), transparent) 55%,
      color-mix(in srgb, var(--hero-overlay-to,   #5A1A2B) calc(var(--hero-overlay-opacity, .75) *  60%), transparent) 100%
    ),
    var(--hero-bg, none);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hero .container { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--gold); }
.hero h1 {
  font-size: var(--text-hero);
  font-weight: 500;
  max-width: 24ch;
  margin-bottom: 22px;
  color: var(--bone);
  letter-spacing: -.015em;
  line-height: 1.05;
}
.hero .lead {
  font-size: var(--text-lead);
  max-width: 58ch;
  color: rgba(250,247,241,.92);
  margin-bottom: 28px;
  line-height: 1.55;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-actions .btn-ghost { color: var(--bone); }
.hero-meta {
  position: absolute;
  bottom: 32px; left: 0; right: 0;
  z-index: 1;
}
.hero-meta .container { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.hero-meta small { color: rgba(250,247,241,.7); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
/* On narrow screens the title + lead + actions can grow tall enough that
   an absolutely-positioned meta block overlaps the buttons. Let it flow
   beneath the content instead — and switch the hero out of row-flex so the
   meta stacks below, not to the side. */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .hero-meta {
    position: static;
    width: 100%;
    margin-top: 40px;
  }
  .hero-meta .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Compact hero for interior pages */
.subhero {
  background: var(--maroon);
  color: var(--bone);
  padding-block: clamp(80px, 10vw, 140px);
  position: relative;
  overflow: hidden;
}
.subhero::after {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(212,165,42,.18), transparent 65%);
  pointer-events: none;
}
/* Optional decorative image layer (rendered only when an image is chosen).
   Base opacity is a sensible default; the widget's slider overrides it. */
.subhero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .18;
  background-repeat: no-repeat;
  pointer-events: none;
}
.subhero-media--cover { background-size: cover; background-position: center; }
.subhero-media--right { background-size: contain; background-position: right center; }
/* Colour wash between the media layer and the text (Overlay Colour control) */
.subhero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.subhero .container { position: relative; z-index: 1; }
.subhero .eyebrow { color: var(--gold); }
.subhero h1 { 
  color: var(--bone); 
  max-width: 22ch; 
}
.subhero .lead { color: rgba(250,247,241,.88); font-size: var(--text-lead); max-width: 60ch; }
.subhero hr.rule { width: 64px; height: 2px; background: var(--gold); border: 0; margin: 24px 0; }

/* ============================================
   Institutional / About strip
   ============================================ */
.institutional {
  background: var(--bone);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.institutional .grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 800px) {
  .institutional .grid { grid-template-columns: 1fr; }
}
.institutional h2 { max-width: 18ch; }
.institutional p { font-size: var(--text-lead); color: var(--slate); line-height: 1.65; }
.institutional .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 24px; }
.institutional .stats .stat strong {
  display: block;
  font-family: var(--serif) !important;
  color: var(--maroon);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 6px;
}
.institutional .stats .stat span { font-size: 14px; color: var(--slate); }

/* ============================================
   Theory of change (maroon block)
   ============================================ */
.toc-block {
  background: var(--maroon);
  color: var(--bone);
  position: relative;
  overflow: hidden;
}
.toc-block::after {
  content: "";
  position: absolute;
  bottom: -120px; right: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(196,216,46,.18), transparent 65%);
  pointer-events: none;
}
.toc-block .grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .toc-block .grid { grid-template-columns: 1fr; } }
.toc-block h2 {
  font-size: var(--text-h1);
  color: var(--bone);
  max-width: 12ch;
  margin-bottom: 24px;
}
.toc-block h2 + .rule {
  width: 56px; height: 2px;
  background: var(--gold);
  border: 0;
  margin: 0 0 28px;
}
/* Optional brand-pattern ribbon, pinned flush to the bottom edge of the section.
   Sits in the section's bottom padding so it never overlaps the content. */
.toc-block > .border-strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  margin: 0;
}
.toc-block p { color: rgba(250,247,241,.9); font-size: var(--text-body); line-height: 1.7; }
.toc-block strong { color: var(--lime); font-weight: 700; }
.toc-anchor {
  display: block;
  margin-top: 32px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 18px;
  line-height: 1.55;
  border-left: 2px solid var(--gold);
  padding-left: 16px;
}

.cia-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.cia-step {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid rgba(250,247,241,.16);
}
.cia-step:last-child { border-bottom: 0; }
.cia-step .num {
  font-family: var(--serif) !important;
  font-size: 56px;
  line-height: 1;
  color: var(--lime);
  font-weight: 500;
  letter-spacing: -.02em;
}
.cia-step h3 { color: var(--bone); margin-bottom: 6px; font-size: 22px; }
.cia-step p { color: rgba(250,247,241,.85); margin: 0; font-size: 15px; line-height: 1.6; }

/* ============================================
   Section labels and headings
   ============================================ */
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { color: var(--slate); font-size: var(--text-lead); }

/* ============================================
   Three-pillar cards
   ============================================ */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 960px) { .pillar-grid { grid-template-columns: 1fr; } }
.pillar-card {
  background: var(--bone);
  border: 1px solid var(--border);
  border-top: 3px solid var(--pillar-ge);
  border-radius: 4px;
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(26,24,20,.08); }
.pillar-card.gold { border-top-color: var(--pillar-he); }
.pillar-card.peach { border-top-color: var(--pillar-se); }
.pillar-card .pill {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 600;
  margin-bottom: 12px;
}
.pillar-card h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 14px;
  color: var(--maroon);
}
.pillar-card .body { color: var(--slate); margin-bottom: 20px; font-size: 16px; line-height: 1.65; }
.pillar-card .cia { font-size: 14px; color: var(--ink); }
.pillar-card .cia p { margin-bottom: 10px; line-height: 1.55; }
.pillar-card .cia strong { color: var(--maroon); }
.pillar-card .explore {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--maroon);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pillar-card:hover .explore { color: var(--maroon-dark); }

/* ============================================
   Feature strip (featured work)
   ============================================ */
.feature-strip { background: var(--sand); }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
  background: var(--bone);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(26,24,20,.08); }
.feature-card .img {
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  background-color: var(--sand);
}
.feature-card .body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.feature-card .tag {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 10px;
}
.feature-card h3 { font-size: 20px; font-family: var(--serif); margin-bottom: 8px; color: var(--ink); }
.feature-card p { color: var(--slate); font-size: 15px; margin-bottom: 14px; line-height: 1.55; }
.feature-card .meta { margin-top: auto; font-size: 13px; color: var(--slate); font-weight: 600; }

/* ============================================
   Partner row
   ============================================ */
.partners-row {
  background: var(--bone);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.partners-row .label {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 600;
  margin-bottom: 24px;
  text-align: center;
}
.partners-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.partners-list li {
  list-style: none;
  font-family: var(--serif) !important;
  font-size: 17px;
  color: var(--ink);
  font-weight: 500;
  opacity: .72;
  letter-spacing: .005em;
}
.partners-list--left { justify-content: flex-start; }
.partners-group { margin-top: 24px; }
.partners-group + .partners-group { margin-top: 40px; }
.partners-group-label {
  font-family: var(--sans) !important;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin: 0 0 16px;
}

/* ============================================
   CTA block (lime soft)
   ============================================ */
.cta-block { background: var(--lime-soft); }
.cta-block .container {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 800px) { .cta-block .container { grid-template-columns: 1fr; } }
.cta-block h2 { font-size: var(--text-h2); color: var(--cta-heading, var(--maroon-dark)); max-width: 20ch; margin-bottom: 12px; }
.cta-block p { color: var(--ink); font-size: var(--text-lead); margin-bottom: 0; }
.cta-block .actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; position: relative; z-index: 2; }
@media (max-width: 800px) { .cta-block .actions { justify-content: flex-start; } }
/* Secondary action inside the CTA: a solid chip (deck-style pill) so it stays
   legible when the kente cloth accent sits in the same corner — a bare text
   link gets swallowed by the fabric. Scoped here; .btn-link elsewhere keeps
   its underlined text style. */
.cta-block .actions .btn-link {
  background: var(--bone);
  color: var(--maroon);
  padding: 13px 24px;
  border-radius: 4px;
  border-bottom: 0;
  box-shadow: 0 1px 6px rgba(26, 24, 20, .14);
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.cta-block .actions .btn-link:hover {
  background: #ffffff;
  color: var(--maroon-dark);
  transform: translateY(-1px);
}

/* ============================================
   Border pattern strip
   ============================================ */
.border-strip {
  height: 64px;
  /* Three stacked layers (top → bottom):
     1. pattern image           — opaque, fully covers when present
     2. ribbon tint (gradient)  — solid or translucent
     3. footer background-color — visible only where layers above are transparent */
  background-color: var(--top-bar-bg, var(--maroon-dark));
  background-image:
    var(--ribbon-pattern, url('../img/border-pattern-rbg.png')),
    linear-gradient(var(--ribbon-color, transparent), var(--ribbon-color, transparent));
  background-size: auto 64px, auto 100%;
  background-repeat: repeat-x, repeat-x;
  background-position: center, center;
}

/* ---- Adinkra band system (from the AR one-pager) -----------------------
   One transparent motif tile — band-motif.png, the deck's own motif artwork
   (white on transparent, one seamless 4-motif period) — painted entirely with
   CSS colours via mask-image. Everything is a token:
     --band-bg      strip background colour
     --band-motif   colour the motifs are painted in
     --band-line    bottom line colour (rendered only with .has-line)
     --band-line-h  bottom line thickness           (default 10px)
     --band-motif-size  motif row height within the strip (default 82%)
   Markup: <div class="border-strip band band-red has-line"></div>
   The band-* presets only set colours; override any var inline or drop the
   preset class and set all three yourself. */
.border-strip.band {
  position: relative;
  --_line-h: 0px;
  background-color: var(--band-bg, var(--maroon-dark));
  background-image: none; /* neutralise the legacy ribbon layers above */
}
.border-strip.band.has-line { --_line-h: var(--band-line-h, 10px); }
.border-strip.band::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: var(--_line-h);
  background-color: var(--band-motif, #ffffff);
  -webkit-mask-image: url('../img/band-motif.png');
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: left center;
  -webkit-mask-size: auto var(--band-motif-size, 82%);
  mask-image: url('../img/band-motif.png');
  mask-repeat: repeat-x;
  mask-position: left center;
  mask-size: auto var(--band-motif-size, 82%);
}
.border-strip.band.has-line::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--_line-h);
  background-color: var(--band-line, var(--gold));
}

/* Deck-exact colour presets (sampled from the one-pager SVGs) */
.border-strip.band-red    { --band-bg: #bf2026; --band-motif: #fcb4b7; --band-line: #ffd77e; }
.border-strip.band-lime   { --band-bg: #ccff99; --band-motif: #fcb4b7; --band-line: #499b5b; }
.border-strip.band-orange { --band-bg: #ff8a01; --band-motif: #bf2026; --band-line: #8c183a; }
.border-strip.band-green  { --band-bg: #499b5b; --band-motif: #8cc63f; --band-line: #ccff99; }
.border-strip.band-maroon { --band-bg: #8c183a; --band-motif: #bf2026; --band-line: #bf2026; }
/* Ivory — from the JMK Foundation deck (same motif artwork, warm ivory colourway) */
.border-strip.band-ivory  { --band-bg: #fdfce9; --band-motif: #ceb4a4; --band-line: #ceb4a4; }

/* Ghost — no colourway of its own. Every preset above paints a solid field;
   this one leaves --band-bg transparent so the section's own background is
   what shows through the motif gaps, and the motifs read tone-on-tone against
   it. This is the colourway the red/maroon sections use for their bottom
   ribbon, which is why the default motif/line are bone at low alpha: they
   land on --maroon (#5A1A2B) or --maroon-dark (#3D0F1C). Override
   --band-motif inline for any other field. */
.border-strip.band-ghost {
  --band-bg: transparent;
  --band-motif: rgba(250, 247, 241, .14);
  /* Carries more alpha than the motifs: the line is opt-in, so when it is
     switched on it has to actually read against the maroon. */
  --band-line: rgba(250, 247, 241, .3);
}

/* Ribbon hosts — pin a strip flush to a section's bottom edge.
   .toc-block gets this for free (its padding sits on the inner .container,
   so a normal-flow strip already lands on the edge), but .subhero and the
   gallery sections set padding-block on the section itself, where a flow
   strip would float up inside that padding instead. Absolute positioning is
   what makes the ribbon edge-flush regardless of which way the section pads.
   z-index clears sibling decorative layers (e.g. .toc-block::after's glow). */
.art-ribbon-host { position: relative; }
.art-ribbon-host > .border-strip.art-ribbon-pinned {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  margin: 0;
  pointer-events: none;
}

/* ---- Cloth window accents (JMK deck pages 20–26) ---------------------------
   African cloth photography showing through two leaf-shaped "holes" in the
   corner — in the deck these are petals of a giant AR logo-mark cluster
   hanging off the page edge. cloth-holes-mask.png is that exact composite
   silhouette, lifted from the deck and pre-anchored to the corner, so one
   masked element reproduces it: --cloth-img carries the fabric photo,
   --cloth-size the width (deck look = 52.9% of the section).
   Markup (ART Cloth Accent widget renders this):
     <div class="art-cloth-corner corner-br" style="--cloth-img:url(…)">
       <div class="art-cloth-leaf"></div>
     </div> */
.art-cloth-corner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
/* Whatever wraps the accent becomes its positioning context; isolation keeps
   the .behind layer inside this box (above its background, under its text). */
*:has(> .art-cloth-corner) { position: relative; isolation: isolate; }
.art-cloth-corner.behind { z-index: -1; }
.art-cloth-leaf {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--cloth-size, 52.9%);  /* deck-exact share of the section width */
  aspect-ratio: 1259 / 1071;        /* native proportions of the composite */
  background: var(--cloth-img) center/cover no-repeat;
  -webkit-mask: url('../img/cloth-holes-mask.png') center / 100% 100% no-repeat;
          mask: url('../img/cloth-holes-mask.png') center / 100% 100% no-repeat;
}
/* Optional brand-colour wash over the cloth (Gradient Tint controls) */
.art-cloth-corner.has-grad .art-cloth-leaf {
  background-image:
    linear-gradient(
      calc(var(--cloth-grad-angle, 135) * 1deg),
      var(--cloth-grad-from, rgba(140, 24, 58, 0.55)),
      var(--cloth-grad-to, rgba(140, 24, 58, 0))
    ),
    var(--cloth-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Floating: the leaves straddle the section boundary and hang over the
   neighbouring section (the deck's blobs-off-the-page-corner treatment).
   Nothing is clipped — the FULL blob shape stays visible: the accent box
   and its host stop clipping, and the host is raised so the overhang
   paints above the section that follows. Bottom corners drop below the
   edge; top corners rise above it. */
.art-cloth-corner.floating { overflow: visible; }
/* The host stops clipping VERTICALLY ONLY (clip-x, visible-y): every corner
   variant translates the leaf on Y, so that's the only axis the overhang
   needs — and hosts like .subhero keep off-edge ornaments (its ::after glow
   at right:-80px) from widening the page into a horizontal scroll. */
*:has(> .art-cloth-corner.floating) { overflow: clip visible; z-index: 3; }
/* Floating leaves swap to the FULL silhouette (cloth-holes-mask-full.png,
   re-isolated from the deck SVG with the page-boundary clips removed) so
   the petals close with their natural curves — no flat cut anywhere.
   Non-floating accents keep the original page-cut mask and are unchanged. */
.art-cloth-corner.floating .art-cloth-leaf {
  aspect-ratio: 858 / 1158;
  -webkit-mask-image: url('../img/cloth-holes-mask-full.png');
          mask-image: url('../img/cloth-holes-mask-full.png');
}
.art-cloth-corner.floating .art-cloth-leaf { transform: translateY(var(--cloth-drop, 75%)); }
.art-cloth-corner.floating.corner-bl .art-cloth-leaf { transform: translateY(var(--cloth-drop, 75%)) scaleX(-1); }
.art-cloth-corner.floating.corner-tr .art-cloth-leaf { transform: translateY(calc(var(--cloth-drop, 75%) * -1)) scaleY(-1); }
.art-cloth-corner.floating.corner-tl .art-cloth-leaf { transform: translateY(calc(var(--cloth-drop, 75%) * -1)) scale(-1, -1); }
/* On narrower viewports the centred container's gutter shrinks and a
   full-size floating leaf would land on the neighbouring section's
   text — cap the leaf width and ease the drop there; wide screens get
   the full size. */
@media (max-width: 1440px) {
  .art-cloth-corner.floating .art-cloth-leaf {
    width: min(var(--cloth-size, 52.9%), 20%);
    --cloth-drop: 75%;
  }
}
/* Mobile: the Leaves Size control is tuned for desktop composition (the
   hero ships at 18%), and a desktop-tuned share of a 390px phone is a
   ~70px speck — so below the header's own mobile switch (980px, same
   "mobile" sitewide) the leaf takes its own size instead of inheriting
   the desktop value. Default 40% of the section, overridable per-section
   with --cloth-size-mobile; the px term keeps it from dominating at
   tablet widths, where 40% would already be ~390px. Drop eases to 45%
   so the bigger leaf grows up into its own section rather than further
   down over the next one's heading. */
@media (max-width: 980px) {
  .art-cloth-corner.floating .art-cloth-leaf {
    width: min(var(--cloth-size-mobile, 40%), 300px);
    --cloth-drop: 45%;
  }
  /* ART Hero: its kicker rows ("PILLARS: …") end right where a 45% drop
     puts the leaf tip, so the words paint across the fabric. Sink the
     hero's leaves to ride the section boundary below the text instead —
     the section that follows keeps its text left-aligned, so the deeper
     right-side overhang lands on empty ground. */
  .elementor-widget-art-hero .art-cloth-corner.floating .art-cloth-leaf {
    --cloth-drop: 75%;
  }
}

/* Mirrored variant for the bottom-left corner */
.art-cloth-corner.corner-bl .art-cloth-leaf {
  right: auto;
  left: 0;
  transform: scaleX(-1);
}
/* Top corners: the composite flips vertically so the petals drape down
   from the section's top edge. */
.art-cloth-corner.corner-tr .art-cloth-leaf {
  bottom: auto;
  top: 0;
  transform: scaleY(-1);
}
.art-cloth-corner.corner-tl .art-cloth-leaf {
  right: auto;
  left: 0;
  bottom: auto;
  top: 0;
  transform: scale(-1, -1);
}

/* Full-bleed cloth banner, as across the top of every JMK page */
.art-cloth-strip {
  height: var(--cloth-strip-h, 140px);
  background: var(--cloth-img) center/cover no-repeat;
}


/* ============================================
   Footer
   ============================================ */
.footer {
  background: var(--top-bar-bg, var(--maroon-dark));
  color: color-mix(in srgb, var(--top-bar-text, var(--bone)) 78%, transparent);
  padding: 72px 0 32px;
}
.footer .grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
@media (max-width: 900px) { .footer .grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 540px) { .footer .grid { grid-template-columns: 1fr; } }
.footer h4 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 18px;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 10px; }
.footer a { color: color-mix(in srgb, var(--top-bar-text, var(--bone)) 78%, transparent); font-size: 15px; }
.footer a:hover { color: var(--top-bar-text, var(--bone)); }
.footer .brand-block .brand { color: var(--top-bar-text, var(--bone)); margin-bottom: 16px; }
.footer .brand-block .brand img,
.footer .brand-block .brand svg,
.footer .brand-block .brand .site-icon-logo {
  height: 48px !important;
  width: auto !important;
  max-width: 180px !important;
  max-height: 48px !important;
  object-fit: contain !important;
}
.footer .brand-block .brand small { color: color-mix(in srgb, var(--top-bar-text, var(--bone)) 60%, transparent); }
.footer .brand-block p { font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--top-bar-text, var(--bone)) 72%, transparent); max-width: 32ch; }
.footer .bottom {
  border-top: 1px solid color-mix(in srgb, var(--top-bar-text, var(--bone)) 16%, transparent);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: color-mix(in srgb, var(--top-bar-text, var(--bone)) 60%, transparent);
}

/* ============================================
   Reveal-on-scroll
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition: none !important; }
}

/* ============================================
   Interior page modules
   ============================================ */
.prose { max-width: 720px; }
.prose h2 { margin-top: 56px; }
.prose h3 { margin-top: 36px; }
.prose p, .prose li { font-size: 17px; line-height: 1.7; color: var(--ink); }
.prose blockquote {
  border-left: 3px solid var(--gold);
  padding: 8px 0 8px 24px;
  margin: 32px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--maroon);
  line-height: 1.4;
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
}
.timeline li {
  background: var(--bone);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 22px 20px;
  border-radius: 4px;
}
.timeline strong {
  display: block;
  font-family: var(--serif) !important;
  font-size: 24px;
  color: var(--maroon);
  margin-bottom: 8px;
}
.timeline span { font-size: 14px; color: var(--slate); line-height: 1.5; }

/* Three-up methodology block (Theory of Change deep) */
.method-stages { display: grid; gap: 56px; }
.method-stage {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 720px) { .method-stage { grid-template-columns: 1fr; gap: 16px; } }
.method-stage .num {
  font-family: var(--serif) !important;
  font-size: 110px;
  line-height: 1;
  color: var(--lime);
  font-weight: 500;
  letter-spacing: -.02em;
}
.method-stage h2 { font-size: 36px; margin-bottom: 12px; color: var(--maroon); }
.method-stage p { font-size: 17px; color: var(--slate); line-height: 1.7; }
.method-stage .example {
  margin-top: 16px;
  padding: 16px 20px;
  background: var(--sand);
  border-left: 3px solid var(--gold);
  font-size: 15px;
  color: var(--ink);
}
.method-stage .example strong { color: var(--maroon); }

/* Donor pathway cards */
.pathway-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .pathway-grid { grid-template-columns: 1fr; } }
.pathway-card {
  background: var(--bone);
  border: 1px solid var(--border);
  padding: 32px 28px;
  border-radius: 4px;
  position: relative;
}
.pathway-card .num {
  font-family: var(--serif) !important;
  font-size: 22px;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 12px;
}
.pathway-card h3 { color: var(--maroon); font-size: 22px; margin-bottom: 10px; }
.pathway-card p { font-size: 15px; color: var(--slate); margin-bottom: 16px; line-height: 1.6; }
.pathway-card a { font-size: 14px; font-weight: 600; }

/* Download list */
.downloads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) { .downloads { grid-template-columns: 1fr; } }
.download {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 22px;
  background: var(--bone);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
}
.download:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(26,24,20,.08); }
.download .icon {
  flex: 0 0 44px;
  width: 44px; height: 56px;
  background: var(--sand);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--maroon);
  font-weight: 700;
}
.download h4 { font-family: var(--sans); font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--ink); }
.download p { margin: 0; font-size: 13px; color: var(--slate); line-height: 1.5; }
.download .meta { font-size: 12px; color: var(--gold); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; }

/* Pillar deep page image */
.pillar-hero-img {
  width: 100%;
  aspect-ratio: 21/9;
  background-size: cover;
  background-position: center;
  margin-block: 48px;
  border-radius: 4px;
}

/* Two-column with image */
.two-col {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.two-col .visual {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}
.two-col-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 24px;
}

/* Contact block */
.contact-block { background: var(--bone); padding-block: clamp(48px, 6vw, 80px); }
.contact-block .contact-lead { font-size: var(--text-lead); color: var(--slate); line-height: 1.65; }
.contact-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 540px) { .contact-list { grid-template-columns: 1fr; } }
.contact-list li { font-size: 15px; color: var(--slate); line-height: 1.55; }
.contact-list strong { color: var(--maroon); font-family: var(--sans); font-weight: 600; }
.contact-list a { color: var(--ink); border-bottom: 1px solid var(--border); }
.contact-list a:hover { color: var(--maroon); border-bottom-color: var(--maroon); }

/* ── Contact Form widget (art-contact-form) ── */
.cf-section { padding-block: var(--section-y); }
.cf-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 860px) { .cf-layout { grid-template-columns: 1fr; } }

.cf-form-title {
  font-family: var(--serif);
  font-size: var(--text-h2);
  color: var(--maroon);
  margin-bottom: 8px;
  line-height: 1.2;
}
.cf-form-lead { font-size: 15px; color: var(--slate); margin-bottom: 32px; line-height: 1.6; }
.cf-form-lead a { color: var(--maroon); font-weight: 600; }

.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .cf-row { grid-template-columns: 1fr; } }

.cf-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.cf-group label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
}
.cf-req { color: var(--maroon); margin-left: 2px; }
.cf-group input,
.cf-group select,
.cf-group textarea {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 11px 14px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
  appearance: none;
}
.cf-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C5A55' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.cf-group input:focus,
.cf-group select:focus,
.cf-group textarea:focus { border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(90,26,43,.1); }
.cf-group textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.cf-group input::placeholder,
.cf-group textarea::placeholder { color: #b3afa7; }

.cf-submit { margin-top: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cf-note { font-size: 13px; color: var(--slate); }

.cf-info-col { display: flex; flex-direction: column; gap: 24px; }
.cf-info-card {
  background: var(--sand);
  border-radius: 12px;
  padding: clamp(20px, 2.5vw, 28px);
  border-top: 3px solid var(--gold);
}
.cf-info-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
h3.cf-info-heading {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--maroon);
  margin: 0 0 10px;
  line-height: 1.3;
}
.cf-info-card p { font-size: 14px; color: var(--slate); line-height: 1.6; margin-bottom: 12px; }
.cf-info-card p:last-child { margin-bottom: 0; }

.cf-channels { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cf-channel-item { display: flex; align-items: flex-start; gap: 12px; }
.cf-channel-body { display: flex; flex-direction: column; gap: 2px; }
.cf-channel-body strong { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.cf-channel-body a,
.cf-channel-body span { font-size: 14px; font-weight: 600; color: var(--maroon); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
.cf-channel-body a:hover { border-bottom-color: var(--maroon); }

/* ── Enquiry Routes widget (art-enquiry-routes) ── */
.er-section { padding-block: var(--section-y); }
.er-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
@media (max-width: 800px) { .er-grid { grid-template-columns: 1fr; } }
.er-card {
  background: var(--bone);
  border-radius: 12px;
  padding: clamp(24px, 3vw, 32px);
  border-left: 4px solid var(--border);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.er-card:hover { border-color: var(--maroon); box-shadow: 0 10px 28px rgba(26,24,20,.08); transform: translateY(-3px); }
.er-card--ge { border-left-color: var(--pillar-ge); }
.er-card--he { border-left-color: var(--pillar-he); }
.er-card--se { border-left-color: var(--pillar-se); }
.er-num { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.er-card h3 { color: var(--maroon); font-size: 20px; margin-bottom: 10px; }
.er-card p  { font-size: 14px; color: var(--slate); line-height: 1.6; margin-bottom: 16px; }
.er-mailto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--maroon);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.er-mailto:hover { border-bottom-color: var(--maroon); }

/* ── Reflections: Featured player (art-reflections-featured) ── */
.rf-featured {
  background-color: #0f0d0b;
  background-size: cover;
  background-position: center 30%;
  padding-block: 0;
  position: relative;
}
.rf-featured::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15,13,11,.05) 0%, rgba(15,13,11,.35) 60%, rgba(15,13,11,.85) 100%);
  pointer-events: none;
}
.rf-featured-wrap { position: relative; max-width: var(--container); margin-inline: auto; z-index: 1; min-height: clamp(280px, 40vw, 560px); display: flex; flex-direction: column; justify-content: flex-end; }
.rf-featured-info { padding: clamp(24px, 3vw, 40px) clamp(20px, 4vw, 56px); }
.rf-feat-label { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.rf-featured-info h2 { font-family: var(--serif); font-size: clamp(22px, 3vw, 36px); color: #fff; margin-bottom: 6px; line-height: 1.2; }
.rf-featured-info p  { font-size: 15px; color: rgba(250,247,241,.75); max-width: 56ch; }

/* ── Shared player controls ── */
.rf-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15,13,11,.92);
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 3;
  user-select: none;
  padding: 10px 16px 12px;
}
.rf-controls--featured { padding: 12px clamp(20px, 4vw, 56px) 16px; }
.rf-controls--card { border-radius: 0; padding: 8px 14px 10px; }

.rf-ctrl { background: none; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; color: rgba(250,247,241,.8); flex-shrink: 0; transition: color .15s ease; }
.rf-ctrl:hover { color: #fff; }
.rf-ctrl svg { display: block; }
.rf-ctrl-play { color: var(--gold); }
.rf-ctrl-play:hover { color: #e8b93a; }

.rf-progress { flex: 1; display: flex; align-items: center; cursor: pointer; position: relative; height: 20px; }
.rf-progress-track { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 3px; background: rgba(250,247,241,.2); border-radius: 2px; overflow: visible; }
.rf-progress-fill  { height: 100%; background: var(--maroon); border-radius: 2px; width: 0%; transition: width .1s linear; }
.rf-progress-thumb { position: absolute; top: 50%; left: 0%; transform: translate(-50%,-50%); width: 11px; height: 11px; border-radius: 50%; background: var(--maroon); box-shadow: 0 0 0 2px rgba(90,26,43,.4); transition: left .1s linear; }
.rf-progress:hover .rf-progress-fill,
.rf-progress:hover .rf-progress-thumb { background: #7a2338; }

.rf-time { font-family: var(--sans); font-size: 11px; color: rgba(250,247,241,.6); white-space: nowrap; min-width: 60px; }

.rf-vol-wrap { display: flex; align-items: center; gap: 6px; }
.rf-vol-track { width: 56px; height: 3px; background: rgba(250,247,241,.2); border-radius: 2px; position: relative; cursor: pointer; }
.rf-vol-fill  { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(250,247,241,.6); border-radius: 2px; width: 80%; }
.rf-vol-thumb { position: absolute; top: 50%; left: 80%; transform: translate(-50%,-50%); width: 9px; height: 9px; border-radius: 50%; background: rgba(250,247,241,.9); }

/* ── Audio badge + waveform ── */
.rf-audio-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15,13,11,.78);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(212,165,42,.45);
  border-radius: 100px;
  padding: 4px 11px 4px 8px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  pointer-events: none;
}
.rf-audio-badge--lg {
  position: static;
  display: inline-flex;
  padding: 6px 16px 6px 12px;
  font-size: 11px;
  letter-spacing: .13em;
  margin-bottom: 12px;
  border-color: rgba(212,165,42,.5);
  backdrop-filter: blur(6px);
}
.rf-audio-wave { display: flex; align-items: flex-end; gap: 2px; height: 12px; flex-shrink: 0; }
.rf-audio-wave span { display: block; width: 2.5px; background: var(--gold); border-radius: 2px; animation: rf-aw 1.4s ease-in-out infinite; }
.rf-audio-wave span:nth-child(1) { height: 5px;  animation-delay: 0s; }
.rf-audio-wave span:nth-child(2) { height: 10px; animation-delay: .18s; }
.rf-audio-wave span:nth-child(3) { height: 7px;  animation-delay: .36s; }
.rf-audio-wave span:nth-child(4) { height: 11px; animation-delay: .09s; }
.rf-audio-wave span:nth-child(5) { height: 4px;  animation-delay: .27s; }
@keyframes rf-aw {
  0%, 100% { transform: scaleY(.35); opacity: .6; }
  50%       { transform: scaleY(1);  opacity: 1; }
}
.rf-audio-badge--lg .rf-audio-wave { height: 14px; }
.rf-audio-badge--lg .rf-audio-wave span { width: 3px; }

/* ── Reflections: Grid / library (art-reflections-grid) ── */
.rf-library { padding-block: var(--section-y); background: var(--bone); }
.rf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .rf-grid { grid-template-columns: 1fr; max-width: 480px; } }
@media (max-width: 540px) { .rf-grid { gap: 20px; } }

.rf-card { background: var(--bone); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 18px rgba(26,24,20,.07); transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; }
.rf-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(26,24,20,.12); }

.rf-thumb-wrap { position: relative; aspect-ratio: 16/9; background: #1a1814; overflow: hidden; }
.rf-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.rf-card:hover .rf-thumb-wrap img { transform: scale(1.04); }
.rf-thumb-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(15,13,11,.6) 100%); pointer-events: none; }
.rf-thumb-placeholder { width: 100%; height: 100%; background: #2a2622; }

.rf-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; opacity: 0; transition: opacity .2s ease; }
.rf-card:hover .rf-play-overlay { opacity: 1; }
.rf-play-circle { width: 52px; height: 52px; border-radius: 50%; background: rgba(90,26,43,.88); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,.4); transition: transform .2s ease, background .2s ease; }
.rf-card:hover .rf-play-circle { transform: scale(1.08); background: var(--maroon); }
.rf-play-circle svg { margin-left: 3px; }

.rf-card-body { padding: clamp(16px, 2vw, 22px); flex: 1; display: flex; flex-direction: column; }
.rf-tag { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.rf-card-body h3 { font-family: var(--serif); font-size: clamp(17px, 1.6vw, 20px); color: var(--ink); margin-bottom: 8px; line-height: 1.3; }
.rf-card-body p  { font-size: 14px; color: var(--slate); line-height: 1.6; flex: 1; margin-bottom: 18px; }

/* Filter row */
.rf-filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; }
.rf-filter-label { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-right: 4px; }
.rf-filter-btn { font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 7px 18px; border-radius: 100px; border: 1.5px solid var(--border); background: transparent; color: var(--slate); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.rf-filter-btn:hover,
.rf-filter-btn.active { border-color: var(--maroon); background: var(--maroon); color: var(--bone); }

/* Load more */
.rf-load-more-row { text-align: center; margin-top: 48px; }

/* ── Policies List widget (art-policies-list) ── */
.pl-section { padding-block: var(--section-y); }

.pl-note {
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 28px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 40px;
}
.pl-note-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pl-note p { font-size: 14px; color: var(--slate); line-height: 1.65; margin: 0; }
.pl-note p strong { color: var(--ink); }
.pl-note p a { color: var(--maroon); }

.pl-grid { display: flex; flex-direction: column; gap: 0; }

.pl-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 24px;
  align-items: start;
  padding: clamp(28px, 3.5vw, 40px) 0;
  border-bottom: 1px solid var(--border);
}
.pl-card:first-child { border-top: 1px solid var(--border); }
@media (max-width: 640px) { .pl-card { grid-template-columns: 1fr; } }

.pl-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }

.pl-category {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(90,26,43,.08);
  color: var(--maroon);
}

.pl-status {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pl-status--active {
  background: rgba(212,165,42,.12);
  color: #7a6010;
}
.pl-status--active::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.pl-status--review {
  background: rgba(232,155,108,.12);
  color: #8a4a1a;
}

.pl-title {
  font-family: var(--serif);
  font-size: clamp(17px, 1.8vw, 22px);
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.25;
}
.pl-desc    { font-size: 15px; color: var(--slate); line-height: 1.65; max-width: 60ch; }
.pl-reviewed { font-family: var(--sans); font-size: 12px; color: var(--slate); margin-top: 10px; opacity: .7; }

.pl-action { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 4px; }
@media (max-width: 640px) { .pl-action { align-items: flex-start; } }

.pl-btn-doc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--maroon);
  text-decoration: none;
  padding: 8px 16px;
  border: 1.5px solid var(--maroon);
  border-radius: 6px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.pl-btn-doc:hover { background: var(--maroon); color: var(--bone); }

/* Small UI */
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--maroon);
  border: 1px solid var(--border);
}

/* Top bar */
.art-top-bar {
  font-size: 12.5px;
  letter-spacing: .02em;
  padding: 7px 0;
  line-height: 1.4;
}
.art-top-bar.bg-dark  { background: var(--top-bar-bg, var(--maroon-dark)); color: var(--top-bar-text, var(--bone)); }
.art-top-bar.bg-light { background: var(--top-bar-bg, #f5f4f1);          color: var(--top-bar-text, var(--ink));  border-bottom: 1px solid var(--border); }
.art-top-bar.bg-sand  { background: var(--top-bar-bg, var(--sand));      color: var(--top-bar-text, var(--ink));  border-bottom: 1px solid var(--border); }
/* Matches the pattern band's bottom line (band-green preset, #CCFF99) so the
   top strip and the footer band bookend the page in the same lime. */
.art-top-bar.bg-band  { background: #CCFF99; color: var(--ink); border-bottom: 1px solid color-mix(in srgb, #499B5B 30%, transparent); }

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.top-bar-left,
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.art-top-bar-content a { color: inherit; text-decoration: none; }
.art-top-bar-content a:hover { text-decoration: underline; }

/* Shortcode placeholder badge — hidden by default, shown in editor via JS */

.art-top-bar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.art-top-bar-nav li { position: relative; }
.art-top-bar-nav a {
  color: inherit;
  text-decoration: none;
  font-size: 12.5px;
  opacity: .85;
  transition: opacity .15s;
  white-space: nowrap;
}
.art-top-bar-nav a:hover { opacity: 1; }
.art-top-bar.bg-dark .art-top-bar-nav a { color: color-mix(in srgb, var(--top-bar-text, var(--bone)) 88%, transparent); }
.art-top-bar.bg-dark .art-top-bar-nav a:hover { color: var(--top-bar-text, var(--bone)); opacity: 1; }

/* Phones: six GTranslate flags plus the top-bar menu can't share one row —
   the flags wrap into a ragged cluster and the menu splits mid-list. Below
   the width where both sides genuinely fit (~640px), stack the bar into two
   centred rows — flags above, menu below — and normalise the JS-injected
   flag images to one size so the row reads as a deliberate strip. */
@media (max-width: 640px) {
  .top-bar-inner { flex-direction: column; gap: 7px; }
  .top-bar-left, .top-bar-right { justify-content: center; }
  .art-top-bar-nav { justify-content: center; column-gap: 18px; row-gap: 4px; }
  .art-top-bar-content { display: flex; justify-content: center; }
  .gtranslate_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .gtranslate_wrapper a { display: inline-flex; line-height: 0; }
  .gtranslate_wrapper img {
    display: block;
    width: 24px;
    height: 18px;           /* 4:3, GTranslate's native flag ratio */
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(26, 24, 20, .18);
  }
}

/* Legacy draft-banner alias */
.draft-banner {
  background: var(--maroon-dark);
  color: var(--bone);
  text-align: center;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 8px 16px;
}
.draft-banner strong { color: var(--gold); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; margin-right: 8px; }

/* Anchor offset for sticky header */
:target { scroll-margin-top: 96px; }

/* ============================================
   Insights — Briefing catalog
   ============================================ */
.brief-overview { background: var(--bone); }
.brief-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
@media (max-width: 900px) { .brief-stats { grid-template-columns: 1fr; } }
.stat-card {
  background: var(--bone);
  border: 1px solid var(--border);
  border-top: 4px solid var(--gold);
  padding: 24px 24px 22px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-card.theme-ge { border-top-color: var(--pillar-ge); }
.stat-card.theme-he { border-top-color: var(--pillar-he); }
.stat-card.theme-se { border-top-color: var(--pillar-se); }
.stat-code {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--slate);
  font-size: 12px;
}
.stat-num {
  font-family: var(--serif) !important;
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  color: var(--maroon);
}
.stat-label {
  font-size: 14px;
  color: var(--slate);
  font-weight: 500;
}

.brief-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.brief-nav-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bone);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.brief-nav-link:hover { background: var(--sand); transform: translateY(-1px); }
.brief-nav-link .brief-nav-code {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .1em;
  font-size: 12px;
  color: var(--maroon);
}
.brief-nav-link.theme-ge .brief-nav-code { color: var(--pillar-ge-dark); }
.brief-nav-link.theme-he .brief-nav-code { color: var(--pillar-he-dark); }
.brief-nav-link.theme-se .brief-nav-code { color: var(--pillar-se-dark); }

.brief-note {
  background: var(--sand);
  border-left: 3px solid var(--gold);
  padding: 16px 20px;
  font-size: 14.5px;
  color: var(--slate);
  border-radius: 0 4px 4px 0;
  margin: 0;
}
.brief-note strong { color: var(--maroon); font-weight: 600; }

.brief-section { padding-block: var(--section-y); }
.brief-section.theme-bg-ge { background: linear-gradient(180deg, var(--bone) 0%, var(--sand) 100%); }
.brief-section.theme-bg-he { background: var(--bone); }
.brief-section.theme-bg-se { background: linear-gradient(180deg, var(--sand) 0%, var(--bone) 100%); }

.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
}
.section-head--row > div:first-child { max-width: 720px; }
@media (max-width: 720px) { .section-head--row { flex-direction: column; align-items: flex-start; } }
.brief-section-title { margin-bottom: 12px; }
.brief-section-count {
  font-family: var(--serif) !important;
  text-align: right;
  line-height: 1;
}
.brief-section-count .count-num {
  display: block;
  font-family: var(--serif) !important;
  font-size: 64px;
  font-weight: 600;
  color: var(--maroon);
}
.brief-section-count .count-label {
  display: block;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 600;
  margin-top: 4px;
}
.theme-eyebrow-ge { color: var(--pillar-ge-dark) !important; }
.theme-eyebrow-he { color: var(--pillar-he-dark) !important; }
.theme-eyebrow-se { color: var(--pillar-se-dark) !important; }

.brief-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 1080px) { .brief-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .brief-grid { grid-template-columns: 1fr; } }

.brief-card {
  background: var(--bone);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.brief-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(26,24,20,.10);
  border-color: var(--slate);
}
.brief-card.theme-ge { border-top: 4px solid var(--pillar-ge); }
.brief-card.theme-he { border-top: 4px solid var(--pillar-he); }
.brief-card.theme-se { border-top: 4px solid var(--pillar-se); }
.brief-card.is-forthcoming { opacity: .94; }

.brief-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--maroon);
  container-type: inline-size;
}
.brief-thumb-photo {
  position: absolute;
  inset: 0 0 auto 0;
  height: 56%;
  display: block;
  overflow: hidden;
  background: var(--sand);
}
.brief-thumb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.brief-card:hover .brief-thumb-photo img { transform: scale(1.025); }
/* Soft top-left shade so the logo badge always reads on busy photos */
.brief-thumb-photo::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 55%;
  height: 90%;
  background: radial-gradient(ellipse at top left,
    color-mix(in srgb, var(--maroon-dark) 55%, transparent) 0%,
    color-mix(in srgb, var(--maroon-dark) 0%, transparent) 65%);
  pointer-events: none;
  z-index: 1;
}

/* Top-left logo + handle overlay */
.brief-brand {
  position: absolute;
  top: 5%;
  left: 4%;
  display: flex;
  align-items: center;
  gap: 3cqi;
  z-index: 2;
  color: var(--bone);
}
.brief-brand-badge {
  width: 11cqi;
  max-width: 64px;
  min-width: 32px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bone);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.brief-brand-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.brief-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brief-brand-handle {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(11px, 2.4cqi, 18px);
}
.brief-brand-org {
  font-family: var(--sans);
  font-size: clamp(9px, 1.5cqi, 12px);
  opacity: .85;
  margin-top: 2px;
}

/* Bottom maroon caption block — sits between the photo and the gold pattern strip */
.brief-caption {
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  bottom: clamp(12px, 4.5cqi, 30px);
  background: var(--maroon);
  padding: 3.2cqi 4.5cqi 2.4cqi;
  display: flex;
  flex-direction: column;
  gap: 1.2cqi;
  color: var(--bone);
  overflow: hidden;
  z-index: 1;
}
.brief-caption-eyebrow {
  display: flex;
  align-items: center;
  gap: 1.4cqi;
  color: var(--gold);
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(9px, 1.55cqi, 13px);
  letter-spacing: .12em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.brief-mandala {
  width: clamp(14px, 2.6cqi, 22px);
  height: clamp(14px, 2.6cqi, 22px);
  flex-shrink: 0;
  color: var(--gold);
}
.brief-caption-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(13px, 2.9cqi, 28px);
  line-height: 1.12;
  color: var(--bone);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
}
.brief-caption-sub {
  font-family: var(--sans);
  font-size: clamp(10px, 1.45cqi, 14px);
  line-height: 1.35;
  opacity: .9;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
}
.brief-caption-rule {
  width: clamp(32px, 6cqi, 64px);
  height: 3px;
  margin-top: auto;
  background: var(--gold);
  flex-shrink: 0;
}
.brief-caption.theme-ge .brief-caption-rule { background: var(--pillar-ge); }
.brief-caption.theme-he .brief-caption-rule { background: var(--pillar-he); }
.brief-caption.theme-se .brief-caption-rule { background: var(--pillar-se); }

/* Gold woven pattern strip at the very bottom */
.brief-pattern {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(12px, 4.5cqi, 30px);
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: left center;
  z-index: 2;
  pointer-events: none;
}

/* ============================================================
   Shared image brand overlay
   Apply class `art-has-brand-overlay` to any image container,
   then drop the overlay markup (helper: art_render_image_brand_overlay)
   inside it. Adds the @theartrust logo + handle (top-left) and the
   gold woven pattern strip (bottom). No caption block.
   ============================================================ */
.art-has-brand-overlay {
  /* Establishes a containing block + size context for the overlay children.
     Containers that aren't already positioned must add `position: relative`
     themselves (see .pillar-hero-img / .two-col .visual / .feature-card .img). */
  overflow: hidden;
  container-type: inline-size;
}
.pillar-hero-img.art-has-brand-overlay,
.two-col .visual.art-has-brand-overlay,
.feature-card .img.art-has-brand-overlay,
.art-modal-img.art-has-brand-overlay {
  position: relative;
}
.art-has-brand-overlay::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 50%;
  height: 70%;
  background: radial-gradient(ellipse at top left,
    color-mix(in srgb, var(--maroon-dark) 45%, transparent) 0%,
    color-mix(in srgb, var(--maroon-dark) 0%, transparent) 65%);
  pointer-events: none;
  z-index: 2;
}
.art-img-brand {
  position: absolute;
  top: 4%;
  left: 3.5%;
  display: flex;
  align-items: center;
  gap: 2.4cqi;
  z-index: 3;
  color: var(--bone);
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.art-img-brand-badge {
  width: 8cqi;
  min-width: 36px;
  max-width: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bone);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.art-img-brand .art-img-brand-badge img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  display: block;
  border-radius: 0;
}
.art-img-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.art-img-brand-handle {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(11px, 1.9cqi, 18px);
}
.art-img-brand-org {
  font-family: var(--sans);
  font-size: clamp(9px, 1.25cqi, 13px);
  opacity: .9;
  margin-top: 2px;
}
.art-img-pattern {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(12px, 3.5cqi, 28px);
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: left center;
  z-index: 3;
  pointer-events: none;
}
/* Lift hover/caption layers above the pattern strip so they cover it cleanly */
.archive-card .archive-caption { z-index: 4; }
.art-gallery-slider-wrap .slide-caption,
.art-gallery-slider-wrap .slide-counter { z-index: 4; }
.strip-card .card-body { z-index: 4; }
/* Reflections grid: keep the brand badge top-left; shift the Audio pill to
   the top-right so the two never collide. */
.rf-thumb-wrap.art-has-brand-overlay .rf-audio-badge {
  left: auto;
  right: 12px;
}

.brief-status {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(250, 247, 241, 0.92);
  color: var(--maroon);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.brief-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.brief-meta {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 600;
  margin-bottom: 10px;
}
.brief-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 8px;
}
.brief-sub {
  font-size: 14.5px;
  color: var(--maroon);
  font-weight: 500;
  line-height: 1.45;
  margin: 0 0 12px;
}
.brief-excerpt {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
  margin: 0 0 18px;
}
.brief-actions {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.brief-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--maroon);
  padding: 6px 0;
}
.brief-cta:hover { color: var(--maroon-dark); }
.brief-cta .arrow { transition: transform .15s ease; }
.brief-cta:hover .arrow { transform: translateX(3px); }
.brief-cta.is-disabled {
  color: var(--slate);
  cursor: not-allowed;
  font-weight: 500;
}

/* Renaissance Vault promo card */
.vault-promo { background: var(--bone); padding: 56px 0 24px; }
.vault-promo-card {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  color: #FAF7F1;
  border-radius: 16px;
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(61,15,28,.18);
}
@media (max-width: 900px) { .vault-promo-card { grid-template-columns: 1fr; } }
.vault-promo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(212,165,42,.22) 0%, transparent 55%);
  pointer-events: none;
}
.vault-promo-text { position: relative; }
.vault-promo-text .eyebrow { color: #D4A52A; }
.vault-promo-text h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 12px 0 14px;
  color: #FAF7F1;
}
.vault-promo-text p {
  color: rgba(250,247,241,.85);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 56ch;
}
.vault-promo-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.vault-promo-actions .btn-primary { background: #D4A52A !important; color: #3D0F1C !important; }
.vault-promo-actions .btn-primary:hover { background: #C4D82E !important; color: #3D0F1C !important; }
.vault-promo-actions .btn-link { color: #FAF7F1; }
.vault-promo-actions .btn-link:hover { color: #D4A52A; }
.vault-promo-meta {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  color: rgba(250,247,241,.8);
  font-size: 13.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.vault-promo-meta li { display: flex; align-items: baseline; gap: 8px; }
.vault-promo-meta strong {
  font-family: var(--serif) !important;
  font-size: 26px;
  font-weight: 500;
  color: #D4A52A;
  letter-spacing: 0;
}
.vault-promo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  position: relative;
}
.vp-tile {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  aspect-ratio: 4/3;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #FAF7F1;
  background: rgba(250,247,241,.06);
  border: 1px solid rgba(250,247,241,.14);
  text-align: left;
  line-height: 1.2;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.vp-tile:hover { transform: translateY(-2px); background: rgba(250,247,241,.12); border-color: rgba(212,165,42,.55); }
.vp-ge      { background: linear-gradient(135deg, rgba(196,216,46,.22), rgba(196,216,46,.06)); }
.vp-aid     { background: linear-gradient(135deg, rgba(212,165,42,.22), rgba(212,165,42,.06)); }
.vp-urban   { background: linear-gradient(135deg, rgba(232,155,108,.22), rgba(232,155,108,.06)); }
.vp-climate { background: linear-gradient(135deg, rgba(46,166,180,.22), rgba(46,166,180,.06)); }
.vp-food    { background: linear-gradient(135deg, rgba(196,216,46,.16), rgba(212,165,42,.08)); }
.vp-trade   { background: linear-gradient(135deg, rgba(232,155,108,.18), rgba(212,165,42,.08)); }
.vp-border  { background: linear-gradient(135deg, rgba(212,165,42,.18), rgba(196,216,46,.08)); }
.vp-parl    { background: linear-gradient(135deg, rgba(250,247,241,.10), rgba(250,247,241,.02)); }
.vp-teen    { background: linear-gradient(135deg, rgba(196,216,46,.20), rgba(196,216,46,.04)); }
.vp-pop     { background: linear-gradient(135deg, rgba(46,166,180,.20), rgba(46,166,180,.04)); }
.vp-maputo  { background: linear-gradient(135deg, rgba(232,155,108,.20), rgba(232,155,108,.04)); }
.vp-ama     { background: linear-gradient(135deg, rgba(212,165,42,.20), rgba(196,216,46,.04)); }

/* ============================================================
   Vault Frame — full-page iframe shell for the Renaissance Vault
   Used on the /vault page by ART_Vault_Frame_Widget.
   ============================================================ */
.vault-wrap { background: #FAF7F1; }
.vault-frame-shell { padding: 0 0 var(--space-3xl, 64px); }
.vault-frame-shell .container { max-width: 1320px; }
.vault-meta-strip { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; justify-content: space-between; margin: 28px 0 18px; padding-bottom: 20px; border-bottom: 1px solid #D9D2C2; }
.vault-meta-strip .meta-left { max-width: 720px; }
.vault-meta-strip h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); color: #3D0F1C; margin: 0 0 10px; letter-spacing: -0.01em; }
.vault-meta-strip p { color: #5C5A55; margin: 0; font-size: 15px; line-height: 1.55; }
.vault-meta-strip .meta-right { display: flex; gap: 10px; flex-wrap: wrap; }
.vault-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid #D9D2C2; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: #3D0F1C; font-weight: 600; }
.vault-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.vault-frame { position: relative; width: 100%; height: 78vh; min-height: 720px; max-height: 1100px; border: 1px solid #D9D2C2; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 38px rgba(61,15,28,.08), 0 2px 6px rgba(61,15,28,.04); background: #fff; }
.vault-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vault-cap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; margin-top: 18px; color: #5C5A55; font-size: 13.5px; }
.vault-cap a { color: #5A1A2B; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vault-cap a:hover { color: #3D0F1C; }
.vault-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 28px; }
.vault-theme-card { background: #fff; border: 1px solid #D9D2C2; border-left: 4px solid #5A1A2B; padding: 16px 18px; border-radius: 8px; text-decoration: none; display: block; transition: transform .2s ease, box-shadow .2s ease; }
.vault-theme-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(61,15,28,.08); }
.vault-theme-card .tcode { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #5C5A55; font-weight: 600; }
.vault-theme-card .tname { font-family: var(--serif); font-size: 18px; color: #3D0F1C; margin: 4px 0 0; font-weight: 500; }
@media (max-width: 760px) {
  .vault-frame { height: 70vh; min-height: 540px; }
}

/* ============================================================
   Opportunities List — careers, tenders, fellowships sections
   Used by ART_Opportunities_List_Widget.
   ============================================================ */

/* Stats bar */
.opp-stats { display: flex; gap: 32px; flex-wrap: wrap; padding: 24px 0 40px; border-bottom: 1px solid var(--border); margin-bottom: 48px; }
.opp-stat { display: flex; flex-direction: column; gap: 2px; }
.opp-stat strong { font-family: var(--serif); font-size: 32px; color: var(--maroon); line-height: 1; }
.opp-stat span { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }

/* Shared card list */
.opp-list { display: flex; flex-direction: column; gap: 16px; }

/* Opportunity cards (careers / consultancies) */
.opp-card { background: var(--bone); border: 1.5px solid var(--border); border-left: 4px solid var(--border); border-radius: 10px; padding: clamp(20px,2.5vw,28px); display: grid; grid-template-columns: 1fr auto; gap: 20px 32px; align-items: center; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.opp-card:hover { border-color: var(--maroon); box-shadow: 0 8px 28px rgba(26,24,20,.08); transform: translateY(-2px); }
.opp-card.dept-ge    { border-left-color: var(--pillar-ge); }
.opp-card.dept-he    { border-left-color: var(--pillar-he); }
.opp-card.dept-se    { border-left-color: var(--pillar-se); }
.opp-card.dept-ops   { border-left-color: var(--maroon); }
.opp-card.dept-comms { border-left-color: #E89B6C; }
.opp-card.is-closed  { opacity: .6; pointer-events: none; }
@media (max-width: 640px) { .opp-card { grid-template-columns: 1fr; } }

.opp-main { min-width: 0; }

.opp-dept-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.opp-dept-tag.ge    { color: var(--pillar-ge-dark); }
.opp-dept-tag.he    { color: var(--pillar-he-dark); }
.opp-dept-tag.se    { color: var(--pillar-se-dark); }
.opp-dept-tag.ops   { color: var(--maroon); }
.opp-dept-tag.comms { color: #b06941; }

.opp-main h3 { font-family: var(--serif); font-size: clamp(17px,1.5vw,20px); color: var(--ink); margin-bottom: 10px; line-height: 1.3; }

.opp-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 0 0 12px; }
.opp-meta li { font-family: var(--sans); font-size: 13px; color: var(--slate); display: flex; align-items: center; gap: 5px; }
.opp-meta li svg { flex-shrink: 0; color: var(--gold); }

.opp-desc { font-size: 14px; color: var(--slate); line-height: 1.6; max-width: 72ch; }

.opp-action { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
@media (max-width: 640px) { .opp-action { flex-direction: row; align-items: center; justify-content: space-between; } }

/* Status badges */
.status-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; white-space: nowrap; }
.status-badge::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.status-badge.open   { background: rgba(196,216,46,.15); color: var(--pillar-ge-dark); }
.status-badge.open::before { background: var(--pillar-ge-dark); }
.status-badge.new    { background: rgba(90,26,43,.1); color: var(--maroon); }
.status-badge.new::before { background: var(--maroon); animation: opp-pulse 1.6s ease infinite; }
.status-badge.soon   { background: rgba(212,165,42,.15); color: #8a6a1a; }
.status-badge.soon::before { background: var(--gold); }
.status-badge.closed { background: rgba(92,90,85,.1); color: var(--slate); }
.status-badge.closed::before { background: var(--slate); }
@keyframes opp-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.7); } }

/* Tender cards */
.tender-card { background: var(--bone); border: 1.5px solid var(--border); border-left: 4px solid var(--slate); border-radius: 10px; padding: clamp(20px,2.5vw,28px); display: grid; grid-template-columns: 1fr auto; gap: 20px 32px; align-items: center; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.tender-card:hover { border-left-color: var(--maroon); box-shadow: 0 8px 28px rgba(26,24,20,.08); transform: translateY(-2px); }
.tender-card.is-closed { opacity: .6; pointer-events: none; }
@media (max-width: 640px) { .tender-card { grid-template-columns: 1fr; } }

.tender-ref { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.tender-card h3 { font-family: var(--serif); font-size: clamp(17px,1.5vw,20px); color: var(--ink); margin-bottom: 10px; line-height: 1.3; }

.opp-tender-note { margin-top: 32px; font-size: 14px; color: var(--slate); }
.opp-tender-note a { color: var(--maroon); font-weight: 600; }

/* Fellowships empty state */
.opp-empty { text-align: center; padding: clamp(48px,7vw,80px) clamp(24px,4vw,48px); border: 1.5px dashed var(--border); border-radius: 12px; background: var(--bone); }
.opp-empty-icon { width: 52px; height: 52px; background: rgba(90,26,43,.07); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--maroon); }
.opp-empty h3 { font-family: var(--serif); font-size: clamp(18px,1.8vw,22px); color: var(--ink); margin-bottom: 10px; }
.opp-empty p { color: var(--slate); font-size: 15px; margin-bottom: 24px; max-width: 48ch; margin-inline: auto; }
.opp-empty .actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================
   ART Episode Modal
========================================================== */
.art-em-trigger { display: inline-block; }

.art-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,13,11,.72);
  z-index: 9200;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  overflow-y: auto;
  padding: clamp(20px, 5vw, 48px) 20px;
  box-sizing: border-box;
}
.art-modal-backdrop.open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.art-modal-box {
  background: #fff;
  width: 100%;
  max-width: 780px;
  border-radius: 6px;
  padding: clamp(24px, 4vw, 40px);
  position: relative;
  margin: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
.art-modal-header {
  background: var(--maroon);
  margin: calc(-1 * clamp(24px, 4vw, 40px));
  margin-bottom: 24px;
  padding: clamp(22px, 3vw, 32px) clamp(24px, 4vw, 40px);
  border-radius: 6px 6px 0 0;
  position: relative;
}
.art-modal-header::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(212,165,42,.18), transparent 65%);
  pointer-events: none;
}
.art-modal-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.art-modal-rule {
  width: 48px;
  height: 2px;
  background: var(--gold);
  border: 0;
  margin: 14px 0 0;
}
.art-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: rgba(250,247,241,.65);
  padding: 4px 6px;
  transition: color .15s ease;
}
.art-modal-close:hover { color: #fff; }
.art-modal-title {
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 600;
  color: var(--bone);
  line-height: 1.2;
  margin-bottom: 0;
}
/* --- modal audio player bar --- */
.art-modal-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 12px;
  background: rgba(15,13,11,.92);
  border-radius: 6px;
  margin-bottom: 20px;
  user-select: none;
}
.art-mp-play,
.art-mp-vol-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(250,247,241,.8);
  flex-shrink: 0;
  transition: color .15s ease;
}
.art-mp-play { color: var(--gold); }
.art-mp-play:hover { color: #e8b93a; }
.art-mp-vol-btn:hover { color: #fff; }
.art-mp-progress {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  height: 20px;
  cursor: pointer;
}
.art-mp-track {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  background: rgba(250,247,241,.2);
  border-radius: 2px;
}
.art-mp-fill {
  height: 100%;
  background: var(--maroon);
  border-radius: 2px;
  width: 0%;
  transition: width .1s linear;
}
.art-mp-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--maroon);
  box-shadow: 0 0 0 2px rgba(90,26,43,.4);
  transition: left .1s linear;
}
.art-mp-time {
  font-family: var(--sans);
  font-size: 11px;
  color: rgba(250,247,241,.6);
  white-space: nowrap;
  min-width: 60px;
}
.art-mp-vol-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.art-mp-vol-track {
  width: 56px;
  height: 3px;
  background: rgba(250,247,241,.2);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}
.art-mp-vol-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(250,247,241,.6);
  border-radius: 2px;
  width: 80%;
}
.art-mp-vol-thumb {
  position: absolute;
  top: 50%;
  left: 80%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(250,247,241,.9);
}
.art-modal-hero {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
  align-items: flex-start;
}
.art-modal-img {
  flex: 0 0 42%;
  max-width: 280px;
}
.art-modal-img img {
  width: 100%;
  height: 185px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.art-modal-intro {
  flex: 1;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink);
}
.art-modal-intro p { margin-bottom: 14px; }
.art-modal-intro p:last-child { margin-bottom: 0; }
.art-modal-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 28px;
}
.art-modal-body p { margin-bottom: 14px; }
.art-modal-body p:last-child { margin-bottom: 0; }
.art-modal-cta {
  text-align: center;
  padding-top: 4px;
}
@media (max-width: 580px) {
  .art-modal-hero { flex-direction: column; }
  .art-modal-img { max-width: 100%; flex: none; }
  .art-modal-img img { height: 210px; }
}

/* ── Strategy Items ── */
.strategy-list { }
.strategy-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0 40px;
  padding: clamp(40px, 5vw, 64px) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.strategy-item:first-child { border-top: 1px solid var(--border); }
.strategy-num {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 600;
  color: var(--maroon);
  opacity: .18;
  line-height: 1;
  padding-top: 4px;
  user-select: none;
}
.strategy-body h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 12px;
}
.strategy-body > p {
  font-size: 17px;
  color: var(--slate);
  line-height: 1.75;
  max-width: 68ch;
  margin-bottom: 20px;
}
.strategy-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.strategy-body ul li {
  font-size: 14px;
  color: var(--slate);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.strategy-body ul li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 6px;
}
/* ── People Grid ─────────────────────────────────────────────── */
.person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.person-card {
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 28px 24px;
}
.person-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--gold);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.person-name {
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.2;
}
.person-role {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 6px;
}
.person-location {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--slate);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.person-expertise {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.expertise-tag {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  background: rgba(212,165,42,.12);
  color: var(--pillar-he-dark, var(--maroon));
}
.person-bio {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.65;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .strategy-item { grid-template-columns: 1fr; gap: 16px; }
}

/* ── CSF List ─────────────────────────────────────────────────── */
.csf-list { display: grid; gap: 0; }
.csf-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0 40px;
  padding: clamp(40px, 5vw, 64px) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.csf-item:first-child { border-top: 1px solid var(--border); }
.csf-num {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 600;
  color: var(--maroon);
  opacity: .18;
  line-height: 1;
  padding-top: 4px;
  user-select: none;
}
.csf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.csf-tag {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid currentColor;
}
.csf-tag.ge  { color: var(--pillar-ge-dark); border-color: var(--pillar-ge); background: rgba(196,216,46,.08); }
.csf-tag.he  { color: var(--pillar-he-dark); border-color: var(--pillar-he); background: rgba(212,165,42,.08); }
.csf-tag.se  { color: var(--pillar-se-dark); border-color: var(--pillar-se); background: rgba(232,155,108,.10); }
.csf-tag.all { color: var(--maroon); border-color: var(--maroon); background: rgba(90,26,43,.06); }
.csf-body h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 14px;
}
.csf-body p { font-size: 17px; color: var(--slate); line-height: 1.75; margin-bottom: 20px; max-width: 68ch; }
.csf-example {
  background: var(--sand);
  border-left: 3px solid var(--gold);
  padding: 14px 18px;
  border-radius: 0 6px 6px 0;
  max-width: 68ch;
}
.csf-example p { font-size: 14px; color: var(--slate); margin: 0; line-height: 1.6; }
.csf-example strong { color: var(--maroon); }
@media (max-width: 720px) {
  .csf-item { grid-template-columns: 1fr; gap: 16px; }
}

/* ── CSF Pillar Map ───────────────────────────────────────────── */
.csf-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 40px;
  border-radius: 10px;
  overflow: hidden;
}
.csf-map-col { background: var(--bone); padding: 28px 24px; }
.csf-map-col:nth-child(1) { border-top: 3px solid var(--pillar-ge); }
.csf-map-col:nth-child(2) { border-top: 3px solid var(--pillar-he); }
.csf-map-col:nth-child(3) { border-top: 3px solid var(--pillar-se); }
.csf-map-col h4 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 16px;
}
.csf-map-col h4 span {
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-top: 4px;
  font-weight: 500;
}
.csf-map-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.csf-map-col li {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--slate);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}
.csf-map-col li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 6px;
}
@media (max-width: 640px) {
  .csf-map { grid-template-columns: 1fr; }
}

/* ─── Annual Reports List (ART Annual Reports List widget) ─────────────── */
.arl-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.arl-card {
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--maroon);
  border-radius: 10px;
  padding: clamp(20px, 2.5vw, 28px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px 32px;
  align-items: center;
  transition: box-shadow .2s ease, transform .2s ease;
}
.arl-card:hover {
  box-shadow: 0 8px 28px rgba(26,24,20,.08);
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .arl-card { grid-template-columns: 1fr; }
}
.arl-year {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.arl-card h3 {
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.3;
}
.arl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}
.arl-meta li {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 5px;
}
.arl-meta li svg { flex-shrink: 0; color: var(--gold); }
.arl-desc {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.6;
}
.arl-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .arl-action { flex-direction: row; align-items: center; }
}
.arl-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  white-space: nowrap;
}
.arl-badge--latest {
  background: rgba(90,26,43,.1);
  color: var(--maroon);
}
.arl-badge--latest::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--maroon);
  animation: arl-pulse 1.6s ease infinite;
}
.arl-badge--published {
  background: rgba(212,165,42,.12);
  color: var(--pillar-he-dark);
}
.arl-badge--published::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
@keyframes arl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.7); }
}

/* ─── Report Contents (ART Report Contents widget) ─────────────────────── */
.rco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.rco-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-radius: 10px;
}
.rco-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(90,26,43,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--maroon);
  flex-shrink: 0;
}
.rco-item h4 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.rco-item p {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.5;
  margin: 0;
}

/* ── AU Framework List ────────────────────────────────────────── */
.framework-list { display: flex; flex-direction: column; }
.framework-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 32px;
  align-items: start;
  padding: clamp(28px, 3.5vw, 44px) 0;
  border-bottom: 1px solid var(--border);
}
.framework-item:first-child { border-top: 1px solid var(--border); }
.framework-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.framework-type {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(90,26,43,.08);
  color: var(--maroon);
}
.pillar-tag {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
}
.pillar-tag.ge  { background: rgba(196,216,46,.15); color: #7a8a15; }
.pillar-tag.he  { background: rgba(212,165,42,.15); color: #8a6a1a; }
.pillar-tag.se  { background: rgba(232,155,108,.15); color: #a05a30; }
.pillar-tag.all { background: rgba(90,26,43,.06); color: var(--maroon); }
.framework-year { font-family: var(--sans); font-size: 11px; color: var(--slate); opacity: .7; }
.framework-title {
  font-family: var(--serif);
  font-size: clamp(17px, 1.8vw, 22px);
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.25;
}
.framework-desc { font-size: 15px; color: var(--slate); line-height: 1.65; max-width: 62ch; margin-bottom: 12px; }
.framework-relevance {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.5;
  padding: 10px 14px;
  background: var(--sand);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  max-width: 60ch;
}
.framework-relevance strong { color: var(--ink); }
.framework-status { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 4px; }
.status-badge {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
}
.status-badge.ratified { background: rgba(212,165,42,.15); color: #7a6010; }
.status-badge.adopted  { background: rgba(90,26,43,.08); color: var(--maroon); }
.status-badge.active   { background: rgba(196,216,46,.15); color: #5a6a10; }
@media (max-width: 680px) {
  .framework-item { grid-template-columns: 1fr; }
  .framework-status { align-items: flex-start; }
}

/* ── AU Policy Index ─────────────────────────────────────────── */
.index-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.filter-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--slate);
  cursor: pointer;
  transition: all .15s;
}
.filter-btn:hover,
.filter-btn.active {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #FAF7F1;
}
.pillar-section {
  margin-bottom: 48px;
}
.pillar-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--border);
}
.pillar-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pillar-dot.ge  { background: var(--pillar-ge); }
.pillar-dot.he  { background: var(--pillar-he); }
.pillar-dot.se  { background: var(--pillar-se); }
.pillar-dot.all { background: var(--maroon); }
.pillar-section-head h3 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0;
}
.policy-table {
  width: 100%;
  border-collapse: collapse;
}
.policy-table th {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: .6;
  text-align: left;
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--border);
}
.policy-table td {
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.policy-table tr:last-child td { border-bottom: none; }
.entry-name {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 3px;
}
.entry-body {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.55;
}
.entry-type {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(90,26,43,.07);
  color: var(--maroon);
  white-space: nowrap;
}
.entry-year {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--slate);
  white-space: nowrap;
}
.entry-status {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.entry-status.ratified { background: rgba(212,165,42,.15); color: #7a6010; }
.entry-status.adopted  { background: rgba(90,26,43,.07);   color: var(--maroon); }
.entry-status.active   { background: rgba(196,216,46,.15); color: #5a6a10; }
.entry-status.force    { background: rgba(212,165,42,.2);  color: #7a6010; }
@media (max-width: 720px) {
  .policy-table thead { display: none; }
  .policy-table td { display: block; padding: 6px 0; border: none; }
  .policy-table tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--border); }
  .policy-table tr:last-child { border-bottom: none; }
}

/* Engagement List */
.engagement-list {
  display: flex;
  flex-direction: column;
}
.engagement-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0 40px;
  padding: clamp(36px, 4.5vw, 56px) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.engagement-item:first-child { border-top: 1px solid var(--border); }
.engagement-num {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 600;
  color: var(--maroon);
  opacity: .18;
  line-height: 1;
  padding-top: 4px;
  user-select: none;
}
.engagement-body h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 10px;
}
.engagement-body > p {
  font-size: 16px;
  color: var(--slate);
  line-height: 1.75;
  max-width: 66ch;
  margin-bottom: 16px;
}
.engagement-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.engagement-points li {
  font-size: 14px;
  color: var(--slate);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.engagement-points li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 6px;
}
@media (max-width: 720px) {
  .engagement-item { grid-template-columns: 1fr; gap: 12px; }
}

/* REC Grid */
.rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.rec-card {
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}
.rec-abbr {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--maroon);
  opacity: .35;
  line-height: 1;
  margin-bottom: 6px;
}
.rec-name {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.3;
}
.rec-desc {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.55;
}

/* Calendar List */
.calendar-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.calendar-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.calendar-item:first-child { border-top: 1px solid var(--border); }
.cal-period {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--maroon);
  padding-top: 3px;
}
.cal-event {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.3;
}
.cal-desc {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.5;
}
@media (max-width: 580px) {
  .calendar-item { grid-template-columns: 1fr; gap: 6px; }
}

/* Pillar Application Cards */
.pillar-application {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 800px) {
  .pillar-application { grid-template-columns: 1fr; }
}
.app-card {
  border-radius: 10px;
  padding: 24px;
  border-top: 4px solid transparent;
}
.app-card.ge { background: rgba(196,216,46,.08); border-top-color: var(--pillar-ge); }
.app-card.he { background: rgba(212,165,42,.08); border-top-color: var(--pillar-he); }
.app-card.se { background: rgba(232,155,108,.08); border-top-color: var(--pillar-se); }
.app-pillar {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.app-card.ge .app-pillar { color: #7a8a15; }
.app-card.he .app-pillar { color: #8a6a1a; }
.app-card.se .app-pillar { color: #a05a30; }
.app-card h4 {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.3;
}
.app-card p {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.6;
}

/* ── Stat Row ─────────────────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.stat-box {
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}
.stat-box .stat-num {
  font-family: var(--serif);
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 600;
  color: var(--maroon);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-box .stat-label {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.5;
}
@media (max-width: 720px) {
  .stat-row { grid-template-columns: 1fr; }
}

/* ── Stage List ───────────────────────────────────────────────── */
.stage-list { display: flex; flex-direction: column; }
.stage-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0 40px;
  padding: clamp(36px, 4.5vw, 56px) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.stage-item:first-child { border-top: 1px solid var(--border); }
.stage-num {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 600;
  color: var(--maroon);
  opacity: .18;
  line-height: 1;
  padding-top: 4px;
  user-select: none;
}
.stage-body h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 10px;
}
.stage-body p { font-size: 16px; color: var(--slate); line-height: 1.75; max-width: 66ch; margin-bottom: 16px; }
.stage-body ul,
.stage-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stage-body ul li,
.stage-points li {
  font-size: 14px;
  color: var(--slate);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.stage-body ul li::before,
.stage-points li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 6px;
}
@media (max-width: 720px) {
  .stage-item { grid-template-columns: 1fr; gap: 12px; }
}

/* ── Vault Feature inline promo ───────────────────────────────── */
.vault-feature-wrap { padding: 0; }
.vault-feature-wrap > .container { padding-top: 0; }
.vault-feature {
  background: var(--maroon);
  border-radius: 12px;
  padding: clamp(32px, 4vw, 48px);
  color: #FAF7F1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 40px;
}
.vault-feature h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--gold);
  margin-bottom: 12px;
  line-height: 1.2;
}
.vault-feature p {
  font-size: 15px;
  color: rgba(250,247,241,.75);
  line-height: 1.7;
  margin-bottom: 20px;
}
.vault-layers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vault-layer {
  background: rgba(250,247,241,.08);
  border: 1px solid rgba(212,165,42,.3);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  color: rgba(250,247,241,.85);
  display: flex;
  align-items: center;
  gap: 10px;
}
.vault-layer::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .vault-feature { grid-template-columns: 1fr; }
}

/* Course Grid */
.track-section {
  margin-bottom: 56px;
}
.track-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: .6;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.track-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.course-card {
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.course-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.09);
  transform: translateY(-2px);
}
.course-banner { height: 6px; }
.course-banner.ge { background: var(--pillar-ge); }
.course-banner.he { background: var(--pillar-he); }
.course-banner.se { background: var(--pillar-se); }
.course-banner.au { background: var(--maroon); }
.course-inner {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.course-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.course-pillar {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
}
.course-pillar.ge { background: rgba(196,216,46,.15); color: #7a8a15; }
.course-pillar.he { background: rgba(212,165,42,.15); color: #8a6a1a; }
.course-pillar.se { background: rgba(232,155,108,.15); color: #a05a30; }
.course-pillar.au { background: rgba(90,26,43,.08); color: var(--maroon); }
.course-level {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: .7;
}
.course-title {
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.25;
}
.course-desc {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 20px;
}
.course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  gap: 12px;
}
.course-duration {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 6px;
}
.course-format {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--sand);
  color: var(--slate);
}
.course-cta {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--maroon);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.course-cta:hover { text-decoration: underline; }
.course-card.is-forthcoming .course-cta {
  color: var(--slate);
  opacity: .5;
  pointer-events: none;
}
.forthcoming-strip {
  background: rgba(212,165,42,.1);
  border: 1px dashed rgba(212,165,42,.4);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  color: #7a6010;
  margin-bottom: 20px;
  font-family: var(--sans);
}

/* Case Studies Grid */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}
.cs-card {
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.cs-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.09);
  transform: translateY(-2px);
}
.cs-top { padding: 24px 24px 0; }
.cs-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cs-pillar {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
}
.cs-pillar.ge { background: rgba(196,216,46,.15); color: #7a8a15; }
.cs-pillar.he { background: rgba(212,165,42,.15); color: #8a6a1a; }
.cs-pillar.se { background: rgba(232,155,108,.15); color: #a05a30; }
.cs-approach {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: .7;
}
.cs-country {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--maroon);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.cs-title {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.25;
}
.cs-summary {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.65;
  margin-bottom: 20px;
}
.cs-outcome {
  background: var(--sand);
  border-left: 3px solid var(--gold);
  margin: 0 24px 20px;
  padding: 12px 14px;
  border-radius: 0 6px 6px 0;
}
.cs-outcome-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 4px;
}
.cs-outcome p {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.55;
  margin: 0;
}
.cs-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.cs-year {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--slate);
  opacity: .6;
}
.cs-link {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--maroon);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cs-link:hover { text-decoration: underline; }
.cs-section-divider {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: .5;
  margin: 48px 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cs-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── How Steps Grid ──────────────────────────────────────────── */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.how-card {
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 28px 24px;
}
.how-step {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 600;
  color: var(--maroon);
  opacity: .18;
  line-height: 1;
  margin-bottom: 14px;
  user-select: none;
}
.how-card h3 {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.25;
}
.how-card p {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.65;
}
.integrity-box {
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 20px;
  align-items: start;
  margin-top: 40px;
}
.integrity-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.integrity-box h4 {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 8px;
}
.integrity-box p {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.65;
  max-width: 64ch;
}
@media (max-width: 780px) {
  .how-grid { grid-template-columns: 1fr; }
}

/* ── Submission Types ────────────────────────────────────────── */
.submission-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.type-card {
  border-radius: 10px;
  padding: 22px;
  border-left: 4px solid transparent;
}
.type-card.ge  { background: rgba(196,216,46,.08);  border-left-color: var(--pillar-ge); }
.type-card.he  { background: rgba(212,165,42,.08);  border-left-color: var(--pillar-he); }
.type-card.se  { background: rgba(232,155,108,.08); border-left-color: var(--pillar-se); }
.type-card.all { background: rgba(90,26,43,.04);    border-left-color: var(--maroon); }
.type-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.type-card.ge .type-label  { color: #7a8a15; }
.type-card.he .type-label  { color: #8a6a1a; }
.type-card.se .type-label  { color: #a05a30; }
.type-card.all .type-label { color: var(--maroon); }
.type-card h4 {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.25;
}
.type-card p {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.6;
}

/* ── Contributions List ──────────────────────────────────────── */
.contribution-list {
  display: flex;
  flex-direction: column;
}
.contribution-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 24px;
  align-items: start;
  padding: clamp(20px, 2.5vw, 28px) 0;
  border-bottom: 1px solid var(--border);
}
.contribution-item:first-child { border-top: 1px solid var(--border); }
.contrib-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.contrib-tag {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 100px;
}
.contrib-tag.ge { background: rgba(196,216,46,.15);  color: #7a8a15; }
.contrib-tag.he { background: rgba(212,165,42,.15);  color: #8a6a1a; }
.contrib-tag.se { background: rgba(232,155,108,.15); color: #a05a30; }
.contrib-country {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--slate);
  opacity: .65;
}
.contrib-title {
  font-family: var(--serif);
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.3;
}
.contrib-desc {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.6;
  max-width: 58ch;
}
.contrib-contributor {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--slate);
  margin-top: 8px;
  opacity: .65;
}
.contrib-action { padding-top: 4px; }
.btn-sm {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--maroon);
  text-decoration: none;
  padding: 6px 14px;
  border: 1.5px solid var(--maroon);
  border-radius: 6px;
  white-space: nowrap;
  display: inline-block;
  transition: background .15s, color .15s;
}
.btn-sm:hover {
  background: var(--maroon);
  color: #FAF7F1;
}
@media (max-width: 600px) {
  .contribution-item { grid-template-columns: 1fr; }
}

/* Election Diary */
.ed-search-wrap { margin: 36px 0 0; max-width: 480px; }
.ed-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
}
.ed-search-icon { font-size: 14px; opacity: .45; flex-shrink: 0; }
.ed-search input {
  border: 0;
  outline: 0;
  flex: 1;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: transparent;
}
.ed-search input::placeholder { color: var(--border); }
.ed-tabs-outer {
  border-bottom: 2px solid var(--border);
  margin-bottom: 32px;
}
.ed-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ed-tabs::-webkit-scrollbar { display: none; }
.ed-tab {
  padding: 12px 22px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color .15s ease;
  white-space: nowrap;
  letter-spacing: .03em;
}
.ed-tab.active { color: var(--maroon); border-bottom-color: var(--maroon); }
.ed-tab:hover:not(.active) { color: var(--ink); }
.ed-tab.ed-search-tab { cursor: default; font-size: 14px; }
.ed-search-year-group { display: contents; }
.ed-search-year-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--maroon);
  padding: 14px 20px 6px;
  background: var(--sand);
  border-top: 1px solid var(--border);
}
.ed-search-year-group:first-of-type .ed-search-year-label { border-top: 0; }
.ed-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.ed-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--slate);
}
.ed-country {
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
}
.ed-country-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.ed-country-flag { font-size: 20px; line-height: 1; }
.ed-country-flag-img { width: 28px; height: 20px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.ed-country-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.ed-election { border-bottom: 1px solid var(--border); }
.ed-election:last-child { border-bottom: 0; }
.ed-row {
  display: grid;
  grid-template-columns: 1fr 110px 140px;
  align-items: center;
  padding: 14px 20px 6px;
  gap: 12px;
}
.ed-type {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.ed-month {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--maroon);
}
.ed-year-lbl {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--slate);
  opacity: .7;
}
.ed-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  justify-content: flex-end;
}
.ed-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ed-dot.scheduled  { background: #22C55E; }
.ed-dot.completed  { background: var(--slate); opacity: .5; }
.ed-dot.delayed    { background: #F59E0B; }
.ed-dot.uncertain  { background: #EF4444; }
.ed-note {
  padding: 4px 20px 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--slate);
  line-height: 1.65;
}
.ed-empty {
  text-align: center;
  color: var(--slate);
  padding: 56px 0;
  font-family: var(--sans);
  font-size: 15px;
  opacity: .6;
}
@media (max-width: 600px) {
  .ed-row { grid-template-columns: 1fr 110px; }
  .ed-date { display: none; }
}

/* ── Case Study Hero ──────────────────────────────────────────── */
.cs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--slate);
}
.cs-breadcrumb a { color: var(--maroon); text-decoration: none; }
.cs-breadcrumb a:hover { text-decoration: underline; }
.cs-breadcrumb span { opacity: .4; }
.cs-breadcrumb span:last-child { opacity: 1; }

.cs-hero-card {
  background: var(--maroon);
  border-radius: 16px;
  padding: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: center;
  margin-bottom: 56px;
  position: relative;
  overflow: hidden;
}
.cs-hero-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(212,165,42,.07);
  pointer-events: none;
}
.cs-hero-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  opacity: .8;
}
.cs-hero-title {
  font-family: var(--serif);
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 600;
  color: #FAF7F1;
  line-height: 1.15;
  margin-bottom: 16px;
}
.cs-hero-sub { font-size: 16px; color: rgba(250,247,241,.65); line-height: 1.65; max-width: 52ch; }
.cs-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.cs-meta-pill {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  border: 1px solid rgba(212,165,42,.4);
  color: var(--gold);
}
.cs-hero-stats { display: flex; flex-direction: column; gap: 20px; }
.cs-stat {
  background: rgba(250,247,241,.06);
  border: 1px solid rgba(212,165,42,.2);
  border-radius: 10px;
  padding: 18px 20px;
}
.cs-stat-num {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 4px;
}
.cs-stat-label { font-size: 12px; color: rgba(250,247,241,.55); line-height: 1.4; }
@media (max-width: 760px) { .cs-hero-card { grid-template-columns: 1fr; } }

/* ── Slide strip ──────────────────────────────────────────────── */
.slide-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 56px;
}
.slide-thumb {
  aspect-ratio: 16/9;
  border-radius: 6px;
  border: 2px solid var(--border);
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: .5;
  cursor: default;
}
.slide-thumb.active {
  border-color: var(--gold);
  background: rgba(212,165,42,.08);
  opacity: 1;
  color: #7a6010;
}
@media (max-width: 680px) { .slide-strip { grid-template-columns: repeat(3, 1fr); } }

/* ── Breakdown Grid ───────────────────────────────────────────── */
.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
.breakdown-card {
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.breakdown-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.breakdown-num {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--maroon);
  opacity: .18;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
}
.breakdown-card h3 {
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--ink);
  line-height: 1.2;
}
.breakdown-card ul,
.breakdown-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.breakdown-card ul li,
.breakdown-points li {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.breakdown-card ul li::before,
.breakdown-points li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 7px;
}
@media (max-width: 780px) { .breakdown-grid { grid-template-columns: 1fr; } }

/* ── Outcome Banner ───────────────────────────────────────────── */
.outcome-banner {
  background: var(--sand);
  border: 1px solid var(--border);
  border-left: 5px solid var(--gold);
  border-radius: 0 12px 12px 0;
  padding: clamp(28px, 3.5vw, 40px) clamp(28px, 4vw, 48px);
  margin-bottom: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.outcome-banner h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.25;
  grid-column: 1 / -1;
}
.outcome-item { display: flex; flex-direction: column; gap: 4px; }
.outcome-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--maroon);
}
.outcome-text { font-size: 15px; color: var(--slate); line-height: 1.6; }
@media (max-width: 680px) { .outcome-banner { grid-template-columns: 1fr; } }

/* ── Case Study Timeline ──────────────────────────────────────── */
.cs-timeline { display: flex; flex-direction: column; gap: 0; margin-bottom: 56px; }
.tl-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.tl-item:first-child { border-top: 1px solid var(--border); }
.tl-date {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--maroon);
  padding-top: 3px;
}
.tl-event { font-family: var(--serif); font-size: 16px; color: var(--ink); margin-bottom: 4px; line-height: 1.3; }
.tl-desc { font-size: 13px; color: var(--slate); line-height: 1.55; }
@media (max-width: 580px) { .tl-item { grid-template-columns: 1fr; gap: 6px; } }

/* ── Tag Cloud ────────────────────────────────────────────────── */
.cs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.cs-tag {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--slate);
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--bone);
}


/* ── Slide Carousel ───────────────────────────────────────────── */
.art-scar-section {
  overflow-x: hidden;
}
.art-scar-shell {
  margin-block: 48px;
  position: relative;
}
.art-scar-slider {
  overflow: hidden;
  position: relative;
}
.art-scar-track {
  display: flex;
  gap: 16px;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.art-scar-card {
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--sand);
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.art-scar-card img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.art-scar-caption {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--slate);
  padding: 8px 12px;
  margin: 0;
}
.art-scar-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}
.art-scar-prev,
.art-scar-next {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: background .18s, border-color .18s;
}
.art-scar-prev:hover,
.art-scar-next:hover { background: var(--sand); border-color: var(--gold); }
.art-scar-prev:disabled,
.art-scar-next:disabled { opacity: .35; cursor: default; }
.art-scar-progress {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  min-width: 52px;
  text-align: center;
}
.art-scar-progress em { color: var(--slate); font-style: normal; }

/* ── PDF Flipper — DearFlip wrapper ──────────────────────────────── */
.art-flipper-shell {
  margin-block: 48px;
  position: relative;
}
/* Merged widget — tight spacing between flipper and carousel */
.art-doc-showcase {
  overflow-x: hidden;
}
.art-doc-showcase .art-flipper-shell {
  margin-bottom: 0;
}
.art-doc-showcase .art-scar-shell {
  margin-top: 24px;
}
/* Force the dFlip book container to use full column width */
.art-flipper-shell ._df_book {
  width: 100% !important;
}
/* Remove any max-width cap dFlip applies so pages scale to the height we set */
.art-flipper-shell .df-container {
  max-width: 100% !important;
  width: 100% !important;
}
.art-flipper-empty {
  padding: 40px;
  text-align: center;
  background: var(--sand);
  color: var(--slate);
  font-family: var(--sans);
  font-size: 14px;
  border: 1px dashed var(--border);
  border-radius: 4px;
}

/* Stage — dark letterbox that holds the book */
.art-flipper-stage {
  position: relative;
  background: #2a2a2a;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
}
.art-flipper-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-family: var(--sans);
  font-size: 14px;
  z-index: 2;
}
.art-flipper-book {
  /* StPageFlip sets its own width/height; we just make it a block */
  display: block;
}
/* Pages inside the book — StPageFlip positions these */
.art-flipper-page {
  background: #fff;
  overflow: hidden;
}
.art-flipper-page canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Controls bar */
.art-flipper-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}
.art-flipper-prev,
.art-flipper-next {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.art-flipper-prev:hover,
.art-flipper-next:hover { background: var(--sand); border-color: var(--gold); }
.art-flipper-prev:disabled,
.art-flipper-next:disabled { opacity: .35; cursor: default; }
.art-flipper-counter {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  min-width: 64px;
  text-align: center;
  user-select: none;
}
.art-flipper-counter em { color: var(--slate); font-style: normal; }
.art-flipper-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
.art-ftb {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--slate);
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
}
.art-ftb:hover { background: var(--sand); border-color: var(--border); color: var(--ink); }
.art-ftb[aria-pressed="true"],
.art-ftb.active { color: var(--maroon); border-color: var(--gold); background: var(--sand); }
.art-ftb-sound[aria-pressed="false"] { opacity: .45; }

/* Thumbnails panel */
.art-flipper-thumbs-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 14px;
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}
.art-flipper-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px;
  border-radius: 3px;
  border: 2px solid transparent;
  transition: border-color .15s;
}
.art-flipper-thumb:hover { border-color: var(--gold); }
.art-flipper-thumb.active { border-color: var(--maroon); }
.art-flipper-thumb canvas { display: block; border: 1px solid var(--border); }
.art-flipper-thumb span {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--slate);
}

/* Fullscreen state */
.art-flipper-shell.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #1a1a1a;
  margin: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.art-flipper-shell.is-fullscreen .art-flipper-stage {
  flex: 1;
  min-height: 0;
  border-radius: 4px;
}
.art-flipper-shell.is-fullscreen .art-flipper-counter,
.art-flipper-shell.is-fullscreen .art-flipper-prev,
.art-flipper-shell.is-fullscreen .art-flipper-next,
.art-flipper-shell.is-fullscreen .art-ftb { color: #ccc; border-color: #444; }
.art-flipper-shell.is-fullscreen .art-flipper-prev:hover,
.art-flipper-shell.is-fullscreen .art-flipper-next:hover,
.art-flipper-shell.is-fullscreen .art-ftb:hover { background: #333; border-color: #666; color: #fff; }
.art-flipper-shell.is-fullscreen .art-flipper-toolbar { border-left-color: #444; }
/* Swap fullscreen icon to collapse arrows when already fullscreen */
.art-flipper-shell.is-fullscreen .art-ftb-fs svg { display: none; }
.art-flipper-shell.is-fullscreen .art-ftb-fs::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2'%3E%3Cpath d='M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 0 2-2h3M3 16h3a2 2 0 0 0 2 2v3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ============================================================
   Pillar page theming
   The three pillar pages carry a body class (pillar-theme +
   pillar-theme--{ge|he|se}, added in art-elements.php from the
   page slug) that promotes that pillar's Design Token pair into
   generic --pillar / --pillar-deep hooks. Everything below keys
   off those, so recolouring a pillar in ART Design Tokens
   restyles its whole page. Base identity (gold eyebrow + rule on
   the banner, gold status tags, maroon footer, lime top bar)
   is deliberately left alone — the pillar hue is an accent
   thread, not a takeover.
   ============================================================ */
.pillar-theme--ge { --pillar: var(--pillar-ge); --pillar-deep: var(--pillar-ge-dark); }
.pillar-theme--he { --pillar: var(--pillar-he); --pillar-deep: var(--pillar-he-dark); }
.pillar-theme--se { --pillar: var(--pillar-se); --pillar-deep: var(--pillar-se-dark); }
/* Deep hue nudged toward ink for small/bold text and button fills —
   keeps the SE green readable on sand without a per-pillar override. */
.pillar-theme { --pillar-ink: color-mix(in srgb, var(--pillar-deep) 78%, var(--ink)); }

/* Section eyebrows pick up the pillar; the ones sitting on the
   banner itself stay gold (they'd vanish into the pillar hue). */
.pillar-theme .eyebrow { color: var(--pillar-ink); }
.pillar-theme .subhero .eyebrow,
.pillar-theme .hero .eyebrow { color: var(--gold); }

/* Approach steps: big numerals in the pillar hue (was lime),
   stage titles in the deep hue (was maroon). */
.pillar-theme .method-stage .num { color: var(--pillar); }
.pillar-theme .method-stage h2 { color: var(--pillar-deep); }
.pillar-theme .method-stage .example { border-left-color: var(--pillar); }

/* Project cards: pillar top border, echoing the homepage pillar
   cards. Status tags keep their gold site-wide meaning. */
.pillar-theme .feature-card { border-top: 3px solid var(--pillar); }

/* Photo brand overlay: the woven bottom strip is normally an
   orange raster set inline — repaint it with the shared band
   motif mask so it takes the pillar hue; the badge-legibility
   wash follows the deep hue instead of maroon. */
.pillar-theme .art-img-pattern {
  background-image: none !important;
  background-color: var(--pillar);
  -webkit-mask: url('../img/band-motif.png') left center / auto 100% repeat-x;
  mask: url('../img/band-motif.png') left center / auto 100% repeat-x;
}
.pillar-theme .art-has-brand-overlay::before {
  background: radial-gradient(ellipse at top left,
    color-mix(in srgb, var(--pillar-deep) 45%, transparent) 0%,
    color-mix(in srgb, var(--pillar-deep) 0%, transparent) 65%);
}

/* Donor block actions: primary button and briefing link take the
   pillar ink; scoped to .two-col so header/footer buttons keep
   their site colours. */
.pillar-theme .two-col .btn-maroon { background: var(--pillar-ink) !important; }
.pillar-theme .two-col .btn-maroon:hover { background: color-mix(in srgb, var(--pillar-deep) 55%, var(--ink)) !important; }
.pillar-theme .two-col .btn-link { color: var(--pillar-ink); border-bottom-color: var(--pillar); }
.pillar-theme .two-col .btn-link:hover { color: var(--pillar-deep); }

/* Pillar pages bookends: the header top bar and the footer ribbon
   follow the page's pillar hue. Same relationship as the site-wide
   lime bookends — the top bar wears the ribbon's bottom-line pastel.
   Scoped to .bg-band / .band so other header variants and custom
   ribbon colours (Elementor post CSS loads later, ties on
   specificity) still win. */
.pillar-theme {
  --pillar-band-line: color-mix(in srgb, var(--pillar) 35%, white);
}
.pillar-theme .art-top-bar.bg-band {
  background: var(--pillar-band-line);
  border-bottom-color: color-mix(in srgb, var(--pillar-deep) 30%, transparent);
}
/* :not(.band-ghost) — a ghost band is deliberately field-less, so it opts out
   of the pillar recolour here rather than being handed a --pillar field. This
   selector also has to out-specify .border-strip.band-ghost, which it does. */
.pillar-theme .border-strip.band:not(.band-ghost) {
  --band-bg: var(--pillar);
  --band-motif: color-mix(in srgb, var(--pillar) 60%, white);
  --band-line: var(--pillar-band-line);
}

/* Briefing library: each card's woven strip follows its pillar — a
   miniature of that pillar page's footer ribbon (pillar-colour field,
   tone-on-tone motifs via the shared band mask) replacing the stock
   orange raster set inline. Cards keep their theme-{ge|he|se} class
   from the widget, so this works on any page the library appears on. */
.brief-card.theme-ge .brief-pattern { --strip: var(--pillar-ge); }
.brief-card.theme-he .brief-pattern { --strip: var(--pillar-he); }
.brief-card.theme-se .brief-pattern { --strip: var(--pillar-se); }
.brief-card.theme-ge .brief-pattern,
.brief-card.theme-he .brief-pattern,
.brief-card.theme-se .brief-pattern {
  background-image: none !important;
  background-color: var(--strip);
}
.brief-card.theme-ge .brief-pattern::before,
.brief-card.theme-he .brief-pattern::before,
.brief-card.theme-se .brief-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--strip) 55%, white);
  -webkit-mask: url('../img/band-motif.png') left center / auto 100% repeat-x;
  mask: url('../img/band-motif.png') left center / auto 100% repeat-x;
}

/* Kente strip — fabric band rendered by the ART Header widget right
   below the sticky header, so every page opens with it (counterpart of
   the footer ribbon, same 64px scale; height set per-widget via the
   Strip Height control). One continuous run of cloth spanning the full
   width — no tiling: the texture covers left to right and shows its
   vertically-centred slice. Lives in normal flow (a sibling AFTER the
   sticky <header>, so it scrolls away with the page and never crowds
   the first section's content on any screen size). */
.art-kente-strip {
  height: 64px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 12px rgba(26, 24, 20, .28);
  position: relative;
  z-index: 5;
  pointer-events: none;
}