/* ==========================================================================
   "Made for" chapters. Desktop: one sticky stage that changes as the page
   scrolls past invisible steps (native scroll). Mobile: stacked chapters.
   ========================================================================== */

.qc-chapters {
	display: grid;
	background: var(--ink);
	color: var(--white);
}

.qc-chapters__stage {
	grid-area: 1 / 1;
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
}
.qc-chapters__track { grid-area: 1 / 1; display: grid; grid-auto-rows: 88svh; padding-bottom: 12svh; }

.qc-chapter { position: absolute; inset: 0; visibility: hidden; }
.qc-chapter.is-active,
.qc-chapter.is-leaving { visibility: visible; }
.qc-chapter.is-active { z-index: 2; }
.qc-chapter.is-leaving { z-index: 1; }

.qc-chapter__photo {
	position: absolute;
	inset: 0 0 0 30%;
	overflow: hidden;
}
.qc-chapter__photo .qc-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus, 50% 50%);
	transform: scale(1.04);
	transition: transform 2400ms var(--ease-out);
}
.qc-chapter.is-active .qc-chapter__photo .qc-img { transform: none; }
/* Where photo meets the workshop: a soft falloff so type can cross it. */
.qc-chapter__photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, var(--ink) 0%, rgba(51, 32, 27, 0.5) 14%, rgba(51, 32, 27, 0) 34%),
		linear-gradient(0deg, rgba(51, 32, 27, 0.55) 0%, rgba(51, 32, 27, 0) 34%);
}

.qc-chapter__copy {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 27vw) 1fr;
	grid-template-rows: auto auto 1fr auto;
	align-content: start;
	padding: calc(var(--hd) + clamp(1.5rem, 4svh, 3rem)) var(--gutter) clamp(2rem, 5svh, 3.5rem);
	pointer-events: none;
}
.qc-chapter__copy > * { pointer-events: auto; grid-column: 1; }
.qc-chapter__kicker { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; font-size: 0.9rem; color: var(--mist); }
.qc-chapter__count { font-variant-numeric: tabular-nums; }
.qc-chapter__blurb { margin-top: 1.5rem; color: var(--mist); font-size: 1.05rem; max-width: 34ch; }
.qc-chapter__more { display: grid; gap: 0.75rem; margin: 1.75rem 0 1.5rem; }
.qc-chapter__more a { display: flex; align-items: center; gap: 0.9rem; color: var(--white); text-decoration: none; }
.qc-chapter__more .qc-mini { width: 56px; }
.qc-chapter__more-name { font-weight: 600; font-size: 0.925rem; line-height: 1.25; }
.qc-chapter__more a:hover .qc-chapter__more-name { text-decoration: underline; text-underline-offset: 0.2em; }
.qc-chapter__copy .qc-link { justify-self: start; }

/* The occasion, huge, laid across the seam between workshop and photograph. */
.qc-chapter__word {
	grid-column: 1 / -1 !important;
	grid-row: 4;
	align-self: end;
	margin: 0;
	font-size: clamp(4.5rem, 10.5vw, 12rem);
	max-width: calc(100% - 13rem);
	color: var(--white);
	text-shadow: 0 6px 40px rgba(51, 32, 27, 0.35);
	pointer-events: none;
}

.qc-chapters__rail {
	position: absolute;
	right: var(--gutter);
	top: calc(var(--hd) + clamp(1.5rem, 4svh, 3rem));
	z-index: 4;
}
.qc-chapters__rail ol { display: grid; gap: 0.2rem; justify-items: end; }
.qc-chapters__rail a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 32px;
	padding: 0.2rem 0 0.2rem 0.75rem;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.62);
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: none;
	transition: color var(--t-fast);
}
.qc-chapters__rail a::after {
	content: "";
	width: 18px;
	height: 1.5px;
	background: currentColor;
	transition: width var(--t-mid) var(--ease-cut), background-color var(--t-fast);
}
.qc-chapters__rail a:hover { color: var(--white); }
.qc-chapters__rail a[aria-current="true"] { color: var(--white); }
.qc-chapters__rail a[aria-current="true"]::after { width: 42px; background: var(--edge); }

/* Chapter change choreography */
.qc-motion .qc-chapter.is-entering .qc-chapter__copy > :not(.qc-chapter__word) { animation: qc-rise 640ms var(--ease-out) both; }
.qc-motion .qc-chapter.is-entering .qc-chapter__blurb { animation-delay: 80ms; }
.qc-motion .qc-chapter.is-entering .qc-chapter__more { animation-delay: 160ms; }
.qc-motion .qc-chapter.is-entering .qc-chapter__copy .qc-link { animation-delay: 220ms; }
.qc-motion .qc-chapter.is-entering .qc-pin__dot { animation: qc-pin 700ms var(--ease-mount) 500ms both; }
.qc-motion .qc-chapter.is-entering .qc-pin__line { animation: qc-line 520ms var(--ease-cut) 700ms both; }
.qc-motion .qc-chapter.is-entering .qc-pin__label { animation: qc-slide-in 520ms var(--ease-cut) 900ms both; }
.qc-motion .qc-chapter.is-leaving .qc-chapter__copy > :not(.qc-chapter__word) { opacity: 0; transition: opacity 180ms; }
.qc-motion .qc-chapter.is-leaving .qc-chapter__word { opacity: 0; transition: opacity 240ms; }
@keyframes qc-pin { from { transform: scale(0); } to { transform: none; } }
@keyframes qc-line { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- Mobile: stacked chapters, no sticky stage ---------- */

@media (max-width: 900px) {
	.qc-chapters { display: block; padding-block: 1rem 3rem; }
	.qc-chapters__stage { position: static; height: auto; overflow: visible; }
	.qc-chapters__track, .qc-chapters__rail { display: none; }
	.qc-chapter { position: relative; visibility: visible; padding-bottom: 2.5rem; }
	.qc-chapter__photo { position: relative; inset: auto; aspect-ratio: 4 / 4.4; }
	.qc-chapter__photo::before { background: linear-gradient(0deg, var(--ink) 0%, rgba(51, 32, 27, 0) 40%); }
	.qc-chapter__photo .qc-img { transform: none; }
	.qc-chapter__copy { position: relative; inset: auto; display: flex; flex-direction: column; align-items: flex-start; padding: 0 var(--gutter); }
	.qc-chapter__word { order: -1; max-width: none; font-size: clamp(3.4rem, 15vw, 6rem); margin-top: calc(-1 * clamp(3.6rem, 17vw, 6rem) * 0.95); position: relative; }
	.qc-chapter__kicker { width: 100%; }
	.qc-chapter__kicker { margin-top: 1rem; }
	.qc-chapter__blurb { margin-top: 0.75rem; }
	.qc-chapter__more { align-self: stretch; width: calc(100% + var(--gutter) * 2); grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 0.5rem var(--gutter); }
	.qc-chapter__more li { scroll-snap-align: start; }
	.qc-pin__line { width: 28px; }
	.qc-pin__label { white-space: normal; max-width: 44vw; }
}