/* A rendered Markdown document: elements and positions, never classes. */

/* Here and not in base.css — only this page has code to set in it. */
@font-face {
	font-family: "Martian Mono";
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	font-display: swap;
	src: url("/fonts/martian-mono-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Martian Mono";
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	font-display: swap;
	src: url("/fonts/martian-mono-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--code: light-dark(oklch(93.4% 0.006 92), oklch(19.4% 0.003 107));
	--hairline: light-dark(rgb(0 0 0 / 9%), rgb(255 255 255 / 11%));
	--tok-key: light-dark(oklch(47% 0.12 286), oklch(77% 0.10 286));
	--tok-prop: light-dark(oklch(45% 0.09 237), oklch(75% 0.08 237));
	--tok-str: light-dark(oklch(45% 0.09 152), oklch(74% 0.09 152));
	--tok-num: light-dark(oklch(49% 0.12 58), oklch(78% 0.10 62));
	--tok-punc: light-dark(oklch(58% 0.012 92), oklch(56% 0.011 96));
}
body {
	/* The embed's height re-derives the column from this; change both. */
	padding: clamp(1.467rem, 6vw, 2.4rem) clamp(1.6rem, 7vw, 2.667rem) clamp(3rem, 12vw, 5rem);
}

p { margin-top: 1.2rem; font-size: 1.059rem; }
strong { font-weight: 550; }

h1 {
	font-size: 1.549rem;
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: 1.4;
	margin-top: 1.867rem;
}
/* Lede. */
h1 + p {
	font-size: 1.223rem;
	margin-top: .667rem;
}
/* Date line. */
h1 + p + p {
	font-size: .896rem;
	color: var(--muted);
	margin-top: .533rem;
}

h2 {
	font-size: 1.223rem;
	font-weight: 550;
	letter-spacing: -.02em;
	line-height: 1.35;
	margin-top: clamp(2.1rem, 6vw, 3rem);
	/* Land with the page's own top padding when the contents jumps here. */
	scroll-margin-top: clamp(1.467rem, 6vw, 2.4rem);
}
/* Wide above, narrow below: nothing else marks the section boundary. */
h2 + p { margin-top: .8rem; }

ul, ol { margin-top: 1.2rem; font-size: 1.059rem; }
ul { padding-left: 1.3em; }
ul li::marker { color: var(--muted); }
/* Its own counter, not ::marker: the gap to the text is not settable. */
ol { padding-left: 0; list-style: none; counter-reset: item; }
ol li { counter-increment: item; position: relative; padding-left: 1.3em; }
ol li::before {
	content: counter(item) ".";
	position: absolute;
	left: 0;
	color: var(--muted);
}
ol li + li { margin-top: 1.2rem; }
ul li + li { margin-top: .4rem; }

blockquote {
	margin-top: 1.2rem;
	padding-left: .9em;
	border-left: 2px solid var(--muted);
	color: var(--muted);
}
blockquote p { margin-top: 0; }

pre {
	background: var(--code);
	border-radius: .571rem;
	padding: .933rem 1.067rem;
	margin-top: 1.2rem;
	overflow-x: auto;
	tab-size: 2;
}
code {
	font-family: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .8em;
	letter-spacing: -.05em;
	background: var(--code);
	padding: .15em .4em;
	border-radius: .3em;
}
pre code {
	font-size: .792rem;
	line-height: 1.6;
	display: block;
	background: none;
	padding: 0;
	border-radius: 0;
}
/* 4ch is two tab stops at `tab-size: 2`, so the code keeps its grid. */
pre code { counter-reset: line; }
pre .l { counter-increment: line; }
pre .l::before {
	content: counter(line);
	display: inline-block;
	width: 2ch;
	padding-right: 2ch;
	text-align: right;
	color: var(--muted);
	opacity: .6;
	user-select: none;
}

pre .c { color: var(--muted); }
pre .k { color: var(--tok-key); }
pre .a { color: var(--tok-prop); }
pre .s { color: var(--tok-str); }
pre .n { color: var(--tok-num); }
pre .p { color: var(--tok-punc); }

/* By position, not the bare element: the page has three iframes. A real
   border and not an inset shadow, which would paint under the frame. */
h1 + p + p + iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-top: 1.867rem;
	border: 1px solid var(--hairline);
	border-radius: .857rem;
	background: var(--code);
}
h1 + p + p + iframe + p {
	margin-top: .933rem;
	font-size: .896rem;
	line-height: 1.6;
	color: var(--muted);
	text-align: center;
}

/* The quoted post, straight from platform.twitter.com rather than through
   widgets.js. It ignores `prefers-color-scheme`, so the theme is baked into
   the URL and there are two: the hidden one never intersects, so the observer
   never gives it a `src` and it is never fetched. */
h2 + p + iframe,
h2 + p + iframe + iframe {
	display: none;
	width: 100%;
	/* Past this the card stops growing and its own white shows through. */
	max-width: 550px;
	/* Nothing reports the height back without the widget's `postMessage`.
	   Measured at 335/400/480/550px wide. The inner `min` spells the column
	   out because `100cqw` would mean containing the whole page. */
	height: min(
		calc(245px + .566 * (min(100vw, 48rem) - 2 * clamp(1.6rem, 7vw, 2.667rem))),
		528px
	);
	margin-top: 1.2rem;
	border: 0;
}
h2 + p + iframe { display: block; }
@media (prefers-color-scheme: dark) {
	h2 + p + iframe { display: none; }
	h2 + p + iframe + iframe { display: block; }
}

hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin-top: clamp(2.8rem, 8vw, 4rem);
}
/* Anything after the rule is a footnote; they read as one block. */
hr ~ p { font-size: .896rem; color: var(--muted); margin-top: .8rem; }
hr ~ p + p { margin-top: 0; }

body > :first-child {
	font-size: .981rem;
	font-weight: 500;
	color: var(--muted);
}
/* The arrow is a pseudo-element so that it can move on its own; a character
   in the link's text is not something a selector can reach. */
body > :first-child a { border-color: transparent; }
body > :first-child a::before {
	content: "←";
	display: inline-block;
	/* The word space it replaces, plus a little: its ink stops short. */
	margin-right: .35em;
	transition: transform .2s var(--ease-out);
}
body > :first-child a:hover { color: var(--fg); }
body > :first-child a:hover::before { transform: translateX(-.2rem); }
@media (min-width: 76rem) {
	body > :first-child {
		position: fixed;
		/* On the h1's baseline: its 1.867rem margin plus the .452rem
		   between a 21.69px/1.4 line box and a 13.73px/1.7 one. */
		top: calc(clamp(1.467rem, 6vw, 2.4rem) + 2.319rem);
		left: clamp(1.6rem, 3vw, 2.667rem);
		margin-top: 0;
	}
}

/* The contents: the first list in the document. The back link's opposite
   number, and hidden below the same breakpoint — no margin to park it in. */
body > ul:first-of-type { display: none; }
@media (min-width: 76rem) {
	body > ul:first-of-type {
		display: block;
		position: fixed;
		/* The same baseline, at this size: 1.867rem plus the .644rem
		   between a 21.69px/1.4 line box and a 12.54px/1.5 one. */
		top: calc(clamp(1.467rem, 6vw, 2.4rem) + 2.511rem);
		right: clamp(1.6rem, 3vw, 2.667rem);
		/* Two lines of the longest heading, still clearing the column at the
		   breakpoint — which is 1216px: a media query's rem is the initial
		   16px, not the 14px root this page sets. */
		width: clamp(9rem, 14vw, 13rem);
		margin-top: 0;
		/* The gutter the rail stands in. */
		padding-left: 1rem;
		list-style: none;
		font-size: .896rem;
		line-height: 1.5;
	}
	body > ul:first-of-type li + li { margin-top: .533rem; }
	/* Geist is variable, so the weight is interpolated rather than swapped.
	   550 is the ceiling: above it the list rewraps and the items move out
	   from under the thumb. */
	body > ul:first-of-type a {
		color: var(--muted);
		border-color: transparent;
		transition: color .2s ease, font-weight .2s var(--ease-out);
	}
	body > ul:first-of-type a:hover { font-weight: 550; }
	body > ul:first-of-type a[aria-current] {
		color: var(--fg);
		font-weight: 550;
	}

	/* A scrollbar for the article, not the document: `::before` is the
	   track, `::after` the thumb, and the script at the end of the body
	   sizes and moves it. With no script only the hairline is left. */
	body > ul:first-of-type::before,
	body > ul:first-of-type::after {
		content: "";
		position: absolute;
		left: 0;
		width: 1px;
	}
	body > ul:first-of-type::before {
		top: 0;
		bottom: 0;
		background: var(--rule);
	}
	body > ul:first-of-type::after {
		top: 0;
		height: var(--thumb-h, 0);
		transform: translateY(var(--thumb-y, 0));
		background: var(--fg);
	}
}

/* For the contents' links; nothing else on the page scrolls itself. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}