/* ============ Extnd blog ============
   Editorial. Photography, not line drawings. One big lead, then a numbered
   list with rhythm, so nothing blends into anything else. */

.bhero{background:var(--ink);color:var(--paper);padding:clamp(48px,8vh,90px) 0 clamp(36px,6vh,64px);position:relative;overflow:hidden}
.bhero:after{content:"";position:absolute;right:-10%;top:-40%;width:50%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(63,154,102,.22),transparent 66%);pointer-events:none}
.bhero .wrap{position:relative;z-index:1}
.bhero .eyebrow{color:rgba(248,246,240,.5)}.bhero .eyebrow i{background:#7FCBA4}
.bhero h1{font-family:'Outfit',sans-serif;font-weight:800;letter-spacing:-.045em;line-height:.98;
  font-size:clamp(40px,7.5vw,88px);margin-top:14px;max-width:12ch}
.bhero h1 b{color:#7FCBA4;font-weight:800}
.bhero .lede{font-size:clamp(15px,1.6vw,18.5px);line-height:1.6;color:rgba(248,246,240,.62);max-width:50ch;margin-top:18px}

/* ---------- lead story: photo and a solid panel, never text over the picture ---------- */
.blead{display:grid;grid-template-columns:minmax(0,58%) 1fr;text-decoration:none;color:var(--paper);
  background:var(--ink);border-radius:0 0 28px 28px;overflow:hidden;margin-top:-1px;min-height:clamp(380px,52vh,560px)}
.blead .bleadPic{position:relative;overflow:hidden}
.blead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.blead:hover img{transform:scale(1.03)}
.bleadIn{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.bleadTag{display:inline-flex;align-items:center;gap:9px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#7FCBA4;margin-bottom:16px}
.bleadTag i{width:6px;height:6px;border-radius:50%;background:#7FCBA4}
.blead h2{font-family:'Outfit',sans-serif;font-weight:800;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(26px,3.4vw,44px)}
.blead p{font-size:clamp(14.5px,1.4vw,17px);line-height:1.58;color:rgba(248,246,240,.7);margin-top:16px;max-width:44ch}
.bleadMeta{display:flex;gap:16px;margin-top:20px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;
  color:rgba(248,246,240,.5);letter-spacing:.06em}
.bleadGo{display:inline-block;margin-top:24px;font-family:'Outfit',sans-serif;font-weight:700;font-size:14px;color:#0E1512;
  background:#7FCBA4;padding:13px 22px;border-radius:999px;align-self:flex-start}
@media(max-width:820px){.blead{grid-template-columns:1fr;border-radius:0}.blead .bleadPic{aspect-ratio:16/10}.blead img{position:relative}}

/* ---------- the rest: a numbered editorial list, photo on alternating sides ---------- */
.bfeed{padding:clamp(40px,7vh,80px) 0 clamp(50px,8vh,100px)}
.bfeed .wrap{max-width:1180px}
.bfeedHead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:clamp(20px,3vh,32px);
  padding-bottom:16px;border-bottom:2px solid var(--ink)}
.bfeedHead h2{font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.03em}
.bfeedHead span{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--soft);letter-spacing:.06em}
.brow{display:grid;grid-template-columns:70px 1fr minmax(0,38%);gap:clamp(16px,2.6vw,40px);align-items:center;
  padding:clamp(22px,3.4vh,40px) 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);
  transition:background .3s ease}
.brow:hover{background:linear-gradient(90deg,transparent,rgba(63,154,102,.05),transparent)}
.brow:nth-child(even){grid-template-columns:70px minmax(0,38%) 1fr}
.brow:nth-child(even) .bnum{order:0}.brow:nth-child(even) .bpic{order:1}.brow:nth-child(even) .btxt{order:2}
.bnum{font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(36px,4.6vw,64px);letter-spacing:-.05em;
  color:var(--glacial);line-height:1;transition:color .3s ease}
.brow:hover .bnum{color:var(--echo)}
.btxt h3{font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(21px,2.6vw,32px);letter-spacing:-.035em;line-height:1.1}
.btxt p{font-size:clamp(14px,1.4vw,16px);line-height:1.6;color:var(--soft);margin-top:10px;max-width:52ch}
.bmeta{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.06em;color:var(--soft);margin-bottom:10px}
.bcat{color:var(--echo-deep);font-weight:600;text-transform:uppercase;letter-spacing:.11em;font-size:10px}
.bmore{display:inline-block;margin-top:12px;font-family:'Outfit',sans-serif;font-weight:600;font-size:13.5px;color:var(--echo-deep)}
.bpic{aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:var(--glacial)}
.bpic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.brow:hover .bpic img{transform:scale(1.04)}
.bempty{color:var(--soft);font-size:15px;padding:30px 0}
@media(max-width:820px){
  .brow,.brow:nth-child(even){grid-template-columns:1fr;gap:12px}
  .bnum{display:none}
  .brow:nth-child(even) .bpic{order:0}.brow:nth-child(even) .btxt{order:1}
  .blead{min-height:420px;border-radius:0}
}

/* ---------- single post ---------- */
.wrap.narrow{max-width:740px}
.post .phead{background:var(--paper);padding:clamp(40px,7vh,84px) 0 clamp(22px,3.5vh,34px)}
.phead h1{font-family:'Outfit',sans-serif;font-weight:800;letter-spacing:-.045em;line-height:1;
  font-size:clamp(32px,5.6vw,64px);margin-top:16px}
.standfirst{font-size:clamp(17px,1.9vw,21px);line-height:1.55;color:var(--soft);margin-top:18px}
.pcover{margin:0;position:relative}
.pcover .wrap{max-width:1180px}
.pcover img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;border-radius:22px}
.pcover figcaption{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.06em;color:var(--soft);
  text-align:right;padding:10px 4px 0}

.pbody{padding:clamp(34px,5vh,56px) 0 clamp(40px,7vh,80px)}
.pbody>p:first-of-type::first-letter{font-family:'Outfit',sans-serif;font-weight:800;font-size:4.2em;float:left;
  line-height:.82;margin:.06em .12em 0 0;color:var(--echo)}
.pbody p{font-size:clamp(17px,1.75vw,19.5px);line-height:1.72;color:var(--ink);margin:0 0 1.35em}
.pbody h2{font-family:'Outfit',sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(25px,3.1vw,36px);margin:2.1em 0 .65em;padding-top:.8em;border-top:1px solid var(--line)}
.pbody h3{font-family:'Outfit',sans-serif;font-weight:700;letter-spacing:-.025em;font-size:clamp(19px,2.2vw,25px);margin:1.8em 0 .55em}
.pbody a{color:var(--echo-deep);text-decoration:underline;text-underline-offset:3px}
.pbody strong{font-weight:600}
.pbody ul,.pbody ol{margin:0 0 1.4em 1.3em}
.pbody li{font-size:clamp(16px,1.6vw,18px);line-height:1.7;margin-bottom:.45em}
.pbody blockquote{margin:2.2em -clamp(0px,4vw,60px);padding:clamp(20px,3vw,34px) clamp(24px,4vw,48px);
  background:var(--ink);color:var(--paper);border-radius:18px;position:relative}
.pbody blockquote:before{content:"\201C";position:absolute;left:18px;top:2px;font-family:'Outfit',sans-serif;
  font-weight:800;font-size:80px;line-height:1;color:#7FCBA4;opacity:.5}
.pbody blockquote p{font-family:'Outfit',sans-serif;font-weight:600;font-size:clamp(20px,2.4vw,27px);
  letter-spacing:-.025em;line-height:1.3;color:var(--paper);margin:0;padding-left:28px}
.pbody figure{margin:2.2em 0}
.pbody figure img{display:block;width:100%;height:auto;border-radius:16px}
.pbody figcaption{font-size:12.5px;color:var(--soft);margin-top:10px}
.pbody hr{border:0;border-top:1px solid var(--line);margin:2.5em 0}
.pbody code{font-family:ui-monospace,Menlo,monospace;font-size:.9em;background:rgba(23,32,27,.06);padding:2px 6px;border-radius:5px}

.pauthor{display:flex;gap:16px;align-items:center;margin:clamp(30px,5vh,50px) 0 22px;padding:20px 22px;
  border:1px solid var(--line);border-radius:18px;background:var(--card)}
.pauthor img{width:44px;height:auto;flex:none}
.pauthor b{display:block;font-family:'Outfit',sans-serif;font-weight:700;font-size:15px;letter-spacing:-.02em}
.pauthor span{display:block;font-size:13px;line-height:1.55;color:var(--soft);margin-top:3px}

.brel{background:var(--card);border-top:1px solid var(--line);padding:clamp(40px,6vh,70px) 0}
.brel .wrap{max-width:1180px}
.brel h2{font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(22px,3vw,34px);letter-spacing:-.03em;margin-bottom:6px}