/* Blog-only additions. Loaded after legal.css, which supplies the colour tokens,
   the header/brand and the base prose rules — nothing here repeats those. */

.wrap.post{max-width:720px}

/* --- breadcrumb + post meta --- */
.crumb{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mut);margin-bottom:18px}
.crumb a{color:var(--mut);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.meta{color:var(--mut);font-family:var(--mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.07em;margin:0 0 30px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.meta .dot{opacity:.5}

/* --- listing --- */
.lead{font-size:1.06rem;color:var(--mut);margin:0 0 34px}
.postlist{display:grid;gap:14px;margin:0 0 10px;padding:0;list-style:none}
.postlist a.card{display:flex;gap:16px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease}
.postlist a.card:hover,.postlist a.card:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
.postlist h2{margin:0 0 6px;font-size:1.04rem;color:var(--accent)}
.postlist p{margin:0;color:var(--mut);font-size:.92rem}
.postlist .when{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mut);margin-bottom:8px}
/* thumbnail: line art on a tinted plate, so it follows the light/dark theme and needs no assets */
.postlist .thumb{width:76px;height:76px;flex:none;border-radius:var(--radius);background:var(--soft);
  border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center}
.postlist .thumb svg{width:34px;height:34px}
.postlist .txt{min-width:0}
@media(max-width:520px){
  .postlist .thumb{width:54px;height:54px}
  .postlist .thumb svg{width:26px;height:26px}
}

/* --- prose inside a post --- */
.post h2{font-size:1.22rem;margin:36px 0 10px;letter-spacing:-.01em}
.post h3{font-size:1rem;margin:24px 0 6px}
.post p.intro{font-size:1.06rem;color:var(--mut)}
.post blockquote{margin:20px 0;padding:2px 0 2px 16px;border-left:3px solid var(--accent);
  color:var(--mut)}
.post figure{margin:22px 0}
.post figure img{width:100%;border-radius:var(--radius);border:1px solid var(--line);display:block}
.post figcaption{color:var(--mut);font-size:.8rem;margin-top:8px}

/* angle-target table; scrolls on its own so a phone never scrolls the page sideways */
.tablewrap{overflow-x:auto;margin:20px 0}
table.nums{width:100%;border-collapse:collapse;font-size:.9rem;min-width:420px}
table.nums th{text-align:left;color:var(--mut);font-family:var(--mono);font-weight:600;
  font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;padding:0 10px 7px 0}
table.nums td{padding:8px 10px 8px 0;border-top:1px solid var(--line);vertical-align:top}
table.nums td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- call to action at the end of a post --- */
.cta{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:34px 0 0}
.cta p{margin:0 0 12px}
.cta p:last-child{margin:0}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;
  font-size:.92rem;padding:10px 18px;border-radius:9px}
.btn:hover{filter:brightness(1.08)}

/* --- next/prev --- */
.morelinks{margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.morelinks h2{font-size:.7rem;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);margin:0 0 12px}
.morelinks ul{margin:0;padding-left:18px}
.morelinks li{margin:6px 0}