/*!
 * NOIC — No One Is Coming
 * Hand-written modern CSS. One compiled stylesheet, organised by component.
 *
 * TABLE OF CONTENTS
 *   1. Tokens
 *   2. Reset & base
 *   3. Utilities (kicker, rule, dot, wrap, buttons, links)
 *   4. Header & navigation
 *   5. Hero (radar instrument)
 *   6. Homepage screens (premise, drop, range, host, notes)
 *   7. Episode cards (feature / card / row)
 *   8. Newsletter (paper panel)
 *   9. Footer
 *  10. Episode page (header, question, player, prose)
 *  11. Content blocks (signal, act, what-to-do, sources, resources,
 *      guest, transcript, share, season nav)
 *  12. Archives (episodes, field notes) & pagination
 *  13. Field note single, generic page (paper reading)
 *  14. About page
 *  15. 404
 *  16. Accessibility & motion
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */
:root {
	/* Brand palette — single source of truth with theme.json. */
	--noic-black:    #050505;
	--noic-bone:     #F2E9DA;
	--noic-orange:   #F4511E;
	--noic-smoke:    #A7A39B;
	--noic-charcoal: #222220;
	--noic-ash:      #D1CBC1;
	--noic-paper:    #F6F1E8;

	/* Derived surfaces & lines. */
	--lift:            #0B0B0A;                       /* raised panel on black */
	--ink:             #191713;                       /* text on paper */
	--ink-soft:        #57503F;
	--hairline:        rgba(242, 233, 218, 0.14);
	--hairline-strong: rgba(242, 233, 218, 0.32);

	/* Episode accent tone (orange stays the constant). */
	--tone: var(--noic-orange);

	/* Type. Files load via theme.json font faces. */
	--font-display: "Montserrat", "Avenir Next", "Century Gothic", sans-serif;
	--font-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

	/* Tracking scale for uppercase display type. */
	--track-1: 0.08em;
	--track-2: 0.12em;
	--track-3: 0.16em;

	/* Space. */
	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2.5rem;
	--sp-5: 4rem;
	--sp-6: clamp(4rem, 10vh, 6.5rem);
	--sp-7: clamp(5.5rem, 16vh, 10rem);

	/* Measure. One rail for the whole site (--w-wide); reading widths are
	   capped per component, never by swapping containers. */
	--w-content: 44rem;
	--w-reading: 56rem;
	--w-wide: 76rem;
	--pad-x: clamp(1.25rem, 5vw, 3rem);
	/* Inset from a full-bleed edge to the shared rail. */
	--rail-x: max(var(--pad-x), calc((100% - var(--w-wide)) / 2));
}

/* Muted, cinematic per-episode tones (scoped by body class). */
.noic-tone-ocean    { --tone: #5E7A8A; }
.noic-tone-amber    { --tone: #9A6A32; }
.noic-tone-steel    { --tone: #6E7780; }
.noic-tone-green    { --tone: #47695A; }
.noic-tone-maritime { --tone: #3E5F6D; }
.noic-tone-violet   { --tone: #5C5266; }

/* ------------------------------------------------------------------ *
 * 2. Reset & base
 * ------------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--noic-black);
	color: var(--noic-bone);
	font-family: var(--font-serif);
	font-size: 1.125rem; /* 18px floor everywhere, including mobile */
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	margin: 0;
	overflow-wrap: break-word;
}

p {
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

ul, ol {
	margin: 0;
	padding: 0;
}

::selection {
	background: var(--noic-orange);
	color: var(--noic-black);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ *
 * 3. Utilities
 * ------------------------------------------------------------------ */
.noic-mono {
	font-family: var(--font-mono);
	font-size: 0.8125rem; /* 13px minimum — never tiny-for-aesthetics */
	font-weight: 400;
	letter-spacing: var(--track-2);
	text-transform: uppercase;
}

.noic-wrap,
.noic-wrap--wide {
	max-width: calc(var(--w-wide) + 2 * var(--pad-x));
	margin-inline: auto;
	padding-inline: var(--pad-x);
}

/* The orange dot — the universal brand device. Used sparingly. */
.noic-dot {
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--noic-orange);
	flex: none;
}

/* Mono kicker with its short leading rule. */
.noic-kicker {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	color: var(--noic-smoke);
	letter-spacing: var(--track-3);
	margin-bottom: var(--sp-3);
}

.noic-kicker__rule {
	width: 1.75rem;
	height: 1px;
	background: var(--hairline-strong);
	flex: none;
}

/* The plot rule: hairline with the orange tip from the logo lockup. */
.noic-rule {
	position: relative;
	height: 1px;
	background: var(--hairline);
	margin-block: var(--sp-4) 0;
}

.noic-rule__tip {
	position: absolute;
	right: 0;
	top: 0;
	width: 2rem;
	height: 1px;
	background: var(--noic-orange);
}

/* Buttons: thin-line instrument controls, never solid orange slabs. */
.noic-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	padding: 1em 1.6em;
	border: 1px solid var(--hairline-strong);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--track-3);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--noic-bone);
	background: transparent;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.noic-btn:hover {
	border-color: var(--noic-orange);
}

.noic-btn--primary {
	border-color: rgba(242, 233, 218, 0.5);
}

.noic-arrowlink {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: var(--track-2);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--noic-ash);
	transition: color 0.2s ease;
}

.noic-arrowlink:hover {
	color: var(--noic-bone);
}

.noic-arrowlink span {
	transition: transform 0.25s ease;
}

.noic-arrowlink:hover span {
	transform: translateX(4px);
}

.noic-arrowlink--back:hover span {
	transform: translateX(-4px);
}

.noic-empty {
	color: var(--noic-smoke);
	font-style: italic;
	padding-block: var(--sp-5);
}

/* ------------------------------------------------------------------ *
 * 4. Header & navigation
 * ------------------------------------------------------------------ */
.noic-skip {
	position: absolute;
	top: -100vh;
	left: var(--pad-x);
	z-index: 200;
	background: var(--noic-bone);
	color: var(--noic-black);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	letter-spacing: var(--track-2);
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.9em 1.4em;
}

.noic-skip:focus-visible {
	top: 0.75rem;
}

.noic-header {
	position: relative;
	z-index: 50;
	background: var(--noic-black);
	border-bottom: 1px solid var(--hairline);
}

.noic-header--overlay {
	position: absolute;
	inset-inline: 0;
	top: 0;
	background: transparent;
	border-bottom: 0;
}

.noic-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: 1.1rem var(--pad-x);
	max-width: calc(var(--w-wide) + 2 * var(--pad-x));
	margin-inline: auto;
}

.noic-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	text-decoration: none;
	color: var(--noic-bone);
}

.noic-brand__mark {
	display: inline-flex;
	color: var(--noic-bone);
}

.noic-brand__word {
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	white-space: nowrap;
}

.noic-nav__list {
	display: flex;
	gap: 2.25rem;
	list-style: none;
}

.noic-nav__list a {
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: var(--track-3);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--noic-ash);
	transition: color 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}

.noic-nav__list a:hover {
	color: var(--noic-bone);
}

/* Active section: the orange dot device. */
.noic-nav__list .current-menu-item > a,
.noic-nav__list a[aria-current] {
	color: var(--noic-bone);
}

.noic-nav__list .current-menu-item > a::before,
.noic-nav__list a[aria-current]::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--noic-orange);
}

.noic-nav__coords {
	display: none;
	color: rgba(167, 163, 155, 0.7);
	letter-spacing: var(--track-2);
}

.noic-navtoggle {
	display: none;
	align-items: center;
	gap: 0.8rem;
	background: none;
	border: 0;
	padding: 0.4rem 0;
	color: var(--noic-bone);
	cursor: pointer;
	position: relative;
	z-index: 60;
}

.noic-navtoggle__label {
	letter-spacing: var(--track-3);
}

.noic-navtoggle__glyph {
	display: inline-flex;
	flex-direction: column;
	gap: 6px;
	width: 22px;
}

.noic-navtoggle__glyph span {
	height: 1px;
	background: var(--noic-bone);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.noic-navtoggle[aria-expanded="true"] .noic-navtoggle__glyph span:first-child {
	transform: translateY(3.5px) rotate(45deg);
}

.noic-navtoggle[aria-expanded="true"] .noic-navtoggle__glyph span:last-child {
	transform: translateY(-3.5px) rotate(-45deg);
}

@media (max-width: 859px) {
	.noic-navtoggle {
		display: inline-flex;
	}

	.noic-nav {
		position: fixed;
		inset: 0;
		z-index: 40;
		display: none;
		flex-direction: column;
		justify-content: center;
		padding: var(--pad-x);
		background: rgba(5, 5, 5, 0.985);
	}

	.noic-nav.is-open {
		display: flex;
	}

	.noic-nav__list {
		flex-direction: column;
		gap: 2rem;
	}

	.noic-nav__list a {
		font-size: 1.625rem;
		letter-spacing: var(--track-2);
	}

	.noic-nav__coords {
		display: block;
		position: absolute;
		bottom: 2rem;
		left: var(--pad-x);
	}

	body.noic-nav-open {
		overflow: hidden;
	}
}

/* ------------------------------------------------------------------ *
 * 5. Hero — the radar instrument
 * ------------------------------------------------------------------ */
.noic-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding: 7rem var(--pad-x) clamp(4rem, 10vh, 6.5rem);
}

/* The instrument sits in its own pool of light, over faint scanlines. */
.noic-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(52rem 52rem at 76% 44%, rgba(var(--pool-rgb, 242, 233, 218), 0.085), transparent 62%),
		repeating-linear-gradient(0deg, rgba(242, 233, 218, 0.015) 0 1px, transparent 1px 3px);
}

.noic-hero > * {
	position: relative;
}

.noic-hero__radar {
	position: absolute;
	top: 50%;
	right: max(-15rem, -15vw);
	transform: translateY(-52%);
	width: min(118vmin, 68rem);
	opacity: 0.95;
	pointer-events: none;
}

.noic-hero__radar svg {
	width: 100%;
	height: auto;
	display: block;
}

.noic-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--w-wide);
	margin-inline: auto;
}

.noic-hero__title {
	font-size: clamp(3rem, 1.1rem + 10.5vw, 8.75rem);
	font-weight: 300;
	letter-spacing: var(--track-2);
	text-transform: uppercase;
	line-height: 1.02;
	margin: 1.25rem 0 0;
}

/* Phones: size against the viewport so "Is Coming" holds as one line —
   the larger floor orphaned "IS" onto its own line on real devices. */
@media (max-width: 700px) {
	.noic-hero__title {
		font-size: clamp(2.25rem, 11.5vw, 5.7rem);
	}
}

.noic-hero__title span {
	display: block;
}

/* The instrument readout: reports absence, then the counter-thesis. */
.noic-hero__readout {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2rem;
	color: var(--noic-smoke);
	letter-spacing: var(--track-3);
	min-height: 1.5em;
}

.noic-hero__readout::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--noic-orange);
	flex: none;
}

.noic-hero__tagline {
	font-size: clamp(1.25rem, 1.05rem + 1.2vw, 1.625rem);
	line-height: 1.5;
	margin: 1.5rem 0 2.5rem;
	max-width: 40ch;
	text-wrap: balance;
}

/* Primary CTA: a labelled rule whose orange tip extends on hover. */
.noic-cta {
	display: inline-block;
	min-width: 15rem;
	text-decoration: none;
	color: var(--noic-bone);
	padding-top: 0.5rem;
}

.noic-cta__row {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: var(--track-3);
	text-transform: uppercase;
	padding-bottom: 1em;
}

.noic-cta__rule {
	display: block;
	position: relative;
	height: 1px;
	background: var(--hairline-strong);
}

.noic-cta__rule span {
	position: absolute;
	inset: 0 auto 0 0;
	width: 2rem;
	background: var(--noic-orange);
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.noic-cta:hover .noic-cta__rule span,
.noic-cta:focus-visible .noic-cta__rule span {
	width: 100%;
}

.noic-hero__coords {
	position: absolute;
	right: var(--rail-x);
	bottom: 1.75rem;
	color: rgba(167, 163, 155, 0.65);
	letter-spacing: var(--track-2);
}

@media (max-width: 859px) {
	.noic-hero {
		align-items: center;
	}

	.noic-hero__radar {
		top: 42%;
		right: 50%;
		transform: translate(50%, -50%);
		width: 135vw;
		max-width: none;
		opacity: 0.3;
	}

	.noic-hero__coords {
		left: var(--pad-x);
		right: auto;
	}
}

/* ------------------------------------------------------------------ *
 * 6. Homepage screens
 * ------------------------------------------------------------------ */
.noic-screen {
	padding-block: var(--sp-7);
}

.noic-screen__head {
	margin-bottom: var(--sp-5);
	max-width: 44rem;
}

.noic-screen__title {
	font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
	letter-spacing: var(--track-1);
	text-transform: uppercase;
	line-height: 1.15;
	text-wrap: balance;
}

.noic-screen__sub {
	font-size: 1.1875rem;
	color: var(--noic-smoke);
	margin-top: 1.25rem;
	max-width: 48ch;
}

.noic-screen__more {
	margin-top: var(--sp-4);
}

/* Screen 2 — the premise. */
.noic-statement {
	font-size: clamp(1.625rem, 1.05rem + 2.7vw, 2.625rem);
	line-height: 1.35;
	max-width: 26ch;
	text-wrap: balance;
}

.noic-statement__support {
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--noic-smoke);
	max-width: 44ch;
	margin-top: var(--sp-3);
}

.noic-screen--premise .noic-rule {
	width: min(22rem, 55%);
}

/* Screen 3 — launch drop. */
.noic-drop {
	border-bottom: 1px solid var(--hairline);
}

/* Screen 4 — the range. */
.noic-statement--range {
	font-size: clamp(1.375rem, 1rem + 1.9vw, 2.125rem);
	max-width: 30ch;
	color: var(--noic-ash);
	margin-bottom: var(--sp-5);
}

.noic-range {
	list-style: none;
	border-bottom: 1px solid var(--hairline);
}

.noic-range__row {
	border-top: 1px solid var(--hairline);
}

.noic-range__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: baseline;
	gap: var(--sp-3);
	padding: 1.6rem 0.25rem;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.noic-range__link:hover {
	background: var(--lift);
}

.noic-range__name {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.1875rem, 1rem + 1.4vw, 1.75rem);
	letter-spacing: var(--track-1);
	text-transform: uppercase;
	color: var(--noic-ash);
	transition: color 0.2s ease;
}

.noic-range__name::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--noic-orange);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.noic-range__link:hover .noic-range__name {
	color: var(--noic-bone);
}

.noic-range__link:hover .noic-range__name::before {
	opacity: 1;
	transform: translateX(0);
}

.noic-range__count {
	color: var(--noic-smoke);
}

.noic-range__arrow {
	color: var(--noic-smoke);
	transition: transform 0.25s ease, color 0.2s ease;
}

.noic-range__link:hover .noic-range__arrow {
	color: var(--noic-bone);
	transform: translateX(4px);
}

/* Screen 5 — the host. */
.noic-host {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: start;
}

.noic-host__frame {
	margin: 0;
	border: 1px solid var(--hairline);
	background: var(--lift);
}

.noic-host__placeholder {
	aspect-ratio: 4 / 5;
	position: relative;
	overflow: hidden;
}

.noic-host__placeholder svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.noic-host__img {
	aspect-ratio: 4 / 5;
	width: 100%;
	object-fit: cover;
	filter: grayscale(18%) contrast(1.02);
}

.noic-host__caption {
	border-top: 1px solid var(--hairline);
	padding: 0.85rem 1rem;
	color: var(--noic-smoke);
	letter-spacing: var(--track-2);
	font-size: 0.8125rem;
}

.noic-host__body .noic-screen__title {
	margin-bottom: var(--sp-3);
}

.noic-host__text {
	font-size: 1.1875rem;
	line-height: 1.7;
	color: var(--noic-ash);
	max-width: 54ch;
	margin-bottom: var(--sp-3);
}

@media (max-width: 859px) {
	.noic-host {
		grid-template-columns: 1fr;
	}

	.noic-host__frame {
		max-width: 22rem;
	}
}

/* Screen 6 — field notes + capture. */
.noic-notes {
	border-bottom: 1px solid var(--hairline);
}

.noic-note {
	border-top: 1px solid var(--hairline);
}

.noic-note__link {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr) auto;
	gap: var(--sp-3);
	align-items: baseline;
	padding: 1.6rem 0.25rem;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.noic-note__link:hover {
	background: var(--lift);
}

.noic-note__date {
	color: var(--noic-smoke);
	letter-spacing: 0.08em;
	text-transform: none;
}

.noic-note__title {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.1875rem;
	line-height: 1.35;
	color: var(--noic-bone);
	text-decoration: underline transparent;
	text-underline-offset: 5px;
	transition: text-decoration-color 0.25s ease;
}

.noic-note__link:hover .noic-note__title {
	text-decoration-color: rgba(242, 233, 218, 0.6);
}

.noic-note__excerpt {
	display: block;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--noic-smoke);
	margin-top: 0.4rem;
	max-width: 62ch;
}

.noic-note__arrow {
	color: var(--noic-smoke);
	transition: transform 0.25s ease, color 0.2s ease;
}

.noic-note__link:hover .noic-note__arrow {
	color: var(--noic-bone);
	transform: translateX(4px);
}

@media (max-width: 639px) {
	.noic-note__link {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.noic-note__date {
		grid-column: 1 / -1;
		order: -1;
	}
}

/* ------------------------------------------------------------------ *
 * 7. Episode cards
 * ------------------------------------------------------------------ */
.noic-epcard {
	position: relative;
	border-top: 1px solid var(--hairline);
	padding-block: var(--sp-4);
}

.noic-epcard__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.noic-epcard__meta {
	display: flex;
	gap: 1.25rem;
	align-items: baseline;
	margin-bottom: 1rem;
}

.noic-epcard__no {
	color: var(--noic-orange);
	letter-spacing: var(--track-3);
}

.noic-epcard__duration {
	color: var(--noic-smoke);
}

.noic-epcard__title {
	font-size: 1.375rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1.2;
	text-decoration: underline transparent;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 0.25s ease;
	text-wrap: balance;
}

.noic-epcard:hover .noic-epcard__title {
	text-decoration-color: rgba(242, 233, 218, 0.55);
}

.noic-epcard__question {
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--noic-smoke);
	max-width: 46ch;
	margin-top: 0.9rem;
}

.noic-epcard__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
	align-items: baseline;
	margin-top: 1.4rem;
}

.noic-epcard__topics {
	color: rgba(167, 163, 155, 0.85);
	letter-spacing: 0.1em;
	font-size: 0.8125rem;
}

.noic-epcard__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--track-3);
	text-transform: uppercase;
	color: var(--noic-ash);
	transition: color 0.2s ease;
}

.noic-epcard:hover .noic-epcard__cta {
	color: var(--noic-bone);
}

.noic-epcard__plot {
	color: var(--tone, var(--noic-smoke));
	border: 1px solid var(--hairline);
	background: var(--lift);
	padding: 1.75rem;
	width: 11rem;
	margin-bottom: var(--sp-3);
}

.noic-epcard__plot svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Feature variant — the launch drop lead. */
.noic-epcard--feature {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.noic-epcard--feature .noic-epcard__plot {
	order: 2;
	width: 100%;
	max-width: 24rem;
	justify-self: end;
	padding: clamp(1.5rem, 4vw, 3rem);
	margin: 0;
}

.noic-epcard--feature .noic-epcard__body {
	order: 1;
}

.noic-epcard--feature .noic-epcard__title {
	font-size: clamp(1.875rem, 1.2rem + 3.2vw, 3.375rem);
	letter-spacing: 0.05em;
}

.noic-epcard--feature .noic-epcard__question {
	font-size: 1.3125rem;
	color: var(--noic-ash);
	max-width: 40ch;
}

/* Card variant — the two supporting drop episodes. */
@media (min-width: 860px) {
	.noic-drop {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: clamp(2.5rem, 6vw, 5rem);
	}

	.noic-epcard--feature {
		grid-column: 1 / -1;
	}

	/* Asymmetric editorial stagger, not a uniform card grid. */
	.noic-epcard--card:nth-of-type(3) {
		transform: translateY(var(--sp-5));
		margin-bottom: var(--sp-5);
	}
}

/* Row variant — archive listing. */
.noic-epcard--row {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr) auto;
	gap: var(--sp-3);
	align-items: baseline;
	padding-block: var(--sp-3) 1.9rem;
	transition: background-color 0.25s ease;
}

.noic-epcard--row:hover {
	background: var(--lift);
}

.noic-epcard--row .noic-epcard__plot {
	display: none;
}

.noic-epcard--row .noic-epcard__meta {
	display: contents;
}

.noic-epcard--row .noic-epcard__no {
	padding-top: 0.3rem;
}

.noic-epcard--row .noic-epcard__duration {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
}

.noic-epcard--row .noic-epcard__body {
	display: contents;
}

.noic-epcard--row .noic-epcard__title {
	grid-column: 2;
	font-size: 1.25rem;
}

.noic-epcard--row .noic-epcard__question {
	grid-column: 2;
	margin-top: 0.55rem;
}

.noic-epcard--row .noic-epcard__foot {
	grid-column: 2;
	margin-top: 0.9rem;
}

@media (max-width: 639px) {
	.noic-epcard--feature {
		grid-template-columns: 1fr;
	}

	.noic-epcard--feature .noic-epcard__plot {
		order: 0;
		width: 9.5rem;
		padding: 1.5rem;
		justify-self: start;
		margin-bottom: var(--sp-3);
	}

	.noic-epcard--row {
		grid-template-columns: minmax(0, 1fr);
	}

	.noic-epcard--row .noic-epcard__no,
	.noic-epcard--row .noic-epcard__duration {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
	}

	.noic-epcard--row .noic-epcard__title,
	.noic-epcard--row .noic-epcard__question,
	.noic-epcard--row .noic-epcard__foot {
		grid-column: 1;
	}
}

/* ------------------------------------------------------------------ *
 * 8. Newsletter — the signup console
 * ------------------------------------------------------------------ */
.noic-newsletter {
	background: transparent;
	color: var(--noic-bone);
	margin-block: var(--sp-6) 0;
}

.noic-newsletter__inner {
	position: relative;
	background: var(--lift);
	border: 1px solid var(--hairline);
	padding: clamp(2.5rem, 6vw, 4.25rem) clamp(1.5rem, 5vw, 4rem);
}

/* The plot rule, carried onto the console's top edge. */
.noic-newsletter__inner::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 2.5rem;
	height: 1px;
	background: var(--noic-orange);
}

.noic-newsletter__heading {
	font-size: clamp(1.5rem, 1.1rem + 2vw, 2.375rem);
	letter-spacing: var(--track-1);
	text-transform: uppercase;
	color: var(--noic-bone);
}

.noic-newsletter__tagline {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--noic-smoke);
	margin: 1rem 0 2.25rem;
	max-width: 46ch;
}

.noic-newsletter__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.noic-newsletter__label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	color: var(--noic-smoke);
	margin-bottom: 0.6rem;
}

.noic-newsletter__controls {
	display: flex;
	gap: 1rem;
	max-width: 34rem;
}

.noic-newsletter__input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--hairline-strong);
	border-radius: 0;
	padding: 0.65em 0.1em;
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	color: var(--noic-bone);
	transition: border-color 0.2s ease;
}

.noic-newsletter__input::placeholder {
	color: rgba(167, 163, 155, 0.5);
}

.noic-newsletter__input:focus {
	outline: none;
	border-bottom-color: var(--noic-orange);
	box-shadow: 0 1px 0 var(--noic-orange);
}

.noic-newsletter__submit {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	background: var(--noic-bone);
	color: #0a0a09;
	border: 1px solid var(--noic-bone);
	padding: 0.95em 1.7em;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--track-3);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.noic-newsletter__submit:hover {
	background: #fff8ec;
	border-color: #fff8ec;
}

.noic-newsletter__msg {
	min-height: 1.6em;
	font-size: 1rem;
	margin-top: 1.1rem;
	color: var(--noic-ash);
}

.noic-newsletter__msg.is-ok::before,
.noic-newsletter__msg.is-error::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 0.6em;
	background: var(--noic-orange);
}

.noic-newsletter__msg.is-ok {
	color: var(--noic-bone);
}

.noic-newsletter__msg.is-error {
	color: #d99270;
}

.noic-newsletter__fineprint {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: rgba(167, 163, 155, 0.75);
	margin-top: 1.5rem;
	text-transform: none;
}

@media (max-width: 559px) {
	.noic-newsletter__controls {
		flex-direction: column;
	}

	.noic-newsletter__submit {
		justify-content: center;
	}
}

/* ------------------------------------------------------------------ *
 * 9. Footer
 * ------------------------------------------------------------------ */
.noic-footer {
	margin-top: var(--sp-6);
}

.noic-footer__rule {
	position: relative;
	height: 1px;
	background: var(--hairline);
}

.noic-footer__rule span {
	position: absolute;
	right: var(--rail-x);
	top: 0;
	width: 2.5rem;
	height: 1px;
	background: var(--noic-orange);
}

.noic-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-5);
	padding: var(--sp-6) var(--pad-x) var(--sp-5);
	max-width: calc(var(--w-wide) + 2 * var(--pad-x));
	margin-inline: auto;
}

/* Mid widths: brand takes its own row, link columns share the second. */
@media (max-width: 1099px) and (min-width: 860px) {
	.noic-footer__inner {
		grid-template-columns: repeat( 3, minmax(0, 1fr) );
	}

	.noic-footer__brand {
		grid-column: 1 / -1;
	}
}

.noic-lockup {
	display: inline-flex;
	gap: 1.4rem;
	align-items: center;
	text-decoration: none;
	color: var(--noic-bone);
}

.noic-lockup__type {
	display: flex;
	flex-direction: column;
}

.noic-lockup__title {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.noic-lockup__rule {
	height: 1px;
	background: var(--hairline-strong);
	margin: 0.65rem 0;
}

.noic-lockup__tagline {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--noic-orange);
}

.noic-footer__ethos {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--noic-smoke);
	max-width: 38ch;
	margin-top: var(--sp-3);
}

.noic-footer__head {
	color: var(--noic-smoke);
	letter-spacing: 0.18em;
	font-size: 0.75rem;
	font-weight: 400;
	font-family: var(--font-mono);
	text-transform: uppercase;
	margin-bottom: 1.1rem;
}

.noic-footer__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.noic-footer__list a {
	font-family: var(--font-display);
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--noic-ash);
	transition: color 0.2s ease;
}

.noic-footer__list a:hover {
	color: var(--noic-bone);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.noic-footer__meta {
	border-top: 1px solid var(--hairline);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem var(--pad-x) 2rem;
	max-width: calc(var(--w-wide) + 2 * var(--pad-x));
	margin-inline: auto;
}

.noic-footer__coords {
	color: rgba(167, 163, 155, 0.85);
}

.noic-footer__legal {
	font-size: 0.875rem;
	color: var(--noic-smoke);
}

.noic-footer__legal a {
	color: inherit;
	text-underline-offset: 3px;
}

.noic-footer__legal a:hover {
	color: var(--noic-bone);
}

.noic-footer__tri {
	color: var(--noic-orange);
	font-size: 0.5rem;
	vertical-align: 0.2em;
	margin-right: 0.6em;
}

@media (max-width: 859px) {
	.noic-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--sp-4);
	}
}

/* ------------------------------------------------------------------ *
 * 10. Episode page
 * ------------------------------------------------------------------ */
.noic-ephead {
	padding-top: var(--sp-5);
}

.noic-ephead__back {
	margin-bottom: var(--sp-4);
}

.noic-ephead__meta {
	display: flex;
	gap: 1.5rem;
	align-items: baseline;
}

.noic-ephead__no {
	color: var(--noic-orange);
	letter-spacing: var(--track-3);
}

.noic-ephead__season {
	color: var(--noic-smoke);
}

.noic-ephead__title {
	font-size: clamp(2.125rem, 1.2rem + 4.8vw, 4.625rem);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.07;
	margin: 1rem 0 1.75rem;
	text-wrap: balance;
	max-width: 22ch;
}

.noic-ephead__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem 2rem;
}

.noic-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
}

.noic-tag {
	display: inline-block;
	border: 1px solid var(--hairline);
	padding: 0.4em 0.9em;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-decoration: none;
	color: var(--noic-smoke);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.noic-tag:hover {
	color: var(--noic-bone);
	border-color: var(--hairline-strong);
}

.noic-ephead__stamp {
	color: var(--noic-smoke);
	display: flex;
	gap: 0.75rem;
}

.noic-ephead .noic-rule {
	margin-block: var(--sp-3) 0;
}

/* Governing question — one line, serif, prominent. Tone-tinted rule. */
.noic-question {
	border-left: 2px solid var(--tone);
	padding-left: clamp(1.25rem, 3vw, 2rem);
	font-size: clamp(1.375rem, 1.05rem + 1.7vw, 1.875rem);
	line-height: 1.45;
	max-width: 30ch;
	margin-block: var(--sp-5);
	text-wrap: balance;
}

/* Player — prominent and frictionless; loads eagerly on this page only. */
.noic-player {
	margin-block: var(--sp-5);
	max-width: var(--w-reading);
}

.noic-player__label {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--noic-smoke);
	letter-spacing: var(--track-3);
	margin-bottom: 1rem;
}

.noic-player__embed {
	border: 1px solid var(--hairline);
	background: var(--lift);
	padding: 0.75rem;
}

.noic-player__embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

.noic-player__native {
	width: 100%;
}

.noic-player__pending {
	border: 1px dashed var(--hairline-strong);
	padding: 1.75rem;
	color: var(--noic-smoke);
	letter-spacing: var(--track-2);
}

/* Long-form prose. */
.noic-prose > p,
.noic-prose .noic-act__body p {
	max-width: 65ch;
	margin-block: 1.3em;
	color: rgba(242, 233, 218, 0.92);
}

.noic-prose a {
	color: var(--noic-bone);
	text-decoration-color: rgba(244, 81, 30, 0.6);
	text-underline-offset: 4px;
	transition: text-decoration-color 0.2s ease;
}

.noic-prose a:hover {
	text-decoration-color: var(--noic-orange);
}

.noic-prose h3 {
	font-size: 1.0625rem;
	letter-spacing: var(--track-2);
	text-transform: uppercase;
	margin-top: 2.75em;
	margin-bottom: 1em;
}

.noic-prose ul,
.noic-prose ol {
	padding-left: 1.4em;
	max-width: 62ch;
	margin-block: 1.3em;
}

.noic-prose li {
	margin-block: 0.45em;
}

.noic-prose li::marker {
	color: var(--noic-smoke);
}

.noic-prose blockquote {
	margin: 2em 0;
	padding-left: 1.5rem;
	border-left: 1px solid var(--hairline-strong);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--noic-ash);
}

.noic-prose img {
	margin-block: 2em;
}

/* ------------------------------------------------------------------ *
 * 11. Content blocks
 * ------------------------------------------------------------------ */

/* The Signal. */
.noic-signal {
	margin-block: var(--sp-5);
	max-width: var(--w-reading);
	background: var(--lift);
	border: 1px solid var(--hairline);
	border-left: 2px solid var(--noic-orange);
	padding: clamp(1.75rem, 4vw, 2.5rem);
}

.noic-signal__label {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--noic-smoke);
	letter-spacing: var(--track-3);
	margin-bottom: 1.1rem;
}

.noic-signal__text {
	font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.625rem);
	line-height: 1.5;
	max-width: 36ch;
}

/* Acts. */
.noic-act {
	margin-top: var(--sp-6);
	border-top: 1px solid var(--hairline);
	padding-top: var(--sp-4);
}

.noic-act__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	max-width: 65ch;
}

.noic-act__no {
	color: var(--noic-smoke);
	letter-spacing: var(--track-3);
}

.noic-act__timestamp {
	color: var(--noic-orange);
	letter-spacing: 0.1em;
	text-transform: none;
}

.noic-act__title {
	font-size: clamp(1.375rem, 1.1rem + 1.5vw, 1.875rem);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1.2;
	margin: 0.9rem 0 0.4rem;
	max-width: 26ch;
	text-wrap: balance;
}

/* What to do. */
.noic-wtd {
	margin-block: var(--sp-6);
}

.noic-wtd__heading,
.noic-sources__heading,
.noic-resources__heading {
	font-size: 1.0625rem;
	letter-spacing: var(--track-2);
	text-transform: uppercase;
	color: var(--noic-smoke);
	margin-bottom: var(--sp-3);
}

.noic-wtd__list {
	list-style: none;
	counter-reset: wtd;
	border-bottom: 1px solid var(--hairline);
	max-width: 46rem;
}

.noic-wtd__item {
	counter-increment: wtd;
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	align-items: baseline;
	border-top: 1px solid var(--hairline);
	padding: 1.15rem 0.25rem;
	font-size: 1.3125rem;
	line-height: 1.5;
}

.noic-wtd__item::before {
	content: counter(wtd, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: var(--noic-orange);
}

/* Sources & experts. */
.noic-sources {
	margin-block: var(--sp-6);
}

.noic-sources__list {
	list-style: none;
	border-bottom: 1px solid var(--hairline);
	max-width: 46rem;
}

.noic-sources__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.4rem 2rem;
	align-items: baseline;
	border-top: 1px solid var(--hairline);
	padding: 1.05rem 0.25rem;
}

.noic-sources__name {
	font-weight: 600;
	font-size: 1.0625rem;
}

.noic-sources__name a {
	color: var(--noic-bone);
	text-decoration-color: rgba(244, 81, 30, 0.55);
	text-underline-offset: 4px;
}

.noic-sources__name a:hover {
	text-decoration-color: var(--noic-orange);
}

.noic-sources__role {
	color: var(--noic-smoke);
	letter-spacing: 0.06em;
	text-transform: none;
	text-align: right;
}

@media (max-width: 639px) {
	.noic-sources__row {
		grid-template-columns: 1fr;
	}

	.noic-sources__role {
		text-align: left;
	}
}

/* Resource links. */
.noic-resources {
	margin-block: var(--sp-6);
}

.noic-resources__list {
	list-style: none;
	border-bottom: 1px solid var(--hairline);
	max-width: 46rem;
}

.noic-resources__row {
	border-top: 1px solid var(--hairline);
	padding: 1.3rem 0.25rem;
}

.noic-resources__link {
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--noic-bone);
	text-decoration-color: rgba(244, 81, 30, 0.55);
	text-underline-offset: 4px;
}

.noic-resources__link:hover {
	text-decoration-color: var(--noic-orange);
}

.noic-resources__desc {
	color: var(--noic-smoke);
	font-size: 1rem;
	line-height: 1.55;
	margin-top: 0.35rem;
	max-width: 60ch;
}

/* Guests. */
.noic-guest {
	border-top: 1px solid var(--hairline);
	padding: var(--sp-3) 0.25rem;
	max-width: 46rem;
}

.noic-guest:first-of-type {
	margin-top: var(--sp-6);
}

.noic-guest__name {
	font-size: 1.1875rem;
	letter-spacing: 0.04em;
}

.noic-guest__name a {
	color: var(--noic-bone);
	text-decoration-color: rgba(244, 81, 30, 0.55);
	text-underline-offset: 4px;
}

.noic-guest__credential {
	color: var(--noic-smoke);
	letter-spacing: 0.08em;
	text-transform: none;
	margin: 0.4rem 0 0.7rem;
}

.noic-guest__blurb {
	color: var(--noic-ash);
	font-size: 1.0625rem;
	line-height: 1.6;
	max-width: 58ch;
}

/* Transcript — paper reading surface, zero-JS accordion. */
.noic-transcript {
	margin-block: var(--sp-6) var(--sp-5);
	max-width: var(--w-reading);
}

.noic-transcript__details {
	background: var(--noic-paper);
	color: var(--ink);
}

.noic-transcript__summary {
	list-style: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.75rem;
	padding: 1.6rem clamp(1.25rem, 4vw, 2.25rem);
}

.noic-transcript__summary::-webkit-details-marker {
	display: none;
}

.noic-transcript__kicker {
	color: var(--ink-soft);
	letter-spacing: 0.18em;
	font-size: 0.75rem;
}

.noic-transcript__label {
	font-size: 1.125rem;
	font-weight: 600;
}

.noic-transcript__marker {
	position: relative;
	width: 15px;
	height: 15px;
}

.noic-transcript__marker::before,
.noic-transcript__marker::after {
	content: "";
	position: absolute;
	inset: 7px 0;
	background: var(--ink);
	transition: transform 0.25s ease;
}

.noic-transcript__marker::after {
	transform: rotate(90deg);
}

.noic-transcript__details[open] .noic-transcript__marker::after {
	transform: rotate(0deg);
}

.noic-transcript__details[open] .noic-transcript__summary {
	border-bottom: 1px solid rgba(25, 23, 19, 0.12);
}

.noic-transcript__body {
	padding: var(--sp-3) clamp(1.25rem, 4vw, 2.25rem) var(--sp-5);
}

.noic-transcript__body p {
	max-width: 62ch;
	margin-block: 1.15em;
	color: #23201a;
	font-size: 1.0625rem;
	line-height: 1.8;
}

/* Speaker labels: bold prefix convention becomes a mono instrument label. */
.noic-transcript__body p strong:first-child {
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: 0.75em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-right: 0.5em;
}

/* Share row. */
.noic-share {
	margin-block: var(--sp-5);
	max-width: var(--w-reading);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 1.75rem;
}

.noic-share__label {
	color: var(--noic-smoke);
	letter-spacing: var(--track-3);
}

.noic-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
}

.noic-share__link {
	display: inline-block;
	border: 1px solid var(--hairline);
	padding: 0.55em 1.05em;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--track-2);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--noic-ash);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.noic-share__link:hover {
	color: var(--noic-bone);
	border-color: var(--hairline-strong);
}

.noic-share__link.is-copied {
	color: var(--noic-bone);
	border-color: var(--noic-orange);
}

/* Season position instrument. */
.noic-seasonnav {
	border-top: 1px solid var(--hairline);
	margin-top: var(--sp-4);
	padding-block: var(--sp-4) var(--sp-5);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: var(--sp-3);
	align-items: center;
}

.noic-seasonnav__adj {
	display: inline-flex;
	flex-direction: column;
	gap: 0.45rem;
	text-decoration: none;
}

.noic-seasonnav__dir {
	color: var(--noic-smoke);
	letter-spacing: var(--track-2);
}

.noic-seasonnav__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--noic-ash);
	transition: color 0.2s ease;
}

.noic-seasonnav__adj:hover .noic-seasonnav__title {
	color: var(--noic-bone);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.noic-seasonnav__arm--next {
	text-align: right;
}

.noic-seasonnav__arm--next .noic-seasonnav__adj {
	align-items: flex-end;
}

.noic-seasonnav__plot {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	list-style: none;
}

.noic-seasonnav__pt {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 1px solid rgba(242, 233, 218, 0.4);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

a.noic-seasonnav__pt:hover {
	border-color: var(--noic-bone);
	background: rgba(242, 233, 218, 0.14);
}

.noic-seasonnav__pt.is-current {
	background: var(--noic-orange);
	border-color: var(--noic-orange);
	box-shadow: 0 0 0 4px rgba(244, 81, 30, 0.16);
}

@media (max-width: 719px) {
	.noic-seasonnav {
		grid-template-columns: 1fr 1fr;
	}

	.noic-seasonnav__plot {
		grid-column: 1 / -1;
		grid-row: 1;
		justify-content: flex-start;
	}
}

/* Related field notes. */
.noic-related {
	border-top: 1px solid var(--hairline);
	padding-block: var(--sp-6);
	background: var(--lift);
}

/* ------------------------------------------------------------------ *
 * 12. Archives & pagination
 * ------------------------------------------------------------------ */
.noic-archive {
	padding-block: var(--sp-5) var(--sp-6);
}

.noic-archive__head {
	margin-bottom: var(--sp-4);
}

.noic-archive__title {
	font-size: clamp(2.375rem, 1.4rem + 4.5vw, 4.5rem);
	letter-spacing: var(--track-1);
	text-transform: uppercase;
	line-height: 1.05;
}

.noic-archive__count {
	color: var(--noic-smoke);
	margin-top: 1rem;
}

.noic-archive__desc {
	font-size: 1.1875rem;
	color: var(--noic-ash);
	max-width: 50ch;
	margin-top: 1.25rem;
}

.noic-filter {
	margin-block: var(--sp-4);
}

.noic-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
}

.noic-filter__chip {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--hairline);
	padding: 0.55em 1.1em;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--noic-smoke);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.noic-filter__chip .noic-dot {
	width: 6px;
	height: 6px;
	margin-right: 0;
	opacity: 0;
	transform: scale(0);
	transition: opacity 0.2s ease, transform 0.2s ease, margin 0.2s ease;
}

.noic-filter__chip:hover {
	color: var(--noic-bone);
	border-color: var(--hairline-strong);
}

.noic-filter__chip.is-active {
	color: var(--noic-bone);
	border-color: var(--hairline-strong);
}

.noic-filter__chip.is-active .noic-dot {
	opacity: 1;
	transform: scale(1);
	margin-right: 0.6em;
}

.noic-eplist {
	border-bottom: 1px solid var(--hairline);
}

.navigation.pagination {
	margin-top: var(--sp-5);
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.navigation.pagination .page-numbers {
	display: inline-block;
	border: 1px solid var(--hairline);
	padding: 0.55em 1em;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-decoration: none;
	color: var(--noic-smoke);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.navigation.pagination a.page-numbers:hover {
	color: var(--noic-bone);
	border-color: var(--hairline-strong);
}

.navigation.pagination .page-numbers.current {
	color: var(--noic-bone);
	border-color: var(--hairline-strong);
	background: var(--lift);
}

.navigation.pagination .screen-reader-text {
	display: none;
}

/* ------------------------------------------------------------------ *
 * 13. Field note single & generic page — paper reading
 * ------------------------------------------------------------------ */
.noic-notehead {
	padding-block: var(--sp-5);
}

.noic-notehead__title {
	font-size: clamp(1.75rem, 1.2rem + 2.8vw, 3.125rem);
	line-height: 1.15;
	max-width: 24ch;
	text-wrap: balance;
}

.noic-notehead__stamp {
	display: flex;
	gap: 0.75rem;
	color: var(--noic-smoke);
	margin-top: 1.25rem;
	text-transform: none;
	letter-spacing: 0.08em;
}

.noic-paper {
	background: var(--noic-paper);
	color: var(--ink);
	padding-block: var(--sp-5) var(--sp-6);
}

.noic-prose--ink > p,
.noic-prose--ink li {
	color: #23201a;
	font-size: 1.1875rem;
	line-height: 1.75;
}

.noic-prose--ink a {
	color: var(--ink);
	text-decoration-color: rgba(244, 81, 30, 0.7);
}

.noic-prose--ink h2,
.noic-prose--ink h3 {
	color: #14110c;
}

.noic-prose--ink h2 {
	font-size: 1.375rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: 2.25em;
	margin-bottom: 0.9em;
}

.noic-prose--ink blockquote {
	border-left-color: rgba(25, 23, 19, 0.3);
	color: var(--ink-soft);
}

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

/* Blocks that land inside paper surfaces adapt to ink. */
.noic-paper .noic-resources__link,
.noic-paper .noic-sources__name a {
	color: var(--ink);
}

.noic-paper .noic-resources__desc,
.noic-paper .noic-sources__role,
.noic-paper .noic-resources__heading,
.noic-paper .noic-sources__heading {
	color: var(--ink-soft);
}

.noic-paper .noic-resources__list,
.noic-paper .noic-resources__row,
.noic-paper .noic-sources__list,
.noic-paper .noic-sources__row {
	border-color: rgba(25, 23, 19, 0.16);
}

.noic-note-single__foot {
	padding-block: var(--sp-4) var(--sp-5);
}

.noic-adjacent {
	max-width: var(--w-reading);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-3);
	border-top: 1px solid var(--hairline);
	padding-top: var(--sp-4);
}

.noic-adjacent a {
	display: inline-flex;
	flex-direction: column;
	gap: 0.45rem;
	text-decoration: none;
	color: var(--noic-ash);
}

.noic-adjacent a:hover {
	color: var(--noic-bone);
}

.noic-adjacent .noic-mono {
	color: var(--noic-smoke);
}

.noic-adjacent__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.9375rem;
}

.noic-adjacent__next {
	text-align: right;
}

.noic-adjacent__next a {
	align-items: flex-end;
}

/* ------------------------------------------------------------------ *
 * 14. About page
 * ------------------------------------------------------------------ */
.noic-abouthead {
	padding-block: var(--sp-5) var(--sp-4);
}

.noic-abouthead__title {
	font-size: clamp(2.75rem, 1.6rem + 5.5vw, 5.5rem);
	letter-spacing: var(--track-1);
	text-transform: uppercase;
	line-height: 1.03;
}

.noic-abouthead__line {
	font-size: 1.375rem;
	font-style: italic;
	color: var(--noic-ash);
	margin-top: 1.25rem;
}

.noic-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: start;
	padding-block: var(--sp-4) var(--sp-5);
}

.noic-about__grid:has(> .noic-about__body:only-child) {
	grid-template-columns: minmax(0, 1fr);
}

.noic-about__body > p:first-child {
	font-size: 1.375rem;
	line-height: 1.55;
	color: var(--noic-bone);
}

.noic-listenrow {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	border-top: 1px solid var(--hairline);
	padding-top: var(--sp-4);
}

.noic-listenrow .noic-kicker {
	width: 100%;
}

.noic-contact {
	margin-top: var(--sp-6);
}

.noic-contact__text {
	color: var(--noic-ash);
	font-size: 1.125rem;
}

.noic-contact__email {
	display: inline-block;
	margin-top: 0.9rem;
	color: var(--noic-bone);
	text-decoration: none;
	border-bottom: 1px solid rgba(244, 81, 30, 0.6);
	padding-bottom: 3px;
	letter-spacing: 0.06em;
	text-transform: none;
	transition: border-color 0.2s ease;
}

.noic-contact__email:hover {
	border-color: var(--noic-orange);
}

@media (max-width: 859px) {
	.noic-about__grid {
		grid-template-columns: 1fr;
	}

	.noic-about__frame {
		max-width: 22rem;
	}
}

/* ------------------------------------------------------------------ *
 * 15. 404
 * ------------------------------------------------------------------ */
.noic-404 {
	position: relative;
	min-height: 82svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-block: var(--sp-6);
}

.noic-404__mark {
	position: absolute;
	right: 6vw;
	top: 50%;
	transform: translateY(-50%);
	color: var(--noic-bone);
	opacity: 0.16;
	pointer-events: none;
}

.noic-404 .noic-hero__readout {
	align-items: flex-start;
}

.noic-404 .noic-hero__readout::before {
	margin-top: 0.45em;
}

@media (max-width: 859px) {
	.noic-404__mark {
		top: 4%;
		right: -3.5rem;
		transform: none;
		opacity: 0.1;
	}

	.noic-404__mark svg {
		width: 10rem;
		height: 10rem;
	}
}

.noic-404__title {
	font-size: clamp(1.875rem, 1.3rem + 3vw, 3.375rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.15;
	max-width: 18ch;
	text-wrap: balance;
}

.noic-404__text {
	font-size: 1.1875rem;
	color: var(--noic-ash);
	max-width: 40ch;
	margin: 1.5rem 0 2.25rem;
}

.noic-404__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* ------------------------------------------------------------------ *
 * 16. Accessibility & motion
 * ------------------------------------------------------------------ */
:focus-visible {
	outline: 2px solid var(--noic-bone);
	outline-offset: 3px;
}

.noic-paper :focus-visible,
.noic-transcript__details :focus-visible {
	outline-color: var(--ink);
}

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

	.noic-radar__sweep {
		transform-box: view-box;
		transform-origin: 50% 50%;
		animation: noic-sweep 16s linear infinite;
	}

	.noic-radar__blip circle:first-child,
	.noic-dot--live {
		animation: noic-blip 5.5s ease-in-out infinite;
	}

	.noic-epcard__blip {
		animation: noic-blip 5.5s ease-in-out infinite;
	}
}

.noic-radar__you circle:first-child {
	fill-opacity: 0.26;
}

@keyframes noic-sweep {
	to {
		transform: rotate(360deg);
	}
}

@keyframes noic-blip {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.45;
	}
}

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

/* Print: open the transcript, drop chrome. */
@media print {
	.noic-header,
	.noic-footer,
	.noic-share,
	.noic-seasonnav {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* ------------------------------------------------------------------ *
 * 17. Concept layer — the instrument narrative
 *     (dossiers, the window diagram, marginalia, the community plot,
 *      outlined numerals, act timeline rail, motion arming)
 * ------------------------------------------------------------------ */

/* --- Outlined instrument numerals ---------------------------------- */
.noic-numeral-stroke {
	font-family: var(--font-display);
	font-weight: 300;
	color: transparent;
	-webkit-text-stroke: 1px rgba(242, 233, 218, 0.24);
	user-select: none;
}

@supports not (-webkit-text-stroke: 1px #fff) {
	.noic-numeral-stroke {
		color: rgba(242, 233, 218, 0.08);
	}
}

/* --- Screen 2: the window, drawn ------------------------------------ */
.noic-premise {
	display: grid;
	gap: clamp(3rem, 6vw, 5rem);
	align-items: center;
}

@media (min-width: 1100px) {
	.noic-premise {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		gap: clamp(3rem, 7vw, 7rem);
	}
}

.noic-window {
	margin: 0;
	max-width: 36rem;
}

.noic-window svg {
	width: 100%;
	height: auto;
	display: block;
}

.noic-window__label {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.14em;
	fill: rgba(242, 233, 218, 0.6);
}

.noic-window__label--orange {
	fill: var(--noic-orange);
}

/* The SVG scales down on small screens; labels scale up to compensate
   (22 user units renders ≈13px at a 343px-wide diagram). */
@media (max-width: 700px) {
	.noic-window__label {
		font-size: 22px;
		letter-spacing: 0.08em;
	}
}

.noic-window__caption {
	font-size: 1.0625rem;
	color: var(--noic-smoke);
	margin-top: 1.25rem;
}

/* --- Screen 3: episode dossiers ------------------------------------- */
.noic-dossiers {
	border-top: 1px solid var(--hairline);
}

.noic-dossier {
	position: relative;
	border-bottom: 1px solid var(--hairline);
	padding: var(--sp-5) 0 var(--sp-4);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	column-gap: clamp(2rem, 5vw, 4.5rem);
}

.noic-dossier__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.noic-dossier__numeral {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(6.5rem, 4.5rem + 11vw, 14rem);
	line-height: 0.78;
	letter-spacing: 0.02em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(242, 233, 218, 0.32);
	user-select: none;
	pointer-events: none;
}

@supports not (-webkit-text-stroke: 1px #fff) {
	.noic-dossier__numeral {
		color: rgba(242, 233, 218, 0.07);
	}
}

.noic-dossier:hover .noic-dossier__numeral {
	-webkit-text-stroke-color: rgba(244, 81, 30, 0.55);
}

.noic-dossier__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	color: var(--noic-smoke);
	margin-bottom: 1.1rem;
}

.noic-dossier__no {
	color: var(--noic-orange);
	letter-spacing: var(--track-3);
}

.noic-dossier__title {
	font-size: clamp(1.75rem, 1.15rem + 3vw, 3.25rem);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.12;
	max-width: 18ch;
	text-wrap: balance;
	text-decoration: underline transparent;
	text-underline-offset: 8px;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 0.25s ease;
}

.noic-dossier:hover .noic-dossier__title {
	text-decoration-color: rgba(242, 233, 218, 0.5);
}

.noic-dossier__question {
	font-size: 1.3125rem;
	line-height: 1.55;
	color: var(--noic-ash);
	max-width: 42ch;
	margin-top: 1.1rem;
}

.noic-dossier__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.65em;
	margin-top: 1.6rem;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--track-3);
	text-transform: uppercase;
	color: var(--noic-ash);
	transition: color 0.2s ease;
}

.noic-dossier:hover .noic-dossier__cta {
	color: var(--noic-bone);
}

.noic-dossier__trace {
	margin-top: var(--sp-4);
	color: var(--tone, var(--noic-smoke));
}

.noic-wave {
	display: block;
	width: 100%;
	height: 56px;
}

@media (min-width: 860px) {
	.noic-dossier {
		grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	}

	.noic-dossier__numeral {
		justify-self: end;
		grid-column: 2;
		grid-row: 1;
	}

	.noic-dossier__body {
		grid-column: 1;
		grid-row: 1;
	}

	.noic-dossier__trace {
		grid-column: 1 / -1;
	}

	/* Alternate the composition: even entries flip. */
	.noic-dossier:nth-child(even) {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	}

	.noic-dossier:nth-child(even) .noic-dossier__numeral {
		grid-column: 1;
		justify-self: start;
	}

	.noic-dossier:nth-child(even) .noic-dossier__body {
		grid-column: 2;
	}
}

/* --- Screen 4: range scenarios --------------------------------------- */
.noic-range__names {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.noic-range__scenario {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.0625rem;
	color: rgba(167, 163, 155, 0.75);
	text-transform: none;
	letter-spacing: 0;
	transition: color 0.2s ease;
}

.noic-range__link:hover .noic-range__scenario {
	color: var(--noic-ash);
}

/* --- Screen 5: field-note marginalia --------------------------------- */
.noic-host__marginalia {
	display: none;
}

@media (min-width: 1100px) {
	.noic-host {
		grid-template-columns: 8.5rem minmax(0, 4fr) minmax(0, 6fr);
	}

	.noic-host__marginalia {
		display: flex;
		flex-direction: column;
		gap: 2.5rem;
		order: -1;
		padding-right: 1.5rem;
		margin-top: 0.5rem;
	}

	.noic-host__marginalia span {
		display: block;
		font-size: 13px;
		letter-spacing: 0.1em;
		color: rgba(167, 163, 155, 0.75);
		text-transform: uppercase;
		line-height: 1.6;
	}

	.noic-host__marginalia span::before {
		content: "";
		display: block;
		width: 1.5rem;
		height: 1px;
		background: var(--hairline-strong);
		margin-bottom: 0.7rem;
	}

	.noic-host__marginalia span:first-child::before {
		background: var(--noic-orange);
	}
}

/* --- Screen 6: the community plot ------------------------------------ */
.noic-watch {
	margin-top: var(--sp-6);
}

.noic-watch__title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(1.75rem, 1.2rem + 2.8vw, 2.875rem);
	line-height: 1.3;
	max-width: 22ch;
	text-wrap: balance;
}

.noic-watch__sub {
	font-size: 1.1875rem;
	line-height: 1.65;
	color: var(--noic-smoke);
	max-width: 52ch;
	margin-top: 1.25rem;
}

.noic-plot {
	margin-top: var(--sp-4);
	border: 1px solid var(--hairline);
	background: var(--lift);
	padding: clamp(1rem, 3vw, 2rem);
}

.noic-plot svg {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Episode page: instrument header + signal trace ------------------ */
.noic-ephead {
	position: relative;
}

.noic-ephead .noic-wrap {
	position: relative;
}

.noic-ephead__numeral {
	position: absolute;
	top: -1.5rem;
	right: var(--pad-x);
	z-index: 0;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(9rem, 5rem + 20vw, 22rem);
	line-height: 0.8;
	letter-spacing: 0.02em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(242, 233, 218, 0.18);
	pointer-events: none;
	user-select: none;
}

@supports not (-webkit-text-stroke: 1px #fff) {
	.noic-ephead__numeral {
		color: rgba(242, 233, 218, 0.05);
	}
}

.noic-ephead__back,
.noic-ephead__meta,
.noic-ephead__title,
.noic-ephead__row,
.noic-ephead .noic-rule {
	position: relative;
	z-index: 1;
}

.noic-player__trace {
	margin-top: 1.1rem;
	color: var(--tone, var(--noic-smoke));
	opacity: 0.85;
}

.noic-player__trace .noic-wave {
	height: 40px;
}

/* --- Episode page: act timeline rail --------------------------------- */
@media (min-width: 1100px) {
	.noic-episode__content .noic-act {
		display: grid;
		max-width: calc(var(--w-reading) + 8.5rem + 2.75rem);
		grid-template-columns: 8.5rem minmax(0, 1fr);
		column-gap: 2.75rem;
		border-top: 0;
		margin-top: 0;
		padding-top: var(--sp-6);
	}

	.noic-episode__content .noic-act__header {
		display: contents;
	}

	.noic-episode__content .noic-act__meta {
		grid-column: 1;
		grid-row: 1 / span 2;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-end;
		text-align: right;
		gap: 0.5rem;
		max-width: none;
		padding-right: 1.75rem;
		border-right: 1px solid var(--hairline);
		position: relative;
	}

	.noic-episode__content .noic-act__meta::after {
		content: "";
		position: absolute;
		right: -3px;
		top: 0.45em;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--noic-orange);
	}

	.noic-episode__content .noic-act__title {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	.noic-episode__content .noic-act__body {
		grid-column: 2;
		grid-row: 2;
	}
}

/* --- Archive rows: log numerals --------------------------------------- */
.noic-epcard__numeral {
	display: none;
}

.noic-epcard--row .noic-epcard__numeral {
	display: block;
	grid-column: 1;
	grid-row: 1 / span 3;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2.75rem, 2.2rem + 2.4vw, 4.25rem);
	line-height: 0.85;
	letter-spacing: 0.02em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(242, 233, 218, 0.32);
	user-select: none;
}

@supports not (-webkit-text-stroke: 1px #fff) {
	.noic-epcard--row .noic-epcard__numeral {
		color: rgba(242, 233, 218, 0.1);
	}
}

.noic-epcard--row:hover .noic-epcard__numeral {
	-webkit-text-stroke-color: rgba(244, 81, 30, 0.6);
}

.noic-epcard--row .noic-epcard__no {
	display: none;
}

@media (max-width: 639px) {
	.noic-epcard--row .noic-epcard__numeral {
		grid-column: 1;
		grid-row: auto;
	}
}

/* --- Field note single: annotated document ---------------------------- */
.noic-document {
	max-width: 44rem;
}

@media (min-width: 1100px) {
	.noic-document {
		max-width: none;
		display: grid;
		grid-template-columns: 10rem minmax(0, 44rem);
		column-gap: 3.5rem;
	}

	.noic-document__rail {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		text-align: right;
		gap: 1.4rem;
		border-right: 1px solid rgba(25, 23, 19, 0.16);
		padding-right: 1.75rem;
		position: sticky;
		top: 3rem;
		height: fit-content;
		color: var(--ink-soft);
		font-size: 13px;
		letter-spacing: 0.1em;
	}

	.noic-document__tick {
		display: inline-flex;
		align-items: center;
		gap: 0.6em;
	}

	.noic-document__tick::before {
		content: "";
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--noic-orange);
	}

	.noic-note-single .noic-notehead__stamp {
		display: none;
	}
}

@media (max-width: 1099px) {
	.noic-document__rail {
		display: none;
	}
}

/* --- About: marginalia joins the grid --------------------------------- */
@media (min-width: 1100px) {
	.noic-about__grid {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 8.5rem;
	}

	.noic-about__grid:not(:has(> .noic-host__frame)) {
		grid-template-columns: minmax(0, 3fr) 8.5rem;
	}

	.noic-about__marginalia {
		display: flex;
		order: 2;
		padding-left: 1.5rem;
		padding-right: 0;
	}
}

/* --- Motion arming ------------------------------------------------------
 * Initial hidden states exist ONLY when the motion script has confirmed
 * both JS and motion preference (html.noic-motion). No JS, or reduced
 * motion, means everything below is simply visible. Complete either way.
 * ---------------------------------------------------------------------- */
html.noic-motion [data-noic-reveal]:not(.is-in) {
	opacity: 0;
	transform: translateY(22px);
}

html.noic-motion [data-noic-reveal="rows"]:not(.is-in) {
	opacity: 1;
	transform: none;
}

html.noic-motion [data-noic-reveal="rows"]:not(.is-in) .noic-range__row {
	opacity: 0;
	transform: translateY(16px);
}

html.noic-motion [data-noic-reveal="dossier"]:not(.is-in) {
	opacity: 0;
	transform: translateY(28px);
}

html.noic-motion [data-noic-plot]:not(.is-in) .noic-plot__dots circle {
	opacity: 0;
}

html.noic-motion [data-noic-plot]:not(.is-in) .noic-plot__you {
	opacity: 0;
}

/* ------------------------------------------------------------------ *
 * 18. Copy Studio rich containers
 * ------------------------------------------------------------------ */
.noic-rich p {
	margin: 0;
	font: inherit;
	color: inherit;
	max-width: inherit;
}

.noic-rich p + p {
	margin-top: 0.7em;
}

.noic-host__bio p {
	font-size: 1.1875rem;
	line-height: 1.7;
	color: var(--noic-ash);
	max-width: 54ch;
}

.noic-host__bio p + p {
	margin-top: var(--sp-3);
}

.noic-host__bio {
	margin-bottom: var(--sp-3);
}

/* Optional hero backdrop photograph: dimmed, behind the instrument. */
.noic-hero__backdrop {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.noic-hero__backdrop img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.22;
	filter: grayscale(35%) contrast(1.05);
}

/* ------------------------------------------------------------------ *
 * 19. Page composition — dark canvas + design-system blocks anywhere
 * ------------------------------------------------------------------ */
.noic-pagehead {
	padding-block: var(--sp-5) 0;
}

.noic-pagehead__title {
	font-size: clamp(2.375rem, 1.4rem + 4.5vw, 4.5rem);
	letter-spacing: var(--track-1);
	text-transform: uppercase;
	line-height: 1.05;
	max-width: 20ch;
	text-wrap: balance;
}

.noic-pageflow {
	padding-block: var(--sp-5) var(--sp-6);
}

/* Section rhythm inside a composed page. */
.noic-pageflow > .wp-block-noic-section-heading {
	margin-block: var(--sp-6) var(--sp-4);
	max-width: 44rem;
}

.noic-pageflow > .wp-block-noic-section-heading:first-child {
	margin-top: 0;
}

.noic-blockstatement {
	margin-block: var(--sp-5);
}

.noic-blockstatement .noic-statement__support {
	margin-top: var(--sp-3);
}

.noic-watch--block {
	margin-block: var(--sp-6);
}

.noic-home-extra {
	padding-block: var(--sp-6) 0;
}

.noic-home-extra .noic-pageflow {
	padding-block: 0;
}

/* Core buttons wear the instrument controls. */
.noic-pageflow .wp-block-buttons,
.noic-prose .wp-block-buttons {
	margin-block: var(--sp-4);
	gap: 1rem;
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	padding: 1em 1.6em;
	border: 1px solid var(--hairline-strong);
	border-radius: 0;
	background: transparent;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--track-3);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--noic-bone);
	transition: border-color 0.25s ease;
}

.wp-block-button__link:hover {
	border-color: var(--noic-orange);
	color: var(--noic-bone);
}

.wp-block-button__link::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--noic-orange);
	flex: none;
}

.noic-paper .wp-block-button__link {
	border-color: rgba(25, 23, 19, 0.4);
	color: var(--ink);
}

/* Core separator becomes the plot rule. */
.wp-block-separator {
	border: 0;
	height: 1px;
	background: var(--hairline);
	position: relative;
	margin-block: var(--sp-5);
	max-width: min(22rem, 55%);
}

.wp-block-separator::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 2rem;
	height: 1px;
	background: var(--noic-orange);
}

.noic-paper .wp-block-separator {
	background: rgba(25, 23, 19, 0.16);
}

/* Quotes and pullquotes on the dark canvas. */
.noic-pageflow .wp-block-pullquote {
	border-block: 1px solid var(--hairline);
	padding: var(--sp-4) 0;
	margin-block: var(--sp-5);
}

.noic-pageflow .wp-block-pullquote blockquote p {
	font-family: var(--font-serif);
	font-size: clamp(1.375rem, 1.1rem + 1.4vw, 1.75rem);
	line-height: 1.45;
	font-style: italic;
	color: var(--noic-ash);
}

/* ------------------------------------------------------------------ *
 * 20. The block canvas — every page is a composition
 * ------------------------------------------------------------------ */
.noic-canvas > * {
	padding-inline: var(--rail-x);
	box-sizing: content-box;
	margin-block: 0;
}

.noic-canvas > * + * {
	margin-block-start: 1.4em;
}

/* Section blocks are self-contained full-bleed compositions. */
.noic-canvas > .noic-screen,
.noic-canvas > .alignfull {
	padding-inline: 0;
	box-sizing: border-box;
	margin-block-start: 0;
}

/* The hero is full-bleed too, but its edge inset lives on the section
   itself (not an inner wrap), so restore it here instead of zeroing. */
.noic-canvas > .noic-hero {
	padding-inline: var(--pad-x);
	box-sizing: border-box;
	margin-block-start: 0;
}

/* Loose text blocks sit on the rail at reading width. */
.noic-canvas > p,
.noic-canvas > ul,
.noic-canvas > ol,
.noic-canvas > blockquote {
	max-width: 65ch;
	color: rgba(242, 233, 218, 0.92);
}

.noic-canvas > ul,
.noic-canvas > ol {
	padding-left: calc(var(--rail-x) + 1.4em);
}

.noic-canvas > h2,
.noic-canvas > h3,
.noic-canvas > h4 {
	max-width: 26ch;
	letter-spacing: var(--track-1);
	text-transform: uppercase;
	margin-block-start: 2em;
}

.noic-canvas > h2 {
	font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
}

.noic-canvas > h3 {
	font-size: 1.0625rem;
	letter-spacing: var(--track-2);
}

.noic-canvas--page {
	padding-block: var(--sp-5) var(--sp-6);
}

.noic-canvas a {
	color: var(--noic-bone);
	text-decoration-color: rgba(244, 81, 30, 0.6);
	text-underline-offset: 4px;
}

.noic-canvas > .wp-block-separator {
	margin-inline: 0 auto;
}

/* ------------------------------------------------------------------ *
 * 21. The station — atmosphere, case files, broadcast grammar
 * ------------------------------------------------------------------ */

/* Light pools: the black gets weather. Episode tones recolor the sky. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(58rem 46rem at 80% 10%, rgba(var(--pool-rgb, 242, 233, 218), 0.1), transparent 62%),
		radial-gradient(70rem 52rem at 4% 55%, rgba(242, 233, 218, 0.045), transparent 60%),
		radial-gradient(54rem 46rem at 74% 100%, rgba(var(--pool-rgb, 242, 233, 218), 0.05), transparent 60%);
}

.noic-tone-ocean    { --pool-rgb: 94, 122, 138; }
.noic-tone-amber    { --pool-rgb: 154, 106, 50; }
.noic-tone-steel    { --pool-rgb: 110, 119, 128; }
.noic-tone-green    { --pool-rgb: 71, 105, 90; }
.noic-tone-maritime { --pool-rgb: 62, 95, 109; }
.noic-tone-violet   { --pool-rgb: 92, 82, 102; }

/* Film grain: barely there, above everything, touching nothing. */
body::after {
	content: "";
	position: fixed;
	inset: -60px;
	z-index: 90;
	pointer-events: none;
	opacity: 0.055;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
	body::after {
		animation: noic-grain 0.9s steps(6) infinite;
	}

	@keyframes noic-grain {
		0% { transform: translate(0, 0); }
		17% { transform: translate(-24px, 12px); }
		33% { transform: translate(14px, -20px); }
		50% { transform: translate(-10px, -28px); }
		67% { transform: translate(26px, 18px); }
		83% { transform: translate(-18px, 24px); }
		100% { transform: translate(0, 0); }
	}
}

/* The paper surfaces stay clean of grain-tinting problems (grain overlays
   them too, which reads as print texture — intended). */

/* Typed readout caret. */
.noic-caret {
	display: inline-block;
	width: 1px;
	height: 1em;
	background: var(--noic-orange);
	margin-left: 4px;
	vertical-align: -0.15em;
}

@media (prefers-reduced-motion: no-preference) {
	.noic-caret {
		animation: noic-caret 1.1s steps(1) infinite;
	}

	@keyframes noic-caret {
		50% { opacity: 0; }
	}
}

/* New-signal band (live window after a release). */
.noic-signalband {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.8rem;
	padding: 0.55rem var(--rail-x);
	border-top: 1px solid var(--hairline);
	font-size: 0.8125rem;
	letter-spacing: var(--track-2);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--noic-smoke);
	transition: color 0.2s ease;
}

.noic-signalband:hover {
	color: var(--noic-bone);
}

/* Case row on episode headers. */
.noic-ephead__case {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	margin-top: 1.1rem;
	color: rgba(167, 163, 155, 0.85);
	letter-spacing: var(--track-2);
	position: relative;
	z-index: 1;
}

/* Contour fragment: the map behind the case file. */
.noic-ephead__contour {
	position: absolute;
	top: 0;
	right: 0;
	width: min(64rem, 72%);
	height: 100%;
	color: var(--tone, var(--noic-smoke));
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to left, black 55%, transparent);
	mask-image: linear-gradient(to left, black 55%, transparent);
}

.noic-ephead__contour svg {
	width: 100%;
	height: 100%;
}

/* Waveform scrub. */
[data-noic-scrub] {
	position: relative;
	cursor: crosshair;
	touch-action: pan-y;
}

.noic-scrubtip {
	position: absolute;
	top: -1.9rem;
	transform: translateX(-50%);
	background: var(--lift);
	border: 1px solid var(--hairline);
	color: var(--noic-bone);
	padding: 2px 9px;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.noic-scrubtip.is-on {
	opacity: 1;
}

/* Live plot caption. */
.noic-plot__caption {
	margin-top: 1rem;
	color: var(--noic-smoke);
	letter-spacing: var(--track-2);
}

/* Transmission sign-off. */
.noic-footer__signoff {
	color: rgba(167, 163, 155, 0.85);
	letter-spacing: 0.18em;
	text-transform: none;
}

/* Page transitions: a quick top-down reveal, like switching monitors. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: noic-vt-out 140ms ease both;
	}

	::view-transition-new(root) {
		animation: noic-vt-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	@keyframes noic-vt-out {
		to { opacity: 0; }
	}

	@keyframes noic-vt-in {
		from { opacity: 0.4; clip-path: inset(0 0 100% 0); }
		to { opacity: 1; clip-path: inset(0 0 0 0); }
	}
}

/* ------------------------------------------------------------------ *
 * 22. Statement splits — sections that occupy the rail
 * ------------------------------------------------------------------ */
.noic-blockstatement--split {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	border-top: 1px solid var(--hairline);
	padding-top: var(--sp-4);
}

@media (min-width: 1000px) {
	.noic-blockstatement--split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(3rem, 7vw, 7rem);
	}
}

.noic-blockstatement__head .noic-screen__title {
	max-width: 16ch;
	margin-top: 0.25rem;
}

.noic-blockstatement--split .noic-statement {
	max-width: 34ch;
}

.noic-blockstatement--split .noic-statement__support {
	max-width: 52ch;
}

/* On a composed page the signal panel spans the rail like the console. */
.noic-canvas > .wp-block-noic-signal {
	max-width: none;
}

.noic-canvas > .wp-block-noic-signal .noic-signal__text {
	max-width: 46ch;
}

/* ------------------------------------------------------------------ *
 * 23. The craft pass — giant wordmark, progress rule, instrument
 *     cursors, drawn underlines, scrollbar
 * ------------------------------------------------------------------ */

/* The end of transmission, marked with confidence. */
.noic-footer__giant {
	/* Always two stacked lines: the flex-row/space-between variant put
	   both words on one line with a dead gap on mid-size viewports. */
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--rail-x) 0;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(3rem, 8.6vw, 9.5rem);
	line-height: 0.95;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1px rgba(242, 233, 218, 0.2);
	user-select: none;
	pointer-events: none;
	white-space: nowrap;
}

@supports not (-webkit-text-stroke: 1px #fff) {
	.noic-footer__giant {
		color: rgba(242, 233, 218, 0.07);
	}
}

/* Phones: scale with the viewport instead of flooring at 3rem — WebKit
   tracks Montserrat wider than Blink and the floor caused collisions. */
@media (max-width: 700px) {
	.noic-footer__giant {
		font-size: clamp(2.25rem, 10.8vw, 3rem);
	}
}

/* Short viewports (phone landscape): a 100svh hero is a squashed hero. */
@media (max-height: 520px) {
	.noic-hero {
		min-height: auto;
		padding-top: 7rem;
		padding-bottom: 4rem;
	}
}

/* Reading progress on episodes: the orange marker on its rule. */
.noic-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: rgba(242, 233, 218, 0.08);
	z-index: 80;
	pointer-events: none;
}

.noic-progress__marker {
	display: block;
	width: 3.5rem;
	height: 2px;
	background: var(--noic-orange);
	will-change: transform;
}

/* Instrument surfaces get the crosshair. */
.noic-hero,
.noic-plot,
.noic-epcard__plot,
[data-noic-scrub] {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M13 0v9M13 17v9M0 13h9M17 13h9' stroke='%23F2E9DA' stroke-opacity='.85'/%3E%3Ccircle cx='13' cy='13' r='2' fill='%23F4511E'/%3E%3C/svg%3E") 13 13, crosshair;
}

/* Underlines draw themselves in. */
.noic-nav__list a,
.noic-arrowlink,
.noic-footer__list a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left calc(100% + 3px);
	background-size: 0% 1px;
	transition: background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
	padding-bottom: 4px;
	text-decoration: none;
}

.noic-nav__list a:hover,
.noic-arrowlink:hover,
.noic-footer__list a:hover {
	background-size: 100% 1px;
	text-decoration: none;
}

.noic-footer__list a:hover {
	text-decoration: none;
}

/* The scrollbar belongs to the instrument too. */
html {
	scrollbar-color: #33312d #0a0a09;
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: #0a0a09;
}

::-webkit-scrollbar-thumb {
	background: #33312d;
	border: 2px solid #0a0a09;
}

::-webkit-scrollbar-thumb:hover {
	background: #4a473f;
}

/* ------------------------------------------------------------------ *
 * 24. Episode page: document + file card composition
 * The reading column plus a sticky instrument card in the right
 * margin. Rail math at full width: 76rem = 56rem main + 4rem gutter
 * + 16rem card, so the document column lands exactly on --w-reading.
 * ------------------------------------------------------------------ */

.noic-epfile {
	display: none;
}

@media (min-width: 1100px) {
	.noic-episode__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(14rem, 18vw, 16rem);
		column-gap: clamp(3rem, 4vw, 4rem);
	}

	.noic-epfile {
		display: block;
		align-self: start;
		position: sticky;
		top: var(--sp-4);
		margin-top: var(--sp-5);
		border: 1px solid var(--hairline);
		background: var(--lift);
		padding: 1.5rem 1.5rem 1.75rem;
		font-size: 0.8125rem;
		letter-spacing: var(--track-2);
		color: var(--noic-smoke);
	}

	.noic-epfile__label {
		display: flex;
		align-items: center;
		gap: 0.7rem;
		margin: 0 0 1.25rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid var(--hairline);
		text-transform: uppercase;
		letter-spacing: var(--track-3);
		color: var(--noic-bone);
	}

	.noic-epfile__rows {
		margin: 0;
		display: grid;
		row-gap: 0.85rem;
	}

	.noic-epfile__rows > div {
		display: grid;
		grid-template-columns: 5.25rem minmax(0, 1fr);
		column-gap: 0.75rem;
		align-items: baseline;
	}

	/* Narrow card: the value column gets cramped, so the label sits
	   above its value instead. */
	@media (max-width: 1299px) {
		.noic-epfile__rows {
			row-gap: 1rem;
		}

		.noic-epfile__rows > div {
			grid-template-columns: minmax(0, 1fr);
			row-gap: 0.25rem;
		}
	}

	.noic-epfile__rows dt {
		text-transform: uppercase;
		letter-spacing: var(--track-3);
		font-size: 0.6875rem;
		color: color-mix(in srgb, var(--noic-smoke) 88%, transparent);
	}

	.noic-epfile__rows dd {
		margin: 0;
		color: var(--noic-ash);
		font-size: 0.75rem;
		letter-spacing: 0.05em;
		overflow-wrap: break-word;
	}

	.noic-epfile__topic {
		display: block;
	}

	.noic-epfile__topic + .noic-epfile__topic {
		margin-top: 0.3rem;
	}

	.noic-epfile__no {
		color: var(--noic-orange);
	}

	/* One shared right edge inside the document column: the list blocks
	   fill the column like the player and signal already do. */
	.noic-episode__main .noic-wtd__list,
	.noic-episode__main .noic-sources__list,
	.noic-episode__main .noic-resources__list,
	.noic-episode__main .noic-guest {
		max-width: none;
	}
}

/* ------------------------------------------------------------------ *
 * 25. Hero trailer mode: the CTA is a button that loads the trailer
 *     player in place (facade pattern, no third-party JS until click).
 * ------------------------------------------------------------------ */

button.noic-cta {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-align: left;
	cursor: pointer;
	display: inline-block;
}

.noic-hero__cta .noic-player__embed {
	width: min(660px, 100%);
	margin-top: 0.5rem;
}

/* ------------------------------------------------------------------ *
 * 26. The trailer module — one instrument-styled housing, used in the
 *     hero, on episode pages awaiting audio, and on the archive. The
 *     embed loads inside the frame on click.
 * ------------------------------------------------------------------ */

.noic-trailer {
	border: 1px solid var(--hairline);
	background: var(--lift);
	padding: 1.15rem 1.4rem 1.3rem;
	position: relative;
}

/* Orange tick on the frame: the signal device, quiet. */
.noic-trailer::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 2.25rem;
	height: 2px;
	background: var(--noic-orange);
}

.noic-trailer__label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	letter-spacing: var(--track-3);
	text-transform: uppercase;
	color: var(--noic-bone);
}

.noic-trailer__meta {
	color: var(--noic-smoke);
	margin-left: auto;
}

.noic-trailer__play {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 1.1rem;
	width: 100%;
	background: none;
	border: 0;
	padding: 0.25rem 0;
	margin: 0;
	font: inherit;
	color: var(--noic-bone);
	text-align: left;
	cursor: pointer;
}

.noic-trailer__icon {
	flex: none;
}

.noic-trailer__icon svg {
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.noic-trailer__icon circle {
	transition: stroke 0.25s ease, stroke-opacity 0.25s ease;
}

.noic-trailer__play:hover .noic-trailer__icon circle,
.noic-trailer__play:focus-visible .noic-trailer__icon circle {
	stroke: var(--noic-orange);
	stroke-opacity: 1;
}

.noic-trailer__text {
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: var(--track-2);
	text-transform: uppercase;
	white-space: nowrap;
}

.noic-trailer__trace {
	flex: 1;
	min-width: 0;
	opacity: 0.4;
	transition: opacity 0.25s ease;
}

.noic-trailer__play:hover .noic-trailer__trace {
	opacity: 0.75;
}

.noic-trailer__trace svg {
	display: block;
	width: 100%;
	height: 34px;
}

.noic-trailer .noic-player__embed {
	margin-top: 0.25rem;
}

.noic-trailer__noscript {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
}

.noic-trailer__noscript a {
	color: var(--noic-ash);
}

/* Variants. */
.noic-trailer--hero {
	width: min(680px, 100%);
}

.noic-trailer--episode {
	margin-top: 1rem;
}

.noic-trailer--band {
	max-width: var(--w-reading);
	margin-block: var(--sp-4) var(--sp-2);
}

@media (max-width: 559px) {
	.noic-trailer__trace {
		display: none;
	}

	.noic-trailer__meta {
		margin-left: 0;
		width: 100%;
	}
}

/* ------------------------------------------------------------------ *
 * 27. V1 client notes: listen row, takeaway, bare acts, hero
 *     attribution, range coming-soon, episode description
 * ------------------------------------------------------------------ */

/* Listen / Follow / Subscribe. */
.noic-listenrow {
	margin-block: var(--sp-4);
}

.noic-listenrow__label {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.8125rem;
	letter-spacing: var(--track-3);
	text-transform: uppercase;
	color: var(--noic-smoke);
	margin: 0 0 0.9rem;
}

.noic-listenrow__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
}

.noic-listenrow__link {
	display: inline-block;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--hairline-strong);
	color: var(--noic-bone);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	letter-spacing: var(--track-2);
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.noic-listenrow__link:hover,
.noic-listenrow__link:focus-visible {
	border-color: var(--noic-orange);
	text-decoration: none;
}

.noic-listenrow--compact {
	margin-block: var(--sp-5) var(--sp-3);
}

.noic-listenrow--compact .noic-listenrow__label {
	margin-bottom: 0.7rem;
}

.noic-listenrow--compact .noic-listenrow__link {
	padding: 0.4rem 0.8rem;
	font-size: 0.75rem;
}

.noic-hero__cta .noic-listenrow {
	margin-block: 1.5rem 0;
}

.noic-hero__cta .noic-listenrow__label {
	display: none;
}

.noic-hero__cta .noic-listenrow__link {
	border-color: var(--hairline);
	color: var(--noic-ash);
	padding: 0.45rem 0.9rem;
	font-size: 0.75rem;
}

.noic-hero__cta .noic-listenrow__link:hover {
	border-color: var(--noic-orange);
	color: var(--noic-bone);
}

/* Homepage listen band (block wrapper). */
.noic-listenband {
	padding-block: var(--sp-3);
}

/* Hero attribution under the quote. */
.noic-hero__tagline em {
	font-style: italic;
}

.noic-hero__attrib {
	display: block;
	margin-top: 0.9rem;
	font-size: 0.8125rem;
	letter-spacing: var(--track-3);
	text-transform: uppercase;
	color: var(--noic-smoke);
}

/* The takeaway: one concise thought. */
.noic-takeaway {
	margin-block: var(--sp-6);
	border-top: 1px solid var(--hairline);
	padding-top: var(--sp-4);
}

.noic-takeaway__heading {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: var(--track-3);
	text-transform: uppercase;
	color: var(--noic-smoke);
	margin: 0 0 1.1rem;
}

.noic-takeaway__text {
	font-family: var(--font-serif);
	font-size: clamp(1.375rem, 1.1rem + 1.5vw, 1.875rem);
	line-height: 1.45;
	max-width: 30ch;
	text-wrap: balance;
	margin: 0;
}

/* Bare acts: a compact index of the episode's structure. */
.noic-act--bare {
	margin-top: 0;
	border-top: 0;
	padding-top: var(--sp-3);
}

.noic-act--bare .noic-act__title {
	margin-bottom: 0.4rem;
}

@media (min-width: 1100px) {
	.noic-episode__content .noic-act--bare {
		padding-top: var(--sp-3);
	}

	.noic-episode__content .noic-act--bare .noic-act__meta {
		grid-row: 1;
	}
}

/* Range: coming-soon rows are quieter and not interactive. */
.noic-range__link--static {
	cursor: default;
}

.noic-range__row--soon .noic-range__name {
	color: var(--noic-smoke);
}

.noic-range__row--soon .noic-range__count {
	color: color-mix(in srgb, var(--noic-smoke) 70%, transparent);
}

/* Short episode description under the governing question. */
.noic-epdesc {
	font-family: var(--font-serif);
	font-size: 1.1875rem;
	line-height: 1.65;
	color: var(--noic-ash);
	max-width: 62ch;
	margin-block: var(--sp-4);
}

/* ------------------------------------------------------------------ *
 * 28. Season placeholders: episodes still resolving on the scope
 * ------------------------------------------------------------------ */

.noic-eplist--pending {
	margin-top: 0;
}

.noic-epcard--pending {
	cursor: default;
	padding-block: var(--sp-3);
	align-items: center;
}

.noic-epcard--pending .noic-epcard__numeral {
	-webkit-text-stroke: 1px rgba(242, 233, 218, 0.1);
}

/* One instrument line: status, the unresolved trace, the date. */
.noic-epcard__pendingline {
	grid-column: 2 / 4;
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	font-size: 0.8125rem;
}

.noic-epcard__scanlabel {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	flex: none;
	min-width: 13rem;
	color: var(--noic-smoke);
	letter-spacing: var(--track-3);
	text-transform: uppercase;
}

.noic-epcard__scanlabel .noic-dot {
	opacity: 0.55;
}

.noic-epcard__stamp {
	color: var(--noic-smoke);
	letter-spacing: var(--track-2);
	text-transform: uppercase;
}

.noic-epcard--pending .noic-epcard__stamp {
	flex: none;
}

.noic-epcard__trace {
	position: relative;
	overflow: hidden;
	flex: 1;
	min-width: 0;
	opacity: 0.5;
	color: var(--noic-smoke);
}

.noic-epcard__trace .noic-wave {
	display: block;
	width: 100%;
	height: 30px;
}

.noic-epcard__trace .noic-wave__head {
	display: none;
}

/* The sweep: a thin light crossing the unresolved trace. Motion only. */
.noic-epcard__sweepline {
	display: none;
}

html.noic-motion .noic-epcard__sweepline {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3.5rem;
	background: linear-gradient(90deg, transparent, rgba(242, 233, 218, 0.14), transparent);
	animation: noic-sweepline 9s ease-in-out infinite;
}

.noic-eplist--pending .noic-epcard--pending:nth-child(2) .noic-epcard__sweepline { animation-delay: -3s; }
.noic-eplist--pending .noic-epcard--pending:nth-child(3) .noic-epcard__sweepline { animation-delay: -6s; }
.noic-eplist--pending .noic-epcard--pending:nth-child(5) .noic-epcard__sweepline { animation-delay: -4.5s; }
.noic-eplist--pending .noic-epcard--pending:nth-child(7) .noic-epcard__sweepline { animation-delay: -1.5s; }

@keyframes noic-sweepline {
	0% { left: -10%; }
	55% { left: 105%; }
	100% { left: 105%; }
}

@media (max-width: 639px) {
	.noic-epcard__pendingline {
		flex-wrap: wrap;
		gap: 0.6rem 1.25rem;
	}

	.noic-epcard__scanlabel {
		min-width: 0;
	}

	.noic-epcard__trace {
		order: 3;
		flex-basis: 100%;
	}
}

/* Field Notes header: the intake line. */
.noic-archive__write {
	margin-top: 1.4rem;
}

.noic-archive__write .noic-arrowlink .noic-dot {
	margin-right: 0.6rem;
}