/* ==========================================================================
   Our real weddings — intro + horizontal scroll
   Base styles = native swipe row (mobile, reduced motion, no JS).
   .is-pinned  = pinned horizontal scroll driven by vertical scrolling.
   ========================================================================== */

.stories {
	--stories-from: var(--la-paper);
	--mix: 0;  /* 0 = start colour, 1 = black (set by JS while scrolling) */
	--p: 0;    /* horizontal progress 0–1 */
	background: var(--stories-from);
	background: color-mix(in srgb, #000 calc(var(--mix) * 100%), var(--stories-from));
	color: var(--la-ink);
	color: color-mix(in srgb, #fff calc(var(--mix) * 100%), var(--la-ink));
}

/* Intro ------------------------------------------------------------------ */

.stories__intro { padding-block: clamp(5rem, 11vw, 9rem) clamp(3rem, 6vw, 5rem); }

.stories__title {
	margin: 0;
	font-family: var(--la-condensed);
	font-size: clamp(3.2rem, 10vw, 9rem);
	font-weight: 500;
	line-height: .92;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.stories__title em {
	font-family: var(--la-serif);
	font-style: italic;
	font-weight: 400;
	text-transform: lowercase;
	letter-spacing: 0;
}

.stories__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}
.stories__text {
	margin: 0;
	font-size: .78rem;
	letter-spacing: .22em;
	line-height: 1.9;
	text-align: right;
	text-transform: uppercase;
}
.stories .btn:hover,
.stories .btn:focus-visible { background: color-mix(in srgb, currentColor 12%, transparent); }

/* Track (base: native horizontal swipe) ---------------------------------- */

.stories__sticky { position: relative; padding-bottom: clamp(4rem, 8vw, 6rem); }

.stories__track {
	display: flex;
	gap: clamp(1.25rem, 4vw, 4.5rem);
	margin: 0;
	padding: 0 max(1.25rem, (100vw - 1200px) / 2);
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: max(1.25rem, (100vw - 1200px) / 2);
	scrollbar-width: none;
}
.stories__track::-webkit-scrollbar { display: none; }

.story { flex: 0 0 auto; width: min(85vw, 860px); scroll-snap-align: start; }
.story__link { display: block; color: inherit; text-decoration: none; }

.story__media { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: rgba(127, 127, 127, .2); }
.story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
.story__link:hover .story__media img { transform: scale(1.04); }

.story__text {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 1.25rem;
}
.story__head { display: block; }
.story__index,
.story__place { display: block; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; opacity: .55; }
.story__title {
	display: block;
	max-width: 30ch;
	margin: .5rem 0 .4rem;
	font-family: var(--la-serif);
	font-size: clamp(1.35rem, 2.3vw, 2.1rem);
	line-height: 1.15;
}
.story__cta {
	flex: none;
	padding-bottom: .3rem;
	border-bottom: 1px solid currentColor;
	font-size: .68rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	white-space: nowrap;
}

.story--end { display: flex; width: min(60vw, 380px); }
.story--end .story__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	width: 100%;
	aspect-ratio: 3 / 4;
	max-height: 60vh;
	border: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 30%, transparent);
	transition: border-color .3s;
}
.story--end .story__link:hover { border-color: currentColor; }
.story__end-label { font-family: var(--la-condensed); font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase; }
.story--end svg { width: 3rem; fill: none; stroke: currentColor; stroke-width: 1; transition: transform .3s; }
.story--end .story__link:hover svg { transform: translateX(6px); }

.story__link:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }

.stories__progress { display: none; }

/* Pinned mode (desktop) -------------------------------------------------- */

.stories.is-pinned .stories__pin { position: relative; }

.stories.is-pinned .stories__sticky {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	height: 100vh;
	height: 100svh;
	padding: 0;
	overflow: hidden;
}

.stories.is-pinned .stories__track {
	overflow: visible;
	padding-right: 8vw;
	scroll-snap-type: none;
	will-change: transform;
}

.stories.is-pinned .story { width: clamp(320px, 55vw, 940px); }
.stories.is-pinned .story__media { aspect-ratio: auto; height: min(62vh, calc(55vw * 2 / 3)); }

.stories.is-pinned .stories__progress {
	position: absolute;
	right: max(1.25rem, (100vw - 1200px) / 2);
	bottom: 2.5rem;
	left: max(1.25rem, (100vw - 1200px) / 2);
	display: block;
	height: 1px;
	background: color-mix(in srgb, currentColor 20%, transparent);
}
.stories.is-pinned .stories__progress span {
	display: block;
	height: 100%;
	background: currentColor;
	transform: scaleX(var(--p));
	transform-origin: left;
}

@media (max-width: 767px) {
	.stories__row { flex-direction: column-reverse; align-items: flex-start; }
	.stories__text { text-align: left; }
}