/* ---------------------------------------------------------------------------
   AUFFA theme
   Single stylesheet, all styling lives in tokens and components below.
   Logical properties are used throughout so RTL is handled automatically.
--------------------------------------------------------------------------- */

/* Fonts */
/* Latin-only variable fonts, self-hosted so no third-party font server is
   ever contacted; Arabic text falls through to AlRiyadh */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

/* Tokens */
:root {
  /* brand colors, extracted from the AUFFA seal */
  --color-bg: #0a1120;
  --color-bg-raised: #0f1830;
  --color-border: #22304f;
  --color-gold: #c9a961;
  --color-gold-bright: #e6c77e;
  --color-text: #ece8dd;
  --color-text-muted: #a3adc4;

  /* cool blue backdrop glow shared by the hero and the gateway */
  --color-accent: #2a4a8f;

  /* typography: the whole scale is fluid, interpolating between its floor
     (320px) and its ceiling (1440px) so nothing jumps size at any width */
  --font-serif: "Times New Roman", Georgia, serif;
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-arabic: "AlRiyadh", "Amiri", "Noto Naskh Arabic", "Times New Roman", serif;
  --text-xs: clamp(0.75rem, 0.7321rem + 0.0056vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.8571rem + 0.0056vw, 0.9375rem);
  --text-base: clamp(1rem, 0.9821rem + 0.0056vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.0893rem + 0.0112vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.2143rem + 0.0112vw, 1.375rem);
  --text-2xl: clamp(1.4375rem, 1.3839rem + 0.0167vw, 1.625rem);
  --text-3xl: clamp(1.875rem, 1.5893rem + 0.0893vw, 2.875rem);
  --text-4xl: clamp(2.125rem, 1.5179rem + 0.1897vw, 4.25rem);

  /* spacing: fluid like the type scale */
  --space-1: clamp(0.2188rem, 0.2098rem + 0.0028vw, 0.25rem);
  --space-2: clamp(0.4375rem, 0.4196rem + 0.0056vw, 0.5rem);
  --space-3: clamp(0.6875rem, 0.6696rem + 0.0056vw, 0.75rem);
  --space-4: clamp(0.875rem, 0.8393rem + 0.0112vw, 1rem);
  --space-5: clamp(1.25rem, 1.1786rem + 0.0223vw, 1.5rem);
  --space-6: clamp(1.6875rem, 1.5982rem + 0.0279vw, 2rem);
  --space-8: clamp(2.5rem, 2.3571rem + 0.0446vw, 3rem);
  --space-10: clamp(3.25rem, 3.0357rem + 0.067vw, 4rem);
  --space-12: clamp(4.125rem, 3.875rem + 0.0781vw, 5rem);

  /* layout */
  --container: 74rem;
  --container-narrow: 52rem;
  --container-wide: 96rem;

  /* surfaces */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -12px rgba(0, 0, 0, 0.55);
  --shadow-raise: 0 4px 12px rgba(0, 0, 0, 0.35), 0 24px 48px -16px rgba(0, 0, 0, 0.6);

  /* motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;
  --dur-reveal: 420ms;
  --reveal-rise: 32px;
  --start-delay: 200ms;

  /* breakpoints */
  --bp-sm: 40rem;
  --bp-md: 56.25rem;
  --bp-lg: 75rem;

  /* header height */
  --header-h: clamp(5rem, 4.6786rem + 0.1004vw, 6.125rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

html[lang="en"] body {
  font-family: var(--font-serif);
}

html[lang="ar"] body {
  font-family: var(--font-arabic);
  font-size: clamp(1.0625rem, 1.0446rem + 0.0056vw, 1.125rem);
  line-height: 1.9;
}

/* The reserved gutter keeps the page from shifting sideways while the
   fonts load and the hero refits, and the scrollbar is painted only when
   the content actually overflows */
html {
  scrollbar-color: color-mix(in srgb, var(--color-gold) 45%, transparent) var(--color-bg-raised);
  scrollbar-width: thin;
}

html::-webkit-scrollbar {
  width: 0.625rem;
}

html::-webkit-scrollbar-track {
  background: var(--color-bg-raised);
}

html::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-gold) 45%, transparent);
  border-radius: 0.375rem;
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .hero__title,
html[lang="ar"] .gateway__title {
  font-family: var(--font-arabic);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--color-gold-bright);
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

p {
  margin: 0 0 var(--space-4);
}

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

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

/* Layout helpers */
.container {
  width: min(100% - 2 * var(--space-5), var(--container));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 2 * var(--space-5), var(--container-narrow));
}

.container--wide {
  width: min(100% - 2 * var(--space-5), var(--container-wide));
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--space-4);
  z-index: 100;
  background: var(--color-gold);
  color: var(--color-bg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: inset-block-start var(--dur-base) var(--ease-out);
}

.skip-link:focus {
  inset-block-start: var(--space-3);
  color: var(--color-bg);
}

/* Header */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  min-height: var(--header-h);
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  min-width: 0;
  flex: none;
}

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

.brand__mark {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-border), 0 0 0 2px color-mix(in srgb, var(--color-gold) 18%, transparent);
}

.brand__name {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--color-gold-bright);
  white-space: nowrap;
}

.nav-toggle,
.nav-toggle-label {
  display: none;
}

/* Visually hidden, but focusable on mobile so the menu can be opened with the keyboard */
.nav-toggle {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.nav-toggle:focus-visible ~ .nav-toggle-label {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav__link {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: clamp(0.25rem, -0.8269rem + 0.1052vw, 0.6875rem);
  inset-block-end: 0.25rem;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}

.site-nav__link:hover {
  color: var(--color-text);
}

.site-nav__link:hover::after,
.site-nav__link.is-active::after {
  transform: scaleX(1);
}

.site-nav__link.is-active {
  color: var(--color-gold);
}

/* Custom language picker: a button trigger with a listbox dropdown, so
   the open state can carry the brand colors a native select never can */
.lang-picker {
  position: relative;
}

.lang-picker__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: 0.4375rem;
  padding-inline-start: var(--space-4);
  padding-inline-end: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background-color: var(--color-bg-raised);
  color: var(--color-gold);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.lang-picker__trigger:hover,
.lang-picker.is-open .lang-picker__trigger {
  border-color: var(--color-gold);
  background-color: color-mix(in srgb, var(--color-gold) 6%, var(--color-bg-raised));
}

.lang-picker__trigger:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.lang-picker__chevron {
  width: 0.65em;
  height: 0.65em;
  flex: none;
  color: var(--color-gold);
  transition: transform var(--dur-fast) var(--ease-out);
}

.lang-picker.is-open .lang-picker__chevron {
  transform: rotate(180deg);
}

.lang-picker__list {
  position: absolute;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-end: 0;
  z-index: 70;
  min-width: 100%;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  translate: 0 -0.25rem;
  transition: opacity var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}

.lang-picker.is-open .lang-picker__list {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out);
}

.lang-picker__option {
  display: block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.lang-picker__option:hover,
.lang-picker__option:focus-visible {
  background: color-mix(in srgb, var(--color-gold) 12%, transparent);
  color: var(--color-gold-bright);
  outline: none;
}

.lang-picker__option.is-selected {
  color: var(--color-gold);
  font-weight: 600;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

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

.btn:active {
  transform: translateY(0);
}

.btn--gold {
  background: var(--color-gold);
  color: var(--color-bg);
}

.btn--gold:hover {
  background: var(--color-gold-bright);
  color: var(--color-bg);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--color-gold) 55%, transparent);
}

.btn--ghost {
  border-color: var(--color-border);
  color: var(--color-text);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-bright);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
}

.link-arrow::after {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-base) var(--ease-out);
}

html[dir="rtl"] .link-arrow::after {
  transform: scaleX(-1);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

html[dir="rtl"] .link-arrow:hover::after {
  transform: scaleX(-1) translateX(4px);
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
}

.hero--home {
  padding-block: clamp(3.5rem, 10vh, 7rem) clamp(4rem, 11vh, 8rem);
  text-align: center;
}

.hero--home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 80% 60% at 15% -10%, color-mix(in srgb, var(--color-gold) 10%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 110%, color-mix(in srgb, var(--color-accent) 25%, transparent), transparent 70%);
  pointer-events: none;
}

.hero--home .hero__content {
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

/* Rotating photos in a framed rectangle beside the hero text; every
   slide runs the same 24s cycle (6s per slide) offset by its index, so
   each fades out exactly as the next fades in and keeps its zoom
   through the hand-off instead of reversing on screen */
.hero__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-raised);
  box-shadow: var(--shadow-raise);
  overflow: hidden;
  pointer-events: none;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: hero-cycle 24s linear infinite;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transform: scale(1.04);
  animation: hero-zoom 24s linear infinite;
}

.hero__slide:nth-child(2),
.hero__slide:nth-child(2) img {
  animation-delay: 6s;
}

.hero__slide:nth-child(3),
.hero__slide:nth-child(3) img {
  animation-delay: 12s;
}

.hero__slide:nth-child(4),
.hero__slide:nth-child(4) img {
  animation-delay: 18s;
}

.hero__slide:nth-child(even) img {
  animation-name: hero-zoom-out;
}

/* The slide cycle waits for the frame's own reveal so the first photo
   is full-strength the moment the frame appears instead of resuming
   mid-cycle while the frame was still hidden */
.js-anim .hero__frame:not(.is-revealed) .hero__slide,
.js-anim .hero__frame:not(.is-revealed) .hero__slide img {
  animation: none;
}

.hero--page {
  padding-block: clamp(3rem, 8vh, 5.5rem) clamp(2.5rem, 6vh, 4rem);
  border-block-end: 1px solid var(--color-border);
}

.hero--page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 90% at 50% -20%, color-mix(in srgb, var(--color-gold) 8%, transparent), transparent 70%);
  pointer-events: none;
}

/* Page heroes carry a related photo behind the title, dimmed by a scrim;
   the focus point per page lives in src/_data/heroImages.js */
.hero--page--image {
  background: var(--hero-image) var(--hero-position, center) / cover no-repeat;
}

.hero--page--image::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 75%, transparent) 0%, color-mix(in srgb, var(--color-bg) 87%, transparent) 55%, var(--color-bg) 100%);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}

.hero__content,
.hero--page .container {
  position: relative;
}

/* Full-width gold rule carrying the organisation name above the hero */
.hero__rule {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
}

.hero__rule::before,
.hero__rule::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;
}

.hero__rule::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-gold) 70%, transparent) 45%);
}

.hero__rule::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-gold) 70%, transparent) 55%, transparent);
}

html[dir="rtl"] .hero__rule::before {
  transform: scaleX(-1);
}

.hero__rule-text {
  color: var(--color-gold-bright);
  font-size: clamp(0.625rem, 0.5536rem + 0.0223vw, 0.875rem);
  font-weight: 600;
  letter-spacing: clamp(0.0563rem, 0.033rem + 0.0073vw, 0.1375rem);
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}

/* Per-line fitted titles: words are measured, split into balanced lines, and
   each line is scaled so every line spans the full width */
[data-fit-lines] {
  text-wrap: normal;
}

.hero__eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-3);
  color: var(--color-gold);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Page heroes tighten the gap under the fitted title; the home hero
   keeps the looser rhythm around its slideshow */
.hero--page .hero__title {
  margin-block-end: var(--space-4);
}

.hero__title {
  font-size: var(--text-4xl);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin-block-end: var(--space-5);
}

html[lang="ar"] .hero__title {
  font-size: clamp(1.6875rem, 1.3839rem + 0.0949vw, 2.75rem);
  line-height: 1.5;
}

.hero__lead {
  margin-inline: auto;
  max-width: 46rem;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.hero--page .hero__lead {
  margin-inline: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-block-start: var(--space-8);
}

/* Page heroes rise in on load via keyframes with staggered delays;
   the home hero runs the same text through the scroll-reveal cascade
   instead, so its photo and text share one order on every screen. */
.hero--page .hero__title,
.hero--page .hero__eyebrow,
.hero--page .hero__lead,
.hero--page .hero__actions {
  animation: rise-in var(--dur-slow) var(--ease-out) both;
}

.hero--page .hero__eyebrow { animation-delay: calc(var(--start-delay) + 30ms); }
.hero--page .hero__title { animation-delay: calc(var(--start-delay) + 70ms); }
.hero--page .hero__lead { animation-delay: calc(var(--start-delay) + 120ms); }
.hero--page .hero__actions { animation-delay: calc(var(--start-delay) + 180ms); }

/* Official decree of establishment, framed like a formal document */
.decree {
  padding-block: var(--space-10) var(--space-6);
}

.decree__card {
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.decree__card::before {
  content: "";
  position: absolute;
  inset: var(--space-2);
  border: 1px solid var(--color-gold);
  border-radius: calc(var(--radius-lg) - var(--space-1));
  opacity: 0.45;
  pointer-events: none;
}

.decree__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("/imgs/auffa-seal-gold.webp");
  background-position: center;
  background-size: cover;
  opacity: 0.03;
  pointer-events: none;
}

.decree__card > * {
  position: relative;
  z-index: 1;
}

.decree__title {
  margin: var(--space-3) 0 0;
  text-align: center;
  text-wrap: wrap;
  font-size: clamp(1.5rem, 1.2857rem + 0.067vw, 2.25rem);
  line-height: 1.4;
  color: var(--color-gold-bright);
}

.decree__acronym {
  white-space: nowrap;
}

.decree__issuers {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  text-align: center;
  line-height: 1.9;
  color: var(--color-text);
}

.decree__issuers p {
  margin: 0;
}

.decree__whereas {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.decree__whereas-label,
.decree__decides {
  text-align: start;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--color-gold-bright);
}

.decree__whereas-label {
  margin: 0;
}

.decree__whereas-list {
  margin-block-start: var(--space-3);
}

.decree__whereas-list li {
  position: relative;
  margin-block-end: var(--space-2);
  padding-inline-start: var(--space-5);
  color: var(--color-text);
}

.decree__whereas-list li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.75em;
  inset-inline-start: 0;
  width: var(--space-3);
  height: 1px;
  background: var(--color-gold);
}

.decree__decides {
  margin: var(--space-6) 0 var(--space-3);
}

html[lang="ar"] .decree__whereas-label,
html[lang="ar"] .decree__decides {
  font-family: var(--font-arabic);
}

html[lang="en"] .decree__whereas-label,
html[lang="en"] .decree__decides {
  letter-spacing: 0.08em;
}

.decree__articles {
  display: grid;
  gap: var(--space-6);
  padding-block-start: var(--space-3);
}

.decree__article-heading {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  color: var(--color-gold-bright);
}

.decree__article p {
  margin: 0;
  color: var(--color-text);
}

.decree__objectives {
  margin-block-start: var(--space-3);
  counter-reset: decree-objective;
}

.decree__objectives li {
  position: relative;
  margin-block-end: var(--space-2);
  padding-inline-start: var(--space-6);
  color: var(--color-text);
}

.decree__objectives li::before {
  counter-increment: decree-objective;
  content: counter(decree-objective) ")";
  position: absolute;
  inset-inline-start: 0;
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  color: var(--color-gold);
}

.decree__signatures {
  display: grid;
  gap: var(--space-6);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border);
}

.decree__signature-role {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.decree__signature-name {
  margin: var(--space-1) 0 0;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-text);
}

html[lang="ar"] .decree__signature-name {
  font-family: var(--font-arabic);
}

@media (min-width: 40rem) {
  .decree__card {
    padding: var(--space-10) var(--space-8);
  }

  .decree__issuers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .decree__signatures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Stats */
.stats {
  border-block: 1px solid var(--color-border);
  background: var(--color-bg-raised);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  border-inline: 1px solid var(--color-border);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  border-inline-end: 1px solid var(--color-border);
}

.stat:nth-child(even) {
  border-inline-end: none;
}

.stat__value {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  color: var(--color-gold);
  line-height: 1.1;
}

.stat__label {
  margin-block-start: var(--space-2);
  margin-inline-start: 0;
  color: var(--color-gold);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Sections */
.section {
  padding-block: var(--space-10) var(--space-12);
}

.section--home {
  padding-block: var(--space-12) var(--space-8);
}

.section--contact {
  padding-block-end: var(--space-8);
}

.section--compact {
  padding-block-end: var(--space-6);
}

.section--compact + .section {
  padding-block-start: var(--space-2);
}

.section__title {
  font-size: var(--text-3xl);
  position: relative;
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-5);
}

.section__title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: clamp(2.5rem, 2.2143rem + 0.0893vw, 3.5rem);
  height: 2px;
  background: var(--color-gold);
}

.section__lead {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

/* Cards */
.card {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-raise);
}

.card__title {
  font-size: var(--text-xl);
  color: var(--color-gold-bright);
  margin-block-end: var(--space-4);
}

.card__text {
  color: var(--color-text-muted);
  margin-block-end: var(--space-5);
}

/* Home feature grid */
.feature-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.feature {
  display: flex;
  flex-direction: column;
  position: relative;
  border-inline-start: 3px solid var(--color-gold);
}

.feature:hover {
  border-inline-start-color: var(--color-gold);
}

.feature .link-arrow {
  margin-block-start: auto;
}

.feature .link-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
}

/* Split (two column) */
.split {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

/* Member pillars */
.member-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(5.5rem, 4.3929rem + 0.346vw, 9.375rem), 1fr));
  gap: var(--space-4);
  margin-block-start: var(--space-6);
}

.pillar {
  text-align: center;
  padding: var(--space-4) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.pillar__num {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--color-gold);
}

.pillar__label {
  display: block;
  margin-block-start: var(--space-1);
  color: var(--color-gold);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Affiliations */
.affil-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.affil-list {
  display: flex;
  flex-direction: column;
}

.affil-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4) 0;
  border-block-end: 1px solid var(--color-border);
}

.affil-item:last-child {
  border-block-end: none;
}

.affil-item__name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-gold);
}

.affil-item__detail {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Checklist */
.checklist {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.checklist--grid {
  grid-template-columns: 1fr;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-raised);
}

.checklist li::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-block-start: 0.55em;
  border-radius: 50%;
  background: var(--color-gold);
}

/* Councils */
.council-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.council {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-5);
}

.council__num {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 0.9464rem + 0.1339vw, 2.875rem);
  color: var(--color-text-muted);
  line-height: 1;
}

.council .card__title {
  grid-column: 1;
  grid-row: 1;
}

.council__col {
  grid-column: 1 / -1;
}

.council__col + .council__col {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-5);
  border-block-start: 1px dashed var(--color-border);
}

.council__heading {
  margin: 0 0 var(--space-3);
  color: var(--color-gold);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.council__list li {
  position: relative;
  padding-inline-start: var(--space-5);
  margin-block-end: var(--space-2);
  color: var(--color-text-muted);
}

.council__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
}

/* Activities */
.activity-list {
  display: grid;
  gap: var(--space-6);
  margin-block-start: var(--space-6);
}

.activity {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
}

.activity__num {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 0.9464rem + 0.1339vw, 2.875rem);
  color: var(--color-gold);
  line-height: 1;
  padding-block-start: var(--space-1);
}

/* Details inside activity cards (used by Internationalization) */
.step__details {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.step__details li {
  padding: var(--space-3) var(--space-4);
  border-inline-start: 2px solid var(--color-gold);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}

.step__details strong {
  color: var(--color-text);
}

/* Event photo */
.event-photo {
  margin: 0;
}

.event-photo img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-raise);
}

.event-photo figcaption {
  margin-block-start: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* Leaders */
.leaders {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-block-start: var(--space-8);
}

.leader {
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

/* Headshot: photos crop to the square card, spans fall back to initials */
.leader__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: clamp(10rem, 8.8571rem + 0.3571vw, 14rem);
  aspect-ratio: 1;
  margin-inline: auto;
  margin-block-end: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, color-mix(in srgb, var(--color-gold) 14%, transparent), transparent 70%),
    var(--color-bg);
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  color: var(--color-gold);
  letter-spacing: 0.05em;
}

img.leader__photo {
  display: block;
  object-fit: cover;
  object-position: center;
}

.leader__role {
  display: block;
  color: var(--color-gold);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-block-end: var(--space-2);
}

.leader__name {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--color-gold-bright);
}

/* Contact */
.contact-layout {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.contact-map {
  position: relative;
  min-height: clamp(15.625rem, 13.8036rem + 0.5692vw, 22rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(0.92) hue-rotate(180deg);
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-icon {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-gold) 40%, transparent);
  background: var(--color-bg-raised);
  color: var(--color-gold-bright);
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.contact-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact-item + .contact-item {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.contact-card__label {
  color: var(--color-gold);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-card__value {
  color: var(--color-text);
  font-size: var(--text-lg);
  font-style: normal;
}

.contact-card a.contact-card__value {
  color: var(--color-text);
}

.contact-card a.contact-card__value:hover {
  color: var(--color-gold-bright);
}

/* Funding highlight */
.funding-card {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.funding-card__img {
  width: 100%;
  max-height: clamp(12rem, 10.5rem + 2vw, 16rem);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-raise);
}

/* Footer */
.site-footer {
  border-block-start: 1px solid var(--color-border);
  background: var(--color-bg-raised);
  padding-block: var(--space-10) var(--space-6);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  grid-template-areas:
    "brand"
    "caption"
    "contact"
    "nav";
}

.site-footer__brand {
  grid-area: brand;
  display: flex;
  align-items: center;
}

.site-footer__caption {
  grid-area: caption;
  /* The grid gap is wider than the caption's previous margin; a negative
     top margin keeps the name attached to the seal on narrow screens. */
  margin-block-start: calc(var(--space-4) - var(--space-8));
}

.site-footer__nav {
  grid-area: nav;
}

.site-footer__contact {
  grid-area: contact;
}

.site-footer__aside {
  /* On narrow screens the aside dissolves so the caption stays directly
     under the seal; on wide screens it becomes the middle column. */
  display: contents;
}

.site-footer__address {
  margin: 0;
}

.site-footer__mark {
  width: 100%;
  height: auto;
}

.site-footer__name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-gold-bright);
  margin-block-end: var(--space-1);
}

.site-footer__parent {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.site-footer__heading {
  color: var(--color-gold);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-block-end: var(--space-3);
}

.site-footer__col ul li + li {
  margin-block-start: var(--space-2);
}

.site-footer__col a {
  color: var(--color-text-muted);
}

.site-footer__col a:hover {
  color: var(--color-gold-bright);
}

.site-footer__contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
  color: var(--color-text-muted);
  font-style: normal;
}

.site-footer__contact-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.site-footer__contact-label {
  color: var(--color-gold);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer__contact-value a {
  color: var(--color-text);
}

.site-footer__contact-value a:hover {
  color: var(--color-gold-bright);
}

.site-footer__bottom {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* Gateway (language chooser / 404) */
.gateway {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  text-align: center;
  padding-block: var(--space-10);
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, color-mix(in srgb, var(--color-gold) 12%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 45% at 90% 110%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 70%);
}

.gateway__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gateway__title {
  font-size: var(--text-3xl);
  margin-block-end: var(--space-1);
}

.gateway__lead {
  color: var(--color-text-muted);
  margin-block: var(--space-5) 0;
}

.gateway__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
}

.gateway__code {
  font-family: var(--font-serif);
  font-size: clamp(6rem, 5.75rem + 2vw, 9rem);
  color: var(--color-gold);
  margin: 0;
  line-height: 1;
}

/* Scroll reveal: elements marked with data-reveal in the templates rise
   and fade in as they enter the viewport, whether on first paint or on
   scroll. The hidden state is plain CSS gated on the .js-anim marker the
   layout adds in the head, so targets are never painted visible before
   their entrance and the first paint is clean regardless of when
   reveal.js runs; the script only flips in .is-revealed once an element
   intersects, then stops watching. Without JavaScript the marker never
   lands and content stays visible. Only opacity and the translate
   property are animated, which keeps the motion on the compositor and
   out of layout and paint; card hovers transition their transform and
   shadow alongside, at the faster hover duration. */
.js-anim [data-reveal] {
  opacity: 0;
  translate: 0 var(--reveal-rise);
  transition:
    translate var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0s),
    opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0s),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.js-anim [data-reveal].is-revealed {
  opacity: 1;
  translate: 0 0;
}

/* The header slides in from above once per tab session: the layout marks
   the document with .js-header-intro on the very first page load, so
   navigation between pages never replays the entrance. */
.js-anim.js-header-intro .site-header {
  animation: header-in var(--dur-slow) var(--ease-out) var(--start-delay) both;
}

/* Keyframes */
@keyframes header-in {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-cycle {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  31% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes hero-zoom {
  0% {
    transform: scale(1.04);
  }
  25% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1.16);
  }
}

@keyframes hero-zoom-out {
  0% {
    transform: scale(1.16);
  }
  25% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1.04);
  }
}

/* Responsive */
@media (min-width: 40rem) {
  .stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stat:nth-child(even) {
    border-inline-end: 1px solid var(--color-border);
  }

  .stat:last-child {
    border-inline-end: none;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .affil-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .council-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leaders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .checklist--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .funding-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas: "brand aside nav";
    align-items: start;
  }

  .site-footer__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .site-footer__caption {
    margin-block-start: 0;
  }
}

@media (min-width: 56.25rem) {
  .hero--home {
    text-align: start;
  }

  .hero--home .hero__content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-10);
  }

  .hero--home .hero__rule {
    justify-content: flex-start;
  }

  .hero--home .hero__lead {
    text-align: justify;
  }

  .hero--home .hero__lead {
    margin-inline: 0;
  }

  .hero--home .hero__actions {
    justify-content: flex-start;
  }
}

@media (min-width: 80rem) {
  /* The full nav row only fits from 80rem up; the nine links, the brand
     and the language picker need roughly 1100px at this size, so below
     80rem the bar switches to the fullscreen hamburger menu instead. The
     three objects sit centered with an equal gap at any width, and the
     links interpolate from 10.5px to 13px as the container opens. */
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .site-nav {
    display: contents;
  }

  .site-nav__bar {
    display: contents;
  }

  .site-nav__bar .brand {
    display: none;
  }

  .brand__name {
    display: none;
  }

  .nav-close {
    display: none;
  }

  .site-nav__list {
    order: 1;
  }

  .lang-picker {
    order: 2;
  }

  .site-nav__link {
    padding: var(--space-3);
    font-size: clamp(0.75rem, 0.9766vw - 0.03125rem, 0.90625rem);
  }
}

@media (max-width: 79.99rem) {
  .nav-toggle {
    display: block;
  }

  .nav-toggle-label {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 3.25rem;
    height: 3.25rem;
    padding: var(--space-2);
    cursor: pointer;
    border-radius: var(--radius-sm);
  }

  .nav-toggle-label span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-gold);
    border-radius: 2px;
  }

  .site-header__inner {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  /* The menu takes over the whole viewport, so the header goes fully
     opaque and drops its backdrop blur: a filtered ancestor would become
     the containing block for the fixed overlay and confine it to the
     header instead of the screen. */
  .site-header {
    background: var(--color-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body:has(.nav-toggle:checked) {
    overflow: hidden;
  }

  /* Fullscreen overlay: the bar pins the brand, language picker and
     close button to the top, and the links sit centered in the rest.
     The overlay is always laid out and fades through opacity and
     visibility so both opening and closing animate; a display swap
     would snap the close shut. */
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--color-gold) 10%, transparent), transparent 70%),
      var(--color-bg);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-base);
  }

  .nav-toggle:checked ~ .site-nav {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-base) var(--ease-out);
  }

  .site-nav__bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: none;
    width: 100%;
    min-height: var(--header-h);
    padding-inline: var(--space-5);
    border-block-end: 1px solid var(--color-border);
  }

  .site-nav__bar .brand {
    margin-inline-end: auto;
  }

  .nav-close {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-raised);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }

  .nav-close:hover {
    border-color: var(--color-gold);
    transform: rotate(90deg);
  }

  .nav-close span {
    position: absolute;
    width: 1.125rem;
    height: 2px;
    border-radius: 2px;
    background: var(--color-gold);
  }

  .nav-close span:nth-child(1) {
    transform: rotate(45deg);
  }

  .nav-close span:nth-child(2) {
    transform: rotate(-45deg);
  }

  /* The list grows only as tall as it needs and centres itself; on very
     short screens it shrinks to the room left between the bar and the
     bottom edge and scrolls within itself instead of pushing the bar off
     screen. */
  .site-nav__list {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    margin-block: auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding-block: var(--space-4) var(--space-5);
    padding-inline: var(--space-5);
  }

  .site-nav__list::-webkit-scrollbar {
    display: none;
  }

  .nav-toggle:checked ~ .site-nav .site-nav__list li {
    animation: rise-in var(--dur-base) var(--ease-out) both;
    animation-delay: calc(var(--stagger, 0) * 20ms);
  }

  .site-nav__link {
    display: block;
    padding: var(--space-2) var(--space-6);
    text-align: center;
    font-size: var(--text-lg);
    border-radius: var(--radius-md);
  }

  .site-nav__link::after {
    display: none;
  }

  .site-nav__link:hover {
    background: var(--color-bg-raised);
  }
}

@media (max-width: 40rem) {
  /* On phones the desktop proportions read too tall, so the bar trims to
     a fixed height while keeping the same content. */
  :root {
    --header-h: 4.25rem;
  }

  /* In the stacked hero the photo leads, with the headline below it */
  .hero--home .hero__frame {
    order: 1;
  }

  .hero--home .hero__text {
    order: 2;
  }

  .activity {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat {
    padding-block: var(--space-6);
  }

  .stat:nth-child(even) {
    border-inline-end: none;
  }

  .stat:nth-child(2) {
    border-inline-end: none;
  }

  .stat:nth-child(n + 3) {
    border-block-start: 1px solid var(--color-border);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js-anim [data-reveal] {
    opacity: 1;
    translate: none;
  }

  .hero__slide {
    opacity: 0;
    animation: none;
  }

  .hero__slide:first-child {
    opacity: 1;
  }

  .hero__slide img {
    animation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}