/* ==========================================================================
   THE INFLUENCER TABLE — An Exclusive Creator Summit
   --------------------------------------------------------------------------
   Editorial two-tone: warm bone paper base, full-bleed ink panels for the
   hero and the format section. Asymmetric left-aligned grid, oversized
   Fraunces display, DM Mono for all metadata, one accent (Rolex green).

   Contents
     01. Design tokens
     02. Base
     03. Ambient layers (grain, cursor dot, scroll progress)
     04. Typography primitives
     05. Buttons
     06. Navbar + brand
     07. Hero
     08. Ticker
     09. About + stat band
     10. Roster (speakers)
     11. Format / agenda
     12. Invite
     13. Footer
     14. Motion utilities
     15. Responsive
     16. No-JS + reduced motion
   ========================================================================== */


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

  /* --- Surfaces --------------------------------------------------------- */
  --paper:               #EDEAE1;   /* main background — warm bone         */
  --paper-2:             #E5E1D6;   /* recessed band                       */
  --paper-3:             #DBD6C8;   /* hairline-adjacent fill              */
  --ink:                 #131510;   /* hero / format panels, primary text  */
  --ink-2:               #1B1E17;

  /* --- Text on paper ----------------------------------------------------
     Contrast vs --paper:
       --ink        #131510  ≈ 15.3:1  (AAA)
       --ink-soft   #4A4F45  ≈  7.0:1  (AAA)
       --ink-mute   #5F655A  ≈  5.0:1  (AA)
       --accent-ink #0A6B3A  ≈  5.5:1  (AA)
     -------------------------------------------------------------------- */
  --ink-soft:            #4A4F45;
  --ink-mute:            #5F655A;

  /* --- Text on ink ------------------------------------------------------
     Contrast vs --ink:
       --paper      #EDEAE1  ≈ 15.3:1  (AAA)
       --paper-dim  #A8AC9F  ≈  7.6:1  (AAA)
       --accent     #0FA255  ≈  5.5:1  (AA)
     -------------------------------------------------------------------- */
  --paper-dim:           #A8AC9F;

  /* --- Accent, two tones for two grounds ---------------------------------
     A single hex cannot clear contrast on both bone and near-black, so the
     accent has a light-ground variant and a dark-ground variant. Use
     --accent-ink on paper, --accent on ink. Never swap them.
     -------------------------------------------------------------------- */
  --accent:              #0FA255;   /* on ink   */
  --accent-ink:          #0A6B3A;   /* on paper */
  --accent-soft:         #45D389;   /* highlights on ink only */
  --accent-rgb:          15, 162, 85;
  --brand-grad:          linear-gradient(135deg, #0FA255, #04220F);

  /* --- Rules ------------------------------------------------------------ */
  --rule:                rgba(19, 21, 16, .18);
  --rule-soft:           rgba(19, 21, 16, .10);
  --rule-onink:          rgba(237, 234, 225, .16);
  --rule-onink-soft:     rgba(237, 234, 225, .09);

  /* --- Shadows (soft, never harsh) -------------------------------------- */
  --shadow-md:           0 18px 48px -20px rgba(19, 21, 16, .38);
  --shadow-lg:           0 40px 90px -34px rgba(19, 21, 16, .55);

  /* --- Type ------------------------------------------------------------- */
  --font-display:        "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:           "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:           "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-mono:             clamp(.63rem, .58rem + .16vw, .72rem);
  --fs-body:             clamp(.95rem, .91rem + .2vw, 1.02rem);
  --fs-lede:             clamp(1.08rem, .98rem + .48vw, 1.35rem);
  --fs-h2:               clamp(2.1rem, 1.25rem + 3.4vw, 4.5rem);
  --fs-h2-lg:            clamp(2.4rem, 1.35rem + 4.4vw, 5.5rem);
  --fs-h1:               clamp(2.9rem, 1.1rem + 7.4vw, 8rem);

  --ls-mono:             .18em;

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

  /* --- Motion: one signature curve everywhere --------------------------- */
  --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(--paper);
  color: var(--ink-soft);
  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;
}

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), .22); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--ink :focus-visible,
.hero :focus-visible { outline-color: var(--accent-soft); }

.skip-link {
  position: fixed;
  top: 10px; left: 50%;
  transform: translate(-50%, -170%);
  z-index: 2000;
  padding: .6rem 1.15rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform var(--dur-base) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }


/* ==========================================================================
   03. AMBIENT LAYERS
   ========================================================================== */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  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");
}

.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  z-index: 1900;
  border-radius: 50%;
  background: var(--accent-ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--ease),
              width 300ms var(--ease), height 300ms var(--ease),
              margin 300ms var(--ease), background-color 300ms var(--ease);
  will-change: transform;
}
.cursor-dot.is-on { opacity: 1; }
.cursor-dot.is-hover {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  background: rgba(var(--accent-rgb), .18);
}
/* over the dark panels the dot inverts so it stays visible */
.cursor-dot.is-onink { background: var(--accent-soft); }
.cursor-dot.is-onink.is-hover { background: rgba(var(--accent-rgb), .3); }

.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-ink);
  will-change: transform;
}


/* ==========================================================================
   04. TYPOGRAPHY PRIMITIVES
   ========================================================================== */

/* Mono eyebrow with an index number — the editorial spine of the page */
.eyebrow {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  margin: 0 0 var(--space-md);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  line-height: 1.5;
}
.eyebrow__idx {
  color: var(--accent-ink);
  font-weight: 500;
}
.eyebrow__idx::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin: 0 0 .28em .7rem;
  background: currentColor;
  vertical-align: middle;
}
.eyebrow--onink        { color: var(--paper); }
.eyebrow--onink .eyebrow__idx { color: var(--accent); }

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

.lede {
  margin: 0 0 var(--space-sm);
  color: var(--ink);
  font-size: var(--fs-lede);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -.008em;
}

.body-copy { margin: 0 0 var(--space-sm); color: var(--ink-soft); }
.body-copy--narrow { max-width: 46ch; }

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

/* Full-bleed ink panel */
.section--ink {
  background: var(--ink);
  color: var(--paper-dim);
}
.section--ink .body-copy { color: var(--paper-dim); }


/* ==========================================================================
   05. BUTTONS
   ========================================================================== */

/* Primary — ink pill on paper, inverts to accent on hover */
.btn-lux {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: 1.02rem 1.9rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-base) var(--ease),
              box-shadow var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
  will-change: transform;
}
.btn-lux--lg { padding: 1.2rem 2.4rem; font-size: .78rem; }

/* accent wipes in from the bottom */
.btn-lux::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent-ink);
  transform: translateY(101%);
  transition: transform var(--dur-slow) var(--ease);
}
.btn-lux__arrow {
  display: inline-block;
  transition: transform var(--dur-slow) var(--ease);
}
.btn-lux:hover,
.btn-lux:focus-visible { box-shadow: var(--shadow-md); }
.btn-lux:hover::before,
.btn-lux:focus-visible::before { transform: translateY(0); }
.btn-lux:hover .btn-lux__arrow,
.btn-lux:focus-visible .btn-lux__arrow { transform: translateX(5px); }
.btn-lux:active { transform: scale(.985); }

/* On the ink hero the pill starts light and wipes to accent */
.hero .btn-lux,
.section--ink .btn-lux { background: var(--paper); color: var(--ink); }
.hero .btn-lux::before,
.section--ink .btn-lux::before { background: var(--accent); }

/* Ghost — navbar */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .68rem;
  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(--ink);
  border-color: var(--ink);
  color: var(--paper);
}


/* ==========================================================================
   06. NAVBAR + BRAND
   ========================================================================== */
.site-nav {
  --nav-glass: 0;
  min-height: var(--nav-h);
  padding-block: .85rem;
  z-index: 1500;
  background: rgba(237, 234, 225, calc(var(--nav-glass) * .88));
  backdrop-filter: blur(calc(var(--nav-glass) * 16px));
  -webkit-backdrop-filter: blur(calc(var(--nav-glass) * 16px));
  border-bottom: 1px solid rgba(19, 21, 16, calc(var(--nav-glass) * .12));
  transition: padding var(--dur-slow) var(--ease),
              background-color 320ms var(--ease),
              backdrop-filter 320ms var(--ease),
              border-color 320ms var(--ease);
}
.site-nav.is-scrolled { padding-block: .5rem; }

/* Over the ink hero the bar contents are light; once past it they go dark. */
.site-nav .nav-link,
.site-nav .brand__text,
.site-nav .btn-ghost { color: var(--paper); }
.site-nav .btn-ghost { border-color: var(--rule-onink); }
.site-nav .nav-toggle__bar { background: var(--paper); }
.site-nav .brand__mark { border-color: rgba(var(--accent-rgb), .7); }

.site-nav.is-past-hero .nav-link,
.site-nav.is-past-hero .brand__text,
.site-nav.is-past-hero .btn-ghost { color: var(--ink); }
.site-nav.is-past-hero .btn-ghost { border-color: var(--rule); }
.site-nav.is-past-hero .nav-toggle__bar { background: var(--ink); }
.site-nav.is-past-hero .btn-ghost:hover { background: var(--ink); color: var(--paper); }

.site-nav .nav-link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem .1rem;
  margin-inline: 1rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .78;
  transition: opacity var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.site-nav .nav-link i {
  font-style: normal;
  font-size: .62rem;
  opacity: .55;
}
.site-nav .nav-link:hover { opacity: 1; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 0;
}
.brand__mark {
  width: 20px; height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  border: 1px solid var(--accent-ink);
  position: relative;
  transition: border-color var(--dur-base) var(--ease);
}
.brand__mark::after {
  content: "";
  position: absolute;
  inset: 5.5px;
  border-radius: 50%;
  background: var(--accent-ink);
  transition: background-color var(--dur-base) var(--ease);
}
.site-nav .brand__mark::after { background: var(--accent); }
.site-nav.is-past-hero .brand__mark { border-color: var(--accent-ink); }
.site-nav.is-past-hero .brand__mark::after { background: var(--accent-ink); }

.brand__text {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--ink);
}

/* Shine sweep. The 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 renders
   as invisible text rather than un-highlighted text. */
.shine {
  background-image: linear-gradient(100deg,
    currentColor 0%, currentColor 38%,
    var(--accent) 48%, var(--accent-soft) 52%, var(--accent) 56%,
    currentColor 66%, currentColor 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; }
}
.brand:hover .shine { animation-duration: 1.8s; }

.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;
  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(--paper);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: var(--shadow-md);
  }
  /* the open panel is always paper, so its contents are always ink */
  .site-nav .navbar-collapse .nav-link,
  .site-nav .navbar-collapse .btn-ghost { color: var(--ink); }
  .site-nav .navbar-collapse .btn-ghost { border-color: var(--rule); }
  .site-nav .nav-link { margin-inline: 0; padding-block: .6rem; }
}


/* ==========================================================================
   07. 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) + 3.5rem) 6rem;
  background: var(--ink);
  color: var(--paper-dim);
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.hero__wash {
  position: absolute;
  left: 50%; top: -25%;
  translate: -50% 0;
  width: 120vw; height: 110vh;
  background:
    radial-gradient(50% 42% at 50% 40%, rgba(var(--accent-rgb), .17) 0%, transparent 70%),
    radial-gradient(40% 35% at 82% 88%, rgba(var(--accent-rgb), .09) 0%, transparent 72%);
  filter: blur(30px);
  will-change: transform;
}
.hero__arcs {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 18%, #000 62%, transparent 98%);
          mask-image: linear-gradient(180deg, transparent 18%, #000 62%, transparent 98%);
  will-change: transform;
}
.hero__arcs svg { width: 100%; height: 100%; display: block; }

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

.hero__title {
  margin: 0 0 clamp(2.5rem, 1.5rem + 4vw, 5rem);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.038em;
  text-wrap: balance;

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

/* The gradient must be declared on the split spans too: 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 visibly restart 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, #C9F5DC 0%, var(--accent-soft) 50%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

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

.hero__foot { align-items: end; }

/* Definition-list of event facts, mono, hairline separated */
.factlist { border-top: 1px solid var(--rule-onink); }
.factlist__row {
  padding: .8rem 0;
  border-bottom: 1px solid var(--rule-onink-soft);
}
.factlist dt {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}
.factlist dd {
  color: var(--paper);
  font-size: .96rem;
  font-weight: 300;
}

/* Rotated "sticker" — the small funky flourish, used exactly once */
.stamp {
  display: inline-block;
  margin-left: .5rem;
  padding: .12rem .5rem .18rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  rotate: -4deg;
  vertical-align: middle;
}

.scroll-cue {
  position: absolute;
  left: max(1.5rem, calc((100vw - 1320px) / 2 + .75rem));
  bottom: 1.6rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--paper-dim);
  transition: color var(--dur-base) var(--ease);
}
.scroll-cue:hover { color: var(--accent-soft); }
.scroll-cue__label {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.scroll-cue__line {
  position: relative;
  display: block;
  width: 64px; height: 1px;
  overflow: hidden;
  background: var(--rule-onink);
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 40%; height: 100%;
  background: var(--accent);
  animation: cue-travel 2.8s var(--ease-inout) infinite;
}
@keyframes cue-travel {
  0%        { transform: translateX(-100%); }
  60%, 100% { transform: translateX(250%); }
}


/* ==========================================================================
   08. TICKER
   ========================================================================== */
.ticker {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: .85rem 0;
  background: var(--brand-grad);
  color: var(--paper);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-run 46s linear infinite;
  will-change: transform;
}
.ticker__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.ticker__group span {
  padding: 0 1.5rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker__group i {
  font-style: normal;
  font-size: .55rem;
  opacity: .6;
}
@keyframes ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker:hover .ticker__track { animation-play-state: paused; }


/* ==========================================================================
   09. ABOUT + STAT BAND
   ========================================================================== */
.statband {
  margin-top: clamp(3rem, 2rem + 4vw, 6rem);
  border-top: 1px solid var(--rule);
}
.statband__cell {
  /* flex column + margin-top:auto on the label keeps every label on the same
     baseline, even though the "Open Air" cell's display type is shorter than
     the numerals */
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem) clamp(.75rem, 2vw, 1.75rem) clamp(1.2rem, 1rem + 1vw, 1.9rem) 0;
  border-bottom: 1px solid var(--rule);
}
.statband__cell + .statband__cell { border-left: 1px solid var(--rule); }
.statband__cell + .statband__cell { padding-left: clamp(1rem, 2vw, 1.75rem); }

.statband__num {
  margin: 0 0 .5rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.statband__num--word {
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.statband__num--word em { font-style: italic; color: var(--accent-ink); }

.statband__label {
  margin: auto 0 0;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  line-height: 1.5;
}


/* ==========================================================================
   10. ROSTER (SPEAKERS)
   ========================================================================== */
.section--roster { background: var(--paper-2); }

.roster {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  border-top: 1px solid var(--rule);
}

.roster__row {
  position: relative;
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.1rem, .8rem + 1vw, 1.65rem) 0;
  transition: background-color var(--dur-slow) var(--ease),
              padding-left var(--dur-slow) var(--ease);
}
/* accent hairline that draws in from the left on hover */
.roster__row::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--accent-ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-slow) var(--ease);
}
.roster__row:hover,
.roster__row:focus-within { padding-left: clamp(.5rem, 1.4vw, 1.25rem); }
.roster__row:hover::after,
.roster__row:focus-within::after { transform: scaleX(1); }

.roster__idx {
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .1em;
  transition: color var(--dur-base) var(--ease);
}
.roster__row:hover .roster__idx { color: var(--accent-ink); }

.roster__id { display: flex; align-items: center; gap: .9rem; }

.roster__thumb {
  width: 46px; height: 55px;
  flex: 0 0 46px;
  object-fit: cover;
  border-radius: 2px;
  filter: grayscale(1) contrast(1.02);
}

.roster__name {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.022em;
  transition: color var(--dur-base) var(--ease);
}
.roster__row:hover .roster__name { color: var(--accent-ink); }

.roster__role {
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 300;
}
.roster__tag {
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

.roster__social ul { display: flex; gap: .45rem; justify-content: flex-end; }
.roster__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--rule-soft);
  border-radius: 50%;
  color: var(--ink-mute);
  transition: color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              background-color var(--dur-base) var(--ease);
}
.roster__social svg { width: 14px; height: 14px; }
.roster__social a:hover,
.roster__social a:focus-visible {
  color: var(--paper);
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

/* Floating portrait that follows the cursor across the roster */
.roster-preview {
  position: fixed;
  top: 0; left: 0;
  width: 230px;
  aspect-ratio: 5 / 6;
  /* vertical centring only — the horizontal offset is applied in JS so the
     portrait sits beside the cursor rather than on top of the name */
  margin: -138px 0 0 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms var(--ease);
  will-change: transform;
}
.roster-preview.is-on { opacity: 1; }
.roster-preview img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: scale(.94);
  transition: opacity 420ms var(--ease), transform 620ms var(--ease);
}
.roster-preview img.is-active { opacity: 1; transform: scale(1); }

.roster__note {
  margin: var(--space-lg) 0 0;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}


/* ==========================================================================
   11. FORMAT / AGENDA
   ========================================================================== */
.agenda {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-top: 1px solid var(--rule-onink);
}
.agenda__row {
  padding: clamp(1.15rem, .85rem + 1vw, 1.75rem) 0;
  border-bottom: 1px solid var(--rule-onink-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-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.agenda__title {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .95rem + .55vw, 1.5rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.015em;
}
.agenda__note {
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}
@media (min-width: 768px)   { .agenda__note { text-align: right; } }
@media (max-width: 767.98px) { .agenda__note { margin-top: .55rem; } }


/* ==========================================================================
   12. INVITE
   ========================================================================== */
.section--invite { background: var(--paper); }
.invite-fine {
  margin: var(--space-md) 0 0;
  color: var(--ink-mute);
  font-size: .86rem;
}
.invite-fine a {
  color: var(--ink);
  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-ink); border-color: var(--accent-ink); }


/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 2;
  padding: var(--space-xl) 0 var(--space-md);
  background: var(--ink);
  color: var(--paper-dim);
}
.site-footer .brand__text { color: var(--paper); }
.site-footer .brand__mark { border-color: var(--accent); }
.site-footer .brand__mark::after { background: var(--accent); }
.brand--footer { margin-bottom: var(--space-sm); }

.footer-copy { margin: 0; color: var(--paper-dim); font-size: .88rem; line-height: 1.7; }

.footer-head {
  margin: 0 0 .9rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}
.footer-list li { margin-bottom: .5rem; }
.footer-list a {
  color: var(--paper-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-soft); }

.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-onink);
  border-radius: 50%;
  color: var(--paper-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-soft);
  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-onink-soft);
}
.footer-base p {
  margin: 0;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
}
.footer-base a:hover { color: var(--accent-soft); }


/* ==========================================================================
   14. MOTION UTILITIES
   ========================================================================== */

/* Hero split text: per-word mask reveal.
   The mask needs overflow:hidden, but that clips horizontally too — and
   italic serif glyphs (the J of "Just") overhang their advance width, so
   they lose their left edge. Padding gives the glyph room inside the box;
   the negative margin cancels it so word spacing is 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(22px);
  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: clip wipe + blur-to-focus.
   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 a heading clipped this way
   could never trigger its own reveal. Opacity does not affect intersection,
   so the outer element can still be hidden from the first paint. */
.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 */
[data-stagger] > .roster__row,
[data-stagger] > .agenda__row,
[data-stagger] > .statband__cell {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 850ms var(--ease), transform 850ms var(--ease);
  will-change: transform, opacity;
}
[data-stagger] > .roster__row.is-in,
[data-stagger] > .agenda__row.is-in,
[data-stagger] > .statband__cell.is-in { opacity: 1; transform: none; }


/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 1199.98px) {
  .roster__thumb { width: 40px; height: 48px; flex-basis: 40px; }
}

@media (max-width: 991.98px) {
  :root { --nav-h: 66px; }

  .hero { padding-block: calc(var(--nav-h) + 2.5rem) 5.5rem; }
  .hero__foot { margin-top: 1rem; }
  .factlist { margin-top: 1.5rem; }

  .roster-preview, .cursor-dot { display: none; }

  /* roster rows reflow into a stacked block */
  .roster__row { padding-block: 1.15rem; }
  .roster__role { margin-top: .5rem; }
  .roster__tag  { margin-top: .5rem; text-align: right; }
  .roster__social { margin-top: .75rem; }
  .roster__social ul { justify-content: flex-start; }
  .roster__row:hover { padding-left: 0; }
}

@media (max-width: 767.98px) {
  .hero__cta .btn-lux { width: 100%; justify-content: space-between; }
  .agenda__row:hover { padding-left: 0; }
  .scroll-cue { display: none; }

  .statband__cell:nth-child(odd)  { padding-left: 0; border-left: 0; }
  .statband__cell:nth-child(even) { padding-left: 1rem; }
}

@media (max-width: 575.98px) {
  :root { --section-y: 4rem; }
  .brand__text { font-size: .68rem; letter-spacing: .18em; }
  .roster__idx { display: none; }
  .roster__id  { width: 100%; }
}

@media (hover: none) {
  .roster-preview, .cursor-dot { display: none; }
  .roster__row:hover { padding-left: 0; }
}


/* ==========================================================================
   16. NO-JS + REDUCED MOTION
   ========================================================================== */

/* Every hidden-then-revealed element depends on main.js. With scripting off
   the page must still read normally. css/no-js.css (loaded from <noscript>)
   covers browsers without the `scripting` media feature. */
@media (scripting: none) {
  .reveal, .reveal-mask, .hero__title,
  [data-hero-step],
  [data-stagger] > .roster__row,
  [data-stagger] > .agenda__row,
  [data-stagger] > .statband__cell {
    opacity: 1;
    transform: none;
  }
  .reveal-mask__inner { filter: none; clip-path: none; transform: none; }
  .roster-preview, .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;
  }

  .reveal, .reveal-mask, .hero__title,
  [data-hero-step],
  [data-stagger] > .roster__row,
  [data-stagger] > .agenda__row,
  [data-stagger] > .statband__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: currentColor;
  }

  .ticker__track { animation: none; }
  .roster-preview, .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; }
}

/* v2 only: the bar flips from ink-hero to paper, so the mark must
   un-invert with it or it turns into a white shape on bone. */
.site-nav.is-past-hero .brand__logo { filter: none; opacity: .85; }
.site-nav.is-past-hero .brand:hover .brand__logo { opacity: 1; }