canvas#ground{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
html{scroll-behavior:auto;scroll-snap-type:none}
section{scroll-snap-align:none;scroll-margin-top:96px}

.wrap{max-width:1240px;width:100%}
.meas{max-width:600px}

.capk{font-family:SuisseMono,ui-monospace,monospace;font-size:var(--fs-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg2);line-height:1.5;margin:0}
.cs blockquote+.attr,.attr,.eidx,.shot,.pt,.fine{color:var(--fg2)}
.capn{font-size:var(--fs-body);font-weight:500;color:var(--fg);margin:0 0 6px}
.capblock{border-top:1px solid var(--line);padding-top:14px;margin:var(--unit) 0 0;max-width:420px}

.win{display:block;position:relative;border:1px solid var(--line);border-radius:3px;
  background:rgba(244,241,234,.04);overflow:hidden;width:100%;
  aspect-ratio:var(--ar,4/3)}
.win img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 45%)}
.win.pend{background:rgba(244,241,234,.02);border-style:dashed;border-color:var(--line2);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:16px;padding:28px}
.win.pend img.mk{width:auto;height:22px;object-fit:contain;
  filter:invert(var(--logo-invert));opacity:.55;flex:0 0 auto}
.pt{font-family:SuisseMono,ui-monospace,monospace;font-size:var(--fs-label);
  letter-spacing:.06em;line-height:1.6;max-width:46ch;margin:0}
.pt+.pt{margin-top:14px}
.pt code{font:inherit}
.shot{font-family:SuisseMono,ui-monospace,monospace;font-size:var(--fs-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);margin:10px 0 0}


.ehead{display:block;font-weight:500;font-size:var(--fs-sub);line-height:1.22;
  letter-spacing:-.016em;margin:0 0 14px;max-width:26ch}
.ehead a{text-decoration:none;color:var(--fg)}
.ehead a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.ehead a:active{opacity:.66}
.esub{font-size:var(--fs-body);line-height:1.5;color:var(--fg2);margin:0;max-width:44ch}

#w-hero{min-height:auto;align-items:flex-start;padding:max(13vh,112px) var(--pad) 6vh}
#w-hero .col{display:grid;grid-template-columns:var(--reg-idx) minmax(0,1fr);column-gap:var(--reg-gap)}
#w-hero .col>*{grid-column:2}
#w-hero h1{margin:0 0 20px;max-width:6ch}
#w-hero .lead{max-width:min(100%,44ch);margin:0}
#w-hero .fresh{margin:26px 0 0}

#w-list{padding-top:0;padding-bottom:0;display:block}
.w-reg>.reg-e>.reg-h{grid-template-columns:var(--reg-idx) minmax(0,1fr) 44px;
  padding:28px 0 30px}
.w-t .ehead{margin:0 0 10px;max-width:30em;text-wrap:pretty}
.w-t .esub{max-width:58ch;margin:0}
.w-t .subline{margin:10px 0 0}
.w-reg>.reg-e:has(+ .w-tier){border-bottom-color:var(--line2)}

.w-shots{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto auto;
  gap:12px;margin:2px 0 0;position:relative}
.w-shots figure{margin:0;min-width:0;position:relative}
.w-shots .w-lead{grid-row:1 / span 2}
.w-shots .w-lead .win,.w-shots>.win.w-lead{height:100%;aspect-ratio:auto}
.w-shots figure:not(.w-lead) .win,.w-shots>.win:not(.w-lead){aspect-ratio:4/3}
.w-shots .shot{color:var(--fg2)}
.w-shots figure>.shot{position:absolute;left:0;top:100%}
.w-shots:has(figure>.shot){margin-bottom:30px}
.w-shots.w-cap>figcaption{grid-column:1 / -1;margin:2px 0 0}
.win[data-gather]{isolation:isolate}
.win[data-gather]>canvas.flock{position:absolute;inset:0;width:100%;height:100%;z-index:2;
  pointer-events:none;image-rendering:pixelated}
.win[data-gather].is-gathering img{opacity:0}
.win[data-gather].is-resolving img{opacity:1;transition:opacity 420ms linear}
.w-shots>figure:not(.w-lead),.w-shots>.win:not(.w-lead){transition:opacity 360ms linear}
.w-shots>figure:not(.w-lead):last-of-type,.w-shots>.win:not(.w-lead):last-of-type{transition-delay:120ms}
.w-shots.is-gathering>figure:not(.w-lead),.w-shots.is-gathering>.win:not(.w-lead){opacity:0;transition:none}
@media (prefers-reduced-motion:reduce){
  .win[data-gather].is-resolving img,.w-shots>figure:not(.w-lead),.w-shots>.win:not(.w-lead){transition:none;transition-delay:0s;animation:none}
}

#w-logos{padding-top:30px}
#w-logos .col{display:grid;grid-template-columns:var(--reg-idx) minmax(0,1fr);column-gap:var(--reg-gap)}
#w-logos p{grid-column:2;max-width:76ch}

#w-final{min-height:auto;padding-top:12vh;padding-bottom:14vh;align-items:flex-start}
#w-final .col{max-width:1240px;display:grid;grid-template-columns:var(--reg-idx) minmax(0,900px);column-gap:var(--reg-gap)}
#w-final .col>*{grid-column:2}
#w-final .role-display{margin:0 0 24px;max-width:14ch}
#w-final p{max-width:600px}
#w-final .prompts{margin-top:calc(var(--unit)*1.4)}
#w-final .sms{margin-top:22px}

@media (max-width:1180px){
  .w-reg>.reg-e>.reg-h{grid-template-columns:var(--reg-idx) minmax(0,1fr) 44px}
  .w-reg .reg-x{grid-column:3;grid-row:1}
}
@media (max-width:760px){
  #w-hero{padding:15vh var(--pad) 4vh}
  #w-hero .col{display:block}
  #w-hero h1{font-size:13vw;line-height:1;max-width:100%}
  #w-hero .lead{max-width:100%}
  .w-reg>.reg-e>.reg-h{grid-template-columns:minmax(0,1fr) 44px;padding:20px 0 22px}
  .w-reg .reg-x{grid-column:2;grid-row:1}
  .w-t .ehead,.w-t .esub{max-width:100%}
  .w-shots{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .w-shots .w-lead{grid-row:auto;grid-column:1 / -1}
  .w-shots .w-lead .win,.w-shots>.win.w-lead{height:auto;aspect-ratio:4/3}
  .w-shots figure:not(.w-lead) .win,.w-shots>.win:not(.w-lead){aspect-ratio:1/1}
  .w-shots figure>.shot{position:static}
  .w-shots:has(figure>.shot){margin-bottom:0}
  .w-shots figure.w-lead:has(.shot){margin-bottom:4px}
  #w-logos{padding-top:24px}
  #w-logos .col{display:block}
  #w-final{padding-top:11vh;padding-bottom:10vh}
  #w-final .col{display:block}
  #w-final .role-display{font-size:12vw;line-height:1;max-width:100%}
}


.cs section{padding:0 var(--pad);display:block}
.cs{--cs-cols:var(--reg-idx) minmax(0,560px) minmax(0,1fr);--cs-fig-gap:48px}

#cs-hero{min-height:auto;align-items:flex-start;padding:max(13vh,112px) var(--pad) 0;display:block}
.cs-index .reg{border-top:1px solid var(--line)}
.cs-row>.reg-h{grid-template-columns:var(--reg-idx) minmax(0,1fr) auto;padding:14px 0;
  text-decoration:none;color:var(--fg2);align-items:baseline}
.cs-row>.reg-h:hover{color:var(--fg);background:linear-gradient(var(--hover-bg),var(--hover-bg)) no-repeat;
  background-size:calc(100% + 24px) 100%;background-position:-12px 0;text-decoration:none}
.cs-row>.reg-h:hover .cs-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.cs-row .reg-n{padding-top:0}
.cs-row .reg-n::before{top:calc(.5lh - 3px)}
.cs-name{font-size:var(--fs-body);line-height:1.4;font-weight:500;color:inherit}
.cs-k{text-align:right}
.cs-open{border-top:0}
.cs-index+.cs-open{border-top:0}
#cs-hero .cs-index .cs-reg{display:flex;flex-wrap:wrap;column-gap:36px;border-bottom:1px solid var(--line)}
#cs-hero .cs-index .cs-row{border-bottom:0}
#cs-hero .cs-row>.reg-h{display:flex;gap:12px;align-items:baseline;padding:13px 0}
#cs-hero .cs-row>.reg-h:hover{background:none}
#cs-hero .cs-row .reg-n::before{display:none}
.cs-here{border-bottom:0}
.cs-here>.reg-h{padding:34px 0 0}
.cs-title h1{margin:0 0 20px;max-width:15ch}
.cs-title .lead{max-width:min(100%,46ch);margin:0}
.cs-title .fresh{margin:20px 0 0}
.cs-here .reg-n{padding-top:1.2em}
.cs-here .reg-n::before{top:calc(1.2em + .5lh - 3px)}
.cs-here .reg-x{margin:-4px -12px 0 0}

.cs-spec{display:grid;grid-template-columns:var(--cs-cols);column-gap:var(--reg-gap);
  align-items:start;margin:calc(var(--unit)*1.4) 0 0;padding:0 0 calc(var(--unit)*1.6);
  border-bottom:1px solid var(--line)}
.cs-spec .facts{grid-column:2;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;max-width:none}
.cs-spec .cs-fig{grid-column:3;margin:0 0 0 calc(var(--cs-fig-gap) - var(--reg-gap))}
.cs-spec .cs-fig .win{aspect-ratio:4/3}
.cs-fig .shot,.cs-log .shot{color:var(--fg2)}
.facts .capblock{max-width:none;margin:0;border-top:1px solid var(--line);padding-top:12px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 24px;align-items:start}
.facts .fkey{grid-column:1 / -1;border:0;padding:0;margin:0 0 2px}
.facts .capn{margin:0;font-size:var(--fs-body);line-height:1.4}
.facts .capn .capk{display:block;margin:0 0 4px}

.cs-log{counter-reset:beat;padding:0 var(--pad)}
.cs-log>.beat{counter-increment:beat;display:grid;max-width:1240px;grid-template-columns:var(--cs-cols);
  column-gap:var(--reg-gap);align-items:start;padding:calc(var(--unit)*1.1) 0 calc(var(--unit)*1.3);
  border-bottom:1px solid var(--line)}
.cs-log>.beat::before{content:var(--row) "." counter(beat);grid-column:1;grid-row:1 / span 9;
  font-family:SuisseMono,ui-monospace,monospace;font-size:var(--fs-label);letter-spacing:.11em;
  color:var(--fg2);font-variant-numeric:tabular-nums;padding-top:.32em;line-height:1.5}
.cs-log>.beat>.col{grid-column:2;max-width:none;width:auto}
.cs-log>.beat>.col.meas+.col:not(.meas){grid-column:3;margin-left:calc(var(--cs-fig-gap) - var(--reg-gap))}
.cs-log>.beat>.col:only-of-type:not(.meas){grid-column:2 / -1}
.cs-log>.beat h2{font-size:var(--fs-sub);line-height:1.25;letter-spacing:-.016em;max-width:none;margin:0 0 16px}
.cs-log>.beat p{max-width:none}
.cs-log>.beat p:last-child{margin-bottom:0}
.cs .lead-in{margin-bottom:14px}
.cs-log blockquote{font-size:var(--fs-sub);line-height:1.3;letter-spacing:-.016em;color:var(--fg);
  margin:0 0 14px;max-width:30ch;text-wrap:balance}
.cs blockquote+.attr{margin-bottom:0;display:block;font-family:SuisseMono,ui-monospace,monospace;
  font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;line-height:1.5}
figure{margin:0}
figcaption{margin:12px 0 0}
.cs-log .fig{margin:0}
.cs-log .fig+.fig{margin-top:12px}
.cs-log .fig .win{aspect-ratio:4/3}
.cs-log .fig.tall{max-width:none}
.cs-log>.beat>.col:only-of-type:not(.meas){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px}
.cs-log>.beat>.col:only-of-type:not(.meas):has(>.fig:nth-child(5)){grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-log>.beat>.col:only-of-type:not(.meas) .fig .win img{object-fit:contain;background:rgba(7,8,26,.6)}
.cs-log>.beat>.col:only-of-type:not(.meas) .fig{margin:0}
.cs-log>.beat>.col:only-of-type:not(.meas) .fig .win{aspect-ratio:4/3}

#cs-close{padding-top:13vh;padding-bottom:9vh}
#cs-close .col{display:grid;grid-template-columns:var(--reg-idx) minmax(0,560px);column-gap:var(--reg-gap);max-width:none}
#cs-close .col>*{grid-column:2}
#cs-close h2{max-width:14ch}
#cs-close .cta{margin-top:30px}
#cs-close .sms{margin-top:22px}
#cs-next{padding-top:0;padding-bottom:6vh}

#cs-quote{padding-top:14vh;padding-bottom:2vh}
#cs-quote blockquote{font-size:var(--fs-section);line-height:1.04;letter-spacing:-.03em;max-width:18ch;margin:0 0 20px}
.cadence{margin:0 0 calc(var(--unit)*1.4);border-top:1px solid var(--line2);padding-top:26px;
  display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:calc(var(--unit)*1.5);align-items:end}
.cadence .fig-n{font-weight:500;font-size:clamp(40px,4.4vw,72px);line-height:.9;letter-spacing:-.04em;color:var(--fg);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;margin:0;white-space:nowrap}
.cadence .fig-q{font-size:var(--fs-body);line-height:1.45;color:var(--fg2);margin:14px 0 0;max-width:34ch}
.strip{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));align-items:end;width:100%;border-bottom:1px solid var(--line2)}
.strip i{display:block;height:60px;width:12px;margin:0 auto;background:var(--fg);opacity:.9}
.axis{display:flex;justify-content:space-between;margin:12px 0 0}
.csource{margin:22px 0 0}

@media (max-width:1180px){
  .cs{--cs-cols:var(--reg-idx) minmax(0,1fr) 0}
  .cs-spec .cs-fig,.cs-log>.beat>.col.meas+.col:not(.meas){grid-column:2;margin:24px 0 0}
  .cs-log>.beat>.col:only-of-type:not(.meas){grid-column:2}
  .cs-spec{column-gap:var(--reg-gap)}
}
@media (max-width:760px){
  .cs{--cs-cols:minmax(0,1fr)}
  #cs-hero{padding:15vh var(--pad) 0}
  #cs-hero .cs-index .cs-reg{column-gap:22px}
  #cs-hero .cs-row>.reg-h{min-height:44px;padding:0;align-items:center}
  .cs-row .reg-n{padding-left:0}
  .cs-row>.reg-h{grid-template-columns:auto minmax(0,1fr) auto;column-gap:18px;row-gap:0}
  .cs-row>.reg-h>*{grid-column:auto}
  .cs-here>.reg-h{padding:24px 0 0}
  .cs-here .reg-n{padding-top:0}
  .cs-here .reg-x{margin:-14px -12px -14px 0}
  .cs-here .reg-n::before{top:calc(.5lh - 3px)}
  .cs-title h1{font-size:11.6vw;line-height:.99;max-width:100%}
  .cs-title .lead{max-width:100%}
  .cs-spec,.cs-log>.beat{display:block}
  .cs-spec .cs-fig{margin:28px 0 0}
  .facts .capblock{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cs-log>.beat::before{display:block;margin:0 0 14px}
  .cs-log>.beat>.col.meas+.col:not(.meas){margin:22px 0 0}
  .cs-log blockquote{max-width:100%}
  .cs-log>.beat>.col:only-of-type:not(.meas){grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:10px}
  #cs-close{padding-top:10vh;padding-bottom:7vh}
  #cs-close .col{display:block}
  #cs-close h2{max-width:100%}
}