.ss-lead {
	background: var(--ss-night);
	color: var(--ss-ink);
}
.ss-lead.ss-block--paper { background: var(--ss-paper); color: var(--ss-paper-ink); }
.ss-lead__stage { position: relative; overflow: hidden; padding: clamp(70px, 10vw, 140px) var(--ss-gutter); }
/* Atmosphere: a photograph with the words, and a little light behind it — only there. A band with a photo
   stands on solid Night, which hides the page's glow; one soft glow in the section's colour is painted inside
   the photo's frame, under the picture. The photo is pinned with the words and fades out as the next section
   locks to the top of the screen. */
/* (three classes, to outweigh the kit's rule that opens every Night block to the page's glow)
   The ground is solid while the photo has the band, then dissolves with the scroll once the photo is mostly
   gone (--q past 0.7), so the page's own atmosphere fades in behind as the picture leaves — no seam. */
.ss-block.ss-lead.ss-lead--photo-behind,
.ss-block.ss-lead.ss-lead--photo-right {
	--ground: clamp(0, (var(--q, 0) - 0.7) / 0.3, 1);
	--night-a: rgb(13 15 19 / calc(1 - var(--ground)));
	background-color: transparent;
	/* no line at the band's foot: the ground thins away over the last 55svh, where the section coming up and
	   the photo's own foot already overlap it, so the page's glow is let in gradually from below */
	background-image: linear-gradient(to bottom, var(--night-a) 0%, var(--night-a) calc(100% - 55svh), rgb(13 15 19 / 0) 100%);
}
.ss-block.ss-lead.ss-lead--photo-behind.ss-block--paper,
.ss-block.ss-lead.ss-lead--photo-right.ss-block--paper { background-color: var(--ss-paper); }

.ss-lead__backdrop {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	/* fading from half way through the band, gone once the next section has locked to the top of the screen */
	--recede: clamp(0, (var(--q, 0) - 0.5) / 0.5, 1);
	opacity: calc(1 - var(--recede));
}
.ss-lead__backdrop::before {
	content: "";
	position: absolute;
	inset: -10%;
	background: radial-gradient(ellipse 44% 50% at 60% 45%, var(--ss-lead-glow, #61FEFB) 0%, transparent 70%);
	opacity: 0.16;
}
.ss-lead__backdrop img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: var(--ss-lead-backdrop, 0.14);
	transition: opacity 1200ms var(--ss-ease) 300ms; /* the entrance, a beat after the words begin */
}
.ss-lead.ss-block--paper .ss-lead__backdrop::before { opacity: 0.1; }

/* On the right, fading into the dark: the photo takes the right part of the band, masked so it dissolves
   into Night where the words are. Its frame reaches well below the pinned stage, so it runs on under the
   section coming up over it and only dies away softly near its own foot. */
.ss-lead--photo-right .ss-lead__stage { overflow: visible; }
.ss-lead--photo-right .ss-lead__backdrop {
	left: auto;
	width: 66%;
	bottom: -45svh; /* on past the stage, under the section coming up */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.55) 38%, #000 62%), linear-gradient(to bottom, #000 72%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.55) 38%, #000 62%), linear-gradient(to bottom, #000 72%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
/* the photo arrives a beat after the words begin; the figure itself never transitions, so its fade-out
   follows the scroll exactly */
.ss-lead--play.is-live:not(.is-played) .ss-lead__backdrop img { opacity: 0; }
@media (max-width: 900px) {
	.ss-lead--photo-right .ss-lead__backdrop {
		left: 0;
		width: 100%;
		-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, #000 40%, transparent 100%);
		mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, #000 40%, transparent 100%);
	}
}

/* The words: one column, left-aligned, no wider than 70% of the band. */
.ss-lead__in {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(16px, 2vw, 24px);
	max-width: min(70%, 1100px);
}
.ss-lead--rule .ss-lead__in::before {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin-bottom: 8px;
	background: var(--ss-cyan);
	transform-origin: left center;
}
.ss-lead.ss-block--paper.ss-lead--rule .ss-lead__in::before { background: var(--ss-teal); }
.ss-lead__eyebrow { color: var(--ss-cyan); }
.ss-lead.ss-block--paper .ss-lead__eyebrow { color: var(--ss-teal); }
.ss-lead__heading { max-width: 18ch; }
.ss-lead--xl .ss-lead__heading { max-width: 14ch; line-height: 0.8; }
.ss-lead__body { max-width: 56ch; color: var(--ss-body); }
.ss-lead.ss-block--paper .ss-lead__body { color: var(--ss-paper-body); }
.ss-lead--xl .ss-lead__body { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }
.ss-lead__btn { margin-top: 8px; }

/* Centred: a statement on its own, in the middle of the screen. */
.ss-lead--center .ss-lead__in { align-items: center; margin-inline: auto; text-align: center; }
.ss-lead--center .ss-lead__in::before { transform-origin: center; }
.ss-lead--center .ss-lead__heading { max-width: 22ch; }
@media (max-width: 700px) {
	.ss-lead__in { max-width: none; }
}

/* ── Reads in (the page only: view.js adds is-live) ──
   The band is --ss-lead-length screens tall; the words stay pinned while it passes, hanging from a fixed line
   64% of the way down the screen whatever their height, and the next section comes up 27% of a screen early,
   so the room between the words and the section arriving under them is always the same. */
/* (wider than a phone only: a phone gets an ordinary band whose lines rise in when reached — no pin, no
   overlap. Mark, 2026-10-09: "have the text just animate when you scroll to, for phone at least") */
@media (min-width: 701px) {
	.ss-lead--scroll.is-live,
	.ss-lead--play.is-live { min-height: calc(var(--ss-lead-length, 1.5) * 100svh); }
	.ss-lead--scroll.is-live .ss-lead__stage,
	.ss-lead--play.is-live .ss-lead__stage {
		position: sticky;
		top: 0;
		display: flex;
		align-items: flex-end;
		min-height: 100svh;
		padding-top: 0;
		padding-bottom: 36svh;
	}
	.ss-lead--scroll.is-live + .ss-block:not(.ss-lead),
	.ss-lead--play.is-live + .ss-block:not(.ss-lead) { position: relative; z-index: 1; margin-top: -27svh; }
}
/* Scrub mode: --p is the band's progress, 0 at its top, 1 at its end; the heading lines rise over the first
   part of that, the body after, the button last. */
.ss-lead--scroll.is-live .ss-lead__in::before,
.ss-lead--scroll.is-live .ss-lead__eyebrow {
	--pe: clamp(0, var(--p, 1) / 0.14, 1);
	opacity: var(--pe);
}
.ss-lead--scroll.is-live .ss-lead__in::before { transform: scaleX(var(--pe)); }
.ss-lead--scroll.is-live .ss-lead__heading { --ph: clamp(0, (var(--p, 1) - 0.06) / 0.46, 1); }
.ss-lead--scroll.is-live .ss-lead__body { --pb: clamp(0, (var(--p, 1) - 0.42) / 0.34, 1); }
.ss-lead--scroll.is-live .ss-lead__u {
	/* this line's own window inside its block's run: below and clear until its turn, then up into place */
	--k: clamp(0, var(--pw, 1) * var(--n, 1) - var(--w, 0), 1);
	display: inline-block;
	opacity: var(--k);
	transform: translateY(calc((1 - var(--k)) * 0.6em));
}
.ss-lead--scroll.is-live .ss-lead__heading .ss-lead__u { --pw: var(--ph); }
.ss-lead--scroll.is-live .ss-lead__body .ss-lead__u { --pw: var(--pb); display: block; }
.ss-lead--scroll.is-live .ss-lead__btn {
	--pt: clamp(0, (var(--p, 1) - 0.7) / 0.1, 1);
	opacity: var(--pt);
	transform: translateY(calc((1 - var(--pt)) * 12px));
}

/* Plays when reached (view.js adds is-played once the band reaches the top of the screen): the rule
   draws, the eyebrow fades up, then each line rises in turn, the body after the heading, the button last. */
.ss-lead--play.is-live .ss-lead__in::before { transform: scaleX(0); transition: transform 600ms var(--ss-ease); }
.ss-lead--play.is-live .ss-lead__eyebrow { opacity: 0; transition: opacity 500ms var(--ss-ease) 150ms; }
.ss-lead--play.is-live .ss-lead__u {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.6em);
	transition: opacity 650ms var(--ss-ease), transform 900ms var(--ss-ease);
	transition-delay: calc(var(--d0, 0ms) + var(--w, 0) * 150ms);
}
.ss-lead--play.is-live .ss-lead__heading .ss-lead__u { --d0: 250ms; }
.ss-lead--play.is-live .ss-lead__body .ss-lead__u { --d0: calc(250ms + var(--nh, 1) * 150ms + 150ms); display: block; }
.ss-lead--play.is-live .ss-lead__btn {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 500ms var(--ss-ease), transform 700ms var(--ss-ease);
	transition-delay: calc(250ms + var(--nh, 1) * 150ms + 700ms);
}
.ss-lead--play.is-live.is-played .ss-lead__in::before { transform: scaleX(1); }
.ss-lead--play.is-live.is-played .ss-lead__eyebrow,
.ss-lead--play.is-live.is-played .ss-lead__u,
.ss-lead--play.is-live.is-played .ss-lead__btn { opacity: 1; transform: none; }

/* Still, reduced motion, the editor: a plain band, everything bright. */
@media (prefers-reduced-motion: reduce) {
	.ss-lead--scroll.is-live, .ss-lead--play.is-live { min-height: 0; }
	.ss-lead--scroll.is-live .ss-lead__stage, .ss-lead--play.is-live .ss-lead__stage { position: static; min-height: 0; padding: clamp(70px, 10vw, 140px) var(--ss-gutter); }
	.ss-lead--scroll.is-live + .ss-block:not(.ss-lead), .ss-lead--play.is-live + .ss-block:not(.ss-lead) { margin-top: 0; }
	.ss-lead--scroll.is-live .ss-lead__in::before, .ss-lead--play.is-live .ss-lead__in::before,
	.ss-lead--scroll.is-live .ss-lead__eyebrow, .ss-lead--play.is-live .ss-lead__eyebrow,
	.ss-lead--scroll.is-live .ss-lead__u, .ss-lead--play.is-live .ss-lead__u,
	.ss-lead--scroll.is-live .ss-lead__btn, .ss-lead--play.is-live .ss-lead__btn { opacity: 1; transform: none; transition: none; }
	.ss-lead--play.is-live .ss-lead__backdrop img { transition: none; }
}

/* ── Narrow screens, last so they win on equal specificity ──
   Below 900px the right-hand photo spans the band and stays inside it (no reach past its foot). On a phone the
   band is not pinned and nothing comes up under it, so the ground stays solid too — the wheel hanging over the
   switcher was what looked wrong (Mark, 2026-10-09: "doesn't scroll properly on phone"). */
@media (max-width: 900px) {
	.ss-lead--photo-right .ss-lead__backdrop,
	.ss-lead--photo-behind .ss-lead__backdrop { inset: 0; width: 100%; }
	.ss-lead--photo-right .ss-lead__stage { overflow: hidden; }
}
@media (max-width: 700px) {
	.ss-block.ss-lead.ss-lead--photo-behind,
	.ss-block.ss-lead.ss-lead--photo-right { background-image: none; background-color: var(--night-a); }
}