/*
 * Chapter (design draft V2): three image roles.
 *   wide      photograph within the page width, a burgundy panel with the
 *             heading over its lower left corner, copy on the grid below
 *   portrait  text left; a burgundy field to the page edge on the right with
 *             the photograph set into it and a fine gold frame behind
 *   panorama  heading and copy, then a broad view of place
 */
@layer blocks {
	.chapter {
		overflow-x: clip;
	}

	.chapter__layout {
		display: grid;
		gap: var(--space-8);
	}

	.chapter .section-head__title {
		max-width: 16em;
	}

	.chapter__body {
		min-width: 0;
	}

	.chapter__intro {
		color: var(--foreground);
	}

	.chapter__intro + .chapter__copy {
		margin-top: var(--space-4);
	}

	.chapter__copy {
		display: grid;
		gap: var(--space-4);
		max-width: 46ch;
		color: var(--muted-foreground);
	}

	.chapter__aside {
		margin-top: var(--space-8);
	}

	.chapter__list-title {
		margin-bottom: var(--space-3);
	}

	.chapter__note {
		max-width: 46ch;
		margin-top: var(--space-6);
	}

	.chapter__action {
		margin-top: var(--space-10);
	}

	.chapter__media {
		position: relative;
		min-width: 0;
		margin: 0;
	}

	.chapter__frame {
		position: relative;
		height: 18rem;
		overflow: hidden;
		background: var(--muted);
	}

	.chapter__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.chapter__caption {
		max-width: none;
		margin: 0;
		padding-top: var(--space-3);
	}

	/* ---- Wide: the panel over the photograph -------------------------- */
	/*
	 * Wide stage: one grid shared by the photograph, its caption and the
	 * panel (the figure joins it as a subgrid), so the panel is anchored to
	 * the photograph itself, never to the caption below it.
	 *   phones   photograph, panel, caption
	 *   desktop  the panel sits on the photograph's lower left corner
	 */
	.chapter__stage {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
	}

	.chapter--wide .chapter__media {
		display: grid;
		grid-row: 1 / -1;
		grid-column: 1;
		grid-template-rows: subgrid;
	}

	.chapter--wide .chapter__frame {
		grid-row: 1;
	}

	.chapter--wide .chapter__caption {
		grid-row: 3;
	}

	.chapter__panel {
		position: relative;
		z-index: 1;
		padding: var(--space-10) var(--space-8);
	}

	/* Inner gold frame: the top strengthens to the right, the side fades down. */
	.chapter__panel-frame {
		inset: var(--space-4) var(--space-4) var(--space-4) var(--space-16);
		--frame-color: color-mix(in srgb, var(--ramp-gold-300) 70%, transparent);
	}

	.chapter__panel .section-head {
		gap: var(--space-4);
	}

	.chapter__panel .section-head__title {
		font-size: var(--type-h3-size);
		line-height: var(--type-h3-line);
	}

	.chapter__panel .arrow-link {
		color: var(--ramp-gold-300);
		font-weight: 600;
	}

	.chapter__panel .section-head__eyebrow::before {
		display: none;
	}

	.chapter__link {
		margin-top: var(--space-6);
	}

	.chapter--wide .chapter__panel {
		grid-row: 2;
		grid-column: 1;
	}

	.chapter--wide .chapter__body {
		margin-top: var(--space-6);
	}

	/* ---- Portrait: the engraved burgundy field ------------------------ */
	.chapter--portrait .chapter__media {
		isolation: isolate;
		padding: var(--space-12) 0 0 var(--space-10);
	}

	.chapter__field {
		position: absolute;
		top: 0;
		bottom: var(--space-16);
		left: 0;
		right: -100vw;
		z-index: -2;
		--engraving-position: 20% 30%;
	}

	/* A fine gold frame, offset up and right of the photograph, dissolving downwards. */
	.chapter__outline {
		z-index: -1;
		top: var(--space-6);
		left: calc(var(--space-10) + var(--space-5));
		width: calc(min(100%, 30rem) - var(--space-5));
		height: 60%;
		--frame-color: color-mix(in srgb, var(--ramp-gold-300) 55%, transparent);
	}

	.chapter--portrait .chapter__frame {
		height: 26rem;
	}

	.chapter--portrait .chapter__caption {
		color: var(--muted-foreground);
	}

	/* ---- Panorama ----------------------------------------------------- */
	.chapter--panorama .chapter__frame {
		height: 16rem;
	}

	.chapter--panorama .chapter__media {
		order: 3;
	}

	@media (min-width: 40rem) and (max-width: 63.999rem) {
		.chapter--portrait .chapter__media {
			max-width: 32rem;
		}
	}

	@media (min-width: 48rem) {
		.chapter__frame {
			height: 27rem;
		}

		.chapter--panorama .chapter__frame {
			height: 24rem;
		}
	}

	@media (min-width: 64rem) {
		.chapter__layout {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			column-gap: var(--grid-gap);
			row-gap: var(--space-12);
			align-items: start;
		}

		.chapter .section-head,
		.chapter__body {
			grid-column: 1 / 6;
		}

		/* Wide: panel on the photograph's lower left corner. */
		.chapter__stage {
			position: relative;
			grid-column: 1 / -1;
		}

		.chapter--wide .chapter__frame {
			height: 40rem;
		}

		.chapter__stage {
			grid-template-rows: auto auto;
		}

		.chapter--wide .chapter__caption {
			grid-row: 2;
		}

		.chapter--wide .chapter__panel {
			grid-row: 1;
			align-self: end;
			justify-self: start;
			width: min(30rem, 42%);
			padding: var(--space-12) var(--space-12) var(--space-10);
		}

		.chapter--wide .chapter__caption {
			text-align: right;
		}

		/* Introduction and copy on the left, the list and note on the right. */
		.chapter--wide .chapter__body {
			grid-column: 1 / -1;
			display: grid;
			grid-template-columns: repeat(12, minmax(0, 1fr));
			grid-auto-flow: row dense;
			align-items: start;
			column-gap: var(--grid-gap);
			margin-top: 0;
		}

		.chapter--wide .chapter__body > * {
			grid-column: 1 / 6;
		}

		.chapter--wide .chapter__aside,
		.chapter--wide .chapter__note {
			grid-column: 7 / 12;
		}

		.chapter--wide .chapter__aside {
			grid-row: 1 / span 2;
			margin-top: 0;
		}

		/* Portrait: text left, burgundy field and photograph right. */
		/* Two equal rows: the text sits across the middle of the photograph. */
		.chapter--portrait .chapter__layout {
			grid-template-rows: 1fr 1fr;
			row-gap: var(--space-6);
		}

		.chapter--portrait .section-head {
			grid-column: 1 / 6;
			grid-row: 1;
			align-self: end;
		}

		.chapter--portrait .chapter__body {
			grid-column: 1 / 6;
			grid-row: 2;
		}

		.chapter--portrait .chapter__media {
			grid-column: 7 / -1;
			grid-row: 1 / span 2;
			padding: var(--space-30) 0 0 var(--space-24);
		}

		.chapter__field {
			bottom: var(--space-20);
		}

		.chapter__outline {
			top: calc(var(--space-30) - var(--space-5));
			left: calc(var(--space-24) + var(--space-5));
			width: min(calc(100% - var(--space-24)), 26.5rem);
		}

		.chapter--portrait .chapter__frame {
			width: min(100%, 26.5rem);
			height: 40rem;
		}

		/* Panorama: heading left, copy right, then the view. */
		.chapter--panorama .section-head {
			grid-column: 1 / 7;
		}

		.chapter--panorama .chapter__body {
			grid-column: 8 / -1;
			padding-top: var(--space-8);
		}

		.chapter--panorama .chapter__media {
			grid-column: 1 / -1;
			margin-top: var(--space-4);
		}

		.chapter--panorama .chapter__frame {
			height: 32rem;
		}
	}

	@media (min-width: 80rem) {
		.chapter--wide .chapter__frame {
			height: 44rem;
		}
	}
}