/* ==========================================================================
   ugasfuad.com — Office of the Ugaas
   One stylesheet, system fonts only, no network requests. The audience is
   often on a slow mobile connection, so weight matters more than flourish.
   ========================================================================== */

/* --- tokens -------------------------------------------------------------- */

/*
 * Two themes, one set of values.
 *
 * Dark mode is reachable two ways — the system preference, and the toggle
 * writing data-theme="dark" — so the palette has to appear in two selectors.
 * The values themselves are declared once here as --dark-*, and both blocks
 * only alias them, so the two can no longer drift apart.
 *
 * Colour choices are not free-hand: `npm run check` asserts every pairing in
 * scripts/lib/contrast.mjs against WCAG AA in both themes. Change a hex and
 * the build tells you what it broke.
 */
:root {
  color-scheme: light;

  --bg: #faf8f2;
  --bg-tint: #f1ede2;
  --surface: #ffffff;
  --surface-2: #fbf9f4;
  --ink: #191c16;
  --ink-soft: #4e5449;
  --ink-faint: #676c62;
  --line: #e2dccb;
  --line-strong: #cfc7b2;
  /* Borders that outline a control, where WCAG 1.4.11 wants 3:1. Plain
     --line-strong stays soft for dividers and other decoration. */
  --line-control: #8d8779;

  --brand: #0f4c36;
  --brand-deep: #0a3527;
  --brand-bright: #167854;
  --brand-soft: #e5efe8;
  --on-brand: #f4f9f5;
  /* --brand-deep is dark in BOTH themes, so text on it must be light in both.
     --on-brand cannot do that job: it flips to near-black in dark mode so it
     can sit on the light-green --brand. Keeping them separate is what stopped
     the call-to-action bands rendering dark-on-dark. */
  --on-brand-deep: #f4f9f5;

  --accent: #8d6324;
  --accent-soft: #f7ecd9;

  --ok: #1c6b45;
  --ok-soft: #e2f0e7;
  --warn: #8a5b12;
  --warn-soft: #f8eddb;
  --info: #2a5678;
  --info-soft: #e5eef5;

  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgb(25 28 22 / 6%), 0 8px 24px -12px rgb(25 28 22 / 16%);
  --shadow-lg: 0 2px 4px rgb(25 28 22 / 6%), 0 24px 48px -24px rgb(25 28 22 / 26%);

  --wrap: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --section-y: clamp(3.2rem, 7vw, 5.75rem);
  /* The width at which the full nav bar fits and the mobile menu retires.
     Mirrors the @media further down; app.js reads this one. */
  --nav-breakpoint: 79rem;

  /* Dark palette. Declared here, applied by the two blocks below. */
  --dark-bg: #101210;
  --dark-bg-tint: #171a16;
  --dark-surface: #1a1e19;
  --dark-surface-2: #1e221c;
  --dark-ink: #ecebe2;
  --dark-ink-soft: #a7ac9e;
  --dark-ink-faint: #80867a;
  --dark-line: #2b302a;
  --dark-line-strong: #3b423a;
  --dark-line-control: #646a63;

  --dark-brand: #6fc79a;
  --dark-brand-deep: #0e3327;
  --dark-brand-bright: #8bdcb2;
  --dark-brand-soft: #17291f;
  --dark-on-brand: #08150f;

  --dark-accent: #dda75b;
  --dark-accent-soft: #2a2117;

  --dark-ok: #7fd3a5;
  --dark-ok-soft: #17291f;
  --dark-warn: #d8a860;
  --dark-warn-soft: #2a2217;
  --dark-info: #86b6d8;
  --dark-info-soft: #17232c;

  --dark-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 60%);
  --dark-shadow-lg: 0 2px 4px rgb(0 0 0 / 40%), 0 24px 48px -24px rgb(0 0 0 / 70%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: var(--dark-bg);
    --bg-tint: var(--dark-bg-tint);
    --surface: var(--dark-surface);
    --surface-2: var(--dark-surface-2);
    --ink: var(--dark-ink);
    --ink-soft: var(--dark-ink-soft);
    --ink-faint: var(--dark-ink-faint);
    --line: var(--dark-line);
    --line-strong: var(--dark-line-strong);
    --line-control: var(--dark-line-control);

    --brand: var(--dark-brand);
    --brand-deep: var(--dark-brand-deep);
    --brand-bright: var(--dark-brand-bright);
    --brand-soft: var(--dark-brand-soft);
    --on-brand: var(--dark-on-brand);

    --accent: var(--dark-accent);
    --accent-soft: var(--dark-accent-soft);

    --ok: var(--dark-ok);
    --ok-soft: var(--dark-ok-soft);
    --warn: var(--dark-warn);
    --warn-soft: var(--dark-warn-soft);
    --info: var(--dark-info);
    --info-soft: var(--dark-info-soft);

    --shadow: var(--dark-shadow);
    --shadow-lg: var(--dark-shadow-lg);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--dark-bg);
  --bg-tint: var(--dark-bg-tint);
  --surface: var(--dark-surface);
  --surface-2: var(--dark-surface-2);
  --ink: var(--dark-ink);
  --ink-soft: var(--dark-ink-soft);
  --ink-faint: var(--dark-ink-faint);
  --line: var(--dark-line);
  --line-strong: var(--dark-line-strong);
  --line-control: var(--dark-line-control);

  --brand: var(--dark-brand);
  --brand-deep: var(--dark-brand-deep);
  --brand-bright: var(--dark-brand-bright);
  --brand-soft: var(--dark-brand-soft);
  --on-brand: var(--dark-on-brand);

  --accent: var(--dark-accent);
  --accent-soft: var(--dark-accent-soft);

  --ok: var(--dark-ok);
  --ok-soft: var(--dark-ok-soft);
  --warn: var(--dark-warn);
  --warn-soft: var(--dark-warn-soft);
  --info: var(--dark-info);
  --info-soft: var(--dark-info-soft);

  --shadow: var(--dark-shadow);
  --shadow-lg: var(--dark-shadow-lg);
}

/* --- reset --------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
}
h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
}
h3 {
  font-size: 1.16rem;
  letter-spacing: -0.004em;
}

p {
  text-wrap: pretty;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--brand-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Browsers without :focus-visible would otherwise get the UA outline only, and
   the skip link below would never become visible at all for them. */
:focus {
  outline-color: var(--brand-bright);
}

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

/* --- utilities ----------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.narrow {
  max-width: 46rem;
}

.muted {
  color: var(--ink-faint);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--brand);
  color: var(--on-brand);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translate(-50%, 0);
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

.icon--sm {
  width: 1.05rem;
  height: 1.05rem;
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.display {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  line-height: 1.28;
}

.prose p + p {
  margin-top: 1rem;
}

.prose {
  color: var(--ink-soft);
}

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.78rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  transition: background-color 0.18s, border-color 0.18s, transform 0.18s, color 0.18s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--brand);
  color: var(--on-brand);
}

.btn--primary:hover {
  background: var(--brand-bright);
}

.btn--ghost {
  border-color: var(--line-control);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}

.btn--light {
  background: var(--on-brand-deep);
  color: var(--brand-deep);
}

.btn--light:hover {
  background: #fff;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}

.link-arrow:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Opaque fallback first: older Android browsers drop the color-mix line and
     must still get a solid header, not a transparent one over the content. */
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.4rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: none;
  text-decoration: none;
  margin-inline-end: auto;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  flex: none;
}

.brand__leaf {
  width: 1.3rem;
  height: 1.3rem;
}

.brand__text {
  display: grid;
  line-height: 1.2;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  white-space: nowrap;
}

.brand__office {
  font-size: 0.73rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-nav__list a {
  display: block;
  /* 0.55rem, not 0.7rem: with nine Somali labels the bar needs every pixel to
     still fit a 1280px laptop. See the measured note at the breakpoint below. */
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.16s, color 0.16s;
}

.site-nav__list a:hover {
  background: var(--bg-tint);
  color: var(--ink);
}

.site-nav__list a.is-current {
  color: var(--brand);
  background: var(--brand-soft);
}

.site-header__tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.lang-switch {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line-control);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-soft);
  white-space: nowrap;
}

.lang-switch:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid var(--line-control);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
}

.icon-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.icon--moon,
[data-theme="dark"] .icon--sun {
  display: none;
}

[data-theme="dark"] .icon--moon {
  display: block;
}

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

.menu-btn .icon--close {
  display: none;
}

.menu-btn[aria-expanded="true"] .icon--open {
  display: none;
}

.menu-btn[aria-expanded="true"] .icon--close {
  display: block;
}

.mobile-menu {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: 0.6rem 1.1rem;
}

.mobile-menu__list a {
  display: block;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-weight: 500;
  color: var(--ink-soft);
}

.mobile-menu__list li:last-child a {
  border-bottom: 0;
}

.mobile-menu__list a.is-current {
  color: var(--brand);
  font-weight: 650;
}

.mobile-menu__tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 1rem;
  margin-top: 0.4rem;
  border-top: 1px solid var(--line);
}

/* Language and theme controls only sit in the top bar once the full nav does.
   Below that they live in the mobile menu, leaving room for brand + donate. */
.site-header__wide-only {
  display: none;
}

/* Measured, not guessed. With the Muuqaallo page added there are nine Somali
   labels plus the Deeq button, and the bar needs 1249px:

     brand 153 + nav 773 + tools 211 + padding 80 + gaps 32

   79rem is 1264px — the first whole rem that clears it, and still narrow enough
   that a 1280px laptop keeps the full bar rather than dropping to the menu.
   Re-measure with scripts/measure-nav (see README) before changing this or
   adding a tenth label; below it the header clips.

   A media query cannot read a custom property, so the number is written out
   here and mirrored by --nav-breakpoint in :root, which is what app.js reads to
   close the mobile menu at the same width. `npm run check` asserts the two
   still agree. */
@media (min-width: 79rem) {
  .site-nav {
    display: block;
  }
  .site-header__wide-only {
    display: revert;
  }
  .icon-btn.site-header__wide-only {
    display: grid;
  }
  .menu-btn,
  .mobile-menu {
    display: none !important;
  }
}

/* --- hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  background:
    radial-gradient(120% 90% at 82% 0%, var(--brand-soft) 0%, transparent 58%),
    linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 72%);
  border-bottom: 1px solid var(--line);
}

.hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  margin-bottom: 1.1rem;
}

.hero__lead {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--ink-soft);
  max-width: 36em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.9rem;
}

.hero__figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hero__photo {
  width: 100%;
  height: auto;
  /* Match the placeholder it replaces, so the page does not re-flow the day a
     portrait is added. A tall portrait is cropped rather than allowed to push
     the stats row off the first screen. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.hero__placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  aspect-ratio: 4 / 5;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      color-mix(in srgb, var(--brand) 5%, transparent) 14px 28px
    ),
    var(--surface-2);
  color: var(--ink-faint);
  font-size: 0.86rem;
  text-align: center;
  padding: 1.5rem;
}

.hero__leaf {
  width: 2.6rem;
  height: 2.6rem;
  color: var(--brand);
  opacity: 0.55;
}

@media (min-width: 56rem) {
  .hero__inner {
    grid-template-columns: 1.35fr 1fr;
  }
}

/* --- stats --------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.stats__item {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.3rem;
  padding: 1.25rem 1.3rem;
  background: var(--surface);
}

.stats__item dd {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 600;
  color: var(--brand);
  line-height: 1.1;
}

.stats__item dt {
  font-size: 0.82rem;
  color: var(--ink-faint);
  line-height: 1.4;
}

/* --- sections ------------------------------------------------------------ */

.section {
  padding-block: var(--section-y);
}

.section--tint {
  background: var(--bg-tint);
  border-block: 1px solid var(--line);
}

.section--mission {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.section-head__lead {
  margin-top: 0.75rem;
  color: var(--ink-soft);
  max-width: 52ch;
}

.grid-2 {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
}

@media (min-width: 54rem) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.grid-cards {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}

.grid-cards--4 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

/* --- cards --------------------------------------------------------------- */

.pillar-card,
.feature-card,
.value-card,
.place-card,
.project-card,
.news-card,
.step-card,
.audience,
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
}

.pillar-card {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.pillar-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.pillar-card__icon,
.feature-card__icon,
.contact-card__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand);
  margin-bottom: 0.35rem;
}

.pillar-card p,
.feature-card p,
.value-card p,
.place-card p,
.audience p,
.step-card p {
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.value-card {
  display: grid;
  align-content: start;
  gap: 0.45rem;
}

.value-card__icon {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  margin-bottom: 0.3rem;
}

.feature-card {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

/* --- projects ------------------------------------------------------------ */

.callout {
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--ink-soft);
  font-size: 0.94rem;
  margin-bottom: 1.75rem;
}

/* The filter bar only does anything once app.js has bound it, so it stays out
   of the page until the inline head script marks the document as scripted.
   Without this it renders as a full set of live-looking buttons that silently
   do nothing — the whole register is listed below it either way. */
.filters {
  display: none;
}

.js .filters {
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 1.5rem;
}

.filters__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.filters__label {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  min-width: 5.5rem;
}

.filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip {
  padding: 0.34rem 0.8rem;
  border: 1px solid var(--line-control);
  border-radius: 999px;
  background: transparent;
  font-size: 0.85rem;
  color: var(--ink-soft);
  transition: background-color 0.16s, border-color 0.16s, color 0.16s;
}

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

.chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.filters__empty {
  margin-bottom: 1.5rem;
  color: var(--ink-faint);
}

/* Flex column rather than grid, so `margin-top: auto` on the meta block pins it
   to the bottom and the meta rows line up across a row of cards. */
.project-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.project-card[hidden] {
  display: none;
}

.project-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.project-card__pillar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand);
}

.status {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.status--proposed {
  background: var(--info-soft);
  color: var(--info);
}
.status--funding {
  background: var(--warn-soft);
  color: var(--warn);
}
.status--active {
  background: var(--brand-soft);
  color: var(--brand);
}
.status--delivered {
  background: var(--ok-soft);
  color: var(--ok);
}

.project-card__summary {
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.project-card__detail summary {
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--brand);
  padding: 0.3rem 0;
}

.project-card__detail ul {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding-inline-start: 1.1rem;
  list-style: disc;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.project-card__meta {
  display: grid;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}

.project-card__meta dt {
  color: var(--ink-faint);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-card__meta dd {
  color: var(--ink);
}

/* --- pillars (agenda page) ----------------------------------------------- */

/* A slim band, used for the pillar jump-links. A plain class rather than
   `:has()`, which older mobile browsers do not support. */
.section--slim {
  padding-block: 1.6rem;
}

.pillar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pillar-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--line-control);
  border-radius: 999px;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}

.pillar-nav a:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}

.pillar-section__head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.pillar-section__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--line-strong);
  line-height: 1.2;
}

.pillar-section__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand);
  flex: none;
}

.pillar-section__tagline {
  margin-top: 0.4rem;
  color: var(--accent);
  font-weight: 500;
}

.pillar-section__body {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 54rem) {
  .pillar-section__body {
    grid-template-columns: 1fr 1.25fr;
  }
  .pillar-block--measure {
    grid-column: 1 / -1;
  }
}

.pillar-block h3 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}

.pillar-block p {
  color: var(--ink-soft);
}

.pillar-block--measure {
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}

.ticks {
  display: grid;
  gap: 0.6rem;
}

.ticks li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--ink-soft);
}

.ticks li .icon {
  color: var(--ok);
  margin-top: 0.32rem;
}

.ticks--lg li {
  font-size: 1rem;
}

/* --- leadership ---------------------------------------------------------- */

.lineage {
  display: grid;
  gap: 0;
  border-inline-start: 2px solid var(--line-strong);
  padding-inline-start: 1.4rem;
}

.lineage__item {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding-block: 0.85rem;
}

.lineage__dot {
  position: absolute;
  inset-inline-start: -1.83rem;
  top: 1.25rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--line-strong);
  border: 2px solid var(--bg);
}

.lineage__item.is-current .lineage__dot {
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}

.lineage__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

.lineage__item.is-current .lineage__name {
  color: var(--brand);
}

.lineage__note {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.council {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.council__seat {
  display: grid;
  gap: 0.35rem;
  padding: 1.25rem;
  background: var(--surface);
}

.council__seat--lead {
  background: var(--brand-soft);
}

.council__seat--lead h3 {
  color: var(--brand);
}

.council__seat p {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* --- community ----------------------------------------------------------- */

/* The schematic needs ~34rem to stay legible. On phones it would become a
   sideways scroll for no gain, so it is hidden — the district cards directly
   below carry exactly the same information. */
.diagram {
  display: none;
  margin-bottom: 1.75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow-x: auto;
}

@media (min-width: 44rem) {
  .diagram {
    display: block;
  }
}

.diagram svg {
  width: 100%;
  min-width: 34rem;
  height: auto;
}

.diagram__seat rect {
  fill: var(--brand-soft);
  stroke: var(--brand);
  stroke-width: 1.5;
}

.diagram__seat-label {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  fill: var(--brand);
}

.diagram__seat-sub {
  font-family: var(--font-body);
  font-size: 12px;
  fill: var(--ink-faint);
}

.diagram__link {
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}

.diagram__dot {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 3;
}

.diagram__label {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  fill: var(--ink);
}

.diagram__sub {
  font-family: var(--font-body);
  font-size: 12px;
  fill: var(--ink-faint);
}

.diagram figcaption {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
  text-align: center;
}

/* The "projects serve everyone" statement. Given visual weight on purpose —
   it is the first thing a neighbouring community or a funder should read. */
.inclusion {
  padding: 1.4rem 1.6rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  border: 1px solid var(--brand);
  border-inline-start: 5px solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand-soft);
}

.inclusion h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 0.5rem;
}

.inclusion p {
  color: var(--ink-soft);
  max-width: 68ch;
}

.place-card {
  display: grid;
  align-content: start;
  gap: 0.3rem;
}

/* The seat sits on its own above the districts — it is the base of the Office,
   not one of the four places the community lives. */
.place-card--seat {
  border-color: var(--brand);
  background: var(--brand-soft);
  margin-bottom: 1.1rem;
}

@media (min-width: 44rem) {
  .place-card--seat {
    max-width: 32rem;
  }
}

/* Exactly four districts, so hold four columns once there is room. */
@media (min-width: 60rem) {
  .place-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.place-card__role {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.place-card__alt {
  font-size: 0.82rem;
  color: var(--ink-faint);
  font-style: italic;
}

.challenges {
  display: grid;
  gap: 0.9rem;
}

.challenges li {
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
}

.challenges h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.challenges p {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* --- partner ------------------------------------------------------------- */

.audience-list {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
}

.audience {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1.6rem;
}

.audience__lead {
  font-family: var(--font-display);
  font-size: 1.06rem;
  color: var(--brand);
}

.steps {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.step-card {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  position: relative;
}

.step-card__num {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 0.3rem;
}

/* --- videos --------------------------------------------------------------- */

/* Quieter than a plain .callout: this is a note about how the page behaves,
   not a warning. */
.callout--quiet {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.section--top-tight {
  padding-block-start: 0;
}

/* Three across at most — a taste of the gallery, not the gallery. */
.video-grid--row {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.video-count {
  margin-top: 1.4rem;
  font-size: 0.9rem;
}

.video-grid {
  display: grid;
  gap: 1.4rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  margin-top: 1.6rem;
}

.video-card__link {
  display: grid;
  gap: 0.7rem;
  text-decoration: none;
  border-radius: var(--radius);
  /* The whole card is one link, so the focus ring belongs around the whole
     card rather than around the picture alone. */
  outline-offset: 4px;
}

.video-card__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  /* Covers arrive in different shapes — TikTok gives mostly 16:9, sometimes a
     portrait crop. One ratio keeps the grid even, and the average colour of the
     picture sits behind it so the page looks composed before anything loads. */
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.video-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.video-card__link:hover .video-card__frame img,
.video-card__link:focus-visible .video-card__frame img {
  transform: scale(1.04);
}

/* Marks the card as a video without imitating a player's controls — selecting
   it leaves the site, and the label below says where to. */
.video-card__play {
  position: absolute;
  inset-block-end: 0.6rem;
  inset-inline-start: 0.6rem;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: rgb(10 20 15 / 68%);
  color: #fff;
}

.video-card__play svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-inline-start: 0.1rem;
}

.video-card__body {
  display: grid;
  gap: 0.3rem;
}

.video-card__title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  /* Captions run long and vary wildly; three lines keeps the grid even. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card__link:hover .video-card__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.video-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

.video-card__where::before {
  content: "\2197";
  margin-inline-end: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .video-card__frame img {
    transition: none;
  }
  .video-card__link:hover .video-card__frame img,
  .video-card__link:focus-visible .video-card__frame img {
    transform: none;
  }
}

/* --- news ---------------------------------------------------------------- */

.news-list {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.news-list--full {
  grid-template-columns: 1fr;
}

.news-card {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1.6rem;
}

.news-card time {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.news-card h3 {
  font-size: 1.28rem;
}

.news-card > p {
  color: var(--ink-soft);
}

/* --- contact ------------------------------------------------------------- */

.contact-cards {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.contact-card {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

.contact-card h2 {
  font-size: 1.05rem;
  font-family: var(--font-body);
  font-weight: 650;
}

.contact-card__value {
  font-size: 0.98rem;
  color: var(--ink-soft);
  word-break: break-word;
}

a.contact-card__value {
  color: var(--brand);
  text-decoration: none;
}

a.contact-card__value:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-card--primary {
  border-color: var(--brand);
  grid-column: 1 / -1;
}

.contact-card--primary .btn {
  justify-self: start;
  margin-top: 0.4rem;
}

.contact-aside {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

.panel h2 {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 650;
  margin-bottom: 0.45rem;
}

.panel p {
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.panel--accent {
  background: var(--accent-soft);
  border-color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.social {
  display: grid;
  gap: 0.5rem;
}

.social a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: capitalize;
}

.social a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.social__handle {
  font-weight: 400;
  font-size: 0.84rem;
  color: var(--ink-faint);
  text-transform: none;
  word-break: break-all;
}

.site-footer__title--spaced {
  margin-top: 1.4rem;
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.site-footer__social a {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line-control);
  border-radius: 999px;
  font-size: 0.84rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.site-footer__social a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* --- donate -------------------------------------------------------------- */

.nav-cta {
  white-space: nowrap;
}

.btn--sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.87rem;
}

/* Four channels: a 2×2 grid reads as deliberate, where auto-fill would leave
   one card stranded on its own row. Account numbers also need the width. */
.channel-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
  .channel-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.channel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
}

.channel__audience {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}

.channel p {
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.channel__details {
  display: grid;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}

.channel__details dt {
  color: var(--ink-faint);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.channel__number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: 0.03em;
  word-break: break-all;
}

.channel__pending {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line-strong);
  color: var(--ink-faint);
  font-size: 0.86rem;
}

/* Fraud warning. Deliberately loud — people lose real money to this. */
.warning {
  margin-top: 1.5rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--warn);
  border-inline-start: 5px solid var(--warn);
  border-radius: var(--radius);
  background: var(--warn-soft);
}

.warning h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--warn);
  margin-bottom: 0.4rem;
}

.warning p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* --- news post ----------------------------------------------------------- */

.post__date {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.link-arrow--back {
  margin-bottom: 1.1rem;
}

.post__body {
  display: grid;
  gap: 1.1rem;
  font-size: 1.06rem;
  color: var(--ink-soft);
}

.post__body strong {
  color: var(--ink);
}

.share {
  margin-top: 2.5rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.share__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 650;
  margin-bottom: 0.35rem;
}

.share__lead {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 1rem;
}

.share__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-control);
  border-radius: 999px;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background-color 0.16s, border-color 0.16s, color 0.16s;
}

.share-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}

.share-btn--whatsapp {
  border-color: var(--brand);
  color: var(--brand);
}

.share-btn.is-copied {
  background: var(--ok-soft);
  border-color: var(--ok);
  color: var(--ok);
}

.share__note {
  margin-top: 0.9rem;
  font-size: 0.83rem;
  color: var(--ink-faint);
}

/* --- page hero + CTA ----------------------------------------------------- */

.page-hero {
  padding-block: clamp(2.5rem, 5.5vw, 4.25rem);
  background: linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}

.page-hero__lead {
  margin-top: 1.1rem;
  max-width: 58ch;
  font-size: clamp(1rem, 1.4vw, 1.13rem);
  color: var(--ink-soft);
}

.cta-band {
  background: var(--brand-deep);
  color: var(--on-brand-deep);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}

.cta-band h2 {
  color: var(--on-brand-deep);
  margin-bottom: 0.6rem;
}

.cta-band p {
  color: var(--on-brand-deep);
  /* 88% keeps the supporting line softer than the heading while staying above
     4.5:1 on --brand-deep. Do not lower it. */
  color: color-mix(in srgb, var(--on-brand-deep) 88%, transparent);
  max-width: 54ch;
}

/* --- footer -------------------------------------------------------------- */

.site-footer {
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.site-footer__grid {
  display: grid;
  gap: 2rem;
  padding-bottom: 2.25rem;
}

@media (min-width: 50rem) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1.2fr;
  }
}

.site-footer__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.site-footer__about p:last-child {
  color: var(--ink-soft);
  font-size: 0.93rem;
  max-width: 42ch;
}

.site-footer__title {
  font-size: 0.78rem;
  font-family: var(--font-body);
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.85rem;
}

.site-footer__list {
  display: grid;
  gap: 0.45rem;
}

.site-footer__list a {
  font-size: 0.93rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.site-footer__list a:hover,
.site-footer__contact a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__contact {
  display: grid;
  gap: 0.7rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.site-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.site-footer__contact .icon {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--brand);
  margin-top: 0.2rem;
}

.site-footer__contact a {
  text-decoration: none;
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* --- print --------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .cta-band,
  .video-grid,
  .filters,
  .skip-link,
  .hero__figure {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .section {
    padding-block: 1rem;
    break-inside: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}