/* ---------- blog: index + article (loaded after site.css on /blog/ pages only) ---------- */

/* index */
.post-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;align-items:end;border-top:1px solid var(--ink);padding-top:28px}
.post-feature .thumb{display:block;aspect-ratio:9/14;overflow:hidden;background:var(--stone);max-width:420px}
.post-feature .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.post-feature:hover .thumb img{transform:scale(1.04)}
.post-feature h2{font-size:clamp(46px,5.6vw,100px);margin:18px 0 0}
.post-feature p{font-size:18px;max-width:560px;color:var(--ink-2);margin:28px 0 36px}
.post-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.post-list li{border-bottom:1px solid var(--hair)}
.post-list a{display:grid;grid-template-columns:140px minmax(0,1fr) 20px;gap:28px;align-items:baseline;padding:26px 0;transition:padding .5s var(--ease)}
.post-list a:hover{padding-left:12px}
.post-list .date{color:var(--mute)}
.post-list b{display:block;font:500 clamp(20px,1.8vw,26px)/1.25 var(--sans);letter-spacing:-.02em}
.post-list span.d{display:block;margin-top:8px;color:var(--mute);font-size:15px;max-width:640px}
.post-list .plus{align-self:center;opacity:.5}
@media (max-width:860px){.post-feature{grid-template-columns:1fr}}
@media (max-width:640px){.post-list a{grid-template-columns:1fr;gap:6px}.post-list .plus{display:none}}

/* article hero */
.post-hero h1{font-size:clamp(52px,7.2vw,132px);max-width:15ch}
.post-hero .meta{display:flex;flex-wrap:wrap;gap:6px 18px}
.post-hero .meta a{text-decoration:underline;text-underline-offset:3px}

/* lead: main photo + opening */
.post-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;align-items:start}
.post-lead figure{margin:0;max-width:420px}
.post-lead .body > p:not(.statement){font-size:18px;max-width:600px;color:var(--ink-2);margin:28px 0 0}
.post-lead .body > p.statement{font-size:clamp(26px,2.6vw,42px);margin:0;max-width:24ch}
@media (max-width:860px){.post-lead{grid-template-columns:1fr}.post-lead figure{max-width:360px}}

.shot{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--stone)}
.shot img{width:100%;height:100%;object-fit:cover}
figure figcaption{margin-top:14px;color:var(--mute)}

/* article body: sticky contents + prose */
.post-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;align-items:start}
.toc{position:sticky;top:100px}
.toc ol{list-style:none;margin:16px 0 0;padding:0;counter-reset:t}
.toc li{counter-increment:t;border-top:1px solid var(--hair)}
.toc a{display:grid;grid-template-columns:28px 1fr;gap:6px;padding:10px 0;font-size:14px;line-height:1.35;color:var(--mute);transition:color .3s}
.toc a::before{content:counter(t,decimal-leading-zero);font-size:11px;letter-spacing:.08em;padding-top:2px}
.toc a:hover,.toc a.on{color:var(--ink)}
@media (max-width:860px){.post-body{grid-template-columns:1fr}.toc{display:none}}

.prose{max-width:700px;color:var(--ink-2);font-size:18px;line-height:1.65}
.prose > :first-child{margin-top:0}
.prose p{margin:0 0 22px}
.prose h2{font-family:var(--cond);font-stretch:62%;font-weight:600;text-transform:uppercase;letter-spacing:-.005em;line-height:.9;color:var(--ink);font-size:clamp(44px,4.6vw,76px);margin:clamp(80px,9vw,130px) 0 30px;padding-top:16px;border-top:1px solid var(--ink);scroll-margin-top:90px}
.prose h2 .dot,.post-hero .dot{color:var(--blue);font-style:normal}
.prose h3{font:500 clamp(22px,1.9vw,28px)/1.2 var(--sans);letter-spacing:-.025em;color:var(--ink);margin:46px 0 14px}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .3s}
.prose a:hover{color:var(--blue)}
.prose ul{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid var(--hair)}
.prose ul li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid var(--hair)}
.prose ul li::before{content:"";position:absolute;left:0;top:27px;width:14px;height:1px;background:var(--ink)}
.prose figure{margin:40px 0 46px;max-width:380px}
.prose .faq{margin-top:10px}
.prose .faq summary{color:var(--ink)}
.prose .faq details p{font-size:17px}

/* DIY vs Thrivr scoreboard */
.vs{display:grid;grid-template-columns:1fr 1fr;margin:36px 0 40px;border-top:1px solid var(--ink)}
.vs > div{padding:18px 22px 22px 0}
.vs > div + div{padding-left:22px;border-left:1px solid var(--hair)}
.vs .r{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--hair);padding:12px 0}
.vs .r span{font-size:14px;color:var(--mute)}
.vs .r b{font:600 clamp(22px,2vw,30px)/1 var(--sans);letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums}
.vs .on .r b{color:var(--blue)}
.vs .head{display:block;margin-bottom:6px}
@media (max-width:520px){.vs{grid-template-columns:1fr}.vs > div + div{padding-left:0;border-left:0;margin-top:16px}}

.post-end{margin-top:60px;padding-top:28px;border-top:1px solid var(--ink)}
.post-end p{font:500 clamp(22px,2vw,30px)/1.25 var(--sans);letter-spacing:-.025em;color:var(--ink);margin:0 0 30px;max-width:24ch}
.post-end p a{text-decoration-thickness:1px}