/*
Theme Name: Miss Me Story
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: miss-me-story
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts margin-block-start: var(--wp--style--block-gap) between the
   template's top-level sections (header part, main, footer part) — a gap that
   exists even when no markup asks for it. Zero it so sections butt edge-to-edge
   and own their vertical rhythm via padding; this does not affect block gaps
   inside nested layouts. */
.wp-site-blocks > * + *,
.entry-content > * + *,
.entry-content > .wp-block-group + .wp-block-group {
	margin-block-start: 0;
}

:root {
	--story-base: var(--wp--preset--color--base);
	--story-base-2: var(--wp--preset--color--base-2);
	--story-contrast: var(--wp--preset--color--contrast);
	--story-contrast-2: var(--wp--preset--color--contrast-2);
	--story-accent: var(--wp--preset--color--accent);
	--story-accent-2: var(--wp--preset--color--accent-2);
	--story-line: color-mix(in srgb, var(--story-contrast) 14%, transparent);
	--story-script: var(--wp--preset--font-family--script);
}

/* === base === */
html {
	scroll-behavior: smooth;
	height: 100%;
	overflow: hidden;
}

body {
	background: var(--story-base);
	position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
	height: 100%;
}

/* Atmosphere layer, measured from the real export's .story-atmosphere /
   .story-mist / .story-glass-line rules. Two fixed pseudo-elements carry
   the glass sheen + drifting mist since CSS only gives two per element. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(96deg, transparent 0 46%, color-mix(in srgb, var(--story-contrast) 8%, transparent) 49.8%, transparent 53%),
		radial-gradient(circle at 16% 5%, color-mix(in srgb, var(--story-contrast) 10%, transparent), transparent 32%);
	animation: story-glass-breathe 36s ease-in-out infinite alternate;
}

body::after {
	content: "";
	position: fixed;
	z-index: 0;
	pointer-events: none;
	inset: 0;
	overflow: hidden;
	filter: blur(80px);
	background:
		radial-gradient(circle at -10% -10%, color-mix(in srgb, var(--story-base-2) 78%, transparent), transparent 60%),
		radial-gradient(circle at 110% 110%, color-mix(in srgb, var(--story-contrast-2) 22%, transparent), transparent 58%);
	animation: story-mist-drift 40s ease-in-out infinite alternate;
}

@keyframes story-glass-breathe {
	from { opacity: 0.7; }
	to { opacity: 1; }
}

@keyframes story-mist-drift {
	from { transform: translate(0, 0); }
	to { transform: translate(2vw, -2vw); }
}

.wp-site-blocks::before {
	content: "";
	position: fixed;
	z-index: 1;
	pointer-events: none;
	top: 9%;
	left: 50%;
	width: 1px;
	height: 82%;
	background: var(--wp--preset--color--accent);
	opacity: 0.12;
}

.wp-site-blocks::after {
	content: "";
	position: fixed;
	z-index: 1;
	pointer-events: none;
	top: 17vh;
	right: 17px;
	width: 1px;
	height: 66vh;
	background: linear-gradient(transparent, var(--wp--preset--color--accent), transparent);
	opacity: 0.4;
	transform-origin: top;
	transform: scaleY(var(--story-scroll-progress, 0));
	transition: transform 0.15s linear;
}

.wp-site-blocks {
	position: relative;
	z-index: 1;
	height: 100%;
}

.entry-content {
	height: 100%;
}

.eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--story-contrast-2);
	margin: 0 0 1.25rem;
}

.eyebrow::before {
	content: "\2014\00a0";
}

.act-number {
	position: absolute;
	left: clamp(1rem, 4vw, 2.75rem);
	top: clamp(5rem, 12vw, 8rem);
	transform: rotate(-90deg);
	transform-origin: left center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.65rem;
	letter-spacing: 0.15em;
	color: var(--story-contrast-2);
	white-space: nowrap;
	margin: 0;
}

.lead {
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	color: var(--story-contrast);
	max-width: 42em;
}

.act-lede {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2.2rem);
	line-height: 1.37;
	color: var(--story-contrast);
	max-width: 43em;
	margin-left: 10%;
}

.act-detail {
	color: var(--story-contrast-2);
	max-width: 38em;
	font-size: 0.9rem;
	margin-left: 2rem;
}
/* === header === */
.site-story-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	box-sizing: border-box;
	z-index: 40;
	align-items: flex-start;
	padding: 1.5rem clamp(1.5rem, 5.3vw, 5.6rem) 0;
	background: transparent;
	transition: background-color 0.35s ease, color 0.35s ease;
}

.site-story-header.is-on-dark {
	background: color-mix(in srgb, var(--wp--preset--color--stage-book) 92%, transparent);
}

.site-story-header.is-on-dark .story-wordmark a,
.site-story-header.is-on-dark .story-contents-toggle a {
	color: var(--wp--preset--color--stage-dark-ink);
}

.site-story-header.is-on-dark .story-wordmark a span {
	color: var(--wp--preset--color--stage-dark-muted);
}

.story-wordmark {
	margin: 0;
	position: relative;
	padding-bottom: 2rem;
}

.story-wordmark::after {
	content: "";
	position: absolute;
	top: 2.45rem;
	bottom: -1rem;
	left: 0;
	width: 1px;
	background: var(--story-line);
}

.story-wordmark a {
	color: var(--story-contrast);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.1rem;
	line-height: 1.1;
}

.story-wordmark a span {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.5rem;
	letter-spacing: 0.2em;
	text-transform: none;
	color: var(--story-contrast-2);
}

.story-contents-toggle {
	margin: 0;
}

.story-contents-toggle a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: none;
	color: var(--story-contrast);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	transition: color 0.2s ease;
}

.story-contents-toggle a:hover {
	color: var(--story-accent);
}

.story-contents-toggle a span {
	display: inline-block;
	width: 18px;
	height: 1px;
	background: currentColor;
	position: relative;
}

.story-contents-toggle a span::before,
.story-contents-toggle a span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 1px;
	background: currentColor;
}

.story-contents-toggle a span::before {
	top: -6px;
}

.story-contents-toggle a span::after {
	top: 6px;
}
/* === contents overlay === */
.contents-overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: color-mix(in srgb, var(--story-base) 96%, black);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
	padding: 2rem;
	text-align: center;
}

.contents-overlay:target,
.contents-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.contents-kicker {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--story-accent);
	margin-bottom: 2rem;
}

.contents-list {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.contents-list a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
	color: var(--story-contrast-2);
	text-decoration: none;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 1rem;
	transition: color 0.2s ease;
}

.contents-list a:hover {
	color: var(--story-contrast);
}

.contents-list a span {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	color: var(--story-accent);
}

.contents-note {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	color: var(--story-contrast-2);
}

.contents-note span {
	display: block;
	font-size: 0.85em;
	margin-top: 0.25rem;
}

.contents-close {
	margin-top: 2.5rem;
}

.contents-close a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--story-contrast-2);
	text-decoration: none;
	border-bottom: 1px solid var(--story-line);
	padding-bottom: 0.2rem;
}
/* === dark stage chapters === */
/* The real site alternates each chapter's whole background/text theme —
   most chapters are light, but manuscript/afterword/book are dark stages.
   Re-scoping the custom properties here cascades correctly into every
   nested rule below (eyebrow, lead, quote, buttons, theme-word, etc.)
   without duplicating each component rule per chapter. */
.story-chapter--manuscript,
.story-chapter--afterword,
.story-chapter--book {
	--story-contrast: var(--wp--preset--color--stage-dark-ink);
	--story-contrast-2: var(--wp--preset--color--stage-dark-muted);
	--story-accent: var(--wp--preset--color--stage-dark-accent);
	--story-line: color-mix(in srgb, var(--story-contrast) 16%, transparent);
	color: var(--story-contrast);
}

.story-chapter--manuscript {
	background: var(--wp--preset--color--stage-manuscript);
}

.story-chapter--afterword {
	background: var(--wp--preset--color--stage-afterword);
}

.story-chapter--book {
	background: var(--wp--preset--color--stage-book);
}

/* === chapter shell === */
.story-chapter {
	display: none;
	min-height: 100vh;
	min-height: 100svh;
	height: 100%;
	box-sizing: border-box;
	flex-direction: column;
	justify-content: center;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding: clamp(7.5rem, 10vw, 9rem) clamp(1.5rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem);
	border-bottom: 1px solid var(--story-line);
	position: relative;
	overflow: hidden;
	margin-block-start: 0 !important;
}

.story-chapter.is-active {
	display: flex;
}

.story-chapter[hidden] {
	display: none !important;
}

.story-chapter:last-of-type {
	border-bottom: 0;
}

.story-footer {
	display: none;
}

.act-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
	line-height: 1.1;
	max-width: 16em;
	margin: 0 0 1.5rem;
}

.next-chapter-line a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--story-contrast-2);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	transition: color 0.2s ease, gap 0.2s ease;
}

.next-chapter-line a::after {
	content: "\2193";
	color: var(--story-accent);
}

.next-chapter-line a:hover {
	color: var(--story-contrast);
	gap: 1.1rem;
}
/* === hero chapter === */
.chapter-grid--top {
	align-items: center;
	gap: clamp(4.4rem, 8vw, 8.125rem);
	width: min(100%, 1120px) !important;
	margin: 0 auto !important;
}

/* The hero cannot be vertically centred when its editorial headline grows:
   a fixed header would otherwise sit over the first lines at shorter heights. */
.story-chapter.story-chapter--top.is-active {
	justify-content: flex-start;
	padding: 0 clamp(1.5rem, 6vw, 5rem);
}

.hero-motion-line {
	font-family: var(--wp--preset--font-family--heading);
	color: color-mix(in srgb, var(--story-contrast) 58%, transparent);
	font-size: clamp(0.9rem, 1vw, 1rem);
	letter-spacing: 0.02em;
	margin: 0 0 1.25rem;
}

.story-chapter--top .eyebrow {
	font-size: 0.6rem;
	text-transform: none;
	margin-bottom: 0.55rem;
}

.hero-motion-line em {
	font-style: normal;
	font-family: var(--story-script);
	color: var(--story-accent-2);
	transform: rotate(-2deg);
	display: inline-block;
}

.hero-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(3.2rem, 3.25vw, 3.65rem);
	font-weight: 400;
	letter-spacing: -0.055em;
	line-height: 1;
	margin: 0 0 2rem;
	max-width: 610px;
}

.hero-heading em {
	font-style: italic;
	font-size: 0.86em;
	color: var(--story-accent);
	font-weight: normal;
}

.hero-intro {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.15rem, 1.42vw, 1.38rem);
	line-height: 1.5;
	max-width: 455px;
	margin: 0 0 1.25rem;
	color: color-mix(in srgb, var(--story-contrast) 77%, transparent);
}

.hero-question-line {
	font-family: var(--story-script);
	font-style: normal;
	font-size: clamp(0.9rem, 1.1vw, 1.05rem);
	color: var(--story-accent);
	margin: 0 0 1.125rem 10%;
	transform: rotate(-1.5deg);
}

.hero-note {
	margin-top: 1.375rem;
	padding-left: 1.0625rem;
	border-left: 1px solid color-mix(in srgb, var(--story-contrast) 30%, transparent);
	font-size: 0.65rem;
	line-height: 1.55;
	color: var(--story-contrast-2);
	max-width: 330px;
}

.cover-object {
	position: relative;
	max-width: 403px;
	margin: 0 auto;
}

@media (min-width: 782px) {
	.story-chapter--top .chapter-grid--top {
		min-height: 100svh;
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
		align-items: center;
		padding: 7rem 0 3.625rem;
	}

	.story-chapter--top .chapter-copy,
	.story-chapter--top .chapter-visual {
		margin: 0 !important;
	}

	.story-chapter--top .chapter-copy {
		grid-column: 1;
		grid-row: 1;
		max-width: 610px;
		transform: translateY(3.5rem);
	}

	.story-chapter--top .chapter-visual {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		width: min(32vw, 403px);
	}
}

.cover-object img {
	border-radius: 2px;
	box-shadow: 0 30px 60px -30px rgba(20, 16, 10, 0.35);
	display: block;
}

.cover-object figcaption {
	position: absolute;
	top: 50%;
	right: -1.75rem;
	transform: translateY(-50%) rotate(90deg);
	transform-origin: center;
	white-space: nowrap;
	font-family: var(--story-script);
	font-size: 0.95rem;
	letter-spacing: normal;
	text-transform: none;
	color: color-mix(in srgb, var(--story-contrast) 47%, transparent);
	margin-top: 0;
}
/* === novel chapter === */
.theme-orbit {
	align-items: flex-start;
}

@media (min-width: 782px) {
	/* The novel page is a spread, not a vertical article: copy on the left,
	   the four ideas orbiting on the right. */
	.story-chapter.story-chapter--novel.is-active {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto auto auto auto;
		column-gap: clamp(2.5rem, 6vw, 5rem);
		row-gap: 0.9rem;
		align-content: start;
		align-items: start;
	}

	.story-chapter--novel.is-active > .eyebrow,
	.story-chapter--novel.is-active > .act-heading,
	.story-chapter--novel.is-active > .act-lede,
	.story-chapter--novel.is-active > .act-detail {
		grid-column: 1;
		width: auto;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	.story-chapter--novel.is-active > .eyebrow {
		grid-row: 1;
	}

	.story-chapter--novel.is-active > .act-heading {
		grid-row: 2;
	}

	.story-chapter--novel.is-active > .act-lede {
		grid-row: 3;
	}

	.story-chapter--novel.is-active > .act-detail {
		grid-row: 4;
		margin-left: clamp(1rem, 4vw, 3rem);
	}

	.story-chapter--novel.is-active > .act-lede {
		font-size: clamp(1.2rem, 1rem + 0.45vw, 1.65rem);
		line-height: 1.4;
	}

	.story-chapter--novel.is-active > .theme-orbit {
		grid-column: 2;
		grid-row: 1 / 5;
		width: 100%;
		margin: 0;
		align-self: center;
	}

	.story-chapter--novel.is-active > .next-chapter-line {
		grid-column: 1 / 3;
		grid-row: 5;
		justify-self: center;
		margin-top: 1.5rem;
	}
}

.theme-col {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.theme-orbit .wp-block-column.theme-col--offset {
	margin-top: clamp(2rem, 8vw, 6rem);
}

.theme-word {
	position: relative;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--story-line);
}

.theme-word-index {
	position: absolute;
	top: 0.3rem;
	left: -1.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	color: var(--story-contrast-2);
	margin: 0;
}

.theme-word h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-style: normal;
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
	line-height: 1.1;
	margin: 0 0 0.6rem;
}

.theme-word p {
	color: var(--story-contrast-2);
	font-size: 0.9rem;
	max-width: 22em;
}

/* Match the original's generous widescreen novel spread. This is deliberately
   capped: beyond a desktop width the copy should gain breathing room at the
   edges, not become a wider, smaller-feeling article. */
@media (min-width: 1200px) {
	.story-chapter.story-chapter--novel.is-active {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
		column-gap: clamp(3.75rem, 7.15vw, 7.5rem);
		padding-inline: max(5rem, calc((100vw - 1120px) / 2));
		padding-block: 6.75rem 4rem;
		align-content: center;
	}

	.story-chapter--novel.is-active > .act-heading {
		max-width: 780px;
		font-size: clamp(4rem, 5.4vw, 5.35rem);
		font-weight: 400;
		letter-spacing: -0.055em;
		line-height: 0.96;
		margin: 0;
	}

	.story-chapter--novel.is-active > .act-lede {
		max-width: 495px;
		margin: 1.75rem 0 0 10%;
		font-size: clamp(1.25rem, 1.7vw, 1.55rem);
		line-height: 1.37;
	}

	.story-chapter--novel.is-active > .act-detail {
		max-width: 460px;
		margin: 0.875rem 0 0 24%;
		font-size: 0.78rem;
		line-height: 1.5;
	}

	.story-chapter--novel.is-active > .theme-orbit {
		min-height: min(60vh, 33.75rem);
		align-self: center;
	}

	.story-chapter--novel .theme-col {
		gap: clamp(1.8rem, 3.2vh, 3rem);
	}

	.story-chapter--novel .theme-orbit .wp-block-column.theme-col--offset {
		margin-top: clamp(4.5rem, 8vw, 6rem);
	}

	.story-chapter--novel .theme-word {
		max-width: 17.5rem;
		padding: 0 0 1.125rem 2.125rem;
	}

	.story-chapter--novel .theme-word-index {
		left: 0;
		top: 0.5em;
		font-family: var(--story-script);
		font-size: 0.62rem;
		color: var(--story-accent);
	}

	.story-chapter--novel .theme-word h3 {
		font-size: clamp(2rem, 3.4vw, 3.7rem);
		font-weight: 400;
		letter-spacing: -0.06em;
		line-height: 0.92;
		margin-bottom: 0.5rem;
	}

	.story-chapter--novel .theme-word p {
		font-family: var(--wp--preset--font-family--heading);
		font-size: 0.88rem;
		line-height: 1.4;
	}
}
/* === manuscript chapter === */
.chapter-grid--manuscript {
	align-items: center;
	gap: clamp(2.5rem, 5vw, 5rem);
}

.manuscript-visual {
	position: relative;
	aspect-ratio: 3 / 4;
	max-width: 320px;
	margin: 0 auto;
	background: color-mix(in srgb, var(--story-contrast) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--story-contrast) 18%, transparent);
	border-radius: 4px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.23);
	display: flex;
	align-items: flex-end;
	padding: 11% 12%;
}

.manuscript-tag {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	color: var(--story-contrast-2);
	margin: 0;
}

.wp-block-quote.manuscript-quote,
.wp-block-quote.afterword-quote {
	border: 0;
	border-left: 2px solid var(--story-accent);
	padding-left: 1.5rem;
	margin: 1.5rem 0;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	color: var(--story-contrast);
	font-size: 1.15rem;
	max-width: 36em;
}

/* The manuscript is a composed dark room, not a two-column card layout. */
@media (min-width: 1200px) {
	.story-chapter.story-chapter--manuscript.is-active {
		padding-inline: max(5rem, calc((100vw - 1120px) / 2));
		padding-block: 5.125rem 3.625rem;
	}

	.story-chapter--manuscript .chapter-grid--manuscript {
		width: 100% !important;
		min-height: calc(100svh - 8.75rem);
		display: grid !important;
		grid-template-columns: 0.9fr 1fr;
		align-items: center;
		gap: clamp(5rem, 7vw, 7.5rem);
		margin: 0 !important;
	}

	.story-chapter--manuscript .manuscript-visual {
		width: 100%;
		max-width: none;
		min-height: min(62vh, 37.5rem);
		aspect-ratio: auto;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		display: block;
		perspective: 1200px;
	}

	.story-chapter--manuscript .manuscript-visual::before,
	.story-chapter--manuscript .manuscript-visual::after,
	.story-chapter--manuscript .manuscript-tag {
		content: "";
		position: absolute;
		width: 72%;
		aspect-ratio: 0.71;
		left: 13%;
		top: 8%;
		border: 1px solid rgba(216, 212, 220, 0.18);
		box-shadow: 0 30px 70px rgba(0, 0, 0, 0.23);
	}

	.story-chapter--manuscript .manuscript-visual::before {
		background: rgba(203, 196, 201, 0.07);
		transform: rotate(-9deg) translate(-12px, 18px);
		opacity: 0.38;
	}

	.story-chapter--manuscript .manuscript-visual::after {
		background: rgba(203, 196, 201, 0.07);
		transform: rotate(5deg) translate(20px, 4px);
		opacity: 0.55;
	}

	.story-chapter--manuscript .manuscript-tag {
		z-index: 2;
		box-sizing: border-box;
		margin: 0;
		padding: 11% 12%;
		color: rgba(216, 212, 220, 0.65);
		font-family: var(--wp--preset--font-family--heading);
		font-size: clamp(1.4rem, 2.4vw, 2.3rem);
		font-style: normal;
		line-height: 1;
		background:
			linear-gradient(rgba(216,212,220,.17), rgba(216,212,220,.17)) 12% 34% / 76% 1px no-repeat,
			linear-gradient(rgba(216,212,220,.17), rgba(216,212,220,.17)) 12% 42% / 62% 1px no-repeat,
			linear-gradient(rgba(216,212,220,.17), rgba(216,212,220,.17)) 12% 50% / 70% 1px no-repeat,
			linear-gradient(rgba(216,212,220,.17), rgba(216,212,220,.17)) 12% 58% / 76% 1px no-repeat,
			linear-gradient(rgba(216,212,220,.17), rgba(216,212,220,.17)) 12% 66% / 62% 1px no-repeat,
			rgba(216, 212, 220, 0.12);
		transform: rotate(-1deg);
	}

	.story-chapter--manuscript .manuscript-copy {
		max-width: 600px;
	}

	.story-chapter--manuscript .manuscript-copy .eyebrow {
		font-size: 0.6rem;
		letter-spacing: 0.18em;
		margin: 0 0 1.875rem;
	}

	.story-chapter--manuscript .manuscript-copy .act-heading {
		max-width: 620px;
		margin: 0 0 1.875rem -12%;
		font-size: clamp(4rem, 6vw, 6.1rem);
		font-weight: 400;
		letter-spacing: -0.055em;
		line-height: 0.96;
	}

	.story-chapter--manuscript .manuscript-copy .lead {
		font-family: var(--wp--preset--font-family--heading);
		font-size: clamp(1.3rem, 1.8vw, 1.7rem);
		line-height: 1.35;
		color: rgba(216, 212, 220, 0.76);
	}

	.story-chapter--manuscript .manuscript-copy .manuscript-quote {
		margin: 1.75rem 0 0 -2.375rem;
		padding: 1.25rem 0 1.25rem 2.3125rem;
		border-left-width: 1px;
		font-size: clamp(1.1rem, 1.55vw, 1.4rem);
		line-height: 1.45;
	}

	.story-chapter--manuscript .manuscript-copy .wp-element-button {
		background: #e2dfe3;
		color: #1b161d;
		border: 0;
		border-radius: 0;
		padding: 0.625rem 0.875rem 0.5625rem;
		font-size: 0.7rem;
		letter-spacing: 0.13em;
		box-shadow: none;
	}

	.story-chapter--manuscript .manuscript-copy .wp-element-button:hover {
		background: #fff;
		color: #1b161d;
	}
}

.wp-block-quote.afterword-quote p {
	margin: 0 0 0.85rem;
}

.wp-block-quote.afterword-quote p:last-child {
	margin-bottom: 0;
}
/* === identity chapter === */
.story-chapter--identity {
	background: var(--wp--preset--color--base-2);
}

.identity-grid {
	align-items: center;
	gap: clamp(3rem, 10vw, 8rem);
}

.absence-frame {
	position: relative;
	aspect-ratio: 0.76;
	width: min(78%, 340px);
	margin: 0 auto;
	background: radial-gradient(circle at 55% 45%, color-mix(in srgb, var(--story-accent-2) 16%, transparent), transparent 46%);
	border: 1px solid color-mix(in srgb, var(--story-contrast) 16%, transparent);
	border-radius: 50%;
}

.absence-frame span {
	position: absolute;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.65rem;
	letter-spacing: 0.15em;
	color: color-mix(in srgb, var(--story-contrast) 36%, transparent);
}

.absence-frame span:nth-child(1) {
	top: 10%;
	left: 8%;
}

.absence-frame span:nth-child(2) {
	top: 48%;
	right: 6%;
	transform: rotate(90deg);
	transform-origin: right center;
}

.absence-frame span:nth-child(3) {
	color: var(--story-accent);
	bottom: 8%;
	left: 17%;
}

.identity-copy .lead {
	max-width: 34em;
}

/* Restore the original wide-screen identity composition from the otherwise
   deliberately spare, flat WordPress block markup. */
@media (min-width: 1200px) {
	.story-chapter.story-chapter--identity.is-active {
		--identity-left: calc((100vw - 1040px) / 2);
		--identity-copy-left: calc((100vw - 1040px) / 2 + 526px);
		display: block;
		min-height: 100svh;
		height: 100svh;
		padding: 0;
		overflow: hidden;
	}

	.story-chapter--identity > .absence {
		position: absolute;
		left: var(--identity-left);
		top: 13.5rem;
		width: 20.625rem;
		height: 27.25rem;
		box-sizing: border-box;
		margin: 0;
		font-size: 0;
		background: radial-gradient(circle at 55% 45%, color-mix(in srgb, var(--story-accent-2) 16%, transparent), transparent 46%);
		border: 1px solid color-mix(in srgb, var(--story-contrast) 16%, transparent);
	}

	.story-chapter--identity > .absence::before,
	.story-chapter--identity > .absence::after {
		position: absolute;
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.55rem;
		letter-spacing: 0.15em;
		white-space: nowrap;
	}

	.story-chapter--identity > .absence::before {
		content: "no portrait";
		top: 10%;
		left: 8%;
		color: color-mix(in srgb, var(--story-contrast) 36%, transparent);
	}

	.story-chapter--identity > .absence::after {
		content: "no biography";
		top: 48%;
		right: 6%;
		color: color-mix(in srgb, var(--story-contrast) 36%, transparent);
		transform: rotate(90deg);
		transform-origin: right center;
	}

	.story-chapter--identity > .eyebrow,
	.story-chapter--identity > .act-heading,
	.story-chapter--identity > .lead,
	.story-chapter--identity > .act-detail,
	.story-chapter--identity > p:not(.absence):not(.eyebrow):not(.lead) {
		position: absolute;
		left: var(--identity-copy-left);
		width: min(31.25rem, calc(100vw - var(--identity-copy-left) - 5rem));
		margin: 0;
	}

	.story-chapter--identity > .eyebrow {
		left: calc(var(--identity-copy-left) + 4.375rem);
		top: 6.25rem;
		width: auto;
		font-size: 0.6rem;
		letter-spacing: 0.18em;
	}

	.story-chapter--identity > .act-heading {
		top: 8.75rem;
		font-size: clamp(4rem, 6vw, 6.1rem);
		font-weight: 400;
		letter-spacing: -0.055em;
		line-height: 0.96;
		max-width: 27rem;
	}

	.story-chapter--identity > .lead {
		left: calc(var(--identity-copy-left) + 4.375rem);
		top: 32.75rem;
		width: min(27.5rem, calc(100vw - var(--identity-copy-left) - 9.375rem));
		font-family: var(--wp--preset--font-family--heading);
		font-size: clamp(1.3rem, 1.8vw, 1.7rem);
		line-height: 1.35;
		color: color-mix(in srgb, var(--story-contrast) 78%, transparent);
	}

	.story-chapter--identity > .act-detail {
		left: calc(var(--identity-copy-left) + 4.375rem);
		top: 42.25rem;
		width: min(27.5rem, calc(100vw - var(--identity-copy-left) - 9.375rem));
		font-size: 0.95rem;
		line-height: 1.45;
		color: var(--story-contrast-2);
	}

	.story-chapter--identity > p:not(.absence):not(.eyebrow):not(.lead) {
		left: calc(var(--identity-copy-left) + 4.375rem);
		top: 42.25rem;
		width: min(27.5rem, calc(100vw - var(--identity-copy-left) - 9.375rem));
		font-size: 0.95rem;
		line-height: 1.45;
		color: var(--story-contrast-2);
	}
}

/* === afterword chapter === */
.afterword-grid {
	align-items: start;
	gap: clamp(3rem, 10vw, 8rem);
}

.afterword-heading {
	margin-left: 4%;
}

.afterword-excerpt {
	padding-top: clamp(2rem, 6vw, 4.5rem);
	transform: rotate(-0.5deg);
}

/* The afterword is deliberately a two-part spread, not a centred article. */
@media (min-width: 1200px) {
	.story-chapter.story-chapter--afterword.is-active {
		--afterword-left: calc((100vw - 1120px) / 2 + 1.5rem);
		--afterword-copy: calc((100vw - 1120px) / 2 + 45.25rem);
		display: block;
		height: 100svh;
		min-height: 100svh;
		padding: 0;
		overflow: hidden;
		background:
			radial-gradient(ellipse at 12% 3%, rgba(218, 214, 222, 0.25), transparent 31%),
			radial-gradient(ellipse at 45% 67%, rgba(208, 121, 112, 0.12), transparent 32%),
			linear-gradient(100deg, #332a33 0%, #342b34 47%, #2d232e 62%, #342a33 100%);
	}

	.story-chapter--afterword.is-active::before {
		content: "";
		position: absolute;
		inset: 3.5rem 7%;
		border: 1px solid rgba(232, 228, 232, 0.12);
		pointer-events: none;
	}

	.story-chapter--afterword > .eyebrow,
	.story-chapter--afterword > .act-heading,
	.story-chapter--afterword > .afterword-quote,
	.story-chapter--afterword > .story-details {
		position: absolute;
		z-index: 1;
		margin: 0;
	}

	.story-chapter--afterword > .eyebrow {
		left: var(--afterword-left);
		top: 6.55rem;
		font-size: 0.6rem;
		letter-spacing: 0.18em;
	}

	.story-chapter--afterword > .act-heading {
		left: var(--afterword-left);
		top: 8.9rem;
		width: 31rem;
		max-width: none;
		font-size: clamp(4.5rem, 6.25vw, 6.8rem);
		font-weight: 400;
		letter-spacing: -0.065em;
		line-height: 0.89;
		color: var(--story-contrast);
	}

	.story-chapter--afterword > .afterword-quote {
		left: var(--afterword-copy);
		top: 13.1rem;
		width: min(27rem, calc(100vw - var(--afterword-copy) - 5rem));
		max-width: none;
		border: 0;
		padding: 0;
	}

	.story-chapter--afterword > .afterword-quote p {
		margin: 0 0 1.6rem;
		font-family: var(--wp--preset--font-family--heading);
		font-size: clamp(1.2rem, 1.75vw, 1.55rem);
		font-style: normal;
		font-weight: 400;
		line-height: 1.5;
		color: rgba(244, 240, 243, 0.88);
	}

	.story-chapter--afterword > .afterword-quote p:nth-child(2) {
		font-size: clamp(1.55rem, 2.3vw, 2.2rem);
		font-style: italic;
		line-height: 1.35;
		color: var(--story-contrast);
	}

	.story-chapter--afterword > .afterword-quote p:last-child {
		margin-bottom: 0;
	}

	.story-chapter--afterword > .story-details {
		left: var(--afterword-copy);
		top: 45.6rem;
	}

	.story-chapter--afterword > .story-details summary {
		display: inline-flex;
		align-items: center;
		min-height: 2.9rem;
		padding: 0.65rem 1rem;
		background: #e6e2e5;
		color: #1b161d;
		font-size: 0.67rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: lowercase;
	}

	.story-chapter--afterword > .story-details summary::before {
		display: none;
	}

	.story-chapter--afterword > .story-details summary::after {
		content: "↗";
		margin-left: 2.6rem;
		font-size: 0.9rem;
	}
}
/* === instruction chapter === */
.instruction-grid {
	align-items: center;
	gap: clamp(3rem, 10vw, 9rem);
}

.instruction-letter {
	color: var(--story-contrast);
	background: color-mix(in srgb, var(--story-base-2) 44%, transparent);
	padding: clamp(2rem, 4vw, 3.5rem);
	transform: rotate(-0.55deg);
	box-shadow: 0 25px 80px rgba(45, 34, 46, 0.12);
}

.organization-link {
	margin: 1rem 0;
}

.organization-link a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	text-transform: lowercase;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
	color: var(--story-contrast);
	text-decoration: none;
	border-top: 1px solid color-mix(in srgb, var(--story-contrast) 18%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--story-contrast) 8%, transparent);
	padding: 1.1rem 0;
	transition: padding 0.3s ease, color 0.2s ease;
}

.organization-link a:hover {
	color: var(--story-accent);
	padding-left: 0.75rem;
}

.clarification {
	max-width: 40em;
	font-size: 0.8rem;
	color: color-mix(in srgb, var(--story-contrast) 64%, transparent);
	border-left: 1px solid var(--story-accent);
	margin: 2.5rem 0 0;
	padding-left: 1.5rem;
}

.clarification strong {
	color: var(--story-contrast);
}

.clarification a {
	color: var(--story-accent);
}
/* === book chapter === */
.chapter-grid--book {
	align-items: center;
	gap: clamp(2.5rem, 5vw, 5rem);
}

/* Keep the book screen faithful to the original three-part editorial spread:
   cover, metadata, then a quiet inquiry rail on the right. */
@media (min-width: 782px) {
	.story-chapter.story-chapter--book.is-active {
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(210px, 0.75fr);
		grid-template-rows: auto 1fr;
		column-gap: clamp(1.5rem, 4vw, 3.5rem);
		align-content: center;
		align-items: center;
	}

	.story-chapter--book > .chapter-grid--book {
		grid-column: 1 / 3;
		grid-row: 1;
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.story-chapter--book > .book-postscript {
		grid-column: 3;
		grid-row: 1;
		align-self: center;
		width: auto;
		margin: 0;
		padding: 0 0 0 clamp(1rem, 2vw, 1.5rem);
		border-top: 0;
		border-left: 1px solid var(--story-line);
	}
}

.book-act-cover img {
	border-radius: 4px;
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
	max-width: 300px;
	margin: 0 auto;
	display: block;
}

.book-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2rem;
	row-gap: 1.25rem;
	margin: 1.75rem 0 1.25rem;
}

.book-detail {
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--story-line);
}

.book-detail-label {
	font-size: 0.5rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--story-accent) 70%, var(--story-contrast-2) 30%);
	margin: 0 0 0.3rem;
}

.book-detail-value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.95rem;
	color: var(--story-contrast);
	margin: 0;
}

.purchase-note {
	font-family: var(--story-script);
	font-size: 1.1rem;
	color: var(--story-accent-2);
	display: inline-block;
	transform: rotate(-1deg);
}

.book-postscript {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--story-line);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.postscript-label {
	font-size: 0.5rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--story-accent) 70%, var(--story-contrast-2) 30%);
	margin: 0 0 0.35rem;
}

.postscript-text {
	max-width: 46em;
	font-size: 0.85rem;
	color: color-mix(in srgb, var(--story-contrast) 60%, transparent);
	margin: 0;
}

.return-line {
	margin-top: 0.5rem;
}

.return-line a {
	color: var(--story-contrast);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--story-contrast) 30%, transparent);
	font-family: var(--wp--preset--font-family--body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.63rem;
	padding-bottom: 0.25rem;
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	transition: color 0.2s ease;
}

.return-line a::after {
	content: "\2191";
}

.return-line a:hover {
	color: var(--story-accent);
}
/* === buttons === */
.is-style-story-primary .wp-element-button {
	background: transparent;
	color: var(--story-contrast);
	border: 0;
	border-bottom: 1px solid var(--story-contrast);
	border-radius: 0;
	padding: 0 0 0.3rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 1.75rem;
	transition: gap 0.2s ease, color 0.2s ease;
}

.is-style-story-primary .wp-element-button::after {
	content: "\2193";
	text-transform: none;
}

.is-style-story-primary .wp-element-button:hover {
	color: var(--story-accent);
	gap: 2.1rem;
}

/* The opening is the one deliberate solid call-to-action: it mirrors the
   original manuscript site's compact black label without changing later CTAs. */
.story-chapter--top .is-style-story-primary .wp-element-button {
	background: #1b161d;
	color: #e2dfe3;
	border: 0;
	padding: 0.625rem 0.875rem 0.5625rem;
	gap: 1.25rem;
	box-shadow: 0 10px 24px rgba(36, 27, 36, 0.16);
}

.story-chapter--top .is-style-story-primary .wp-element-button:hover {
	background: #100d12;
	color: #fff;
	gap: 1.875rem;
	box-shadow: 0 14px 30px rgba(36, 27, 36, 0.24);
}

.is-style-story-outline .wp-element-button {
	background: transparent;
	color: var(--story-contrast);
	border: 1px solid var(--story-line);
	border-radius: 999px;
	padding: 0.85rem 1.6rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.is-style-story-outline .wp-element-button::after {
	content: "\2197";
	margin-left: 0.5rem;
}

.is-style-story-outline .wp-element-button:hover {
	border-color: var(--story-accent);
	color: var(--story-accent);
}

.next-chapter-line .wp-element-button,
.next-chapter-line.wp-block-buttons {
	background: transparent;
}

.next-chapter-line .wp-element-button {
	color: var(--story-contrast-2);
	border: 0;
	border-radius: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: none;
	transition: color 0.2s ease;
}

.next-chapter-line .wp-element-button:hover {
	color: var(--story-contrast);
}

.next-chapter-line .wp-element-button:hover strong {
	color: var(--story-accent);
}

/* Every desktop chapter has a quiet in-composition way forward. The chapter's
   main layout already fills the viewport, so this must be anchored within it
   rather than placed after the layout in normal document flow. */
@media (min-width: 782px) {
	.story-chapter.is-active > .next-chapter-line {
		position: absolute;
		z-index: 4;
		left: 50%;
		bottom: 1.75rem;
		width: max-content;
		max-width: calc(100% - 3rem);
		margin: 0 !important;
		transform: translateX(-50%);
	}
}

.story-details {
	margin-top: 0.5rem;
}

.story-details summary {
	cursor: pointer;
	color: var(--story-contrast);
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.story-details summary::before {
	content: "\25B8";
	color: var(--story-accent);
	transition: transform 0.2s ease;
}

.story-details[open] summary::before {
	transform: rotate(90deg);
}

.story-details p {
	margin-top: 1rem;
	color: var(--story-contrast-2);
	max-width: 38em;
}
/* === footer === */
.story-chapter-nav {
	position: fixed;
	left: clamp(1.25rem, 4vw, 2.5rem);
	bottom: 1.75rem;
	z-index: 30;
	display: flex;
	flex-direction: row !important;
	align-items: center;
	gap: 0.6rem;
}

.is-style-story-arrow .wp-element-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	padding: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--story-contrast) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--story-contrast) 14%, transparent);
	color: color-mix(in srgb, var(--story-contrast) 60%, transparent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9rem;
	transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.is-style-story-arrow .wp-element-button:hover {
	border-color: var(--story-contrast);
	color: var(--story-contrast);
}

.is-style-story-arrow .wp-element-button.is-disabled {
	opacity: 0.2;
	pointer-events: none;
}

.story-chapter-nav.is-on-dark .is-style-story-arrow .wp-element-button {
	background: color-mix(in srgb, var(--wp--preset--color--stage-book) 60%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--stage-dark-ink) 14%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--stage-dark-ink) 60%, transparent);
}

.story-chapter-nav.is-on-dark .is-style-story-arrow .wp-element-button:hover {
	border-color: var(--wp--preset--color--stage-dark-ink);
	color: var(--wp--preset--color--stage-dark-ink);
}
.story-footer {
	padding: 2rem clamp(1.5rem, 6vw, 5rem);
}

.story-footer-line {
	text-align: center;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--story-contrast-2);
	margin: 0;
}
/* === motion === */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
		scroll-snap-type: none;
	}

	.contents-overlay {
		transition: none;
	}

	body::before,
	body::after {
		animation: none;
	}
}
/* === responsive === */
@media (max-width: 781px) {
	.chapter-grid--top,
	.chapter-grid--manuscript,
	.chapter-grid--book {
		flex-direction: column-reverse;
	}

	.chapter-grid--top .chapter-copy,
	.chapter-grid--book .chapter-copy,
	.chapter-grid--manuscript .manuscript-copy {
		flex-basis: 100% !important;
	}

	.chapter-grid--top .chapter-visual,
	.chapter-grid--book .chapter-visual,
	.chapter-grid--manuscript .manuscript-visual {
		flex-basis: 100% !important;
	}

	.theme-orbit {
		flex-direction: column;
	}

	.theme-col--offset {
		margin-top: 0;
	}

	.theme-word {
		padding-left: 1.75rem;
	}

	.theme-word-index {
		left: 0;
	}

	.site-story-header {
		padding: 1.1rem 1.25rem;
	}

	.story-chapter {
		padding: 8rem 1.25rem 3.5rem;
		justify-content: flex-start;
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
	}

	.story-chapter--novel.is-active {
		display: flex;
	}

	.story-chapter--novel.is-active > * {
		grid-column: auto;
		grid-row: auto;
	}
}