/* Editorial layer for The Shape of a Quiet Hour. */

:root {
	--poetry-paper: #eee9e2;
	--poetry-ink: #252525;
	--poetry-muted: #716d68;
	--poetry-accent: #9a5b4d;
	--poetry-rule: rgba(37, 37, 37, 0.18);
}

html { scroll-behavior: smooth; }

body {
	background: var(--poetry-paper);
	color: var(--poetry-ink);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.05rem;
	line-height: 1.75;
}

#wrapper > * { background-color: rgba(255, 255, 255, 0.46); }

h1, h2, h3, p, a, input, textarea, select, button { font-family: inherit; }

h1 {
	font-size: clamp(4rem, 7vw, 7.8rem);
	font-weight: 400;
	letter-spacing: -0.055em;
	line-height: 0.9;
}

h1 em {
	color: var(--poetry-accent);
	font-weight: 400;
}

h2 {
	font-size: clamp(2.5rem, 4vw, 4.4rem);
	font-weight: 400;
	letter-spacing: -0.035em;
	line-height: 1.04;
}

h3 { font-weight: 400; }

.banner.style1 .content { padding: clamp(3rem, 7vw, 7rem); }

.banner p.major {
	max-width: 35rem;
	font-size: clamp(1.15rem, 1.55vw, 1.5rem);
	line-height: 1.55;
}

.kicker,
.byline,
.fine-print,
.credit {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.55;
	text-transform: uppercase;
}

.kicker,
.byline { color: var(--poetry-accent); }

.kicker { margin-bottom: 1.25rem; }
.byline { margin-top: -0.75rem; margin-bottom: 2.25rem; }
.fine-print, .credit { color: var(--poetry-muted); }
.fine-print { margin-top: 2.5rem; }

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.68rem;
	letter-spacing: 0.13em;
}

.poem-section .content { padding: clamp(4.5rem, 7vw, 8rem); }

.poem-section .image::after,
.banner .image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(20, 20, 20, 0.02), rgba(118, 69, 54, 0.16));
	pointer-events: none;
}

.verse {
	font-size: clamp(1.05rem, 1.45vw, 1.35rem);
	line-height: 1.72;
}

.verse p { margin-bottom: 1.9rem; }

.margin-note {
	max-width: 34rem;
	margin-top: 2.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--poetry-rule);
	color: var(--poetry-muted);
	font-size: 0.94rem;
	font-style: italic;
}

.fragments .inner,
.practices .inner,
.finale .inner { padding-block: clamp(4.5rem, 8vw, 8rem); }

.fragments .inner > p:last-child,
.practices .inner > p:nth-of-type(2) {
	max-width: 44rem;
	margin-inline: auto;
}

.gallery.style2 article .caption {
	background: linear-gradient(to top, rgba(20, 20, 20, 0.88), rgba(20, 20, 20, 0.3));
}

.gallery.style2 article .caption h3 { font-size: 2rem; }
.gallery.style2 article .caption p { line-height: 1.5; }
.gallery.style2 article .caption .credit { color: rgba(255, 255, 255, 0.68); }

.practices { background: #e8e0d7 !important; }
.practices .items > section { background: rgba(255, 255, 255, 0.16); }
.practices .icon { color: var(--poetry-accent); }

.finale {
	color: #f3eee7;
	background: #2d3332 !important;
}

.finale h2,
.finale .verse { color: #f3eee7; }
.finale .byline { color: #d8aa9c; }
.finale .button { color: #f3eee7 !important; box-shadow: inset 0 0 0 1px #f3eee7; }

.final-verse {
	margin: 3rem auto;
	font-size: clamp(1.45rem, 2.6vw, 2.1rem);
	line-height: 1.6;
}

.closing-line {
	margin: 4rem auto 2rem;
	color: #d8aa9c;
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-style: italic;
}

.footer-mark {
	margin-bottom: 0.65rem;
	color: var(--poetry-accent);
	font-size: 1.35rem;
}

footer p { margin-bottom: 0.65rem; }
footer .fine-print { margin-top: 1.25rem; }

@media screen and (max-width: 980px) {
	.poem-section .content { padding: 4.5rem 3.5rem; }
	.verse { font-size: 1.08rem; }
}

@media screen and (max-width: 736px) {
	body { font-size: 1rem; }

	h1 {
		font-size: clamp(3.4rem, 16vw, 5.6rem);
		line-height: 0.92;
	}

	h2 { font-size: clamp(2.45rem, 11vw, 3.6rem); }

	.banner.style1 .content,
	.poem-section .content { padding: 4rem 1.5rem; }

	.banner p.major { font-size: 1.15rem; }
	.poem-section .image { min-height: 45vh; }

	.verse {
		font-size: 1.1rem;
		line-height: 1.68;
	}

	.verse p { margin-bottom: 1.65rem; }
	.margin-note { margin-top: 2rem; }

	.fragments .inner,
	.practices .inner,
	.finale .inner { padding: 4.5rem 1.5rem; }

	.final-verse { font-size: 1.25rem; }
}

@media screen and (max-width: 420px) {
	.kicker, .byline, .fine-print, .credit { font-size: 0.62rem; }
	.button.big.wide { min-width: 0; width: 100%; padding-inline: 1rem; }
	.gallery.style2 { height: 19rem; }
}