/* ════════════════════════════════════════════════════════════════════
   Awards for Humanity — shared design system
   ────────────────────────────────────────────────────────────────────
   Tokens, resets, nav, generic section chrome, buttons, animations.
   Block-specific styles live alongside each block.
   ──── THEMING DISCIPLINE ────
   Block CSS must reference the tokens declared on :root below.
   Never hard-code hex colours or font-family strings inside block CSS.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces — white page with cream as the alternating-section wash.
     Editorial / award-program look: pure-white surfaces, strong black
     type, gold reserved for the brand logo, eyebrow rules,
     and link-hover. */
  --color-bg:           #ffffff;   /* page background */
  --color-surface:      #ffffff;   /* (formerly cream) — kept token, now white */
  --color-dark-bg:      #0a0a0a;   /* near-black for the rare dark section */
  --color-on-dark:      #ffffff;   /* text on dark surfaces */

  /* Foreground / ink — confident near-black across body and headings.
     #0a0a0a reads a hair softer than pure #000 on LED screens without
     losing the "strong black" feel. */
  --color-fg:           #0a0a0a;
  --color-fg-muted:     #4a4a4a;   /* secondary body text */
  --color-muted:        #0a0a0a;   /* eyebrows — black, set apart by tracking */

  /* Gold accent ladder — restrained. --color-accent is reserved for
     the few intentional moments (italic emphasis, eyebrow rules,
     link hover). Lighter rungs are kept for legacy callers. */
  --color-accent:       #8B6F47;   /* Antique Gold — softer brand accent */
  --color-accent-soft:  #C8970A;   /* Logo Gold — used only for the logo */
  --color-accent-3:     #6B5439;   /* Dark Gold — deep emphasis */
  --color-accent-4:     #B89A5A;   /* mid gold tint */
  --color-accent-5:     #D8C28A;   /* pale gold tint */
  --color-accent-6:     #EBDCB8;   /* lightest gold tint */

  /* Borders — neutral hairlines, no cream tint */
  --color-border:       #e6e6e6;
  --color-border-soft:  #ededed;

  /* Typography — Google Sans everywhere (headlines + body), with Tai
     Heritage Pro reserved exclusively for the Roman numerals on award
     cards. Loaded via @font-face in shared/fonts.html. */
  --font-display:       'Google Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:          'Google Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-eyebrow:       'Google Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-numeral:       'Tai Heritage Pro', Georgia, 'Times New Roman', serif;

  /* Spacing — more architectural breathing room for the new look. */
  --space-section-y:    112px;
  --space-section-x:    80px;
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ── Nav ───────────────────────────────────────────────────────────── */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 48px;
  background: rgba(255,255,255,0.97);
  transition: background 0.3s;
}
nav.site-nav.scrolled {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 12px rgba(0,0,0,0.06);
}
.nav-logo a.nav-logo-link { display: inline-flex; align-items: center; text-decoration: none; }

/* ── Brand mark ── reusable typographic logo: a gold ring + the
   stacked "AWARDS FOR / HUMANITY" wordmark in Tai Heritage Pro.
   Per-context size is set via CSS custom properties below. */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-gap, 12px);
  text-decoration: none;
  color: var(--color-accent-soft);     /* Logo Gold #C8970A */
}
.brand-mark__ring {
  display: block;
  width: var(--bm-ring, 48px);
  height: var(--bm-ring, 48px);
  border: var(--bm-border, 3px) solid currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}
.brand-mark__wordmark {
  font-family: var(--font-numeral);     /* Tai Heritage Pro */
  font-size: var(--bm-text, 14px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}
.brand-mark__wordmark > span { display: block; }

/* Nav context: compact mark */
.nav-logo .brand-mark {
  --bm-ring: 44px; --bm-border: 3px; --bm-text: 14px; --bm-gap: 12px;
}
/* Footer context: larger mark */
.block-footer .brand-mark {
  --bm-ring: 96px; --bm-border: 6px; --bm-text: 28px; --bm-gap: 22px;
}
/* Narrow viewports: drop the wordmark from the nav, ring only */
@media (max-width: 640px) {
  .nav-logo .brand-mark__wordmark { display: none; }
}
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
  font-family: var(--font-eyebrow);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #333333;
  text-decoration: none; transition: color 0.2s;
}
.nav-links a:hover { color: var(--color-fg); }

.nav-right { display: flex; align-items: center; gap: 14px; }

/* Language switcher (visible only when AVAILABLE_LANGS has > 1 entry).
   nav.php emits one <a class="lang-option"> per language as siblings
   inside .lang-switcher. Inline pill layout — no dropdown. */
.lang-switcher { display: inline-flex; align-items: center; gap: 4px; }
.lang-switcher .lang-option {
  display: inline-flex; align-items: center;
  width: auto; padding: 6px 10px;
  font-family: var(--font-eyebrow);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-muted);
  background: none; border: 1px solid transparent;
  text-decoration: none; transition: color 0.2s, border-color 0.2s;
}
.lang-switcher .lang-option:hover { color: var(--color-accent); }
.lang-switcher .lang-option.active {
  color: var(--color-accent);
  border-color: var(--color-border-soft);
}
.lang-btn {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-eyebrow);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #333333; background: none; border: 1px solid var(--color-border-soft);
  padding: 7px 12px; cursor: pointer; transition: border-color 0.2s;
  white-space: nowrap; line-height: 1;
}
.lang-btn:hover { border-color: var(--color-fg); }
.lang-btn svg { width: 9px; height: 9px; transition: transform 0.2s; }
.lang-btn.open svg { transform: rotate(180deg); }
.lang-dropdown {
  position: absolute; top: calc(100% + 5px); right: 0;
  background: var(--color-bg); border: 1px solid var(--color-border);
  min-width: 130px; z-index: 999;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.lang-dropdown.open { opacity: 1; pointer-events: all; transform: translateY(0); }
.lang-option {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; cursor: pointer; width: 100%;
  font-family: var(--font-eyebrow);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: #666666; background: none; border: none; text-align: left;
  transition: background 0.12s, color 0.12s; text-decoration: none;
}
.lang-option:hover { background: var(--color-surface); color: var(--color-fg); }
.lang-option.active { color: var(--color-fg); font-weight: 700; }

/* ── Section primitives ────────────────────────────────────────────── */
section { padding: var(--space-section-y) var(--space-section-x); }

/* ── Compact vertical rhythm ──
   Override every block's top/bottom padding to a much tighter value so
   pages don't drift apart visually. Uses higher specificity than the
   per-block rules (`body section.block` vs `.block-statement`) so it
   always wins without needing !important. Adjacent-sibling rules like
   `.block-team + .block-team` and `.block-title + .block-paragraph`
   keep their tighter overrides (specificity is also (0,2,0) ≥ ours).
   To add deliberate spacing between blocks, drop in the `spacer` block. */
body section.block {
  padding-top: clamp(20px, 3vh, 36px);
  padding-bottom: clamp(20px, 3vh, 36px);
}

/* The fixed public nav sits at z-index 100 across the top ~76px of the
   viewport. The first block on each page must clear it, otherwise its
   eyebrow/title hide under the nav. Higher specificity than the global
   compact rule above (the :first-child pseudo-class bumps specificity)
   so this wins for the first block only. */
main > section.block:first-child {
  padding-top: clamp(96px, 13vh, 140px);
}
.section-label {
  font-family: var(--font-eyebrow);
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-accent);
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
/* Short black stroke before each eyebrow — anchors the inscription. */
.section-label::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--color-fg);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 100px); font-weight: 900;
  line-height: 0.95; margin-bottom: 40px;
  letter-spacing: -0.035em;
}
.section-title em { font-style: italic; color: var(--color-accent); font-weight: 900; }
.rule { width: 48px; height: 1px; background: var(--color-border-soft); margin-bottom: 32px; }

/* Sections with dark backgrounds invert text colour. */
.section--dark { background: var(--color-dark-bg); }
.section--dark .section-title { color: var(--color-on-dark); }
.section--dark .section-title em { color: rgba(255,255,255,0.5); }
.section--dark .section-label { color: rgba(255,255,255,0.4); }
.section--surface { background: var(--color-surface); }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn-primary, .btn-outline {
  font-family: var(--font-eyebrow);
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none; cursor: pointer; display: inline-block;
}
.btn-primary {
  padding: 14px 36px;
  background: var(--color-accent); color: var(--color-on-dark);
  border: none; transition: background 0.2s;
}
.btn-primary:hover { background: var(--color-accent-soft); }
.btn-outline {
  padding: 13px 36px;
  background: transparent; color: var(--color-on-dark);
  border: 1px solid rgba(255,255,255,0.5);
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover { border-color: rgba(255,255,255,0.9); }
/* Outline variant on light backgrounds */
.section--surface .btn-outline,
.btn-outline.on-light {
  color: var(--color-fg); border-color: var(--color-fg);
}
.section--surface .btn-outline:hover,
.btn-outline.on-light:hover { background: var(--color-fg); color: var(--color-on-dark); }

/* ── Preserve user-entered line breaks in every editable text field ──
   Every CMS-rendered text element carries a [data-field] attribute.
   The default `white-space: normal` collapses newlines (and the blank
   lines users type between paragraphs) into single spaces, silently
   discarding their formatting on save+reload. `pre-line` preserves
   newlines as visible breaks while still collapsing accidental
   double-spaces inside a sentence. Applies to the public site AND
   the editor (data-field is rendered in both). */
[data-field] { white-space: pre-line; }

/* ── External link indicator ──────────────────────────────────────── */
/* Any <a data-external> gets a small ↗ glyph appended via CSS so the
   pseudo-element doesn't get caught by contenteditable in the editor.
   Suppressed on button-like CTAs where the icon would clash with the
   button shape — buttons still get target="_blank" set in the markup. */
a[data-external]::after {
  content: ' \2197';                /* north-east arrow */
  display: inline-block;
  margin-left: 2px;
  font-size: 0.78em;
  vertical-align: super;
  opacity: 0.6;
  text-decoration: none;
}
a.btn-primary[data-external]::after,
a.btn-outline[data-external]::after { content: none; }

/* ── Scroll reveal (desktop only) ──────────────────────────────────── */
@media (hover: hover) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s, transform 0.7s; }
  .reveal.visible { opacity: 1; transform: none; }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }
}
@media (hover: none) { .reveal { opacity: 1; transform: none; } }

/* ── Editor chrome — hidden by default ──
   These classes are emitted server-side by block render.php files (e.g.
   the "+ Add" button at the end of every list grid, the "× Close
   details" button inside exhibitions cards). The editor's stylesheet
   (editor.css) provides their visible styling in edit mode and is
   loaded LATER in the cascade, so its rules win for /edit.php.
   On the public site editor.css isn't loaded; without these defaults
   the buttons would render with browser-default <button> styling. */
.cms-list-item-add,
.cms-card-details-close {
  display: none;
}

/* ── Responsive baseline ───────────────────────────────────────────── */
@media (max-width: 900px) {
  nav.site-nav { padding: 14px 16px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 11px; letter-spacing: 0.12em; }
  section { padding: 56px 20px; }
  .section-title { font-size: 36px; }
}
@media (max-width: 480px) {
  nav.site-nav { padding: 12px 14px; }
  .nav-links { gap: 12px; }
  .nav-links a { font-size: 10px; letter-spacing: 0.1em; }
  .lang-switcher .lang-option { padding: 5px 7px; font-size: 10px; letter-spacing: 0.1em; }
  section { padding: 48px 16px; }
  .btn-primary, .btn-outline { width: 100%; text-align: center; padding: 16px 20px; }
}

  /* ── Editor-facing tokens ──────────────────────────────────────
     OHA's own golds and browns. Its picker previously offered none of them.
     These three are the ONLY place the editor learns this brand's
     colours. PHP reads them (site_tokens() in engine/helpers.php),
     edit.php passes them to editor/editor.js. Nothing restates a
     hex value — change a token above and both follow. */
:root {
  --cms-palette: var(--color-bg), var(--color-accent-6), var(--color-accent-5), var(--color-accent-4), var(--color-accent-soft), var(--color-accent), var(--color-accent-3), var(--color-fg);
  --cms-ink:     var(--color-fg);
  --cms-paper:   var(--color-on-dark);
}

/* ═══════════════════════════════════════════════════════════════════
 * Shared block primitives — see BLOCK-PRIMITIVES.md
 * ═══════════════════════════════════════════════════════════════════
 *
 * The class NAMES below are the same on every instance. The VALUES are
 * this site's own, mapped onto rules this stylesheet already had, so a
 * block built for another site picks up this brand automatically.
 *
 * Every name defined here is currently UNUSED in this site's rendered
 * output, which is why adding them changes nothing today. Names this
 * site already uses are deliberately left alone and listed at the
 * bottom of this file.
 */

/* Section shell ---------------------------------------------------- */
/* .block is already styled above (body section.block sets this site's
   vertical rhythm) — not redeclared here.
   This site's sections are full-bleed with horizontal padding, so it
   never needed a centred container. .wrap adds one for visiting
   blocks that expect it; 1100px is the widest container this
   site's own blocks use. */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-section-x); }

/* Typography ------------------------------------------------------- */
/* .section-number is .section-label's treatment with tabular figures,
   accented so an index numeral reads as a marker not as body text. */
.section-number {
  font-family: var(--font-eyebrow);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  color: var(--color-accent);
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
}
.copy { font-size: 17px; line-height: 1.6; max-width: 700px; }

/* Controls --------------------------------------------------------- */
/* .btn is the base this site already shares between .btn-primary and
   .btn-outline, given its own name so a block can ask for the base
   treatment alone. Declarations copied from that rule verbatim. */
.btn { font-family: var(--font-eyebrow);
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none; cursor: pointer; display: inline-block; }

/* Decoration ------------------------------------------------------- */
.chip {
  display: inline-block;
  font-family: var(--font-eyebrow);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-muted);
  border: 1px solid var(--color-border); padding: 8px 14px;
}
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 28px;
}

/* State ------------------------------------------------------------ */
/* .is-empty is NOT declared here. The exhibitions block already uses
   it, compounded as `.exh-modal-img-wrap.is-empty`, to swap a photo
   for its placeholder. A bare `.is-empty { opacity: .45 }` would also
   match that element and dim the modal. The name stays owned by the
   block on this site. */

/* Already defined above, left untouched:
     .section--dark .section--surface .section-label .section-title
     .btn-primary .btn-outline .rule .reveal family .active */

/* ── Shared block tokens ─────────────────────────────────────────────
 * Same idea as the class vocabulary above: shared NAMES, local VALUES.
 *
 * Blocks copied between sites bring their token names with them, and a
 * var() with no fallback that resolves to nothing makes the whole
 * declaration invalid — the border silently falls back to currentColor
 * and the background to transparent. The block looks *almost* right,
 * which is harder to spot than looking broken. bin/fgcms-token-check
 * finds these; these aliases are what fix them.
 */
:root {
  --ink:    var(--color-fg);
  --paper:  var(--color-on-dark);
  --bg:     var(--color-bg);
  --accent: var(--color-accent);
  --line:   var(--color-border);
  --muted:  var(--color-muted);
  --maxw:   1100px;
}

/* ── Cross-brand token aliases ── (bin/fgcms-token-aliases) ── */
/* Every token any block in the library asks for, mapped to this
 * brand's own palette. A name the site already defines is skipped —
 * these only fill gaps, they never override a real definition. */
:root {
  --color-muted-2:       var(--color-muted);
  --color-black:         var(--color-fg);
  --color-accent-2:      var(--color-accent);
  --red:                 var(--color-accent);
  --red-dark:            var(--color-accent-soft);
  --red-light:           var(--color-accent);
  --dark:                var(--color-fg);
  --white:               var(--color-on-dark);
  --off-white:           var(--color-bg);
  --off:                 var(--color-surface);
  --mid:                 var(--color-fg-muted);
  --light:               var(--color-muted);
  --rule:                var(--color-border);
  --font-title:          var(--font-display);
  --ifa-accent:          var(--color-accent);
  --ifa-accent-dark:     var(--color-accent-soft);
  --ifa-accent-light:    var(--color-accent);
  --ifa-white:           var(--color-bg);
  --ifa-off:             var(--color-surface);
  --ifa-dark:            var(--color-fg);
  --ifa-mid:             var(--color-fg-muted);
  --ifa-light:           var(--color-muted);
  --ifa-rule:            var(--color-border);
  --ifa-radius:          0;
  --ifa-font-title:      var(--font-display);
  --ifa-font-body:       var(--font-body);
  --field:               var(--color-surface);
  --field-line:          var(--color-border);
  --radius:              0;
  --cm-speed:            42s;
  --h-cycle:             0;
}
/* ── end cross-brand token aliases ── */

/* ── Library block normalisation ── (bin/fgcms-library-normalise) ── */
/* ── bare .btn ─────────────────────────────────────────────────────
   This brand's `.btn` sets type and nothing else; the box lives on
   .btn-primary and .btn-outline. A borrowed block writing
   `class="btn solid"` or `class="btn btn-dark"` therefore got a filled
   shape with no padding and an outline one with no border.

   Excluding the variants keeps every button already on the site
   exactly as it is — they carry their own box and never match here.
   .btn-dark is not excluded: this brand has no such button of its own,
   it is one the shared block set asks for, and the rule above gives it
   a colour but no box. */
.btn:not(.btn-primary, .btn-outline, .btn-solid) {
  padding: 14px 36px;
  border: 1px solid transparent;
  border-radius: 0;
}

/* Written by bin/fgcms-library-normalise. Values come from this brand's
 * own tokens, so these follow the palette rather than fixing colours. */

/* ── .btn.solid ────────────────────────────────────────────────────
   Blocks emit `btn solid` for a filled button. Sites that only define
   .btn-primary have no rule for it, so it rendered as an outline. */
.btn.solid {
  background: var(--color-fg); color: var(--color-bg);
  border-color: var(--color-fg);
}
.btn.solid:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ── .btn-dark ─────────────────────────────────────────────────────
   ita_badge_note asks for a dark button. Only ITA defines one; on the
   other seven it fell through to whatever .btn gave it. */
.btn-dark {
  background: var(--color-fg); color: var(--color-bg);
  border-color: var(--color-fg);
}
.btn-dark:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ── bare .btn-primary / .btn-outline ──────────────────────────────
   Three library blocks (about, hero, cinematic_cycle_timeline) write
   class="btn-primary" with no .btn beside it. On brands that put the
   box on .btn and only the colour on .btn-primary, that renders a
   filled shape with 0px of padding, and an outline button with no
   border at all — plain text. Measured on ITA and ADS.

   Adding .btn to the markup is not the fix: four brands declare .btn
   AFTER .btn-primary, so it would win on source order and repaint
   buttons that are correct today.

   :not(.btn) means correct markup is never touched, and wrapping it in
   :where() as well drops the whole selector to zero specificity — so a
   brand that already gives .btn-primary a box keeps its own numbers.
   Without that, this rule sat later in the file at equal weight and
   repainted Farmani's and Ostuni's buttons from 36px of side padding
   to 26px. It fills a gap; it never overrules. */
:where(.btn-primary, .btn-outline, .btn-dark, .btn-solid):where(:not(.btn)) {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px;
  border: 1px solid transparent; border-radius: 0;
  font-family: var(--font-eyebrow); font-weight: 600;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
}
:where(.btn-outline):where(:not(.btn)) { border-color: var(--color-border); background: transparent; }

/* ── .link-cta ─────────────────────────────────────────────────────
   A text link with a rule beneath, used by four blocks. Only ITA had
   it; elsewhere those links read as body text. */
.link-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 0;
  font-family: var(--font-eyebrow);
  font-weight: 600; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  color: var(--color-fg); border-bottom: 2px solid var(--color-accent);
  transition: color .2s, border-color .2s;
}
.link-cta:hover { color: var(--color-accent); }

/* ── Tables ────────────────────────────────────────────────────────
   eada_honours_table is the only block built on a table, and no site
   styled tables at all — it rendered with browser defaults everywhere,
   including on EADA itself. Scoped to .block so page content is
   untouched. */
:where(.block) table {
  width: 100%; border-collapse: collapse; margin: 24px 0 0;
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
}
:where(.block) table th, :where(.block) table td {
  padding: 13px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
:where(.block) table th {
  font-family: var(--font-eyebrow); font-weight: 600;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-muted); border-bottom-width: 2px;
  border-bottom-color: var(--color-fg);
}
:where(.block) table td { color: var(--color-fg-muted); }
:where(.block) table tr:last-child td { border-bottom: 0; }
/* A wide table must scroll inside its block rather than push the page
   sideways. */
.block .table-wrap, :where(.block) table { max-width: 100%; }
:where(.block) .table-wrap { overflow-x: auto; }

/* ── Rhythm ────────────────────────────────────────────────────────
   A heading immediately followed by a paragraph or subtitle sat on top
   of it wherever the block brought no spacing of its own.

   Wrapped in :where() on purpose. :where() contributes ZERO specificity,
   so any rule a block defines for itself beats these — they fill a gap
   and never override a decision. Written normally, `.block h2 + .copy`
   scores higher than ADS's own `.billboard .copy { margin: 34px 0 0 }`
   and silently cut every ADS block by 20px. */
:where(.block) h1 + p, :where(.block) h2 + p, :where(.block) h3 + p,
:where(.block) h1 + .copy, :where(.block) h2 + .copy, :where(.block) h3 + .copy,
:where(.block) h2 + [data-field$="subtitle"],
:where(.block) h2 + [data-field$="intro"],
:where(.block) h2 + [data-field$="body"] { margin-top: 14px; }

/* The name-then-role pair — a card title with its one line of detail
   under it — is written as h3/h4 followed by a div or a span as often
   as by a p. Those went unspaced: measured at 4px across all eight
   brands in team, the two jury grids and cinematic_jury_row, which is
   line-box leading and nothing else. Less than a paragraph gets, since
   this is a caption sitting with its heading rather than a new
   thought. */
:where(.block) h3 + div, :where(.block) h3 + span,
:where(.block) h4 + div, :where(.block) h4 + span { margin-top: 8px; }
/* ── end library block normalisation ── */

/* ── Section links land below the pinned header ──────────────────────
   shared/site.js measures whatever is pinned to the top of the window —
   nav, header, cookie bar — into --fg-nav-h, since that height changes
   with the screen and differs site to site. The `html` prefix outranks
   fixed guesses individual blocks set for themselves. */
html [data-block-id] { scroll-margin-top: calc(var(--fg-nav-h, 72px) + 12px); }