/*
 * Chapters. Figma 230:70: white section; side menu in columns 1-3 and
 * 1370x770 cards in columns 4-12, both starting 80px into the section
 * and sticking 140px from the top. Each card stacks over the previous
 * one; with all cards stacked the page scrolls 570px more before the
 * stack leaves, then 140px of white before the next section.
 */

.chapters {
	--chapter-height: clamp(420px, 40.1042vw, 770px);
	--chapter-stick: var(--space-140);
	--chapter-rest: clamp(200px, 29.6875vw, 570px);

	align-items: start;
	padding-top: var(--space-80);
	padding-bottom: var(--space-140);
	background: var(--color-white);
}

.chapters__nav {
	position: sticky;
	top: var(--chapter-stick);
}

/* Menu items: Body A, one 34px line each (Figma), Stone; the current card in Deep Forest A. */
.chapters__menu {
	margin-block: 0;
	padding-top: 0;
	padding-bottom: 0;
	list-style: none;
	color: var(--color-forest-a);
	font-size: var(--fs-35);
	line-height: 0.9714;
	text-box: trim-both cap alphabetic;
}

.chapters__link {
	color: var(--color-stone);
	text-decoration: none;
}

.chapters__link[aria-current="true"] {
	color: var(--color-forest-a);
}

/* Cards are spaced with gap, not margins: a sticky card stops when its margin
   box reaches the end of its container, so equal (zero) margins make the whole
   stack leave together. Padding does not count for sticky, so a spacer inside
   the container gives the stacked cards their rest (gap + spacer = rest). */
.chapters__cards {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}

.chapters__cards::after {
	content: "";
	height: calc(var(--chapter-rest) - var(--space-40));
}

.chapter {
	position: sticky;
	top: var(--chapter-stick);
	display: grid;
	grid-template-columns: clamp(64px, 11.1979vw, 215px) minmax(0, clamp(240px, 34.6354vw, 665px)) 1fr;
	grid-template-rows: auto 1fr auto;
	min-height: var(--chapter-height); /* a minimum, not a height: a longer text grows the card instead of being cut (client, 2026-10-13) */
	padding: var(--space-20);
	overflow: hidden; /* the absolute photo would show square corners past the radius (client, 2026-10-13) */
	border-radius: var(--radius);
	color: var(--color-stone);
	font-size: var(--fs-35);
	line-height: var(--lh-body);
}

.chapter:focus {
	outline: none;
}

.chapter:focus-visible {
	outline: 2px solid var(--color-forest-a);
	outline-offset: 4px;
}

/* Reached by a tap or click (chapters-nav.js): focus moves for screen readers, without the ring. */
.chapter[data-pointer-focus]:focus-visible {
	outline: none;
}

.chapter__number,
.chapter__head,
.chapter__body {
	text-box: trim-both cap alphabetic;
}

.chapter__number {
	grid-area: 1 / 1;
}

.chapter__head {
	grid-area: 1 / 2;
	font-size: inherit;
	font-weight: var(--fw-text);
}

.chapter__title,
.chapter__subtitle {
	display: block;
}

.chapter__subtitle {
	font-weight: var(--fw-light);
}

.chapter__body {
	grid-area: 3 / 2;
	align-self: end;
}

.chapter__body p + p {
	margin-top: 1em;
}

.chapter__body em {
	font-style: italic;
}

/* An arrow link in the closing lines (Events, the Barn), like the links in the details. */
.chapter__body a {
	color: inherit;
	text-decoration: none;
}

.chapter__body a:hover,
.chapter__body a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Details (Events), spec list and link (The Village): Brando Sans like the wide body, link in Body A on the bottom line. */
.chapter__details,
.chapter__specs {
	font-family: var(--font-sans);
	font-size: var(--fs-20);
	line-height: var(--lh-sans);
	letter-spacing: 0.01em;
	text-box: trim-both cap alphabetic;
}

.chapter__details ul,
.chapter__specs ul {
	padding-left: 1.5em;
	list-style: disc;
}

.chapter__specs ul + p {
	margin-top: 1lh;
}

/* The spec list after the details (Events, the Barn): a gap at every width; the desktop block below sets its 80px. */
.chapter__extra .chapter__specs {
	margin-top: var(--space-40);
}

.chapter__details strong,
.chapter__specs strong {
	font-weight: var(--fw-semibold);
}

.chapter__details em,
.chapter__specs em {
	font-style: italic;
}

.chapter__details p + p,
.chapter__details p + ul,
.chapter__details ul + p {
	margin-top: 1lh;
}

.chapter__details a {
	color: inherit;
	text-decoration: none;
}

.chapter__details a:hover,
.chapter__details a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.chapter__link {
	color: inherit;
	text-decoration: none;
	text-box: trim-both cap alphabetic;
}

.chapter__link:hover,
.chapter__link:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/*
 * Wide variant. Figma 257:501 (The Village): the menu keeps x 40, the cards
 * are 1605 x 770 from x 275 and start 140px after the house grid (which ends
 * with 40px of its own). Inside: head at 215, body (Brando Sans 20) and spec
 * list side by side from y 325 (spec list at 920), link on the bottom line.
 * With all cards stacked the page scrolls 774px more, then 140px of white.
 */
@media (min-width: 1024px) {
	.chapters--wide {
		--chapter-rest: clamp(310px, 40.3125vw, 774px);

		grid-template-columns: clamp(96px, 10.1563vw, 195px) minmax(0, 1fr);
		padding-top: calc(var(--space-140) - var(--space-40));
	}

	.chapters--wide .chapters__nav {
		grid-column: 1;
	}

	.chapters--wide .chapters__cards {
		grid-column: 2;
	}

	.chapters--wide .chapter {
		grid-template-rows: clamp(130px, 16.9271vw, 325px) 1fr auto;
	}

	/* Figma's head does not wrap: hand breaks in the subtitle, otherwise one line across the card. */
	.chapters--wide .chapter__head {
		grid-column: 2 / -1;
	}

	.chapters--wide .chapter__body {
		grid-area: 2 / 2;
		align-self: start;
		font-family: var(--font-sans);
		font-size: var(--fs-20);
		line-height: var(--lh-sans);
		letter-spacing: 0.01em;
	}

	.chapters--wide .chapter__body p + p {
		margin-top: 1lh;
	}

	.chapters--wide .chapter__specs {
		grid-area: 2 / 3;
		align-self: start;
		max-width: calc(var(--space-40) + clamp(240px, 34.6354vw, 665px));
		padding-left: var(--space-40);
	}

	.chapters--wide .chapter__link {
		grid-area: 3 / 2;
		align-self: end;
	}
}

/*
 * Details block, Our Story layout (Events 257:757): the details and, 80px
 * later, the spec list sit in column 2 from y 320 of the card. A spacer that
 * may shrink keeps them there unless they would come closer than 102px to
 * the body; then they move up (the Barn card starts at 181).
 */
@media (min-width: 1024px) {
	.chapter__extra {
		grid-row: 1 / 3;
		grid-column: 2;
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding-bottom: clamp(40px, 5.3125vw, 102px);
	}

	.chapter__extra::before {
		content: "";
		flex: 0 1 clamp(120px, 15.625vw, 300px);
	}

	.chapter__extra > * {
		flex: none;
	}

	.chapter__extra .chapter__specs {
		margin-top: var(--space-80);
	}
}

/* Events: the cards follow the intro (its 140px is the gap) and the stack rests 140px, then 140px of white. */
.chapters--events {
	--chapter-rest: var(--space-140);

	padding-top: 0;
}

/* Events heads do not wrap in Figma either ("Theatre 150 · Boardroom 100 · …" runs across the card). */
@media (min-width: 1024px) {
	.chapters--events .chapter__head {
		grid-column: 2 / -1;
	}
}

/* The Village body is Brando Sans at every width (Figma 257:501). */
.chapters--wide .chapter__body {
	font-family: var(--font-sans);
	font-size: var(--fs-20);
	line-height: var(--lh-sans);
	letter-spacing: 0.01em;
}

/*
 * Below 1024px (plan 20, no mobile Figma): no stacking. The cards follow one
 * another in the page, 4:5 at least and taller when their text needs it; the
 * side menu becomes one row of names that scrolls sideways and sticks under
 * the bar (white, so the cards pass under it), the current name in Forest.
 * chapters-nav.js marks the card under the row and scrolls a tapped name's
 * card to just under it.
 */
@media (max-width: 1023px) {
	.chapters,
	.chapters--wide {
		--chapters-row: calc(var(--space-20) * 2 + 1em);

		display: block;
		padding-top: var(--space-80); /* the desktop's 80px, 32px at 390 */
	}

	.chapters--events {
		padding-top: 0;
	}

	.chapters__nav,
	.chapters--wide .chapters__nav {
		position: sticky;
		top: var(--header-height);
		z-index: 2;
		margin-inline: calc(-1 * var(--gutter));
		padding: var(--space-20) var(--gutter);
		background: var(--color-white);
		font-size: var(--fs-35);
	}

	/* The fade sits on the scrolling list, not on the bar, so the white reaches the edge (client, 2026-10-13). */
	.chapters__menu {
		display: flex;
		gap: var(--space-40);
		margin-left: 0;
		padding-left: 0;
		padding-right: var(--space-80);
		border-left: 0;
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--space-80)), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - var(--space-80)), transparent);
	}

	.chapters__menu::-webkit-scrollbar {
		display: none;
	}

	.chapters__link {
		display: block;
		padding-block: var(--space-10);
	}

	.chapters__cards,
	.chapters--wide .chapters__cards {
		padding-top: var(--space-40);
	}

	.chapters__cards::after {
		height: 0;
	}

	.chapter,
	.chapters--wide .chapter {
		position: relative; /* not sticky; still the photo's containing block (.media-overlay) */
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto 1fr auto auto;
		row-gap: var(--space-20);
		height: auto;
		/* 4:5 at least, as a minimum height, not aspect-ratio: the card is a flex item with overflow: hidden, so its automatic minimum is 0 and aspect-ratio would clip a longer text (client, 2026-10-13). */
		min-height: calc((100vw - 2 * var(--gutter)) * 1.25);
		padding: 16px; /* the token gives 12px here; the last line needs air (client, 2026-10-13) */
		scroll-margin-top: calc(var(--header-height) + var(--chapters-row));
	}

	.chapter__number,
	.chapter__head,
	.chapter__extra,
	.chapter__body,
	.chapters--wide .chapter__head,
	.chapters--wide .chapter__body,
	.chapters--wide .chapter__specs,
	.chapters--wide .chapter__link,
	.chapters--events .chapter__head {
		grid-column: 1;
	}

	.chapter__number {
		grid-row: 1;
	}

	.chapter__head {
		grid-row: 2;
	}

	.chapter__extra {
		grid-row: 3;
	}

	.chapter__body,
	.chapters--wide .chapter__body {
		grid-row: 4;
		align-self: end;
	}

	.chapters--wide .chapter__specs {
		grid-row: 5;
		max-width: none;
		padding-left: 0;
	}

	.chapters--wide .chapter__link {
		grid-row: 6;
	}
}