` = full-ink emphasis. The h1 is chrome (.about-title), full page-column width. */ .about-opening .container { padding-block: 76px 0; } /* Reading measure: 60ch on the container (as the old .prose), so `ch` resolves against the inherited body font, not the larger serif paragraph. */ .about-body { max-width: 60ch; } .about-title { /* Gap below mirrors the landing hero's h1 -> lead rhythm. */ margin: 20px 0 28px; } .about-body h2 { font-size: clamp(23px, 3.2vw, 30px); /* Top margin recreates the inter-section gap (was .about-section padding). */ margin: 36px 0 22px; } /* Serif body paragraphs. Default rhythm is 20px between paragraphs. The lead is the first *direct-child* paragraph — `>` so it doesn't also match the
that
MDX nests inside an (block content); the nested , if any,
inherits and drops its own margin. */
.about-body .emph {
font-family: var(--serif);
font-weight: 400;
font-size: 18px;
line-height: 1.62;
color: var(--ink);
margin: 20px 0 0;
}
.about-body .emph--gap {
margin-top: 24px;
}
.about-body .emph p {
margin: 0;
color: var(--ink);
}
/* License lead-in terms are **bold** in MDX (.about-body strong, medium ink).
License identifiers use the ` stays free for actual code. */
.about-body strong {
font-weight: 500;
color: var(--ink);
}
.license-code {
font-family: var(--mono);
font-size: 0.8em;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--brand);
}
/* Seal sits after the letter, in the opening container. */
.about-opening .seal {
margin: 48px 0 60px;
}
/* ---------- Footer ---------- */
.site-footer {
margin-top: auto;
}
.site-footer .container {
display: flex;
flex-wrap: wrap;
gap: 18px 40px;
align-items: baseline;
justify-content: space-between;
padding-block: 34px 44px;
}
/* Left cluster: RSS · github.com/freeasinbird↗ */
.footer-feed {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.footer-feed__link {
gap: 6px;
white-space: nowrap;
}
.footer-feed__link:hover {
color: var(--brand);
}
.footer-feed__sep {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-3);
}
.copyright {
font-family: var(--mono);
font-size: 11.5px;
color: var(--ink-3);
letter-spacing: 0.02em;
white-space: nowrap;
}
/* ---------- Page content column ---------- */
/* Header keeps --container (760px); page/footer content narrows to 720px. */
.container--content {
max-width: var(--content);
}
/* ---------- Blog index ---------- */
.blog-head .container {
padding-block: 76px 0;
}
.blog-eyebrow-row {
display: flex;
align-items: center;
gap: 9px;
}
.blog-feed-glyph {
color: var(--ink-3);
}
.blog-feed-glyph:hover {
color: var(--brand);
}
.blog-title {
margin: 20px 0 0;
}
.blog-list-section .container {
padding-block: 52px 8px;
}
/* Quiet empty state shown until the first post lands. */
.blog-empty {
line-height: 1.62;
margin: 0;
padding: 30px 0;
border-top: 1px solid var(--line);
}
/* Reverse-chronological post list (used once posts exist). */
.post-list__item {
padding: 30px 0;
border-top: 1px solid var(--line);
}
.post-list__date {
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.04em;
color: var(--ink-3);
margin: 0 0 12px;
}
.post-list__link {
display: inline-block;
text-decoration: none;
}
.post-list__title {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(22px, 3vw, 27px);
line-height: 1.18;
letter-spacing: -0.014em;
color: var(--ink);
margin: 0;
transition: color 0.15s;
}
.post-list__link:hover .post-list__title {
color: var(--brand);
}
.post-list__dek {
font-family: var(--serif);
font-weight: 400;
font-size: 17px;
line-height: 1.58;
color: var(--ink-2);
margin: 11px 0 0;
max-width: 62ch;
}
.blog-subscribe {
padding: 24px 0 4px;
border-top: 1px solid var(--line);
}
.blog-subscribe__link {
gap: 7px;
}
.blog-subscribe__link:hover {
color: var(--brand);
}
/* ---------- Blog post ---------- */
.post .container {
padding-block: 76px 0;
}
.post-meta {
display: flex;
align-items: center;
gap: 11px;
flex-wrap: wrap;
}
.post-meta a {
color: var(--ink-2);
text-decoration: none;
transition: color 0.15s;
}
.post-meta a:hover {
color: var(--brand);
}
.post-title {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(31px, 4.8vw, 46px);
line-height: 1.09;
letter-spacing: -0.02em;
color: var(--ink);
margin: 20px 0 0;
}
.post-body {
margin-top: 40px;
}
/* Scoped to .post-body so it outranks the generic .post-body p rule below
(same pattern as .post-body p.post-body__emphatic); otherwise the lead
loses its full-ink colour, larger size, and zero top margin. */
.post-body p.post-lead {
line-height: 1.6;
}
.post-body p {
line-height: 1.66;
margin: 20px 0 0;
}
/* A paragraph the author wants to land in full-strength ink. */
.post-body p.post-body__emphatic {
color: var(--ink);
}
.post-body h2 {
font-size: clamp(22px, 3.1vw, 28px);
line-height: 1.14;
margin: 36px 0 18px;
}
/* Body links read in full-strength ink (AA on the paper bg; brand red at
4.1:1 misses AA for normal text) with the accent reserved for hover, per
the "red appears in link hover — nowhere else" invariant. The underline
carries the affordance, not colour. */
.post-body a {
color: var(--ink);
text-decoration: underline;
transition: color 0.15s;
}
.post-body a:hover {
color: var(--brand);
}
.post-body sup {
font-family: var(--mono);
font-size: 0.62em;
font-weight: 500;
line-height: 0;
}
.post-body sup a {
text-decoration: none;
}
/* Inline code chip. */
.post-body code {
font-family: var(--mono);
font-size: 0.82em;
background: var(--code-bg);
border: 1px solid var(--line-2);
border-radius: 3px;
padding: 1px 6px;
color: var(--ink);
}
/* Fenced code block. Markup is plain spans so a highlighter can layer later. */
.post-figure {
margin: 32px 0 0;
}
.figure-label {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 10px;
}
.post-body pre {
margin: 0;
background: var(--code-bg);
border: 1px solid var(--line-2);
border-radius: 3px;
padding: 18px 20px;
overflow: auto;
}
.post-body pre code {
font-family: var(--mono);
font-size: 13px;
line-height: 1.7;
color: var(--ink);
background: none;
border: 0;
border-radius: 0;
padding: 0;
}
/* Code ships two AA-safe tones only (code in --ink, secondary/comment in
--ink-2). Coloured syntax highlighting — with an AA-safe palette — is
deferred until real highlighting lands; brand red can't clear AA as text
on the light code panel. */
.code__dim {
color: var(--ink-2);
}
/* Pull quote. */
.post-body blockquote {
margin: 42px 0;
padding: 4px 0 4px 26px;
border-left: 2px solid var(--brand);
}
.post-body blockquote p {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(22px, 3vw, 27px);
line-height: 1.32;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0;
}
/* Images: single, or a 2-up before/after grid that stacks on narrow screens. */
.post-figure img {
display: block;
max-width: 100%;
border: 1px solid var(--line-2);
border-radius: 4px;
}
.figure-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.post-figure figcaption {
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.02em;
color: var(--ink-3);
margin-top: 10px;
}
/* Footnotes. */
.footnotes {
margin-top: 34px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.footnotes ol {
list-style: none;
counter-reset: fn;
margin: 0;
padding: 0;
}
.footnotes li {
display: flex;
gap: 12px;
margin: 14px 0 0;
}
.footnotes li:first-child {
margin-top: 0;
}
.footnotes__num {
font-family: var(--mono);
font-size: 11.5px;
font-weight: 500;
/* Muted ink, not brand red: the red at ~4.1:1 misses AA, and the marker
is readable text. `.license-code` (license IDs) stays the one accepted
below-AA red. */
color: var(--ink-3);
line-height: 1.7;
flex: 0 0 auto;
}
.footnotes p {
font-family: var(--sans);
font-size: 14px;
line-height: 1.66;
color: var(--ink-2);
margin: 0;
}
.footnotes p a {
color: var(--ink-3);
text-decoration: none;
transition: color 0.15s;
}
.footnotes p a:hover {
color: var(--brand);
}
/* "Liked this? Subscribe via RSS" line. */
.post-subscribe {
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.02em;
color: var(--ink-2);
margin: 36px 0 0;
line-height: 1.6;
}
.post-subscribe a {
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--line-2);
padding-bottom: 1px;
transition:
color 0.15s,
border-color 0.15s;
}
.post-subscribe a:hover {
color: var(--brand);
border-color: var(--brand);
}
.post-seal {
display: block;
margin: 46px 0 60px;
}
/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
* {
transition: none !important;
}
}