@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/barlow-condensed-600.ttf") format("truetype")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/barlow-condensed-800.ttf") format("truetype")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:900;font-display:swap;src:url("/assets/fonts/barlow-condensed-900.ttf") format("truetype")}

*,*::before,*::after{box-sizing:border-box}
:root{--black:#090909;--cream:#f3eee4;--orange:#ff4a24;--line:rgba(243,238,228,.15);--display:"Barlow Condensed","Arial Narrow",sans-serif;--body:Arial,Helvetica,sans-serif}
html,body{margin:0;width:100%;height:100%;background:var(--black)}
body{overflow:hidden;color:var(--cream);font-family:var(--body);-webkit-font-smoothing:antialiased}
::selection{background:var(--orange);color:#fff}

.page{position:relative;isolation:isolate;width:100%;height:100vh;height:100dvh;overflow:hidden;display:grid;grid-template-rows:76px minmax(0,1fr) 58px;background:var(--black)}
.page::after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(90deg,#090909 0%,rgba(9,9,9,.98) 28%,rgba(9,9,9,.82) 43%,rgba(9,9,9,.22) 64%,transparent 81%)}
.topbar,.footer{position:relative;z-index:7;padding-inline:clamp(1.25rem,3.8vw,4rem);display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;border-color:var(--line)}
.topbar{border-bottom:1px solid var(--line)}
.footer{border-top:1px solid var(--line);font-size:.55rem;font-weight:600;letter-spacing:.17em;color:rgba(243,238,228,.42)}
.topbar p,.footer p{margin:0}
.footer a{color:inherit;text-decoration:none;pointer-events:auto;transition:color .25s ease}
.footer a:hover,.footer a:focus-visible{color:var(--cream)}
.site-name{font-family:var(--display);font-size:1rem;font-weight:800;letter-spacing:.07em}
.status{display:flex;align-items:center;gap:.65rem;font-size:.55rem;font-weight:600;letter-spacing:.18em;color:rgba(243,238,228,.5)}
.status span{width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(255,74,36,.13);animation:pulse 2.8s ease-in-out infinite}

.hero{position:relative;z-index:5;min-height:0;display:flex;align-items:center;padding:clamp(1.5rem,4vh,3.5rem) clamp(1.25rem,3.8vw,4rem)}
.hero-content{width:min(610px,47vw)}
.kicker{margin:0 0 clamp(1.3rem,3vh,2.1rem);display:flex;align-items:center;gap:.8rem;font-size:.56rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:rgba(243,238,228,.53)}
.kicker::before{content:"";width:2.45rem;height:2px;background:var(--orange)}
h1{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:.09em;font-family:var(--display);font-size:clamp(5.5rem,min(13.6vw,23vh),12.5rem);font-weight:900;line-height:.85;letter-spacing:-.045em;text-transform:uppercase}
h1 span{display:block;width:max-content;max-width:100%;padding:.02em .035em .075em;text-shadow:0 14px 52px rgba(0,0,0,.68)}
h1 .accent{color:var(--orange)}
.intro{width:min(350px,90%);margin:clamp(1.2rem,3vh,2rem) 0 0;padding-top:.9rem;border-top:1px solid var(--line);font-size:.78rem;line-height:1.5;color:rgba(243,238,228,.52)}

#scene{position:absolute;z-index:1;inset:0;width:100%;height:100%;display:block;pointer-events:none;filter:saturate(1.03) contrast(1.03)}
.interaction-zone{position:absolute;z-index:6;top:76px;right:0;bottom:58px;width:57%;cursor:grab;touch-action:none;outline:0}
.interaction-zone:active,.interaction-zone.is-dragging{cursor:grabbing}
.interaction-zone:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,74,36,.62)}
.interaction-hint{position:absolute;right:clamp(1.25rem,3.8vw,4rem);bottom:1.25rem;display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-size:.54rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:rgba(243,238,228,.45);transition:color .2s ease,opacity .2s ease}
.interaction-hint i{position:relative;width:23px;height:23px;border:1px solid rgba(243,238,228,.27);border-radius:50%}
.interaction-hint i::before,.interaction-hint i::after{content:"";position:absolute;inset:50% auto auto 50%;background:var(--orange);transform:translate(-50%,-50%)}
.interaction-hint i::before{width:7px;height:1px}.interaction-hint i::after{width:1px;height:7px}
.interaction-zone:hover .interaction-hint,.interaction-zone:focus-visible .interaction-hint{color:var(--cream)}
.interaction-zone.is-dragging .interaction-hint{opacity:.18}

.grid{position:absolute;z-index:0;inset:0;pointer-events:none;background-image:linear-gradient(rgba(243,238,228,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(243,238,228,.035) 1px,transparent 1px);background-size:12.5% 25%}
.grain{position:absolute;z-index:8;inset:0;pointer-events:none;opacity:.18;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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E")}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(255,74,36,0);opacity:.72}}

@media(max-width:760px){
  .page{grid-template-rows:68px minmax(0,1fr) 54px}
  .page::after{background:linear-gradient(180deg,#090909 0%,rgba(9,9,9,.97) 38%,rgba(9,9,9,.73) 62%,rgba(9,9,9,.2) 100%)}
  .topbar,.footer{padding-inline:1.1rem}
  .site-name{font-size:.88rem}.status{font-size:.48rem;letter-spacing:.12em}
  .hero{align-items:flex-start;padding:clamp(1.8rem,5.5vh,3.2rem) 1.1rem 1rem}
  .hero-content{width:100%}
  .kicker{margin-bottom:.9rem;font-size:.49rem;letter-spacing:.15em}
  h1{font-size:min(23.5vw,7rem);line-height:.88;gap:.1em;letter-spacing:-.035em}
  .intro{width:min(285px,84%);margin-top:.85rem;padding-top:.65rem;font-size:.71rem}
  #scene{filter:saturate(.96) contrast(.98)}
  .interaction-zone{top:43%;bottom:54px;width:100%}
  .interaction-hint{right:1.1rem;bottom:.75rem;font-size:.48rem}
  .footer{font-size:.48rem;letter-spacing:.12em}.footer p:last-child{display:none}
}
@media(max-width:390px) and (max-height:700px){
  .hero{padding-top:1.4rem}
  .kicker{margin-bottom:.65rem}
  h1{font-size:21.5vw}
  .intro{margin-top:.62rem}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}