/* Blog: the writing section.
   Everything here inherits the tokens already defined in site.css, so the
   section cannot drift from the rest of the site when the palette changes.
   Scoped under .post / .post-list so nothing leaks into the existing pages. */

.blog-head{padding-top:clamp(96px,12vh,150px);}

/* ---- index ------------------------------------------------------------ */
.post-list{margin-top:clamp(30px,5vw,48px);border-top:1px solid var(--line);}
.post-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;
  align-items:baseline;padding:clamp(22px,3vw,30px) 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:padding-left .25s ease;}
.post-row:hover{padding-left:10px;}
.post-row h2{font-family:var(--pow);font-size:var(--t-md);font-weight:700;
  letter-spacing:-.02em;line-height:1.2;}
.post-row:hover h2{color:var(--gold-2);}
.post-row p{margin-top:9px;color:var(--ink-2);font-size:var(--t-body);line-height:1.62;
  max-width:62ch;}
.post-meta{font-size:var(--t-label);color:var(--ink-3);white-space:nowrap;
  letter-spacing:.08em;text-transform:uppercase;}
@media(max-width:620px){
  .post-row{grid-template-columns:1fr;}
  .post-meta{order:-1;}
}

/* ---- article ---------------------------------------------------------- */
.post{max-width:68ch;margin:0 auto;}   /* NOT var(--nar): that token is a FONT STACK,
                                          not a width. 68ch keeps long-form readable. */
.post .kicker{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-2);}
.post h1{font-family:var(--pow);font-size:var(--t-xl);font-weight:800;letter-spacing:-.03em;
  line-height:1.08;margin-top:16px;}
.post .standfirst{font-family:var(--fun);font-size:var(--t-lg);line-height:1.5;
  color:var(--ink-2);margin-top:22px;}
.post .byline{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-size:var(--t-label);color:var(--ink-3);}
.post h2{font-family:var(--pow);font-size:var(--t-md);font-weight:700;letter-spacing:-.02em;
  margin-top:clamp(40px,6vw,62px);}
.post h3{font-family:var(--pow);font-size:var(--t-body);font-weight:700;margin-top:30px;}
.post p{margin-top:17px;line-height:1.72;color:var(--ink);font-size:var(--t-body);}
.post ul{margin-top:17px;padding-left:20px;}
.post li{margin-top:9px;line-height:1.66;color:var(--ink);}
.post strong{font-weight:700;}

/* the number blocks: the part that gets quoted */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(28px,4vw,40px);}
.fig{background:var(--paper);padding:clamp(20px,3vw,28px);}
.fig b{display:block;font-family:var(--pow);font-size:var(--t-xl);font-weight:800;
  letter-spacing:-.03em;color:var(--gold-2);line-height:1;}
.fig span{display:block;margin-top:12px;font-size:var(--t-body);line-height:1.5;
  color:var(--ink-2);}

.method{margin-top:clamp(40px,6vw,62px);padding:clamp(22px,3vw,30px);
  background:var(--paper-2);border:1px solid var(--line);}
.method h2{margin-top:0;font-size:var(--t-body);}
.method p,.method li{font-size:var(--t-sm);color:var(--ink-2);}

.post-cta{margin-top:clamp(44px,6vw,68px);padding-top:clamp(26px,4vw,34px);
  border-top:2px solid var(--gold);}