/* Home */

/* ---- hero (C2) ---- */
.home{position:relative;background:linear-gradient(90deg,var(--orange) 50%,var(--ink) 50%);padding-bottom:clamp(48px,5.5vw,80px)}
.home .halves{display:grid;grid-template-columns:1fr 1fr}
.home .half{padding:clamp(120px,12vw,160px) 4.5vw clamp(44px,4.6vw,64px)}
.home .left{display:flex;justify-content:flex-end;text-align:right}
.home .lab{display:block;font:400 17px/1 var(--label);letter-spacing:.14em;margin-bottom:18px}
.home .left .lab{color:#fff}
.home .right .lab{color:var(--orange)}
.home .s1,.home .s2{font:300 clamp(26px,3.2vw,46px)/1.16 var(--sans);max-width:13ch}
.home .s1{color:var(--ink);font-weight:400}
.home .s2{color:#fff;max-width:none;white-space:nowrap}
.js .home .slide{opacity:0;transition:opacity 1.2s ease,transform 1.5s var(--ease)}
.js .home .sl{transform:translateX(-12vw)}
.js .home .sr{transform:translateX(12vw)}
.js .home.play .slide{opacity:1;transform:none}
.js .home.play .sl{transition-delay:.1s}
.js .home.play .sr{transition-delay:1.3s}
.home .punch{font:italic 400 clamp(42px,6.4vw,92px)/1 var(--serif);text-align:center;white-space:nowrap}
.home .pbox{position:relative;display:block;padding:clamp(30px,3.6vw,52px) 48px}
.home .pbox::before{content:"";position:absolute;inset:0;background:var(--gray);transform-origin:center}
.home .pwords{position:relative;display:inline-block;color:var(--cream)}
.home .pwords .c{color:var(--orange)}
.js .home .pbox::before{transform:scaleX(0);transition:transform .9s cubic-bezier(.65,0,.25,1)}
.js .home.play .pbox::before{transform:scaleX(1);transition-delay:2.5s}
.js .home .pwords{clip-path:inset(0 50% 0 50%);opacity:0;transition:clip-path 1.2s cubic-bezier(.3,.6,.2,1),opacity 1.2s ease}
.js .home.play .pwords{clip-path:inset(-10% -2% -20% -2%);opacity:1;transition-delay:3.3s}
@media (max-width:760px){
  .home{background:linear-gradient(var(--orange) var(--hh),var(--ink) var(--hh));padding:var(--hh) 0 0}
  .home .halves{grid-template-columns:1fr}
  .home .half{padding:36px 20px 40px}
  .home .left{background:var(--orange);justify-content:flex-start;text-align:left}
  .home .right{background:var(--ink)}
  .home .s1,.home .s2{max-width:none;font-size:30px}
  .home .s2{white-space:normal}
  .home br.dk{display:none}
  .js .home .sl{transform:translateX(-40px)}
  .js .home .sr{transform:translateX(40px)}
  .home .punch{white-space:normal;text-align:left;font-size:44px;line-height:1.1;padding-bottom:44px}
  .home .pbox{padding:26px 20px 30px}
}

/* ---- intro ---- */
.intro{max-width:880px;margin:0 auto;padding:clamp(80px,9vw,130px) 32px clamp(64px,7vw,100px);text-align:center}
.intro .i1{font:400 clamp(24px,2.6vw,36px)/1.3 var(--sans);color:var(--ink)}
.intro .i3{font:500 clamp(17px,1.45vw,19px)/1.5 var(--sans);color:var(--ink);margin-top:clamp(36px,3.4vw,48px)}
.intro .i3::before{content:"";display:block;width:36px;height:2px;background:var(--orange);margin:0 auto 20px}
.intro .i2{font:300 clamp(19px,1.8vw,24px)/1.6 var(--sans);color:var(--body);margin-top:22px}

/* ---- convictions ---- */
.wrap{max-width:1200px;margin:0 auto;padding:0 48px}
.pair{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.pair:last-child{border-bottom:1px solid var(--rule)}
.pair .cv+.cv{border-left:1px solid var(--rule)}
.cv{position:relative}
.cv h3{font:400 clamp(26px,2.5vw,36px)/1.16 var(--sans);color:var(--ink);letter-spacing:-.01em;margin-bottom:16px}
.cv h3 em{font:italic 600 1.1em/1 var(--serif);letter-spacing:-.005em}
.cv p{font:400 clamp(16.5px,1.4vw,18.5px)/1.62 var(--sans);color:var(--body);max-width:46ch}
.cv p+p{margin-top:14px}
.txt{position:relative;z-index:1}
.num{font:italic 600 1px/1 var(--serif);-webkit-text-stroke:.022em currentColor;paint-order:stroke fill;user-select:none}
.pair .cv{padding:clamp(64px,7vw,104px) 3.5vw clamp(56px,6vw,88px)}
.pair .cv:first-child{padding-left:0}
.pair .cv+.cv{padding-right:0} /* both columns get the same text width on wide screens */
.num{position:absolute;top:clamp(10px,1.4vw,22px);left:clamp(-12px,-.6vw,-4px);font-size:clamp(150px,15vw,210px);color:#F5D2B0;z-index:0}
.pair .cv+.cv .num{left:calc(3.5vw - 10px)}
.pair .cv+.cv.rv{transition-delay:.25s}

/* dark bands with the photo fading in from the right */
.band{position:relative;background:var(--ink);overflow:hidden;color:#fff}
.band .num{top:-.34em;left:-.06em;color:#3F2816}
.band .cv{padding-top:clamp(36px,4vw,56px);max-width:min(620px,50%)}
.band .cv h3{color:#fff}
.band .cv p{color:#E6E0D5}
.bin{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:clamp(88px,9vw,130px) 48px}
.b08 .bin{padding:clamp(80px,8vw,116px) 48px}
.b08 .cv h3{font-size:clamp(30px,3vw,44px)}
.b08 .cv p{font-size:clamp(17.5px,1.55vw,20.5px)}
.bimg{position:absolute;top:0;bottom:0;right:0;width:60%;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 22%,#000 50%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 22%,#000 50%)}
.bimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b03 .bimg img{object-position:40% 40%}
.b08 .bimg img{object-position:40% 30%}

/* ---- routing ---- */
.route{max-width:1200px;margin:0 auto;padding:clamp(88px,9vw,130px) 48px clamp(96px,10vw,140px)}
.route h2{font:400 clamp(30px,3.4vw,48px)/1.15 var(--sans);color:var(--ink);letter-spacing:-.01em;margin-bottom:clamp(36px,4vw,56px)}
.route h2 em{font:italic 600 1.1em/1 var(--serif)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)}
.card{display:flex;flex-direction:column;align-items:flex-start}
.card+.card.rv{transition-delay:.2s}
.cimg{position:relative;align-self:stretch;aspect-ratio:16/10;border-radius:4px;overflow:hidden;margin-bottom:26px;background:#E4DCCD}
.cimg img{width:100%;height:100%;object-fit:cover}
.c1 img{object-position:40% 35%}
.c2 img{object-position:60% 35%}
.card h3{font:italic 600 clamp(24px,2.6vw,36px)/1.1 var(--serif);color:var(--ink);margin-bottom:12px;white-space:nowrap}
.card p{flex:1;font:400 clamp(16.5px,1.4vw,18.5px)/1.6 var(--sans);color:var(--body);max-width:44ch;margin-bottom:24px}

@media (max-width:760px){
  .wrap{padding:0 20px}
  .intro{padding:60px 20px 48px}
  .pair{grid-template-columns:1fr}
  .pair .cv+.cv{border-left:0;border-top:1px solid var(--rule)}
  .pair .cv,.pair .cv:first-child{padding:64px 0 48px}
  .pair .cv+.cv .num{left:-8px}
  .num{font-size:150px}
  .pair .cv+.cv.rv{transition-delay:0s}
  .bimg{position:relative;width:100%;height:240px;-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 100%);mask-image:linear-gradient(to bottom,#000 45%,transparent 100%)}
  .bin,.b08 .bin{padding:8px 20px 60px}
  .band .cv{max-width:none;padding-top:40px}
  .route{padding:64px 20px 80px}
  .cards{grid-template-columns:1fr;gap:48px}
  .card+.card.rv{transition-delay:0s}
  .card h3{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .js .home .slide{opacity:1!important;transform:none!important;transition:none!important}
  .js .home .pbox::before{transform:none!important;transition:none!important}
  .js .home .pwords{clip-path:none!important;opacity:1!important;transition:none!important}
}