/* Brandon Baker, blog posts. Reading layer on top of site/site.css.
   The bar, footer, signature, section-title type, rules and colours are the
   home page's own; this file adds the reading column, margin notes, pull
   quotes, code, citations and the sources list. Tokens only and no shadows.
   A post uses no red: on this site red marks the signature in the home
   page hero.

   Layout. One column of text, 38.5rem wide (about 68 characters of body
   type), set on the home page's left edge. From 1120 up a second column
   opens to its right, where the dek, sidenotes and pull quotes sit beside
   the text they belong to. Below 1120 they fall back into the text column,
   in the order they were written. */

.post {
  --measure: 38.5rem;
  --body: clamp(1.0625rem, 0.25vw + 1rem, 1.1875rem);
  --flow: var(--body);
  --cols: minmax(0, var(--measure)) minmax(0, 1fr);
  --gutter: clamp(48px, 6vw, 96px);
  --code: 0.8125rem;
  padding-block: clamp(24px, 5vw, 72px) clamp(56px, 7vw, 104px);
}
@media (min-width: 600px) { .post { --code: 0.875rem; } }
@media (min-width: 1120px) { .post { --code: 0.9375rem; } }

/* -- Head ------------------------------------------------------------------ */
/* A home page section head: an ink rule, the title in the section-title
   type, and the dek with the date in the right-hand column. */
.post-head { position: relative; padding-top: var(--space-2xl); }
.post-head::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: var(--ink); transform-origin: left; }
.post-title { max-width: 14em; }
.post-intro { margin-top: var(--space-lg); }
.post-dek { margin-top: 0; }
.post-date {
  margin-top: var(--space-md);
  font-size: var(--fs-label-md); line-height: 1.4; font-weight: var(--fw-medium); letter-spacing: 0.01em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* -- Text ------------------------------------------------------------------ */
.prose { margin-top: clamp(40px, 6vw, 88px); max-width: var(--measure); }
.prose p, .prose li { font-size: var(--body); line-height: 1.65; color: var(--ink-1); text-wrap: pretty; }
.prose strong { font-weight: var(--fw-semibold); color: var(--ink); }
.prose em { font-synthesis: style; }

/* Section headings: the home page's sub-title type. */
.prose h2 {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(1.5rem, 1.4vw + 1rem, 2.125rem); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink); text-wrap: balance;
}
.prose h3 { font-size: var(--fs-heading-md); line-height: 1.3; font-weight: var(--fw-semibold); color: var(--ink); text-wrap: balance; }

/* Rhythm. One blank line of body type between blocks, more around code,
   rules and asides, and the most above a heading. The heading rules come
   last and name an element, so they win over the block rules. */
.prose > * + * { margin-top: var(--flow); }
.prose > :where(.code) + *, .prose > * + :where(.code) { margin-top: calc(var(--flow) * 1.4); }
.prose > :where(hr) + *, .prose > * + :where(hr) { margin-top: calc(var(--flow) * 2); }
@media (max-width: 1119.98px) { .prose > :where(.pair, .side) + * { margin-top: calc(var(--flow) * 1.6); } }
.prose > * + h2 { margin-top: calc(var(--flow) * 2.75); }
.prose > * + h3 { margin-top: calc(var(--flow) * 2); }
.prose > h2 + *, .prose > h3 + * { margin-top: calc(var(--flow) * 0.75); }

/* Links: underlined ink, as on the home page. */
.prose a, .post-end a {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
  text-decoration-color: var(--ink-3); border-radius: 2px;
}
.prose a:hover, .post-end a:hover { text-decoration-color: var(--ink); }
.prose a:focus-visible, .post-end a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Lists use the short dash from the home page's focus areas. */
.prose ul, .prose ol { display: grid; gap: calc(var(--flow) * 0.5); }
.prose li { position: relative; padding-inline-start: 1.5em; }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.75em; height: 1.5px; background: var(--ink-3); }
.prose ol { counter-reset: item; }
.prose ol > li { counter-increment: item; }
.prose ol > li::before { content: counter(item) "."; position: absolute; left: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* A plain quotation, when a post has one. */
.prose blockquote { padding-inline-start: 1.25em; border-inline-start: 2px solid var(--rule-strong); }
.prose blockquote p { color: var(--ink-2); }
.prose blockquote > * + * { margin-top: var(--flow); }

.prose hr { border: 0; border-top: 1px solid var(--rule); }

/* An image (blog/media.mjs) shows at its own size or smaller, never scaled
   up, and short enough to see whole. The build writes its width and height
   and --w (CSS width) and --r (width over height), so nothing moves while it
   loads; the surface tier holds its place. A dark-theme copy, when there is
   one, swaps in with the theme. */
.prose .shot { --cap: 82svh; max-width: min(var(--w), calc(var(--cap) * var(--r))); }
.prose .shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--tier-2); }
[data-scheme="dark"] .shot .for-light, [data-scheme="light"] .shot .for-dark { display: none; }
.prose figcaption { margin-top: var(--space-sm); font-size: var(--fs-body-sm); line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }

/* -- Code ------------------------------------------------------------------ */
/* Inline: a quiet tier behind the mono face. Long names may break at a dot,
   slash or bracket (the build marks those), and anywhere as a last resort. */
.prose :not(pre) > code {
  font-family: var(--font-mono); font-size: 0.86em; padding: 0.08em 0.3em; border-radius: var(--radius-xs);
  background: var(--tier-2); color: var(--ink); overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
[data-scheme="dark"] .prose :not(pre) > code { background: var(--tier-3); }

/* Blocks: drawn like the decision-record sheet on the home page. On a phone
   a line keeps its shape and the block scrolls sideways, because breaking a
   long name in two makes code harder to read than a swipe does. From 600 up
   lines wrap at spaces instead, so a block never scrolls on a desktop; a
   wrapped line hangs two characters in from its own indent so it never
   reads as a new line, and its indent stays glued to its first word.
   Comments step back to meta grey; everything else stays in one ink. */
.code {
  margin: 0; padding: 16px 14px; background: var(--tier-1); border: 1px solid var(--rule); border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: var(--code); line-height: 1.6; color: var(--ink-1);
  white-space: pre; overflow-x: auto; overscroll-behavior-x: contain; tab-size: 2; font-variant-ligatures: none;
  scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
}
[data-scheme="dark"] .code { background: var(--tier-2); border-color: var(--ink-4); }
.code:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.code code { display: block; width: max-content; min-width: 100%; font: inherit; }
.code .ln { display: block; }
.code .ind { white-space: pre; }
.code .c { color: var(--ink-3); }
@media (min-width: 600px) {
  .code { padding: 18px 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .code code { width: auto; }
  .code .ln { padding-inline-start: calc((var(--in, 0) + 2) * 1ch); text-indent: calc((var(--in, 0) + 2) * -1ch); }
}

/* -- Pull quotes and sidenotes ------------------------------------------- */
/* A pull quote repeats a line from nearby, so screen readers skip it (the
   build marks it aria-hidden). It hangs from an ink rule, like the home
   page's section heads, in the display face at its regular weight so it
   never passes for a heading. In one column a second, lighter rule closes
   it off from the text that follows. */
.pull { border-top: 1px solid var(--ink); padding-top: var(--space-lg); }
.pull p {
  font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: clamp(1.375rem, 0.8vw + 1.1rem, 1.75rem); line-height: 1.22; letter-spacing: -0.015em;
  color: var(--ink); text-wrap: balance;
}
@media (max-width: 1119.98px) { .pull { border-bottom: 1px solid var(--rule); padding-bottom: var(--space-xl); } }
/* A sidenote is an aside to the text beside it: smaller, with its label
   set like a field name on the home page's record sheet. */
.note { border-top: 1px solid var(--rule-strong); padding-top: var(--space-md); }
.note p { font-size: var(--fs-body-md); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.note .note-label { margin-bottom: 2px; font-weight: var(--fw-semibold); color: var(--ink); }
.side { display: grid; gap: calc(var(--flow) * 1.5); align-content: start; }

/* In one column, an aside follows the text it belongs to. */
@media (max-width: 1119.98px) {
  .pair > .side { margin-top: calc(var(--flow) * 1.6); }
}

/* -- Citations -------------------------------------------------------------- */
/* A claim's source numbers sit raised and small in meta grey, so the eye
   reads past them; two in a row read "5,6". The brackets are in the page,
   visually hidden, so copied text keeps them. Each number links to its
   source, through a hit area of at least 24 by 28 that leaves the line
   height alone. The number the reader comes back to is lit for a moment
   (post.js), or for as long as it is the page's target. */
.cites {
  position: relative; top: -0.5em; vertical-align: baseline; margin-inline-start: 0.05em;
  font-size: 0.68em; line-height: 0; font-weight: var(--fw-medium); letter-spacing: 0.01em;
  font-variant-numeric: lining-nums; white-space: nowrap; color: var(--ink-3);
}
.cites .cite {
  position: relative; padding: 0.12em 0.2em; margin: -0.12em -0.2em; border-radius: 3px;
  color: var(--ink-3); text-decoration: none; scroll-margin-top: 30vh;
  transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-slow) var(--ease-standard);
}
.cites .cite::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 24px); height: 28px; transform: translate(-50%, -50%); }
.cites .cite + .cite::before { content: ","; display: inline-block; margin-inline-end: 0.06em; }
.cites a.cite:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.cites a.cite:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cites a.cite:target, .cites a.cite.is-back { color: var(--ink); background: var(--tier-2); transition-duration: 0ms; }
[data-scheme="dark"] .cites a.cite:target, [data-scheme="dark"] .cites a.cite.is-back { background: var(--tier-3); }

/* -- Sources ---------------------------------------------------------------- */
/* Closes the article like the note after it: a rule, a small heading, then
   one row per source, divided like the home page's writing list. A row is
   the number, the title (the link out, wrapping at slashes in a long path
   so nothing runs off a phone), and a way back to where it is cited. The
   row a citation lands on is lit until the reader moves on. */
.sources { margin-top: clamp(56px, 7vw, 96px); max-width: var(--measure); padding-top: var(--space-xl); border-top: 1px solid var(--rule); }
.sources h2 { font-size: var(--fs-heading-sm); line-height: 1.4; font-weight: var(--fw-semibold); color: var(--ink); }
.src-list { margin-top: var(--space-sm); counter-reset: src; }
.src-list > li {
  position: relative; isolation: isolate; counter-increment: src; scroll-margin-top: var(--space-2xl);
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) var(--tap-min); align-items: start;
}
.src-list > li + li { border-top: 1px solid var(--rule-faint); }
.src-list > li::before {
  content: counter(src); grid-column: 1; padding-block: 12px;
  font-size: var(--fs-body-md); line-height: 1.5; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.src-list > li::after {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--space-sm) * -1); border-radius: var(--radius-sm);
  transition: background-color var(--dur-mid) var(--ease-standard);
}
.src-link, .src-text {
  grid-column: 2; min-width: 0; padding-block: 12px;
  font-size: var(--fs-body-md); line-height: 1.5; color: var(--ink-1); overflow-wrap: anywhere; text-wrap: pretty;
}
.src-link, .src-text a {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
  text-decoration-color: var(--ink-3); border-radius: 2px;
}
.src-link { display: block; justify-self: start; }
.src-link:hover, .src-text a:hover { text-decoration-color: var(--ink); }
.src-link:focus-visible, .src-text a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.src-back {
  grid-column: 3; display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min);
  color: var(--ink-3); border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.src-back-icon { width: 18px; height: 18px; }
.src-back:hover { color: var(--ink); background: var(--tier-2); }
[data-scheme="dark"] .src-back:hover { background: var(--tier-3); }
.src-back:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.src-list > li:target::before { color: var(--ink); font-weight: var(--fw-semibold); }
.src-list > li:target::after { background: var(--tier-2); }
[data-scheme="dark"] .src-list > li:target::after { background: var(--tier-3); }
.src-list > li:target .src-back { color: var(--ink); }

/* -- Source preview (post.js) ------------------------------------------------ */
/* With a mouse, resting on a number shows its source in a small card above
   the line (below it when the bar is in the way). Clicking the card opens
   the source. A surface tier and a border, no shadow, like the home page's
   record sheet. */
.cite-card {
  position: absolute; z-index: 15; left: 0; top: 0; width: max-content; max-width: min(22rem, calc(100vw - 24px));
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-md);
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
  background: var(--tier-1); border: 1px solid var(--rule); border-radius: var(--radius-md);
  color: var(--ink); text-decoration: none;
}
.cite-card[hidden] { display: none; }
[data-scheme="dark"] .cite-card { background: var(--tier-2); border-color: var(--ink-4); }
.cite-card-n { grid-row: span 2; font-size: var(--fs-body-sm); line-height: 1.45; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cite-card-title {
  font-size: var(--fs-body-sm); line-height: 1.45; font-weight: var(--fw-medium); color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--ink-3);
}
.cite-card:hover .cite-card-title { text-decoration-color: var(--ink); }
.cite-card-host { grid-column: 2; margin-top: 2px; font-size: var(--fs-label-sm); line-height: 1.4; letter-spacing: 0.01em; color: var(--ink-3); }
.cite-card-host[hidden] { display: none; }
@keyframes card-in { from { opacity: 0; transform: translateY(var(--card-from, 4px)); } }
.cite-card[data-side="below"] { --card-from: -4px; }

/* -- Closing note and way back ------------------------------------------- */
.post-end { margin-top: clamp(56px, 7vw, 96px); max-width: var(--measure); padding-top: var(--space-xl); border-top: 1px solid var(--rule); }
.post-end h2 { font-size: var(--fs-heading-sm); line-height: 1.4; font-weight: var(--fw-semibold); color: var(--ink); }
.post-end p { margin-top: var(--space-sm); font-size: var(--fs-body-lg); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.post-end p:has(> a:only-child) { margin-top: var(--space-xs); }
.post-end p > a:only-child { display: inline-flex; align-items: center; min-height: var(--tap-min); font-weight: var(--fw-medium); }

.post-back { margin-top: clamp(32px, 4vw, 48px); }
.post-back a {
  display: inline-flex; align-items: center; gap: var(--space-sm); min-height: var(--tap-min); padding-inline-end: var(--space-xs);
  font-size: var(--fs-body-lg); line-height: 1.4; font-weight: var(--fw-medium); color: var(--ink); text-decoration: none; border-radius: var(--radius-xs);
}
.post-back a span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--ink-3); }
.post-back a:hover span { text-decoration-color: var(--ink); }
.post-back a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.post-back-icon { width: 20px; height: 20px; flex: none; color: var(--ink-3); transition: transform var(--dur-fast) var(--ease-standard); }
.post-back a:hover .post-back-icon { transform: translateX(-2px); }

/* -- Two columns ----------------------------------------------------------- */
@media (min-width: 1120px) {
  /* The header stays stacked: title, then dek, date and audio underneath (Baker, 2026-10-21). */
  .prose { max-width: none; display: grid; grid-template-columns: var(--cols); column-gap: var(--gutter); align-items: start; }
  .prose > * { grid-column: 1; }
  .prose > .side { grid-column: 2; }
  .pair { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: start; }
  .pair > :first-child { grid-column: 1; grid-row: 1; }
  .pair > .side { grid-column: 2; grid-row: 1; }
  /* Sit the rule level with the first line of the text beside it. */
  .pair > .side { padding-top: calc(var(--body) * 0.32); }
  .note p { font-size: var(--fs-body-lg); }
}

/* -- Motion ---------------------------------------------------------------- */
/* The one entrance on a post, in the home hero's vocabulary: the head rule
   draws in and the title rises. Reduced motion gets the finished page.
   "backwards" lets each element go back to its plain style once it lands,
   so the settled page is pixel for pixel the reduced-motion page. */
@media (prefers-reduced-motion: no-preference) {
  .write .post-head::before { animation: rule-in 900ms var(--ease) 60ms backwards; }
  .write .post-title { animation: rise 520ms var(--ease) 120ms backwards; }
  .write .post-intro { animation: rise 520ms var(--ease) 220ms backwards; }
  .cite-card:not([hidden]) { animation: card-in 150ms var(--ease) backwards; }
}
@media (prefers-reduced-motion: reduce) {
  .post-back-icon { transition: none; }
}