/* ===================== Blog listing ===================== */
.blog-hero{ padding-top:clamp(40px,6vw,80px); padding-bottom:clamp(30px,4vw,46px); position:relative; overflow:hidden; }
.blog-hero__in{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.blog-hero h1{ font-size:clamp(38px,6vw,68px); letter-spacing:-.03em; margin-top:20px; max-width:16ch; }
.blog-hero h1 em{ color:var(--purple); font-style:normal; }
.blog-hero p{ font-size:clamp(17px,1.8vw,21px); color:var(--ink-soft); max-width:56ch; margin-top:20px; line-height:1.5; }
.blog-hero__glow{ position:absolute; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, rgba(124,63,196,.18), transparent 70%); top:-160px; right:-60px; filter:blur(60px); pointer-events:none; }

/* featured */
.feat{ max-width:var(--maxw); margin:8px auto 0; padding-inline:var(--gut); }
.feat__card{ display:grid; grid-template-columns:1.1fr .9fr; background:var(--surface); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3); border:1px solid var(--line-soft); transition:transform .4s var(--ease-out), box-shadow .4s; }
.feat__card:hover{ transform:translateY(-4px); box-shadow:var(--sh-4); }
@media (max-width:860px){ .feat__card{ grid-template-columns:1fr; } }
.feat__media{ position:relative; min-height:340px; overflow:hidden; }
.feat__media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform .7s var(--ease-out); }
.feat__card:hover .feat__media img{ transform:scale(1.05); }
.feat__badge{ position:absolute; top:20px; left:20px; z-index:2; background:var(--purple); color:#fff; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:7px 14px; border-radius:var(--r); box-shadow:var(--sh-accent); display:flex; align-items:center; gap:6px; }
.feat__body{ padding:clamp(28px,3.5vw,52px); display:flex; flex-direction:column; justify-content:center; }
.feat__meta{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:flex; gap:14px; }
.feat__body h2{ font-size:clamp(26px,3.2vw,40px); line-height:1.1; margin:16px 0 14px; }
.feat__body p{ color:var(--ink-soft); font-size:16.5px; line-height:1.6; }
.feat__tags{ display:flex; gap:8px; margin-top:22px; }

/* filters */
.blog-filters{ max-width:var(--maxw); margin:0 auto; padding:clamp(40px,5vw,64px) var(--gut) 0; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.blog-filters__label{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-right:6px; }
.fbtn{ border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-size:14.5px; font-weight:600; padding:9px 17px; border-radius:var(--r); transition:.2s var(--ease); box-shadow:var(--sh-1); }
.fbtn:hover{ color:var(--ink); transform:translateY(-1px); box-shadow:var(--sh-2); }
.fbtn.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* grid */
.blog-grid{ max-width:var(--maxw); margin:0 auto; padding:36px var(--gut) clamp(64px,8vw,100px); display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }

/* newsletter strip */
.nl{ max-width:var(--maxw); margin:0 auto clamp(64px,8vw,100px); padding-inline:var(--gut); }
.nl__card{ background:var(--surface-2); border-radius:var(--r-xl); padding:clamp(32px,4vw,56px); display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; border:1px solid var(--line-soft); }
@media (max-width:760px){ .nl__card{ grid-template-columns:1fr; } }
.nl__card h3{ font-size:clamp(24px,3vw,34px); }
.nl__card p{ color:var(--ink-soft); margin-top:12px; font-size:16px; }
.nl__form{ display:flex; gap:10px; }
.nl__form input{ flex:1; padding:15px 18px; border-radius:var(--r); border:1.5px solid var(--line); font-family:inherit; font-size:15.5px; background:var(--surface); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.nl__form input:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 4px var(--purple-50); }
@media (max-width:420px){ .nl__form{ flex-direction:column; } }