/* =========================================================================
   UNLOCALIZED website — v2 skin. Broadcast-grade.
   Four colors. Inter 800/700/400. No shadows. No radii. Flat surfaces only.

   BRAND EXTENSIONS — decided here, where the guidelines are silent:
   E1. Ink-opacity ladder on LIGHT surfaces: rgba(3,12,7) at 70/55/25/12/4 —
       the white ladder (60/50/40/20), mirrored for text, hairlines, washes.
   E4. Text inputs are a bare 2px baseline rule, no box — the C-stop
       underline as a form control.
   E5. Buttons are uppercase, letterspaced, sharp, 2px-bordered. Press =
       opacity 80, never scale.
   E6. Dark feature blocks (.invite, .panel, .ou, .round, .ticker) carry a
       2px teal top rule — the cover art's top accent rule, scaled to UI.
   E7. Wordmark metrics from the guideline ratios: underline width = 2.95 ×
       font size (stops at C), 2px tall at UI sizes, gap 0.28em below.
   E8. Code spans/pre use the platform mono stack — functional deviation;
       Inter has no mono and code must align.
   E9. Motion is fades and 1px settles only: 160ms ease-out; scroll reveal
       560ms. Nothing springs, nothing scales.
   ========================================================================= */

:root {
  --un-teal:        #0F6E56;
  --un-teal-dark:   #0A5742;   /* hover step, per DESIGN-SYSTEM.md */
  --un-near-black:  #030C07;
  --un-charcoal:    #222220;
  --un-white:       #FFFFFF;

  --un-white-60: rgba(255,255,255,0.60);
  --un-white-50: rgba(255,255,255,0.50);
  --un-white-40: rgba(255,255,255,0.40);
  --un-white-20: rgba(255,255,255,0.20);

  /* E1 — ink ladder on light */
  --un-ink-70:  rgba(3,12,7,0.70);
  --un-ink-55:  rgba(3,12,7,0.55);
  --un-ink-25:  rgba(3,12,7,0.25);
  --un-hair:    rgba(3,12,7,0.12);
  --un-wash:    rgba(3,12,7,0.04);

  --un-bg-flat:     var(--un-teal);
  --un-bg-gradient: linear-gradient(90deg, #0F6E56 0%, #071810 52%, #030C07 100%);

  --un-font: 'Inter', 'Helvetica Neue', sans-serif;
  --un-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* E8 */

  --wrap: 1140px;
  --wrap-prose: 680px;
  --gutter: 24px;

  --sec-pad: clamp(72px, 9vw, 116px);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 160ms;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--un-font);
  font-weight: 400;
  font-size: 16px;
  color: var(--un-near-black);
  background: var(--un-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--un-teal); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--un-teal-dark); }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--un-teal); color: var(--un-white); }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.un-on-dark { color: var(--un-white); }
.un-bg-gradient { background: var(--un-bg-gradient); }
.un-bg-flat { background: var(--un-bg-flat); }

/* Keyboard focus must always be visible. */
:focus-visible { outline: 2px solid var(--un-teal); outline-offset: 3px; }
.un-on-dark :focus-visible, .panel:focus-visible, .panel :focus-visible,
.invite :focus-visible, .ou :focus-visible, .round :focus-visible,
.ticker :focus-visible { outline-color: var(--un-white); }

.skip {
  position: absolute; left: 12px; top: -64px; z-index: 30;
  background: var(--un-teal); color: var(--un-white); font-weight: 700;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 18px; transition: top var(--dur) var(--ease);
}
.skip:focus { top: 12px; color: var(--un-white); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .ticker__track { animation: none; }
}

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

/* ------------------------------------------------------------------ */
/* Wordmark — the only mark. UN muted, LOCALIZED full. C-stop rule.    */
/* E7: rule = 2.95em wide (guideline ratio ≈ 2.9–3.19 × font size),    */
/* 2px tall at UI sizes, 0.28em below the baseline.                    */
/* ------------------------------------------------------------------ */
.wordmark {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 0.28em; font-size: 21px; line-height: 1; text-decoration: none;
}
.wordmark__word {
  font-weight: 800; font-size: 1em; letter-spacing: -0.025em;
  line-height: 1; white-space: nowrap;
}
.wordmark__un  { color: var(--un-white-60); transition: color var(--dur) var(--ease); }
.wordmark__loc { color: var(--un-white); }
.wordmark__rule { display: block; height: 2px; width: 2.95em; background: var(--un-white-40); }
.wordmark:hover .wordmark__un { color: var(--un-white); }
.wordmark--light .wordmark__un   { color: rgba(15,110,86,0.55); }
.wordmark--light .wordmark__loc  { color: var(--un-teal); }
.wordmark--light .wordmark__rule { background: var(--un-teal); }

/* Eyebrow — E2: numbered small-caps labels, "01 · CLIPS". Counter
   resets per view (<main>), increments on every eyebrow in order. */
.un-eyebrow {
  font-weight: 700; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--un-teal); margin: 0;
}
.un-on-dark .un-eyebrow { color: var(--un-white); }

.tagline {
  font-weight: 400; color: var(--un-white-50); text-transform: none;
  margin: 14px 0 0; font-size: 14px; line-height: 1.55;
}

/* ------------------------------------------------------------------ */
/* Buttons — E5. Sharp, uppercase, letterspaced. No radius, no shadow. */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-block; font-family: var(--un-font); font-weight: 700;
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1; padding: 16px 26px; border: 2px solid transparent;
  cursor: pointer; text-align: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:active { opacity: 0.8; }
.btn--solid { background: var(--un-teal); color: var(--un-white); border-color: var(--un-teal); }
.btn--solid:hover { background: var(--un-teal-dark); border-color: var(--un-teal-dark); color: var(--un-white); }
.btn--ghost { background: transparent; color: var(--un-white); border-color: var(--un-white-40); }
.btn--ghost:hover { border-color: var(--un-white); color: var(--un-white); }
.btn--line { background: transparent; color: var(--un-near-black); border-color: var(--un-near-black); }
.btn--line:hover { background: var(--un-teal); border-color: var(--un-teal); color: var(--un-white); }
.btn--outline { background: transparent; color: var(--un-white); border-color: var(--un-white-40); }
.btn--outline:hover { border-color: var(--un-white); color: var(--un-white); }

/* ------------------------------------------------------------------ */
/* Header — near-black masthead under the brand's teal top rule.       */
/* ------------------------------------------------------------------ */
.site-header {
  background: var(--un-near-black);
  border-top: 4px solid var(--un-teal);
  border-bottom: 1px solid var(--un-white-20);
  position: sticky; top: 0; z-index: 10;
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 22px; padding-bottom: 22px;
}
.nav { display: flex; gap: 32px; flex-wrap: wrap; }
.nav__link {
  color: var(--un-white-60); font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding-bottom: 5px; border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--un-white); }
.nav__link.is-active { color: var(--un-white); border-bottom-color: var(--un-teal); }

/* Shared, page-preserving language choice. No automatic language redirects. */
.nav { align-items: baseline; }
.site-language { display: inline-flex; align-items: baseline; gap: 9px; padding-left: 20px; border-left: 1px solid var(--un-white-20); font-size: 14px; white-space: nowrap; }
/* Same box as .nav__link (5px + 2px underline) so the two sit on one baseline. */
.site-language a { color: var(--un-white-60); padding-bottom: 5px; border-bottom: 2px solid transparent; }
.site-language a[aria-current] { color: var(--un-white); border-bottom-color: var(--un-teal); }
.site-language a:hover, .site-language a:focus-visible { color: var(--un-white); }
html[lang="ko"] { word-break: keep-all; overflow-wrap: anywhere; }
html[lang="ko"] .hero__title { line-height: 1.15; letter-spacing: -.035em; }
/* Hangul has no caps: 12px tracked uppercase reads as tiny, so size it like the switcher. */
html[lang="ko"] .nav__link { font-size: 14px; letter-spacing: 0; text-transform: none; }

/* Editorial page treatments: typography and rules, not extra decoration. */
.page--about .prose, .page--sponsor .prose, .page--subscribe .prose { max-width: calc(var(--wrap) + var(--gutter)*2); }
.page--about .prose > p, .page--sponsor .prose > p { max-width: 66ch; }
.page--about .hosts { border-top: 1px solid var(--un-hair); padding-top: 40px; margin-top: 48px; }
.page--about .hosts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.page--about .host__frame { max-width: 320px; }
.page--about .prose > h2, .page--sponsor .prose > h2 { border-top: 2px solid var(--un-teal); padding-top: 20px; max-width: 66ch; }
.page--sponsor .invite { margin-top: 40px; max-width: 800px; }
.subscribe-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.subscribe-option { border-top: 2px solid var(--un-teal); padding-top: 24px; }
.page--subscribe .prose .subscribe-option h2 { margin: 0 0 20px; padding: 0; border: 0; }
.subscribe-option p { font-size: 16px; }
@media (max-width: 760px) {
  .header__inner { flex-wrap: wrap; gap: 18px; }
  .nav { gap: 16px; }
  .site-language { padding-left: 12px; }
  .subscribe-options, .page--about .hosts__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Hero — the broadcast open. Gradient, oversized 800 type.            */
/* ------------------------------------------------------------------ */
.hero__inner { padding: clamp(88px, 11vw, 150px) var(--gutter) clamp(88px, 11vw, 150px); max-width: 960px; }
.hero__inner--split {
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  display: grid; grid-template-columns: 1fr; gap: 52px; align-items: center;
  padding-top: clamp(72px, 9vw, 124px); padding-bottom: clamp(72px, 9vw, 124px);
}
@media (min-width: 940px) {
  .hero__inner--split { grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; }
}
.hero__copy { min-width: 0; }
.hero__media { min-width: 0; }
.hero__title {
  font-weight: 800; font-size: clamp(38px, 5.6vw, 72px);
  letter-spacing: -0.035em; line-height: 1.02; color: var(--un-white);
  max-width: 16ch;
}
.hero__body { margin-top: 26px; max-width: 46ch; }
.hero__body p { color: var(--un-white-60); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; margin: 0 0 14px; }
.hero__body p:last-child { margin-bottom: 0; }
.hero__cta { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ */
/* Sections — one long-form rhythm; heads carry the numbered eyebrow.  */
/* ------------------------------------------------------------------ */
.section { padding: var(--sec-pad) 0; }
.section--tight { padding-top: 0; }
.section--tight:has(+ .section--events) { padding-bottom: clamp(32px, 4vw, 48px); }
.section--events { padding-top: clamp(24px, 3vw, 40px); }
.section--flush { padding: 56px 0 0; }
.section__head { max-width: 820px; margin-bottom: 52px; }
article.section .section__head { margin-bottom: 32px; max-width: var(--wrap-prose); }
.page--about article.section .section__head,
.page--sponsor article.section .section__head,
.page--subscribe article.section .section__head {
  max-width: calc(var(--wrap) + var(--gutter) * 2);
}
.section__head--row {
  max-width: none; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 24px;
  padding-bottom: 22px; border-bottom: 1px solid var(--un-hair);
}
.section__title {
  font-weight: 700; font-size: clamp(28px, 3.8vw, 46px);
  letter-spacing: -0.03em; line-height: 1.06; margin-top: 16px;
}
/* Page titles (h1) step up to 800 — the hierarchy above section titles. */
h1.section__title { font-weight: 800; font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -0.035em; }
.section__lead { margin-top: 18px; font-size: 19px; line-height: 1.55; color: var(--un-ink-70); max-width: 56ch; }
.section__more {
  font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap; padding-bottom: 5px; border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.section__more:hover { border-bottom-color: var(--un-teal); }
.section > .wrap > .section__more { display: inline-block; margin-top: 36px; }

/* Scroll reveal — .rv is added by JS only; no-JS and reduced-motion
   visitors always see the page fully painted. E9. */
.rv { opacity: 0; transform: translateY(14px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.hero__media.rv { transition-delay: 90ms; }


/* ------------------------------------------------------------------ */
/* Report cards / grid                                                 */
/* ------------------------------------------------------------------ */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}
.card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--un-white); color: var(--un-near-black);
  border: 1px solid var(--un-hair); border-top: 2px solid var(--un-near-black);
  padding: 30px 28px 26px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { background: var(--un-wash); border-color: var(--un-ink-25); border-top-color: var(--un-teal); }
.card__topics { display: flex; gap: 8px; flex-wrap: wrap; }
.card__topic {
  font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--un-teal); border: 1px solid var(--un-hair); padding: 4px 9px;
}
.card__title { font-size: 22px; letter-spacing: -0.025em; line-height: 1.15; }
.card:hover .card__title { color: var(--un-teal); }
.card__dek { color: var(--un-ink-70); font-size: 15px; line-height: 1.55; }
.card__meta { color: var(--un-ink-55); font-size: 13px; margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--un-hair); font-variant-numeric: tabular-nums; }
.card__sep { margin: 0 8px; opacity: 0.6; }
.card__stat { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card__statvalue {
  font-weight: 800; font-size: 32px; letter-spacing: -0.03em; color: var(--un-teal);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.card__statlabel { font-size: 12px; color: var(--un-ink-55); line-height: 1.3; }

/* ------------------------------------------------------------------ */
/* Two-up inquiry panels — charcoal lead, white quiet. E6 top rules.   */
/* ------------------------------------------------------------------ */
.two-up {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--un-hair); border: 1px solid var(--un-hair);
}
.panel {
  background: var(--un-charcoal); color: var(--un-white);
  border-top: 2px solid var(--un-teal);
  padding: 48px 44px 44px; display: flex; flex-direction: column; gap: 16px;
  transition: background var(--dur) var(--ease);
}
.panel:hover { background: #2b2b28; color: var(--un-white); }
.panel .un-eyebrow { color: var(--un-white); }
.panel__title { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.025em; color: var(--un-white); }
.panel__body { color: var(--un-white-60); font-size: 15px; line-height: 1.6; flex: 1; }
.panel__cta {
  font-weight: 700; color: var(--un-white); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; margin-top: 8px; align-self: flex-start;
  padding-bottom: 5px; border-bottom: 2px solid var(--un-white-40);
  transition: border-color var(--dur) var(--ease);
}
.panel:hover .panel__cta { border-bottom-color: var(--un-white); }
.panel--quiet { background: var(--un-white); }
.panel--quiet:hover { background: var(--un-wash); }
.panel--quiet .un-eyebrow { color: var(--un-teal); }
.panel--quiet .panel__title { color: var(--un-near-black); }
.panel--quiet .panel__body { color: var(--un-ink-70); }
.panel--quiet .panel__cta { color: var(--un-teal); border-bottom-color: var(--un-hair); }
.panel--quiet:hover .panel__cta { border-bottom-color: var(--un-teal); }

/* ------------------------------------------------------------------ */
/* Email capture band — gradient close. E4 underline input.            */
/* ------------------------------------------------------------------ */
.capture { border-top: 1px solid var(--un-white-20); }
.capture__inner { padding: clamp(80px, 10vw, 120px) var(--gutter); max-width: 780px; }
.capture__title { font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.03em; line-height: 1.05; color: var(--un-white); }
.capture__sub { color: var(--un-white-60); margin-top: 14px; font-size: 17px; }
.capture__form { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; }
.capture__input {
  flex: 1; min-width: min(100%, 220px); font-family: var(--un-font); font-size: 17px;
  padding: 12px 2px; border: 0; border-bottom: 2px solid var(--un-white-40);
  background: transparent; color: var(--un-white);
  transition: border-color var(--dur) var(--ease);
}
.capture__input::placeholder { color: var(--un-white-50); }
.capture__input:focus { outline: none; border-bottom-color: var(--un-white); }
.capture__fine { margin-top: 16px; color: var(--un-white-50); font-size: 12px; }

/* ------------------------------------------------------------------ */
/* Feature — split section, media beside copy                          */
/* ------------------------------------------------------------------ */
.feature { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
@media (min-width: 880px) {
  .feature { grid-template-columns: 1fr 1fr; gap: 72px; }
}
.feature__copy { min-width: 0; }
.feature__media { min-width: 0; }
.feature__title {
  font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -0.03em; line-height: 1.08;
  margin-top: 16px; max-width: 18ch;
}
.feature__body { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--un-ink-70); max-width: 44ch; }
.feature__cta { margin-top: 28px; }

/* ------------------------------------------------------------------ */
/* Invite — the ask, as a dark block. E6: charcoal + teal top rule.    */
/* ------------------------------------------------------------------ */
.invite {
  background: var(--un-charcoal); color: var(--un-white);
  border-top: 2px solid var(--un-teal);
  padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 52px);
}
.invite .un-eyebrow { color: var(--un-white); }
.invite__title { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.03em; line-height: 1.08; color: var(--un-white); margin-top: 12px; }
.invite .un-eyebrow + .invite__title { margin-top: 16px; }
.invite__body { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--un-white-60); max-width: 56ch; }
.invite__cta { margin-top: 28px; }
.invite__note { margin-top: 14px; font-size: 12px; color: var(--un-white-50); }

/* ------------------------------------------------------------------ */
/* Channels — every place to follow the show                           */
/* ------------------------------------------------------------------ */
.channels { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--un-white-20); }
.channels__title {
  font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--un-white); margin: 0 0 16px;
}
.channels__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.chan {
  display: flex; align-items: center; gap: 13px; padding: 12px 18px 12px 15px;
  border: 1px solid var(--un-white-40); min-width: 0;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chan:hover { border-color: var(--un-white); background: rgba(255,255,255,0.06); }
.chan__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; color: var(--un-white); }
.chan__icon svg { width: 20px; height: 20px; display: block; }
.chan__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.chan__label { font-weight: 700; font-size: 13px; color: var(--un-white); letter-spacing: 0.01em; }
.chan__handle { font-size: 12px; color: var(--un-white-50); font-variant-numeric: tabular-nums; }
.chan.is-tbd { border-style: dashed; border-color: var(--un-white-20); }
.chan.is-tbd .chan__label { color: var(--un-white-50); }

/* Light-surface variant — the follow row on light bands. */
.channels--light { border-top-color: var(--un-hair); margin-top: 48px; padding-top: 28px; }
.channels--light .channels__title { color: var(--un-teal); }
.channels--light .chan { border-color: var(--un-ink-25); }
.channels--light .chan:hover { border-color: var(--un-teal); background: rgba(15,110,86,0.05); }
.channels--light .chan__icon { color: var(--un-teal); }
.channels--light .chan__label { color: var(--un-near-black); }
.channels--light .chan__handle { color: var(--un-ink-55); }
.channels--light .chan.is-tbd { border-color: var(--un-hair); }
.channels--light .chan.is-tbd .chan__label { color: var(--un-ink-55); }
.foot__social.is-tbd { color: var(--un-white-40); }
.foot__social.is-tbd em { font-style: normal; font-size: 10px; letter-spacing: 0.1em; opacity: 0.7; }

/* ------------------------------------------------------------------ */
/* Report page (hidden until research relaunches)                      */
/* ------------------------------------------------------------------ */
.report { position: relative; }
.report__head { max-width: var(--wrap-prose); padding-top: 64px; padding-bottom: 8px; }
.report__back {
  font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
  padding-bottom: 4px; border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.report__back:hover { border-bottom-color: var(--un-teal); }
.report__eyebrow { margin-top: 28px; }
.report__title { font-weight: 800; font-size: clamp(32px, 4.6vw, 54px); letter-spacing: -0.035em; margin-top: 16px; line-height: 1.03; }
.report__dek { font-size: 20px; color: var(--un-ink-70); margin-top: 20px; line-height: 1.5; }
.report__meta { font-size: 13px; color: var(--un-ink-55); margin-top: 22px;
  padding-top: 18px; border-top: 1px solid var(--un-hair); font-variant-numeric: tabular-nums; }
.report__foot { max-width: var(--wrap-prose); }
.report__provenance {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--un-hair);
  color: var(--un-ink-55); font-size: 13px; line-height: 1.55; padding-bottom: 80px;
}
.report__md {
  display: inline-block; font-weight: 700; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; border: 1px solid var(--un-ink-25); padding: 11px 16px; margin-top: 40px;
  transition: border-color var(--dur) var(--ease);
}
.report__md:hover { border-color: var(--un-teal); }
.report__foot .report__provenance { margin-top: 18px; padding-top: 18px; }
.report__progress { position: sticky; top: 0; z-index: 5; height: 3px; background: var(--un-hair); }
.report__progress span {
  display: block; height: 100%; background: var(--un-teal);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ------------------------------------------------------------------ */
/* Prose (report body + content pages)                                 */
/* ------------------------------------------------------------------ */
.prose { max-width: var(--wrap-prose); }
.prose > * + * { margin-top: 20px; }
.prose p { font-size: 17px; line-height: 1.65; }
.prose h2 {
  font-size: 26px; letter-spacing: -0.025em; margin-top: 56px; padding-top: 22px;
  border-top: 1px solid var(--un-hair);
}
.prose h3 { font-size: 20px; letter-spacing: -0.02em; margin-top: 36px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { font-size: 17px; line-height: 1.62; margin-top: 8px; }
.prose li > ul, .prose li > ol { margin-top: 8px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose strong { font-weight: 700; }
.prose blockquote {
  border-left: 2px solid var(--un-teal); padding: 4px 0 4px 22px;
  margin-left: 0; color: var(--un-ink-70); font-style: normal;
}
.prose code { font-family: var(--un-mono); font-size: 0.88em; background: var(--un-wash); padding: 1px 5px; }
.prose pre { overflow-x: auto; background: var(--un-charcoal); color: var(--un-white); padding: 20px 22px; }
.prose pre code { background: none; color: inherit; padding: 0; }
.prose hr { border: none; border-top: 1px solid var(--un-hair); margin: 48px 0; }
.prose img { margin: 28px 0; border: 1px solid var(--un-hair); }
/* Media-slot images manage their own frame. */
.prose .media__el { margin: 0; border: 0; }
/* Components inside prose keep their own rules — the prose h2 hairline
   and link underline must not leak into them. */
.prose .invite__title { margin-top: 12px; padding-top: 0; border-top: 0; }
.prose .invite .un-eyebrow + .invite__title { margin-top: 16px; }
.prose .hosts__title { padding-top: 0; border-top: 0; }
.prose .btn { text-decoration: none; }
.prose .host__link, .prose .invite a { text-decoration: none; }

.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--un-hair); vertical-align: top; }
.prose th {
  font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 2px solid var(--un-near-black); white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Report furniture — stat strip, contents rail                        */
/* ------------------------------------------------------------------ */
.statstrip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px 32px; margin: 8px 0 4px; padding: 30px 0;
  border-top: 2px solid var(--un-near-black); border-bottom: 1px solid var(--un-hair);
  max-width: var(--wrap-prose);
}
.stat__value {
  font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.035em;
  line-height: 1; color: var(--un-teal); font-variant-numeric: tabular-nums;
}
.stat__label { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--un-ink-70); }

.report__body { display: block; }
.toc { display: none; }
@media (min-width: 1120px) {
  .report__body {
    display: grid; grid-template-columns: 200px minmax(0, var(--wrap-prose));
    gap: 48px; align-items: start;
  }
  .toc { display: block; position: sticky; top: 36px;
    border-left: 1px solid var(--un-hair); padding-left: 16px; }
  .report__head, .report .tldr, .report .statstrip, .report .modes,
  .report__foot .report__provenance { margin-left: 248px; }
}
.toc__title {
  font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--un-ink-55); margin: 0 0 14px;
}
.toc__link {
  display: block; font-size: 13px; line-height: 1.35; color: var(--un-ink-70);
  padding: 6px 0 6px 16px; border-left: 2px solid transparent; margin-left: -18px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.toc__link:hover { color: var(--un-teal); }
.toc__link.is-current { color: var(--un-teal); font-weight: 700; border-left-color: var(--un-teal); }

/* ------------------------------------------------------------------ */
/* Figures — charts, steps, lineage, people                            */
/* ------------------------------------------------------------------ */
.fig { margin: 44px 0; padding: 28px 26px 24px; border: 1px solid var(--un-hair);
  border-top: 2px solid var(--un-near-black); background: var(--un-white); }
.fig .fig__title { font-size: 17px; letter-spacing: -0.015em; margin: 0 0 4px; }
.fig .fig__standfirst { font-size: 14px; line-height: 1.5; color: var(--un-ink-70); margin: 0 0 6px; }
.fig .fig__note {
  margin: 20px 0 0; font-size: 12px; line-height: 1.5; color: var(--un-ink-55);
  padding-top: 14px; border-top: 1px solid var(--un-hair);
}

.chart { display: flex; flex-direction: column; gap: 11px; margin-top: 20px; }
.bar { display: grid; grid-template-columns: minmax(84px, 148px) 1fr auto; gap: 14px; align-items: center; }
.bar__label { font-size: 13px; color: var(--un-ink-70); line-height: 1.25; }
.bar__track { height: 20px; background: var(--un-wash); }
.bar__fill { height: 100%; background: var(--un-ink-25); }
.bar--hi .bar__label { font-weight: 700; color: var(--un-near-black); }
.bar--hi .bar__fill { background: var(--un-teal); }
.bar__value {
  font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--un-near-black); min-width: 56px; text-align: right;
}

.steps { list-style: none; margin: 20px 0 0; padding: 0; }
.step { display: grid; grid-template-columns: minmax(84px, 110px) 1fr; gap: 18px;
  padding: 15px 0; border-top: 1px solid var(--un-hair); }
.step:first-child { border-top: none; padding-top: 4px; }
.step__when { font-size: 13px; color: var(--un-ink-55); font-variant-numeric: tabular-nums; padding-top: 5px; }
.step__value {
  font-weight: 800; font-size: 22px; letter-spacing: -0.025em; color: var(--un-teal);
  font-variant-numeric: tabular-nums;
}
.step__note { font-size: 13px; color: var(--un-ink-70); margin-top: 4px; line-height: 1.5; }

.lin { margin-top: 20px; }
.lin__root { border: 2px solid var(--un-teal); padding: 18px 20px; }
.lin__rootname { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.lin__rootnote { font-size: 13px; color: var(--un-ink-70); margin-top: 4px; }
.lin__stem { width: 2px; height: 28px; background: var(--un-teal); margin-left: 32px; }
.lin__branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.lin__branch { border: 1px solid var(--un-hair); border-top: 2px solid var(--un-teal);
  padding: 18px 20px; background: var(--un-white); }
.lin__who { font-weight: 700; font-size: 15px; }
.lin__built { font-size: 14px; color: var(--un-ink-70); margin-top: 6px; line-height: 1.45; }
.lin__worth { margin-top: 12px; font-weight: 800; font-size: 18px; color: var(--un-teal);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 1px;
  background: var(--un-hair); border: 1px solid var(--un-hair); margin-top: 20px; }
.who { background: var(--un-white); padding: 18px 20px; }
.who__name { font-weight: 700; font-size: 14px; }
.who__built { font-size: 12px; letter-spacing: 0.04em; color: var(--un-teal); font-weight: 700; margin-top: 5px; }
.who__note { font-size: 12px; color: var(--un-ink-55); margin-top: 7px; line-height: 1.5; }

/* ------------------------------------------------------------------ */
/* Over / Under — the show's segment, on the page. E6 top rule.        */
/* ------------------------------------------------------------------ */
.ou { margin: 48px 0; padding: 36px 32px; background: var(--un-charcoal); color: var(--un-white);
  border-top: 2px solid var(--un-teal); }
.ou .ou__eyebrow {
  font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--un-white); margin: 0 0 14px;
}
.ou .ou__q { font-size: 22px; letter-spacing: -0.02em; line-height: 1.25; color: var(--un-white); }
.ou .ou__line { margin-top: 12px; color: var(--un-white-60); font-size: 15px; line-height: 1.5; }
.ou .ou__line strong { color: var(--un-white); font-variant-numeric: tabular-nums; margin-left: 4px; }
.ou__actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.ou__btn:disabled { cursor: default; opacity: 0.35; }
.ou__btn.is-correct { opacity: 1; background: var(--un-teal); border-color: var(--un-teal); color: var(--un-white); }
.ou__btn.is-picked { opacity: 1; }
.ou__btn.is-picked:not(.is-correct) {
  background: transparent; border-color: var(--un-white-40); color: var(--un-white-60);
  text-decoration: line-through;
}
.ou__result { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--un-white-20); }
.ou__answer {
  font-weight: 800; font-size: clamp(36px, 5vw, 52px); letter-spacing: -0.035em;
  line-height: 1; color: var(--un-white); font-variant-numeric: tabular-nums;
}
.ou .ou__verdict { margin-top: 12px; color: var(--un-white); font-weight: 700; font-size: 15px; }
.ou .ou__reveal-note { margin-top: 8px; color: var(--un-white-60); font-size: 14px; line-height: 1.5; }

/* ------------------------------------------------------------------ */
/* Media — real slots; honest flat-charcoal placeholders               */
/* ------------------------------------------------------------------ */
.media { margin: 0; }
.media__frame {
  position: relative; aspect-ratio: var(--ratio, 16 / 9);
  background: var(--un-charcoal); overflow: hidden;
}
.media__el { width: 100%; height: 100%; object-fit: cover; display: block; }
.media.is-placeholder .media__frame { background: var(--un-charcoal); border: 1px solid var(--un-white-20); }
.ph__body {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px; text-align: center; padding: 16px;
}
/* The teal tick marks the slot as intentional — one mark, no pattern. */
.ph__body::before { content: ""; width: 24px; height: 2px; background: var(--un-teal); margin-bottom: 5px; }
.ph__kind {
  font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--un-white-60);
}
.ph__spec { font-size: 12px; color: var(--un-white-40); max-width: 30ch; line-height: 1.45; }
.media__cap { margin-top: 12px; font-size: 12px; color: var(--un-ink-55); }

/* Chyron — the show's lower third, on the page. */
.chyron { position: absolute; left: 0; bottom: 0; display: flex; align-items: stretch; max-width: 100%; }
.chyron__pill {
  background: var(--un-teal); color: var(--un-white); font-weight: 700;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 13px; white-space: nowrap; display: flex; align-items: center; flex: none;
}
.chyron__title {
  background: var(--un-near-black); color: var(--un-white); font-weight: 700;
  font-size: 13px; padding: 10px 15px; display: flex; align-items: center;
  letter-spacing: -0.01em; min-width: 0; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; display: block; line-height: 1.4;
}

/* Ticker — the crawl. Self-contained dark strip, coherent anywhere.   */
.ticker {
  display: flex; align-items: stretch; background: var(--un-near-black); color: var(--un-white);
  border-top: 2px solid var(--un-teal); border-bottom: 1px solid var(--un-white-20); margin-top: 44px;
}
.ticker__pill {
  background: var(--un-teal); color: var(--un-white); font-weight: 700;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 13px 15px; white-space: nowrap; display: flex; align-items: center; flex: none;
}
.ticker__window { overflow: hidden; flex: 1; }
.ticker__track { display: flex; width: max-content; animation: crawl 46s linear infinite; }
.ticker__track > span { display: flex; }
@keyframes crawl { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }
.tick {
  display: flex; align-items: baseline; gap: 8px; padding: 13px 28px;
  border-right: 1px solid var(--un-white-20); white-space: nowrap;
}
.tick__value { font-weight: 800; font-size: 15px; color: var(--un-white); font-variant-numeric: tabular-nums; }
.tick__label { font-size: 13px; color: var(--un-white-50); transition: color var(--dur) var(--ease); }
.tick:hover .tick__label { color: var(--un-white); }

/* ------------------------------------------------------------------ */
/* Clips rail — Instagram's official embeds; blockquote = pre-hydration */
/* ------------------------------------------------------------------ */
.clips {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 24px; margin-top: 36px; align-items: start;
}
.clips .instagram-media { margin: 0 !important; max-width: 100% !important; min-width: 0 !important; }
blockquote.instagram-media {
  aspect-ratio: 9 / 16; background: var(--un-charcoal);
  border: 1px solid var(--un-white-20); display: flex;
  align-items: center; justify-content: center; text-align: center; padding: 18px;
}
blockquote.instagram-media a {
  color: var(--un-white); font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding-bottom: 5px; border-bottom: 2px solid var(--un-white-40);
  transition: border-color var(--dur) var(--ease);
}
blockquote.instagram-media a:hover { color: var(--un-white); border-bottom-color: var(--un-white); }
.clip__frame { position: relative; aspect-ratio: 9 / 16; background: var(--un-charcoal); overflow: hidden; }
.clip.is-placeholder .clip__frame { background: var(--un-charcoal); border: 1px solid var(--un-white-20); }
.clip__el { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip__dur {
  position: absolute; right: 8px; bottom: 8px; background: var(--un-near-black);
  color: var(--un-white); font-size: 11px; font-weight: 700; padding: 4px 7px;
  font-variant-numeric: tabular-nums;
}
.clip__title { margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--un-near-black);
  transition: color var(--dur) var(--ease); }
a.clip { display: block; color: inherit; }
a.clip .clip__frame { transition: border-color var(--dur) var(--ease); }
a.clip:hover .clip__frame { border-color: var(--un-teal); }
a.clip:hover .clip__title { color: var(--un-teal); }

/* ------------------------------------------------------------------ */
/* Hosts — the people, first                                           */
/* ------------------------------------------------------------------ */
.hosts { margin: 8px 0 44px; }
.hosts__title { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.03em; margin-bottom: 32px; }
.hosts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 36px; }
.host__frame { aspect-ratio: 4 / 5; background: var(--un-charcoal); position: relative; overflow: hidden; }
.host.is-placeholder .host__frame { background: var(--un-charcoal); border: 1px solid var(--un-hair); }
.host__name { font-size: 21px; letter-spacing: -0.025em; margin-top: 18px; }
.host .host__role {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--un-teal); margin: 6px 0 0;
}
.host .host__bio { font-size: 15px; color: var(--un-ink-70); margin: 10px 0 0; line-height: 1.6; }
.host__link {
  display: inline-block; margin-top: 16px;
  font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--un-teal); border: 1px solid var(--un-ink-25); padding: 8px 13px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.host__link:hover { border-color: var(--un-teal); }

/* Home strip: horizontal person cards — portrait beside the words. */
.hosts--compact { margin-bottom: 0; }
.hosts--compact .hosts__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 460px)); gap: 28px; }
.hosts--compact .host { display: grid; grid-template-columns: 112px 1fr; column-gap: 22px; align-items: start; }
.hosts--compact .host__frame { grid-row: 1 / span 4; aspect-ratio: 4 / 5; }
.hosts--compact .host__name { font-size: 18px; margin-top: 0; }
.hosts--compact .host__link { justify-self: start; }
.hosts--compact .ph__spec { display: none; }

/* The short version */
.tldr { border-left: 2px solid var(--un-teal); padding: 4px 0 4px 24px; margin: 36px 0 8px; max-width: var(--wrap-prose); }
.tldr__title {
  font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--un-teal); margin: 0 0 14px;
}
.tldr__list { margin: 0; padding-left: 18px; }
.tldr__list li { font-size: 17px; line-height: 1.55; margin-top: 9px; }
.tldr__list li:first-child { margin-top: 0; }

/* ------------------------------------------------------------------ */
/* Skim / Full — the reading model                                     */
/* ------------------------------------------------------------------ */
.modes { display: inline-flex; border: 1px solid var(--un-ink-25); margin: 26px 0 4px; }
.modes__btn {
  font-family: var(--un-font); font-weight: 700; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 11px 18px; border: 0; background: transparent; color: var(--un-ink-55);
  cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modes__btn:hover { color: var(--un-teal); }
.modes__btn.is-on { background: var(--un-teal); color: var(--un-white); }

.sec + .sec { margin-top: 8px; }
.sec__more {
  font-family: var(--un-font); font-weight: 700; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--un-teal); background: transparent; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--un-hair);
  padding: 12px 0; margin-top: 16px; width: 100%; text-align: left;
  transition: border-color var(--dur) var(--ease);
}
.sec__more:hover { border-bottom-color: var(--un-teal); }
.sec__words { color: var(--un-ink-55); font-weight: 400; text-transform: none; letter-spacing: 0; }
.sec__more.is-open .sec__words { opacity: 0; }
.sec__more::after { content: " ▼"; font-size: 9px; vertical-align: 2px; }
.sec__more.is-open::after { content: " ▲"; }
.report:not(.is-skim) .sec__more { display: none; }
.report.is-skim .sec__rest:not(.is-open) { display: none; }
.sec__rest > *:first-child { margin-top: 20px; }

/* ------------------------------------------------------------------ */
/* Over / Under round — charcoal block, scored. E6 top rule.           */
/* ------------------------------------------------------------------ */
.round { background: var(--un-charcoal); color: var(--un-white);
  border-top: 2px solid var(--un-teal); padding: clamp(36px, 5vw, 52px) clamp(28px, 4vw, 48px); }
.round__eyebrow {
  font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--un-white); margin: 0 0 12px;
}
.round__title { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.03em; color: var(--un-white); }
.round__sub { color: var(--un-white-60); margin-top: 12px; font-size: 16px; line-height: 1.55; max-width: 52ch; }
.round__cards { margin-top: 30px; }
.round__count {
  font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--un-white-50); margin: 0 0 12px; font-variant-numeric: tabular-nums;
}
.round__q {
  font-size: clamp(19px, 2.4vw, 25px); letter-spacing: -0.02em; line-height: 1.28;
  color: var(--un-white); max-width: 40ch;
}
.round__line { margin-top: 12px; color: var(--un-white-60); font-size: 15px; }
.round__line strong { color: var(--un-white); font-variant-numeric: tabular-nums; margin-left: 4px; }
.round__actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.round__btn:disabled { cursor: default; opacity: 0.35; }
.round__btn.is-correct { opacity: 1; background: var(--un-teal); border-color: var(--un-teal); color: var(--un-white); }
.round__btn.is-picked { opacity: 1; }
.round__btn.is-picked:not(.is-correct) {
  background: transparent; border-color: var(--un-white-40); color: var(--un-white-60);
  text-decoration: line-through;
}
.round__result { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--un-white-20); }
.round__answer {
  font-weight: 800; font-size: clamp(36px, 5vw, 50px); letter-spacing: -0.035em;
  line-height: 1; color: var(--un-white); font-variant-numeric: tabular-nums;
}
.round__verdict { margin-top: 12px; color: var(--un-white); font-weight: 700; font-size: 15px; }
.round__note { margin-top: 8px; color: var(--un-white-60); font-size: 14px; line-height: 1.55; max-width: 52ch; }
.round__link {
  display: inline-block; margin-top: 16px; color: var(--un-white); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; border-bottom: 2px solid var(--un-white-40); padding-bottom: 3px;
  transition: border-color var(--dur) var(--ease);
}
.round__link:hover { color: var(--un-white); border-bottom-color: var(--un-white); }
.round__next { margin-top: 24px; display: block; }
.round__score {
  font-weight: 800; font-size: clamp(44px, 6vw, 64px); letter-spacing: -0.035em;
  color: var(--un-white); line-height: 1; font-variant-numeric: tabular-nums;
}
.round__right { color: var(--un-teal); }
.round__donenote { margin-top: 14px; color: var(--un-white-60); font-size: 15px; }
.round__doneactions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ */
/* Footer — the sign-off. Large wordmark, near-black, teal baseline.   */
/* ------------------------------------------------------------------ */
.site-footer { background: var(--un-near-black); margin-top: 0;
  border-bottom: 4px solid var(--un-teal); }
.site-footer .wordmark { font-size: 30px; }
.footer__inner {
  display: flex; flex-wrap: wrap; gap: 48px 64px; justify-content: space-between;
  padding-top: clamp(64px, 8vw, 96px); padding-bottom: 48px;
}
.footer__brand { max-width: 300px; }
.footer-icons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px; margin-left: -10px; }
.footer-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--un-white-60); }
.footer-icon svg { display: block; width: 16px; height: 16px; }
.footer-icon:hover, .footer-icon:focus-visible { color: var(--un-white); }
.footer-icon:focus-visible { outline: 1px solid var(--un-white); outline-offset: 2px; }
.footer__nav, .footer__social { display: flex; flex-direction: column; gap: 14px; }
.foot__link, .foot__social {
  color: var(--un-white-60); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.foot__link:hover, .foot__social:hover { color: var(--un-white); }
.foot__social { display: inline-flex; align-items: center; gap: 10px; }
.foot__icon { display: flex; }
.foot__icon svg { width: 16px; height: 16px; display: block; }
.footer__legal { padding-bottom: 44px; }
.footer__note {
  color: var(--un-white-40); font-size: 12px; line-height: 1.55; max-width: 60ch;
  margin: 0 0 4px; padding-top: 26px; border-top: 1px solid var(--un-white-20);
}
.footer__note a { color: var(--un-white-60); font-weight: 700; }
.footer__note a:hover { color: var(--un-white); }
.footer__note--fine { padding-top: 10px; border-top: 0; }

/* ------------------------------------------------------------------ */
/* Responsive — no horizontal scroll from 360px up                     */
/* ------------------------------------------------------------------ */
@media (max-width: 939px) {
  .site-header { position: relative; }
  .header__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .nav { width: 100%; min-width: 0; gap: 16px 24px; }
  .site-language { margin-left: auto; }
  .hero__inner--split { gap: 32px; padding-top: 40px; padding-bottom: 48px; }
  .hero__inner--split .hero__media { width: 100%; max-width: 640px; }
  .hero__inner--split .hero__body { margin-top: 20px; }
  .hero__inner--split .hero__cta { margin-top: 28px; }
}
@media (max-width: 420px) {
  .site-language { margin-left: 0; padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) {
  .two-up { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .header__inner { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 18px; padding-bottom: 16px; }
  .nav { gap: 20px; }
  .section__head--row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero__cta .btn { flex: 1 1 auto; }
  .hosts--compact .host { grid-template-columns: 92px 1fr; column-gap: 16px; }
  .footer__inner { flex-direction: column; gap: 40px; }
}