/* Union Gothic — the brand's main typeface (Jo, 2026-09-03), self-hosted as the unmodified
   variable TTF (licence in the file: CC BY-NC-ND 4.0; keep it unconverted). Axes: wdth 50–200,
   wght 400–1000. Named widths: Compressed 62.5 · Condensed 83 · Standard 100 · Expanded 110 · Wide 125. */
@font-face {
  font-family: "Union Gothic";
  src: url("../assets/fonts/union-gothic-variable.11161b857772.ttf") format("truetype");
  font-weight: 400 1000;
  font-stretch: 50% 200%;
  font-display: swap;
}
/* Communiqué — site styles. Rebuilt 2026-09-03 to match Jo's CMQ-website.psd (1920 × 4600 artboard).
   Every size is expressed in "design pixels": 1 design px = var(--px) = 1/1920 of the viewport, capped at 1px,
   so at 1920 wide the render equals the PSD and it scales down proportionally. Fonts come from the Adobe Fonts kit
   (use.typekit.net/lai7jek.css) linked in each page shell: Korolev (body) + Newshound / Korolev Condensed /
   Korolev Compressed standing in for the PSD's Union Gothic widths. See design-assets/cmq-psd-extract/DESIGN-SYSTEM.md. */

:root {
  /* palette — read from the PSD */
  --ink: #212120;
  --ink-soft: #3B3C33;
  --cream: #FDFFE0;
  --lime: #BEE343;
  --green: #397F43;
  --orange: #F9B764;
  --orange-deep: #FAA130;
  --plum: #553246;
  --plum-bg: #5A3C4A;
  --black: #000000;
  --field-text: #2B2F2C;
  /* per-theme hover fills */
  --t-labor: #FFE952; --t-milit: #8B1D07; --t-solid: #FC3535; --t-data: #C0A6F0;
  --t-ports: #4959ED; --t-pal: #6FC061; --t-bel: #85E2F3; --t-us: #FF8048;

  /* type — Adobe Fonts kit lai7jek */
  --display: "Union Gothic", "newshound", "Arial Black", Impact, sans-serif; --w-display: 110%; --w-wide: 125%; --w-std: 100%;            /* Union Gothic Expanded / Wide */
  --cond: "Union Gothic", "korolev-condensed", "Arial Narrow", Impact, sans-serif; --w-cond: 83%;       /* Union Gothic Condensed */
  --comp: "Union Gothic", "korolev-compressed", "Arial Narrow", Impact, sans-serif; --w-comp: 62.5%;      /* Union Gothic Compressed */
  --body: "korolev", "Helvetica Neue", Arial, sans-serif;               /* Korolev Medium / Bold / Heavy */

  /* aliases still referenced by inner-page inline styles */
  --serif: var(--display); --sans: var(--body); --mono: var(--body); --muted: var(--ink-soft); --parchment: var(--ink);

  /* scale */
  --px: min(calc(100vw / 1920), 1px);
  --gutter: calc(30 * var(--px));
  --rule: calc(4 * var(--px));
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink-soft);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 500;
  font-size: max(15px, calc(20 * var(--px)));
  line-height: 1.15;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app { min-height: 100vh; display: flex; flex-direction: column; }
.app > main { flex: 1 0 auto; }
.container { width: 100%; }

/* ───────── Nav bar (PSD: 132 px, #212120) ───────── */
.nav { background: var(--ink); color: var(--cream); position: sticky; top: 0; z-index: 50; }
.nav-inner {
  display: flex; align-items: center;
  height: calc(132 * var(--px));
  padding: 0 calc(37 * var(--px)) 0 calc(31 * var(--px));
}
.brand { display: flex; align-items: center; gap: calc(21 * var(--px)); margin-right: calc(108 * var(--px)); flex-shrink: 0; }
.brand .eye { height: calc(46 * var(--px)); width: auto; }
.brand .wordmark { height: calc(48 * var(--px)); width: auto; }
.nav-links {
  display: flex; align-items: center; gap: calc(56 * var(--px));
  margin-right: auto;
  font-family: var(--display); font-stretch: var(--w-display); font-weight: 700;
  font-size: calc(28 * var(--px)); line-height: 1;
  text-transform: uppercase; letter-spacing: 0;
}
.nav-link { position: relative; display: flex; align-items: center; height: calc(132 * var(--px)); }
.nav-link > a { display: inline-block; padding: 8px 0; border-bottom: 3px solid transparent; }
.nav-link:hover > a, .nav-link[data-open="true"] > a { border-bottom-color: var(--lime); }
.dropdown {
  position: absolute; top: 100%; left: calc(-24 * var(--px));
  min-width: calc(360 * var(--px));
  background: var(--ink); color: var(--cream);
  border: calc(3 * var(--px)) solid var(--cream); border-top: 0;
  padding: calc(12 * var(--px)) 0;
  display: none; z-index: 60;
}
.nav-link[data-open="true"] .dropdown { display: block; }
.dropdown a {
  display: block; padding: calc(9 * var(--px)) calc(24 * var(--px));
  font-family: var(--body); font-weight: 500; font-size: max(15px, calc(20 * var(--px)));
  text-transform: none; line-height: 1.2;
}
.dropdown a:hover { background: var(--cream); color: var(--ink); }
.search-btn { background: none; border: 0; padding: 0; margin-right: calc(45 * var(--px)); display: grid; place-items: center; }
.search-btn img { width: calc(45 * var(--px)); height: calc(45 * var(--px)); image-rendering: pixelated; }
.lang {
  display: inline-flex; align-items: center; justify-content: space-between;
  width: calc(209 * var(--px)); height: calc(39 * var(--px));
  padding: 0 calc(10 * var(--px)) 0 calc(13 * var(--px));
  border: 1px solid var(--cream);
  font-family: var(--display); font-stretch: var(--w-std); font-weight: 400; font-size: calc(20 * var(--px));
  text-transform: uppercase; line-height: 1; color: var(--cream);
  background: var(--ink); appearance: none; -webkit-appearance: none; white-space: nowrap;
}
.lang img { width: calc(18 * var(--px)); height: auto; margin-left: 8px; }
/* Jo, note 5 (2026-09-08): the language control is a real dropdown — EN / FR / AR / ES. The
   menu markup is built by assets/js/home-extras.js so the static shells and the Wagtail
   template stay identical. Choosing a language is a placeholder until the translations land:
   it only sets <html lang> and <html dir> so the RTL layout can be eyeballed. */
.lang-wrap { position: relative; display: inline-flex; }
.lang-wrap .lang { cursor: pointer; }
.lang-menu {
  position: absolute; top: calc(100% + calc(6 * var(--px))); right: 0; z-index: 60;
  min-width: calc(209 * var(--px));
  margin: 0; padding: calc(6 * var(--px)) 0; list-style: none;
  background: var(--ink); color: var(--cream);
  border: 1px solid var(--cream);
  display: none;
}
.lang-wrap[data-open="true"] .lang-menu { display: block; }
.lang-menu li { margin: 0; }
.lang-opt {
  display: flex; align-items: center; gap: calc(10 * var(--px));
  width: 100%; padding: calc(8 * var(--px)) calc(13 * var(--px));
  background: none; border: 0; text-align: left; color: inherit;
  font-family: var(--display); font-stretch: var(--w-std); font-weight: 400; font-size: calc(20 * var(--px));
  text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.lang-opt:hover, .lang-opt:focus-visible { background: var(--cream); color: var(--ink); }
.lang-opt[aria-selected="true"] { font-weight: 700; }
.lang-opt .lang-tag { min-width: calc(34 * var(--px)); }
.menu-btn { display: none; }
.br-mobile { display: none; }

/* ───────── Scrolling banner (PSD: 63 px, lime) ───────── */
.ticker {
  background: var(--lime); color: var(--ink);
  height: calc(63 * var(--px)); overflow: hidden; margin-top: calc(-3 * var(--px)); /* PSD: banner overlaps the nav by 3 px */
  position: relative; z-index: 1;
  display: flex; align-items: center;
  font-size: max(14px, calc(24.8 * var(--px)));
  line-height: 1;
}
.ticker-track { display: flex; white-space: nowrap; animation: ticker 48s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: calc(12 * var(--px)); padding-right: calc(28 * var(--px)); }
.ticker-item b { font-family: var(--display); font-stretch: var(--w-display); font-weight: 700; text-transform: uppercase; }
.ticker-item span { font-family: var(--body); font-weight: 500; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 0.08em; }
.ticker-item .star { font-size: 0.75em; padding-left: calc(6 * var(--px)); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ───────── Hero (PSD: 840 px, full-bleed photo) ───────── */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(736 * var(--px)); /* PSD photo is 840 tall but the ticker and the LATEST band overlap it: visible 192 → 928. min-height, not height: the headline must never be clipped (it was, once Union Gothic replaced the narrower stand-in). */
  background: var(--ink) url("../assets/images/psd/hero-trump-memphis.559d9f76698f.jpg") center 42% / cover no-repeat;
  color: var(--cream);
}
.hero-inner { position: relative; padding: calc(225 * var(--px)) calc(62 * var(--px)) calc(72 * var(--px)); }
.hero-eyebrow {
  font-family: var(--cond); font-stretch: var(--w-cond); font-weight: 700; font-size: calc(25 * var(--px));
  color: var(--lime); text-transform: uppercase; line-height: 1;
  margin: 0 0 0 calc(21 * var(--px));
}
.hero h1 {
  font-family: var(--cond); font-stretch: var(--w-cond); font-weight: 1000;
  font-size: calc(120 * var(--px)); line-height: 1.05;
  letter-spacing: -0.02em; /* Union Gothic Condensed 1000 runs wider than the PSD's setting; this holds the three-line break at 120 px (measured 2026-09-03) */
  text-transform: uppercase; color: var(--cream);
  /* PSD measure is 1571 px in Union Gothic Condensed 1000; Korolev Condensed 900 sets the first line at 1382 px,
     so the measure is 1400 px to keep the PSD's three-line break. */
  margin: calc(46 * var(--px)) 0 0; max-width: calc(1571 * var(--px)); /* the PSD measure, now that the PSD face is live */
}
.hero h1 a:hover { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.06em; }

/* ───────── Section titles with rules ───────── */
.section-title {
  display: flex; align-items: center; gap: calc(28 * var(--px));
  margin: 0;
  font-family: var(--display); font-stretch: var(--w-display); font-weight: 700; font-size: calc(48 * var(--px));
  line-height: 1; text-transform: uppercase; white-space: nowrap;
}
.section-title::before, .section-title::after { content: ''; height: var(--rule); background: currentColor; flex: 1 1 auto; }
.section-title::before { flex: var(--rule-l, 1 1 auto); }
.section-title::after { flex: var(--rule-r, 1 1 auto); }

/* ───────── Latest (PSD: 824 px band, #3B3C33, three 602 × 682 cards) ───────── */
.latest { background: var(--ink-soft); color: var(--cream); padding: calc(29 * var(--px)) var(--gutter) calc(43 * var(--px)); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(29 * var(--px)); margin-top: calc(22 * var(--px)); }
.card {
  /* Jo, 2026-09-08: the Latest cards no longer swap colour on hover. They ARE the coloured
     state at rest (--card-hover is now the resting fill, kept under that name so the CMS
     ThemePill/LatestCard "hover" field and the JSX prop keep working unchanged). */
  --card-hover: var(--plum);
  /* Cream on the two light fills (orange 1.8:1, lime 1.5:1) is unreadable now that the colour is
     permanent rather than a hover flash, so those cards take ink instead. Set by the card. */
  --card-ink: var(--cream);
  position: relative; display: flex; flex-direction: column;
  background: var(--card-hover); color: var(--card-ink);
  border: calc(3 * var(--px)) solid var(--cream);
  padding: calc(25 * var(--px)) calc(30 * var(--px)) calc(26 * var(--px));
  min-height: calc(682 * var(--px));
}
.card-subhead {
  background: var(--cream); color: var(--ink);
  border: calc(2 * var(--px)) solid var(--ink);
  height: calc(58 * var(--px)); display: flex; align-items: center;
  padding-left: calc(23 * var(--px));
  font-family: var(--cond); font-stretch: var(--w-cond); font-weight: 700; font-size: calc(26 * var(--px));
  text-transform: uppercase; line-height: 1;
}
.card-img { width: 100%; height: calc(245 * var(--px)); object-fit: cover; margin-top: calc(16 * var(--px)); background: var(--cream); }
.card h3 {
  font-family: var(--display); font-stretch: var(--w-display); font-weight: 700; font-size: calc(40 * var(--px));
  line-height: 1.06; text-transform: uppercase;
  margin: calc(28 * var(--px)) 0 0;
}
.card h3 a::after { content: ''; position: absolute; inset: 0; }
.card:hover h3 { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.1em; }
.card p { font-family: var(--body); font-weight: 500; font-size: max(15px, calc(20 * var(--px))); line-height: 1.1; margin: calc(29 * var(--px)) 0 0; }
.card .read-link {
  display: inline-block; margin-top: calc(22 * var(--px));
  font-family: var(--body); font-weight: 700; font-size: max(16px, calc(28 * var(--px)));
  text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.12em; position: relative; z-index: 1;
}
.card-meta { margin-top: auto; padding-top: calc(24 * var(--px)); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-meta .date { min-width: 0; white-space: nowrap; }
.card-meta .date { font-family: var(--body); font-weight: 700; font-size: max(13px, calc(20 * var(--px))); text-transform: uppercase; }
.card-meta .langs { font-family: var(--body); font-weight: 900; font-size: max(14px, calc(24 * var(--px))); text-transform: uppercase; display: flex; gap: calc(18 * var(--px)); }

/* ───────── Open investigations (PSD: 602 px band, cream) ───────── */
.open-inv { background: var(--cream); color: var(--ink); padding: calc(38 * var(--px)) var(--gutter) calc(80 * var(--px)); }
/* Jo, note 8 (2026-09-08, revised the same evening): Open Investigations is a carousel and the
   centre image is the thing that grows. The collage is 1.85x its PSD size (685 × 393 design px
   goes to 1267 × 727, which is 950 CSS px wide at a 1440 viewport), the two arrows that were
   decoration in the PSD page the track, and the same slide repeats until there is a second
   investigation. Behaviour lives in assets/js/home-extras.js.

   Why the slide stacks instead of sitting image-left / text-right: the track is 1718 design px
   (1920 less two 30 px gutters, two 26 px arrows and two 45 px gaps). A 1267 px collage leaves
   406 px beside it, and the two CTAs need 426 + 36 + 426 = 888 px to sit side by side, so the
   old two-column slide is what forced them to stack. Stacking the slide instead gives the CTA
   row the full 1718 px, which is what keeps "Read the latest report" and "Subscribe for
   updates" on one line at every width down to the 900 px phone layout. */
.gallery {
  display: grid; grid-template-columns: calc(26 * var(--px)) 1fr calc(26 * var(--px));
  column-gap: calc(45 * var(--px)); align-items: start;
  margin-top: calc(43 * var(--px));
}
/* Arrows sit on the middle of the collage, not the middle of the whole slide (the body under it
   would drag them down). 363 = half of the 727 px image; the translate centres the 42 px art. */
.gallery-arrow { background: none; border: 0; padding: 0; margin-top: calc(363 * var(--px)); transform: translateY(-50%); }
.gallery-arrow img { width: calc(26 * var(--px)); height: auto; }
.gallery-viewport { overflow: hidden; }
.gallery-viewport:focus-visible { outline: 3px solid var(--ink); outline-offset: calc(8 * var(--px)); }
.gallery-track { display: flex; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.gallery-slide {
  flex: 0 0 100%; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  row-gap: calc(40 * var(--px));
}
@media (prefers-reduced-motion: reduce) { .gallery-track { transition: none; } }
.gallery-figure { margin: 0; justify-self: center; width: min(calc(1267 * var(--px)), 100%); }
/* aspect-ratio rather than a fixed height so the 1.85x crop (1267 / 727 = 1.743, the same framing
   the PSD had at 685 / 393) survives the cap above at any viewport. */
.gallery-figure img { width: 100%; height: auto; aspect-ratio: 1267 / 727; object-fit: cover; }
.gallery-body { padding-left: calc(2 * var(--px)); }
.gallery-body h3 {
  font-family: var(--cond); font-stretch: var(--w-cond); font-weight: 700; font-size: calc(85 * var(--px));
  line-height: 0.98; text-transform: uppercase; margin: 0; max-width: calc(1200 * var(--px));
  letter-spacing: -0.02em; /* same treatment as the hero: Union Gothic Condensed sets "THE GENOCIDE SUPPLY CHAIN" at 969 px with 0 tracking, 9 px over the 960 measure, which pushed CHAIN onto a third line; -0.02em brings it to ~927 px (PSD: 940) and holds the PSD's two-line break (measured 2026-09-03) */
}
.gallery-body h3 a:hover { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.08em; }
/* nowrap: the full-width row has 1718 design px for an 888 px pair, so the two CTAs stay
   side by side at every desktop width. The 900 px block below turns them into a column. */
.inv-buttons { display: flex; gap: calc(36 * var(--px)); margin: calc(52 * var(--px)) 0 0; flex-wrap: nowrap; }
.btn-inv {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(426 * var(--px)); height: calc(115 * var(--px));
  border: calc(3 * var(--px)) solid var(--ink);
  font-family: var(--comp); font-stretch: var(--w-comp); font-weight: 700; font-size: calc(52.6 * var(--px));
  text-transform: uppercase; line-height: 1;
  transition: background .15s, color .15s;
}
.btn-inv.dark { background: var(--ink); color: var(--cream); }
.btn-inv.dark:hover { background: var(--cream); color: var(--ink); }
.btn-inv.light { background: var(--cream); color: var(--ink); }
.btn-inv.light:hover { background: var(--lime); }

/* ───────── Themes (PSD: 604 px band, orange texture with torn cream header) ───────── */
.themes {
  position: relative; color: var(--ink);
  background: var(--orange) url("../assets/images/psd/themes-bg.1b66ef890f72.png") top center / 100% auto no-repeat;
  min-height: calc(604 * var(--px));
  padding: calc(198 * var(--px)) var(--gutter) calc(73 * var(--px)) calc(74 * var(--px));
}
.themes-title { display: none; }
.themes-grid { display: flex; flex-wrap: wrap; gap: calc(39 * var(--px)) calc(47 * var(--px)); max-width: calc(1330 * var(--px)); margin: 0; padding: 0; list-style: none; }
.theme-btn {
  --hover: var(--cream); --hover-ink: var(--ink);
  display: inline-flex; align-items: center;
  height: calc(84 * var(--px)); padding: 0 calc(22 * var(--px));
  background: var(--cream); color: var(--ink);
  box-shadow: calc(6 * var(--px)) calc(6 * var(--px)) 0 var(--ink);
  font-family: var(--cond); font-stretch: var(--w-cond); font-weight: 700; font-size: calc(48 * var(--px));
  text-transform: uppercase; line-height: 1; white-space: nowrap;
  transition: background .15s, color .15s, transform .12s ease-out, box-shadow .12s ease-out;
}
/* Jo, 2026-09-08 (notes 7 + 9): hover is a plain solid colour box in the button's own palette
   colour (the purple on Data Centers is --t-data) with no border treatment of any kind, and the
   button POPS OUT — it lifts up-left and the hard shadow deepens to match. Press pushes it back in. */
.theme-btn:hover, .theme-btn:focus-visible {
  background: var(--hover); color: var(--hover-ink); border: 0;
  transform: translate(calc(-4 * var(--px)), calc(-4 * var(--px)));
  box-shadow: calc(10 * var(--px)) calc(10 * var(--px)) 0 var(--ink);
}
.theme-btn:active { transform: translate(calc(3 * var(--px)), calc(3 * var(--px))); box-shadow: calc(3 * var(--px)) calc(3 * var(--px)) 0 var(--ink); }
@media (prefers-reduced-motion: reduce) { .theme-btn { transition: background .15s, color .15s; } .theme-btn:hover, .theme-btn:focus-visible { transform: none; } }

.themes-motion { position: absolute; right: calc(47 * var(--px)); top: calc(213 * var(--px)); width: calc(421 * var(--px)); height: auto; pointer-events: none; }
/* Jo, note 10 (2026-09-08): the live eye + magnifier canvas gets the whole right-hand area of
   the Themes band to roam in (his red box) — from just right of the theme buttons (padding 74 +
   grid max-width 1330 = 1404) to the section's right edge, and from under the title rule (the
   band's 198 px top padding) to the bottom of the band. A canvas clips its own drawing, so the
   old 421 × 282 box was exactly what cut the handle off; the art inside is drawn at its PSD size
   (see eyeSpan / eyeAt / parkAt in assets/js/eye-follow.js) and bounds-clamped so no part leaves
   the box. The <img> fallback (reduced motion) keeps the PSD placement above. */
.themes-motion.themes-eye {
  /* canvas is a replaced element, so the box has to be stated outright — left/right + width:auto
     falls back to the canvas's intrinsic 300 × 150. 516 = 1920 − 1404, 406 = 604 − 198. */
  left: calc(1404 * var(--px)); right: auto;
  top: calc(198 * var(--px)); bottom: auto;
  /* min(…, 100% − left) so a vertical scrollbar (which --px, being 100vw-based, does not know
     about) cannot push the box past the section edge and start a horizontal scroll. */
  width: min(calc(516 * var(--px)), calc(100% - 1404 * var(--px)));
  height: min(calc(406 * var(--px)), calc(100% - 198 * var(--px)));
  max-width: none;
}

/* ───────── Al-bayan (PSD: 801 px band, purple texture) ───────── */
.albayan {
  position: relative; overflow: hidden; color: var(--cream);
  background: var(--plum-bg) url("../assets/images/psd/albayan-bg.1df52caaf593.jpg") center / cover no-repeat;
  min-height: calc(801 * var(--px));
  padding: calc(30 * var(--px)) var(--gutter) calc(57 * var(--px));
}
.albayan .section-title { color: var(--black); }
.albayan .section-title::before, .albayan .section-title::after { background: var(--ink); }
/* Jo, note 11 (2026-09-08): the whole al-bayan band is one link to al-bayan.communique.press.
   A full-bleed anchor sits under the content; the content layer is click-through
   (pointer-events: none) so the copy, the plant and the background all send you to al-bayan,
   and only the things that must keep their own behaviour take pointer events back: the two
   CTAs (notes 12/13) and the video box, which plays in place instead of navigating. */
.albayan-cover { position: absolute; inset: 0; z-index: 1; display: block; }
.albayan .section-title, .albayan-grid { position: relative; z-index: 2; pointer-events: none; }
.albayan-buttons a, .albayan .vbox { pointer-events: auto; }
.albayan-plant { position: absolute; left: calc(-142 * var(--px)); top: calc(13 * var(--px)); width: calc(545 * var(--px)); height: auto; pointer-events: none; }
.albayan-grid {
  position: relative;
  display: grid; grid-template-columns: calc(304 * var(--px)) 1fr calc(641 * var(--px));
  column-gap: calc(49 * var(--px));
  margin-top: calc(55 * var(--px));
}
.albayan-body { grid-column: 2; }
.albayan-body h2 {
  /* PSD: Union Gothic 60 wdth / 1000 wght at 245 px, leading 193 px (0.79). It was set at 200 px / 900 while
     Korolev Compressed stood in (that face ran ~15% wider); with the PSD face live it goes back to the PSD values.
     -0.02em as on the hero: the browser sets "THE AL-BAYAN" ~12% wider than Photoshop at 0 tracking (PSD line 699 px). */
  font-family: var(--comp); font-stretch: 60%; font-weight: 1000; font-size: calc(245 * var(--px));
  line-height: 0.79; text-transform: uppercase; margin: 0; letter-spacing: -0.02em;
}
.albayan p {
  font-family: var(--cond); font-stretch: var(--w-cond); font-weight: 700; font-size: max(16px, calc(25 * var(--px)));
  line-height: 1.13; max-width: calc(780 * var(--px)); margin: calc(38 * var(--px)) 0 0;
}
.albayan-buttons { display: flex; gap: calc(59 * var(--px)); margin-top: calc(45 * var(--px)); align-items: center; }
.albayan-buttons a { display: inline-block; transition: transform .05s, filter .15s; }
.albayan-buttons a:hover { filter: brightness(1.08); }
.albayan-buttons a:active { transform: translateY(2px); }
.albayan-buttons img { height: calc(98 * var(--px)); width: auto; }
.vbox {
  grid-column: 3; align-self: start;
  width: calc(641 * var(--px)); margin-top: calc(-29 * var(--px));
  background: var(--cream); color: var(--ink);
  border: calc(2 * var(--px)) solid var(--ink);
  padding: calc(36 * var(--px)) calc(38 * var(--px)) calc(30 * var(--px));
  min-height: calc(620 * var(--px));
  display: flex; flex-direction: column;
  box-shadow:
    calc(-18 * var(--px)) calc(14 * var(--px)) 0 0 var(--cream),
    calc(-18 * var(--px)) calc(14 * var(--px)) 0 calc(2 * var(--px)) var(--ink),
    calc(-36 * var(--px)) calc(30 * var(--px)) 0 0 var(--cream),
    calc(-36 * var(--px)) calc(30 * var(--px)) 0 calc(2 * var(--px)) var(--ink),
    calc(-46 * var(--px)) calc(43 * var(--px)) 0 0 var(--ink);
}
.vbox-thumb { position: relative; display: block; background: var(--ink); }
.vbox-thumb img { width: 100%; height: calc(320 * var(--px)); object-fit: cover; }
/* Note 11: poster frame + play button. The click swaps the poster for an inline player
   (see ALBAYAN_VIDEO_ID / ALBAYAN_VIDEO_FILE in assets/js/home-extras.js). */
.vbox-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.vbox-play::before {
  content: ''; width: calc(96 * var(--px)); height: calc(96 * var(--px)); border-radius: 50%;
  background: var(--cream); border: calc(3 * var(--px)) solid var(--ink);
  box-shadow: calc(5 * var(--px)) calc(5 * var(--px)) 0 var(--ink);
  transition: transform .12s ease-out;
}
.vbox-play::after {
  content: ''; position: absolute;
  border-style: solid; border-width: calc(17 * var(--px)) 0 calc(17 * var(--px)) calc(28 * var(--px));
  border-color: transparent transparent transparent var(--ink);
  margin-left: calc(8 * var(--px));
}
.vbox-play:hover::before { transform: scale(1.08); }
.vbox-player { width: 100%; height: calc(320 * var(--px)); border: 0; display: block; background: var(--ink); }
.vbox-player-note {
  width: 100%; height: calc(320 * var(--px)); display: grid; place-items: center; text-align: center;
  background: var(--cream); color: var(--ink); padding: calc(20 * var(--px));
  font-family: var(--body); font-weight: 700; font-size: max(13px, calc(19 * var(--px))); line-height: 1.25;
}
@media (prefers-reduced-motion: reduce) { .vbox-play:hover::before { transform: none; } }
.vbox h3 { font-family: var(--display); font-stretch: var(--w-display); font-weight: 700; font-size: calc(38 * var(--px)); line-height: 1; text-transform: uppercase; margin: calc(27 * var(--px)) 0 0; }
.vbox p { font-family: var(--body); font-weight: 500; font-size: max(15px, calc(20.3 * var(--px))); line-height: 1.1; margin: calc(28 * var(--px)) 0 0; }
.vbox .card-meta { padding-top: calc(28 * var(--px)); }
.vbox .card-meta .date { font-size: max(13px, calc(18.6 * var(--px))); }
.vbox .card-meta .langs { font-size: max(14px, calc(25.3 * var(--px))); }

/* ───────── Become a member (PSD: 454 px band, #212120) ───────── */
.member { background: var(--ink); color: var(--cream); padding: calc(70 * var(--px)) var(--gutter) calc(67 * var(--px)) calc(58 * var(--px)); }
.member h2 {
  font-family: var(--display); font-stretch: var(--w-display); font-weight: 1000; font-size: calc(75 * var(--px));
  color: var(--lime); text-transform: uppercase; line-height: 1; margin: 0;
}
.member p { font-family: var(--body); font-weight: 500; font-size: max(17px, calc(30 * var(--px))); line-height: 1.1; max-width: calc(1150 * var(--px)); margin: calc(49 * var(--px)) 0 0; }
.member-buttons { display: flex; gap: calc(50 * var(--px)); margin-top: calc(49 * var(--px)); flex-wrap: wrap; }
.btn-member {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(774 * var(--px)); height: calc(98 * var(--px));
  font-family: var(--display); font-stretch: var(--w-display); font-weight: 700; font-size: calc(31.6 * var(--px));
  text-transform: uppercase; line-height: 1; text-align: center;
  border: calc(3 * var(--px)) solid var(--lime);
  transition: background .15s, color .15s, border-color .15s;
}
.btn-member.fill { background: var(--lime); color: var(--ink); }
.btn-member.line { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn-member:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ───────── Footer (PSD: 401 px, #397F43, black text) ───────── */
.footer { position: relative; background: var(--green); color: var(--black); padding: calc(32 * var(--px)) calc(29 * var(--px)) calc(36 * var(--px)) calc(44 * var(--px)); }
.footer-grid {
  display: grid; grid-template-columns: 1fr repeat(3, calc(245 * var(--px)));
  column-gap: calc(53 * var(--px)); align-items: start;
  margin-right: calc(175 * var(--px)); /* PSD: third column ends at x 1716; the eye mark overlaps it */
}
.footer-brand .wordmark { height: calc(37 * var(--px)); width: auto; }
/* Jo, note 16 (2026-09-08): the easter egg on the bottom-left logo. Bring the pointer near and a
   small eye opens beside the wordmark and watches it; hover and it blinks once; five clicks and
   the wordmark tips its hat and a one-line credit appears. Built by assets/js/home-extras.js
   (~55 lines, no libraries) and switched off entirely under prefers-reduced-motion apart from
   the credit itself. */
.footer-egg { display: inline-flex; align-items: center; gap: calc(10 * var(--px)); background: none; border: 0; padding: 0; }
.footer-egg-eye {
  position: relative; display: block;
  width: calc(34 * var(--px)); height: calc(20 * var(--px));
  background: var(--cream); color: var(--ink);
  border: calc(2 * var(--px)) solid currentColor;
  border-radius: 50% / 50%;
  opacity: 0; transform: scale(.6);
  transition: opacity .25s ease-out, transform .25s ease-out;
}
.footer-egg.near .footer-egg-eye { opacity: 1; transform: scale(1); }
.footer-egg-eye i {
  position: absolute; left: 50%; top: 50%;
  width: calc(9 * var(--px)); height: calc(9 * var(--px)); margin: calc(-4.5 * var(--px)) 0 0 calc(-4.5 * var(--px));
  border-radius: 50%; background: var(--ink);
  transition: transform .08s linear;
}
.footer-egg.blink .footer-egg-eye { animation: egg-blink .34s ease-in-out 1; }
.footer-egg.popped .wordmark { animation: egg-tip .9s ease-in-out 1; }
@keyframes egg-blink { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.08); } }
@keyframes egg-tip { 0%,100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-4deg) translateY(calc(-4 * var(--px))); } 60% { transform: rotate(3deg) translateY(0); } }
.footer-egg-credit {
  font-family: var(--body); font-weight: 700; font-size: max(12px, calc(15 * var(--px)));
  text-transform: uppercase; letter-spacing: .04em;
  margin: calc(8 * var(--px)) 0 0; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s ease-out, opacity .5s ease-out;
}
.footer-egg-credit.shown { max-height: calc(60 * var(--px)); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .footer-egg-eye, .footer-egg-eye i, .footer-egg-credit { transition: none; }
  .footer-egg.blink .footer-egg-eye, .footer-egg.popped .wordmark { animation: none; }
}
.footer-blurb { font-family: var(--body); font-weight: 500; font-size: max(13px, calc(16 * var(--px))); line-height: 1.15; max-width: calc(376 * var(--px)); margin: calc(14 * var(--px)) 0 0; }
.footer-signup-label { font-family: var(--body); font-weight: 700; font-size: max(14px, calc(20.2 * var(--px))); margin: calc(44 * var(--px)) 0 0; }
.footer-form { display: flex; margin-top: calc(13 * var(--px)); }
.footer-form input {
  width: calc(258 * var(--px)); height: calc(50 * var(--px));
  padding: 0 calc(19 * var(--px));
  background: transparent; border: calc(2 * var(--px)) solid var(--ink); border-radius: 0;
  font-family: var(--body); font-weight: 500; font-size: max(13px, calc(18 * var(--px))); color: var(--ink);
  outline: none;
}
.footer-form input::placeholder { color: var(--field-text); opacity: 1; }
.footer-form input:focus { background: var(--cream); }
.footer-form button {
  width: calc(212 * var(--px)); height: calc(50 * var(--px)); margin-left: calc(-2 * var(--px));
  background: transparent; border: calc(2 * var(--px)) solid var(--ink); border-radius: 0;
  font-family: var(--display); font-stretch: var(--w-wide); font-weight: 700; font-size: max(11px, calc(15.7 * var(--px)));
  text-transform: uppercase; color: var(--black); line-height: 1;
  transition: background .15s, color .15s;
}
.footer-form button:hover { background: var(--ink); color: var(--cream); }
.footer-form.done { font-family: var(--body); font-weight: 700; font-size: max(14px, calc(18 * var(--px))); align-items: center; height: calc(50 * var(--px)); }
.footer-col { padding-top: calc(4 * var(--px)); }
.footer-col h4 {
  font-family: var(--display); font-stretch: var(--w-wide); font-weight: 700; font-size: max(12px, calc(18 * var(--px)));
  text-transform: uppercase; line-height: 1; margin: 0; padding: 0 0 calc(11 * var(--px)) calc(4 * var(--px));
  border-bottom: var(--rule) solid var(--ink);
  /* Union Gothic Wide sets GET INVOLVED at 248 px, 3 px past the PSD's 245 px column (the PSD has it flush with the
     rule end), which broke it onto two lines. Never wrap a column heading; let the rule run to the end of the word. */
  white-space: nowrap; width: max-content; min-width: 100%;
}
.footer-col ul { list-style: none; margin: calc(7 * var(--px)) 0 0; padding: 0 0 0 calc(24 * var(--px)); }
.footer-col li { font-family: var(--body); font-weight: 500; font-size: max(14px, calc(20 * var(--px))); line-height: calc(37 * var(--px)); }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.footer-eye { position: absolute; right: calc(56 * var(--px)); top: calc(116 * var(--px)); }
.footer-eye img { width: calc(168 * var(--px)); height: auto; }
.footer-bar {
  margin-top: calc(24 * var(--px)); padding-top: calc(28 * var(--px));
  border-top: var(--rule) solid var(--ink);
  display: flex; align-items: baseline; justify-content: space-between; gap: calc(30 * var(--px)); flex-wrap: wrap;
  padding-left: calc(6 * var(--px)); margin-left: calc(-15 * var(--px));
}
.footer-legal { display: flex; flex-wrap: wrap; gap: calc(30 * var(--px)); font-family: var(--body); font-weight: 700; font-size: max(12px, calc(20 * var(--px))); text-transform: uppercase; }
.footer-legal a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.footer-address { font-family: var(--body); font-weight: 500; font-size: max(12px, calc(18 * var(--px))); }

/* ───────── Generic button (inner pages) ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 calc(32 * var(--px)); height: calc(64 * var(--px));
  font-family: var(--display); font-stretch: var(--w-display); font-weight: 700; font-size: max(13px, calc(22 * var(--px)));
  text-transform: uppercase; line-height: 1; border: calc(3 * var(--px)) solid var(--lime);
  background: var(--lime); color: var(--ink); transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.btn-outline-gold, .btn-ghost, .btn-outline-brick { background: transparent; color: var(--cream); border-color: var(--cream); }

/* ───────── Inner pages (PSD has no artboards for these; they inherit the system) ───────── */
.page-hero { background: var(--cream); color: var(--ink); padding: calc(64 * var(--px)) var(--gutter) calc(56 * var(--px)) calc(62 * var(--px)); }
.page-hero .eyebrow { font-family: var(--cond); font-stretch: var(--w-cond); font-weight: 700; font-size: max(14px, calc(25 * var(--px))); text-transform: uppercase; line-height: 1; }
.page-hero h1 { font-family: var(--cond); font-stretch: var(--w-cond); font-weight: 1000; font-size: calc(110 * var(--px)); line-height: 1.02; text-transform: uppercase; margin: calc(20 * var(--px)) 0 0; max-width: calc(1571 * var(--px)); }
.page-hero .subtitle { font-family: var(--body); font-weight: 500; font-size: max(16px, calc(26 * var(--px))); line-height: 1.15; margin: calc(24 * var(--px)) 0 0; max-width: calc(1100 * var(--px)); }
.about-section, .careers-section, .faq-block {
  padding: calc(48 * var(--px)) var(--gutter) calc(52 * var(--px)) calc(62 * var(--px));
  border-top: var(--rule) solid var(--cream); color: var(--cream);
}
.about-section:first-of-type, .careers-section:first-of-type, .faq-block:first-of-type { border-top: 0; }
.about-section h2, .careers-section h2, .faq-block h2 {
  font-family: var(--display); font-stretch: var(--w-display); font-weight: 700; font-size: calc(40 * var(--px));
  line-height: 1.06; text-transform: uppercase; margin: 0 0 calc(22 * var(--px));
}
.about-section p, .about-section li, .careers-section p, .faq-item .a {
  font-family: var(--body); font-weight: 500; font-size: max(16px, calc(22 * var(--px)));
  line-height: 1.25; max-width: calc(1100 * var(--px)); margin: 0 0 calc(16 * var(--px)); color: var(--cream);
}
.about-section a, .careers-section a, .faq-item a { text-decoration: underline; text-underline-offset: 0.12em; }
.about-section, .careers-section, .faq-block, .coming-soon, .page-hero { overflow-wrap: anywhere; }
.about-section a:hover, .careers-section a:hover, .faq-item a:hover { color: var(--lime); }
.about-section strong { font-weight: 700; }
.careers-section .num { font-family: var(--body); font-weight: 700; font-size: max(13px, calc(20 * var(--px))); text-transform: uppercase; color: var(--lime); margin-bottom: calc(14 * var(--px)); }
.faq-item { margin-bottom: calc(30 * var(--px)); }
.faq-item .q { font-family: var(--display); font-stretch: var(--w-display); font-weight: 700; font-size: max(16px, calc(24 * var(--px))); text-transform: uppercase; line-height: 1.1; margin-bottom: calc(10 * var(--px)); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: calc(29 * var(--px)); padding: calc(40 * var(--px)) var(--gutter); }
.team-card, .team-board-card { background: var(--cream); color: var(--ink); border: calc(3 * var(--px)) solid var(--cream); padding: calc(28 * var(--px)) calc(30 * var(--px)); }
.team-card .role, .team-board-card .role { font-family: var(--body); font-weight: 700; font-size: max(12px, calc(18 * var(--px))); text-transform: uppercase; margin-bottom: calc(10 * var(--px)); }
.team-card .name, .team-board-card .name { font-family: var(--display); font-stretch: var(--w-display); font-weight: 700; font-size: max(18px, calc(28 * var(--px))); text-transform: uppercase; line-height: 1.06; } /* 30 → 28: at 1920 the six-up grid gives a 220 px line and Union Gothic Expanded set ABDULLAH / TOULOUSE / JONATHAN at 222–228 px, into the card padding */
.team-board { padding: calc(40 * var(--px)) var(--gutter) calc(56 * var(--px)); border-top: var(--rule) solid var(--cream); }
.team-board h2 { font-family: var(--display); font-stretch: var(--w-display); font-weight: 700; font-size: calc(40 * var(--px)); text-transform: uppercase; margin: 0 0 calc(22 * var(--px)); }
.team-board-list { display: flex; gap: calc(29 * var(--px)); flex-wrap: wrap; }
.coming-soon { background: var(--cream); color: var(--ink); padding: calc(120 * var(--px)) var(--gutter) calc(140 * var(--px)) calc(62 * var(--px)); }
.coming-soon .tag-line { font-family: var(--cond); font-stretch: var(--w-cond); font-weight: 700; font-size: max(14px, calc(25 * var(--px))); text-transform: uppercase; line-height: 1; }
.coming-soon h1 { font-family: var(--cond); font-stretch: var(--w-cond); font-weight: 1000; font-size: calc(120 * var(--px)); line-height: 1.02; text-transform: uppercase; margin: calc(20 * var(--px)) 0 0; }
.coming-soon p { font-family: var(--body); font-weight: 500; font-size: max(16px, calc(26 * var(--px))); line-height: 1.15; max-width: calc(1000 * var(--px)); margin: calc(28 * var(--px)) 0 0; }

/* ───────── Responsive ───────── */
@media (max-width: 1100px) {
  .nav-links { gap: calc(36 * var(--px)); }
  .brand { margin-right: calc(48 * var(--px)); }
}
@media (max-width: 900px) {
  :root { --px: 0.5px; --gutter: 16px; --rule: 3px; }
  body { font-size: 16px; }
  .nav-inner { height: 64px; padding: 0 16px; }
  /* 390 px budget (measured 2026-09-03 with Union Gothic): brand 133 + search 46 + lang 100 + menu 72 + padding 32 = 390,
     so the language button was being squeezed and its chevron overflowed. Logo 22 → 20 px, search margins 10/14 → 8/10,
     lang 12 → 11 px: the row now needs 366 px, which also clears a 375 px phone. */
  .brand { gap: 8px; margin-right: auto; }
  .brand .eye { height: 20px; } .brand .wordmark { height: 20px; }
  .search-btn { margin-left: 8px; }
  .nav-links { display: none; }
  .nav[data-menu="open"] .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 64px;
    background: var(--ink); border-top: 3px solid var(--lime); border-bottom: 3px solid var(--cream);
    font-size: 20px; padding: 8px 0 12px;
  }
  .nav[data-menu="open"] .nav-link { height: auto; flex-direction: column; align-items: stretch; }
  .nav[data-menu="open"] .nav-link > a { padding: 12px 16px; border-bottom: 0; }
  .nav[data-menu="open"] .dropdown { position: static; display: block; border: 0; min-width: 0; padding: 0 0 8px; }
  .nav[data-menu="open"] .dropdown a { padding: 6px 32px; font-size: 16px; }
  .search-btn { margin-right: 10px; } .search-btn img { width: 24px; height: 24px; }
  .lang { width: auto; height: 30px; font-size: 11px; padding: 0 5px; margin-right: 8px; }
  .lang img { width: 10px; margin-left: 4px; }
  .lang-wrap { margin-right: 8px; }
  .lang-wrap .lang { margin-right: 0; }
  .lang-menu { min-width: 150px; }
  .lang-opt { font-size: 13px; padding: 8px 10px; }
  .menu-btn {
    display: inline-flex; align-items: center; height: 30px; padding: 0 10px;
    background: var(--cream); color: var(--ink); border: 0;
    font-family: var(--display); font-stretch: var(--w-display); font-weight: 700; font-size: 13px; text-transform: uppercase;
  }
  .ticker { height: 40px; font-size: 14px; }
  .ticker-item { padding-right: 18px; gap: 8px; }
  .hero { height: auto; min-height: 0; padding: 40px 16px 44px; }
  .hero-inner { position: static; }
  .hero-eyebrow { font-size: 15px; margin-left: 0; }
  .hero h1 { font-size: clamp(40px, 12vw, 60px); margin-top: 18px; max-width: none; }
  /* 22 px Union Gothic Expanded sets INDEPENDENT MEDIA LAB at 386 px, wider than a 390 px phone's 358 px row (it scrolled
     the page sideways). 4.3vw = 16.8 px at 390, fitting the longest title with its rules down to 360 px; wrapping is the
     fallback below that instead of overflow. */
  .section-title { font-size: clamp(14px, 4.3vw, 22px); gap: 12px; white-space: normal; }
  .section-title::before { flex: 0 0 24px !important; }
  .section-title::after { flex: 1 1 auto !important; }
  .latest { padding: 20px 16px 24px; }
  .cards { grid-template-columns: 1fr; gap: 16px; margin-top: 18px; }
  .card { min-height: 0; padding: 14px 14px 16px; border-width: 2px; }
  .card-subhead { height: 36px; font-size: 16px; padding-left: 12px; border-width: 2px; }
  .card-img { height: auto; aspect-ratio: 538 / 245; margin-top: 10px; }
  .card h3 { font-size: 24px; min-height: 0; margin-top: 16px; }
  .card p { font-size: 16px; margin-top: 12px; }
  .card .read-link { font-size: 18px; margin-top: 12px; }
  .card-meta { padding-top: 18px; } .card-meta .date { font-size: 13px; } .card-meta .langs { font-size: 14px; gap: 12px; }
  .open-inv { padding: 24px 16px 32px; }
  .gallery { grid-template-columns: 24px 1fr 24px; column-gap: 8px; margin-top: 20px; align-items: start; }
  /* Keep the arrows beside the collage here too. The track is 100vw less the 16 px gutters, the
     two 24 px arrows and the two 8 px gaps (96 px), and the image is that over 1.743, so half its
     height is (100vw - 96px) / 3.486. */
  .gallery-arrow { margin-top: calc((100vw - 96px) / 3.486); }
  .gallery-arrow img { width: 18px; }
  .gallery-slide { grid-template-columns: 1fr; row-gap: 20px; }
  .gallery-figure { width: 100%; justify-self: stretch; }
  .gallery-body h3 { font-size: clamp(34px, 10vw, 48px); max-width: none; }
  .inv-buttons { flex-direction: column; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
  .btn-inv { width: 100%; height: 60px; font-size: 28px; border-width: 2px; }
  .themes { background: var(--orange); padding: 22px 16px 28px; min-height: 0; }
  .themes-title { display: flex; margin-bottom: 20px; }
  .themes-grid { gap: 14px 14px; max-width: none; }
  .theme-btn { height: 50px; padding: 0 14px; font-size: 24px; box-shadow: 4px 4px 0 var(--ink); }
  .themes-motion { position: static; width: 200px; margin-top: 24px; }
  .themes-motion.themes-eye { position: static; left: auto; right: auto; top: auto; bottom: auto; width: 200px; height: 134px; margin-top: 24px; }
  .albayan { padding: 22px 16px 32px; min-height: 0; }
  .albayan-plant { display: none; }
  .albayan-grid { grid-template-columns: 1fr; margin-top: 22px; row-gap: 36px; }
  .albayan-body, .vbox { grid-column: auto; }
  .albayan-body h2 { font-size: clamp(60px, 18vw, 120px); line-height: 0.85; }
  .br-desktop { display: none; }
  .albayan p { font-size: 17px; margin-top: 16px; max-width: none; }
  .albayan-buttons { gap: 14px; margin-top: 20px; }
  .albayan-buttons img { height: 56px; }
  .vbox { width: calc(100% - 20px); margin: 0 0 24px 20px; padding: 14px 14px 16px; min-height: 0; border-width: 2px;
    box-shadow: -8px 8px 0 0 var(--cream), -8px 8px 0 2px var(--ink), -16px 16px 0 0 var(--cream), -16px 16px 0 2px var(--ink), -22px 22px 0 0 var(--ink); }
  .vbox-thumb img { height: auto; aspect-ratio: 569 / 320; }
  .vbox-play::before { width: 56px; height: 56px; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
  .vbox-play::after { border-width: 10px 0 10px 16px; margin-left: 5px; }
  .vbox-player, .vbox-player-note { height: auto; aspect-ratio: 569 / 320; }
  .vbox-player-note { font-size: 14px; padding: 14px; }
  .vbox h3 { font-size: 22px; margin-top: 14px; }
  .vbox p { font-size: 16px; margin-top: 12px; }
  .member { padding: 36px 16px 40px; }
  .member h2 { font-size: clamp(32px, 9vw, 44px); }
  .member p { font-size: 18px; margin-top: 18px; max-width: none; }
  .member-buttons { flex-direction: column; gap: 12px; margin-top: 22px; }
  .btn-member { width: 100%; height: 60px; font-size: clamp(13px, 3.9vw, 17px); border-width: 2px; } /* 17 px Union Gothic Expanded set VOLUNTEER WITH COMMUNIQUÉ at 364 px in a 354 px button (two lines); 3.9vw = 15.2 px at 390 → 334 px, and it keeps fitting at 375 / 360 (measured 2026-09-03) */
  .footer { padding: 28px 16px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand .wordmark { height: 26px; }
  .footer-blurb { font-size: 14px; max-width: none; }
  .footer-signup-label { margin-top: 20px; font-size: 15px; }
  .footer-form input { width: 60%; height: 44px; font-size: 15px; }
  .footer-form button { width: 40%; height: 44px; font-size: 12px; }
  .footer-col h4 { font-size: 12px; padding-bottom: 8px; } /* 13 → 12: GET INVOLVED needs 181 px at 13 px in a 169 px half-column; 167 px at 12 */
  .footer-col ul { padding-left: 12px; margin-top: 8px; }
  .footer-col li { font-size: 15px; line-height: 30px; }
  .footer-eye { display: none; }
  .footer-grid { margin-right: 0; }
  .footer-bar { margin-top: 20px; padding-top: 18px; gap: 12px; }
  .footer-legal { gap: 12px 16px; font-size: 12px; }
  .footer-address { font-size: 12px; }
  .page-hero { padding: 36px 16px 32px; }
  .page-hero h1 { font-size: clamp(38px, 11vw, 56px); max-width: none; }
  .page-hero .subtitle { font-size: 17px; max-width: none; }
  .about-section, .careers-section, .faq-block { padding: 28px 16px 30px; }
  .about-section h2, .careers-section h2, .faq-block h2, .team-board h2 { font-size: 24px; }
  .about-section p, .about-section li, .careers-section p, .faq-item .a { font-size: 16px; max-width: none; }
  .team-grid { padding: 24px 16px; gap: 14px; }
  .team-board { padding: 24px 16px 32px; }
  .coming-soon { padding: 56px 16px 64px; }
  .coming-soon h1 { font-size: clamp(38px, 11vw, 56px); }
  .coming-soon p { font-size: 17px; max-width: none; }
}