/*
 * 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;
	height: var(--chapter-height);
	padding: var(--space-20);
	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;
}

.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;
}

/* 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;
}

.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: 768px) {
	.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: 768px) {
	.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: 768px) {
	.chapters--events .chapter__head {
		grid-column: 2 / -1;
	}
}

/* Provisional until the mobile design: no side menu, cards size to their text. */
@media (max-width: 767px) {
	.chapters__nav {
		display: none;
	}

	.chapter {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto 1fr auto;
		row-gap: var(--space-20);
		height: auto;
		min-height: var(--chapter-height);
	}

	.chapter__number,
	.chapter__head,
	.chapter__body {
		grid-column: 1;
	}

	.chapter__head {
		grid-row: 2;
	}

	.chapter__body {
		grid-row: 4;
	}

	.chapter__extra,
	.chapter__specs,
	.chapter__link {
		grid-column: 1;
	}

	.chapter__extra {
		grid-row: 3;
	}

	.chapter__specs {
		grid-row: 5;
	}

	.chapter__link {
		grid-row: 6;
	}
}