/* ============================================================
   DESIGN TOKENS — exact values from Figma
   ============================================================ */
:root {
  --font-primary: 'ABC Repro Mono Variable', 'Courier New', monospace;

  /* Type scale */
  --type-nav:      12px;
  --type-body:     clamp(1rem, 1.25vw, 1.125rem); /* 16–18px fluid */
  --type-label-lg: clamp(1.125rem, 1.5vw, 1.25rem);
  --type-hero:     clamp(2rem, 10.5vw, 10.5vw);
  --type-footer:   12px;

  /* Letter spacing */
  --tracking-nav:     -0.12px;
  --tracking-tight:   -0.32px;
  --tracking-label:   -0.4px;
  --tracking-hero:    -0.04em;
  --tracking-footer:  -0.6px;
  --tracking-muted:   -0.64px;

  /* Fluid spacing */
  --space-xs: clamp(0.5rem,  1vw,   0.75rem);
  --space-sm: clamp(0.75rem, 2vw,   1.25rem);
  --space-md: clamp(1.25rem, 3vw,   2rem);
  --space-lg: clamp(2.5rem,  5vw,   5rem);
  --space-xl: clamp(5rem,    9vw,   9rem);

  /* Layout */
  --gutter:           clamp(20px, 2.78vw, 40px);
  --nav-h:            68px;

  /* Footer spacing from Figma
     hero: frame 897px, footer top 838px → 897-838-27 = 32px from bottom */
  --footer-bottom-hero:      clamp(16px, 3.6vh, 32px);

  /* Colors — exact from Figma */
  --color-bg-dark:      #000000;
  --color-bg-events:    #ffffff;
  --color-bg-community: #d7e4eb;

  --color-text-primary: #ffffff;
  --color-text-dark:    #000000;
  --color-text-muted:   #9ba8af;
  --color-text-dim:     #6b7d88;

  /* Footer tokens — exact from Figma node colors */
  --color-footer-bg:             transparent;
  --color-footer-text-dark:      #ffffff;  /* hero + podcast */
  --color-footer-text-light:     #000000;  /* events */
  --color-footer-text-community: #000000;  /* community — updated in Figma */

  /* Highlight chip colors */
  --chip-podcast:   #ffffff;
  --chip-events:    #d7e4eb;
  --chip-community: #6b7d88;

  /* Video overlay colors from Figma */
  --video-overlay-events:    #929292; /* node 2929:422 bg, mix-blend-difference */
  --video-overlay-community: #91a6ab; /* node 2929:477 bg, mix-blend-overlay */
}

/* ============================================================
   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-primary);
  font-size: var(--type-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   UNDERLINE DRAW-IN ANIMATION — targeted links only
   ============================================================ */
.footer-eigen-link,
.hero-cta--plain,
.pod-eps__desc a,
.pod-follow__item a,
.pod-episode__status a {
  position: relative;
}
.footer-eigen-link::after,
.hero-cta--plain::after,
.pod-eps__desc a::after,
.pod-follow__item a::after,
.pod-episode__status a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -0.1em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-eigen-link:hover::after,
.hero-cta--plain:hover::after,
.pod-eps__desc a:hover::after,
.pod-follow__item a:hover::after,
.pod-episode__status a:hover::after {
  transform: scaleX(1);
}
.footer-eigen-link:hover,
.pod-follow__item a:hover,
.pod-episode__status a:hover { text-decoration: none; }
button { background: none; border: none; cursor: pointer; font: inherit; }
ul, ol { list-style: none; }

/* ============================================================
   FONT FACE
   ============================================================ */
@font-face {
  font-family: 'ABC Repro Mono Variable';
  src: url('ABCReproMonoVariable.woff2') format('woff2'),
       url('ABCReproMonoVariable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.t-nav     { font-size: var(--type-nav);      letter-spacing: var(--tracking-nav);    line-height: 1.5; }
.t-body    { font-size: var(--type-body);     letter-spacing: var(--tracking-tight);  line-height: 1.65; }
.t-label   { font-size: var(--type-label-lg); letter-spacing: var(--tracking-label);  line-height: 1.5;
             font-weight: 400; } /* regular weight — matches body */
.t-footer  { font-size: var(--type-footer);   letter-spacing: var(--tracking-footer); line-height: 1.65; }
.t-hero    { font-size: var(--type-hero);     letter-spacing: var(--tracking-hero);   line-height: 0.72; }
.t-muted   { color: var(--color-text-muted); }

/* ============================================================
   INTRO ANIMATION
   From Figma node 2929:506 (1440px frame):
     eigen left:  left calc(41.67%+29px), top 371px, w 104px, h 32px
     labs right:  left calc(50%-5px),     top 371px, w 95px,  h 26px
   Both share top: 371px. Heights differ (32px vs 26px) — align baselines
   using align-items: flex-end so bottoms are flush.
   Overlap: eigen right edge = calc(41.67%+133px), labs left = calc(50%-5px).
   At 1440px: 733px vs 715px → 18px overlap → negative margin-left on right piece.
   Scale: at 1440px eigen renders 104px wide. ratio = 104/1440 = 7.22vw.
   Overlap scales proportionally: 18/1440 = 1.25vw → negative margin.
   Total duration ~1.8s: fade-in 0.4s → hold 0.5s → split 1.1s (0.9s dur).
   ============================================================ */
#intro-overlay {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.intro-logo-wrap {
  display: flex;
  align-items: flex-start; /* top-align: Figma shows both at same top:371px */
  gap: 0;
  opacity: 0;
  /* fade-in triggered by JS (.intro-ready) after images decoded + Y-aligned */
}
.intro-logo-wrap.intro-ready {
  animation: introFadeIn 0.4s ease forwards;
}

.intro-logo__left {
  display: block;
  width: clamp(60px, 7.22vw, 104px);
  height: auto;
  will-change: transform;
}

.intro-logo__right {
  display: block;
  width: clamp(52px, 6.6vw, 95px);
  height: auto;
  /* Overlap: slight bridge — ~20px at 1440 → 1.4vw */
  margin-left: clamp(-18px, -1.4vw, -12px);
  will-change: transform;
}

@keyframes introFadeIn { to { opacity: 1; } }

/* Intro logos inverted on white background */
.intro-logo__left,
.intro-logo__right { filter: invert(1); }

/* On mobile: preserve desktop width ratio so glyphs match */
@media (max-width: 767px) {
  .intro-logo-wrap { align-items: flex-start; }
  .intro-logo__left  { width: 16vw; height: auto; }
  .intro-logo__right { width: 14.63vw; height: auto; margin-left: -2.77vw; }
}

#intro-overlay.fade-out { animation: overlayFade 0.4s ease forwards; }
@keyframes overlayFade { to { opacity: 0; } }

.hero-content {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero-content.visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #intro-overlay { display: none !important; }
  .hero-content  { opacity: 1 !important; transition: none !important; }
}

/* ============================================================
   HIGHLIGHT CHIP SWEEP
   ============================================================ */
.chip-label {
  position: relative;
  display: inline-block;
}
.chip-label__bar {
  position: absolute;
  left: 0; right: 0;
  top: 2px;
  height: 25px;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.chip-label__text {
  position: relative;
  display: block;
  white-space: nowrap;
  font-weight: 400; /* regular — not bold */
}
.chip-label.sweep-active .chip-label__bar {
  animation: sweepIn 0.6s ease-out forwards;
}
@keyframes sweepIn { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .chip-label__bar { transform: scaleX(1) !important; animation: none !important; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  opacity: 0;
  animation: navFadeIn 0.4s ease forwards 0.05s;
}
@keyframes navFadeIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nav { animation: none; opacity: 1; } }

.nav__logo-mark {
  display: block;
  width: 8px; height: 11px;
  background: currentColor;
  flex-shrink: 0;
}
.nav__links { display: flex; align-items: center; gap: clamp(24px, 3.33vw, 48px); }
.nav__link {
  font-size: var(--type-nav);
  letter-spacing: var(--tracking-nav);
  line-height: 1.5;
  padding: 10px;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.nav__link:hover { opacity: 0.6; }
.nav--dark  { color: #fff; }
.nav--dark  .nav__link--active { color: var(--color-text-dim); }
.nav--light { color: #000; }
.nav--light .nav__link--active { color: var(--color-text-dim); }

.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
}
.nav__hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform 0.3s, opacity 0.3s;
}
.nav__hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav__hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  z-index: 99;
  padding: 24px var(--gutter) 32px;
  flex-direction: column;
  gap: 4px;
}
.nav__mobile-menu.is-open { display: flex; }
.nav__mobile-menu .nav__link { font-size: 18px; padding: 12px 0; }
.nav--dark  .nav__mobile-menu { background: #000; border-top: 1px solid rgba(255,255,255,0.1); }
.nav--light .nav__mobile-menu { background: #fff; border-top: 1px solid rgba(0,0,0,0.1); }

/* ============================================================
   BRAND LOGOS
   ============================================================ */
.brand-eigen,
.brand-labs {
  position: absolute;
  top: clamp(160px, 41.4vh, 371px);
}
.brand-eigen { left: var(--gutter);  width: clamp(40px, 4.1vw, 59px);  height: auto; }
.brand-labs  { right: var(--gutter); width: clamp(38px, 3.75vw, 54px); height: auto; }
.brand-eigen img,
.brand-labs  img { width: 100%; height: auto; object-fit: contain; }

/* Community page: brand marks inverted to black */
.brand-eigen--black img,
.brand-labs--black  img { filter: invert(1); }

/* ============================================================
   FOOTER — single consistent layout, color variants only
   Reference: home page footer (Figma node 2849:1095)
   Position: absolute, left/right = --gutter, bottom = --footer-bottom-hero
   All pages use identical spacing; podcast wraps in a flow container.
   ============================================================ */
.site-footer {
  position: absolute;
  bottom: var(--footer-bottom-hero); /* same on all absolute-positioned pages */
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: var(--color-footer-bg);
}

.site-footer__copy {
  font-size: var(--type-footer);
  letter-spacing: var(--tracking-footer);
  line-height: 1.65;
}
.site-footer__social {
  display: flex; align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
}
.site-footer__social a { display: flex; align-items: center; opacity: 0.7; transition: opacity 0.2s; }
.site-footer__social a:hover { opacity: 1; }
.site-footer__social img { height: clamp(12px, 1vw, 16px); width: auto; display: block; image-rendering: -webkit-optimize-contrast; }
.footer-eigen-link { color: #9BA8AF; text-decoration: none; }


/* events — black text; icons are already black PNGs, full opacity */
.site-footer--events .site-footer__copy   { color: var(--color-footer-text-light); }
.site-footer--events .site-footer__social { color: var(--color-footer-text-light); }
.site-footer--events .site-footer__social a  { opacity: 1; }
/* community — black text; icons are already black PNGs, full opacity */
.site-footer--community .site-footer__copy   { color: var(--color-footer-text-community); }
.site-footer--community .site-footer__social { color: var(--color-footer-text-community); }
.site-footer--community .site-footer__social a { opacity: 1; }

/* ============================================================
   PAGE: INDEX — HERO SPLASH
   ============================================================ */
.page-index {
  background: #ffffff;
  color: #000000;
  height: 100vh; height: 100dvh; /* dvh where supported — avoids mobile URL-bar clipping */
  overflow: hidden;
  position: relative;
  /* ensure footer never overlaps copy — footer is ~4vh tall */
  padding-bottom: clamp(3rem, 8vh, 6rem);
}

/* POST AGI wordmark video — Figma node 2952:768
   Lives INSIDE the .hero-wordmark flex row as the gap element.
   Sized in em so it scales with the font at every viewport — no absolute positioning.
   Figma: 49px wide, 70px tall at 97.836px font → 0.501em × 0.716em */
.hero-wordmark__video {
  display: block;
  flex-shrink: 0;
  width: 0.36em;
  aspect-ratio: 56 / 85;
  overflow: hidden;
  pointer-events: none;
  align-self: center;
  opacity: 0;
  transition: opacity 0.15s ease;
  mix-blend-mode: hard-light;
}
.hero-wordmark__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  transform: scale(1.6);
  transform-origin: center center;
}

/* POST AGI sweep bar — animated black rectangle behind white text */
.hero-wordmark-wrap {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
}
.hero-wordmark__bar-bg {
  position: absolute;
  inset: -0.2em 0 -0.85em 0;
  background: #000;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  z-index: 0;
}
.hero-wordmark-wrap.sweep-active .hero-wordmark__bar-bg {
  animation: sweepIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* Reduced motion: show the bar and video immediately — without this the
   white headline sits invisible on the white page background */
@media (prefers-reduced-motion: reduce) {
  .hero-wordmark__bar-bg { transform: scaleX(1) !important; animation: none !important; }
  .hero-wordmark__video  { opacity: 1 !important; transition: none !important; }
}

.hero-wordmark-wrap .hero-wordmark {
  position: relative;
  z-index: 1;
}


/* Hero lockup: wordmark left-aligned per new Figma layout */
.hero-lockup {
  position: absolute;
  top: clamp(160px, 41.4vh, 371px);
  left: calc(8.33% + 2.85vw);
  display: flex;
  flex-direction: column;
}



/* POST AGI wordmark — in flow inside .hero-lockup */
.hero-wordmark {
  position: static;
  transform: none;
  font-size: var(--type-hero);
  font-weight: 300;
  letter-spacing: var(--tracking-hero);
  line-height: 0.72; /* = cap-height ratio: collapses leading so cap top = element top */
  color: #fff;
  white-space: nowrap;
  display: flex;
  align-items: flex-start;
  gap: 0.08em;
}
/* Transparent spacer that holds the gap open between POST and AGI.
   The video node 2952:768 sits absolutely over this gap with hard-light blend.
   No background, no blend mode on the spacer itself. */
.hero-wordmark__bar {
  display: inline-block;
  width: 0.51em; height: 0.72em;
  background: transparent;
  flex-shrink: 0;
}

/* Copy + CTA — right of headline, top-aligned with it per Figma */
.hero-right {
  position: absolute;
  top: clamp(160px, 41.4vh, 371px);
  left: calc(66.67% + 4.86vw);
  width: clamp(180px, 18.8vw, 271px);
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vh, 1.25rem);
}

.hero-copy {
  font-size: var(--type-body);
  letter-spacing: var(--tracking-tight);
  line-height: 1.65;
  color: #000;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-body);
  letter-spacing: var(--tracking-tight);
  line-height: 1.4;
  cursor: pointer;
  color: #000;
  align-self: flex-start;
}
.hero-cta--plain {
  color: var(--color-text-muted);
  font-size: var(--type-body);
  letter-spacing: var(--tracking-tight);
  line-height: 1.4;
  cursor: pointer;
  align-self: flex-start;
  display: inline-block;
}

/* ============================================================
   TABLET — 1024px and below: hide side brand marks
   ============================================================ */
@media (max-width: 1024px) {
  .brand-eigen, .brand-labs { display: none; }
}

/* ============================================================
   PAGES: EVENTS & COMMUNITY — full viewport, no scroll
   ============================================================ */
.page-events,
.page-community {
  height: 100vh; height: 100dvh; /* dvh where supported — avoids mobile URL-bar clipping */
  overflow: hidden;
  position: relative;
}
.page-events    { background: var(--color-bg-events);    color: #000; }
.page-community { background: var(--color-bg-community); color: #000; }

.split-page { position: absolute; inset: 0; }

/* chip — Figma: left calc(16.67%+30px), top 371px in 918px frame */
.split-page__chip {
  position: absolute;
  left: calc(16.67% + 30px);
  top: clamp(160px, 40.4vh, 371px);
}

/* copy — Figma: left calc(33.33%+20px), top 367px */
.split-page__copy {
  position: absolute;
  left: calc(33.33% + 20px);
  top: clamp(158px, 40.0vh, 368px);
  width: clamp(200px, 29vw, 420px);
  font-size: var(--type-body);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: 1.65;
}

/* CTA — Figma: copy top 367px, h 96px, bottom 463px. CTA top 478px = 15px gap.
   We push significantly lower to give breathing room across all viewport sizes. */
.split-page__cta {
  position: absolute;
  left: calc(33.33% + 20px);
  top: clamp(380px, 64vh, 590px);
  font-size: var(--type-body);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: 1.4;
}

/* VIDEO CONTAINER
   No blend mode on the container itself — blend modes on container + overflow:hidden
   creates an isolated stacking context that produces a black edge artifact.
   Instead, blend modes are applied only to the child elements directly.
   Container uses position:relative so children can be stacked absolutely inside it. */
.split-page__video {
  position: absolute;
  left: calc(70% - 14px);
  top: clamp(160px, 40.4vh, 371px);
  width: clamp(110px, 11vw, 158px);
  aspect-ratio: 226 / 320;
  border-radius: 0;
  overflow: hidden;
}
.split-page__video video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

/* EVENTS video layer stack (Figma nodes 2929:418–422):
   The Figma group has mix-blend-mode: difference at group level.
   This means the entire visual result (video + overlay) blends as difference with the bg.
   We achieve this by applying difference to BOTH the video and the overlay div,
   which replicates the group-compositing behaviour without an isolated container:
     - video: mix-blend-mode: difference → blends raw footage with white bg
     - overlay div #929292: mix-blend-mode: difference → second difference pass  */
.page-events .split-page__video video {
  mix-blend-mode: difference;
}
.page-events .video-overlay {
  background: var(--video-overlay-events); /* #929292 */
  mix-blend-mode: difference;
}

/* COMMUNITY video layer stack (Figma nodes 2929:473–477):
   Container group has no blend mode — normal compositing.
   Only the overlay rect has mix-blend-mode: overlay. */
.page-community .split-page__video video {
  mix-blend-mode: normal;
}
.page-community .video-overlay {
  background: var(--video-overlay-community); /* #91a6ab */
  mix-blend-mode: overlay;
}

/* Overlay div shared styles */
.video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* page-specific copy/cta colors */
.page-events .split-page__copy     { color: #000; }
.page-events .split-page__cta      { color: var(--color-text-muted); }
.page-community .split-page__copy  { color: #000; }
.page-community .split-page__cta   { color: var(--color-text-dim); }

/* ============================================================
   MOBILE — 767px and below
   ============================================================ */
@media (max-width: 767px) {
  :root { --nav-h: 56px; }

  .nav__links     { display: none; }
  .nav__hamburger { display: flex; }

  /* Hamburger bars always white on dark navs */
  .nav--dark .nav__hamburger span { background: #fff; }

  /* Full-screen mobile menu overlay — links at bottom, footer below */
  .nav__mobile-menu {
    top: 0;
    height: 100vh; height: 100dvh; /* dvh where supported */
    padding: var(--gutter) var(--gutter) calc(var(--footer-bottom-hero) + 8rem);
    justify-content: flex-end;
    gap: 0;
  }
  .nav__mobile-menu .nav__link {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    padding: clamp(10px, 2vh, 18px) 0;
    letter-spacing: var(--tracking-tight);
    width: 100%;
  }
  .nav--light .nav__mobile-menu .nav__link { color: #000; }
  /* Nav link colour effect on tap/hover — all pages → #6B7D88 */
  .nav__mobile-menu .nav__link { transition: color 0.2s ease; }
  .nav__mobile-menu .nav__link:hover,
  .nav__mobile-menu .nav__link:active { color: #6B7D88; }

  /* Close button — top-right of overlay */
  .nav__mobile-close {
    position: absolute;
    top: clamp(0.9rem, 2.5vh, 1.4rem);
    right: var(--gutter);
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: clamp(1.2rem, 5vw, 1.8rem);
    line-height: 1;
    padding: 0.4rem;
    transition: color 0.2s ease;
  }
  .nav__mobile-close:hover { color: #6B7D88; }

  /* Mobile menu footer — pinned to bottom matching site footer position */
  .nav__mobile-footer {
    position: absolute;
    bottom: var(--footer-bottom-hero);
    left: var(--gutter);
    right: var(--gutter);
    margin-top: 0;
    font-size: var(--type-footer);
    letter-spacing: var(--tracking-footer);
    line-height: 1.65;
    opacity: 0.6;
    color: inherit;
  }

  /* hero — single full-width bar, inset by nav gutter, moved up */
  .hero-lockup {
    left: var(--gutter); right: var(--gutter); transform: none;
    width: auto;
    top: clamp(100px, 28vh, 220px);
  }
  .hero-wordmark-wrap { width: 100%; }
  /* Bar stays inside the gutter — no horizontal bleed */
  .hero-wordmark__bar-bg { inset: -0.2em 0 -0.85em; }
  .hero-wordmark {
    /* Font scaled to fit within guttered width (~94vw available) */
    font-size: clamp(2rem, 19vw, 19vw);
    letter-spacing: -0.05em;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-between;
    padding: 0;
    align-items: flex-start;
  }
  /* Video: proportionally sized, vertically centred */
  .hero-wordmark__video {
    width: clamp(1rem, 8vw, 8vw);
    aspect-ratio: 56 / 85;
    flex-shrink: 0;
    align-self: center;
  }
  /* copy below the single bar */
  .hero-right {
    position: absolute;
    top: calc(clamp(100px, 28vh, 220px) + clamp(2rem, 19vw, 19vw) * 0.72 + clamp(1.5rem, 4vh, 3rem));
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
  }

  /* split pages (events / community) */
  .split-page__chip { left: var(--gutter); top: 22vh; }
  .split-page__copy {
    left: var(--gutter); right: var(--gutter); width: auto;
    top: calc(22vh + 44px);
  }
  /* CTA below copy with clear separation */
  .split-page__cta {
    left: var(--gutter);
    top: calc(22vh + 44px + clamp(90px, 22vw, 140px));
  }
  /* Video below CTA with more breathing room; footer gap via bottom padding */
  .split-page__video {
    display: block;
    position: absolute;
    left: var(--gutter);
    top: calc(22vh + 44px + clamp(90px, 22vw, 140px) + clamp(2.5rem, 7vh, 5rem));
    width: clamp(100px, 38vw, 160px);
  }
  /* Events/community: footer at very bottom of screen, never overlapping */
  .page-events .site-footer,
  .page-community .site-footer {
    bottom: var(--gutter);
  }

  /* All mobile footers: stacked, left-aligned, bottom of page */
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.5rem, 1.5vh, 1rem);
  }
  .pod-footer-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.5rem, 1.5vh, 1rem);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    padding-bottom: var(--gutter);
  }
}