/* ============================================================================
   NextGen Summit — Pitch Competition
   Rides on site.css: same tokens, type, buttons, drawers, reveal system.
   Nothing here redefines a token; this file is composition only.
   ========================================================================= */

.nav__link.is-here{color:var(--accent-ink);cursor:default}
.on-photo .nav__link.is-here{color:var(--accent)}

/* ---------- hero: photograph, then the line lands across it ---------- */
.ph{position:relative;z-index:71;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#0B0B0F}
.ph__media{position:absolute;inset:0;margin:0}
.ph__img{width:100%;height:100%;object-fit:cover;object-position:62% 46%;filter:grayscale(1) contrast(1.08)}
.ph__shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,6,9,.82) 0%,rgba(6,6,9,.5) 42%,rgba(6,6,9,.1) 72%,rgba(6,6,9,0) 100%),
  linear-gradient(180deg,rgba(6,6,9,.6) 0%,rgba(6,6,9,.12) 22%,rgba(6,6,9,.2) 52%,rgba(6,6,9,.78) 86%,rgba(6,6,9,.92) 100%)}
.ph__inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:calc(var(--nav-h) + 24px) var(--gutter) clamp(30px,6vh,64px)}
.ph__eyebrow{font:700 clamp(10px,.82vw,12px)/1.4 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.ph__title{margin:clamp(14px,2.4vh,26px) 0 0;font-size:clamp(52px,10.4vw,178px);line-height:.88;text-shadow:0 2px 40px rgba(6,6,9,.4)}
.ph__l1,.ph__l2{display:block}
/* the second line arrives from behind the first rather than simply fading up */
.js .ph__l2.rv{opacity:0;transform:translate3d(0,.34em,0) scale(.97);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.6s var(--ease) var(--d,0s)}
.js .ph__l2.rv.in{opacity:1;transform:none}
.ph__l2{color:var(--accent)}
.ph__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px clamp(28px,4vw,72px);margin-top:clamp(22px,3.6vh,40px);padding-top:clamp(18px,2.6vh,28px);border-top:1px solid rgba(255,255,255,.28)}
.ph__lede{max-width:52ch;font:500 clamp(15px,1.15vw,18px)/1.55 var(--f-sans);color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(6,6,9,.6)}
.ph__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(18px,2.4vw,34px);flex:none}
.ph__note{grid-column:1;max-width:52ch;font:600 12.5px/1.5 var(--f-sans);color:rgba(255,255,255,.72);text-shadow:0 1px 10px rgba(6,6,9,.7)}
@media (max-width:860px){
  .ph__foot{grid-template-columns:1fr;align-items:start}
  .ph__cta{width:100%}
  .ph__cta .btn{flex:1 1 auto;justify-content:center}
}

/* ---------- the opportunity: $10K over the room ---------- */
.opp{position:relative;display:flex;align-items:center;min-height:92vh;color:#fff;overflow:hidden;background:#0B0B0F}
.opp__media{position:absolute;inset:0;margin:0}
.opp__media img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;filter:grayscale(1) contrast(1.1) brightness(.82)}
.opp__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,9,.74) 0%,rgba(6,6,9,.4) 34%,rgba(6,6,9,.52) 66%,rgba(6,6,9,.88) 100%)}
.opp__inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(80px,13vh,150px) var(--gutter)}
.opp__prize{margin-top:clamp(10px,2vh,22px);font-size:clamp(108px,23vw,380px);line-height:.82;letter-spacing:-.02em;text-shadow:0 4px 60px rgba(6,6,9,.5)}
.opp__cur{color:var(--accent)}
.opp__sub{margin-top:clamp(12px,2vh,20px);max-width:34ch;font:600 clamp(15px,1.3vw,20px)/1.45 var(--f-sans);color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(6,6,9,.6)}
.opp__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:clamp(40px,7vh,80px) 0 0;border-top:1px solid rgba(255,255,255,.3)}
.opp__fact{padding:clamp(18px,2.6vh,26px) clamp(10px,1.6vw,24px) 0 0}
.opp__fact + .opp__fact{padding-left:clamp(12px,1.8vw,28px);border-left:1px solid rgba(255,255,255,.22)}
.opp__fact dt{font:700 10.5px/1.3 var(--f-sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.opp__fact dd{margin:8px 0 0;font:800 clamp(26px,3.4vw,54px)/1 var(--f-sans);letter-spacing:-.01em;text-transform:uppercase;color:var(--accent)}
@media (max-width:760px){
  .opp{min-height:0}
  .opp__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opp__fact{padding-right:12px}
  .opp__fact:nth-child(odd){padding-left:0;border-left:0}
  .opp__fact:nth-child(n+3){margin-top:14px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
}

/* ---------- the road: five steps on one rail ---------- */
.road{max-width:var(--maxw);margin:0 auto;padding:clamp(100px,16vh,190px) var(--gutter) clamp(90px,14vh,170px)}
.road__head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end;gap:24px clamp(30px,5vw,90px)}
.road__head .label{grid-column:1/-1}
.road__title{margin-top:clamp(20px,3.4vh,40px);font-size:clamp(44px,7vw,116px);line-height:.92}
.road__lede{font:500 clamp(16px,1.32vw,20px)/1.55 var(--f-sans);color:var(--ink-2);max-width:40ch}
/* the steps keep a readable measure; the photograph holds the other half of the spread and
   stays put while you move down them, so the section reads as one composition */
.road__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);align-items:start;gap:0 clamp(32px,5vw,90px);margin-top:clamp(52px,9vh,104px)}
.road__aside{position:sticky;top:calc(var(--nav-h) + clamp(28px,5vh,60px))}
.road__shot{margin:0;overflow:hidden;background:var(--paper-2)}
.road__shot img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.06)}
.road__cap{margin-top:14px;font:600 12.5px/1.5 var(--f-sans);color:var(--ink-3);max-width:34ch}
.steps{list-style:none;margin:0;padding:0}
.step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 clamp(20px,3vw,52px)}
/* the rail is drawn per step so it never depends on a measured height */
.step__rail{position:relative;width:1px;justify-self:center;background:var(--rule)}
.step__rail::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:50% 0;transition:transform .9s var(--ease)}
.step.is-done .step__rail::after,.step.is-active .step__rail::after{transform:scaleY(1)}
.step--last .step__rail{background:linear-gradient(180deg,var(--rule) 0%,var(--rule) 62%,transparent 100%)}
.step__dot{position:absolute;top:clamp(26px,3.4vh,36px);left:50%;width:11px;height:11px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--rule-strong);transition:box-shadow .5s var(--ease),transform .6s var(--ease)}
.step.is-active .step__dot{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 5px rgba(31,199,190,.18);transform:scale(1.18)}
.step.is-done .step__dot{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.step__in{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:4px clamp(18px,2.6vw,44px);padding:clamp(22px,3.2vh,34px) 0 clamp(30px,4.6vh,56px);outline-offset:8px}
.step__no{grid-row:1 / span 4;font:800 clamp(40px,5.4vw,86px)/.86 var(--f-sans);letter-spacing:-.03em;color:var(--rule-strong);transition:color .5s var(--ease),transform .7s var(--ease)}
.step.is-active .step__no{color:var(--accent-ink)}
.step__t{font:800 clamp(22px,2.4vw,36px)/1.1 var(--f-sans);letter-spacing:.01em;text-transform:uppercase}
.step__hook{margin-top:6px;font:600 clamp(15px,1.25vw,19px)/1.4 var(--f-sans);color:var(--accent-ink);transition:color .4s var(--ease)}
.step__body{margin-top:12px;max-width:46ch;font:500 15px/1.6 var(--f-sans);color:var(--ink-2)}
.step__when{margin-top:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font:800 clamp(15px,1.3vw,20px)/1.2 var(--f-sans);letter-spacing:.02em;text-transform:uppercase}
.step__when-k{font:700 10.5px/1.3 var(--f-sans);letter-spacing:.18em;color:var(--ink-3)}
.steps.has-active .step:not(.is-active) .step__in{opacity:.62;transition:opacity .6s var(--ease)}
.step.is-active .step__in{opacity:1}
@media (max-width:960px){
  .road__body{grid-template-columns:1fr}
  .road__aside{position:static;margin-top:clamp(30px,5vh,52px)}
  .road__shot{max-width:92%}
}
@media (max-width:860px){
  .road__head{grid-template-columns:1fr}
  .step__in{grid-template-columns:1fr;gap:0}
  .step__no{grid-row:auto;font-size:clamp(34px,11vw,52px);margin-bottom:8px}
}

/* ---------- for applicants ---------- */
.subm{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) clamp(100px,16vh,180px);display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);align-items:center;gap:clamp(30px,5vw,96px)}
.subm__shot{margin:0;overflow:hidden;background:var(--paper-2)}
.subm__shot img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.06)}
.subm__title{margin-top:clamp(16px,2.6vh,30px);font-size:clamp(38px,5.4vw,84px);line-height:.94}
.subm__list{list-style:none;margin:clamp(26px,4vh,44px) 0 0;padding:0;border-top:1px solid var(--rule)}
.subm__list li{display:grid;grid-template-columns:minmax(8.5rem,auto) minmax(0,1fr);align-items:baseline;gap:6px clamp(18px,2.6vw,40px);padding:18px 0;border-bottom:1px solid var(--rule)}
.subm__k{font:700 11px/1.3 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.subm__v{font:500 15.5px/1.5 var(--f-sans);color:var(--ink-2)}
.subm__note{margin-top:22px;font:800 clamp(15px,1.3vw,19px)/1.3 var(--f-sans);letter-spacing:.02em;text-transform:uppercase}
@media (max-width:860px){.subm{grid-template-columns:1fr}.subm__shot{max-width:88%}}

/* ---------- the final ten: two views ---------- */
.ten{max-width:var(--maxw);margin:0 auto;padding:clamp(80px,13vh,150px) var(--gutter) clamp(100px,16vh,180px);border-top:1px solid var(--rule)}
.ten__title{margin-top:clamp(18px,2.8vh,32px);font-size:clamp(40px,6vw,96px);line-height:.94}
.tabs{margin-top:clamp(34px,5.4vh,62px)}
.tabs__list{display:flex;flex-wrap:wrap;gap:0 clamp(20px,3vw,44px);border-bottom:1px solid var(--rule)}
.tab{position:relative;padding:0 0 14px;font:800 clamp(13px,1.15vw,16px)/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);min-height:44px;transition:color .35s var(--ease)}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.tab:focus-visible{outline:2px solid var(--accent-ink);outline-offset:4px}
.tabs__panel{padding-top:clamp(30px,5vh,56px)}
.tabs__panel[hidden]{display:none}
.tabs__panel:focus-visible{outline:2px solid var(--accent-ink);outline-offset:8px}
/* 1 + 9 = 10 */
.sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 clamp(10px,1.8vw,26px);font:800 clamp(52px,10vw,150px)/.9 var(--f-sans);letter-spacing:-.03em}
.sum__op{font-size:.46em;color:var(--ink-3)}
.sum__n--one{color:var(--accent-ink)}
.sum__n--tot{color:var(--ink)}
.ten__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3.4vw,56px);margin-top:clamp(26px,4vh,44px)}
.ten__k{display:flex;align-items:baseline;gap:12px;font:800 clamp(15px,1.3vw,19px)/1.25 var(--f-sans);letter-spacing:.02em;text-transform:uppercase}
.ten__num{font-size:1.5em;color:var(--accent-ink)}
.ten__item p{margin-top:10px;max-width:40ch;font:500 15px/1.6 var(--f-sans);color:var(--ink-2)}
.ten__rule{margin-top:clamp(24px,3.6vh,38px);padding-top:20px;border-top:1px solid var(--rule);max-width:70ch;font:500 14.5px/1.6 var(--f-sans);color:var(--ink-2)}
.ten__shot{margin:clamp(30px,5vh,56px) 0 0;overflow:hidden;background:var(--paper-2)}
.ten__shot img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.1) brightness(.95)}
@media (max-width:760px){.ten__grid{grid-template-columns:1fr}}
/* people's choice, before it opens */
.vote__kicker{font:700 11px/1.3 var(--f-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink)}
.vote__big{margin-top:14px;font-size:clamp(38px,6vw,92px);line-height:.94}
.vote__copy{margin-top:clamp(16px,2.4vh,24px);max-width:52ch;font:500 clamp(15px,1.25vw,18px)/1.6 var(--f-sans);color:var(--ink-2)}
.vote__when{list-style:none;margin:clamp(26px,4vh,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)}
.vote__when li{padding:18px clamp(12px,1.8vw,26px) 0 0;font:800 clamp(15px,1.4vw,21px)/1.2 var(--f-sans);letter-spacing:.02em;text-transform:uppercase}
.vote__when li + li{padding-left:clamp(14px,2vw,28px);border-left:1px solid var(--rule)}
.vote__when-k{display:block;margin-bottom:8px;font:700 10.5px/1.3 var(--f-sans);letter-spacing:.18em;color:var(--ink-3)}
@media (max-width:640px){
  .vote__when{grid-template-columns:1fr}
  .vote__when li{padding:16px 0}
  .vote__when li + li{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
}
/* the shape the Top 20 cards take once they exist (pitch.js renders into this) */
.vote__grid{list-style:none;margin:clamp(26px,4vh,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(18px,2.4vw,34px)}
.vote__card{display:flex;flex-direction:column}
.vote__card img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1) contrast(1.08);background:var(--paper-2)}
.vote__name{margin-top:14px;font:800 15px/1.25 var(--f-sans);letter-spacing:.02em;text-transform:uppercase}
.vote__co{margin-top:5px;font:700 11px/1.3 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.vote__blurb{margin-top:9px;font:500 14px/1.5 var(--f-sans);color:var(--ink-2)}

/* ---------- the live final ---------- */
.live{position:relative;display:flex;align-items:center;min-height:100vh;min-height:100svh;color:#fff;overflow:hidden;background:#0B0B0F}
.live__media{position:absolute;inset:0;margin:0}
.live__media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:grayscale(1) contrast(1.12)}
.live__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,9,.78) 0%,rgba(6,6,9,.42) 30%,rgba(6,6,9,.6) 62%,rgba(6,6,9,.92) 100%)}
.live__inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(80px,13vh,150px) var(--gutter)}
.live__title{margin-top:clamp(14px,2.4vh,26px);font-size:clamp(42px,7.4vw,124px);line-height:.9;text-shadow:0 2px 40px rgba(6,6,9,.45)}
.live__copy{margin-top:clamp(18px,2.8vh,30px);max-width:56ch;font:500 clamp(15px,1.2vw,18px)/1.6 var(--f-sans);color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(6,6,9,.6)}
.fmt{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:clamp(38px,6vh,74px) 0 0;padding:0;border-top:1px solid rgba(255,255,255,.3)}
.fmt__i{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;padding:clamp(18px,2.6vh,26px) clamp(10px,1.6vw,22px) 0 0}
.fmt__i + .fmt__i{padding-left:clamp(12px,1.8vw,26px);border-left:1px solid rgba(255,255,255,.22)}
.fmt__n{font:800 clamp(44px,5.6vw,96px)/.86 var(--f-sans);letter-spacing:-.03em;color:#fff}
.fmt__u{font:700 12px/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.fmt__k{flex:1 0 100%;margin-top:10px;font:700 10.5px/1.35 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.fmt__i--tot .fmt__n{color:var(--accent)}
.fmt__i--tot .fmt__k{color:var(--accent)}
@media (max-width:760px){
  .live{min-height:0}
  .fmt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fmt__i{padding-right:12px}
  .fmt__i:nth-child(odd){padding-left:0;border-left:0}
  .fmt__i:nth-child(n+3){margin-top:14px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
}

/* ---------- closing ---------- */
.pend{max-width:var(--maxw);margin:0 auto;padding:clamp(90px,15vh,170px) var(--gutter) clamp(90px,15vh,170px)}
.pend__title{margin-top:clamp(16px,2.6vh,30px);font-size:clamp(44px,8vw,140px);line-height:.9}
.pend__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(20px,3vw,40px);margin-top:clamp(26px,4vh,46px)}
.pend__small{font:600 13px/1.5 var(--f-sans);color:var(--ink-2);max-width:34ch}
@media (max-width:560px){.pend__cta .btn{width:100%;justify-content:center}}

/* ---------- reduced motion: everything already arrived ---------- */
@media (prefers-reduced-motion:reduce){
  .js .ph__l2.rv{opacity:1;transform:none}
  .step__rail::after{transform:scaleY(1)}
  .step__dot{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
  .steps.has-active .step:not(.is-active) .step__in{opacity:1}
  .step__no{color:var(--accent-ink)}
}