/* Awesome Dashboards: the risograph zine.

   The list as a hand-assembled zine run through a two-drum risograph: fluorescent pink and
   medium blue on natural uncoated stock. Where the inks cross they multiply to purple.
   Halftone screens, a pink plate a hair off register, cut-out cards held on with tape and
   staples, rubber-stamped dates. Every color on the page is paper, pink, blue or their
   overprint; the featured product's card is the one piece printed somewhere else and tipped
   in, in its own colors, type and logo.

   Contrast: text is blue (5.9:1 on paper) or purple (11:1); pink is never text, only
   screens, tape, the offset plate and underlines. Headings that overprint a pink screen
   multiply with it, so every letter over a pink dot prints purple (4.5:1 on the pink).

   Native nesting, no BEM, no inline styles anywhere. Textures are small SVG files in
   /assets/img/, fonts are self-hosted from the repo's @fontsource packages. */

/* ── fonts ─────────────────────────────────────────────────────────────── */
@font-face {
	font-family: "Anton";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("../fonts/anton-400.woff2") format("woff2");
}

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	font-stretch: 75% 100%;
	src: url("../fonts/bricolage-grotesque-variable.woff2") format("woff2-variations");
}

@font-face {
	font-family: "Special Elite";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("../fonts/special-elite-400.woff2") format("woff2");
}

@font-face {
	font-family: "Courier Prime";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("../fonts/courier-prime-400.woff2") format("woff2");
}

@font-face {
	font-family: "Courier Prime";
	font-style: normal;
	font-display: swap;
	font-weight: 700;
	src: url("../fonts/courier-prime-700.woff2") format("woff2");
}

@font-face {
	font-family: "Permanent Marker";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("../fonts/permanent-marker-400.woff2") format("woff2");
}

/* The featured product's own typeface, used on its card alone. */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/montserrat-variable.woff2") format("woff2-variations");
}

/* ── tokens ────────────────────────────────────────────────────────────── */
:root {
	/* Stock and inks. Purple is what pink and blue make when multiplied. */
	--paper: #f2e9d8;
	--paper-lift: #f8f2e6;
	--paper-pink: #f9dfe3;
	--pink: #ff48b0;
	--blue: #3255a4;
	--purple: #321871;
	--ink: var(--blue);
	--focus: var(--purple);

	--display: "Anton", "Arial Narrow", sans-serif;
	--text: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
	--stamp: "Special Elite", "Courier Prime", serif;
	--typed: "Courier Prime", "Courier New", serif;
	--marker: "Permanent Marker", "Segoe Print", cursive;

	/* Paper grain and mottling, solid-ink speckle, rubber-stamp wear, pinholes in big type,
	   and a torn edge (a mask). */
	--grain: url("../img/paper-grain.svg");
	--mottle: url("../img/paper-mottle.svg");
	--speckle: url("../img/ink-speckle.svg");
	--ink-mottle: url("../img/ink-mottle.svg");
	--wear: url("../img/stamp-wear.svg");
	--pinholes: url("../img/ink-pinholes.svg");
	--torn: url("../img/torn-edge.svg");

	/* Flat halftone tints: pink on a 45 degree screen, blue square on. */
	--tint-pink: radial-gradient(circle, var(--pink) 1.35px, transparent 1.8px) 0 0 / 5px 5px,
		radial-gradient(circle, var(--pink) 1.35px, transparent 1.8px) 2.5px 2.5px / 5px 5px;
	--tint-blue: radial-gradient(circle, var(--blue) 1.15px, transparent 1.6px) 0 0 / 4px 4px;
	--tint-blue-light: radial-gradient(circle, var(--blue) 0.8px, transparent 1.2px) 0 0 / 5px 5px;

	--wrap: 86rem;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── floor ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 1.5rem;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* A column at least one screen tall: the main content grows to fill whatever the page
   leaves, so the footer always sits at the bottom of the window on short pages. */
body {
	display: flex;
	flex-direction: column;
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	overflow-x: clip;
	background-color: var(--paper);
	color: var(--ink);
	font-family: var(--text);
	font-size: 1.0625rem;
	line-height: 1.55;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	/* break-word, not anywhere: a long URL wraps only when a line would overflow. */
	overflow-wrap: break-word;

	/* The paper stays put while the page scrolls over it. A fixed layer rather than
	   background-attachment: fixed, which iOS Safari ignores. */
	&::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background-color: var(--paper);
		background-image: var(--grain), var(--mottle);
		background-size: 220px 220px, 600px 600px;
	}
}

.site-main {
	flex: 1 0 auto;
}

img,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote,
pre {
	margin: 0;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

p,
li,
dd {
	text-wrap: pretty;
}

ul[role="list"],
ol[role="list"] {
	list-style: none;
	padding: 0;
}

button {
	font: inherit;
	color: inherit;
}

a {
	color: var(--blue);
	text-underline-offset: 0.18em;
}

code,
pre {
	font-family: var(--typed);
}

[hidden] {
	display: none !important;
}

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

::selection {
	background: var(--pink);
	color: var(--purple);
}

.icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -4rem;
	left: 1rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--purple);
	color: var(--paper-lift);
	font-weight: 700;
	text-decoration: none;

	&:focus {
		top: 1rem;
	}
}

.wrap {
	width: min(100% - 2 * var(--gutter), var(--wrap));
	margin-inline: auto;
}

/* ── halftone screens ─────────────────────────────────────────────────────
   A real dot screen, not a pattern fade: a dot field and a tone ramp are mixed half and
   half, then thresholded with contrast(), so the dots grow where the tone is dark. The ink
   is laid on with lighten, and the whole screen multiplies onto the paper, so two screens
   crossing turn purple. Set --tone (a gradient from rgb(0 0 0 / .5) to
   rgb(255 255 255 / .5)), --cell and --screen-ink. */
.screen {
	--cell: 9px;
	--screen-ink: var(--pink);
	--tone: linear-gradient(rgb(0 0 0 / 0.5), rgb(255 255 255 / 0.5));
	position: absolute;
	overflow: hidden;
	pointer-events: none;
	isolation: isolate;
	mix-blend-mode: multiply;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background:
			var(--tone),
			radial-gradient(circle, #000, #fff calc(var(--cell) * 0.5)) 0 0 / var(--cell) var(--cell),
			radial-gradient(circle, #000, #fff calc(var(--cell) * 0.5)) calc(var(--cell) / 2) calc(var(--cell) / 2) / var(--cell) var(--cell);
		background-blend-mode: normal, darken, normal;
		filter: contrast(26);
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--screen-ink);
		mix-blend-mode: lighten;
	}
}

/* ── misregistered type ───────────────────────────────────────────────────
   The pink plate is the same words again (CSS generated content from data-plate, with
   empty alt text so it is never read out), a hair off register. The blue plate multiplies
   onto whatever is under it. */
.overprint {
	position: relative;
	mix-blend-mode: multiply;

	&::after {
		content: attr(data-plate) / "";
		position: absolute;
		inset: 0;
		color: var(--pink);
		mix-blend-mode: multiply;
		translate: 0.035em 0.045em;
		pointer-events: none;
	}
}

/* Big solid type: the odd pinhole where the drum ran dry. */
.cover-title,
.page-title,
.w-title,
.chapter-title,
.back-mark {
	mask-image: var(--pinholes);
	mask-size: 240px;
}

@media (prefers-reduced-motion: no-preference) {
	.cover-title::after,
	.page-title::after,
	.w-title::after {
		animation: plates-register 1.2s var(--ease-out) 0.2s both;
	}
}

/* The second pass through the drum settles almost onto the first. */
@keyframes plates-register {
	from {
		translate: -0.2em -0.12em;
	}
}

/* ── paste-up pieces: cut-out cards, tape, staples, stamps ───────────────── */
.cut {
	position: relative;
	rotate: var(--tilt, 0deg);

	/* the scanner's shadow along the cut edge, printed as a blue screen */
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		translate: 5px 6px;
		background: var(--tint-blue);
		mix-blend-mode: multiply;
		opacity: 0.85;
		pointer-events: none;
	}

	& > .cut-card {
		position: relative;
		height: 100%;
		background: var(--paper-lift);
		border: 1.5px solid var(--blue);
	}
}

/* Tape printed in the pink drum: a translucent strip of dots. */
.cut[data-fix="tape"]::after,
.cut[data-fix="tape-right"]::after {
	content: "";
	position: absolute;
	z-index: 2;
	width: 5.5rem;
	height: 1.55rem;
	background: var(--tint-pink);
	mix-blend-mode: multiply;
	clip-path: polygon(3% 0, 97% 0, 100% 16%, 97% 32%, 100% 50%, 96% 68%, 100% 84%, 97% 100%, 3% 100%, 0 84%, 4% 68%, 0 50%, 3% 32%, 0 16%);
	pointer-events: none;
}

.cut[data-fix="tape"]::after {
	top: -0.7rem;
	left: 1.25rem;
	rotate: -7deg;
}

.cut[data-fix="tape-right"]::after {
	top: -0.65rem;
	right: 1.5rem;
	rotate: 6deg;
}

/* Staples printed in blue: the crown, with a thin paper glint. */
.staple,
.cut[data-fix="staple"]::after {
	content: "";
	position: absolute;
	z-index: 2;
	width: 2.4rem;
	height: 0.5rem;
	border-radius: 2px;
	background: linear-gradient(var(--blue) 0 38%, var(--paper-lift) 38% 58%, var(--blue) 58%);
	pointer-events: none;
}

.cut[data-fix="staple"]::after {
	top: 0.6rem;
	left: calc(50% - 1.2rem);
	rotate: -3deg;
}

/* Rubber stamps. The wear mask sits on a pseudo layer so text and focus rings stay crisp. */
.date-stamp,
.stamp,
.stamp-link {
	position: relative;
	display: inline-grid;
	justify-items: center;
	align-content: center;
	gap: 0.05rem;
	padding: 0.35rem 0.7rem 0.4rem;
	color: var(--blue);
	font-family: var(--stamp);
	line-height: 1.1;
	text-transform: uppercase;
	rotate: var(--stamp-tilt, -3deg);
	isolation: isolate;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border: 2px solid currentColor;
		border-radius: 0.3rem;
		box-shadow: inset 0 0 0 2px var(--paper-lift), inset 0 0 0 3.5px currentColor;
		mask-image: var(--wear);
		mask-size: 180px;
	}
}

.date-stamp {
	& .date-stamp-label {
		font-size: 0.75rem;
		letter-spacing: 0.18em;
	}

	& time {
		font-size: 0.9375rem;
		letter-spacing: 0.06em;
		white-space: nowrap;
	}

	&.stamp-pink {
		--stamp-tilt: 2deg;
		color: var(--purple);
	}
}

.stamp {
	font-size: 0.875rem;
	letter-spacing: 0.14em;

	&::before {
		box-shadow: none;
	}
}

/* A link printed as a stamp: "Browse and filter every dashboard". */
.stamp-link {
	--stamp-tilt: -1.5deg;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.75rem;
	padding: 0.55rem 1rem 0.6rem;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-decoration: none;

	&::before {
		box-shadow: none;
		background-color: transparent;
		transition: background-color 160ms ease-out;
	}

	&:hover::before {
		background-color: var(--paper-pink);
	}
}

.label-stamp {
	display: inline-block;
	font-family: var(--stamp);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.marker-note {
	max-width: 32rem;
	font-family: var(--marker);
	font-size: 1.25rem;
	line-height: 1.35;
	rotate: -1.5deg;
}

.marker-arrow {
	display: inline-block;
	width: 3.25rem;
	height: 1.6rem;
	margin-left: 0.35rem;
	vertical-align: -0.35rem;
	fill: none;
	stroke: var(--blue);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── running line: wordmark and site nav ───────────────────────────────── */
.running-line {
	border-bottom: 2px solid var(--blue);
}

.running-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 1.5rem;
	padding-block: 0.7rem;
}

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.75rem;
	color: var(--blue);
	font-family: var(--display);
	font-size: 1.375rem;
	letter-spacing: 0.01em;
	text-decoration: none;
}

.wordmark-mark {
	width: 2.6rem;
	height: auto;
	overflow: visible;

	& circle {
		mix-blend-mode: multiply;
	}

	& .mark-pink {
		fill: var(--pink);
	}

	& .mark-blue {
		fill: var(--blue);
	}
}

.site-nav {
	& ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0 clamp(0.85rem, 2vw, 1.25rem);
		margin: 0;
		padding: 0;
	}

	& a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		font-family: var(--typed);
		font-size: 0.875rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
			text-decoration-thickness: 2px;
			text-underline-offset: 0.3em;
		}
	}

	& a[aria-current="page"],
	& a.in-section {
		text-decoration: underline;
		text-decoration-color: var(--pink);
		text-decoration-thickness: 0.45em;
		text-underline-offset: -0.2em;
		text-decoration-skip-ink: none;
	}
}

@media (max-width: 30rem) {
	.site-nav a {
		font-size: 0.8125rem;
		letter-spacing: 0.05em;
	}
}

/* ── dev builds: the notice and the badges (never in production) ────────── */
.dev-notice {
	padding-block: 0.55rem;
	background: var(--purple);
	color: var(--paper-lift);
	font-family: var(--typed);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.4;

	& .wrap {
		display: block;
	}
}

.status-badge {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.6rem 0 0;

	& span {
		display: inline-block;
		padding: 0.15rem 0.5rem;
		border: 1.5px solid var(--purple);
		border-radius: 0.25rem;
		background: var(--paper-lift);
		color: var(--purple);
		font-family: var(--stamp);
		font-size: 0.75rem;
		letter-spacing: 0.12em;
		line-height: 1.3;
		text-transform: uppercase;
		rotate: -1.5deg;
	}

	& .status-queued {
		border-style: dashed;
		background: var(--paper-pink);
	}
}

/* ── the trail ─────────────────────────────────────────────────────────── */
.page-top {
	padding-top: 1.25rem;
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.1rem 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--typed);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;

	& li {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		min-height: 2.75rem;
	}

	& li + li::before {
		content: "";
		width: 0.9rem;
		height: 2px;
		background: var(--pink);
	}
}

/* ── the home cover ────────────────────────────────────────────────────── */
/* No isolation here: the screens have to multiply onto the page's paper. */
.cover {
	position: relative;
	overflow: clip;
	padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}

.cover-art {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* A pink screen disk, and its blue key line printed a few pixels off. */
.art-disk {
	position: absolute;
	top: -3.5rem;
	right: -6rem;
	width: 17rem;
	aspect-ratio: 1;

	& .screen {
		--cell: 10px;
		--tone: radial-gradient(circle at 30% 72%, rgb(0 0 0 / 0.5) 8%, rgb(255 255 255 / 0.5) 78%);
		inset: 0;
		border-radius: 50%;
	}
}

.art-ring {
	position: absolute;
	inset: 0;
	translate: -14px 11px;
	border: 3px solid var(--blue);
	border-radius: 50%;
	mix-blend-mode: multiply;
	mask-image: var(--pinholes);
	mask-size: 240px;
}

.art-bars {
	position: absolute;
	display: none;
	align-items: end;
	gap: 1.1rem;

	& .screen {
		--cell: 8px;
		--screen-ink: var(--blue);
		--tone: linear-gradient(to top, rgb(0 0 0 / 0.5) 5%, rgb(255 255 255 / 0.5) 115%);
		position: relative;
		width: 3.25rem;
	}

	& .screen:nth-child(1) { height: 42%; }
	& .screen:nth-child(2) { height: 68%; }
	& .screen:nth-child(3) { height: 54%; }
	& .screen:nth-child(4) { height: 88%; }
	& .screen:nth-child(5) { height: 100%; }
}

.cover-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.75rem;
	align-items: start;
}

.cover-copy {
	display: grid;
	gap: 1.75rem;
	justify-items: start;
}

.cover-title {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(4rem, 0.5rem + 11.4vw, 9.75rem);
	line-height: 0.86;
	letter-spacing: 0.005em;
}

.strip {
	--tilt: -1.1deg;
	max-width: 38rem;

	& > .cut-card {
		padding: 1.1rem 1.4rem 1.2rem;
	}
}

.lede {
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	font-weight: 500;
	line-height: 1.5;
}

.cover-copy .marker-note {
	padding-left: 0.5rem;
}

/* A tipped-in insert: printed elsewhere, held on with two steel staples. */
.insert {
	position: relative;
	rotate: 1.2deg;
	filter: drop-shadow(0 1px 1px rgb(52 36 12 / 0.28)) drop-shadow(0 16px 18px rgb(52 36 12 / 0.26));

	& > .staple {
		top: -0.2rem;
		z-index: 3;
		width: 2rem;
		background: linear-gradient(#e2e5ea 0 30%, #8d939c 30% 62%, #c3c8cf 62%);
		box-shadow: 0 1px 1px rgb(0 0 0 / 0.4);
	}

	& > .staple:first-of-type {
		left: 18%;
		rotate: -2deg;
	}

	& > .staple:nth-of-type(2) {
		right: 18%;
		rotate: 3deg;
	}
}

@media (min-width: 40rem) {
	.art-disk {
		top: -5rem;
		right: -4rem;
		width: 24rem;
	}
}

@media (min-width: 64rem) {
	.cover-grid {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		column-gap: 3.5rem;
	}

	.cover-grid > .insert {
		margin-top: 1.5rem;
	}

	.art-disk {
		top: 2.5rem;
		right: auto;
		left: 44%;
		width: 36rem;
	}

	.art-bars {
		display: flex;
		right: 1.5rem;
		bottom: 0;
		height: 22rem;
	}
}

/* ── contents ──────────────────────────────────────────────────────────── */
.contents {
	padding-block: 2.5rem 0.5rem;
	border-top: 2px solid var(--blue);

	& h2 {
		margin-bottom: 1rem;
	}

	& ol {
		columns: 3 17rem;
		column-gap: 3rem;
		margin: 0;
	}

	& li {
		break-inside: avoid;
	}

	& a {
		display: flex;
		align-items: baseline;
		gap: 0.6rem;
		padding-block: 0.4rem;
		text-decoration: none;

		&:hover .toc-name {
			text-decoration: underline;
			text-decoration-color: var(--pink);
			text-decoration-thickness: 0.12em;
		}
	}
}

.toc-name {
	font-family: var(--display);
	font-size: 1.375rem;
	line-height: 1.1;
}

.toc-dots {
	flex: 1 1 1.5rem;
	min-width: 1.5rem;
	border-bottom: 3px dotted var(--blue);
	translate: 0 -0.3em;
}

.toc-count {
	font-family: var(--typed);
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
}

/* ── chapters: one per category, each a sideways row ───────────────────── */
.chapter {
	position: relative;
	padding-block: clamp(3rem, 6vw, 5rem) 0.5rem;
}

.chapter-top {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem 3rem;
	margin-bottom: 2rem;
}

.chapter-title-block {
	position: relative;
	display: grid;
	gap: 0.9rem;
	justify-items: start;
	align-content: start;
}

.chapter-title {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(2.5rem, 1.3rem + 4.4vw, 5.5rem);
	line-height: 0.92;
	letter-spacing: 0.005em;

	& a {
		color: inherit;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
			text-decoration-color: var(--pink);
			text-decoration-thickness: 0.08em;
			text-underline-offset: 0.08em;
		}
	}
}

.chapter-tally {
	--stamp-tilt: -2deg;
}

/* Over a pink screen a stamp gets a patch of card stock, so it never sits on the dots. */
.chapter[data-ink="pink"] .chapter-tally,
.cover-stamps > .stamp,
.cover-stamps > .date-stamp,
.cover-stamps > .stamp-link {
	background: var(--paper-lift);
}

.chapter-intro {
	--tilt: 0.8deg;
	align-self: end;

	& > .cut-card {
		padding: 1.15rem 1.35rem 1.25rem;
	}

	& p {
		max-width: 62ch;
		font-size: 1rem;
		line-height: 1.55;
	}
}

/* Pink chapters: the heading overprints a pink screen that fades out. */
.chapter-screen {
	--cell: 10px;
	--tone: linear-gradient(100deg, rgb(0 0 0 / 0.5) 0%, rgb(255 255 255 / 0.5) 72%);
	top: -1.5rem;
	left: calc(var(--gutter) * -1);
	width: min(46rem, 100% + var(--gutter));
	height: calc(100% + 2rem);
	mask: var(--torn) right top / 10px 90px repeat-y, linear-gradient(#000 0 0) left / calc(100% - 9px) 100% no-repeat;
}

/* Blue chapters: a solid field of speckled blue, the heading knocked out. */
.chapter[data-ink="blue"] .chapter-top {
	--focus: var(--paper-lift);
	padding: clamp(1.5rem, 4vw, 2.75rem);
	background-color: var(--blue);
	background-image: var(--speckle), var(--ink-mottle);
	background-size: 200px 200px, 400px 400px;
	color: var(--paper-lift);

	& .chapter-title {
		color: var(--paper-lift);
		isolation: isolate;
		mix-blend-mode: normal;

		&::after {
			z-index: -1;
			mix-blend-mode: normal;
		}
	}

	& .chapter-tally {
		color: var(--paper-lift);

		&::before {
			box-shadow: inset 0 0 0 2px var(--blue), inset 0 0 0 3.5px currentColor;
		}
	}

	& .status-badge span {
		rotate: 1deg;
	}

	& .chapter-intro {
		--focus: var(--purple);
		margin-bottom: calc(clamp(1.5rem, 4vw, 2.75rem) * -1 - 1.25rem);
		color: var(--blue);
	}
}

@media (min-width: 60rem) {
	.chapter-top {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: end;
	}
}

.row-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-top: 2.25rem;
}

.row-note {
	font-family: var(--typed);
	font-size: 0.9375rem;
	font-weight: 700;
}

.row-controls {
	display: flex;
	gap: 0.6rem;
	margin-left: auto;
}

.row-button {
	position: relative;
	isolation: isolate;
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--blue);
	cursor: pointer;
	rotate: -2deg;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border: 2px solid currentColor;
		border-radius: 50%;
		background-color: var(--paper-lift);
		mask-image: var(--wear);
		mask-size: 180px;
		transition: background-color 160ms ease-out;
	}

	&:nth-child(2) {
		rotate: 3deg;
	}

	&:hover::before {
		background-color: var(--paper-pink);
	}

	&[aria-disabled="true"] {
		opacity: 0.4;
		cursor: default;

		&:hover::before {
			background-color: var(--paper-lift);
		}
	}

	& .icon {
		width: 1.1rem;
		height: 1.1rem;
	}
}

/* The row itself: it scrolls sideways inside the page (never the page itself), snapping card
   by card, and bleeds to the edge of the screen so a cut-off card says "there is more". */
.entry-row {
	margin-inline: calc(var(--gutter) * -1);
	padding: 1.4rem var(--gutter) 1.6rem;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-color: var(--blue) transparent;
	scrollbar-width: thin;

	&:focus-visible {
		outline-offset: -3px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.entry-row {
		scroll-behavior: smooth;
	}
}

.entry-row-list {
	display: flex;
	gap: 1.6rem;
	width: max-content;
	margin: 0;

	& > li {
		flex: 0 0 auto;
		width: min(19rem, 100vw - 2 * var(--gutter) - 2.5rem);
		scroll-snap-align: start;
	}
}

.entry-row-list > .see-all-slot {
	--tilt: 1deg;
	display: grid;
	width: min(14rem, 100vw - 2 * var(--gutter) - 6rem);
}

.see-all-card {
	--focus: var(--paper-lift);
	position: relative;
	isolation: isolate;
	display: grid;
	align-content: end;
	justify-items: start;
	gap: 0.6rem;
	min-height: 15rem;
	padding: 1.5rem 1.4rem;
	overflow: clip;
	background-color: var(--blue);
	background-image: var(--speckle), var(--ink-mottle);
	background-size: 200px 200px, 400px 400px;
	color: var(--paper-lift);
	text-decoration: none;
	rotate: var(--tilt);

	/* a pink screen in the corner, multiplied into the blue */
	&::before {
		content: "";
		position: absolute;
		inset: 0 0 auto auto;
		z-index: -1;
		width: 70%;
		height: 60%;
		background: var(--tint-pink);
		mix-blend-mode: multiply;
		mask-image: radial-gradient(circle at 100% 0, #000 20%, transparent 70%);
	}

	& .see-all-label {
		font-family: var(--display);
		font-size: 2.75rem;
		line-height: 0.9;
	}

	& .see-all-count {
		padding: 0.2rem 0.55rem;
		border: 2px solid currentColor;
		border-radius: 0.3rem;
		font-family: var(--stamp);
		font-size: 0.9375rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		rotate: -3deg;
	}

	& .see-all-name {
		font-family: var(--typed);
		font-size: 0.9375rem;
		font-weight: 700;
		line-height: 1.35;
	}

	& .icon {
		width: 1.75rem;
		height: 1.75rem;
		transition: translate 240ms var(--ease-out);
	}

	&:hover .see-all-label {
		text-decoration: underline;
		text-decoration-color: var(--pink);
		text-decoration-thickness: 0.1em;
		text-underline-offset: 0.12em;
	}

	&:hover .icon {
		translate: 0.35rem 0;
	}
}

/* ── entries: cut-out cards ────────────────────────────────────────────── */
.entry-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr));
	gap: 2.4rem 1.9rem;
	margin: 0;
	padding-top: 0.75rem;
}

.slot:nth-child(4n + 1) { --tilt: -0.7deg; }
.slot:nth-child(4n + 2) { --tilt: 0.55deg; }
.slot:nth-child(4n + 3) { --tilt: -0.3deg; }
.slot:nth-child(4n + 4) { --tilt: 0.9deg; }

.entry-card {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	padding: 1.5rem 1.3rem 1.15rem;
}

.entry-top {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 0.75rem;
}

.entry-name {
	font-family: var(--display);
	font-weight: 400;
	font-size: 1.75rem;
	line-height: 1.02;
	letter-spacing: 0.01em;
	overflow-wrap: anywhere;

	& a {
		text-decoration: none;
		background: linear-gradient(var(--paper-pink) 0 0) left 88% / 0 0.42em no-repeat;
		transition: background-size 260ms var(--ease-out);

		&:hover {
			background-size: 100% 0.42em;
		}
	}
}

.entry-flag {
	--stamp-tilt: 4deg;
	flex: 0 0 auto;
	margin-top: 0.2rem;
	font-size: 0.8125rem;
}

.entry-description {
	font-size: 1rem;
	line-height: 1.45;
}

.entry-disclosure,
.disclosure {
	font-family: var(--typed);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.entry-facts {
	display: grid;
	gap: 0.3rem;
	margin-top: auto;
	padding-top: 0.85rem;
	border-top: 1.5px dashed var(--blue);
	font-size: 0.9375rem;
	line-height: 1.35;

	& div {
		display: grid;
		grid-template-columns: 4.75rem minmax(0, 1fr);
		gap: 0.9rem;
	}

	& dt {
		padding-top: 0.14rem;
		font-family: var(--typed);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}
}

.facet-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: auto 0 0;
	padding: 0.75rem 0 0;
	border-top: 1.5px dashed var(--blue);
	list-style: none;

	& li {
		padding: 0.1rem 0.45rem;
		border: 1.5px solid var(--blue);
		border-radius: 0.25rem;
		font-family: var(--typed);
		font-size: 0.8125rem;
		font-weight: 700;
	}
}

.entry-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin-top: auto;
	padding-top: 0.35rem;
}

.entry-facts + .entry-foot,
.facet-tags + .entry-foot {
	margin-top: 0;
}

.entry-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
	gap: 0.25rem 1rem;
	margin-left: auto;
	font-size: 0.9375rem;
	font-weight: 600;
}

.site-link,
.writeup-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.25rem;
	text-decoration: underline;
	text-decoration-color: var(--pink);
	text-decoration-thickness: 0.2em;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;

	& .icon {
		width: 0.8em;
		height: 0.8em;
	}

	&:hover {
		text-decoration-color: var(--blue);
	}
}

.entry-card .status-badge {
	margin-top: 0;
}

/* ── the stamp bar: filters ────────────────────────────────────────────── */
.stamp-bar {
	position: sticky;
	top: 0;
	z-index: 20;
	margin-top: 2rem;
	padding-block: 0.7rem 1.1rem;
	border-top: 2px solid var(--blue);
	background-color: var(--paper);
	background-image: var(--grain);
	background-size: 220px 220px;
	mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat,
		var(--torn) bottom left / 90px 10px repeat-x;
}

.filter-chips {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.35rem 1rem;

	& .filter-heading {
		grid-area: 1 / 1;
	}

	& .filter-status {
		grid-area: 1 / 2;
	}

	& .chip-list {
		grid-area: 2 / 1 / 3 / -1;
	}

	& .noscript-note {
		grid-column: 1 / -1;
	}
}

.filter-heading {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--marker);
	font-size: 1.2rem;
	line-height: 1;
	white-space: nowrap;
	rotate: -3deg;

	& .icon {
		width: 0.9rem;
		height: 0.9rem;
	}
}

.filter-status {
	justify-self: end;
	font-family: var(--typed);
	font-size: 0.875rem;
	font-weight: 700;
}

.chip-list {
	display: flex;
	gap: 0.6rem;
	margin: 0 -0.2rem;
	padding: 0.4rem 0.2rem;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;

	& li {
		flex: 0 0 auto;
	}
}

.chip {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.45rem 0.75rem;
	border: 0;
	background: none;
	color: var(--blue);
	font-family: var(--stamp);
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
	cursor: pointer;
	rotate: var(--stamp-tilt, 0deg);
	transition: rotate 240ms var(--ease-out), color 160ms ease-out;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border: 2px solid var(--blue);
		border-radius: 0.3rem;
		background-color: transparent;
		mask-image: var(--wear);
		mask-size: 180px;
		transition: background-color 160ms ease-out;
	}

	&:hover::before {
		background-color: var(--paper-pink);
	}

	&[aria-pressed="true"],
	&.is-pressed {
		color: var(--paper-lift);

		&::before {
			background-color: var(--blue);
		}
	}

	&:active {
		rotate: calc(var(--stamp-tilt, 0deg) - 2deg);
	}

	& .icon {
		width: 0.85rem;
		height: 0.85rem;
	}
}

.chip-list li:nth-child(3n + 1) .chip { --stamp-tilt: -1deg; }
.chip-list li:nth-child(3n + 2) .chip { --stamp-tilt: 0.8deg; }
.chip-list li:nth-child(3n + 3) .chip { --stamp-tilt: -0.4deg; }

.chip-count {
	padding-left: 0.55rem;
	border-left: 1.5px solid currentColor;
	font-family: var(--typed);
	font-size: 0.8125rem;
	font-weight: 700;
}

.noscript-note {
	display: none;
}

@media (min-width: 48rem) {
	.filter-chips {
		column-gap: 1.5rem;

		& .filter-heading {
			grid-area: 1 / 1;
			align-self: end;
		}

		& .filter-status {
			grid-area: 2 / 1;
			justify-self: start;
			align-self: start;
		}

		& .chip-list {
			grid-area: 1 / 2 / 3 / 3;
			flex-wrap: wrap;
			gap: 0.5rem;
			overflow: visible;
		}
	}
}

.empty-note {
	padding-block: 3rem 1rem;
	font-family: var(--marker);
	font-size: 1.75rem;
	line-height: 1.2;
	text-align: center;
	rotate: -2deg;
}

/* ── page covers (everything but home) ─────────────────────────────────── */
.page-cover {
	position: relative;
	overflow: clip;
	padding-block: 1rem clamp(2.5rem, 5vw, 4rem);
	/* The halftone slab can run as tall as the cover itself, so what follows needs room. */
	margin-block-end: clamp(1.5rem, 4vw, 3rem);
}

.cover-slab {
	--cell: 11px;
	--tone: linear-gradient(20deg, rgb(0 0 0 / 0.5) 12%, rgb(255 255 255 / 0.5) 80%);
	top: 0;
	left: 0;
	width: min(40rem, 92%);
	height: clamp(8rem, 3rem + 14vw, 15rem);
	mask: var(--torn) right top / 10px 90px repeat-y, linear-gradient(#000 0 0) left / calc(100% - 9px) 100% no-repeat;
}

.page-cover-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.75rem 3.5rem;
	align-items: start;
}

.page-cover-copy {
	display: grid;
	gap: 0.75rem;
	justify-items: start;
}

.cover-kicker {
	/* typed on a strip of card stock, so it never sits on the pink dots */
	padding: 0.15rem 0.5rem;
	background: var(--paper-lift);
	font-family: var(--typed);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.page-title {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(3rem, 1rem + 6.4vw, 7rem);
	line-height: 0.95;
	letter-spacing: 0.005em;
	overflow-wrap: anywhere;
}

.cover-long .page-title {
	max-width: 22ch;
	font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem);
	line-height: 1;
	overflow-wrap: break-word;
}

.cover-body {
	display: grid;
	gap: 1.5rem;
	justify-items: start;
	max-width: 46rem;
}

.lead-card {
	--tilt: -0.6deg;

	& > .cut-card {
		padding: 1.2rem 1.4rem 1.3rem;
	}
}

.cover-stamps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

.tally {
	--stamp-tilt: -2deg;
}

.cover-aside {
	justify-self: stretch;
}

@media (min-width: 64rem) {
	/* A plain cover: the title at left, its lead and stamps hung at right. */
	.page-cover:not(.cover-wide, .cover-long) .page-cover-inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: start;

		& > .cover-body {
			margin-top: 2rem;
		}
	}

	.cover-wide .page-cover-inner {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);

		& > .page-cover-copy,
		& > .cover-body {
			grid-column: 1;
		}

		& > .cover-aside {
			grid-column: 2;
			grid-row: 1 / span 2;
			margin-top: 2.5rem;
		}
	}
}

/* ── sections and reading ──────────────────────────────────────────────── */
.zine-section {
	padding-top: clamp(3rem, 6vw, 5rem);
}

.section-top {
	display: grid;
	gap: 0.75rem;
	margin-bottom: 1.5rem;

	& p {
		max-width: 60ch;
		font-size: 1.0625rem;
	}
}

.section-title,
.group-title {
	margin-bottom: 1.1rem;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(2.125rem, 1.5rem + 2vw, 3.25rem);
	line-height: 0.98;
}

.section-top .section-title {
	margin-bottom: 0;
}

.entries-section {
	padding-top: 2rem;
}

.reading-column > * {
	max-width: 50rem;
}

.lead {
	font-size: 1.1875rem;
	line-height: 1.6;
}

.prose {
	max-width: 68ch;
	font-size: 1.125rem;
	line-height: 1.65;

	& > * + * {
		margin-top: 1em;
	}

	& h3 {
		margin-top: 1.75em;
		font-family: var(--display);
		font-weight: 400;
		font-size: 1.625rem;
		line-height: 1.1;
	}

	& a {
		font-weight: 600;
		text-decoration-color: var(--pink);
		text-decoration-thickness: 0.16em;
		text-underline-offset: 0.2em;
		overflow-wrap: anywhere;

		&:hover {
			text-decoration-color: var(--blue);
		}
	}

	& strong {
		font-weight: 700;
	}

	& code {
		color: var(--purple);
		font-size: 0.95em;
		font-weight: 700;
	}

	& pre {
		max-width: 100%;
		overflow-x: auto;
		padding: 1.1rem 1.3rem;
		border: 2px dashed var(--blue);
		background: var(--paper-lift);
		color: var(--purple);
		font-size: 0.975rem;
		line-height: 1.5;
		overflow-wrap: normal;

		& code {
			font-size: inherit;
		}
	}

	& ul {
		padding: 0;
		list-style: none;
	}

	& ul > li {
		position: relative;
		padding-left: 1.6rem;
	}

	& ol {
		padding-left: 1.6rem;
	}

	& li + li {
		margin-top: 0.6rem;
	}

	& ul > li::before {
		content: "";
		position: absolute;
		top: 0.55em;
		left: 0.2rem;
		width: 0.62rem;
		height: 0.62rem;
		border-radius: 50%;
		background: var(--pink);
	}

	& ol > li::marker {
		font-family: var(--typed);
		font-weight: 700;
	}

	& blockquote {
		padding: 0.25rem 0 0.25rem 1.2rem;
		border-left: 4px solid var(--pink);
		font-style: italic;
	}

	/* A table scrolls inside the column, so it never widens the page on a phone. */
	& table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		border-collapse: collapse;
		border-top: 1.5px dashed var(--blue);
		font-size: 0.9375rem;
		line-height: 1.45;
	}

	& th,
	& td {
		padding: 0.55rem 0.8rem 0.55rem 0;
		border-bottom: 1.5px dashed var(--blue);
		text-align: left;
		vertical-align: top;
		overflow-wrap: anywhere;
	}

	& th {
		font-family: var(--typed);
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	& th:first-child,
	& td:first-child {
		overflow-wrap: normal;
	}
}

.content-section > .section-title {
	max-width: 24ch;
}

/* Sources: a ruled list, each source on its own dashed line. */
.sources-section .prose {
	& ul {
		border-top: 1.5px dashed var(--blue);
	}

	& ul > li {
		margin: 0;
		padding: 0.85rem 0;
		border-bottom: 1.5px dashed var(--blue);
		font-size: 0.9375rem;
		line-height: 1.5;
	}

	& ul > li::before {
		display: none;
	}
}

/* ── questions: one card each ──────────────────────────────────────────── */
.faq-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
	gap: 2.25rem 2rem;
	padding-top: 0.75rem;
}

.faq-slot:nth-child(3n + 1) { --tilt: -0.8deg; }
.faq-slot:nth-child(3n + 2) { --tilt: 0.6deg; }
.faq-slot:nth-child(3n + 3) { --tilt: -0.3deg; }

.faq-item {
	display: grid;
	gap: 0.8rem;
	align-content: start;
	padding: 1.6rem 1.4rem 1.3rem;
}

.faq-question {
	font-family: var(--marker);
	font-weight: 400;
	font-size: 1.375rem;
	line-height: 1.25;
}

.faq-answer {
	font-size: 1rem;
	line-height: 1.55;
}

/* ── slips: posts, write-ups and topics as clipped notes ───────────────── */
.slip-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 1.5rem 1.75rem;
	margin: 0;
}

.slip {
	position: relative;
	display: grid;
	gap: 0.5rem;
	align-content: start;
	padding: 1.1rem 1.2rem 1.2rem;
	border: 1.5px solid var(--blue);
	border-left-width: 6px;
	background: var(--paper-lift);
	rotate: var(--tilt, 0deg);

	&:nth-child(3n + 1) { --tilt: -0.5deg; }
	&:nth-child(3n + 2) { --tilt: 0.4deg; }
}

.slip-kind {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.8rem;
	font-family: var(--typed);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	& time {
		font-family: var(--stamp);
		letter-spacing: 0.06em;
	}
}

.slip-title {
	font-family: var(--text);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;

	& a {
		text-decoration-color: var(--pink);
		text-decoration-thickness: 0.14em;
		text-underline-offset: 0.18em;
	}
}

.slip-description {
	font-size: 0.9375rem;
	line-height: 1.5;
}

.tag-cloud,
.neighbor-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;

	& li:nth-child(odd) a {
		rotate: -1.2deg;
	}

	& li:nth-child(even) a {
		rotate: 0.9deg;
	}

	& a {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 2.75rem;
		padding: 0.35rem 0.9rem;
		border: 1.5px solid var(--blue);
		background: var(--paper-lift);
		font-family: var(--display);
		font-size: 1.25rem;
		text-decoration: none;

		&:hover {
			background: var(--paper-pink);
		}
	}

	& .icon {
		width: 0.8rem;
		height: 0.8rem;
	}
}

.neighbor-count {
	padding: 0 0.35rem;
	border: 1.5px solid currentColor;
	border-radius: 0.2rem;
	font-family: var(--typed);
	font-size: 0.8125rem;
	font-weight: 700;
}

.hub-related {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 3rem;

	@media (min-width: 72rem) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	}
}

/* ── write-up and post: cover, contents slip, reading column ───────────── */
.w-cover {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.75rem 3.5rem;
	align-items: start;
	padding-block: 1rem clamp(2.5rem, 5vw, 4rem);
}

.w-slab {
	--cell: 11px;
	--tone: linear-gradient(20deg, rgb(0 0 0 / 0.5) 12%, rgb(255 255 255 / 0.5) 80%);
	top: 0.5rem;
	left: calc(var(--gutter) * -1);
	width: min(34rem, 92%);
	height: clamp(8rem, 3rem + 14vw, 16rem);
	mask: var(--torn) right top / 10px 90px repeat-y, linear-gradient(#000 0 0) left / calc(100% - 9px) 100% no-repeat;
}

.w-heading {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 0.75rem;
	justify-items: start;
}

.w-title {
	margin-bottom: 0.5rem;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(4rem, 1.5rem + 9vw, 10.5rem);
	line-height: 0.95;
	letter-spacing: 0.005em;
	overflow-wrap: anywhere;

	&::after {
		translate: 0.02em 0.03em;
	}
}

.w-dek-strip {
	--tilt: -1.4deg;
	max-width: 34rem;

	& > .cut-card {
		padding: 0.8rem 1.2rem;
	}
}

.w-dek {
	font-family: var(--display);
	font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
	line-height: 1.08;
}

.w-description {
	max-width: 46ch;
	margin-top: 0.75rem;
	font-size: 1.1875rem;
	line-height: 1.5;
}

.w-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
	margin-top: 0.75rem;
}

.w-category {
	font-family: var(--marker);
	font-size: 1.125rem;
}

.cover-disclosure {
	max-width: 46ch;
}

/* At a glance: a ruled index card, pink header rule and margin line. */
.glance-card {
	--tilt: 1deg;
	z-index: 1;

	& > .cut-card {
		display: grid;
		gap: 0.75rem;
		justify-items: start;
		padding: 1.35rem 1.35rem 1.5rem;
	}

	& .facet-tags {
		margin-top: 0.25rem;
		padding-top: 0.6rem;
		border-top: 0;
	}

	& .date-stamp {
		--stamp-tilt: -4deg;
		margin-top: 0.75rem;
	}
}

.glance-title {
	justify-self: stretch;
	padding-bottom: 0.55rem;
	border-bottom: 4px double var(--pink);
	font-family: var(--display);
	font-weight: 400;
	font-size: 2rem;
	line-height: 1;
}

.glance-list {
	justify-self: stretch;
	margin: 0;
}

.glance-row,
.glance-prose tr {
	display: grid;
	gap: 0.2rem 1rem;
	padding-block: 0.65rem;
	border-bottom: 1px solid rgb(50 85 164 / 0.45);
	font-size: 0.9375rem;
	line-height: 1.45;

	& dt,
	& td:first-child {
		padding-top: 0.15rem;
		font-family: var(--typed);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	& dd,
	& td {
		margin: 0;
		overflow-wrap: anywhere;
	}

	@media (min-width: 30rem) {
		grid-template-columns: 5.75rem minmax(0, 1fr);
		background: linear-gradient(var(--pink) 0 0) 6.4rem 0 / 1.5px 100% no-repeat;
	}
}

/* The body's own At a glance table, drawn as the same ruled rows. */
.glance-prose {
	justify-self: stretch;
	max-width: none;

	& table {
		display: block;
		overflow: visible;
		border-top: 0;
		font-size: inherit;
	}

	& thead {
		display: none;
	}

	& tbody {
		display: block;
	}

	& td {
		padding: 0;
		border: 0;
		vertical-align: baseline;
	}
}

@media (min-width: 64rem) {
	.w-cover {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}

	.glance-card {
		margin-top: 3.5rem;
	}
}

.w-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem 4rem;
	padding-top: 1rem;
}

.w-toc {
	align-self: start;

	& ol {
		display: grid;
		margin: 0.9rem 0 0;
		border-top: 1.5px dashed var(--blue);
	}

	& li {
		border-bottom: 1.5px dashed var(--blue);
	}

	& a {
		display: flex;
		align-items: center;
		min-height: 2.75rem;
		padding-block: 0.3rem;
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 1.3;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
			text-decoration-color: var(--pink);
			text-decoration-thickness: 0.18em;
		}
	}
}

@media (min-width: 64rem) {
	.w-body {
		grid-template-columns: 15rem minmax(0, 1fr);
	}

	.w-toc {
		position: sticky;
		top: 1.5rem;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
	}
}

.w-reading {
	min-width: 0;

	& > .lead {
		max-width: 68ch;
	}

	& > .zine-section:first-child,
	& > .lead + .zine-section {
		padding-top: 3rem;
	}
}

.alts-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;

	@media (min-width: 80rem) {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	}
}

.pick-insert {
	max-width: 30rem;
	margin-top: 1rem;
	rotate: -0.8deg;
}

.roundup-picks .entry-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

/* Screenshots, mounted with blue photo corners. */
.screenshot {
	display: grid;
	gap: 0.8rem;
	max-width: 56rem;
	margin-block: 1rem 2rem;

	& figcaption {
		max-width: 62ch;
		font-size: 0.9375rem;
		line-height: 1.45;
	}
}

.shot-frame {
	padding: 0.9rem;
	border: 1.5px solid var(--blue);
	rotate: -0.4deg;
	background:
		linear-gradient(135deg, var(--blue) 0 1.1rem, transparent 1.1rem) top left / 2.5rem 2.5rem no-repeat,
		linear-gradient(225deg, var(--blue) 0 1.1rem, transparent 1.1rem) top right / 2.5rem 2.5rem no-repeat,
		linear-gradient(45deg, var(--blue) 0 1.1rem, transparent 1.1rem) bottom left / 2.5rem 2.5rem no-repeat,
		linear-gradient(315deg, var(--blue) 0 1.1rem, transparent 1.1rem) bottom right / 2.5rem 2.5rem no-repeat,
		var(--paper-lift);
}

.checked-close {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 2.5rem;
	margin-top: 3.5rem;

	& > .date-stamp {
		--stamp-tilt: -5deg;
		padding: 0.7rem 1.3rem 0.8rem;

		& .date-stamp-label {
			font-size: 0.875rem;
		}

		& time {
			font-size: 1.5rem;
		}
	}

	& .neighbors {
		display: grid;
		gap: 0.75rem;
	}
}

/* ── the full index and the categories contents page ───────────────────── */
.index-groups {
	padding-top: 1rem;
}

.index-group {
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

.index-group-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin-bottom: 1.25rem;

	& .group-title {
		margin: 0;

		& a {
			color: inherit;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
				text-decoration-color: var(--pink);
				text-decoration-thickness: 0.08em;
			}
		}
	}
}

.category-contents {
	display: grid;
	gap: 1.25rem;
	padding-top: 1rem;
	max-width: 60rem;
	margin: 0;
}

.category-line {
	display: grid;
	gap: 0.35rem;
}

.category-line-title a {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	text-decoration: none;

	& .toc-name {
		font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	}

	&:hover .toc-name {
		text-decoration: underline;
		text-decoration-color: var(--pink);
		text-decoration-thickness: 0.1em;
	}
}

.category-line-description {
	max-width: 62ch;
	font-size: 0.9375rem;
}

.browse-all {
	padding-top: clamp(3.5rem, 7vw, 6rem);
}

.browse-card {
	--tilt: -0.6deg;
	max-width: 46rem;

	& > .cut-card {
		display: grid;
		gap: 1rem;
		justify-items: start;
		padding: 1.75rem 1.6rem 1.6rem;
	}

	& .section-title {
		margin: 0;
	}
}

.recent-block .slip-list {
	margin-top: 0.5rem;
}

/* ── the featured product's card: its own brand, tipped into the zine ──── */
.featured-pick,
.alternative-pick {
	--fp-bg: #0c0f1d;
	--fp-panel: #111827;
	--fp-tile: #1a2236;
	--fp-border: #1e2c48;
	--fp-orbit: #2e3f5c;
	--fp-fg: #eef2ff;
	--fp-text: #e8edf7;
	--fp-help: #8fa0c4;
	--fp-control: #8496bb;
	--fp-lime: #b8ff57;
	--fp-lime-hover: #a6e64e;
	--focus: var(--fp-lime);

	position: relative;
	display: grid;
	gap: 1rem;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border-radius: 1rem;
	background:
		radial-gradient(120% 90% at 100% 0%, #16204a 0%, transparent 55%),
		var(--fp-bg);
	color: var(--fp-text);
	font-family: "Montserrat", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
	font-size: 0.9375rem;
	line-height: 1.55;
	isolation: isolate;

	& a:not(.fp-action) {
		color: var(--fp-fg);
		text-decoration-color: var(--fp-lime);
		text-underline-offset: 0.2em;
	}

	& .disclosure {
		font-family: inherit;
	}
}

.fp-main {
	display: grid;
	gap: 0.875rem;
	align-content: start;
}

.fp-label {
	justify-self: start;
	padding: 0.25rem 0.625rem;
	border: 1px solid var(--fp-border);
	border-radius: 999px;
	background: var(--fp-panel);
	color: var(--fp-lime);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.fp-logo,
.fp-name {
	margin: 0;
	line-height: 0;

	& a {
		display: inline-block;
		border-radius: 0.25rem;
	}
}

.fp-name {
	color: var(--fp-fg);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.25;
}

.fp-logo-mark {
	width: min(13.5rem, 70%);
	height: auto;

	&.small {
		width: min(10rem, 60%);
	}
}

.fp-tagline {
	color: var(--fp-fg);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.fp-pitch,
.fp-copy {
	color: var(--fp-help);
}

.fp-copy p + p {
	margin-top: 0.75rem;
}

.fp-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem 1.25rem;
}

.fp-action {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.625rem 1.125rem;
	border-radius: 0.5rem;
	background: var(--fp-lime);
	color: var(--fp-bg);
	font-size: 0.9375rem;
	font-weight: 800;
	text-decoration: none;
	transition: background-color 180ms var(--ease-out);

	&:hover {
		background: var(--fp-lime-hover);
	}

	& .icon {
		width: 0.8em;
		height: 0.8em;
	}
}

.fp-secondary {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 700;
}

.fp-disclosure {
	padding-top: 0.875rem;
	border-top: 1px solid var(--fp-border);
	color: var(--fp-help);
	font-size: 0.8125rem;
}

/* The little board: two live tiles computed in the browser (featured-tiles.js), in the
   product's own tile chrome. Decorative, so aria-hidden. */
.fp-board {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 0.625rem;
}

.fp-tile {
	display: grid;
	grid-template-rows: auto 1fr;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--fp-border);
	border-radius: 0.5rem;
	background: var(--fp-tile);
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.4);
}

.fp-tile-bar {
	padding: 0.375rem 0.625rem;
	border-bottom: 1px solid rgb(255 255 255 / 0.04);
	background: var(--fp-panel);
	color: var(--fp-control);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.fp-tile-body {
	display: grid;
	align-content: center;
	gap: 0.375rem;
	min-height: 5.5rem;
	padding: 0.75rem 0.625rem;
}

.fp-clock {
	color: var(--fp-fg);
	font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.125rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;

	& small {
		margin-left: 0.2em;
		color: var(--fp-lime);
		font-size: 0.45em;
		font-weight: 800;
		letter-spacing: 0.04em;
	}
}

.fp-tile-sub {
	color: var(--fp-control);
	font-size: 0.6875rem;
	font-weight: 600;
}

.fp-dots {
	display: grid;
	grid-template-columns: repeat(auto-fill, 5px);
	gap: 2px;

	& i {
		width: 5px;
		height: 5px;
		border-radius: 1px;
		background: var(--fp-orbit);
	}

	& i.gone {
		background: var(--fp-lime);
	}

	& i.today {
		background: #ff3cac;
	}
}

/* ── the back cover ────────────────────────────────────────────────────── */
.colophon {
	--focus: var(--paper-lift);
	position: relative;
	flex-shrink: 0;
	overflow: clip;
	isolation: isolate;
	margin-top: clamp(4rem, 8vw, 7rem);
	padding-block: clamp(3rem, 6vw, 5rem) 2.5rem;
	background-color: var(--blue);
	background-image: var(--speckle), var(--ink-mottle);
	background-size: 200px 200px, 400px 400px;
	color: var(--paper-lift);

	& a {
		color: var(--paper-lift);
		text-decoration-color: var(--pink);
		text-decoration-thickness: 0.15em;
		text-underline-offset: 0.2em;
	}

	& h2 {
		margin-bottom: 1rem;
		font-family: var(--display);
		font-weight: 400;
		font-size: 1.875rem;
		line-height: 1;
	}
}

.colophon-screen {
	--cell: 12px;
	--tone: radial-gradient(circle at 100% 0%, rgb(0 0 0 / 0.5) 10%, rgb(255 255 255 / 0.5) 70%);
	top: 0;
	right: 0;
	z-index: -1;
	width: min(40rem, 90%);
	height: 100%;
}

.back-mark {
	margin-bottom: 2.5rem;
	color: var(--paper-lift);
	font-family: var(--display);
	font-size: clamp(3rem, 1rem + 8vw, 8rem);
	line-height: 0.86;

	&.overprint {
		isolation: isolate;
		mix-blend-mode: normal;

		&::after {
			z-index: -1;
			mix-blend-mode: normal;
		}
	}
}

.colophon-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem 4rem;

	@media (min-width: 56rem) {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}
}

.other-lists {
	display: grid;
	gap: 0.9rem;
	margin: 0;

	& li {
		display: grid;
		gap: 0.1rem;
	}

	& a {
		font-weight: 700;
	}

	& span {
		font-size: 0.9375rem;
	}
}

.imprint {
	display: grid;
	gap: 0.75rem;
	align-content: start;
	font-size: 0.9375rem;

	& p:first-of-type {
		font-family: var(--marker);
		font-size: 1.25rem;
		line-height: 1.3;
	}
}

.colophon-foot {
	display: grid;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 1.25rem;
	border-top: 1.5px dashed var(--paper-lift);
	font-family: var(--typed);
	font-size: 0.875rem;
	font-weight: 700;
}

.footer-featured {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	align-items: center;

	& .disclosure {
		font-size: inherit;
	}

	& a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	margin: 0;

	& a {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		min-height: 2.75rem;
	}
}

/* ── the brand page ────────────────────────────────────────────────────── */
.wordmark-large {
	font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);

	& .wordmark-mark {
		width: 1.9em;
	}
}

.swatch-list,
.icon-list,
.type-specimens {
	display: grid;
	gap: 0.75rem;
	margin: 0;
}

.swatch-list {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.swatch {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	align-items: center;
	gap: 0.25rem 0.9rem;
	font-weight: 600;

	& code {
		grid-column: 2;
		font-size: 0.875rem;
	}
}

.swatch-chip {
	grid-row: 1 / span 2;
	width: 3rem;
	height: 3rem;
	border: 1.5px solid var(--blue);
	border-radius: 50%;
}

.swatch-paper .swatch-chip { background: var(--paper); }
.swatch-paper-lift .swatch-chip { background: var(--paper-lift); }
.swatch-blue .swatch-chip { background: var(--blue); }
.swatch-pink .swatch-chip { background: var(--pink); }
.swatch-purple .swatch-chip { background: var(--purple); }

.icon-list {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));

	& li {
		display: flex;
		align-items: center;
		gap: 0.6rem;
	}

	& code {
		font-size: 0.875rem;
	}
}

.type-specimens {
	margin-bottom: 1.5rem;
	font-size: 1.375rem;
}

.specimen-display { font-family: var(--display); font-size: 2.25rem; line-height: 1; }
.specimen-text { font-family: var(--text); }
.specimen-stamp { font-family: var(--stamp); letter-spacing: 0.08em; text-transform: uppercase; }
.specimen-typed { font-family: var(--typed); font-weight: 700; }
.specimen-marker { font-family: var(--marker); }

.brand-insert {
	max-width: 32rem;
	margin-top: 1rem;
}

.brand-sheet .chip-list {
	flex-wrap: wrap;
	overflow: visible;
}

/* ── the dev schedule ──────────────────────────────────────────────────── */
.table-scroll {
	max-width: 100%;
	overflow-x: auto;
}

.schedule-table {
	border-collapse: collapse;
	font-size: 0.9375rem;

	& th,
	& td {
		padding: 0.4rem 0.9rem 0.4rem 0;
		border-bottom: 1.5px dashed var(--blue);
		text-align: left;
		vertical-align: top;
	}

	& th {
		font-family: var(--typed);
		font-size: 0.8125rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}
}

/* ── the maintainers' status page: plain and dense, for scanning ──────── */
.status-page {
	padding-block: 2rem 4rem;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.status-head {
	display: grid;
	gap: 0.35rem;
	padding-bottom: 1rem;
	border-bottom: 3px solid var(--blue);
}

.status-title {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
	line-height: 1;
}

.status-meta {
	font-family: var(--typed);
}

.status-section {
	padding-top: 1.75rem;
}

.status-heading {
	margin-bottom: 0.6rem;
	font-family: var(--stamp);
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.status-list {
	display: grid;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.status-facts {
	display: grid;
	grid-template-columns: minmax(8rem, max-content) 1fr;
	gap: 0.5rem 1.25rem;
	margin: 0;

	& dt {
		font-family: var(--typed);
		font-weight: 700;
	}

	& dd {
		margin: 0;
	}
}

.status-note {
	display: block;
	font-family: var(--typed);
	font-size: 0.8125rem;
}

.status-warning {
	font-weight: 700;
	color: var(--purple);
}

.status-table {
	width: 100%;
	border-collapse: collapse;

	& th,
	& td {
		padding: 0.4rem 0.9rem 0.4rem 0;
		border-bottom: 1.5px dashed var(--blue);
		text-align: left;
		vertical-align: top;
	}

	& thead th {
		font-family: var(--typed);
		font-size: 0.8125rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	& tbody th {
		font-family: var(--typed);
		font-weight: 700;
		white-space: nowrap;
	}
}

.state-overdue,
.state-soon,
.state-needs-refresh {
	font-weight: 700;
	color: var(--purple);
}

.state-held {
	font-style: italic;
}

@media (max-width: 40rem) {
	.status-facts {
		grid-template-columns: 1fr;
		gap: 0.2rem;

		& dd {
			margin-bottom: 0.6rem;
		}
	}
}

/* ── no scripting: every entry shows, the extras that need a script go ─── */
@media (scripting: none) {
	.stamp-bar {
		position: static;
	}

	.filter-chips .chip-list,
	.filter-chips .filter-status,
	.filter-chips .filter-heading,
	.row-controls,
	.fp-board {
		display: none;
	}

	.noscript-note {
		display: block;
		font-family: var(--typed);
		font-weight: 700;
	}
}

/* ── reduced motion: nothing glides, nothing settles into place ────────── */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}