/* 06/10/2026 (brief 21): the blog. The list page (blog/index.html) and the article pages
   (blog/<name>.html), in the v2 look: dark panels, display headings, mono labels, signal green. */

/* ---- list page ---- */
.blog-hero .mega{max-width:14ch}
.post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);max-width:1180px}
.post-card{display:flex;flex-direction:column;background:rgba(6,8,11,.9);border:1px solid var(--line);border-radius:24px;overflow:hidden;
  color:var(--pale);text-decoration:none;transition:transform .25s ease,border-color .25s ease}
.post-card:hover,.post-card:focus-visible{transform:translateY(-4px);border-color:rgba(166,244,107,.55)}
.post-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}
.post-card .pc-body{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2.2vw,28px)}
.post-label{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--signal);text-transform:uppercase;margin:0}
.post-card h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(26px,2.3vw,36px);line-height:.98;margin:0}
.post-card p{margin:0;color:#c9cfd5;font-size:17px}
.post-meta{font:400 13px var(--mono);color:var(--dim);margin:0}

/* ---- article page ---- */
.post-hero{min-height:0;padding-top:clamp(120px,16vh,190px);padding-bottom:clamp(28px,4vw,44px)}
.post-hero .mega{font-size:clamp(40px,5.4vw,92px);max-width:18ch;line-height:.92}
.post-hero .lede{max-width:52ch}
.post-figure{margin:0 var(--gut);max-width:1180px;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#06080b}
.post-figure img{display:block;width:100%;height:auto;aspect-ratio:16/9}
.post-body{padding:clamp(36px,5vw,72px) var(--gut)}
.post-body .panel{max-width:820px}
.prose{font-size:18px;line-height:1.7;color:#d6dbe0;max-width:68ch}
.prose h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(30px,3vw,44px);line-height:.95;color:var(--pale);margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 18px}
.prose a{color:var(--signal)}
.prose strong{color:var(--pale)}
.prose ul,.prose ol{margin:0 0 20px;padding-left:0;list-style:none;counter-reset:n}
.prose li{position:relative;padding:8px 0 8px 30px;border-top:1px solid var(--line)}
.prose ul li::before{content:"";position:absolute;left:4px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px rgba(166,244,107,.15)}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:6px;font:900 22px/1 var(--display);color:var(--signal)}
.prose blockquote{margin:24px 0;padding:18px 22px;border-left:3px solid var(--signal);background:rgba(166,244,107,.06);border-radius:0 14px 14px 0;color:var(--pale)}
.prose blockquote p:last-child{margin:0}
.prose sup{font:500 11px var(--mono);color:var(--dim)}
.prose sup a{color:var(--dim);text-decoration:none}
.next-box{margin:40px 0 0;padding:clamp(20px,2.6vw,30px);border:1.5px solid var(--signal);border-radius:20px;background:rgba(166,244,107,.05)}
.next-box h2{margin-top:0}
.next-box p:last-child{margin-bottom:0}
.sources{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font:400 13px/1.6 var(--mono);color:var(--dim)}
.sources h2{font:500 13px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.sources ol{margin:0;padding-left:22px}
.sources li{margin:0 0 6px}
.more-posts{padding:0 var(--gut) clamp(40px,5vw,72px)}
.more-posts .post-grid{max-width:1180px}
.more-posts .h2{font-size:clamp(30px,3vw,48px)}

@media (max-width:760px){
  .post-grid{grid-template-columns:minmax(0,1fr)}
  .prose{font-size:17px}
  .post-figure{border-radius:18px}
}
@media (min-width:1800px){
  .prose{font-size:calc(18px * var(--s))}
  .post-card p{font-size:calc(17px * var(--s))}
  .post-body .panel{max-width:calc(820px * var(--s))}
}
@media (prefers-reduced-motion:reduce){ .post-card{transition:none} .post-card:hover{transform:none} }