/* ==========================================================================
   AFGHANISTAN NATIONAL OLYMPIC COMMITTEE
   Single stylesheet. Design tokens at the top. No build step.

   PALETTE — white and black base, five Olympic ring colours as accents,
   used semantically rather than decoratively:
     blue    links, primary action, structure
     green   achievement, positive, "open"
     red     urgency only — the support CTA and live states. Sparingly.
     yellow  featured / highlighted content
     black   text and structure

   ACCESSIBILITY — the ring colours as published are graphic colours, not
   text colours. Every one of the five fails WCAG AA as small text on white
   (yellow catastrophically). So each has TWO tokens:
     --blue   etc.  the true ring colour. Fills, rules, bars, borders only.
     --blue-t etc.  a darkened variant that clears 4.5:1 on white, for text.
   Never set small text to a bare ring colour. This is checked in TOKENS.md.

   SIGNATURE — the khatam, the eight-pointed Islamic star, carried over from
   the Lapis system and built in main.js as 12 SVG rects. It does all the
   small-scale structural work: row glyphs, programme markers, hero tile
   field. That is deliberate: the Olympic rings are a protected mark, and are
   never chopped into decoration, never used as a bullet, and never redrawn
   as three loose circles for a thumbnail. The handover mockup did all three.

   The emblem itself appears in exactly two roles:
     - as a LOCKUP in the header and footer, beside the full name. Small is
       normal practice here; the name does the identifying.
     - as a CREDENTIAL once on about.html, at 160px+ where the wordmark and
       the Pashto ring are legible, uncropped and captioned.
   Never on a dark ground without a white plate — the black ring vanishes.
   ========================================================================== */

/* ---- 0. Fonts ----------------------------------------------------------
   Self-hosted. These were three families pulled from fonts.googleapis.com,
   which cost two extra origins — DNS, TLS and a round trip each — before a
   single glyph could paint. On the connections this site is actually for,
   that is the expensive part, not the bytes.

   Only latin, latin-ext and arabic are kept. Google also serves cyrillic,
   cyrillic-ext, greek and vietnamese for these families; this site is
   English, Dari and Pashto, so thirteen faces were dropped.

   unicode-range is load-bearing: it is what stops an English reader
   downloading Vazirmatn's Arabic face, and a Dari reader downloading
   Archivo. Do not remove it. font-display: swap means text paints in the
   fallback immediately rather than staying invisible.

   To refresh: re-run the fetch against the same css2 URL with a modern
   user-agent, keep the same three subsets, and rewrite the src to
   ../fonts/. Files live in assets/fonts/. ------------------------------ */

/* Archivo · latin-ext · 400-800 */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin-ext-400-800.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo · latin · 400-800 */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin-400-800.woff2) format('woff2');
  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;
}

/* IBM Plex Sans · latin-ext · 400 */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans · latin · 400 */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-400.woff2) format('woff2');
  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;
}

/* IBM Plex Sans · latin-ext · 500 */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-ext-500.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans · latin · 500 */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-500.woff2) format('woff2');
  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;
}

/* IBM Plex Sans · latin-ext · 600 */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-ext-600.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans · latin · 600 */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-600.woff2) format('woff2');
  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;
}

/* Vazirmatn · arabic · 300-800 */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/vazirmatn-arabic-300-800.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* Vazirmatn · latin-ext · 300-800 */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/vazirmatn-latin-ext-300-800.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Vazirmatn · latin · 300-800 */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/vazirmatn-latin-300-800.woff2) format('woff2');
  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;
}

/* ---- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Base */
  --ink:        #101012;   /* near-black. Pure #000 is harsh for body text. */
  --ink-soft:   #3A3A40;
  --ink-mute:   #6B6B74;
  --ink-faint:  #9A9AA3;
  --paper:      #FFFFFF;
  --paper-02:   #FAFAFB;
  --paper-05:   #F4F4F6;
  --paper-10:   #EAEAEE;
  --line:       #E2E2E7;
  --line-firm:  #C9C9D1;

  /* The five rings — graphic use only */
  --blue:       #0081C8;
  --yellow:     #FCB131;
  --green:      #00A651;
  --red:        #EE334E;
  --black:      #101012;

  /* Text-safe variants — all ≥4.5:1 on --paper */
  --blue-t:     #00618F;
  --yellow-t:   #7A5200;
  --green-t:    #00713A;
  --red-t:      #C4152C;

  /* Type */
  --f-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-body:    'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-ui:      'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --step--2: 0.694rem;
  --step--1: 0.833rem;
  --step-0:  1rem;
  --step-1:  clamp(1.1rem, 1.02rem + 0.32vw, 1.28rem);
  --step-2:  clamp(1.35rem, 1.16rem + 0.85vw, 1.8rem);
  --step-3:  clamp(1.7rem, 1.34rem + 1.7vw, 2.6rem);
  --step-4:  clamp(2.2rem, 1.5rem + 3.1vw, 4rem);
  --step-5:  clamp(2.8rem, 1.6rem + 5.4vw, 6rem);

  /* Layout */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 64ch;
  --max: 84rem;
  --rule: 1px solid var(--line);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
  --fast: 150ms;
  --slow: 480ms;

  color-scheme: light;
}

/* RTL type stack: Vazirmatn carries Dari and Pashto in all three roles. */
[dir='rtl'] {
  --f-display: 'Vazirmatn', 'Noto Naskh Arabic', Tahoma, sans-serif;
  --f-body:    'Vazirmatn', 'Noto Naskh Arabic', Tahoma, sans-serif;
  --f-ui:      'Vazirmatn', 'Noto Naskh Arabic', Tahoma, sans-serif;
}

/* ---- 2. Reset and base -------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* <picture> exists to pick a source, not to be a box. Without this it becomes
   an inline wrapper and rules written for the img — .hero__media img is
   height:100% inside an absolutely positioned parent — stop resolving. */
picture { display: contents; }
button { font: inherit; color: inherit; }

a { color: var(--blue-t); text-underline-offset: 0.22em; }
a:hover { color: var(--ink); }

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

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

.tnum { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute;
  inset-inline-start: 0.75rem;
  top: -4rem;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1rem;
  font-family: var(--f-ui);
  font-size: var(--step--1);
  font-weight: 600;
  transition: top var(--fast) var(--ease);
}
.skip:focus { top: 0.75rem; }

/* ---- 3. Layout primitives ---------------------------------------------- */

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

.section { padding-block: clamp(3.5rem, 7.5vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.section--soft { background: var(--paper-02); }
.section--dark { background: var(--ink); color: #E8E8EC; }
.section--dark a { color: #fff; }
.section--dark .lede { color: #B4B4BE; }

/* ---- 4. Type roles ----------------------------------------------------- */

.eyebrow {
  font-family: var(--f-ui);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue-t);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 2px;
  background: var(--blue);
  flex: none;
}
[dir='rtl'] .eyebrow { letter-spacing: 0; text-transform: none; }
.section--dark .eyebrow { color: #9FD4F2; }
.section--dark .eyebrow::before { background: var(--blue); }

.h-display {
  font-family: var(--f-display);
  font-size: var(--step-4);
  font-weight: 800;
  font-stretch: 115%;
  line-height: 0.96;
  letter-spacing: -0.024em;
  margin: 0;
  text-wrap: balance;
}
[dir='rtl'] .h-display {
  font-stretch: normal;
  line-height: 1.32;
  letter-spacing: 0;
}

.h-section {
  font-family: var(--f-display);
  font-size: var(--step-3);
  font-weight: 700;
  font-stretch: 110%;
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0 0 0.8rem;
  text-wrap: balance;
}
[dir='rtl'] .h-section { font-stretch: normal; line-height: 1.4; letter-spacing: 0; }

.h-card {
  font-family: var(--f-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.45rem;
}
[dir='rtl'] .h-card { line-height: 1.5; letter-spacing: 0; }

.lede {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0;
  line-height: 1.55;
}
[dir='rtl'] .lede { line-height: 1.85; }

.small { font-size: var(--step--1); color: var(--ink-mute); }

/* Section head: title block plus an optional trailing link. */
.shead {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 2.2rem;
}
.shead__more { flex: none; }

/* ---- 5. The khatam module ---------------------------------------------- */

.banna { width: 100%; height: 100%; color: inherit; }

.mark {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  color: var(--ink);
}

/* ---- 6. Buttons -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-ui);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.78rem 1.25rem;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
  cursor: pointer;
}
[dir='rtl'] .btn { letter-spacing: 0; }
.btn__arrow { transition: transform var(--fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }
[dir='rtl'] .btn__arrow { transform: scaleX(-1); }
[dir='rtl'] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(3px); }

/* One CTA colour across the whole site, per the handover direction.
   Red, reserved for support/donate and nothing else. */
.btn--cta { background: var(--red-t); color: #fff; border-color: var(--red-t); }
.btn--cta:hover { background: #9E1023; border-color: #9E1023; color: #fff; }

.btn--ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--ink:hover { background: var(--blue-t); border-color: var(--blue-t); color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-firm); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.section--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.section--dark .btn--ghost:hover { border-color: #fff; }

/* ---- 7. Prelaunch review banner ----------------------------------------
   Replaces the Lapis "concept redesign" footer line. It is at the TOP,
   not the footer, because what it says changes whether a visitor should
   act on the page. Dismissible per session, never per lifetime. */

.rev {
  background: #1A1206;
  color: #FFE6B8;
  border-bottom: 3px solid var(--yellow);
  font-family: var(--f-ui);
}
.rev__in { padding-block: 1rem; }
.rev__top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}
.rev__t {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  color: var(--yellow);
}
[dir='rtl'] .rev__t { letter-spacing: 0; text-transform: none; }
.rev__lede { font-size: var(--step--1); margin: 0.4rem 0 0.8rem; color: #E4CDA4; max-width: 70ch; }
.rev__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.rev__item {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-size: var(--step--1);
  line-height: 1.45;
}
.rev__badge {
  flex: none;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.16rem 0.42rem;
  border: 1px solid currentColor;
  color: var(--yellow);
}
.rev__item[data-blocking='true'] .rev__badge { background: #E01B36; border-color: #E01B36; color: #fff; }
[dir='rtl'] .rev__badge { letter-spacing: 0; text-transform: none; }
.rev__x {
  background: none;
  border: 1px solid rgba(255,255,255,.3);
  color: #FFE6B8;
  font-size: var(--step--2);
  font-weight: 700;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  flex: none;
}
.rev__x:hover { border-color: #fff; color: #fff; }

/* ---- 8. Header --------------------------------------------------------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: var(--rule);
}
.hdr__bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; flex: none; }
.brand__logo { width: auto; height: 3rem; flex: none; }
.brand__txt { display: grid; gap: 0.05rem; }
.brand__name {
  font-family: var(--f-display);
  font-size: 0.92rem;
  font-weight: 800;
  font-stretch: 108%;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
[dir='rtl'] .brand__name { font-stretch: normal; letter-spacing: 0; }
.brand__sub {
  font-family: var(--f-ui);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
[dir='rtl'] .brand__sub { letter-spacing: 0; text-transform: none; font-size: 0.72rem; }

.nav { display: flex; gap: 0.2rem; margin-inline-start: auto; flex-wrap: wrap; }
.nav a {
  font-family: var(--f-ui);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.5rem 0.7rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--blue); }
/* The support link is the one accent in the nav. */
.nav a.nav__cta {
  background: var(--red-t);
  color: #fff;
  border-bottom-color: transparent;
  font-weight: 700;
  margin-inline-start: 0.5rem;
}
.nav a.nav__cta:hover { background: #9E1023; color: #fff; }

.lang { display: flex; gap: 0.1rem; flex: none; }
.lang button {
  background: none;
  border: 0;
  font-family: var(--f-ui);
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--ink-mute);
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.lang button[aria-pressed='true'] { color: var(--ink); border-bottom-color: var(--blue); }

.burger { display: none; background: none; border: 0; padding: 0.6rem; cursor: pointer; flex: none; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; }

@media (max-width: 62rem) {
  .burger { display: block; margin-inline-start: auto; }
  .nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: var(--rule);
    flex-direction: column;
    padding: 0.75rem var(--gutter) 1.25rem;
    gap: 0;
  }
  .hdr.is-open .nav { display: flex; }
  .nav a { padding-block: 0.75rem; border-bottom: var(--rule); }
  .nav a.nav__cta { margin: 0.75rem 0 0; text-align: center; }
  .lang { order: 3; }
}

/* Header at phone widths.
   The bar is brand + language switch + burger and every one of them was
   flex:none, so nothing could give. The committee's full name is long and
   must not be shortened to "ANOC", so the bar measured 630px inside a 390px
   viewport on every page — masked by body{overflow-x:hidden} rather than
   fixed, which is why it went unnoticed.
   The brand is allowed to shrink and wrap, the IOC sub-line drops (it is
   stated on About and on Governance), and the rest tightens. The full name
   still renders; it just wraps. */
@media (max-width: 34rem) {
  .hdr__bar { gap: 0.5rem; min-height: 3.75rem; }
  .brand { flex: 1 1 auto; min-width: 0; gap: 0.5rem; }
  .brand__logo { height: 2.25rem; }
  .brand__name { font-size: 0.74rem; line-height: 1.15; }
  .brand__sub { display: none; }
  .lang { gap: 0; }
  .lang button { padding: 0.35rem 0.28rem; }
  .burger { padding: 0.5rem 0.25rem; }
}

/* ---- 9. Hero -----------------------------------------------------------
   Photograph, but the scrim is LOCAL to the text block rather than a
   full-bleed wash — the handover mockup put a .72/.55/.82 gradient over the
   whole frame and lost the building it was there to show. */

.hero { position: relative; background: var(--ink); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
/* A soft one-directional wash only, from the text side. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Two washes: a light vertical one for the top and bottom edges, and a
     stronger one from the text side so the copy has a ground. The handover
     mockup used a single full-bleed .72/.55/.82 gradient and lost the
     building it was there to show. */
  background:
    linear-gradient(to bottom, rgba(16,16,18,.55) 0%, rgba(16,16,18,.18) 45%, rgba(16,16,18,.55) 100%),
    linear-gradient(to var(--scrim-to, right), rgba(16,16,18,.88) 0%, rgba(16,16,18,.66) 38%, rgba(16,16,18,.05) 74%);
}
[dir='rtl'] .hero__media::after { --scrim-to: left; }
.hero__inner {
  position: relative;
  padding-block: clamp(4rem, 11vw, 8.5rem);
  max-width: 56rem;
}
.hero .eyebrow { color: #fff; }
.hero .eyebrow::before { background: var(--yellow); }

.hero__title {
  font-family: var(--f-display);
  font-size: var(--step-5);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 1.2rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
}
[dir='rtl'] .hero__title { font-stretch: normal; line-height: 1.28; letter-spacing: 0; }
.hero__title span { display: block; }
/* Accent word. Blue, not yellow — yellow on a photograph is the single
   worst contrast pairing available and the mockup used it for the headline. */
.hero__title .accent { display: inline; color: #7FCBF5; }

.hero__lede {
  font-size: var(--step-1);
  color: #E4E4EA;
  max-width: 46ch;
  margin: 0 0 2rem;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(0,0,0,.2); }
.hero__cta .btn--ghost:hover { border-color: #fff; background: rgba(0,0,0,.4); }

/* Tile field variant for pages with no photograph. */
.hero--type { background: var(--ink); }
.tilefield {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, 84px);
  grid-auto-rows: 84px;
  opacity: 0.14;
  color: #fff;
  pointer-events: none;
}
.tilefield .banna { opacity: 0; transform: scale(.7); }
.tilefield .banna.in { animation: tile var(--slow) var(--ease) forwards; }
@keyframes tile { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tilefield .banna, .tilefield .banna.in { opacity: 1; transform: none; animation: none; }
}

/* ---- 10. Trust strip --------------------------------------------------- */

.trust { background: var(--ink); color: #fff; border-top: 1px solid rgba(255,255,255,.12); }
.trust__in {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  padding-block: 0.95rem;
  font-family: var(--f-ui);
  font-size: var(--step--1);
  font-weight: 600;
}
.trust__item { display: flex; align-items: center; gap: 0.55rem; }
/* Square swatches, not circles — circles read as a broken ring set, and the
   black ring would vanish on this ground. Every swatch here is visible. */
.trust__item i { width: 9px; height: 9px; flex: none; }
.trust__item:nth-child(1) i { background: var(--blue); }
.trust__item:nth-child(2) i { background: var(--yellow); }
.trust__item:nth-child(3) i { background: var(--green); }
.trust__item:nth-child(4) i { background: var(--red); }
.trust__item:nth-child(5) i { background: #fff; }
.trust__affil {
  flex-basis: 100%;
  font-weight: 400;
  color: #A8A8B2;
  font-size: var(--step--2);
  max-width: 90ch;
  line-height: 1.5;
}
.trust__affil a { color: #fff; }

/* ---- 11. Road to 2028 -------------------------------------------------- */

.road { border-bottom: var(--rule); background: var(--paper-02); }
.road__in {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(14rem, 1fr) minmax(16rem, 2fr) auto;
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 60rem) { .road__in { grid-template-columns: 1fr; } }

.road__title { font-family: var(--f-display); font-size: var(--step-2); font-weight: 800; margin: 0.25rem 0 0; letter-spacing: -0.02em; }
[dir='rtl'] .road__title { letter-spacing: 0; }

.road__bar { height: 8px; background: var(--paper-10); position: relative; overflow: hidden; }
.road__fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--green); }
.road__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.6rem;
  font-family: var(--f-ui);
  font-size: var(--step--2);
  color: var(--ink-mute);
  font-weight: 600;
}
.road__aim { color: var(--green-t); }
.road__note { margin: 0.5rem 0 0; font-size: var(--step--2); color: var(--ink-mute); }

.road__count { display: flex; gap: 1.5rem; }
.road__unit { text-align: center; }
.road__n {
  display: block;
  font-family: var(--f-display);
  font-size: var(--step-3);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
[dir='rtl'] .road__n { font-stretch: normal; letter-spacing: 0; }
.road__u {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 0.3rem;
}
[dir='rtl'] .road__u { letter-spacing: 0; text-transform: none; }

/* ---- 12. Ledger -------------------------------------------------------- */

.ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: var(--rule);
}
.ledger__cell {
  padding: 1.6rem 1.25rem;
  border-inline-end: var(--rule);
  border-bottom: var(--rule);
}
.ledger__cell:last-child { border-inline-end: 0; }
.ledger__num {
  display: block;
  font-family: var(--f-display);
  font-size: var(--step-3);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
[dir='rtl'] .ledger__num { font-stretch: normal; letter-spacing: 0; }
.ledger__cell:nth-child(1) .ledger__num { color: var(--blue-t); }
.ledger__cell:nth-child(2) .ledger__num { color: var(--green-t); }
.ledger__cell:nth-child(3) .ledger__num { color: var(--ink); }
.ledger__cell:nth-child(4) .ledger__num { color: var(--yellow-t); }
.ledger__lbl {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 0.5rem;
  line-height: 1.35;
}
.ledger__note { display: block; font-size: var(--step--2); color: var(--ink-mute); margin-top: 0.2rem; }
/* A name or a phone number in the ledger: same slot, text-sized. */
.ledger__num--text { font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ledger__tel { color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.ledger__tel:hover { color: var(--blue-t); }

/* ---- 13. Provenance flag ----------------------------------------------
   Rendered inline next to any claim whose source is not established. It is
   not decorative and it is not hidden behind a tooltip. */

.flag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--f-ui);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.14rem 0.42rem;
  vertical-align: 0.12em;
  white-space: nowrap;
}
[dir='rtl'] .flag { letter-spacing: 0; text-transform: none; font-size: 0.72rem; }
.flag[data-src='unverified'] { background: #FFF3D6; color: #6B4600; border: 1px solid #E5B863; }
.flag[data-src='verified']   { background: #E4F6EC; color: var(--green-t); border: 1px solid #9BD7B4; }
.flag[data-src='gdpes']      { background: var(--paper-05); color: var(--ink-mute); border: 1px solid var(--line-firm); }
.flag[data-src='committee']  { background: #E1F1FA; color: var(--blue-t); border: 1px solid #A9D3EA; }
.section--dark .flag[data-src='gdpes'] { background: rgba(255,255,255,.1); color: #C8C8D2; border-color: rgba(255,255,255,.25); }

/* ---- 14. Filters and chips -------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.5rem; }
.chip {
  font-family: var(--f-ui);
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--line-firm);
  color: var(--ink-soft);
  cursor: pointer;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }

.search {
  font-family: var(--f-body);
  font-size: var(--step-0);
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line-firm);
  background: var(--paper);
  color: var(--ink);
  width: min(100%, 22rem);
  margin-bottom: 1.5rem;
}
.count { font-family: var(--f-ui); font-size: var(--step--1); color: var(--ink-mute); margin: 1rem 0 0; }
.empty { color: var(--ink-mute); padding: 2rem 0; }

/* ---- 15. Federation index --------------------------------------------- */

.ihead, .frow {
  display: grid;
  /* glyph | federation | president | established | contact line */
  grid-template-columns: 1.6rem minmax(0, 1.6fr) minmax(0, 1.6fr) 7rem 9.5rem;
  gap: 1rem;
  align-items: center;
}
.ihead {
  font-family: var(--f-ui);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-block: 0.6rem;
  border-bottom: 1.5px solid var(--ink);
}
[dir='rtl'] .ihead { letter-spacing: 0; text-transform: none; }

.frow {
  padding-block: 0.95rem;
  border-bottom: var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background var(--fast) var(--ease);
}
.frow:hover { background: var(--paper-05); }
.frow__glyph { width: 1.15rem; height: 1.15rem; color: var(--line-firm); }
.frow:hover .frow__glyph { color: var(--blue); }
.frow__name { font-family: var(--f-display); font-weight: 700; font-size: var(--step-0); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.frow__group {
  font-family: var(--f-ui);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
}
[dir='rtl'] .frow__group { letter-spacing: 0; text-transform: none; font-size: 0.72rem; }
.frow__group[data-g='olympic']     { background: #E1F1FA; color: var(--blue-t); }
.frow__group[data-g='national']    { background: var(--paper-05); color: var(--ink-mute); }
.frow__group[data-g='traditional'] { background: #FFF3D6; color: var(--yellow-t); }
.frow__group[data-g='para']        { background: #E4F6EC; color: var(--green-t); }
.frow__num { font-family: var(--f-ui); font-size: var(--step--1); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.frow__pres { font-size: var(--step--1); color: var(--ink-soft); }
.frow__note { font-size: var(--step--2); color: var(--ink-mute); }
.frow__none { color: var(--ink-mute); font-style: italic; }
.frow__tel { white-space: nowrap; }

@media (max-width: 48rem) {
  .ihead { display: none; }
  .frow { grid-template-columns: 1.15rem 1fr auto; row-gap: 0.25rem; }
  .frow__pres { grid-column: 2; }
  .frow__tel { grid-column: 3; grid-row: 2; }
}

/* ---- 16. News ---------------------------------------------------------- */

.newsgrid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.ncard {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.4rem;
  border: var(--rule);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.ncard:hover { border-color: var(--ink); transform: translateY(-2px); }
.ncard--lead { grid-column: span 2; }
@media (max-width: 48rem) { .ncard--lead { grid-column: auto; } }
.ncard__top { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; }
.ncard__cat {
  font-family: var(--f-ui);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-t);
}
[dir='rtl'] .ncard__cat { letter-spacing: 0; text-transform: none; font-size: 0.75rem; }
.ncard__date { font-family: var(--f-ui); font-size: var(--step--2); color: var(--ink-mute); }
.ncard__title { font-family: var(--f-display); font-size: var(--step-1); font-weight: 700; line-height: 1.22; margin: 0; letter-spacing: -0.012em; }
[dir='rtl'] .ncard__title { line-height: 1.5; letter-spacing: 0; }
.ncard--lead .ncard__title { font-size: var(--step-2); }
.ncard__lead { font-size: var(--step--1); color: var(--ink-soft); margin: 0; line-height: 1.55; }
.ncard__go {
  margin-top: auto;
  font-family: var(--f-ui);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--blue-t);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---- 17. Achievements -------------------------------------------------- */

.achgrid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.ach {
  padding: 1.5rem 1.4rem;
  border: var(--rule);
  border-top: 3px solid var(--line-firm);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.ach[data-accent='blue']   { border-top-color: var(--blue); }
.ach[data-accent='green']  { border-top-color: var(--green); }
.ach[data-accent='red']    { border-top-color: var(--red); }
.ach[data-accent='yellow'] { border-top-color: var(--yellow); }
.ach[data-accent='ink']    { border-top-color: var(--ink); }
.ach__tag {
  font-family: var(--f-ui);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
[dir='rtl'] .ach__tag { letter-spacing: 0; text-transform: none; font-size: 0.75rem; }
.ach__t { font-family: var(--f-display); font-size: var(--step-1); font-weight: 700; line-height: 1.22; margin: 0; }
[dir='rtl'] .ach__t { line-height: 1.5; }
.ach__b { font-size: var(--step--1); color: var(--ink-soft); margin: 0; line-height: 1.55; }
.ach__cite { font-family: var(--f-ui); font-size: var(--step--2); color: var(--ink-mute); margin-top: auto; }

/* ---- 19. Events ------------------------------------------------------- */

.evlist { display: grid; }
.ev {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding-block: 1.05rem;
  border-bottom: var(--rule);
}
@media (max-width: 48rem) { .ev { grid-template-columns: 1fr; gap: 0.35rem; } }
.ev__kind {
  font-family: var(--f-ui);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.16rem 0.45rem;
  justify-self: start;
}
[dir='rtl'] .ev__kind { letter-spacing: 0; text-transform: none; font-size: 0.75rem; }
.ev__kind[data-k='hosted']    { background: #FFF3D6; color: var(--yellow-t); }
.ev__kind[data-k='qualifier'] { background: #FDE7EA; color: var(--red-t); }
.ev__kind[data-k='result']    { background: #E4F6EC; color: var(--green-t); }
.ev__kind[data-k='calendar']  { background: #E1F1FA; color: var(--blue-t); }
.ev__t { font-family: var(--f-display); font-size: var(--step-0); font-weight: 700; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.ev__loc { font-family: var(--f-ui); font-size: var(--step--1); font-weight: 500; color: var(--ink-mute); }
.ev__d { font-family: var(--f-ui); font-size: var(--step--1); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---- 20. Support ------------------------------------------------------ */

.supgrid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.sup {
  padding: 1.6rem 1.5rem;
  border: var(--rule);
  border-inline-start: 3px solid var(--line-firm);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.sup[data-accent='blue']   { border-inline-start-color: var(--blue); }
.sup[data-accent='green']  { border-inline-start-color: var(--green); }
.sup[data-accent='red']    { border-inline-start-color: var(--red); }
.sup[data-accent='yellow'] { border-inline-start-color: var(--yellow); }
.sup[data-accent='ink']    { border-inline-start-color: var(--ink); }
.sup[data-live='false'] { background: var(--paper-02); }
.sup__state {
  font-family: var(--f-ui);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.16rem 0.45rem;
  align-self: start;
}
[dir='rtl'] .sup__state { letter-spacing: 0; text-transform: none; font-size: 0.75rem; }
.sup[data-live='true'] .sup__state  { background: var(--green-t); color: #fff; }
.sup[data-live='false'] .sup__state { background: var(--paper-10); color: var(--ink-mute); }
.sup__t { font-family: var(--f-display); font-size: var(--step-1); font-weight: 800; margin: 0; letter-spacing: -0.015em; }
[dir='rtl'] .sup__t { letter-spacing: 0; }
.sup__b { font-size: var(--step--1); color: var(--ink-soft); margin: 0; line-height: 1.6; }
.sup__closed { font-size: var(--step--2); color: var(--ink-mute); margin: 0; padding-top: 0.5rem; border-top: var(--rule); }
.sup .btn { align-self: start; margin-top: auto; }

/* ---- 21. Provinces --------------------------------------------------- */

.provgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); border-top: var(--rule); border-inline-start: var(--rule); }
.pcell {
  position: relative;
  padding: 1.1rem 1.2rem 1.3rem;
  border-inline-end: var(--rule);
  border-bottom: var(--rule);
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: 0.15rem;
  transition: background var(--fast) var(--ease);
}
/* No :hover — the cell is a div, not a link. There is nothing behind a
   province yet, and hover feedback on something that cannot be clicked
   promises a page that does not exist. */
.pcell__name { font-family: var(--f-display); font-weight: 700; font-size: var(--step-0); }
.pcell__zone { font-family: var(--f-ui); font-size: var(--step--2); color: var(--ink-mute); }
.pcell__idx {
  position: absolute;
  inset-block-start: 0.8rem;
  inset-inline-end: 0.9rem;
  font-family: var(--f-ui);
  font-size: var(--step--2);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ---- 22. Medals ------------------------------------------------------ */

.medals { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.medal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.25rem;
  padding: 1.6rem;
  border: 1px solid rgba(255,255,255,.16);
}
.medal__year { font-family: var(--f-display); font-size: var(--step-2); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--yellow); }
.medal__badge {
  font-family: var(--f-ui);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #E0A96D;
}
[dir='rtl'] .medal__badge { letter-spacing: 0; text-transform: none; font-size: 0.75rem; }
.medal__athlete { font-family: var(--f-display); font-size: var(--step-1); font-weight: 800; margin: 0.2rem 0 0.5rem; color: #fff; }
.medal__facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-family: var(--f-ui); font-size: var(--step--1); color: #B4B4BE; }
.medal__facts b { color: #fff; font-weight: 700; }
.medal__note { grid-column: 1 / -1; font-size: var(--step--1); color: #B4B4BE; margin: 0.5rem 0 0; line-height: 1.55; }

/* ---- 23. Timeline ---------------------------------------------------- */

.tl { display: grid; }
.tlrow {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.4rem;
  border-bottom: var(--rule);
}
@media (max-width: 40rem) { .tlrow { grid-template-columns: 1fr; gap: 0.4rem; } }
.tlrow__yr { font-family: var(--f-display); font-size: var(--step-2); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--blue-t); display: block; }
.tlrow__ce { font-family: var(--f-ui); font-size: var(--step--2); color: var(--ink-mute); display: block; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.tlrow__t { font-family: var(--f-display); font-size: var(--step-1); font-weight: 700; margin: 0 0 0.35rem; }
.tlrow__b { font-size: var(--step--1); color: var(--ink-soft); margin: 0; line-height: 1.6; max-width: var(--measure); }

/* ---- 24. Documents --------------------------------------------------- */

.docs { display: grid; }
.doc {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding-block: 1.15rem;
  border-bottom: var(--rule);
}
@media (max-width: 48rem) { .doc { grid-template-columns: 1fr; gap: 0.5rem; } }
.doc__no { font-family: var(--f-display); font-size: var(--step-1); font-weight: 800; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.doc__t { font-family: var(--f-display); font-size: var(--step-0); font-weight: 700; margin: 0 0 0.3rem; }
.doc__m { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-family: var(--f-ui); font-size: var(--step--2); color: var(--ink-mute); }
.doc__m b { color: var(--ink-soft); }
.doc[data-kind='missing'] { background: var(--paper-02); }
.doc[data-kind='missing'] .doc__t { color: var(--ink-mute); }

/* ---- 25. Callout note ------------------------------------------------ */

.note {
  padding: 1.5rem 1.6rem;
  background: var(--paper-05);
  border-inline-start: 3px solid var(--ink);
}
.note--blue  { border-inline-start-color: var(--blue); }
.note--red   { border-inline-start-color: var(--red); }
.note--green { border-inline-start-color: var(--green); }
.note__t { font-family: var(--f-display); font-size: var(--step-1); font-weight: 800; margin: 0 0 0.5rem; }
.note__b { margin: 0; color: var(--ink-soft); max-width: var(--measure); line-height: 1.65; font-size: var(--step--1); }
.notegrid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }

/* ---- 26. Programmes ------------------------------------------------- */

.proggrid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.prog { display: grid; gap: 0.5rem; }
.prog .banna { width: 1.5rem; height: 1.5rem; color: var(--blue); }
.prog h3 { font-family: var(--f-display); font-size: var(--step-1); font-weight: 700; margin: 0.4rem 0 0; }
.prog p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; line-height: 1.6; }

/* ---- 27. Media ------------------------------------------------------ */

.vgrid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.vcard { text-decoration: none; color: inherit; display: grid; gap: 0.6rem; }
.vcard__thumb { position: relative; background: var(--ink); aspect-ratio: 16 / 9; overflow: hidden; }
.vcard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease); }
.vcard:hover .vcard__thumb img { transform: scale(1.04); }
.vcard__play {
  position: absolute;
  inset-block-end: 0.6rem;
  inset-inline-start: 0.6rem;
  width: 2.2rem; height: 2.2rem;
  background: var(--red-t);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
}
.vcard__t { font-family: var(--f-display); font-size: var(--step--1); font-weight: 700; line-height: 1.4; margin: 0; }
.vcard__meta { font-family: var(--f-ui); font-size: var(--step--2); color: var(--ink-mute); }

/* ---- 28. Memorial --------------------------------------------------- */

.memo { background: var(--ink); color: #fff; }
.memo__in {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
  padding-block: 1.75rem;
}
.memo__glyph { width: 2rem; height: 2rem; flex: none; color: var(--ink-mute); }
.memo__label {
  font-family: var(--f-ui);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
[dir='rtl'] .memo__label { letter-spacing: 0; text-transform: none; }
.memo__name { font-family: var(--f-display); font-size: var(--step-2); font-weight: 800; margin: 0.3rem 0 0.4rem; }
.memo__years { font-size: var(--step-0); font-weight: 500; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.memo__line { font-size: var(--step--1); color: #B4B4BE; margin: 0; max-width: 60ch; line-height: 1.6; }
.memo .btn { margin-inline-start: auto; }
/* The memorial band is dark but is not .section--dark, so the ghost button
   inherited near-black text on near-black ground. It was invisible. */
.memo .btn--ghost { color: #fff; border-color: rgba(255,255,255,.42); }
.memo .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ---- 29. Emblem ----------------------------------------------------
   The rings appear ONCE per page, at a size where the wordmark and the
   Pashto ring are legible. Never below 80px, never on a dark ground
   (the black ring disappears), never cropped. */

.emblem { display: grid; gap: 0.9rem; justify-items: start; }
.emblem img { width: clamp(160px, 24vw, 260px); height: auto; }
.emblem figcaption { font-family: var(--f-ui); font-size: var(--step--2); color: var(--ink-mute); max-width: 34ch; line-height: 1.5; }

.hqfig { display: grid; gap: 0.8rem; }
.hqfig img { width: 100%; height: auto; }
.hqfig figcaption { font-family: var(--f-ui); font-size: var(--step--2); color: var(--ink-mute); line-height: 1.5; }

/* ---- 30. Credits --------------------------------------------------- */

.credlist { list-style: none; margin: 0; padding: 0; display: grid; }
.credlist li {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: var(--rule);
  font-family: var(--f-ui);
  font-size: var(--step--1);
  color: var(--ink-mute);
}
@media (max-width: 40rem) { .credlist li { grid-template-columns: 1fr; gap: 0.2rem; } }
.credlist b { color: var(--ink); font-weight: 700; }

/* ---- 31. Footer --------------------------------------------------- */

.ftr { background: var(--ink); color: #B4B4BE; padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; }
.ftr__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(14rem, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr));
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
/* The brand column has a hard 14rem floor, so on a phone it cannot sit beside
   even one 9rem link column and the grid ran 30px past the viewport. Stack. */
@media (max-width: 34rem) {
  .ftr__grid { grid-template-columns: 1fr; gap: 1.75rem; }
}
.ftr__brand { display: grid; gap: 0.75rem; align-content: start; }
/* Footer emblem sits on a white plate so the black ring stays visible. */
.ftr__plate { background: #fff; padding: 0.75rem 0.9rem; justify-self: start; }
.ftr__plate img { width: 130px; height: auto; }
.ftr__org { font-family: var(--f-display); font-size: var(--step-0); font-weight: 800; color: #fff; }
.ftr__affil { font-size: var(--step--2); line-height: 1.55; max-width: 34ch; }
.ftr__contact { font-family: var(--f-ui); font-size: var(--step--1); color: #C8C8D2; }
.ftr .ftr__contact a { color: #fff; }
.ftr h4 {
  font-family: var(--f-ui);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.9rem;
}
[dir='rtl'] .ftr h4 { letter-spacing: 0; text-transform: none; font-size: var(--step--1); }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ftr a { color: #B4B4BE; text-decoration: none; font-family: var(--f-ui); font-size: var(--step--1); }
.ftr a:hover { color: #fff; }
.ftr__base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 1.5rem;
}
.ftr__status { font-family: var(--f-ui); font-size: var(--step--2); color: #8A8A94; max-width: 70ch; line-height: 1.55; }

/* ---- 32. Scroll reveal ------------------------------------------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- 33. Print --------------------------------------------------- */

@media print {
  .rev, .hdr, .ftr, .tilefield { display: none; }
  body { color: #000; }
  .section { padding-block: 1rem; }
}

/* Secondary obstacle list on the support page. Deliberately plain: the two
   primary asks above it are cards, and these must not compete with them. */
.oblist { list-style: none; display: grid; gap: 0.9rem; max-width: 60ch; margin: 0; padding: 0; }
.oblist li { padding-inline-start: 1rem; border-inline-start: 2px solid var(--line-firm); line-height: 1.6; color: var(--ink-soft); font-size: var(--step--1); }
.oblist b { color: var(--ink); font-weight: 600; }