@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Bold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Plein";
  src: url("fonts/Plein-Black.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 900;
}

@font-face {
  font-family: "Open Sans SemiCondensed";
  src: url("fonts/OpenSans-SemiCondensed-Bold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  font-stretch: semi-condensed;
}

:root {
  --brand-text-crimson: #b12820;
  --brand-text-vivid-red: #fe1c03;
  --brand-text-ochre: #da9828;
  --brand-midnight: #16165b;
  --brand-text-berry: #b33d54;
  --brand-black: #000000;

  --brand-blush: #c3435d;
  --brand-sun-gold: #f1a81f;
  --brand-royal: #0b58a3;
  --brand-cerulean: #4898d3;
  --brand-white: #ebebeb;

  --brand-page: #ebebeb;
  --brand-surface: #ffffff;
  --brand-line: rgba(22, 22, 91, 0.25);
  --brand-line-soft: rgba(22, 22, 91, 0.14);

  --brand-blue-dark: var(--brand-royal);
  --brand-blue-mid: var(--brand-cerulean);
  --brand-yellow: var(--brand-sun-gold);
  --brand-red: var(--brand-blush);
  --brand-amber-text: var(--brand-text-ochre);
  --page-bg: var(--brand-page);
  --surface: var(--brand-surface);
  --surface-soft: var(--brand-page);
  --ink: var(--brand-black);
  --muted: var(--brand-midnight);
  --border: var(--brand-line);
  --focus: var(--brand-text-vivid-red);

  --color-bg: var(--brand-page);
  --color-surface: var(--brand-surface);
  --color-text: var(--brand-black);
  --color-accent: var(--brand-royal);
  --color-accent-100: #e8f2fb;
  --color-accent-200: #cfe4f4;
  --color-accent-300: #a8cde8;
  --color-accent-400: #7db3d9;
  --color-accent-500: var(--brand-cerulean);
  --color-accent-600: var(--brand-royal);
  --color-accent-700: var(--brand-midnight);
  --color-accent-800: var(--brand-midnight);
  --color-accent-900: #0b0b38;
  --color-divider: var(--brand-line-soft);
  --color-neutral-100: #f8f8f8;
  --color-neutral-200: #dedede;
  --color-neutral-300: #c6c6c6;
  --color-neutral-400: #8b8b8b;
  --font-heading: "Satoshi", system-ui, sans-serif;
  --font-body: "Satoshi", system-ui, sans-serif;
  --font-display: "Plein", system-ui, sans-serif;
}

html,
body {
  background: var(--brand-page) !important;
  color: var(--brand-black) !important;
}

body,
button,
input,
textarea,
select {
  font-family: "Satoshi", system-ui, sans-serif !important;
}

body {
  line-height: 1.58 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-brand__forum,
.primary-nav a,
.btn,
.filter-chip,
.program-row__time,
.countdown__value,
.kicker,
.tag,
.text-link {
  font-family: "Satoshi", system-ui, sans-serif !important;
}

h1,
.hero h1,
.hero__wordmark,
.site-brand__wordmark,
.site-footer .hero__wordmark {
  font-family: "Plein", system-ui, sans-serif !important;
  font-weight: 900 !important;
}

h2,
h3,
h4,
h5,
h6 {
  color: var(--brand-midnight) !important;
  font-weight: 700 !important;
}

a {
  color: var(--brand-royal);
}

button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--brand-text-vivid-red) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(254, 28, 3, 0.14) !important;
}

::selection {
  color: #ffffff;
  background: var(--brand-midnight);
}

/* The Thinking Mode disclosure is part of the public interface — it is how a
   visitor reaches High and Ultra, and Ultra is the only route to the logo
   transformation.

   The butterfly field is hidden in Instant, which is the still presentation,
   and released in Ultra where the polish layer already sets it flying. */
html[data-thinking-mode="instant"] .ultra-butterfly-field,
html[data-thinking-mode="high"] .ultra-butterfly-field {
  display: none !important;
}

html[data-thinking-mode="ultra"] .ultra-butterfly-field {
  display: block !important;
}

/* High is the light presentation, same surfaces as Instant. Ultra is the night
   presentation and is defined further down — it must NOT be forced light here.
   Doing so is what broke it: the page went light while every Ultra foreground
   treatment (near-white headline, dimmed nav, dark cards) stayed as authored
   for a dark ground, leaving pale text on a pale page. */
html[data-thinking-mode="high"] {
  color-scheme: light !important;
  --page-bg: var(--brand-page) !important;
  --surface: var(--brand-surface) !important;
  --surface-soft: var(--brand-page) !important;
  --ink: var(--brand-black) !important;
  --muted: var(--brand-midnight) !important;
  --border: var(--brand-line) !important;
  --color-bg: var(--brand-page) !important;
  --color-surface: var(--brand-surface) !important;
  --color-text: var(--brand-black) !important;
}

html[data-thinking-mode="high"] body,
html[data-thinking-mode="high"] main,
html[data-thinking-mode="high"] .site-header {
  background: var(--brand-page) !important;
  color: var(--brand-black) !important;
}

html[data-thinking-mode="high"] .site-footer {
  background: var(--brand-midnight) !important;
  color: #ffffff !important;
}

/* Masthead */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  border-bottom: 2px solid var(--brand-midnight) !important;
  background: rgba(235, 235, 235, 0.96) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-header__inner {
  width: min(100% - 48px, 1240px) !important;
  min-height: clamp(92px, 8vw, 118px) !important;
  padding-block: 12px !important;
  gap: 24px !important;
}

.site-brand {
  gap: 10px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--brand-black) !important;
}

.site-brand__network {
  display: grid !important;
  place-items: center !important;
  width: 50px !important;
  height: 50px !important;
  padding: 5px !important;
  background: #ffffff !important;
  border: 1px solid var(--brand-line) !important;
}

.site-brand__logo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.site-brand__divider {
  width: 2px !important;
  height: clamp(42px, 4vw, 58px) !important;
  background: var(--brand-sun-gold) !important;
}

.site-brand__copy {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.site-brand__wordmark {
  display: inline-flex !important;
  align-items: baseline !important;
  flex: 0 1 auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: clamp(1.35rem, 1.75vw, 1.75rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.045em !important;
  white-space: nowrap !important;
}

.site-brand__wordmark > span {
  font: inherit !important;
  font-size: 1em !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

.site-brand__letter--m {
  color: var(--brand-blush) !important;
}

.site-brand__letter--e {
  color: var(--brand-sun-gold) !important;
}

.site-brand__rest {
  color: var(--brand-midnight) !important;
}

.site-brand__tagline {
  display: block !important;
  width: 100% !important;
  margin-top: 5px !important;
  color: var(--brand-blush) !important;
  font-family: "Open Sans SemiCondensed", "Satoshi", sans-serif !important;
  font-size: clamp(0.56rem, 0.68vw, 0.7rem) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.075em !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.site-brand__forum {
  color: var(--brand-midnight) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

.site-brand__partner-strip {
  display: grid !important;
  grid-template-columns: auto auto auto !important;
  align-items: center !important;
  gap: clamp(5px, 0.75vw, 10px) !important;
  flex: 0 1 auto !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-brand__partner-logo {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-brand__partner-logo--depdev {
  width: clamp(26px, 2.9vw, 40px) !important;
  height: clamp(26px, 2.9vw, 40px) !important;
  filter: none !important;
}

.site-brand__partner-logo--mne {
  width: clamp(72px, 6.5vw, 96px) !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 64px !important;
  justify-self: start !important;
}

.site-brand__partner-logo--undp {
  width: auto !important;
  height: clamp(34px, 4.4vw, 52px) !important;
  max-width: 30px !important;
}

.primary-nav {
  gap: 4px !important;
}

/* Sentence case at a readable size. Uppercase plus 0.05em tracking at 0.77rem
   made six items read as one dense band rather than as separate destinations. */
.primary-nav a {
  min-height: 42px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  color: var(--brand-midnight) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* The current page is marked with a gold underline, not a filled white slab.
   On this light masthead a white fill has almost no contrast against the bar
   itself, so it read as a floating blank rectangle rather than as emphasis. */
.primary-nav a:hover {
  color: var(--brand-royal) !important;
  background: rgba(255, 255, 255, .6) !important;
  box-shadow: none !important;
}

.primary-nav a[aria-current="page"] {
  color: var(--brand-royal) !important;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 var(--brand-sun-gold) !important;
}

.mobile-menu-button {
  border-radius: 0 !important;
  border: 1px solid var(--brand-midnight) !important;
  background: transparent !important;
  color: var(--brand-midnight) !important;
  font-family: "Satoshi", system-ui, sans-serif !important;
}

.phase-switch {
  border-color: var(--brand-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.seg {
  border-color: var(--brand-midnight) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.seg-opt {
  border-radius: 0 !important;
  color: var(--brand-midnight) !important;
}

.seg-opt:has(input:checked) {
  background: var(--brand-midnight) !important;
  color: #ffffff !important;
}

/* Hero: white editorial ground, high-contrast title, and the approved
   cocoon/butterfly artwork as the focal point. */
.hero {
  min-height: min(790px, calc(100vh - 78px)) !important;
  overflow: hidden !important;
  background: var(--brand-page) !important;
  border-bottom: 0 !important;
}

.hero::before,
.hero::after {
  opacity: 0.9 !important;
}

.hero__inner {
  /* Fluid gutter rather than a fixed 48px. On a 320px phone a fixed gutter is
     15% of the viewport per side; this scales it back to something the content
     can live inside. */
  width: min(100% - clamp(20px, 4vw, 48px), 1240px) !important;
  min-height: min(790px, calc(100vh - 78px)) !important;
  /* The art column is minmax(0, …), not minmax(320px, …). A hard pixel minimum
     on a grid track cannot shrink below itself, so between roughly 880px and
     the point where this collapses to one column it was pushing the whole row
     wider than its container and forcing a horizontal scroll. */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
  gap: clamp(24px, 4vw, 72px) !important;
  /* Asymmetric: the masthead already supplies separation above the hero, so
     the top only needs enough to clear it. The bottom keeps its breathing
     room so the fold does not crowd the section beneath. */
  padding-block: clamp(24px, 3vw, 44px) clamp(48px, 7vw, 92px) !important;
}

.hero__content {
  z-index: 2 !important;
}

.hero__meta {
  gap: 12px !important;
  margin-bottom: 28px !important;
}

/* The date is the one fact worth pinning, so it gets an outlined chip. The
   second tag is supporting context and stays plain text — two chips side by
   side give equal billing to unequal information. */
.hero__meta .tag {
  min-height: 34px !important;
  padding: 6px 16px !important;
  border: 1.5px solid var(--brand-line) !important;
  border-radius: 999px !important;
  color: var(--brand-royal) !important;
  font-family: "Open Sans SemiCondensed", sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  background: transparent !important;
}

.hero__meta .tag:nth-child(2) {
  padding-inline: 0 !important;
  border: 0 !important;
  color: var(--brand-midnight) !important;
  opacity: .72 !important;
}

/* The lower bound matters more than the upper one here. At 4.2rem the headline
   was still forcing a horizontal scroll on a 320px phone, because a clamp's
   minimum is a floor the text cannot go below no matter how narrow the column
   gets. Starting at 2.5rem lets it fit, and the vw term still reaches display
   scale on a desktop. */
.hero h1 {
  max-width: 800px !important;
  color: var(--brand-royal) !important;
  font-size: clamp(2.5rem, 6.4vw, 7rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.05em !important;
  text-wrap: balance !important;
}

/* Gold, not crimson. Crimson competes with the red butterfly in the mark
   beside it and drags the headline toward alarm; gold is the identity's warm
   accent and reads as emphasis. */
.hero h1 .hero__action-word,
.hero h1 .hero__action-word--ai {
  color: var(--brand-sun-gold) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.hero__lede {
  max-width: 58ch !important;
  margin: clamp(18px, 2.4vw, 28px) 0 clamp(20px, 2.6vw, 30px) !important;
  color: var(--brand-midnight) !important;
  font-family: "Open Sans SemiCondensed", sans-serif !important;
  font-size: clamp(0.98rem, 0.94rem + 0.22vw, 1.1rem) !important;
  font-weight: 700 !important;
  line-height: 1.62 !important;
}

/* Wraps rather than overflowing: three controls on one line do not fit a phone,
   and letting them wrap is better than shrinking them below a comfortable tap
   target. */
.hero__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px clamp(10px, 1.4vw, 14px) !important;
  margin-bottom: clamp(22px, 3vw, 30px) !important;
}

/* Pills. The identity is built from curves — the butterfly lobes, the M's
   loops, the dashed flight paths — and square controls read as a different
   system bolted on. Padding is fluid so the label keeps its breathing room at
   small sizes instead of the button collapsing to its text. */
.btn,
.filter-chip {
  min-height: 46px !important;
  padding: 12px clamp(18px, 2.2vw, 26px) !important;
  border-radius: 999px !important;
  border-width: 1.5px !important;
  font-family: "Satoshi", system-ui, sans-serif !important;
  font-size: clamp(0.84rem, 0.8rem + 0.2vw, 0.94rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

.btn-primary,
.filter-chip.is-selected {
  color: #ffffff !important;
  border-color: var(--brand-royal) !important;
  background: var(--brand-royal) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.filter-chip.is-selected:hover {
  border-color: var(--brand-midnight) !important;
  background: var(--brand-midnight) !important;
}

/* The outline sits beside a solid royal pill, so its border is a soft line
   rather than full-strength midnight — at equal weight the two controls
   compete and neither reads as primary. */
.btn-secondary,
.filter-chip {
  color: var(--brand-midnight) !important;
  border-color: var(--brand-line) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.btn-secondary:hover,
.filter-chip:hover {
  color: var(--brand-black) !important;
  border-color: var(--brand-text-ochre) !important;
  background: #ffffff !important;
}

.text-link {
  color: var(--brand-midnight) !important;
  font-weight: 700 !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px !important;
}

.countdown {
  width: min(100%, 460px) !important;
  border: 1.5px solid var(--brand-line-soft) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.countdown__cell + .countdown__cell {
  border-left: 1px solid var(--brand-line) !important;
}

.countdown__value {
  color: var(--brand-royal) !important;
  font-family: "Satoshi", system-ui, sans-serif !important;
  font-weight: 700 !important;
}

.countdown__label,
.countdown__note {
  color: var(--brand-midnight) !important;
  font-family: "Open Sans SemiCondensed", sans-serif !important;
  font-weight: 700 !important;
}

.countdown__note {
  border-top-color: var(--brand-line) !important;
}

/* The logo stands on the page with nothing behind or around it. Both marks are
   transparent by design, so this container paints no fill and draws no frame —
   a background reads as a white box stamped over the page texture, and border
   rules read as a box drawn around the mark. The polish layer also rounds this
   element to 50% under Ultra, which bent any such rules into stray arcs; the
   radius is neutralised here so nothing can reappear as a ring. */
.hero__art {
  width: 100% !important;
  max-width: min(760px, 100%) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.hero__art::before {
  display: none !important;
}

.hero__art > img.hero__identity-logo,
html[data-thinking-mode="ultra"] .hero__art > svg.hero__transformation-logo,
html[data-thinking-mode="ultra"] .hero__art > img.hero__transformation-logo {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 855 / 459;
  object-fit: contain !important;
  filter: drop-shadow(0 18px 32px rgba(10, 87, 163, .16)) !important;
}

/* The lazy fallback image has no src until Ultra has requested the artwork.
   Keep that placeholder from painting a broken-image icon or alt text while
   the synchronized inline SVG is being prepared. */
html[data-thinking-mode="ultra"] img.hero__transformation-logo:not([src]) {
  display: none !important;
}

.hero__art > div[style*="text-align"] {
  margin-top: 18px !important;
}

.hero__wordmark {
  color: var(--brand-black) !important;
  font-size: clamp(3rem, 5.4vw, 5.4rem) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.055em !important;
  text-align: center !important;
}

.hero__wordmark-m {
  color: var(--brand-blush) !important;
}

.hero__wordmark-e {
  color: var(--brand-sun-gold) !important;
}

.hero__wordmark-rest {
  color: var(--brand-midnight) !important;
}

.hero__wordmark-tagline {
  margin-top: clamp(8px, 1vw, 12px) !important;
  color: var(--brand-blush) !important;
  font-family: "Open Sans SemiCondensed", "Satoshi", sans-serif !important;
  font-size: clamp(1.05rem, 2.2vw, 2rem) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.075em !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.hero__art > div[style*="text-align"] > div:last-child {
  color: var(--brand-midnight) !important;
  font-family: "Open Sans SemiCondensed", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
}

.hero__art > div[style*="text-align"] > div:last-child span:first-child {
  color: var(--brand-royal) !important;
}

/* Section rhythm and guide motifs */
main section:not(.hero) {
  border-top: 1px solid var(--brand-line-soft) !important;
  background: #ffffff !important;
}

.themes,
.program-section,
.speakers-section,
.qa-section {
  background: #ffffff !important;
}

.notes-section,
.gallery-section,
.past-forums-section,
#past-forums {
  background: var(--brand-page) !important;
}

.section-shell {
  width: min(100% - 48px, 1240px) !important;
  padding-block: clamp(64px, 8vw, 108px) !important;
}

.section-shell > div:first-child h2,
section h2 {
  color: var(--brand-midnight) !important;
  font-size: clamp(2rem, 4vw, 3.1rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.045em !important;
}

section h2::after {
  width: 82px !important;
  height: 4px !important;
  margin-top: 16px !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, var(--brand-sun-gold), var(--brand-blush)) !important;
}

.eyebrow-heading,
.kicker,
.section-shell > div:first-child > span,
.notes-section article span[style],
.gallery-section article span[style] {
  color: var(--brand-midnight) !important;
  font-family: "Open Sans SemiCondensed", sans-serif !important;
  font-weight: 700 !important;
}

.theme-grid,
.speaker-grid,
.gallery-grid,
.track-grid {
  gap: 18px !important;
}

.theme-card,
.speaker-card,
.track-card,
.brandcard,
.card,
.dialog {
  border: 1px solid var(--brand-line) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.theme-card {
  min-height: 230px !important;
  border-top: 7px solid var(--theme-color) !important;
  padding: 24px 22px !important;
}

.theme-card > div:first-child {
  color: var(--theme-color) !important;
  font-family: "Plein", system-ui, sans-serif !important;
  font-weight: 900 !important;
}

.theme-card h3,
.track-card h3,
.speaker-card h3,
.notes-section article h3,
.gallery-section article h3 {
  color: var(--brand-midnight) !important;
  font-family: "Satoshi", system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

.theme-card p,
.track-card p,
.speaker-card__content > p:not(.kicker),
.notes-section article p,
.gallery-section article p,
.qa-section p[style] {
  color: var(--brand-midnight) !important;
}

.program-item {
  border-bottom: 2px solid var(--brand-line-soft) !important;
}

.program-row {
  min-height: 70px !important;
  color: var(--brand-black) !important;
  border-radius: 0 !important;
}

.program-row:hover {
  background: rgba(241, 168, 31, 0.12) !important;
}

.program-row__time {
  color: var(--brand-royal) !important;
  font-weight: 700 !important;
}

.program-row__title {
  color: var(--brand-black) !important;
  font-weight: 700 !important;
}

.program-panel {
  border-left: 5px solid var(--brand-sun-gold) !important;
  margin: 0 0 18px 0 !important;
  color: var(--brand-midnight) !important;
}

.tag {
  border-radius: 0 !important;
  font-family: "Open Sans SemiCondensed", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.tag-accent {
  color: var(--brand-midnight) !important;
  background: rgba(72, 152, 211, 0.18) !important;
}

.tag-neutral {
  color: var(--brand-midnight) !important;
  background: var(--brand-page) !important;
}

.tag-outline {
  color: var(--brand-midnight) !important;
  border-color: var(--brand-midnight) !important;
  background: transparent !important;
}

.speaker-card {
  grid-template-columns: 70px minmax(0, 1fr) !important;
  padding: 20px !important;
}

.speaker-card__avatar {
  border-radius: 0 !important;
  color: #ffffff !important;
  background: var(--brand-royal) !important;
  font-family: "Plein", system-ui, sans-serif !important;
  font-weight: 900 !important;
}

.filter-group {
  margin-block: 24px 30px !important;
}

.notes-section .brandcard,
.gallery-section .brandcard,
.qa-section .brandcard {
  border-left: 5px solid var(--brand-blush) !important;
}

.qa-section .filter-chip.is-selected,
.gallery-section .filter-chip.is-selected {
  background: var(--brand-midnight) !important;
  border-color: var(--brand-midnight) !important;
}

.gallery-empty {
  border: 2px dashed var(--brand-midnight) !important;
  border-radius: 0 !important;
  color: var(--brand-midnight) !important;
  background: #ffffff !important;
}

/* Past Forums / SDE media card. Keep the external video fluid and prevent
   the embedded player from widening the page at narrow breakpoints. */
.past-forums-section,
#past-forums {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.past-forums-section .brandcard,
#past-forums .brandcard,
.sde-video-card {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border-left: 5px solid var(--brand-blush) !important;
}

.past-forums-section .brandcard > div[style*="aspect-ratio"],
#past-forums .sde-embed,
.sde-embed {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  background: #0b1724 !important;
}

.past-forums-section .brandcard > div[style*="aspect-ratio"] iframe,
#past-forums .sde-embed iframe,
.sde-embed iframe {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
}

.past-forums-section .brandcard a,
#past-forums .brandcard a,
.sde-video-card a {
  overflow-wrap: anywhere;
}

/* The guide's co-branding bar is a dark, spacious institutional lockup. */
.site-footer {
  background: var(--brand-midnight) !important;
  color: #ffffff !important;
}

.site-footer::before,
.site-footer::after,
.site-footer .halftone-y {
  opacity: 0.22 !important;
}

.site-footer p,
.site-footer a,
.site-footer span,
.site-footer h2,
.site-footer h3 {
  color: #ffffff !important;
}

.site-footer .sec-inner > div {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.site-footer .sec-inner[style*="grid-template-columns"] {
  gap: 42px !important;
}

.site-footer .sec-inner:not([style*="grid-template-columns"]) > div {
  gap: 13px !important;
}

.site-footer .sec-inner img[alt*="Department"] {
  height: 48px !important;
  width: auto !important;
  opacity: 1 !important;
}

.site-footer .sec-inner img[alt*="M&E"] {
  height: 40px !important;
  width: auto !important;
  opacity: 1 !important;
}

.site-footer .sec-inner img[alt*="United Nations"] {
  width: auto !important;
  height: 46px !important;
  max-width: 86px !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 1 !important;
}

.site-footer .sec-inner > div > span:first-child {
  font-family: "Open Sans SemiCondensed", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}

/* Keep the footer partner lockup in the same reading order as the masthead:
   M&E first, then DEPDev, then UNDP. The source bundle places the marks in a
   legacy order, so explicit flex ordering keeps the visual sequence aligned
   without changing the footer's dark institutional bar. */
.footer__partner-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: clamp(14px, 2vw, 28px) !important;
}

.footer__partner-strip > span:first-child {
  order: 0 !important;
  flex: 0 0 auto !important;
}

.site-footer .footer__partner-strip > img[alt*="M&E"] {
  order: 1 !important;
  height: 38px !important;
}

.site-footer .footer__partner-strip > img[alt*="Department"] {
  order: 2 !important;
  height: 42px !important;
}

.site-footer .footer__partner-strip > img[alt*="United Nations"] {
  order: 3 !important;
  height: 46px !important;
}

.site-footer [style*="TAMORPHOSIS"] {
  font-family: "Plein", system-ui, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}

/* The hero's flight lines are dashed, not solid. Two of these paths already
   carry stroke-dasharray="9 11" in the markup; `stroke-dasharray: none` here
   was overriding the attribute and flattening them, and the other two were
   never dashed at all. The dash is the identity's flight-path language — it
   matches the transformation's own traced route — so all four get it.

   The crimson pair uses a longer, sparser dash so the two colours read as
   different routes rather than one broken line. */
.hero > svg path {
  stroke: var(--brand-cerulean) !important;
  stroke-dasharray: 9 11 !important;
  stroke-linecap: round !important;
}

.hero > svg path:nth-child(3),
.hero > svg path:nth-child(4) {
  stroke: var(--brand-blush) !important;
  stroke-dasharray: 6 14 !important;
}

.halftone,
.halftone-y {
  background-image: radial-gradient(circle, var(--brand-cerulean) 0 1.4px, transparent 1.6px) !important;
  background-size: 9px 9px !important;
}

/* Instant is the still presentation — the ambient layer holds its pose. High
   and Ultra put it back in motion below. Scoping this matters: unscoped, it
   silenced the drifting background marks in every mode. */
html[data-thinking-mode="instant"] .hero > img {
  animation: none !important;
}

html[data-thinking-mode="ultra"] .hero__art,
html[data-thinking-mode="high"] .hero__art {
  background: transparent !important;
  border-radius: 0 !important;
  filter: none !important;
}

@media (max-width: 880px) {
  /* Sticky, not relative. The polish layer pairs a `position: fixed` masthead
     with `body { padding-top: 66px }` to reserve its space; overriding only the
     position left that reservation behind as a 66px band of empty page above
     the header. Sticky stays in normal flow, so it needs no reservation — and
     the offset is cleared here so the two cannot drift apart again. */
  .site-header {
    position: sticky !important;
    top: 0 !important;
  }

  body {
    padding-top: 0 !important;
  }

  .site-header__inner,
  .hero__inner,
  .section-shell,
  .live-banner > div {
    width: min(100% - 36px, 1240px) !important;
  }

  .primary-nav.is-open {
    gap: 6px !important;
    padding-block: 10px 4px !important;
  }

  .primary-nav.is-open a {
    border: 1px solid var(--brand-line) !important;
    background: #ffffff !important;
  }

  .hero,
  .hero__inner {
    min-height: auto !important;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-block: 24px 64px !important;
  }

  /* Single-column from here down, so the art is no longer sharing the row and
     the desktop cap no longer starves it. Let it use the full column width. */
  .hero__art {
    width: min(100%, 620px) !important;
    max-width: min(100%, 620px) !important;
    margin-inline: auto !important;
  }

  .theme-grid,
  .speaker-grid,
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 880px) and (max-height: 500px) {
  /* Preserve a large focal mark without letting the stacked mobile hero turn
     into an avoidably cropped strip on short landscape screens. */
  .hero__art {
    width: min(100%, 460px) !important;
    max-width: min(100%, 460px) !important;
  }
}

@media (max-width: 600px) {
  .site-brand {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "copy" "partners" !important;
    gap: 8px !important;
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
    overflow: visible !important;
  }

  .site-header__inner {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
    min-height: auto !important;
  }

  .site-header__inner,
  .hero__inner,
  .section-shell,
  .live-banner > div {
    width: min(100% - 28px, 1240px) !important;
  }

  .site-brand__network {
    display: none !important;
  }

  .site-brand__divider {
    display: none !important;
  }

  .site-brand__copy {
    display: flex !important;
    grid-area: copy !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .site-brand__wordmark {
    font-size: clamp(1.2rem, 6vw, 1.65rem) !important;
    letter-spacing: -0.05em !important;
  }

  .site-brand__tagline {
    margin-top: 4px !important;
    font-size: clamp(0.5rem, 2.5vw, 0.64rem) !important;
    letter-spacing: 0.055em !important;
  }

  .hero__wordmark-tagline {
    font-size: clamp(0.88rem, 4.4vw, 1.05rem) !important;
    letter-spacing: 0.04em !important;
  }

  .site-brand__forum {
    display: none !important;
  }

  .site-header__mode .thinking-mode__current {
    display: none !important;
  }

  .site-brand__partner-strip {
    grid-area: partners !important;
    justify-self: center !important;
    gap: 4px !important;
    flex: 0 1 auto !important;
    width: fit-content !important;
    max-width: 100% !important;
  }

  .site-brand__partner-logo--depdev {
    width: clamp(24px, 6vw, 30px) !important;
    height: clamp(24px, 6vw, 30px) !important;
  }

  .site-brand__partner-logo--mne {
    width: clamp(56px, 14vw, 74px) !important;
    max-width: 100% !important;
    max-height: 48px !important;
  }

  .site-brand__partner-logo--undp {
    height: clamp(32px, 8vw, 40px) !important;
    max-width: 24px !important;
  }

  .hero h1 {
    font-size: clamp(3.65rem, 16vw, 5.2rem) !important;
  }

  .hero__lede {
    font-size: 1rem !important;
  }

  .hero__art {
    width: min(100%, 560px) !important;
    max-width: min(100%, 560px) !important;
    padding: 0 !important;
  }

  .theme-grid,
  .speaker-grid,
  .gallery-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .section-shell {
    padding-block: 56px !important;
  }

  .program-row {
    grid-template-columns: 60px minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  .program-panel {
    padding-left: 14px !important;
  }

  .site-footer .sec-inner[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Preserve room for the 1.5× masthead wordmark on wide desktop screens. */
@media (min-width: 1181px) {
  .primary-nav a {
    padding-inline: 9px !important;
  }
}


/* ===================================================================
   ULTRA — night presentation
   -------------------------------------------------------------------
   Ultra is the full reveal: the room dims and the logo transformation
   is the only lit thing on the page. That only works if the theme is
   coherent, so the flip happens at the token level first and the rules
   below only patch the places that hardcode a literal colour.

   The mark itself needs no adjustment — its blues, gold and blush are
   saturated enough to hold against a dark ground, which is why the
   artwork is left completely alone here.
   =================================================================== */
html[data-thinking-mode="ultra"] {
  color-scheme: dark !important;

  --brand-page: #0a1a2b !important;
  --brand-surface: #12283f !important;
  --brand-black: #eef4fa !important;
  --brand-midnight: #b9d2e8 !important;
  --brand-line: rgba(174, 208, 238, 0.30) !important;
  --brand-line-soft: rgba(174, 208, 238, 0.16) !important;
  --brand-royal: #6fb4ea !important;

  --page-bg: #0a1a2b !important;
  --surface: #12283f !important;
  --surface-soft: #0e2136 !important;
  --ink: #eef4fa !important;
  --muted: #b9d2e8 !important;
  --border: rgba(174, 208, 238, 0.30) !important;
  --color-bg: #0a1a2b !important;
  --color-surface: #12283f !important;
  --color-text: #eef4fa !important;
  --color-divider: rgba(174, 208, 238, 0.16) !important;
}

html[data-thinking-mode="ultra"] html,
html[data-thinking-mode="ultra"] body,
html[data-thinking-mode="ultra"] main {
  background: #0a1a2b !important;
  color: #eef4fa !important;
}

html[data-thinking-mode="ultra"] .site-header {
  border-bottom-color: rgba(174, 208, 238, 0.24) !important;
  background: rgba(10, 26, 43, 0.94) !important;
}

html[data-thinking-mode="ultra"] .site-footer {
  background: #061523 !important;
  color: #eef4fa !important;
}

/* Navigation: legible light text, gold underline for the current page. The
   light theme's white hover fill would be a bright slab here. */
html[data-thinking-mode="ultra"] .primary-nav a {
  color: #cfe1f2 !important;
  background: transparent !important;
}

html[data-thinking-mode="ultra"] .primary-nav a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

html[data-thinking-mode="ultra"] .primary-nav a[aria-current="page"] {
  color: #ffffff !important;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 var(--brand-sun-gold) !important;
}

/* Headline: light base, gold accents unchanged. */
html[data-thinking-mode="ultra"] .hero h1 {
  color: #f4f9ff !important;
}

html[data-thinking-mode="ultra"] .hero h1 .hero__action-word,
html[data-thinking-mode="ultra"] .hero h1 .hero__action-word--ai {
  color: var(--brand-sun-gold) !important;
}

html[data-thinking-mode="ultra"] .hero__lede {
  color: #c3d8ec !important;
}

html[data-thinking-mode="ultra"] .hero__meta .tag {
  border-color: rgba(174, 208, 238, 0.34) !important;
  color: #9ecbf2 !important;
}

html[data-thinking-mode="ultra"] .hero__meta .tag:nth-child(2) {
  color: #b9d2e8 !important;
}

/* Controls. The solid pill brightens so it still reads as primary against a
   dark ground; the outline pill goes to a light hairline instead of the
   near-black fill it was inheriting. */
html[data-thinking-mode="ultra"] .btn-primary,
html[data-thinking-mode="ultra"] .filter-chip.is-selected {
  color: #06182a !important;
  border-color: #6fb4ea !important;
  background: #6fb4ea !important;
}

html[data-thinking-mode="ultra"] .btn-primary:hover,
html[data-thinking-mode="ultra"] .filter-chip.is-selected:hover {
  border-color: #9ccdf5 !important;
  background: #9ccdf5 !important;
}

html[data-thinking-mode="ultra"] .btn-secondary,
html[data-thinking-mode="ultra"] .filter-chip {
  color: #dcebf9 !important;
  border-color: rgba(174, 208, 238, 0.42) !important;
  background: transparent !important;
}

html[data-thinking-mode="ultra"] .btn-secondary:hover,
html[data-thinking-mode="ultra"] .filter-chip:hover {
  color: #ffffff !important;
  border-color: var(--brand-sun-gold) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-thinking-mode="ultra"] .text-link {
  color: #9ecbf2 !important;
}

/* Countdown: a lifted panel, not a black slab on black. */
html[data-thinking-mode="ultra"] .countdown {
  border-color: rgba(174, 208, 238, 0.26) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

html[data-thinking-mode="ultra"] .countdown__value {
  color: #7cc0f5 !important;
}

html[data-thinking-mode="ultra"] .countdown__label,
html[data-thinking-mode="ultra"] .countdown__note {
  color: #c3d8ec !important;
}

html[data-thinking-mode="ultra"] .countdown__cell + .countdown__cell {
  border-left-color: rgba(174, 208, 238, 0.18) !important;
}

html[data-thinking-mode="ultra"] .countdown__note {
  border-top-color: rgba(174, 208, 238, 0.18) !important;
}

/* Masthead brand: Ultra uses a dark header, so the existing M&E and DEPDev
   assets invert to solid white while UNDP keeps its supplied color. */
html[data-thinking-mode="ultra"] .site-brand__partner-logo--mne,
html[data-thinking-mode="ultra"] .site-brand__partner-logo--depdev {
  filter: brightness(0) invert(1) !important;
}

html[data-thinking-mode="ultra"] .site-brand__rest,
html[data-thinking-mode="ultra"] .site-brand {
  color: #f2f7fc !important;
}

html[data-thinking-mode="ultra"] .site-brand__forum {
  color: #a9c4dc !important;
}

html[data-thinking-mode="ultra"] .site-brand__tagline,
html[data-thinking-mode="ultra"] .hero__wordmark-tagline {
  color: #f08fa5 !important;
}

html[data-thinking-mode="ultra"] section {
  background-color: rgba(18, 40, 63, 0.72) !important;
  border-color: rgba(174, 208, 238, 0.20) !important;
}

html[data-thinking-mode="ultra"] section h2,
html[data-thinking-mode="ultra"] section h3,
html[data-thinking-mode="ultra"] section h4 {
  color: #eef4fa !important;
}

html[data-thinking-mode="ultra"] .mobile-menu-button {
  border-color: rgba(174, 208, 238, 0.42) !important;
  color: #dcebf9 !important;
}

/* ===================================================================
   AMBIENT MOTION — the "thinking" layer
   -------------------------------------------------------------------
   Instant is still. High sets the background in motion. Ultra does the
   same in the dark, with the field of butterflies released and the
   flight paths lit.

   Motion is applied with `translate`, not `transform`. Each background
   mark carries an inline `transform: rotate(...)` that positions it in
   the composition; animating transform would replace that rotation and
   scatter the layout. `translate` is its own property and composes with
   the inline rotate instead of overwriting it.
   =================================================================== */
@keyframes forumDriftA {
  0%, 100% { translate: 0 0; }
  50%      { translate: -14px -18px; }
}

@keyframes forumDriftB {
  0%, 100% { translate: 0 0; }
  50%      { translate: 16px -12px; }
}

@keyframes forumDriftC {
  0%, 100% { translate: 0 0; }
  50%      { translate: -10px 16px; }
}

/* The dot fields are a 9px repeating radial-gradient, so shifting the
   background by a whole number of tiles (10 across, 6 down) loops with no
   seam. This is what makes the halftone read as drifting rather than static
   texture while the headline is thinking. */
@keyframes forumDotCrawl {
  from { background-position: 0 0; }
  to   { background-position: 90px 54px; }
}

html:is([data-thinking-mode="high"], [data-thinking-mode="ultra"]) .hero > img[aria-hidden="true"]:nth-of-type(1) {
  animation: forumDriftA var(--dur-drift-1, 26s) var(--ease-ambient, ease-in-out) infinite !important;
}

html:is([data-thinking-mode="high"], [data-thinking-mode="ultra"]) .hero > img[aria-hidden="true"]:nth-of-type(2) {
  animation: forumDriftB var(--dur-drift-2, 34s) var(--ease-ambient, ease-in-out) infinite !important;
}

html:is([data-thinking-mode="high"], [data-thinking-mode="ultra"]) .hero > img[aria-hidden="true"]:nth-of-type(3) {
  animation: forumDriftC var(--dur-drift-3, 44s) var(--ease-ambient, ease-in-out) infinite !important;
}

html:is([data-thinking-mode="high"], [data-thinking-mode="ultra"]) .halftone,
html:is([data-thinking-mode="high"], [data-thinking-mode="ultra"]) .halftone-y {
  animation: forumDotCrawl 18s linear infinite !important;
}

/* -------------------------------------------------------------------
   ULTRA — the futuristic layer on top of night mode
   ------------------------------------------------------------------- */

/* Instrument-cyan dots, crawling faster than in High. */
html[data-thinking-mode="ultra"] .halftone,
html[data-thinking-mode="ultra"] .halftone-y {
  background-image: radial-gradient(circle, #58c7ff 0 1.4px, transparent 1.6px) !important;
  opacity: .5 !important;
  animation-duration: 11s !important;
}

/* The flight paths stop being hairlines and start reading as traces. */
html[data-thinking-mode="ultra"] .hero > svg path[stroke-dasharray] {
  stroke: #6fd0ff !important;
  filter: drop-shadow(0 0 6px rgba(88, 199, 255, .55)) !important;
  opacity: .8 !important;
}

html[data-thinking-mode="ultra"] .ultra-butterfly-field > img {
  filter: drop-shadow(0 0 14px rgba(88, 199, 255, .35)) !important;
  opacity: .5 !important;
}

/* A slow horizon sweep across the hero — the one element that is purely
   atmospheric. Pointer-events off and behind everything, so it cannot
   interfere with the content it passes under. */
html[data-thinking-mode="ultra"] .hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(
    100deg,
    transparent 34%,
    rgba(111, 208, 255, .07) 48%,
    rgba(111, 208, 255, .13) 52%,
    transparent 66%
  ) !important;
  background-size: 260% 100% !important;
  animation: forumHorizonSweep 14s linear infinite !important;
}

@keyframes forumHorizonSweep {
  from { background-position: 140% 0; }
  to   { background-position: -140% 0; }
}

@media (prefers-reduced-motion: reduce) {
  html .hero > img[aria-hidden="true"],
  html .halftone,
  html .halftone-y,
  html[data-thinking-mode="ultra"] .hero::after {
    animation: none !important;
  }
}

/* The thinking word takes its colour from the lexicon, one hue per word. Those
   hues are chosen against a light page — crimson on the night ground lands
   near 2.6:1. Lifting brightness keeps each word's identity while making all
   of them legible, which a single override colour would not. */
html[data-thinking-mode="ultra"] .thinking-word {
  filter: brightness(1.75) saturate(1.15) !important;
}

/* Ultra replaces only the illustration. Keep the static event wordmark
   lockup attached beneath it at every breakpoint, including the source
   mobile rules that hide generic .hero__art > div children. */
html[data-thinking-mode="ultra"] .hero__art > .hero__wordmark-lockup {
  display: block !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: clamp(14px, 2vw, 24px) auto 0 !important;
  text-align: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html[data-thinking-mode="ultra"] .hero__wordmark-lockup .hero__wordmark {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}