/* ============================================================
   GREYMTTR - greymttr.com
   Hand-written static styles. Token system ported from the EPK.
   ============================================================ */

:root{
  --bg:#0a0403; --panel:#170705; --panel2:#120604; --panel-t:rgba(30,8,5,0.35);
  --orange:#ff5a2e; --orange2:#ff8a5e; --edge:#5c1c0f; --edge2:#6b2313; --edge3:#3a1109;
  --bright:#f4ded2; --body:#dcbfae; --mut:#8a5a48; --mut2:#6b4438;
  --mono:'Space Mono',monospace; --stencil:'Big Shoulders Stencil',sans-serif; --sans:'Oswald',sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--body); font-family:var(--sans); overflow-x:hidden; -webkit-font-smoothing:antialiased;}
::selection{background:#ff3b1f; color:var(--bg);}
a{color:inherit;}
img{max-width:100%; display:block;}

@keyframes flicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.6}94%{opacity:1}}
@keyframes scanbeam{0%{top:-18%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
@keyframes crtflicker{0%,100%{opacity:1}50%{opacity:.985}53%{opacity:.96}56%{opacity:.99}}

/* ---- shared bits ---- */
.wrap{max-width:1100px; margin:0 auto; padding:0 24px;}
.tag{font-family:var(--mono); font-size:12px; letter-spacing:3px; color:var(--orange2); text-transform:uppercase;}
.h{font-family:var(--stencil); font-weight:800; color:var(--bright); line-height:1; letter-spacing:1px;}
.panel{position:relative; border:1px solid var(--edge); background:var(--panel-t); padding:40px;}
.tick{position:absolute; width:18px; height:18px; z-index:2;}
.tick.tl{top:-1px;left:-1px;border-top:1px solid var(--orange);border-left:1px solid var(--orange);}
.tick.tr{top:-1px;right:-1px;border-top:1px solid var(--orange);border-right:1px solid var(--orange);}
.tick.bl{bottom:-1px;left:-1px;border-bottom:1px solid var(--orange);border-left:1px solid var(--orange);}
.tick.br{bottom:-1px;right:-1px;border-bottom:1px solid var(--orange);border-right:1px solid var(--orange);}
section{padding:96px 0;}
.skip{position:absolute; left:-9999px;}
.skip:focus{left:12px; top:12px; z-index:200; background:var(--orange); color:var(--bg); padding:12px 18px; font-family:var(--mono); font-size:12px;}

/* ---- status bar ---- */
.statusbar{position:relative; z-index:5; display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 20px; background:var(--orange); color:var(--bg); font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; text-align:center;}
.statusbar span{animation:flicker 5s infinite;}

/* ---- nav ---- */
.nav{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 32px; background:rgba(10,4,3,.88); backdrop-filter:blur(6px); border-bottom:1px solid #4a1208;}
.nav-logo{height:56px; width:auto; object-fit:contain;}
.nav-links{display:flex; align-items:center; gap:28px; flex-wrap:wrap;}
.nav-links a{font-family:var(--mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--body); text-decoration:none; transition:color .2s;}
.nav-links a:hover{color:var(--orange);}
.btn-archive{font-family:var(--mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--bg); background:var(--orange); border:1px solid var(--orange); padding:11px 20px; text-decoration:none; font-weight:700; transition:background .2s,color .2s;}
.btn-archive:hover{background:transparent; color:var(--orange);}

/* ---- hero ---- */
.hero{position:relative; text-align:center; padding:80px 24px 70px; overflow:hidden;}
.hero .glow{position:absolute; inset:0; background:radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255,90,46,.14), transparent 70%); z-index:0;}
.hud{position:absolute; width:60px; height:60px; opacity:.6; z-index:2;}
.hud.tl{top:28px;left:28px;border-top:2px solid var(--orange);border-left:2px solid var(--orange);}
.hud.tr{top:28px;right:28px;border-top:2px solid var(--orange);border-right:2px solid var(--orange);}
.hud.bl{bottom:28px;left:28px;border-bottom:2px solid var(--orange);border-left:2px solid var(--orange);}
.hud.br{bottom:28px;right:28px;border-bottom:2px solid var(--orange);border-right:2px solid var(--orange);}
.hero-inner{position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:22px;}
.emblem{width:170px; height:170px; object-fit:contain; filter:drop-shadow(0 0 34px rgba(255,90,46,.5));}
.wordmark{width:min(360px,72vw); object-fit:contain;}
.hero .tagline{font-family:var(--mono); font-size:14px; letter-spacing:5px; color:#c99; text-transform:uppercase;}
.hero .loc{font-family:var(--mono); font-size:11px; letter-spacing:3px; color:var(--mut); text-transform:uppercase;}

/* ---- bio ---- */
.bio-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:26px; border-bottom:1px dashed var(--edge2);}
.bio h2{font-size:clamp(30px,4vw,46px);}
.bio-meta{font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--mut); text-align:right;}
.bio p{font-size:19px; line-height:1.85; color:var(--body); max-width:820px; margin:0 0 18px;}
.bio p:last-child{margin-bottom:0;}

/* ---- members ---- */
.members-head{text-align:center; margin-bottom:48px;}
.members-head h2{font-size:clamp(32px,4vw,48px); margin-top:12px;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.mcard{position:relative; border:1px solid var(--edge); background:var(--panel2); overflow:hidden; display:flex; flex-direction:column;}
.mcard .ph{position:relative; aspect-ratio:1/1; overflow:hidden;}
.mcard .ph img{width:100%; height:100%; object-fit:cover;}
.mcard .ph::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(18,6,4,.92));}
.mcard .body{padding:18px 20px 22px; flex:1; display:flex; flex-direction:column; justify-content:flex-end;}
.mcard .role{font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--orange2); text-transform:uppercase; margin-bottom:8px; line-height:1.7;}
.mcard .name{font-family:var(--stencil); font-weight:700; font-size:26px; color:var(--bright); letter-spacing:1px;}

/* ---- album ---- */
.music-grid{display:grid; grid-template-columns:minmax(220px,360px) 1fr; gap:44px; align-items:start;}
.album{position:relative;}
.album .frameline{position:absolute; inset:-14px; border:1px dashed var(--edge2); z-index:0;}
.album img{position:relative; z-index:1; width:100%; box-shadow:0 24px 60px rgba(0,0,0,.6);}
.music h2{font-family:var(--stencil); font-weight:900; font-size:clamp(40px,6vw,68px); color:var(--bright); line-height:.95; margin:6px 0 14px;}
.music .rec{font-family:var(--mono); font-size:12px; letter-spacing:2px; color:var(--orange); border:1px solid var(--orange); padding:10px 18px; display:inline-block; text-transform:uppercase; margin-bottom:20px;}
.music p{font-size:17px; line-height:1.8; color:var(--body); max-width:520px;}

/* ---- archive gateway (CRT frame, ported from the EPK player chrome) ---- */
.crt{position:relative; margin:0 auto; max-width:820px; border:1px solid var(--edge); border-radius:12px; overflow:hidden; background:#0c0503; box-shadow:0 0 0 1px rgba(255,90,46,.1),0 24px 70px rgba(0,0,0,.55); animation:crtflicker 6s infinite;}
.crt-head,.crt-foot{position:relative; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:var(--mono); text-transform:uppercase;}
.crt-head{padding:11px 18px; background:var(--orange); color:var(--bg); font-size:11px; letter-spacing:2px; font-weight:700;}
.crt-foot{padding:9px 18px; border-top:1px solid var(--edge3); background:var(--bg); font-size:10px; letter-spacing:2px; color:var(--mut);}
.crt-rec{animation:flicker 5s infinite;}
.crt-stage{position:relative; padding:48px 32px; text-align:center;}
.crt-stage > *{position:relative; z-index:5;}
.crt-scan{position:absolute; inset:0; z-index:3; pointer-events:none; background:repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0, rgba(0,0,0,.28) 1px, transparent 1px, transparent 3px); mix-blend-mode:multiply; opacity:.5;}
.crt-vig{position:absolute; inset:0; z-index:3; pointer-events:none; background:radial-gradient(ellipse 94% 86% at 50% 48%, transparent 55%, rgba(6,2,1,.85) 100%);}
.crt-beam{position:absolute; left:0; right:0; height:80px; top:-18%; z-index:4; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(255,138,94,.12) 50%, transparent); animation:scanbeam 7s linear infinite;}
.gate-kicker{font-family:var(--mono); font-size:11px; letter-spacing:3px; color:var(--orange2); text-transform:uppercase; margin-bottom:16px;}
.gate-title{font-family:var(--stencil); font-weight:900; font-size:clamp(34px,5vw,56px); color:var(--bright); line-height:1; margin:0 0 18px;}
.gate-copy{font-size:17px; line-height:1.8; color:var(--body); max-width:520px; margin:0 auto 32px;}
.gate-btn{display:inline-block; font-family:var(--mono); font-size:13px; letter-spacing:3px; text-transform:uppercase; font-weight:700; color:var(--bg); background:var(--orange); border:1px solid var(--orange); padding:17px 34px; text-decoration:none; transition:background .2s,color .2s;}
.gate-btn:hover{background:transparent; color:var(--orange);}

/* ---- signal / mailing list ---- */
.signal{text-align:center; position:relative; overflow:hidden;}
.signal .glow{position:absolute; inset:0; background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(255,90,46,.1), transparent 70%);}
.signal .inner{position:relative; max-width:640px; margin:0 auto;}
.signal h2{font-size:clamp(30px,4vw,44px); margin:14px 0 18px;}
.signal p{font-size:17px; line-height:1.7; color:var(--body); margin:0 0 36px;}
.subrow{display:flex; border:1px solid var(--orange);}
.subrow input{flex:1; min-width:0; background:transparent; border:none; outline:none; padding:16px 20px; color:var(--bright); font-family:var(--mono); font-size:13px; letter-spacing:1px;}
.subrow button{background:var(--orange); color:var(--bg); border:none; padding:16px 28px; font-family:var(--mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:background .2s;}
.subrow button:hover{background:var(--orange2);}
.subform{max-width:460px; margin:0 auto;}
.subdone{border:1px solid var(--orange); background:rgba(255,90,46,.08); padding:18px 20px; font-family:var(--mono); font-size:13px; letter-spacing:2px; color:var(--orange2); text-transform:uppercase;}
.socials{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.socials a{font-family:var(--mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--orange2); padding:12px 22px; border:1px solid var(--edge2); text-decoration:none; transition:border-color .2s,color .2s;}
.socials a:hover{border-color:var(--orange); color:var(--orange);}

/* ---- contact ---- */
.contact{text-align:center;}
.contact h2{font-size:clamp(30px,4vw,44px); margin:12px 0 10px;}
.contact .email{display:inline-block; font-family:var(--stencil); font-weight:800; font-size:clamp(24px,4vw,40px); color:var(--orange); text-decoration:none; letter-spacing:1px; margin:8px 0 6px; word-break:break-word;}
.contact .email:hover{color:var(--orange2);}
.contact .based{font-family:var(--mono); font-size:12px; letter-spacing:2px; color:var(--mut); text-transform:uppercase; margin-bottom:30px;}

/* ---- footer ---- */
footer{border-top:1px solid #4a1208; padding:34px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; background:var(--bg);}
footer .fl{display:flex; align-items:center; gap:12px;}
footer .femblem{width:54px; height:54px; object-fit:contain; flex:0 0 auto;}
.fmono{font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--mut); text-transform:uppercase;}
footer a.fmono{text-decoration:none; padding:12px 22px; border:1px solid var(--edge2); color:var(--orange2); transition:border-color .2s,color .2s;}
footer a.fmono:hover{border-color:var(--orange); color:var(--orange);}
.fr{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}

/* ---- responsive ---- */
@media (max-width:820px){
  section{padding:64px 0;}
  .panel{padding:26px;}
  .nav{padding:12px 18px; gap:12px;}
  .nav-logo{height:42px;}
  .nav-links{gap:16px;}
  .nav-links a.jump{display:none;}
  .grid3{grid-template-columns:1fr; gap:20px; max-width:420px; margin:0 auto;}
  .music-grid{grid-template-columns:1fr; gap:28px;}
  .album{max-width:360px;}
  .crt-beam{display:none;}
  .crt-head{font-size:9px; letter-spacing:1px; padding:9px 12px;}
  .crt-foot{font-size:9px; letter-spacing:1px; padding:8px 12px;}
  .crt-rec{display:none;}
  .crt-stage{padding:34px 20px;}
  .hud{width:44px;height:44px;}
  .subrow{flex-direction:column;}
  .subrow button{padding:15px 20px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important; transition:none !important;}
}