/* Somnia blog — layered on /somnia/somnia.css (tokens, type, nav, buttons, cards). */
.blog-nav{position:relative;border-bottom:1px solid var(--line);background:rgba(7,10,24,.85)}
.nav-r{display:flex;align-items:center;gap:18px}
.nav-l{color:var(--muted);text-decoration:none;font-size:.92rem}
.nav-l:hover{color:var(--text)}

.blog-hero{padding:64px 0 30px}
.blog-hero h1{max-width:16ch}
.blog-hero .lede{font-size:1.12rem;max-width:58ch}

.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;padding-bottom:64px}
.post-card{display:flex;flex-direction:column;padding:0;overflow:hidden;color:var(--text);text-decoration:none;transition:border-color .2s,transform .2s}
.post-card:hover{border-color:rgba(109,106,240,.55);transform:translateY(-2px)}
.post-card img,.post-card .pc-ph{width:100%;aspect-ratio:16/9;object-fit:cover}
.post-card .pc-ph{background:radial-gradient(ellipse at 30% 40%,rgba(109,106,240,.35),transparent 60%),radial-gradient(ellipse at 75% 70%,rgba(95,208,230,.22),transparent 55%),var(--bg-2)}
.pc-body{padding:18px 20px 22px}
.pc-body .eyebrow{margin-bottom:8px;font-size:.68rem}
.pc-body h3{font-size:1.08rem;margin:0 0 8px;line-height:1.3}
.pc-body p{font-size:.92rem;margin:0 0 10px}
.pc-date{font-size:.8rem;color:var(--muted-2)}

.article{max-width:760px;padding-top:52px;padding-bottom:40px}
.article h1{font-size:clamp(2rem,4.6vw,3rem)}
.article .meta{color:var(--muted-2);font-size:.9rem;margin-bottom:26px}
.hero-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);margin-bottom:34px}
.body{font-size:1.07rem;color:#dfe2f3}
.body h2{font-size:clamp(1.4rem,2.6vw,1.8rem);margin:1.8em 0 .55em}
.body h3{margin:1.5em 0 .5em}
.body p,.body li{line-height:1.75}
.body ul,.body ol{padding-left:1.3em;margin:0 0 1.1em}
.body li{margin-bottom:.4em}
.body a{color:var(--rem);text-underline-offset:3px;overflow-wrap:anywhere}
.body strong{color:var(--text)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0}
.post-cta{text-align:center;margin:36px 0 44px;background:linear-gradient(160deg,rgba(109,106,240,.16),rgba(95,208,230,.06)),var(--card)}
.post-cta p{max-width:48ch;margin:0 auto 20px}
.keep{font-size:1.5rem;margin:10px 0 18px}
.article .post-grid{padding-bottom:0}

@media (max-width:640px){
  .blog-hero{padding:40px 0 20px}
  .article{padding-top:34px}
  .nav-r{gap:12px}
  .nav-l{display:none}
}