/* ==========================================================================
   Dibya × Ankita — Our Story
   Static HTML + CSS version (no JavaScript).

   Motion uses CSS scroll-driven animations (Chrome/Edge 115+, Safari 26+).
   Browsers without them simply show everything, fully visible.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
@property --on {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

:root {
	--ink: #111111;
	--ink-2: #3a3632;
	--ivory: #F7F2EA;
	--paper: #FBF8F3;
	--champagne: #C9A86A;
	--rose: #A96B72;
	--navy: #172238;
	--white: #FFFFFF;
	--night: #0B0B0B;
	--line: rgba(17, 17, 17, 0.14);
	--line-light: rgba(255, 255, 255, 0.2);

	--serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--gutter: clamp(20px, 5vw, 80px);
	--header-h: 76px;
	--section-pad: clamp(96px, 15vh, 180px);
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	timeline-scope: --c1, --c2, --c3, --c4, --c5, --c6, --c7, --c8, --final;
}

html:has(.menu-overlay:target),
html:has(.lightbox:target) { overflow: hidden; }

body {
	margin: 0;
	background: var(--ink);
	color: var(--ink);
	font-family: var(--sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
ol, ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

section[id], [id] { scroll-margin-top: 0; }

::selection { background: var(--champagne); color: var(--ink); }

:focus-visible {
	outline: 1px solid var(--champagne);
	outline-offset: 4px;
}

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

.skip-link {
	position: fixed;
	top: 12px; left: 12px;
	z-index: 200;
	padding: 10px 18px;
	background: var(--ivory);
	color: var(--ink);
	font-size: 13px;
	text-decoration: none;
	transform: translateY(-160%);
	transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }

/* Fixed, empty targets used to close :target overlays without scrolling. */
.anchor-fixed { position: fixed; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

.icon { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- 3. Type ---------- */
.eyebrow {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .32em;
	text-transform: uppercase;
}

.chapter-num {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .3em;
}
.chapter-num b { font-weight: 400; color: var(--champagne); }
.chapter-num::after {
	content: "";
	width: 48px;
	height: 1px;
	background: currentColor;
	opacity: .45;
}

.quote {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.15rem, 1.7vw, 1.5rem);
	line-height: 1.4;
}

/* ---------- 4. Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 15px 30px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .28em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.btn .icon { transition: transform .6s var(--ease); }
.btn:hover .icon { transform: translateX(5px); }

.btn--light { color: var(--white); border-color: rgba(255, 255, 255, .55); }
.btn--light:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.btn--dark { color: var(--ink); border-color: rgba(17, 17, 17, .5); }
.btn--dark:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

/* ---------- 5. Header ---------- */
.site-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 50;
	color: var(--white);
}
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(247, 242, 234, .88);
	-webkit-backdrop-filter: blur(14px) saturate(1.1);
	backdrop-filter: blur(14px) saturate(1.1);
	box-shadow: 0 1px 0 var(--line);
	opacity: 0;
}

.site-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 28px;
	height: var(--header-h);
	padding: 0 var(--gutter);
}

.brand {
	display: inline-flex;
	align-items: baseline;
	gap: .5em;
	font-family: var(--serif);
	font-size: 17px;
	font-weight: 400;
	letter-spacing: .26em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.brand__x { font-size: .9em; letter-spacing: 0; opacity: .7; }
.brand__heart { font-size: .85em; letter-spacing: 0; color: var(--rose); }

.brand-rule {
	width: 54px;
	height: 1px;
	background: currentColor;
	opacity: .35;
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 38px); }
.nav a,
.nav__more-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0;
	background: none;
	border: 0;
	color: inherit;
	font: 400 13px/1 var(--sans);
	letter-spacing: .06em;
	text-decoration: none;
	cursor: pointer;
}
.nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .6s var(--ease);
}
.nav a:hover::after,
.nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.nav__more { position: relative; }
.nav__more-btn .icon { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.nav__dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 180px;
	padding: 14px 0;
	background: var(--ivory);
	color: var(--ink);
	box-shadow: 0 24px 50px -24px rgba(17, 17, 17, .35);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px);
	transition: opacity .4s var(--ease), transform .5s var(--ease), visibility .4s;
}
.nav__dropdown a { display: flex; padding: 10px 26px; }
.nav__dropdown a::after { left: 26px; right: 26px; bottom: 6px; }
.nav__more:hover .nav__dropdown,
.nav__more:focus-within .nav__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
.nav__more:hover .nav__more-btn .icon,
.nav__more:focus-within .nav__more-btn .icon { transform: rotate(180deg); }

.music-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font: 400 12px/1 var(--sans);
	letter-spacing: .08em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .5s var(--ease), color .5s var(--ease);
}
.music-toggle:hover { background: var(--champagne); border-color: var(--champagne); color: var(--ink); }
.music-toggle__note { font-size: 14px; }

.menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	place-items: center;
	color: inherit;
}
.menu-toggle span { display: grid; gap: 7px; width: 24px; }
.menu-toggle i { display: block; height: 1px; background: currentColor; }
.menu-toggle i:last-child { width: 16px; justify-self: end; }

.scroll-bar {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 2;
	height: 1px;
	pointer-events: none;
}
.scroll-bar span {
	display: block;
	height: 100%;
	background: var(--champagne);
	transform: scaleX(0);
	transform-origin: left;
}

/* ---------- 6. Mobile menu (full-screen, via :target) ---------- */
.menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: none;
	flex-direction: column;
	padding: 0 var(--gutter) 40px;
	background: var(--ink);
	color: var(--ivory);
	overflow-y: auto;
}
.menu-overlay:target { display: flex; animation: overlay-in .7s var(--ease) both; }

.menu-overlay__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);
	flex: none;
}
.menu-overlay__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	text-decoration: none;
}
.menu-overlay__close .icon { width: 26px; height: 26px; }

.menu-overlay__list {
	margin: auto 0;
	padding: 40px 0;
	counter-reset: m;
}
.menu-overlay__list li {
	border-bottom: 1px solid var(--line-light);
	animation: fade-up .9s var(--ease) both;
}
.menu-overlay__list li:nth-child(2) { animation-delay: .05s; }
.menu-overlay__list li:nth-child(3) { animation-delay: .1s; }
.menu-overlay__list li:nth-child(4) { animation-delay: .15s; }
.menu-overlay__list li:nth-child(5) { animation-delay: .2s; }
.menu-overlay__list li:nth-child(6) { animation-delay: .25s; }
.menu-overlay__list li:nth-child(7) { animation-delay: .3s; }
.menu-overlay__list a {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: 16px 0 12px;
	font-family: var(--serif);
	font-size: clamp(2rem, 9vw, 3.4rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}
.menu-overlay__list a::before {
	counter-increment: m;
	content: counter(m, decimal-leading-zero);
	font: 400 11px/1 var(--sans);
	letter-spacing: .2em;
	color: var(--champagne);
	transform: translateY(-.9em);
}
.menu-overlay__foot {
	display: flex;
	justify-content: space-between;
	flex: none;
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.1rem;
	opacity: .7;
}

/* ---------- 7. Cover ---------- */
.cover {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 580px;
	overflow: hidden;
	background: var(--ink);
	color: var(--white);
}
.cover__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.cover__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: cover-in 2.6s var(--ease) both;
}
.cover__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(17,17,17,.5) 0%, rgba(17,17,17,0) 20%),
		linear-gradient(to top, rgba(17,17,17,.82) 0%, rgba(17,17,17,.35) 32%, rgba(17,17,17,0) 58%);
	pointer-events: none;
}
.cover__content {
	position: absolute;
	left: 0; right: 0;
	bottom: clamp(56px, 10vh, 120px);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 var(--gutter);
	text-align: center;
}
.cover__kicker { margin-bottom: 18px; animation: fade-up 1.4s .5s var(--ease) both; }
.cover__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	column-gap: .28em;
	font-family: var(--serif);
	font-size: clamp(3rem, 8.4vw, 8.6rem);
	font-weight: 300;
	line-height: .95;
	letter-spacing: .05em;
	text-transform: uppercase;
	animation: title-in 2s .7s var(--ease) both;
}
.cover__x { font-size: .5em; font-style: italic; letter-spacing: 0; color: var(--champagne); transform: translateY(-.25em); }
.cover__tagline {
	margin-top: 22px;
	animation: fade-up 1.4s 1.2s var(--ease) both;
}
.cover__cta { margin-top: 34px; animation: fade-up 1.4s 1.5s var(--ease) both; }

.cover__scroll {
	position: absolute;
	left: var(--gutter);
	bottom: 44px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	font: 400 10px/1 var(--sans);
	letter-spacing: .32em;
	text-transform: uppercase;
	text-decoration: none;
	writing-mode: vertical-rl;
	animation: fade-up 1.4s 1.9s var(--ease) both;
}
.cover__scroll i {
	position: relative;
	width: 1px;
	height: 64px;
	overflow: hidden;
	background: rgba(255, 255, 255, .25);
}
.cover__scroll i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--white);
	animation: scroll-line 2.4s var(--ease) infinite;
}

/* ---------- 8. Chapters (shared) ---------- */
.chapter { position: relative; }
.chapter--story { background: var(--ivory); }
.chapter--exhibition { background: var(--white); }
.chapter--portrait { background: var(--ivory); }
.chapter--gallery { background: var(--ink); color: var(--ivory); }
.chapter--places { background: var(--paper); }
.chapter--letter { background: var(--navy); color: var(--ivory); }
.chapter--playlist { background: var(--ivory); }
.chapter--future { background: var(--ink); color: var(--ivory); }

#beginning { view-timeline-name: --c1; }
#little-things { view-timeline-name: --c2; }
#her { view-timeline-name: --c3; }
#us { view-timeline-name: --c4; }
#places { view-timeline-name: --c5; }
#letters { view-timeline-name: --c6; }
#playlist { view-timeline-name: --c7; }
#future { view-timeline-name: --c8; }

/* Typographic opener */
.opener {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--section-pad) var(--gutter) clamp(48px, 8vh, 88px);
	text-align: center;
}
.opener .chapter-num { margin-bottom: 26px; }
.opener__title {
	font-family: var(--serif);
	font-size: clamp(2.8rem, 8vw, 7.5rem);
	font-weight: 300;
	line-height: .95;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.opener__caption { margin-top: 22px; max-width: 32rem; opacity: .8; }

/* ---------- 9. Chapter hero ---------- */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	color: var(--white);
}
.hero--full { height: 100vh; height: 100svh; min-height: 560px; }
.hero--framed { height: 78vh; height: 78svh; min-height: 480px; }

/* Framed hero (desktop/tablet): the photograph fills the right of the frame,
   words sit in the dark negative space and may overlap its edge. */
@media (min-width: 768px) {
	.hero--framed .hero__media { left: auto; width: 64%; }
	.hero--framed .hero__media::after {
		background:
			linear-gradient(to right, rgba(17,17,17,.75) 0%, rgba(17,17,17,.15) 38%, rgba(17,17,17,0) 60%),
			linear-gradient(to top, rgba(17,17,17,.45) 0%, rgba(17,17,17,0) 40%);
	}
	.hero--framed .hero__text { bottom: auto; top: 50%; transform: translateY(-50%); }
}

.hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to top, rgba(17,17,17,.72) 0%, rgba(17,17,17,.25) 30%, rgba(17,17,17,0) 55%),
		linear-gradient(to right, rgba(17,17,17,.4) 0%, rgba(17,17,17,0) 55%);
}
.hero--deep .hero__media::after {
	background: radial-gradient(ellipse at center, rgba(17,17,17,.35) 0%, rgba(17,17,17,.7) 80%);
}

.hero__text {
	position: absolute;
	left: var(--gutter);
	bottom: clamp(44px, 9vh, 104px);
	max-width: min(44rem, calc(100% - 2 * var(--gutter)));
}
.hero--center .hero__text {
	left: 50%;
	top: 50%;
	bottom: auto;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
}
.hero__text .chapter-num { margin-bottom: 24px; }
.hero__kicker { margin-bottom: 14px; }
.hero__title {
	font-family: var(--serif);
	font-size: clamp(2.8rem, 7.4vw, 7.2rem);
	font-weight: 300;
	line-height: .95;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.hero__sub {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	font-size: 12px;
	letter-spacing: .42em;
	text-transform: uppercase;
}
.hero__sub .icon { width: 16px; height: 16px; color: var(--champagne); }
.hero__caption { margin-top: 20px; max-width: 30rem; }

/* ---------- 10. Story block ---------- */
.story {
	padding: var(--section-pad) var(--gutter) clamp(72px, 11vh, 120px);
	text-align: center;
}
.story__inner { max-width: 44rem; margin: 0 auto; }
.story__eyebrow { color: var(--rose); }
.story__heading {
	margin-top: 22px;
	font-family: var(--serif);
	font-size: clamp(1.9rem, 3.8vw, 3.3rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.story__rule {
	width: 1px;
	height: 56px;
	margin: 34px auto;
	background: var(--champagne);
}
.story__text p {
	font-family: var(--serif);
	font-size: clamp(1.3rem, 2.1vw, 1.75rem);
	font-weight: 400;
	line-height: 1.55;
	color: var(--ink-2);
}
.story__text p + p { margin-top: 1.1em; }

/* ---------- 11. Location card ---------- */
.location { padding: 0 var(--gutter) var(--section-pad); }
.location__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	max-width: 1080px;
	min-height: 360px;
	margin: 0 auto;
	background: var(--white);
	border: 1px solid var(--line);
	box-shadow: 0 40px 80px -60px rgba(17, 17, 17, .4);
}
.location__info {
	display: flex;
	flex-direction: column;
	padding: clamp(28px, 4vw, 56px);
	text-decoration: none;
	transition: background-color .6s var(--ease);
}
.location__info:hover { background: var(--paper); }
.location__info .eyebrow { color: var(--rose); }
.location__name {
	margin-top: 18px;
	font-family: var(--serif);
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.location__city {
	margin-top: 12px;
	font-size: 12px;
	letter-spacing: .38em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.location__date { margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ink-2); }
.location__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 32px;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .28em;
	text-transform: uppercase;
}
.location__link span { border-bottom: 1px solid currentColor; padding-bottom: 4px; }

.location__map {
	position: relative;
	min-height: 260px;
	overflow: hidden;
	border-left: 1px solid var(--line);
	background-color: var(--paper);
	background-image:
		repeating-radial-gradient(circle at 50% 50%, transparent 0 46px, rgba(169, 107, 114, .16) 46px 47px),
		linear-gradient(rgba(17, 17, 17, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(17, 17, 17, .045) 1px, transparent 1px);
	background-size: auto, 44px 44px, 44px 44px;
	background-position: center;
}
.location__pin {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--white);
	box-shadow: 0 10px 30px -10px rgba(17, 17, 17, .35);
	color: var(--rose);
	transform: translate(-50%, -50%);
}
.location__pin .icon { width: 24px; height: 24px; }
.location__coords {
	position: absolute;
	left: 0; right: 0;
	bottom: 22px;
	text-align: center;
	font-size: 10px;
	letter-spacing: .3em;
	color: var(--ink-2);
}
.location__embed { position: absolute; inset: 0; }
.location__embed summary {
	position: absolute;
	right: 16px;
	top: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--white);
	box-shadow: 0 6px 20px -8px rgba(17, 17, 17, .3);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}
.location__embed summary::-webkit-details-marker { display: none; }
.location__embed summary .icon { width: 15px; height: 15px; }
.location__embed .when-open { display: none; }
.location__embed[open] .when-open { display: inline; }
.location__embed[open] .when-closed { display: none; }
.location__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(.75) sepia(.15) contrast(.95);
}

/* ---------- 12. Exhibition ---------- */
.exhibition {
	display: flex;
	flex-direction: column;
	gap: clamp(96px, 17vh, 210px);
	padding: var(--section-pad) var(--gutter) clamp(72px, 12vh, 140px);
}
.ex-item { width: min(var(--w), calc(80svh * var(--ratio))); }
.ex-item img { width: 100%; }
.ex-item--land.ex-a { --w: 72%; }
.ex-item--land.ex-b { --w: 58%; margin-left: auto; }
.ex-item--land.ex-c { --w: 64%; margin-inline: auto; }
.ex-item--land.ex-d { --w: 52%; margin-left: 9%; }
.ex-item--port.ex-a { --w: 40%; margin-left: 6%; }
.ex-item--port.ex-b { --w: 34%; margin-left: auto; margin-right: 8%; }
.ex-item--port.ex-c { --w: 38%; margin-inline: auto; }
.ex-item--port.ex-d { --w: 32%; margin-left: 20%; }

.ex-item figcaption {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-top: 20px;
}
.ex-b figcaption { justify-content: flex-end; }
.ex-c figcaption { justify-content: center; }
.ex-item figcaption b,
.wish figcaption b,
.gallery__count {
	font: 400 10px/1 var(--sans);
	letter-spacing: .3em;
	color: var(--champagne);
}

/* ---------- 13. Portrait (Her) ---------- */
.portrait {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	align-items: end;
	gap: clamp(40px, 6vw, 120px);
	padding: var(--section-pad) var(--gutter) clamp(72px, 10vh, 120px);
}
.portrait__main { width: min(100%, calc(86svh * var(--ratio))); }
.portrait__main img { width: 100%; }
.portrait__text { padding-bottom: clamp(10px, 4vh, 48px); }
.portrait__text .chapter-num { margin-bottom: 28px; }
.portrait__title {
	font-family: var(--serif);
	font-size: clamp(5rem, 15vw, 14rem);
	font-weight: 300;
	line-height: .8;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.portrait__caption { margin-top: 30px; max-width: 22rem; color: var(--ink-2); }

.portrait__more {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: clamp(20px, 3vw, 48px);
	padding: clamp(40px, 8vh, 96px) var(--gutter) var(--section-pad);
}
.portrait__more figure:nth-child(2) { margin-top: clamp(40px, 10vh, 120px); }
.portrait__more figure:nth-child(3) { margin-top: clamp(20px, 4vh, 48px); }
.portrait__more img { width: 100%; }

/* ---------- 14. Gallery (Us) ---------- */
.gallery { padding: 0 var(--gutter) clamp(64px, 10vh, 112px); }
.gallery__stage { position: relative; max-width: 1400px; margin: 0 auto; }
.gallery__track {
	display: flex;
	height: min(78svh, 860px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-margin-top: calc(var(--header-h) + 20px);
}
.gallery__slide figure {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.gallery__slide img {
	flex: 1;
	min-height: 0;
	width: 100%;
	object-fit: contain;
}
.gallery__slide figcaption {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 18px;
	padding-top: 22px;
	min-height: 3.4em;
}
.gallery__arrow {
	position: absolute;
	top: calc(50% - 30px);
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 1px solid var(--line-light);
	border-radius: 50%;
	color: var(--ivory);
	text-decoration: none;
	transform: translateY(-50%);
	transition: background-color .5s var(--ease), color .5s var(--ease);
}
.gallery__arrow:hover { background: var(--ivory); color: var(--ink); }
.gallery__arrow--prev { left: 0; }
.gallery__arrow--next { right: 0; }

.gallery__thumbs {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}
.gallery__thumbs a {
	position: relative;
	display: block;
	width: 78px;
	height: 56px;
	opacity: .42;
	transition: opacity .5s var(--ease);
}
.gallery__thumbs a::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	bottom: -10px;
	height: 1px;
	background: var(--champagne);
	transform: scaleX(0);
	transition: transform .6s var(--ease);
}
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs a:hover { opacity: .8; }
.gallery:not(:has(.gallery__slide:target)) .gallery__thumbs a:first-child,
.gallery:has(#us-1:target) a[href="#us-1"],
.gallery:has(#us-2:target) a[href="#us-2"],
.gallery:has(#us-3:target) a[href="#us-3"],
.gallery:has(#us-4:target) a[href="#us-4"],
.gallery:has(#us-5:target) a[href="#us-5"],
.gallery:has(#us-6:target) a[href="#us-6"] { opacity: 1; }
.gallery:not(:has(.gallery__slide:target)) .gallery__thumbs a:first-child::after,
.gallery:has(#us-1:target) a[href="#us-1"]::after,
.gallery:has(#us-2:target) a[href="#us-2"]::after,
.gallery:has(#us-3:target) a[href="#us-3"]::after,
.gallery:has(#us-4:target) a[href="#us-4"]::after,
.gallery:has(#us-5:target) a[href="#us-5"]::after,
.gallery:has(#us-6:target) a[href="#us-6"]::after { transform: scaleX(1); }

/* ---------- 15. Places ---------- */
.places__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(28px, 4vw, 64px);
	padding: 0 var(--gutter) var(--section-pad);
}
.place { width: min(100%, 360px); }
.place__card { display: block; text-decoration: none; }
.place__name {
	display: block;
	font-family: var(--serif);
	font-size: clamp(1.6rem, 2.2vw, 2rem);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.place__city {
	display: block;
	margin-top: 8px;
	font-size: 11px;
	letter-spacing: .36em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.place__media {
	display: block;
	margin-top: 22px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--ivory);
}
.place__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s var(--ease);
}
.place__card:hover .place__media img { transform: scale(1.04); }
.place__memory { display: block; margin-top: 20px; }
.place__open {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--rose);
}
.place__card:hover .place__open .icon { transform: translateX(5px); }
.place__open .icon { transition: transform .6s var(--ease); }

/* Lightbox (via :target) */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 110;
	display: none;
	place-items: center;
	padding: 72px var(--gutter) 40px;
	background: rgba(11, 11, 11, .95);
	color: var(--ivory);
	overflow-y: auto;
}
.lightbox:target { display: grid; animation: overlay-in .7s var(--ease) both; }
.lightbox__backdrop { position: fixed; inset: 0; }
.lightbox__close {
	position: fixed;
	top: 18px;
	right: var(--gutter);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--line-light);
	border-radius: 50%;
	text-decoration: none;
}
.lightbox__close .icon { width: 22px; height: 22px; }
.lightbox__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
	width: 100%;
	max-width: 1240px;
	animation: fade-up 1s .1s var(--ease) both;
}
.lightbox__panel img { width: 100%; max-height: 82svh; object-fit: contain; }
.lightbox__info .eyebrow { color: var(--champagne); }
.lightbox__name {
	margin-top: 16px;
	font-family: var(--serif);
	font-size: clamp(2.2rem, 4vw, 3.6rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.lightbox__city { margin-top: 12px; font-size: 12px; letter-spacing: .38em; text-transform: uppercase; opacity: .75; }
.lightbox__info .quote { margin-top: 26px; }
.lightbox__info .btn { margin-top: 34px; }

/* ---------- 16. Letter ---------- */
.chapter--letter .chapter-num b { color: var(--champagne); }
.letter { padding: 0 var(--gutter) var(--section-pad); }
.letter__body {
	max-width: 40rem;
	margin: 0 auto;
	font-family: var(--serif);
	font-size: clamp(1.45rem, 2.5vw, 2.1rem);
	font-weight: 300;
	line-height: 1.55;
}
.letter__body p + p { margin-top: 1.25em; }
.letter__body p:first-child { font-style: italic; }
.letter__sign {
	max-width: 40rem;
	margin: clamp(56px, 9vh, 96px) auto 0;
	text-align: right;
	font-family: var(--serif);
	font-size: clamp(2rem, 4vw, 3.1rem);
	font-style: italic;
	font-weight: 300;
}
.letter__sign span { color: var(--rose); font-style: normal; font-size: .8em; margin-left: .2em; }

/* ---------- 17. Playlist ---------- */
.playlist__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--gutter) clamp(48px, 8vh, 80px);
}
.song__art {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--paper);
}
.song__art img { width: 100%; height: 100%; object-fit: cover; }
.song__meta { padding-top: 20px; }
.song__num { font-size: 10px; letter-spacing: .3em; color: var(--champagne); }
.song__title {
	margin-top: 8px;
	font-family: var(--serif);
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.15;
}
.song__artist { margin-top: 4px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.song audio { width: 100%; height: 36px; margin-top: 16px; }
.playlist__list--four { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: var(--section-pad); }
.song__art .ph__label { font-family: var(--serif); font-size: 2rem; letter-spacing: 0; opacity: .5; }
.playlist__note {
	padding: 0 var(--gutter) var(--section-pad);
	text-align: center;
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--ink-2);
}

/* ---------- 18. Future ---------- */
.future { padding: var(--section-pad) var(--gutter) clamp(72px, 12vh, 140px); }
.future__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 44px);
	max-width: 1300px;
	margin: 0 auto;
}
.wish--wide { grid-column: 1 / -1; }
.wish__media { aspect-ratio: 4 / 5; overflow: hidden; }
.wish--wide .wish__media { aspect-ratio: 21 / 9; }
.wish__media img { width: 100%; height: 100%; object-fit: cover; }
.wish figcaption { display: flex; gap: 16px; align-items: baseline; margin-top: 18px; }

/* Reveal containers clip their (slightly scaled) photo so it never widens the page. */
.curtain { overflow: hidden; }

/* Stand-in photo that is a phone screenshot: crop away the phone's own
   status bar and buttons (responsive crop only — the file is untouched).
   Remove the class once the original photo is in place. */
.is-screenshot img { scale: 1.22; }
.place__media.is-screenshot img { scale: 1.7; }
.lightbox__panel .is-screenshot { aspect-ratio: 4 / 3; overflow: hidden; }
.lightbox__panel .is-screenshot img { width: 100%; height: 100%; object-fit: cover; scale: 1; }

/* ---------- 18b. Personal-content placeholders ----------
   Every [BRACKETED] text is wrapped in <!-- PERSONAL_CONTENT: KEY --> comments.
   Styled to be clearly "to be written", quiet enough not to break the design. */
.pc {
	display: inline-block;
	padding: 7px 12px 6px;
	border: 1px dashed rgba(169, 107, 114, .55);
	color: var(--rose);
	font-family: var(--sans);
	font-size: 11px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.pc--block { display: block; padding: 28px 20px; text-align: center; }
.letter__body .pc { font-style: normal; }
.chapter--gallery .pc,
.chapter--letter .pc,
.chapter--future .pc,
.lightbox .pc { border-color: rgba(201, 168, 106, .5); color: var(--champagne); }

.location__memory { margin-top: 20px; }
.place__memory .pc { margin-top: 2px; }
.future__line { max-width: 40rem; margin: 0 auto; text-align: center; }

/* ---------- 19. Placeholder (never a fake photo) ---------- */
.ph {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 100%;
	min-height: 200px;
	padding: 24px;
	background: #EFE8DD;
	color: var(--ink-2);
	text-align: center;
}
.ph::before {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(201, 168, 106, .5);
	pointer-events: none;
}
.ph__label {
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .34em;
	text-transform: uppercase;
}
.ph__note { font-family: var(--serif); font-style: italic; font-size: 1.05rem; opacity: .8; }
.ph--dark { background: #191817; color: rgba(247, 242, 234, .78); }
.ph--dark::before { border-color: rgba(201, 168, 106, .35); }
.ph--wish .ph__label { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-style: italic; font-weight: 300; letter-spacing: .01em; text-transform: none; color: var(--ivory); }

/* ---------- 20. Chapter navigation ---------- */
.chapter-nav {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 34px var(--gutter) 42px;
	border-top: 1px solid var(--line);
}
@media (min-width: 1100px) {
	/* Keep "Next chapter" clear of the progress rail. */
	.chapter-nav { padding-right: calc(var(--gutter) + 56px); }
}
.chapter--gallery .chapter-nav,
.chapter--letter .chapter-nav,
.chapter--future .chapter-nav { border-top-color: var(--line-light); }
.chapter-nav a { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.chapter-nav .icon { transition: transform .6s var(--ease); }
.chapter-nav__prev {
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	opacity: .6;
	transition: opacity .4s var(--ease);
}
.chapter-nav__prev:hover { opacity: 1; }
.chapter-nav__prev:hover .icon { transform: translateX(-5px); }
.chapter-nav__next { text-align: right; }
.chapter-nav__next:hover .icon { transform: translateX(6px); }
.chapter-nav__next > span { display: flex; flex-direction: column; align-items: flex-end; }
.chapter-nav__label { font-size: 10px; letter-spacing: .32em; text-transform: uppercase; opacity: .6; }
.chapter-nav__title {
	margin-top: 6px;
	font-family: var(--serif);
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	font-weight: 300;
	letter-spacing: .04em;
}
.chapter-nav__title b { font: 400 11px/1 var(--sans); letter-spacing: .24em; color: var(--champagne); margin-right: 10px; vertical-align: .5em; }

/* ---------- 21. Final screen: the night ends in a soft dawn ---------- */
.final {
	--dawn-sky: #EBD6D4;
	--dawn-blush: #F3E1D9;
	--dawn-glow: #FAEFE3;
	--dawn-gold: rgba(201, 168, 106, .5);
	position: relative;
	background: var(--ink);
	color: var(--ink);
	view-timeline-name: --final;
}
.final__inner {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(22px, 4vh, 36px);
	min-height: 100vh;
	min-height: 100svh;
	padding: 80px var(--gutter);
	overflow: hidden;
	text-align: center;
}
/* The sky: blush above, a warm golden sun rising from below, a pale halo behind the words. */
.final__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(42% 34% at 50% 46%, rgba(255, 252, 247, .85), transparent 72%),
		radial-gradient(75% 55% at 50% 108%, var(--dawn-gold), transparent 70%),
		radial-gradient(60% 45% at 12% 8%, rgba(169, 107, 114, .22), transparent 70%),
		radial-gradient(55% 40% at 92% 14%, rgba(201, 168, 106, .18), transparent 70%),
		linear-gradient(180deg, var(--dawn-sky) 0%, var(--dawn-blush) 48%, var(--dawn-glow) 100%);
}
/* Drifting specks of morning light. */
.final__inner::after {
	content: "";
	position: absolute;
	inset: -24px;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(circle at 14% 72%, rgba(255, 255, 255, .9) 0 2px, transparent 3px),
		radial-gradient(circle at 22% 30%, rgba(201, 168, 106, .55) 0 3px, transparent 4px),
		radial-gradient(circle at 31% 84%, rgba(255, 255, 255, .8) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 44% 18%, rgba(255, 255, 255, .85) 0 2px, transparent 3px),
		radial-gradient(circle at 58% 88%, rgba(201, 168, 106, .5) 0 2.5px, transparent 3.5px),
		radial-gradient(circle at 67% 26%, rgba(255, 255, 255, .8) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 78% 66%, rgba(169, 107, 114, .35) 0 3px, transparent 4px),
		radial-gradient(circle at 86% 40%, rgba(255, 255, 255, .9) 0 2px, transparent 3px),
		radial-gradient(circle at 92% 82%, rgba(201, 168, 106, .45) 0 2px, transparent 3px),
		radial-gradient(circle at 8% 44%, rgba(255, 255, 255, .7) 0 1.5px, transparent 2.5px);
	animation: dawn-drift 14s ease-in-out infinite alternate;
}
.final__line {
	max-width: 36rem;
	font-family: var(--serif);
	font-size: clamp(1.4rem, 2.8vw, 2.3rem);
	font-style: italic;
	font-weight: 300;
	line-height: 1.35;
	color: var(--ink-2);
}
.final__names {
	font-family: var(--serif);
	font-size: clamp(2.8rem, 8vw, 7.4rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink);
}
.final__names span { font-size: .5em; font-style: italic; letter-spacing: 0; color: var(--rose); vertical-align: .25em; }
/* Heart between two fine gold lines. */
.final__heart {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	color: var(--rose);
}
.final__heart::before,
.final__heart::after {
	content: "";
	width: clamp(40px, 8vw, 90px);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--champagne));
}
.final__heart::after { background: linear-gradient(90deg, var(--champagne), transparent); }
.final__heart .icon { width: 30px; height: 30px; animation: heartbeat 2.8s ease-in-out infinite; }
.final__replay { margin-top: 10px; }
.final .btn--dark { border-color: rgba(169, 107, 114, .6); }
.final .btn--dark:hover { background: var(--rose); border-color: var(--rose); color: var(--white); }

.site-footer {
	padding: 26px var(--gutter) 30px;
	/* Same warm light as the bottom of the final screen, so the story ends bright. */
	background: #FAEFE3;
	border-top: 1px solid rgba(201, 168, 106, .25);
	color: rgba(58, 54, 50, .6);
	text-align: center;
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
}

/* ---------- 22. Progress: desktop rail + mobile indicator ---------- */
.rail {
	position: fixed;
	right: clamp(14px, 2vw, 30px);
	top: 50%;
	z-index: 40;
	color: var(--white);
	mix-blend-mode: difference;
	transform: translateY(-50%);
}
.rail ol { display: flex; flex-direction: column; gap: 6px; }
.rail a {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 4px 0;
	text-decoration: none;
	font-size: 10px;
	letter-spacing: .2em;
}
.rail__title {
	font-family: var(--serif);
	font-size: 15px;
	font-style: italic;
	letter-spacing: .02em;
	opacity: 0;
	transform: translateX(8px);
	transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.rail a:hover .rail__title,
.rail a:focus-visible .rail__title { opacity: 1; transform: none; }
.rail__num { opacity: calc(.4 + var(--on) * .6); }
.rail a::after {
	content: "";
	width: calc(14px + var(--on) * 22px);
	height: 1px;
	background: currentColor;
	opacity: calc(.4 + var(--on) * .6);
}

.mprogress {
	position: fixed;
	left: 50%;
	bottom: max(14px, env(safe-area-inset-bottom));
	z-index: 40;
	display: none;
	width: min(320px, calc(100% - 32px));
	padding: 11px 18px 10px;
	border-radius: 999px;
	background: rgba(17, 17, 17, .72);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: var(--ivory);
	transform: translateX(-50%);
	pointer-events: none;
}
.mprogress__labels { position: relative; display: block; height: 14px; font-size: 10px; line-height: 14px; letter-spacing: .24em; text-transform: uppercase; }
.mprogress__labels span {
	position: absolute;
	inset: 0;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: var(--on);
}
.mprogress__labels b { font-weight: 400; color: var(--champagne); }
.mprogress__bar { display: block; height: 1px; margin-top: 8px; background: rgba(247, 242, 234, .2); }
.mprogress__bar i { display: block; height: 100%; background: var(--champagne); transform: scaleX(0); transform-origin: left; }

/* ---------- 23. Keyframes ---------- */
@keyframes cover-in {
	from { opacity: 0; transform: scale(1.08); }
	to { opacity: 1; transform: scale(1); }
}
@keyframes title-in {
	from { opacity: 0; letter-spacing: .2em; }
	to { opacity: 1; letter-spacing: .05em; }
}
@keyframes fade-up {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: none; }
}
@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes overlay-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes scroll-line {
	0% { transform: translateY(-100%); }
	60%, 100% { transform: translateY(100%); }
}
@keyframes curtain {
	from { clip-path: inset(14% 0 14% 0); }
	to { clip-path: inset(0 0 0 0); }
}
@keyframes settle {
	from { transform: scale(1.12); }
	to { transform: scale(1); }
}
@keyframes parallax {
	from { transform: translateY(-7%) scale(1.14); }
	to { transform: translateY(7%) scale(1.14); }
}
@keyframes grow { to { transform: scaleX(1); } }
@keyframes fade-away { to { filter: opacity(0); visibility: hidden; } }
@keyframes on { 0%, 100% { --on: 1; } }
@keyframes header-solid {
	to { color: var(--ink); }
}
@keyframes header-bg {
	to { opacity: 1; }
}
@keyframes dawn-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes dawn-drift {
	from { transform: translate3d(0, 10px, 0); opacity: .75; }
	to { transform: translate3d(0, -14px, 0); opacity: 1; }
}
@keyframes heartbeat {
	0%, 60%, 100% { transform: scale(1); }
	15% { transform: scale(1.14); }
	30% { transform: scale(1); }
	45% { transform: scale(1.08); }
}

/* ---------- 24. Scroll-driven motion (progressive enhancement) ---------- */
@supports (animation-timeline: view()) {

	/* Header becomes a quiet ivory bar once the cover has scrolled away. */
	.site-header {
		position: fixed;
		animation: header-solid linear both;
		animation-timeline: scroll(root);
		animation-range: 82vh 96vh;
	}
	.site-header::before {
		animation: header-bg linear both;
		animation-timeline: scroll(root);
		animation-range: 82vh 96vh;
	}
	.scroll-bar span {
		animation: grow linear both;
		animation-timeline: scroll(root);
	}
	.mprogress__bar i {
		animation: grow linear both;
		animation-timeline: scroll(root);
	}

	/* Text fades up as it enters. */
	.reveal {
		animation: fade-up linear both;
		animation-timeline: view();
		animation-range: entry 5% entry 70%;
	}

	/* Photographs open like a curtain, then settle. */
	.curtain {
		animation: curtain linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 40%;
	}
	.curtain img {
		animation: settle linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 55%;
	}

	/* Gentle parallax on large heroes. */
	.parallax img {
		animation: parallax linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 100%;
	}

	/* Rail + mobile indicator follow the chapter in view. */
	/* Fade in after the cover; fade out as the final screen arrives. */
	.rail,
	.mprogress {
		animation: fade-in linear both, fade-away linear both;
		animation-timeline: scroll(root), --final;
		animation-range: 70vh 95vh, entry 40% entry 90%;
	}
	.rail li a,
	.mprogress__labels span {
		animation: on linear;
		animation-fill-mode: none;
		animation-range: entry 50% exit 50%;
	}
	.rail li:nth-child(1) a, .mprogress__labels span:nth-child(1) { animation-timeline: --c1; }
	.rail li:nth-child(2) a, .mprogress__labels span:nth-child(2) { animation-timeline: --c2; }
	.rail li:nth-child(3) a, .mprogress__labels span:nth-child(3) { animation-timeline: --c3; }
	.rail li:nth-child(4) a, .mprogress__labels span:nth-child(4) { animation-timeline: --c4; }
	.rail li:nth-child(5) a, .mprogress__labels span:nth-child(5) { animation-timeline: --c5; }
	.rail li:nth-child(6) a, .mprogress__labels span:nth-child(6) { animation-timeline: --c6; }
	.rail li:nth-child(7) a, .mprogress__labels span:nth-child(7) { animation-timeline: --c7; }
	.rail li:nth-child(8) a, .mprogress__labels span:nth-child(8) { animation-timeline: --c8; }

	/* Final screen: a long dark scroll; lines appear one after another. */
	.final { height: 230vh; height: 230svh; }
	.final__inner { position: sticky; top: 0; height: 100vh; height: 100svh; }
	.final__step {
		animation: fade-up linear both;
		animation-timeline: --final;
	}
	/* Names first, then a long pause before the message. */
	.final__step:nth-child(1) { animation-range: contain 4% contain 22%; }
	.final__step:nth-child(2) { animation-range: contain 42% contain 60%; }
	.final__step:nth-child(3) { animation-range: contain 70% contain 78%; }
	.final__step:nth-child(4) { animation-range: contain 82% contain 94%; }

	/* Dawn breaks as the final screen slides in over the dark "Future Us". */
	.final__inner::before {
		animation: dawn-in linear both;
		animation-timeline: --final;
		animation-range: entry 0% entry 100%;
	}
	.final__inner::after {
		animation: dawn-in linear both, dawn-drift 14s ease-in-out infinite alternate;
		animation-timeline: --final, auto;
		animation-range: entry 30% entry 100%, normal;
	}
}

/* Without scroll-driven animations every rail number stays readable. */
@supports not (animation-timeline: view()) {
	/* No scroll motion: a soft band lets the dark chapter melt into the dawn. */
	.final::before {
		content: "";
		position: absolute;
		inset: 0 0 auto;
		z-index: 1;
		height: 22vh;
		background: linear-gradient(var(--ink), transparent);
		pointer-events: none;
	}
	.rail a { --on: .6; }
	.mprogress { display: none !important; }
}

/* ---------- 25. Responsive ---------- */
@media (min-width: 1100px) and (max-width: 1279px) {
	.brand-rule { display: none; }
}

@media (max-width: 1099px) {
	:root { --header-h: 64px; }
	.nav, .brand-rule { display: none; }
	.menu-toggle { display: grid; }
	.music-toggle { margin-left: auto; padding: 0; width: 40px; height: 40px; justify-content: center; }
	.music-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.rail { display: none; }
	.mprogress { display: block; }
	.brand { font-size: 15px; letter-spacing: .2em; }
}

@media (max-width: 1023px) {
	.portrait { grid-template-columns: 1fr; align-items: start; }
	.portrait__main { width: 100%; }
	.portrait__text { order: -1; padding-bottom: 0; }
	.portrait__more {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-top: 0;
	}
	.portrait__more::-webkit-scrollbar { display: none; }
	.portrait__more figure { flex: 0 0 72%; margin: 0 !important; scroll-snap-align: center; }

	.lightbox__panel { grid-template-columns: 1fr; }
	.lightbox__panel img { max-height: 56svh; }

	.playlist__list { grid-template-columns: 1fr; gap: 0; max-width: 640px; }
	.song {
		display: grid;
		grid-template-columns: 88px minmax(0, 1fr);
		gap: 20px;
		align-items: center;
		padding: 18px 0;
		border-bottom: 1px solid var(--line);
	}
	.song .ph { min-height: 0; padding: 8px; }
	.song .ph::before { inset: 6px; }
	.song .ph__label { font-size: 8px; letter-spacing: .2em; }
	.song__meta { padding-top: 0; }
	.song__title { font-size: 1.35rem; }
	.song audio { grid-column: 1 / -1; margin-top: 0; }
}

@media (max-width: 767px) {
	:root { --section-pad: clamp(80px, 13vh, 120px); }

	.cover__scroll { display: none; }
	.cover__title { flex-direction: column; align-items: center; font-size: clamp(3rem, 17vw, 5rem); line-height: .92; }
	.cover__x { transform: none; margin: .1em 0; }
	.cover__content { bottom: 72px; }

	/* Framed hero: photo first, words beneath — nothing squeezed onto a small photo. */
	.hero--framed { height: auto; min-height: 0; }
	.hero--framed .hero__media { position: relative; aspect-ratio: var(--m-ratio, 4 / 5); }
	.hero--framed .hero__media::after { background: linear-gradient(to top, rgba(17,17,17,.5), rgba(17,17,17,0) 40%); }
	.hero--framed .hero__text { position: relative; left: auto; bottom: auto; max-width: none; padding: 34px var(--gutter) 48px; }

	.hero--full .hero__text { bottom: 88px; }

	.location__card { grid-template-columns: 1fr; }
	.location__map { min-height: 280px; border-left: 0; border-top: 1px solid var(--line); order: -1; }

	.exhibition { gap: 72px; }
	.ex-item { width: 100% !important; margin-inline: 0 !important; }
	.ex-item--port { width: 86% !important; }
	.ex-item--port.ex-b, .ex-item--port.ex-d { margin-left: auto !important; }
	.ex-b figcaption, .ex-c figcaption { justify-content: flex-start; }

	.gallery { padding-inline: 0; }
	.gallery__track { height: auto; aspect-ratio: 4 / 5; }
	.gallery__slide { padding: 0 var(--gutter); }
	.gallery__arrow { display: none; }
	.gallery__thumbs { justify-content: flex-start; overflow-x: auto; padding: 0 var(--gutter) 12px; scrollbar-width: none; }
	.gallery__thumbs a { flex: none; width: 58px; height: 44px; }

	.places__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		gap: 20px;
	}
	.places__list::-webkit-scrollbar { display: none; }
	.place { flex: 0 0 80%; scroll-snap-align: center; }

	.future__list { grid-template-columns: 1fr; }
	.wish--wide .wish__media { aspect-ratio: 4 / 3; }

	.chapter-nav { padding-bottom: 90px; }
	.chapter-nav__prev span { display: none; }

	.final__names { display: flex; flex-direction: column; }
	.final__names span { margin: .15em 0; }
}

/* ---------- 26. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.cover__media img,
	.cover__kicker, .cover__title, .cover__tagline, .cover__cta, .cover__scroll,
	.reveal, .curtain, .curtain img, .parallax img,
	.menu-overlay__list li, .lightbox__panel,
	.cover__scroll i::after {
		animation: none !important;
	}
	/* The final lines still appear in turn, but only fade — no movement. */
	.final__step { animation-name: fade-in !important; }
	/* The light stays still and the heart rests. */
	.final__heart .icon,
	.final__inner::after { animation: none !important; }
	* { transition-duration: .01ms !important; }
}

/* ==========================================================================
   WordPress additions
   ========================================================================== */

/* Admin bar (only visible to you when logged in). */
.admin-bar .site-header,
.admin-bar .menu-overlay__top { top: 32px; }
.admin-bar .menu-overlay { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
	.admin-bar .menu-overlay { top: 46px; }
}

/* "Upload in WordPress" link inside photo placeholders (logged-in only). */
.ph__edit {
	position: relative;
	z-index: 1;
	margin-top: 6px;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rose);
}
.ph--hero, .ph--cover { position: absolute; inset: 0; min-height: 0; background: #191817; color: rgba(247, 242, 234, .78); }
.ph--hero::before, .ph--cover::before { border-color: rgba(201, 168, 106, .35); }
.ph--small { min-height: 0; }
.place__media .ph, .song__art .ph, .wish__media .ph { height: 100%; }

/* Block-editor content inside story / letter. */
.story__text > * + *,
.letter__body > * + * { margin-top: 1.1em; }
.letter__body > * + * { margin-top: 1.25em; }

/* Private access screen. */
.gate {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	min-height: 100vh;
	min-height: 100svh;
	padding: 40px var(--gutter);
	background: var(--night);
	color: var(--ivory);
	text-align: center;
}
.gate__names {
	font-family: var(--serif);
	font-size: clamp(2.6rem, 8vw, 6rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.gate__names span { font-size: .5em; font-style: italic; letter-spacing: 0; color: var(--champagne); vertical-align: .25em; }
.gate__msg { font-family: var(--serif); font-style: italic; font-size: 1.3rem; opacity: .8; }
.gate__form { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
.gate__form input[type="password"] {
	min-width: 240px;
	padding: 14px 20px;
	border: 1px solid rgba(247, 242, 234, .35);
	border-radius: 999px;
	background: transparent;
	color: var(--ivory);
	font: 300 15px var(--sans);
	letter-spacing: .1em;
	text-align: center;
}
.gate__form button { cursor: pointer; background: transparent; }
.gate__error { color: var(--rose); font-size: 13px; letter-spacing: .08em; }

/* Plain pages (page.php / index.php). */
.page-plain { min-height: 70vh; padding: calc(var(--header-h) + 80px) var(--gutter) 120px; background: var(--ivory); }
.page-plain__inner { max-width: 44rem; margin: 0 auto; }
.page-plain h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 6vw, 4.6rem); letter-spacing: .06em; text-transform: uppercase; line-height: 1; margin-bottom: 40px; }
.page-plain__content { font-family: var(--serif); font-size: 1.35rem; line-height: 1.6; color: var(--ink-2); }
.page-plain__content > * + * { margin-top: 1em; }
.page-plain .site-header { color: var(--ink); }
body:not(.da-story) .site-header { position: fixed; color: var(--ink); animation: none; }
body:not(.da-story) .site-header::before { opacity: 1; animation: none; }

/* Letter paragraphs (written in the WordPress editor) reveal one by one. */
@supports (animation-timeline: view()) {
	.letter__body > * {
		animation: fade-up linear both;
		animation-timeline: view();
		animation-range: entry 5% entry 70%;
	}
}
@media (prefers-reduced-motion: reduce) {
	.letter__body > * { animation: none !important; }
}

/* Song links (Spotify / YouTube). */
.song__links { display: flex; gap: 16px; margin-top: 10px; }
.song__links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--rose);
}
.song__links .icon { width: 12px; height: 12px; }

/* Google Maps embed inside the location card (Chapter 01). */
.location__map--google { background: var(--paper); }
.location__gmap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	/* Soften Google's colours so the map sits quietly in the design. */
	filter: grayscale(.35) sepia(.08) contrast(.96);
}
@media (max-width: 767px) {
	.location__map--google { min-height: 320px; }
}