/* ════════════════════════════════════════════════════════════════════
   ITA-CMS — theme layer
   ────────────────────────────────────────────────────────────────────
   Structure inherited from the shared FG-CMS design system (same
   engine as IDA-CMS). Canonical spec for this palette + component
   system lives at
   /Users/laurent/Documents/CMS-FG/International Toy Awards/ITA-DESIGN-SYSTEM.md
   — read it before touching any value below.

   ──── THEMING DISCIPLINE ────
   Block CSS must reference the tokens + shared component classes
   below. Never hard-code a hex, font-family, or spacing number inside
   a block's own style.css — use var(--color-...)/var(--font-...) or
   the shared .kicker/.card/.chip/.btn-primary/.shape classes.

   ──── WHY THIS FILE HAS A FULL COMPONENT LIBRARY, NOT JUST TOKENS ────
   Unlike IDA (one accent color, imagery-driven, per-block CSS), ITA's
   whole identity IS a small shared component system derived straight
   from the brand's logo mark (square/circle/triangle in gold/red/teal
   — see §6 of the design-system doc). So the shared primitives below
   — .shape, .kicker, .card, .chip, .crit-item, .tl-*, .stat*,
   .cat-card, .level-pill, .badge-note, .strip-gold/red/teal,
   .brandshapes — are ported near-verbatim from the approved mockup
   (toy-awards-v2-final.html) so every future block can just emit
   markup with these classes instead of re-defining CSS per block.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces — 2026-08-25 v2: clean opaque white, no tinted/textured
     paper ground (design-system-v2 §1 — explicit Aug 21 meeting
     decision). --color-surface stays as the section-banding token but
     is now a cool-neutral near-white, not the old warm-tinted paper. */
  --color-bg:           #ffffff;
  --color-surface:      #F5F6F7;               /* --paper-2 — section banding only, never the base ground */
  --color-black:        #000000;               /* formal v2 palette entry — footer ground, sparing use only */
  --color-dark-bg:      #021E3E;               /* navy — now an active full-bleed section ground (Recognition), not text-only */
  --color-on-dark:      #ffffff;

  /* Foreground / ink — navy is the only text color used on light grounds */
  --color-fg:           #021E3E;               /* --navy */
  --color-fg-muted:     rgba(2,30,62,.82);      /* --navy-82 — body/lead text; bumped from .72 (v1) — read as washed-out at low contrast */
  --color-muted:        rgba(2,30,62,.55);      /* --navy-55 — kicker labels */
  --color-muted-2:      rgba(2,30,62,.40);      /* --navy-40 — eyebrow numerals, muted numbers */

  /* Accent — THREE brand accents cycled gold → red → teal, not one.
     Sampled directly from the client's logo files (square=gold,
     circle=red, triangle=teal). --color-accent (red) is the default
     "primary" slot the engine/blocks fall back to (hover states,
     tagline, CTA underline); accent-2/3 are gold/teal for the cycle. */
  --color-accent:       #E8151C;               /* --red */
  --color-accent-soft:  #c11117;               /* deeper red for hover-on-hover, derived not sampled */
  --color-accent-2:     #FCB002;               /* --gold */
  --color-accent-3:     #028D98;               /* --teal */

  /* Borders */
  --color-border:       rgba(2,30,62,0.12);     /* --line */
  --color-border-soft:  rgba(2,30,62,0.07);     /* --line-soft */

  /* Typography — 2026-08-25: v2 design system (see
     source material/ITA-DESIGN-SYSTEM-v2.md §2). Replaces the
     system-font-only v1 choice with a real display/body/mono trio,
     driven by the Aug 21 2026 B2B-repositioning meeting: the brand
     needs to read as an editorial design-awards publication (Red Dot,
     iF Design Award, ITA's own sister EPDA), not a toy-brand block-
     letter mark. --font-display is now Fraunces, a variable serif
     with an automatic optical-size axis — see the v2 doc's weight
     caveat before changing any heading's font-size without also
     checking whether it still reads as bold enough. --font-body is
     Archivo (deliberately not Inter/Space Grotesk — see the CMS-FG
     "avoid AI-generated design defaults" guidance). --font-mono is
     new: IBM Plex Mono, used only where content is actually a number
     or index (category counts, process step numbers, kicker labels
     — never decoratively). Loaded via shared/fonts.html. */
  --font-display:       'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:           'Archivo', Arial, Helvetica, sans-serif;
  --font-eyebrow:        'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  --font-mono:           'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  /* Layout */
  --maxw:               1320px;
  --radius:             16px;

  /* Spacing — vertical section rhythm. This used to be 96px, applied
     via the base `section` rule below AND re-declared verbatim inside
     most individual blocks' own .block-XXX { padding: 96px 0 } rule —
     harmless duplication on its own, but it meant two adjacent blocks
     stacked to a 192px gap, which read as an oversized void. Turned
     down to 56px and the per-block redeclarations were deleted so
     this one variable is now the only place that rhythm is set —
     tune it here and every block using the default `section` padding
     follows. Horizontal gutter lives on .wrap, not on the bare
     <section>, see the section primitives below. */
  --space-section-y:    56px;
  --space-section-x:    32px;
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  /* Fixed, very-low-key decorative backdrop (two pastel shapes — blue
     triangle upper area, yellow triangle lower-left) that shows faintly
     through the semi-transparent section/hero grounds below. Carried
     over from the approved mockup, minus its third shape: a pink
     circle that sat lower-right. background-attachment:fixed pins this
     to the VIEWPORT, not the document, so that circle always landed in
     the same on-screen spot (lower-right) regardless of scroll — right
     behind the home hero's logo panel once that panel's own fill was
     removed, reading as a stray shape rather than a backdrop. Dropped
     it rather than re-adding an opaque panel, which would have hidden
     the triangle/blob elsewhere in the hero too. Do not reintroduce a
     third shape without re-approval, see ITA-DESIGN-SYSTEM.md §1.

     2026-08-24: client found the two remaining shapes distracting.
     Faded to fill-opacity:0 (invisible) rather than deleting them —
     kept in place, same positions/colors, so this is one attribute
     flip away from being restored if that's ever wanted again. */
  background:
    url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDI2NyAyODQ1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIHNsaWNlIj4KPHJlY3Qgd2lkdGg9IjQyNjciIGhlaWdodD0iMjg0NSIgZmlsbD0iI2ZmZmZmZiIvPgo8cG9seWdvbiBwb2ludHM9IjE4MTQsMCAzODQyLDAgMjAzMSwxNjc0IiBmaWxsPSIjQkZFQ0ZBIiBmaWxsLW9wYWNpdHk9IjAiLz4KPHBvbHlnb24gcG9pbnRzPSIwLDEyMDYgMTU4MywxOTI1IDExNjYsMjg0NCAwLDI4NDQiIGZpbGw9IiNGRUZDRTAiIGZpbGwtb3BhY2l0eT0iMCIvPgo8L3N2Zz4K")
      center/cover no-repeat fixed,
    var(--color-bg);
  color: var(--color-fg);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* 2026-08-24: client audit — flat vector color blocks (esp. .section-navy)
   read as too clean/generated. A near-invisible fixed grain layer, blended
   over every section regardless of its own background color, breaks that
   up without adding a visible "design element" — same restraint as the
   faded backdrop shapes above. Not a shape, just texture: kept deliberately
   subtle (opacity .035) rather than a decorative flourish. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 999998; pointer-events: none;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iMiIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAwIDAgMCAwLjkgMCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNuKSIvPjwvc3ZnPg==") repeat;
  background-size: 180px 180px;
  opacity: .035; mix-blend-mode: overlay;
}

a.cms-inline-link {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.cms-inline-link:hover { opacity: 0.7; }

::selection { background: var(--color-accent); color: #ffffff; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 3px;
}

/* ── Layout primitive ─────────────────────────────────────────────────
   Every block wraps its content in .wrap for the shared max-width +
   horizontal gutter, instead of putting horizontal padding on the
   <section> itself (see the section primitives below). */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-section-x); }

/* ── Shape system — the ONLY iconography on this site ─────────────────
   square = gold, circle = red, triangle = teal. System-wide, no
   exceptions. See ITA-DESIGN-SYSTEM.md §6. */
.shape { display: inline-block; flex: none; }
.sq  { width: 9px; height: 9px; border-radius: 2px; background: var(--color-accent-2); }
.ci  { width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); }
.tri {
  width: 0; height: 0;
  border-left: 5.5px solid transparent; border-right: 5.5px solid transparent;
  border-top: 9.5px solid var(--color-accent-3);
}
/* .brandshapes is a direct quote of the logo mark (all three shapes in
   a row) — reserve for moments that represent the brand as a whole
   (closing CTAs), not a generic divider. */
.brandshapes { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.brandshapes .sq, .brandshapes .ci { width: 13px; height: 13px; }
.brandshapes .tri { border-left-width: 7px; border-right-width: 7px; border-top-width: 12px; }

/* ── Type scale ────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--color-fg);
}
/* text-wrap:balance on the heading classes prevents ragged single-word
   orphan lines (e.g. a heading wrapping to leave just its last word,
   like "toys", alone on its own line) — the browser distributes the
   line break evenly across all wrapped lines instead of just filling
   greedily left-to-right. Headings only (short, bounded text) — never
   applied to running body copy, where balance is expensive/pointless. */
.display  { font-size: clamp(40px,6.2vw,80px); font-weight: 700; line-height: 1.01; letter-spacing: -0.02em; text-wrap: balance; }
.h1       { font-size: clamp(32px,4.2vw,52px); font-weight: 700; text-wrap: balance; }
.h2       { font-size: clamp(29px,3.6vw,44px); font-weight: 700; text-wrap: balance; }
.h3       { font-size: clamp(18px,1.9vw,21px); font-weight: 700; text-wrap: balance; }
.lead     { font-size: clamp(16px,1.5vw,19px); line-height: 1.6; color: var(--color-fg-muted); font-weight: 400; }
p         { line-height: 1.75; font-size: 15.5px; color: var(--color-fg-muted); }
.tagline  { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px,2vw,24px); color: var(--color-accent); }

.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  /* flex-wrap + max-width so a long kicker string can't silently
     overflow past the viewport on narrow screens — flex containers
     don't let bare text wrap by default. See ita_page_header's
     .cph-label comment for the mobile bug this was found from. */
  flex-wrap: wrap; max-width: 100%; box-sizing: border-box;
  font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: 26px;
}

/* ── Nav ───────────────────────────────────────────────────────────── */
/* Sticky, always-light — unlike IDA there is no hero image to sit
   transparently over, so there is no scrolled/dark toggle state.
   shared/site.js still toggles a .scrolled class (for a subtle shadow
   only); it does NOT change colors here. */
nav.site-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 28px;
  padding: 15px var(--space-section-x);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
nav.site-nav.scrolled { box-shadow: 0 6px 20px rgba(2,30,62,0.06); }
.nav-logo a.nav-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 42px; width: auto; display: block; }
/* Links list + CTA + nav-right (lang/hamburger) are grouped together
   on the right of the logo via this auto-margin, rather than a 3-way
   justify-content: space-between — that would spread logo / links /
   nav-right evenly instead of clustering links+CTA next to each
   other, which is how the approved mockup's single .navlinks row reads. */
.nav-links { display: flex; gap: 34px; list-style: none; margin-left: auto; }
.nav-links a {
  font-family: var(--font-eyebrow);
  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--color-fg);
  text-decoration: none; opacity: 0.6; transition: opacity 0.2s, color 0.2s;
  position: relative; padding: 6px 0 10px;
}
.nav-links a:hover { opacity: 1; }
.nav-links li:nth-child(3n+1) a:hover { color: var(--color-accent-2); }
.nav-links li:nth-child(3n+2) a:hover { color: var(--color-accent); }
.nav-links li:nth-child(3n+3) a:hover { color: var(--color-accent-3); }
/* The editor/engine doesn't mark an "active" nav link server-side on
   a multi-page CMS the way the single-file mockup's goTo() JS did —
   left here for a future active-state enhancement (e.g. compare
   link href to the current ?page= slug) rather than wired up now. */
.nav-links a.active { opacity: 1; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 6px solid var(--color-accent);
}

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

.nav-hamburger {
  display: none; width: 36px; height: 36px; padding: 0;
  background: none; border: none; cursor: pointer; position: relative;
}
.nav-hamburger span {
  position: absolute; left: 7px; right: 7px; height: 2px; border-radius: 1px;
  background: var(--color-fg); transition: transform 0.2s, opacity 0.2s, top 0.2s;
}
.nav-hamburger span:nth-child(1) { top: 11px; }
.nav-hamburger span:nth-child(2) { top: 17px; }
.nav-hamburger span:nth-child(3) { top: 23px; }
nav.site-nav.is-open .nav-hamburger span:nth-child(1) { top: 17px; transform: rotate(45deg); }
nav.site-nav.is-open .nav-hamburger span:nth-child(2) { opacity: 0; }
nav.site-nav.is-open .nav-hamburger span:nth-child(3) { top: 17px; transform: rotate(-45deg); }

/* Language switcher (visible only when AVAILABLE_LANGS has > 1 entry) */
.lang-switcher { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-eyebrow);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-fg); background: none;
  border: 1px solid var(--color-border);
  padding: 7px 12px; cursor: pointer; transition: border-color 0.2s;
  white-space: nowrap; line-height: 1; border-radius: 999px;
}
.lang-btn:hover { border-color: var(--color-accent); }
.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; border-radius: 10px; overflow: hidden;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 4px 16px rgba(2,30,62,0.10);
}
.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: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-muted); 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 ────────────────────────────────────────────── */
/* Horizontal gutter lives on .wrap (see above), not here — matches the
   approved mockup exactly, where <section> only carries vertical
   padding and every section's content sits inside a .wrap div. */
/* 2026-08-26: blocks no longer carry their own top/bottom whitespace —
   the gap between two blocks is now an explicit ita_spacer block in
   the page's own block list, so an author can remove/resize/skip a
   gap per-spot instead of fighting a CSS rule baked into every block.
   See ita_page_header/ita_faq_nav/ita_article_body/ita_badge_note for
   the same padding removed at the block level.
   display:flow-root (not the default block) because a section with
   zero padding/border no longer stops its first/last child's own
   margin from collapsing through it — e.g. a <dl>'s UA-default margin
   was leaking out and pushing the whole section down, reopening
   exactly the blank-space gap this change is meant to remove. */
section { padding: 0; display: flow-root; }
.section-white { background: var(--color-bg); }
.section-paper { background: var(--color-surface); }
/* 2026-08-24: client audit — .section-white/.section-paper existed
   but were applied nowhere, so every section on every page sat on
   identical flat white with no visual separation beyond ~56px of
   padding. .section-navy is new: a real color-block section (not
   just a decorative accent on a kicker or a button) so the eye has
   more than one landmark to land on scrolling down a page. Child
   text colors are overridden here, scoped under .section-navy, so
   any block can opt into it (via a `bg` field → this class) without
   each block's own style.css re-deriving navy-safe contrast. */
.section-navy {
  background: var(--color-dark-bg); color: var(--color-on-dark);
}
.section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4 { color: var(--color-on-dark); }
.section-navy p, .section-navy .lead { color: rgba(255,255,255,.82); }
.section-navy .kicker { color: rgba(255,255,255,.75); }
/* Neutral (non-brand) marker color, same rule as .strip-red/.strip-teal
   above — a same-hue shape (e.g. the navy-adjacent look of a dim
   accent) would lose contrast against this background, so on any
   dark section every shape marker turns solid white instead of
   keeping the gold/red/teal cycle. */
.section-navy .kicker .shape.sq, .section-navy .kicker .shape.ci { background: #fff; }
.section-navy .kicker .shape.tri { background: none; border-top-color: #fff; }
.center { text-align: center; }
.max-720 { max-width: 720px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* No fixed-nav clearance needed on the first block — nav is `sticky`,
   not `fixed`, so it already reserves its own space in normal flow. */

/* No max-width on .section-head itself — a section's kicker/title should
   be free to use the full block width (var(--maxw)), same as the content
   below it. Only the intro/lead paragraph gets its own narrower measure,
   for reading comfort — capping the whole header container to 760px
   used to squeeze titles into a visibly narrower column than the rest
   of the section, wrapping headings earlier than the block width
   actually required. */
.section-head { margin-bottom: 54px; }
/* 18px title→paragraph gap, matching every other title+body pattern
   sitewide (ita_statement, ita_two_col_text, ita_page_header) — this
   was previously unset here, so the title and intro paragraph sat
   flush against each other (0px) in every .section-head block
   (ita_chip_grid, ita_icon_cards, ita_timeline), the one inconsistent
   case among them. */
.section-head .lead { max-width: 720px; margin-top: 18px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }

/* ── Grid ──────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 34px; } }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px;
  font-weight: 700; font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase;
  cursor: pointer; border: 1.5px solid transparent; transition: all .2s ease;
  white-space: nowrap; font-family: var(--font-eyebrow); text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--color-fg); color: #fff; }
.btn-primary:hover { background: var(--color-accent); }
.btn-outline { background: transparent; color: var(--color-fg); border-color: var(--color-border); }
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-dark { background: var(--color-fg); color: #fff; }
.btn-dark:hover { background: var(--color-accent); }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 34px; }
.link-cta {
  font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 0;
  border-bottom: 2px solid var(--color-accent); color: var(--color-fg);
}

/* ── Cards ─────────────────────────────────────────────────────────── */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px 28px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(2,30,62,.08); }
.card .icon { width: 32px; height: 32px; border-radius: 9px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; }
.card .icon.i-gold { background: rgba(252,176,2,.14); }
.card .icon.i-red  { background: rgba(232,21,28,.10); }
.card .icon.i-teal { background: rgba(2,141,152,.10); }
.card .num {
  font-family: var(--font-eyebrow); font-weight: 700; font-size: 12px; color: var(--color-muted-2);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; display: block;
}
.card h3 { margin-bottom: 11px; }

/* ── Pillars (icon + label + text row) ────────────────────────────── */
.pillar { display: flex; gap: 20px; align-items: flex-start; padding: 26px 0; border-top: 1px solid var(--color-border); }
.pillar:last-child { border-bottom: 1px solid var(--color-border); }
.pillar .picon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; margin-top: 2px; }
.pillar .picon.i-gold { background: rgba(252,176,2,.14); }
.pillar .picon.i-red  { background: rgba(232,21,28,.10); }
.pillar .picon.i-teal { background: rgba(2,141,152,.10); }
.pillar .picon.i-navy { background: rgba(2,30,62,.08); }
.pillar .ptxt b { font-family: var(--font-display); font-size: 17px; font-weight: 700; display: block; margin-bottom: 6px; }

/* ── Chips ─────────────────────────────────────────────────────────── */
.chip-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip {
  padding: 10px 18px 10px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  border: 1.5px solid var(--color-border); background: var(--color-bg); color: var(--color-fg);
  display: inline-flex; align-items: center; gap: 9px;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chip:nth-child(3n+1) .dot { background: var(--color-accent-2); }
.chip:nth-child(3n+2) .dot { background: var(--color-accent); }
.chip:nth-child(3n+3) .dot { background: var(--color-accent-3); }

/* ── Numbered criteria list ────────────────────────────────────────── */
.crit-list { margin-top: 30px; }
.crit-item {
  display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 24px 0;
  border-top: 1px solid var(--color-border); align-items: flex-start;
}
.crit-item:last-child { border-bottom: 1px solid var(--color-border); }
.crit-item .idx {
  width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff;
}
.crit-item:nth-child(3n+1) .idx { background: var(--color-accent-2); }
.crit-item:nth-child(3n+2) .idx { background: var(--color-accent); }
.crit-item:nth-child(3n+3) .idx { background: var(--color-accent-3); }
.crit-item h4 { font-size: 17.5px; font-weight: 700; margin-bottom: 6px; font-family: var(--font-display); color: var(--color-fg); }
.crit-item p { margin: 0; }

/* ── Timeline ──────────────────────────────────────────────────────── */
.tl-track { position: relative; margin-top: 46px; padding-left: 34px; border-left: 2px solid var(--color-border); }
.tl-item { position: relative; padding: 0 0 44px 26px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -43px; top: 2px; width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid var(--color-bg); box-shadow: 0 0 0 1px var(--color-border);
}
.tl-item:nth-child(3n+1)::before { background: var(--color-accent-2); }
.tl-item:nth-child(3n+2)::before { background: var(--color-accent); }
.tl-item:nth-child(3n+3)::before { background: var(--color-accent-3); }
.tl-date { font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 8px; }
.tl-item h4 { font-family: var(--font-display); font-size: 21px; font-weight: 700; margin-bottom: 6px; color: var(--color-fg); }
.tl-item p { max-width: 520px; }

/* ── Stats ─────────────────────────────────────────────────────────── */
.stat-row { display: flex; gap: 54px; flex-wrap: wrap; margin-top: 26px; }
.stat .dot { margin-bottom: 12px; }
.stat b { font-family: var(--font-display); font-size: clamp(32px,3.6vw,46px); font-weight: 700; display: block; color: var(--color-fg); }
.stat span { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted-2); }

/* ── Category / content cards ─────────────────────────────────────── */
.cat-card { background: var(--color-bg); border-radius: var(--radius); border: 1px solid var(--color-border); padding: 28px 26px; transition: transform .22s ease, box-shadow .22s ease; }
.cat-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(2,30,62,.08); }
.cat-card .cicon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.cat-card .catnum { font-family: var(--font-eyebrow); font-weight: 700; font-size: 12px; color: var(--color-muted-2); letter-spacing: .06em; margin-bottom: 4px; }
.cat-card h3 { margin-bottom: 10px; font-size: 18.5px; }
.cat-card p { font-size: 13.5px; margin-bottom: 16px; }
.cat-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-tags span { font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 6px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-fg-muted); }

/* ── Award-level pills ─────────────────────────────────────────────── */
.level-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(216px,1fr)); gap: 14px; margin-top: 32px; }
.level-pill {
  padding: 19px 20px; border-radius: 12px; background: var(--color-bg); border: 1.5px solid var(--color-border);
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--color-fg);
  display: flex; align-items: center; gap: 10px;
}
.level-pill .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.level-pill.top { background: var(--color-fg); color: #fff; border-color: var(--color-fg); font-weight: 700; }
.level-pill.top .dot { background: var(--color-accent-2); }
.level-pill.gold .dot { background: var(--color-accent-2); }
.level-pill.silver .dot { background: #9aa0a6; }
.level-pill.bronze .dot { background: #b3703a; }

/* ── Badge / notice box ────────────────────────────────────────────── */
.badge-note { margin-top: 40px; padding: 26px 28px; border-radius: 14px; background: var(--color-surface); border-left: 4px solid var(--color-accent); }
.badge-note h4 {
  font-family: var(--font-body); font-weight: 800; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent);
  margin-bottom: 12px; display: flex; align-items: center; gap: 9px;
}

/* ── Plain shape-bulleted list ─────────────────────────────────────── */
ul.plain { list-style: none; }
ul.plain li { padding: 11px 0 11px 24px; position: relative; font-size: 14.5px; color: var(--color-fg-muted); border-top: 1px solid var(--color-border); }
ul.plain li:first-child { border-top: none; }
ul.plain li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; }
ul.plain li:nth-child(3n+1)::before { background: var(--color-accent-2); border-radius: 2px; }
ul.plain li:nth-child(3n+2)::before { background: var(--color-accent); border-radius: 50%; }
ul.plain li:nth-child(3n+3)::before {
  width: 0; height: 0; background: none;
  border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 8px solid var(--color-accent-3);
  top: 20px;
}

.closing h2 { max-width: 820px; }

/* ── Preserve user-entered line breaks in every editable text field ── */
[data-field] { white-space: pre-line; }

/* ── External link indicator ──────────────────────────────────────── */
a[data-external]::after {
  content: ' \2197'; 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; } }
@media (prefers-reduced-motion: reduce) {
  .reveal, html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Editor chrome — hidden by default ──────────────────────────────── */
.cms-list-item-add,
.cms-card-details-close {
  display: none;
}

/* ── Responsive baseline ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .nav-links { display: none; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  nav.site-nav { padding: 16px 20px; flex-wrap: wrap; }
  nav.site-nav.is-open {
    background: rgba(255,255,255,0.98);
    box-shadow: 0 4px 16px rgba(2,30,62,0.12);
  }
  .nav-hamburger { display: inline-block; }
  /* Pin the hamburger to row 1 (with the logo) at the far right, and
     push the CTA button onto its own row directly below — order:1 on
     nav-right beats nav-cta's default order:0-by-DOM-position only
     because margin-left:auto below also forces nav-right to the end
     of whatever row it lands on. Without this, .nav-cta's width:100%
     (see the max-width:480px rule) ate the whole first row on its own
     and the hamburger got bumped down to a THIRD row underneath it. */
  .nav-right { order: 1; margin-left: auto; flex-shrink: 0; }
  .nav-cta { order: 2; flex-basis: 100%; margin-top: 12px; text-align: center; }
  .nav-links {
    display: flex; flex-direction: column;
    flex-basis: 100%; order: 3; gap: 0; margin: 0; padding: 0;
    overflow: hidden; max-height: 0; opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
  }
  nav.site-nav.is-open .nav-links {
    max-height: 80vh; opacity: 1; margin-top: 12px;
    border-top: 1px solid var(--color-border);
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block; padding: 14px 4px;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px; opacity: 1;
  }
  .nav-links li:last-child a { border-bottom: none; }
}
@media (max-width: 480px) {
  section { padding: 0; }
  /* :not(.nav-cta) — this full-width rule is meant for in-page buttons,
     not the nav bar's "Enter Now" pill. Without the exclusion it forced
     the CTA to consume its entire flex row by itself, which pushed
     .nav-right (the hamburger) off onto a THIRD row below it — see the
     .nav-right/.nav-cta order rules below for how the nav row is now
     laid out instead. */
  .btn-primary:not(.nav-cta), .btn-outline:not(.nav-cta) { width: 100%; text-align: center; justify-content: center; padding: 16px 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   COLOR STRIPS — solid accent-color bands, used sparingly for variety.
   Placed LAST on purpose: several rules here tie in CSS specificity
   with earlier component rules above (e.g. .chip:nth-child(3n+1)
   .dot), and on a specificity tie the browser uses source order — so
   these overrides must physically come after the base rules or they
   silently lose. See ITA-DESIGN-SYSTEM.md §1 for the "why" and the
   real bug this caused during the mockup build.
   ═══════════════════════════════════════════════════════════════════ */
.strip-gold { background: var(--color-accent-2); }
.strip-red  { background: var(--color-accent); }
.strip-teal { background: var(--color-accent-3); }

.strip-gold h1, .strip-gold h2, .strip-gold h3, .strip-gold h4 { color: var(--color-fg); }
.strip-red h1, .strip-red h2, .strip-red h3, .strip-red h4,
.strip-teal h1, .strip-teal h2, .strip-teal h3, .strip-teal h4 { color: #fff; }

/* .cm-outro (ita_chip_grid's outro paragraph) is a plain <div>, not a
   <p> — the CMS sanitizer strips <p> tags from rich-text fields (see
   engine/helpers.php's allowlist), so it never matched the `p`
   selector above and fell back to the default dark body-text color
   even inside a red/teal strip. Listed explicitly alongside p/.lead. */
.strip-gold p, .strip-gold .lead, .strip-gold .cm-outro { color: rgba(2,30,62,.72); }
.strip-red p, .strip-red .lead, .strip-red .cm-outro,
.strip-teal p, .strip-teal .lead, .strip-teal .cm-outro { color: rgba(255,255,255,.82); }

.strip-gold .kicker { color: rgba(2,30,62,.6); }
.strip-red .kicker, .strip-teal .kicker { color: rgba(255,255,255,.75); }
.strip-gold .link-cta { color: var(--color-fg); }
.strip-red .link-cta, .strip-teal .link-cta { color: #fff; }

/* neutral (non-brand) marker color so shapes never vanish into a same-hue strip */
.strip-gold .kicker .shape.sq, .strip-gold .kicker .shape.ci,
.strip-gold .chip .dot, .strip-gold ul.plain li:nth-child(3n+1)::before, .strip-gold ul.plain li:nth-child(3n+2)::before { background: var(--color-fg); }
.strip-gold .kicker .shape.tri, .strip-gold ul.plain li:nth-child(3n+3)::before { background: none; border-top-color: var(--color-fg); }

.strip-red .kicker .shape.sq, .strip-red .kicker .shape.ci, .strip-red .chip .dot,
.strip-red ul.plain li:nth-child(3n+1)::before, .strip-red ul.plain li:nth-child(3n+2)::before,
.strip-teal .kicker .shape.sq, .strip-teal .kicker .shape.ci, .strip-teal .chip .dot,
.strip-teal ul.plain li:nth-child(3n+1)::before, .strip-teal ul.plain li:nth-child(3n+2)::before { background: #fff; }
.strip-red .kicker .shape.tri, .strip-red ul.plain li:nth-child(3n+3)::before,
.strip-teal .kicker .shape.tri, .strip-teal ul.plain li:nth-child(3n+3)::before { background: none; border-top-color: #fff; }

.strip-gold .chip { background: rgba(2,30,62,.08); border-color: rgba(2,30,62,.22); color: var(--color-fg); }
.strip-red .chip, .strip-teal .chip { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; }

.strip-gold ul.plain li { border-color: rgba(2,30,62,.14); color: rgba(2,30,62,.72); }
.strip-red ul.plain li, .strip-teal ul.plain li { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.82); }

.strip-gold .btn-outline { border-color: rgba(2,30,62,.35); color: var(--color-fg); }
.strip-gold .btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); background: rgba(2,30,62,.06); }
.strip-red .btn-primary, .strip-teal .btn-primary { background: #fff; color: var(--color-fg); }
.strip-red .btn-primary:hover, .strip-teal .btn-primary:hover { background: var(--color-fg); color: #fff; }
.strip-red .btn-outline, .strip-teal .btn-outline { border-color: rgba(255,255,255,.55); color: #fff; }
.strip-red .btn-outline:hover, .strip-teal .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.12); }

/* the brand's own square+circle+triangle mark needs a backdrop to stay legible on any single accent color */
.strip-gold .brandshapes, .strip-red .brandshapes, .strip-teal .brandshapes { background: rgba(2,30,62,.12); padding: 8px 14px; border-radius: 999px; display: inline-flex; }

  /* ── Editor-facing tokens ──────────────────────────────────────
     white, banding grey, then the three logo accents (gold/red/teal), then navy ink.
     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-surface), var(--color-accent-2), 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 ---------------------------------------------------- */
/* .wrap already exists above. .block is used by 119 elements here and
   is deliberately left unstyled: ITA sets `section { padding: 0 }` and
   expresses rhythm with ita_spacer blocks (commit 5bb5b39). Giving
   .block padding would undo that on every page. */
/* .section--dark is .section-navy under the shared name, including its
   child-colour overrides — a visiting block gets navy-safe contrast
   without re-deriving it. */
.section--dark { background: var(--color-dark-bg); color: var(--color-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-on-dark); }
.section--dark p, .section--dark .copy { color: rgba(255,255,255,.82); }
.section--dark .section-label { color: rgba(255,255,255,.75); }
.section--surface { background: var(--color-surface); }

/* Typography ------------------------------------------------------- */
/* .section-label is this site's .kicker; .section-title its .h2;
   .copy its .lead. Declarations copied from those rules verbatim. */
.section-label {
  display: inline-flex; align-items: center; gap: 9px;
  flex-wrap: wrap; max-width: 100%; box-sizing: border-box;
  font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: 26px;
}
.section-title {
  font-size: clamp(29px,3.6vw,44px); font-weight: 700; text-wrap: balance;
}
.section-number {
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 12px; letter-spacing: .16em;
  color: var(--color-accent);
}
.copy {
  font-size: clamp(16px,1.5vw,19px); line-height: 1.6;
  color: var(--color-fg-muted); font-weight: 400;
}

/* Decoration ------------------------------------------------------- */
/* ITA had no divider rule. This is the form its four siblings use,
   with ITA's own hairline token. */
.rule { width: 48px; height: 1px; background: var(--color-border); margin-bottom: 32px; }

/* State ------------------------------------------------------------ */
.is-empty { opacity: .45; }

/* Already defined above, left untouched:
     .wrap .btn .btn-primary .btn-outline .chip .card .reveal .active
   Used in markup but intentionally unstyled:
     .block (see the note at the top of this file) */

/* ── 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 and --color-muted-2 are already defined above. */
}

/* ── 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-accent-4:      var(--color-accent);
  --color-accent-5:      var(--color-accent);
  --color-accent-6:      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:          var(--radius);
  --ifa-font-title:      var(--font-display);
  --ifa-font-body:       var(--font-body);
  --font-numeral:        var(--font-display);
  --field:               var(--color-surface);
  --field-line:          var(--color-border);
  --cm-speed:            42s;
  --h-cycle:             0;
}
/* ── end cross-brand token aliases ── */

/* ── Library block normalisation ── (bin/fgcms-library-normalise) ── */
/* 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: 999px;
  font-family: var(--font-eyebrow); font-weight: 700;
  font-size: 13px; letter-spacing: .04em; 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: 700; font-size: 13px; letter-spacing: .04em;
  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: 700;
  font-size: 11px; letter-spacing: .04em; 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); }