/* ════════════════════════════════════════════════════════════════════════
   REVLO — the Blog (index + posts), 2026-10-22. Long reading in mono is
   tiring, so the prose is the phone's own sans; meta and labels stay in
   Space Mono and titles in the screenshots' Archivo — the app's voice frames
   the page, the reading face carries the words.
   ════════════════════════════════════════════════════════════════════════ */

/* 62 nav + 48 = 110 to the first line, the same as the document pages */
.blog main { padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 48px); padding-bottom: clamp(72px, 10vw, 128px); }

/* ── Index ─────────────────────────────────────────────────────────────── */
/* The Blog page sits in the same 720px reading column as a post, About and
   Creators (Danny 10-22), so the list reads as one stack of posts. */
.blog-index { max-width: calc(720px + 2 * var(--gutter)); }
.blog-index .posts { grid-template-columns: minmax(0, 1fr); }
.blog-index__head { margin-bottom: clamp(36px, 6vw, 64px); container-type: inline-size; }
/* "garage." / "From the" are ≤ 5.6em wide (measured 10-22) → 100cqw / 5.8. */
/* longest line "Notes from" = 7.05 em (measured 10-22) → 100 / 7.05 = 14.2cqw fills the column */
.blog-index .h1 { font-size: min(80px, 14cqw); margin: 14px 0 20px; }
.blog-index .h1 > span { white-space: nowrap; }

/* ── Post ──────────────────────────────────────────────────────────────── */
/* the reading column is the document pages' 720px, plus the gutters */
.article { max-width: calc(720px + 2 * var(--gutter)); }
.draft-flag {
  margin-bottom: 28px; padding: 12px 16px; border-radius: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--r-legendary); background: var(--carved); box-shadow: var(--carved-shade);
}
.article__head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px; }
.back { align-self: flex-start; transition: color 0.18s var(--ease); }
.back:hover { color: var(--ink); }
.article__meta { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
/* Type pass (Danny 10-22, option A: "too many weights and sizes bunched up"): the title keeps
   the brand face but stops at 44px so a long headline sits in three lines, and the post page
   shows no dek: the opening paragraph is the lead (the description stays in meta and on cards). */
.article__title { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; }
.article__cover { margin: 0 0 40px; border-radius: 20px; overflow: hidden; box-shadow: var(--stand), 0 30px 40px -18px rgba(0, 0, 0, 0.85); }
.article__cover img { width: 100%; height: auto; }

.prose { font-family: var(--read); font-size: 17px; line-height: 1.75; color: #D9DCE0; }
.prose > * + * { margin-top: 1.15em; }
.prose > p:first-child { font-size: clamp(18px, 1.8vw, 20px); line-height: 1.55; color: #E8EAED; }
.prose h2 {
  font-family: var(--display); font-weight: 900; font-stretch: 125%; letter-spacing: -0.01em;
  font-size: clamp(20px, 2.1vw, 25px); line-height: 1.2; color: #fff; text-shadow: var(--emboss);
  margin-top: 2.6em;
}
.prose h2 + * { margin-top: 0.9em; }
/* FAQ questions read as questions: the reading face, not spaced capitals. */
.prose h3 { font-family: var(--read); font-size: 18px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.4; color: #fff; margin-top: 1.8em; }
.prose h3 + p { margin-top: 0.45em; }
/* One weight for reading: no bold inside sentences; list labels and tables keep it. */
.prose b { color: #fff; }
.prose p b { font-weight: inherit; color: inherit; }
/* Sources close the post quietly: smaller and muted, not a wall of white underlines. */
.prose #sources ~ ul { font-size: 14px; line-height: 1.6; color: var(--muted); }
.prose #sources ~ ul a { color: var(--titanium); }
.prose a { color: #fff; text-decoration: underline; text-decoration-color: var(--titanium-dim); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: #fff; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--titanium-dim); }
.prose blockquote { padding: 18px 22px; border-radius: 16px; background: var(--carved); box-shadow: var(--carved-shade); color: var(--titanium); }
.prose hr { border: 0; height: 1px; background: var(--seam); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); margin: 2.4em 0; }
.prose figure { margin: 2em 0; }
.prose figure img { width: 100%; height: auto; border-radius: 16px; }
.prose figcaption { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.prose code { font-family: var(--mono); font-size: 0.88em; padding: 1px 6px; border-radius: 6px; background: var(--carved); }
/* Tables (spec comparisons): the carved plate of the blockquote; a wide table
   scrolls inside its plate, never the page, at phone width. */
.prose .table-wrap { overflow-x: auto; border-radius: 16px; background: var(--carved); box-shadow: var(--carved-shade); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.prose th, .prose td { padding: 12px 16px; text-align: left; vertical-align: top; }
.prose th { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.prose tbody tr { border-top: 1px solid var(--seam); }
.prose th.c, .prose td.c { text-align: center; }
.prose th.r, .prose td.r { text-align: right; font-variant-numeric: tabular-nums; }
/* A table wider than its column (measured in the page, not guessed from a column count)
   stacks: one card per row, the first cell as its title, each other cell as label · value. */
.prose .table-wrap.stacked thead { display: none; }
.prose .table-wrap.stacked table, .prose .table-wrap.stacked tbody, .prose .table-wrap.stacked tr { display: block; }
.prose .table-wrap.stacked tr { padding: 14px 16px; }
.prose .table-wrap.stacked td { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 3px 0; text-align: right; }
.prose .table-wrap.stacked td::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.prose .table-wrap.stacked td:first-child { display: block; padding: 0 0 6px; text-align: left; font-weight: 600; color: #fff; }
.prose .table-wrap.stacked td:first-child::before { content: none; }
@media (max-width: 520px) { .prose table { font-size: 14px; } .prose th, .prose td { padding: 10px 10px; } .prose th { white-space: normal; } .prose th:first-child, .prose td:first-child { padding-left: 14px; } .prose th:last-child, .prose td:last-child { padding-right: 14px; } }


/* Two halves that never split, so a narrow phone breaks the line between
   them ("kind · date" / "read · author"), never leaving one word alone. */
.article__meta > span { white-space: nowrap; }