/* Blog: list (/blog/) and article pages. Loaded only on blog pages, on top of site.css. */
.blog{background:var(--paper)}
.blog .eyebrow{color:var(--ink-soft)}

/* ---------- list ---------- */
.bl-head{background:var(--ink);color:var(--paper);padding:calc(env(safe-area-inset-top,0px) + 130px) var(--gutter) clamp(40px,6vw,72px)}
.bl-head .eyebrow{color:var(--lime);margin:0 0 18px}
.bl-head h1{font-size:clamp(2.6rem,7.4vw,7.6rem);line-height:.86;max-width:14ch}
.bl-head h1 .l{color:var(--lime)}
.bl-head p{max-width:58ch;margin:22px 0 0;color:color-mix(in srgb,var(--paper) 78%,transparent);font-size:1.05rem}
.bl-filter{position:sticky;top:70px;z-index:20;display:flex;gap:6px;overflow-x:auto;padding:10px var(--gutter);background:var(--paper);border-bottom:2px solid var(--ink)}
.bl-filter button{flex:none;font:600 .9rem var(--body);padding:.6em 1em;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.bl-filter button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.bl-list{padding:clamp(32px,5vw,64px) var(--gutter) clamp(64px,9vw,120px);display:grid;gap:clamp(40px,6vw,80px)}
.bl-list [hidden]{display:none!important}
.bl-img{display:block;overflow:hidden;border-radius:var(--r);background:var(--paper-2);aspect-ratio:4/5}
.bl-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
a:hover .bl-img img{transform:scale(1.03)}
.bl-cat{display:inline-block;font:600 .72rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--lime);padding:.55em .8em;border-radius:999px}
.bl-feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;color:inherit;text-decoration:none}
.bl-feat .bl-img{aspect-ratio:4/5;max-height:76vh}
.bl-feat-txt{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.bl-feat-txt b{font-size:clamp(2rem,4.2vw,4.2rem);line-height:.92}
.bl-desc{font-size:1.05rem;line-height:1.6;max-width:56ch;color:var(--ink)}
.bl-feat small,.bl-card small{color:var(--ink-soft);font-size:.85rem}
.bl-feat .btn{background:var(--ink);color:var(--paper);margin-top:6px}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.bl-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;color:inherit;text-decoration:none}
.bl-card .bl-img{width:100%;margin-bottom:6px}
.bl-card b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1}
.bl-soon{max-width:60ch;color:var(--ink-soft);margin:0}
.bl-soon a{color:var(--ink)}

/* ---------- article ---------- */
.bp-head{background:var(--ink);color:var(--paper);padding:calc(env(safe-area-inset-top,0px) + 120px) var(--gutter) clamp(40px,6vw,72px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,64px);align-items:end}
.bp-crumbs{display:flex;gap:.6em;font:600 .8rem var(--body);letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px}
.bp-crumbs a{color:var(--lime);text-decoration:none}
.bp-crumbs span{opacity:.5}
.bp-head h1{font-size:clamp(2.2rem,5.2vw,5.6rem);line-height:.9}
.bp-meta{margin:22px 0 0;color:color-mix(in srgb,var(--paper) 70%,transparent);font-size:.9rem}
.bp-cover{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;max-height:70vh;background:#000}
.bp-cover img{width:100%;height:100%;object-fit:cover;display:block}
.bp-body{max-width:760px;margin:0 auto;padding:clamp(40px,6vw,80px) var(--gutter) clamp(32px,5vw,56px);font-size:1.08rem;line-height:1.7;color:var(--ink)}
.bp-lead{font-size:clamp(1.2rem,1.8vw,1.45rem);line-height:1.5;margin:0 0 1.6em;font-weight:600}
.bp-body h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1;margin:2em 0 .7em}
.bp-body p{margin:0 0 1.1em}
.bp-body ul,.bp-body ol{margin:0 0 1.3em;padding-left:1.2em}
.bp-body li{margin:.35em 0}
.bp-body li::marker{color:var(--orange);font-weight:700}
.bp-body strong{font-weight:700;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--lime) 80%,transparent) 62%)}
.bp-body a{color:var(--violet)}
.bp-body blockquote{margin:1.6em 0;padding:0 0 0 1.1em;border-left:4px solid var(--orange);font-family:var(--italic);font-style:italic;font-size:1.5em;line-height:1.3}
.bp-src{margin-top:3em;padding-top:1.4em;border-top:1.5px solid color-mix(in srgb,var(--ink) 20%,transparent);font-size:.88rem;line-height:1.55}
.bp-src h2{font:600 .74rem/1 var(--body);letter-spacing:.14em;color:var(--ink-soft);margin:0 0 1em}
.bp-src ol{padding-left:1.4em}
.bp-src a{color:var(--ink-soft)}
.bp-cta{margin:0 var(--gutter) clamp(56px,8vw,100px);background:var(--violet);color:var(--white);border-radius:calc(var(--r) + 6px);padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end}
.bp-cta .eyebrow{color:var(--lime);margin:0 0 14px}
.bp-cta h2{font-size:clamp(1.8rem,3.6vw,3.4rem);line-height:.92;max-width:16ch}
.bp-cta p{margin:14px 0 0;max-width:52ch;opacity:.88}
.bp-cta-a{display:flex;flex-wrap:wrap;gap:10px}
.btn-ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--white) 60%,transparent)}
.bl-more{padding:0 var(--gutter) clamp(64px,9vw,120px)}
.bl-more h2{font-size:clamp(1.8rem,3.4vw,3rem);margin-bottom:clamp(20px,3vw,36px)}
.blog .foot{background:var(--violet);color:var(--white);padding:clamp(32px,5vw,56px) var(--gutter) clamp(24px,4vw,40px)}

@media (max-width:900px){
  .bl-feat,.bp-head{grid-template-columns:1fr}
  .bl-feat .bl-img{max-height:none;aspect-ratio:4/5}
  .bl-grid{grid-template-columns:1fr 1fr}
  .bp-cover{aspect-ratio:4/3;max-height:none}
  .bp-cover img{object-position:50% 30%}
  .bp-cta{grid-template-columns:1fr}
}
@media (max-width:560px){
  .bl-grid{grid-template-columns:1fr}
  .bp-body{font-size:1.02rem}
}