/* 6 Nov typography and image-hero pass: one notch up, heroes open every page */
:root{--dim:rgba(255,255,255,.74)}
body{font-weight:420}
p,li{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
strong{font-weight:700;color:#fff}

/* home hero: three lines, set as large as the fold allows */
body.v3 .hero{--F:min(13.4vw,23svh,210px)}
body.v3 .hero .ph img{object-position:0% 50%}
body.v3 .hero .copy .wrap{width:min(1600px,100% - 48px)}
body.v3 .hero h1{font:900 var(--F)/.84 Archivo,Arial,sans-serif;font-stretch:78%;letter-spacing:-.024em;word-spacing:.07em;margin-left:-.045em;text-wrap:nowrap}
body.v3 .hero h1 span{display:block;white-space:nowrap}
body.v3 .hero .kick{margin-top:clamp(22px,2.6vw,36px);font:600 clamp(18px,1.6vw,23px)/1.4 Archivo,Arial,sans-serif;color:rgba(255,255,255,.92);letter-spacing:0}
@media (min-width:761px){
 body.v3 .hero .copy{top:50%;bottom:auto;transform:translateY(-46%)}
 body.v3 .hero .ph::after{background:linear-gradient(90deg,rgba(0,0,0,.78) 0,rgba(0,0,0,.4) 50%,rgba(0,0,0,0) 72%),linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 74%,#000 100%)}
}

/* headings: bolder, tighter */
.what h2{font:800 clamp(38px,4.6vw,68px)/.96 Archivo,Arial,sans-serif;font-stretch:80%;letter-spacing:-.022em}
.conn h2,.proof h2,.close h2,.connectors h2,.blk h2{font:800 clamp(36px,4.3vw,62px)/.96 Archivo,Arial,sans-serif;font-stretch:80%;letter-spacing:-.022em}
.blk h2{max-width:15ch}
.build3 h3{font:800 clamp(36px,4.2vw,60px)/.96 Archivo,Arial,sans-serif;font-stretch:80%;letter-spacing:-.022em}
.aim{font-weight:800;line-height:1.06;letter-spacing:-.012em;font-stretch:82%}
.chap h2{font-weight:880;line-height:.87;letter-spacing:-.022em;word-spacing:.06em}
.card h3,.case h3,.book h3{font-weight:800;letter-spacing:-.01em}
.idx a b{font-weight:800}
.card .n,.case .n{font-weight:800}

/* subtext: larger, brighter, a touch heavier */
.what p,.build3 p{color:rgba(255,255,255,.9);font-weight:450}
.strap{color:rgba(255,255,255,.92);font-weight:600;font-size:clamp(18px,1.5vw,22px)}
.proof .sub,.connectors .sub{color:rgba(255,255,255,.86);font-size:19px;font-weight:450}
.card p{color:rgba(255,255,255,.86);font-size:18px}
.case p{color:rgba(255,255,255,.84);font-size:17px}
.book p:not(.lbl){color:rgba(255,255,255,.8)}
.readout span{color:rgba(255,255,255,.9)}
.rows li b{font-weight:600}
.lbl{font-weight:700}

/* body measure: about 55 to 65 characters */
.what p,.build3 p,.lead,.proof .sub,.connectors .sub,.strap,.blk .cols p,.statement small{max-width:58ch}

/* inner pages: the image opens the page, headline on it */
body.himg main{padding-top:0}
.ihero.img{position:relative;padding:0;height:100vh;height:100svh;min-height:620px;max-height:980px;overflow:hidden;background:#000}
.ihero.img .ph{position:absolute;inset:0}
.ihero.img .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.ihero.img .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 50%,rgba(0,0,0,.72) 80%,#000 100%),linear-gradient(90deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 55%)}
.ihero.img.r .ph::after{background:linear-gradient(180deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 50%,rgba(0,0,0,.72) 80%,#000 100%),linear-gradient(270deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 55%)}
.ihero.img .copy{position:absolute;left:0;right:0;bottom:clamp(44px,7vh,92px);z-index:2}
.ihero.img.r .copy .wrap{text-align:right}
.ihero.img .lbl{margin:0 0 22px;color:rgba(255,255,255,.86)}
.ihero h1{font:900 clamp(64px,10.4vw,176px)/.86 Archivo,Arial,sans-serif;font-stretch:76%;letter-spacing:-.026em;word-spacing:.08em}
.ihero h1 span{display:block}
.intro{padding:clamp(44px,5vw,72px) 0 0}
.lead,.ihero .lead{margin:0;font:500 clamp(20px,1.8vw,25px)/1.45 Archivo,Arial,sans-serif;color:rgba(255,255,255,.9)}
.intro .seam{margin-top:clamp(48px,6vw,84px)}
.intro + section.blk,.intro + section.s{border-top:0}
body.himg .dotband{margin-top:0}

/* zoomed section openers further down */
.band.zoom .ph{position:relative;aspect-ratio:2/1;max-height:92vh}
.band.zoom img{object-position:50% 50%}
.band.zoom .ph::after{background:linear-gradient(180deg,rgba(0,0,0,0) 46%,rgba(0,0,0,.62) 78%,#000 100%)}
.band.zoom.r .copy .wrap{text-align:right}
.band h2{font-weight:880;line-height:.9;letter-spacing:-.022em;word-spacing:.06em}

@media (max-width:760px){
 body.v3 .hero{--F:calc((100vw - 30px) / 5.2)}
 body.v3 .hero .ph img{object-position:79% 50%}
 body.v3 .hero .ph{height:80svh;min-height:540px;max-height:780px}
 body.v3 .hero .copy{bottom:34px}
 body.v3 .hero .copy .wrap{width:calc(100% - 30px);padding-left:0}
 body.v3 .hero h1{font-stretch:68%;font-weight:900;letter-spacing:-.022em;margin-left:-.04em}
 body.v3 .hero .kick{font-size:17px;margin-top:18px}
 .what h2{font-size:clamp(34px,9.6vw,44px)}
 .conn h2,.proof h2,.close h2,.connectors h2,.blk h2,.build3 h3{font-size:clamp(34px,9.4vw,42px)}
 .ihero.img{height:auto;min-height:0;max-height:none;overflow:visible}
 .ihero.img .ph{position:relative;inset:auto;height:68svh;min-height:460px;max-height:640px;overflow:hidden}
 .ihero.img .ph img{object-position:var(--mx,50%) 50%}
 .ihero.img .ph::after,.ihero.img.r .ph::after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 52%,rgba(0,0,0,.75) 82%,#000 100%)}
 .ihero.img .copy{position:relative;bottom:auto;margin-top:-104px}
 .ihero.img.r .copy .wrap{text-align:left}
 .ihero h1{font-size:min(92px,calc((100vw - 48px) / var(--hk,4.6)));font-stretch:70%}
 .ihero.img .lbl{margin-bottom:14px}
 .intro{padding-top:30px}
 .lead,.ihero .lead{font-size:19px}
 .band.zoom .ph{aspect-ratio:4/5;max-height:none}
 .band.zoom img{object-position:var(--mx,50%) 50%}
 .band.zoom.r .copy .wrap{text-align:left}
 .card p{font-size:17px}
}