*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;background:#0D0D0D;color:#F3ECDA;font-family:'Archivo',Arial,sans-serif;font-stretch:112%;font-weight:450;overscroll-behavior:none}

.page{container-type:inline-size;height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}

/* Logo: each piece is its own SVG, placed on the 3289×468 grid */
.top{padding:clamp(14px,1.7cqw,28px) clamp(16px,2.2cqw,40px)}
.logo{margin:0;color:#FF5C1A;line-height:0;transform-origin:50% 50%}
.logo-box{position:relative;display:block;width:100%;aspect-ratio:3289/468}
.lp{position:absolute;top:0;height:100%;overflow:visible;display:block}

/* Hero */
.hero{position:relative;overflow:hidden;min-height:0}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%}
.hero img{object-fit:cover;object-position:50% 55%}
.spec{position:absolute;left:clamp(16px,2.2cqw,40px);bottom:clamp(10px,1.1cqw,18px);margin:0;color:#FF5C1A;font-size:clamp(13px,1.02cqw,18px);line-height:1.34;font-weight:600;font-stretch:118%}

.spec p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.join-open,.join-send{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;min-height:24px;text-align:left}
.join-open:hover,.join-send:hover{color:#F3ECDA}
.join-open:focus-visible,.join-send:focus-visible{outline:2px solid #F3ECDA;outline-offset:3px}
.arrow{display:inline-block;height:.68em;width:auto;vertical-align:-.02em;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .25s ease}
.join-open:hover .arrow,.join-send:hover .arrow{transform:translateX(6px)}
.join-form{display:flex;align-items:baseline;gap:.9em;width:min(24em,calc(100vw - 32px))}
.join-form[hidden]{display:none}
.join-form input[type=email]{flex:1 1 auto;min-width:0;padding:2px 0;border:0;border-bottom:1px solid #FF5C1A;border-radius:0;background:transparent;color:#F3ECDA;font:inherit;font-size:max(16px,1em);font-weight:500}
.join-form input::placeholder{color:#c9bfae;opacity:.75}
.join-form input:focus{outline:none;border-color:#F3ECDA}

/* Band */
.band{padding:clamp(16px,1.5cqw,30px) clamp(16px,2.2cqw,40px) clamp(14px,1.3cqw,26px);color:#FF5C1A}
.tagline{margin:0;font-size:8.4cqw;line-height:.84;font-weight:800;font-stretch:125%;letter-spacing:-.012em;white-space:nowrap}

/* Grain */
.grain-clip{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.grain{position:absolute;inset:-140px;opacity:.45;background:url(/assets/grain.png) 0 0/400px 400px;animation:grain 1.1s steps(1) infinite}
@keyframes grain{0%{transform:translate(0,0)}16%{transform:translate(-64px,38px)}33%{transform:translate(52px,-74px)}50%{transform:translate(-30px,-46px)}66%{transform:translate(88px,20px)}83%{transform:translate(-92px,70px)}}

/* Intro: starting state, site.js plays it */
.intro .hide-in-intro,.intro .lp{opacity:0}
.hero.in img{animation:lift 2.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes lift{from{transform:scale(1.035)}to{transform:none}}

@container (max-width:760px){
  .tagline{font-size:12.4cqw}
}

@media (prefers-reduced-motion:reduce){.grain,.hero.in img{animation:none}}