/* Next Gen Summit, V1 prototype.
   Built from the approved flyer: bright paper, black ink, a magenta call to action,
   and cyan / magenta / yellow print registration used in rare doses. */

:root{
  --paper:#FAFAF8;
  --paper-2:#EFEFEC;
  --ink:#0B0B0F;
  --ink-2:#4A4A52;
  --ink-3:#7E7E87;
  --rule:#DCDCD8;
  --rule-strong:#85858E;
  /* turquoise: --accent fills buttons (ink label, 9.3:1); --accent-ink is the deeper tone for
     text, links and focus rings on paper (5:1), where the bright fill would be too light to read */
  --accent:#1FC7BE;
  --accent-hover:#12AFA7;
  --on-accent:var(--ink);
  --accent-ink:#007A74;
  --accent-ink-hover:#005F5A;
  --cyan:#00A3E6;
  --magenta:#EC008C;
  --yellow:#FFE500;
  --red-l:#FF2450;
  --green-l:#00E07A;
  --blue-l:#2E6BFF;
  --shade:11,11,15;
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --gutter:clamp(20px,4.2vw,72px);
  --nav-h:76px;
  --maxw:1560px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav-h);scrollbar-gutter:stable}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--paper);color:var(--ink);font:500 17px/1.6 var(--f-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
html:has(dialog[open]){overflow:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:4px;border-radius:3px}
.on-photo :focus-visible,.hero :focus-visible,.finale :focus-visible,.xp.is-lit :focus-visible{outline-color:#fff}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:300;background:var(--ink);color:#fff;padding:14px 18px;border-radius:8px;font:700 13px/1 var(--f-sans);letter-spacing:.08em;text-decoration:none;transition:top .4s var(--ease)}
.skip:focus{top:16px}

/* the one environment layer: a fixed sheet of print grain over the whole page */
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.07;background-size:220px 220px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.35'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- type ---------- */
.wm{font-family:var(--f-display);font-weight:900;font-style:normal;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144;letter-spacing:-.04em;line-height:.9;text-transform:none}
.label{font:700 12px/1.35 var(--f-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.label--light{color:rgba(255,255,255,.72)}
.draft-note{display:inline-flex;align-items:center;gap:10px;font:700 11px/1.3 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.draft-note::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* ---------- buttons ---------- */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:.75em;min-height:var(--h);padding:0 1.35em;border-radius:8px;background:var(--accent);color:var(--on-accent);font:700 13px/1 var(--f-sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color .4s var(--ease),transform .6s var(--ease)}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:scale(.97)}
.btn .arr{display:inline-block;transition:transform .6s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn--lg{--h:58px;font-size:14px;padding:0 1.7em}
.btn--sm{--h:42px;font-size:12px;padding:0 1.15em}
.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn--ghost:hover{background:transparent;box-shadow:inset 0 0 0 2px currentColor}
.textlink{display:inline-flex;align-items:center;gap:.6em;min-height:44px;font:700 12px/1 var(--f-sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.textlink .arr{display:inline-block;transition:transform .6s var(--ease)}
.textlink:hover .arr{transform:translateY(4px)}

/* ---------- registration: C, M and Y plates that settle into black ---------- */
.reg{position:relative;display:inline-block;isolation:isolate}
.reg__k{position:relative;display:block}
.reg__p{position:absolute;left:0;top:0;right:0;bottom:0;display:block;pointer-events:none;mix-blend-mode:multiply;opacity:0;transform:translate3d(0,0,0);transition:transform 1.5s var(--ease),opacity .5s var(--ease)}
.reg__p--c{color:var(--cyan)}
.reg__p--m{color:var(--magenta);transition-delay:.06s}
.reg__p--y{color:var(--yellow);transition-delay:.12s}
.reg--light .reg__p{mix-blend-mode:screen}
.reg--light .reg__p--c{color:var(--red-l)}
.reg--light .reg__p--m{color:var(--green-l)}
.reg--light .reg__p--y{color:var(--blue-l)}
.reg.is-armed .reg__p{opacity:1;transition:none}
.reg.is-armed .reg__p--c{transform:translate3d(-.055em,.018em,0)}
.reg.is-armed .reg__p--m{transform:translate3d(.045em,.035em,0)}
.reg.is-armed .reg__p--y{transform:translate3d(.012em,-.05em,0)}
.reg.is-armed.is-in .reg__p{transform:translate3d(0,0,0);transition:transform 1.5s var(--ease)}
.reg.is-armed.is-in .reg__p--m{transition-delay:.07s}
.reg.is-armed.is-in .reg__p--y{transition-delay:.14s}
.reg.is-armed.is-in.is-done .reg__p{opacity:0;transition:opacity .5s var(--ease);transition-delay:0s}

/* ---------- reveals ---------- */
.js .rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1s var(--ease) var(--d,0s),transform 1.3s var(--ease) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .rv.in.settled{transition-delay:0s}

/* ---------- nav ---------- */
.nav{position:fixed;left:0;right:0;top:0;z-index:80;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gutter);color:var(--ink);transition:color .5s var(--ease)}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(250,250,248,.94);box-shadow:0 1px 0 var(--rule);opacity:0;transition:opacity .5s var(--ease)}
.nav.on-paper::before{opacity:1}
.nav.on-photo{color:#fff}
.nav__mark{display:inline-flex;align-items:baseline;gap:.55em;text-decoration:none;min-height:44px;padding-top:6px;transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s linear 0s}
.nav__mark .wm{font-size:30px;line-height:1}
.nav__summit{font:700 8.5px/1 var(--f-sans);letter-spacing:.42em;text-transform:uppercase;transform:translateY(-3px)}
.nav.at-hero .nav__mark{opacity:0;transform:translate3d(0,-8px,0);visibility:hidden;transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s linear .4s}
.nav__links{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px)}
/* countdown in the bar: heavy numerals, unit letters in turquoise, colour inherited from the nav */
.count{flex:none;margin-right:auto;padding-left:clamp(12px,2vw,34px)}
.count__row{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.count__u{display:inline-flex;align-items:baseline}
.count__n{font:800 clamp(13px,1.05vw,15px)/1 var(--f-sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.count__l{font:700 9.5px/1 var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);transition:color .5s var(--ease)}
.nav.on-paper .count__l{color:var(--accent-ink)}
.count__to{font:700 9.5px/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.count__word{display:none}
.nav__link{position:relative;display:inline-flex;align-items:center;min-height:44px;font:700 12px/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:11px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s var(--ease)}
.nav__link:hover::after,.nav__link:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
.nav__menu{display:none}
@media (max-width:760px){
  :root{--nav-h:64px}
  .nav__link{display:none}
  .nav__menu{display:inline-flex}
  .nav__mark{display:none}          /* on phones the countdown takes the left of the bar; the wordmark still opens the hero and footer */
  .nav__summit{display:none}
  .count{padding-left:0}
  .count__u--hms,.count__to{display:none}
  .count__word{display:inline}
  .count__n{font-size:14px}
  .count__l{font-size:10px;letter-spacing:.12em}
  .nav__links{gap:10px}
}
/* small phones: the CTA keeps its full wording by tightening, so it never crowds MENU */
@media (max-width:440px){
  .nav .btn--sm{--h:40px;font-size:10.5px;letter-spacing:.07em;padding:0 .85em;gap:.5em}
  .nav__menu{font-size:11px;letter-spacing:.1em}
  .nav__links{gap:8px}
}

/* ---------- 01 hero ---------- */
.hero{position:relative;z-index:71;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#231a14}
.hero__media{position:absolute;inset:0;margin:0}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%);transform:scale(1.06);transition:transform 3.2s var(--ease)}
.is-ready .hero__img{transform:none}
.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--shade),.3) 0%,rgba(var(--shade),.06) 45%,rgba(var(--shade),0) 100%),linear-gradient(180deg,rgba(var(--shade),.32) 0%,rgba(var(--shade),0) 16%,rgba(var(--shade),0) 48%,rgba(var(--shade),.5) 74%,rgba(var(--shade),.84) 100%)}
.hero__inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) clamp(26px,5vh,54px)}
.hero__meta{display:inline-flex;align-items:center;min-height:25px;margin-bottom:clamp(-16px,-1.1vh,-6px);padding:0 10px;border-radius:6px;background:var(--accent);color:var(--on-accent);font:700 10px/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;text-shadow:none}
.hero__title{margin:-.26em 0 0;font-size:clamp(84px,19.2vw,340px);line-height:.84;text-shadow:0 2px 40px rgba(var(--shade),.18)}
.hero__title .reg{margin-left:-.045em;padding-bottom:.08em}
/* the flyer lockup: tracked SUMMIT tucked under the end of the wordmark */
.lockup{position:relative;display:inline-block}
.lockup__summit{position:absolute;right:0;top:91%;margin-right:-.62em;font:700 max(10px,.095em)/1 var(--f-sans);letter-spacing:.62em;text-transform:uppercase;text-shadow:none}
.hero__row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;margin-top:clamp(14px,2.4vh,26px);padding-top:clamp(18px,2.8vh,28px);border-top:1px solid rgba(255,255,255,.3)}
.hero__copy{max-width:44rem}
.hero__line{font:800 clamp(19px,2.2vw,34px)/1.1 var(--f-sans);letter-spacing:.015em;text-transform:uppercase}
/* the launch line sits between the promise and the paragraph, in the brand turquoise */
.hero__launch{margin-top:clamp(20px,3vh,32px);font:700 clamp(11px,1vw,13px)/1.5 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);text-shadow:0 1px 3px rgba(var(--shade),.65)}
.hero__note{margin-top:clamp(12px,1.9vh,20px);max-width:46ch;font:500 clamp(14px,1.05vw,16px)/1.5 var(--f-sans);color:rgba(255,255,255,.9);text-shadow:0 1px 3px rgba(var(--shade),.7)}
.hero__actions{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);flex:none}
@media (max-width:760px){
  .hero__img{object-position:var(--pos-m,50% 40%)}
  .hero__shade{background:linear-gradient(180deg,rgba(var(--shade),.36) 0%,rgba(var(--shade),0) 14%,rgba(var(--shade),0) 44%,rgba(var(--shade),.55) 66%,rgba(var(--shade),.86) 100%)}
  .hero__row{flex-direction:column;align-items:flex-start}
  .hero__copy{max-width:none}
  .hero__note{max-width:38ch}
  .hero__actions{width:100%;justify-content:space-between}
}

/* ---------- 02 what is next gen ---------- */
.what{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(120px,22vh,250px) var(--gutter) clamp(110px,19vh,220px)}
.what__title{margin-top:clamp(28px,6vh,70px);font-size:min(13.4vw,13rem);line-height:.92}
.what__title > .wm{display:block}
.what__rot{position:relative;display:block;height:1.18em;margin:-.04em 0 -.14em;overflow:hidden;overflow:clip}
.what__word{position:absolute;left:0;top:0;white-space:nowrap;line-height:1.08;opacity:0;transform:translate3d(0,72%,0);transition:transform .7s var(--ease),opacity .45s var(--ease)}
.what__word.is-current{opacity:1;transform:none}
.what__word.is-leaving{opacity:0;transform:translate3d(0,-46%,0);transition:transform .55s var(--ease-io),opacity .35s var(--ease)}
.what__dot{color:var(--accent)}
.what__foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,31rem);gap:28px 40px;align-items:end;margin-top:clamp(40px,8vh,96px)}
.what__lede{grid-column:2;font:500 clamp(19px,1.65vw,25px)/1.48 var(--f-sans);max-width:30ch}
.what__tools{grid-column:1;grid-row:1}
@media (max-width:760px){
  .what__foot{grid-template-columns:1fr}
  .what__lede,.what__tools{grid-column:1;grid-row:auto}
}

.toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;font:700 11px/1 var(--f-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.toggle__i{position:relative;width:10px;height:11px}
.toggle__i::before,.toggle__i::after{content:"";position:absolute;top:0;bottom:0;width:3px;background:currentColor}
.toggle__i::before{left:1px}
.toggle__i::after{right:1px}
.toggle[aria-pressed="true"] .toggle__i::before{left:1px;width:0;height:0;background:none;border-style:solid;border-width:5.5px 0 5.5px 9px;border-color:transparent transparent transparent currentColor}
.toggle[aria-pressed="true"] .toggle__i::after{display:none}
.toggle:hover{color:var(--ink)}

/* ---------- 03 the experience ---------- */
.xp{position:relative;overflow:hidden;overflow:clip;background:var(--paper);color:var(--ink);transition:color .8s var(--ease)}
.xp__stage{position:absolute;inset:0;z-index:0;background:#17120f;opacity:0;transition:opacity .9s var(--ease)}
.xp.is-lit .xp__stage{opacity:1}
.xp__bg{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s var(--ease)}
.xp__bg img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(1.07);transition:transform 2.6s var(--ease)}
.xp__bg.is-active{opacity:1}
.xp__bg.is-active img{transform:none}
.xp__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--shade),.8) 0%,rgba(var(--shade),.62) 50%,rgba(var(--shade),.6) 100%)}
.xp__inner{position:relative;z-index:1;min-height:100vh;min-height:100svh;max-width:var(--maxw);margin:0 auto;padding:calc(var(--nav-h) + 48px) var(--gutter) 72px;display:flex;flex-direction:column;justify-content:center}
.xp.is-lit{color:#fff}
.xp .label{transition:color .8s var(--ease)}
.xp.is-lit .label{color:rgba(255,255,255,.86)}
.xp.is-lit .xp__phrase,.xp.is-lit .xp__note{text-shadow:0 2px 26px rgba(var(--shade),.38)}
.xp__list{list-style:none;margin:clamp(26px,5vh,60px) 0 0;padding:0}
.xp__item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,21rem);align-items:end;gap:10px 32px}
.xp__phrase{font-size:clamp(50px,9.2vw,160px);line-height:1.02;padding-bottom:.06em;width:max-content;max-width:100%;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.xp__note{margin-bottom:1.2em;font:600 16px/1.5 var(--f-sans);max-width:25ch;opacity:0;transform:translate3d(-14px,0,0);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.xp.has-active .xp__item:not(.is-active) .xp__phrase{opacity:.3}
.xp__item.is-active .xp__phrase{transform:translate3d(clamp(8px,1.4vw,24px),0,0)}
.xp__item.is-active .xp__note{opacity:1;transform:none}
@media (hover:none),(pointer:coarse),(max-width:900px){
  .xp__stage{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh}
  .xp__shade{background:linear-gradient(180deg,rgba(var(--shade),.56) 0%,rgba(var(--shade),.68) 100%)}
  .xp__inner{min-height:0;display:block;padding-top:clamp(90px,16vh,160px);padding-bottom:clamp(60px,12vh,120px)}
  .xp__list{margin-top:0}
  .xp__item{grid-template-columns:1fr;min-height:68vh;min-height:68svh;align-content:center}
  .xp__phrase{width:auto}
  .xp__note{margin-bottom:0;font-size:16px}
  .xp__item.is-active .xp__phrase{transform:none}
}

/* ---------- 04 the invitation ---------- */
.invite{position:relative;background:var(--paper)}
.invite__liquid{position:relative;height:clamp(250px,48vh,520px);overflow:hidden;background:var(--paper)}
.invite__liquid canvas{display:block;width:100%;height:100%}
.invite__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:none}
.no-webgl .invite__liquid canvas{display:none}
.no-webgl .invite__fallback{display:block}
.invite__body{max-width:var(--maxw);margin:0 auto;padding:clamp(20px,4vh,48px) var(--gutter) clamp(110px,19vh,210px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:end}
.invite__head{grid-column:1/-1}
.invite__date{font:800 clamp(124px,23.5vw,400px)/.8 var(--f-sans);letter-spacing:-.05em;text-transform:uppercase;margin-left:-.05em}
.invite__date .reg{display:block}
.invite__date .reg + .reg{margin-top:.02em}
.invite__card{padding-bottom:.4em}
.invite__details{margin:0}
.invite__details div{display:grid;grid-template-columns:minmax(5.5rem,auto) minmax(0,1fr);gap:8px 28px;align-items:baseline;padding:17px 0;border-top:1px solid var(--rule)}
.invite__details div:last-child{border-bottom:1px solid var(--rule)}
.invite__details dt{font:700 11px/1.3 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.invite__details dd{margin:0;font:800 clamp(16px,1.45vw,21px)/1.3 var(--f-sans);letter-spacing:.02em;text-transform:uppercase}
.invite__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:30px}
.invite__small{font:600 13px/1.45 var(--f-sans);color:var(--ink-2);max-width:30ch}

@media (max-width:900px){
  .invite__body{grid-template-columns:1fr}
}
/* narrow phones: label above value, so a long label like "Registration" never crowds it */
@media (max-width:420px){
  .invite__details div{grid-template-columns:1fr;gap:6px}
}

/* ---------- 05 who's in the room ---------- */
.room{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,8vh,90px) var(--gutter) clamp(110px,18vh,200px)}
.room__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:22px 40px;margin-bottom:clamp(34px,6vh,64px)}
.room__head .label{grid-column:1/-1}
.room__title{font-size:clamp(54px,8.4vw,136px);line-height:.94}
.room__note{justify-self:end;text-align:right;padding-bottom:.9em}
.room__note p{margin-top:8px;font:600 13px/1.45 var(--f-sans);color:var(--ink-2);max-width:30ch;margin-left:auto}
.room__note .draft-note{margin-top:0;max-width:none;white-space:nowrap;font:700 11px/1.3 var(--f-sans);letter-spacing:.16em;color:var(--accent-ink)}
/* the runway: one row of editorial portraits running edge to edge, looping without a seam.
   site.js clones the row as many times as the screen needs and drives one transform. */
.run{position:relative;margin:clamp(30px,5vh,52px) calc(50% - 50vw) 0;overflow:hidden;overflow:clip}
.run::before,.run::after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:clamp(24px,6vw,110px);pointer-events:none}
.run::before{left:0;background:linear-gradient(90deg,var(--paper) 10%,rgba(250,250,248,0))}
.run::after{right:0;background:linear-gradient(270deg,var(--paper) 10%,rgba(250,250,248,0))}
.run__track{display:flex;align-items:flex-start;gap:clamp(16px,2.2vw,34px);list-style:none;margin:0;padding:0;will-change:transform}
.spk{flex:0 0 auto;width:clamp(176px,46vw,284px)}
/* one card in every three sits lower: editorial rhythm that repeats exactly with the loop */
.spk--drop{margin-top:clamp(14px,2.4vw,42px)}
.spk__card{display:block;outline-offset:6px}
.spk__img{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--paper-2)}
.spk__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.14) brightness(.94);transition:transform 1.1s var(--ease),filter .6s var(--ease),opacity .6s var(--ease)}
.spk__chip{position:absolute;left:10px;bottom:10px;padding:7px 9px;border-radius:4px;background:rgba(17,17,17,.82);color:#fff;font:700 10px/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase}
.spk__name{margin-top:14px;font:800 clamp(14px,1.05vw,17px)/1.25 var(--f-sans);letter-spacing:.02em;text-transform:uppercase;transition:color .4s var(--ease),opacity .5s var(--ease)}
.spk__role{margin-top:7px;font:600 13px/1.45 var(--f-sans);color:var(--ink-2);transition:opacity .5s var(--ease)}
/* the note keeps its space whether or not it is showing, so revealing it never moves the row */
.spk__note{margin-top:9px;min-height:3em;font:500 13px/1.5 var(--f-sans);color:var(--ink-2);opacity:0;transform:translate3d(0,6px,0);transition:opacity .5s var(--ease),transform .6s var(--ease)}
/* the speaker being looked at: the picture sharpens inside a card that never changes size */
.spk.is-active .spk__img img{transform:scale(1.045);filter:grayscale(.8) contrast(1.2) saturate(1.15) brightness(1)}
.spk.is-active .spk__name{color:var(--accent-ink-hover)}
.spk.is-active .spk__note{opacity:1;transform:none}
.run.has-active .spk:not(.is-active) .spk__img img{opacity:.5}
.run.has-active .spk:not(.is-active) .spk__name,.run.has-active .spk:not(.is-active) .spk__role{opacity:.45}
.room__credit{margin-top:clamp(26px,4vh,40px);font:500 12px/1.5 var(--f-sans);color:var(--ink-3)}
.room__credit .linkish{font-size:12px}

@media (max-width:760px){
  .room__head{grid-template-columns:1fr}
  .room__note{justify-self:start;text-align:left;padding-bottom:0}
  .room__note p{margin-left:0}
  .room__note .draft-note{white-space:normal}
}

/* ---------- the pitch competition, teased between the invitation and the lineup ---------- */
.pcta{position:relative;display:flex;align-items:center;min-height:clamp(560px,86vh,860px);color:#fff;overflow:hidden;background:#0B0B0F}
.pcta__media{position:absolute;inset:0;margin:0}
.pcta__media img{width:100%;height:100%;object-fit:cover;object-position:56% 50%;filter:grayscale(1) contrast(1.04)}
.pcta__shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,6,9,.72) 0%,rgba(6,6,9,.42) 44%,rgba(6,6,9,.08) 78%,rgba(6,6,9,0) 100%),
  linear-gradient(180deg,rgba(6,6,9,.52) 0%,rgba(6,6,9,.2) 30%,rgba(6,6,9,.28) 62%,rgba(6,6,9,.7) 92%,rgba(6,6,9,.82) 100%)}
.pcta__inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(70px,12vh,130px) var(--gutter)}
.pcta__title{margin-top:clamp(14px,2.4vh,26px);font-size:clamp(44px,7.6vw,128px);line-height:.9;text-shadow:0 2px 40px rgba(6,6,9,.5)}
.pcta__copy{margin-top:clamp(18px,2.8vh,30px);max-width:48ch;font:500 clamp(15px,1.2vw,18px)/1.6 var(--f-sans);color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(6,6,9,.7)}
.pcta__cta{margin-top:clamp(26px,4vh,44px)}
@media (max-width:560px){.pcta__cta .btn{width:100%;justify-content:center}}

/* ---------- 06 who nextgen is for ---------- */
/* One composition: three editorial panels that rise into place as the section arrives, sharing one
   turquoise hairline, and whichever panel is being looked at shows its phrase while the other two
   settle back. site.js writes --p (0→1 as the headline hands off) and --q (the hairline drawing in);
   with no script at all everything below still reads as a static layout. */
.gen{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(110px,18vh,210px) var(--gutter) clamp(100px,16vh,190px);border-top:1px solid var(--rule)}
.gen__head,.gen__art,.gen__end{position:relative;z-index:1}
.gen__intro{margin-top:clamp(26px,4.5vh,54px)}
.gen__title{font-size:clamp(46px,7.4vw,124px);line-height:.92;opacity:calc(1 - var(--p,0) * .55);transform:translate3d(0,calc(var(--p,0) * -3vh),0)}
.gen__lede{margin:clamp(22px,3.4vh,40px) 0 0 auto;font:500 clamp(17px,1.4vw,21px)/1.5 var(--f-sans);color:var(--ink-2);max-width:32ch}

/* the headline's numerals, reborn as the ground behind the portraits */
.gen__art{margin-top:clamp(56px,9vh,110px)}

/* one hairline running behind the lineup, showing in the gaps between the cards */
.gen__rail{position:absolute;z-index:0;left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);top:var(--rail-y,54%);height:1px;background:var(--accent);opacity:.5;transform:scaleX(var(--q,0));transform-origin:0 50%;pointer-events:none}

/* three cards, one lineup: side by side, barely apart, stepping up to the right */
.gen__set{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,26px);align-items:start;perspective:1600px}
.gen__stage--hs{margin-top:clamp(30px,4.4vw,64px)}
.gen__stage--college{margin-top:clamp(15px,2.2vw,32px)}
.gen__stage--pro{margin-top:0}

/* the card is the container: the picture, its number and its name all live inside it */
.gen__card{position:relative;display:block;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate;transition:transform .8s var(--ease)}
.gen__card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.gen__shot{position:relative;margin:0;aspect-ratio:3/4}
.gen__shot img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);filter:grayscale(1) contrast(1.06) brightness(.92);transition:transform 1.6s var(--ease),filter .7s var(--ease)}
/* two scrims, top and bottom, so the number and the name always sit on their own ground */
.gen__shot::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,6,9,.28) 0%,rgba(6,6,9,.04) 20%,rgba(6,6,9,.02) 44%,rgba(6,6,9,.24) 68%,rgba(6,6,9,.5) 88%,rgba(6,6,9,.6) 100%);transition:opacity .6s var(--ease)}
.gen__no{margin-bottom:clamp(8px,.8vw,12px);font:700 clamp(11px,.85vw,13px)/1 var(--f-sans);letter-spacing:.24em;color:var(--accent);text-shadow:0 1px 8px rgba(0,0,0,.75)}
.gen__plate{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:clamp(16px,1.7vw,26px);display:grid;grid-template-rows:auto auto 0fr;transition:grid-template-rows .65s var(--ease)}
/* the text block carries its own ground, sized to itself: the whole plate sits on a settled wash
   and a band above it fades that wash in, so legibility never depends on where the card gradient
   happens to fall, on how bright the crop is, or on how many lines a name takes */
.gen__plate::before{content:"";position:absolute;z-index:-1;inset:-190px 0 0 0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,9,0) 0,rgba(6,6,9,.06) 52px,rgba(6,6,9,.24) 98px,rgba(6,6,9,.5) 144px,rgba(6,6,9,.78) 190px,rgba(6,6,9,.88) 100%)}
.gen__name{font-size:clamp(28px,2.7vw,48px);line-height:.9;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5)}
/* the snippet keeps its place in the flow, so showing it never moves the card or the name */
.gen__reveal{overflow:hidden;opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s var(--ease),transform .65s var(--ease)}
.gen__line{margin-top:clamp(10px,1vw,14px);font:800 clamp(14px,1.05vw,17px)/1.3 var(--f-sans);letter-spacing:.01em;color:var(--accent);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.gen__copy{margin-top:6px;font:500 clamp(13px,.95vw,15px)/1.45 var(--f-sans);color:rgba(255,255,255,.92);max-width:30ch;text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* the card being looked at: it comes forward a little, the picture warms, the snippet arrives */
.gen__stage.is-active .gen__card{transform:scale(1.03)}
.gen__stage.is-active .gen__shot img{filter:grayscale(.78) contrast(1.14) saturate(1.16) brightness(.96);transform:scale(1.04)}
.gen__stage.is-active .gen__shot::after{opacity:1}
.gen__stage.is-active .gen__plate{grid-template-rows:auto auto 1fr}
.gen__stage.is-active .gen__reveal{opacity:1;transform:none}
.gen__set.has-active .gen__stage:not(.is-active) .gen__card{transform:scale(.988)}
.gen__set.has-active .gen__stage:not(.is-active) .gen__shot img{opacity:.78}

/* dealt into the lineup: each card rises from below already turned, and settles facing the reader.
   One transform, GPU only, ending on the section's own decelerating curve so nothing overshoots. */
.js .gen__stage.rv{opacity:0;transform:translate3d(0,86px,0) rotateY(-13deg) rotateX(6deg) scale(.93);transform-origin:50% 100%;transition:opacity .9s var(--ease) var(--d,0s),transform 1.35s var(--ease) var(--d,0s)}
.js .gen__stage.rv.in{opacity:1;transform:none}

/* the payoff: where the run of stages lands */
.gen__end{margin:clamp(64px,10vh,130px) 0 0 auto;max-width:36rem;text-align:right}
.gen__end-kicker{width:fit-content;margin-left:auto;font:700 11px/1.3 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.gen__end-title{margin-top:14px;font-size:clamp(40px,5.2vw,84px);line-height:.95}
.gen__close{margin:clamp(18px,2.6vh,26px) 0 0 auto;max-width:34ch;font:500 clamp(16px,1.3vw,19px)/1.55 var(--f-sans);color:var(--ink-2)}
/* below the single row the frames break apart, so the rail turns vertical and threads the stack
   down the margin instead, where it can never reach a label */
@media (max-width:1000px){
  .gen__rail{left:calc(var(--gutter) * -.42);right:auto;top:0;bottom:0;width:1px;height:auto;transform:scaleY(var(--q,0));transform-origin:50% 0}
  .gen__lede{margin-left:0}
  .gen__end{margin-left:0;text-align:left}
  .gen__end-kicker,.gen__close{margin-left:0}
}
/* tablets: still one lineup, just tighter, with the step between cards reduced */
@media (min-width:761px) and (max-width:1000px){
  .gen__set{gap:clamp(10px,1.4vw,18px)}
  .gen__stage--hs{margin-top:clamp(18px,3vw,34px)}
  .gen__stage--college{margin-top:clamp(9px,1.5vw,17px)}
  .gen__name{font-size:clamp(24px,3.3vw,34px)}
  .gen__copy{font-size:13px}
}
/* phones: never three across. One card at a time, each dealt in as it arrives. */
@media (max-width:760px){
  .gen{padding-top:clamp(84px,13vh,120px);padding-bottom:clamp(80px,12vh,110px)}
  .gen__art{margin-top:40px}
  .gen__set{display:block;perspective:1100px}
  .gen__stage{width:88%;margin:0 auto}
  .gen__stage + .gen__stage{margin-top:clamp(22px,5vw,36px)}
  .gen__stage--hs,.gen__stage--college,.gen__stage--pro{margin-top:0}
  .gen__stage + .gen__stage{margin-top:clamp(22px,5vw,36px)}
  .gen__shot{aspect-ratio:4/5}
  .gen__name{font-size:clamp(32px,8.6vw,44px)}
  .gen__copy{font-size:14px;max-width:34ch}
  /* a shorter, gentler deal on a small screen, where the cards arrive one after another anyway */
  .js .gen__stage.rv{transform:translate3d(0,56px,0) rotateY(-9deg) rotateX(4deg) scale(.95)}
  .gen__end{margin-top:52px}
}

/* ---------- 07 finale ---------- */
.finale{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;color:#fff;overflow:hidden;background:#231a14}
.finale__media{position:absolute;inset:0;margin:0}
.finale__media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.finale__shade{position:absolute;inset:0;background:radial-gradient(ellipse 72% 62% at 50% 52%,rgba(var(--shade),.74) 0%,rgba(var(--shade),.56) 60%,rgba(var(--shade),.34) 100%),linear-gradient(180deg,rgba(var(--shade),.35) 0%,rgba(var(--shade),0) 30%,rgba(var(--shade),0) 70%,rgba(var(--shade),.45) 100%)}
.finale__inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:calc(var(--nav-h) + 40px) var(--gutter) 84px;display:flex;flex-direction:column;align-items:center;text-align:center}
.finale__wm{font-size:clamp(28px,2.8vw,42px);line-height:1}
.finale__title{margin-top:clamp(14px,2.6vh,26px);font-size:clamp(76px,15.5vw,264px);line-height:.9;text-shadow:0 2px 50px rgba(var(--shade),.2)}
.finale__cta{margin-top:clamp(34px,5.6vh,58px)}
.hero .textlink{text-shadow:0 1px 3px rgba(var(--shade),.65)}

/* ---------- footer ---------- */
/* footer: social icons on their own line, then the text links on one line, all centred */
.foot{display:grid;justify-items:center;gap:clamp(18px,3vh,28px);padding:clamp(30px,5vh,48px) var(--gutter) clamp(24px,4vh,36px);background:var(--paper);border-top:1px solid var(--rule);text-align:center}
.foot__social{display:flex;justify-content:center;gap:clamp(22px,4vw,40px);list-style:none;margin:0;padding:0}
.soc{display:grid;justify-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.soc__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--paper);transition:background-color .35s var(--ease),transform .35s var(--ease)}
.soc__icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.soc__icon .soc__dot{fill:currentColor;stroke:none}
.soc:hover .soc__icon{background:var(--accent-ink);transform:translateY(-2px)}
.soc:focus-visible .soc__icon{outline:2px solid var(--accent-ink);outline-offset:3px}
.soc:focus-visible{outline:none}
.soc__label{font:700 10.5px/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.soc:hover .soc__label{color:var(--accent-ink)}
.foot__nav ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 clamp(18px,3vw,34px);list-style:none;margin:0;padding:0}
.foot__nav a,.foot__nav button{display:inline-flex;align-items:center;min-height:44px;font:700 12px/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.foot__nav a:hover,.foot__nav button:hover{color:var(--accent-ink)}
/* the address keeps its own lowercase: it is an address, not a label, and it reads better and
   fits on one line beside the other two links on a phone */
.foot__nav a.foot__mail{text-transform:none;letter-spacing:.01em;font-weight:600}
.foot__note{font:600 12px/1.5 var(--f-sans);color:var(--ink-3)}
@media (max-width:560px){
  .foot__nav ul{gap:0 clamp(10px,3.4vw,18px)}
  .foot__nav a,.foot__nav button{font-size:clamp(9.5px,2.9vw,11px);letter-spacing:.08em}
  .foot__nav a.foot__mail{font-size:clamp(10.5px,3.2vw,12px);letter-spacing:0}
}

/* ---------- drawers ---------- */
.drawer{position:fixed;inset:0;margin:0 0 0 auto;width:min(560px,100%);max-width:100%;height:100%;max-height:100%;padding:0;border:0;background:var(--paper);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;
  transform:translate3d(100%,0,0);transition:transform .65s var(--ease),overlay .65s allow-discrete,display .65s allow-discrete}
.drawer[open]{transform:none}
@starting-style{.drawer[open]{transform:translate3d(100%,0,0)}}
.drawer::backdrop{background:rgba(var(--shade),0);transition:background-color .65s var(--ease),overlay .65s allow-discrete,display .65s allow-discrete}
.drawer[open]::backdrop{background:rgba(var(--shade),.5)}
@starting-style{.drawer[open]::backdrop{background:rgba(var(--shade),0)}}
.drawer__in{min-height:100%;display:flex;flex-direction:column;padding:14px clamp(22px,4vw,48px) 36px}
/* the header rides along, so Close is always within reach however long a panel gets */
.drawer__top{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;min-height:60px;margin:-14px calc(clamp(22px,4vw,48px) * -1) 0;padding:14px clamp(22px,4vw,48px) 10px;background:var(--paper)}
.drawer__close{display:inline-grid;place-items:center;width:48px;height:48px;margin-right:-12px;border-radius:8px;transition:background-color .3s var(--ease)}
.drawer__close:hover{background:var(--paper-2)}
.drawer__close svg{width:18px;height:18px}
.drawer__title{margin:clamp(26px,6vh,64px) 0 clamp(24px,4vh,40px);font-size:clamp(46px,6vw,78px);line-height:.95}
.drawer__foot{margin-top:auto;padding-top:36px;font:600 14px/1.5 var(--f-sans);color:var(--ink-2)}
.linkish{display:inline;min-height:0;font:700 14px/1.5 var(--f-sans);color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.linkish:hover{color:var(--accent-ink-hover)}

.paths{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.paths > li{border-bottom:1px solid var(--rule)}
.path{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;padding:22px 0;text-decoration:none}
.path__name{font:800 clamp(26px,3vw,34px)/1 var(--f-sans);letter-spacing:.01em;text-transform:uppercase}
.path__note{grid-column:1;font:600 14px/1.4 var(--f-sans);color:var(--ink-2)}
.path__arr{grid-column:2;grid-row:1 / span 2;font:700 26px/1 var(--f-sans);transition:transform .6s var(--ease),color .3s var(--ease)}
.path:hover .path__arr{transform:translateX(6px);color:var(--accent-ink)}
.path[aria-expanded="true"] .path__arr{transform:rotate(90deg);color:var(--accent-ink)}

/* the volunteer panel: a short brief, the quick note, then applying for a role as the main move */
.vol{padding:4px 0 30px}
.vol[hidden]{display:none}
.vol__t{font:800 clamp(17px,1.4vw,20px)/1.3 var(--f-sans);letter-spacing:.01em}
.vol > p{margin-top:10px;font:500 15px/1.6 var(--f-sans);color:var(--ink-2);max-width:48ch}
.vol__roles{color:var(--ink);font-weight:600}
.vol__cta{margin-top:clamp(22px,2.4vw,30px)}
@media (max-width:560px){
  .vol > p{font-size:14.5px;line-height:1.55}
  .vol__cta{margin-top:22px}
  .vol__cta .btn{width:100%;justify-content:center}
}
.mini{display:grid;gap:14px;padding:2px 0 30px}
.mini[hidden]{display:none}
.field label{display:block;margin-bottom:7px;font:700 11px/1.3 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.field input{width:100%;height:52px;padding:0 14px;border:1.5px solid var(--rule-strong);border-radius:8px;background:#fff;color:var(--ink);font:500 16px/1 var(--f-sans);transition:border-color .3s var(--ease)}
.field input:focus-visible{outline:2px solid var(--accent-ink);outline-offset:1px;border-color:var(--accent-ink)}
.mini__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.mini__note{font:600 12.5px/1.45 var(--f-sans);color:var(--ink-2)}
.mini__done{padding:6px 0 30px;font:700 17px/1.45 var(--f-sans)}
.mini__done small{display:block;margin-top:6px;font:600 13px/1.45 var(--f-sans);color:var(--ink-2)}

.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;min-height:64px;padding:16px 0;list-style:none;cursor:pointer;font:700 clamp(17px,1.4vw,19px)/1.35 var(--f-sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-ink)}
.faq__plus{position:relative;width:14px;height:14px;flex:none}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:currentColor;transition:transform .5s var(--ease)}
.faq__plus::after{transform:rotate(90deg)}
.faq details[open] .faq__plus::after{transform:rotate(0)}
.faq__a{padding:0 32px 22px 0;font:500 16px/1.6 var(--f-sans);color:var(--ink-2)}
.faq__a p + p{margin-top:8px}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:clip;transition:height .5s var(--ease),content-visibility .5s allow-discrete}
  .faq details[open]::details-content{height:auto}
}

.menu__list{list-style:none;margin:clamp(20px,5vh,48px) 0 0;padding:0;border-top:1px solid var(--rule)}
.menu__list li{border-bottom:1px solid var(--rule)}
.menu__list button,.menu__list a{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:72px;font:800 26px/1 var(--f-sans);text-transform:uppercase;text-decoration:none}

@media (pointer:coarse){
  .btn{min-height:max(var(--h),44px)}
}

/* ---------- reduced motion: every choreographed element in its final state ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .hero__img{transform:none}
  .reg.is-armed .reg__p{opacity:0}
  .xp__bg img{transform:none}
  /* the static version: no frame ever grows, recolours or yields; the numerals and the rail simply sit there */
  .gen__title{opacity:1;transform:none}
  .gen__rail{transform:none}
  .js .gen__stage.rv{opacity:1;transform:none}
  .gen__card{transform:none!important}
  .gen__shot img{transform:none!important;opacity:1!important}
  .gen__plate{grid-template-rows:auto auto auto!important}
  .gen__reveal{opacity:1!important;transform:none!important}
  /* the speaker runway stops moving and becomes a plain wrapped row, every note already showing */
  .run{margin-inline:0;overflow:visible}
  .run::before,.run::after{display:none}
  .run__track{flex-wrap:wrap;transform:none!important}
  .spk{width:clamp(200px,30vw,284px)}
  .spk--drop{margin-top:0}
  .spk__note{opacity:1!important;transform:none!important}
  .spk__img img{transform:none!important}
  .js .gen__stage.rv{opacity:1;transform:none}
  .gen__line{opacity:1!important;transform:none!important}
}

/* pause every loop while the tab is hidden */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* one photographic world: the closing frame shares the hero's black and white */
.finale__media img{filter:grayscale(1) contrast(1.04)}



/* ---------- waitlist / registration form ---------- */
.drawer__lede{margin:-12px 0 clamp(22px,3.5vh,34px);font:500 16px/1.55 var(--f-sans);color:var(--ink-2);max-width:40ch}
.form{display:grid;gap:20px;padding-bottom:8px}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:480px){.form__row{grid-template-columns:1fr}}
.field__opt{letter-spacing:.06em;text-transform:none;font-weight:600}
.field input:user-invalid{border-color:#B0123E}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.choice{margin:0;padding:0;border:0;min-width:0}
.choice legend{padding:0;margin-bottom:9px;font:700 11px/1.3 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.choice__opts{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1.5px solid var(--rule-strong);border-radius:8px;background:#fff;color:var(--ink);font:700 14px/1 var(--f-sans);transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.chip:hover span{border-color:var(--ink)}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--accent-ink);outline-offset:3px}
.form__error{padding:12px 14px;border-radius:8px;background:#FBE9EE;color:#8A1233;font:600 14px/1.45 var(--f-sans);outline:none}
.form__error[hidden]{display:none}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:4px}
.form__fine{font:600 12.5px/1.5 var(--f-sans);color:var(--ink-2);max-width:34ch}
.btn:disabled{cursor:progress;opacity:.75}
.done{display:flex;flex-direction:column;outline:none}
.done[hidden]{display:none}
.done__kicker{margin-top:clamp(26px,6vh,64px)}
.done__title{margin:14px 0 30px;font-size:clamp(60px,8vw,104px);line-height:.9;padding-bottom:.04em}
.done__text{font:600 18px/1.5 var(--f-sans);max-width:34ch}
.done__text + .done__text{margin-top:10px}
.done__text--muted{font-weight:500;font-size:16px;color:var(--ink-2)}
.done__text strong{color:var(--ink);font-weight:700;overflow-wrap:anywhere}
.done__card{margin:30px 0 22px}
.done .mini__note{margin-top:22px}
.done .mini__row{margin-top:30px}

/* standalone confirmation pages (used when JavaScript is off) */
.received{min-height:100vh;min-height:100svh;display:flex;align-items:center}
.received__main{width:100%;max-width:640px;margin:0 auto;padding:48px var(--gutter)}
.received__mark{display:flex;width:max-content;align-items:baseline;gap:.55em;margin-bottom:clamp(40px,9vh,90px);text-decoration:none}
.received .nav__summit{display:inline}
.received .draft-note{display:flex}
.received__mark .wm{font-size:34px;line-height:1}
.received .done__title{font-size:clamp(64px,14vw,128px)}
.received .btn{margin-top:8px}