.wrap{max-width:var(--max);margin:0 auto}

.bar{display:flex;align-items:center;gap:16px;padding:18px var(--gut);position:sticky;top:0;color:var(--ink);z-index:9}
.mark{font-weight:500;letter-spacing:.18em;text-transform:uppercase;font-size:12.5px;white-space:nowrap}
.mark span{color:var(--ink-soft);padding:0 4px}
.bar__nav{margin-left:auto;display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bar__nav::-webkit-scrollbar{display:none}
.bar__nav a{font-size:12.5px;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;padding:8px 0;min-height:36px;transition:color .2s cubic-bezier(.165,.84,.44,1)}
.bar__nav a:hover{color:var(--ink)}

main{padding:0 var(--gut)}
section{padding:var(--sec) 0;border-bottom:1px solid var(--line);max-width:var(--max);margin:0 auto}
.sec__title{font-size:12.5px;font-weight:500;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--ink-soft);margin-bottom:40px}

/* entrance, the site's own 1.2 s fade-up */
.rise{opacity:0;transform:translateY(14px);animation:rise 1200ms cubic-bezier(.165,.84,.44,1) forwards}
.rise--2{animation-delay:120ms}
.rise--3{animation-delay:240ms}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}}

.hero{padding-top:clamp(56px,9vw,120px)}
.hero__title{font-weight:400;font-size:clamp(46px,10.5vw,132px);line-height:.94;letter-spacing:var(--track-display);margin-bottom:32px;max-width:14ch}
.hero__lede{max-width:46ch;font-size:clamp(16px,1.6vw,19px);color:var(--ink-soft);line-height:1.6}
.hero__shot{margin:clamp(40px,6vw,80px) 0 0;overflow:hidden;background:var(--porcelain)}
.hero__shot img{width:100%}

.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line);margin-top:clamp(40px,6vw,72px)}
.specs>div{padding:24px 0;border-bottom:1px solid var(--line)}
.specs>div+div{border-left:0}
.specs dt{font-size:12.5px;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--ink-soft)}
.specs dd{font-weight:400;font-size:clamp(30px,4.4vw,44px);letter-spacing:-.03em;line-height:1.2;margin-top:10px}
.specs dd span{font-size:.4em;color:var(--ink-soft);letter-spacing:0;margin-left:4px}

/* live: the chamber — full-bleed deep blue, the one dramatic plane */
.live{background:var(--chamber);color:#fff;border-bottom:0;max-width:none;margin-left:calc(var(--gut)*-1);margin-right:calc(var(--gut)*-1);padding-left:var(--gut);padding-right:var(--gut)}
.live>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.live .sec__title{color:rgba(255,255,255,.62)}
.live__grid{display:grid;gap:0;align-items:start;border-top:1px solid rgba(255,255,255,.22)}
.cover,.depth{padding:32px 0;background:none}
.state{padding:32px 28px;border-radius:18px;color:#fff;margin:0 0 0 -28px}
@media (max-width:699px){.state{margin-left:0;padding-left:0;padding-right:0;border-radius:0}}
.state__label{font-size:12.5px;letter-spacing:var(--track-micro);text-transform:uppercase;color:rgba(255,255,255,.62)}
.state__word{font-weight:400;font-size:clamp(40px,8vw,72px);letter-spacing:-.04em;line-height:1.04;margin-top:14px}
.state__note{color:rgba(255,255,255,.62);font-size:15px;margin-top:12px;max-width:34ch}
.state[data-state="running"] .state__word,.state[data-state="gap"] .state__word,.state[data-state="jam"] .state__word{color:#fff}
.state[data-state="gap"] .state__word::after,.state[data-state="jam"] .state__word::after{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:#fff;margin-left:14px;vertical-align:middle}
.cover__pct{font-weight:400;font-size:clamp(44px,8vw,72px);letter-spacing:-.04em;line-height:1.04;margin-top:14px}
.cover__unit{font-size:.36em;color:rgba(255,255,255,.62);margin-left:6px}
.cover__wait{font-size:.3em;color:rgba(255,255,255,.62);letter-spacing:0}
.cover__wait+.cover__unit{display:none}
.cover__bar{height:1px;background:rgba(255,255,255,.28);margin-top:24px}
.cover__bar i{display:block;height:1px;width:0;background:#fff;transition:width .4s cubic-bezier(.165,.84,.44,1)}
.depth__grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:16px;max-width:260px}
.depth__grid i{aspect-ratio:1;background:rgba(255,255,255,.12);display:block;transition:background .3s ease-in-out}
.live__foot{margin-top:24px;font-size:12.5px;letter-spacing:var(--track-micro);text-transform:uppercase;color:rgba(255,255,255,.62)}

.how__list{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--line)}
.how__list li{counter-increment:s;padding:28px 0 28px 56px;position:relative;max-width:62ch;border-bottom:1px solid var(--line)}
.how__list li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:30px;color:var(--ink-soft);font-size:12.5px;letter-spacing:var(--track-micro)}
.how__list b{font-weight:500}

.kit__text p{max-width:46ch;color:var(--ink-soft);margin-top:18px;line-height:1.6}
.kit__gap{border-left:1px solid var(--line);padding-left:18px}
.kit__shot{margin:clamp(36px,5vw,64px) 0 0;background:var(--porcelain);padding:clamp(24px,4vw,56px)}

.ev th{text-align:left;font-size:12.5px;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--ink-soft);font-weight:500;border-bottom:1px solid var(--line);padding:12px 16px 12px 0}
.ev td{padding:18px 16px 18px 0;border-bottom:1px solid var(--line);font-size:15px}
.ev__empty{color:var(--ink-soft)}

.foot{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;max-width:var(--max);margin:0 auto;padding:40px var(--gut) 64px;font-size:12.5px;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--ink-soft)}

@media (min-width:700px){
  .specs{grid-template-columns:repeat(4,1fr);column-gap:32px}
  .live__grid{grid-template-columns:1.3fr 1fr;grid-template-areas:"state cover" "state depth";column-gap:48px}
  .state{grid-area:state}.cover{grid-area:cover}.depth{grid-area:depth}
  .how__list li{padding-left:88px}
}
@media (min-width:1000px){
  .hero__title{font-size:clamp(88px,9vw,132px)}
  .kit{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-items:center}
  .kit__shot{margin:0}
  .live__grid{grid-template-columns:1.4fr 1fr 1fr;grid-template-areas:"state cover depth";column-gap:56px}
}