/* ===========================================================
   post.css — single article page (cyan deep-sea redesign)
   Inherits design tokens from main.css (:root vars).
   =========================================================== */
.article{max-width:880px; margin:0 auto; padding:120px clamp(20px,5vw,40px) 90px}

.post-back{display:inline-flex; align-items:center; gap:8px; margin-bottom:40px;
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); transition:color .3s}
.post-back:hover{color:var(--accent)}
.post-back .arr{transition:transform .3s}
.post-back:hover .arr{transform:translateX(-3px)}

/* hero */
.post-hero{padding-bottom:36px; margin-bottom:44px; border-bottom:1px solid var(--line)}
.post-meta{display:flex; align-items:center; gap:12px; margin-bottom:22px;
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.06em; color:var(--accent)}
.post-meta .sep{color:var(--faint)}
.post-title{font-size:clamp(32px,5.2vw,52px); font-weight:500; line-height:1.06; letter-spacing:-.025em; color:var(--text); margin-bottom:24px}
.post-tags{display:flex; flex-wrap:wrap; gap:8px}
.post-tags .tag{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding:5px 12px; border:1px solid var(--line); border-radius:999px; transition:.25s}
.post-tags .tag:hover{color:var(--accent); border-color:var(--accent-dim); background:var(--accent-wash)}

/* reading column */
.post-content{font-size:18.5px; line-height:1.8; color:var(--text); font-weight:300; text-align:justify; text-justify:inter-word; hyphens:auto}
.post-content h2,.post-content h3{text-align:left}
.post-content > *{margin-bottom:1.5em}
.post-content > *:last-child{margin-bottom:0}
.post-content h2{font-size:26px; font-weight:600; line-height:1.2; letter-spacing:-.01em; color:var(--text); margin-top:2.2em; margin-bottom:.7em}
.post-content h3{font-size:20px; font-weight:600; color:var(--accent-soft); margin-top:1.9em; margin-bottom:.6em}
.post-content a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-dim); transition:border-color .25s}
.post-content a:hover{border-bottom-color:var(--accent)}
.post-content strong{color:var(--text); font-weight:600}
.post-content em{color:var(--accent-soft); font-style:italic}
.post-content ul,.post-content ol{padding-left:1.4em}
.post-content li{margin-bottom:.55em}
.post-content li::marker{color:var(--accent)}
.post-content blockquote{border-left:2px solid var(--accent); background:var(--accent-wash);
  margin:2em 0; padding:1.1em 1.4em; border-radius:0 10px 10px 0; color:var(--muted); font-style:italic}
.post-content blockquote p:last-child{margin-bottom:0}
.post-content hr{border:0; height:1px; background:var(--line); margin:2.6em 0}
.post-content img{max-width:100%; height:auto; border-radius:12px; border:1px solid var(--line); display:block}
.post-content figure{margin:2em 0}
.post-content figcaption{margin-top:.7em; font-size:13px; color:var(--faint); text-align:center}

/* code */
.post-content code{font-family:"JetBrains Mono",monospace; font-size:.86em; color:var(--accent-soft);
  background:rgba(255,255,255,.05); padding:2px 7px; border-radius:5px}
.post-content pre{background:rgba(4,8,10,.7); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; overflow-x:auto; font-size:14px; line-height:1.6}
.post-content pre code{background:transparent; padding:0; color:#cdd6e0; font-size:14px}

/* prev / next — compact squares, not full columns */
.post-nav{display:flex; flex-wrap:wrap; gap:14px; margin-top:60px; padding-top:34px; border-top:1px solid var(--line)}
.pn{display:flex; flex-direction:column; gap:9px; width:220px; max-width:100%; padding:16px 18px;
  border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.012); transition:.3s; min-width:0}
.pn:hover{border-color:var(--accent-dim); background:var(--accent-wash); transform:translateY(-2px)}
.pn.next{margin-left:auto; text-align:right; align-items:flex-end}
.pn-label{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.pn:hover .pn-label{color:var(--accent)}
.pn-title{font-size:13.5px; font-weight:500; color:var(--text); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.pn .arr{display:inline-block; transition:transform .3s}
.pn.prev:hover .arr{transform:translateX(-3px)}
.pn.next:hover .arr{transform:translateX(3px)}

@media (max-width:640px){
  .article{padding-top:100px}
  .post-content{font-size:17px}
  .pn{width:100%}
  .pn.next{margin-left:0; text-align:left; align-items:flex-start}
}

/* visitor-counter — hydrothermal-vent microbe joke, tied to the site's plume motif */
.visitor-counter{margin-top:40px; padding:16px 16px 14px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; text-align:center}
.vc-vent{position:relative; width:70px; height:56px; margin:0 auto 8px; overflow:hidden}
.vc-cone{position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent;
  border-bottom:16px solid var(--panel-2); filter:drop-shadow(0 0 4px var(--accent-dim))}
.vc-bubble{position:absolute; bottom:14px; left:50%; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, var(--accent-soft), var(--accent) 55%, transparent 80%);
  filter:blur(2px); opacity:0;
  animation:vc-puff 4.5s ease-in-out infinite}
.vc-bubble:nth-child(1){margin-left:-3px; animation-delay:0s}
.vc-bubble:nth-child(2){margin-left:1px; width:10px; height:10px; animation-delay:.9s}
.vc-bubble:nth-child(3){margin-left:-2px; animation-delay:1.8s}
.vc-bubble:nth-child(4){margin-left:3px; width:11px; height:11px; animation-delay:2.7s}
.vc-bubble:nth-child(5){margin-left:0; width:8px; height:8px; animation-delay:3.6s}
@keyframes vc-puff{
  0%{transform:translate(0,0) scale(.5); opacity:0}
  12%{opacity:.85}
  45%{transform:translate(0,-22px) scale(1); opacity:.8}
  100%{transform:translate(var(--drift,26px),-30px) scale(1.6); opacity:0}
}
.vc-bubble:nth-child(1){--drift:24px} .vc-bubble:nth-child(2){--drift:30px}
.vc-bubble:nth-child(3){--drift:20px} .vc-bubble:nth-child(4){--drift:32px} .vc-bubble:nth-child(5){--drift:22px}
.vc-label{font-family:"JetBrains Mono",monospace; color:var(--accent); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:6px}
.vc-digits{display:flex; justify-content:center; gap:3px; margin-bottom:6px}
.vc-digit{display:inline-block; width:16px; padding:2px 0; background:var(--panel-2); color:var(--accent-soft);
  font-family:"JetBrains Mono",monospace; font-size:14px; font-weight:700; border:1px solid var(--line-2);
  border-radius:3px; text-shadow:0 0 5px var(--accent-dim)}
.vc-caption{color:var(--muted); font-size:10px; font-style:italic}