/* ==========================================================================
   Translating Rejuvenation — shared styles
   Tokens mirror the Figma "Events" file (node 1810:1570 / 1815:2358 / 1815:2772)
   ========================================================================== */

@font-face{font-family:'Elza';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/elza-300.woff2') format('woff2')}
@font-face{font-family:'Elza';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/elza-400.woff2') format('woff2')}
@font-face{font-family:'Elza';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/elza-500.woff2') format('woff2')}

:root{
  color-scheme:light;

  /* ground */
  --page:#FDFBF8;
  --surface:#FBF6ED;
  --subtle:#F4EFE7;
  --dark:#3C2708;
  --portrait-bg:#060F11;

  /* ink */
  --ink:#3C2708;
  --ink-2:#66430D;
  --brown-700:#4E3A20;
  --gold:#A67E41;
  --warm-2:#938070;
  --warm-3:#73695C;
  --nav-ink:#6D6D6D;
  --gold-link:#905E12;
  --ink-strong:#1F1F1F;
  --on-dark:#FFFFFF;
  --on-dark-dim:#D5C9B2;

  /* lines */
  --line:#DDCDB6;
  --line-soft:#EFE6D6;
  --hairline:rgba(60,39,8,.10);

  /* gradients */
  --grad-chip:linear-gradient(161deg,#32302D 20%,#65615D 41%,#9B948B 66%,#7B7670 87%);
  --grad-panel:linear-gradient(129deg,#32302D 7%,#77726A 42%,#80786E 70%,#B9AFA3 90%,#574F44 102%);
  --grad-gold:linear-gradient(175deg,#F4F1AA 14%,#FFEBCC 45%,#E4BB7B 96%);

  /* metrics */
  --maxw:1300px;
  --pad:clamp(16px,3.89vw,56px);
  --radius:16px;
  --nav-h:52px;
  --portrait-w:clamp(57.6px,6.64vw,96px);
  --portrait-gap:clamp(11.2px,1.36vw,19.2px);
  --spk-tail-w:clamp(144px,18.88vw,272px);
  /* Width of the right-hand column on every agenda row, so all the portraits
     land on one vertical line instead of tracking each speaker's name length.
     Sized to the widest occupant — the four-up drug-reveal panel. */
  --who-col:calc(4 * clamp(51.2px,5.52vw,80px) + 3 * clamp(8px,1.12vw,16px));

  --sans:'Elza','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  background:var(--page);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
/* height:auto is load-bearing: without it an element's HTML height attribute
   applies as a presentational hint, and any box relying on aspect-ratio to
   derive its height gets stretched to that attribute instead. */
img,svg{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink-2);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:calc(var(--maxw) + var(--pad) * 2);margin-inline:auto;padding-inline:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- inline links ------------------------------------------------------- */
.spk-links{display:flex;flex-wrap:wrap;gap:18px}
.link-gold{
  display:inline-flex;align-items:center;gap:.45em;font-weight:500;
  /* small body, the same step as .spk-bio and .spk-more — it was on the
     label/legal step (12.8px) with the chips and the footer copyright, which
     read as a caption rather than as the way through to the speakers page. */
  font-size:clamp(12px,1.12vw,16px);color:var(--gold);transition:color .18s,gap .18s;
}
.link-gold:hover{color:var(--ink-2);gap:.7em}

/* --- arrows ------------------------------------------------------------- */
/* Geometry taken from the Figma ArrowRight / ArrowDown components. */
.icon-arrow{width:1em;height:1em;flex:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;fill:none}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;
  background:rgba(253,251,248,.55);
  backdrop-filter:blur(24px) saturate(170%);
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.nav.is-scrolled{
  background:rgba(253,251,248,.86);
  border-bottom-color:var(--line-soft);
  box-shadow:0 4px 24px rgba(60,39,8,.05);
}
/* agenda: opaque white nav, no translucency (the sticky jump bar parks
   directly beneath it, so a see-through nav read as muddy there) */
.page-agenda .nav,
.page-agenda .nav.is-scrolled{
  background:#FFFFFF;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav-h)}
.nav-logo{display:flex;align-items:center;flex:none}
.nav-logo img{width:16px;height:26px}
.nav-links{display:flex;align-items:center;gap:clamp(8px,1.12vw,12.8px)}
.nav-link{
  font-size:clamp(13px,.97vw,14px);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--nav-ink);padding:6px 4px;transition:color .18s;
}
.nav-link:hover{color:var(--ink)}
.nav-link[aria-current="page"]{color:var(--ink)}
/* tighter than the default .btn padding: in the bar it sits beside plain text
   links, so it reads as a nav item rather than a page-level CTA */
.nav-links .btn{padding:6px 20px}

.nav-toggle{display:none;position:relative;width:40px;height:40px;margin-right:-8px}
.nav-toggle span{
  position:absolute;left:11px;width:18px;height:1.5px;border-radius:2px;
  background:var(--ink);
  transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .16s linear;
}
.nav-toggle span:nth-child(1){top:14px}
.nav-toggle span:nth-child(2){top:19.25px}
.nav-toggle span:nth-child(3){top:24.5px}
/* the outer bars meet in the middle (5.25px travel) and cross */
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.25px) rotate(-45deg)}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:500;letter-spacing:.02em;white-space:nowrap;
  border:1px solid transparent;border-radius:200px;
  padding:8px 26px;font-size:clamp(13px,.97vw,14px);
  transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s;
}
.btn-primary{background:var(--dark);color:var(--on-dark)}
.btn-primary:hover{background:#2C1C05;transform:translateY(-1px);box-shadow:0 8px 22px -12px rgba(60,39,8,.6)}
.btn-cream{background:var(--subtle);color:#1F1F1F}
.btn-cream:hover{background:#FFF;transform:translateY(-1px)}
/* Frosted rather than merely outlined: at .2 the fill vanished against the
   cream hero and the button read as a floating border. The fill is kept below
   ~.4 on purpose — above that it hides the backdrop entirely and the blur
   stops being visible at any radius. A short 8px radius: the backdrop here is
   already soft, so a wide one only smears the syringe behind the button.
   The blur also depends on no ancestor of the button being animated — see the
   hero entrance note below, where backdrop-filter and animation collide. */
.btn-outline{
  background:rgba(255,255,255,.38);
  backdrop-filter:blur(8px) saturate(150%);
  -webkit-backdrop-filter:blur(8px) saturate(150%);
  color:var(--ink-2);border-color:var(--line);
}
.btn-outline:hover{background:rgba(255,255,255,.62);border-color:var(--gold);transform:translateY(-1px)}
.btn-lg{padding:clamp(11.2px,1.12vw,16px) clamp(22.4px,2.24vw,32px);font-size:clamp(12.8px,1.12vw,16px)}
.btn .icon-arrow{width:.85em;height:.85em}

/* ==========================================================================
   TYPE PRIMITIVES
   ========================================================================== */
.eyebrow{
  font-size:clamp(12px,1vw,14px);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--warm-2);
}
.page-kicker{font-size:clamp(16px,1.76vw,25.6px);font-weight:400;line-height:1.3;color:var(--ink);opacity:.9}
.page-title{
  font-size:clamp(25.6px,3.12vw,44.8px);font-weight:400;line-height:1.07;letter-spacing:-.01em;
  color:var(--ink);max-width:674px;
}
.page-head{
  padding-top:calc(var(--nav-h) + clamp(38.4px,5.6vw,89.6px));
  padding-bottom:clamp(44px,5.6vw,84px);
  text-align:center;position:relative;
}
.page-head .page-kicker{margin-bottom:clamp(14px,1.15vw,18px)}
.page-head .page-title{margin-inline:auto}
/* each clause is an inline-block, so the headline breaks between clauses
   rather than mid-phrase at any width */
.page-title.clauses > span{display:inline-block}
.page-note{
  font-size:clamp(13px,1.15vw,16px);line-height:1.4;color:var(--warm-3);
  margin-top:clamp(10px,1.1vw,16px);
}

/* soft iridescent wash reused behind interior page heads */
.wash{position:relative;isolation:isolate}
.wash::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(194deg,#FFF 58%,#FAF7F2 80%),
    url('../img/hero-bg.jpg') right top / cover no-repeat;
  background-blend-mode:normal;
  mask-image:linear-gradient(#000 55%,transparent);
  -webkit-mask-image:linear-gradient(#000 55%,transparent);
}

/* ==========================================================================
   HERO (home)
   ========================================================================== */
.hero{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(194deg,#FFFFFF 58%,#FAF7F2 80%)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url('../img/hero-bg.jpg') center right / cover no-repeat;
  opacity:.9;
}
.hero-syringe{
  position:absolute;z-index:-1;pointer-events:none;
  left:50%;bottom:-8%;
  width:clamp(240px,30.4vw,416px);height:auto;
  transform:translateX(-30%) rotate(14deg);
  opacity:.8;
  mask-image:linear-gradient(#000 58%,transparent 94%);
  -webkit-mask-image:linear-gradient(#000 58%,transparent 94%);
}
.hero-inner{
  position:relative;text-align:center;
  padding-top:calc(var(--nav-h) + clamp(51.2px,9.6vw,144px));
  padding-bottom:clamp(57.6px,8vw,134.4px);
}
.hero-eyebrow{font-size:clamp(14.4px,1.76vw,25.6px);font-weight:400;line-height:1.3;color:var(--ink);opacity:.9}
.hero h1{
  font-size:clamp(27.2px,3.68vw,51.2px);font-weight:400;line-height:1.04;letter-spacing:-.01em;
  color:var(--ink);margin-top:clamp(8px,1vw,14.4px);
}
.hero-meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(8px,1vw,13.6px);
  font-size:clamp(12px,1.12vw,16px);color:var(--ink);opacity:.9;
  margin-top:clamp(11.2px,1.6vw,24px);
}
.hero-lede{
  margin-top:clamp(16px,2.72vw,41.6px);
  font-size:clamp(12px,1.36vw,19.2px);line-height:1.5;color:var(--ink-2);opacity:.92;
  display:flex;flex-direction:column;align-items:center;gap:.1em;
}
.hero-lede > span{max-width:min(100%,44em)}
.hero-lede a{
  display:inline-flex;align-items:center;gap:.4em;color:var(--ink-2);
  border-bottom:1px solid rgba(102,67,13,.28);transition:color .18s,border-color .18s;
}
.hero-lede a:hover{color:var(--gold);border-color:var(--gold)}
.hero-count{margin-top:clamp(17px,2.2vw,32px);display:flex;justify-content:center}
/* One max-content column shared by the chip, the insider link and the button:
   the track is as wide as the widest of them — the countdown chip — so the
   View Agenda button below lines up to exactly the chip's width. */
.hero-actions{display:grid;grid-template-columns:max-content;justify-content:center}
.hero-count,.hero-insider,.hero-cta{width:100%}
.hero-insider{margin-top:clamp(12px,1.4vw,20px);display:flex;justify-content:center}
.hero-insider a{
  display:inline-flex;align-items:center;gap:.4em;
  font-size:clamp(13px,1.04vw,15px);font-weight:500;color:var(--ink-2);
  border-bottom:1px solid rgba(102,67,13,.3);
  transition:color .18s,border-color .18s,gap .18s;
}
.hero-insider a:hover{color:var(--gold);border-bottom-color:var(--gold);gap:.6em}
.hero-insider .icon-arrow{width:.9em;height:.9em}
/* wider gap here than anywhere else in the hero: it separates the two info
   lines above from the actions below */
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(40px,5.2vw,76px)}
/* No font-size override: the 14px cap here was for the old two-button row and
   left the single CTA smaller than its own .btn-lg step. The padding stays
   trimmed because the button is chip-width rather than shrink-to-fit. */
.hero-cta .btn{
  width:100%;
  padding:clamp(9px,.9vw,13px) clamp(18px,1.8vw,26px);
}

/* Hero entrance. Each keyframe declares only `from`, so every element animates
   to its OWN resting opacity and transform — the eyebrow settles at .9, the
   syringe at .8 (and .7 under 860px), and the syringe keeps its
   translateX/rotate — instead of this block flattening them all to 1/none. */
@keyframes hero-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes hero-syringe-rise{from{opacity:0;transform:translateX(-30%) rotate(14deg) translateY(36px)}}

/* The CTA is animated on the button itself, not on .hero-cta around it. A
   running animation makes its element a composited group, and a group has an
   empty backdrop, so backdrop-filter is suppressed for the length of the
   animation — on the button while it plays, or on everything inside .hero-cta
   for good if the wrapper is what animates. Animating the button keeps the
   suppression to its own 1.0–2.2s window, which lands before the syringe
   behind it has faded in (1.18–2.98s): the backdrop there is still flat cream,
   where blur measures ≤1 of 255 either way. So the frost has nothing to show
   yet and switches on invisibly. Don't move this back to .hero-cta. */
.hero-eyebrow,.hero h1,.hero-meta,.hero-count,.hero-insider,.hero-cta .btn{
  animation:hero-rise 1.2s cubic-bezier(.16,1,.3,1) both;
}
/* The invitation line, the title, and the date/place read as one unit, so they
   arrive on a tight ~120ms beat. Then a longer pause before the countdown,
   which starts the second thought — and a shorter one again to the buttons.
   The chip inherits the lede's old beat, since it now occupies that slot. */
.hero-eyebrow{animation-delay:.06s}
.hero h1{animation-delay:.18s}
.hero-meta{animation-delay:.30s}
.hero-count{animation-delay:.62s}
.hero-insider{animation-delay:.80s}
.hero-cta .btn{animation-delay:1.00s}
/* Held back until the countdown is in, then slower and further than the copy,
   so the art drifts up underneath it rather than racing it. */
.hero-syringe{animation:hero-syringe-rise 1.8s cubic-bezier(.16,1,.3,1) 1.18s both}

/* The global reduce rule (top of file) zeroes animation-duration but not
   animation-delay, which would leave the hero blank for ~1s before snapping
   in. Drop the stagger too so the section is simply there. */
@media (prefers-reduced-motion:reduce){
  .hero-eyebrow,.hero h1,.hero-meta,.hero-count,.hero-insider,.hero-cta .btn,.hero-syringe{animation-delay:0s!important}
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{padding-block:clamp(38.4px,5vw,72px)}
.section-head{margin-bottom:clamp(16px,1.76vw,25.6px)}
.divider{height:1px;background:var(--hairline);border:0;margin-block:clamp(32px,4.4vw,64px)}

/* --- featured speaker cards (home) ------------------------------------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-card{
  background:var(--surface);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .22s,box-shadow .22s;
}
.feature-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(60,39,8,.35)}
.feature-card:hover h3{color:var(--ink-2)}
.feature-card h3{transition:color .18s}
.feature-card .shot{aspect-ratio:420/400;background:var(--portrait-bg);overflow:hidden}
.feature-card .shot img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover){
  .feature-card:hover .shot img{transform:scale(1.045)}
  .feature-card:hover .meta{background:#FFFDF9}
}
.feature-card .meta{transition:background .25s ease}
.feature-card .meta{padding:clamp(12.8px,1.36vw,19.2px);display:flex;flex-direction:column;gap:clamp(6.4px,0.68vw,9.6px)}
.feature-card h3{font-size:clamp(16px,1.76vw,25.6px);font-weight:500;letter-spacing:.02em;line-height:1.1;color:var(--ink)}
.feature-card p{font-size:clamp(12px,1vw,14.4px);font-weight:400;line-height:1.2;color:var(--gold)}

/* --- One Generation ---------------------------------------------------- */
.launch{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:clamp(22.4px,3.2vw,48px);align-items:center}
.launch-body{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,1.76vw,25.6px)}
.launch-body .stack{display:flex;flex-direction:column;gap:clamp(8px,0.88vw,12.8px)}
.launch-body h2{font-size:clamp(25px,2.9vw,42px);font-weight:400;line-height:1.05;letter-spacing:-.01em;color:var(--ink)}
.launch-body .lede{font-size:clamp(12.8px,1.24vw,17.6px);line-height:1.32;letter-spacing:.02em;color:var(--warm-3);max-width:490px}
.launch-media{
  background:var(--surface);border-radius:19px;overflow:hidden;
  aspect-ratio:1;position:relative;isolation:isolate;
}
/* faint iridescent wash behind the reveal, as in the Figma card */
.launch-media::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url('../img/hero-bg.jpg') center / 180% no-repeat;
  opacity:.55;transform:scaleX(-1);
}
/* crop values taken from the Figma "Drug Reveal" frame (node 1811:2180) */
.launch-media img{
  position:absolute;left:-69.7%;top:-9.3%;
  width:207%;height:auto;max-width:none;
}

/* --- location page (Figma node 1812:2218) ------------------------------- */
.venue-hero{
  display:grid;align-items:center;
  min-height:clamp(384px,48vw,688px);
  padding-top:var(--nav-h);
  padding-block-end:clamp(19.2px,2.4vw,38.4px);
}
.venue-grid{
  display:grid;grid-template-columns:minmax(0,418px) minmax(0,447px);
  justify-content:space-between;align-items:center;
  gap:clamp(25.6px,9.44vw,136px);
}
.venue-body{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(16px,1.76vw,25.6px);padding-block:24px;
}
.venue-body .stack{display:flex;flex-direction:column;gap:clamp(6.4px,0.68vw,9.6px)}
.venue-eyebrow{
  font-size:clamp(12px,1vw,14px);font-weight:500;line-height:1.2;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-link);
}
.venue-body h1{
  font-size:clamp(24px,2.48vw,35.2px);font-weight:400;line-height:1.14;letter-spacing:-.01em;
  color:var(--ink-strong);
}
.venue-body .where{font-size:clamp(13.6px,1.36vw,19.2px);line-height:1.2;letter-spacing:.01em;color:var(--ink-strong)}
.venue-body .lede{font-size:clamp(13px,1.04vw,15px);line-height:1.3;letter-spacing:.01em;color:var(--warm-3)}
.venue-photo{border-radius:19px;overflow:hidden;aspect-ratio:559/401;background:var(--surface)}
.venue-photo img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   CHIPS
   ========================================================================== */
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 7px;border-radius:4px;background-image:var(--grad-chip);
  font-size:clamp(12px,.83vw,12px);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
}
/* Drug reveal panel chip: a filled chip like FEATURED, one step larger
   (Figma node 1906:16728 — gradient is the background, text is plain white) */
.chip-panel{
  align-self:flex-start;
  font-size:clamp(12px,1.25vw,18px);letter-spacing:.03em;
  background-image:linear-gradient(170deg,#32302D 20%,#65615D 41%,#9B948B 66%,#7B7670 87%);
  color:#fff;-webkit-background-clip:border-box;background-clip:border-box;
}

.chip-count{
  font-size:clamp(13px,1.25vw,18px);letter-spacing:.06em;
  padding:clamp(6px,.68vw,10px) clamp(12px,1.35vw,19px);border-radius:6px;
  /* tabular figures so the seconds don't jitter the chip's width */
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.chip-count.is-live{background-image:none;background:var(--dark)}

/* ==========================================================================
   ROW CARDS (speakers list + agenda list)
   ========================================================================== */
.cards{display:flex;flex-direction:column;gap:20px}
.card{background:var(--surface);border:1px solid transparent;border-radius:var(--radius);overflow:hidden}
.spk-panel{scroll-margin-top:calc(var(--nav-h) + 24px)}
.card-plain{background:transparent;border-color:var(--line)}

.portrait{
  display:block;
  width:var(--portrait-w);aspect-ratio:1;flex:none;
  border-radius:12px;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,#FAFAFA 56%,#E1DCD3 100%);
}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top}
.portrait-sm{width:clamp(51.2px,5.52vw,80px)}

/* --- speaker accordion row --------------------------------------------- */
.spk{width:100%;text-align:left;display:block}
.spk-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(12.8px,1.6vw,19.2px);
  width:100%;padding:clamp(12.8px,1.36vw,19.2px);
}
.spk-id{display:flex;align-items:stretch;gap:var(--portrait-gap);min-width:0}
/* Figma stretches this column to the portrait height: chip pinned top, name bottom. */
.spk-name{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  gap:clamp(4.8px,0.64vw,9.6px);min-width:0;
}
.spk-name:has(.chip){justify-content:space-between}
.spk-title{display:block;font-size:clamp(13.6px,1.56vw,22.4px);font-weight:500;letter-spacing:.02em;line-height:1.15;color:var(--ink)}
.spk-role{
  font-size:clamp(12px,1vw,14.4px);line-height:1.2;color:var(--gold);
  width:calc(var(--spk-tail-w) - clamp(24px,2.64vw,38.4px) - clamp(8px,0.88vw,12.8px));
  flex:none;text-align:left;
}
.spk-tail{display:flex;align-items:flex-end;gap:clamp(8px,0.88vw,12.8px)}
.spk-chev{
  width:clamp(24px,2.64vw,38.4px);height:clamp(24px,2.64vw,38.4px);flex:none;
  color:var(--ink-2);transition:transform .28s ease,color .18s;
}
.spk[aria-expanded="true"] .spk-chev{transform:rotate(180deg)}
.spk:hover .spk-chev{color:var(--gold)}

.spk-panel{display:grid;grid-template-rows:0fr}
.spk-panel[data-open]{grid-template-rows:1fr}
.spk-panel[data-open] .spk-panel-in{opacity:1;transform:none}
.spk-panel > div{overflow:hidden}

/* Expanded body (Figma node 1815:2597): indented past the portrait so the bio
   lines up with the name, with "More Details" under the role/arrow column. */
.spk-panel-in{
  opacity:0;transform:translateY(-6px);
  transition:opacity .26s ease,transform .26s ease;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12.8px,1.6vw,19.2px);
  padding:clamp(14.4px,1.6vw,19.2px) clamp(12.8px,1.36vw,19.2px) clamp(16px,1.76vw,25.6px);
  padding-left:calc(clamp(12.8px,1.36vw,19.2px) + var(--portrait-w) + var(--portrait-gap));
}
.spk-info{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(6.4px,0.68vw,9.6px);min-width:0}
.spk-bio{
  font-size:clamp(12px,1.12vw,16px);line-height:1.3;color:var(--warm-3);
  max-width:406px;
}
.spk-talk{
  align-self:flex-start;
  background:var(--line);color:var(--brown-700);
  font-size:clamp(12px,.83vw,12px);font-weight:500;letter-spacing:.03em;line-height:1.25;
  padding:7px;border-radius:5px;
}
.spk-more-col{width:var(--spk-tail-w);flex:none;display:flex;align-items:center}
.spk-more{
  font-size:clamp(12px,1.12vw,16px);line-height:1.3;color:var(--ink-2);
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.spk-more:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* ==========================================================================
   AGENDA
   ========================================================================== */
.jump-sentinel{height:1px;margin-bottom:-1px}

/* Session jump bar: sticks under the fixed nav so the other session stays
   reachable while you read. Not tabs — both sessions are always on the page. */
.jumpbar{
  position:sticky;top:calc(var(--nav-h) - 1px);z-index:40;
  padding-block:clamp(10px,1.1vw,14px);
  background:rgba(253,251,248,.88);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:border-color .25s,box-shadow .25s;
}
.jumpbar.is-stuck{border-bottom-color:var(--line-soft);box-shadow:0 4px 18px rgba(60,39,8,.05)}
.tabs{display:inline-flex;gap:8px;flex-wrap:wrap}
.tab{
  padding:8px clamp(14.4px,1.76vw,25.6px);border-radius:8px;
  font-size:clamp(12px,1.12vw,16px);font-weight:500;letter-spacing:.02em;
  background:var(--subtle);color:var(--warm-2);
  transition:background .18s,color .18s;
}
.tab:hover{color:var(--ink-2)}
.tab[aria-current="true"]{background:var(--dark);color:var(--on-dark)}

/* clear the fixed nav + the sticky bar when an anchor jump lands */
.session{scroll-margin-top:calc(var(--nav-h) + 72px)}
.session + .session{margin-top:clamp(28px,3.2vw,48px)}
.session-title{
  font-size:clamp(12px,1vw,14px);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--warm-2);margin-bottom:clamp(12px,1.3vw,18px);
}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:clamp(25.6px,3.2vw,44.8px)}
.feat-card{
  background:var(--surface);border-radius:var(--radius);
  padding:clamp(16px,1.76vw,25.6px);
  display:flex;flex-direction:column;gap:clamp(16px,1.76vw,25.6px);
  transition:transform .22s,box-shadow .22s;
}
.feat-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(60,39,8,.35)}
.feat-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.feat-time{font-size:clamp(12px,1.2vw,17.6px);font-weight:500;color:var(--brown-700);white-space:nowrap}
.feat-title{font-size:clamp(17px,1.32vw,19.2px);line-height:1.25;color:var(--gold);flex:1;
  text-wrap:pretty;text-wrap:balance}
.feat-who{display:flex;align-items:flex-end;gap:16px;margin-top:auto}
.feat-who h3{font-size:clamp(12.8px,1.32vw,19.2px);font-weight:500;letter-spacing:.02em;color:var(--ink)}

.slot{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(12.8px,1.92vw,25.6px);
  padding:clamp(12.8px,1.36vw,19.2px);
}
.slot-info{display:flex;flex-direction:column;gap:clamp(6.4px,0.68vw,9.6px);min-width:0;flex:1;
  align-self:stretch;justify-content:space-between}
.slot-time{font-size:clamp(12px,1.2vw,17.6px);font-weight:500;color:var(--brown-700);white-space:nowrap}
.slot-title{font-size:clamp(17px,1.32vw,19.2px);line-height:1.25;color:var(--gold);
  text-wrap:pretty;text-wrap:balance}
.slot-title > span,.feat-title > span{display:inline-block}
.slot-who{display:flex;align-items:flex-end;gap:var(--portrait-gap);flex:0 0 var(--who-col);justify-content:flex-start}
/* min-width:0 so a long name wraps inside the fixed column instead of pushing
   the portrait out of alignment. */
.slot-who .txt{display:flex;flex-direction:column;gap:clamp(4.8px,0.68vw,9.6px);align-items:flex-start;min-width:0}
.slot-who h3{font-size:clamp(12.8px,1.56vw,22.4px);font-weight:500;letter-spacing:.02em;line-height:1.15;color:var(--ink)}
.slot-who .aff{font-size:clamp(12px,1vw,14.4px);line-height:1.2;color:var(--gold);width:clamp(120px,15.36vw,220.8px)}
/* object-fit so a logo that isn't square crops into the tile rather than distorting. */
.slot-logo{width:clamp(57.6px,6.64vw,96px);aspect-ratio:1;flex:none;border-radius:12px;overflow:hidden;object-fit:cover}

/* drug-reveal panel row */
.panel-block{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:clamp(8px,.85vw,12px);flex:0 0 var(--who-col);
}
.panel-note{font-size:clamp(13px,1.36vw,19.2px);line-height:1.2;color:var(--gold)}
.panel-people{display:flex;align-items:flex-end;gap:clamp(8px,1.12vw,16px);
  justify-content:flex-start;width:100%}
.panel-person{display:flex;flex-direction:column;gap:clamp(6.4px,0.68vw,9.6px);align-items:flex-start}
.panel-person span{font-size:clamp(12px,1.12vw,16px);font-weight:500;letter-spacing:.02em;line-height:1.15;color:var(--ink)}

/* ==========================================================================
   CTA BLOCK + FOOTER
   ========================================================================== */
.cta{
  background:var(--dark);color:var(--on-dark);text-align:center;
  padding-block:clamp(41.6px,5.6vw,64px);
}
.cta-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(14.4px,1.76vw,25.6px)}
.cta-eyebrow{
  font-size:clamp(12px,1vw,14px);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  background-image:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.cta h2{font-size:clamp(24px,2.72vw,38.4px);font-weight:400;line-height:1.05;letter-spacing:-.015em}
.cta p{font-size:clamp(14px,1.36vw,19.2px);line-height:1.35;letter-spacing:.02em;color:var(--on-dark-dim);max-width:432px}

.site-footer{
  background:var(--dark);color:var(--on-dark);
  border-top:1px solid var(--warm-3);
  padding-block:clamp(32px,4.4vw,64px);
}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(19.2px,3.2vw,38.4px);flex-wrap:wrap}
.footer-mark{font-size:clamp(22.4px,3.12vw,44.8px);font-weight:400;line-height:1.06}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:clamp(12.8px,1.76vw,25.6px);margin-left:auto}
.footer-right img{width:clamp(120px,13.44vw,193.6px);height:auto}
.footer-right small{font-size:clamp(12px,0.9vw,13px);letter-spacing:.02em;color:var(--on-dark-dim);text-align:right}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid > :last-child{grid-column:1 / -1;max-width:calc(50% - 10px)}
  .feat-grid{grid-template-columns:1fr 1fr}
  .feat-grid > :last-child{grid-column:1 / -1}
  .launch{grid-template-columns:1fr;gap:32px}
  .launch-media{max-width:336px;width:100%}
  .venue-grid{grid-template-columns:1fr;gap:32px}
}

@media (max-width:860px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(253,251,248,.97);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--line-soft);
    padding:8px var(--pad) 20px;
    box-shadow:0 18px 30px -22px rgba(60,39,8,.35);
    display:none;
  }
  .nav-links[data-open]{display:flex}
  .nav-link{font-size:15px;padding:14px 0;border-bottom:1px solid var(--hairline)}
  .nav-links .btn{margin-top:16px;align-self:flex-start;padding:12px 32px}

  /* portrait wash, shot for this shape (assets/src/Website Header-Mobile.png) */
  .hero::before{background-image:url('../img/hero-bg-mobile.jpg');background-position:center top}
  /* a tall header band: dvh so mobile browser chrome doesn't clip it */
  .hero{min-height:67vh;min-height:67dvh;display:flex;align-items:center}
  .hero-inner{
    width:100%;
    padding-top:calc(var(--nav-h) + 24px);
    padding-bottom:clamp(40px,10vw,64px);
  }
  .hero-syringe{right:-24%;bottom:-8%;width:min(74vw,420px);opacity:.7}
  .hero-lede{max-width:32ch}

  /* more air between the hero blocks than the desktop rhythm allows */
  .hero h1{margin-top:20px}
  .hero-meta{margin-top:22px}
  .hero-count{margin-top:30px}
  .hero-insider{margin-top:14px}
  .hero-cta{margin-top:46px}
  /* the shared max-content column is the desktop default now; here it only has
     to stay inside a narrow viewport when the chip's text is long */
  .hero-actions{max-width:100%}
  .hero-cta{display:grid;grid-template-columns:1fr;gap:12px}
  .hero-cta .btn{padding-block:14px}


  /* Featured speakers become one scrollable row of small cards rather than
     three full-width stacked ones — the section stays one screen tall. */
  .feature-grid{
    display:flex;gap:12px;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scroll-padding-inline-start:var(--pad);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* bleed to the viewport edges so the row reads as scrollable */
    margin-inline:calc(-1 * var(--pad));
    padding-inline:var(--pad);
    padding-bottom:4px;
  }
  .feature-grid::-webkit-scrollbar{display:none}
  .feature-grid > :last-child{grid-column:auto;max-width:none}
  .feature-card{flex:0 0 clamp(150px,44vw,190px);scroll-snap-align:start}
  .feature-card .shot{aspect-ratio:1}
  .feature-card .meta{padding:12px;gap:5px}
  .feature-card h3{font-size:15px;line-height:1.2}
  .feature-card p{font-size:12px;line-height:1.25}

  .feat-grid{grid-template-columns:1fr}

  /* speaker rows stack */
  .spk-head{flex-direction:column;align-items:stretch;gap:14px}
  .spk-tail{justify-content:space-between;align-items:center}
  .spk-role{width:auto;flex:1}
  .spk-panel-in{flex-direction:column;align-items:stretch;padding-left:clamp(12.8px,1.36vw,19.2px)}
  .spk-talk{white-space:normal}
  .spk-more-col{width:auto}

  /* agenda rows stack — the shared right-hand column has nothing to align
     against once each row is a single column, so let both groups size freely. */
  .slot{flex-direction:column;align-items:stretch;gap:18px}
  .slot-who,.panel-block{flex:initial;width:auto}
  .slot-who{align-items:center}
  .slot-who .aff{width:auto}
  .panel-people{flex-wrap:nowrap;align-items:center;gap:clamp(4px,1.6vw,8px);width:auto}
  .panel-person{flex:none;align-items:center;text-align:center}
  .panel-person .portrait-sm{width:var(--portrait-w)}

  .footer-inner{flex-direction:column;align-items:center;text-align:center;gap:28px}
  .footer-mark{text-align:center}
  .footer-right{align-items:center;margin-left:0}
  .footer-right small{text-align:center}
}

@media (max-width:520px){
  .hero-meta{gap:6px 14px}
  .tabs{width:100%}
  .tab{flex:1;text-align:center}
}