/* ============================================================
   WIN WIN — Brussels Summit 2026
   Design tokens + reusable components, then page sections.
   ============================================================ */

:root {
  --bg: #f1ece3;
  --blue: #2222e0;
  --red: #f43a19;
  --ink: #161513;
  /* broadened brand spectrum (accents — red/blue stay dominant) */
  --magenta: #c81e78;
  --crimson: #e02333;
  --orange: #ef8b1e;
  --green: #45b06f;
  --teal: #0fa596;
  --ph: #d9d9d9;
  --ph-soft: #e6e0d3;
  --body: #45423b;               /* muted warm dark for paragraph text */

  --container: min(1240px, 88vw);
  --body-size: 15px;

  --grad-warm: linear-gradient(180deg, #c81e78 0%, #e02333 55%, #ef8b1e 100%);
  --grad-cool: linear-gradient(180deg, #2431e6 0%, #1583be 55%, #17c07e 100%);
  --grad-spectrum: linear-gradient(180deg, #2431e6 0%, #c81e78 50%, #ef8b1e 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html, body {
  background: var(--bg);
  color: var(--blue);
  font-family: 'Archivo', sans-serif;
  overflow-x: hidden;
}

/* ---------- type components ---------- */
/* display type: Archivo variable — width 80, weight 800, tracking -4% */
.display {
  font-variation-settings: 'wdth' 80;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 0.92;
  color: var(--blue);
}
.display-lg { font-size: clamp(34px, 4.4vw, 84px); }
.display-md { font-size: clamp(30px, 3.4vw, 54px); }
.display-sm { font-size: clamp(17px, 1.4vw, 22px); line-height: 1.05; }
.display-ink { color: var(--ink); }

/* lede display: Archivo Bold, tight leading, tracking -3% — sentence case
   (sized to the hero reference; the Figma 32pt spec didn't translate 1:1) */
.display-lede {
  font-weight: 700;
  font-size: clamp(15px, 1.75vw, 26px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.eyebrow {
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2.2em;
}
.eyebrow-magenta { color: var(--magenta); }
.eyebrow-teal    { color: var(--teal); }
.eyebrow-orange  { color: var(--orange); }

.body-copy {
  color: var(--body);
  font-size: var(--body-size);
  line-height: 1.5;
  font-weight: 450;
  max-width: 42ch;
}
.body-copy.strong { font-weight: 700; }
.body-copy.centered { margin-inline: auto; text-align: center; }
.body-copy strong { font-weight: 700; }

/* gradient text (clip lives on the SAME element that animates — safe) */
.grad-warm {
  background-image: var(--grad-warm);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.grad-cool {
  background-image: var(--grad-cool);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.grad-spectrum {
  background-image: var(--grad-spectrum);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- layout components ---------- */
.container { width: var(--container); margin-inline: auto; }

.section { padding-block: clamp(64px, 11vh, 130px); }
main > .section:last-of-type { padding-bottom: clamp(90px, 15vh, 180px); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: start;
}
/* reversed split: media left, text right on desktop (text first in DOM) */
.split-rev > .flow { order: 2; }
/* narrow-text split: text column shrinks to its capped copy width so the
   text→media gap matches the other media sections (media col grows) */
.split-narrow-text { grid-template-columns: 0.8fr 1.2fr; }

.center { text-align: center; }
.center .body-copy { margin-inline: auto; }

/* vertical rhythm: consistent spacing between stacked children */
.flow > * + * { margin-top: 1.4em; }
.flow > .display + * { margin-top: 2.2em; }
.flow > .eyebrow + * { margin-top: 0; }  /* eyebrow's own margin-bottom rules */

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0s);
}
.reveal.in-view { opacity: 1; transform: none; }

/* ============ HERO ============ */
/* 3 columns (outer two equal) × 2 rows that split at the lockup's midline:
   date block = top-right cell, shaping block = bottom-left cell. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 2vw;
  padding: 9vh 6vw;          /* equal top/bottom breathing room */
}

.lockup {
  grid-column: 2;
  grid-row: 1 / 3;
  /* width-driven, but also capped by viewport height so that
     hero (18vh padding) + lockup + strip (100px) always fit the fold */
  width: min(max(320px, 42vw), calc((82vh - 110px) * var(--lockup-ar, 1.09)));
  aspect-ratio: 1.09;        /* fallback; JS sets the measured ratio */
}
.lockup canvas { display: block; width: 100%; height: 100%; }

/* 66pt at full design width, scaling proportionally below it */
.hero-side {
  font-size: clamp(28px, 3.42vw, 66pt);
  font-variation-settings: 'wdth' 80;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.hero-side p { line-height: 0.9; }

/* per-line gradient slice (clip must live on the animated span itself:
   Chromium won't paint a parent's background-clip:text through composited
   children). Each line shows its slice of the block-wide gradient. */
.hero-side .l {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 100% calc(var(--n) * 100%);
  background-position-y: calc(var(--i) * 100% / (var(--n) - 1));
}

/* intro: staggered per-line fade-ins (both top blocks drop from above) */
.hero-side .l {
  display: block;
  opacity: 0;
  animation: 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: calc(var(--i) * 90ms + 350ms);
}
.hero-tagline .l { animation-name: drop-in; }
.hero-date .l    { animation-name: drop-in; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(0.55em); }
  to   { opacity: 1; transform: none; }
}
@keyframes drop-in {
  from { opacity: 0; transform: translateY(-0.55em); }
  to   { opacity: 1; transform: none; }
}

/* top cells: overflow the cell without stretching row 1 (height: 0), so the
   rows stay exactly half the lockup and hero padding stays symmetric */
.hero-tagline {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  height: 0;
}
.hero-tagline p { --n: 5; }
.hero-tagline .l { background-image: var(--grad-warm); }

.hero-date {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  text-align: right;
  height: 0;
}
.hero-date p { --n: 5; }
.hero-date .l { background-image: var(--grad-cool); }

/* bottom cells: description (left) + RSVP (right), bottoms aligned to the
   lower WIN's ink bottom via the inset exported by hero-blobs.js */
.hero-desc {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  justify-self: start;
  margin-bottom: var(--lockup-ink-inset, 0px);
  max-width: 19ch;
}
.hero-cta {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  margin-bottom: var(--lockup-ink-inset, 0px);
}
/* both fade/rise in after the lockup lines have landed */
.hero-desc, .hero-cta {
  opacity: 0;
  animation: rise-in 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero-desc { animation-delay: 0.95s; }
.hero-cta  { animation-delay: 1.2s; }

/* ============ WOVEN STRIP (reusable) ============ */
.strip {
  position: relative;
  height: 100px;
}
.strip canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.06em;
  background: var(--bg);
  border: 4px solid var(--blue);
  color: var(--red);
  text-decoration: none;
  white-space: nowrap;
  font-variation-settings: 'wdth' 80;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.3em 0.45em 0.34em;
}
/* diagonal arrow: Inter's → rotated 45° up */
.btn .arrow {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-variation-settings: normal;
  letter-spacing: 0;
  display: inline-block;
  transform: rotate(-45deg);
}
.btn:hover { background: var(--blue); color: var(--bg); }

/* ---- animated RSVP button component (hero + save-the-date) ----
   Sliding-gradient border (strip palette). Hover: scales up, text flips to
   cream, arrow nudges along its diagonal, and the WIN WIN blob animation
   fades in inside (canvas.btn-fx, fed live by hero-blobs.js). */
.btn-anim, .btn-anim:hover {
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(90deg, #e33427, #ef7d1f, #2ba093, #2540e2, #e33427) border-box;
  background-size: 100% 100%, 200% 100%;
}
.btn-anim {
  position: relative;
  overflow: hidden;
  border: 4px solid transparent;
  animation: btn-border 12s linear infinite;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.3s ease;
}
@keyframes btn-border { to { background-position: 0 0, 200% 0; } }
/* keep the scroll-reveal fade when the component is also a .reveal */
.btn-anim.reveal {
  transition: opacity 0.65s ease var(--d, 0s),
              transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
              color 0.3s ease;
}
.btn-anim .btn-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.btn-anim .lbl, .btn-anim .arrow { position: relative; }  /* above the canvas */
.btn-anim .arrow { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.btn-anim:hover {
  transform: scale(1.045);
  color: var(--bg);
}
.btn-anim:hover .btn-fx { opacity: 1; }
.btn-anim:hover .arrow { transform: rotate(-45deg) translateX(5px); }

/* size variants */
.cta-hero { font-size: clamp(30px, 2.6vw, 50px); }
.cta-btn {
  font-size: clamp(24px, 2.3vw, 42px);
  margin-top: 1.2em;
}

/* ============ SECTION MEDIA (generative energy tiles) ============ */
/* stack height derives from the overlapping tiles (bottom tile ends at
   0.42H + 4/3 × 0.46W → H ≈ 1.06W), so nothing bleeds into the next section */
.media-stack { position: relative; aspect-ratio: 1 / 1.06; }
.ph { background: var(--ph); display: block; }
.media-stack .ph { position: absolute; }
.ph-1 { width: 45%; aspect-ratio: 3 / 4.4; right: 4%; top: 0; }
.ph-2 { width: 46%; aspect-ratio: 3 / 4;   left: 0;   top: 42%; }
.media-solo .ph { width: 88%; aspect-ratio: 3 / 3.5; }

/* ============ SAVE THE DATE (woven border frame) ============ */
.rsvp-framed {
  position: relative;
  padding-block: clamp(100px, 14vh, 150px);
}
.rsvp-framed > canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--container);           /* frame stays inside the container */
  height: 100%;
  display: block;
  pointer-events: none;
}
.rsvp-framed .container {
  position: relative;              /* above the border canvas */
  width: min(920px, 72vw);
}
.venue strong { color: var(--blue); }
.map-link {
  display: inline-block;
  margin-top: 0.9em;
  color: var(--blue);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.map-link .arrow {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  display: inline-block;
  transform: rotate(-45deg);
  margin-left: 0.15em;
}
.map-link:hover { color: var(--red); }

/* ============ STATEMENT ============ */
.statement .display-lg { max-width: 16em; }
.statement-body {
  margin-top: 3em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
  gap: 2em 4em;
}

/* ============ PROGRAMME (vertical, modular time column) ============ */
.programme { max-width: 900px; }
/* divider lines are pseudo-elements so they can draw in left-to-right
   (scaleX) as their content scrolls into view, and back out on exit */
.prog-group {
  position: relative;
  padding-top: 1.1em;
}
.prog-group::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--accent, var(--blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.prog-group:has(.prog-head.in-view)::before { transform: scaleX(1); }
.prog-group + .prog-group { margin-top: 3.2em; }
.prog-head {
  color: var(--accent, var(--blue));
  font-variation-settings: 'wdth' 80;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 14px;
}
.prog-item {
  position: relative;
  display: grid;
  /* col 1 is the reserved time slot — hour-by-hour times drop in later */
  grid-template-columns: 92px 3em 1fr;
  gap: 0 1.6em;
  padding-block: 1.7em 0.4em;
  align-items: baseline;
}
.prog-item + .prog-item { margin-top: 1.2em; }
.prog-item + .prog-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: rgba(34, 34, 224, 0.16);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s);
}
.prog-item.in-view::before { transform: scaleX(1); }
/* programme titles take their group's accent colour */
.prog-body .display-sm { color: var(--accent, var(--blue)); }
.prog-time {
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
}
.prog-num {
  color: var(--accent, var(--red));
  font-weight: 800;
  font-variation-settings: 'wdth' 80;
  font-size: 14px;
  letter-spacing: 0.06em;
}
.prog-body .body-copy { max-width: 58ch; margin-top: 0.7em; }

/* ============ SPEAKERS ============ */
.speakers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 235px));
  gap: 2.5em;
  align-items: end;
}
.speaker-ph { background: var(--ph); aspect-ratio: 3 / 3.7; width: 100%; }
.speaker figcaption { margin-top: 1em; }
.speaker-name { display: block; }
.speaker-role {
  display: block;
  margin-top: 0.4em;
  font-size: var(--body-size);
  font-weight: 600;
  color: var(--red);
}
.speakers-more { align-self: end; padding-bottom: 0.2em; font-weight: 700; }

/* ============ PARTNERS (two counter-scrolling logo marquees) ============ */
.partners-note { max-width: 52ch; }
.logo-marquee {
  overflow: hidden;
  margin-top: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee:first-of-type { margin-top: 3em; }
/* track = two identical sets; -50% = exactly one set → seamless loop */
.logo-row {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.logo-row.rev { animation-direction: reverse; }   /* top row: left-to-right */
.logo-set { display: flex; gap: 12px; padding-right: 12px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-ph {
  flex: none;
  width: clamp(150px, 17vw, 220px);
  aspect-ratio: 5 / 3;
  background: var(--ph-soft);
}

/* ============ FOOTER ============ */
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2em;
  padding-block: 44px 52px;
}
.footer-mark {
  font-variation-settings: 'wdth' 75;
  font-weight: 900;
  letter-spacing: -0.07em;
  line-height: 0.74;
  font-size: 30px;
  text-transform: uppercase;
}
.footer-note {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============ MOTION PREFERENCES ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-side .l { animation: none; opacity: 1; }
  .hero-desc, .hero-cta { animation: none; opacity: 1; }
  .btn-anim { animation: none; }
  .logo-row { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .prog-group::before, .prog-item + .prog-item::before { transition: none; }
}

/* ============ RESPONSIVE ============ */

@media (max-width: 900px) {
  /* lockup on top, then the two text blocks side by side (left / right),
     compact enough that the RSVP strip stays above the fold */
  .hero {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    column-gap: 4vw;
    padding: 4vh 6vw;
  }
  .hero-side { font-size: clamp(17px, 5vw, 30px); }
  .lockup {
    grid-column: 1 / 3;
    grid-row: 1;
    justify-self: center;
    width: min(100%, calc(52vh * var(--lockup-ar, 1.09)));
  }
  .hero-tagline {
    grid-column: 1; grid-row: 2;
    align-self: start; justify-self: start;
    height: auto;
    margin-top: 3.5vh;
  }
  .hero-date {
    grid-column: 2; grid-row: 2;
    align-self: start; justify-self: end;
    text-align: right;
    margin-top: 3.5vh;
    height: auto;
  }
  .hero-desc {
    grid-column: 1 / 3; grid-row: 3;
    align-self: start;
    margin: 4vh 0 0;
    max-width: 28ch;
  }
  .hero-cta {
    grid-column: 1 / 3; grid-row: 4;
    align-self: start; justify-self: start;
    margin: 3.5vh 0 0;
  }
  .strip { height: 72px; }
  .btn { border-width: 3px; }
  .rsvp-framed .container { width: min(920px, 70vw); }

  .split, .split-narrow-text { grid-template-columns: 1fr; gap: 56px; }
  .split-rev > .flow { order: 0; }   /* text back above media when stacked */
  .media-solo .ph { width: 100%; }
}

@media (max-width: 640px) {
  .prog-item { grid-template-columns: 2.6em 1fr; }
  .prog-time { grid-column: 1 / -1; }
  .prog-time:empty { display: none; }
  .speakers { grid-template-columns: 1fr 1fr; gap: 1.6em; }
  .footer-row { flex-wrap: wrap; }
  /* frame goes full-bleed on phones (container inset leaves too little room) */
  .rsvp-framed > canvas { width: 100%; left: 0; transform: none; }
  .rsvp-framed .container { width: min(920px, 74vw); }
}