/* ─────────────────────────────────────────────────────────────
   DESIGNED WITH AI — SHEET 01 · GLOBAL SPECIFICATION
   Ink on paper. All measures derive from the 8px drafting unit.
   Ported from the original Astro build; component-scoped styles are
   flattened here in section order (class names do not collide).
   ───────────────────────────────────────────────────────────── */

:root {
	--ink: #14120e;
	/* Text tones — kept dark enough to read as ink on paper. */
	--ink-70: rgba(20, 18, 14, 0.86);
	--ink-45: rgba(20, 18, 14, 0.62);
	/* Rule tones — the drafting apparatus stays quiet behind the text. */
	--ink-28: rgba(20, 18, 14, 0.3);
	--ink-14: rgba(20, 18, 14, 0.16);
	--ink-08: rgba(20, 18, 14, 0.08);
	--paper: #f2eee4;
	--paper-deep: #ebe6d9;

	/* Phosphor green — the one non-ink accent, for the terminal cursor */
	--term-green: #1c9d4a;

	--serif: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
	--mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	--sans: 'IBM Plex Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;

	/* Drafting unit and derived spacing */
	--u: 8px;
	--gutter: clamp(16px, 2vw, 28px);
	--margin: clamp(20px, 5vw, 88px);
	--measure: 1440px;

	--hairline: 0.5px;

	/* Binary fill — rows of ones and zeros in monospace, tiled and clipped
	   to the display letterforms so the type reads as engraved code. */
	--code-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='216'%3E%3Cg font-family='monospace' font-size='12' fill='%2314120e'%3E%3Ctext x='0' y='11'%3E100101101001011011010010%3C/text%3E%3Ctext x='0' y='23'%3E011010010110100100101101%3C/text%3E%3Ctext x='0' y='35'%3E110100101100101011010011%3C/text%3E%3Ctext x='0' y='47'%3E001011010011010110010110%3C/text%3E%3Ctext x='0' y='59'%3E101101001011001001101001%3C/text%3E%3Ctext x='0' y='71'%3E010010110100110110100101%3C/text%3E%3Ctext x='0' y='83'%3E110010100101101000110110%3C/text%3E%3Ctext x='0' y='95'%3E001101011010010110101001%3C/text%3E%3Ctext x='0' y='107'%3E101001100101100101011010%3C/text%3E%3Ctext x='0' y='119'%3E010110011010011000101101%3C/text%3E%3Ctext x='0' y='131'%3E110101100010110110010010%3C/text%3E%3Ctext x='0' y='143'%3E001010011101001011001101%3C/text%3E%3Ctext x='0' y='155'%3E100110100110101101001010%3C/text%3E%3Ctext x='0' y='167'%3E011001011001010010110110%3C/text%3E%3Ctext x='0' y='179'%3E101011010010110100101001%3C/text%3E%3Ctext x='0' y='191'%3E010100101101001011010110%3C/text%3E%3Ctext x='0' y='203'%3E110010110100101100101101%3C/text%3E%3Ctext x='0' y='215'%3E001101001011010010110010%3C/text%3E%3C/g%3E%3C/svg%3E");
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* ── Paper stock: fibre grain + a slow, uneven press impression ── */
.paper {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.5;
	background-image:
		radial-gradient(
			140% 120% at 50% 0%,
			transparent 40%,
			rgba(20, 18, 14, 0.045) 100%
		),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)' opacity='0.34'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
}

/* ── Type scale ───────────────────────────────────────────────── */

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-optical-sizing: auto;
}

p {
	margin: 0;
}

a {
	color: inherit;
}

/* Annotation voice — every technical mark on the sheet speaks in this */
.note {
	font-family: var(--mono);
	font-weight: 400;
	font-size: 9px;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-45);
	font-variant-numeric: tabular-nums;
}

.note--ink {
	color: var(--ink-70);
}

.body {
	font-size: clamp(15px, 1.05vw, 17px);
	line-height: 1.68;
	color: var(--ink);
	font-weight: 400;
}

/* ── The sheet: rigorous 12-column Swiss grid ─────────────────── */

.sheet {
	position: relative;
	z-index: 1;
	max-width: var(--measure);
	margin: 0 auto;
	padding: 0 var(--margin);
}

.grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--gutter);
}

/* ── Button ───────────────────────────────────────────────────── */
/* Solid ink block, paper knocked out of it. Inverts on hover. */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--ink);
	color: var(--paper);
	border: 1.5px solid var(--ink);
	border-radius: 0;
	font-family: var(--mono);
	font-weight: 400;
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 13px 20px;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background 0.18s ease,
		color 0.18s ease;
}

.btn:hover {
	background: var(--paper);
	color: var(--ink);
}

.btn:focus-visible {
	outline: 1.5px solid var(--ink);
	outline-offset: 3px;
}

.btn svg {
	width: 16px;
	height: 8px;
	flex: none;
}

/* ── Rules ────────────────────────────────────────────────────── */

.rule {
	height: var(--hairline);
	background: var(--ink-28);
	border: 0;
	margin: 0;
}

.rule--heavy {
	height: 1.5px;
	background: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

::selection {
	background: var(--ink);
	color: var(--paper);
}

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

/* ── Flash messages ───────────────────────────────────────────── */
/* Server feedback after a form redirect. Set as a ruled dispatch note. */
.flash {
	position: relative;
	z-index: 3;
	max-width: var(--measure);
	margin: 0 auto;
	padding: 10px var(--margin);
}
.flash__msg {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 10px 14px;
	border: var(--hairline) solid var(--ink);
}
.flash__msg--notice {
	background: var(--ink);
	color: var(--paper);
}
.flash__msg--alert {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}

/* Inline validation errors under a field */
.field-error {
	margin-top: 7px;
	color: #a2321f;
}

/* ── Coming-soon corner ribbon (top-left) ─────────────────────── */
.ribbon {
	position: fixed;
	top: 0;
	left: 0;
	width: 150px;
	height: 150px;
	overflow: hidden;
	z-index: 50;
	pointer-events: none;
}
.ribbon__band {
	position: absolute;
	top: 30px;
	left: -54px;
	width: 200px;
	transform: rotate(-45deg);
	background: #b23a2b;
	color: var(--paper);
	font-family: var(--mono);
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	padding: 7px 0;
	box-shadow:
		0 3px 10px rgba(20, 18, 14, 0.28),
		inset 0 0 0 1px rgba(242, 238, 228, 0.55);
}

/* On a narrow sheet the brand sits close to the top-left corner, so move the
   ribbon to the top-right, where the stacked masthead leaves it clear. */
@media (max-width: 760px) {
	.ribbon {
		left: auto;
		right: 0;
	}
	.ribbon__band {
		left: auto;
		right: -54px;
		transform: rotate(45deg);
	}
}

/* Dotted drafting grid — 32px field, laid under the whole sheet */
.drafting-grid {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(circle at 1px 1px, var(--ink-14) 0.5px, transparent 0.5px);
	background-size: 32px 32px;
	mask-image: radial-gradient(120% 90% at 50% 40%, #000 25%, transparent 78%);
	-webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 25%, transparent 78%);
}

/* ═══════════════════════════════════════════════════════════════
   FRAME — sheet furniture (registration marks, trim, coordinates)
   ═══════════════════════════════════════════════════════════════ */

.frame {
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	color: var(--ink-45);
}

.reg {
	position: absolute;
	width: 22px;
	height: 22px;
}
.reg--tl {
	top: 14px;
	left: 14px;
}
.reg--tr {
	top: 14px;
	right: 14px;
}
.reg--bl {
	bottom: 14px;
	left: 14px;
}
.reg--br {
	bottom: 14px;
	right: 14px;
}

.trim {
	position: absolute;
	background: var(--ink-28);
}
.trim--t,
.trim--b {
	left: 52px;
	right: 52px;
	height: var(--hairline);
}
.trim--t {
	top: 25px;
}
.trim--b {
	bottom: 25px;
}
.trim--l,
.trim--r {
	top: 52px;
	bottom: 52px;
	width: var(--hairline);
}
.trim--l {
	left: 25px;
}
.trim--r {
	right: 25px;
}

/* Coordinate index — sits just inside the trim */
.coords {
	position: absolute;
	display: flex;
	justify-content: space-between;
}
.coords--x {
	top: 8px;
	left: 72px;
	right: 72px;
}
.coords--y {
	left: 7px;
	top: 72px;
	bottom: 72px;
	flex-direction: column;
	align-items: center;
}
.coords--y .note {
	writing-mode: vertical-rl;
}
.coords .note {
	font-size: 8px;
	letter-spacing: 0.1em;
	color: var(--ink-28);
}

/* Measurement ticks — 8px drafting unit */
.ticks {
	position: absolute;
	top: 52px;
	bottom: 52px;
	width: 5px;
	background-image: repeating-linear-gradient(
		to bottom,
		var(--ink-28) 0 var(--hairline),
		transparent var(--hairline) 8px
	);
}
.ticks--l {
	left: 25px;
}
.ticks--r {
	right: 25px;
	transform: scaleX(-1);
}

@media (max-width: 760px) {
	.coords,
	.ticks,
	.trim--l,
	.trim--r {
		display: none;
	}
	.trim--t,
	.trim--b {
		left: 40px;
		right: 40px;
	}
	.reg {
		width: 16px;
		height: 16px;
	}
}

/* ═══════════════════════════════════════════════════════════════
   MASTHEAD — running head
   ═══════════════════════════════════════════════════════════════ */

.masthead {
	position: relative;
	z-index: 3;
	padding-top: 44px;
}

.masthead__inner {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 12px;
}

.masthead__brand {
	text-decoration: none;
}
.masthead__name {
	font-family: var(--serif);
	font-size: 19px;
	font-weight: 500;
	font-variation-settings: 'opsz' 16;
	letter-spacing: 0.01em;
}

.masthead__nav {
	display: flex;
	gap: 26px;
}

.mlink {
	text-decoration: none;
	color: var(--ink);
	font-weight: 500;
	position: relative;
	transition: color 0.2s ease;
}
.mlink::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: var(--hairline);
	background: var(--ink);
	transition: width 0.25s ease;
}
.mlink:hover {
	color: var(--ink);
}
.mlink:hover::after {
	width: 100%;
}

.masthead__social {
	display: flex;
	align-items: center;
	gap: 14px;
}
.masthead__social-link {
	display: inline-flex;
	color: var(--ink-70);
	transition: color 0.18s ease;
}
.masthead__social-link:hover {
	color: var(--ink);
}
.masthead__social-link svg {
	width: 16px;
	height: 16px;
	display: block;
}
/* The YouTube mark only fills ~70% of its box, so scale it up. */
.masthead__social-link--yt svg {
	width: 21px;
	height: 21px;
}

@media (max-width: 760px) {
	.masthead__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
	.masthead__nav {
		flex-wrap: wrap;
		gap: 8px 18px;
	}
}

/* ═══════════════════════════════════════════════════════════════
   HERO — Plate I, the engineered headline
   ═══════════════════════════════════════════════════════════════ */

.hero {
	padding-top: clamp(60px, 9vh, 104px);
	padding-bottom: clamp(48px, 7vh, 88px);
}

.hero__stamp {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: clamp(28px, 5vh, 52px);
	min-height: 1.4em; /* reserve the line so typing doesn't shift layout */
}

/* Typewriter — the tagline types itself out, trailing a phosphor cursor */
.typewriter {
	color: var(--ink-70);
	display: inline-flex;
	align-items: baseline;
}
.typewriter__cursor {
	display: inline-block;
	width: 2px;
	height: 1.05em;
	margin-left: 3px;
	background: var(--term-green);
	transform: translateY(0.16em);
	animation: cursor-blink 1.06s steps(1) infinite;
}
@keyframes cursor-blink {
	0%,
	50% {
		opacity: 1;
	}
	50.01%,
	100% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.typewriter__cursor {
		animation: none;
	}
}

.type-block {
	position: relative;
	--fs: clamp(56px, 13.2vw, 188px);
	font-size: var(--fs);

	/* Metrics of Bodoni Moda, opsz 96, measured in em. Single source of
	   truth for every guide/dimension/overshoot below. */
	--font-ascent: 1.125em;
	--font-descent: 0.4em;
	--cap-h: 0.75em;
	--x-h: 0.46em;
	--desc-d: 0.26em;
	--lh: 1.1;

	--half-lead: calc((var(--lh) * 1em - var(--font-ascent) - var(--font-descent)) / 2);
	--pad-t: 0.16em;
	--baseline: calc(var(--pad-t) + var(--half-lead) + var(--font-ascent));

	padding-block: var(--pad-t) 0.22em;
	margin-bottom: clamp(40px, 6vh, 76px);
}

.hero__title {
	position: relative;
	z-index: 2;
	font-size: 1em;
	line-height: var(--lh);
	letter-spacing: -0.015em;
}

.type-block__compass {
	position: absolute;
	z-index: 0;
	right: calc(0.4em + 15px);
	top: calc(var(--baseline) - var(--cap-h) - 0.62em);
	height: calc(var(--cap-h) + var(--desc-d) + 1.5em);
	pointer-events: none;
}
.type-block__compass svg {
	height: 100%;
	width: auto;
	display: block;
}

.hero__line {
	display: block;
	white-space: nowrap;
}
.hero__line--2 {
	padding-left: 1.02em;
}

/* Engraved fill: binary tile clipped to the letterform, plus the cut outline. */
.engraved {
	background-image: var(--code-tile);
	background-repeat: repeat;
	background-size: 132px 190px;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-stroke: 0.8px var(--ink);
	font-variation-settings: 'opsz' 96;
	font-weight: 500;
}

.engraved--italic {
	font-style: italic;
	font-weight: 400;
}

/* ── Guides ───────────────────────────────────────────────────── */

.guides {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.guide {
	position: absolute;
	left: -14px;
	right: -14px;
	height: var(--hairline);
	background: linear-gradient(
		to right,
		var(--ink-28) 0 4px,
		transparent 4px 8px
	);
	background-size: 8px var(--hairline);
}

.guide--solid {
	background: var(--ink-45);
}

.guide__label {
	position: absolute;
	right: 0;
	bottom: 3px;
	font-family: var(--mono);
	font-size: 8px;
	letter-spacing: 0.16em;
	color: var(--ink-45);
}
.guide__label--ink {
	color: var(--ink-70);
}

.guide--cap {
	top: calc(var(--baseline) - var(--cap-h));
}
.guide--x {
	top: calc(var(--baseline) - var(--x-h));
}
.guide--base {
	top: var(--baseline);
}
.guide--desc {
	top: calc(var(--baseline) + var(--desc-d));
}

/* ── Optical overshoot ────────────────────────────────────────── */

.overshoot {
	--r: 0.19em;
	position: absolute;
	border: var(--hairline) solid var(--ink-45);
	border-radius: 50%;
	width: calc(var(--r) * 2);
	height: calc(var(--r) * 2);
}
.overshoot--x {
	top: calc(var(--baseline) - var(--x-h) - var(--r));
	left: calc(0.9654em - var(--r));
}
.overshoot--x::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 100%;
	width: var(--hairline);
	height: 30px;
	background: var(--ink-45);
}
.overshoot--base {
	--r: 0.15em;
	top: calc(var(--baseline) - var(--r));
	left: calc(3.3298em - var(--r));
}
.overshoot__note {
	position: absolute;
	bottom: calc(100% + 34px);
	left: 50%;
	white-space: nowrap;
	font-size: 8px;
	transform: translateX(-50%);
}

/* ── Dimension line ───────────────────────────────────────────── */

.dim {
	position: absolute;
	width: var(--hairline);
	background: var(--ink-45);
}
.dim--cap {
	left: -14px;
	top: calc(var(--baseline) - var(--cap-h));
	height: var(--cap-h);
}
.dim--desc {
	left: 4.62em;
	top: var(--baseline);
	height: var(--desc-d);
}
.dim__arrow {
	position: absolute;
	left: 50%;
	width: 0;
	height: 0;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	transform: translateX(-50%);
}
.dim__arrow--up {
	top: 0;
	border-bottom: 5px solid var(--ink-45);
}
.dim__arrow--down {
	bottom: 0;
	border-top: 5px solid var(--ink-45);
}
.dim__value {
	position: absolute;
	right: calc(100% + 6px);
	top: 50%;
	transform: translateY(-50%);
	text-align: right;
	font-size: 8px;
	line-height: 1.3;
}
.dim__value--r {
	right: auto;
	left: calc(100% + 6px);
	text-align: left;
}

@media (max-width: 760px) {
	.guide__label,
	.dim,
	.overshoot {
		display: none;
	}
	.hero__line--2 {
		padding-left: 0.5em;
	}
}

/* ═══════════════════════════════════════════════════════════════
   COMPASS — Fig. 1.1 wing divider
   ═══════════════════════════════════════════════════════════════ */

.compass {
	height: 100%;
	width: auto;
	display: block;
	overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════
   ANATOMY — Plate II, "Our purpose"
   ═══════════════════════════════════════════════════════════════ */

.anatomy {
	padding-block: clamp(56px, 9vh, 112px);
}

.anatomy__head {
	margin-bottom: clamp(32px, 5vh, 56px);
}
.anatomy__title-col {
	grid-column: 1 / span 12;
}
.anatomy__title {
	font-size: clamp(32px, 4.4vw, 60px);
	line-height: 1;
	letter-spacing: -0.02em;
	font-weight: 500;
	font-variation-settings: 'opsz' 72;
	margin: 14px 0 10px;
}
.anatomy__sub {
	color: var(--ink-45);
}

.anatomy__body {
	row-gap: 40px;
	align-items: center;
}

.anatomy__plate {
	grid-column: 1 / span 7;
	margin: 0;
}
.anatomy__plate svg {
	width: 100%;
	height: auto;
	display: block;
}

.anatomy__text {
	grid-column: 9 / span 4;
	display: grid;
	gap: 18px;
}

.anatomy__mark {
	display: flex;
	flex-direction: column;
	gap: 5px;
	border-top: var(--hairline) solid var(--ink-28);
	padding-top: 12px;
	margin-top: 6px;
}

@media (max-width: 900px) {
	.anatomy__title-col,
	.anatomy__plate,
	.anatomy__text {
		grid-column: 1 / span 12;
	}
}

/* ═══════════════════════════════════════════════════════════════
   PLATES — Plate III, the episode catalogue
   ═══════════════════════════════════════════════════════════════ */

.plates {
	padding-block: clamp(56px, 9vh, 112px);
}

.plates__head {
	margin-bottom: clamp(28px, 4vh, 48px);
}
.plates__title-col {
	grid-column: 1 / span 12;
}
.plates__title {
	font-size: clamp(32px, 4.4vw, 60px);
	line-height: 1;
	letter-spacing: -0.02em;
	font-weight: 500;
	font-variation-settings: 'opsz' 72;
	margin: 14px 0 10px;
}
.plates__sub {
	color: var(--ink-45);
}

.plates__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1.5px solid var(--ink);
}

.plate__row {
	align-items: baseline;
	padding: 18px 0;
	border-bottom: var(--hairline) solid var(--ink-14);
	row-gap: 6px;
}
.plate__row--head {
	padding: 8px 0;
	border-bottom: var(--hairline) solid var(--ink-28);
}

.plate__no {
	grid-column: 1 / span 1;
}
.plate__title-c {
	grid-column: 2 / span 3;
}
.plate__subject {
	grid-column: 5 / span 4;
}
.plate__guest {
	grid-column: 9 / span 1;
}
.plate__len {
	grid-column: 10 / span 1;
}
.plate__status {
	grid-column: 11 / span 2;
	text-align: right;
	white-space: nowrap;
}

.plate__name {
	font-size: clamp(19px, 1.7vw, 25px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-variation-settings: 'opsz' 36;
}

/* Episode titles link through to their show page; keep the ink look. */
.plate__link {
	text-decoration: none;
	color: inherit;
	transition: color 0.2s ease;
}
.plate__link:hover {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: var(--hairline);
}

.plate__desc {
	font-size: 14px;
	line-height: 1.55;
}

.pip {
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ink);
	margin-right: 6px;
	vertical-align: 1px;
}

.plates__foot {
	margin-top: 16px;
	color: var(--ink-45);
}

@media (max-width: 900px) {
	.plate__row--head {
		display: none;
	}
	.plate__no {
		grid-column: 1 / span 12;
	}
	.plate__title-c {
		grid-column: 1 / span 12;
	}
	.plate__subject {
		grid-column: 1 / span 12;
	}
	.plate__guest,
	.plate__len {
		display: none;
	}
	.plate__status {
		grid-column: 1 / span 12;
		text-align: left;
		margin-top: 4px;
	}
}

/* ═══════════════════════════════════════════════════════════════
   GUEST — Plate IV, submission slip
   ═══════════════════════════════════════════════════════════════ */

.guest {
	padding-block: clamp(56px, 9vh, 112px);
}

.guest__head {
	margin-bottom: clamp(32px, 5vh, 52px);
}
.guest__title-col {
	grid-column: 1 / span 12;
}
.guest__title {
	font-size: clamp(30px, 4.2vw, 58px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 16px 0 12px;
}
.guest__sub {
	color: var(--ink-45);
}

.engraved-md {
	background-image: repeating-linear-gradient(
			48deg,
			var(--ink) 0 0.5px,
			transparent 0.5px 3.2px
		),
		repeating-linear-gradient(-42deg, rgba(20, 18, 14, 0.5) 0 0.4px, transparent 0.4px 6.4px);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-stroke: 0.6px var(--ink);
	font-variation-settings: 'opsz' 72;
	font-weight: 500;
}
.engraved-md--italic {
	font-style: italic;
	font-weight: 400;
}

.guest__body {
	row-gap: 36px;
	align-items: start;
}

.guest__lede {
	grid-column: 1 / span 3;
}

.guest__form {
	grid-column: 5 / span 8;
}

.guest__fields {
	row-gap: 26px;
}

.gfield {
	display: flex;
	flex-direction: column;
}
.gfield--6 {
	grid-column: span 6;
}
.gfield--12 {
	grid-column: span 12;
}

.gfield__label {
	display: flex;
	align-items: baseline;
	gap: 9px;
	color: var(--ink-70);
	margin-bottom: 6px;
}
.gfield__no {
	color: var(--ink-45);
}

.gfield__input {
	border: 0;
	border-bottom: 1.5px solid var(--ink);
	background: transparent;
	font-family: var(--serif);
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 400;
	font-variation-settings: 'opsz' 24;
	color: var(--ink);
	padding: 5px 0 8px;
	outline: none;
	width: 100%;
	border-radius: 0;
}
.gfield__input::placeholder {
	color: var(--ink-28);
	font-style: italic;
}
.gfield__input:focus-visible {
	box-shadow: 0 1.5px 0 var(--ink);
}

.gfield__input--area {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	resize: vertical;
	border: 1.5px solid var(--ink);
	padding: 12px 14px;
}
.gfield__input--area:focus-visible {
	box-shadow: 0 0 0 1px var(--ink);
}

.gfield__hint {
	margin-top: 7px;
	color: var(--ink-45);
}

.guest__submit-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 30px;
	border-top: var(--hairline) solid var(--ink-28);
	padding-top: 16px;
}

.guest__note {
	color: var(--ink-45);
}

@media (max-width: 900px) {
	.guest__title-col,
	.guest__lede,
	.guest__form {
		grid-column: 1 / span 12;
	}
	.gfield--6 {
		grid-column: span 12;
	}
}

/* ═══════════════════════════════════════════════════════════════
   SUBSCRIBE — Plate V, mailing list slip
   ═══════════════════════════════════════════════════════════════ */

.sub {
	padding-block: clamp(56px, 9vh, 112px);
}

.sub__inner {
	border-top: 1.5px solid var(--ink);
	padding-top: 40px;
	row-gap: 28px;
}

.sub__mark {
	grid-column: 1 / span 1;
	color: var(--ink-45);
}
.sub__mark svg {
	width: 34px;
	height: 34px;
	display: block;
}

.sub__body {
	grid-column: 3 / span 7;
}

.sub__title {
	font-size: clamp(38px, 6vw, 86px);
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: 20px;
}

.engraved-sm {
	background-image: repeating-linear-gradient(
			48deg,
			var(--ink) 0 0.5px,
			transparent 0.5px 3.2px
		),
		repeating-linear-gradient(-42deg, rgba(20, 18, 14, 0.5) 0 0.4px, transparent 0.4px 6.4px);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-stroke: 0.6px var(--ink);
	font-variation-settings: 'opsz' 96;
	font-weight: 500;
}
.engraved-sm--italic {
	font-style: italic;
	font-weight: 400;
}

.sub__lede {
	max-width: 46ch;
	margin-bottom: 34px;
}

/* ── Ruled field ──────────────────────────────────────────────── */

.field__label {
	display: block;
	margin-bottom: 8px;
	color: var(--ink-45);
}

.field__row {
	display: flex;
	align-items: stretch;
	gap: 16px;
	border-bottom: 1.5px solid var(--ink);
	max-width: 560px;
}

.field__input {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: var(--serif);
	font-size: clamp(20px, 2vw, 27px);
	font-weight: 400;
	font-variation-settings: 'opsz' 36;
	color: var(--ink);
	padding: 6px 0 10px;
	outline: none;
	min-width: 0;
}
.field__input::placeholder {
	color: var(--ink-28);
	font-style: italic;
}
.field__input:focus-visible {
	outline: none;
}
.field__row:focus-within {
	border-bottom-color: var(--ink);
	box-shadow: 0 1.5px 0 var(--ink);
}

.field__submit {
	align-self: center;
	margin-bottom: 6px;
}

.field__hint {
	margin-top: 10px;
	color: var(--ink-45);
}

.sub__dim {
	grid-column: 11 / span 2;
	text-align: right;
	align-self: end;
	color: var(--ink-45);
	white-space: nowrap;
}

@media (max-width: 900px) {
	.sub__mark {
		grid-column: 1 / span 12;
	}
	.sub__body {
		grid-column: 1 / span 12;
	}
	.sub__dim {
		display: none;
	}
	.field__row {
		flex-direction: column;
		gap: 0;
		align-items: flex-start;
	}
	.field__submit {
		padding: 12px 0;
	}
}

/* ═══════════════════════════════════════════════════════════════
   EPISODE SHOW — Plate detail
   ═══════════════════════════════════════════════════════════════ */

.episode {
	padding-block: clamp(56px, 9vh, 112px);
}
.episode__head {
	border-top: 1.5px solid var(--ink);
	padding-top: 24px;
	margin-bottom: clamp(28px, 4vh, 44px);
}
.episode__no {
	color: var(--ink-45);
	margin-bottom: 14px;
	display: block;
}
.episode__title {
	font-size: clamp(34px, 6vw, 76px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	font-weight: 500;
	font-variation-settings: 'opsz' 96;
	margin-bottom: 16px;
}
.episode__meta {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 12px;
}
.episode__body {
	max-width: 62ch;
	margin-top: 28px;
}
.episode__embed {
	margin-top: 36px;
	aspect-ratio: 16 / 9;
	width: 100%;
	max-width: 820px;
	border: 1.5px solid var(--ink);
}
.episode__embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.episode__back {
	display: inline-block;
	margin-top: 40px;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT — the host page
   ═══════════════════════════════════════════════════════════════ */

.about {
	padding-block: clamp(56px, 9vh, 112px);
}
.about__head {
	margin-bottom: clamp(32px, 5vh, 56px);
}
.about__title-col {
	grid-column: 1 / span 12;
}
.about__title {
	font-size: clamp(34px, 5vw, 68px);
	line-height: 1;
	letter-spacing: -0.02em;
	font-weight: 500;
	font-variation-settings: 'opsz' 72;
	margin: 14px 0 10px;
}
.about__sub {
	color: var(--ink-45);
}

.about__body {
	row-gap: 40px;
	align-items: start;
}

.about__portrait {
	grid-column: 1 / span 5;
	margin: 0;
}
.about__portrait img {
	width: 100%;
	height: auto;
	display: block;
	border: 1.5px solid var(--ink);
	/* Rendered as a printed plate to sit with the ink-on-paper sheet. */
	filter: grayscale(100%) contrast(1.03);
}
.about__portrait figcaption {
	margin-top: 10px;
	color: var(--ink-45);
}

.about__text {
	grid-column: 7 / span 6;
	display: grid;
	gap: 18px;
}
.about__link {
	margin-top: 6px;
}

@media (max-width: 900px) {
	.about__title-col,
	.about__portrait,
	.about__text {
		grid-column: 1 / span 12;
	}
	.about__portrait {
		max-width: 340px;
	}
}

/* ═══════════════════════════════════════════════════════════════
   COLOPHON — footer
   ═══════════════════════════════════════════════════════════════ */

.colophon {
	padding-block: clamp(48px, 7vh, 88px) clamp(40px, 6vh, 64px);
}

.colophon__inner {
	border-top: 1.5px solid var(--ink);
	padding-top: 32px;
	row-gap: 36px;
}

.colophon__h {
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: var(--hairline) solid var(--ink-28);
}

.colophon__set {
	grid-column: 1 / span 4;
}
.colophon__p {
	font-size: 13.5px;
	line-height: 1.6;
}
.colophon__host-link {
	margin-top: 12px;
}

.colophon__rev {
	grid-column: 6 / span 3;
}

.colophon__links {
	grid-column: 10 / span 3;
}
.links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 7px;
}
.link {
	text-decoration: none;
	color: var(--ink-70);
	transition: color 0.2s ease;
	position: relative;
}
.link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 0;
	height: var(--hairline);
	background: var(--ink);
	transition: width 0.25s ease;
}
.link:hover {
	color: var(--ink);
}
.link:hover::after {
	width: 100%;
}

.colophon__base {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: clamp(40px, 6vh, 72px);
	padding-top: 12px;
	border-top: var(--hairline) solid var(--ink-28);
	color: var(--ink-45);
}

@media (max-width: 900px) {
	.colophon__set,
	.colophon__rev,
	.colophon__links {
		grid-column: 1 / span 12;
	}
}