/* ========== Variables & Base ========== */
:root{
  --bg:#070a16;
  --bg2:#0a0f1f;
  --fg:#cce7ff;
  --dim:#8aa3bf;
  --cyan:#00e5ff;
  --mag:#ff00cc;
  --amber:#ffe066;
  --card:#0e1530cc;
  --shadow:#00e5ff44;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
  body{
    margin:0;
    color:var(--fg);
    background: radial-gradient(1200px 800px at 20% 10%, #0b1633 0%, #070a16 60%, #04060d 100%),
                radial-gradient(900px 600px at 90% 80%, #1a0b24 0%, transparent 60%) ,
                var(--bg);
    font-family: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    line-height:1.6;
    display:flex;
    flex-direction:column;
    min-height:100vh;
    overflow:hidden;
  }

/* Utility classes */
.hidden{display:none;}

/* Subtle grid */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    linear-gradient(to right, rgba(0,229,255,.07) 1px, transparent 1px) 0 0/40px 100%,
    linear-gradient(to bottom, rgba(255,0,204,.05) 1px, transparent 1px) 0 0/100% 40px;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.4;
}

/* Rain & fog layers */
.bg{position:fixed; inset:0; pointer-events:none; z-index:-1;}
.rain{
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.0) 0 4px, rgba(255,255,255,.08) 4px 5px, rgba(255,255,255,0) 5px 120px);
  animation: rain 6s linear infinite;
  opacity:.18;
}
@keyframes rain{
  to{background-position: -800px 1200px;}
}
.fog{
  background:
    radial-gradient(800px 500px at 20% 30%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 600px at 80% 70%, rgba(255,255,255,.05), transparent 60%);
  filter: blur(6px);
  opacity:.4;
  animation: drift 40s linear infinite alternate;
}
@keyframes drift{
  to{transform: translate3d(10px,-10px,0);}
}

/* CRT scanlines */
.scanlines{
  position:fixed; inset:0; pointer-events:none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity:.25;
  z-index: 999;
}

/* Header */
.site-header{
  padding:32px 18px 10px;
  text-align:center;
  flex-shrink:0;
}

.site-footer{
  text-align:center;
  padding:20px 18px;
  flex-shrink:0;
}
.logo{
  font-family:"Orbitron", system-ui, sans-serif;
  font-size: clamp(28px, 5vw, 56px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color:var(--fg);
  text-shadow:
    0 0 6px var(--cyan),
    0 0 18px var(--cyan),
    0 0 36px var(--mag);
}
.logo.flicker{ animation: flick 0.2s linear 1; }
@keyframes flick{
  0%, 19%, 21%, 23%, 100% { opacity:1; }
  20%, 22% { opacity:.4; }
}

/* Glitch effect */
.glitch{ position:relative; display:inline-block; }
.glitch::before,.glitch::after{
  content: attr(data-text);
  position:absolute; left:0; top:0; width:100%;
  clip-path: inset(0 0 0 0);
}
.glitch::before{
  transform: translate(2px, 0);
  text-shadow: -2px 0 var(--mag);
  animation: glitchTop 2s infinite linear alternate-reverse;
}
.glitch::after{
  transform: translate(-2px, 0);
  text-shadow: 2px 0 var(--cyan);
  animation: glitchBot 2.2s infinite linear alternate-reverse;
}
@keyframes glitchTop{
  0%{ clip-path: inset(0 0 85% 0); }
  50%{ clip-path: inset(0 0 10% 0); }
  100%{ clip-path: inset(0 0 60% 0); }
}
@keyframes glitchBot{
  0%{ clip-path: inset(85% 0 0 0); }
  50%{ clip-path: inset(10% 0 0 0); }
  100%{ clip-path: inset(60% 0 0 0); }
}

.tag{
  margin:8px 0 16px;
  color:var(--dim);
  font-size:14px;
}

/* About */
.about-photo {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;   /* ← round the corners */
}

/* Nav */
.nav{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }
.neon-btn{
  padding:10px 14px; border-radius:999px; text-decoration:none; color:var(--fg);
  border:1px solid rgba(0,229,255,.4);
  box-shadow: 0 0 10px var(--shadow), inset 0 0 8px rgba(255,0,204,.2);
  background: linear-gradient(180deg, rgba(0,229,255,.12), rgba(255,0,204,.06));
  backdrop-filter: blur(3px);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.neon-btn:hover{ transform: translateY(-1px) scale(1.02); border-color: var(--cyan); box-shadow: 0 0 18px var(--shadow); }

/* Layout */
.container{ width:min(960px, 92%); margin: 0 auto; }
.content{
  flex:1 1 auto;
  overflow-y: auto;            /* allow vertical scrolling */
  -ms-overflow-style: none;    /* IE/Edge */
  scrollbar-width: none;       /* Firefox */
}

.content::-webkit-scrollbar {
  display: none;               /* Chrome/Safari/Opera */
}

/* Cards (posts) */
.card{
  background: linear-gradient(180deg, rgba(10,15,31,.7), rgba(10,15,31,.5));
  border:1px solid rgba(0,229,255,.18);
  border-radius: var(--radius);
  padding: 18px 18px 14px;
  margin: 18px 0;
  box-shadow: 0 0 32px rgba(0,229,255,.15), 0 0 64px rgba(255,0,204,.08);
  position:relative;
  overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:-2px;
  background: conic-gradient(from 0deg, transparent 0 300deg, rgba(0,229,255,.35) 320deg, rgba(255,0,204,.35) 360deg);
  filter: blur(16px); z-index:-1;
  animation: spin 14s linear infinite;
  opacity:.25;
}
@keyframes spin { to { transform: rotate(1turn); } }

.post-title{
  margin: 0 0 8px;
  font-family:"Orbitron", system-ui, sans-serif;
  letter-spacing:.04em;
}
.po