/*
 * Prose: the reading experience.
 * ---------------------------------------------------------------------------
 * Scoped under .prose so it only ever applies to rendered article bodies and
 * can never leak into navigation or listing pages. Everything here is driven
 * by tokens, so an article that overrides --font-prose or --measure gets a
 * coherent result rather than a broken one.
 *
 * The vertical rhythm uses the lobotomised-owl selector rather than margins on
 * individual elements. That way an MDX author can drop any component into the
 * flow and it spaces itself correctly without knowing anything about the
 * system.
 */

.prose {
	font-family: var(--font-prose);
	font-size: var(--step-1);
	line-height: var(--leading-prose);
	color: var(--ink);
	/* Optical sizing is what makes Newsreader look right at both 17px and 56px.
	 * Without it, display sizes read as bloated body text. */
	font-optical-sizing: auto;
	/* Old-style figures in running text, lining figures in headings — set on
	 * the headings below. Old-style numerals sit on the baseline like
	 * lowercase letters and stop dates from shouting mid-sentence. */
	font-variant-numeric: oldstyle-nums proportional-nums;
	text-wrap: pretty;
}

/* Vertical rhythm. */
.prose > * + * {
	margin-block-start: var(--space-m);
}

/* -- Headings -------------------------------------------------------------- */

.prose h2,
.prose h3,
.prose h4 {
	font-family: var(--font-prose);
	font-variant-numeric: lining-nums proportional-nums;
	line-height: var(--leading-tight);
	font-weight: 600;
	text-wrap: balance;
	/* Slight negative tracking at display sizes: large type needs less
	 * letterspacing than the metrics give it. */
	letter-spacing: -0.011em;
}

.prose h2 {
	font-size: var(--step-3);
	margin-block-start: var(--space-xl);
}

.prose h3 {
	font-size: var(--step-2);
	margin-block-start: var(--space-l);
}

.prose h4 {
	font-size: var(--step-1);
	margin-block-start: var(--space-l);
}

/* A heading immediately after another heading should not get the big gap. */
.prose :is(h2, h3, h4) + :is(h2, h3, h4) {
	margin-block-start: var(--space-s);
}

/* Anchor affordance: the link is always in the DOM for deep-linking, but only
 * shows on hover or keyboard focus so it never intrudes on the reading. */
.prose :is(h2, h3, h4) > a[href^='#'] {
	color: inherit;
	text-decoration: none;
}

.prose :is(h2, h3, h4) > a[href^='#']::after {
	content: '#';
	margin-inline-start: 0.35em;
	color: var(--ink-faint);
	font-size: 0.8em;
	opacity: 0;
	transition: opacity var(--duration) var(--ease);
}

.prose :is(h2, h3, h4):hover > a[href^='#']::after,
.prose :is(h2, h3, h4) > a[href^='#']:focus-visible::after {
	opacity: 1;
}

/* -- Body ------------------------------------------------------------------ */

.prose p {
	/* Widows and orphans are honoured by Safari and increasingly elsewhere;
	 * where unsupported this is simply ignored. */
	orphans: 2;
	widows: 2;
}

/* An opening paragraph gets no indent; subsequent ones in a run may, if the
 * article opts in with .prose--indented. Default is spaced paragraphs. */
.prose--indented p + p {
	margin-block-start: 0;
	text-indent: 1.4em;
}

.prose strong {
	font-weight: 650;
}

.prose em {
	font-style: italic;
}

.prose a {
	/* In running text the underline carries the affordance, so the colour can
	 * stay close to the ink and the paragraph keeps its texture. */
	color: var(--ink);
	text-decoration-line: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.16em;
}

.prose a:hover {
	text-decoration-color: var(--ink);
	background: var(--accent-quiet);
}

/* -- Lists ----------------------------------------------------------------- */

.prose :is(ul, ol) {
	padding-inline-start: 1.4em;
}

.prose li + li {
	margin-block-start: var(--space-2xs);
}

.prose li::marker {
	color: var(--ink-faint);
}

/* -- Quotes ---------------------------------------------------------------- */

.prose blockquote {
	border-inline-start: 2px solid var(--rule-strong);
	padding-inline-start: var(--space-m);
	color: var(--ink-muted);
	font-style: italic;
}

.prose blockquote p + p {
	margin-block-start: var(--space-s);
}

.prose blockquote cite {
	display: block;
	margin-block-start: var(--space-2xs);
	font-family: var(--font-ui);
	font-style: normal;
	font-size: var(--step--1);
	color: var(--ink-faint);
}

/* -- Code ------------------------------------------------------------------ */

.prose :not(pre) > code {
	font-family: var(--font-mono);
	font-size: 0.86em;
	background: var(--surface-sunk);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: 0.1em 0.32em;
	/* Long identifiers should wrap rather than force a horizontal scrollbar on
	 * the whole page. */
	overflow-wrap: break-word;
}

.prose pre {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	line-height: 1.55;
	background: var(--surface-sunk);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: var(--space-s);
	/* Code blocks scroll themselves; the page never scrolls sideways. */
	overflow-x: auto;
	/* Slightly wider than the measure — code lines are longer than prose. */
	max-inline-size: var(--measure-wide);
}

.prose pre code {
	background: none;
	border: 0;
	padding: 0;
	font-size: inherit;
}

/* -- Figures --------------------------------------------------------------- */

.prose figure {
	margin-block: var(--space-l);
}

.prose figcaption {
	margin-block-start: var(--space-2xs);
	font-family: var(--font-ui);
	font-size: var(--step--1);
	line-height: var(--leading-prose);
	color: var(--ink-muted);
	text-wrap: pretty;
	/* Captions align to the text column even when the image is wide. */
	max-inline-size: var(--measure);
}

/* -- Tables ---------------------------------------------------------------- */

/* Tables get their own scroll container so a wide one cannot break the page. */
.prose .table-scroll {
	overflow-x: auto;
	max-inline-size: var(--measure-wide);
}

.prose table {
	border-collapse: collapse;
	font-family: var(--font-ui);
	font-size: var(--step--1);
	inline-size: 100%;
}

.prose :is(th, td) {
	text-align: start;
	padding: var(--space-2xs) var(--space-s) var(--space-2xs) 0;
	border-block-end: 1px solid var(--rule);
	vertical-align: baseline;
}

.prose th {
	font-weight: 600;
	color: var(--ink-muted);
	font-size: var(--step--2);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* -- Footnotes ------------------------------------------------------------- */

.prose .footnotes {
	margin-block-start: var(--space-2xl);
	padding-block-start: var(--space-m);
	border-block-start: 1px solid var(--rule);
	font-size: var(--step-0);
	color: var(--ink-muted);
}

.prose sup a {
	text-decoration: none;
	font-variant-numeric: lining-nums;
}