@font-face {
	font-family: 'Flama Semicondensed';
	src: url('../../assets/flama-semicondensed-medium.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'Flama';
	src: url('../../assets/flama-book.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Flama';
	src: url('../../assets/flama-medium.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}

:root {
	/* palette */
	--palette-black: #000000;
	--palette-white: #ffffff;
	--palette-grey-100: #f2f2f2;
	--palette-grey-400: #a6a6a6;
	--palette-grey-700: #595959;
	--palette-lime-light: #cfff48;
	--palette-lime-deep: #a6d02f;
	--palette-mint-light: #4affd4;
	--palette-mint-deep: #1dbf94;
	--palette-purple-light: #bc9cff;
	--palette-purple-deep: #8362e0;
	--palette-rose-light: #ffbecd;
	--palette-rose-deep: #dc8196;
	--palette-orange-light: #ffa14a;
	--palette-orange-deep: #ca680e;

	/* roles */
	--surface: var(--palette-white);
	--surface-raised: var(--palette-grey-100);
	--surface-inverse: var(--palette-black);
	--text: var(--palette-black);
	--text-muted: var(--palette-grey-700);
	--text-inverse: var(--palette-white);
	--text-inverse-muted: var(--palette-grey-400);
	--rule: currentColor;
	--font-title: 'Flama Semicondensed', 'Arial Narrow', Arial, sans-serif;
	--font-text: 'Flama', Arial, sans-serif;
	--tracking-title: 0.1em;
	--tracking-label: 0.06em;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--page-max: 90rem;
	--header-height: 4rem;
	--focus-width: 0.1875rem;
	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.book--lime {
	--book-color: var(--palette-lime-light);
	--book-color-deep: var(--palette-lime-deep);
}

.book--mint {
	--book-color: var(--palette-mint-light);
	--book-color-deep: var(--palette-mint-deep);
}

.book--purple {
	--book-color: var(--palette-purple-light);
	--book-color-deep: var(--palette-purple-deep);
}

.book--rose {
	--book-color: var(--palette-rose-light);
	--book-color-deep: var(--palette-rose-deep);
}

.book--orange {
	--book-color: var(--palette-orange-light);
	--book-color-deep: var(--palette-orange-deep);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: var(--header-height);
}

body {
	margin: 0;
	background: var(--surface);
	color: var(--text);
	font-family: var(--font-text);
	font-size: 1rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
}

:focus-visible {
	outline: var(--focus-width) solid currentColor;
	outline-offset: 0.2em;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: var(--gutter);
	top: 0;
	z-index: 10;
	padding: 0.75rem 1rem;
	background: var(--surface);
	color: var(--text);
	transform: translateY(-110%);
}

.skip-link:focus {
	transform: none;
}

.title {
	font-family: var(--font-title);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--tracking-title);
		line-height: 0.92;
}

.label {
	font-family: var(--font-text);
	font-weight: 500;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	line-height: 1.3;
}

.section {
	padding: clamp(3rem, 8vw, 6.5rem) var(--gutter);
}

.section__inner {
	max-width: var(--page-max);
	margin-inline: auto;
}

.section--dark {
	background: var(--surface-inverse);
	color: var(--text-inverse);
}

.section--dark .muted,
.site-footer .muted {
	color: var(--text-inverse-muted);
}

.muted {
	color: var(--text-muted);
}

/* buttons */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 2.75rem;
	padding: 0.7em 1.4em;
	border: 0.125rem solid var(--button-bg, var(--surface-inverse));
	background: var(--button-bg, var(--surface-inverse));
	color: var(--button-text, var(--text-inverse));
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking-title);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.button:hover {
	background: transparent;
	color: var(--button-bg, var(--surface-inverse));
}

.button svg {
	width: 0.7em;
	height: 0.7em;
	fill: currentColor;
}

.button--book {
	--button-bg: var(--surface-inverse);
	--button-text: var(--book-color, var(--text-inverse));
}

.button--book:hover {
	background: var(--surface-inverse);
	color: var(--text-inverse);
}

.button--on-dark {
	--button-bg: var(--book-color, var(--surface));
	--button-text: var(--text);
}

.button--on-dark:hover {
	background: transparent;
	color: var(--book-color, var(--surface));
}

.button--outline-on-dark {
	--button-bg: transparent;
	--button-text: var(--text-inverse);
	border-color: var(--text-inverse);
}

.button--outline-on-dark:hover {
	background: var(--text-inverse);
	color: var(--text);
}

/* site header + footer */

.site-header {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: var(--header-height);
	padding-inline: var(--gutter);
	background: var(--surface-inverse);
	color: var(--text-inverse);
}

.site-header__logo {
	display: block;
}

.site-header__logo img {
	width: 3.75rem;
	height: auto;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 3vw, 2.25rem);
	white-space: nowrap;
	font-size: 0.75rem;
}

@media (min-width: 40rem) {
	.site-nav {
		font-size: 0.8125rem;
	}
}

.site-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
	text-decoration: underline;
	text-underline-offset: 0.4em;
	text-decoration-thickness: 0.125rem;
}

.site-footer {
	padding: clamp(3rem, 7vw, 5rem) var(--gutter) 2rem;
	background: var(--surface-inverse);
	color: var(--text-inverse);
	border-top: 0.0625rem solid var(--palette-grey-700);
}

.site-footer__grid {
	display: grid;
	gap: 2.5rem 2rem;
	max-width: var(--page-max);
	margin-inline: auto;
}

.site-footer__logo img {
	width: 6rem;
	height: auto;
}

.site-footer__group {
	display: grid;
	gap: 0.5rem;
	align-content: start;
}

.site-footer__group a {
	display: inline-block;
	padding-block: 0.15rem;
}

.site-footer address {
	font-style: normal;
}

.site-footer__legal {
	max-width: var(--page-max);
	margin: 3rem auto 0;
	color: var(--text-inverse-muted);
	font-size: 0.875rem;
}

@media (min-width: 48rem) {
	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}
}

/* poster */

.poster {
	--poster-ratio: 297 / 420;
	--poster-bg: var(--book-color, var(--surface-raised));
	--poster-text: var(--text);
	--poster-title: var(--text);
	--poster-button-bg: var(--surface-inverse);
	--poster-button-text: var(--book-color, var(--text-inverse));
	--title-glyph: 0.68;
	container: poster / size;
	position: relative;
	aspect-ratio: var(--poster-ratio);
	background: var(--poster-bg);
	color: var(--poster-text);
	overflow: hidden;
}

.poster--dark {
	--poster-bg: var(--surface-inverse);
	--poster-text: var(--text-inverse);
	--poster-title: var(--book-color, var(--text-inverse));
	--poster-button-bg: var(--book-color, var(--surface));
	--poster-button-text: var(--text);
	box-shadow: inset 0 0 0 0.0625rem var(--palette-grey-700);
}

.poster__sheet {
	position: absolute;
	inset: 0;
	display: grid;
	padding: 5.5cqw;
	grid-template-columns: minmax(0, 1fr) 30cqw;
	grid-template-rows: auto auto 1fr auto auto;
	grid-template-areas:
		'brand kicker'
		'title title'
		'verse stamp'
		'ref stamp'
		'foot foot';
	row-gap: 3cqw;
	column-gap: 4cqw;
	--title-width: 88cqw;
	--title-max: 25cqw;
	--verse-k: 52;
	--label-size: max(2.9cqw, 0.6875rem);
	--price-size: 8.5cqw;
	--stamp-width: 30cqw;
	--button-size: max(3.4cqw, 0.8125rem);
}

@container poster (orientation: landscape) {
	.poster__sheet {
		padding: 3.6cqw;
		grid-template-columns: minmax(0, 7fr) minmax(0, 2fr) minmax(0, 3fr);
		grid-template-rows: auto 1fr calc(var(--stamp-width) * 1.2544 + 2.2cqw);
		grid-template-areas:
			'brand kicker kicker'
			'title verse verse'
			'foot ref ref';
		row-gap: 2.2cqw;
		column-gap: 0;
		--title-width: 47.5cqw;
		--title-max: 34cqw;
		--verse-k: 42;
		--label-size: max(1.35cqw, 0.75rem);
		--price-size: 5.4cqw;
		--stamp-width: 11cqw;
		--button-size: max(1.65cqw, 0.9375rem);
	}
}

.poster__logo {
	grid-area: brand;
	align-self: start;
	justify-self: start;
	width: 22cqw;
	height: auto;
}

@container poster (orientation: landscape) {
	.poster__logo {
		width: 10.5cqw;
	}
}

.poster__kicker {
	grid-area: 1 / 1 / 2 / -1;
	justify-self: end;
	text-align: right;
	font-family: var(--font-text);
	font-weight: 500;
	font-size: var(--label-size);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	line-height: 1.35;
}

.poster__kicker span {
	display: block;
}

.poster__title {
	grid-area: title;
	align-self: start;
	font-family: var(--font-title);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--tracking-title);
	line-height: 0.88;
	color: var(--poster-title);
	font-size: clamp(8cqw, calc(var(--title-width) / (var(--title-chars) * var(--title-glyph))), var(--title-max));
	margin-top: -0.06em;
}

.poster__title a {
	text-decoration: none;
}

.poster__title span {
	display: block;
}

.poster__verse {
	grid-area: verse;
	font-family: var(--font-title);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
		line-height: 0.98;
	font-size: calc(1cqw * var(--verse-k) / sqrt(var(--verse-chars)));
	text-wrap: balance;
}

@container poster (orientation: landscape) {
	.poster__verse {
		padding-left: 2.6cqw;
		border-left: 0.3cqw solid var(--poster-text);
		padding-top: 0.2cqw;
	}
}

.poster__ref {
	grid-area: ref;
	align-self: end;
	font-family: var(--font-text);
	font-weight: 500;
	font-size: var(--label-size);
	letter-spacing: var(--tracking-label);
}

@container poster (orientation: landscape) {
	.poster__ref {
		padding: 1.4cqw 0 0 2.6cqw;
		border-top: 0.3cqw solid var(--poster-text);
		align-self: stretch;
		display: flex;
		align-items: center;
	}
}

.poster__stamp {
	grid-area: stamp;
	align-self: start;
	justify-self: end;
	width: var(--stamp-width);
	aspect-ratio: 994 / 1247;
	box-sizing: border-box;
	overflow: hidden;
	border: 0.35cqw solid var(--poster-text);
}

.poster__stamp img {
	width: 142%;
	height: auto;
	max-width: none;
	margin-left: -20.9%;
	margin-top: -7.9%;
}

@container poster (orientation: landscape) {
	.poster__stamp {
		grid-area: 3 / 3;
		align-self: end;
		z-index: 1;
	}
}

.poster__foot {
	grid-area: foot;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 1.5cqw 4cqw;
	padding-top: 2.6cqw;
	border-top: 0.3cqw solid var(--poster-text);
}

@container poster (orientation: landscape) {
	.poster__kicker {
		grid-area: kicker;
	}

	.poster__title {
		align-self: end;
		margin-bottom: -0.04em;
	}

	.poster__foot {
		align-self: stretch;
		align-content: center;
	}
}

.poster__price {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: var(--price-size);
	letter-spacing: var(--tracking-title);
	line-height: 1;
	white-space: nowrap;
}

.poster__buy {
	--button-bg: var(--poster-button-bg);
	--button-text: var(--poster-button-text);
	position: relative;
	z-index: 1;
	padding-inline: 1em;
	font-size: var(--button-size);
	min-height: max(2.75rem, 7cqw);
}

.poster__address {
	font-family: var(--font-text);
	font-weight: 500;
	font-size: var(--label-size);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	text-align: right;
}

@media screen {
	.poster__address {
		display: none;
	}
}

.poster--wall .poster__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.poster--wall:has(.poster__title a:focus-visible) {
	outline: var(--focus-width) solid var(--text-inverse);
	outline-offset: 0.25rem;
}

.poster--wall .poster__title a:focus-visible {
	outline: none;
}

.poster--wall:hover .poster__title {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.06em;
}

/* poster load-in: one orchestrated sequence */

@keyframes poster-rise {
	from {
		opacity: 0;
		transform: translateY(2cqw);
	}
}

@keyframes poster-wipe {
	from {
		clip-path: inset(0 -1em 100% -1em);
		transform: translateY(3cqw);
	}
	to {
		clip-path: inset(-0.1em -1em -0.1em -1em);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.poster__sheet > * {
		animation: poster-rise 0.8s var(--ease-out) both;
		animation-delay: calc(var(--poster-delay, 0ms) + var(--step, 0) * 90ms);
	}

	.poster__logo {
		--step: 0;
	}

	.poster__kicker {
		--step: 1;
	}

	.poster__stamp {
		--step: 2;
	}

	.poster__verse {
		--step: 5;
	}

	.poster__ref {
		--step: 6;
	}

	.poster__foot {
		--step: 7;
	}

	.poster__title {
		animation: none;
	}

	.poster__title span {
		animation: poster-wipe 0.9s var(--ease-out) both;
		animation-delay: calc(var(--poster-delay, 0ms) + 200ms + var(--line, 0) * 130ms);
	}

	.poster__title span:nth-child(2) {
		--line: 1;
	}

	.poster__title span:nth-child(3) {
		--line: 2;
	}
}

/* wall */

.wall {
	padding: 1.25rem var(--gutter) clamp(2rem, 5vw, 3.5rem);
	background: var(--surface-inverse);
	color: var(--text-inverse);
}

.wall__stage {
	width: 100%;
	margin-inline: auto;
}

.wall__tools p {
	color: var(--text-inverse-muted);
}

.wall__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	max-width: 60rem;
	margin: 1.25rem auto 0;
}

@media (min-width: 56rem) {
	.poster--page {
		--poster-ratio: 420 / 297;
	}

	.wall__stage {
		width: min(100%, calc((100svh - var(--header-height) - 5.5rem) * 1.4142));
	}
}

/* book */

.book-intro {
	display: grid;
	gap: 1.5rem 3rem;
}

.book-intro__lead {
	font-size: clamp(2rem, 5.2vw, 4.25rem);
	max-width: 22ch;
}

.book-intro__body {
	max-width: 38rem;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.6;
}

@media (min-width: 56rem) {
	.book-intro {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: start;
	}

	.book-intro .label {
		grid-column: 1 / -1;
	}
}

/* chapters: the back of the poster */

.chapters__head {
	display: grid;
	gap: 1rem 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 0.375rem solid var(--text);
	align-items: end;
}

.chapters__title {
	font-size: clamp(3.25rem, 15vw, 13rem);
	line-height: 0.82;
	margin-top: 0.04em;
}

.chapters__meta {
	display: grid;
	gap: 0.15rem;
	justify-items: start;
}

@media (min-width: 48rem) {
	.chapters__head {
		grid-template-columns: 1fr auto;
	}

	.chapters__meta {
		justify-items: end;
		text-align: right;
	}
}

.chapter {
	border-bottom: 0.125rem solid var(--text);
}

.chapter__row {
	display: grid;
	grid-template-columns: clamp(3.25rem, 11vw, 9rem) minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.5rem clamp(0.75rem, 2.5vw, 2rem);
	padding: 1rem 0.5rem;
	cursor: pointer;
	list-style: none;
}

.chapter__row::-webkit-details-marker {
	display: none;
}

.chapter__row:hover,
.chapter[open] > .chapter__row {
	background: var(--book-color);
}

.chapter__row:focus-visible {
	outline-offset: -0.25rem;
}

.chapter__number {
	font-size: clamp(2.5rem, 7vw, 6rem);
	line-height: 0.9;
	letter-spacing: 0;
}

.chapter__title {
	display: block;
	font-size: clamp(1.25rem, 2.6vw, 2.5rem);
	line-height: 1;
}

.chapter__sub {
	display: block;
	margin-top: 0.4rem;
	font-size: 1rem;
	line-height: 1.4;
}

.chapter__row:hover .chapter__sub,
.chapter[open] .chapter__sub {
	color: var(--text);
}

.chapter__play {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding-inline: 0.25rem;
}

.chapter__play svg {
	width: 0.75rem;
	height: 0.75rem;
	fill: currentColor;
}

.chapter__play-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

@media (min-width: 40rem) {
	.chapter__play-text {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}
}

.chapter__stage {
	container: stage / inline-size;
	padding: 0 0.5rem 1.25rem;
	background: var(--book-color);
}

.stage {
	display: grid;
	align-content: space-between;
	gap: 2rem;
	min-height: 15rem;
	padding: 5cqw;
	background: var(--surface-inverse);
	color: var(--text-inverse);
}

.stage__title {
	max-width: 18ch;
	color: var(--book-color);
	font-size: clamp(1.75rem, 6.2cqw, 4.5rem);
		line-height: 0.95;
}

.stage__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (min-width: 40rem) {
	.stage {
		min-height: clamp(18rem, 26vw, 26rem);
	}
}

@media (min-width: 56rem) {
	.chapter__stage {
		padding-left: calc(clamp(3.25rem, 11vw, 9rem) + clamp(0.75rem, 2.5vw, 2rem) + 0.5rem);
	}
}

/* offers: a price board */

.offers__head {
	display: grid;
	gap: 1.5rem 3rem;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
	align-items: end;
}

.offers__title {
	font-size: clamp(3.25rem, 13vw, 11rem);
	line-height: 0.82;
}

.offers__note {
	max-width: 30rem;
}

@media (min-width: 56rem) {
	.offers__head {
		grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
	}
}

.offer {
	display: grid;
	gap: 0.75rem 2rem;
	padding: 1.5rem clamp(1rem, 2vw, 1.75rem);
	border-top: 0.125rem solid var(--text-inverse);
	align-items: center;
	grid-template-areas:
		'name price'
		'desc desc'
		'action action';
	grid-template-columns: minmax(0, 1fr) auto;
}

.offer:last-child {
	border-bottom: 0.125rem solid var(--text-inverse);
}

.offer__name {
	grid-area: name;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
}

.offer__desc {
	grid-area: desc;
	max-width: 34rem;
}

.offer__price {
	grid-area: price;
	font-size: clamp(2rem, 4.2vw, 3.5rem);
	white-space: nowrap;
	justify-self: end;
}

.offer__action {
	grid-area: action;
}

.offer__action .button {
	width: 100%;
	white-space: nowrap;
}

.offer--lead {
	background: var(--book-color, var(--surface));
	color: var(--text);
	border-top-color: transparent;
}

.offer--lead + .offer {
	border-top-color: transparent;
}

@media (min-width: 56rem) {
	.offer {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 17rem 17rem;
		grid-template-areas: 'name desc price action';
		padding-block: 1.75rem;
	}
}

/* ICF Rio photos: a deliberate mosaic */

.mosaic {
	container: mosaic / inline-size;
}

.mosaic__grid {
	--gap: 0.5rem;
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-template-rows: repeat(12, calc((100cqw - 5 * var(--gap)) / 6)) auto;
	grid-template-areas:
		'a a a a a a'
		'a a a a a a'
		'a a a a a a'
		'a a a a a a'
		'b b b d d d'
		'b b b d d d'
		'b b b d d d'
		'b b b e e e'
		'b b b e e e'
		'f f f f f f'
		'f f f f f f'
		'f f f f f f'
		't t t t t t';
}

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

.mosaic__photo--a {
	grid-area: a;
	object-position: 50% 40%;
}

.mosaic__photo--b {
	grid-area: b;
}

.mosaic__photo--d {
	grid-area: d;
	object-position: 50% 30%;
}

.mosaic__photo--e {
	grid-area: e;
}

.mosaic__photo--f {
	grid-area: f;
	object-position: 50% 60%;
}

.mosaic__note {
	grid-area: t;
	display: grid;
	gap: 1rem;
	align-content: space-between;
	padding: 1.25rem;
	background: var(--book-color, var(--surface-raised));
	color: var(--text);
}

.mosaic__note-title {
	font-size: clamp(1.75rem, 5vw, 2.5rem);
}

@container mosaic (min-width: 48rem) {
	.mosaic__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-template-rows: repeat(7, calc((100cqw - 11 * var(--gap)) / 12 * 0.78));
		grid-template-areas:
			'a a a a a a b b b t t t'
			'a a a a a a b b b t t t'
			'a a a a a a b b b t t t'
			'a a a a a a b b b t t t'
			'e e e e f f b b b d d d'
			'e e e e f f b b b d d d'
			'e e e e f f b b b d d d';
	}

	.mosaic__note {
		padding: 1.5rem;
	}

	.mosaic__note-title {
		font-size: clamp(1.75rem, 3vw, 2.75rem);
	}
}

/* footer lists, shared headings */

.heading-row {
	display: grid;
	gap: 0.5rem 2rem;
	margin-bottom: 1.5rem;
}

/* overview */

.hero-list {
	padding: clamp(1.75rem, 4vw, 3rem) var(--gutter) clamp(1.25rem, 3vw, 2rem);
	background: var(--surface-inverse);
	color: var(--text-inverse);
}

.hero-list__inner {
	display: grid;
	gap: 1.5rem 3rem;
	max-width: var(--page-max);
	margin-inline: auto;
	align-items: end;
}

.hero-list__title {
	font-size: clamp(2.5rem, 6.6vw, 6rem);
	line-height: 0.85;
}

.hero-list__text {
	max-width: 28rem;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
}

@media (min-width: 56rem) {
	.hero-list__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
	}
}

.wall-list {
	padding: 1rem var(--gutter) clamp(2rem, 5vw, 4rem);
	background: var(--surface-inverse);
	color: var(--text-inverse);
}

.wall-list__scroller {
	display: grid;
	gap: 1.25rem;
	max-width: var(--page-max);
	margin-inline: auto;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	grid-auto-flow: row;
}

@media (max-width: 39.99rem) {
	.wall-list {
		padding-inline: 0;
	}

	.wall-list__scroller {
		display: flex;
		gap: 0.75rem;
		overflow-x: auto;
		padding: 0.25rem var(--gutter) 1rem;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-color: var(--palette-grey-400) var(--palette-grey-700);
	}

	.wall-list__item {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}
}

.wall-list__item {
	min-width: 0;
}

.wall-list__hint {
	max-width: var(--page-max);
	margin: 0 auto 0.5rem;
	padding-inline: var(--gutter);
	color: var(--text-inverse-muted);
}

@media (min-width: 40rem) {
	.wall-list__hint {
		display: none;
	}
}

.offers-band {
	padding: 1rem var(--gutter) clamp(3rem, 7vw, 5rem);
	background: var(--surface-inverse);
	color: var(--text-inverse);
}

/* print: the poster becomes an A3 sheet for the wall */

@page {
	size: A3 portrait;
	margin: 0;
}

@media print {
	html,
	body {
		background: var(--surface);
	}

	.skip-link,
	.site-header,
	.site-footer,
	.wall__tools,
	.book-intro,
	.chapters,
	.offers,
	.mosaic,
	.hero-list,
	.offers-band,
	.wall-list__hint,
	.section {
		display: none;
	}

	.wall,
	.wall-list {
		padding: 0;
	}

	.wall__stage {
		width: 297mm;
		margin: 0;
	}

	.wall-list__scroller {
		display: block;
		overflow: visible;
		padding: 0;
	}

	.wall-list__item {
		width: 297mm;
		break-after: page;
	}

	.poster {
		--poster-ratio: 297 / 420;
		width: 297mm;
		height: 420mm;
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
		break-inside: avoid;
	}

	.poster__sheet > *,
	.poster__title span {
		animation: none;
	}

	.poster__buy {
		display: none;
	}

	.poster__address {
		display: block;
	}

	.poster__foot {
		justify-content: space-between;
	}
}