/* ==========================================================================
   ÌMỌ́LẸ̀ OSUN FOUNDATION — Design System
   --------------------------------------------------------------------------
   "Ìmọ́lẹ̀" is Yoruba for *light*. The entire visual language is built on it:
   a dawn breaking over indigo night. Colour, motion and hierarchy all serve
   that single metaphor.

   Palette roots:
     - Àdìrẹ indigo  — Osun's textile heritage, the deep ground
     - Ìmọ́lẹ̀ gold    — the light itself, reserved for meaning not decoration
     - Terracotta    — clay, earth, the human warmth of the work
     - Ewé green     — growth, livelihood, harvest

   Contents
     01. Tokens
     02. Reset & base
     03. Typography
     04. Layout primitives
     05. Buttons & links
     06. Header / navigation
     07. Hero
     08. Sections & components
     09. Cards
     10. Stats & counters
     11. Timeline
     12. Forms
     13. Footer
     14. Motion & utilities
     15. Print
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* --- Brand ramp: indigo (night) ---------------------------------------- */
  --indigo-950: #070B1A;
  --indigo-900: #0B1226;
  --indigo-850: #101936;
  --indigo-800: #16224A;
  --indigo-700: #1E2E63;
  --indigo-600: #2A3F82;
  --indigo-400: #5A70B8;
  --indigo-200: #B4C0E4;
  --indigo-100: #DCE3F6;

  /* --- Brand ramp: ìmọ́lẹ̀ gold (the light) -------------------------------- */
  --gold-700: #8A5A08;
  --gold-600: #B37A0C;
  --gold-500: #D99A14;
  --gold-400: #F0B429;
  --gold-300: #FFC94D;
  --gold-200: #FFDC8A;
  --gold-100: #FFEFC7;

  /* --- Accents ----------------------------------------------------------- */
  --clay-600: #A8431C;
  --clay-500: #C75A2B;
  --clay-400: #E0784A;
  --clay-100: #FBE3D6;

  /* Ewé green — taken from the Foundation's own emblem, the hands cupping
     the bulb. Promoted to a primary accent, not a tint. */
  --ewe-700: #1B6B33;
  --ewe-600: #2A8C41;
  --ewe-500: #3FA845;
  --ewe-400: #6FC85A;
  --ewe-100: #E2F6E0;

  /* Rose — from the aṣọ-òkè and gele of Osun's women. Celebration. */
  --rose-700: #9D1C55;
  --rose-600: #C42472;
  --rose-500: #E0459A;
  --rose-100: #FDE4F1;

  /* --- Neutrals: warm paper --------------------------------------------- */
  --paper-50: #FFFEFB;
  --paper-100: #FDFAF3;
  --paper-200: #F7F1E5;
  --paper-300: #EAE1D0;
  --paper-400: #D3C7B4;

  /* Muted greys are deliberately darker than a typical "secondary text" grey.
     On a warm cream ground a light grey reads as washed out long before it
     fails a contrast ratio, so these are tuned by eye AND by measurement:
     gray-600 on paper-100 is ~6.4:1, comfortably past the 4.5:1 minimum. */
  --gray-500: #6E6656;   /* 4.9:1 on paper-200 — the sunken surface, not just paper-100 */
  --gray-600: #5A5348;
  --gray-700: #443F36;

  /* --- Semantic (light theme is the default) ---------------------------- */
  --bg: var(--paper-100);
  --bg-raised: var(--paper-50);
  --bg-sunken: var(--paper-200);
  --bg-inverse: var(--indigo-900);

  --text: var(--indigo-950);
  --text-muted: var(--gray-600);
  --text-subtle: var(--gray-500);
  --text-inverse: var(--paper-100);
  --text-on-gold: var(--indigo-950);

  --accent: var(--gold-400);
  --accent-strong: var(--gold-600);
  --accent-text: var(--gold-700);   /* AA-safe gold for text on paper */
  --accent-soft: var(--gold-100);

  --border: var(--paper-300);
  --border-strong: var(--paper-400);

  --ring: var(--indigo-600);

  /* Surfaces that stay dark in BOTH themes (hero, footer, inverse bands) */
  --night: var(--indigo-950);
  --night-2: var(--indigo-900);
  --on-night: #EEF1FB;
  --on-night-muted: #A9B4D6;

  /* --- Elevation --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(11, 18, 38, .06), 0 1px 3px rgba(11, 18, 38, .05);
  --shadow-md: 0 4px 12px rgba(11, 18, 38, .07), 0 2px 4px rgba(11, 18, 38, .05);
  --shadow-lg: 0 18px 40px -12px rgba(11, 18, 38, .18), 0 4px 12px rgba(11, 18, 38, .06);
  --shadow-xl: 0 32px 64px -18px rgba(11, 18, 38, .26), 0 8px 20px rgba(11, 18, 38, .08);
  --shadow-gold: 0 12px 32px -10px rgba(240, 180, 41, .45);

  /* --- Radii ------------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-full: 999px;

  /* --- Type -------------------------------------------------------------- */
  /* Display face MUST correctly compose Yorùbá stacked diacritics — the tone
     mark and the sub-dot both sit on the same vowel (ẹ̀, ọ́). Tested in browser:
       WORKS  — Literata, Source Serif 4, Noto Serif, Lora, Playfair Display
       BREAKS — Fraunces (accents detach and float: "Ìmọlẹ`túmọ`sí")
     Do not swap this face without re-checking "Ìmọ́lẹ̀ túmọ̀ sí — ẹ̀kọ́ ọ̀nà".
     The fallback stack is ordered on the same criterion. */
  --font-display: "Literata", "Cambria", "Constantia", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* Fluid scale — 320px → 1440px viewport */
  --t-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);
  --t-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-md:   clamp(1.0625rem, 1.02rem + 0.23vw, 1.1875rem);
  --t-lg:   clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
  --t-xl:   clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --t-2xl:  clamp(1.875rem, 1.6rem + 1.35vw, 2.75rem);
  --t-3xl:  clamp(2.25rem, 1.8rem + 2.25vw, 3.75rem);
  --t-4xl:  clamp(2.75rem, 1.95rem + 4vw, 5.25rem);

  /* --- Spacing ----------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5rem;
  --s-11: 6.5rem;
  --s-12: 8rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --gutter: clamp(1.15rem, 0.6rem + 2.5vw, 2.5rem);
  --measure: 68ch;

  /* --- Widths ------------------------------------------------------------ */
  --w-content: 1200px;
  --w-narrow: 780px;
  --w-wide: 1440px;

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 620ms;

  --header-h: 74px;
  color-scheme: light;
}

/* --- Dark theme ---------------------------------------------------------- */
:root[data-theme="dark"] {
  --bg: var(--indigo-950);
  --bg-raised: var(--indigo-900);
  --bg-sunken: #050813;
  --bg-inverse: var(--paper-100);

  --text: #EEF1FB;
  --text-muted: #A9B4D6;
  --text-subtle: #7E8AB0;
  --text-inverse: var(--indigo-950);

  --accent: var(--gold-300);
  --accent-strong: var(--gold-200);
  --accent-text: var(--gold-300);
  --accent-soft: rgba(240, 180, 41, .14);

  --border: rgba(180, 192, 228, .16);
  --border-strong: rgba(180, 192, 228, .30);

  --ring: var(--gold-300);

  /* The deep "-700" tones are used as TEXT on tinted cards. Those cards go dark
     in this theme, so the tones must invert or they fail contrast — 1B6B33 on a
     dark card measures 2.8:1. These are the light-on-dark equivalents. */
  --ewe-700: #7BD265;
  --rose-700: #FF95C6;
  --clay-600: #FF9E70;
  --indigo-700: #AFC0F2;

  --night: #050813;
  --night-2: var(--indigo-900);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .5);
  --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, .7);
  --shadow-xl: 0 32px 64px -18px rgba(0, 0, 0, .8);
  --shadow-gold: 0 12px 40px -10px rgba(255, 201, 77, .3);

  color-scheme: dark;
}

/* NOTE: this site does NOT follow the operating system's dark preference.
   It is a bright, celebratory site and most Nigerian phones sit in dark mode,
   which would hand a first-time visitor the sombre version by default. Dark
   is available, but only when the visitor asks for it with the toggle.
   The block below is retained (disabled) so the behaviour is a visible
   decision rather than an omission. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="never-auto"] {
    --bg: var(--indigo-950);
    --bg-raised: var(--indigo-900);
    --bg-sunken: #050813;
    --bg-inverse: var(--paper-100);

    --text: #EEF1FB;
    --text-muted: #A9B4D6;
    --text-subtle: #7E8AB0;
    --text-inverse: var(--indigo-950);

    --accent: var(--gold-300);
    --accent-strong: var(--gold-200);
    --accent-text: var(--gold-300);
    --accent-soft: rgba(240, 180, 41, .14);

    --border: rgba(180, 192, 228, .16);
    --border-strong: rgba(180, 192, 228, .30);

    --ring: var(--gold-300);

    --night: #050813;
    --night-2: var(--indigo-900);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .5);
    --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, .7);
    --shadow-xl: 0 32px 64px -18px rgba(0, 0, 0, .8);
    --shadow-gold: 0 12px 40px -10px rgba(255, 201, 77, .3);

    color-scheme: dark;
  }
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

/* Subtle paper grain — grounds the whole page, costs ~0 bytes */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .028;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .05; }

::selection { background: var(--gold-200); color: var(--indigo-950); }

/* Focus — visible, branded, never removed */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-4);
  z-index: 10000;
  padding: var(--s-3) var(--s-5);
  background: var(--gold-400);
  color: var(--indigo-950);
  font-weight: 650;
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}
.skip-link:focus { top: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
  font-optical-sizing: auto;   /* Literata's opsz axis tracks the size */
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); line-height: 1.18; }
h4 { font-size: var(--t-lg); line-height: 1.25; }

p { text-wrap: pretty; }

a { color: inherit; }

.lead {
  font-size: var(--t-md);
  line-height: 1.68;
  color: var(--text-muted);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-7); }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: var(--s-2); }
.prose li::marker { color: var(--accent-text); }
.prose a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.prose a:hover { color: var(--text); }

/* Eyebrow — the small gold label above a heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 620;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--s-4);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  flex: none;
}
.on-night .eyebrow { color: var(--gold-300); }

/* Yoruba display accents */
.yoruba {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent-text);
}

/* Pull quote */
.quote {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: 1.38;
  letter-spacing: -0.02em;
  padding-left: var(--s-6);
  border-left: 3px solid var(--accent);
  text-wrap: balance;
}
.quote cite {
  display: block;
  margin-top: var(--s-4);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-style: normal;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-muted);
}

/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--w-narrow); }
.container--wide { max-width: var(--w-wide); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--sunken { background: var(--bg-sunken); }
.section--raised { background: var(--bg-raised); }

/* Dark band that stays dark in both themes */
.section--night {
  background: var(--night);
  color: var(--on-night);
  position: relative;
  overflow: hidden;
}
.section--night h1, .section--night h2, .section--night h3 { color: var(--on-night); }
.section--night p { color: var(--on-night-muted); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* Section header block */
.section-head {
  max-width: 62ch;
  margin-bottom: var(--s-8);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head h2 + .lead { margin-top: var(--s-4); }

/* Split header: title left, action right */
.section-head--split {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: flex-end;
  justify-content: space-between;
}
.section-head--split > div { max-width: 60ch; }

/* Àdìrẹ-inspired pattern, used as a texture on dark bands */
.adire-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(240,180,41,.16) 0 1.5px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(180,192,228,.10) 0 1px, transparent 1.5px);
  background-size: 44px 44px, 22px 22px;
  background-position: 0 0, 11px 11px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 78%);
}

/* Radial dawn glow */
.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  opacity: .5;
}
.glow--gold { background: radial-gradient(circle, rgba(240,180,41,.6), transparent 68%); }
.glow--clay { background: radial-gradient(circle, rgba(199,90,43,.42), transparent 68%); }
.glow--indigo { background: radial-gradient(circle, rgba(90,112,184,.42), transparent 68%); }

.divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin-block: var(--s-8);
}

/* ==========================================================================
   05. BUTTONS & LINKS
   ========================================================================== */

.btn {
  --btn-bg: var(--gold-400);
  --btn-fg: var(--indigo-950);
  --btn-bd: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.82em 1.6em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 640;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.btn:active { transform: translateY(0); }

.btn svg { flex: none; width: 1.1em; height: 1.1em; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
}
.btn--ghost:hover {
  --btn-bg: var(--text);
  --btn-fg: var(--bg);
  --btn-bd: var(--text);
  box-shadow: var(--shadow-lg);
}

.btn--on-night {
  --btn-bg: transparent;
  --btn-fg: var(--on-night);
  --btn-bd: rgba(238, 241, 251, .35);
}
.btn--on-night:hover {
  --btn-bg: var(--on-night);
  --btn-fg: var(--indigo-950);
  --btn-bd: var(--on-night);
}

.btn--lg { padding: 0.95em 1.9em; font-size: var(--t-base); }
.btn--sm { padding: 0.6em 1.15em; font-size: var(--t-xs); }

/* Animated arrow link */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 620;
  color: var(--accent-text);
  text-decoration: none;
  transition: gap var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.arrow-link::after {
  content: "→";
  transition: transform var(--dur) var(--ease-out);
}
.arrow-link:hover { gap: var(--s-3); }
.arrow-link:hover::after { transform: translateX(2px); }
.on-night .arrow-link { color: var(--gold-300); }

/* ==========================================================================
   06. HEADER / NAVIGATION
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              backdrop-filter var(--dur) var(--ease-out);
}
.header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--border);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.header.is-stuck,
.header.is-menu-open {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: var(--shadow-sm);
}
.header.is-stuck::after,
.header.is-menu-open::after { opacity: 1; }

/* --- Header over the hero -----------------------------------------------
   Every page opens with a dark surface (.hero or .page-head). While the
   header is still transparent it is therefore always sitting on dark — so
   in LIGHT mode its text would be dark-on-dark and effectively invisible.
   Force light-on-dark until the header gains its own background. */
.header:not(.is-stuck):not(.is-menu-open) .brand__name { color: #fff; }
.header:not(.is-stuck):not(.is-menu-open) .brand__sub  { color: rgba(169, 180, 214, .85); }

.header:not(.is-stuck):not(.is-menu-open) .nav__link { color: rgba(238, 241, 251, .80); }
.header:not(.is-stuck):not(.is-menu-open) .nav__link:hover,
.header:not(.is-stuck):not(.is-menu-open) .nav__link[aria-current="page"] { color: #fff; }

.header:not(.is-stuck):not(.is-menu-open) .icon-btn {
  color: rgba(238, 241, 251, .85);
  border-color: rgba(238, 241, 251, .30);
}
.header:not(.is-stuck):not(.is-menu-open) .icon-btn:hover {
  color: #fff;
  border-color: rgba(238, 241, 251, .55);
  background: rgba(238, 241, 251, .10);
}
.header:not(.is-stuck):not(.is-menu-open) .lang-btn__on { color: var(--gold-300); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
}

/* --- Wordmark ------------------------------------------------------------ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  flex: none;
}
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
}
.brand__sub {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* --- Nav ----------------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: var(--s-1); }

.nav__link {
  position: relative;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-sm);
  font-weight: 550;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--text); font-weight: 640; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }

/* --- Icon buttons (theme, language) -------------------------------------- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-width: 40px;
  height: 40px;
  padding: 0 var(--s-3);
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.icon-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-raised);
}
.icon-btn svg { width: 18px; height: 18px; }

.lang-btn {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.lang-btn__on { color: var(--accent-text); }
.lang-btn__sep { opacity: .4; margin-inline: 1px; }

/* Theme icon swap */
.theme-btn .icon-moon { display: none; }
:root[data-theme="dark"] .theme-btn .icon-sun { display: none; }
:root[data-theme="dark"] .theme-btn .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-btn .icon-moon { display: block; }
}

/* --- Mobile menu --------------------------------------------------------- */
.menu-btn { display: none; }

.menu-btn__bars { position: relative; width: 18px; height: 12px; }
.menu-btn__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.menu-btn__bars span:nth-child(1) { top: 0; }
.menu-btn__bars span:nth-child(2) { top: 5px; }
.menu-btn__bars span:nth-child(3) { top: 10px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-4) var(--gutter) var(--s-7);
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                visibility var(--dur);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav__link {
    padding: var(--s-4) var(--s-2);
    font-size: var(--t-md);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--accent-text); }

  .nav .btn { margin-top: var(--s-5); width: 100%; }
}

@media (max-width: 460px) {
  .brand__sub { display: none; }
  .brand__name { font-size: .95rem; }
}

/* ==========================================================================
   07. HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(94svh, 900px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + var(--s-8));
  padding-bottom: var(--s-10);
  background: var(--night);
  color: var(--on-night);
  overflow: hidden;
  isolation: isolate;
}

/* Layer 1 — the dawn gradient */
.hero__sky {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse 120% 80% at 50% 118%, rgba(240,180,41,.40) 0%, transparent 58%),
    radial-gradient(ellipse 90% 60% at 78% 108%, rgba(199,90,43,.34) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 18% 8%, rgba(42,63,130,.55) 0%, transparent 60%),
    linear-gradient(178deg, #050813 0%, #0B1226 46%, #16224A 100%);
}

/* Layer 2 — sun rays */
.hero__rays {
  position: absolute;
  left: 50%;
  bottom: -46vw;
  z-index: -2;
  width: 150vw;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 50%,
    transparent 0deg,
    rgba(240,180,41,.10) 6deg, transparent 12deg,
    transparent 22deg,
    rgba(240,180,41,.08) 28deg, transparent 34deg,
    transparent 46deg,
    rgba(240,180,41,.11) 52deg, transparent 58deg,
    transparent 302deg,
    rgba(240,180,41,.11) 308deg, transparent 314deg,
    transparent 326deg,
    rgba(240,180,41,.08) 332deg, transparent 338deg,
    transparent 348deg,
    rgba(240,180,41,.10) 354deg, transparent 360deg);
  mask-image: radial-gradient(circle at 50% 50%, #000 8%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 8%, transparent 62%);
  animation: rays-turn 90s linear infinite;
}
@keyframes rays-turn { to { transform: translateX(-50%) rotate(360deg); } }

/* Layer 3 — àdìrẹ texture */
.hero__adire {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .55;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(240,180,41,.20) 0 1.5px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(180,192,228,.13) 0 1px, transparent 1.5px);
  background-size: 48px 48px, 24px 24px;
  background-position: 0 0, 12px 12px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  width: 100%;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.42em 0.95em 0.42em 0.55em;
  background: rgba(240, 180, 41, .12);
  border: 1px solid rgba(240, 180, 41, .32);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--gold-200);
  margin-bottom: var(--s-5);
}
.hero__badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-300);
  box-shadow: 0 0 0 0 rgba(255, 201, 77, .7);
  animation: pulse-dot 2.6s var(--ease-out) infinite;
  flex: none;
  margin-left: 4px;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(255,201,77,.65); }
  70%  { box-shadow: 0 0 0 9px rgba(255,201,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,201,77,0); }
}

.hero__title {
  font-size: var(--t-4xl);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: var(--s-5);
}
.hero__title .lit {
  background: linear-gradient(103deg, var(--gold-200) 8%, var(--gold-400) 45%, var(--clay-400) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}

.hero__lead {
  font-size: var(--t-md);
  line-height: 1.62;
  color: var(--on-night-muted);
  max-width: 52ch;
  margin-bottom: var(--s-7);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-8); }

/* Hero mini-stats */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(238, 241, 251, .14);
}
.hero__stat-n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1;
  color: var(--gold-300);
  letter-spacing: -0.02em;
}
.hero__stat-l {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.35;
  color: var(--on-night-muted);
  max-width: 20ch;
}

/* --- Hero portrait panel ------------------------------------------------- */
.hero__figure {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(238,241,251,.10);
  aspect-ratio: 4 / 5;
  background: linear-gradient(165deg, var(--indigo-800), var(--indigo-950));
}
.hero__figure img,
.hero__figure svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__figure figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-7) var(--s-5) var(--s-5);
  background: linear-gradient(0deg, rgba(5,8,19,.94) 12%, rgba(5,8,19,.6) 55%, transparent);
  font-size: var(--t-sm);
  color: var(--on-night);
}
.hero__figure figcaption strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}
.hero__figure figcaption span { color: var(--on-night-muted); font-size: var(--t-xs); }

@media (max-width: 940px) {
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-8); }
  .hero__figure { max-width: 420px; aspect-ratio: 5 / 4; }
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--s-5);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(238, 241, 251, .45);
  text-decoration: none;
}
.scroll-cue__line {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, rgba(240,180,41,.75), transparent);
  animation: cue 2.4s var(--ease-in-out) infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .4; }
  50%      { transform: scaleY(1); transform-origin: top; opacity: 1; }
}
@media (max-width: 940px) { .scroll-cue { display: none; } }

/* ==========================================================================
   08. SECTIONS & COMPONENTS
   ========================================================================== */

/* --- Page banner (inner pages) ------------------------------------------- */
.page-head {
  position: relative;
  padding-top: calc(var(--header-h) + var(--s-9));
  padding-bottom: var(--s-9);
  background: var(--night);
  color: var(--on-night);
  overflow: hidden;
  isolation: isolate;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 100% 80% at 20% 112%, rgba(240,180,41,.28), transparent 60%),
    radial-gradient(ellipse 80% 70% at 88% -12%, rgba(42,63,130,.6), transparent 62%),
    linear-gradient(170deg, #050813, #101936);
}
.page-head__inner { position: relative; max-width: 60ch; }
.page-head h1 { color: #fff; margin-bottom: var(--s-4); }
.page-head p { color: var(--on-night-muted); font-size: var(--t-md); }

/* Breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--on-night-muted);
  margin-bottom: var(--s-5);
}
.crumbs a { color: inherit; text-decoration: none; transition: color var(--dur-fast); }
.crumbs a:hover { color: var(--gold-300); }
.crumbs span[aria-hidden] { opacity: .45; }
.crumbs [aria-current] { color: var(--gold-300); }

/* --- Feature row (alternating text/visual) ------------------------------- */
.feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.feature + .feature { margin-top: var(--section-y); }
.feature--flip .feature__visual { order: -1; }
@media (max-width: 760px) {
  .feature--flip .feature__visual { order: 0; }
}

.feature__visual {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg-sunken);
}

/* --- Badge / pill -------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.32em 0.8em;
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 620;
  letter-spacing: .02em;
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.pill--ewe { background: var(--ewe-100); color: var(--ewe-700); border-color: color-mix(in srgb, var(--ewe-600) 25%, transparent); }
.pill--clay { background: var(--clay-100); color: var(--clay-600); border-color: color-mix(in srgb, var(--clay-500) 25%, transparent); }
.pill--indigo { background: var(--indigo-100); color: var(--indigo-700); border-color: color-mix(in srgb, var(--indigo-600) 25%, transparent); }

:root[data-theme="dark"] .pill--ewe { background: rgba(87,165,124,.15); color: var(--ewe-400); }
:root[data-theme="dark"] .pill--clay { background: rgba(224,120,74,.15); color: var(--clay-400); }
:root[data-theme="dark"] .pill--indigo { background: rgba(90,112,184,.18); color: var(--indigo-200); }

/* --- Source citation chip (our credibility device) ----------------------- */
.cite-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 550;
  color: var(--text-subtle);
  text-decoration: none;
  border-bottom: 1px dotted var(--border-strong);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
.cite-chip::before {
  content: "";
  width: 11px; height: 11px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 15 20 4M20 4h-6M20 4v6'/%3E%3Cpath d='M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 15 20 4M20 4h-6M20 4v6'/%3E%3Cpath d='M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cite-chip:hover { color: var(--accent-text); }
.on-night .cite-chip { color: rgba(169,180,214,.8); border-bottom-color: rgba(169,180,214,.3); }
.on-night .cite-chip:hover { color: var(--gold-300); }

/* ==========================================================================
   09. CARDS
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

/* The gold hairline that lights up on hover */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-400), var(--clay-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card--link:hover::before { transform: scaleX(1); }

.card h3 { margin-bottom: var(--s-3); }
.card p { color: var(--text-muted); font-size: var(--t-sm); }
.card > * + * { margin-top: var(--s-3); }
.card__foot { margin-top: auto; padding-top: var(--s-5); }

/* Stretched link — makes the whole card clickable, keeps semantics */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- Pillar card (icon-led) ---------------------------------------------- */
.pillar__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--s-5);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-text);
  flex: none;
}
.pillar__icon svg { width: 26px; height: 26px; }
.pillar--ewe .pillar__icon { background: var(--ewe-100); color: var(--ewe-700); }
.pillar--clay .pillar__icon { background: var(--clay-100); color: var(--clay-600); }
.pillar--indigo .pillar__icon { background: var(--indigo-100); color: var(--indigo-700); }
:root[data-theme="dark"] .pillar--ewe .pillar__icon { background: rgba(87,165,124,.16); color: var(--ewe-400); }
:root[data-theme="dark"] .pillar--clay .pillar__icon { background: rgba(224,120,74,.16); color: var(--clay-400); }
:root[data-theme="dark"] .pillar--indigo .pillar__icon { background: rgba(90,112,184,.2); color: var(--indigo-200); }

.pillar__yoruba {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--text-subtle);
  margin-top: -0.35rem;
}

/* --- Programme card ------------------------------------------------------ */
.prog-card { padding: 0; }
.prog-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-sunken);
  overflow: hidden;
}
.prog-card__media img, .prog-card__media svg { width: 100%; height: 100%; object-fit: cover; }
.prog-card__body { padding: var(--s-5) var(--s-6) var(--s-6); display: flex; flex-direction: column; flex: 1; }
.prog-card__body > * + * { margin-top: var(--s-3); }
.prog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: var(--t-xs);
  color: var(--text-subtle);
  margin-top: auto;
  padding-top: var(--s-5);
}
.prog-card__meta span { display: inline-flex; align-items: center; gap: 5px; }

/* --- News item ----------------------------------------------------------- */
.news-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.news-item__date {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--text-subtle);
  white-space: nowrap;
  padding-top: 5px;
  min-width: 7.5ch;
}
.news-item h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.news-item h3 a { text-decoration: none; transition: color var(--dur-fast); }
.news-item h3 a:hover { color: var(--accent-text); }
.news-item p { font-size: var(--t-sm); color: var(--text-muted); }
@media (max-width: 620px) {
  .news-item { grid-template-columns: 1fr; gap: var(--s-2); }
  .news-item__date { padding-top: 0; }
}

/* ==========================================================================
   10. STATS & COUNTERS
   ========================================================================== */

.stat {
  position: relative;
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  text-align: left;
}
.section--night .stat {
  background: rgba(238, 241, 251, .045);
  border-color: rgba(238, 241, 251, .12);
  backdrop-filter: blur(6px);
}

.stat__value {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.section--night .stat__value { color: var(--gold-300); }

.stat__label {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  font-weight: 550;
  line-height: 1.4;
  color: var(--text);
}
.section--night .stat__label { color: var(--on-night); }

.stat__note {
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  color: var(--text-subtle);
  line-height: 1.45;
}
.section--night .stat__note { color: var(--on-night-muted); }

/* ==========================================================================
   11. TIMELINE
   ========================================================================== */

.timeline { position: relative; padding-left: var(--s-7); }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-400), var(--clay-400) 45%, var(--border) 100%);
}
.timeline__item { position: relative; padding-bottom: var(--s-7); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--s-7) * -1 + 1px);
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--gold-400);
  box-shadow: 0 0 0 4px var(--bg);
}
.timeline__date {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 550;
  letter-spacing: .04em;
  color: var(--accent-text);
  text-transform: uppercase;
}
.timeline__item h3 { font-size: var(--t-lg); margin: var(--s-2) 0 var(--s-2); }
.timeline__item p { font-size: var(--t-sm); color: var(--text-muted); max-width: 62ch; }
.timeline__item .cite-chip { margin-top: var(--s-3); }

/* ==========================================================================
   12. FORMS
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .01em;
}
.field .hint { font-size: var(--t-xs); color: var(--text-subtle); font-weight: 400; }

.input, .textarea, .select {
  width: 100%;
  padding: 0.78em 1em;
  background: var(--bg-raised);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--t-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.textarea { resize: vertical; min-height: 150px; line-height: 1.6; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6355' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 18px;
  padding-right: 2.75rem;
}
:root[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B4D6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-5); }
.form > * + * { margin-top: var(--s-5); }

.form-note {
  font-size: var(--t-xs);
  color: var(--text-subtle);
  line-height: 1.55;
}

.form-status {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  border: 1px solid;
}
.form-status[data-state="ok"] { background: var(--ewe-100); border-color: var(--ewe-400); color: var(--ewe-700); }
.form-status[data-state="err"] { background: var(--clay-100); border-color: var(--clay-400); color: var(--clay-600); }
:root[data-theme="dark"] .form-status[data-state="ok"] { background: rgba(87,165,124,.14); color: var(--ewe-400); }
:root[data-theme="dark"] .form-status[data-state="err"] { background: rgba(224,120,74,.14); color: var(--clay-400); }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.footer {
  position: relative;
  background: var(--night);
  color: var(--on-night);
  padding-top: var(--s-10);
  overflow: hidden;
  isolation: isolate;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 90% 60% at 12% -8%, rgba(240,180,41,.15), transparent 58%),
    radial-gradient(ellipse 70% 60% at 92% 8%, rgba(42,63,130,.42), transparent 60%);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-7) var(--s-6);
  padding-bottom: var(--s-9);
}
@media (max-width: 860px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

.footer__brand p {
  color: var(--on-night-muted);
  font-size: var(--t-sm);
  max-width: 42ch;
  margin-top: var(--s-4);
}
.footer .brand__name { color: #fff; }
.footer .brand__sub { color: rgba(169,180,214,.75); }

/* Column headings are <h3>, not <h4>: document heading order must not skip a
   level or screen-reader navigation breaks. Styled small regardless. */
.footer h3 {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 680;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: var(--s-4);
}

.footer__links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.footer__links a {
  font-size: var(--t-sm);
  color: var(--on-night-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__links a:hover { color: #fff; }

.socials { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.socials a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(238,241,251,.2);
  color: var(--on-night-muted);
  transition: all var(--dur-fast) var(--ease-out);
}
.socials a:hover {
  color: var(--indigo-950);
  background: var(--gold-300);
  border-color: var(--gold-300);
  transform: translateY(-2px);
}
.socials svg { width: 18px; height: 18px; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s-5);
  border-top: 1px solid rgba(238,241,251,.13);
  font-size: var(--t-xs);
  color: rgba(169,180,214,.85);
}
.footer__bar a { color: inherit; text-decoration: none; }
.footer__bar a:hover { color: #fff; text-decoration: underline; }
.footer__bar nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ==========================================================================
   07b. DAWN HERO — the bright variant
   --------------------------------------------------------------------------
   The night hero is kept for inner pages. The home page opens in daylight:
   cream, gold and green, with her photograph carrying the warmth. This is a
   celebratory organisation and the front door should feel like one.
   ========================================================================== */

/* Theme-aware from the ground up. In light mode this is a cream-and-gold
   sunrise; in dark mode it becomes a warm night with the same gold breaking
   through. Both are driven by tokens, so text never lands on a surface of the
   wrong polarity — the failure that makes a "light hero" unreadable the moment
   somebody switches theme. */
.hero--dawn {
  --dawn-base:   #FFFDF7;
  --dawn-mid:    var(--paper-100);
  --dawn-edge:   #FBF3E4;
  --dawn-gold:   rgba(255, 201, 77, .55);
  --dawn-green:  rgba(63, 168, 69, .28);
  --dawn-rose:   rgba(224, 69, 154, .20);

  background: var(--dawn-mid);
  color: var(--text);
}
:root[data-theme="dark"] .hero--dawn {
  --dawn-base:  #0D1226;
  --dawn-mid:   var(--indigo-950);
  --dawn-edge:  #1A1408;
  --dawn-gold:  rgba(255, 201, 77, .30);
  --dawn-green: rgba(63, 168, 69, .20);
  --dawn-rose:  rgba(224, 69, 154, .16);
}
.hero--dawn .hero__sky {
  background:
    radial-gradient(ellipse 90% 70% at 82% 10%, var(--dawn-gold) 0%, transparent 58%),
    radial-gradient(ellipse 70% 60% at 12% 92%, var(--dawn-green) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 96% 88%, var(--dawn-rose) 0%, transparent 62%),
    linear-gradient(168deg, var(--dawn-base) 0%, var(--dawn-mid) 55%, var(--dawn-edge) 100%);
}
.hero--dawn .hero__rays {
  background: conic-gradient(from 180deg at 50% 50%,
    transparent 0deg,
    rgba(214, 148, 12, .07) 6deg, transparent 12deg,
    transparent 26deg,
    rgba(214, 148, 12, .05) 32deg, transparent 38deg,
    transparent 316deg,
    rgba(214, 148, 12, .05) 322deg, transparent 328deg,
    transparent 348deg,
    rgba(214, 148, 12, .07) 354deg, transparent 360deg);
}
.hero--dawn .hero__adire {
  opacity: .5;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(214, 148, 12, .24) 0 1.5px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(42, 140, 65, .16) 0 1px, transparent 1.5px);
}
.hero--dawn .hero__title { color: var(--text); }
.hero--dawn .hero__title .lit {
  background: linear-gradient(102deg, var(--ewe-600) 4%, var(--gold-600) 48%, var(--rose-600) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The hero lead sits over the brightest part of the gold wash, where ordinary
   muted grey washes out. It gets its own, stronger colour. */
.hero--dawn { --dawn-lead: var(--gray-700); }
:root[data-theme="dark"] .hero--dawn { --dawn-lead: #C8D0E8; }
.hero--dawn .hero__lead { color: var(--dawn-lead); }
.hero--dawn .hero__badge {
  background: var(--bg-raised);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm);
}
.hero--dawn .hero__stats { border-top-color: var(--border-strong); }
.hero--dawn .hero__stat-n { color: var(--ewe-700); }
.hero--dawn .hero__stat-l { color: var(--dawn-lead); }
:root[data-theme="dark"] .hero--dawn .hero__stat-n { color: var(--ewe-400); }

/* The figure caption sits on its own dark scrim over the photograph, so it
   keeps light text in BOTH themes. */
.hero--dawn .hero__figure figcaption { color: #fff; }
.hero--dawn .hero__figure figcaption span { color: rgba(238, 241, 251, .82); }

.hero--dawn .btn--on-night {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
}
.hero--dawn .btn--on-night:hover {
  --btn-bg: var(--text);
  --btn-fg: var(--bg);
  --btn-bd: var(--text);
}
.hero--dawn .scroll-cue { color: var(--text-subtle); }
.hero--dawn .scroll-cue__line { background: linear-gradient(180deg, var(--gold-500), transparent); }

/* When the header sits over the DAWN hero it must match the hero's polarity,
   which now flips with the theme — so these all resolve through tokens rather
   than hard-coded ink. Getting this wrong renders the wordmark at 1:1 contrast
   in dark mode, i.e. completely invisible. */
.header.over-dawn:not(.is-stuck):not(.is-menu-open) .brand__name { color: var(--text); }
.header.over-dawn:not(.is-stuck):not(.is-menu-open) .brand__sub  { color: var(--text-subtle); }
.header.over-dawn:not(.is-stuck):not(.is-menu-open) .nav__link   { color: var(--text-muted); }
.header.over-dawn:not(.is-stuck):not(.is-menu-open) .nav__link:hover,
.header.over-dawn:not(.is-stuck):not(.is-menu-open) .nav__link[aria-current="page"] { color: var(--text); }
.header.over-dawn:not(.is-stuck):not(.is-menu-open) .icon-btn {
  color: var(--text-muted);
  border-color: var(--border-strong);
}
.header.over-dawn:not(.is-stuck):not(.is-menu-open) .icon-btn:hover {
  color: var(--text);
  background: var(--bg-raised);
}
.header.over-dawn:not(.is-stuck):not(.is-menu-open) .lang-btn__on { color: var(--accent-text); }

/* ==========================================================================
   13c. GALLERY STRIP
   ========================================================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--s-4);
}
.gallery .photo { aspect-ratio: 4 / 3; box-shadow: var(--shadow-md); }
.gallery .photo:nth-child(3n+1) { border-top: 4px solid var(--ewe-500); }
.gallery .photo:nth-child(3n+2) { border-top: 4px solid var(--gold-400); }
.gallery .photo:nth-child(3n+3) { border-top: 4px solid var(--rose-500); }

/* Colour-banded pillar cards, for a brighter feel than plain white */
.card--ewe  { background: linear-gradient(160deg, var(--ewe-100),  var(--bg-raised) 62%); }
.card--gold { background: linear-gradient(160deg, var(--gold-100), var(--bg-raised) 62%); }
.card--rose { background: linear-gradient(160deg, var(--rose-100), var(--bg-raised) 62%); }
.card--sky  { background: linear-gradient(160deg, var(--indigo-100), var(--bg-raised) 62%); }
:root[data-theme="dark"] .card--ewe,
:root[data-theme="dark"] .card--gold,
:root[data-theme="dark"] .card--rose,
:root[data-theme="dark"] .card--sky { background: var(--bg-raised); }

.pillar--rose .pillar__icon { background: var(--rose-100); color: var(--rose-700); }
:root[data-theme="dark"] .pillar--rose .pillar__icon { background: rgba(224,69,154,.16); color: var(--rose-500); }

/* ==========================================================================
   13b. VISUAL BLOCKS
   --------------------------------------------------------------------------
   This site is read on a phone, quickly, by people who will not wade through
   paragraphs. These components carry meaning visually: big numbers, photos,
   numbered steps, and side-by-side contrast.
   ========================================================================== */

/* --- Huge number ---------------------------------------------------------- */
.bignum {
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.8rem + 5.5vw, 6.5rem);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -0.045em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  display: block;
}
.section--night .bignum,
.on-night .bignum { color: var(--gold-300); }

.bignum-label {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--t-md);
  font-weight: 550;
  line-height: 1.3;
  max-width: 24ch;
}
.bignum-note {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--text-muted);
  max-width: 30ch;
}
.on-night .bignum-note { color: var(--on-night-muted); }

/* --- Photo block ---------------------------------------------------------- */
.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--indigo-800), var(--indigo-950));
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--tall { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 16 / 9; }
.photo--square { aspect-ratio: 1; }

.photo figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-8) var(--s-5) var(--s-4);
  background: linear-gradient(0deg, rgba(5,8,19,.92) 15%, transparent);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 500;
}
.photo figcaption span { display: block; color: var(--on-night-muted); font-size: var(--t-xs); margin-top: 2px; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--s-4);
}

/* --- Numbered steps ------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s-5); }
.step {
  position: relative;
  counter-increment: step;
  padding: var(--s-6) var(--s-6) var(--s-6) calc(var(--s-9) + var(--s-2));
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.step::before {
  content: counter(step);
  position: absolute;
  left: var(--s-5);
  top: var(--s-6);
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--indigo-950);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1;
}
.step h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.step p { color: var(--text-muted); font-size: var(--t-sm); }
.section--night .step {
  background: rgba(238,241,251,.05);
  border-color: rgba(238,241,251,.13);
}
.section--night .step p { color: var(--on-night-muted); }

/* --- Side-by-side contrast ------------------------------------------------ */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-5); }
.compare__side {
  padding: var(--s-6);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--border);
  background: var(--bg-raised);
}
.compare__side--them { opacity: .82; }
.compare__side--us {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow-md);
}
.compare__tag {
  display: block;
  font-size: var(--t-xs);
  font-weight: 680;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
  color: var(--text-subtle);
}
.compare__side--us .compare__tag { color: var(--accent-text); }
.compare__side h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.compare__side p { font-size: var(--t-sm); color: var(--text-muted); }

/* --- Partner logo row ----------------------------------------------------- */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5) var(--s-7);
}
.logo-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--bg-raised);
  font-size: var(--t-sm);
  font-weight: 600;
}
.on-night .logo-chip {
  background: rgba(238,241,251,.06);
  border-color: rgba(238,241,251,.16);
  color: var(--on-night);
}
.logo-chip small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--text-subtle); }
.on-night .logo-chip small { color: var(--on-night-muted); }

/* --- Curriculum / skill tags --------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tag {
  padding: .45em 1em;
  border-radius: var(--r-full);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  font-size: var(--t-sm);
  font-weight: 550;
}
.on-night .tag {
  background: rgba(238,241,251,.07);
  border-color: rgba(238,241,251,.16);
  color: var(--on-night);
}

/* --- Kit list (what each woman received) --------------------------------- */
.kit { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.kit li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-sm);
  font-weight: 500;
}
.kit li::before {
  content: "";
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat, linear-gradient(#000,#000);
  mask-composite: exclude;
}

/* --- Cohort ribbon -------------------------------------------------------- */
.cohorts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--s-4); }
.cohort {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  text-align: center;
}
.cohort--now { border-color: var(--accent); background: var(--accent-soft); }
.cohort__year { font-size: var(--t-xs); font-weight: 680; letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }
.cohort--now .cohort__year { color: var(--accent-text); }
.cohort__n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: var(--s-2) 0 2px;
}
.cohort__l { font-size: var(--t-xs); color: var(--text-muted); }

/* ==========================================================================
   14. MOTION & UTILITIES
   ========================================================================== */

/* Scroll-reveal. JS adds .is-in; without JS everything is visible (see below) */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Progressive enhancement guard: if JS never runs, nothing stays hidden */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

/* Utilities */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0 !important; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.small { font-size: var(--t-sm); }
.xsmall { font-size: var(--t-xs); }
.nowrap { white-space: nowrap; }
.full { width: 100%; }

.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Tables (used on the transparency page) */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 640px; }
thead th {
  text-align: left;
  padding: var(--s-4) var(--s-5);
  background: var(--bg-sunken);
  font-size: var(--t-xs);
  font-weight: 680;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
tbody tr:hover { background: var(--bg-sunken); }

/* Honour reduced-motion, comprehensively */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__rays { animation: none; }
  .btn:hover, .card--link:hover, .socials a:hover { transform: none; }
}

/* ==========================================================================
   15. PRINT
   ========================================================================== */

@media print {
  .header, .footer, .scroll-cue, .skip-link, .btn, .adire-field, .glow { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  body::before { display: none; }
  .hero, .page-head, .section--night { background: #fff !important; color: #000 !important; }
  .hero__title, .page-head h1 { color: #000 !important; }
  .hero__sky, .hero__rays, .hero__adire { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .section { padding-block: 1.5rem; }
  .card { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
}