/* ============================================================
   THE ALIAS ARCHIVE - archive.greymttr.com
   Shared styles for the gate, the hub, and the archive pages.
   Token system matches greymttr.com and 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}
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;}
/* The hidden attribute must beat our own display rules (e.g. .entry-sealed
   is display:flex, which would otherwise outrank the UA [hidden] rule). */
[hidden]{display:none !important;}

@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}}
@keyframes grainflicker{0%,100%{transform:translate(0,0)}50%{transform:translate(-2%,1%)}}
@keyframes caret{0%,100%{opacity:1}50%{opacity:0}}

/* ---- 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;}
.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);}
.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;}

/* ============================================================
   ACCESS GATE
   Full-screen overlay. Moved here from the greymttr.com intro:
   the hack sequence now guards the archive, not the band site.
   ============================================================ */
.gate{position:fixed; inset:0; z-index:100; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px; transition:opacity .8s ease;}
.gate.is-open{opacity:0; pointer-events:none;}
.gate .glow{position:absolute; inset:0; background:radial-gradient(ellipse 60% 55% at 50% 45%, rgba(255,90,46,.12), transparent 70%);}
.gate .hud{position:absolute; width:52px; height:52px; opacity:.6;}
.gate .hud.tl{top:34px;left:34px;border-top:2px solid var(--orange);border-left:2px solid var(--orange);}
.gate .hud.tr{top:34px;right:34px;border-top:2px solid var(--orange);border-right:2px solid var(--orange);}
.gate .hud.bl{bottom:34px;left:34px;border-bottom:2px solid var(--orange);border-left:2px solid var(--orange);}
.gate .hud.br{bottom:34px;right:34px;border-bottom:2px solid var(--orange);border-right:2px solid var(--orange);}
.gate-inner{position:relative; width:100%; max-width:540px; display:flex; flex-direction:column; align-items:center; gap:26px;}
.gate-emblem{width:96px; height:96px; object-fit:contain; filter:drop-shadow(0 0 30px rgba(255,90,46,.45));}
.gate-label{font-family:var(--mono); font-size:12px; letter-spacing:5px; color:var(--orange2); text-transform:uppercase; animation:flicker 5s infinite;}
.gate-term{width:100%; border:1px solid var(--edge); background:rgba(30,8,5,.5); padding:26px 28px; text-align:left; font-family:var(--mono); font-size:13px; letter-spacing:1px; line-height:2; color:#a86a54;}
.gate-term .hot{color:var(--orange);}
.gate-term .warm{color:var(--orange2);}
.gate-term .cool{color:var(--body);}
.gate-term .caret{animation:caret .8s steps(1) infinite;}
.gate-btn{width:100%; background:var(--orange); color:var(--bg); border:none; padding:18px 28px; font-family:var(--mono); font-size:13px; letter-spacing:3px; text-transform:uppercase; font-weight:700; cursor:pointer; transition:background .2s;}
.gate-btn:hover{background:var(--orange2);}
.gate-btn[disabled]{cursor:default; opacity:.75;}
.gate-note{font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--mut2); text-transform:uppercase;}

/* the page underneath the gate */
.shell{opacity:0; transition:opacity .6s ease .2s;}
.shell.is-open{opacity:1;}

/* ---- hijack bar ---- */
.hijack{position:relative; z-index:60; display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 24px; background:var(--orange); color:var(--bg); font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; text-align:center;}
.hijack 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,.9); backdrop-filter:blur(6px); border-bottom:1px solid #4a1208;}
.nav-logo{height:52px; width:auto; object-fit:contain;}
.nav-links{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.nav-links a{font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--body); text-decoration:none; transition:color .2s;}
.nav-links a:hover{color:var(--orange);}
.nav-links a.here{color:var(--orange);}

/* ---- page head ---- */
.phead{position:relative; text-align:center; padding:72px 24px 40px; overflow:hidden;}
.phead .glow{position:absolute; inset:0; background:radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255,90,46,.12), transparent 70%);}
.phead-inner{position:relative; display:flex; flex-direction:column; align-items:center; gap:16px;}
.phead h1{font-family:var(--stencil); font-weight:900; font-size:clamp(38px,6vw,68px); color:var(--bright); line-height:1; margin:0; letter-spacing:1px;}
.phead .sub{font-family:var(--mono); font-size:11px; letter-spacing:4px; color:var(--mut); text-transform:uppercase;}

/* ============================================================
   CRT ARCHIVE FRAME
   ============================================================ */
.frame{position:relative; margin:48px clamp(16px,4vw,64px) 64px; border:1px solid var(--edge); border-radius:14px; overflow:hidden; background:#0c0503; box-shadow:0 0 0 1px rgba(255,90,46,.1),0 30px 90px rgba(0,0,0,.6); animation:crtflicker 6s infinite;}
.frame-head,.frame-foot{position:relative; z-index:44; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); text-transform:uppercase;}
.frame-head{padding:12px 22px; background:var(--orange); color:var(--bg); font-size:11px; letter-spacing:2px; font-weight:700;}
.frame-foot{padding:10px 22px; border-top:1px solid var(--edge3); background:var(--bg); font-size:10px; letter-spacing:2px; color:var(--mut);}
.frame-rec{animation:flicker 5s infinite;}
.frame-brk{position:absolute; width:22px; height:22px; opacity:.7; z-index:43; pointer-events:none;}
.frame-brk.tl{top:60px;left:12px;border-top:2px solid var(--orange);border-left:2px solid var(--orange);}
.frame-brk.tr{top:60px;right:12px;border-top:2px solid var(--orange);border-right:2px solid var(--orange);}
.frame-brk.bl{bottom:56px;left:12px;border-bottom:2px solid var(--orange);border-left:2px solid var(--orange);}
.frame-brk.br{bottom:56px;right:12px;border-bottom:2px solid var(--orange);border-right:2px solid var(--orange);}
.fx{position:absolute; inset:0; pointer-events:none;}
.fx-scan{z-index:41; background:repeating-linear-gradient(to bottom, rgba(0,0,0,.30) 0, rgba(0,0,0,.30) 1px, transparent 1px, transparent 3px); mix-blend-mode:multiply; opacity:.6;}
.fx-vig{z-index:42; background:radial-gradient(ellipse 92% 84% at 50% 48%, transparent 50%, rgba(6,2,1,.92) 100%);}
.fx-beam{z-index:42; left:0; right:0; height:90px; top:-18%; inset:auto; background:linear-gradient(180deg, transparent, rgba(255,138,94,.13) 50%, transparent); animation:scanbeam 7s linear infinite;}
.frame-body{position:relative; z-index:2; padding:64px 48px; display:flex; justify-content:center;}
.frame-bg{position:absolute; inset:0; background:linear-gradient(180deg, #0a0403 0%, #170705 50%, #0a0403 100%);}

/* ---- archive panel ---- */
.apanel{position:relative; max-width:1040px; width:100%; border:1px solid var(--edge); background:rgba(30,8,5,.35); padding:40px;}
.apanel-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);}
.apanel-title{font-family:var(--stencil); font-weight:800; font-size:clamp(30px,4vw,46px); letter-spacing:1px; color:var(--bright); line-height:1;}
.apanel-meta{font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--mut); text-align:right; line-height:1.8;}

/* ---- entries (logs + vault share this) ---- */
.entries{display:flex; flex-direction:column; gap:16px;}
.entry{position:relative; border:1px dashed var(--edge2); background:rgba(255,90,46,.02);}
.entry .etick{position:absolute; width:10px; height:10px;}
.entry .etick.tl{top:-1px;left:-1px;border-top:1px solid var(--orange);border-left:1px solid var(--orange);}
.entry .etick.br{bottom:-1px;right:-1px;border-bottom:1px solid var(--orange);border-right:1px solid var(--orange);}
.entry-head{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; cursor:pointer; width:100%; background:none; border:none; text-align:left; font:inherit; color:inherit;}
.entry-left{display:flex; align-items:center; gap:18px; min-width:0;}
.entry-code{display:block; font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--orange2); border:1px solid var(--edge2); padding:7px 10px; flex-shrink:0;}
.entry-title{display:block; font-family:var(--stencil); font-weight:700; font-size:22px; letter-spacing:1px; color:var(--bright); line-height:1.1;}
.entry-meta{display:block; font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--mut); margin-top:5px;}
.entry-action{font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--orange2); font-weight:700; white-space:nowrap; flex-shrink:0;}
.entry-sealed{display:flex; align-items:center; gap:12px; padding:0 22px 20px; font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--mut2);}
.entry-body{border-top:1px dashed var(--edge2); padding:26px 22px;}
.entry-stamp{font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--orange2); margin-bottom:16px;}
.entry-body p{font-size:18px; line-height:1.85; color:var(--body); max-width:760px; margin:0;}
.entry-sign{font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--orange2); margin-top:22px;}

/* ---- vault entry media ---- */
.vault-media{display:grid; grid-template-columns:minmax(200px,320px) 1fr; gap:36px; align-items:start;}
.vault-art{position:relative;}
.vault-art .frameline{position:absolute; inset:-14px; border:1px dashed var(--edge2); z-index:0;}
.vault-art img{position:relative; z-index:1; width:100%; box-shadow:0 24px 60px rgba(0,0,0,.6);}
.vault-kicker{font-family:var(--mono); font-size:12px; letter-spacing:3px; color:var(--orange2); margin-bottom:16px;}
.vault-headline{font-family:var(--stencil); font-weight:900; font-size:clamp(34px,4vw,52px); color:var(--bright); line-height:1; margin-bottom:20px;}
.vault-body{font-size:17px; line-height:1.8; color:var(--body); margin:0 0 28px; max-width:440px;}
.vault-status{font-family:var(--mono); font-size:12px; letter-spacing:2px; color:var(--orange); border:1px solid var(--orange); padding:12px 24px; text-transform:uppercase; display:inline-block;}
.vault-note{font-family:var(--mono); font-size:11px; letter-spacing:1px; color:var(--mut2); margin-top:24px; padding-top:18px; border-top:1px dashed var(--edge2); line-height:1.75; max-width:460px;}

/* ============================================================
   HUB (index, beneath the gate)
   ============================================================ */
.hub{display:grid; grid-template-columns:repeat(2,1fr); gap:28px; max-width:1040px; width:100%;}
.hubcard{position:relative; display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--edge); background:#0c0503; overflow:hidden; transition:border-color .2s, transform .2s;}
.hubcard:hover{border-color:var(--orange); transform:translateY(-3px);}
.hubcard-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; background:var(--orange); color:var(--bg); font-family:var(--mono); font-size:10px; letter-spacing:2px; font-weight:700; text-transform:uppercase;}
.hubcard-body{padding:34px 26px 30px; flex:1; display:flex; flex-direction:column;}
.hubcard-title{font-family:var(--stencil); font-weight:900; font-size:clamp(28px,3.4vw,40px); color:var(--bright); line-height:1; margin-bottom:14px;}
.hubcard-copy{font-size:16px; line-height:1.75; color:var(--body); margin:0 0 26px; flex:1;}
.hubcard-cta{font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--orange2); text-transform:uppercase; font-weight:700;}

/* ---- 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:48px; height:48px; 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);}

/* ---- responsive ---- */
@media (max-width:820px){
  .nav{padding:12px 18px; gap:12px;}
  .nav-logo{height:40px;}
  .nav-links{gap:14px;}
  .frame{margin:28px 12px 40px;}
  .frame-body{padding:34px 16px;}
  .frame-brk{display:none;}
  .fx-beam{display:none;}
  .frame-head{font-size:9px; letter-spacing:1px; padding:10px 12px;}
  .frame-foot{font-size:9px; letter-spacing:1px; padding:9px 12px;}
  .frame-rec{display:none;}
  .apanel{padding:24px 18px;}
  .entry-head{flex-direction:column; align-items:flex-start; gap:12px;}
  .entry-left{flex-direction:column; align-items:flex-start; gap:12px;}
  .vault-media{grid-template-columns:1fr; gap:26px;}
  .vault-art{max-width:340px;}
  .hub{grid-template-columns:1fr; gap:18px;}
  .gate-term{padding:18px 16px; font-size:11px;}
  .gate .hud{width:38px;height:38px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;}
  .gate,.shell{transition:none !important;}
}