/* blog.css — KR // YLN article pages.
   Loaded ONLY by /blog/* so the lean ad-landing pages never pay for it.
   Mirrors the site's dark/cyan aesthetic but optimised for reading. */
* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --cyan:#00C8E8;
  --cyan-dim:#0099BB;
  --cyan-ghost:rgba(0,200,232,0.15);
  --deep:#020509;
  --text:#B8DDE8;
  --muted:#6E97A4;
}

body{
  background:var(--deep);
  color:var(--text);
  font-family:'Rajdhani',sans-serif;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 50% -10%,rgba(0,200,232,0.07),transparent 55%);
  min-height:100vh;
}

.post-wrap{ max-width:720px; margin:0 auto; padding:64px 20px 96px; }

.post-hero{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; max-width:100%;
  border:1px solid var(--cyan-dim);
  box-shadow:0 0 30px var(--cyan-ghost);
  margin-bottom:36px; border-radius:2px;
}

.post-kicker{
  font-family:'Orbitron',monospace; font-size:0.7rem; letter-spacing:4px;
  color:var(--cyan-dim); text-transform:uppercase; margin-bottom:14px;
}

.post-title{
  font-family:'Orbitron',sans-serif; font-size:clamp(1.8rem,6vw,2.8rem);
  line-height:1.12; color:#D0EEF5; letter-spacing:1px; margin-bottom:10px;
  text-shadow:0 0 24px rgba(0,200,232,0.25);
}

.post-byline{ font-size:0.85rem; letter-spacing:1px; color:var(--muted); margin-bottom:42px; }

.post-body{ font-size:1.12rem; }
.post-body p{ margin:0 0 1.4rem; }
.post-body h2{
  font-family:'Orbitron',sans-serif; font-size:1.3rem; color:var(--cyan);
  letter-spacing:1px; margin:2.6rem 0 1rem;
}
.post-body a{
  color:var(--cyan); text-decoration:none; border-bottom:1px solid var(--cyan-ghost);
  transition:border-color .3s,text-shadow .3s;
}
.post-body a:hover{ border-color:var(--cyan); text-shadow:0 0 12px rgba(0,200,232,0.5); }

.post-fig{ margin:2.4rem 0; }
.post-fig img{ width:100%; height:auto; max-width:100%; aspect-ratio:3/2; object-fit:cover; border:1px solid var(--cyan-ghost); border-radius:2px; display:block; }
.post-fig figcaption{ font-size:0.78rem; color:var(--muted); margin-top:8px; letter-spacing:0.5px; }

.post-quote{
  border-left:2px solid var(--cyan); padding:6px 0 6px 22px; margin:2.2rem 0;
  font-family:'Orbitron',sans-serif; font-size:1.15rem; color:#D0EEF5; letter-spacing:1px;
  text-shadow:0 0 16px rgba(0,200,232,0.3);
}

/* CTA — funnels organic readers into the conversion landing page */
.post-cta{ margin-top:3rem; padding:28px; border:1px solid var(--cyan-ghost);
  background:rgba(5,10,15,0.6); text-align:center; }
.post-cta h3{ font-family:'Orbitron',sans-serif; color:var(--cyan); font-size:1rem;
  letter-spacing:2px; margin-bottom:16px; }
.post-cta a{
  display:inline-block; margin:6px 10px; padding:12px 22px;
  border:1px solid var(--cyan-dim); color:var(--text); text-decoration:none;
  font-weight:600; letter-spacing:1px; transition:all .3s;
}
.post-cta a:hover{ background:var(--cyan); color:var(--deep); box-shadow:0 0 20px rgba(0,200,232,0.4); }

/* Subscribe endcard — post-footer email capture, reuses #signupForm from fx.js */
.post-endcard{ margin-top:2.6rem; padding:30px 26px; border:1px solid var(--cyan-ghost);
  background:rgba(5,10,15,0.55); text-align:center; }
.post-endcard h3{ font-family:'Orbitron',sans-serif; color:var(--cyan); font-size:1rem;
  letter-spacing:2px; margin-bottom:8px; }
.post-endcard p{ font-size:0.85rem; color:var(--muted); margin-bottom:18px; }
.post-endcard .signup-form{ display:flex; gap:8px; max-width:420px; margin:0 auto; }
.post-endcard input[type=email]{ flex:1; min-width:0; padding:12px 14px; background:var(--deep);
  border:1px solid var(--cyan-dim); color:var(--text); font-family:'Rajdhani',sans-serif;
  font-size:1rem; letter-spacing:0.5px; outline:none; }
.post-endcard input[type=email]::placeholder{ color:rgba(184,221,232,0.35); }
.post-endcard input[type=email]:focus{ border-color:var(--cyan); }
.post-endcard button{ padding:12px 22px; border:1px solid var(--cyan-dim); background:transparent;
  color:var(--text); font-family:'Orbitron',sans-serif; font-weight:600; letter-spacing:1px;
  cursor:pointer; transition:all .3s; }
.post-endcard button:hover{ background:var(--cyan); color:var(--deep); }
.post-endcard .signup-msg{ margin-top:12px; font-size:0.82rem; min-height:1.1em; }
.post-endcard .signup-msg.success{ color:var(--cyan); }
.post-endcard .signup-msg.error{ color:#ff6b6b; }
@media(max-width:480px){ .post-endcard .signup-form{ flex-direction:column; } }

/* Spotify playlist embed */
.spotify-embed{ margin:2.4rem 0; border:1px solid var(--cyan-ghost); border-radius:2px;
  overflow:hidden; box-shadow:0 0 30px var(--cyan-ghost); }
.spotify-embed iframe{ display:block; width:100%; height:352px; border:0; }

@media(max-width:480px){
  .post-wrap{ padding:40px 16px 64px; }
  .post-body{ font-size:1.05rem; }
}