/* =========================================================================
 * Content Band 001 — Manifesto
 *
 * The rise scene (site.css §3g), dark, with no photo of its own: it rises over
 * the photo of the section before it (Content Band 002). The panel is tall (two screens), so the statement has
 * room to light up while the photos drift; the statement sits in the middle,
 * the three photos around it (composition geometry, in shares of the panel).
 * Each line of the statement starts dim and comes up to full as the page
 * scrolls (pattern.js sets --line-light per line, 0.18 → 1).
 * ========================================================================= */

/* Light by default: the panel's fill is the paper (the script then keeps it
   light, softening to the next section's white). `content-band-001--dark`
   leaves the rise scene's deep ink, which the script fades in and out. This
   is also what shows without the script, and in the editor. The text colour
   stays the light one either way: the statement is drawn in difference, so
   light text comes out dark on paper and light on ink. */
.rise-scene.content-band-001:not(.content-band-001--dark) .rise-scene__panel.rise-scene__panel {
	--rise-fill: var(--color-background);
}

/* The colour the panel fades to at its end (pattern.js): the next section's,
   so the two meet without an edge. The Space is paper, like this one. */
.content-band-001 {
	--content-band-001-exit: var(--color-background);
}

/* The panel is long: the statement is pinned in the middle of the screen
   for its whole length, and lights up line by line while the photos scroll
   past (and under) it, one after another. */
.content-band-001 .content-band-001__inner {
	/* Each photo's width, and where its top sits in the panel. All of them are
	   landscape (4:3, as the photos were shot), so height = width × 3/4. Like
	   the cover's photo they scale with the screen: a share of its width,
	   capped so a photo is never taller than 60% of the screen (width 80svh =
	   height 60svh), which keeps them in proportion on wide, short screens.
	   The widths vary a little so the column of photos doesn't feel
	   mechanical. The first comes up from the foot of the screen as the
	   statement slows (85svh); every next one starts at the foot of the
	   screen just as the one before it is half off the top, so the gap
	   between two tops is a screen plus half the earlier photo's height.
	   Composition geometry. */
	--w1: min(46vw, 80svh);
	--w2: min(42vw, 76svh);
	--w3: min(44vw, 78svh);
	--w4: min(40vw, 74svh);
	--h1: calc(var(--w1) * 3 / 4);
	--h2: calc(var(--w2) * 3 / 4);
	--h3: calc(var(--w3) * 3 / 4);
	--h4: calc(var(--w4) * 3 / 4);
	--t1: 85svh;
	--t2: calc(var(--t1) + 100svh + var(--h1) / 2);
	--t3: calc(var(--t2) + 100svh + var(--h2) / 2);
	--t4: calc(var(--t3) + 100svh + var(--h3) / 2);
	position: relative;
	/* The panel ends just after the last photo (a breathing space, no more):
	   the statement has finished by then, and a longer tail read as an empty
	   white screen before the next section. */
	/* Long enough for the last photo: the fourth's foot, or the third's when
	   there are three (below). */
	min-height: calc(var(--t4) + var(--h4) + var(--space-lg));
}

.content-band-001 .content-band-001__inner:not(:has(.content-band-001__fly--4)) {
	min-height: calc(var(--t3) + var(--h3) + var(--space-lg));
}

.content-band-001 .content-band-001__statement {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100svh;
	padding-block: var(--space-xl);
	text-align: center;
}

/* With pattern.js the statement is not pinned: it sits at the top of the
   panel and the script draws its path (slow near the middle, a crawl up). */
.content-band-001.is-drifting .content-band-001__statement {
	position: absolute;
	inset-inline: 0;
	top: 0;
	will-change: transform;
}

/* The statement is drawn in difference against what is under it: white on the
   ink, and inverted where it crosses a photo. On the statement's box, not the
   text: the box is a layer of its own (it moves), so text inside it could only
   blend with the box's own empty background. */
.content-band-001 .content-band-001__statement {
	mix-blend-mode: difference;
}

.content-band-001__statement > * {
	margin-block: 0;
}

.content-band-001__label {
	margin-bottom: var(--space-md) !important;
	color: color-mix(in srgb, var(--color-on-dark) 60%, transparent);
}

.content-band-001__text {
	max-width: 60rem;
	font-family: var(--font-display);
	font-size: var(--heading-2);
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.content-band-001__text .line {
	opacity: var(--line-light, 1);
	transition: opacity 0.2s linear;
}

/* The photos. Doubled class: the editor makes every block relative. */
.content-band-001 .content-band-001__fly.content-band-001__fly {
	position: absolute;
	/* Below the statement (z-index 2): the text passes over the photos. */
	z-index: 1;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius);
}

.content-band-001__fly img {
	display: block;
	width: 100%;
}

/* A tablet and down: the photos take most of the width, so they read as
   photos, not thumbnails, still capped by the screen's height. */
@media (max-width: 48rem) {
	.content-band-001 .content-band-001__inner {
		--w1: min(84vw, 80svh);
		--w2: min(80vw, 76svh);
		--w3: min(84vw, 78svh);
		--w4: min(80vw, 74svh);
	}

	/* On a phone the second heading size is at its floor (34px) and the
	   statement fills the screen; the fourth reads as a statement still. */
	.content-band-001 .content-band-001__text {
		font-size: var(--heading-4);
	}
}

/* A touch screen (no drift script there: a path set from the scroll is drawn
   a frame late under a swipe, and jumps): the statement is not held at all.
   It scrolls with the page, and the photos after it. */
@media (hover: none) and (pointer: coarse) {
	.content-band-001 .content-band-001__statement.content-band-001__statement {
		position: relative;
	}
}

/* Three photos (a fourth may be added), left and right in turn, one at a time. They reach out of the
   content column most of the way to the screen's edges: --edge is 60% of the
   margin beside the column (the panel's inner box is the column, so
   (100% - 100vw) / 2 is that margin, negative). The second pair sits a little
   in from the first. */
.content-band-001__inner {
	--edge: calc((100% - 100vw) / 2 * 0.6);
}

.content-band-001__fly--1 { left: var(--edge);  top: var(--t1); width: var(--w1); }
.content-band-001__fly--2 { right: var(--edge); top: var(--t2); width: var(--w2); }
.content-band-001__fly--3 { left: calc(var(--edge) + 5%);  top: var(--t3); width: var(--w3); }
.content-band-001__fly--4 { right: calc(var(--edge) + 5%); top: var(--t4); width: var(--w4); }