/* Four reasons, held in the snowfield left by the opening film. */
#why{
  display:block;isolation:isolate;background:transparent;
  padding:108px clamp(24px,6vw,96px) 40px;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  scroll-padding-top:100px;
}
#why .plain{position:fixed;inset:0;z-index:-1;overflow:hidden}
#why .plain img,#why .plain canvas{
  width:100%;height:100%;object-fit:cover;object-position:left center;
}
#why .plain img{opacity:1;transition:opacity 1.4s ease}
body.exiting #why .plain img{opacity:0}
#why .why-content{max-width:1320px;margin:0 auto}
#why .lead{
  font:400 clamp(32px,3.3vw,48px)/1.09 var(--display);
  letter-spacing:-.025em;max-width:27ch;margin:0 0 32px;
  text-wrap:balance;color:#151716;
}
#why .lead::before{
  content:"";display:block;width:64px;height:3px;margin-bottom:20px;
  background:linear-gradient(90deg,#645139,#5ca6cd);
}
#why ol{max-width:none;border:0;counter-reset:reason}
#why li{
  display:grid;grid-template-columns:34px minmax(0,.9fr) minmax(0,1.2fr);
  align-items:start;gap:24px;padding:22px 0 24px;
  border:0;border-top:1px solid rgba(25,32,35,.24);counter-increment:reason;
}
#why li::before{
  content:counter(reason);font:12px/1.5 var(--mono);
  letter-spacing:.07em;color:#41484a;padding-top:6px;
}
#why h3{
  font:400 clamp(24px,2.18vw,33px)/1.1 var(--display);
  letter-spacing:-.025em;text-wrap:pretty;color:#151716;margin:0;
}
#why p{
  font:400 clamp(15px,1.18vw,18px)/1.5 var(--sans);
  color:#202728;max-width:62ch;margin:0;text-wrap:pretty;
}
#why .case-link{
  display:inline-block;margin-top:6px;padding:10px 0;min-height:44px;
  font:400 12px/1.5 var(--mono);color:#151716;
  text-decoration:none;border:0;border-bottom:1px solid rgba(25,32,35,.4);
}
#why .case-link:hover{border-bottom-color:#151716}
#why .case-link:focus-visible,#why .why-footer a:focus-visible,#why .why-footer button:focus-visible{
  outline:2px solid #276a89;outline-offset:5px;
}
#why .why-footer{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 0 8px;border-top:1px solid rgba(25,32,35,.24);
}
#why .why-footer a,#why .why-footer button{
  font:12px/1.5 var(--mono);color:#293133;text-decoration:none;
}
#why .why-footer a:hover,#why .why-footer button:hover{text-decoration:underline}
body.gate #foot0,body.gate .key-fab,body.gate #skip{display:none}
body.gate #frame{left:0;top:0}
body.gate nav.site{--nbg:transparent;--nfg:#151716}
body.gate .top{background:linear-gradient(#dfe1e5 0%,#dfe1e5 78%,rgba(223,225,229,0));padding-bottom:40px}
body.gate #nav-how{display:inline;visibility:visible}
@media(min-width:1400px){#why .lead{max-width:30ch}}
@media(min-width:981px) and (max-height:800px){
  #why{padding-top:84px;padding-bottom:30px}
  #why .lead{font-size:34px;max-width:none;margin-bottom:22px}
  #why .lead::before{margin-bottom:16px}
  #why li{padding:14px 0}
  #why h3{font-size:26px}
  #why p{font-size:15px;line-height:1.45}
  #why .case-link{margin-top:4px}
  #why .why-footer{padding-top:14px}
}
@media(max-width:980px){
  #why{padding:100px 30px 30px}
  #why .lead{font-size:36px;max-width:26ch}
  #why li{grid-template-columns:28px minmax(0,1fr);gap:12px 20px;padding:24px 0}
  #why h3{font-size:28px}
  #why .reason-detail{grid-column:2}
  #why p{font-size:16px;max-width:65ch}
}
@media(max-width:600px){
  #why{padding:88px 22px 26px}
  #why .lead{font-size:30px;max-width:23ch;margin-bottom:28px;letter-spacing:-.025em}
  #why .lead::before{margin-bottom:18px;width:48px}
  #why li{grid-template-columns:24px minmax(0,1fr);gap:12px;padding:23px 0 26px}
  #why h3{font-size:25px;line-height:1.14}
  #why p{font-size:16px;line-height:1.55}
  #why .case-link{font-size:12px;margin-top:8px}
  #why .plain img{object-position:center center}
  #why .why-footer{flex-direction:column;align-items:flex-start;gap:4px}
  #why .why-footer a,#why .why-footer button{padding:10px 0;min-height:44px;white-space:nowrap}
  body.gate nav.site{font-size:10px;gap:14px}
  body.gate #nav-how{display:none}
}
@media(prefers-reduced-motion:reduce){#why .plain img{transition:none}}

/* the heading that says how Octet works, then becomes "does four things" */
#why .lead{transition:height .8s cubic-bezier(.4,0,.2,1);overflow:hidden}
#why .lead .wd{opacity:0;transition:opacity .45s ease}
#why .lead .wd.on{opacity:1}
#why .lead.saying .sb,#why .lead.said .sa{display:none}
#why .lead.saying{cursor:pointer}
#why .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* after the four things: the record, set at once, then the scenes */
#why .happening{margin:56px 0 8px;padding-top:28px;border-top:1px solid rgba(25,32,35,.24)}
#why .happening h2{font:400 clamp(28px,2.6vw,40px)/1.1 var(--display);letter-spacing:-.025em;color:#151716;margin:0 0 22px}
#why .hl{list-style:none;margin:0;padding:0;counter-reset:none}
#why .hl li{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:0 2em;padding:16px 0 18px;border:0;border-top:1px solid rgba(25,32,35,.14)}
#why .hl li::before{content:none}
#why .hl .hd{font:400 13px/1.9 var(--mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#41484a}
#why .hl .ht{font:400 clamp(17px,1.45vw,22px)/1.4 var(--sans);color:#151716;max-width:60ch;text-wrap:pretty}
#why .hl .ht a{display:inline-block;font:400 11px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#41484a;text-decoration:none;border-bottom:1px solid rgba(25,32,35,.35);margin-left:.4em;vertical-align:.15em}
#why .see-it{display:block;margin:34px auto 6px;padding:12px 18px;min-height:44px;background:none;border:0;border-bottom:1px solid #151716;font:400 12px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#151716;cursor:pointer}
@media(max-width:680px){#why .hl li{grid-template-columns:1fr;gap:4px}}
/* the rule sits in the column, readable, under the scene's line */
#detail pre#d-rule{font-size:clamp(13px,1vw,15px);line-height:1.65;padding:12px 14px;margin-top:6px}

/* after "Octet does four things…" settles, the four rows arrive one at a time, then the record */
#why ol:not(.hl)>li{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
#why .rows-hold ol:not(.hl)>li:not(.in){opacity:0;transform:translateY(18px)}
#why .see-it,#why .why-footer{transition:opacity .8s ease}
#why .rows-hold .see-it,#why .rows-hold .why-footer{opacity:0}
@media (prefers-reduced-motion:reduce){#why .rows-hold ol:not(.hl)>li:not(.in),#why .rows-hold .see-it,#why .rows-hold .why-footer{opacity:1;transform:none}}

/* phones: full-screen layers are sized to the visible viewport, not the area behind the browser's toolbars
   (on iPhone the bottom of the film and its words were hidden under the toolbar); the skip control moves to the top */
#stage,#why,#intro{bottom:auto;height:100vh;height:100svh}
@media (max-width:760px){
  #skip{bottom:auto;top:calc(14px + env(safe-area-inset-top,0px))}
}