/*
 * The story page, "the reading room" (docs/design/pages/story.dc.html):
 * centred heading, narrow EB Garamond column with a drop cap, punchlines,
 * closing note, related posts and the dark waitlist card.
 */

.story-page {
	padding-bottom: 120px;
}

/* ---------- Heading ---------- */

.story__header {
	max-width: calc(760px + 2 * var(--fe-gutter));
	margin: 0 auto;
	padding: 72px var(--fe-gutter) 0;
	text-align: center;
}

.breadcrumb {
	margin: 0 0 48px;
	font-size: 0.875rem;
	color: var(--fe-muted);
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumb li + li::before {
	content: "/";
	content: "/" / ""; /* not read aloud */
	margin: 0 10px;
	color: var(--fe-divider);
}

.breadcrumb a {
	color: var(--fe-muted);
}

.breadcrumb a:hover {
	color: var(--fe-primary);
}

.story__header .eyebrow {
	margin-bottom: 22px;
	font-size: 0.8125rem;
}

.story__title {
	margin: 0 0 22px;
	font-size: clamp(2.375rem, 1.5rem + 3.6vw, 4rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--fe-ink);
}

.story__subtitle {
	margin: 0 auto 30px;
	max-width: 26em;
	font-family: var(--fe-font-reading);
	font-style: italic;
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.5625rem);
	line-height: 1.45;
	color: var(--fe-muted);
}

.story__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	font-size: 0.9375rem;
	color: var(--fe-muted);
}

.story__meta-sep {
	color: var(--fe-divider);
}

.story__header .ornament {
	margin: 52px 0 56px;
}

/* ---------- The story ---------- */

.prose--story {
	max-width: calc(var(--fe-reading-width) + 2 * var(--fe-gutter));
	margin: 0 auto;
	padding: 0 var(--fe-gutter) 24px;
	font-family: var(--fe-font-reading);
	font-size: 1.375rem;
	line-height: 1.72;
	color: var(--fe-text);
}

.prose--story :where(strong, b) {
	font-weight: 500; /* the heaviest EB Garamond the theme ships: no synthesized bold */
}

.prose--story h2 {
	font-size: 2.125rem;
	line-height: 1.2;
}

/* Drop cap on the first paragraph. */
.prose--story > p:first-of-type:not(.story__end)::first-letter {
	float: left;
	padding: 10px 14px 0 0;
	font-family: var(--fe-font-serif);
	font-size: 96px;
	font-weight: 400;
	font-style: normal;
	line-height: 0.82;
	color: var(--fe-primary);
}

/* Punchlines reach a little beyond the column on wide screens. */
@media (min-width: 840px) {
	.prose--story > .wp-block-quote,
	.prose--story > blockquote {
		margin-left: -40px;
		margin-right: -40px;
	}
}

.story__end {
	margin: 56px 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--fe-accent);
}

@media (max-width: 560px) {
	.prose--story {
		font-size: 1.25rem;
	}

	.prose--story h2 {
		font-size: 1.75rem;
	}

	.prose--story > p:first-of-type:not(.story__end)::first-letter {
		font-size: 76px;
	}
}

/* ---------- Closing note ---------- */

.post-note {
	max-width: calc(var(--fe-reading-width) + 2 * var(--fe-gutter));
	margin: 48px auto 0;
	padding: 0 var(--fe-gutter);
}

.post-note__card {
	border: 1px solid var(--fe-line);
	border-radius: 4px;
	padding: 32px 36px;
	background: var(--fe-white);
	text-align: center;
}

.post-note__text {
	margin: 0 0 14px;
	font-family: var(--fe-font-reading);
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.55;
	color: var(--fe-plum);
}

.post-note__link {
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

.post-note__link:hover {
	text-decoration: underline;
}

/* ---------- From the same shelf ---------- */

.related {
	max-width: calc(760px + 2 * var(--fe-gutter));
	margin: 0 auto;
	padding: 112px var(--fe-gutter) 0;
}

.related .eyebrow {
	margin-bottom: 12px;
	font-size: 0.8125rem;
}

.related__title {
	margin: 0 0 40px;
	text-align: center;
	font-size: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);
	color: var(--fe-ink);
}

.related__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.related__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px 32px;
	margin: 0 -16px;
	padding: 26px 16px;
	border-top: 1px solid var(--fe-line);
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	--fe-lift-bg-hover: #faf6fd;
	--fe-lift-shadow: 0 16px 30px -18px rgba(55, 16, 79, 0.3);
}

.related__label {
	grid-column: 1 / -1;
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--fe-eyebrow-soft);
}

.related__row-title {
	font-family: var(--fe-font-serif);
	font-size: 1.625rem;
	line-height: 1.25;
	color: var(--fe-ink);
}

.related__row:hover .related__row-title,
.related__row:focus-visible .related__row-title {
	color: var(--fe-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.related__minutes {
	align-self: end;
	font-size: 0.875rem;
	color: var(--fe-muted);
	white-space: nowrap;
}

.related__line {
	grid-column: 1 / -1;
	font-family: var(--fe-font-reading);
	font-style: italic;
	font-size: 1.1875rem;
	line-height: 1.5;
	color: var(--fe-muted);
}

.related__back {
	margin: 0;
	border-top: 1px solid var(--fe-line);
	padding-top: 28px;
	text-align: center;
}

.related__back a {
	font-weight: 700;
	text-decoration: none;
}

.related__back a:hover {
	text-decoration: underline;
}

@media (max-width: 560px) {
	.related__row {
		grid-template-columns: 1fr;
	}

	.related__row-title {
		font-size: 1.375rem;
	}

	.related__minutes {
		align-self: start;
	}
}

/* ---------- Waitlist card (no Ira, D23) ---------- */

.waitlist-card {
	padding: 120px var(--fe-gutter) 0;
}

.waitlist-card__inner {
	max-width: calc(760px + 88px); /* 760px of content plus the card's own padding, as in the design */
	margin: 0 auto;
	background: var(--fe-ink);
	color: var(--fe-on-dark);
	border-radius: 28px;
	padding: 40px 44px;
	--fe-lift-bg-hover: #220a40;
	--fe-lift-shadow: 0 26px 48px -20px rgba(26, 5, 51, 0.55);
}

.waitlist-card__title {
	margin: 0 0 8px;
	font-size: 1.875rem;
	line-height: 1.2;
}

.waitlist-card__text {
	margin: 0 0 18px;
	font-size: var(--fe-size-medium);
	line-height: 1.55;
	color: var(--fe-lilac);
}

.waitlist-card :focus-visible {
	outline-color: var(--fe-lilac-pale);
}

@media (max-width: 560px) {
	.waitlist-card__inner {
		padding: 32px 24px;
	}
}