/*
 * Evensong.
 *
 * The palette has two halves. The stone, the ink and the measurements are
 * constant — they are the building. The five properties beginning --accent are
 * written by the server on every request from whatever season it is today, and
 * nothing in this file knows or cares which season that is.
 */

:root {
	--stone: #f7f4ee;
	--ink: #1b1a17;
	--ink-soft: #3a3730;
	--ink-faint: #4d4941;

	/* Overwritten inline by inc/enqueue.php. These are the Ordinary Time values,
	   so a page rendered before that runs is still coherent rather than black. */
	--accent: #2f5c44;
	--accent-deep: #234032;
	--wash: #f0eee9;
	--wash-deep: #e8e5dd;
	--rule-tint: #ded9cf;

	--sheet: rgba(247, 244, 238, 0.90);
	--sheet-solid: rgba(247, 244, 238, 0.97);

	--serif: 'Evensong Garamond', ui-serif, Georgia, 'Times New Roman', serif;
	--sans: 'Evensong Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--pad: clamp(1.1rem, 4.5vw, 4rem);
	--measure: 34rem;
	--maxw: 76rem;

	--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(--stone);
	color: var(--ink);
	font-family: var(--serif);
	font-size: clamp(1.05rem, 1rem + 0.25vw, 1.18rem);
	line-height: 1.6;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 500; line-height: 1.14; margin: 0; letter-spacing: -0.006em; }
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-deep);
	outline-offset: 3px;
	border-radius: 1px;
}

.skip {
	position: absolute; left: 0.6rem; top: -4rem; z-index: 200;
	background: var(--ink); color: var(--stone);
	padding: 0.6em 1em; text-decoration: none;
	transition: top 0.2s var(--ease);
}
.skip:focus { top: 0.6rem; }

/* ─────────────────────────  The cloth  ───────────────────────────────── */

.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.6s var(--ease);
}
.ground__canvas.is-ready { opacity: 1; }

/* Everything above the cloth. */
.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(8px) saturate(105%);
	-webkit-backdrop-filter: blur(8px) saturate(105%);
	box-shadow: 0 1px 0 var(--rule-tint);
}
.masthead__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(0.8rem, 2vh, 1.3rem) 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-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; }
.mark__what {
	font-family: var(--sans);
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.nav { display: none; }
@media ( min-width: 60rem ) {
	.nav { display: flex; gap: clamp(1rem, 2.2vw, 2.1rem); align-items: baseline; }
	.drawer-toggle { display: none; }
}
.nav a {
	font-family: var(--sans);
	font-size: 0.92rem;
	text-decoration: none;
	color: var(--ink-soft);
	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(--ink); 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(--ink); }

.drawer {
	position: fixed;
	inset: 0;
	background: var(--sheet-solid);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	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-size: clamp(1.4rem, 5vw, 2.1rem);
	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(--ink-soft);
	padding: 0.7rem;
}

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

/*
 * Gated on .js, which main.js sets on the root element. Without that gate a
 * visitor with scripting off gets a page of permanently invisible sections.
 */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.8s var(--out), transform 0.8s 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; }
}


/* ─────────────────────────  Shared measures  ─────────────────────────── */

.opening__inner, .sunday, .wheel, .rites, .visit, .table, .notes,
.listing-top, .single, .talk {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--pad);
}
.sunday, .wheel, .rites, .visit, .table, .notes {
	padding-block: clamp(3rem, 7vh, 5.5rem);
}

@media ( min-width: 62rem ) {
	.sunday, .wheel, .rites, .visit, .table, .notes {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: clamp(1rem, 2vw, 2.4rem);
	}
}

.sunday__head, .wheel__head, .rites__head, .visit__head, .table__head, .notes__head {
	font-size: clamp(1.4rem, 2.4vw, 2.1rem);
	max-width: 16ch;
	margin-bottom: clamp(0.9rem, 2.4vh, 1.5rem);
}

/* ─────────────────────────  Opening  ─────────────────────────────────── */

.opening {
	min-height: min(88vh, 46rem);
	display: grid;
	align-items: end;
	padding-block: clamp(4rem, 14vh, 9rem) clamp(2.5rem, 7vh, 5rem);
}
.opening__inner { width: 100%; }

.opening__kicker {
	font-family: var(--sans);
	font-size: 0.8rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: clamp(1rem, 3vh, 2rem);
}

.opening__line {
	font-size: clamp(3rem, 11vw, 8.5rem);
	font-weight: 400;
	line-height: 0.94;
	letter-spacing: -0.028em;
	margin-bottom: clamp(1rem, 2.5vh, 1.8rem);
}

/* Word-by-word entrance. The <i> is what moves; the span is the clipping
   window, so the words rise out of nothing rather than sliding over the cloth. */
.wd { display: inline-block; overflow: hidden; vertical-align: baseline; }
.wd > i { display: inline-block; font-style: inherit; }
/*
 * Driven by an animation rather than by a class the scripts add.
 *
 * The first version waited for a class set once every module had resolved,
 * which meant that if any one of them failed or was slow the headline stayed
 * permanently invisible — the page's largest element, hostage to an unrelated
 * import. An animation with `both` fill needs nothing but the stylesheet.
 */
.js .wd > i {
	animation: even-rise 1s var(--out) both;
	animation-delay: calc( var(--i) * 90ms );
}

@keyframes even-rise {
	from { transform: translateY(100%); }
	to   { transform: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.js .wd > i { animation: none; transform: none; }
}

.opening__where {
	font-family: var(--sans);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--accent-deep);
	margin-bottom: clamp(1.2rem, 3vh, 2rem);
}
.opening__sub {
	max-width: var(--measure);
	color: var(--ink-soft);
	font-size: clamp(1.05rem, 1.3vw, 1.22rem);
}

/* ─────────────────────────  This Sunday  ─────────────────────────────── */

.sunday__when {
	font-size: clamp(1.15rem, 2vw, 1.55rem);
	font-style: italic;
	color: var(--accent-deep);
}
.sunday__season {
	font-family: var(--sans);
	font-size: 0.82rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-top: 0.5rem;
}

.hours { list-style: none; margin: 0; padding: 0; }
.hour {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: 0.4rem 1.4rem;
	align-items: baseline;
	padding-block: clamp(0.9rem, 2.2vh, 1.4rem);
	border-top: 1px solid var(--rule-tint);
}
.hour:first-child { border-top: 0; }
.hour__time {
	font-family: var(--sans);
	font-variant-numeric: tabular-nums;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--accent-deep);
}
.hour__what { display: grid; gap: 0.2rem; }
.hour__name {
	font-size: clamp(1.05rem, 1.7vw, 1.3rem);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.35s var(--ease);
	justify-self: start;
}
.hour__name:hover { border-color: var(--accent); }
.hour__kind { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-faint); }
.hours__none { color: var(--ink-soft); font-style: italic; }

@media ( min-width: 62rem ) {
	.sunday__said { grid-column: 1 / 5; }
	.sunday__list { grid-column: 6 / 13; }
}

.more {
	display: inline-block;
	justify-self: start;
	margin-top: clamp(1.4rem, 3.5vh, 2.2rem);
	font-family: var(--sans);
	font-size: 0.9rem;
	text-decoration: none;
	border-bottom: 1px solid var(--rule-tint);
	padding-bottom: 0.2em;
	transition: border-color 0.4s var(--ease);
}
.more:hover { border-color: var(--accent); }

/* ─────────────────────────  The year  ────────────────────────────────── */

.wheel__note { color: var(--ink-soft); max-width: var(--measure); }

.wheel__band { position: relative; margin-top: clamp(2rem, 5vh, 3.2rem); }

.band {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	gap: 2px;
	height: 2.4rem;
}
.band__span {
	/* --w is the season's share of the year, from its real length in days.
	   Advent is genuinely short and Ordinary Time genuinely long, and the bar
	   shows that rather than drawing eleven equal boxes. */
	flex: var(--w) 1 0;
	min-width: 0;
	background: var(--c);
	opacity: 0.28;
	transition: opacity 0.4s var(--ease);
}
.band__span.is-now { opacity: 1; }

/* Today. A hairline through the whole bar rather than a dot on one season, so
   it reads as a position in the year. */
.band__today {
	position: absolute;
	top: 0;
	left: var(--at);
	width: 1px;
	height: 2.4rem;
	background: var(--ink);
}
.band__today::after {
	content: '';
	position: absolute;
	left: -3.5px;
	top: -3.5px;
	width: 8px;
	height: 8px;
	background: var(--ink);
	border-radius: 50%;
}

.legend {
	list-style: none;
	margin: clamp(1.2rem, 3vh, 1.8rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
	gap: 0.5rem clamp(1rem, 2vw, 2rem);
}
.legend__row {
	display: grid;
	grid-template-columns: 0.7rem 1fr auto;
	align-items: baseline;
	gap: 0.55rem;
	font-family: var(--sans);
	font-size: 0.82rem;
	color: var(--ink-faint);
}
.legend__swatch {
	width: 0.7rem;
	height: 0.7rem;
	background: var(--c);
	opacity: 0.45;
	transform: translateY(0.05em);
}
.legend__row.is-now { color: var(--ink); font-weight: 600; }
.legend__row.is-now .legend__swatch { opacity: 1; }
.legend__from { color: var(--ink-faint); font-weight: 400; opacity: 0.75; font-variant-numeric: tabular-nums; }

@media ( min-width: 62rem ) {
	.wheel__said { grid-column: 1 / 7; }
	.wheel__band { grid-column: 1 / 13; }
	.legend { grid-column: 1 / 13; }
}

/* ─────────────────────────  Occasions  ───────────────────────────────── */

.rites__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.2rem, 3vw, 2rem);
}
.rite__link {
	display: grid;
	gap: 0.35rem;
	text-decoration: none;
	color: inherit;
	padding: clamp(1.2rem, 3vw, 1.8rem);
	background: var(--sheet);
	box-shadow: inset 0 0 0 1px var(--rule-tint);
	transition: box-shadow 0.4s var(--ease), transform 0.5s var(--out);
}
.rite__link:hover { box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(-2px); }
.rite__name { font-size: clamp(1.15rem, 1.9vw, 1.5rem); }
.rite__note { color: var(--ink-soft); }
.rite__who { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-faint); }

@media ( min-width: 40rem ) { .rites__list { grid-template-columns: repeat(3, 1fr); } }
@media ( min-width: 62rem ) {
	.rites__head { grid-column: 1 / 13; }
	.rites__list { grid-column: 1 / 13; }
}

/* ─────────────────────────  Visiting  ────────────────────────────────── */

.visit { align-items: start; }
.visit__note { color: var(--ink-soft); max-width: var(--measure); font-size: clamp(1.02rem, 1.2vw, 1.15rem); }
.visit__addr { font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.visit__addr + .visit__addr { margin-top: 0.4rem; font-style: normal; font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft); }

@media ( min-width: 62rem ) {
	.visit__said { grid-column: 1 / 8; }
	.visit__where { grid-column: 9 / 13; }
}

/* ─────────────────────────  People  ──────────────────────────────────── */

.table__list {
	list-style: none;
	margin: clamp(1.4rem, 4vh, 2.4rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: clamp(1.4rem, 3vw, 2.4rem);
}
.seat__link { display: grid; gap: 0.3rem; text-decoration: none; color: inherit; }
.seat__frame { display: block; overflow: hidden; aspect-ratio: 1 / 1; background: var(--wash-deep); }
.seat__frame img { width: 100%; height: 100%; object-fit: cover; }
.seat__name { font-weight: 600; }
.seat__role { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-faint); }

.seat__mono {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--wash-deep);
	box-shadow: inset 0 0 0 1px var(--rule-tint);
}
.seat__mono i {
	font-style: normal;
	font-weight: 400;
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	letter-spacing: 0.06em;
	text-indent: 0.06em;
	color: var(--ink-faint);
}
.seat__link:hover .seat__mono { box-shadow: inset 0 0 0 1px var(--accent); }

@media ( min-width: 62rem ) {
	.table__head { grid-column: 1 / 6; }
	.table__list { grid-column: 1 / 13; }
}

/* ─────────────────────────  Notes  ───────────────────────────────────── */

.notes__list { display: grid; gap: clamp(1.6rem, 4vh, 2.6rem); }
.note__link { display: grid; gap: 0.35rem; text-decoration: none; color: inherit; }
.note__name { font-size: clamp(1.1rem, 1.8vw, 1.4rem); }
.note__link:hover .note__name { color: var(--accent-deep); }
.note__sub { color: var(--ink-soft); }
.note__when { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); }

@media ( min-width: 62rem ) {
	.notes__head { grid-column: 1 / 5; }
	.notes__list { grid-column: 5 / 13; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 2rem); }
}

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

.site-footer {
	margin-top: clamp(3rem, 8vh, 6rem);
	border-top: 1px solid var(--rule-tint);
	background: var(--sheet);
	padding-block: clamp(2.5rem, 7vh, 4.5rem) clamp(1.6rem, 4vh, 2.6rem);
}
.site-footer__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--pad);
	display: grid;
	gap: clamp(1.4rem, 4vh, 2.4rem);
}
.foot__head { font-size: clamp(1.2rem, 2vw, 1.6rem); }
.foot__line { color: var(--ink-soft); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; }
.foot__nav a { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; }
.foot__nav a:hover { border-color: var(--accent); color: var(--ink); }
.foot__season { color: var(--ink-soft); font-style: italic; max-width: var(--measure); }
.foot__season-name { color: var(--accent-deep); font-style: normal; font-weight: 600; }
.foot__fine { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); }

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

/* ─────────────────  Listings, prose and singles  ─────────────────────── */

.listing-top { padding-block: clamp(6rem, 16vh, 10rem) clamp(1.6rem, 4vh, 2.8rem); }
.listing-title { font-size: clamp(2.2rem, 6vw, 4.6rem); letter-spacing: -0.02em; max-width: 16ch; }
.listing-intro { margin-top: clamp(1rem, 2.5vh, 1.8rem); max-width: var(--measure); color: var(--ink-soft); }
.listing-empty { color: var(--ink-soft); padding-block: 3rem; font-style: italic; }

.sheet {
	background: var(--sheet);
	backdrop-filter: blur(4px) saturate(104%);
	-webkit-backdrop-filter: blur(4px) saturate(104%);
	padding: clamp(1.4rem, 3.5vw, 3rem);
	max-width: calc(var(--measure) + 8rem);
}

.prose { max-width: var(--measure); }
/*
 * The reset sits on `.prose > *` rather than on `.prose p`: a type selector
 * carries more specificity, and its `margin: 0` would then outrank the flow
 * rule below no matter which order they appear in.
 */
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.05em; }
.prose p { line-height: 1.68; }
.prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.85rem); margin-top: 1.8em; }
.prose h3 { font-size: clamp(1.12rem, 1.7vw, 1.35rem); margin-top: 1.5em; }
.prose a { color: var(--accent-deep); text-underline-offset: 0.18em; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose li + li { margin-top: 0.35em; }
.prose blockquote {
	border-left: 2px solid var(--accent);
	padding-left: 1.2em;
	font-style: italic;
	color: var(--ink-soft);
}

.single__top { padding-block: clamp(6rem, 16vh, 10rem) clamp(1.6rem, 4vh, 2.6rem); }
.single__title { font-size: clamp(2.1rem, 5vw, 4rem); letter-spacing: -0.02em; max-width: 17ch; }
.single__role, .single__when { margin-top: 0.8rem; color: var(--ink-soft); font-style: italic; }
.single__facts { margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; }
.single__facts dt { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.single__facts dd { margin: 0.2rem 0 0; font-size: 1.08rem; }

.pager { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: clamp(2.2rem, 6vh, 3.6rem); }
.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-tint); color: var(--ink-soft);
}
.pager .page-numbers.current { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--stone); }

.img-absent {
	display: block; width: 100%; height: 100%; min-height: 100%;
	background-color: var(--wash-deep);
	background-image: repeating-linear-gradient( 116deg, rgba(27, 26, 23, 0.045) 0 1px, transparent 1px 9px );
}

.btn {
	display: inline-block;
	font-family: var(--sans);
	font-size: 0.92rem;
	padding: 0.75em 1.7em;
	border: 1px solid var(--accent-deep);
	color: var(--accent-deep);
	text-decoration: none;
	transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.btn:hover { background: var(--accent-deep); color: var(--stone); }

/* ─────────────────────────  Search form  ─────────────────────────────── */

.hunt { display: flex; gap: 0.6rem; flex-wrap: wrap; max-width: var(--measure); }
.hunt__field {
	flex: 1 1 14rem; min-width: 0;
	font: inherit; color: var(--ink);
	background: var(--sheet);
	border: 1px solid var(--rule-tint);
	padding: 0.6em 0.9em;
}
.hunt__go {
	font-family: var(--sans); font-size: 0.92rem; cursor: pointer;
	color: var(--accent-deep); background: transparent;
	border: 1px solid var(--accent-deep); padding: 0.6em 1.4em;
	transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.hunt__go:hover { background: var(--accent-deep); color: var(--stone); }

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

.talk { margin-top: clamp(2.5rem, 7vh, 4rem); padding-bottom: clamp(3rem, 9vh, 6rem); }
.talk__head { font-size: clamp(1.2rem, 2vw, 1.55rem); margin-bottom: 1.4rem; }
.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-tint); padding-block: 1.3rem; }
.talk__list .comment-author { display: flex; align-items: center; gap: 0.7rem; 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.8rem; color: var(--ink-faint); }
.talk__list p { margin: 0.6rem 0 0; }

.comment-respond { margin-top: clamp(2.2rem, 6vh, 3.4rem); }
.comment-reply-title { font-size: clamp(1.1rem, 1.8vw, 1.4rem); margin-bottom: 1rem; }
.comment-form label { display: block; font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); 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(--ink);
	background: var(--sheet); border: 1px solid var(--rule-tint); padding: 0.6em 0.8em;
}
.comment-form p { margin-bottom: 1rem; }
.comment-form .form-submit input {
	font-family: var(--sans); font-size: 0.92rem; cursor: pointer;
	color: var(--accent-deep); background: transparent;
	border: 1px solid var(--accent-deep); padding: 0.75em 1.7em;
}
.comment-form .form-submit input:hover { background: var(--accent-deep); color: var(--stone); }

/* ── The frontal: reversed-out type on the season's own colour ─────────── */

/*
 * Last in the file on purpose. The paper-side rules for these selectors are
 * defined further up, and at equal specificity the later rule wins — declaring
 * the reversal beside the hero left the sub-line dark on saturated cloth.
 */
.has-hero .opening,
.has-hero .opening * { color: #f6f2e8; }
.has-hero .opening__sub { opacity: 0.94; }
.has-hero .masthead:not(.is-settled),
.has-hero .masthead:not(.is-settled) * { color: #f6f2e8; }

/* ─────────────────────────  The building  ────────────────────────────── */

.pictures { margin-block: clamp(3.5rem, 10vh, 7rem); }
.pictures__said {
	max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
	margin-bottom: clamp(1.4rem, 3.5vh, 2.2rem);
}
.pictures__head { font-size: clamp(1.5rem, 3.2vw, 2.4rem); margin: 0; }
.pictures__note { margin: 0.6rem 0 0; max-width: 58ch; }
.pictures__row { display: flex; gap: 5px; margin-bottom: 5px; }
.picture { margin: 0; min-width: 0; position: relative; overflow: hidden; background: var(--stone, #e8e6df); }
.picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.picture 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(14,16,13,0.58) 42%, rgba(14,16,13,0.9) 100%);
}
@media (max-width: 40rem) {
	.pictures__row { flex-wrap: wrap; }
	.picture { flex-basis: calc(50% - 3px) !important; flex-grow: 1 !important; aspect-ratio: 4 / 3; }
	.picture figcaption { font-size: 0.72rem; }
}