:root{
  --bg:#0a0a0c;
  --ink:#e9e9ef;
  --muted:#9a9aa8;
  --line:rgba(233,233,239,.16);
  --pad:18px;

  /* burned neon reds */
  --neon-dead: rgba(120, 10, 14, .55);
  --neon-dim:  rgba(160, 18, 22, .75);
  --neon-hot:  rgba(255, 42, 47, 1);
  --neon-glow: rgba(255, 42, 47, .35);
}

/* reset */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:"Abel", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:var(--ink);
  letter-spacing:.6px;
}

/* subtle texture */
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 8px);
  opacity:.05;
  pointer-events:none;
}

/* container */
.frame{
  max-width:1400px;
  margin:0 auto;
  min-height:100%;
  display:flex;
  flex-direction:column;
  padding: clamp(16px, 2.5vw, 28px);
  gap: clamp(14px, 2vw, 22px);
}

/* header */
header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  border:1px solid var(--line);
  padding:var(--pad);
  background:#0a0a0c;
}

/* brand */
.brand{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* base title */
.brand .name{
  font-size: clamp(30px, 5vw, 54px);
  letter-spacing: 4px;
  text-transform:uppercase;
  line-height:1;
}

/* subtitle */
.brand .sub{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:3px;
  color:var(--muted);
}

/* nav */
nav{
  display:flex;
  gap:10px;
  transform:rotate(180deg);
}

nav a{
  transform:rotate(180deg);
  text-decoration:none;
  color:var(--ink);
  font-size:12px;
  letter-spacing:2.5px;
  padding:6px 8px;
  border:1px solid var(--line);
  text-transform:uppercase;
}

/* -----------------------------------------
   NEON GLITCH TITLE (CSS-only)
------------------------------------------ */
.neon-glitch{
  position:relative;
  display:inline-block;

  /* “burned out” base */
  color: var(--neon-dead);
  text-shadow:
    0 0 0 rgba(0,0,0,0),
    0 0 10px rgba(0,0,0,.55);

  /* flicker between dead/dim/hot */
  animation: neonFlicker 6.8s infinite;
}

/* two mis-registered copies that clip/glitch */
.neon-glitch::before,
.neon-glitch::after{
  content: attr(data-text);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:0;
}

.neon-glitch::before{
  color: rgba(255, 42, 47, .65);
  text-shadow:
    0 0 6px rgba(255,42,47,.25),
    0 0 16px rgba(255,42,47,.18);
  transform: translateX(-1px);
  animation: glitchA 3.6s infinite;
}

.neon-glitch::after{
  color: rgba(255, 42, 47, .35);
  text-shadow:
    0 0 4px rgba(255,42,47,.20),
    0 0 14px rgba(255,42,47,.12);
  transform: translateX(1px);
  animation: glitchB 4.2s infinite;
}

/* Flicker: mostly dead red, occasional hot neon surge */
@keyframes neonFlicker{
  0%, 68%, 100%{
    color: var(--neon-dead);
    text-shadow:
      0 0 10px rgba(0,0,0,.55);
    filter: saturate(.9);
  }

  /* quick “power catches” */
  70%{
    color: var(--neon-dim);
    text-shadow:
      0 0 6px rgba(255,42,47,.12),
      0 0 16px rgba(0,0,0,.55);
    filter: saturate(1.1);
  }
  71%{
    color: var(--neon-hot);
    text-shadow:
      0 0 6px rgba(255,42,47,.30),
      0 0 18px var(--neon-glow),
      0 0 42px rgba(255,42,47,.18);
    filter: saturate(1.25);
  }
  72%{
    color: rgba(255,42,47,.20);
    text-shadow: none;
    filter: saturate(.8);
  }
  73%{
    color: var(--neon-hot);
    text-shadow:
      0 0 8px rgba(255,42,47,.35),
      0 0 24px var(--neon-glow),
      0 0 56px rgba(255,42,47,.18);
  }
}

/* Glitch slices: opacity spikes + clip bands + micro jitter */
@keyframes glitchA{
  0%, 78%, 100%{ opacity:0; clip-path: inset(0 0 100% 0); }
  80%{ opacity:.9; clip-path: inset(8% 0 72% 0); transform: translate(-2px, 0); }
  81%{ opacity:.4; clip-path: inset(44% 0 40% 0); transform: translate(2px, -1px); }
  82%{ opacity:.85; clip-path: inset(66% 0 18% 0); transform: translate(-1px, 1px); }
  83%{ opacity:0; clip-path: inset(0 0 100% 0); }
}

@keyframes glitchB{
  0%, 56%, 100%{ opacity:0; clip-path: inset(0 0 100% 0); }
  58%{ opacity:.65; clip-path: inset(18% 0 62% 0); transform: translate(1px, 0); }
  59%{ opacity:.25; clip-path: inset(52% 0 34% 0); transform: translate(-1px, 1px); }
  60%{ opacity:.6; clip-path: inset(72% 0 16% 0); transform: translate(2px, -1px); }
  61%{ opacity:0; clip-path: inset(0 0 100% 0); }
}

/* motion respect */
@media (prefers-reduced-motion: reduce){
  .neon-glitch,
  .neon-glitch::before,
  .neon-glitch::after{
    animation:none !important;
  }
}

/* -----------------------------------------
   page layout (unchanged vibe)
------------------------------------------ */

main{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(14px, 2vw, 22px);
  flex:1;
}

.panel{
  border:1px solid var(--line);
  background:#0a0a0c;
}

/* stage */
.stage{
  display:flex;
  flex-direction:column;
}

.stage-top{
  display:flex;
  justify-content:space-between;
  padding:var(--pad);
  border-bottom:1px solid var(--line);
}

.tag{
  display:flex;
  gap:10px;
  text-transform:uppercase;
  letter-spacing:3px;
}

.tag .cat{
  font-size:12px;
  color:var(--muted);
}

.tag .code{
  font-size:12px;
  padding:4px 8px;
  border:1px solid var(--line);
}

.pulse{
  width:8px;
  height:8px;
  background:rgba(233,233,239,.4);
  animation:pulse 2.4s infinite;
}

@keyframes pulse{
  0%,100%{ opacity:.3; }
  50%{ opacity:1; }
}

.art{
  position:relative;
  padding:var(--pad);
  display:grid;
  place-items:center;
}

.art img{
  width:100%;
  max-width:760px;
  border:1px solid rgba(233,233,239,.22);
}

.whisper{
  position:absolute;
  bottom:16px;
  left:18px;
  font-size:11px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:rgba(233,233,239,.35);
}

/* side */
.side{
  display:flex;
  flex-direction:column;
}

.block{
  padding:var(--pad);
  border-bottom:1px solid var(--line);
}

.block h2{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:3px;
  text-transform:uppercase;
}

.btn{
  display:flex;
  justify-content:space-between;
  padding:12px;
  border:1px solid var(--line);
  text-decoration:none;
  color:var(--ink);
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
}

.note{
  margin-top:10px;
  font-size:13px;
  color:var(--muted);
}

.meta{
  border-bottom:0;
}

.meta-line{
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(233,233,239,.45);
}

/* footer */
footer{
  display:flex;
  justify-content:space-between;
  border:1px solid var(--line);
  padding:12px var(--pad);
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--muted);
}

footer a{
  color:var(--ink);
  text-decoration:none;
}

/* responsive */
@media (max-width:900px){
  main{ grid-template-columns:1fr; }
}