/* =========================================================
   DEBOL RUNNING CLUB
   Addis Ababa, Ethiopia
   ---------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Typography primitives
   4.  Utilities & layout shell
   5.  Buttons
   6.  Header / navigation / mobile menu
   7.  Hero
   8.  About
   9.  Upcoming runs
   10. Community
   11. Culture
   12. Belonging & vision
   13. Run with us
   14. Social grid
   15. Footer
   16. Motion & reveal
   ========================================================= */

/* ---------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------- */
:root {
  /* Brand — used as a system, not as a flag.
     Neutrals carry the page; green anchors, gold accents, red punctuates. */
  --green-900: #08281E;
  --green-900-0: rgba(8, 40, 30, 0);
  --green-800: #0B2F24;
  --green-700: #124036;
  --green-500: #1D6B50;

  --gold:      #E3A72F;
  --gold-soft: #F0C264;
  /* Two golds for light backgrounds, split by WCAG threshold:
     --gold-deep clears 3:1 and is only ever used on large display type;
     --gold-ink clears 4.5:1 and carries every small label, pill, and number. */
  --gold-deep: #A9761A;
  --gold-ink:  #8E6316;

  --red:       #C4392C;
  --red-deep:  #8E241A;

  --cream-50:  #FBF8F2;
  --cream-100: #F4EFE4;
  --cream-200: #E7DFD0;
  --cream-300: #D6CBB6;

  --ink-900:   #141110;
  --ink-800:   #221E1B;
  --ink-600:   #4A423C;
  --ink-400:   #6E645C;
  --ink-200:   #A79C92;

  /* Semantic */
  --bg:        var(--cream-50);
  --fg:        var(--ink-900);
  --muted:     var(--ink-400);
  --rule:      color-mix(in srgb, var(--ink-900) 14%, transparent);
  --rule-soft: color-mix(in srgb, var(--ink-900) 8%, transparent);

  /* Type */
  --font-display: "Archivo", "Noto Sans Ethiopic", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Noto Sans Ethiopic", "Helvetica Neue", Arial, sans-serif;
  --font-am:      "Noto Sans Ethiopic", var(--font-body);

  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base: 1.0625rem;
  --text-lead: clamp(1.15rem, 1rem + 0.75vw, 1.5rem);

  /* Space */
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --shell:  78rem;
  --section-y: clamp(4.5rem, 11vw, 9.5rem);

  /* Corner radius — the illustration language is soft, so surfaces that
     carry artwork are rounded and the editorial rules stay square. */
  --radius:    14px;
  --radius-lg: clamp(18px, 3vw, 30px);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.5s;

  --header-h: 4.25rem;
}

/* ---------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Fine film grain over the whole page — barely there, but it kills the
   flatness that makes a site look like a template. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--cream-200); }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
address { font-style: normal; }

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

::selection { background: var(--gold); color: var(--ink-900); }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 200;
  transform: translateY(-150%);
  background: var(--ink-900);
  color: var(--cream-50);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0.5rem); }

/* ---------------------------------------------------------
   3. TYPOGRAPHY PRIMITIVES
   --------------------------------------------------------- */
.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  /* Archivo is a variable font with a width axis. Narrowing it on small
     screens buys real horizontal room instead of shrinking the type —
     and reads more athletic. It widens back out on desktop. */
  font-stretch: 86%;
  font-size: clamp(2.2rem, 6.8vw, 5.25rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.h-display em { font-style: normal; color: var(--muted); }

.lead {
  font-size: var(--text-lead);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink-800);
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 1.5rem;
}
.kicker__num {
  font-variant-numeric: tabular-nums;
  color: var(--gold-ink);
  border: 1px solid var(--rule);
  padding: 0.2rem 0.45rem;
  letter-spacing: 0.06em;
}
.kicker--light { color: color-mix(in srgb, var(--cream-100) 65%, transparent); }
.kicker--light .kicker__num {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--cream-100) 26%, transparent);
}

.u-gold    { color: var(--gold-deep); }
.u-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink-900);
  paint-order: stroke fill;
}
@supports not (-webkit-text-stroke: 1px black) {
  .u-outline { color: var(--ink-200); }
}

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

/* ---------------------------------------------------------
   4. UTILITIES & LAYOUT SHELL
   --------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section__head { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.section__head--center { text-align: center; }
.section__head--center .kicker { justify-content: center; }
.section__note {
  max-width: 34rem;
  margin-top: 1.25rem;
  color: var(--ink-600);
}

.dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* ---------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink-900);
  --btn-bd: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;            /* comfortable tap target */
  padding: 0.9rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* Labels must be free to wrap: Amharic and Oromo run considerably longer
     than the English, and a nowrap button overflows the viewport instead. */
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  transition: background-color 0.28s var(--ease), color 0.28s var(--ease),
              border-color 0.28s var(--ease), transform 0.28s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--gold  { --btn-bg: var(--gold); --btn-fg: var(--ink-900); --btn-bd: var(--gold); }
.btn--dark  { --btn-bg: var(--ink-900); --btn-fg: var(--cream-50); --btn-bd: var(--ink-900); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--cream-50); --btn-bd: color-mix(in srgb, var(--cream-50) 45%, transparent); }

.btn--sm  { min-height: 2.6rem; padding: 0.55rem 1.1rem; font-size: var(--text-xs); }
.btn--lg  { min-height: 3.75rem; padding: 1.1rem 2.25rem; font-size: 0.9375rem; }
.btn--block { width: 100%; }

@media (hover: hover) {
  .btn--gold:hover  { --btn-bg: var(--ink-900); --btn-fg: var(--gold); --btn-bd: var(--ink-900); }
  .btn--dark:hover  { --btn-bg: var(--gold); --btn-fg: var(--ink-900); --btn-bd: var(--gold); }
  .btn--ghost:hover { --btn-bg: var(--cream-50); --btn-fg: var(--ink-900); --btn-bd: var(--cream-50); }
}

/* ---------------------------------------------------------
   6. HEADER / NAVIGATION
   --------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--cream-50) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: var(--ink-900);
  border-bottom: 1px solid transparent;
  transition: transform 0.4s var(--ease), background-color 0.4s var(--ease),
              color 0.4s var(--ease), border-color 0.4s var(--ease);
}
/* The hero is a card on a cream page, not a dark full-bleed image, so the
   header is legible by default and needs no JS to become readable. */
.header.is-stuck  { border-bottom-color: var(--rule-soft); }
.header.is-hidden { transform: translateY(-102%); }
.header.is-open {
  transform: none;
  background: transparent;
  color: var(--cream-50);
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.65rem; }
.brand__mark { width: 1.6rem; height: 1.6rem; flex: none; }
.brand__text { display: flex; align-items: baseline; gap: 0.5rem; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}
.brand__am {
  font-family: var(--font-am);
  font-size: 0.8rem;
  opacity: 0.6;
  display: none;
}

.nav { display: none; }
.nav__list { display: flex; gap: 2rem; }
.nav__list a {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 500;
  padding-block: 0.5rem;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.15rem;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav__list a:hover::after,
.nav__list a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav__list a[aria-current="true"] { color: var(--gold-ink); }

.header__actions { display: flex; align-items: center; gap: 0.75rem; }
.header__cta { display: none; }

.langswitch {
  display: none;
  gap: 1px;
  padding: 2px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.9;
}
.langswitch[hidden] { display: none; }
.langswitch button {
  min-height: 1.9rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: inherit;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.langswitch button[aria-pressed="true"] { background: var(--gold); color: var(--ink-900); }
@media (hover: hover) {
  .langswitch button:hover:not([aria-pressed="true"]) {
    background: color-mix(in srgb, currentColor 14%, transparent);
  }
}
/* On phones it lives in the menu instead, where there is room for it */
.langswitch--menu {
  display: flex;
  align-self: flex-start;
  margin-bottom: 1.25rem;
  min-height: 2.75rem;
  align-items: center;
}
.langswitch--menu button { min-height: 2.25rem; padding: 0.45rem 0.9rem; font-size: 0.75rem; }

.i18n-note {
  margin-bottom: 0.85rem;
  padding: 0.7rem 1rem;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--ink-400);
  background: var(--cream-100);
}
.i18n-note[hidden] { display: none; }

.burger {
  width: 2.75rem; height: 2.75rem;
  margin-right: -0.6rem;
  display: grid;
  place-items: center;
}
.burger__box { display: block; width: 1.5rem; }
.burger__box i {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform 0.35s var(--ease), width 0.35s var(--ease);
  width: 1.5rem;
}
.burger__box i + i { margin-top: 0.4rem; width: 1rem; }
.burger[aria-expanded="true"] i        { transform: translateY(0.31rem) rotate(45deg); }
.burger[aria-expanded="true"] i + i    { transform: translateY(-0.31rem) rotate(-45deg); width: 1.5rem; }

/* --- Mobile menu overlay --- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--green-900);
  color: var(--cream-50);
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--ease);
}
.menu[hidden] { display: none; }
.menu.is-open { clip-path: inset(0 0 0 0); }

.menu__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  width: 100%;
  padding-top: calc(var(--header-h) + 2.5rem);
  padding-bottom: 2.5rem;
}
.menu__list { border-top: 1px solid color-mix(in srgb, var(--cream-50) 16%, transparent); }
.menu__list li { border-bottom: 1px solid color-mix(in srgb, var(--cream-50) 16%, transparent); }
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.05rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 90%;
  font-size: clamp(1.7rem, 7.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.25s var(--ease);
}
.menu.is-open .menu__list a,
.menu.is-open .menu__foot {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.1s + var(--i, 0) * 0.055s);
}
.menu__list a:hover { color: var(--gold); }
.menu__num {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.menu__foot {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.menu__meta {
  margin-top: 1.25rem;
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--cream-50) 62%, transparent);
}
.menu__meta a { text-decoration: underline; text-underline-offset: 3px; }

body.is-locked { overflow: hidden; }

/* ---------------------------------------------------------
   7. HERO
   --------------------------------------------------------- */
.hero {
  padding-top: calc(var(--header-h) + 0.75rem);
  padding-bottom: clamp(2rem, 6vw, 4rem);
  background: var(--cream-50);
}

.hero__card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100svh - var(--header-h) - 5rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--green-900);
  color: var(--cream-50);
}

/* The photograph is positioned, not placed, so these two are the only grid
   items: the copy at the top and the ticker pinned to the foot of the card. */
.hero__card > .ticker { grid-row: 3; }
.hero__copy { position: relative; z-index: 1; grid-row: 1; min-width: 0; padding: clamp(1.75rem, 6vw, 3rem) clamp(1.5rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2rem); }

/* The photograph is the card's background rather than a panel beside it, so
   it carries the whole hero and the copy sits on top of it. */
.hero__art {
  /* Out of the grid flow entirely. As a spanning grid item its height was
     indefinite, so the image fell back to its own portrait aspect ratio and
     stretched the card to twice the height of the screen. */
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The card is far wider than the photograph, so this is what decides whether
     the crop lands on the crowd or on the buildings above them. */
  object-position: center 55%;
}

/* The photograph shares a card with the green copy panel. Left to itself the
   join is a hard seam, so the picture is washed back into the green along the
   edge they meet on — the top of the frame while the card is stacked, and the
   ticker's edge at the foot. The middle stop makes the ramp fall away quickly
   at the seam and then slowly, which reads as light rather than as a scrim. */
.hero__art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(8, 40, 30, 0.95) 0%,
      rgba(8, 40, 30, 0.88) 42%,
      rgba(8, 40, 30, 0.62) 78%,
      rgba(8, 40, 30, 0.5) 100%),
    linear-gradient(to top, var(--green-900) 0%, var(--green-900-0) 12%);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-100);
  margin-bottom: 1.25rem;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 74%;
  font-size: clamp(2.4rem, 12.4vw, 20rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.hero__line { display: block; }
.hero__line--alt {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  padding-left: 0.14em;
}
@supports not (-webkit-text-stroke: 1px black) {
  .hero__line--alt { color: var(--gold); }
}

.hero__lede {
  max-width: 34rem;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--cream-50) 88%, transparent);
  margin-bottom: 1.75rem;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__cta .btn { flex: 1 1 12rem; }

/* The small icon row under the CTA, lifted from the reference layout */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--cream-50) 20%, transparent);
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--cream-50) 78%, transparent);
}
.hero__facts li { display: inline-flex; align-items: center; gap: 0.55rem; }
.hero__facts svg {
  width: 1.15rem; height: 1.15rem; flex: none;
  fill: none; stroke: var(--gold); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.hero__badge {
  display: none;
  position: absolute;
  right: 1.25rem;
  /* The picture now runs the full height of the card, so the badge has to
     clear the ticker rather than sit on the foot of a column above it. */
  bottom: 4.5rem;
  z-index: 2;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--cream-50) 26%, transparent);
  background: color-mix(in srgb, var(--green-900) 76%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: right;
}
.hero__badge-k {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream-50) 62%, transparent);
}
.hero__badge-v {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--gold);
  margin-block: 0.3rem;
}

/* --- Ticker: the first screen literally says what DEBOL is --- */
.ticker {
  position: relative;
  z-index: 3;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--cream-50) 20%, transparent);
  background: color-mix(in srgb, var(--ink-900) 45%, transparent);
  padding-block: 0.8rem;
  --ticker-dur: 34s;
}
.ticker__track { display: flex; width: max-content; animation: ticker var(--ticker-dur) linear infinite; }
.ticker__group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-right: 1.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  white-space: nowrap;
}
.ticker__group b { font-weight: 800; }
.ticker__group i { color: var(--gold); font-style: normal; font-size: 0.65rem; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------
   8. ABOUT
   --------------------------------------------------------- */
.about { background: var(--cream-50); }

/* Two self-contained columns rather than a shared grid: the heading column
   used to be tied to the text column's row height, which left a large hole
   under the heading and pushed both illustrations to the bottom of the
   section, away from the copy they belong to. */
.about__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.about__col { min-width: 0; }
.about__title { margin-bottom: 0.75rem; }
.about__col > .lead + p,
.about__col > p + p { margin-top: 1.15rem; }
.about__col p { color: var(--ink-600); }
.about__col .lead { color: var(--ink-800); }

.about__fig { position: relative; }
.about__fig img { width: 100%; border-radius: var(--radius); }
/* The cub sits directly beneath the paragraph that explains the name — it is
   that sentence, drawn, so it belongs next to it rather than at the foot. */
.about__fig--sq { margin: clamp(1.5rem, 4vw, 2.25rem) 0; }
/* A cut-out photograph rather than a drawing, so it stands on the page with
   nothing behind it. The global img rule paints a cream placeholder tint while
   an image loads, which would show through this one as a pale box, and it is
   contained rather than cropped: covering a square cuts its ears and paws off. */
.about__fig--sq img {
  aspect-ratio: 1;
  object-fit: contain;
  background: none;
}

/* Nuniyat's quote is the origin of the club, so it opens the section. */
.about__quote { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* A wide band closes the section and carries the eye into the stats. */
.about__band { margin-top: clamp(2.5rem, 6vw, 4rem); }
.about__band img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 42%;
  border-radius: var(--radius);
}
.about__band figcaption,
.about__fig figcaption {
  margin-top: 0.8rem;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.pillars {
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
}
.pillars li {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) 1fr;
  gap: 0.75rem 1rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-sm);
  color: var(--ink-600);
}
.pillars span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-900);
}

/* --- Stats --- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: clamp(3rem, 8vw, 5rem);
  background: var(--rule);
  border: 1px solid var(--rule);
}
.stat { background: var(--cream-50); padding: 1.35rem 1rem; }
.stat dt {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.stat dd {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 92%;
  font-size: clamp(1.5rem, 5.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   9. UPCOMING RUNS
   --------------------------------------------------------- */
.runs { background: var(--cream-100); }

.runlist { border-top: 1px solid var(--rule); }

.run {
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.35s var(--ease);
}
.run > article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.15rem;
  padding-block: 1.6rem;
  align-items: start;
}

.run__date {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  padding: 0.6rem 0.25rem;
  border: 1px solid var(--rule);
  background: var(--cream-50);
  font-family: var(--font-display);
  line-height: 1;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.run__dow { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.run__day { font-size: 1.75rem; font-weight: 800; margin-block: 0.28rem; font-variant-numeric: tabular-nums; }
.run__mon { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.run__flag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.35rem;
}
.run__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 104%;
  font-size: clamp(1.25rem, 4.6vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.run__place {
  margin-top: 0.35rem;
  font-size: var(--text-sm);
  color: var(--ink-400);
}
.run__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 0.85rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pill {
  padding: 0.22rem 0.6rem;
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.pill--green { color: var(--green-500); }
.pill--gold  { color: var(--gold-ink); }
.pill--red   { color: var(--red); }

.run__join {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--ink-900);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.run__join svg { width: 1.1rem; height: 1.1rem; }
.run__join:hover { background: var(--ink-900); color: var(--cream-50); }

.run--feature .run__date { background: var(--green-800); color: var(--cream-50); border-color: var(--green-800); }
.run--feature .run__dow,
.run--feature .run__mon { color: var(--gold); }

@media (hover: hover) {
  .run:hover { background: var(--cream-50); }
  .run:hover .run__date { background: var(--gold); border-color: var(--gold); color: var(--ink-900); }
  .run:hover .run__dow,
  .run:hover .run__mon { color: var(--ink-800); }
}

.runs__foot {
  margin-top: 2rem;
  max-width: 38rem;
  font-size: var(--text-sm);
  color: var(--ink-400);
}
.runs__foot strong { font-family: var(--font-am); color: var(--ink-900); }

/* ---------------------------------------------------------
   10. COMMUNITY
   --------------------------------------------------------- */
.community { background: var(--cream-50); }
.community__title { font-size: clamp(2.4rem, 8.5vw, 6rem); }

.community__note {
  max-width: 46ch;
  margin: 1.5rem auto 0;
  font-size: var(--text-lead);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink-600);
  text-wrap: pretty;
}

.collage { display: grid; gap: 1.25rem; }
.collage__item { position: relative; }
.collage__item img { border-radius: var(--radius); }
.collage__item img { width: 100%; object-fit: cover; }
.collage__item--a img { aspect-ratio: 3 / 4; }
.collage__item--b img { aspect-ratio: 4 / 3; }
.collage__item--c img { aspect-ratio: 9 / 11; }

.collage__item figcaption {
  margin-top: 0.75rem;
  font-size: var(--text-xs);
  color: var(--muted);
}
.collage__item figcaption b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-900);
}

.quote {
  border-radius: var(--radius);
  background: var(--green-800);
  color: var(--cream-50);
  padding: clamp(1.75rem, 5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.quote p {
  /* A quote sits on dark green wherever it lands. Without this it inherits the
     body colour of the section holding it — ink on green, which is unreadable. */
  color: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 3.6vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.quote footer {
  margin-top: 1.5rem;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream-50) 62%, transparent);
}
.quote cite { font-style: normal; color: var(--gold); font-weight: 700; }

/* Testimonies come from content.json, so there may be one or twenty. Without
   JavaScript every slide is in the flow and reads as a list of quotes; the .js
   class is set in <head>, so only a scripted page hides the inactive ones and
   only then do the arrows appear. */
.js .quote__slide:not([data-active]) { display: none; }
.quote__slide + .quote__slide { margin-top: 1.75rem; }

.quote__nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
}
.quote__btn {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cream-50) 30%, transparent);
  color: var(--cream-50);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.quote__btn svg { width: 1.15rem; height: 1.15rem; }
@media (hover: hover) {
  .quote__btn:hover {
    background: color-mix(in srgb, var(--cream-50) 14%, transparent);
    border-color: color-mix(in srgb, var(--cream-50) 55%, transparent);
  }
}
.quote__count {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--cream-50) 62%, transparent);
}

/* ---------------------------------------------------------
   11. CULTURE
   --------------------------------------------------------- */
.culture {
  background: var(--green-900);
  color: var(--cream-100);
  position: relative;
  overflow: hidden;
}
/* A single hairline contour motif — a nod to highland topography,
   not a decorative pattern. */
.culture::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 60%;
  background:
    repeating-linear-gradient(
      to top,
      transparent 0 46px,
      color-mix(in srgb, var(--cream-50) 5%, transparent) 46px 47px
    );
  pointer-events: none;
}
.culture > .shell { position: relative; }

.culture__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.culture__title {
  font-size: clamp(2.1rem, 7.2vw, 4rem);
  margin-bottom: 1.5rem;
  max-width: 20ch;
}
.culture__text .lead { color: var(--cream-100); }
.culture__text p { color: color-mix(in srgb, var(--cream-100) 76%, transparent); }
.culture__text > p + p { margin-top: 1.15rem; }

.places__lead {
  margin-top: 2.25rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream-100) 62%, transparent);
}
.places__lead + .places { margin-top: 0.85rem; }

.places {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 2.5rem;
  background: color-mix(in srgb, var(--cream-50) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--cream-50) 14%, transparent);
}
.places li { background: var(--green-900); padding: 1rem 0.9rem; }
.places b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--gold);
}
.places span {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--cream-100) 60%, transparent);
  font-variant-numeric: tabular-nums;
}

.culture__media { display: grid; gap: 1.25rem; }
.culture__fig img { width: 100%; object-fit: cover; border-radius: var(--radius); }
.culture__fig--wide img { aspect-ratio: 16 / 10; object-position: center 68%; }
.culture__fig--tall img { aspect-ratio: 3 / 4; }

/* ---------------------------------------------------------
   12. BELONGING & VISION
   The story the club tells about itself: the value it runs on,
   and the ladder from one 5K to something larger.
   --------------------------------------------------------- */
.vision__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }

/* Sized like the culture headline rather than the hero: three short lines that
   introduce the copy under them instead of swamping it. */
.vision__title {
  font-size: clamp(2.1rem, 6.4vw, 3.6rem);
  margin-bottom: 1.5rem;
  max-width: 16ch;
}
.vision__text p { color: var(--ink-600); }
.vision__text .lead { color: var(--ink-800); }
.vision__text > p + p { margin-top: 1.15rem; }

.ladder {
  border-radius: var(--radius);
  background: var(--green-800);
  color: var(--cream-50);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.ladder li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid color-mix(in srgb, var(--cream-50) 16%, transparent);
}
.ladder li:first-child { border-top: 0; padding-top: 0; }
.ladder li:last-child { padding-bottom: 0; }
.ladder__n {
  flex: 0 0 2.4rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
}
.ladder__t {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.8vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* The ladder is short next to the copy; the buna photo closes the column. */
.vision__fig { margin-top: clamp(1.5rem, 4vw, 2rem); }
.vision__fig img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 50%;
  border-radius: var(--radius);
}
.vision__fig figcaption {
  margin-top: 0.8rem;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The closing line of the argument, so it closes the column that makes it
   rather than floating across the foot of the section. */
.vision__coda {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  padding-top: clamp(1.5rem, 3.5vw, 2rem);
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 3.2vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink-900);
}

/* ---------------------------------------------------------
   13. RUN WITH US
   --------------------------------------------------------- */
.join { background: var(--cream-100); }

.join__grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.joincard {
  position: relative;
  background: var(--cream-50);
  padding: clamp(1.5rem, 4.5vw, 2.25rem);
  transition: background-color 0.35s var(--ease);
}
.joincard__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold-ink);
  margin-bottom: 1.1rem;
}
.joincard h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 104%;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}
.joincard p { font-size: var(--text-sm); color: var(--ink-600); }
@media (hover: hover) { .joincard:hover { background: #fff; } }

.social__count {
  margin-top: 0.6rem;
  font-size: var(--text-sm);
  color: var(--ink-400);
}

/* The one external embed on the page. It is lazy-loaded and sits below the
   fold, so it costs nothing until someone scrolls to it. */
.joinmap { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

/* The switcher only exists when the club runs in more than one place; with a
   single location the list is hidden and the figure looks exactly as it did. */
.joinmap__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}
.joinmap__tab {
  padding: 0.5rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-400);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.joinmap__tab[aria-selected="true"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--cream-50);
}
@media (hover: hover) {
  .joinmap__tab:hover { border-color: var(--ink-900); color: var(--ink-900); }
  .joinmap__tab[aria-selected="true"]:hover { color: var(--cream-50); }
}
.joinmap__desc {
  margin-top: 0.6rem;
  max-width: 46ch;
  font-size: var(--text-sm);
  color: var(--ink-400);
}
.joinmap__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream-200);
}
.joinmap__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.joinmap figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 0.9rem;
  font-size: var(--text-sm);
  color: var(--ink-400);
}
.joinmap figcaption b {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink-900);
  margin-right: 0.4rem;
}
.joinmap figcaption a {
  font-weight: 600;
  color: var(--ink-900);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.joinmap figcaption a:hover { color: var(--gold-ink); }

.join__cta {
  border-radius: var(--radius-lg);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 5vw, 3rem);
  background: var(--ink-900);
  color: var(--cream-50);
  text-align: center;
}
/* The club's motto, in Amharic. Ge'ez has no uppercase and no width axis,
   so this drops the tracking and the caps the Latin display type uses. */
.join__motto {
  font-family: var(--font-am), var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 6.5vw, 3.75rem);
  line-height: 1.25;
  letter-spacing: 0;
  text-wrap: balance;
}
.join__motto-en {
  margin-top: 0.9rem;
  margin-bottom: 1.75rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream-50) 66%, transparent);
}
:lang(am) .join__motto-en { letter-spacing: 0.06em; }
.join__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.join__buttons .btn { flex: 1 1 14rem; }

/* Every way of reaching the club, drawn the same. The icon inherits the
   button's colour so it flips with the hover state instead of fighting it. */
.chan__i {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chans {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.chan {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-800);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.chan .chan__i { stroke: var(--gold-ink); transition: stroke 0.25s var(--ease); }
@media (hover: hover) {
  .chan:hover { background: var(--ink-900); border-color: var(--ink-900); color: var(--cream-50); }
  .chan:hover .chan__i { stroke: var(--gold); }
}

/* The "ask us anything" form, opened in place. The mailto link in the markup
   is what a visitor without JavaScript gets; the script swaps it for the
   toggle only once an endpoint is configured, so this never appears broken. */
.ask { margin-top: 1.5rem; text-align: left; }

/* The toggle is one of four buttons that all look alike, and opening the form
   is the only one of the four that keeps the visitor on the page — so it has
   to say which it is. Gold on the border, the label and the icon marks it as
   the chosen way in without filling it solid, which is Telegram's treatment
   as the primary button beside it. */
.btn--ghost[aria-expanded="true"] {
  --btn-bg: color-mix(in srgb, var(--gold) 14%, transparent);
  --btn-fg: var(--gold);
  --btn-bd: var(--gold);
}
.btn--ghost[aria-expanded="true"] .chan__i { stroke: var(--gold); }
.ask__form { display: grid; gap: 0.9rem; }
.ask__row { display: grid; gap: 0.9rem; }
@media (min-width: 40rem) { .ask__row { grid-template-columns: 1fr 1fr; } }

.ask__field { display: grid; gap: 0.4rem; }
.ask__field > span {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream-50) 72%, transparent);
}
.ask__field input,
.ask__field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--cream-50) 30%, transparent);
  background: color-mix(in srgb, var(--cream-50) 8%, transparent);
  color: var(--cream-50);
  font: inherit;
  font-size: var(--text-sm);
}
.ask__field textarea { resize: vertical; min-height: 6.5rem; }
.ask__field input::placeholder,
.ask__field textarea::placeholder { color: color-mix(in srgb, var(--cream-50) 45%, transparent); }
.ask__field input:focus-visible,
.ask__field textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: transparent;
}
.ask__field input[aria-invalid="true"],
.ask__field textarea[aria-invalid="true"] { border-color: var(--red, #C0472F); }

/* Off-screen rather than hidden: a bot fills what it can read in the markup. */
.ask__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ask__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.ask__status {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--cream-50) 72%, transparent);
}
.ask__status[data-state="error"] { color: var(--gold); }

/* ---------------------------------------------------------
   14. SOCIAL GRID
   --------------------------------------------------------- */
.social { background: var(--cream-50); padding-bottom: clamp(3rem, 7vw, 5rem); }
/* A 13-character unbreakable handle can't carry full headline size */
.social .h-display { font-size: clamp(1.85rem, 5vw, 3.5rem); word-break: break-word; }
.section__head--split { display: grid; gap: 1.5rem; }
.section__head--split .btn { justify-self: start; max-width: 100%; }

.grid-social {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.grid-social a { display: block; overflow: hidden; }
.grid-social img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
}
@media (hover: hover) {
  .grid-social a:hover img { transform: scale(1.05); filter: saturate(1.15); }
}

/* ---------------------------------------------------------
   15. FOOTER
   --------------------------------------------------------- */
.footer {
  background: var(--ink-900);
  color: var(--cream-100);
  padding-top: clamp(3.5rem, 9vw, 6rem);
  overflow: hidden;
}
.footer__top { display: grid; gap: 3rem; }
.footer__statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: clamp(1.3rem, 4.5vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 26ch;
}
.footer__statement .u-gold { color: var(--gold); }

.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
.footer__col h2 {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.footer__col-h2 { margin-top: 2rem; }
.footer__col li + li { margin-top: 0.55rem; }
.footer__col a, .footer__col address {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--cream-100) 74%, transparent);
  line-height: 1.7;
}
.footer__col a { transition: color 0.25s var(--ease); }
.footer__col a:hover { color: var(--gold); }

.footer__wordmark {
  margin-top: clamp(3rem, 8vw, 5rem);
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 100%;
  font-size: clamp(3.25rem, 19vw, 16rem);
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--cream-100) 26%, transparent);
  user-select: none;
}
@supports not (-webkit-text-stroke: 1px black) {
  .footer__wordmark { color: color-mix(in srgb, var(--cream-100) 14%, transparent); }
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid color-mix(in srgb, var(--cream-100) 15%, transparent);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--cream-100) 58%, transparent);
}
.footer__am { font-family: var(--font-am); color: var(--gold); font-size: var(--text-sm); }

/* ---------------------------------------------------------
   16. MOTION & REVEAL
   --------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .menu { clip-path: none; }
  .menu__list a, .menu__foot { opacity: 1; transform: none; }
}

/* =========================================================
   BREAKPOINTS
   ========================================================= */

/* --- 30rem / 480px: two-up social + stats breathe --- */
@media (min-width: 30rem) {
  .brand__am { display: inline; }
  .hero__cta .btn { flex: 0 0 auto; }
  .run > article { grid-template-columns: auto 1fr auto; align-items: center; }
  .run__date { grid-row: 1; }
  .run__join { grid-column: 3; grid-row: 1; margin-top: 0; }
}

/* --- 48rem / 768px: tablet --- */
@media (min-width: 48rem) {
  :root { --header-h: 5rem; }

  .about__grid { grid-template-columns: 5fr 7fr; }

  .h-display   { font-stretch: 100%; }
  .hero__title { font-stretch: 88%; font-size: clamp(3rem, 9vw, 20rem); }
  .stat { padding: 2rem 1.5rem; }
  .stat dd { font-stretch: 104%; }

  .stats { grid-template-columns: repeat(4, 1fr); }


  .collage {
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
  }
  .collage__item--a { grid-column: 1 / 6; grid-row: 1; }
  .collage__item--b { grid-column: 6 / 13; grid-row: 1; align-self: end; }
  .collage__item--q { grid-column: 1 / 7; grid-row: 2; }
  .collage__item--c { grid-column: 7 / 12; grid-row: 2; }

  .culture__media { grid-template-columns: repeat(12, 1fr); }
  .vision__grid { grid-template-columns: 1.1fr 0.9fr; }

  .culture__fig--wide { grid-column: 1 / 10; }
  .culture__fig--tall { grid-column: 6 / 13; margin-top: -18%; }

  .join__grid { grid-template-columns: repeat(2, 1fr); }
  .places { grid-template-columns: repeat(4, 1fr); }

  .grid-social { grid-template-columns: repeat(3, 1fr); }
  .joinmap__frame { aspect-ratio: 21 / 9; }

  .section__head--split {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .section__head--split .btn { justify-self: end; }

  .footer__top { grid-template-columns: 1fr 1.25fr; gap: 4rem; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* --- 64rem / 1024px: desktop --- */
@media (min-width: 64rem) {
  .h-display   { font-stretch: 116%; }
  .hero__title { font-stretch: 100%; font-size: clamp(3rem, 5vw, 5.5rem); }
  .hero__line--alt { padding-left: 0.3em; -webkit-text-stroke-width: 2px; }
  .footer__wordmark { font-stretch: 122%; }

  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .langswitch:not([hidden]) { display: flex; }
  .langswitch--menu { display: none; }
  .burger { display: none; }

  .hero__card {
    grid-template-columns: 1.02fr 1fr;
    grid-template-rows: 1fr auto;
    min-height: calc(100svh - var(--header-h) - 4rem);
  }
  .hero__copy { grid-column: 1; grid-row: 1; align-self: center; padding: clamp(2.5rem, 4vw, 4rem); }
  .hero__art img { object-position: center 62%; }
  /* Heaviest where the words are, thinnest over the right of the frame, so the
     copy keeps its contrast and the picture still reads as a photograph. */
  .hero__art::after {
    background:
      linear-gradient(to right,
        rgba(8, 40, 30, 0.95) 0%,
        rgba(8, 40, 30, 0.9) 34%,
        rgba(8, 40, 30, 0.6) 62%,
        rgba(8, 40, 30, 0.42) 100%),
      linear-gradient(to top, var(--green-900) 0%, var(--green-900-0) 12%);
  }
  .ticker     { position: relative; z-index: 1; grid-column: 1 / -1; grid-row: 2; }
  .hero__badge { display: block; }
  .hero__lede { max-width: 30rem; }


  .about__band img { aspect-ratio: 21 / 9; }

  .culture__grid { grid-template-columns: 1fr 1.05fr; gap: 5rem; align-items: center; }

  .join__grid { grid-template-columns: repeat(4, 1fr); }

  .grid-social { grid-template-columns: repeat(6, 1fr); }

  .runs__foot { margin-top: 2.5rem; }
}

/* --- 90rem / 1440px: generous --- */
@media (min-width: 90rem) {
  :root { --shell: 84rem; }
}

/* --- Print --- */
@media print {
  .header, .menu, .ticker, .hero__media, .hero__badge, body::after { display: none !important; }
  body { background: #fff; color: #000; }
  .js [data-reveal] { opacity: 1; transform: none; }
}