/* Homepage hero: hand-built, do not modify */

@font-face{font-family:"Roboto Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/roboto-condensed-700.woff2) format("woff2")}
/* ---- hero ---- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--matte);--a:110%;--b:140%}
.hero .photo{position:absolute;right:calc(30vw - 66.67svh);top:-102%;height:250%;aspect-ratio:1717/2576;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%);mask-image:linear-gradient(to right,transparent 0,#000 30%)}
.hero .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .col{
  -webkit-mask-image:linear-gradient(100deg,transparent var(--a),#000 var(--b));
          mask-image:linear-gradient(100deg,transparent var(--a),#000 var(--b))}
.hero .veil{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(11,11,12,.75) 0%,rgba(11,11,12,0) 22%),
    linear-gradient(to top,rgba(11,11,12,.95) 0%,rgba(11,11,12,0) 34%),
    linear-gradient(to right,rgba(11,11,12,.55) 0%,rgba(11,11,12,0) 55%)}
.hero .copy{position:absolute;z-index:3;left:clamp(18px,4vw,48px);right:clamp(18px,4vw,48px);bottom:clamp(26px,6vh,56px)}
.hero .name{margin:0;font-family:"Roboto Condensed","Arial Narrow",sans-serif;font-weight:700;font-stretch:normal;text-transform:uppercase;
  font-size:clamp(3.4rem,9vw,9rem);line-height:.86;letter-spacing:-.005em;color:var(--silk)}
.hero .tag{margin:1.2em 0 0;font-family:var(--mono);font-size:clamp(.82rem,1.3vw,1.1rem);letter-spacing:.22em;text-transform:uppercase;color:var(--silk);opacity:.85}
.hero .tag span{white-space:nowrap}
.hero .tag i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#35a86a;margin:0 1.1em;vertical-align:middle}

@media (max-width:640px){
  .hero .photo{right:auto;top:-20%;height:124%;left:calc(72vw - 49.6svh);-webkit-mask-image:none;mask-image:none}
  .hero .col{-webkit-mask-image:linear-gradient(170deg,transparent var(--a),#000 var(--b));mask-image:linear-gradient(170deg,transparent var(--a),#000 var(--b))}
  .hero .name{font-size:19vw}
  .hero .tag{line-height:2;letter-spacing:.16em}
  .hero .tag i{margin:0 .7em}
}
.js .hero .copy{opacity:0;transform:translateY(18px)}
.js.ready .hero .copy{opacity:1;transform:none;transition:opacity 1s .5s ease,transform 1.2s .5s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.js .hero .copy{opacity:1!important;transform:none!important;transition:none!important}}

/* header sits over the hero on the homepage only */
body.home .site-header{position:absolute;top:0;left:0;right:0;z-index:10;border-bottom:0}