@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:700;font-display:swap;src:url("/assets/fonts/barlow-condensed-700.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")}
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:700;font-display:swap;src:url("/assets/fonts/barlow-condensed-700-italic.ttf") format("truetype")}

*,*::before,*::after{box-sizing:border-box}

:root{
  --black:#0b0b0a;
  --black-soft:#11110f;
  --cream:#f0ece3;
  --orange:#ff431d;
  --line:rgba(240,236,227,.18);
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:Arial,Helvetica,sans-serif;
}

html,body{margin:0;min-height:100%;background:var(--black)}
body{color:var(--cream);font-family:var(--body);overflow-x:hidden}
::selection{background:var(--orange);color:#fff}

.page{position:relative;isolation:isolate;min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:84px minmax(0,1fr) 66px;overflow:hidden;background:var(--black)}
.topbar,.footer{position:relative;z-index:10;padding:0 clamp(1.25rem,3.5vw,3.5rem);display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;letter-spacing:.16em;background:var(--black)}
.topbar{border-bottom:1px solid var(--line)}
.site-name,.status,.footer p{margin:0}
.site-name{font-family:var(--display);font-size:1rem;font-weight:800}
.status{display:flex;align-items:center;gap:.72rem;font-size:.62rem;font-weight:600;color:rgba(240,236,227,.6)}
.status span{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(255,67,29,.13);animation:pulse 2.4s ease-in-out infinite}

.hero{position:relative;z-index:2;min-height:0;display:grid;grid-template-columns:minmax(420px,46%) minmax(0,54%)}
.hero-copy{position:relative;z-index:3;min-width:0;display:flex;align-items:center;padding:clamp(2rem,4vw,4.5rem);background:var(--black-soft);border-right:1px solid var(--line)}
.hero-copy::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0 49.8%,rgba(240,236,227,.035) 50%,transparent 50.2%)}
.copy-inner{position:relative;width:100%;max-width:650px}
.kicker{margin:0 0 clamp(1.25rem,3vh,2.25rem);display:flex;align-items:center;gap:.85rem;font-size:.64rem;font-weight:600;letter-spacing:.21em;text-transform:uppercase;color:rgba(240,236,227,.58)}
.kicker::before{content:"";width:2.6rem;height:2px;background:var(--orange);flex:0 0 auto}

h1{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:.1em;font-family:var(--display);font-size:clamp(5rem,min(10.7vw,24vh),10.5rem);font-weight:900;line-height:.84;letter-spacing:-.045em;text-transform:uppercase}
h1 span{display:block;max-width:100%;padding:.02em .035em .055em}
h1 .outline{color:transparent;-webkit-text-stroke:2px var(--cream);font-style:italic}

.message{width:min(390px,100%);margin:clamp(1.35rem,3vh,2.4rem) 0 0 auto;padding-top:1.1rem;display:grid;grid-template-columns:34px 1fr;gap:1rem;border-top:1px solid var(--line)}
.message-index{padding-top:.15rem;font-family:var(--display);font-size:.65rem;color:var(--orange)}
.message p{margin:0;font-size:clamp(.84rem,1vw,.96rem);line-height:1.55;color:rgba(240,236,227,.58)}

.visual-panel{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(circle at 52% 45%,#28100a 0,#120d0a 38%,#090908 74%)}
.visual-panel::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background-image:linear-gradient(rgba(240,236,227,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(240,236,227,.05) 1px,transparent 1px);background-size:25% 25%}
.visual-panel::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;box-shadow:inset 0 0 110px rgba(0,0,0,.48)}
#scene{position:absolute;z-index:1;inset:0;width:100%;height:100%;display:block;filter:saturate(1.04) contrast(1.02)}
.visual-label{position:absolute;z-index:4;margin:0;font-family:var(--display);font-size:.58rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(240,236,227,.46)}
.visual-label-top{top:1.4rem;left:1.5rem}
.visual-label-side{right:1.3rem;bottom:1.5rem;writing-mode:vertical-rl}
.corner{position:absolute;z-index:4;width:14px;height:14px;border-color:rgba(240,236,227,.48)}
.corner-tl{top:1.2rem;left:1.2rem;border-top:1px solid;border-left:1px solid}.corner-tr{top:1.2rem;right:1.2rem;border-top:1px solid;border-right:1px solid}.corner-bl{bottom:1.2rem;left:1.2rem;border-bottom:1px solid;border-left:1px solid}.corner-br{bottom:1.2rem;right:1.2rem;border-bottom:1px solid;border-right:1px solid}

.footer{border-top:1px solid var(--line);font-size:.57rem;font-weight:600;color:rgba(240,236,227,.42)}
.footer-center{position:absolute;left:50%;transform:translateX(-50%)}
.grain{position:absolute;z-index:20;inset:0;pointer-events:none;opacity:.23;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='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 10px rgba(255,67,29,0)}}

@media(max-width:760px){
  .page{grid-template-rows:70px minmax(0,1fr) 58px;overflow:auto}
  .topbar,.footer{padding-inline:1.1rem}
  .site-name{font-size:.88rem}
  .status{font-size:.52rem;letter-spacing:.1em}
  .hero{grid-template-columns:1fr;grid-template-rows:minmax(250px,47%) minmax(220px,53%)}
  .hero-copy{padding:1.5rem 1.25rem 1.35rem;border-right:0;border-bottom:1px solid var(--line)}
  .copy-inner{max-width:none}
  .kicker{margin-bottom:1rem;font-size:.57rem}
  h1{font-size:min(20.5vw,6rem);line-height:.88;gap:.08em}
  h1 .outline{-webkit-text-stroke-width:1.4px}
  .message{width:min(330px,92%);margin-top:1rem;padding-top:.75rem}
  .message p{font-size:.78rem}
  .visual-panel{min-height:220px}
  .visual-label-top{top:1rem;left:1.15rem}
  .visual-label-side{right:1rem;bottom:1.1rem}
  .corner-tl,.corner-tr{top:.8rem}.corner-bl,.corner-br{bottom:.8rem}.corner-tl,.corner-bl{left:.8rem}.corner-tr,.corner-br{right:.8rem}
  .footer-center{display:none}
}

@media(max-width:420px) and (max-height:700px){
  .hero{grid-template-rows:minmax(245px,52%) minmax(190px,48%)}
  h1{font-size:19vw}
  .message{margin-top:.7rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}