@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root { --ink:#0b0b0a; --snow:#f1eee5; --flare:#ff4d00; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--ink); }
body { color:var(--snow); font-family:'IBM Plex Mono', monospace; }
button, input { font:inherit; }
.hero { min-height:100svh; position:relative; overflow:hidden; display:flex; flex-direction:column; isolation:isolate; background:#111 url('assets/skiordie-hero.png') center/cover no-repeat; }
.hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-4; filter:grayscale(1) contrast(1.2) brightness(.8); }
.hero__wash { position:absolute; inset:0; z-index:-3; background:linear-gradient(90deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.38) 55%,rgba(5,5,5,.14)),linear-gradient(0deg,rgba(5,5,5,.78),transparent 45%); }
.grain { position:absolute; inset:-40%; z-index:-2; opacity:.13; pointer-events:none; animation:grain .22s steps(2) infinite; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
@keyframes grain { 0%{transform:translate(1%,1%)} 50%{transform:translate(-1%,2%)} 100%{transform:translate(2%,-1%)} }
.nav, footer { display:flex; align-items:center; justify-content:space-between; padding:26px 34px; text-transform:uppercase; font-size:11px; letter-spacing:.14em; }
.nav { border-bottom:1px solid rgba(255,255,255,.24); }
.mark { color:inherit; text-decoration:none; font-family:'Archivo Black',sans-serif; font-size:20px; letter-spacing:-.07em; display:flex; align-items:center; gap:8px; }
.mark i { color:var(--flare); font-style:normal; font-size:13px; }
.status { display:flex; align-items:center; gap:10px; }
.status__dot { width:7px; height:7px; border-radius:50%; background:var(--flare); box-shadow:0 0 16px var(--flare); animation:pulse 1.4s infinite; }
@keyframes pulse { 50%{opacity:.25} }
.hero__content { flex:1; display:flex; flex-direction:column; justify-content:center; padding:5vh 5vw 2vh; }
.eyebrow { color:var(--flare); font-size:11px; font-weight:600; letter-spacing:.18em; margin:0 0 18px 8px; }
h1 { font-family:'Archivo Black',sans-serif; font-size:clamp(5rem,16.5vw,15rem); line-height:.7; letter-spacing:-.095em; text-transform:uppercase; margin:0; display:flex; flex-direction:column; }
h1 span:last-child { margin-left:7vw; white-space:nowrap; }
h1 em { color:var(--flare); font-style:normal; }
.lower { display:flex; align-items:flex-end; justify-content:space-between; margin:clamp(30px,6vh,80px) 2vw 0 8vw; gap:40px; }
.manifesto { font-family:'Archivo Black',sans-serif; font-size:clamp(1rem,1.6vw,1.45rem); line-height:1.25; text-transform:uppercase; margin:0; max-width:450px; }
.signup-wrap { width:min(470px,100%); }
.signup-wrap>p { font-size:10px; text-transform:uppercase; letter-spacing:.14em; }
.signup { display:flex; border-bottom:2px solid var(--snow); }
.signup input { min-width:0; flex:1; color:var(--snow); background:transparent; border:0; outline:0; padding:15px 4px; font-size:12px; }
.signup input::placeholder { color:rgba(255,255,255,.52); }
.signup button { border:0; background:var(--flare); color:#fff; font-weight:600; padding:0 18px; cursor:pointer; transition:.18s ease; }
.signup button:hover { background:var(--snow); color:var(--ink); transform:translateY(-3px); }
.signup button span { font-size:16px; margin-left:6px; }
.form-note { opacity:.55; margin-bottom:0; }
footer { border-top:1px solid rgba(255,255,255,.24); }
.sound { border:0; color:inherit; background:transparent; font-size:10px; letter-spacing:.14em; cursor:pointer; }
.sound span { color:var(--flare); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:700px) {
  .nav, footer { padding:20px; }
  .status { font-size:0; }
  .status::after { content:'INCOMING'; font-size:9px; }
  .hero__content { padding:6vh 20px 3vh; justify-content:flex-end; }
  h1 { font-size:clamp(4.5rem,25vw,8rem); line-height:.76; }
  h1 span:last-child { margin-left:0; }
  .lower { flex-direction:column; align-items:flex-start; margin:45px 0 0; gap:25px; }
  .manifesto { font-size:1rem; }
  .signup-wrap { width:100%; }
  .signup button { padding:0 12px; font-size:10px; }
  .coordinates { display:none; }
  .hero__video { object-position:62% center; }
}
@media (prefers-reduced-motion:reduce) { .hero__video { display:none; } .grain,.status__dot { animation:none; } }