/* Homepage hero: an editorial title and a restrained architectural elevation. */
.hero{--hero-scroll:0;min-height:100svh;padding:clamp(118px,13vh,160px) var(--page) clamp(42px,5vw,78px);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.hero__descriptor{font-size:10px;font-weight:600;letter-spacing:.22em;line-height:1.5;margin:0}
.hero__main{position:relative;display:flex;align-items:center;min-height:clamp(470px,59vh,670px);transform:translateY(calc(var(--hero-scroll) * -18px))}
.hero__title{position:relative;z-index:2;width:65%;font-family:var(--serif);font-size:clamp(120px,18vw,350px);font-weight:400;letter-spacing:-.075em;line-height:.75;margin:0 0 0 -.055em;white-space:nowrap}
.hero__title-mask{display:block;overflow:hidden;padding-top:.045em;padding-bottom:.095em;margin-top:-.045em;margin-bottom:-.095em}
.hero__title-word{display:block}
.hero__by{display:block;width:max-content;margin:clamp(20px,3.5vw,52px) 0 0 41%;font-size:clamp(34px,4.4vw,78px);font-weight:400;letter-spacing:.035em;line-height:1}
.hero__art{position:absolute;right:0;top:3%;width:44%;height:94%;opacity:calc(.82 - var(--hero-scroll) * .22);pointer-events:none}
.hero__art svg{display:block;width:100%;height:100%}
.hero__grid{opacity:.56}
.hero__details{opacity:.76}
.hero__footer{display:flex;justify-content:space-between;align-items:end;gap:50px}
.hero__statement{font-family:var(--serif);font-size:clamp(29px,3.1vw,52px);letter-spacing:-.025em;line-height:1.04;margin:0}
.hero__statement em{font-weight:400}
.hero__support{font-size:clamp(12px,.95vw,15px);line-height:1.65;max-width:360px;margin:15px 0 0}
.hero__cta{display:inline-flex;align-items:center;justify-content:space-between;gap:clamp(35px,5vw,90px);padding:0 0 12px;border-bottom:1px solid var(--ink);font-size:11px;font-weight:600;letter-spacing:.16em;white-space:nowrap;transition:gap .5s var(--ease)}
.hero__cta span{font-size:20px;font-weight:300;line-height:0;transition:transform .4s var(--ease)}
.hero__cta:hover span,.hero__cta:focus-visible span{transform:translateX(6px)}

/* Sequenced entrance after the existing logo preloader. */
.home-page .site-header{transition:height .5s var(--ease),background .5s,border-color .5s,opacity .9s var(--ease),transform .9s var(--ease)}
.has-js .home-page:not(.hero-ready) .site-header{opacity:0;transform:translateY(-12px)}
.hero__descriptor{transition:opacity .8s var(--ease) .15s,transform .8s var(--ease) .15s}
.hero__title-word{transition:transform 1.2s var(--ease) .22s}
.hero__by{transition:opacity .75s var(--ease) .72s,transform .75s var(--ease) .72s}
.hero__grid{transition:opacity 1.1s var(--ease) .42s}
.hero__details{transition:opacity 1s var(--ease) .75s}
.hero__draw{stroke-dasharray:1200;stroke-dashoffset:0;transition:stroke-dashoffset 1.75s var(--ease) .42s}
.hero__statement{transition:opacity .75s var(--ease) .88s,transform .75s var(--ease) .88s}
.hero__support{transition:opacity .75s var(--ease) 1s,transform .75s var(--ease) 1s}
.hero__cta{transition:opacity .7s var(--ease) 1.12s,transform .7s var(--ease) 1.12s}
.has-js .hero:not(.is-ready) .hero__descriptor{opacity:0;transform:translateY(10px)}
.has-js .hero:not(.is-ready) .hero__title-word{transform:translateY(110%)}
.has-js .hero:not(.is-ready) .hero__by,.has-js .hero:not(.is-ready) .hero__statement,.has-js .hero:not(.is-ready) .hero__support,.has-js .hero:not(.is-ready) .hero__cta{opacity:0;transform:translateY(18px)}
.has-js .hero:not(.is-ready) .hero__grid,.has-js .hero:not(.is-ready) .hero__details{opacity:0}
.has-js .hero:not(.is-ready) .hero__draw{stroke-dashoffset:1200}

@media(max-width:800px){
  .hero{padding-top:112px;padding-bottom:44px}
  .hero__main{min-height:54vh}
  .hero__title{width:75%;font-size:clamp(112px,21vw,180px)}
  .hero__by{font-size:clamp(40px,5.8vw,60px);margin-left:36%}
  .hero__art{width:58%;right:-7%;top:8%;height:84%}
  .hero__footer{gap:28px}
  .hero__statement{font-size:clamp(30px,3.8vw,42px)}
  .hero__cta{font-size:9px;gap:20px}
}
@media(max-width:600px){
  .hero{min-height:100svh;padding:115px var(--page) 36px;grid-template-rows:auto minmax(350px,1fr) auto}
  .hero__descriptor{font-size:8px;letter-spacing:.18em}
  .hero__main{min-height:0;align-items:flex-start}
  .hero__title{width:100%;font-size:clamp(84px,23.5vw,125px);margin-top:clamp(95px,14vh,138px)}
  .hero__by{font-size:clamp(33px,8.6vw,47px);margin:19px 0 0 37%;letter-spacing:.015em}
  .hero__art{width:96%;height:77%;right:-19%;top:15%;opacity:calc(.58 - var(--hero-scroll) * .15)}
  .hero__grid{opacity:.3}
  .hero__details{display:none}
  .hero__footer{display:block}
  .hero__statement{font-size:clamp(31px,8vw,40px);max-width:340px}
  .hero__support{font-size:12px;max-width:275px;margin-top:12px}
  .hero__cta{margin-top:34px;font-size:10px;gap:42px;padding-bottom:10px}
}
@media(max-width:390px){.hero__title{font-size:23vw}.hero__by{font-size:8.4vw}}
@media(prefers-reduced-motion:reduce){
  .hero__main{transform:none}
  .has-js .home-page:not(.hero-ready) .site-header{opacity:1;transform:none}
  .has-js .hero:not(.is-ready) .hero__descriptor,.has-js .hero:not(.is-ready) .hero__by,.has-js .hero:not(.is-ready) .hero__statement,.has-js .hero:not(.is-ready) .hero__support,.has-js .hero:not(.is-ready) .hero__cta,.has-js .hero:not(.is-ready) .hero__grid,.has-js .hero:not(.is-ready) .hero__details{opacity:1;transform:none}
  .has-js .hero:not(.is-ready) .hero__title-word{transform:none}
  .has-js .hero:not(.is-ready) .hero__draw{stroke-dashoffset:0}
}
