/* blog: listing + post. Loaded after styles.css. */
.blog-hero{background:var(--abyss);color:#fff;padding:clamp(150px,20vh,220px) 0 clamp(50px,7vh,80px)}
.blog-hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.2rem,6vw,4rem);letter-spacing:-.02em}
.blog-hero em{font-style:normal;color:var(--cyan)}
.blog-hero .lead{color:#dbe9f4;margin-top:16px;max-width:60ch}
.blog-list{padding:clamp(56px,8vw,90px) 0}
.pc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(22px,3vw,30px)}
.pc{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.pc:hover{transform:translateY(-3px);box-shadow:0 26px 56px rgba(13,51,123,.14)}
.pc-media img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.pc-body{padding:clamp(20px,2.6vw,28px)}
.pc-meta{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:12px}
.pc-title{font-family:var(--disp);font-weight:800;font-size:1.22rem;line-height:1.22;letter-spacing:-.01em}
.pc-title a{color:var(--ink);text-decoration:none}
.pc-title a:hover{color:var(--cyan-ink)}
.pc-body p{color:var(--slate);font-size:.95rem;line-height:1.62;margin-top:10px}

.post-head{background:var(--abyss);color:#fff;padding:clamp(140px,18vh,200px) 0 clamp(40px,6vh,64px)}
.post-back{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);text-decoration:none}
.post-back:hover{color:#fff}
.post-head h1{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.12;letter-spacing:-.02em;margin-top:18px;max-width:22ch}
.post-meta{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px}
.post-meta span{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#c4d7e6;background:rgba(60,184,214,.12);border:1px solid rgba(130,195,202,.28);padding:6px 13px;border-radius:30px}
.post-wrap{padding:clamp(40px,6vw,64px) 0 clamp(56px,8vw,90px)}
.post-hero{border-radius:20px;overflow:hidden;margin-bottom:clamp(30px,4vw,44px);box-shadow:0 26px 60px rgba(13,51,123,.16)}
.post-hero img{width:100%;display:block}
.post-body{max-width:72ch;color:var(--slate);font-size:1.08rem;line-height:1.78}
.post-body p{margin-bottom:20px}
.post-body h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--ink);letter-spacing:-.015em;margin:38px 0 14px;line-height:1.18}
.post-body h3{font-family:var(--disp);font-weight:800;font-size:clamp(1.15rem,2.1vw,1.4rem);color:var(--ink);margin:30px 0 12px}
.post-body a{color:var(--cyan-ink);text-decoration:underline;text-underline-offset:3px}
.post-body ul,.post-body ol{margin:0 0 20px 22px}
.post-body li{margin-bottom:9px}
.post-body img{max-width:100%;height:auto;border-radius:14px;display:block;margin:26px 0}
.post-body figure{margin:26px 0}
.post-body figcaption{font-size:.86rem;color:var(--teal-ink);margin-top:8px}
.post-body blockquote{border-left:3px solid var(--gold);padding-left:20px;margin:26px 0;color:var(--ink)}
.post-foot{margin-top:clamp(36px,5vw,56px);padding-top:28px;border-top:1px solid var(--line)}

/* long reference URLs must wrap on mobile */
.post-body{overflow-wrap:anywhere;word-break:break-word}
.post-body a{overflow-wrap:anywhere}
.post-body img,.post-body video,.post-body iframe,.post-body table{max-width:100%;height:auto}
.post-body pre{overflow-x:auto;max-width:100%}

/* blog post hero: cap height so it does not eat the whole viewport */
.post-hero img{aspect-ratio:16/9;object-fit:cover;max-height:62vh}
/* match the horizontal rhythm of section content */
.post-head>.wrap{padding:0 clamp(18px,6vw,90px)}

/* ---- blog post title band: was a flat slab of --abyss. Depth + brand glow. ---- */
.post-head{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#0e3a8c 0%,var(--abyss) 42%,#0a2557 100%)}
.post-head::before{content:"";position:absolute;top:-30%;right:-8%;width:52%;height:150%;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(60,184,214,.30),rgba(60,184,214,.07) 45%,transparent 70%)}
.post-head::after{content:"";position:absolute;left:-14%;bottom:-55%;width:46%;height:130%;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(164,218,147,.16),transparent 68%)}
.post-head>.wrap{position:relative;z-index:1}
.post-head h1{text-shadow:0 2px 20px rgba(4,20,42,.35)}
.post-head{border-bottom:1px solid rgba(130,195,202,.22)}
@media(prefers-reduced-motion:no-preference){
  .post-head::before{animation:drift 21s ease-in-out infinite alternate}
}