/* ─── Shared blog styling — same vocabulary as the landing page ───────── */
:root {
  --bg:     #030712;
  --bg2:    #060e1e;
  --cyan:   #00fff5;
  --pink:   #ff00aa;
  --purple: #8b00ff;
  --orange: #ff6600;
  --text:   #7a8fa8;
  --bright: #dde8f0;
  --border: rgba(0,255,245,.18);
  --glow-c: rgba(0,255,245,.35);
  --glow-p: rgba(255,0,170,.35);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; cursor:none; }
html { scroll-behavior:smooth; }
/* Desktop only: scale 25% for comfort. Mobile/tablet stay at the rem default. */
@media (min-width: 1024px) {
  html { font-size: 125%; }
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ─── Custom cursor (matches landing page) ──────────────────────────── */
#cur {
  position: fixed; width:10px; height:10px;
  background: var(--cyan); border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition: width .15s, height .15s, background .15s;
  box-shadow: 0 0 8px var(--cyan), 0 0 22px var(--cyan), 0 0 50px rgba(0,255,245,.4);
  mix-blend-mode: screen;
}
#cur-ring {
  position: fixed; width:32px; height:32px;
  border: 1px solid rgba(0,255,245,.5); border-radius:50%;
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition: all .1s ease;
  mix-blend-mode: screen;
}
body:has(a:hover) #cur, body:has(button:hover) #cur { width:18px; height:18px; }
body:has(a:hover) #cur-ring, body:has(button:hover) #cur-ring { width:54px; height:54px; border-color: rgba(255,0,170,.5); }

/* CRT scanline + noise */
body::before {
  content:''; position:fixed; inset:0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.06) 2px, rgba(0,0,0,.06) 4px);
  pointer-events:none; z-index:9997;
}
#noise {
  position:fixed; top:-50%; left:-50%;
  width:200%; height:200%;
  opacity:.028; pointer-events:none; z-index:9996;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Nav (same shell as landing) ──────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.4rem 4rem;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background:rgba(3,7,18,.82);
  backdrop-filter:blur(18px);
}
.nav-logo {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  width:2.6rem; height:2.6rem;
  font-family:'Orbitron', monospace;
  font-weight:900; font-size:.72rem;
  letter-spacing:.04em;
  text-decoration:none; line-height:1;
  border:1px solid rgba(0,255,245,.28);
  padding:5px; gap:2px;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
  transition:border-color .3s, box-shadow .3s;
}
.nav-logo:hover { border-color:var(--cyan); box-shadow:0 0 14px rgba(0,255,245,.3); }
.nav-logo span { display:flex; align-items:center; justify-content:center; }
.nl-m { color:var(--bright); }
.nl-o { color:var(--cyan); text-shadow:0 0 10px var(--cyan); }
.nl-t { color:var(--pink); text-shadow:0 0 10px var(--pink); }
.nl-n { color:var(--purple); text-shadow:0 0 10px var(--purple); }
.nav-links { display:flex; gap:2.5rem; list-style:none; }
.nav-links a {
  font-family:'Share Tech Mono', monospace;
  font-size:.72rem; color:var(--text);
  text-decoration:none; letter-spacing:.18em; text-transform:uppercase;
  transition:color .25s, text-shadow .25s;
}
.nav-links a::before { content:'// '; color:var(--cyan); opacity:0; transition:opacity .25s; }
.nav-links a:hover, .nav-links a.active { color:var(--cyan); text-shadow:0 0 10px var(--cyan); }
.nav-links a:hover::before, .nav-links a.active::before { opacity:1; }
.nav-btn {
  font-family:'Share Tech Mono', monospace; font-size:.72rem;
  padding:.58rem 1.5rem; border:1px solid var(--cyan);
  color:var(--cyan); text-decoration:none; letter-spacing:.1em;
  text-transform:uppercase; position:relative; overflow:hidden;
  transition:color .3s;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.nav-btn::before { content:''; position:absolute; inset:0; left:-100%; background:var(--cyan); transition:left .28s ease; z-index:-1; }
.nav-btn:hover { color:var(--bg); }
.nav-btn:hover::before { left:0; }

/* ─── Section labels (same as landing) ─────────────────────────────── */
.s-label {
  font-family:'Share Tech Mono', monospace;
  font-size:.68rem; color:var(--pink);
  letter-spacing:.28em; text-transform:uppercase; margin-bottom:.9rem;
}
.s-label::before { content:'/* '; }
.s-label::after  { content:' */'; }
.s-title {
  font-family:'Orbitron', monospace;
  font-size:clamp(2rem,5vw,3.4rem);
  font-weight:700; color:var(--bright); line-height:1.08;
  margin-bottom:1.2rem;
}

/* ─── Page layout ──────────────────────────────────────────────────── */
.blog-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 9rem 4rem 6rem;
  position: relative;
  z-index: 1;
}
.blog-header { margin-bottom: 4rem; }
.blog-intro {
  font-size: 1.05rem;
  color: var(--text);
  max-width: 640px;
  margin-top: 1.2rem;
}

/* Subtle grid backdrop */
.grid-bg-fixed {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,255,245,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,245,.025) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,1) 0%, transparent 80%);
}

/* ─── Post list ────────────────────────────────────────────────────── */
.post-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(0,255,245,.08); }
.post-card {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 2.4rem; align-items: baseline;
  padding: 2.2rem 0;
  border-bottom: 1px solid rgba(0,255,245,.08);
  text-decoration: none; color: inherit;
  transition: background .25s, padding .25s;
  position: relative;
}
.post-card::before {
  content:''; position:absolute; left:-1rem; top:0; bottom:0;
  width: 2px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
  transform: scaleY(0); transform-origin: top; transition: transform .3s;
}
.post-card:hover { background: rgba(0,255,245,.02); padding-left: 1rem; padding-right: 1rem; }
.post-card:hover::before { transform: scaleY(1); }
.post-date {
  font-family: 'Share Tech Mono', monospace;
  font-size: .72rem; color: var(--cyan); opacity: .65;
  letter-spacing: .12em;
}
.post-title {
  font-family: 'Orbitron', monospace;
  font-size: 1.35rem; font-weight: 700;
  color: var(--bright); margin-bottom: .55rem;
  transition: color .25s, text-shadow .25s;
}
.post-card:hover .post-title { color: var(--cyan); text-shadow: 0 0 14px rgba(0,255,245,.4); }
.post-excerpt { color: var(--text); font-size: .98rem; line-height: 1.7; max-width: 620px; }
.post-tags {
  display: flex; gap: .5rem; flex-wrap: wrap;
  max-width: 220px; justify-content: flex-end;
}
.post-tag {
  font-family: 'Share Tech Mono', monospace;
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pink); opacity: .75;
  padding: .25rem .55rem;
  border: 1px solid rgba(255,0,170,.25);
}
.post-empty {
  padding: 4rem 0; text-align: center;
  font-family: 'Share Tech Mono', monospace;
  color: var(--text); opacity: .6; letter-spacing: .12em;
}

/* ─── Single post ──────────────────────────────────────────────────── */
.post-wrap { max-width: 760px; margin: 0 auto; padding: 9rem 2rem 6rem; position: relative; z-index: 1; }
.post-back {
  font-family: 'Share Tech Mono', monospace; font-size: .72rem;
  color: var(--cyan); text-decoration: none;
  letter-spacing: .18em; text-transform: uppercase;
  display: inline-block; margin-bottom: 2.5rem;
}
.post-back::before { content: '← '; }
.post-back:hover { text-shadow: 0 0 10px var(--cyan); }
.post-meta {
  font-family: 'Share Tech Mono', monospace;
  font-size: .72rem; color: var(--cyan); opacity: .65;
  letter-spacing: .14em; margin-bottom: .8rem;
}
.post-h1 {
  font-family: 'Orbitron', monospace;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700; color: var(--bright); line-height: 1.12;
  margin-bottom: 2.5rem;
}
.post-cover {
  width: 100%; margin: 0 0 3rem;
  border: 1px solid var(--border);
  display: block;
}
.post-body { color: var(--text); font-size: 1.05rem; line-height: 1.85; }
.post-body h2, .post-body h3, .post-body h4 {
  font-family: 'Orbitron', monospace; color: var(--bright);
  margin: 3rem 0 1rem; line-height: 1.25;
}
.post-body h2 { font-size: 1.7rem; }
.post-body h2::before { content: '// '; color: var(--cyan); opacity: .5; }
.post-body h3 { font-size: 1.3rem; }
.post-body p { margin-bottom: 1.4rem; }
.post-body strong { color: var(--bright); font-weight: 600; }
.post-body em { color: var(--pink); font-style: normal; }
.post-body a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(0,255,245,.4); text-underline-offset: 3px; }
.post-body a:hover { text-shadow: 0 0 10px var(--cyan); }
.post-body ul, .post-body ol { margin: 0 0 1.4rem 1.6rem; }
.post-body li { margin-bottom: .5rem; }
.post-body blockquote {
  border-left: 2px solid var(--pink); padding: .4rem 0 .4rem 1.4rem;
  margin: 2rem 0; color: var(--bright); font-style: italic;
  background: rgba(255,0,170,.04);
}
.post-body code {
  font-family: 'Share Tech Mono', monospace;
  background: rgba(0,255,245,.07); color: var(--cyan);
  padding: .15rem .4rem; font-size: .92em;
  border: 1px solid rgba(0,255,245,.12);
}
.post-body pre {
  background: var(--bg2); border: 1px solid var(--border);
  padding: 1.2rem 1.4rem; margin: 1.8rem 0;
  overflow-x: auto;
}
.post-body pre code { background: none; border: none; padding: 0; color: var(--bright); }
.post-body img { max-width: 100%; height: auto; border: 1px solid var(--border); margin: 1.5rem 0; display: block; }
.post-body hr { border: none; border-top: 1px solid var(--border); margin: 3rem 0; }

.post-footer {
  margin-top: 4rem; padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 1.5rem;
  font-family: 'Share Tech Mono', monospace; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.post-footer a { color: var(--cyan); text-decoration: none; }
.post-footer a:hover { text-shadow: 0 0 10px var(--cyan); }

.draft-banner {
  background: rgba(255,102,0,.08);
  border: 1px solid var(--orange);
  color: var(--orange);
  font-family: 'Share Tech Mono', monospace;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .8rem 1.2rem;
  margin-bottom: 2rem;
  text-align: center;
}

.post-meta-sep { opacity: .4; margin: 0 .4rem; }

/* ─── Share buttons ───────────────────────────────────────────────── */
.post-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  margin: 3.5rem 0 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(0,255,245,.08);
}
.post-share-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: .68rem; color: var(--pink); opacity: .7;
  letter-spacing: .22em; text-transform: uppercase;
  margin-right: .4rem;
}
.post-share-btn {
  font-family: 'Share Tech Mono', monospace;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan);
  text-decoration: none;
  padding: .45rem 1rem;
  border: 1px solid rgba(0,255,245,.25);
  background: transparent;
  transition: all .25s;
  cursor: none;
}
.post-share-btn:hover {
  background: rgba(0,255,245,.06);
  border-color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan);
}

/* ─── Author block ────────────────────────────────────────────────── */
.post-author {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.6rem;
  align-items: start;
  margin: 2.4rem 0 1rem;
  padding: 1.8rem;
  border: 1px solid var(--border);
  background: rgba(0,255,245,.02);
  position: relative;
}
.post-author::before {
  content: ''; position: absolute;
  top: 0; left: 0; width: 28px; height: 2px;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
}
.post-author-avatar {
  width: 110px; height: 110px;
  overflow: hidden;
  border: 1px solid rgba(0,255,245,.25);
  position: relative;
}
.post-author-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.04) saturate(.92);
}
.post-author-role {
  font-family: 'Share Tech Mono', monospace;
  font-size: .65rem; color: var(--pink);
  letter-spacing: .22em; text-transform: uppercase;
  margin-bottom: .45rem;
}
.post-author-role::before { content: '[ '; }
.post-author-role::after  { content: ' ]'; }
.post-author-name {
  font-family: 'Orbitron', monospace;
  font-size: 1.2rem; font-weight: 800;
  color: var(--bright); line-height: 1.15;
  margin-bottom: .8rem;
}
.post-author-bio {
  font-size: .95rem; color: var(--text);
  line-height: 1.7; font-weight: 300;
  margin-bottom: 1.1rem;
}
.post-author-links {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.post-author-link {
  font-family: 'Share Tech Mono', monospace;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  padding: .35rem .9rem;
  border: 1px solid rgba(0,255,245,.2);
  transition: all .25s;
}
.post-author-link:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan);
}

/* ─── About page extras ───────────────────────────────────────────── */
.about-wrap .post-h1 { margin-bottom: 2rem; }
.about-wrap .post-author { margin-top: 1.5rem; }
.about-tail {
  margin-top: 2.4rem;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.8;
}
.about-tail a {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: rgba(0,255,245,.4);
  text-underline-offset: 3px;
}

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  nav { padding: 1rem 1.4rem; }
  .nav-links { display: none; }
  .blog-wrap { padding: 7rem 1.4rem 4rem; }
  .post-wrap { padding: 7rem 1.4rem 4rem; }
  .post-card {
    grid-template-columns: 1fr;
    gap: .6rem;
  }
  .post-tags { justify-content: flex-start; max-width: none; }
  .post-author {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 1.4rem;
  }
  .post-author-avatar {
    width: 88px; height: 88px;
  }
  .post-share { gap: .5rem; }
  .post-share-btn { padding: .4rem .8rem; font-size: .62rem; }
  *, *::before, *::after { cursor: auto; }
  #cur, #cur-ring { display: none; }
}