/*
 * Earshot.
 *
 * Dark, because the ground is a wall of studio foam and because a player looks
 * like a player against it. --accent comes from the Customizer and is written
 * inline by inc/enqueue.php; everything else is fixed.
 */

:root {
	--ink: #121214;
	--lift: #38383c;
	--paper: #f2f0ec;
	--paper-2: #c9c6c0;
	--paper-3: #a09c95;
	--rule: rgba(242, 240, 236, 0.14);
	--rule-2: rgba(242, 240, 236, 0.08);

	--accent: #e8834a;

	--sheet: rgba(18, 18, 20, 0.72);
	--sheet-solid: rgba(16, 16, 18, 0.94);

	--text: 'Earshot Text', ui-serif, Georgia, serif;
	--sans: 'Earshot Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--pad: clamp(1.1rem, 4.5vw, 4rem);
	--measure: 36rem;
	--maxw: 78rem;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media ( prefers-reduced-motion: reduce ) { html { scroll-behavior: auto; } }
html.is-locked { overflow: hidden; }

body {
	margin: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--text);
	font-size: clamp(1.02rem, 0.98rem + 0.22vw, 1.14rem);
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--sans); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.018em; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

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

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.skip {
	position: absolute; left: 0.6rem; top: -4rem; z-index: 200;
	background: var(--accent); color: #17110c;
	padding: 0.6em 1em; text-decoration: none; font-family: var(--sans);
	transition: top 0.2s var(--ease);
}
.skip:focus { top: 0.6rem; }

/* ─────────────────────────  The wall  ────────────────────────────────── */

.ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; contain: strict; }
.ground__canvas {
	display: block; width: 100%; height: 100%;
	opacity: 0; transition: opacity 1.4s var(--ease);
}
.ground__canvas.is-ready { opacity: 1; }

.masthead, .site-main, .site-footer { position: relative; z-index: 1; }
.masthead { z-index: 60; }
.drawer { z-index: 70; }

/* ─────────────────────────  Masthead  ────────────────────────────────── */

.masthead { position: sticky; top: 0; transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.masthead.is-settled {
	background: var(--sheet-solid);
	backdrop-filter: blur(10px) saturate(110%);
	-webkit-backdrop-filter: blur(10px) saturate(110%);
	box-shadow: 0 1px 0 var(--rule-2);
}
.masthead__inner {
	max-width: var(--maxw); margin-inline: auto;
	padding: clamp(0.8rem, 2vh, 1.25rem) var(--pad);
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.mark { text-decoration: none; display: grid; gap: 0.1rem; }
.mark__name { font-family: var(--sans); font-size: clamp(1.1rem, 1.7vw, 1.42rem); font-weight: 700; letter-spacing: -0.02em; }
.mark__what { font-family: var(--sans); font-size: 0.76rem; color: var(--paper-3); }

.nav { display: none; }
@media ( min-width: 60rem ) {
	.nav { display: flex; gap: clamp(1rem, 2.2vw, 2rem); align-items: baseline; }
	.drawer-toggle { display: none; }
}
.nav a {
	font-family: var(--sans); font-size: 0.92rem; text-decoration: none;
	color: var(--paper-2); padding-bottom: 0.2em;
	border-bottom: 1px solid transparent;
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--paper); border-color: var(--accent); }

.drawer-toggle {
	appearance: none; background: transparent; border: 0; padding: 0.6rem;
	cursor: pointer; display: grid; gap: 5px; margin-right: -0.6rem;
}
.drawer-toggle i { display: block; width: 26px; height: 1.5px; background: var(--paper); }

.drawer {
	position: fixed; inset: 0;
	background: var(--sheet-solid);
	backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	display: grid; place-content: center; gap: 1.2rem; text-align: center;
	opacity: 0; visibility: hidden;
	transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer a { font-family: var(--sans); font-size: clamp(1.4rem, 5vw, 2rem); text-decoration: none; }
.drawer__close {
	position: absolute; top: 1rem; right: 1rem;
	appearance: none; background: transparent; border: 0; cursor: pointer;
	font-family: var(--sans); font-size: 0.85rem; color: var(--paper-2); padding: 0.7rem;
}

/* ─────────────────────────  Reveals  ─────────────────────────────────── */

.js [data-reveal] {
	opacity: 0; transform: translateY(14px);
	transition: opacity 0.7s var(--out), transform 0.7s var(--out);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media ( prefers-reduced-motion: reduce ) {
	.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────────  Sections  ────────────────────────────────── */

.opening, .latest, .stack, .shows, .faces, .listing-top, .single, .episode__top, .episode__body, .talk {
	max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
}
.latest, .stack, .shows, .faces { padding-block: clamp(2.5rem, 6vh, 4.5rem); }

/* A full screen, because the ground here is the episode's own waveform drawn
   at the size of the window rather than the size of a widget. */
.opening {
	min-height: 92svh;
	display: grid;
	align-items: end;
	padding-block: clamp(4.5rem, 14vh, 9rem) clamp(3rem, 8vh, 5rem);
}
.opening__line {
	font-size: clamp(2.6rem, 8vw, 6rem);
	letter-spacing: -0.032em; max-width: 15ch;
	margin-bottom: clamp(1rem, 2.5vh, 1.6rem);
}
.opening__sub { max-width: var(--measure); color: var(--paper-2); font-size: clamp(1.05rem, 1.3vw, 1.22rem); }
.opening__find { margin-top: clamp(1.6rem, 4vh, 2.6rem); }

/* ─────────────────────────  Search box  ─────────────────────────────── */

.hunt { display: flex; gap: 0.6rem; flex-wrap: wrap; max-width: 34rem; }
.hunt__field {
	flex: 1 1 15rem; min-width: 0;
	font-family: var(--sans); font-size: 1rem; color: var(--paper);
	background: rgba(242, 240, 236, 0.06);
	border: 1px solid var(--rule);
	padding: 0.75em 1em;
}
.hunt__field::placeholder { color: var(--paper-3); }
.hunt__go {
	font-family: var(--sans); font-size: 0.95rem; font-weight: 600; cursor: pointer;
	color: #17110c; background: var(--accent); border: 1px solid var(--accent);
	padding: 0.75em 1.5em;
	transition: filter 0.3s var(--ease);
}
.hunt__go:hover { filter: brightness(1.1); }

/* ─────────────────────────  The player  ──────────────────────────────── */

.player {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.7rem 1rem;
	margin-top: 1rem;
}
.player--full { gap: 1rem 1.3rem; margin-top: clamp(1.4rem, 3vh, 2rem); }

.player__go {
	appearance: none; cursor: pointer;
	width: 3rem; height: 3rem;
	border-radius: 50%;
	border: 1px solid var(--accent);
	background: transparent;
	display: grid; place-items: center;
	transition: background-color 0.3s var(--ease);
	grid-row: 1 / 3;
}
.player--full .player__go { width: 4.2rem; height: 4.2rem; }
.player__go:hover { background: rgba(232, 131, 74, 0.16); }

/* A triangle from borders, becoming two bars when playing. No icon font, no
   SVG sprite, and it flips with one class. */
.player__icon {
	display: block;
	width: 0; height: 0;
	border-left: 0.95rem solid var(--accent);
	border-top: 0.58rem solid transparent;
	border-bottom: 0.58rem solid transparent;
	margin-left: 0.22rem;
}
.player--full .player__icon { border-left-width: 1.3rem; border-top-width: 0.8rem; border-bottom-width: 0.8rem; }
.player.is-playing .player__icon {
	width: 0.9rem; height: 1.1rem;
	border: 0;
	margin-left: 0;
	background: linear-gradient( to right, var(--accent) 0 34%, transparent 34% 66%, var(--accent) 66% 100% );
}
.player--full.is-playing .player__icon { width: 1.2rem; height: 1.5rem; }

.player__track {
	cursor: pointer;
	position: relative;
	padding-block: 0.35rem;
	touch-action: manipulation;
}
.wave { display: block; width: 100%; height: var(--h); overflow: visible; }
.wave__base { fill: rgba(242, 240, 236, 0.26); }
.wave__done { fill: var(--accent); }
.player__track:hover .wave__base { fill: rgba(242, 240, 236, 0.38); }

/* An episode whose waveform was never measured gets an honest plain bar rather
   than an invented shape. */
.wave--flat {
	display: block; width: 100%; height: 4px;
	background: linear-gradient( to right, var(--accent) 0 var(--p, 0%), rgba(242, 240, 236, 0.26) var(--p, 0%) 100% );
	margin-block: calc( ( var(--h) - 4px ) / 2 );
}

.player__times {
	grid-column: 2;
	display: flex; justify-content: space-between;
	font-family: var(--sans); font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	color: var(--paper-3);
}
.player__skips { grid-column: 2; display: flex; gap: 0.6rem; }
.player__skip {
	appearance: none; cursor: pointer;
	font-family: var(--sans); font-size: 0.8rem;
	color: var(--paper-2); background: transparent;
	border: 1px solid var(--rule); padding: 0.4em 0.9em;
	transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.player__skip:hover { border-color: var(--accent); color: var(--paper); }

/* ─────────────────────────  Latest  ─────────────────────────────────── */

.latest__flag {
	font-family: var(--sans); font-size: 0.76rem; font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
	margin-bottom: clamp(1rem, 2.5vh, 1.6rem);
}
.latest__art { max-width: 15rem; margin-bottom: 1.4rem; }
.latest__art img, .art__none { border-radius: 3px; }
.latest__meta, .row__meta, .episode__meta {
	display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
	font-family: var(--sans); font-size: 0.8rem; color: var(--paper-3);
	margin-bottom: 0.7rem;
}
.latest__meta a, .episode__meta a { color: var(--accent); text-decoration: none; }
.latest__name { font-size: clamp(1.6rem, 3.4vw, 2.7rem); margin-bottom: 0.7rem; }
.latest__name a { text-decoration: none; }
.latest__name a:hover { color: var(--accent); }
.latest__sub { color: var(--paper-2); max-width: var(--measure); }

@media ( min-width: 56rem ) {
	.latest { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
	.latest__flag { grid-column: 1 / -1; }
	.latest__art { margin-bottom: 0; max-width: none; }
}

/* ─────────────────────────  Episode rows  ───────────────────────────── */

.stack__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.stack__title, .shows__title, .faces__title { font-size: clamp(1.3rem, 2.2vw, 1.9rem); }
.stack__list { display: grid; margin-top: clamp(1.4rem, 3.5vh, 2.2rem); }

.row {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 0.8rem 1.1rem;
	padding-block: clamp(1.3rem, 3vh, 2rem);
	border-top: 1px solid var(--rule-2);
}
.row:first-child { border-top: 0; }
.row__art { display: block; }
.row__art img, .row__art .art__none { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.row__name { font-size: clamp(1.1rem, 1.9vw, 1.45rem); margin-bottom: 0.4rem; }
.row__name a { text-decoration: none; }
.row__name a:hover { color: var(--accent); }
.row__sub { color: var(--paper-2); max-width: 58ch; font-size: 0.98rem; }
.row__show { color: var(--accent); }

@media ( min-width: 48rem ) {
	.row { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem 1.6rem; }
}

.art__none {
	display: grid; place-items: center;
	width: 100%; aspect-ratio: 1 / 1;
	background: rgba(242, 240, 236, 0.06);
	box-shadow: inset 0 0 0 1px var(--rule-2);
}
.art__none i {
	font-family: var(--sans); font-style: normal; font-weight: 700;
	font-size: clamp(0.9rem, 2.2vw, 1.4rem); color: var(--paper-3);
	letter-spacing: 0.02em;
}

.more {
	font-family: var(--sans); font-size: 0.9rem; text-decoration: none;
	color: var(--accent);
	border-bottom: 1px solid transparent; padding-bottom: 0.15em;
	transition: border-color 0.35s var(--ease);
}
.more:hover { border-color: var(--accent); }

/* ─────────────────────────  Shows and people  ───────────────────────── */

.shows__list, .faces__list { list-style: none; margin: clamp(1.4rem, 3.5vh, 2.2rem) 0 0; padding: 0; display: grid; }
.shows__list { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.showcard__link {
	display: grid; gap: 0.4rem; text-decoration: none;
	padding: clamp(1.1rem, 2.5vw, 1.6rem);
	background: var(--sheet);
	box-shadow: inset 0 0 0 1px var(--rule-2);
	transition: box-shadow 0.35s var(--ease), transform 0.5s var(--out);
}
.showcard__link:hover { box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(-2px); }
.showcard__name { font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
.showcard__note { color: var(--paper-2); font-size: 0.95rem; }
.showcard__count { font-family: var(--sans); font-size: 0.78rem; color: var(--paper-3); }

.faces__list { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
.face__link { display: grid; gap: 0.3rem; text-decoration: none; }
.face__frame { display: block; overflow: hidden; border-radius: 50%; aspect-ratio: 1 / 1; }
.face__frame img, .face__frame .art__none { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.face__name { font-family: var(--sans); font-weight: 600; font-size: 0.98rem; }
.face__role { font-family: var(--sans); font-size: 0.8rem; color: var(--paper-3); }

/* ─────────────────────────  Episode page  ───────────────────────────── */

.episode__top { padding-block: clamp(5rem, 13vh, 8rem) clamp(1.5rem, 4vh, 2.5rem); }
.episode__art { max-width: 13rem; margin-bottom: 1.4rem; }
.episode__name { font-size: clamp(1.9rem, 4.4vw, 3.4rem); margin-bottom: 0.6rem; }
.episode__guests { font-family: var(--sans); font-size: 0.92rem; color: var(--paper-2); }

@media ( min-width: 56rem ) {
	.episode__top { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
	.episode__art { margin-bottom: 0; max-width: none; }
}

.episode__body { padding-bottom: clamp(3rem, 8vh, 5rem); }

.prose { max-width: var(--measure); }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.05em; }
.prose p { line-height: 1.68; color: var(--paper-2); }
.prose h2 { font-size: clamp(1.25rem, 2.1vw, 1.7rem); margin-top: 1.8em; color: var(--paper); }
.prose a { color: var(--accent); text-underline-offset: 0.18em; }
.prose ul, .prose ol { padding-inline-start: 1.3em; color: var(--paper-2); }
.prose li + li { margin-top: 0.35em; }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: 1.2em; font-style: italic; }

/* ─────────────────────────  Transcript  ─────────────────────────────── */

.script { margin-top: clamp(2.5rem, 7vh, 4rem); }
.script__head { border-top: 1px solid var(--rule); padding-top: clamp(1.2rem, 3vh, 1.8rem); margin-bottom: 1.2rem; }
.script__title { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.script__note { font-family: var(--sans); font-size: 0.82rem; color: var(--paper-3); margin-top: 0.3rem; }

.script__list { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.cue {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: 0.3rem 1rem;
	padding-block: 0.5rem;
	border-radius: 3px;
	transition: background-color 0.3s var(--ease);
}
.cue.is-now { background: rgba(232, 131, 74, 0.10); }
.cue__at {
	appearance: none; cursor: pointer; text-align: left;
	background: transparent; border: 0; padding: 0;
	font-family: var(--sans); font-size: 0.8rem; font-variant-numeric: tabular-nums;
	color: var(--paper-3);
	transition: color 0.25s var(--ease);
}
.cue__at:hover { color: var(--accent); }
.cue.is-now .cue__at { color: var(--accent); }
.cue__line { color: var(--paper-2); }
.cue.is-now .cue__line { color: var(--paper); }
.cue__who { font-family: var(--sans); font-size: 0.82rem; font-weight: 700; color: var(--paper); margin-right: 0.35rem; }

@media ( max-width: 34rem ) {
	.cue { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ─────────────────────────  Listings & search  ──────────────────────── */

.listing-top { padding-block: clamp(5rem, 14vh, 9rem) clamp(1.4rem, 3.5vh, 2.4rem); }
.listing-title { font-size: clamp(2rem, 5.4vw, 4rem); letter-spacing: -0.028em; max-width: 16ch; }
.listing-intro { margin-top: clamp(0.8rem, 2vh, 1.4rem); max-width: var(--measure); color: var(--paper-2); }
.listing-find { margin-top: clamp(1.2rem, 3vh, 1.8rem); }
.listing-empty { color: var(--paper-2); padding-block: 3rem; font-style: italic; }

.hit, .note { padding-block: clamp(1.1rem, 2.6vh, 1.7rem); border-top: 1px solid var(--rule-2); }
.hit:first-child, .note:first-child { border-top: 0; }
.hit__kind { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-3); margin-bottom: 0.35rem; }
.hit__name, .note__name { font-size: clamp(1.1rem, 1.9vw, 1.4rem); margin-bottom: 0.4rem; }
.hit__name a, .note__link { text-decoration: none; }
.hit__name a:hover { color: var(--accent); }
.hit__sub, .note__sub { color: var(--paper-2); max-width: 60ch; }
.note__when { font-family: var(--sans); font-size: 0.78rem; color: var(--paper-3); display: block; margin-top: 0.35rem; }

/* The reason the search exists: a hit inside the audio, linked to the second. */
.hit__cue {
	display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 0.9rem;
	text-decoration: none;
	background: rgba(232, 131, 74, 0.07);
	box-shadow: inset 0 0 0 1px rgba(232, 131, 74, 0.22);
	padding: 0.7rem 0.9rem;
	max-width: 52rem;
	transition: background-color 0.3s var(--ease);
}
.hit__cue:hover { background: rgba(232, 131, 74, 0.14); }
.hit__at { font-family: var(--sans); font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--accent); }
.hit__line { color: var(--paper-2); }
.hit__who { font-family: var(--sans); font-weight: 700; color: var(--paper); margin-right: 0.3rem; }

@media ( max-width: 34rem ) {
	.hit__cue { grid-template-columns: 1fr; gap: 0.2rem; }
}

.pager { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: clamp(2rem, 5vh, 3.2rem); }
.pager .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 2.6rem; padding: 0.5rem 0.75rem;
	font-family: var(--sans); font-size: 0.88rem;
	text-decoration: none; border: 1px solid var(--rule); color: var(--paper-2);
}
.pager .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #17110c; }

.btn {
	display: inline-block; font-family: var(--sans); font-size: 0.92rem; font-weight: 600;
	padding: 0.75em 1.6em; text-decoration: none;
	background: var(--accent); color: #17110c; border: 1px solid var(--accent);
	transition: filter 0.3s var(--ease);
}
.btn:hover { filter: brightness(1.1); }

/* ─────────────────────────  Single pages  ───────────────────────────── */

.single__top { max-width: var(--maxw); margin-inline: auto; padding: clamp(5rem, 14vh, 9rem) var(--pad) clamp(1.4rem, 3.5vh, 2.2rem); }
.single__title { font-size: clamp(1.9rem, 4.6vw, 3.4rem); letter-spacing: -0.026em; max-width: 17ch; }
.single__role { margin-top: 0.7rem; color: var(--paper-2); font-family: var(--sans); font-size: 0.95rem; }
.single { padding-bottom: clamp(3rem, 8vh, 5rem); }
.sheet { max-width: calc( var(--measure) + 6rem ); }

/* ─────────────────────────  Footer  ─────────────────────────────────── */

.site-footer {
	margin-top: clamp(3rem, 8vh, 6rem);
	border-top: 1px solid var(--rule-2);
	background: var(--sheet);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding-block: clamp(2.5rem, 7vh, 4.5rem) clamp(1.4rem, 4vh, 2.4rem);
}
.site-footer__inner {
	max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
	display: grid; gap: clamp(1.6rem, 4vh, 2.6rem);
}
.foot__head { font-size: clamp(1.15rem, 2vw, 1.5rem); margin-bottom: 0.5rem; }
.foot__note { color: var(--paper-2); max-width: 34ch; margin-bottom: 1rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0.7rem 1.5rem; align-content: start; }
.foot__nav a { font-family: var(--sans); font-size: 0.9rem; color: var(--paper-2); text-decoration: none; border-bottom: 1px solid transparent; }
.foot__nav a:hover { border-color: var(--accent); color: var(--paper); }
.foot__hint { font-family: var(--sans); font-size: 0.8rem; color: var(--paper-3); margin-top: 0.6rem; max-width: 34ch; }
.foot__fine { font-family: var(--sans); font-size: 0.78rem; color: var(--paper-3); }

@media ( min-width: 62rem ) {
	.site-footer__inner { grid-template-columns: 1.2fr 0.8fr 1.2fr; align-items: start; }
	.foot__fine { grid-column: 1 / -1; }
}

/* ─────────────────────────  Comments  ───────────────────────────────── */

.talk { padding-bottom: clamp(3rem, 8vh, 5rem); }
.talk__head { font-size: clamp(1.15rem, 2vw, 1.5rem); margin-bottom: 1.3rem; }
.talk__list, .talk__list .children { list-style: none; margin: 0; padding: 0; }
.talk__list .children { padding-inline-start: clamp(1rem, 4vw, 2.2rem); }
.talk__list .comment-body { border-top: 1px solid var(--rule-2); padding-block: 1.3rem; }
.talk__list .comment-author { display: flex; align-items: center; gap: 0.7rem; font-family: var(--sans); font-weight: 600; }
.talk__list .comment-author img { border-radius: 50%; }
.talk__list .comment-metadata, .talk__list .comment-metadata a { font-family: var(--sans); font-size: 0.78rem; color: var(--paper-3); }
.talk__list p { margin: 0.6rem 0 0; color: var(--paper-2); }

.comment-respond { margin-top: clamp(2rem, 5vh, 3rem); }
.comment-reply-title { font-family: var(--sans); font-size: clamp(1.05rem, 1.8vw, 1.3rem); margin-bottom: 1rem; }
.comment-form label { display: block; font-family: var(--sans); font-size: 0.82rem; color: var(--paper-2); margin-bottom: 0.3rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%; font: inherit; color: var(--paper);
	background: rgba(242, 240, 236, 0.06); border: 1px solid var(--rule); padding: 0.6em 0.8em;
}
.comment-form p { margin-bottom: 1rem; }
.comment-form .form-submit input {
	font-family: var(--sans); font-size: 0.92rem; font-weight: 600; cursor: pointer;
	background: var(--accent); color: #17110c; border: 1px solid var(--accent); padding: 0.75em 1.6em;
}

/* Anything the page scrolls itself to — a transcript cue reached by clicking a
   search result, or a fragment link — must clear the sticky masthead, or it
   arrives hidden underneath it. */
.cue, .script, [id] { scroll-margin-top: 6.5rem; }

/* ─────────────────────────  The room  ────────────────────────────────── */

.room { margin-block: clamp(3.5rem, 10vh, 7rem); }
.room__said {
	max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
	margin-bottom: clamp(1.4rem, 3.5vh, 2.2rem);
}
.room__title { font-size: clamp(1.5rem, 3.2vw, 2.4rem); letter-spacing: -0.03em; margin: 0; }
.room__note { margin: 0.7rem 0 0; max-width: 62ch; color: var(--ink-2, inherit); }
.room__row { display: flex; gap: 4px; margin-bottom: 4px; }
.room__shot { margin: 0; min-width: 0; position: relative; overflow: hidden; background: #14110f; }
.room__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.room__shot figcaption {
	position: absolute; inset-inline: 0; bottom: 0; padding: 2.4rem 0.9rem 0.8rem;
	font-size: 0.8rem; line-height: 1.35; color: #fff;
	background: linear-gradient(transparent 0%, rgba(8,7,6,0.6) 40%, rgba(8,7,6,0.92) 100%);
}
@media (max-width: 40rem) {
	.room__row { flex-wrap: wrap; }
	.room__shot { flex-basis: calc(50% - 2px) !important; flex-grow: 1 !important; aspect-ratio: 4 / 3; }
	.room__shot figcaption { font-size: 0.72rem; }
}