/* ─────────────────────────────────────────────────────────────────────
   Loamist blog — listing, post pages, homepage teaser.
   Builds on loamist-brand.css tokens and article.css (article-layout,
   article-body, sidebar). Generated pages: scripts/build-blog.mjs.
   Listing measurements follow the 2026-09-16 design handoff
   (design_handoff_blog_listing/README.md).
   ───────────────────────────────────────────────────────────────────── */

.blog a { color: var(--gold); text-decoration: none; }
.blog a:hover { color: var(--gold-2, #936c00); }

/* ── Listing shell ─────────────────────────────────────────────────── */
.blog-wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.blog-hero { padding: 72px 28px 0; text-align: center; }
.blog-kicker { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--gold); }
.blog-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4.6vw, 58px); line-height: 1.08; letter-spacing: -0.015em; margin: 14px 0 0; color: var(--ink); }
.blog-hero .blog-lead { font-family: var(--font-sans); font-size: 18px; line-height: 1.62; color: var(--ink-2, var(--ink)); max-width: 58ch; margin: 18px auto 0; text-wrap: pretty; }
.blog-hero-author { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 14px 8px 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-sans); font-size: 13px; color: var(--muted); }
.blog-hero-author strong { color: var(--ink); font-weight: 600; }
.blog-hero-author:hover { border-color: var(--gold); color: var(--muted); }
.blog-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: cover; display: inline-block; background: var(--gold-soft); border: 1px solid var(--line); }

/* Filter chips (URL-backed, ?category=) */
.blog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.blog-chip { font-family: var(--font-sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 7px 14px; border-radius: 999px; background: var(--card); color: var(--ink-2, var(--ink)); border: 1px solid var(--line); cursor: pointer; text-decoration: none; transition: border-color .3s var(--ease); }
.blog-chip:hover { border-color: var(--gold); color: var(--ink-2, var(--ink)); }
.blog-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Section rules */
.blog-band { padding-top: 54px; }
.blog-band--first { padding-top: 52px; }
.blog-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px; }
.blog-rule-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.blog-rule-line { flex: 1 1 60px; height: 1px; background: var(--line); }
.blog-rule-count { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.blog-page-end { padding-bottom: 90px; }
.blog-empty { font-family: var(--font-sans); font-size: 15px; color: var(--muted); text-align: center; padding: 40px 0 0; }

/* ── Cards ─────────────────────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 22px; }
.blog-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.blog-card:hover { color: inherit; }
.blog-card-media { aspect-ratio: 3 / 2; border-bottom: 1px solid var(--line); background: var(--bg-2, #f3f1ec); overflow: hidden; }
.blog-card-media > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.blog-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.blog-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.blog-pill { font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.blog-pill--gold { background: var(--gold-soft); color: var(--gold); border-color: #e3d3a6; }
.blog-date { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.blog-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--ink); }
.blog-card p { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 16px; flex: 1; }
.blog-read { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--gold); margin-top: auto; }
.blog-card:hover .blog-read, .blog-featured:hover .blog-read { color: var(--gold-2, #936c00); }

/* Featured card */
.blog-featured { display: flex; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.blog-featured:hover { color: inherit; }
/* align-self: flex-start is load-bearing: without it the taller text column stretches the media and the 3:2 box loses. */
.blog-featured .blog-card-media { flex: 1 1 340px; min-width: 300px; align-self: flex-start; aspect-ratio: 3 / 2; border-bottom: 0; }
.blog-featured-body { flex: 1 1 340px; min-width: 300px; padding: 34px 36px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); }
.blog-featured .blog-meta { justify-content: flex-start; gap: 12px; margin-bottom: 14px; }
.blog-featured h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 12px; color: var(--ink); }
.blog-featured p { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.62; color: var(--muted); margin: 0 0 18px; }

/* Archive rows (posts beyond the first twelve) */
.blog-archive { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 26px; }
.blog-archive .blog-rule { margin: 14px 0 4px; }
.blog-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.blog-row:hover { color: inherit; }
.blog-row:last-child { border-bottom: 0; }
.blog-row .blog-thumb { width: 96px; border-radius: 8px; border: 1px solid var(--line); }
.blog-row-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.25; color: var(--ink); margin: 0 0 4px; }
.blog-row-cat { font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.blog-row .blog-date { text-align: right; }
.blog-hidden { display: none !important; }

/* ── Listing art: the six archetypes ───────────────────────────────── */
/* Frame: content on an absolute layer so the 3:2 box is authoritative; all
   internal sizing in cqw so a graphic is identical at 96px and 1600px. */
.blog-thumb { container-type: inline-size; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #f3f1ec; }
.blog-thumb > .blog-thumb-in { position: absolute; inset: 0; }
.blog-thumb--ink { background: #1c1917; }
.blog-thumb--gold { background: #AD7F00; }
/* Graphics are fixed compositions: their inks do not follow the page theme. */
.blog-thumb { --t-ink: #1c1917; --t-bone: #faf9f7; --t-card: #ffffff; --t-gold: #AD7F00; --t-gold-2: #936c00; --t-red: #b3261e; }

/* A. One number, on ink */
.blog-thumb--A .blog-thumb-in { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6cqw 8cqw; }
.blog-thumb--A .t-num { font-family: var(--font-display); font-weight: 700; font-size: 30cqw; line-height: 0.86; letter-spacing: -0.04em; color: var(--t-gold); white-space: nowrap; }
.blog-thumb--A .t-claim { font-family: var(--font-sans); font-weight: 600; font-size: 4.6cqw; line-height: 1.2; text-align: center; color: var(--t-bone); margin-top: 2.5cqw; }

/* B. Two-panel contrast, one solid gold */
.blog-thumb--B .blog-thumb-in { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5cqw; align-content: center; padding: 7cqw 6cqw; }
.blog-thumb--B .t-tile { border-radius: 12px; padding: 5cqw; display: flex; flex-direction: column; background: var(--t-card); border: 1.5px solid var(--t-ink); min-width: 0; }
.blog-thumb--B .t-tile--gold { background: var(--t-gold); border-color: var(--t-gold); }
.blog-thumb--B .t-label { font-family: var(--font-mono); font-size: 2.9cqw; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(28,25,23,.6); }
.blog-thumb--B .t-tile--gold .t-label { color: var(--t-ink); }
.blog-thumb--B .t-title { font-family: var(--font-display); font-weight: 700; font-size: 5.4cqw; line-height: 1.08; color: var(--t-ink); margin-top: 2cqw; }

/* C. The mismatch */
.blog-thumb--C .blog-thumb-in { display: flex; flex-direction: column; justify-content: center; gap: 2.4cqw; padding: 7cqw; }
.blog-thumb--C .t-row { border-radius: 9px; padding: 3.4cqw 4cqw; display: flex; align-items: baseline; justify-content: space-between; gap: 3cqw; background: var(--t-card); border: 1.5px solid var(--t-ink); }
.blog-thumb--C .t-row--bad { background: var(--t-red); border-color: var(--t-red); }
.blog-thumb--C .t-key { font-family: var(--font-mono); font-size: 2.7cqw; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(28,25,23,.6); }
.blog-thumb--C .t-val { font-family: var(--font-mono); font-size: 4.4cqw; font-weight: 500; color: var(--t-ink); }
.blog-thumb--C .t-row--bad .t-key, .blog-thumb--C .t-row--bad .t-val { color: var(--t-bone); }
.blog-thumb--C .t-verdict { font-family: var(--font-display); font-weight: 700; font-size: 4.8cqw; color: var(--t-ink); text-align: center; margin-top: 1.5cqw; }

/* D. Three options, one cost each */
.blog-thumb--D .blog-thumb-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.8cqw; align-content: center; padding: 8cqw 6cqw; }
.blog-thumb--D .t-tile { border-radius: 10px; padding: 4.5cqw 3.5cqw; display: flex; flex-direction: column; background: var(--t-card); border: 1.5px solid var(--t-ink); min-width: 0; }
.blog-thumb--D .t-tile--gold { background: var(--t-gold); border-color: var(--t-gold); }
.blog-thumb--D .t-label { font-family: var(--font-mono); font-size: 2.5cqw; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(28,25,23,.6); white-space: nowrap; }
.blog-thumb--D .t-tile--gold .t-label { color: var(--t-ink); }
.blog-thumb--D .t-fig { font-family: var(--font-display); font-weight: 700; font-size: 6.4cqw; line-height: 1; color: var(--t-ink); margin-top: 1.5cqw; }
.blog-thumb--D .t-fig--long { font-size: 4.9cqw; letter-spacing: -0.01em; }

/* E. Cost by stage */
.blog-thumb--E .blog-thumb-in { display: flex; flex-direction: column; justify-content: center; padding: 8cqw 7cqw; }
.blog-thumb--E .t-bars { display: flex; align-items: flex-end; gap: 3cqw; height: 52%; }
.blog-thumb--E .t-bar { flex: 1; background: var(--t-ink); border-radius: 3px 3px 0 0; }
.blog-thumb--E .t-bar--gold { background: var(--t-gold); }
.blog-thumb--E .t-labels { display: flex; gap: 3cqw; font-family: var(--font-mono); font-size: 2.6cqw; letter-spacing: 0.04em; text-transform: uppercase; color: var(--t-ink); margin-top: 2.5cqw; }
.blog-thumb--E .t-labels span { flex: 1; opacity: 0.55; }
.blog-thumb--E .t-labels span:last-child { opacity: 1; color: var(--t-gold-2); font-weight: 500; }
.blog-thumb--E .t-caption { font-family: var(--font-display); font-weight: 700; font-size: 4.8cqw; line-height: 1.15; color: var(--t-ink); margin-top: 3.5cqw; }

/* F. Company and events */
.blog-thumb--F .blog-thumb-in { display: flex; flex-direction: column; justify-content: center; padding: 8cqw 7cqw; }
.blog-thumb--F .t-kicker { font-family: var(--font-mono); font-size: 2.9cqw; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-ink); font-weight: 500; }
.blog-thumb--F .t-head { font-family: var(--font-display); font-weight: 700; font-size: 7.6cqw; line-height: 1.02; letter-spacing: -0.02em; color: var(--t-ink); margin-top: 3cqw; }
.blog-thumb--F .t-date { font-family: var(--font-mono); font-size: 2.9cqw; letter-spacing: 0.06em; color: rgba(28,25,23,.72); margin-top: 3cqw; }

/* ── Reveal on entry (scoped to .js-reveal so nothing hides without JS) ── */
.js-reveal [data-reveal] { opacity: 0; }
.js-reveal [data-reveal][data-in] { animation: om-rise .95s cubic-bezier(.16,1,.3,1) both; }
@keyframes om-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* Whole cards and rows rise too, a touch slower than their contents so the graphic assembles inside a settling frame. */
.js-reveal [data-reveal="card"][data-in] { animation: om-rise 1.1s cubic-bezier(.16,1,.3,1) both; }
.js-reveal [data-reveal="num"][data-in] { animation-name: om-num; animation-duration: 1.1s; }
@keyframes om-num { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: none; } }
.js-reveal [data-reveal="panel"][data-in] { animation-name: om-panel; }
@keyframes om-panel { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.js-reveal [data-reveal="bar"] { opacity: 1; transform: scaleY(0); transform-origin: 50% 100%; }
.js-reveal [data-reveal="bar"][data-in] { animation: om-bar 1s cubic-bezier(.16,1,.3,1) both; }
@keyframes om-bar { from { opacity: 1; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ── Post page ─────────────────────────────────────────────────────── */
.blog-post-header h1 { max-width: 24ch; }
.blog-standfirst { font-family: var(--font-sans); font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2, var(--ink)); max-width: 62ch; margin: 18px 0 0; }
.blog-hero-figure { margin: 30px 0 34px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.blog-hero-figure img { display: block; width: 100%; height: auto; }
.blog-hero-figure figcaption { padding: 10px 16px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); }
.blog-carousel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 28px 0; }
.blog-carousel figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.blog-carousel img { display: block; width: 100%; height: auto; }
.blog-carousel figcaption { padding: 8px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); }
.blog-download { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--gold); text-decoration: none; }
.blog-download:hover { text-decoration: underline; }
.blog-takeaways { margin: 30px 0; padding: 22px 26px; background: var(--gold-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.blog-takeaways h2 { margin: 0 0 10px !important; font-size: 15px !important; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-mono) !important; color: var(--gold); font-weight: 600 !important; }
.blog-takeaways ul { margin: 0; padding-left: 20px; }
.blog-takeaways li { margin: 6px 0; }
.blog-author { display: flex; gap: 16px; align-items: flex-start; margin-top: 40px; padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.blog-author .blog-avatar { width: 44px; height: 44px; }
.blog-author-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); margin: 0 0 2px; }
.blog-author-role { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin: 0 0 8px; letter-spacing: 0.04em; }
.blog-author p { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
.blog-author a { color: var(--gold); }
.blog-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; }
.blog-pager a { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); text-decoration: none; color: inherit; transition: border-color .3s var(--ease); }
.blog-pager a:hover { border-color: var(--gold); }
.blog-pager .blog-pager-label { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.blog-pager .blog-pager-title { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.blog-pager a.next { text-align: right; }

/* ── Homepage teaser strip ─────────────────────────────────────────── */
.blog-latest { padding: var(--section-pad) 0; background: var(--bg-2, #f3f1ec); border-top: 1px solid var(--line); }
.blog-latest .blog-latest-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.blog-latest .blog-latest-head .section-title { margin-bottom: 6px; }
.blog-latest .blog-latest-all { font-family: var(--font-sans); font-weight: 600; font-size: 14.5px; color: var(--gold); text-decoration: none; white-space: nowrap; }
.blog-latest .blog-latest-all:hover { color: var(--gold-2, #936c00); }

@media (max-width: 720px) {
  .blog-hero { padding-top: 48px; }
  .blog-featured-body { padding: 22px 24px; border-left: 0; border-top: 1px solid var(--line); }
  .blog-carousel { grid-template-columns: 1fr; }
  .blog-pager { grid-template-columns: 1fr; }
  .blog-pager a.next { text-align: left; }
  .blog-row { grid-template-columns: 72px 1fr; }
  .blog-row .blog-thumb { width: 72px; }
  .blog-row .blog-date { grid-column: 2; text-align: left; }
}