/* Layout: one black "stage frame" (from the event slides) that opens into the story; sections labelled by folder tabs; light paper page. Single light look on purpose (brand). */
:root{
  --paper:#F4F4F1; --paper-2:#ECEBE5; --ink:#141412; --frame:#0E0E0C;
  --muted:#5E5C55; --soft:#ABA89D; --line:rgba(20,20,18,.12); --white:#FFFFFF;
  --lime:#CEFF5B; --on-dark:#F4F4F1;
  --sans:'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display:'Inter Tight', 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Instrument Serif', 'Times New Roman', Georgia, serif;
  --mono:'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --gutter:clamp(16px, 3vw, 40px);
  --nav:56px; --fw:14px; --frad:22px;
  color-scheme:light;
}
*{box-sizing:border-box}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:clip}
a{color:inherit}
img{display:block; max-width:100%}
h1,h2,h3{font-weight:600; letter-spacing:-0.045em; line-height:1; margin:0; text-wrap:balance}
em.s{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-0.02em}
.mono{font-family:var(--mono); font-size:13px; letter-spacing:.04em}
.muted{color:var(--muted)}
.line{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
.li{display:inline-block; will-change:transform}
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 22px; border-radius:999px; text-decoration:none; font-size:16px; font-weight:500; transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:11px 18px; font-size:15px}
.btn-dark{background:var(--ink); color:var(--lime)}
.btn-light{background:var(--white); color:var(--ink); border:1px solid var(--line)}
.btn-lime{background:var(--lime); color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

/* ---------- hero ---------- */
.row{display:flex; gap:10px; flex-wrap:wrap}

/* ---------- sections ---------- */
.sec{position:relative; padding-block:clamp(110px,12vw,160px) clamp(64px,8vw,110px); padding-inline:var(--gutter)}
.wrap{max-width:1200px; margin:0 auto}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--lime)}

/* speakers */
.speakers-sec{position:relative; background:var(--paper); overflow:hidden; padding-bottom:clamp(40px,5vw,70px)}
.sp-head{width:100%; padding-inline:var(--gutter); display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap}
.sp-head h2{font-size:clamp(44px,6vw,88px)}
.sp-head p{margin:0; max-width:26em}
.sp-card{margin:0; width:clamp(260px,26vw,380px); display:flex; flex-direction:column; gap:14px}
.sp-frame{position:relative; aspect-ratio:300/380; border-radius:22px; overflow:hidden; background:var(--paper-2)}
.sp-ph{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0}
.sp-init{display:flex; flex-direction:column; justify-content:flex-end; gap:4px; padding:22px; background:linear-gradient(#AEE1ED 52%, var(--ink)); color:var(--on-dark)}
.sp-init span{position:absolute; left:22px; top:18px; font-size:clamp(60px,7vw,110px); font-weight:600; letter-spacing:-0.05em; color:rgba(20,20,18,.14)}
.sp-init b{font-size:24px; font-weight:500; color:var(--lime); letter-spacing:-0.02em}
.sp-init i{font-style:normal; font-size:15px}
.sp-card figcaption{display:flex; justify-content:space-between; gap:10px; text-transform:uppercase}
.logos{margin-top:clamp(36px,4.5vw,60px); display:flex; align-items:center; gap:clamp(20px,3vw,48px)}
.logos > .mono{flex:none; text-transform:uppercase; max-width:9em; line-height:1.4}
.logos-vp{flex:1; min-width:0; overflow:hidden; border-block:1px solid var(--line); padding-block:26px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos-track{display:flex; align-items:center; width:max-content}
.lg{white-space:nowrap; padding-right:clamp(48px,5vw,80px); color:rgba(20,20,18,.42); font-size:clamp(22px,2.2vw,30px); line-height:1; transition:color .3s}
.lg:hover{color:var(--ink)}
.lg0{font-weight:700; letter-spacing:-0.04em}
.lg1{font-family:var(--serif); font-style:italic; font-size:clamp(26px,2.6vw,36px)}
.lg2{font-weight:500; letter-spacing:.08em; text-transform:uppercase; font-size:clamp(16px,1.5vw,20px)}
.lg3{font-weight:600; letter-spacing:-0.02em}
.ev-k{text-transform:uppercase; margin-bottom:16px}
.ev-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px 40px; flex-wrap:wrap}
.ev-head h2{font-size:clamp(44px,6.2vw,96px)}
@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(206,255,91,.1)}}

/* permanent frame */
.frame{position:fixed; inset:0; z-index:40; pointer-events:none}
.frame::before{content:""; position:absolute; inset:var(--fw); border-radius:var(--frad); box-shadow:0 0 0 60px var(--frame)}
.f-logo,.f-nav{position:fixed; z-index:42; top:var(--fw); background:var(--frame); color:var(--on-dark)}
.f-logo{left:var(--fw); height:52px; display:flex; align-items:center; padding:0 24px 4px 8px; border-bottom-right-radius:var(--frad)}
.f-logo img{width:clamp(150px,15vw,210px); height:auto}
.f-nav{right:var(--fw); display:flex; align-items:center; gap:clamp(14px,2vw,26px); height:52px; padding:0 5px 4px 26px; border-bottom-left-radius:var(--frad); font-size:15px}
.f-nav .btn-sm{padding:9px 18px}
.f-nav a.t{text-decoration:none; opacity:.8}
.f-nav a.t:hover{opacity:1; color:var(--lime)}
.f-logo::before,.f-logo::after,.f-nav::before,.f-nav::after{content:""; position:absolute; width:var(--frad); height:var(--frad); pointer-events:none}
.f-logo::before{left:100%; top:0; background:radial-gradient(circle at 100% 100%, transparent calc(var(--frad) - .5px), var(--frame) var(--frad))}
.f-logo::after{left:0; top:100%; background:radial-gradient(circle at 100% 100%, transparent calc(var(--frad) - .5px), var(--frame) var(--frad))}
.f-logo > *, .f-nav > *{flex-shrink:0; white-space:nowrap}
/* city pages: the event date sits in the logo tab, after a hairline */
.f-logo-dated{gap:clamp(14px,1.6vw,20px); padding-right:26px; text-decoration:none}
.f-date{display:flex; align-items:center; gap:clamp(14px,1.6vw,20px); white-space:nowrap; color:var(--on-dark); font-size:15px; line-height:1}
.f-date::before{content:""; width:1px; height:20px; background:rgba(244,244,241,.3)}
.f-date-l{opacity:.8}
.f-date-s{display:none; font-size:12px; color:var(--soft)}
/* SF: the city as a small line under the wordmark (like the New York storefront lockup) */
.f-logo-city{height:auto; min-height:52px; padding-top:9px; padding-bottom:11px}
.f-lockup{display:flex; flex-direction:column; align-items:flex-start; gap:5px}
.f-city{align-self:flex-end; display:flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark); line-height:1}
.f-city::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--lime)}
.f-city-d{display:none; white-space:pre}
/* runneth wordmark = the real logo, linked to runneth.com */
.f-rn{display:inline-block; line-height:0} .f-rn img{display:block; height:clamp(30px,3.4vw,46px); width:auto}
.f-by{text-decoration:none; color:inherit} .f-by-rn{display:inline-block; height:.95em; width:auto; vertical-align:-0.12em; margin-left:.25em}
a.f-pres, a.ch-pres{text-decoration:none; color:inherit}
/* invite pages: the header nav is just the credit + the button */
.f-pres{display:inline-flex; align-items:baseline; gap:9px; margin-right:14px; font-size:14px; color:var(--on-dark); opacity:.85; white-space:nowrap}
.f-pres img{height:16px; width:auto; display:block; align-self:baseline}
@media (max-width:900px){ .f-pres{display:none} }
/* SF hero: "Speakers from" + the speakers' company logos along the bottom */
/* invite pages: the tagline under the invite headline, big enough to read as the second line of the pitch */
.ch-has-vid .ch-sub{font-size:clamp(24px,2.3vw,38px); line-height:1.12; letter-spacing:-0.03em; max-width:16em}
.ch-logos{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:18px}
.ch-logos ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px clamp(28px,3.4vw,60px); --lh:clamp(17px,1.6vw,25px)}
.ch-logos img{display:block; width:auto; filter:grayscale(1); opacity:.82}
.ch-logos-k{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.ch-has-vid .ch-logos{grid-column:1 / -1; margin-top:clamp(36px,6vh,80px)}
@media (max-width:1179px){ .ch-has-vid .ch-logos{order:3; margin-top:40px} .ch-logos ul{--lh:18px; gap:16px 26px} }
/* SF: "runneth presents" opens the hero, like the video's first card (wordmark in ink, "presents" in the serif) */
.ch-pres{margin:0; display:flex; align-items:center; justify-content:center; gap:.3em; font-size:clamp(26px,2.4vw,38px); line-height:1; color:var(--ink); align-self:center}
.ch-pres img{display:block; height:.82em; width:auto}
.ch-pres span{font-family:var(--serif); font-weight:400; letter-spacing:-0.01em; transform:translateY(-.04em)}
.ch-when{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:4px}
/* SF: with the city in the header, the tagline is the hero H1 (sans: the site keeps italics for place names and the close) */
.ch-lead{margin:0; font-family:var(--display); font-weight:600; font-size:clamp(44px,4.6vw,78px); line-height:1; letter-spacing:-0.035em; color:var(--ink); text-wrap:balance}
@media (max-width:640px){ .f-logo-city .f-date{display:none} .f-city{font-size:10px; letter-spacing:.08em} }
@media (max-width:640px){
  .f-logo-dated{flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; padding-top:2px}
  .f-logo-dated img{width:clamp(124px,36vw,150px)}
  .f-date::before{display:none}
  .f-date-l{display:none}
  .f-date-s{display:inline; font-size:10.5px; letter-spacing:.06em}
}
.f-nav::before{right:100%; top:0; background:radial-gradient(circle at 0 100%, transparent calc(var(--frad) - .5px), var(--frame) var(--frad))}
.f-nav::after{right:0; top:100%; background:radial-gradient(circle at 0 100%, transparent calc(var(--frad) - .5px), var(--frame) var(--frad))}
.pill{position:fixed; z-index:42; right:calc(var(--fw) + 16px); bottom:calc(var(--fw) + 16px); display:flex; align-items:center; gap:12px; padding:7px 7px 7px 18px; border-radius:999px; background:var(--ink); color:var(--on-dark); text-decoration:none; font-size:14px; box-shadow:0 10px 30px rgba(14,14,12,.25); opacity:0; transform:translateY(24px) scale(.96); pointer-events:none; transition:opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1)}
.pill.show{opacity:1; transform:none; pointer-events:auto}
.pill .mono{color:var(--lime); font-size:11.5px; text-transform:uppercase}
.pill b{background:var(--lime); color:var(--ink); border-radius:999px; padding:8px 14px; font-weight:500}

/* get notified */
.notify{position:relative; overflow:hidden; background:var(--paper); padding:clamp(130px,14vw,190px) calc(var(--fw) + var(--gutter)) 0}
.rib{--m:-20%; position:absolute; left:-4%; top:2%; width:110%; max-width:none; height:auto; pointer-events:none; -webkit-mask-image:linear-gradient(90deg,#000 var(--m),transparent calc(var(--m) + 18%)); mask-image:linear-gradient(90deg,#000 var(--m),transparent calc(var(--m) + 18%))}
.ntf-in{position:relative; z-index:2; max-width:1200px; margin:0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:22px}
.notify h2{font-size:clamp(56px,9vw,140px); line-height:.92}
.ntf-sub{margin:0; max-width:26em; font-size:clamp(17px,1.5vw,20px); color:var(--muted)}
.ntf-form{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.ntf-form input{font:inherit; font-size:16px; padding:14px 20px; border-radius:999px; border:1px solid var(--line); background:var(--white); color:var(--ink); min-width:0; width:clamp(200px,24vw,320px)}
.ntf-form input#n-city{width:clamp(160px,16vw,220px)}
.ntf-form input:focus{outline:2px solid var(--ink); outline-offset:1px}
.ntf-ok{margin:8px 0 0; font-size:18px; font-weight:500}
.ntf-fine{margin:0; font-size:12px}
.ntf-mq{position:relative; z-index:2; margin:clamp(70px,9vw,120px) calc(-1 * (var(--fw) + var(--gutter))) 0; padding-block:22px; border-top:1px solid var(--line); overflow:hidden; white-space:nowrap}
.ntf-track{display:inline-flex; font-family:var(--mono); font-size:clamp(16px,1.6vw,22px); letter-spacing:.04em; color:var(--soft)}
.ntf-track span{padding-right:.5em}
.ntf-track b{font-weight:500; color:var(--ink)}
.ntf-track em{font-size:1.2em; color:var(--ink)}

/* footer */
footer{background:var(--frame); color:var(--on-dark); padding:clamp(56px,7vw,90px) var(--gutter) 30px}
.f-mark > img{width:100%; height:auto}
.f-by{display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:16px; font-size:clamp(16px,1.5vw,20px)}
.f-by b{font-size:1.25em; letter-spacing:-0.05em}
.f-brand{margin-top:clamp(40px,5vw,60px); padding-block:28px; border-block:1px solid rgba(244,244,241,.14); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
.f-rn{font-size:clamp(36px,4vw,52px); font-weight:700; letter-spacing:-0.055em}
.f-tag{font-size:clamp(22px,2.4vw,32px); letter-spacing:-0.02em}
.f-tag em{font-family:var(--serif); font-style:italic}
.f-grid{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid rgba(244,244,241,.14)}
.f-nl{padding:36px 40px 44px 0; border-right:1px solid rgba(244,244,241,.14)}
.f-nl h4{margin:0; font-size:clamp(24px,2.4vw,32px); font-weight:500; letter-spacing:-0.025em; line-height:1.15}
.f-nl p{margin:16px 0 22px; color:var(--soft); max-width:34em}
.f-form{display:flex; align-items:center; max-width:420px; background:rgba(244,244,241,.08); border-radius:14px; padding:6px 6px 6px 18px}
.f-form input{flex:1; min-width:0; background:transparent; border:0; color:var(--on-dark); font:inherit; padding:12px 0}
.f-form input::placeholder{color:var(--soft)}
.f-form input:focus{outline:none}
.f-form:focus-within{box-shadow:0 0 0 2px var(--lime)}
.f-form button{width:46px; height:46px; border-radius:10px; border:0; background:var(--on-dark); color:var(--ink); font-size:20px; cursor:pointer}
.f-ok{color:var(--lime) !important}
.f-ok a{color:var(--on-dark)}
.f-soc{margin-top:26px; display:flex; gap:10px}
.f-soc a{width:42px; height:42px; border-radius:10px; background:rgba(244,244,241,.08); display:flex; align-items:center; justify-content:center; text-decoration:none; font-weight:600; font-size:15px}
.f-soc a:hover{background:rgba(244,244,241,.16)}
.f-links{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:36px 0 44px 44px}
.f-links h5{margin:0 0 18px; font-size:20px; font-weight:500}
.f-links a{display:block; text-decoration:none; color:var(--soft); padding:6px 0; font-size:17px}
.f-links a:hover{color:var(--on-dark)}
.f-legal{padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--soft); font-size:15px}
.f-legal a{color:var(--soft); text-decoration:none; margin-left:28px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

.room h2{font-size:clamp(32px,4.4vw,56px); line-height:1.05}
.recap{position:relative; display:block; margin-top:clamp(40px,5vw,64px); aspect-ratio:16/8; max-width:100%; border-radius:var(--rr,24px); overflow:hidden; transform-origin:50% 20%; text-decoration:none; color:var(--on-dark); will-change:transform}
.recap img, .recap video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.recap-still{cursor:default}
.recap-still::after{display:none}
.recap::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(14,14,12,.72), rgba(14,14,12,0) 55%)}
.recap .lab{position:absolute; z-index:2; left:clamp(18px,3vw,36px); bottom:clamp(18px,3vw,34px); display:flex; flex-direction:column; gap:6px}
.recap .lab .k{color:var(--lime)}
.recap .lab b{font-size:clamp(26px,3.6vw,48px); font-weight:600; letter-spacing:-0.035em; line-height:1}
.recap .play{position:absolute; z-index:2; left:50%; top:50%; width:clamp(64px,7vw,92px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:var(--lime); display:flex; align-items:center; justify-content:center; transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.recap .play path{fill:var(--ink)}
.recap:hover .play{transform:translate(-50%,-50%) scale(1.12)}
.recap .tag{position:absolute; z-index:2; right:0; bottom:0; background:var(--paper); color:var(--ink); padding:14px 24px 8px; border-top-left-radius:18px; font-size:clamp(16px,1.8vw,22px); font-weight:600; letter-spacing:-0.02em}
.stats{position:relative; margin-top:clamp(36px,4vw,56px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.stats-rule{position:absolute; left:0; right:0; top:0; height:1px; background:var(--ink)}
.stat{padding:26px 28px 6px 0; min-width:0}
.stat + .stat{padding-left:28px; border-left:1px solid var(--line)}
.stat b{display:block; font-size:clamp(40px,5vw,72px); font-weight:600; letter-spacing:-0.045em; line-height:1; font-variant-numeric:tabular-nums}
.stat span{display:block; margin-top:12px; font-size:15px; color:var(--muted); max-width:22em}

.bar{position:fixed; left:0; right:0; top:0; z-index:50; height:4px; background:var(--lime); transform-origin:0 50%; transform:scaleX(0)}

@media (max-width: 900px){
  :root{--fw:8px; --frad:16px}
  .f-nav a.t{display:none}
  .f-nav{padding:6px 6px 10px 14px}
  .pill .mono{display:none}
  .f-grid{grid-template-columns:1fr}
  .f-nl{border-right:0; padding-right:0}
  .f-links{padding-left:0}
  .stats{grid-template-columns:1fr}
  .stat + .stat{padding-left:0; border-left:0; border-top:1px solid var(--line)}
}
.live{width:7px; height:7px; border-radius:50%; background:var(--lime); animation:pulse 2s ease-in-out infinite}

/* section headers (.ev-head): heading on the left, a short line or link on the right */
.ev-head{order:1; align-items:center !important}
.ev-head h2{font-size:clamp(36px,4.4vw,64px) !important}
.ev-head{order:0 !important; align-items:flex-end !important}
.ev-head h2{font-size:clamp(44px,6vw,92px) !important}
.ev-sub{margin:0; max-width:24em}
/* a header whose right-hand copy runs to several paragraphs (e.g. Los Angeles speakers): top-align it and give it the same measure as "The event" */
.ev-head-stack{flex-direction:column; align-items:stretch !important; gap:clamp(28px,3.5vw,48px)}
.ev-head-stack .ev-sub{max-width:none; font-size:clamp(17px,1.4vw,19px)}
.ev-sub-stack{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px clamp(32px,5vw,80px); align-items:start}
.ev-sub-stack p{margin:0; line-height:1.5}
.ev-sub-stack p:first-child{grid-column:1 / -1; font-family:var(--display); font-weight:500; font-size:clamp(22px,2.2vw,30px); letter-spacing:-0.02em; line-height:1.15; color:var(--ink); margin-bottom:6px}
@media (max-width:900px){
  .ev-sub-stack{grid-template-columns:1fr; gap:14px}
}

/* faq */
.faq{background:var(--paper); padding:clamp(100px,12vw,150px) calc(var(--fw) + var(--gutter))}
.faq-in{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px,6vw,100px); align-items:start}
.faq-side{position:sticky; top:120px; display:flex; flex-direction:column; gap:20px}
.faq-side h2{font-size:clamp(44px,5.6vw,84px); line-height:.95}
.faq-side p{margin:0}
.fq-list{border-top:1px solid var(--ink)}
.fq{border-bottom:1px solid var(--line)}
.fq button{width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 0; background:none; border:0; font:inherit; font-size:clamp(19px,1.8vw,24px); font-weight:500; letter-spacing:-0.02em; color:var(--ink); text-align:left; cursor:pointer}
.fq button i{position:relative; flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); transition:background .3s, transform .5s cubic-bezier(.2,.8,.2,1)}
.fq button i::before,.fq button i::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; background:currentColor; transform:translate(-50%,-50%)}
.fq button i::after{transform:translate(-50%,-50%) rotate(90deg)}
.fq.on button i{background:var(--lime); border-color:var(--lime); transform:rotate(45deg)}
.fq button:hover i{border-color:var(--ink)}
.fq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1)}
.fq.on .fq-a{grid-template-rows:1fr}
.fq-a > div{overflow:hidden}
.fq-a p{margin:0; padding:0 60px 28px 0; font-size:17px; color:var(--muted); max-width:36em}
@media (max-width:900px){
  .faq-in{grid-template-columns:1fr}
  .faq-side{position:static}
  .fq-a p{padding-right:0}
}

/* italics only for place names and the close */
em.s{font-family:inherit; font-style:normal; font-weight:inherit; letter-spacing:inherit}

/* lime only for the main Apply */
.pill b{background:var(--white)}

/* ===================== shared pieces ===================== */
.btn-white{background:var(--white); color:var(--ink)}
.city{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-0.01em}
.hv{position:relative; background:var(--paper)}
.hv h1{font-weight:600; letter-spacing:-0.055em; line-height:.9}
.he-tag{position:absolute; left:16px; top:16px; background:var(--white); color:var(--ink); border-radius:999px; padding:5px 10px; font-size:10.5px; text-transform:uppercase; opacity:calc(1 - var(--e,0) * 3)}

/* learn cards */
.learn2{background:var(--paper)}
.l2-wrap{max-width:1320px; margin:0 auto; padding:clamp(90px,11vh,130px) calc(var(--fw) + var(--gutter)) clamp(60px,8vh,100px)}
.learn2 .ev-head h2, .learn2 .l2-wrap > h2{font-size:clamp(44px,6vw,92px)}
.col4-shade{position:absolute; inset:0; background:linear-gradient(to top, rgba(14,14,12,.68), rgba(14,14,12,.1) 55%, rgba(14,14,12,.15))}

.col4-shade{background:linear-gradient(to bottom, rgba(14,14,12,.42), rgba(14,14,12,0) 26%), linear-gradient(to top, rgba(14,14,12,.68), rgba(14,14,12,.08) 55%) !important}

.he-anchor{position:absolute; top:60%; left:0; width:1px; height:1px}
.hv h1 .line:has(.hx-pre){margin-bottom:.06em}

/* ===== city tabs (along the bottom of the hub hero) ===== */
.ht-tabs{position:absolute; z-index:5; left:50%; bottom:calc(var(--fw) + 26px); transform:translate(-50%, calc((1 - clamp(0, calc((var(--e,0) - .7) * 3.4), 1)) * 40px)); width:min(980px, calc(100% - 2 * var(--fw) - 48px)); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:8px; background:var(--white); border-radius:20px; box-shadow:0 18px 40px rgba(14,14,12,.2); opacity:clamp(0, calc((var(--e,0) - .7) * 3.4), 1); pointer-events:none}
.ht-tab{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:12px 16px; border:0; border-radius:14px; background:transparent; color:var(--ink); cursor:pointer; text-align:left; font:inherit; transition:background .3s, color .3s}
.ht-tab .mono{font-size:10.5px; text-transform:uppercase; color:var(--muted)}
.ht-tab .city{font-size:clamp(22px,2vw,28px); line-height:1}
.ht-tab:hover{background:var(--paper)}
.ht-tab.on{background:var(--ink); color:var(--on-dark)}
.ht-tab.on .mono{color:var(--soft)}
@media (max-width:900px){
  .ht-tabs{position:relative; left:auto; bottom:auto; transform:none; width:auto; margin:12px var(--fw) 0; grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* headline: "chief" and "marketer" both Inter Tight SemiBold */
.hv h1{font-family:var(--display); font-weight:600; letter-spacing:-0.045em}

/* ===================== city event pages ===================== */
.ch{position:relative; height:100vh; height:100svh; min-height:680px; overflow:hidden; background:var(--paper)}
.ch-media{position:absolute; z-index:2; top:calc(var(--fw) + 72px); right:calc(var(--fw) + clamp(16px,2vw,28px)); bottom:calc(var(--fw) + clamp(16px,2vw,28px)); left:51%; border-radius:22px; overflow:hidden; background:var(--frame); color:var(--on-dark)}
.ch-media img{position:absolute; left:0; top:-3%; width:100%; height:106%; max-width:none; object-fit:cover}
.ch-veil{position:absolute; inset:0; opacity:0; background:linear-gradient(90deg, rgba(14,14,12,.5), rgba(14,14,12,.08) 60%), linear-gradient(to top, rgba(14,14,12,.6), rgba(14,14,12,0) 50%)}
.ch-chips{position:absolute; z-index:2; left:18px; right:18px; top:18px; display:flex; justify-content:space-between; align-items:center; gap:8px}
.ch-chips > .mono{font-size:11px; padding:5px 10px; border-radius:999px; background:rgba(14,14,12,.45); color:var(--on-dark)}
.ch-chips .he-tag{position:static; font-size:10.5px; text-transform:uppercase; border-radius:999px; padding:5px 10px; background:rgba(14,14,12,.45); color:var(--on-dark); border:1px solid rgba(244,244,241,.35)}
.ch-chips .he-tag.lime{background:var(--lime); color:var(--ink); border-color:var(--lime)}
.ch-info{position:absolute; z-index:1; top:calc(var(--fw) + 72px); bottom:calc(var(--fw) + clamp(16px,2vw,28px)); left:calc(var(--fw) + clamp(24px,4vw,64px)); width:calc(51% - var(--fw) - clamp(24px,4vw,64px) - clamp(24px,3vw,48px)); display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; padding-block:14px 10px}
.ch-back{display:inline-flex; align-items:center; gap:10px; padding:9px 16px 9px 12px; border-radius:999px; border:1px solid var(--line); background:var(--white); color:var(--ink); text-decoration:none; font-size:15px; font-weight:500; transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s}
.ch-back:hover{transform:translateX(-3px); border-color:var(--ink)}
.ch-body{display:flex; flex-direction:column; align-items:flex-start; gap:14px; min-width:0; margin-block:auto}
.ch-st{text-transform:uppercase; color:var(--muted)}
/* the hero label ("In-person event · November 3, 2026") gets a white highlight that sweeps in from the left once the hero has settled */
.ch-st{position:relative; isolation:isolate; display:inline-block; margin-left:-9px; padding:5px 9px 4px; color:#000000}
.ch-st::before{content:""; position:absolute; inset:0; z-index:-1; background:#FFFFFF; transform:scaleX(0); transform-origin:left center; animation:chStHl .9s cubic-bezier(.65,0,.35,1) 1.6s forwards}
@keyframes chStHl{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){ .ch-st::before{animation:none; transform:none} }
.ch-name{margin:0; font-size:clamp(60px,7.4vw,124px); line-height:.9; letter-spacing:-0.02em; color:var(--ink); text-wrap:balance}
.ch-sub{margin:0; text-wrap:balance; font-family:var(--display); font-size:clamp(20px,1.9vw,26px); font-weight:600; letter-spacing:-0.03em; color:var(--ink)}
.ch-line{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; font-size:16px; color:var(--muted)}
.ch-cd{font-style:normal; font-size:12px; color:var(--ink); display:inline-flex; align-items:center; gap:7px; padding:4px 10px 4px 8px; border-radius:999px; background:var(--white); border:1px solid var(--line)}
.ch-cd .live{display:inline-block}
.ch-body .row{margin-top:10px}
/* invite pages (/sf/invite/<slug>/): who the invite is for, logo-first */
.inv{display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin:4px 0 6px; max-width:100%}
.inv-p{margin:0; max-width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:.08em; font-family:var(--display); font-size:clamp(36px,3.9vw,64px); font-weight:600; line-height:1.06; letter-spacing:-0.025em; color:var(--ink)}
@media (max-width:640px){ .inv-p{font-size:clamp(28px,8.2vw,40px)} }
.inv-a{text-wrap:balance}
.inv-b{display:flex; flex-wrap:nowrap; align-items:center; gap:.28em; white-space:nowrap; max-width:100%}
.inv-b > span{flex:none}
.inv-logo{display:block; flex:0 1 auto; min-width:0; height:calc(.86em * var(--s, 1)); width:auto; max-width:min(11em,70vw); object-fit:contain; object-position:left center}
.inv-txt{margin-left:-.12em}
/* mark + words (YC, Index): the mark keeps its size; the words may wrap instead */
.inv-b-txt{flex-wrap:wrap; white-space:normal; row-gap:.08em} .inv-b-txt .inv-logo{flex:none}
.inv-who{display:inline-flex; align-items:center; gap:.3em; min-width:0; white-space:normal}
.inv-who .inv-face{flex:none}
/* person & group names wrap inside their column instead of pushing the video aside */
.inv-b > .inv-who{flex:1 1 auto; min-width:0; white-space:normal} .inv-name{min-width:0; text-wrap:balance}
.inv-b > .inv-grp{font-size:.72em; letter-spacing:-0.02em; flex:1 1 auto; min-width:0; align-items:center; white-space:normal} .inv-grp .inv-face{border-radius:22%; width:1.5em; height:1.5em} .inv-name{min-width:0}
.inv-face{width:1.15em; height:1.15em; border-radius:50%; object-fit:cover; background:var(--paper-2)}
.inv-from{font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
/* invite pages: the hype video in a 16:9 frame where the city photo panel is */
.ch-vid{position:absolute; z-index:2; left:51%; right:calc(var(--fw) + clamp(16px,2vw,28px)); top:calc(50% + 36px); transform:translateY(-50%); aspect-ratio:16/9; border-radius:22px; overflow:hidden; background:var(--frame)}
.ch-vid video{display:block; width:100%; height:100%; object-fit:cover}
.ch-vid-btn{position:absolute; right:14px; bottom:14px; font:inherit; font-size:13px; font-weight:500; padding:8px 14px; border-radius:999px; border:1px solid rgba(244,244,241,.35); background:rgba(14,14,12,.55); color:var(--on-dark); cursor:pointer; backdrop-filter:blur(6px)}
.ch-vid-btn:hover{background:rgba(14,14,12,.8)}
.ch-vid-play{right:50%; bottom:50%; transform:translate(50%,50%); font-size:15px; padding:12px 20px}
@media (min-width:901px) and (max-width:1179px){
  /* video hero, tablet / small laptop: stacked like the phone layout */
  .ch.ch-has-vid{height:auto; min-height:0; display:flex; flex-direction:column; padding:calc(var(--fw) + 96px) calc(var(--fw) + 28px) 64px calc(var(--fw) + 40px)}
  .ch-has-vid .ch-info{display:contents}
  .ch-has-vid .ch-back{order:0; align-self:flex-start; margin-bottom:20px}
  .ch-has-vid .ch-vid{position:relative; order:1; left:auto; right:auto; top:auto; transform:none; width:100%}
  .ch-has-vid .ch-body{order:2; padding-top:32px; margin-block:0}
  .ch-has-vid .ch-back{order:-1}
  .ch-has-vid .ch-pres{order:0; margin:4px 0 26px}
}
@media (min-width:1180px){
  /* video hero: sized to its content (not the full screen), text + video as one centred block, capped on wide screens */
  .ch.ch-has-vid{height:auto; min-height:0; display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); grid-template-rows:auto auto; column-gap:clamp(36px,4.5vw,88px); row-gap:clamp(28px,4vh,56px); align-items:center;
    padding:calc(var(--fw) + 96px) max(calc(var(--fw) + clamp(16px,2vw,28px)), calc((100% - 1640px) / 2)) clamp(56px,8vh,104px) max(calc(var(--fw) + clamp(24px,4vw,64px)), calc((100% - 1640px) / 2))}
  .ch-has-vid .ch-info{display:contents}
  .ch-has-vid .ch-back{grid-column:1 / -1; grid-row:1; justify-self:start}
  .ch-has-vid .ch-body{grid-column:1; grid-row:2; margin-block:0}
  .ch-has-vid .ch-vid{position:relative; grid-column:2; grid-row:2; left:auto; right:auto; top:auto; transform:none; width:100%}
  .ch-has-vid .ch-pres{grid-column:1 / -1; grid-row:1; justify-self:center; z-index:1}
  /* centred in the first screen, with room to breathe under the header */
  .ch.ch-has-vid{min-height:100vh; min-height:100svh; align-content:center}
  .ch-noback{padding-top:calc(var(--fw) + 112px); padding-bottom:calc(var(--fw) + 72px)} .ch-noback .ch-body, .ch-noback .ch-vid{grid-row:1}
}
@media (max-width:900px){ .ch-has-vid .ch-back{order:-1} .ch-has-vid .ch-pres{order:0; margin:4px 0 20px} }
@media (max-width:900px){ .ch-vid{position:relative; left:auto; right:auto; top:auto; transform:none; order:1; width:100%; border-radius:18px} }

/* hub tabs are links now */
a.ht-tab{text-decoration:none}
.ht-tab{padding-right:40px}
.ht-go{position:absolute; right:14px; top:50%; transform:translate(-6px,-50%); opacity:0; font-size:18px; transition:opacity .3s, transform .4s cubic-bezier(.2,.8,.2,1)}
.ht-tab:hover .ht-go, .ht-tab:focus-visible .ht-go, .ht-tab.on .ht-go{opacity:1; transform:translate(0,-50%)}

.cp{position:relative; background:var(--paper)}
.cp-wrap{max-width:1320px; margin:0 auto; padding:clamp(90px,11vh,130px) calc(var(--fw) + var(--gutter)) clamp(30px,5vh,60px)}
.cp h2{font-size:clamp(44px,5.6vw,88px); line-height:.95}
.cp .ev-head h2{font-size:clamp(44px,5.6vw,88px)}
.cp-p{margin:22px 0 0; font-size:clamp(17px,1.5vw,20px); color:var(--muted); max-width:30em}
.cp .stats{margin-top:clamp(56px,7vw,88px)}
.cp .stat b{font-size:clamp(40px,4.6vw,68px)}

.cp-sp-body{margin-top:clamp(28px,4vw,44px)}
.sp-via{flex:none; font-size:11px; text-transform:uppercase; padding:4px 9px; border-radius:999px; border:1px solid var(--line); color:var(--ink); white-space:nowrap}
a.sp-link{text-decoration:none; color:var(--ink)}
a.sp-link .sp-frame{transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s}
a.sp-link:hover .sp-frame{transform:translateY(-4px); box-shadow:0 18px 40px rgba(14,14,12,.14)}
a.sp-link:hover .sp-via{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.cp-more{margin:18px 0 0; text-transform:uppercase}
.cp-soon{display:flex; justify-content:space-between; align-items:center; gap:18px 32px; flex-wrap:wrap; padding:clamp(22px,3vw,36px); border:1.5px dashed rgba(20,20,18,.22); border-radius:22px}
.cp-soon b{display:block; font-size:clamp(24px,2.4vw,34px); font-weight:600; letter-spacing:-0.035em; line-height:1.05; max-width:20em}
.cp-soon p{margin:10px 0 0; color:var(--muted); max-width:34em}

.cp-venue-grid{margin-top:18px; display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(28px,5vw,72px); align-items:end}
.cp-venue-txt{display:flex; flex-direction:column; align-items:flex-start; gap:16px}
.cp-venue-txt .mono{text-transform:uppercase; color:var(--muted)}
.cp-venue-txt p{margin:0; font-size:clamp(17px,1.5vw,20px); color:var(--muted); max-width:26em}
.cp-photos{display:grid; grid-template-columns:repeat(var(--n,1),minmax(0,1fr)); gap:14px}
.cp-photo{position:relative; margin:0; aspect-ratio:4/3.2; max-width:100%; border-radius:22px; overflow:hidden; background:var(--paper-2)}
.cp-photos[style*="--n: 1"] .cp-photo, .cp-photos[style*="--n:1"] .cp-photo{aspect-ratio:16/10}
.cp-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cp-photo figcaption{position:absolute; left:14px; bottom:14px; padding:5px 10px; border-radius:999px; background:rgba(14,14,12,.55); color:var(--on-dark); font-size:11px; text-transform:uppercase}

.cp-recap .recap{margin-top:clamp(28px,4vw,44px)}

.cp-apply{padding-bottom:clamp(60px,9vh,110px)}
.cp-apply-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,6vw,96px); align-items:start}
.cp-details{margin:26px 0 0; text-transform:uppercase}
button.btn{border:0; cursor:pointer; font-family:inherit}
.cp-next{position:relative; display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:16/11; max-width:100%; padding:clamp(20px,2.4vw,30px); border-radius:24px; overflow:hidden; color:var(--on-dark); text-decoration:none; background:var(--frame)}
.cp-next img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.cp-next:hover img{transform:scale(1.04)}
.cp-next-top,.cp-next-bot{position:relative; z-index:2; display:flex; gap:12px}
.cp-next-top{justify-content:space-between; align-items:center}
.cp-next-top .he-tag{font-size:10.5px; text-transform:uppercase; border-radius:999px; padding:5px 10px; background:var(--lime); color:var(--ink)}
.cp-next-bot{flex-direction:column; align-items:flex-start; gap:10px}
.cp-next-bot .city{font-size:clamp(44px,5vw,76px); line-height:.9}

@media (max-width:900px){
  .ch{height:auto; min-height:0; display:flex; flex-direction:column; padding:calc(var(--fw) + 70px) calc(var(--fw) + 12px) 12px}
  .ch-info{position:relative; inset:auto; width:auto; order:0; padding:0; gap:20px; display:contents}
  .ch-back{order:0; align-self:flex-start; margin-bottom:14px}
  .ch-media{position:relative; inset:auto; order:1; width:100%; aspect-ratio:4/3.4; height:auto}
  .ch-body{order:2; padding:24px 8px 8px}
  .ch-name{font-size:clamp(52px,14vw,84px)}
  .cp-venue-grid,.cp-apply-grid{grid-template-columns:1fr}
  .cp-photos{grid-template-columns:1fr}
  .cp .stats{grid-template-columns:1fr}
}

/* registration: dark, centred, stacked (as on the live event pages) */
.reg{background:var(--frame); color:var(--on-dark); padding:clamp(90px,12vh,140px) calc(var(--fw) + var(--gutter)) clamp(80px,10vh,120px); border-bottom:1px solid rgba(244,244,241,.1)}
.reg-in{max-width:920px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center}
.reg-k{margin:0; color:var(--lime); font-size:19px; font-weight:500}
.reg-lede{margin:22px 0 0; font-size:clamp(24px,2.5vw,34px); font-weight:500; letter-spacing:-0.025em; line-height:1.18; text-wrap:balance}
.reg-form{width:100%; max-width:560px; margin-top:clamp(40px,6vh,64px); display:flex; flex-direction:column; align-items:stretch; gap:16px}
.reg-ask{margin:0 0 8px; font-size:19px; font-weight:500; letter-spacing:-0.01em}
.reg-form input{font:inherit; font-size:16px; height:56px; padding:0 22px; border-radius:6px; border:0; background:var(--white); color:var(--ink); width:100%; min-width:0}
.reg-form input::placeholder{color:#7A7870}
.reg-form input:focus{outline:2px solid var(--lime); outline-offset:2px}
.reg-btn{align-self:center; margin-top:14px; min-width:170px; height:56px; padding:0 28px; border:0; border-radius:6px; background:var(--lime); color:var(--ink); font:inherit; font-size:17px; font-weight:500; cursor:pointer; transition:transform .3s cubic-bezier(.2,.7,.2,1), filter .3s}
.reg-btn:hover{transform:translateY(-2px); filter:brightness(1.04)}
.reg-btn:focus-visible{outline:2px solid var(--on-dark); outline-offset:3px}
.reg-fine{margin:4px 0 0; color:var(--soft); font-size:15px}
.reg-ok{margin:clamp(40px,6vh,64px) 0 0; max-width:30em; font-size:20px; color:var(--lime)}
.reg-details{margin:clamp(56px,8vh,90px) 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0; font-size:clamp(17px,1.6vw,21px); text-transform:uppercase; letter-spacing:.01em}
.reg-details i{font-style:normal; margin:0 18px; color:var(--soft)}

/* RSVPs: confirmed attendees, slow marquee (from the Figma frame) */
.rv{background:var(--paper); padding:clamp(80px,11vh,130px) 0 clamp(70px,9vh,110px)}
.rv-head{text-align:center; padding-inline:calc(var(--fw) + var(--gutter))}
.rv h2{font-size:clamp(36px,3.4vw,50px); font-weight:500; letter-spacing:-0.035em; line-height:1}
.rv-head p{margin:14px 0 0; font-family:var(--serif); font-size:clamp(20px,1.8vw,26px); letter-spacing:-0.005em}
.rv-vp{margin-top:clamp(40px,6vh,64px); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rv-track{list-style:none; margin:0; padding:0; display:flex; width:max-content}
.rv-item{flex:none; display:flex; align-items:center; gap:14px; padding-right:72px}
.rv-item img,.rv-init{flex:none; width:64px; height:64px; border-radius:16px; object-fit:cover}
.rv-init{display:flex; align-items:center; justify-content:center; background:var(--paper-2); color:var(--muted); font-weight:600; font-size:20px; letter-spacing:-0.03em}
.rv-txt{display:flex; flex-direction:column; gap:1px; white-space:nowrap}
.rv-txt b{font-size:clamp(19px,1.6vw,23px); font-weight:600; letter-spacing:-0.035em; line-height:1.1}
.rv-txt i{font-family:var(--serif); font-size:clamp(19px,1.6vw,23px); line-height:1.15; letter-spacing:-0.01em}
@media (prefers-reduced-motion: reduce){ .rv-vp{overflow-x:auto} }

/* floating pill: small San Francisco thumbnail */
.pill{padding-left:6px}
.pill-th{flex:none; width:36px; height:36px; border-radius:50%; background:url(/events/chief-marketer/img/sf2.webp) 88% 78% / auto 230% no-repeat}

/* ===================== hub -> event page hand-off (the city picture carries over) ===================== */
html{background:var(--frame)}
/* event page: same idea in reverse */
.ch-media{top:0; right:0; bottom:0; left:0; border-radius:0; pointer-events:none;
  --pt:calc(var(--fw) + 72px); --pr:calc(var(--fw) + clamp(16px,2vw,28px)); --pb:calc(var(--fw) + clamp(16px,2vw,28px)); --pl:51%;
  clip-path:inset(var(--pt) var(--pr) var(--pb) var(--pl) round 22px)}
.ch-media .ch-img{position:absolute; top:var(--pt); left:var(--pl); right:auto; bottom:auto; width:calc(100% - var(--pl) - var(--pr)); height:calc(100% - var(--pt) - var(--pb)); max-width:none; object-fit:cover; will-change:transform}
.ch-ui{position:absolute; top:var(--pt); right:var(--pr); bottom:var(--pb); left:var(--pl)}
@media (max-width:900px){
  .ch-media{clip-path:inset(0 round 18px); --pt:0px; --pr:0px; --pb:0px; --pl:0px}
}
.ch-veil{will-change:opacity}

/* ===================== speakers, venue, form ===================== */
/* event-page speakers (Los Angeles and London, once they have a line-up): cards scroll sideways */
.cp-sp .ev-head{align-items:flex-end}
.cp-sp-body{margin-top:clamp(28px,4vw,44px)}
.cp-sp-track{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:calc(max(0px, (100vw - 1320px) / 2) + var(--fw) + var(--gutter)); padding:6px calc(max(0px, (100vw - 1320px) / 2) + var(--fw) + var(--gutter)) 18px; scrollbar-width:none}
.cp-sp-track::-webkit-scrollbar{display:none}
.cp-sp-track .sp-card{flex:none; width:300px; scroll-snap-align:start}
.cp-sp-track .sp-init span{font-size:84px}
.cp-wrap-tight{padding-block:0}
.cp-more{margin:6px 0 0}
/* more air between event-page sections */
.cp-sp{padding-bottom:clamp(40px,6vh,70px)}
.cp-venue{padding-bottom:clamp(80px,11vh,130px)}
/* venue: copy centred against the photo */
.cp-venue-grid{align-items:center}
/* form: the button no longer animates its own transform (it fought the reveal and overlapped the line below) */
.reg-btn{transition:filter .3s}
.reg-btn:hover{transform:none}
.reg-fine{margin-top:6px}
@media (max-width:900px){
  .cp-sp-track .sp-card{width:250px}
}

/* page swap cover (see nav.go) */
.swap-cover{position:fixed; inset:0; z-index:39; pointer-events:none; background:transparent}
.swap-cover img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover}
.swap-cover i{position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,14,12,.5), rgba(14,14,12,.08) 60%), linear-gradient(to top, rgba(14,14,12,.6), rgba(14,14,12,0) 50%)}

/* event pages: what the event is (as on the live event pages) */
:root{--book:Georgia, 'Times New Roman', serif}
.cw{background:var(--paper); padding:clamp(80px,11vh,120px) 0 clamp(30px,5vh,50px)}

/* why attend: dark band under the speakers (main page) */
.wa{position:relative; z-index:3; background:var(--frame); color:var(--on-dark); padding:clamp(80px,11vh,130px) 0}
/* round the paper where it meets the dark band, same radius as the frame */
.wa::before,.wa::after{content:""; position:absolute; left:var(--fw); right:var(--fw); height:var(--frad); pointer-events:none}
.wa::before{top:calc(-1 * var(--frad)); background:
  radial-gradient(circle at 100% 0, transparent calc(var(--frad) - .5px), var(--frame) var(--frad)) left top / var(--frad) var(--frad) no-repeat,
  radial-gradient(circle at 0 0, transparent calc(var(--frad) - .5px), var(--frame) var(--frad)) right top / var(--frad) var(--frad) no-repeat}
.wa::after{bottom:calc(-1 * var(--frad)); background:
  radial-gradient(circle at 100% 100%, transparent calc(var(--frad) - .5px), var(--frame) var(--frad)) left top / var(--frad) var(--frad) no-repeat,
  radial-gradient(circle at 0 100%, transparent calc(var(--frad) - .5px), var(--frame) var(--frad)) right top / var(--frad) var(--frad) no-repeat}
.wa-in{max-width:1320px; margin:0 auto; padding-inline:calc(var(--fw) + var(--gutter))}
.wa-grid{position:relative; margin-top:clamp(32px,5vh,56px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.wa-rule{position:absolute; left:0; right:0; height:1px; background:rgba(244,244,241,.22)}
.wa-rule-t{top:0} .wa-rule-b{bottom:0}
.wa-col{padding:clamp(40px,5vh,60px) clamp(24px,3vw,44px) clamp(48px,6vh,72px) 0; min-width:0}
.wa-col + .wa-col{padding-left:clamp(24px,3vw,44px); border-left:1px solid rgba(244,244,241,.22)}
.wa-col h3{font-size:clamp(30px,2.65vw,42px); font-weight:500; letter-spacing:-0.04em; line-height:1.05}
.wa-col p{margin:18px 0 0; font-size:clamp(17px,1.4vw,20px); line-height:1.45; color:rgba(244,244,241,.82); max-width:30em}
@media (max-width:900px){
  .wa-grid{grid-template-columns:1fr}
  .wa-col{padding-right:0}
  .wa-col + .wa-col{padding-left:0; border-left:0; border-top:1px solid rgba(244,244,241,.22)}
}

/* ===== keynote thumbnail, venue address link ===== */
.recap-key img{object-position:50% 36%}
.cp-addr{font-size:15px; font-weight:500; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .25s}
.cp-addr:hover{border-color:var(--ink)}
@media (min-width:901px){
  .cp-sp.has-track{padding-bottom:0}
  .cp-sp.has-track .cp-sp-pin{min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:calc(var(--fw) + 76px) clamp(28px,4vh,48px)}
  .cp-sp.has-track .cp-sp-pin > .cp-wrap{width:100%; padding-top:0; padding-bottom:0}
  .cp-sp-vp{overflow:hidden}
  .cp-sp.has-track .cp-sp-track{overflow:visible; width:max-content; scroll-snap-type:none; will-change:transform}
}

/* keynote lightbox */
.vm{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,56px); background:var(--frame)}
.vm-box{width:min(1280px, 100%, calc((100vh - 170px) * 16 / 9)); display:flex; flex-direction:column; gap:18px}
.vm-top{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; color:var(--on-dark)}
.vm-cap{margin:0; display:flex; flex-direction:column; gap:8px; min-width:0}
.vm-cap .mono{color:var(--lime); text-transform:uppercase; font-size:12px}
.vm-cap b{font-size:clamp(22px,2.4vw,34px); font-weight:600; letter-spacing:-0.035em; line-height:1.05}
.vm-x{flex:none; width:48px; height:48px; border-radius:50%; border:1px solid rgba(244,244,241,.3); background:transparent; color:var(--on-dark); font:inherit; font-size:15px; cursor:pointer; transition:background .25s, color .25s, border-color .25s}
.vm-x:hover,.vm-x:focus-visible{background:var(--on-dark); color:var(--ink); border-color:var(--on-dark); outline:none}
.vm-vid{display:block; width:100%; aspect-ratio:16/9; border-radius:18px; background:#000; object-fit:contain}
html.vm-open .pill{opacity:0 !important; pointer-events:none !important}

/* ===== Why attend: full-height dark band, columns arrive one by one; event-page intro ===== */
.wa{min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:clamp(130px,18vh,200px) 0}
.wa-in{width:100%}
.wa-grid{margin-top:clamp(40px,6vh,72px)}
.wa-col{--wa-line:1; position:relative; padding-top:clamp(48px,7vh,84px); padding-bottom:clamp(56px,8vh,96px)}
.wa-col + .wa-col{border-left:0}
.wa-col + .wa-col::before{content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:rgba(244,244,241,.22); transform:scaleY(var(--wa-line)); transform-origin:50% 0}
.wa-col p{font-size:clamp(18px,1.5vw,21px)}
@media (max-width:900px){
  .wa{min-height:0; display:block; padding:clamp(100px,14vh,140px) 0}
  .wa-col + .wa-col::before{display:none}
  .wa-col + .wa-col{border-top:1px solid rgba(244,244,241,.22)}
  .wa-col{padding-top:40px; padding-bottom:44px}
}
.cp.cw{padding:0}
.cw .cp-wrap{padding-bottom:clamp(80px,11vh,130px)}
.cw .ev-sub{max-width:30em; font-size:clamp(17px,1.4vw,19px)}

/* notify strip: the cities as links, with a thumbnail */
.ntf-track{align-items:center; gap:clamp(36px,4vw,64px); padding-inline:calc(var(--fw) + var(--gutter)); font-family:inherit; letter-spacing:0}
.ntf-track span{padding-right:0}
.ntf-city{flex:none; display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--ink)}
.ntf-city img{width:60px; height:60px; border-radius:14px; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ntf-city-t{display:flex; flex-direction:column; gap:6px}
.ntf-city .city{font-size:clamp(26px,2.4vw,34px); line-height:1; transition:opacity .3s}
.ntf-city .mono{font-size:12px; text-transform:uppercase; color:var(--muted)}
.ntf-city:hover img{transform:scale(1.06)}
.ntf-city:hover .city{opacity:.7}
@media (max-width:900px){ .ntf-city img{width:48px; height:48px; border-radius:12px} }

.cp-sp{overflow-x:clip}

/* ===================== the hub hero: "Become a chief marketer" over the four cities, one after another ===================== */
.hz{position:relative; z-index:3; background:var(--frame)}
/* the picture stops at the frame line, so the black frame carries on between the hero and the next section */
.hz::after{content:""; position:absolute; left:var(--fw); right:var(--fw); bottom:calc(-1 * var(--frad)); height:var(--frad); pointer-events:none; background:
  radial-gradient(circle at 100% 100%, transparent calc(var(--frad) - .5px), var(--frame) var(--frad)) left top / var(--frad) var(--frad) no-repeat,
  radial-gradient(circle at 0 100%, transparent calc(var(--frad) - .5px), var(--frame) var(--frad)) right top / var(--frad) var(--frad) no-repeat}
.hz-stage::after{content:""; position:absolute; z-index:3; left:var(--fw); bottom:var(--fw); width:var(--frad); height:var(--frad); pointer-events:none; background:radial-gradient(circle at 100% 0, transparent calc(var(--frad) - .5px), var(--frame) var(--frad))}
.hz-stage{position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden}
.hz-imgs{position:absolute; left:0; right:0; top:0; bottom:var(--fw); overflow:hidden}
.hz-imgs-in{position:absolute; inset:0; will-change:transform}
.hz-imgs img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; opacity:0; z-index:0; transform:scale(1.045); transition:opacity 0s 1.9s, transform 0s 1.9s}
/* the incoming city fades in slowly over the outgoing one, then drifts in by a few percent while it's on */
.hz-imgs img.prev{opacity:1; z-index:1; transform:scale(1); transition:none}
.hz-imgs img.on{opacity:1; z-index:2; transform:scale(1); transition:opacity 1.8s cubic-bezier(.45,0,.2,1), transform 8s cubic-bezier(.2,.1,.3,1)}
.hz.leaving .hz-imgs img.on{opacity:1; transform:scale(1); transition:opacity .3s ease, transform .3s ease}
.hz-veil{position:absolute; left:0; right:0; top:0; bottom:var(--fw); pointer-events:none; background:linear-gradient(90deg, rgba(14,14,12,.5), rgba(14,14,12,.08) 60%), linear-gradient(to top, rgba(14,14,12,.6), rgba(14,14,12,0) 50%)}
.hz-copy{position:absolute; z-index:2; left:calc(var(--fw) + clamp(24px,4vw,64px)); right:calc(var(--fw) + 24px); top:0; bottom:0; display:flex; flex-direction:column; justify-content:center; padding-bottom:24px; color:var(--on-dark); pointer-events:none}
.hz h1{font-size:clamp(64px,9.6vw,150px); color:var(--on-dark)}
/* a soft shade behind the title so it reads on the pale skies; no visible edge */
.hz-copy::before{content:""; position:absolute; z-index:-1; top:0; bottom:0; left:calc(-1 * (var(--fw) + clamp(24px,4vw,64px))); width:80vw; pointer-events:none; background:linear-gradient(90deg, rgba(14,14,12,.34), rgba(14,14,12,.2) 38%, rgba(14,14,12,.06) 66%, rgba(14,14,12,0))}
@media (max-width:900px){ .hz-copy::before{width:100vw; background:linear-gradient(180deg, rgba(14,14,12,0) 18%, rgba(14,14,12,.34) 38%, rgba(14,14,12,.34) 58%, rgba(14,14,12,0) 78%)} }
/* the white city tabs, centred along the bottom */
.hz-stage{--e:1}
.hz .ht-tab{gap:9px; padding:15px 44px 14px 18px}
.hz .ht-tab .mono{font-size:14.5px; font-weight:500; letter-spacing:.02em}
/* the city, typed into the title */
.hz h1 .line.hz-in-line{font-size:.5em; line-height:1.2; margin-top:.22em}
.hz-in{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-0.01em; white-space:nowrap}
.hz-caret{display:inline-block; width:.055em; height:.86em; margin-left:.08em; vertical-align:-.08em; background:currentColor; border-radius:1px}
.hz-caret.idle{animation:hzBlink 1.4s ease-in-out infinite}
@keyframes hzBlink{0%,45%{opacity:1} 55%,100%{opacity:0}}
.hz .ht-tabs{bottom:calc(var(--fw) + 26px); pointer-events:auto}
.hz.leaving .hz-copy,.hz.leaving .ht-tabs{opacity:0 !important; transition:opacity .3s ease}
@media (max-width:900px){
  .hz .ht-tabs{position:absolute; left:calc(var(--fw) + 10px); right:calc(var(--fw) + 10px); bottom:calc(var(--fw) + 14px); width:auto; margin:0; transform:none; grid-template-columns:repeat(2,minmax(0,1fr))}
  .hz-copy{justify-content:center; padding-bottom:150px}
  .hz .ht-tab{padding:10px 12px}
  .hz .ht-tab .city{font-size:21px; white-space:nowrap}
  .hz .ht-tab .mono{font-size:12.5px}
  .hz .ht-go{display:none}
}
@media (prefers-reduced-motion: reduce){ .hz-imgs img,.hz-imgs img.on{transition:none; transform:none} .hz-caret{display:none} }

/* the title, centred, and the city tabs */
.hz .hz-k{margin:0; font-size:13px; letter-spacing:.08em; text-transform:uppercase; text-wrap:balance; color:rgba(244,244,241,.9)}
.hz .ht-tab{gap:8px}
.hz .ht-tab .hz-td{font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(26px,2.2vw,34px); line-height:1; letter-spacing:-.01em}
.hz .ht-tab .hz-tc{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.hz .ht-tab.on .hz-tc{color:var(--soft)}
.hz h1 .hz-pre{font-weight:500; letter-spacing:-.025em}
.hz h1 .hz-cm{font-weight:600; letter-spacing:-.055em; white-space:nowrap}
.hz-copy.hz-a{left:0; right:0; align-items:center; text-align:center; padding:0 24px 150px}
.hz-a .hz-k{margin-bottom:clamp(20px,3.2vh,34px)}
.hz-a h1{font-size:clamp(60px,13.6vw,220px); line-height:.9}
.hz-a h1 .line:first-child{font-size:.25em; line-height:1.2; margin-bottom:.12em}
.hz-a h1 .line.hz-in-line{font-size:.3em; line-height:1.25; margin-top:.42em}
.hz-copy.hz-a::before{left:0; right:0; top:0; bottom:0; width:auto; background:radial-gradient(ellipse 74% 64% at 50% 44%, rgba(14,14,12,.34), rgba(14,14,12,.15) 62%, rgba(14,14,12,.05) 100%)}
@media (max-width:900px){
  .hz .ht-tab .hz-td{font-size:24px}
  .hz .ht-tab .hz-tc{font-size:10.5px}
  .hz .hz-k{font-size:11px}
  .hz-copy.hz-a{padding:0 20px 170px}
  .hz-a h1{font-size:clamp(52px,17vw,90px)}
  .hz-a h1 .hz-cm{white-space:normal}
  .hz-a h1 .line:first-child{font-size:.34em}
  .hz-a h1 .line.hz-in-line{font-size:.42em; margin-top:.3em}
  .hz-a .hz-k{max-width:24em; line-height:1.5}
  .hz-copy.hz-a::before{width:auto; background:radial-gradient(ellipse 95% 48% at 50% 44%, rgba(14,14,12,.4), rgba(14,14,12,.16) 65%, rgba(14,14,12,.06) 100%)}
}

/* review fixes: legible small labels, matching edges, bigger phone title */
.hz.leaving .hz-k{opacity:0 !important; transition:opacity .3s ease}
.hz-copy.hz-a::before{background:radial-gradient(ellipse 74% 64% at 50% 40%, rgba(14,14,12,.4), rgba(14,14,12,.17) 62%, rgba(14,14,12,.05) 100%)}
@media (max-width:900px){
  .hz-a h1{font-size:clamp(56px,21vw,110px)}
  .hz-a .hz-k span{display:block}
  .hz-a .hz-k .hz-k-sep{display:none}
}
.learn2 .l2-wrap{padding-top:clamp(48px,6vh,72px); padding-bottom:clamp(40px,5vh,64px)}
.l2-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(40px,5vw,64px); align-items:start}
.l2-art{margin:0; border-radius:var(--rr,22px); transform-origin:50% 20%; will-change:transform; overflow:hidden; aspect-ratio:16/8; background:var(--paper-2); width:100%}
.l2-art{position:relative}
.l2-art img, .l2-art video{width:100%; height:100%; object-fit:cover; display:block}
.l2-what{margin:0; font-family:var(--display); font-size:clamp(32px,3.2vw,46px); font-weight:600; letter-spacing:-0.04em; line-height:1.02; max-width:15em; text-wrap:balance}
.l2-copy{margin-top:0; max-width:30em; font-size:clamp(17px,1.4vw,19px); color:var(--muted)}
.l2-copy p{margin:0 0 1em}
.l2-copy p:last-child{margin-bottom:0}
.l2-copy .l2-strong{font-weight:600; color:var(--ink)}
@media (max-width:900px){ .l2-art{aspect-ratio:4/3} }
.wa-h{font-size:clamp(44px,6vw,92px); color:var(--on-dark)}
/* James edits: soft wash under section 01 */
.learn2{position:relative; overflow:hidden}
/* the ribbon from Get notified, lower and lighter, under the copy */
.l2-rib{left:-6%; top:-10%; width:112%; opacity:.55}
.learn2{background:var(--paper)}
.l2-wrap{position:relative}
.l2-what .line{padding-bottom:.08em; margin-bottom:-.08em}
/* James edits: lede sits tight under the hero; the copy block is its own section below */
.learn2 .l2-top{padding-top:clamp(28px,4vh,48px); padding-bottom:0}
.learn2 .l2-body{padding-top:clamp(28px,4vw,44px)}
.learn2 .l2-top{padding-top:clamp(48px,6vh,72px)}
/* James edits: speakers as pairs */
.sp2{padding-top:calc(var(--nav) + clamp(16px,3vw,40px)); padding-bottom:0}
.sp2 .sp-head{margin-bottom:clamp(28px,4vw,44px)}
.sp2-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,28px)}
.sp2-card{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); background:var(--white); border-radius:22px; overflow:hidden}
.sp2-ph{position:relative; background:#AEE1ED; aspect-ratio:1; overflow:hidden}
/* the photos carry the name and logo in their lower third; show the top so the card does not repeat them */
.sp2-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.sp2-init{position:absolute; inset:0; display:flex; align-items:flex-end; padding:9%; font-family:var(--display); font-weight:600; font-size:clamp(56px,7vw,110px); letter-spacing:-0.05em; line-height:.9; color:rgba(20,20,18,.22)}
.sp2-txt{display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding:clamp(20px,2.4vw,34px)}
.sp2-logo{display:block; height:calc(clamp(24px,2.5vw,38px) * var(--k)); width:auto; max-width:100%; align-self:flex-start}
.sp2-co{font-family:var(--display); font-weight:500; font-size:clamp(17px,1.5vw,22px); letter-spacing:-0.02em; line-height:1.15; color:var(--muted); max-width:12em}
.sp2-who{display:flex; flex-direction:column; gap:6px}
.sp2-who h3{font-size:clamp(24px,2.25vw,34px); letter-spacing:-0.035em; line-height:1.02}
.sp2-role{color:var(--muted); font-size:clamp(15px,1.2vw,17px)}
.sp2-where{font-size:11px; text-transform:uppercase; color:var(--muted); margin-top:8px}
.sp2-via{margin-top:2px; transition:color .3s}
a.sp2-card{color:inherit; text-decoration:none}
a.sp2-card:hover .sp2-via, a.sp2-card:focus-visible .sp2-via{color:var(--ink)}
.sp2-more{display:flex; align-items:center; justify-content:center; padding:24px; background:none; border:1px solid #DCDCD5; text-align:center}
.sp2-more .mono{text-transform:uppercase; color:var(--muted); font-size:12px; max-width:14em; line-height:1.5}
@media (max-width:900px){ .sp2-grid{grid-template-columns:1fr} .sp2-card{grid-template-columns:minmax(0,2fr) minmax(0,3fr)} .sp2-more{min-height:96px} }
.cp .sp2{padding-top:clamp(80px,11vh,120px)}
/* James edits: event programme on the San Francisco page. Dark band (the site's frame colour), lime label, big ghost numbers, one session per row. */
.pr{position:relative; z-index:3; background:var(--frame); color:var(--on-dark); padding:clamp(80px,11vh,130px) 0}
.pr::before,.pr::after{content:""; position:absolute; left:var(--fw); right:var(--fw); height:var(--frad); pointer-events:none}
.pr::before{top:calc(-1 * var(--frad)); background:radial-gradient(circle at 100% 0, transparent calc(var(--frad) - .5px), var(--frame) var(--frad)) left top / var(--frad) var(--frad) no-repeat, radial-gradient(circle at 0 0, transparent calc(var(--frad) - .5px), var(--frame) var(--frad)) right top / var(--frad) var(--frad) no-repeat}
.pr::after{bottom:calc(-1 * var(--frad)); background:radial-gradient(circle at 100% 100%, transparent calc(var(--frad) - .5px), var(--frame) var(--frad)) left top / var(--frad) var(--frad) no-repeat, radial-gradient(circle at 0 100%, transparent calc(var(--frad) - .5px), var(--frame) var(--frad)) right top / var(--frad) var(--frad) no-repeat}
.pr-in{max-width:1320px; margin:0 auto; padding-inline:calc(var(--fw) + var(--gutter))}
.pr-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px 40px; flex-wrap:wrap}
.pr-head h2{font-size:clamp(44px,6vw,92px); color:var(--on-dark)}
.pr-lede{margin:0; max-width:24em; color:rgba(244,244,241,.72); font-size:clamp(17px,1.4vw,19px)}
.pr-list{list-style:none; margin:clamp(40px,6vh,72px) 0 0; padding:0}
.pr-item{position:relative; display:grid; grid-template-columns:clamp(72px,9vw,140px) minmax(0,1fr); gap:0 clamp(16px,3vw,48px); padding:clamp(32px,4vw,56px) 0}
.pr-rule{position:absolute; left:0; right:0; top:0; height:1px; background:rgba(244,244,241,.22)}
.pr-item:last-child::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(244,244,241,.22)}
.pr-n{font-family:var(--display); font-weight:600; font-size:clamp(56px,8vw,128px); letter-spacing:-0.06em; line-height:.8; color:rgba(244,244,241,.14); font-variant-numeric:tabular-nums}
.pr-body{display:flex; flex-direction:column; gap:14px; max-width:40em}
.pr-when{color:var(--lime); text-transform:uppercase; font-size:12px}
.pr-body h3{font-size:clamp(28px,3.2vw,48px); letter-spacing:-0.04em; line-height:1.02; color:var(--on-dark)}
.pr-body p{margin:4px 0 0; color:rgba(244,244,241,.78); font-size:clamp(17px,1.4vw,19px); line-height:1.5}
.pr-meta{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:baseline; margin-top:8px}
.pr-meta b{font-weight:600; font-size:clamp(17px,1.4vw,20px)}
.pr-meta .mono{color:rgba(244,244,241,.6); font-size:12px; text-transform:uppercase}
.pr-bys{display:flex; flex-wrap:wrap; gap:16px 44px; margin-top:8px}
.pr-who{display:inline-flex; align-items:center; gap:14px}
.pr-av{width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:50% 12%; background:#AEE1ED; flex:none}
.pr-av-init{display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; letter-spacing:-0.02em; color:rgba(20,20,18,.6)}
.pr-by{display:flex; flex-direction:column; align-items:flex-start; gap:7px}
.pr-co{display:block; height:calc(17px * var(--k, 1)); width:auto; filter:brightness(0) invert(1); opacity:.9}
.pr-co-txt{font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:-0.02em; line-height:1; color:rgba(244,244,241,.9)}
@media (max-width:900px){ .pr-item{grid-template-columns:1fr; gap:10px} .pr-n{font-size:48px} }

/* ===================== spacing, form states ===================== */
.lg{color:rgba(20,20,18,.56)}
.sp2 .sp-head{padding-inline:0; margin-bottom:clamp(44px,5.5vw,76px)}
/* city pages: room under the last row of speakers, more where a dark band follows (its rounded corners need clear space) */
.sp2-city{padding-bottom:clamp(48px,6vh,72px)}
.sp2-city{padding-top:clamp(80px,11vh,120px)}
.sp2:has(+ .pr){padding-bottom:clamp(96px,13vh,150px)}
.rv-vp:focus-visible{outline:2px solid var(--ink); outline-offset:4px}
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none}
.form-err{flex-basis:100%; margin:10px 0 0; font-size:14px; color:#C2410C}
.f-form .form-err{position:absolute; top:100%; left:0}
.f-form{position:relative}
button[disabled]{opacity:.6; cursor:progress}
@media (max-width:900px){
  .sp2 .logos{flex-direction:column; align-items:flex-start; gap:14px}
  .sp2 .logos-vp{width:100%}
}

/* ===================== speaker padding + mobile menu ===================== */
.sp2{padding-inline:calc(var(--fw) + var(--gutter))}
.mm-btn{display:none}
.f-cta-x{display:contents}   /* keeps "Apply for SF" one run of text inside the flex button */
.mm{display:none}
@media (max-width:900px){
  .mm-btn{display:inline-flex; align-items:center; gap:10px; height:38px; padding:0 6px; background:none; border:0; color:var(--on-dark); font:inherit; font-size:15px; cursor:pointer}
  .mm-btn i{position:relative; width:18px; height:10px}
  .mm-btn i::before, .mm-btn i::after{content:""; position:absolute; left:0; right:0; height:1.5px; background:currentColor; transition:transform .45s cubic-bezier(.2,.8,.2,1), top .45s cubic-bezier(.2,.8,.2,1)}
  .mm-btn i::before{top:0} .mm-btn i::after{top:8.5px}
  .mm-btn[aria-expanded="true"] i::before{top:4.25px; transform:rotate(45deg)}
  .mm-btn[aria-expanded="true"] i::after{top:4.25px; transform:rotate(-45deg)}
  .mm{display:block; position:fixed; inset:0; z-index:41; background:var(--frame); color:var(--on-dark); opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s; overflow-y:auto; overscroll-behavior:contain}
  .mm.on{opacity:1; visibility:visible; transition:opacity .35s ease}
  .mm-in{min-height:100%; display:flex; flex-direction:column; padding:calc(var(--fw) + 88px) calc(var(--fw) + 20px) calc(var(--fw) + 24px)}
  .mm-in > *{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
  .mm.on .mm-in > *{opacity:1; transform:none}
  .mm.on .mm-in > :nth-child(2){transition-delay:.06s} .mm.on .mm-in > :nth-child(3){transition-delay:.1s} .mm.on .mm-in > :nth-child(4){transition-delay:.14s}
  .mm-links{display:flex; flex-direction:column; border-top:1px solid rgba(244,244,241,.14)}
  .mm-links a{padding:14px 0; border-bottom:1px solid rgba(244,244,241,.14); font-family:var(--display); font-size:clamp(28px,8.4vw,36px); font-weight:600; letter-spacing:-0.04em; line-height:1.05; text-decoration:none; color:var(--on-dark)}
  .mm-k{margin:30px 0 4px; text-transform:uppercase; color:var(--soft); font-size:12px}
  .mm-cities a{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; text-decoration:none; color:var(--on-dark)}
  .mm-cities .city{font-family:var(--serif); font-style:italic; font-size:28px; line-height:1.1}
  .mm-cities .mono{color:var(--soft); font-size:12px; text-transform:uppercase}
  .mm-cities a[aria-current] .city{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px}
  .mm-cta{align-self:stretch; justify-content:center; margin-top:auto; padding:16px 22px}
  .mm-cities + .mm-cta{margin-top:32px}
  html.mm-open .pill{opacity:0 !important; pointer-events:none !important}
  html.mm-open, html.mm-open body{overflow:hidden}
  .f-nav{gap:8px}
}
@media (prefers-reduced-motion: reduce){ .mm, .mm-in > *, .mm-btn i::before, .mm-btn i::after{transition:none !important} }
/* small phones: the menu goes icon-only so the logo and the page's button both fit */
@media (max-width:430px){
  .mm-btn{width:40px; justify-content:center; padding:0}
  .mm-btn span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .f-cta-x, .f-nav .f-cta-wide{display:none}
}
@media (max-width:380px){
  .f-logo{padding-right:16px}
  .f-logo img{width:134px}
}