/* =========================================================================
   Saudi Aikido Committee - single page
   Visual identity taken from the committee's own posts (it has no website):
   white canvas, two diagonal purple wedges under a black-ink header, a small
   purple tagline tag, chunky purple display titles with a lighter offset
   shadow and a trailing colon, bold black Arabic body text, red rounded
   pills, red hexagon bullets, violet photo bands with a red halftone wave,
   a dark-green text box, and deep-green infographics.
   Sampled colours: royal purple #5818E0, violet #7008F8 (and the photo
   posts' #4F02F0), heading purple #6A48A0, red #E81820, the weapons post's
   orange-red #FC3200, dark green #186018, infographic green #005030.
   Fonts: Lalezar (titles - the posts' display face), Tajawal (body),
   Yuji Mai (the brush 合氣道 only).
   ========================================================================= */

:root {
  --purple: #5818e0;          /* wedges, tagline tag, hero title */
  --violet: #7008f8;          /* violet sheen / gradients */
  --violet-deep: #4f02f0;     /* middle of the photo posts' violet overlay */
  --purple-head: #6a48a0;     /* section titles */
  --purple-shadow: #cfc3ea;   /* lighter offset shadow under titles */
  --red: #e81820;             /* pills, hexagon bullets (ueshiba / women posts) */
  --red-dark: #c4121a;
  --red-orange: #fc3200;      /* pill, hexagons and dots of the weapons post */
  --green: #186018;           /* text box (stage-demo post) */
  --green-info: #005030;      /* infographic rules and text */
  --ink: #141414;             /* body text, footer */
  --ink-soft: #3d3d3d;
  --white: #ffffff;

  --shadow-post: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 10px 24px -14px rgba(0, 0, 0, 0.28);   /* hairline so white posts read as tiles */
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.05), 0 10px 26px -16px rgba(0, 0, 0, 0.3);
  --r-post: 0;                /* the posts are square tiles */
  --r-card: 16px;

  --container: 1140px;
  --gutter: 24px;
  --header-h: 76px;

  --font-display: "Lalezar", "Tajawal", Tahoma, sans-serif;
  --font: "Tajawal", Tahoma, "Segoe UI", sans-serif;
  --font-brush: "Yuji Mai", "Yu Mincho", serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.75;
  overflow-x: clip;
}

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

h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }

a { color: inherit; }

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

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

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--purple);
  color: var(--white);
  text-decoration: none;
  border-radius: 8px;
  transform: translateY(-180%);
  transition: transform 0.15s ease;
}
.skip-link:focus { transform: none; }
.skip-link:focus-visible { outline-color: var(--red); }

.container {
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Shared type: display titles, tagline tag, pills, hexagon bullets
   ------------------------------------------------------------------------- */

/* "فلسفة الآيكيدو:" - Lalezar purple with a lighter offset shadow */
.section-title {
  margin-bottom: 36px;
  color: var(--purple-head);
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 62px);
  font-weight: 400;
  line-height: 1.25;
  text-shadow: 0.055em 0.055em 0 var(--purple-shadow);
}

.section-title--light {
  color: var(--white);
  text-shadow: 0.055em 0.055em 0 rgba(255, 255, 255, 0.28);
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 36px;
}
.section-head .section-title { margin-bottom: 0; }

.sub-title {
  margin-bottom: 14px;
  color: var(--purple-head);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.35;
  text-shadow: 0.055em 0.055em 0 var(--purple-shadow);
}

.split__text > p + p,
.split__text > p + .sub-title { margin-top: 18px; }

.split__text > .benefits + .sub-title { margin-top: 30px; }

.mini-title {
  margin: 30px 0 14px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
}

.ja { font-family: var(--font-brush); font-weight: 400; font-synthesis: none; text-shadow: none; color: var(--ink); }

/* the small purple tag with white text (and its tiny white dot) */
.tag {
  position: relative;
  display: inline-block;
  padding: 3px 22px 3px 30px;
  background: var(--purple);
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}
.tag::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: currentColor;
}
.tag--light { background: var(--white); color: var(--purple); }

/* red rounded pill with white bold text */
.pill {
  display: inline-block;
  padding: 4px 18px;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.6;
}
.pill--lg {
  padding: 10px 26px;
  border-radius: 34px;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.55;
}
.pill--xl {
  padding: 18px 34px;
  border-radius: 46px;
  font-size: clamp(21px, 2.3vw, 30px);
  line-height: 1.6;
  box-shadow: 0 16px 34px -16px rgba(80, 0, 10, 0.55);
}
.pill--purple { background: var(--purple); }

/* red hexagon bullets */
.hex-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.hex-list li {
  position: relative;
  padding-inline-start: 38px;
  font-size: 19px;
}
.hex-list li + li { margin-top: 10px; }
.hex-list li::before {
  content: "";
  position: absolute;
  top: 0.42em;
  right: 0;
  width: 22px;
  height: 24px;
  background: var(--red);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.hex-list--big li { font-size: clamp(19px, 1.8vw, 22px); font-weight: 800; }

/* the philosophy post's plain "1. 2. 3." list */
.num-list {
  margin: 18px 0 0;
  padding: 0;
  padding-inline-start: 1.5em;
  list-style: decimal;
}
.num-list li { padding-inline-start: 0.3em; font-size: 19px; }
.num-list li + li { margin-top: 8px; }
.num-list li::marker { font-weight: 800; }

.nobr { white-space: nowrap; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 26px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.btn--purple { background: var(--purple); color: var(--white); }
.btn--red { background: var(--red); color: var(--white); }
@media (hover: hover) {
  .btn--purple:hover { background: #4510c0; }
  .btn--red:hover { background: var(--red-dark); }
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 1px 0 rgba(88, 24, 224, 0.12), 0 6px 18px -12px rgba(0, 0, 0, 0.25);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  min-height: var(--header-h);
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  text-decoration: none;
  border-radius: 8px;
}

.brand__logo { width: 56px; height: 56px; }

.brand__text { display: flex; flex-direction: column; }

.brand__name {
  color: var(--purple-head);
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.2;
}

.brand__latin {
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 8px 8px;               /* 9 links + the logo fit one row down to 1181px (measured) */
  border-radius: 999px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

@media (hover: hover) {
  .site-nav a:hover { color: var(--purple); background: rgba(88, 24, 224, 0.08); }
}

.site-nav .site-nav__cta { margin-inline-start: 4px; background: var(--purple); color: var(--white); padding-inline: 14px; }
@media (hover: hover) {
  .site-nav .site-nav__cta:hover { background: #4510c0; color: var(--white); }
}

.nav-toggle {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--purple);
  color: var(--white);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  position: absolute;
  left: 13px;
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle__bars { top: 23px; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   Hero (the post header, rebuilt in vector so it stays sharp at any width)
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  padding: 40px 0 0;
}

.hero__copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: clamp(120px, 12.5vw, 180px);   /* clears the wedges, which rise over the bottom of the hero */
}

/* the h1 holds the display title, the tagline tag and the committee name, in that order */
.hero__heading { display: flex; flex-direction: column; align-items: flex-start; }

.hero__title {
  color: var(--purple);
  font-family: var(--font-display);
  font-size: clamp(84px, 11vw, 168px);
  font-weight: 400;
  line-height: 1.12;
  text-shadow: 0.045em 0.04em 0 #d9ccff;
}

.hero__tag {
  margin-top: 4px;
  padding: 5px 26px 5px 38px;
  font-size: clamp(17px, 1.6vw, 21px);
}
.hero__tag::after { left: 14px; width: 5px; height: 5px; margin-top: -2.5px; }

.hero__name {
  margin-top: 22px;
  color: var(--ink);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.4;
}

.hero__lead {
  max-width: 34em;
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* the vertical 合氣道 brush column beside the round logo, flat on white (aikido-overview.jpg).
   The art sits on the bottom edge: the brush column lands over the dip between the two wedges,
   which slice across its foot; the logo is lifted a little so it stays clear on white */
.hero__art {
  position: relative;
  z-index: 1;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3.4vw, 48px);
  margin-bottom: clamp(0px, 0.8vw, 12px);
}

.hero__logo {
  flex: none;
  width: 172px;            /* shown below its natural 210px */
  height: 172px;
  transform: translateY(-14%);
}

.hero__brush {
  flex: none;
  color: #111;
  font-family: var(--font-brush);
  font-size: 120px;
  font-weight: 400;        /* Yuji Mai has one weight: never let the browser fake a bold */
  font-synthesis: none;
  line-height: 1.02;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.wedges {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: clamp(110px, 14vw, 210px);
  margin-top: calc(-1 * clamp(90px, 11vw, 160px));
}

/* the same wedges as the top edge of the president section */
.wedges--divider {
  height: clamp(54px, 6.5vw, 96px);
  margin-top: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__title, .hero__tag, .hero__name { animation: aik-rise 0.7s ease-out both; }
  .hero__tag { animation-delay: 0.08s; }
  .hero__name { animation-delay: 0.14s; }
}

@keyframes aik-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* scroll reveal (script.js tags only content below the first screen): fade in + rise, once */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {                 /* .js raises it above element rules that set their own transition (e.g. contact cards) */
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* -------------------------------------------------------------------------
   Sections and the text + post rows
   ------------------------------------------------------------------------- */
.section { padding: 72px 0 80px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: center;
  gap: 56px;
}
.split + .split { margin-top: 72px; }
.split--top { align-items: start; }
@media (min-width: 1000px) {
  .section-head + .split,
  .section-title + .split { align-items: start; }
  .section-head + .split > .split__text,
  .section-title + .split > .split__text { padding-top: 8px; }
}
.split--flip { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
.split--flip > .post { order: -1; }

/* rows with a short text: a slightly smaller post and larger type */
.split--short .post { max-width: 400px; }
.split--short .post--tall { max-width: 340px; }   /* stage-demo.jpg is 2:3, the tallest post */
.split--short .split__text > p:not([class]) { font-size: 20px; line-height: 1.8; }

.split__text { max-width: 620px; }
.split__text > p:not([class]) { text-wrap: pretty; }

/* a committee post: a square tile, opens full size in the lightbox */
.post {
  justify-self: center;
  width: 100%;
  max-width: 460px;          /* posts are 738px wide: shown smaller, never larger */
}

.post__link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-post);
  background: #eee;
  box-shadow: var(--shadow-post);
}
.post__link:focus-visible { outline-offset: 5px; border-radius: var(--r-post); }

.post__link img { width: 100%; height: auto; }

.post__zoom {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;                 /* hidden so it never covers the artwork; shown on hover / keyboard focus */
  transition: opacity 0.15s ease;
}
.post__link:hover .post__zoom,
.post__link:focus-visible .post__zoom { opacity: 0.92; }
.post__zoom::before,
.post__zoom::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--white);
  border-radius: 2px;
}
.post__zoom::before { width: 16px; height: 2.5px; margin: -1.25px 0 0 -8px; }
.post__zoom::after { width: 2.5px; height: 16px; margin: -8px 0 0 -1.25px; }
@media (hover: none) {         /* touch: nothing else says a post opens full size, so the badge stays (logo-free corner) */
  .post__zoom { opacity: 0.9; width: 34px; height: 34px; bottom: 8px; left: 8px; }
}

.post figcaption {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

/* founding / affiliation facts */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
  margin-top: 28px;
}
.facts dt {                  /* the posts' purple tag */
  position: relative;
  display: inline-block;
  padding: 1px 16px 1px 24px;
  background: var(--purple);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
.facts dt::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 9px;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: currentColor;
}
.facts dd {
  margin-top: 6px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.55;
}

/* committee milestones */
.timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 6px;
  width: 3px;
  border-radius: 2px;
  background: var(--purple);
}
.timeline li {
  position: relative;
  padding-inline-start: 32px;
}
.timeline li + li { margin-top: 14px; }
.timeline li::before {
  content: "";
  position: absolute;
  top: 9px;
  right: 0;
  width: 15px;
  height: 16px;
  background: var(--red);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.timeline__date {
  display: inline-block;
  color: var(--purple);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
}
.timeline p { font-size: 17px; line-height: 1.65; }

/* vision & mission cards */
.vm { display: grid; gap: 26px; margin-top: 6px; }
.vm__tag { margin-bottom: 10px; font-size: 18px; }
.vm__card p { color: var(--purple-head); font-size: 19px; font-weight: 800; line-height: 1.75; }

/* benefits */
.benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  margin-top: 18px;
}

.benefits__card .pill { margin-bottom: 10px; font-size: 15.5px; }
.benefits__card p { font-size: 16.5px; line-height: 1.7; }

/* techniques + balance: two posts side by side, each with its statement */
.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  margin-top: 80px;
}
.pair__item { display: flex; flex-direction: column; align-items: center; gap: 26px; }

.statement {
  max-width: 460px;
  color: var(--purple-head);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.3vw, 31px);
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
  text-shadow: 0.05em 0.05em 0 var(--purple-shadow);
}
.statement--ink {
  color: var(--ink);
  font-family: var(--font);
  font-weight: 800;
  text-shadow: none;
}
.statement__lead {
  display: block;
  color: var(--purple-head);
  font-family: var(--font-display);
  font-weight: 400;
  text-shadow: 0.05em 0.05em 0 var(--purple-shadow);
}

/* -------------------------------------------------------------------------
   Weapons (violet photo band)
   ------------------------------------------------------------------------- */
.weapons,
.principle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* the photo posts' violet: brighter and more vivid toward the bottom corner, never toward blue */
  background: linear-gradient(160deg, var(--purple) 0%, var(--violet-deep) 50%, var(--violet) 100%);
  color: var(--white);
}

.weapons { padding: 72px 0 110px; }

.weapons__inner { position: relative; z-index: 1; }

/* red halftone wave (big dots bottom-left, shrinking toward the crest): the whole 16:9 drawing
   is shown, anchored bottom-left as in the posts (separate files in assets/) */
.dots {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: min(66%, 940px);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: left bottom;
  pointer-events: none;
}
/* colour lives in the file: halftone-red.svg (#e81820), halftone-orange.svg (#fc3200, weapons band) */

.weapons .pill--lg { margin-bottom: 26px; background: var(--red-orange); }

/* three plain columns as on the weapons post: hexagon bullet, bold name with a colon, small text.
   Three columns once the text column is wide enough (about 230px of text each), otherwise stacked rows. */
.weapons .split__text { container-type: inline-size; }

.weapon-list {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@container (min-width: 760px) {
  .weapon-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

.weapon {
  position: relative;
  padding-inline-start: 40px;
}
.weapon::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 0;
  width: 26px;
  height: 29px;
  background: var(--red-orange);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.weapon__name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
}
.weapon p { font-size: 16.5px; line-height: 1.7; }

/* the caption sits on the red dots, so it gets a solid purple backing (white on #5818e0 = 7:1) */
.post--on-dark figcaption {
  width: fit-content;
  margin-inline: auto;
  padding: 2px 14px;
  border-radius: 999px;
  background: var(--purple);
  color: var(--white);
}
.weapons :focus-visible,
.principle :focus-visible { outline-color: var(--white); }
.post--on-dark .post__link { box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.25); }
.post--on-dark .post__zoom { background: var(--red); }

/* -------------------------------------------------------------------------
   Aikido for everyone
   ------------------------------------------------------------------------- */
.lead-line {
  margin-top: 18px;
  color: var(--purple-head);
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1.45;
  text-shadow: 0.05em 0.05em 0 var(--purple-shadow);
}
.split__text > .lead-line + p { margin-top: 14px; }

.green-box {
  margin-top: 18px;
  padding: 22px 26px;
  background: var(--green);
  color: var(--white);
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.8;
}

.join-line {
  margin-top: 22px;
  color: var(--purple-head);
  font-family: var(--font-display);
  font-size: clamp(27px, 2.7vw, 36px);
  font-weight: 400;
  line-height: 1.45;
  text-shadow: 0.05em 0.05em 0 var(--purple-shadow);
}
.join-line + p { margin-top: 22px; }

/* principle band (ueshiba-quote post) */
.principle { margin: 80px 0; padding: 64px 0; }

.principle__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  align-items: center;
  gap: 56px;
}

.principle__text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }

.principle .post { max-width: 400px; }

/* -------------------------------------------------------------------------
   President's word (layout after skf.sa; colours/fonts from the posts)
   ------------------------------------------------------------------------- */
.president {
  position: relative;
  background: var(--white);
  padding: 0 0 84px;
}
.president .wedges--divider { margin-bottom: 56px; }

.president__title {
  margin-bottom: 48px;
  color: var(--purple-head);
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0.05em 0.05em 0 var(--purple-shadow);
}

.president__title .president__mark {
  padding: 0 0.32em;
  border-radius: 999px;
  background: var(--purple);
  color: var(--white);
  text-shadow: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.president__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 56px;
  align-items: start;
  max-width: 980px;
  margin-inline: auto;
}

.president__message {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.8;
  text-align: justify;
}

/* paragraphs pasted in place of the pending block */
.president__message > p:not([class]) { margin-bottom: 1em; }

.president__basmala {
  margin-bottom: 24px;
  font-weight: 800;
  text-align: start;
}

/* placeholder until the message arrives: a plain purple-ruled box on white */
.president__pending {
  padding: 46px 32px;
  border: 2px solid var(--purple);
  text-align: center;
}
.president__pending p {
  color: var(--purple-head);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.6;
  text-wrap: balance;
}

.president__signature {
  margin-top: 34px;
  text-align: start;
}
.president__signature p { text-wrap: balance; }

.president__role {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.75;
}

.president__name {
  margin-top: 6px;
  color: var(--purple-head);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.5;
}

.president__portrait { display: flex; justify-content: center; }

.portrait-frame {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 10;
  overflow: hidden;
  border: 4px solid var(--purple);
  background: var(--white);
  box-shadow: var(--shadow-post);
}

.portrait-frame__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.portrait-frame:has(.portrait-frame__photo) .portrait-frame__placeholder { display: none; }

.portrait-frame__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
}

.portrait-frame__emblem {
  width: 50%;
  max-width: 150px;
  opacity: 0.2;
  filter: grayscale(0.3);
}

.portrait-frame__caption {
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
}

/* -------------------------------------------------------------------------
   Achievements (deep-green infographic style)
   ------------------------------------------------------------------------- */
.stats-title {
  color: var(--ink);
  font-size: clamp(22px, 2.1vw, 27px);
  font-weight: 800;
  line-height: 1.5;
  text-wrap: balance;
}

.stats-note {
  margin-top: 6px;
  color: var(--green-info);
  font-size: 15px;
  font-weight: 700;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
  margin-top: 24px;
}

.stat {                  /* the infographic's thin green rule, then black bold text */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  padding: 4px 0;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--green-info);
}
.stat--wide { grid-column: 1 / -1; }

.stat dt {
  color: #1a1a1a;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
}

.stat dd {
  color: #1a1a1a;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
}
.stat dd span { font-size: 16px; font-weight: 800; }

/* -------------------------------------------------------------------------
   Contact: cards + dark band
   ------------------------------------------------------------------------- */
.section.contact { padding-bottom: 0; }   /* the band runs straight into the footer (also on phones) */

.contact .section-title { margin-bottom: 14px; }

.contact__intro {
  max-width: 760px;
  color: var(--ink-soft);
  font-size: 19px;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));   /* email, X, Instagram, Snapchat, HQ */
  gap: 18px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.contact-grid > li { display: flex; }

.contact-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px 18px 22px;
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease;
}
a.contact-card:focus-visible { outline-offset: 4px; border-radius: var(--r-card); }
@media (hover: hover) {
  a.contact-card:hover { transform: translateY(-3px); }
  a.contact-card:hover .contact-card__value { color: var(--purple); }
}

.contact-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);
}
.contact-card__icon svg { width: 24px; height: 24px; fill: currentColor; }

.contact-card__label { color: var(--ink-soft); font-size: 15px; font-weight: 700; line-height: 1.5; }
.contact-card__value { font-size: 19px; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }

.contact-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 64px;
  background: linear-gradient(160deg, var(--purple) 0%, var(--violet-deep) 55%, var(--violet) 100%);
  color: var(--white);
}

.contact-band .dots { width: min(50%, 700px); }

/* three columns in source order: title | contact lines | social buttons. The buttons (opaque white)
   take the column over the dot wave, so no text sits on the dots */
.contact-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 24px;
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  min-height: 190px;
  margin-inline: auto;
  padding: 40px 0;
}

.contact-band__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 3.6vw, 48px);
  font-weight: 400;
  line-height: 1.2;
  text-shadow: 0.055em 0.055em 0 rgba(255, 255, 255, 0.28);
}

.social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social a {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--white);
  color: var(--purple);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.5);
  transition: background-color 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
  .social a:hover { background: var(--red); color: var(--white); }
}
.social svg { width: 25px; height: 25px; fill: currentColor; }

.contact-band__lines { font-size: 19px; font-weight: 700; line-height: 1.5; }
.contact-band__lines p + p { margin-top: 10px; }
.contact-band__label { color: #e4dcff; }
.contact-band__lines a { text-decoration: none; }
.contact-band__lines a:hover { text-decoration: underline; text-underline-offset: 4px; }

.contact-band :focus-visible { outline-color: var(--white); }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.88);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  min-height: 76px;
  margin-inline: auto;
  padding: 18px 0;
}

.site-footer p { font-size: 14px; font-weight: 500; line-height: 1.6; }
.site-footer__latin { letter-spacing: 0.04em; opacity: 0.7; }

/* -------------------------------------------------------------------------
   Talent selection criteria (the committee's PDF as HTML): issuer + download,
   age-group pill tabs, weight bar, criteria columns, selection indicators, 7 principles
   ------------------------------------------------------------------------- */
.talent__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: 34px;
}
.talent__lead { flex: 1 1 520px; max-width: 760px; font-size: 19px; }
.talent__lead p:not([class]) { text-wrap: pretty; }
.principles .sub-title { text-wrap: balance; }
.talent__issuer { margin-bottom: 4px; color: var(--purple); font-weight: 800; }

.talent__file { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.talent__download { gap: 10px; }
.talent__download svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.talent__meta { color: var(--ink-soft); font-size: 14px; font-weight: 500; }
.talent__meta a { display: inline-block; margin-block: -11px; padding: 11px 4px; color: var(--purple); font-weight: 700; }

/* age-group tabs: outlined pills, the selected one filled purple (hidden without JS: all panels show) */
.talent__tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
html:not(.js) .talent__tabs { display: none; }

.talent__tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 160px;
  padding: 9px 26px 10px;
  border: 2px solid var(--purple);
  border-radius: 999px;
  background: var(--white);
  color: var(--purple);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.talent__tab-name { font-size: 20px; font-weight: 800; line-height: 1.35; }
.talent__tab-age { font-size: 14px; font-weight: 700; line-height: 1.4; }
.talent__tab[aria-selected="true"] { background: var(--purple); color: var(--white); }
@media (hover: hover) {
  .talent__tab[aria-selected="false"]:hover { box-shadow: inset 0 0 0 2px var(--purple); }
}
@media (forced-colors: active) {   /* high-contrast mode drops backgrounds: keep the selected tab and the bar segments visible */
  .talent__tab[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .weights__seg { border: 1px solid CanvasText; }
}

.js .talent-panel:not(.is-active) { display: none; }
html:not(.js) .talent-panel + .talent-panel { margin-top: 56px; }
@media (prefers-reduced-motion: no-preference) {
  .talent-panel.is-entering { animation: aik-rise 0.45s ease-out both; }
}
@media print {                     /* paper gets all three age groups, no tab pills */
  .talent__tabs { display: none; }
  .js .talent-panel:not(.is-active) { display: block; }
  .talent-panel + .talent-panel { margin-top: 40px; }
}

.talent-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 18px;
  margin-bottom: 16px;
}
.talent-panel__title {          /* the site's title style (= .sub-title without its bottom margin) */
  color: var(--purple-head);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.35;
  text-shadow: 0.055em 0.055em 0 var(--purple-shadow);
}
.talent-panel__age { color: var(--purple); font-size: 18px; font-weight: 800; }
.talent-panel__note { flex-basis: 100%; color: var(--ink-soft); font-size: 18px; }

/* weight bar: one segment per criteria group, width = its share of the score */
.weights__seg--phys, .criteria__group--phys { --c: var(--purple); }
.weights__seg--tech, .criteria__group--tech { --c: var(--red); }
.weights__seg--mind, .criteria__group--mind { --c: var(--purple-head); }
.weights__seg--beh,  .criteria__group--beh  { --c: var(--green); }

.weights { display: flex; gap: 3px; margin-bottom: 30px; }
.weights__seg {
  flex: var(--w) 1 0%;
  min-width: 0;
  padding: 6px 8px;
  background: var(--c);
  color: var(--white);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}
.weights__seg:first-child { border-start-start-radius: 999px; border-end-start-radius: 999px; }
.weights__seg:last-child { border-start-end-radius: 999px; border-end-end-radius: 999px; }

/* criteria columns: a rule in the group's bar colour, bold title, red hexagon bullets */
.criteria { display: grid; gap: 28px 32px; }
.criteria--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.criteria--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.criteria__group { padding-top: 14px; border-top: 4px solid var(--c); }
.criteria__title { color: var(--ink); font-size: 19px; font-weight: 800; line-height: 1.45; }
.criteria__pct { color: var(--c); unicode-bidi: isolate; }   /* "(30%)": % on the right, as everywhere else on the site */
.criteria__list { margin-top: 12px; }
.criteria__list li { padding-inline-start: 30px; font-size: 17px; line-height: 1.6; }
.criteria__list li + li { margin-top: 8px; }
.criteria__list li::before { top: 0.4em; width: 17px; height: 19px; }

/* selection indicators: the stage-demo post's dark-green box with white text */
.talent-pass {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 30px;
  margin-top: 34px;
  padding: 18px 26px;
  background: var(--green);
  color: var(--white);
}
.talent-pass__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
}
.talent-pass__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 17px;
  font-weight: 700;
  overflow-x: clip;                 /* hides the separator dot of an item that starts a new line */
}
.talent-pass__list li { position: relative; }
.talent-pass__list li + li::before {          /* small dot between indicators */
  content: "";
  position: absolute;
  top: 50%;
  right: -17px;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.talent-pass__num { font-size: 30px; font-weight: 800; line-height: 1; unicode-bidi: isolate; }

/* the seven assessment principles: purple hexagon numbers, Arabic text, the English term under it */
.principles { margin-top: 64px; }
.principles__head p { font-size: 19px; }
.principles__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px 28px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.principles__item { display: flex; align-items: flex-start; gap: 14px; }
.principles__num {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 44px;
  background: var(--red);           /* red hexagons, as on the posts and the rest of the page */
  color: var(--white);
  font-size: 19px;
  font-weight: 800;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.principles__text { padding-top: 6px; font-size: 18px; font-weight: 700; line-height: 1.5; }
.principles__term { color: var(--purple); font-weight: 800; }

@media (max-width: 1000px) {
  .criteria--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .criteria--3 { grid-template-columns: minmax(0, 1fr); }
  .talent__file { align-items: stretch; width: 100%; text-align: center; }
  .talent-pass { padding: 16px 18px; }
}
@media (max-width: 600px) {
  .criteria--4 { grid-template-columns: minmax(0, 1fr); }
  .talent__tabs { flex-wrap: nowrap; gap: 8px; }
  .talent__tab { flex: 1 1 0; min-width: 0; padding: 8px 6px 9px; }
  .talent__tab-name { font-size: 17px; }
  .talent__tab-age { font-size: 12.5px; }
  .weights__seg { padding: 5px 2px; font-size: 13px; }
  .talent-pass__list { flex-direction: column; align-items: flex-start; gap: 6px; }
  .talent-pass__list li + li::before { display: none; }
}

/* -------------------------------------------------------------------------
   Regulations: document library (purple rule, page icon, display title, contents in <details>,
   outlined "view" + purple "download") and the discipline / appeal committee rosters
   ------------------------------------------------------------------------- */
.section.regs { padding-top: 0; }   /* the purple wedges open the section, as in the president section */
.regs .wedges--divider { margin-bottom: 56px; }
.regs__intro { max-width: 760px; margin-bottom: 40px; color: var(--ink-soft); font-size: 19px; text-wrap: pretty; }
.regs__subtitle { margin: 44px 0 26px; }

.btn--outline { background: var(--white); color: var(--purple); box-shadow: inset 0 0 0 2px var(--purple); }
@media (hover: hover) {
  .btn--outline:hover { background: var(--purple); color: var(--white); }
}

/* three documents a row; the four parts of each card (head, description, buttons, contents) share
   row tracks with its neighbours (subgrid), so titles, buttons and "contents" line up across the row */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 52px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 14px;
  align-content: start;
  padding-top: 18px;
  border-top: 4px solid var(--purple);
}
.doc > * { min-width: 0; }

.doc__head { display: flex; align-items: flex-start; gap: 14px; }
.doc__icon { flex: none; width: 44px; height: 51px; margin-top: 2px; }
.doc__heading { min-width: 0; }

.doc__title {
  color: var(--purple-head);
  font-family: var(--font-display);
  font-size: clamp(23px, 2vw, 26px);
  font-weight: 400;
  line-height: 1.35;
  text-wrap: balance;
  text-shadow: 0.055em 0.055em 0 var(--purple-shadow);
}

.doc__meta { margin-top: 4px; color: var(--ink-soft); font-size: 14.5px; font-weight: 700; line-height: 1.5; }

.doc__desc { font-size: 16.5px; line-height: 1.75; text-wrap: pretty; }
.doc__desc a { color: var(--purple); font-weight: 800; text-underline-offset: 3px; }

.doc__actions { display: flex; flex-wrap: wrap; gap: 10px; align-self: end; }
.doc__btn { flex: 1 1 0; gap: 8px; min-width: max-content; min-height: 46px; padding: 6px 18px; font-size: 17px; }
.doc__btn svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* contents: a full-width disclosure row with a chevron, opening onto the timeline's purple rule + red hexagons */
.doc__toc { border-top: 1px solid rgba(0, 0, 0, 0.12); }
.doc__toc summary {
  display: flex;
  align-items: center;
  gap: 4px 12px;
  min-height: 48px;
  padding: 8px 0;
  color: var(--purple);
  cursor: pointer;
  list-style: none;
}
.doc__toc summary::-webkit-details-marker { display: none; }
.doc__toc summary::after {          /* chevron at the end of the row: down when closed, up when open */
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-inline-start: auto;
  margin-top: -5px;
  border-bottom: 2.5px solid currentColor;
  border-left: 2.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
.doc__toc[open] summary::after { margin-top: 5px; transform: rotate(135deg); }
.doc__toc summary:focus-visible { outline-offset: 2px; }
@media (hover: hover) {
  .doc__toc summary:hover .doc__toc-label { text-decoration: underline; text-underline-offset: 4px; }
}
.doc__toc-label { font-size: 17px; font-weight: 800; }
.doc__toc-count { color: var(--ink-soft); font-size: 14.5px; font-weight: 700; }

.toc {
  position: relative;
  margin: 4px 0 8px;
  padding: 0;
  list-style: none;
}
.toc::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 5px;
  width: 2px;
  border-radius: 2px;
  background: var(--purple);
}
.toc li { position: relative; padding-inline-start: 26px; }
.toc li + li { margin-top: 12px; }
.toc li::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 0;
  width: 12px;
  height: 13px;
  background: var(--red);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.toc__label { margin-inline-end: 6px; color: var(--purple); font-size: 14.5px; font-weight: 800; line-height: 1.5; }
.toc__arts { color: var(--ink-soft); font-size: 14px; font-weight: 500; line-height: 1.5; }
.toc__title { display: block; font-size: 16px; font-weight: 700; line-height: 1.55; }

/* committee rosters: two columns, a rule, the committee name, then one row per member with a role chip */
.formation { margin-top: 80px; }
.formation .regs__subtitle { margin: 0 0 8px; }
.formation__note { color: var(--ink-soft); font-size: 18px; }
.formation__note a { color: var(--purple); font-weight: 800; text-underline-offset: 3px; }

.formation__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* discipline, appeals, disputes */
  gap: 32px 40px;
  margin-top: 30px;
}
.committee__basis { margin-top: 2px; color: var(--ink-soft); font-size: 15px; font-weight: 500; line-height: 1.6; }

.committee { padding-top: 16px; border-top: 4px solid var(--purple); }
.committee__name {
  color: var(--purple-head);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1.3;
  text-shadow: 0.055em 0.055em 0 var(--purple-shadow);
}

.committee__members { margin: 8px 0 0; padding: 0; list-style: none; }

.member {                          /* name | role chip: the chip stays beside the name, which wraps on phones */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.member__name {
  position: relative;
  padding-inline-start: 28px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.5;
}
.member__name::before {             /* red hexagon bullet, as on the posts */
  content: "";
  position: absolute;
  top: 0.4em;
  right: 0;
  width: 15px;
  height: 17px;
  background: var(--red);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.member__hon { color: var(--ink-soft); font-size: 16px; font-weight: 700; }

/* role chips: chair = filled red pill, secretary = green outline, member = plain grey text (no chip) */
.member__role {
  padding: 2px 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px currentColor;
  color: var(--purple);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
}
.member__role--chair { background: var(--red); color: var(--white); box-shadow: none; }
.member__role--secretary { color: var(--green); }
.member__role:not(.member__role--chair, .member__role--secretary) { padding: 0; box-shadow: none; color: var(--ink-soft); font-weight: 700; }
@media (forced-colors: active) {   /* high contrast drops backgrounds and shadows: keep the chips and buttons outlined */
  .member__role { border: 2px solid CanvasText; box-shadow: none; }
  .member__role:not(.member__role--chair, .member__role--secretary) { border: 0; }
  .doc__btn { border: 2px solid currentColor; }
  /* the menu button draws its bars with backgrounds, which forced colours remove */
  .nav-toggle { border: 2px solid ButtonText; }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { forced-color-adjust: none; background: ButtonText; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  .btn, .site-nav__cta, .contact-card { border: 2px solid currentColor; }
}

@media (max-width: 1100px) {
  .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  .formation__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {          /* the rosters stack before the names would wrap in two narrow columns; capped so the role stays near the name */
  .formation__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 640px; }
}
@media (max-width: 767px) {
  .regs .wedges--divider { margin-bottom: 36px; }
  .regs__intro { margin-bottom: 30px; font-size: 18px; }
  .regs__subtitle { margin: 36px 0 22px; }
  .formation { margin-top: 64px; }
}
@media (max-width: 480px) {          /* phones: the role drops under the name, aligned with the name text */
  .member { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .member__role { justify-self: start; margin-inline-start: 28px; }
}
@media (max-width: 640px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .doc { display: flex; flex-direction: column; gap: 14px; }
  .doc__actions { align-self: stretch; }
  .member__name { font-size: 18px; }
}

/* -------------------------------------------------------------------------
   Lightbox
   ------------------------------------------------------------------------- */
/* full-screen viewer: toolbar on top, the picture in the middle (zoom + pan), a hint underneath */
.lightbox {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #111111;          /* fully dark: nothing of the page shows through behind the toolbar */
  color: var(--white);
  overflow: hidden;
}
.lightbox[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* screen width: a long caption cuts off with "…" instead of widening the viewer */
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.lightbox:focus,
.lightbox:focus-visible { outline: none; }      /* no purple focus frame around the whole viewer */
.lightbox::backdrop { background: transparent; }   /* the dialog itself is the dark layer */

/* the page behind the open lightbox does not scroll */
html:has(.lightbox[open]) { overflow: hidden; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
}

.lightbox__caption {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lightbox__tools { display: flex; flex-shrink: 0; gap: 8px; }

.lightbox__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.lightbox__btn svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.26); }
.lightbox__btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }   /* aria-disabled keeps keyboard focus on the button */
.lightbox__btn[aria-disabled="true"]:hover { background: rgba(255, 255, 255, 0.14); }
.lightbox__btn:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.lightbox__close { background: var(--red); }
.lightbox__close:hover { background: var(--red-dark); }

.lightbox__stage {
  position: relative;          /* offsetParent of the picture: the zoom maths works in stage coordinates */
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);   /* the cell is the stage, so max-width/height: 100% fit the picture to it */
  place-items: center;
  padding: 0 16px;
  overflow: hidden;
  touch-action: none;          /* pinch and drag are handled in script.js */
  user-select: none;
}

.lightbox__img {
  width: auto;
  height: auto;
  max-width: min(738px, 100%);     /* fits the screen; zoom goes beyond */
  max-height: 100%;
  background: #eee;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8);
  transform-origin: 0 0;
  cursor: zoom-in;
  -webkit-user-drag: none;
}
.lightbox__img.is-zoomed { cursor: grab; }
.lightbox__img.is-dragging { cursor: grabbing; }
.lightbox__img.is-animating { transition: transform 0.2s ease; }

.lightbox__hint {
  margin: 0;
  padding: 10px 16px 14px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.lightbox__hint--touch { display: none; }
@media (pointer: coarse) {
  .lightbox__hint--mouse { display: none; }
  .lightbox__hint--touch { display: inline; }
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .site-header__inner { gap: 12px; }
  .site-nav a { padding-inline: 6px; font-size: 14.5px; }
  .site-nav .site-nav__cta { padding-inline: 12px; }
  .brand { gap: 10px; }
  .brand__logo { width: 50px; height: 50px; }
  .brand__name { font-size: 20px; }

  .hero__logo { width: 140px; height: 140px; }
  .hero__brush { font-size: 100px; }
}

@media (max-width: 1059px) {          /* 1000-1059px: the full nav still fits beside the logo (measured: 693px of 709px at 1000px) */
  .site-nav a { padding-inline: 5px; font-size: 14px; }
  .site-nav .site-nav__cta { padding-inline: 11px; }
}

@media (max-width: 999px) {
  /* without JavaScript the links simply wrap under the brand; with it they fold into the menu button */
  .site-header__inner { flex-wrap: wrap; }
  .site-nav { flex-basis: 100%; }
  html:not(.js) .site-header { position: static; }
  html:not(.js) .site-nav ul { width: 100%; }

  .js .site-header__inner { flex-wrap: nowrap; }
  .js .nav-toggle { display: block; }
  .js .site-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    max-height: calc(100vh - var(--header-h));    /* fallback for browsers without dvh */
    max-height: calc(100dvh - var(--header-h));   /* landscape phones: the menu scrolls instead of running off screen */
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--white);
    box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.35);
  }
  .js .site-nav.is-open { display: block; }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: min(var(--container), calc(100% - 2 * var(--gutter)));
    margin-inline: auto;
    padding: 10px 0 18px;
  }
  .site-nav a { padding: 11px 14px; border-radius: 12px; font-size: 17px; }
  .site-nav .site-nav__cta { margin: 6px 0 0; padding-inline: 14px; text-align: center; }

  .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
  .hero__logo { width: 124px; height: 124px; }
  .hero__brush { font-size: 84px; }

  /* text + post rows go to one column at the same width as the menu button */
  .split,
  .principle__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .split--flip { grid-template-columns: minmax(0, 1fr); }
  .split--flip > .post { order: 0; }
  .split__text { max-width: none; }
  .split + .split { margin-top: 64px; }

  .principle .post { max-width: 460px; }
}

@media (max-width: 900px) {
  .hero__art { gap: 18px; }
  .hero__logo { width: 100px; height: 100px; }
  .hero__brush { font-size: 66px; }

  .pair { gap: 40px; margin-top: 64px; }

  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* 5 cards: the last spans the row */

  .contact-band__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: 20px;
    padding-bottom: 72px;          /* room for the dot wave under the centred lines */
  }
  .contact-band .dots { width: min(40%, 320px); }

  .president__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 767px) {
  :root { --gutter: 16px; --header-h: 68px; }

  body { font-size: 17px; line-height: 1.75; }

  .brand__logo { width: 48px; height: 48px; }
  .brand__name { font-size: 19px; }
  .brand__latin { font-size: 11.5px; }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 22px;
  }
  .hero__copy { padding-bottom: 8px; }
  .hero__title { font-size: clamp(74px, 22vw, 110px); }
  .hero__name { margin-top: 16px; }
  .hero__lead { font-size: 16.5px; }
  .hero__actions { margin-top: 20px; }
  .hero__actions .btn { flex: 1 1 auto; }

  .hero__art { order: -1; align-self: auto; justify-content: flex-start; gap: 16px; margin-bottom: 10px; }
  .hero__logo { width: 88px; height: 88px; transform: none; }
  .hero__brush { font-size: 50px; }

  .wedges { height: 96px; margin-top: -10px; }
  .wedges--divider { height: 54px; margin-top: 0; }

  .section { padding: 52px 0 60px; }
  .section-title { margin-bottom: 26px; }
  .section-head { margin-bottom: 26px; }

  .facts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .benefits { grid-template-columns: minmax(0, 1fr); }
  .pair { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .stats { gap: 16px 18px; }
  .stat { padding-inline-start: 12px; }
  .stat dt { font-size: 14px; }
  .stat dd { font-size: 25px; }
  .stat dd span { font-size: 14.5px; }

  .weapons { padding: 52px 0 60px; }

  .principle { margin: 60px 0; padding: 48px 0; }
  .pill--xl { padding: 16px 24px; border-radius: 30px; }

  .president { padding: 0 0 60px; }
  .president .wedges--divider { margin-bottom: 36px; }
  .president__title { margin-bottom: 30px; }
  .president__message { font-size: 17px; }
  .president__pending { padding: 34px 22px; }
  .portrait-frame { max-width: 230px; }

  .dots { width: 100%; }

  .contact-band { margin-top: 48px; }
  .contact-band__inner { padding-top: 34px; }

  .site-footer__inner { justify-content: center; text-align: center; }

  /* posts become smaller tiles: the text beside them already says what they say, a tap opens them full size */
  .split .post, .pair .post, .principle .post { max-width: 280px; }
}

/* landscape phones and 200% desktop zoom (short and 560-767px wide): copy and art side by side again,
   so the title, tagline and committee name are on the first screen */
@media (max-width: 767px) and (orientation: landscape) and (min-width: 560px) {
  .hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 16px; }
  .hero__art { order: 0; align-self: center; justify-content: center; margin-bottom: 0; }
  .hero__copy { padding-bottom: 72px; }
}

/* touch tablets in landscape get the desktop nav: full 44px tap height (width untouched) */
@media (pointer: coarse) and (min-width: 1000px) {
  .site-nav a { display: flex; align-items: center; min-height: 44px; }
}

@media (max-width: 600px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .contact-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    column-gap: 14px;
    row-gap: 0;
    padding: 16px 18px;
    text-align: start;
  }
  .contact-card__icon { grid-row: 1 / span 2; width: 46px; height: 46px; margin: 0; }
  .contact-card__icon svg { width: 21px; height: 21px; }
}

/* -------------------------------------------------------------------------
   Print: keep the colour of every white-on-colour element (browsers drop backgrounds by default),
   drop the controls, keep cards whole. script.js opens the contents lists before printing.
   ------------------------------------------------------------------------- */
@media print {
  .site-header { position: static; box-shadow: none; }
  .nav-toggle, .site-nav, .skip-link, .hero__actions, .doc__actions, .talent__file, .post__zoom, .social, .lightbox { display: none !important; }
  .tag, .pill, .facts dt, .president__mark, .member__role--chair, .weights__seg, .talent-pass, .green-box, .weapons,
  .principle, .contact-band, .contact-card__icon, .site-footer, .talent__tab[aria-selected="true"], .principles__num {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .doc, .committee, .member, .stat, .criteria__group, .talent-pass, .principles__item, .post, .contact-card { break-inside: avoid; }
  .doc__toc summary::after { display: none; }
  h2, h3, h4, .section-head, .formation__note, .wedges--divider { break-after: avoid; }   /* no title alone at the foot of a page */
}