/* blog — post-page + index card styling (footnote refs, draft banner, byline chip, keep-reading). Injected after the v3 design layer so it wins; see build-blog.ts blogStyle(). */
/* In-page anchor jumps — the footnote [1] refs and their ↩ back-arrows —
must clear the 64px sticky nav, or the target lands hidden under it.
Offset every anchor target below the header (matches the site's 96px
.v3-pillar scroll-margin). ── */
html { scroll-padding-top: 96px; }
.blog-wrap { max-width: var(--w-read); margin: 0 auto; padding: 56px 20px 96px; }
/* The v3-reset.css base 'p { padding-bottom: 2rem }' wrecks the blog's
vertical rhythm (lede, meta, excerpts, prose all over-spaced). Zero it
inside the blog; every gap below is controlled with margins. */
.blog-wrap p { padding-bottom: 0; }
/* ── Index header — matches the homepage band title (.v3-band__title). ── */
.blog-wrap > h1 { color: var(--color-ink); font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-h2); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0 0 8px; padding: 0; text-wrap: balance; /* wide header → balance is safe; card titles stay on text-wrap: pretty (narrow columns) to avoid the short-3-line stacking */ }
.blog-wrap .v3-lede { margin: 0; }
/* Index header sits airier than the article pages — a lot more space above
the title plus breathing room around the plain-language lede set the
Learn landing apart from the rest of the site. (Index only; the shared
.blog-wrap keeps its tighter spacing on post pages.) */
.blog-wrap--index { padding-top: 112px; }
.blog-wrap--index > h1 { margin-bottom: 24px; }
.blog-wrap--index .blog-list { margin-top: 64px; }
/* ── Post page: big article title ── */
.blog-article h1 { color: var(--color-ink); font-family: var(--font-display); font-weight: 300; line-height: 1.1; font-size: clamp(2.1rem, 5.5vw, 3.2rem); margin: 0 0 8px; padding: 0; text-align: left; text-wrap: pretty; /* pretty (not balance): greedy first line keeps phrases like "(and can't)" intact and fills the width; balance evened the two lines but split parentheticals into stubby half-lines. pretty still drops a lone last-line widow. */ }
.blog-hero { width: 100%; border-radius: var(--radius); margin: 0 0 28px; display: block; }
.blog-meta { color: var(--color-ink-subtle); font-family: var(--font-sans); font-size: 0.9em; margin: 0; }
/* Post meta as a white rounded chip — same surface as the "Keep reading"
cards (white bg, thin border, soft offset shadow). inline-block so it
hugs the date + author. Extra top margin opens up the gap from the title. */
.blog-article .blog-meta {
display: inline-flex; align-items: center; gap: 0.6em; margin: 26px 0 40px; padding: 9px 16px;
background: var(--color-bg-card); border: 1px solid var(--color-border);
border-radius: var(--radius); box-shadow: -6px 5px 0 rgba(150,168,190,0.22);
}
/* ── Draft markers — pill on the index card; one amber INTERNAL card on the
post page (status badge + why-it-exists brief, so it's unmistakably
preview-only). Only on dev/preview builds (prod strips draft posts). ── */
/* One internal-amber pill (amber = preview-only), shared by the index [DRAFT]
badge and the post-card status chips. Its deeper foreground keeps the
small uppercase text above AA on the warning-soft fill. */
.blog-draft-badge, .blog-status-chip { display: inline-block; font-family: var(--font-sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #7a5113; background: var(--color-warning-soft); border: 1px solid #7a5113; border-radius: 999px; padding: 2px 8px; line-height: 1.4; vertical-align: middle; } /* deep amber = 5.76:1 on warning-soft; badge→date spacing is the .v3-featured__meta flex gap */
/* The amber card wraps the badge line + the hypothesis/audience/goal brief. */
.blog-draft-card { margin: 0 0 28px; padding: 16px 18px; background: #fdf6e8; border: 1px solid #f0cf94; border-radius: var(--radius); font-family: var(--font-sans); }
/* The DRAFT head and the status line are the same row: a pill + small meta text.
One rule, design-system tokens (--text-sm / --color-ink-subtle), no magic px/hex. */
.blog-draft-card__head, .blog-draft-card__status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--color-ink-subtle); }
.blog-draft-card__status { margin-top: 8px; } /* sits just under the head */
/* Brief — why this post exists. Sits below the badge line, divided by a hairline. */
.blog-draft-brief { margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid #f0cf94; }
.blog-draft-brief dt { font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.68rem; color: #8a5a00; margin: 14px 0 2px; }
.blog-draft-brief dt:first-child { margin-top: 0; }
.blog-draft-brief dd { margin: 0; } /* .v3-body-sm role owns size/weight/line-height/color */
.blog-draft-brief dd.missing { color: #b42318; font-style: italic; }
/* Lab notebook — the essay-loop working fields (sources / arc / open questions). */
.blog-lab { margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0cf94; }
.blog-lab-list { margin: 0; padding-left: 1.2em; }
.blog-lab-list li { margin: 0 0 5px; }
.blog-lab-sources { margin: 0; padding-left: 1.2em; }
/* Status chip reuses the [DRAFT]-badge rule; the rest of the row is the shared
.blog-draft-card__status text style above. No status-specific styling needed. */
/* ── Index list — a stack of the "More than teeth" featured cards
(.v3-tcard--featured: tag · serif title · meta · excerpt · "Read the post",
soft navy shadow), matching the homepage featured post. ── */
.blog-list { list-style: none; padding: 0; margin: 44px 0 0; display: flex; flex-direction: column; gap: 28px; }
.blog-list li { margin: 0; padding: 0; }
/* ── Citations — [1]-style footnote refs + a real References list.
marked-footnote emits: inline 1,
and a