/*
 * Journal article (design/artboards/journal-article.html, 1440 and 390). One DOM; the header's two
 * columns and the stills' row from 1280 and 768 respectively. Off-scale artboard values are token
 * multiples or clamps anchored on 390/1440. Radius rule (tokens §4): films are full-bleed, square;
 * the stills sit in the container, rounded.
 */

:where(.journal-article ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ——— Article header: Mist, under the transparent header ——— */
.article-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-5);
	/* Header → eyebrow 48 at 1440, 28 at 390; foot 88 / 56. */
	padding-block: calc(var(--header-h) + clamp(1.75rem, 1.2857rem + 1.9048vw, 4.375rem)) calc(var(--space-6) - 0.5rem);
	padding-inline: var(--container-pad);
	background: var(--mist);
}

.article-header__eyebrow {
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	line-height: normal;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.article-header__title {
	margin-block-start: clamp(0.875rem, 0.7821rem + 0.381vw, 1.25rem);
	font-size: var(--fs-display);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: 0.01em;
}

.article-header__lead {
	max-width: 45rem;
	margin-block-start: clamp(1.125rem, 0.9393rem + 0.7619vw, 1.875rem);
	color: var(--graphite);
	font-size: var(--fs-lead);
	font-style: italic;
	line-height: 1.7;
}

.article-header__statement {
	font-size: var(--fs-h1);
	font-weight: 300;
	line-height: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Two columns from 1280: the statement centred in the right half, level with the text's middle. */
@media (min-width: 1280px) {
	.article-header--statement {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: calc(var(--space-4) * 2);
		align-items: center;
	}

	.article-header__statement {
		letter-spacing: 0.12em;
		text-align: center;
	}
}

/* ——— Chapters: padding above only, so every gap between chapters equals the one above the first ——— */
.chapter {
	padding-block-start: var(--space-6);
}

.chapter__head {
	/* 32 at 1440, 28 at 390. */
	padding-block-end: calc(var(--space-3) + 0.5rem);
	padding-inline: var(--container-pad);
}

.chapter__title {
	margin-block-end: 0.75rem;
	font-size: var(--fs-h3);
	font-weight: 300;
	line-height: normal;
	letter-spacing: 0.04em;
}

.chapter__text {
	max-width: 45rem;
	font-size: var(--fs-body);
	line-height: 1.7;
}

.chapter__stills {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
	margin-block-start: var(--space-3);
	padding-inline: var(--container-pad);
}

.chapter__still {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--radius);
}

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

/* ——— A portrait-film chapter (Rasmus, 29 Sep 2026): the landscape image full-bleed above, then
   the 9:16 film left and two stills stacked right, together the film's height, in the container
   with the stills' gap and radius. The film's column is 2 of 5 (the film 9:16; each still about
   16:9 beside it at 1440). Below 768: film, then the two stills, as the stills stack. ——— */
.chapter__tall {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: var(--space-3);
	margin-block-start: var(--space-3);
	padding-inline: var(--container-pad);
}

.chapter__tall-film {
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--ink);
}

.chapter__tall-video,
.chapter__tall-film picture {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The stills take the film's height: the column contributes none of its own. */
.chapter__tall-stills {
	display: grid;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	height: 0;
	min-height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chapter__tall-stills .chapter__still {
	aspect-ratio: auto;
	min-height: 0;
}

/* ——— Explore the collection ——— */
.journal-section {
	padding-block: var(--space-6);
	padding-inline: var(--container-pad);
}

.journal-section--mist {
	background: var(--mist);
}

/* Same-ground merge, per width (a chapter can exist at one width only). */
@media (max-width: 767px) {
	.chapter--only-landscape {
		display: none;
	}

	.journal-section.merge-top-mobile {
		padding-block-start: 0;
	}
}

@media (min-width: 768px) {
	.chapter--only-portrait {
		display: none;
	}

	.journal-section.merge-top-desktop {
		padding-block-start: 0;
	}
}

.journal-section__label {
	/* 32 at both widths on the journal artboard. */
	margin-block-end: 2rem;
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	line-height: normal;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

/* Stills stack below 768, 8 apart and 12 in from the edges, as the product gallery's list. */
@media (max-width: 767px) {
	.chapter__stills {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-1);
		margin-block-start: var(--space-1);
		padding-inline: 0.75rem;
	}

	.chapter__tall {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-1);
		margin-block-start: var(--space-1);
		padding-inline: 0.75rem;
	}

	.chapter__tall-stills {
		grid-template-rows: none;
		gap: var(--space-1);
		height: auto;
		min-height: 0;
	}

	.chapter__tall-stills .chapter__still {
		aspect-ratio: 3 / 2;
	}
}