/* ==========================================================================
   THE INFLUENCER TABLE — v3 "Ember"
   --------------------------------------------------------------------------
   The brand gradient (#C12426 -> #2C1A14) as the signature surface on a deep
   warm-brown ground. Cream type, light-red highlights, Instrument Serif at
   display sizes only. Signature moments:
   an intro counter curtain, a rotating seal CTA, an expanding speaker shelf,
   and an oversized scrolling wordmark.

   Contents
     01. Tokens
     02. Base
     03. Intro curtain
     04. Ambient (grain, cursor, progress)
     05. Typography
     06. Buttons + seal
     07. Navbar
     08. Hero
     09. About + stats
     10. Speakers shelf
     11. Big marquee
     12. Format / agenda
     13. Invite
     14. Footer
     15. Motion utilities
     16. Responsive
     17. No-JS + reduced motion
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root {

  /* --- Ground: deep warm brown, from the gradient tail -------------------
     The gradient itself is the SURFACE (hero, seal, CTA, marquee, intro),
     not the page ground: a full-page 135deg ramp would swing text contrast
     from 5.1:1 to 14:1 across the page. --brand-grad holds it.
     -------------------------------------------------------------------- */
  --ground-900:          #150C08;   /* deepest, page floor            */
  --ground-800:          #1C100B;   /* body ground                    */
  --ground-700:          #2C1A14;   /* raised panel                   */
  --ground-600:          #3A241C;   /* hover / rule fill              */
  --brand-grad:         linear-gradient(135deg, #C12426, #2C1A14);

  /* --- Type ------------------------------------------------------------
     Contrast vs --ground-800 (#1C100B):
       --cream      #F5EFE9  ≈ 16.3:1  (AAA)
       --cream-dim  #C4B5AC  ≈  9.4:1  (AAA)
       --accent     #E8595A  ≈  5.3:1  (AA)
       --cream-mute #9A8A80  ≈  5.6:1  (AA)
     -------------------------------------------------------------------- */
  --cream:              #F5EFE9;
  --cream-dim:          #C4B5AC;
  --cream-mute:         #9A8A80;
  --accent:               #E8595A;
  --accent-rgb:           232, 89, 90;

  --rule:               rgba(245, 239, 233, .15);
  --rule-soft:          rgba(245, 239, 233, .08);

  --shadow-lg:          0 40px 90px -34px rgba(0, 0, 0, .7);

  /* --- Fonts -----------------------------------------------------------
     Instrument Serif ships a single weight, so it is used ONLY at display
     sizes (>=1.4rem). Everything smaller is Inter.
     -------------------------------------------------------------------- */
  --font-display:       "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-body:          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-eyebrow:         clamp(.64rem, .58rem + .18vw, .73rem);
  --fs-body:            clamp(.95rem, .91rem + .2vw, 1.02rem);
  --fs-lede:            clamp(1.1rem, 1rem + .5vw, 1.4rem);
  --fs-h2:              clamp(2.3rem, 1.4rem + 3.6vw, 5rem);
  --fs-h2-lg:           clamp(2.6rem, 1.5rem + 4.6vw, 6rem);
  --fs-h1:              clamp(3rem, 1.2rem + 7.6vw, 8.5rem);

  --ls-eyebrow:         .2em;

  --space-sm:           1.25rem;
  --space-md:           2rem;
  --space-lg:           3.25rem;
  --space-xl:           5rem;
  --section-y:          clamp(4.5rem, 2.5rem + 7vw, 9rem);

  --ease:               cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:         cubic-bezier(0.65, 0, 0.35, 1);
  --dur-base:           300ms;
  --dur-slow:           600ms;
  --dur-reveal:         1100ms;

  --nav-h:              74px;
}


/* ==========================================================================
   02. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground-800);
  color: var(--cream-dim);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.68;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background-image:
    radial-gradient(90% 55% at 50% 0%, rgba(var(--accent-rgb), .10) 0%, transparent 62%),
    linear-gradient(180deg, var(--ground-800) 0%, var(--ground-900) 100%);
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

::selection { background: rgba(var(--accent-rgb), .28); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

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

.skip-link {
  position: fixed;
  top: 10px; left: 50%;
  transform: translate(-50%, -170%);
  z-index: 3000;
  padding: .6rem 1.15rem;
  background: var(--cream);
  color: var(--ground-900);
  border-radius: 999px;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform var(--dur-base) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }


/* ==========================================================================
   03. INTRO CURTAIN
   Visible by default so the page never flashes behind it. main.js counts
   0→100 then lifts it, and always tears it down even if something stalls.
   ========================================================================== */
.intro {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--brand-grad);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1100ms var(--ease);
}
.intro.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }

.intro__inner {
  width: min(1320px, 92vw);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: clamp(1.75rem, 4vh, 3rem);
  border-bottom: 1px solid var(--rule);
  opacity: 1;
  transition: opacity 420ms var(--ease);
}
.intro.is-done .intro__inner { opacity: 0; }

.intro__label {
  color: var(--cream-dim);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.intro__count {
  color: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2rem + 7vw, 9rem);
  line-height: .85;
  font-variant-numeric: tabular-nums;
}
.intro__count i { font-style: normal; }
.intro__count::after {
  content: "%";
  margin-left: .12em;
  font-size: .28em;
  vertical-align: super;
  color: var(--accent);
}

/* while the curtain is up the page must not scroll */
body.is-intro { overflow: hidden; }


/* ==========================================================================
   04. AMBIENT
   ========================================================================== */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Contextual cursor: a dot that grows into a labelled pill */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ground-900);
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--ease),
              width 380ms var(--ease), height 380ms var(--ease),
              margin 380ms var(--ease), background-color 380ms var(--ease);
  will-change: transform;
}
.cursor-dot.is-on { opacity: 1; }
.cursor-dot.is-hover {
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  background: rgba(var(--accent-rgb), .22);
}
.cursor-dot.is-label {
  width: 84px; height: 84px;
  margin: -42px 0 0 -42px;
  background: var(--accent);
}
.cursor-dot__label {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 260ms var(--ease);
}
.cursor-dot.is-label .cursor-dot__label { opacity: 1; }

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 1600;
  pointer-events: none;
}
.scroll-progress__bar {
  display: block;
  height: 100%; width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent);
  will-change: transform;
}


/* ==========================================================================
   05. TYPOGRAPHY
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 var(--space-md);
  color: var(--accent);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 30px; height: 1px;
  background: currentColor;
  opacity: .7;
}

.section-title {
  margin: 0 0 var(--space-md);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.section-title--lg { font-size: var(--fs-h2-lg); }
.section-title em { font-style: italic; color: var(--accent); }

.lede {
  margin: 0 0 var(--space-sm);
  color: var(--cream);
  font-size: var(--fs-lede);
  font-weight: 300;
  line-height: 1.5;
}
.body-copy { margin: 0 0 var(--space-sm); color: var(--cream-dim); }

.section {
  position: relative;
  z-index: 2;
  padding-block: var(--section-y);
}


/* ==========================================================================
   06. BUTTONS + SEAL
   ========================================================================== */
.btn-lux {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: 1.05rem 2.1rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ground-900);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-base) var(--ease), transform var(--dur-slow) var(--ease);
  will-change: transform;
}
.btn-lux::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--brand-grad);
  transform: translateY(101%);
  transition: transform var(--dur-slow) var(--ease);
}
.btn-lux:hover::before,
.btn-lux:focus-visible::before { transform: translateY(0); }
.btn-lux__arrow { transition: transform var(--dur-slow) var(--ease); }
.btn-lux:hover .btn-lux__arrow { transform: translateX(5px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.3rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--cream);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: background-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ground-900);
}

/* --- Rotating seal ------------------------------------------------------
   The ring text is built from individual rotated spans by main.js rather
   than an SVG textPath: SVG element names are case-sensitive and this repo's
   auto-formatter lowercases them, which would silently break the mark.
   ------------------------------------------------------------------------ */
.seal {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(150px, 15vw, 208px);
  aspect-ratio: 1;
  margin-inline: auto;
  color: var(--cream);
}
.seal__ring {
  position: absolute;
  inset: 0;
  animation: seal-spin 22s linear infinite;
}
.seal__ring span {
  position: absolute;
  left: 50%; top: 50%;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  transform-origin: 0 0;
  color: var(--cream-dim);
}
@keyframes seal-spin { to { transform: rotate(360deg); } }
.seal:hover .seal__ring { animation-duration: 9s; }

.seal__core {
  display: grid;
  place-items: center;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-grad);
  color: var(--cream);
  font-size: 1.3rem;
  transition: transform var(--dur-slow) var(--ease);
}
.seal:hover .seal__core,
.seal:focus-visible .seal__core { transform: scale(1.1); }


/* ==========================================================================
   07. NAVBAR
   ========================================================================== */
.site-nav {
  --nav-glass: 0;
  min-height: var(--nav-h);
  padding-block: .85rem;
  z-index: 1500;
  background: rgba(21, 12, 8, calc(var(--nav-glass) * .82));
  backdrop-filter: blur(calc(var(--nav-glass) * 16px));
  -webkit-backdrop-filter: blur(calc(var(--nav-glass) * 16px));
  border-bottom: 1px solid rgba(242, 239, 230, calc(var(--nav-glass) * .12));
  transition: padding var(--dur-slow) var(--ease);
}
.site-nav.is-scrolled { padding-block: .5rem; }

.site-nav .nav-link {
  position: relative;
  padding: .5rem .1rem;
  margin-inline: 1rem;
  color: var(--cream-dim);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color var(--dur-base) var(--ease);
}
.site-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: .25rem;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--dur-slow) var(--ease);
}
.site-nav .nav-link:hover { color: var(--cream); }
.site-nav .nav-link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

.brand { display: inline-flex; align-items: center; gap: .7rem; padding: 0; }
.brand__mark {
  position: relative;
  width: 20px; height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  border: 1px solid var(--accent);
}
.brand__mark::after {
  content: "";
  position: absolute;
  inset: 5.5px;
  border-radius: 50%;
  background: var(--accent);
}
.brand__text {
  color: var(--cream);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .24em;
}

/* Shine sweep — travel must stay inside 0%–100%: with a 260%-wide no-repeat
   image, a position outside that range slides the gradient clear of part of
   the box, and transparent text-fill over no background is invisible text. */
.shine {
  background-image: linear-gradient(100deg,
    var(--cream) 0%, var(--cream) 38%,
    var(--accent) 48%, #FFFFFF 52%, var(--accent) 56%,
    var(--cream) 66%, var(--cream) 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine-sweep 7s var(--ease-inout) infinite;
}
@keyframes shine-sweep {
  0%, 64%   { background-position: 100% 0; }
  93%, 100% { background-position: 0% 0; }
}

.nav-toggle {
  width: 44px; height: 38px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: 0; border: 0;
  background: none;
  box-shadow: none !important;
}
.nav-toggle__bar {
  display: block;
  width: 26px; height: 1.5px;
  background: var(--cream);
  transition: transform var(--dur-base) var(--ease), width var(--dur-base) var(--ease);
}
.nav-toggle__bar:last-child { width: 17px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child  { width: 26px; transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 991.98px) {
  .site-nav .navbar-collapse {
    margin-top: 1rem;
    padding: 1.1rem 1rem 1.35rem;
    background: var(--ground-700);
    border: 1px solid var(--rule);
    border-radius: 6px;
  }
  .site-nav .nav-link { margin-inline: 0; padding-block: .6rem; }
  .site-nav .nav-link::after { display: none; }
}


/* ==========================================================================
   08. HERO
   ========================================================================== */
.hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--nav-h) + 3rem) 6rem;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__glow {
  position: absolute;
  left: 50%; top: -30%;
  translate: -50% 0;
  width: 90vw; height: 90vh;
  background: radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), .16) 0%, transparent 62%);
  filter: blur(40px);
  will-change: transform;
}
.hero__rings {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: min(140vh, 130vw);
  aspect-ratio: 1;
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 72%);
          mask-image: radial-gradient(circle, #000 35%, transparent 72%);
  will-change: transform;
}
.hero__rings svg { width: 100%; height: 100%; display: block; }

.hero__inner { position: relative; width: 100%; }

.hero__title {
  margin: 0 0 var(--space-md);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.03em;
  text-wrap: balance;

  /* held back until main.js has split the words */
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.hero__title.is-revealed { opacity: 1; }

/* Gradient must also be declared on the split spans — background-clip:text
   does not reach into the inline-block spans main.js injects, so those glyphs
   would inherit the transparent fill with no background and vanish. The ramp
   is vertical so it does not restart visibly at each word. */
/* Gradient key phrase.
   The gradient must be declared on the split word-spans as well as on the
   <em>: background-clip:text does not reach into the inline-block spans
   main.js injects, so those glyphs would inherit the transparent fill with
   no background of their own and vanish. The ramp is vertical so it does
   not visibly restart at each word boundary. */
.hero__title em,
.hero__title em .split-word > span {
  font-style: italic;
  background-image: linear-gradient(180deg, #FFD8D2 0%, var(--accent) 55%, #C4383A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero__sub {
  max-width: 44ch;
  margin: 0;
  color: var(--cream-dim);
  font-size: var(--fs-lede);
  font-weight: 300;
  line-height: 1.55;
}

.hero__sealwrap { display: flex; justify-content: center; }

.hero__meta {
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  border-top: 1px solid var(--rule);
}
.hero__metacell {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.1rem 1.25rem 1.1rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.hero__metacell + .hero__metacell { padding-left: clamp(0px, 2vw, 1.5rem); }
@media (min-width: 768px) {
  .hero__metacell + .hero__metacell { border-left: 1px solid var(--rule-soft); }
}
.hero__metak {
  color: var(--accent);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero__metav { color: var(--cream); font-size: .96rem; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  color: var(--cream-mute);
  transition: color var(--dur-base) var(--ease);
}
.scroll-cue:hover { color: var(--accent); }
.scroll-cue__label {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.scroll-cue__line {
  position: relative;
  display: block;
  width: 1px; height: 46px;
  overflow: hidden;
  background: var(--rule);
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%; height: 40%;
  background: var(--accent);
  animation: cue-travel 2.8s var(--ease-inout) infinite;
}
@keyframes cue-travel {
  0%        { transform: translateY(-100%); }
  60%, 100% { transform: translateY(250%); }
}


/* ==========================================================================
   09. ABOUT + STATS
   ========================================================================== */
.stats {
  margin-top: clamp(3rem, 2rem + 4vw, 6rem);
  border-top: 1px solid var(--rule);
}
.stats__cell {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem) clamp(.75rem, 2vw, 1.6rem) clamp(1.2rem, 1rem + 1vw, 1.8rem) 0;
  border-bottom: 1px solid var(--rule);
}
.stats__cell + .stats__cell { border-left: 1px solid var(--rule-soft); padding-left: clamp(1rem, 2vw, 1.6rem); }

.stats__num {
  margin: 0 0 .5rem;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 1.6rem + 4.4vw, 5.5rem);
  line-height: .88;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stats__num--word { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3rem); line-height: 1; }
.stats__num--word em { font-style: italic; color: var(--accent); }

.stats__label {
  margin: auto 0 0;   /* bottom-align every label regardless of number height */
  color: var(--cream-mute);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
}


/* ==========================================================================
   10. SPEAKERS SHELF
   An image accordion. `flex-grow` is animatable, so the open panel simply
   grows. With nothing hovered the first panel stays open, so the shelf is
   never in a "nothing selected" state.
   ========================================================================== */
.section--speakers { padding-bottom: calc(var(--section-y) * .7); }

.shelf__hint {
  margin: var(--space-md) 0 0;
  color: var(--cream-mute);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.shelf {
  display: flex;
  gap: 6px;
  height: clamp(400px, 58vh, 560px);
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}

.shelf__panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ground-700);
  cursor: pointer;
  transition: flex-grow 750ms var(--ease);
}
.shelf__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.62) contrast(1.05);
  transform: scale(1.04);
  transition: filter 750ms var(--ease), transform 900ms var(--ease);
}
/* legibility scrim under the meta block */
.shelf__panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 72%;
  background: linear-gradient(180deg, transparent, rgba(21, 12, 8, .94));
  pointer-events: none;
}

.shelf__idx {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  color: var(--cream);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .14em;
  opacity: .75;
}

.shelf__meta {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.35rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms var(--ease), transform 650ms var(--ease);
}
.shelf__tag {
  margin: 0 0 .5rem;
  color: var(--accent);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.shelf__name {
  margin: 0 0 .2rem;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
  font-weight: 400;
  line-height: 1.05;
  white-space: nowrap;
}
.shelf__role {
  margin: 0 0 .9rem;
  color: var(--cream-dim);
  font-size: .84rem;
  white-space: nowrap;
}
.shelf__social { display: flex; gap: .45rem; }
.shelf__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--cream-dim);
  transition: color var(--dur-base) var(--ease),
              background-color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.shelf__social svg { width: 14px; height: 14px; }
.shelf__social a:hover,
.shelf__social a:focus-visible {
  color: var(--ground-900);
  background: var(--accent);
  border-color: var(--accent);
}

/* open state: hovered / focused panel, or the first one when nothing is */
.shelf__panel:hover,
.shelf__panel:focus-visible,
.shelf__panel:focus-within,
.shelf:not(:hover):not(:focus-within) .shelf__panel:first-child { flex-grow: 3.6; }

.shelf__panel:hover .shelf__img,
.shelf__panel:focus-within .shelf__img,
.shelf:not(:hover):not(:focus-within) .shelf__panel:first-child .shelf__img {
  filter: grayscale(0) brightness(.86) contrast(1);
  transform: scale(1);
}
.shelf__panel:hover .shelf__meta,
.shelf__panel:focus-within .shelf__meta,
.shelf:not(:hover):not(:focus-within) .shelf__panel:first-child .shelf__meta {
  opacity: 1;
  transform: none;
}

.speakers-note {
  margin: var(--space-lg) 0 0;
  color: var(--cream-mute);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}


/* ==========================================================================
   11. BIG MARQUEE
   ========================================================================== */
.bigmarquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-block: 1px solid var(--rule-soft);
  background: var(--brand-grad);
  background: var(--brand-grad);
}
.bigmarquee__track {
  display: flex;
  width: max-content;
  animation: marquee-run 38s linear infinite;
  will-change: transform;
}
.bigmarquee__unit {
  flex: 0 0 auto;
  padding-right: .3em;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.5rem + 5vw, 6.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.bigmarquee__unit em {
  font-style: normal;
  color: var(--accent);
  font-size: .32em;
  vertical-align: middle;
  margin-inline: .25em;
}
@keyframes marquee-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ==========================================================================
   12. FORMAT / AGENDA
   ========================================================================== */
.agenda {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-top: 1px solid var(--rule);
}
.agenda__row {
  padding: clamp(1.15rem, .85rem + 1vw, 1.75rem) 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: padding-left var(--dur-slow) var(--ease),
              background-color var(--dur-slow) var(--ease);
}
.agenda__row:hover {
  padding-left: clamp(.5rem, 1.4vw, 1.25rem);
  background: rgba(var(--accent-rgb), .06);
}
.agenda__time {
  color: var(--accent);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.agenda__title {
  color: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + .7vw, 1.7rem);
  line-height: 1.25;
}
.agenda__note {
  color: var(--cream-mute);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
@media (min-width: 768px)    { .agenda__note { text-align: right; } }
@media (max-width: 767.98px) { .agenda__note { margin-top: .55rem; } }


/* ==========================================================================
   13. INVITE
   ========================================================================== */
.section--invite .eyebrow::before { display: none; }
.section--invite .body-copy {
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}
.invite-fine { margin: var(--space-md) 0 0; color: var(--cream-mute); font-size: .86rem; }
.invite-fine a {
  color: var(--cream);
  border-bottom: 1px solid var(--rule);
  overflow-wrap: anywhere;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.invite-fine a:hover { color: var(--accent); border-color: var(--accent); }


/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 2;
  padding: var(--space-xl) 0 var(--space-md);
  border-top: 1px solid var(--rule);
  background: var(--ground-900);
}
.brand--footer { margin-bottom: var(--space-sm); }
.footer-copy { margin: 0; color: var(--cream-mute); font-size: .88rem; line-height: 1.7; }
.footer-head {
  margin: 0 0 .9rem;
  color: var(--accent);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.footer-list li { margin-bottom: .5rem; }
.footer-list a {
  color: var(--cream-dim);
  font-size: .88rem;
  overflow-wrap: anywhere;   /* long emails must be able to break */
  transition: color var(--dur-base) var(--ease);
}
.footer-list a:hover { color: var(--accent); }

.footer-social { display: flex; gap: .5rem; margin-top: var(--space-sm); }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--cream-dim);
  transition: color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.footer-social svg { width: 15px; height: 15px; }
.footer-social a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule-soft);
}
.footer-base p { margin: 0; color: var(--cream-mute); font-size: .72rem; letter-spacing: .06em; }
.footer-base a:hover { color: var(--accent); }


/* ==========================================================================
   15. MOTION UTILITIES
   ========================================================================== */

/* The mask needs overflow:hidden, which clips sideways too — and italic serif
   glyphs overhang their advance width, losing their left edge. Padding gives
   them room; the negative margin keeps word spacing unchanged. */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* The reveal mask is overflow:hidden, which clips on every side. These
     hero line-heights (0.92-1.04) are far tighter than the fonts' ~1.3em
     glyph extents, so descenders, ascenders and italic overhangs were being
     cut. Padding gives the glyphs room inside the mask; the equal negative
     margin cancels it so line spacing and word spacing are untouched. */
  padding: .28em .12em;
  margin: -.28em -.12em;
}
.split-word > span {
  display: inline-block;
  /* Travel must clear the padded mask, not just the content box, or the
     word peeks out below the mask before it animates:
     travel >= height + padding-bottom. */
  transform: translateY(145%);
  transition: transform 1100ms var(--ease);
  will-change: transform;
}
.is-revealed .split-word > span { transform: translateY(0); }

[data-hero-step] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  will-change: transform, opacity;
}
[data-hero-step].is-revealed { opacity: 1; transform: none; }

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  will-change: transform, opacity;
}
.reveal.is-in { opacity: 1; transform: none; }

/* Heading reveal. The clip sits on an inner wrapper injected by main.js,
   never on the observed element: a clip-path that collapses the box to zero
   height also drives IntersectionObserver's ratio to 0, so the heading could
   never trigger its own reveal. Opacity does not affect intersection. */
.reveal-mask { opacity: 0; transition: opacity 420ms var(--ease); }
.reveal-mask.is-in { opacity: 1; }
.reveal-mask__inner {
  display: block;
  filter: blur(9px);
  clip-path: inset(-14% -6% 105% -6%);
  transform: translateY(14px);
  transition: filter 1100ms var(--ease),
              clip-path var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
  will-change: clip-path, filter, transform;
}
.reveal-mask.is-in .reveal-mask__inner {
  filter: blur(0);
  clip-path: inset(-14% -6% -14% -6%);
  transform: none;
}

/* Staggered children — observed individually, never via their container */
[data-stagger] > .shelf__panel,
[data-stagger] > .agenda__row,
[data-stagger] > .stats__cell {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 850ms var(--ease), transform 850ms var(--ease);
  will-change: transform, opacity;
}
[data-stagger] > .shelf__panel.is-in,
[data-stagger] > .agenda__row.is-in,
[data-stagger] > .stats__cell.is-in { opacity: 1; transform: none; }


/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */
@media (max-width: 1199.98px) {
  .shelf { height: clamp(360px, 52vh, 480px); }
  .shelf__name { font-size: 1.5rem; }
}

@media (max-width: 991.98px) {
  :root { --nav-h: 66px; }
  .hero { padding-block: calc(var(--nav-h) + 2.5rem) 5.5rem; }
  .hero__sealwrap { margin-top: 1.5rem; }
  .cursor-dot { display: none; }

  /* the accordion does not survive touch — stack into full cards instead */
  .shelf {
    display: block;
    height: auto;
  }
  .shelf__panel {
    height: auto;
    aspect-ratio: 16 / 10;
    margin-bottom: 10px;
    flex: none;
  }
  .shelf__panel:last-child { margin-bottom: 0; }
  .shelf__img { filter: grayscale(0) brightness(.8) contrast(1); transform: none; }
  .shelf__meta { opacity: 1; transform: none; }
  .shelf__hint { display: none; }
}

@media (max-width: 767.98px) {
  .hero__metacell { padding-left: 0; }
  .agenda__row:hover { padding-left: 0; }
  .scroll-cue { display: none; }
  .shelf__panel { aspect-ratio: 4 / 3; }
  .stats__cell:nth-child(odd) { padding-left: 0; border-left: 0; }
}

@media (max-width: 575.98px) {
  :root { --section-y: 4rem; }
  .brand__text { font-size: .68rem; letter-spacing: .18em; }
  .shelf__name { font-size: 1.4rem; white-space: normal; }
  .shelf__role { white-space: normal; }
}

@media (hover: none) {
  .cursor-dot { display: none; }
  .agenda__row:hover { padding-left: 0; }
}


/* ==========================================================================
   17. NO-JS + REDUCED MOTION
   ========================================================================== */
@media (scripting: none) {
  .intro { display: none; }
  .reveal, .reveal-mask, .hero__title,
  [data-hero-step],
  [data-stagger] > .shelf__panel,
  [data-stagger] > .agenda__row,
  [data-stagger] > .stats__cell {
    opacity: 1;
    transform: none;
  }
  .reveal-mask__inner { filter: none; clip-path: none; transform: none; }
  .cursor-dot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .intro { display: none; }

  .reveal, .reveal-mask, .hero__title,
  [data-hero-step],
  [data-stagger] > .shelf__panel,
  [data-stagger] > .agenda__row,
  [data-stagger] > .stats__cell {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .reveal-mask__inner { filter: none !important; clip-path: none !important; transform: none !important; }
  .split-word > span { transform: none !important; }

  .shine { animation: none; background: none; -webkit-text-fill-color: var(--cream); }
  .seal__ring, .bigmarquee__track { animation: none; }
  .cursor-dot, .scroll-cue__line::after { display: none; }
}




/* ==========================================================================
   PRIMARY LOGO (IIGC)
   The supplied artwork is black on transparency, so it is inverted on every
   dark ground. The intrinsic file is 666px square, so an explicit width is
   mandatory — without it the mark renders full size and shoves the navbar
   into the hero.
   ========================================================================== */
.brand__logo {
  width: clamp(30px, 2.4vw, 36px);
  height: auto;
  aspect-ratio: 1;
  flex: 0 0 auto;
  filter: invert(1);
  opacity: .92;
  transition: opacity var(--dur-base) var(--ease), filter var(--dur-base) var(--ease);
}
.brand:hover .brand__logo { opacity: 1; }

.site-footer .brand__logo { width: 42px; }

@media (max-width: 575.98px) {
  .brand__logo { width: 27px; }
  .site-footer .brand__logo { width: 36px; }
}