/* ── ADS Awards — shared styles ──
   Design tokens, page frame, header, footer, cookie bar, buttons,
   billboard base (shared across blocks). Block-specific rules live
   in each block's own style.css. */

:root {
  --paper:  #fffaf1;
  --bg:     #f4f1ea;
  --ink:    #0b0b0b;
  --muted:  #5a554d;
  --line:   #0b0b0b;
  --accent: #ff4b22;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: -.025em;
}
a { color: inherit; text-decoration: none; }

/* ── Public-site hides for editor-only DOM ──
   render.php files emit editor affordances (Add-item buttons, list
   toolbars, block info chips, chips-source lines) unconditionally so
   the editor can wire them up. On the public site editor.css is NOT
   loaded, so we need to hide them here or they'd render as bare
   buttons in the page. `body.cms-edit` (only set on edit.php) opts
   back in — editor.css then styles them properly. */
.cms-list-item-add,
.cms-list-item-remove,
.cms-list-item-move,
.cms-block-tools,
.cms-block-info,
.cms-block-name,
.cms-block-bg-btn,
.cms-href-btn,
.cms-link-tools,
.cms-link-warn,
.cms-add-link,
.cms-field-color-chip,
.chips-source { display: none; }
body.cms-edit .cms-list-item-add,
body.cms-edit .cms-list-item-remove,
body.cms-edit .cms-list-item-move,
body.cms-edit .cms-block-tools,
body.cms-edit .cms-block-info,
body.cms-edit .cms-block-name,
body.cms-edit .cms-block-bg-btn,
body.cms-edit .cms-href-btn,
body.cms-edit .cms-link-tools,
body.cms-edit .cms-add-link { display: initial; }
/* .chips-source stays hidden on both public and edit until the block's
   own style.css opts it in (see category_details/style.css). */

/* ── Cookie bar ── */
.cookie {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50;
  background: var(--ink); color: var(--paper);
  padding: 10px 22px; font-size: 12px; line-height: 1.35;
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
  letter-spacing: 0;
}
.cookie p { margin: 0; max-width: 850px; }
/* Reject and Accept are styled identically so neither is visually
   privileged — required for a valid GDPR consent choice. Both are
   outline buttons on the ink bar; the `.primary` class is retained
   for JS/DOM parity but no longer changes appearance. */
.cookie button,
.cookie button.primary {
  border: 1px solid var(--paper); background: transparent; color: var(--paper);
  padding: 7px 12px; text-transform: uppercase; font-weight: 900; font-size: 11px; cursor: pointer;
  letter-spacing: .06em;
}
.cookie button:hover,
.cookie button.primary:hover {
  background: var(--paper); color: var(--ink);
}
.cookie[hidden] { display: none; }

/* ── Header / nav ── */
.site-nav {
  position: sticky; top: var(--cookie-h, 0px); z-index: 30;
  background: rgba(255, 250, 241, .94);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--line);
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  text-transform: uppercase; font-size: 12px; font-weight: 900; letter-spacing: .04em;
}
.nav-logo { font-size: 22px; letter-spacing: -.07em; }
.nav-logo-link { display: inline-flex; align-items: center; gap: 10px; }
.nav-logo-empty { opacity: .5; font-size: 14px; }
.nav-logo img { max-height: 26px; width: auto; }
.nav-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: flex-end;
}
.nav-links a { border-bottom: 1px solid transparent; padding: 3px 0; }
.nav-links a:hover { border-color: var(--ink); }
.nav-links a.active { border-bottom-color: var(--ink); }
.nav-links a.enter-btn {
  background: var(--accent); color: var(--paper);
  border: 1px solid var(--accent);
  padding: 7px 12px; font-size: 11px; letter-spacing: .06em;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.nav-links a.enter-btn:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.nav-hamburger {
  display: none;
  background: transparent; border: 0;
  width: 40px; height: 40px; padding: 8px;
  cursor: pointer;
  flex-direction: column; justify-content: space-between;
  margin-left: auto;
}
.nav-hamburger span {
  /* width:100% + align-self:stretch — iOS Safari doesn't reliably stretch
     <span> flex-children on the cross axis, so the bars can render at 0px
     width and disappear. Explicit width keeps the icon visible everywhere. */
  display: block; width: 100%; align-self: stretch;
  height: 2px; background: var(--ink);
  transform-origin: center;
  transition: transform .18s ease, opacity .18s ease;
}
.site-nav.is-open .nav-hamburger span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.site-nav.is-open .nav-hamburger span:nth-child(2) { opacity: 0; }
.site-nav.is-open .nav-hamburger span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}
.lang-switcher { display: flex; gap: 8px; align-items: center; }
.lang-switcher .lang-option { padding: 3px 6px; }
.lang-switcher .lang-option.active { border-bottom: 1px solid var(--ink); }

/* ── Main frame ── */
main {
  max-width: 1280px; margin: 0 auto; background: var(--paper);
  border-left: 2px solid var(--line); border-right: 2px solid var(--line);
  overflow-x: clip;
}

/* ── Shared billboard base — every content block uses this ── */
.billboard {
  padding: 88px 54px 70px;
  border-bottom: 2px solid var(--line);
  display: flex; flex-direction: column;
  scroll-margin-top: 85px;
}
.billboard.center { text-align: center; align-items: center; }
.billboard.dark { background: var(--ink); color: var(--paper); }
.billboard.accent { background: var(--accent); color: var(--paper); }
.billboard.final { border-bottom: 0; }
.billboard.hero { min-height: clamp(500px, 65vw + 100px, 100vh); justify-content: center; }

.kicker {
  color: var(--accent); text-transform: uppercase; font-size: 13px; font-weight: 900;
  letter-spacing: .09em; margin: 0 0 22px;
}
.billboard.dark .kicker,
.billboard.accent .kicker { color: var(--paper); }

.billboard h1, .billboard h2 {
  margin: 0; text-transform: uppercase; font-weight: 900; line-height: .84; letter-spacing: -.09em;
  max-width: 1100px; text-wrap: balance;
  overflow-wrap: break-word; hyphens: auto;
}
.billboard h1 { font-size: clamp(64px, 11vw, 160px); }
.billboard h2 { font-size: clamp(58px, 9.5vw, 140px); }

.billboard .statement {
  font-size: clamp(20px, 2.4vw, 30px); line-height: 1.05; font-weight: 900; letter-spacing: -.055em;
  margin: 34px 0 0; max-width: 780px; text-transform: uppercase; text-wrap: balance;
}

.billboard .copy {
  max-width: 860px; margin: 34px 0 0;
  font-size: clamp(19px, 1.6vw, 24px); line-height: 1.22; font-weight: 700; letter-spacing: -.035em;
}
.billboard .copy p { text-wrap: balance; margin: 0 0 16px; }
.billboard .copy p:last-child { margin-bottom: 0; }

.billboard .smallcopy {
  max-width: 860px; margin-top: 28px;
  color: var(--accent);
  font-size: clamp(19px, 1.6vw, 24px); line-height: 1.22; font-weight: 700; letter-spacing: -.035em;
  text-wrap: balance;
}
.billboard.dark .smallcopy,
.billboard.accent .smallcopy { color: var(--paper); }

/* ── Actions / buttons ── */
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid currentColor; padding: 15px 20px;
  text-transform: uppercase; font-size: 13px; font-weight: 900; letter-spacing: .05em;
  min-width: 160px;
}
.btn.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.billboard.dark .btn.solid { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn:hover { transform: translateY(-1px); color: var(--accent); }
.btn.solid:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* ── Footer ── */
.site-footer {
  background: var(--ink); color: var(--paper);
  border-top: 1px solid rgba(255, 250, 241, .2);
}
.footer-inner {
  padding: 36px 54px 28px;
  display: flex; flex-direction: column; gap: 22px;
  text-transform: uppercase; font-size: 12px; font-weight: 900; letter-spacing: .05em;
}
.foot-top { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; }
.foot-brand { font-size: 22px; letter-spacing: -.07em; }
.foot-brand img { max-height: 26px; width: auto; vertical-align: middle; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; justify-self: end; }
.foot-links a, .foot-legal a { border-bottom: 1px solid transparent; padding-bottom: 2px; }
.foot-links a:hover, .foot-legal a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.foot-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap;
  color: rgba(255, 250, 241, .55); letter-spacing: .06em;
  padding-top: 20px; border-top: 1px solid rgba(255, 250, 241, .15);
}
.foot-meta > * { margin: 0; }
.foot-legal { display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline; }

/* Cookie Settings button in the footer — styled to sit inline with
   the Terms / Privacy links. Not a link, so it doesn't inherit their
   underline. */
.foot-cookie-settings {
  background: transparent; border: 0; padding: 0;
  color: inherit; font: inherit;
  text-transform: uppercase; font-size: 12px; font-weight: 900; letter-spacing: .05em;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.foot-cookie-settings:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Responsive ── */
@media (max-width: 820px) {
  main { border-left: 0; border-right: 0; }
  .billboard { padding: 74px 24px 56px; }
  .cookie { position: relative; }
  .site-nav { top: 0; }
  .footer-inner { padding: 28px 24px 22px; }
  .foot-top { grid-template-columns: 1fr; gap: 14px; }
  .foot-links { justify-self: start; }
  .foot-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* On narrow phones, drop the clamp() floors so long single words
   like "RESPONSIBILITY" fit on one line instead of hard-breaking. */
@media (max-width: 400px) {
  .billboard h1 { font-size: clamp(44px, 12vw, 64px); }
  .billboard h2 { font-size: clamp(40px, 11vw, 58px); }
}

/* Hamburger takes over below 720px — nav-links fold into a dropdown. */
@media (max-width: 720px) {
  .site-nav { justify-content: space-between; position: sticky; padding: 12px 20px; }
  .nav-hamburger { display: flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 2px solid var(--line);
    flex-direction: column; align-items: stretch;
    padding: 16px 20px; gap: 14px;
    display: none;
  }
  .site-nav.is-open .nav-links { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { font-size: 14px; padding: 6px 0; display: block; }
  .nav-links a.enter-btn { text-align: center; padding: 10px 12px; }
  .lang-switcher { position: absolute; top: 12px; right: 60px; }
}

  /* ── Editor-facing tokens ──────────────────────────────────────
     white, the two creams, the orange CTA colour, and black — per the brand owner.
     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: #ffffff, var(--paper), var(--bg), var(--accent), var(--ink);
  --cms-ink:     var(--ink);
  --cms-paper:   var(--paper);
}


/* ═══════════════════════════════════════════════════════════════════
 * Shared block primitives — see BLOCK-PRIMITIVES.md
 * ═══════════════════════════════════════════════════════════════════
 *
 * Twenty-one class names every instance defines, so a block built for
 * one site renders correctly on any other. The NAMES are shared; the
 * VALUES below are ADS's own, mapped onto rules this stylesheet
 * already had. A block asking for a section title gets ADS's idea of
 * one — uppercase, black, 900 weight — not another brand's.
 *
 * Nothing on this site uses these names yet, so adding them changes
 * nothing today. They exist so blocks can arrive later.
 */

/* Section shell ---------------------------------------------------- */
/* .block deliberately sets NO padding here. It is the hook a site uses
   to express its vertical rhythm, and that choice belongs to the site,
   not to the shared vocabulary. Declaring `.block { padding: 0 }`
   looks harmless and is not: it has the same specificity as a block's
   own `.block-<type> { padding: … }` and, appended last, wins — which
   flattened every ADS block by 158px and moved 9.8% of the home page.
   Rhythm is set on `section` or `body section.block`, per site. */
.wrap  { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.section--dark    { background: var(--ink);   color: var(--paper); }
.section--surface { background: var(--paper); color: var(--ink);   }

/* Typography ------------------------------------------------------- */
/* .section-label is this site's .kicker under the shared name. */
.section-label {
  color: var(--accent); text-transform: uppercase;
  font-size: 13px; font-weight: 900; letter-spacing: .12em;
}
.section-title {
  margin: 0; text-transform: uppercase; font-weight: 900;
  line-height: .84; letter-spacing: -0.02em;
  font-size: clamp(34px, 6vw, 86px);
}
.section-number {
  font-variant-numeric: tabular-nums; font-weight: 900;
  color: var(--accent); font-size: clamp(20px, 2vw, 30px);
}
/* ADS already had .copy, but only inside .billboard. Unscoped so a
   block from another site gets it too. */
.copy {
  max-width: 860px; font-size: clamp(17px, 1.2vw, 20px);
  line-height: 1.5; color: var(--ink);
}

/* Controls --------------------------------------------------------- */
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink);  border-color: var(--ink); }

/* Decoration ------------------------------------------------------- */
.rule { border: 0; border-top: 1px solid var(--line); margin: 32px 0; opacity: .25; }
.card { background: var(--paper); border: 1px solid var(--line); padding: 24px; }
/* .chip existed only inside one block's own stylesheet, so a block
   arriving from another site would not have got it. Promoted to the
   shared sheet where the vocabulary lives. */
.chip {
  border: 1px solid var(--line); padding: 8px 10px;
  text-transform: uppercase; font-size: 11px; font-weight: 900;
  letter-spacing: .06em; background: var(--bg);
}


/* Motion ----------------------------------------------------------- */
/* ADS has never animated blocks in, and shared/site.js here does not
   add .visible. So .reveal must NOT default to opacity:0 — a block
   arriving from a site that does animate would be permanently
   invisible. Declared as a no-op that still accepts the class. */
.reveal { opacity: 1; transform: none; }
.reveal-delay-1, .reveal-delay-2, .reveal-delay-3, .reveal-delay-4 { transition-delay: 0s; }

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

/* ── 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 {
  /* The six colour tokens are this site's own, defined at the top. */
  --maxw:   1280px;
}

/* ── 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-fg:            var(--ink);
  --color-fg-muted:      var(--muted);
  --color-muted:         var(--muted);
  --color-muted-2:       var(--muted);
  --color-bg:            var(--bg);
  --color-surface:       var(--paper);
  --color-dark-bg:       var(--ink);
  --color-on-dark:       var(--paper);
  --color-black:         var(--ink);
  --color-accent:        var(--accent);
  --color-accent-soft:   var(--accent);
  --color-accent-2:      var(--accent);
  --color-accent-3:      var(--accent);
  --color-accent-4:      var(--accent);
  --color-accent-5:      var(--accent);
  --color-accent-6:      var(--accent);
  --color-border:        var(--line);
  --color-border-soft:   var(--line);
  --red:                 var(--accent);
  --red-dark:            var(--accent);
  --red-light:           var(--accent);
  --dark:                var(--ink);
  --white:               var(--paper);
  --off-white:           var(--bg);
  --off:                 var(--paper);
  --mid:                 var(--muted);
  --light:               var(--muted);
  --rule:                var(--line);
  --font-title:          Arial, Helvetica, sans-serif;
  --ifa-accent:          var(--accent);
  --ifa-accent-dark:     var(--accent);
  --ifa-accent-light:    var(--accent);
  --ifa-white:           var(--bg);
  --ifa-off:             var(--paper);
  --ifa-dark:            var(--ink);
  --ifa-mid:             var(--muted);
  --ifa-light:           var(--muted);
  --ifa-rule:            var(--line);
  --ifa-radius:          0;
  --ifa-font-title:      Arial, Helvetica, sans-serif;
  --ifa-font-body:       Arial, Helvetica, sans-serif;
  --font-display:        Arial, Helvetica, sans-serif;
  --font-body:           Arial, Helvetica, sans-serif;
  --font-eyebrow:        Arial, Helvetica, sans-serif;
  --font-numeral:        Arial, Helvetica, sans-serif;
  --field:               var(--paper);
  --field-line:          var(--line);
  --radius:              0;
  --space-section-x:     32px;
  --space-section-y:     64px;
  --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: 0;
  font-family: var(--font-eyebrow); font-weight: 900;
  font-size: 13px; letter-spacing: .05em; 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: 900; font-size: 13px; letter-spacing: .05em;
  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: 900;
  font-size: 11px; letter-spacing: .05em; 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 ── */