/* Blog list and post pages. Loaded after ../styles.css; reuses its tokens and section grid. */
.blog-hero .section-inner{padding-bottom:var(--block-gap)}
.blog-hero h1,.post-head h1{margin:0;font:300 var(--fs-h2)/var(--lh-display) var(--font);letter-spacing:var(--tracking-display)}
.blog-hero .work-intro{margin:0}

/* ---------- List ---------- */
.post-list{list-style:none;margin:0;padding:0 0 var(--section-y);border-top:1px solid var(--line)}
.post-row{display:grid;grid-template-columns:var(--split);column-gap:var(--col-gap);padding-block:clamp(28px,1rem + 2vw,48px);border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.post-meta{display:flex;flex-direction:column;gap:6px;padding-top:6px;color:var(--muted);font-size:var(--label-size);letter-spacing:var(--label-track);line-height:1.6;text-transform:uppercase}
.post-meta time{color:#bdbdb9}
.post-main{display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,16vw,260px);gap:var(--col-gap);align-items:start}
.post-main h2{margin:0;font:300 clamp(26px,1rem + 1.7vw,42px)/var(--lh-title) var(--font);letter-spacing:-.025em;max-width:24ch}
.post-main p{margin:14px 0 0;max-width:56ch;color:var(--text-2);font-size:var(--fs-body);font-weight:300;line-height:var(--lh-body)}
.post-main .text-link{margin-top:22px}
.post-thumb{aspect-ratio:4/3;border:1px solid var(--line);background:#000;overflow:hidden}
.post-thumb svg{display:block;width:100%;height:100%}
.post-row:is(:hover,:focus-visible) h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.post-row:is(:hover,:focus-visible) .text-link>span:last-child{background:var(--accent);border-color:var(--accent);transform:rotate(45deg)}

/* ---------- Post ---------- */
.post-head .section-inner{padding-bottom:var(--block-gap)}
.post-head .section-heading>.eyebrow a{color:inherit;text-decoration:none}
.post-head .section-heading>.eyebrow a:is(:hover,:focus-visible){color:var(--fg)}
.post-kicker{grid-column:2;margin:0;color:var(--muted);font-size:var(--label-size);letter-spacing:var(--label-track);text-transform:uppercase}
.post-head h1{grid-column:2;max-width:20ch}
.post-dek{grid-column:2;margin:0;max-width:700px;color:#a5a5a5;font-size:var(--fs-lead);font-weight:300;line-height:var(--lh-body)}
.post-body{display:grid;grid-template-columns:var(--split);column-gap:var(--col-gap);padding-bottom:var(--section-y)}
.post-aside{border-top:1px solid var(--line);padding-top:20px;align-self:start;position:sticky;top:24px}
.post-aside dl{margin:0;display:grid;gap:14px}
.post-aside dt{color:var(--muted);font-size:var(--label-sm);letter-spacing:var(--label-track);text-transform:uppercase}
.post-aside dd{margin:2px 0 0;font-size:14px;font-weight:300;color:#d6d6d2}
.prose{border-top:1px solid var(--line);padding-top:clamp(24px,1rem + 1.4vw,40px);min-width:0}
.prose p{margin:0 0 1.4em;max-width:680px;font-size:var(--fs-lead);font-weight:300;line-height:var(--lh-body);color:#d9d9d5}
.prose figure{margin:.4em 0 2.2em;max-width:880px;border:1px solid var(--line-strong);background:#000}
.prose figure svg{display:block;width:100%;height:auto}
.prose figcaption{padding:12px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:var(--label-sm);letter-spacing:var(--label-track);text-transform:uppercase}
.post-end{margin-top:var(--block-gap);padding-top:var(--block-gap);border-top:1px solid var(--line)}
.post-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap);margin-top:var(--block-gap-lg)}
.post-nav a{display:block;padding:22px 0 0;border-top:1px solid var(--line-strong);color:inherit;text-decoration:none}
.post-nav a:is(:hover,:focus-visible) b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.post-nav small{display:block;color:var(--muted);font-size:var(--label-sm);letter-spacing:var(--label-track);text-transform:uppercase}
.post-nav b{display:block;margin-top:10px;font-weight:300;font-size:clamp(19px,1rem + .6vw,24px);line-height:var(--lh-heading)}
.post-nav .next{text-align:right}

@media(max-width:1100px){
  .post-main{grid-template-columns:minmax(0,1fr)}
  .post-thumb{max-width:320px}
}
@media(max-width:760px){
  .post-row,.post-body{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .post-meta{flex-direction:row;flex-wrap:wrap;gap:4px 14px;padding-top:0}
  .post-kicker,.post-head h1,.post-dek{grid-column:1}
  .blog-hero h1,.post-head h1{font-size:clamp(31px,7.4vw,46px)}
  .post-aside{position:static}
  .post-aside dl{grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 28px}
  .prose p{font-size:17px}
  .post-nav{grid-template-columns:minmax(0,1fr)}
  .post-nav .next{text-align:left}
}

/* Long-form blocks: section headings, lists and pull quotes */
.prose h2{margin:2.2em 0 .8em;max-width:28ch;font:300 clamp(24px,1rem + 1.2vw,34px)/var(--lh-title) var(--font);letter-spacing:-.02em}
.prose :is(ul,ol){margin:0 0 1.6em;padding-left:1.3em;max-width:660px}
.prose li{margin-bottom:.6em;padding-left:.3em;font-size:var(--fs-lead);font-weight:300;line-height:1.7;color:#d9d9d5}
.prose ol li::marker{color:var(--muted);font-size:.85em}
.prose ul li::marker{color:var(--accent)}
.prose blockquote{margin:1.8em 0 2.2em;padding:0 0 0 clamp(18px,2vw,28px);border-left:1px solid var(--fg);max-width:680px}
.prose blockquote p{margin:0;font:300 clamp(22px,1rem + 1vw,30px)/1.35 var(--font);letter-spacing:-.015em;color:var(--fg)}
.post-aside dl{grid-template-columns:none}
@media(max-width:760px){
  .post-aside dl{grid-template-columns:repeat(2,auto)}
  .prose li{font-size:17px}
}