/* ============================================================
   CUJKH//SDF — cyberpunk stylesheet
   hand-forged, zero dependencies, dark side of the grid
   ============================================================ */
:root{
  --bg:#05070d;
  --bg2:#0a0e1a;
  --panel:#0b1120;
  --cyan:#00f0ff;
  --magenta:#ff2a6d;
  --amber:#f9f002;
  --text:#c8d6e5;
  --muted:#5f7186;
  --line:#16283f;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;
  background:
    radial-gradient(1100px 560px at 75% -12%, rgba(255,42,106,.13), transparent 60%),
    radial-gradient(900px 480px at 8% -4%, rgba(0,240,255,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:ui-monospace,"Cascadia Code","JetBrains Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  line-height:1.65;
  min-height:100vh;
}
/* CRT scanlines + vignette overlay */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 1px, transparent 1px 3px);
  z-index:9;
}
::selection{background:var(--magenta); color:#fff}
a{color:var(--cyan); text-decoration:none}
a:hover{color:var(--magenta); text-shadow:0 0 9px rgba(255,42,106,.7)}

/* content column sits LEFT of center: shifted left by half the free slack
   (left margin = free space / 4). Tuning knob = the divisor:
     4 = split-the-difference (current) · 2 = centered · 3 = a bit lefter · bigger = lefter still */
.wrap{
  max-width:920px;
  padding:0 1.2rem;
  margin-left:max(0px, calc((100% - 920px) / 4));
  margin-right:auto;
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 1.2rem;
  background:rgba(5,7,13,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(4px);
}
.brand{font-weight:700; letter-spacing:.14em; color:var(--magenta);
  text-shadow:0 0 10px rgba(255,42,106,.8); white-space:nowrap}
.brand span{color:var(--cyan); text-shadow:0 0 10px rgba(0,240,255,.8)}
.topbar nav a{margin-left:1.1rem; color:var(--muted); letter-spacing:.08em}
.topbar nav a::before{content:"./"; color:var(--line)}
.topbar nav a:hover{color:var(--cyan); text-shadow:0 0 8px rgba(0,240,255,.6)}

/* ---------- hero ---------- */
.hero{position:relative; text-align:center; padding:4.2rem 0 0}
.hero .sub{margin:0; color:var(--muted); letter-spacing:.32em; text-transform:uppercase; font-size:.78rem}
.hero h1{
  margin:.4rem 0 .2rem;
  font-size:clamp(2.8rem,9vw,5.4rem);
  letter-spacing:.1em;
  color:var(--cyan);
  text-shadow:0 0 7px rgba(0,240,255,.85), 0 0 28px rgba(0,240,255,.35);
}
.hero .tagline{color:var(--muted); font-size:.92rem; margin:.2rem 0 0}
.tagline .amber{color:var(--amber)}
.skyline{
  display:block; width:100%; height:auto; margin-top:1.6rem;
  filter:drop-shadow(0 -4px 26px rgba(255,42,106,.30)) drop-shadow(0 0 44px rgba(0,240,255,.12));
}

/* ---------- glitch title ---------- */
.glitch{position:relative; display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute; inset:0;
  opacity:.75; pointer-events:none;
}
.glitch::before{color:var(--magenta); transform:translate(-2px,-1px);
  clip-path:inset(0 0 58% 0); animation:gl1 3.4s infinite steps(1)}
.glitch::after{color:var(--text); transform:translate(2px,1px);
  clip-path:inset(62% 0 0 0); animation:gl2 2.9s infinite steps(1)}
@keyframes gl1{
  0%,88%{clip-path:inset(0 0 58% 0)}
  89%{clip-path:inset(12% 0 42% 0)}
  91%{clip-path:inset(38% 0 22% 0)}
  93%{clip-path:inset(0 0 78% 0)}
  95%,100%{clip-path:inset(0 0 58% 0)}
}
@keyframes gl2{
  0%,90%{clip-path:inset(62% 0 0 0)}
  91%{clip-path:inset(30% 0 30% 0)}
  93%{clip-path:inset(70% 0 6% 0)}
  95%,100%{clip-path:inset(62% 0 0 0)}
}

/* ---------- sections / panels ---------- */
h2.sec{
  color:var(--magenta); text-transform:uppercase;
  letter-spacing:.22em; font-size:.95rem;
  margin:0 0 .8rem; padding-bottom:.45rem;
  border-bottom:1px dashed var(--line);
}
section{margin:3rem 0}
.panel{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);
  border-left:3px solid var(--cyan);
  padding:1.1rem 1.3rem;
  box-shadow:inset 0 0 22px rgba(0,240,255,.05);
}
.panel.mag{border-left-color:var(--magenta); box-shadow:inset 0 0 22px rgba(255,42,106,.06)}
.panel h2.sec{margin-bottom:.6rem}
.panel p{margin:.4rem 0 1rem}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}

/* ---------- terminal box ---------- */
.term{
  background:#030509;
  border:1px solid var(--line);
  padding:.9rem 1.2rem;
  font-size:.92rem;
  box-shadow:inset 0 0 30px rgba(0,0,0,.6);
}
.term .ln{margin:.15rem 0}
.term .ln::before{content:"> "; color:var(--magenta)}
.led{
  display:inline-block; width:.55em; height:.55em; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 9px var(--cyan);
  animation:flick 4.2s infinite; vertical-align:baseline;
}
@keyframes flick{0%,91%,94%,100%{opacity:1} 92%{opacity:.25} 96%{opacity:.55}}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:.5rem 1.05rem;
  border:1px solid var(--cyan); color:var(--cyan);
  letter-spacing:.14em; text-transform:uppercase; font-size:.8rem;
}
.btn:hover{background:rgba(0,240,255,.09); box-shadow:0 0 16px rgba(0,240,255,.35); color:#eaffff}
.btn.mag{border-color:var(--magenta); color:var(--magenta)}
.btn.mag:hover{background:rgba(255,42,106,.09); box-shadow:0 0 16px rgba(255,42,106,.35); color:#ffe9f1}

/* ---------- blog / reading entries ---------- */
article.panel{margin-bottom:1.1rem}
article.panel h3{margin:.2rem 0 .3rem; font-size:1.12rem}
.meta{color:var(--muted); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase}
.chip{
  display:inline-block; padding:.06rem .55rem; margin-left:.4rem;
  border:1px solid currentColor; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; vertical-align:middle;
}
.chip.reading{color:var(--magenta)}
.chip.queued{color:var(--amber)}
.chip.done{color:var(--cyan)}
.empty{
  color:var(--muted); font-style:italic;
  padding:.9rem 1.1rem; border:1px dashed var(--line);
}
blockquote{
  margin:1.2rem 0; padding:.5rem 1.1rem;
  border-left:3px solid var(--magenta);
  background:rgba(255,42,106,.06);
}
.back{display:inline-block; margin-top:1.6rem; color:var(--muted)}
.back:hover{color:var(--cyan)}
.cursor{animation:blink 1.1s steps(1) infinite; color:var(--cyan)}
@keyframes blink{0%,49%{opacity:1} 50%,100%{opacity:0}}

/* reading: category + pillar entries */
.cat{
  margin:2.6rem 0 0; font-size:clamp(1.3rem,3.5vw,1.9rem);
  letter-spacing:.28em; color:var(--magenta);
  text-shadow:0 0 8px rgba(255,42,106,.75);
  border-bottom:1px solid var(--line); padding-bottom:.5rem;
}
.cat-sub{margin:.55rem 0 .2rem; color:var(--cyan); font-size:.95rem; letter-spacing:.06em}
.cat-note{margin:.2rem 0 1.2rem; color:var(--muted); font-size:.85rem}
.cat-note a{color:var(--muted)}
.cat-note a:hover{color:var(--cyan)}
article.pillar h3{display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 0}
.gr{
  display:inline-block; margin-top:.1rem;
  color:var(--magenta); font-size:.8rem; letter-spacing:.08em;
  text-transform:lowercase; text-decoration:none;
  border-bottom:1px dotted var(--magenta);
}
.gr:hover{color:#eaffff; text-shadow:0 0 8px rgba(255,42,106,.8); border-bottom-style:solid}

/* series sections (#1 ranked, etc.) */
.series{margin-top:2.2rem}
.series .meta{margin-bottom:.3rem}
.series h3{font-size:1.25rem; letter-spacing:.06em; color:#eaffff}
.series .rank{display:inline-block; padding:.08rem .6rem; margin-right:.5rem;
  border:1px solid currentColor; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  vertical-align:middle}
.series .avg{color:var(--muted); font-size:.85rem; margin-left:.5rem}
.series p.blurb{margin:.5rem 0 1rem}
.series.rank1 .rank{color:var(--magenta); text-shadow:0 0 8px rgba(255,42,106,.6)}
.series.rank2 .rank{color:var(--amber); text-shadow:0 0 8px rgba(255,176,0,.5)}
.series.rank3 .rank{color:var(--cyan); text-shadow:0 0 8px rgba(0,240,255,.5)}
.series .rank.home{color:#eaffff; text-shadow:0 0 8px rgba(255,255,255,.4)}
ul.books{list-style:none; margin:.6rem 0 1.2rem; padding:0}
ul.books li{padding:.3rem 0; border-bottom:1px dotted var(--line); font-size:.92rem; overflow:hidden}
/* cover art */
.cover{float:left; width:88px; margin:0 .9rem 0 0;
  border:1px solid var(--line); box-shadow:0 0 12px rgba(0,0,0,.55)}
ul.books li .cover{width:46px; margin:2px 0 0 .2rem}
ul.books li:last-child{border-bottom:none}
ul.books .no{color:var(--muted); font-size:.75rem; letter-spacing:.14em; margin-right:.4rem}
ul.books .pg{color:var(--muted); font-size:.78rem; margin:0 .4rem}
ul.books .stars{color:var(--amber); font-size:.82rem; margin:0 .4rem}
ul.books .gr{margin-top:0}

/* subpage titles */
h1.page{
  margin:2.4rem 0 .4rem;
  font-size:clamp(1.7rem,4.5vw,2.5rem);
  letter-spacing:.12em; color:var(--cyan);
  text-shadow:0 0 7px rgba(0,240,255,.8);
}
h1.page small{display:block; font-size:.8rem; letter-spacing:.3em;
  color:var(--muted); text-transform:uppercase; text-shadow:none; margin-top:.3rem}

/* ---------- footer ---------- */
footer{
  margin-top:4rem; padding:1.2rem;
  border-top:1px solid var(--line);
  color:var(--muted); font-size:.82rem;
  display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
}
footer .stamp{color:var(--amber); letter-spacing:.1em}

/* reduced motion: kill the flicker, keep the neon */
@media (prefers-reduced-motion:reduce){
  .glitch::before,.glitch::after,.led,.cursor{animation:none}
}