body.inner-page {
  --page-surface: rgba(255, 255, 255, 0.04);
  --page-surface-strong: rgba(255, 255, 255, 0.065);
  --page-border: rgba(255, 255, 255, 0.08);
  --page-warm: rgba(233, 142, 84, 0.18);
  --page-cool: rgba(104, 134, 170, 0.14);
  --page-brown: rgba(96, 58, 40, 0.82);

  /* Brand palette tokens (single source) */
  --brand-orange: 233, 142, 84;
  --brand-steel: 104, 134, 170;
  --brand-brown: 96, 58, 40;
  --brand-deep: 7, 14, 23;

  /* Spacing scale (very relaxed, used across all inner pages) */
  --space-section-y: clamp(10rem, 18vw, 18rem);
  --space-section-y-mobile: clamp(6rem, 14vw, 9rem);
  --space-section-stack: clamp(4rem, 6vw, 6.5rem);
  --space-bento-gap: clamp(1.75rem, 2.8vw, 3rem);
  --space-card-pad: clamp(2rem, 3vw, 3rem);
  --space-card-gap: clamp(1.1rem, 1.6vw, 1.6rem);
  --space-cluster-gap: clamp(4rem, 7vw, 7rem);

  /* Corner radius scale — matches homepage card system (1-1.25rem range) */
  --radius-card: 1.25rem;
  --radius-image: 1rem;
  --radius-input: 0.5rem;
  --radius-pill: 999px;

  /* Layered background: warm + cool radial accents anchored at the top
     of the document, over a navy linear base.
     The radials use absolute pixel sizes so they don't scale with the
     document height (without this, on a long page like publications.html
     the orange "top-left" radial would extend ~28% × 6500px = ~1825px
     and bleed warm tone deep into the page). The accents now stay
     confined to the hero region (~720px from the document top). */
  background:
    radial-gradient(720px 720px at 0 0, rgba(233, 142, 84, 0.14), transparent 70%) no-repeat,
    radial-gradient(640px 640px at 82% 0, rgba(103, 132, 168, 0.12), transparent 70%) no-repeat,
    linear-gradient(180deg, #091321 0%, #08111d 42%, #070f19 100%);
}

.inner-page .noise-overlay {
  opacity: 0.028;
}

.page-main {
  padding-top: 64px;
  position: relative;
  isolation: isolate;
}

.page-hero {
  position: relative;
  min-height: 24rem;
  padding: 5.8rem 0 3.2rem;
  display: flex;
  align-items: end;
  overflow: clip;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(8, 15, 26, 0.72) 0%, rgba(8, 15, 26, 0.82) 100%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
}

.page-hero::before,
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-hero::before {
  inset: -8%;
  opacity: 0.98;
  transform: translate3d(0, var(--page-hero-shift, 0px), 0) scale(1.04);
  background:
    linear-gradient(180deg, rgba(7, 13, 22, 0.34) 0%, rgba(7, 13, 22, 0.52) 100%),
    linear-gradient(90deg, rgba(5, 10, 18, 0.72) 0%, rgba(5, 10, 18, 0.2) 24%, rgba(5, 10, 18, 0.18) 76%, rgba(5, 10, 18, 0.7) 100%),
    url('images/afrika.jpg') center 28% / cover no-repeat,
    radial-gradient(circle at 15% 20%, rgba(233, 142, 84, 0.24) 0, rgba(233, 142, 84, 0.06) 18%, transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(95, 125, 158, 0.2) 0, rgba(95, 125, 158, 0.04) 20%, transparent 36%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px, transparent 72px) center/72px 72px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px, transparent 72px) center/72px 72px,
    linear-gradient(180deg, rgba(13, 24, 40, 0.16), rgba(13, 24, 40, 0.48));
}

.page-hero::after {
  background:
    linear-gradient(180deg, rgba(5, 10, 18, 0.04) 0%, rgba(5, 10, 18, 0.14) 44%, rgba(5, 10, 18, 0.44) 100%),
    linear-gradient(90deg, rgba(5, 10, 18, 0.55) 0%, rgba(5, 10, 18, 0.16) 22%, rgba(5, 10, 18, 0.12) 78%, rgba(5, 10, 18, 0.48) 100%);
}

.page-hero-grid {
  display: grid;
  gap: 1.8rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .page-hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.7fr);
    align-items: end;
  }
}

.page-breadcrumb {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.page-kicker {
  margin-top: 0.9rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(233, 142, 84, 0.95);
}

.page-title {
  margin-top: 0.75rem;
  max-width: 9ch;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.page-intro {
  margin-top: 1.1rem;
  max-width: 39rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.96rem;
  line-height: 1.72;
}

.page-hero-aside {
  display: grid;
  gap: 0.85rem;
  padding: 1.2rem 1.1rem;
  align-self: stretch;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-card);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.2);
}

.page-hero-note-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(233, 142, 84, 0.95);
}

.page-hero-note-text {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  line-height: 1.65;
}

@media (max-width: 767px) {
  .page-hero {
    min-height: 0;
    padding: 4.15rem 0 2rem;
  }

  .page-hero-grid {
    gap: 1rem;
  }

  .page-title {
    max-width: none;
    font-size: clamp(2.1rem, 9vw, 2.9rem);
  }

  .page-intro {
    max-width: none;
    font-size: 0.88rem;
  }

  .page-hero-aside {
    padding: 0.9rem;
  }
}

@media (max-width: 767px) {
  .page-section {
    padding: var(--space-section-y-mobile) 0;
  }
}

.page-section {
  position: relative;
  isolation: isolate;
  padding: var(--space-section-y) 0;
}

.page-section > .container {
  display: grid;
  gap: var(--space-section-stack);
}

.page-main > .page-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Brand palette section rotation — visible alternation, not subtle glow.
   Each tone is a clearly different surface so a visitor scrolling the page
   sees distinct horizontal bands. Cycle of 4 keeps any tone from repeating
   too quickly on long pages.

   Tone 1: deep navy (default) — calm, structural
   Tone 2: warm beige panel    — energetic, featured (visibly lighter)
   Tone 3: brown logo band     — identity, showcase (clearly brown)
   Tone 4: cool slate panel    — restful, listing (visibly cool/blue)  */

/* The hero is always section 1, so .page-section siblings start at type 2.
   We offset the rotation by +1 so tone 1 hits the first .page-section.
   Mapping after offset:
     1st .page-section (nth-of-type 2) → tone 1 (deep navy)
     2nd .page-section (nth-of-type 3) → tone 2 (warm beige)
     3rd .page-section (nth-of-type 4) → tone 3 (brown showcase)
     4th .page-section (nth-of-type 5) → tone 4 (cool slate)
     5th .page-section (nth-of-type 6) → tone 1 …                       */

/* Tone 1: deep navy (sections 1, 5, 9 of .page-section) */
.page-main > .page-section:nth-of-type(4n + 2)::before {
  background:
    linear-gradient(180deg, rgba(var(--brand-deep), 0.4), rgba(var(--brand-deep), 0.06)),
    radial-gradient(circle at 12% 30%, rgba(var(--brand-steel), 0.18), transparent 36%),
    radial-gradient(circle at 86% 76%, rgba(var(--brand-steel), 0.12), transparent 30%);
}

/* Tone 2: warm beige/sand panel (sections 2, 6) */
.page-main > .page-section:nth-of-type(4n + 3) {
  color: rgba(28, 22, 16, 0.92);
}
.page-main > .page-section:nth-of-type(4n + 3)::before {
  background:
    linear-gradient(180deg, rgba(243, 220, 194, 0.92) 0%, rgba(231, 198, 162, 0.94) 100%),
    radial-gradient(circle at 84% 22%, rgba(var(--brand-orange), 0.22), transparent 36%);
}
.page-main > .page-section:nth-of-type(4n + 3) .page-section-label,
.page-main > .page-section:nth-of-type(4n + 3) .page-card-kicker,
.page-main > .page-section:nth-of-type(4n + 3) .team-cluster-label {
  color: rgba(140, 70, 28, 0.95);
}
.page-main > .page-section:nth-of-type(4n + 3) .page-section-title,
.page-main > .page-section:nth-of-type(4n + 3) .page-card h3,
.page-main > .page-section:nth-of-type(4n + 3) h2,
.page-main > .page-section:nth-of-type(4n + 3) h3,
.page-main > .page-section:nth-of-type(4n + 3) h4,
.page-main > .page-section:nth-of-type(4n + 3) .team-cluster-name,
.page-main > .page-section:nth-of-type(4n + 3) .team-card-name {
  color: rgba(34, 22, 14, 0.95) !important;
}
.page-main > .page-section:nth-of-type(4n + 3) .page-section-copy,
.page-main > .page-section:nth-of-type(4n + 3) .page-card p,
.page-main > .page-section:nth-of-type(4n + 3) .page-list li {
  color: rgba(48, 32, 20, 0.82);
}
.page-main > .page-section:nth-of-type(4n + 3) .team-card-role {
  color: rgba(140, 70, 28, 0.95) !important;
}
.page-main > .page-section:nth-of-type(4n + 3) .vacancy-list li,
.page-main > .page-section:nth-of-type(4n + 3) .page-compact-list li {
  background: rgba(140, 70, 28, 0.06);
  border-color: rgba(140, 70, 28, 0.18);
  color: rgba(48, 32, 20, 0.86);
}
.page-main > .page-section:nth-of-type(4n + 3) .vacancy-status {
  color: rgba(140, 70, 28, 0.95);
  border-color: rgba(140, 70, 28, 0.3);
}
.page-main > .page-section:nth-of-type(4n + 3) .team-cluster-rule {
  background: linear-gradient(90deg, rgba(140, 70, 28, 0.32), transparent);
}
.page-main > .page-section:nth-of-type(4n + 3) .team-card-portrait {
  background: linear-gradient(140deg, rgba(140, 70, 28, 0.18), rgba(196, 138, 92, 0.12));
}
.page-main > .page-section:nth-of-type(4n + 3) .page-card {
  background: linear-gradient(180deg, rgba(255, 250, 242, 0.88), rgba(255, 244, 230, 0.7));
  border-color: rgba(140, 90, 50, 0.16);
  box-shadow: 0 22px 44px rgba(70, 40, 18, 0.12);
}

/* Tone 3: dark brown band (sections 3, 7) */
.page-main > .page-section:nth-of-type(4n + 4)::before {
  background:
    linear-gradient(180deg, rgba(123, 82, 59, 0.22), rgba(7, 14, 23, 0.08)),
    radial-gradient(circle at 82% 24%, rgba(201, 150, 114, 0.2), transparent 28%),
    radial-gradient(circle at 18% 70%, rgba(var(--brand-orange), 0.1), transparent 26%),
    linear-gradient(180deg, var(--page-brown), rgba(60, 35, 24, 0.92));
}

/* Tone 4: cool slate panel (sections 4, 8) */
.page-main > .page-section:nth-of-type(4n + 5)::before {
  background:
    linear-gradient(180deg, rgba(36, 56, 84, 0.55) 0%, rgba(28, 44, 68, 0.7) 100%),
    radial-gradient(circle at 14% 26%, rgba(var(--brand-steel), 0.28), transparent 36%),
    radial-gradient(circle at 88% 80%, rgba(var(--brand-orange), 0.1), transparent 28%);
}
.page-main > .page-section:nth-of-type(4n + 5) .page-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border-color: rgba(var(--brand-steel), 0.32);
}

/* Team-card text is always over a portrait or panel surface — it should
   stay light regardless of which tone the team section lands on. */
.team-card-name { color: rgba(255, 255, 255, 0.96) !important; }
.team-card-role { color: rgba(var(--brand-orange), 0.92) !important; }

/* Placeholder / system note shown when content is incomplete.
   Visible on all four panel tones (deep navy, warm beige, brown, slate). */
.page-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.1rem;
  background: rgba(var(--brand-orange), 0.1);
  border: 1px dashed rgba(var(--brand-orange), 0.42);
  border-radius: var(--radius-card);
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 52rem;
}

.page-note-mark {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--brand-orange), 1);
  padding: 0.25rem 0.55rem;
  background: rgba(var(--brand-orange), 0.16);
  border: 1px solid rgba(var(--brand-orange), 0.35);
  border-radius: var(--radius-pill);
}

.page-note a {
  color: rgba(var(--brand-orange), 1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Contrast guard: when .page-note lands on the warm beige panel,
   flip surface and text to dark tones so it stays readable. */
.page-main > .page-section:nth-of-type(4n + 3) .page-note {
  color: rgba(48, 32, 20, 0.86);
  background: rgba(140, 70, 28, 0.08);
  border-color: rgba(140, 70, 28, 0.42);
}
.page-main > .page-section:nth-of-type(4n + 3) .page-note-mark {
  color: rgba(140, 70, 28, 1);
  background: rgba(140, 70, 28, 0.14);
  border-color: rgba(140, 70, 28, 0.4);
}
.page-main > .page-section:nth-of-type(4n + 3) .page-note a {
  color: rgba(140, 70, 28, 1);
}

.page-section + .page-section {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.page-section-head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 0;
}

.page-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(233, 142, 84, 0.95);
}

.page-section-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.page-section-copy {
  max-width: 48rem;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.85;
  max-width: 52rem;
}

/* ---- Bento grid (universal) -------------------------------------------- */
/* The bento system uses a fixed track count per breakpoint and lets cards
   span 1, 2, or 3 tracks. Cards declare their span via class:
     .bento-2  → spans 2 tracks (default 'wide' card)
     .bento-3  → spans 3 tracks (full-width feature)
     .bento-tall → spans 2 row tracks (for image-heavy cards)
   The grid uses grid-auto-flow: dense so smaller cards fill leftover gaps —
   no orphan rows, no awkward hanging cards.
   On mobile everything collapses to single column automatically. */

.bento {
  display: grid;
  gap: var(--space-bento-gap);
  grid-auto-flow: dense;
  grid-auto-rows: minmax(min-content, auto);
}

/* By default, cards in the same row stretch to equal heights — the
   shorter card may have empty space below its content, but two side-by-
   side cards reading as a parallel comparison feel cleaner this way than
   with ragged bottoms (which only work when there are MANY cards to
   backfill the gaps).

   For long card archives where many siblings naturally backfill gaps,
   use `.bento-masonry` (defined further down) instead. */
.bento > * { align-self: stretch; }

/* 2-up base, 4 tracks at desktop, 6 tracks at large desktop */
.bento.bento-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento.bento-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bento.bento-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bento.bento-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Span helpers — use sparingly */
.bento > .span-2 { grid-column: span 2; }
.bento > .span-3 { grid-column: span 3; }
.bento > .span-4 { grid-column: span 4; }
.bento > .span-all { grid-column: 1 / -1; }
.bento > .row-2 { grid-row: span 2; }

/* ---- Bento flex (proportional widths for equal heights) --------------
   A flexbox-based variant that allocates row width proportionally to
   each card's content amount, so all cards in the row reach equal
   rendered heights with no empty space.

   Usage: <div class="bento bento-flex"> ... </div>

   Each direct child gets `--card-weight` set by JS (bento-balance.js)
   based on its content character count + image weight. Flex-grow uses
   that weight to distribute the row's available width. Cards with a
   declared weight of N get proportionally N units of horizontal share.

   Cards have a min-width floor so they never collapse below readability;
   when math would produce a too-narrow card, flex-wrap pushes it to a
   new row at full width — degrading gracefully to single-column. */
.bento.bento-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-bento-gap);
  align-items: stretch;
  /* Reset grid-only properties */
  grid-template-columns: none;
  grid-auto-flow: initial;
  grid-auto-rows: initial;
}

/* Manual escape hatch: when a bento explicitly opts into natural-height
   layout (cards sit at content height, no stretch), use this class. */
.bento.bento-flex.bento-flex-natural {
  align-items: flex-start;
}
.bento.bento-flex.bento-flex-natural > * {
  align-self: flex-start;
}

.bento.bento-flex > * {
  /* flex-basis: 0 is critical — it makes flex-grow distribute the ENTIRE
     row width proportionally to weight, not just the leftover after a
     fixed basis. With a non-zero basis, three cards at 18rem each leave
     only a sliver of growable space, and weighted growth produces only
     small differences from equal — visually defeating the algorithm. */
  flex: var(--card-weight, 1) 1 0;
  /* Minimum readable width — when the math wants a card narrower than
     this, flex-wrap kicks it to a new row at full width. */
  min-width: min(18rem, 100%);
  align-self: stretch;
}

/* Image-led cards (chamber / region / pub-cover with breakout images,
   gallery figures) participate in auto-weighting, but their effective
   weight is reduced (via lower IMAGE_WEIGHT in JS) so they take less
   width when paired with text-heavy siblings — keeping image height
   in check. The data-card-fixed attribute is the explicit opt-out for
   when an author wants a card to keep its authored span. */
.bento.bento-flex > [data-card-fixed] {
  flex: 1 1 0;
}

/* Manual full-row card: any card with span-all in a bento-flex
   takes the entire row, forcing siblings onto a new row. */
.bento.bento-flex > .span-all,
.bento.bento-flex > [data-card-weight="solo"] {
  flex: 0 1 100%;
}

/* Masonry modifier: the bento collapses to a CSS multi-column flow where
   cards fill columns top-to-bottom, then move to the next column. Reading
   order becomes down-then-across — perfect for archives, image grids, and
   any "scan and pick" gallery. NOT suitable for sequential narratives
   (Reason 01 → Reason 02 → Reason 03) where row-major order matters. */
.bento.bento-masonry {
  display: block;
  column-gap: var(--space-bento-gap);
  column-fill: balance;
}
.bento.bento-masonry.bento-2  { column-count: 2; }
.bento.bento-masonry.bento-3  { column-count: 3; }
.bento.bento-masonry.bento-4  { column-count: 4; }
.bento.bento-masonry.bento-6  { column-count: 3; } /* 6-track masonry would be too narrow */
.bento.bento-masonry > * {
  break-inside: avoid;
  margin-bottom: var(--space-bento-gap);
  width: 100%;
  display: block;        /* override grid-card displays inside masonry */
  grid-column: auto;     /* clear any span helpers from row-mode */
}
@media (max-width: 900px) {
  .bento.bento-masonry.bento-3,
  .bento.bento-masonry.bento-4,
  .bento.bento-masonry.bento-6 { column-count: 2; }
}
@media (max-width: 540px) {
  .bento.bento-masonry,
  .bento.bento-masonry.bento-2,
  .bento.bento-masonry.bento-3,
  .bento.bento-masonry.bento-4,
  .bento.bento-masonry.bento-6 { column-count: 1; }
}

/* The "lonely card" rule: when a child is the only one in its final row,
   it stretches to fill. Combined with grid-auto-flow: dense and span-N
   helpers, this guarantees no card sits alone at less than full row width. */
.bento > :last-child:nth-child(odd):not([class*="span-"]) { grid-column: 1 / -1; }
.bento.bento-3 > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.bento.bento-3 > :nth-last-child(2):nth-child(3n + 1),
.bento.bento-3 > :last-child:nth-child(3n + 2) { grid-column: span 1; }
.bento.bento-4 > :last-child:nth-child(4n + 1) { grid-column: 1 / -1; }

/* Mobile: collapse to single column, then 2-col at small tablet */
@media (max-width: 540px) {
  .bento { grid-template-columns: 1fr !important; }
  .bento > * { grid-column: auto !important; grid-row: auto !important; }
}
@media (min-width: 541px) and (max-width: 900px) {
  .bento.bento-3, .bento.bento-4, .bento.bento-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bento > .span-3, .bento > .span-4 { grid-column: span 2; }
}

/* Backwards-compatible aliases for existing markup using .page-grid */
.page-grid {
  display: grid;
  gap: var(--space-bento-gap);
  grid-auto-flow: dense;
}
.page-grid.two-up   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-grid.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-grid.two-up   > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.page-grid.three-up > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
@media (max-width: 540px) {
  .page-grid.two-up, .page-grid.three-up { grid-template-columns: 1fr; }
  .page-grid > * { grid-column: auto !important; }
}
@media (min-width: 541px) and (max-width: 900px) {
  .page-grid.three-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page-card {
  padding: var(--space-card-pad);
  display: grid;
  gap: var(--space-card-gap);
  align-content: start;
  background:
    linear-gradient(180deg, var(--page-surface-strong), var(--page-surface));
  border: 1px solid var(--page-border);
  border-radius: var(--radius-card);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.12);
  transition: transform 220ms ease, border-color 220ms ease;
}

/* Manual stack override: applied to a .bento container by the author when
   they want the whole section forced to a single-column stacked layout
   regardless of content matching. JavaScript per-row stacking (in
   bento-balance.js) sets inline grid-column per card and does NOT use this
   class — so this rule is reserved for explicit author intent. */
.bento.bento-stack {
  grid-template-columns: 1fr !important;
}
.bento.bento-stack > * {
  grid-column: auto !important;
  grid-row: auto !important;
}

.page-card:hover {
  border-color: rgba(var(--brand-orange), 0.28);
}

.page-card-kicker {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(233, 142, 84, 0.95);
}

.page-card h3 {
  font-size: 1.05rem;
  line-height: 1.2;
}

.page-card p {
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.8;
}

.page-list {
  display: grid;
  gap: 0.75rem;
}

.page-list li {
  position: relative;
  padding-left: 1rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
}

.page-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: #e98e54;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.25rem;
}

.page-anchor {
  scroll-margin-top: 6rem;
}

.page-contact-grid {
  display: grid;
  gap: 1.5rem;
}

/* Featured phone-number card on contact page */
.contact-phone-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(233, 142, 84, 0.16) 0%, rgba(233, 142, 84, 0.04) 60%, rgba(8, 17, 29, 0.45) 100%);
  border-color: rgba(233, 142, 84, 0.38);
}

.contact-phone-card .contact-phone-number {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  letter-spacing: 0.01em;
  margin: 0.25rem 0 0.1rem;
  font-weight: 700;
}

.contact-phone-card .contact-phone-number a {
  color: var(--page-text-strong, #fff);
  text-decoration: none;
}

.contact-phone-card .contact-phone-number a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.contact-phone-icon {
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 1.5em;
  color: rgba(233, 142, 84, 0.95);
  filter: drop-shadow(0 0 6px rgba(233, 142, 84, 0.35));
}

.contact-phone-meta {
  color: var(--page-text-soft, rgba(220, 230, 245, 0.75));
  font-size: 0.95rem;
}

/* Embedded OpenStreetMap on contact page */
.contact-map-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.contact-map {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
}

.contact-map iframe {
  border: 1px solid rgba(142, 184, 229, 0.18);
  border-radius: 0.75rem;
  width: 100%;
  height: 380px;
  display: block;
  background: rgba(8, 17, 29, 0.5);
}

.contact-map-caption {
  color: var(--page-text-soft, rgba(220, 230, 245, 0.7));
  font-size: 0.9rem;
  line-height: 1.55;
}

.contact-map-caption a {
  color: rgba(233, 142, 84, 0.95);
  text-decoration: none;
  border-bottom: 1px solid rgba(233, 142, 84, 0.4);
}

.contact-map-caption a:hover {
  border-bottom-color: rgba(233, 142, 84, 0.9);
}

@media (max-width: 640px) {
  .contact-map iframe { height: 280px; }
}

@media (min-width: 960px) {
  .page-contact-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.8fr);
  }
}

.page-compact-list {
  display: grid;
  gap: 0.9rem;
}

.page-compact-list li {
  padding: 1.05rem 1.1rem;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.72);
}

/* --- Team roster (people grid) ------------------------------------------- */
.team-cluster {
  display: grid;
  gap: clamp(2rem, 3vw, 3rem);
}

.team-cluster + .team-cluster {
  margin-top: var(--space-cluster-gap);
}

.team-cluster-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.team-cluster-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(233, 142, 84, 0.85);
}

.team-cluster-name {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.92);
}

.team-cluster-rule {
  flex: 1 1 6rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent);
}

/* ---- Team roster (chromeless, dense, magazine-style) -------------------- */
/* Cards have no surface/border — the portrait IS the visual anchor.
   Name + role sit tightly under each portrait. Hover lifts only the photo. */

.team-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.4vw, 2.2rem) clamp(1.1rem, 2vw, 1.8rem);
}

/* Cluster-aware sizing using :has() — the cluster picks its own column count */
.team-cluster .team-grid:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(11rem, 18rem));
  justify-content: start;
}

.team-cluster .team-grid:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(11rem, 1fr));
  max-width: 56rem;
}

.team-cluster .team-grid:has(> :nth-child(5):last-child) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* 9-member cluster (Staffs & Researchers): 5 + 4 reads better than 5+5+orphan.
   The explicit spans below are scoped to desktop (≥1024px) so they don't
   leak into tablet/mobile, where simple equal-column grids do the job. */
@media (min-width: 1024px) {
  .team-cluster .team-grid:has(> :nth-child(9):last-child) {
    grid-template-columns: repeat(20, minmax(0, 1fr));
  }
  .team-cluster .team-grid:has(> :nth-child(9):last-child) > :nth-child(-n + 5) {
    grid-column: span 4;
  }
  .team-cluster .team-grid:has(> :nth-child(9):last-child) > :nth-child(n + 6) {
    grid-column: span 5;
  }
}

/* Tablet (601-1023px): all clusters use a uniform 3-column grid, no spans */
@media (min-width: 601px) and (max-width: 1023px) {
  .team-grid,
  .team-cluster .team-grid:has(> :nth-child(5):last-child),
  .team-cluster .team-grid:has(> :nth-child(9):last-child),
  .team-cluster .team-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .team-cluster .team-grid:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .team-grid > * {
    grid-column: auto !important;
  }
}

/* Mobile (≤600px): all clusters use a uniform 1-column grid */
@media (max-width: 600px) {
  .team-grid,
  .team-cluster .team-grid:has(> :nth-child(5):last-child),
  .team-cluster .team-grid:has(> :nth-child(9):last-child),
  .team-cluster .team-grid:has(> :nth-child(2):last-child),
  .team-cluster .team-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: 1fr !important;
    gap: 1.1rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .team-grid > * {
    grid-column: auto !important;
  }
}

.team-card {
  position: relative;
  display: grid;
  gap: 0.65rem;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.team-card-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background:
    linear-gradient(140deg, rgba(var(--brand-orange), 0.22), rgba(var(--brand-steel), 0.18));
  border-radius: var(--radius-image);
  transition: transform 320ms ease, box-shadow 320ms ease;
}

.team-card-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  filter: saturate(0.94) contrast(1.04);
  transition: transform 600ms ease, filter 320ms ease;
}

.team-card:hover .team-card-portrait {
  transform: translateY(-4px);
  box-shadow: 0 24px 38px rgba(0, 0, 0, 0.32);
}

.team-card:hover .team-card-portrait img {
  transform: scale(1.04);
  filter: saturate(1.04) contrast(1.06);
}

.team-card-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(8, 15, 26, 0.42) 100%),
    linear-gradient(135deg, rgba(var(--brand-orange), 0.04), transparent 60%);
  pointer-events: none;
}

.team-card-portrait.is-initial {
  display: grid;
  place-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.86);
  text-transform: uppercase;
}

.team-card-name {
  font-size: clamp(0.92rem, 1.15vw, 1.05rem);
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.96);
  letter-spacing: -0.01em;
  font-weight: 600;
  margin-top: 0.15rem;
}

.team-card-role {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--brand-orange), 0.92);
}

@media (max-width: 600px) {
  .team-card-name { font-size: 0.84rem; }
  .team-card-role { font-size: 0.58rem; letter-spacing: 0.14em; }
  .team-card-portrait.is-initial { font-size: 1.6rem; }
}

/* --- Profile values (vision/mission/values) — extends .page-card --------
   .profile-values is just a container class for legacy markup; the cards
   themselves are .page-card so they inherit all panel-tone contrast guards. */
.profile-values { /* container — kept for backwards compat */ }

/* --- Vacancy list -------------------------------------------------------- */
.vacancy-list {
  display: grid;
  gap: 0.7rem;
}

.vacancy-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-card);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
}

.vacancy-list .vacancy-status {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
}

@media (max-width: 767px) {
  .vacancy-list li {
    padding: 0.8rem 0.9rem;
    font-size: 0.82rem;
  }
}

/* ---- COP 32 page-specific ---------------------------------------------- */
.cop32-gallery {
  gap: clamp(1.25rem, 2vw, 2rem);
}

.cop32-figure {
  margin: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-image);
  aspect-ratio: 4 / 3;
}

.cop32-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}

.cop32-figure:hover img {
  transform: scale(1.04);
}

@media (max-width: 540px) {
  .cop32-figure { aspect-ratio: 3 / 2; }
}

/* ---- Contact page components ------------------------------------------- */
.social-channel {
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.social-channel:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--brand-orange), 0.4);
}

.social-channel h3 {
  word-break: break-word;
}

.subscribe-card {
  text-align: left;
}

.subscribe-form {
  display: grid;
  gap: 1rem;
  width: 100%;
}

.form-label-inline {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(233, 142, 84, 0.92);
}

.subscribe-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: end;
}

.subscribe-row .input-bottom {
  width: 100%;
}

.subscribe-row .btn-accent {
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
}

.subscribe-fineprint {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.55;
}

.mc-honeypot {
  position: absolute;
  left: -5000px;
}

@media (max-width: 540px) {
  .subscribe-row {
    grid-template-columns: 1fr;
  }
  .subscribe-row .btn-accent {
    width: 100%;
  }
}

/* Contrast guards on warm-beige tone for new contact components */
.page-main > .page-section:nth-of-type(4n + 3) .form-label-inline {
  color: rgba(140, 70, 28, 0.95);
}
.page-main > .page-section:nth-of-type(4n + 3) .subscribe-fineprint {
  color: rgba(48, 32, 20, 0.7);
}

/* Contact form on warm-beige panel: the form was authored for dark surfaces
   (cream text, light-blue placeholder, near-invisible border). Re-tone every
   piece so the field structure, typed text, and placeholder all stay legible
   on the beige tone. */
.page-main > .page-section:nth-of-type(4n + 3) .contact-form-card {
  background: linear-gradient(180deg, rgba(255, 250, 242, 0.78), rgba(252, 238, 220, 0.62));
  border: 1px solid rgba(140, 90, 50, 0.22);
  box-shadow: 0 22px 44px rgba(70, 40, 18, 0.14);
}
.page-main > .page-section:nth-of-type(4n + 3) .form-group label {
  color: rgba(140, 70, 28, 0.95);
}
.page-main > .page-section:nth-of-type(4n + 3) .input-bottom {
  color: rgba(34, 22, 14, 0.96);
  border-bottom-color: rgba(140, 90, 50, 0.4);
}
.page-main > .page-section:nth-of-type(4n + 3) .input-bottom::placeholder {
  color: rgba(96, 64, 36, 0.55);
}
.page-main > .page-section:nth-of-type(4n + 3) .input-bottom:focus {
  border-bottom-color: rgba(180, 90, 36, 0.95);
}

/* Read / PDF trigger button on warm-beige panel: the default light-peach text
   on a cream pub-card surface fails contrast. Use a saturated burnt orange
   with a stronger border so the pill reads as a real call-to-action. */
.page-main > .page-section:nth-of-type(4n + 3) .pdf-viewer-trigger {
  color: rgba(150, 70, 24, 1);
  background: rgba(233, 142, 84, 0.16);
  border-color: rgba(150, 70, 24, 0.5);
}
.page-main > .page-section:nth-of-type(4n + 3) .pdf-viewer-trigger::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23964618' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}
.page-main > .page-section:nth-of-type(4n + 3) .pdf-viewer-trigger:hover {
  color: rgba(80, 32, 8, 1);
  background: rgba(233, 142, 84, 0.3);
  border-color: rgba(120, 56, 20, 0.85);
}

/* ---- Research page components ----------------------------------------- */
.chamber-card {
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  padding: var(--space-card-pad);
}

/* Bounded square thumbnail: image fills the square box by scaling its
   shorter dimension to fit, cropping the longer dimension. Left-aligned
   to match the text column below. Consistent across chamber-card, IPU
   portrait, and city council cards. */
.chamber-card-image {
  width: 100%;
  max-width: 14rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0 0 1rem 0;
  border-radius: var(--radius-image);
}

.chamber-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.region-grid {
  --space-bento-gap: clamp(1rem, 1.8vw, 1.5rem);
}

.region-card {
  text-decoration: none;
  cursor: default;
}

a.region-card { cursor: pointer; }

.region-card-flag {
  width: calc(100% + 2 * var(--space-card-pad));
  aspect-ratio: 5 / 3;
  overflow: hidden;
  margin: calc(-1 * var(--space-card-pad)) calc(-1 * var(--space-card-pad)) 1rem;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: rgba(0, 0, 0, 0.22);
}

.region-card-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
  transition: transform 480ms ease;
}

.region-card:hover .region-card-flag img {
  transform: scale(1.05);
}

.ipu-portrait-card {
  padding: var(--space-card-pad);
  overflow: hidden;
}

/* Bounded square thumbnail (matches chamber-card-image): image fills the
   square box edge-to-edge, scaled to its shorter dimension, cropping the
   longer dimension. Left-aligned with the text column below. */
.ipu-portrait {
  width: 100%;
  max-width: 14rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0 0 1rem 0;
  border-radius: var(--radius-image);
}

.ipu-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

/* Card itself now has padding back; no need for individual element padding. */

.region-card ol.page-list { display: none; }

@media (max-width: 540px) {
  .chamber-card-image { max-width: 11rem; }
}

/* ---- Publications page components ------------------------------------- */
.pub-overview-card {
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.pub-overview-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--brand-orange), 0.4);
}

.pub-archive-grid {
  --space-bento-gap: clamp(1rem, 1.8vw, 1.5rem);
}

.pub-card {
  padding: var(--space-card-pad);
}

/* Magazine-style cover — bounded thumbnail inside the card, NOT a full-width
   banner. Uses A4-ish portrait aspect (5:7) for a magazine-cover feel. The
   image is left-aligned to match the text column, with a subtle magazine
   "spine" shadow on the right edge to evoke the printed object. */
.pub-card-cover {
  width: 100%;
  max-width: 11rem;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  margin: 0 0 1.1rem 0;
  border-radius: 0.25rem;
  background: linear-gradient(140deg, rgba(var(--brand-orange), 0.18), rgba(var(--brand-steel), 0.16));
  position: relative;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.32),
    0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.32s ease;
}

/* When the parent card has a Read button, the cover itself is clickable —
   tied via JS in pdf-viewer.js. The cursor and lift on hover signal that. */
.pub-card:has(.pdf-viewer-trigger) .pub-card-cover {
  cursor: pointer;
}

.pub-card:has(.pdf-viewer-trigger) .pub-card-cover:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.42),
    0 4px 10px rgba(0, 0, 0, 0.22);
}

/* Magazine spine — thin shadow strip on the left edge */
.pub-card-cover::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent);
  pointer-events: none;
  z-index: 2;
}

/* Subtle highlight along the right edge (paper sheen) */
.pub-card-cover::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 240, 220, 0.18) 30%,
    rgba(255, 240, 220, 0.18) 70%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.pub-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 480ms ease;
}

/* Magazine-archive grids (publications page, IGAD digest archive, etc.):
   stretch the cover image to perfectly fill the 5:7 box, distorting aspect
   ratio if needed. No cropping, no empty space. The `.pub-archive-grid`
   scope makes the rule travel with the markup pattern instead of being
   tied to a single page's body class. */
.publications-page .pub-card-cover img,
.pub-archive-grid .pub-card-cover img {
  object-fit: fill;
}

/* Disable the hover zoom effect on archive-grid covers. */
.publications-page .pub-card:hover .pub-card-cover img,
.pub-archive-grid .pub-card:hover .pub-card-cover img {
  transform: none;
}

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

/* Wide variant for resource/map cards */
.pub-card-cover-wide {
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
}

.pub-card-cover-wide::before,
.pub-card-cover-wide::after {
  display: none;
}

.pub-card-cover-placeholder {
  display: grid;
  place-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.55);
}

/* Tighter paragraph in pub-cards — magazine-card style is image-led, so
   the supporting text stays small and supporting. */
.pub-card p {
  font-size: 0.82rem;
  line-height: 1.55;
}

.pub-card h3 {
  font-size: 0.98rem;
  line-height: 1.25;
}

@media (max-width: 540px) {
  .pub-card-cover {
    max-width: 9rem;
  }
  .pub-card-cover-wide {
    max-width: 100%;
    aspect-ratio: 3 / 2;
  }
}

/* --- Parliamentary Atlas (interactive map, Resource Hub) ----------------
   Ported from the Bridge homepage atlas. Real geographic SVG paths for
   Ethiopia's regional states and the eight IGAD member states, with pin
   overlays, hover-to-preview / click-to-lock, an info ribbon, and a zoom
   toggle. Adapted from the original cream/navy palette to the dark
   inner-page system: map interior keeps its navy gradient (works on dark),
   while the ribbon, toggle pills, and tooltip are inverted to dark glass. */
/* Higher specificity than the later `.pub-card { display: grid }` rule
   in the publications-page redesign block (line ~2297). Without this,
   the atlas card inherits a single-column grid that collapses the inner
   map to ~80px wide. */
.pub-card.atlas-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  grid-template-columns: none;
}
.atlas-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.atlas-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
}
.atlas-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.atlas-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 100vw;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.atlas-toggle__btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 100vw;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(232, 240, 252, 0.6);
  transition: background 0.3s, color 0.3s;
}
.atlas-toggle__btn:hover { color: rgba(255, 220, 188, 0.95); }
.atlas-toggle__btn.is-active {
  background: rgba(233, 142, 84, 0.92);
  color: #1b1209;
}
.atlas-zoom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 100vw;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(232, 240, 252, 0.85);
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.atlas-zoom:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 220, 188, 1);
  border-color: rgba(233, 142, 84, 0.4);
}
.atlas-zoom svg { width: 12px; height: 12px; transition: transform 0.3s; }
.atlas-zoom[data-zoom="1.4"] svg { transform: rotate(45deg); }
.atlas-zoom[data-zoom="1.4"] {
  background: rgba(233, 142, 84, 0.92);
  color: #1b1209;
  border-color: rgba(233, 142, 84, 0.92);
}
.atlas-map {
  position: relative;
  border-radius: 0.85rem;
  overflow: hidden;
  width: 100%;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(147, 178, 214, 0.18) 0%, rgba(147, 178, 214, 0) 60%),
    linear-gradient(165deg, #14346f 0%, #0d2a5a 60%, #0a2149 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 24px 64px rgba(8, 17, 29, 0.6);
  aspect-ratio: 4 / 3;
  /* Establish a query container so pins can respond to the MAP's own width
     (not the viewport). In the desktop side-by-side layout the map column
     can be ~580px even when the viewport is 1200px+, which crowds the
     pill labels past their region boundaries. The @container block that
     uses this lives AFTER the .atlas-pin definitions (cascade source order). */
  container-type: inline-size;
  container-name: atlas-map;
}
.atlas-map::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(224, 210, 189, 0.07) 1px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.55;
}
.atlas-map-inner {
  position: absolute;
  inset: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
}
.atlas-map[data-zoom="1.4"] .atlas-map-inner { transform: scale(1.4); }
.atlas-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.atlas-layer.is-active { opacity: 1; pointer-events: auto; }
.atlas-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.atlas-regions path {
  fill: rgba(224, 210, 189, 0.08);
  stroke: rgba(224, 210, 189, 0.32);
  stroke-width: 0.7;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill 0.35s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.35s;
  /* Off by default. Only the active layer's paths receive taps — otherwise
     the inactive layer (painted above the active one in DOM order) would
     intercept clicks and the active layer's regions would seem unresponsive. */
  pointer-events: none;
  touch-action: manipulation;
}
.atlas-layer.is-active .atlas-outline {
  pointer-events: auto;
}
.atlas-layer.is-active .atlas-regions path {
  pointer-events: auto;
  cursor: pointer;
}
.atlas-regions path.is-highlight {
  fill: rgba(233, 142, 84, 0.32);
  stroke: rgba(255, 220, 188, 0.78);
}
.atlas-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  border-radius: 100vw;
  background: rgba(7, 14, 28, 0.62);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(224, 210, 189, 0.22);
  color: rgba(255, 255, 255, 0.94);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s;
  white-space: nowrap;
}
.atlas-pin::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(197, 214, 232, 0.95);
  box-shadow: 0 0 0 4px rgba(197, 214, 232, 0.18);
  flex-shrink: 0;
}
.atlas-pin:hover {
  background: rgba(7, 14, 28, 0.85);
  border-color: rgba(224, 210, 189, 0.42);
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
}
.atlas-pin.is-selected {
  background: rgba(233, 142, 84, 0.95);
  color: #1b1209;
  border-color: rgba(233, 142, 84, 0.95);
  box-shadow: 0 14px 32px rgba(233, 142, 84, 0.35);
}
.atlas-pin.is-selected::before {
  background: #1b1209;
  box-shadow: 0 0 0 4px rgba(27, 18, 9, 0.4);
}

/* When the map itself is narrow (desktop side-by-side layout gives the map
   a ~580px column even on wide viewports), collapse pins to dots so labels
   can't overflow their regions. The dot stays (fixed-size ::before); the
   text is suppressed via font-size:0 and re-expands on hover / focus /
   selection so the name is still reachable without crowding the map.
   Placed AFTER the base .atlas-pin rules so it wins on cascade source order. */
@container atlas-map (max-width: 680px) {
  .atlas-pin {
    font-size: 0;
    gap: 0;
    padding: 5px;
  }
  .atlas-pin:hover,
  .atlas-pin:focus-visible,
  .atlas-pin.is-selected {
    font-size: 11px;
    gap: 8px;
    padding: 7px 12px 7px 10px;
    z-index: 5;
  }
}
.atlas-legend {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(224, 210, 189, 0.55);
  display: flex;
  align-items: center;
  gap: 8px;
}
.atlas-legend::before {
  content: '';
  width: 18px;
  height: 1.5px;
  background: rgba(224, 210, 189, 0.36);
}
.atlas-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  padding: 8px 12px 9px;
  border-radius: 10px;
  background: rgba(7, 14, 28, 0.95);
  color: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(233, 142, 84, 0.4);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  font-family: 'Poppins', system-ui, sans-serif;
  /* Default placement: above pin. JS may flip to data-placement="bottom"
     when there isn't room above. The horizontal shift `--tip-x` lets the
     bubble be clamped inside the map while the arrow re-aligns to the pin. */
  --tip-x: -50%;
  --tip-arrow: 50%;
  transform: translate(var(--tip-x), calc(-100% - 14px));
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
}
.atlas-tooltip.is-visible { opacity: 1; transform: translate(var(--tip-x), calc(-100% - 18px)); }
.atlas-tooltip[data-placement="bottom"] {
  transform: translate(var(--tip-x), 14px);
}
.atlas-tooltip[data-placement="bottom"].is-visible {
  transform: translate(var(--tip-x), 18px);
}
.atlas-tooltip::after {
  content: '';
  position: absolute;
  left: var(--tip-arrow);
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: rgba(7, 14, 28, 0.95);
  border-right: 1px solid rgba(233, 142, 84, 0.4);
  border-bottom: 1px solid rgba(233, 142, 84, 0.4);
  transform: translateX(-50%) rotate(45deg);
}
.atlas-tooltip[data-placement="bottom"]::after {
  bottom: auto;
  top: -5px;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid rgba(233, 142, 84, 0.4);
  border-top: 1px solid rgba(233, 142, 84, 0.4);
}
.atlas-tooltip strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.atlas-tooltip span {
  display: block;
  font-size: 10.5px;
  color: rgba(232, 240, 252, 0.65);
  margin-top: 3px;
  letter-spacing: 0.02em;
}

/* Ribbon: dark glass equivalent of the Bridge homepage white ribbon. */
.atlas-ribbon {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--page-surface-strong), var(--page-surface));
  border-radius: 0.85rem;
  border: 1px solid var(--page-border);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}
.atlas-ribbon::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(233, 142, 84, 0.95) 0%, rgba(255, 200, 150, 0.85) 70%, rgba(104, 134, 170, 0.85) 100%);
}
.atlas-ribbon__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.atlas-ribbon__breadcrumb {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 240, 252, 0.55);
}
.atlas-ribbon__name {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(1.4rem, 1.9vw, 1.8rem);
  font-weight: 700;
  line-height: 1.05;
  color: rgba(255, 255, 255, 0.96);
  letter-spacing: -0.01em;
}
.atlas-ribbon__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 14px 10px;
}
.atlas-ribbon__meta > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  min-width: 0;
}
.atlas-ribbon__meta > div:nth-child(even) { border-right: 0; }
.atlas-ribbon__meta > div:nth-last-child(-n+2) { border-bottom: 0; }
.atlas-ribbon__meta span {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 240, 252, 0.55);
}
.atlas-ribbon__meta strong {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.94);
  line-height: 1.35;
  white-space: normal;
}
.atlas-ribbon__viz {
  margin: 14px 24px 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.atlas-ribbon__viz-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.atlas-ribbon__viz-head span {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 240, 252, 0.55);
}
.atlas-ribbon__viz-head strong {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 220, 188, 0.95);
}
.atlas-ribbon__viz-track {
  position: relative;
  height: 32px;
  border-radius: 6px;
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  background: repeating-linear-gradient(45deg, rgba(147, 178, 214, 0.06) 0 6px, transparent 6px 12px);
  overflow: hidden;
}
.atlas-ribbon__viz-fill {
  position: absolute;
  inset: 2px auto 2px 2px;
  width: 0;
  background: linear-gradient(90deg, rgba(233, 142, 84, 0.95) 0%, rgba(255, 200, 150, 0.95) 70%, rgba(147, 178, 214, 0.85) 100%);
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.atlas-ribbon__viz-foot {
  margin-top: 8px;
  font-size: 10.5px;
  color: rgba(232, 240, 252, 0.6);
  letter-spacing: 0.04em;
}
.atlas-ribbon__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 100vw;
  background: linear-gradient(180deg, rgba(233, 142, 84, 0.95), rgba(196, 105, 56, 0.95));
  color: #1b1209;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s, filter 0.25s;
  box-shadow: 0 8px 22px rgba(196, 105, 56, 0.25);
  margin: auto 24px 22px;
  align-self: flex-start;
}
.atlas-ribbon__link:hover {
  transform: translateX(3px);
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(196, 105, 56, 0.4);
}
.atlas-ribbon__link svg { width: 13px; height: 13px; }
.atlas-ribbon.is-preview { outline: 1.5px solid rgba(233, 142, 84, 0.4); outline-offset: -1px; }

/* ≥768px: side-by-side map + ribbon. Below: stacked. */
@media (min-width: 768px) {
  .atlas-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1fr);
    grid-template-areas:
      "toolbar toolbar"
      "map panel";
    gap: 20px 26px;
    /* Row height is locked to the ribbon's tallest content (set by JS via
       --atlas-ribbon-h). The ribbon stops resizing per hover; the map fills
       the same height so the two cells stay flush. */
    align-items: stretch;
  }
  .atlas-toolbar { grid-area: toolbar; }
  .atlas-map {
    grid-area: map;
    /* Drop the rigid 4:3 on desktop — height is now driven by the ribbon. */
    aspect-ratio: auto;
    height: var(--atlas-ribbon-h, auto);
    min-height: 360px;
  }
  .atlas-ribbon {
    grid-area: panel;
    min-height: var(--atlas-ribbon-h, 0);
  }
}
@media (max-width: 767px) {
  .atlas-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .atlas-toggle { display: flex; width: 100%; }
  .atlas-toggle__btn { flex: 1; padding: 11px 14px; font-size: 11.5px; text-align: center; }
  .atlas-zoom { align-self: flex-end; }
  /* Pills get crowded on small screens — hide them and let users tap the
     SVG region itself; the ribbon updates per click. (Path pointer-events
     are enabled globally — see the base .atlas-regions path rule.) */
  .atlas-pin { display: none; }
  .atlas-tooltip { display: none; }
  .atlas-outline { pointer-events: auto; }
  .atlas-regions path {
    /* Larger hit target via stroke-width on mobile so taps register easily. */
    stroke-width: 1.4;
  }
  .atlas-regions path.is-highlight {
    fill: rgba(233, 142, 84, 0.45);
    stroke: rgba(255, 220, 188, 0.95);
  }
  .atlas-ribbon__meta { padding: 6px 4px; }
  .atlas-ribbon__meta > div { padding: 10px 14px; }
  .atlas-ribbon__link { margin: 4px 18px 16px; padding: 10px 20px; font-size: 12px; }
}

/* =========================================================================
   Publications page — featured book + two-column split + cards
   ========================================================================= */

/* ----- Featured ----- */
/* Cinematic backdrop matching the work-section treatment elsewhere on the
   site — layered image + dark gradient + warm radial accent + grid texture.
   Makes the featured publication feel like the page's centerpiece rather
   than a passive card. */
.pubs-featured-section {
  position: relative;
  isolation: isolate;
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(5, 10, 18, 0.78) 0%, rgba(6, 12, 22, 0.72) 30%, rgba(5, 10, 18, 0.86) 100%),
    url('images/afrika.jpg') center 28% / cover no-repeat,
    linear-gradient(180deg, #08111e 0%, #091523 32%, #07111c 100%);
}
.pubs-featured-section::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 10, 18, 0.56) 0%, rgba(4, 10, 18, 0.18) 26%, rgba(4, 10, 18, 0.18) 74%, rgba(4, 10, 18, 0.56) 100%),
    radial-gradient(circle at 22% 72%, rgba(233, 142, 84, 0.18) 0 1px, transparent 1.6px) 0 0 / 46px 46px,
    linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0, rgba(255, 255, 255, 0.045) 1px, transparent 1px, transparent 36px) 0 0 / 36px 36px;
  opacity: 0.72;
  z-index: 0;
}
.pubs-featured-section > .container {
  position: relative;
  z-index: 1;
}

/* Eyebrow above the featured card */
.pubs-featured-section .container::before {
  content: 'Spotlight';
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(233, 142, 84, 0.92);
  text-align: center;
  margin-bottom: 0.6rem;
}
.pubs-featured-section .container::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(233, 142, 84, 0.9), transparent);
  margin: 0 auto clamp(2.5rem, 4vw, 4rem);
}

/* The mount div is a centering wrapper; the actual editorial card is the
   inner <article class="pubs-featured-card">. */
.pubs-featured {
  display: block;
}
.pubs-featured-card {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2.5rem, 4.5vw, 4.5rem);
  border-radius: 1.25rem;
  background:
    linear-gradient(135deg, rgba(15, 25, 42, 0.92), rgba(9, 17, 29, 0.88));
  border: 1px solid rgba(142, 184, 229, 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow:
    0 40px 100px -40px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  position: relative;
  overflow: hidden;
}
/* Subtle warm-orange glow in upper-right corner */
.pubs-featured-card::after {
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(233, 142, 84, 0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.pubs-featured-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 0.85rem;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  box-shadow:
    0 30px 70px -20px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: perspective(800px) rotateY(-3deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}
.pubs-featured-cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 35%, transparent 65%, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
}
.pubs-featured-card:hover .pubs-featured-cover {
  transform: perspective(800px) rotateY(0deg) translateY(-4px);
}
.pubs-featured-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.pubs-featured-body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.pubs-featured-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.68rem;
  color: rgba(233, 142, 84, 1);
  font-weight: 700;
  width: fit-content;
}
.pubs-featured-kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(233, 142, 84, 1);
  box-shadow: 0 0 0 4px rgba(233, 142, 84, 0.2);
  animation: pubs-featured-pulse 2.2s ease-in-out infinite;
}
@keyframes pubs-featured-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(233, 142, 84, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(233, 142, 84, 0.05); }
}
.pubs-featured-title {
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
  font-weight: 700;
}
.pubs-featured-subtitle {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
}
.pubs-featured-desc {
  font-size: 1.02rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.82);
  margin: 0.4rem 0 0;
  max-width: 60ch;
}
.pubs-featured-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.4rem;
  align-items: stretch;
}

/* Ensure both CTA buttons have equal size */
.pubs-featured-actions .pubs-featured-cta {
  min-width: 140px;
  justify-content: center;
  flex: 0 0 auto;
}

/* Generic .btn classes used by publications-data.js — give them the same
   visual weight as the rest of the site's CTAs. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.75rem 1.35rem;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }

.btn-orange,
.pubs-featured-cta.btn-orange {
  background: rgba(233, 142, 84, 0.95);
  color: #0c1a30;
  box-shadow: 0 10px 26px -8px rgba(233, 142, 84, 0.55);
}
.btn-orange:hover {
  background: rgba(233, 142, 84, 1);
  box-shadow: 0 14px 32px -8px rgba(233, 142, 84, 0.72);
}

.btn-ghost,
.pubs-featured-cta.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.18);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(233, 142, 84, 0.5);
  color: rgba(233, 142, 84, 1);
}

.pubs-featured-cta { font-size: 0.84rem; }

@media (max-width: 820px) {
  .pubs-featured-card {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 2rem;
    padding: 2rem;
  }
  .pubs-featured-cover {
    max-width: 220px;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
    transform: none;
  }
  .pubs-featured-card:hover .pubs-featured-cover { transform: translateY(-3px); }
  .pubs-featured-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .pubs-featured-actions { justify-content: flex-start; }
}

/* ----- Split layout ----- */
.pubs-split-section {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(6rem, 10vw, 10rem);
  min-height: 0;
}
/* Override the alternating section-rhythm system. Because <section class="page-hero">
   is the first <section> on the page, the split section lands at nth-of-type(3),
   which matches the "warm beige/sand" tone-2 panel. That tone fights the
   publications page's editorial dark aesthetic. Force the dark navy treatment
   here and reset the light text color the tone-2 rules apply. */
.page-main > .pubs-split-section { color: rgba(255, 255, 255, 0.85); }
.page-main > .pubs-split-section::before {
  background:
    linear-gradient(180deg, rgba(7, 14, 23, 0.35), rgba(7, 14, 23, 0.6)),
    radial-gradient(circle at 18% 22%, rgba(104, 134, 170, 0.12), transparent 38%),
    radial-gradient(circle at 82% 80%, rgba(233, 142, 84, 0.08), transparent 42%) !important;
}
.page-main > .pubs-split-section .page-section-label,
.page-main > .pubs-split-section .page-section-title,
.page-main > .pubs-split-section h2,
.page-main > .pubs-split-section h3,
.page-main > .pubs-split-section h4 {
  color: #fff !important;
}
.page-main > .pubs-split-section .page-section-label,
.page-main > .pubs-split-section .pub-card-kicker {
  color: rgba(233, 142, 84, 0.92) !important;
}
.pubs-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: flex-start;
}
@media (max-width: 1024px) {
  .pubs-split { grid-template-columns: 1fr; gap: clamp(3rem, 6vw, 5rem); }
}

.pubs-col {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 4rem);
  position: relative;
}
.pubs-col + .pubs-col {
  /* divider on desktop */
}
@media (min-width: 1025px) {
  .pubs-col--igad::before {
    content: '';
    position: absolute;
    left: calc(-1 * clamp(1rem, 2vw, 2.25rem));
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--page-border) 12%, var(--page-border) 88%, transparent);
  }
}

.pubs-col-head {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--page-border);
}
.pubs-col-kicker {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  color: rgba(var(--brand-orange), 1);
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
}
.pubs-col-title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin: 0 0 0.6rem;
  color: #fff;
}
.pubs-col-copy {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.6;
}

/* Fixed height for each publication section with custom scrollbar */
.pub-section-list {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

/* Custom thin scrollbar styling for each section */
.pub-section-list::-webkit-scrollbar {
  width: 6px;
}

.pub-section-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}

.pub-section-list::-webkit-scrollbar-thumb {
  background: rgba(233, 142, 84, 0.4);
  border-radius: 10px;
  transition: background 0.3s ease;
}

.pub-section-list::-webkit-scrollbar-thumb:hover {
  background: rgba(233, 142, 84, 0.6);
}

/* Firefox scrollbar */
.pub-section-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(233, 142, 84, 0.4) rgba(255, 255, 255, 0.04);
}

/* ========================================
   BRIDGE's Insights Modal
   ======================================== */

.insight-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.insight-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.insight-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 22, 40, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.insight-modal-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  background: linear-gradient(145deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.5),
    0 0 100px rgba(233, 142, 84, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(30px) scale(0.95);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.insight-modal[aria-hidden="false"] .insight-modal-container {
  transform: translateY(0) scale(1);
}

.insight-modal-content {
  position: relative;
  height: 100%;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 3rem;
}

/* Custom scrollbar for modal content */
.insight-modal-content::-webkit-scrollbar {
  width: 8px;
}

.insight-modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
}

.insight-modal-content::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom,
    rgba(233, 142, 84, 0.5),
    rgba(233, 142, 84, 0.3));
  border-radius: 10px;
  transition: background 0.3s ease;
}

.insight-modal-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom,
    rgba(233, 142, 84, 0.7),
    rgba(233, 142, 84, 0.5));
}

/* Firefox */
.insight-modal-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(233, 142, 84, 0.4) rgba(255, 255, 255, 0.02);
}

.insight-modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 10;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.3s ease;
}

.insight-modal-close:hover {
  background: rgba(233, 142, 84, 0.2);
  border-color: rgba(233, 142, 84, 0.3);
  color: #E98E54;
  transform: rotate(90deg);
}

.insight-modal-article {
  animation: fadeInUp 0.5s ease-out;
}

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

.insight-modal-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.insight-modal-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 1rem 0;
  background: linear-gradient(135deg, #fff, rgba(233, 142, 84, 0.9));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.insight-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.95rem;
}

.insight-modal-date,
.insight-modal-type {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.6);
  padding: 0.35rem 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.insight-modal-date::before {
  content: "📅";
  margin-right: 0.5rem;
}

.insight-modal-type {
  background: rgba(233, 142, 84, 0.1);
  border-color: rgba(233, 142, 84, 0.2);
  color: rgba(233, 142, 84, 0.9);
}

.insight-modal-body {
  font-family: 'Lora', 'Georgia', serif;
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
}

/* Amharic content in modal - using Noto Serif Ethiopic */
.insight-modal-body:lang(am),
.insight-modal-body [lang="am"],
.insight-modal-article[data-lang="am"] .insight-modal-body {
  font-family: 'Noto Serif Ethiopic', 'Nyala', 'Ethiopia Jiret', serif;
  font-weight: 400;
  line-height: 1.9;
}

.insight-modal-body h1,
.insight-modal-body h2,
.insight-modal-body h3,
.insight-modal-body h4 {
  font-family: 'Lora', 'Georgia', serif;
  font-weight: 600;
  margin: 2rem 0 1rem;
  color: #fff;
}

/* Amharic headings in modal */
.insight-modal-article[data-lang="am"] .insight-modal-body h1,
.insight-modal-article[data-lang="am"] .insight-modal-body h2,
.insight-modal-article[data-lang="am"] .insight-modal-body h3,
.insight-modal-article[data-lang="am"] .insight-modal-body h4 {
  font-family: 'Noto Serif Ethiopic', 'Nyala', serif;
  font-weight: 600;
}

.insight-modal-body h1 { font-size: 2rem; }
.insight-modal-body h2 { font-size: 1.75rem; }
.insight-modal-body h3 { font-size: 1.5rem; }
.insight-modal-body h4 { font-size: 1.25rem; }

.insight-modal-body p {
  margin: 0 0 1.5rem;
}

.insight-modal-body ul,
.insight-modal-body ol {
  margin: 0 0 1.5rem;
  padding-left: 2rem;
}

.insight-modal-body li {
  margin-bottom: 0.5rem;
}

.insight-modal-body blockquote {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(233, 142, 84, 0.05);
  border-left: 4px solid rgba(233, 142, 84, 0.5);
  border-radius: 8px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
}

.insight-modal-body code {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.95em;
}

.insight-modal-body pre {
  background: rgba(0, 0, 0, 0.3);
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.insight-modal-body pre code {
  background: none;
  padding: 0;
}

.insight-modal-body a {
  color: #E98E54;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.insight-modal-body a:hover {
  color: #f0a670;
}

.insight-modal-body hr {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.insight-modal-body strong {
  color: #fff;
  font-weight: 600;
}

.insight-modal-body em {
  color: rgba(255, 255, 255, 0.95);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .insight-modal {
    padding: 1rem;
  }

  .insight-modal-content {
    padding: 2rem 1.5rem;
  }

  .insight-modal-close {
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
  }

  .insight-modal-title {
    font-size: 1.75rem;
  }

  .insight-modal-body {
    font-size: 1rem;
  }
}

/* ----- Sub-section ----- */
.pub-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  scroll-margin-top: 120px;
}
.pub-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.pub-section-head-text { flex: 1 1 60%; min-width: 0; }
.pub-section-kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: rgba(var(--brand-steel), 1);
  font-weight: 700;
  display: block;
  margin-bottom: 0.4rem;
}
.pub-section-title {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  margin: 0;
  color: #fff;
}
.pub-section-copy {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0.4rem 0 0;
  line-height: 1.55;
}
.pub-section-empty {
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
  margin: 0;
  padding: 1rem 0;
}

/* ----- Language filter ----- */
.pub-lang-filter {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--page-border);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}
.pub-lang-btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  border: 0;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: background 0.18s ease, color 0.18s ease;
}
.pub-lang-btn:hover {
  color: #fff;
}
.pub-lang-btn.is-active {
  background: rgba(var(--brand-orange), 0.85);
  color: #fff;
}

/* ----- Pub cards ----- */
.pub-section-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pub-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.1rem;
  padding: 1rem;
  border-radius: var(--radius-card);
  background: var(--page-surface);
  border: 1px solid var(--page-border);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.pub-card[hidden] { display: none; }
.pub-card:hover {
  background: var(--page-surface-strong);
  border-color: rgba(var(--brand-orange), 0.22);
}
.pub-card-cover {
  width: 80px;
  aspect-ratio: 80 / 110;
  border-radius: 0.6rem;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}
.pub-card-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pub-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.pub-card-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.pub-card-date {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(var(--brand-steel), 0.18);
  border: 1px solid rgba(var(--brand-steel), 0.25);
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-pill);
}
.pub-card-title {
  font-size: 1rem;
  line-height: 1.35;
  margin: 0;
  color: #fff;
  font-weight: 600;
}
.pub-card-summary {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pub-card-actions {
  margin-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.pub-card--am .pub-card-title,
.pub-card--am .pub-card-summary {
  font-family: 'Noto Sans Ethiopic', 'Abyssinica SIL', 'Nyala', system-ui, sans-serif;
  line-height: 1.65;
}

/* CTA */
.pub-cta {
  background: rgba(var(--brand-orange), 0.85);
  color: #fff;
  border: 1px solid rgba(var(--brand-orange), 1);
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.pub-cta:hover {
  background: rgba(var(--brand-orange), 1);
  transform: translateY(-1px);
}

/* Read More button for insights - more subtle white text */
.insight-trigger.pub-cta {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.insight-trigger.pub-cta:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.pub-coming-soon {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  padding: 0.4rem 0;
}

/* Full-text disclosure */
.pub-fulltext {
  margin-top: 0.6rem;
  padding: 0.85rem 1rem;
  background: rgba(0, 0, 0, 0.22);
  border-left: 2px solid rgba(var(--brand-orange), 0.6);
  border-radius: 0.5rem;
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  width: 100%;
}
.pub-fulltext[lang="am"] {
  font-family: 'Noto Sans Ethiopic', 'Abyssinica SIL', 'Nyala', system-ui, sans-serif;
  line-height: 1.85;
}
.pub-fulltext p { margin: 0 0 0.8rem; }
.pub-fulltext p:last-child { margin-bottom: 0; }

@media (max-width: 540px) {
  .pub-card { grid-template-columns: 64px 1fr; gap: 0.85rem; padding: 0.85rem; }
  .pub-card-cover { width: 64px; }
  .pub-card-title { font-size: 0.95rem; }
  .pub-section-head { flex-direction: column; align-items: flex-start; }
}



/* ──────────────────────────────────────────────────────────────
   Regional-state accordion cards (parliament.html)
   ────────────────────────────────────────────────────────────── */
.regional-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(1.1rem, 1.5vw, 1.6rem);
}
.regional-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.regional-card.is-expanded {
  grid-column: 1 / -1;
  border-color: rgba(var(--brand-orange), 0.32);
}
.regional-card-header {
  all: unset;
  cursor: pointer;
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 1.05rem;
  padding: 1.2rem 1.4rem;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.25s ease;
}
.regional-card-header:hover {
  background: rgba(var(--brand-orange), 0.05);
}
.regional-card-header:focus-visible {
  outline: 2px solid rgba(var(--brand-orange), 0.6);
  outline-offset: -2px;
}
.regional-card-image {
  width: 88px;
  height: 64px;
  border-radius: 0.75rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}
.regional-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.regional-card-meta {
  min-width: 0;
}
.regional-card-meta .page-card-kicker {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.65rem;
}
.regional-card-meta h3 {
  margin: 0 0 0.25rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
}
.regional-card-meta p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(232, 240, 252, 0.62);
}
.regional-card-chevron {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  color: rgba(232, 240, 252, 0.55);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s;
}
.regional-card.is-expanded .regional-card-chevron {
  transform: rotate(180deg);
  color: rgba(var(--brand-orange), 0.9);
}
.regional-card-body {
  padding: 0.4rem clamp(1.4rem, 2.2vw, 2rem) clamp(1.5rem, 2.4vw, 2.2rem);
  border-top: 1px solid var(--page-border);
  margin-top: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.62;
  color: rgba(232, 240, 252, 0.86);
  max-height: 560px;
  overflow-y: auto;
}
.regional-card-body h4 {
  margin: 1.3rem 0 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(var(--brand-orange), 0.96);
}
.regional-card-body h4:first-child { margin-top: 0.8rem; }
.regional-card-body p {
  margin: 0 0 0.85rem;
}
.regional-card-body p:last-child { margin-bottom: 0; }

/* Bilingual block (EN / አማ toggle inside a card) */
.bilingual {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.lang-toggle {
  display: inline-flex;
  gap: 0;
  padding: 4px;
  border-radius: 100vw;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--page-border);
  width: fit-content;
}
.lang-toggle[hidden] { display: none; }
.lang-btn {
  all: unset;
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 100vw;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(232, 240, 252, 0.65);
  transition: background 0.2s, color 0.2s;
}
.lang-btn:hover { color: rgba(232, 240, 252, 0.92); }
.lang-btn.is-active {
  background: linear-gradient(180deg, rgba(var(--brand-orange), 0.95), rgba(196, 105, 56, 0.95));
  color: #1b1209;
  font-weight: 600;
}
.lang-content[hidden] { display: none; }

@media (max-width: 600px) {
  .regional-card-header {
    grid-template-columns: 64px 1fr auto;
    padding: 1rem 1.05rem;
    gap: 0.8rem;
  }
  .regional-card-image { width: 64px; height: 48px; }
  .regional-card-meta h3 { font-size: 0.95rem; }
  .regional-card-meta p { font-size: 0.74rem; }
  .regional-card-body { max-height: 70vh; }
}

/* =========================================================================
   Publications page — authoritative dark-theme palette
   --------------------------------------------------------------------------
   Fixes a contrast bug where the inner <section> blocks (pub-section)
   landed on nth-of-type positions that triggered the warm-beige alternating
   panel rule earlier in this file, even though they're nested deep inside
   the dark .pubs-split-section. We re-establish white-on-dark explicitly
   with !important so this is the final say in the cascade. (2026-05-29)
   ========================================================================= */

/* Section copy + headings inside the split: white on navy */
body.publications-page .page-main .pubs-split-section,
body.publications-page .page-main .pubs-split-section h2,
body.publications-page .page-main .pubs-split-section h3,
body.publications-page .page-main .pubs-split-section h4,
body.publications-page .page-main .pubs-split-section h5,
body.publications-page .page-main .pubs-split-section p,
body.publications-page .page-main .pubs-split-section li,
body.publications-page .page-main .pubs-col-title,
body.publications-page .page-main .pub-section-head h3,
body.publications-page .page-main .pub-section-title,
body.publications-page .page-main .pub-card-title,
body.publications-page .page-main .pub-card h4 {
  color: #ffffff !important;
}
body.publications-page .page-main .pubs-split-section .page-section-label,
body.publications-page .page-main .pub-section-head .page-section-label,
body.publications-page .page-main .pub-section-head .pub-section-label {
  color: rgba(233, 142, 84, 0.96) !important;
}
/* Body-weight copy a touch dimmer for hierarchy */
body.publications-page .page-main .pub-section-head p,
body.publications-page .page-main .pub-section-intro,
body.publications-page .page-main .pub-card-summary,
body.publications-page .page-main .pub-card p {
  color: rgba(255, 255, 255, 0.80) !important;
}
/* Meta strip: date, author, taxonomy */
body.publications-page .page-main .pub-card-meta,
body.publications-page .page-main .pub-card-date,
body.publications-page .page-main .pub-card-tag {
  color: rgba(255, 255, 255, 0.62) !important;
}
/* CTAs: orange link that's actually visible on navy */
body.publications-page .page-main .pub-cta,
body.publications-page .page-main .pubs-split-section .pdf-viewer-trigger {
  color: rgba(233, 142, 84, 1) !important;
}
body.publications-page .page-main .pub-cta:hover,
body.publications-page .page-main .pubs-split-section .pdf-viewer-trigger:hover {
  color: rgba(255, 198, 142, 1) !important;
}
/* Full-text toggle - subtle white */
body.publications-page .page-main .pub-fulltext-toggle {
  color: rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.publications-page .page-main .pub-fulltext-toggle:hover {
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Card surfaces — translucent on dark, glass-like */
.pubs-split-section .pub-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.18s ease;
}
.pubs-split-section .pub-card:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(233, 142, 84, 0.35) !important;
  transform: translateY(-2px);
}

/* Language filter buttons (EN / አማ / All) */
.pubs-split-section .pub-lang-filter button {
  color: rgba(255, 255, 255, 0.72) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.pubs-split-section .pub-lang-filter button:hover {
  color: #fff !important;
  border-color: rgba(233, 142, 84, 0.55) !important;
}
.pubs-split-section .pub-lang-filter button.is-active,
.pubs-split-section .pub-lang-filter button[aria-pressed="true"] {
  color: #0c1a30 !important;
  background: rgba(233, 142, 84, 0.95) !important;
  border-color: rgba(233, 142, 84, 0.95) !important;
}

/* Spacing rhythm — make the split section breathe and the inner sub-sections
   feel like distinct chapters rather than a list. */
.pubs-split-section {
  padding-top: clamp(4rem, 7vw, 6rem) !important;
  padding-bottom: clamp(6rem, 10vw, 9rem) !important;
}
.pubs-split { gap: clamp(2.5rem, 5vw, 4.5rem) !important; }

/* Sub-sections inside each column need clear separation so the kicker /
   title of the next one doesn't crowd the bottom card of the previous one.
   The combo here is: generous top margin + visible hairline divider that
   spans the column width — together they read as "new chapter" instead of
   "another row in a list". */
body.publications-page .page-main .pubs-col > .pub-section + .pub-section,
body.publications-page .page-main .pubs-col .pub-section + .pub-section {
  margin-top: clamp(4rem, 6vw, 5.5rem) !important;
  padding-top: clamp(2rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
body.publications-page .page-main .pub-section-head {
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.publications-page .page-main .pubs-col-title {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  letter-spacing: -0.005em;
  margin-bottom: 1.25rem;
}
/* The column intro paragraph (under the col title) needs space before the
   first sub-section so its kicker/title don't push against it. */
body.publications-page .page-main .pubs-col > p:first-of-type {
  margin-bottom: clamp(2rem, 3vw, 2.5rem);
}


/* ========================================
   Training Page - Policy Documents Section
   ======================================== */

.training-docs-section {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.training-docs-title {
  font-family: "Poppins", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 2rem 0;
  text-align: center;
}

.training-docs-section .pub-lang-filter {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.training-docs-section #policy-docs-mount {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 100%;
}

.training-docs-section .pub-card {
  background: linear-gradient(145deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.training-docs-section .pub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .training-docs-section #policy-docs-mount {
    grid-template-columns: 1fr;
  }
}

/* Override language filter for training page - compact style */
.training-docs-section .pub-lang-filter {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  padding: 0.25rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  width: fit-content;
  margin-left: auto;
  margin-right: 0;
}

.training-docs-section .pub-lang-btn {
  font-size: 0.75rem;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  min-width: 45px;
}

.training-docs-section .pub-lang-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

.training-docs-section .pub-lang-btn.is-active {
  background: rgba(233, 142, 84, 0.15);
  border-color: rgba(233, 142, 84, 0.4);
  color: #E98E54;
  font-weight: 600;
}

/* Fix grid alignment - center cards when incomplete row */
.training-docs-section #policy-docs-mount {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 100%;
  justify-items: center;
}

.training-docs-section .pub-card {
  width: 100%;
  max-width: 400px;
}

/* Responsive breakpoints */
@media (min-width: 1200px) {
  .training-docs-section #policy-docs-mount {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .training-docs-section #policy-docs-mount {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .training-docs-section #policy-docs-mount {
    grid-template-columns: 1fr;
  }
  
  .training-docs-section .pub-card {
    max-width: 100%;
  }
}

/* Move language filter to top and fix card proportions */
.training-docs-section .pub-lang-filter {
  justify-content: flex-start;
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 2rem;
}

/* Fix card grid - proper 3 column layout */
.training-docs-section #policy-docs-mount {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 100%;
  justify-items: stretch;
}

.training-docs-section .pub-card {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
}

.training-docs-section .pub-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.training-docs-section .pub-card-actions {
  margin-top: auto;
}

/* Responsive - 2 columns on tablet */
@media (min-width: 768px) and (max-width: 1199px) {
  .training-docs-section #policy-docs-mount {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile - 1 column */
@media (max-width: 767px) {
  .training-docs-section #policy-docs-mount {
    grid-template-columns: 1fr;
  }
}

/* New header design with language filter at top */
.training-docs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.training-docs-header .training-docs-title {
  margin: 0;
  text-align: left;
  font-size: 1.5rem;
}

/* New language filter design - pill style */
.training-lang-filter {
  display: inline-flex;
  gap: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.3rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.training-lang-btn {
  font-size: 0.8rem;
  padding: 0.5rem 1.2rem;
  border-radius: 9px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.25s ease;
  font-weight: 500;
  white-space: nowrap;
}

.training-lang-btn:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
}

.training-lang-btn.is-active {
  background: rgba(233, 142, 84, 0.2);
  color: #E98E54;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(233, 142, 84, 0.2);
}

/* Mobile responsiveness for header */
@media (max-width: 768px) {
  .training-docs-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .training-lang-filter {
    width: 100%;
    justify-content: center;
  }
  
  .training-lang-btn {
    flex: 1;
    text-align: center;
  }
}