/* =========================================================
   The Springers: site blocks
   Ported from springers-mockup/css/styles.css (option 1) and
   v2/css/v2.css (band cards, PROPOSED). Uses the theme's colour, type and
   spacing tokens (--cream, --ink, --gutter…), defined in the theme.
   ========================================================= */

/* "Proposed — awaiting approval" label above unapproved work */
.proposed-label { margin-bottom: 18px; }

/* =========================================================
   Hero (video treatment PROPOSED; logo treatment approved)
   ========================================================= */
.hero {
	background: var(--ink);
	color: var(--cream);
}

.hero__media {
	--hero-h: clamp(360px, min(calc(100svh - 180px), 62vw), 820px);
	position: relative;
	height: var(--hero-h);
	overflow: hidden;
	background: var(--ink);
}

/* Still and video share one frame; the video's poster is the same image */
.hero__still,
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-pos, 50% 22%);
	filter: grayscale(1) contrast(1.08);
}
.hero__video { z-index: 1; }
/* The scrapbook treatment carries its own pink accents (the footage is already
   black and white), so only the contrast lift applies to it. */
.hero--colour-accents .hero__video { filter: contrast(1.08); }

/* PROPOSED: modest desktop increase using the space the slimmer header
   frees (87 → 61 px). Header + hero + buttons bar still fit on screen:
   at 1440 × 900 the hero is 750 px (was 720), at 1366 × 768 it is 618
   (was 588). The height is tied to the screen height, so the bar stays
   in view on shorter screens too. */
@media (min-width: 761px) {
	.hero--modest .hero__media { --hero-h: clamp(360px, min(calc(100svh - 150px), 62vw), 860px); }
}

/* PROPOSED: taller desktop hero, about 22% more than the approved height
   (720 → 878 px at 1440 × 900). The 16:9 footage then fills the full height
   and loses a little at the sides instead, so it is never stretched; the
   side-to-side crop has its own focal point. Phones keep the 4:3 frame. */
@media (min-width: 761px) {
	.hero--tall .hero__media { --hero-h: clamp(440px, min(calc((100svh - 180px) * 1.22), 76vw), 1000px); }
	.hero--tall .hero__still,
	.hero--tall .hero__video { object-position: var(--hero-pos-tall, 50% 50%); }
}
.hero.is-still .hero__video { display: none; } /* reduced motion: still image only */

/* Logo: cream with a 1 px ink keyline and a hard rose offset (no blur) */
.hero__wordmark {
	position: absolute;
	z-index: 2;
	bottom: 5%;
	left: var(--gutter);
	width: min(67vw, calc(var(--hero-h) * 1.5));
	margin: 0;
	filter:
		drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink))
		drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink))
		drop-shadow(6px 6px 0 var(--rose));
}
.hero__wordmark img { width: 100%; }

/* Pause control: only revealed once a video file has loaded */
.hero__toggle {
	position: absolute;
	z-index: 3;
	right: var(--gutter);
	bottom: 18px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(243, 234, 216, .7);
	background: rgba(22, 20, 19, .55);
	color: var(--cream);
	cursor: pointer;
}
.hero__toggle:hover { background: var(--ink); border-color: var(--cream); }
.hero__toggle-icon {
	display: block;
	box-sizing: content-box;
	width: 0;
	height: 0;
	margin-left: 3px;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent currentColor;
}
.hero__toggle[data-state="playing"] .hero__toggle-icon {
	width: 4px;
	height: 14px;
	margin-left: 0;
	border-width: 0 4px;
	border-color: currentColor;
}

.hero__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 32px;
	padding: 18px var(--gutter);
}
.hero__intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.hero__tagline { margin: 0; color: var(--cream); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero__handle { display: inline-block; padding-block: 4px; text-decoration: none; color: var(--rose-light); } /* at least 24 px tall to tap */
.hero__handle:hover { color: var(--cream); }
.hero__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}

/* =========================================================
   Band members: option 1 photo layout (approved option 1 build)
   ========================================================= */
.members {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 2vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.member__photo {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--ink);
}
.member__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.1);
}
.member figcaption {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 2px solid var(--ink);
}
.member__name {
	font-family: var(--f-block);
	font-size: clamp(28px, 3vw, 46px);
	line-height: 1;
	text-transform: uppercase;
}
.member__role,
.member-card__role {
	font-size: 12px;
	font-weight: 800;
	font-stretch: 85%;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--rose-deep);
}

/* =========================================================
   Band members: line-drawn cards with slide-down slips (v2, PROPOSED)
   ========================================================= */
.member-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2.6vw, 40px);
	align-items: start; /* an open slip lengthens only its own column */
	margin: 0;
	padding: 0;
	list-style: none;
}
.member-card { position: relative; }
.member-card__btn {
	position: relative;
	z-index: 2; /* the slip emerges from behind this */
	display: block;
	width: 100%;
	padding: 0;
	border: 2px solid var(--ink);
	background: var(--cream);
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform .2s, box-shadow .2s;
}
.member-card__btn:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--rose); }
.member-card__btn[aria-expanded="true"] { box-shadow: 6px 6px 0 var(--ink); }
.member-card__art { display: block; aspect-ratio: 1; padding: 8% 10% 0; overflow: hidden; }
.drawing { display: block; width: 100%; height: 100%; }
.drawing path,
.drawing circle,
.drawing rect {
	fill: none;
	stroke: var(--ink);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.drawing .pupil { fill: var(--ink); stroke: none; }

/* Small, brief movements on hover or keyboard focus, never for
   reduced-motion visitors:
   Danny: mouth opens and closes (eyes still).
   Lola: eyes glance (as before).
   Ollie: glasses dip a touch (eyes still). */
.drawing .mouth,
.drawing .glasses { transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
	.member-card__btn:hover .drawing--danny .mouth,
	.member-card__btn:focus-visible .drawing--danny .mouth { animation: springers-sing .6s ease-in-out 4; }
	.member-card__btn:hover .drawing--lola .pupil,
	.member-card__btn:focus-visible .drawing--lola .pupil { animation: springers-glance 1.6s ease-in-out 2; }
	.member-card__btn:hover .drawing--ollie .glasses,
	.member-card__btn:focus-visible .drawing--ollie .glasses { animation: springers-glasses 1.1s ease-in-out 2; }
}
@keyframes springers-glance {
	0%, 100% { transform: translate(0, 0); }
	35% { transform: translate(3px, -1px); }
	70% { transform: translate(-3px, 0); }
}
@keyframes springers-sing {
	0%, 100% { transform: scaleY(1); }
	50% { transform: scaleY(.3); }
}
@keyframes springers-glasses {
	0%, 100% { transform: translateY(0); }
	45% { transform: translateY(2.5px); }
}

.member-card__foot {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 2px 12px;
	padding: 12px 16px 14px;
	border-top: 2px solid var(--ink);
}
.member-card__name { font-family: var(--f-block); font-size: clamp(28px, 3vw, 44px); line-height: 1; text-transform: uppercase; }
.member-card__role { grid-row: 2; }
/* Expand control: a round + badge (× when the bio is open). It turns pink
   whenever the card is hovered or focused, so the whole card reads as one
   button. Always visible, so it works on touchscreens too. */
.member-card__sign {
	grid-row: 1 / 3;
	grid-column: 2;
	align-self: center;
	position: relative;
	width: 38px;
	height: 38px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--cream);
	transition: background-color .15s, transform .25s;
}
.member-card__sign::before,
.member-card__sign::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); border-radius: 1px; }
.member-card__sign::before { width: 16px; height: 2.5px; margin: -1.25px 0 0 -8px; }
.member-card__sign::after { width: 2.5px; height: 16px; margin: -8px 0 0 -1.25px; }
.member-card__btn:hover .member-card__sign,
.member-card__btn:focus-visible .member-card__sign { background: var(--rose); }
.member-card__btn[aria-expanded="true"] .member-card__sign { transform: rotate(45deg); }

/* The slip grows the layout (no overlap) and slides down from behind the
   card. It is exactly the card's width: same column, same 2 px ink sides. */
.slip { display: grid; grid-template-rows: 0fr; margin: 0; transition: grid-template-rows .45s cubic-bezier(.3, .7, .2, 1); }
.slip[hidden] { display: grid !important; visibility: hidden; } /* kept in layout at zero height so it can animate */
.slip.is-open { grid-template-rows: 1fr; }
.slip__inner { min-height: 0; overflow: hidden; }
.slip__paper {
	margin-top: -2px;
	padding: 18px 18px 22px;
	background: #fbf7ee;
	border: 2px solid var(--ink);
	border-top: 0;
	transform: translateY(-100%);
	transition: transform .45s cubic-bezier(.3, .7, .2, 1);
}
.slip.is-open .slip__paper { transform: none; }
.slip__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	margin-bottom: 14px;
	object-fit: cover;
	filter: grayscale(1) contrast(1.1);
}
.slip__bio p + p { margin-top: .8em; }

/* =========================================================
   YouTube: click to load (PROPOSED featured performance)
   ========================================================= */
.yt { margin: 0; }
.yt__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ink);
}
.yt__frame > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.1);
}
.yt__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.yt__play {
	position: absolute;
	left: clamp(12px, 2vw, 24px);
	bottom: clamp(12px, 2vw, 24px);
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.6vw, 22px);
	padding: 0 clamp(16px, 2vw, 28px) 0 0;
	border: 0;
	background: var(--cream);
	color: var(--ink);
	cursor: pointer;
	font: inherit;
}
.yt__icon {
	display: grid;
	place-items: center;
	width: clamp(60px, 8vw, 112px);
	aspect-ratio: 1;
	background: var(--rose);
}
.yt__icon::after {
	content: "";
	margin-left: 12%;
	border-style: solid;
	border-width: clamp(11px, 1.4vw, 20px) 0 clamp(11px, 1.4vw, 20px) clamp(18px, 2.4vw, 33px);
	border-color: transparent transparent transparent var(--cream);
}
.yt__label {
	font-family: var(--f-block);
	font-size: clamp(22px, 3vw, 46px);
	text-transform: uppercase;
	line-height: 1;
}
.yt__play:hover .yt__icon { background: var(--ink); }

.yt__placeholder {
	position: absolute;
	left: clamp(12px, 2vw, 24px);
	bottom: clamp(12px, 2vw, 24px);
	max-width: min(440px, calc(100% - 24px));
	padding: clamp(14px, 2vw, 22px);
	background: var(--cream);
	color: var(--ink);
	border: 2px dashed var(--ink);
}
.yt__placeholder strong {
	display: block;
	margin-bottom: 6px;
	font-family: var(--f-block);
	font-weight: 400;
	font-size: clamp(24px, 2.8vw, 40px);
	line-height: 1;
	text-transform: uppercase;
}
.yt__placeholder span {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--teal);
}
.yt__more { margin-top: 18px; }

.details-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	padding: 12px 0;
	border-bottom: 1px solid currentColor;
	font-size: 12px;
	font-stretch: 85%;
	text-transform: uppercase;
	letter-spacing: .1em;
}
.details-row b { font-weight: 800; margin-right: .5em; }
/* Under the TV: larger, so song, venue and length read comfortably */
.tvframe .details-row { gap: 10px 36px; font-size: 16px; letter-spacing: .08em; line-height: 1.35; }
.tvframe .details-row > span { min-width: 0; overflow-wrap: anywhere; }

/* =========================================================
   Jukebox and TV (PROPOSED)
   The whole song list sits in a stylised jukebox (left), the Play / Stop
   controls between, the TV on the right. Monochrome, line-drawn, like the
   band portraits; rose marks the selected song. Rounded corners are a
   deliberate exception to the square-corner rule (jukebox and TV shapes).
   ========================================================= */
.vr__row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) auto minmax(0, 7fr);
	align-items: end;               /* jukebox base lines up with the rule under the song details */
	gap: clamp(20px, 2.6vw, 40px);
}
.vr__row > .tvframe { align-self: end; }
.vr__row > .vr__controls { align-self: center; }

/* The jukebox: a tall arched cabinet with a glowing tube following the arch,
   a domed title panel, the song list as its selector, and a lattice speaker. */
.jukebox { position: relative; max-width: 440px; width: 100%; justify-self: center; }
.jukebox__cabinet {
	--arch: 210px;
	position: relative;
	padding: 34px 34px 0;
	border: 3px solid var(--ink);
	border-radius: var(--arch) var(--arch) 16px 16px / 170px 170px 16px 16px;
	background: var(--ink);
}
.jukebox__cabinet::before { /* the lit tube, inset from the cabinet edge */
	content: "";
	position: absolute;
	inset: 10px 10px -3px;
	border: 10px solid var(--rose);
	border-bottom: 0;
	border-radius: calc(var(--arch) - 10px) calc(var(--arch) - 10px) 8px 8px / 160px 160px 8px 8px;
	box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--ink), inset 0 0 0 5px rgba(243, 234, 216, .35);
	pointer-events: none;
}
.jukebox__dome { /* arched glass with a sunburst behind the title */
	position: relative;
	display: grid;
	place-items: end center;
	height: clamp(110px, 10vw, 140px);
	margin-bottom: 12px;
	padding-bottom: 14px;
	border: 2px solid var(--ink);
	border-radius: 50% 50% 4px 4px / 78% 78% 4px 4px;
	background:
		repeating-conic-gradient(from -90deg at 50% 100%, rgba(22, 20, 19, .16) 0 4deg, transparent 4deg 12deg),
		var(--cream);
	overflow: hidden;
}
.jukebox__head {
	margin: 0;
	padding: 5px 14px 6px;
	background: var(--ink);
	color: var(--cream);
	font-family: var(--f-block);
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .04em;
	box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--ink);
}
.jukebox__list {
	position: relative;
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 8px;
	list-style: none;
	border: 2px solid var(--cream);
}
/* Long lists (more than seven videos) scroll inside the cabinet, about seven
   rows high, with a fade at the bottom while there's more below. */
.jukebox__list--scroll {
	max-height: 420px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--rose) var(--ink);
	-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent);
	mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent);
}
.jukebox__list--scroll.is-end { -webkit-mask-image: none; mask-image: none; }
.jukebox__song {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	grid-template-areas: "no title" "no meta";
	column-gap: 10px;
	align-items: center;
	min-height: 46px;
	padding: 6px 12px 6px 6px;
	border: 2px solid var(--cream);
	background: var(--cream);
	color: var(--ink);
	cursor: pointer;
	transition: background-color .15s;
}
.jukebox__song:hover { background: #fbf7ee; }
.jukebox__song[aria-selected="true"] { background: var(--rose-text-bg); border-color: var(--rose-text-bg); }
.jukebox__song:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
.jukebox__no {
	grid-area: no;
	display: grid;
	place-items: center;
	align-self: stretch;
	border: 2px solid var(--ink);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
}
.jukebox__song[aria-selected="true"] .jukebox__no { background: var(--ink); color: var(--cream); }
.jukebox__title { grid-area: title; font-family: var(--f-block); font-size: 19px; line-height: 1.05; text-transform: uppercase; }
.jukebox__title i { font-family: var(--f-text); font-style: normal; font-size: 12px; font-weight: 600; text-transform: none; }
.jukebox__meta { grid-area: meta; margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.jukebox__grille { /* lattice speaker with a star medallion */
	position: relative;
	height: clamp(84px, 8vw, 110px);
	margin: 14px -2px 0;
	border: 2px solid var(--cream);
	border-bottom: 0;
	border-radius: 60px 60px 0 0 / 40px 40px 0 0;
	background:
		repeating-linear-gradient(55deg, transparent 0 13px, rgba(243, 234, 216, .7) 13px 15px),
		repeating-linear-gradient(-55deg, transparent 0 13px, rgba(243, 234, 216, .7) 13px 15px),
		var(--ink);
}
.jukebox__star {
	position: absolute;
	left: 50%;
	bottom: 10px;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--cream);
}
.jukebox__star::after {
	content: "";
	position: absolute;
	inset: 6px;
	background: var(--rose);
	clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.jukebox__feet { display: flex; justify-content: space-between; padding: 0 6px; }
.jukebox__feet span { width: 26%; height: 16px; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 6px 6px; background: var(--ink); }

/* Play / Stop: chunky fifties push buttons */
.vr__controls { display: grid; gap: 16px; justify-items: stretch; }
.jb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 168px;
	min-height: 64px;
	padding: 0 22px;
	border: 3px solid var(--ink);
	border-radius: 18px;
	background: linear-gradient(180deg, #fffaf0 0 38%, var(--cream) 38%);
	color: var(--ink);
	font-family: var(--f-block);
	font-size: 24px;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	box-shadow: inset 0 -5px 0 rgba(22, 20, 19, .14), 0 6px 0 var(--ink);
	cursor: pointer;
	transition: transform .08s, box-shadow .08s;
}
.jb-btn--play { background: linear-gradient(180deg, #cf7a89 0 38%, var(--rose-text-bg) 38%); }
.jb-btn__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--ink);
	color: var(--cream);
	font-family: var(--f-text);
	font-size: 13px;
}
.jb-btn:hover { filter: brightness(1.04); }
.jb-btn:active { transform: translateY(4px); box-shadow: inset 0 -3px 0 rgba(22, 20, 19, .14), 0 2px 0 var(--ink); }
.jb-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 5px; }
.vr.is-playing .jb-btn--play { transform: translateY(4px); box-shadow: inset 0 -3px 0 rgba(22, 20, 19, .14), 0 2px 0 var(--ink); }
.tv-idle .play-badge { min-height: 48px; }

/* Restrained retro TV: rounded screen in an ink bezel, two knobs, a grille */
.tvframe { margin: 0; }
.tvframe__screen {
	padding: clamp(10px, 1.4vw, 18px);
	background: var(--ink);
	border-radius: 28px;
}
.tvframe__screen video,
.tvframe__screen .tv-yt,
.tvframe__screen .tv-yt__player,
.tvframe__empty {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	background: #000;
	object-fit: cover;
}
.tvframe__empty { display: grid; place-items: center; margin: 0; }
/* A YouTube video on the TV: its thumbnail and a clear play button until pressed */
.tv-yt { position: relative; padding: 0; border: 0; overflow: hidden; cursor: pointer; }
.tv-yt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tv-yt .play-badge { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); min-height: 44px; padding: 0 16px 0 10px; font-size: 13px; }
.tv-yt:hover .play-badge, .tv-yt:focus-visible .play-badge { background: var(--cream); }
.tv-yt:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.tv-yt__player { border: 0; }
.tvframe__base {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin: 8px 22px 0;
}
.knob { width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 50%; }
.grille { width: 46px; height: 10px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 6px); }
.tvframe .details-row { margin-top: 10px; }


/* =========================================================
   Contact: "Book the band" (rose section, compact)
   Heading left; booking email first and largest; Instagram and
   YouTube/streaming side by side beneath it.
   ========================================================= */
/* Height follows the content: no fixed or minimum height. Padding is about
   60 px on desktop (56 px at 1220 px wide, 60 px from 1300 px) and 36 px on
   phones. ".section.about" outranks the theme's general .section padding. */
.section.about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: 24px clamp(40px, 6vw, 96px);
	padding: clamp(36px, 4.6vw, 60px) var(--gutter);
	background: var(--rose-text-bg);
	color: var(--ink);
}
/* Line the top of the heading's capitals up with the top of the
   "Bookings & enquiries" label: 2 px rule + 14 px padding + the label's own
   space above its capitals (about 4 px). Anton's capitals start at the top
   of its line box at this line height. */
.about__head { margin-top: 20px; }
.about__head .eyebrow { margin-bottom: clamp(10px, 1.4vw, 18px); }
.about__title {
	font-family: var(--f-block);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--display-small);
	line-height: .86;
	text-transform: uppercase;
	color: var(--cream);
}
.section.about .about__intro { max-width: 44ch; margin: clamp(16px, 2vw, 24px) 0 0; font-size: 18px; font-weight: 500; line-height: 1.45; }
.contact-list {
	margin: 0;
	border-bottom: 1px solid var(--ink);
}
.contact-list > div {
	padding: 12px 0;
	border-top: 1px solid var(--ink);
}
.contact-list__primary { padding: 14px 0 16px !important; border-top-width: 2px !important; }
.contact-list__social ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.contact-list__social a { position: relative; display: inline-block; padding: .15em 0; }
.contact-list__social a::after { content: ""; position: absolute; inset: -10px -8px; }
.contact-list dt {
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
}
.contact-list dd { margin: 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.contact-list__primary dd {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	font-stretch: 90%;
	line-height: 1.2;
}
.contact-list__primary .ph { font-size: 12px; }
.contact-list a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.contact-list a:hover { color: var(--cream); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
	.section.about { grid-template-columns: 1fr; }
	.about__head { margin-top: 0; }
	.section.about .about__intro { font-size: 16px; }
}

@media (max-width: 760px) {
	/* Mobile hero: 4:3 frame, logo inside the image over the lower edge */
	.hero__media {
		height: auto;
		aspect-ratio: 4 / 3;
	}
	.hero__wordmark {
		bottom: 5%;
		left: 50%;
		width: 84%;
		transform: translateX(-50%);
		filter:
			drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink))
			drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink))
			drop-shadow(4px 4px 0 var(--rose));
	}
	.hero__still,
	.hero__video { object-position: var(--hero-pos-mobile, var(--hero-pos, 52% 20%)); }
	.hero__toggle { top: 10px; bottom: auto; right: 10px; }
	.hero__bar { padding: 12px var(--gutter) 16px; }
	.hero__handle { display: none; }
	.hero__intro { width: 100%; justify-content: center; }
	.hero__tagline { font-size: 11px; letter-spacing: .1em; text-align: center; }
	.hero__links {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		width: 100%;
		gap: 8px;
		margin: 0;
	}
	.hero__links .btn { width: 100%; padding: .95em .6em; font-size: 12px; letter-spacing: .07em; }

	/* Option 1 members: stacked rows, photo left, name and role right */
	.members { grid-template-columns: 1fr; gap: 0; }
	.member figure {
		display: grid;
		grid-template-columns: 44% 1fr;
		align-items: end;
		gap: 16px;
		padding: 14px 0;
		border-top: 2px solid var(--ink);
	}
	.member:last-child figure { border-bottom: 2px solid var(--ink); }
	.member figcaption { margin: 0; padding: 0 0 4px; border: 0; }

	/* v2 cards: one column, centred */
	.member-cards { grid-template-columns: 1fr; gap: 20px; }
	.member-card { max-width: 340px; width: 100%; justify-self: center; }
	.member-card__name { font-size: 30px; }

	.yt__frame { aspect-ratio: 4 / 5; }

	/* Jukebox, controls, TV: stacked closely in that order */
	.vr__row { grid-template-columns: 1fr; gap: 16px; }
	.jukebox { max-width: none; }
	.jukebox__cabinet { --arch: 50%; padding: 30px 26px 0; }
	.jukebox__song { min-height: 52px; }
	.vr__controls { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
	.jb-btn { min-width: 0; min-height: 60px; padding: 0 12px; font-size: 21px; gap: 8px; }
	.jb-btn__icon { width: 30px; height: 30px; }
	.tvframe__screen { border-radius: 20px; }
	.tvframe__screen video,
	.tvframe__screen .tv-yt,
	.tvframe__screen .tv-yt__player,
	.tvframe__empty { border-radius: 12px; }

}

@media (prefers-reduced-motion: reduce) {
	.jukebox__song,
	.jb-btn,
	.member-card__btn,
	.member-card__sign,
	.slip,
	.slip__paper { transition: none; }
}

/* =========================================================
   Music page
   ========================================================= */

/* Small still record beside the page heading (decorative) */
.record-mark { flex: none; width: clamp(42px, 9vw, 140px); aspect-ratio: 1; }   /* a little under the heading's cap height */
.record-mark svg { display: block; width: 100%; height: 100%; }
.page-head__title-row { display: flex; align-items: center; gap: clamp(16px, 3vw, 44px); }
.page-head__title-row .display { margin: 0; }

/* Live performances grid */
.performances__grid,
.page-content .performances__grid,
.page-content .records {
	margin: 0;
	padding: 0;
}
.performances__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 44px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.yt-card { margin: 0; }
.yt-card .yt__frame { aspect-ratio: 16 / 9; }
.yt-card--portrait .yt__frame { aspect-ratio: 9 / 16; }
.yt-card .yt__frame > img { display: block; }
.yt__play--card {
	left: 12px;
	bottom: 12px;            /* corner, clear of text burned into the cover images */
	padding: 0;
	background: none;
}
.yt__play--card .yt__icon { width: clamp(56px, 5vw, 76px); box-shadow: 4px 4px 0 var(--ink); transition: background-color .15s; }
.yt__play--card:hover .yt__icon { background: var(--ink); }
.yt__play--card:focus-visible { outline: none; }
.yt__play--card:focus-visible .yt__icon { outline: 3px solid var(--cream); outline-offset: 3px; }
.yt-card__caption {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 2px solid var(--ink);
}
.yt-card__title { font-family: var(--f-block); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; text-transform: uppercase; }
.yt-card__meta { font-size: 12px; font-weight: 800; font-stretch: 85%; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-deep); }

/* Recordings (dark): only rendered when recordings are published */
.records {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.record-item__sleeve { aspect-ratio: 1; overflow: hidden; margin-bottom: 18px; background: var(--ink-soft); }
.record-item__sleeve img { width: 100%; height: 100%; object-fit: cover; display: block; }
.record-item__type { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-light); }
.record-item__title { margin: 6px 0 10px; font-family: var(--f-block); font-weight: 400; font-size: clamp(28px, 2.8vw, 40px); line-height: 1; text-transform: uppercase; }
.record-item__note { margin-bottom: 12px; color: rgba(243, 234, 216, .8); }
.record-item__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 10px 0 0; list-style: none; border-top: 1px solid rgba(243, 234, 216, .35); }
.record-item__links a { color: var(--cream); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.record-item__links a:hover { color: var(--rose-light); }

.springers-empty-note { padding: 14px 16px; border: 1px dashed currentColor; font-size: 13px; }

@media (max-width: 900px) {
	.performances__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.performances__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
	.performances__grid > li { width: 100%; max-width: 320px; }
	.records { grid-template-columns: minmax(0, 1fr); }
	.performances .section__head--split { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
	.yt__play--card .yt__icon { transition: none; }
}

/* =========================================================
   Photos page
   Credit, then layout A (clean gallery: option 2's arrangement in option 1's
   monochrome treatment) or, in review mode, layout B (darkroom drying lines,
   exploratory). One shared viewer.
   ========================================================= */
.photos-page { padding-bottom: var(--section-y); }

/* Photographer credit, in the page heading: text, then the small portrait */
.page-head.page-head--photos > .photo-credit { align-self: center; }
.photo-credit {
	display: flex;
	align-items: center;
	gap: 20px;
	text-align: right;
}
.photo-credit p { margin: 0; }
.photo-credit__portrait {
	flex: none;
	width: 96px;
	height: 96px;
	border: 2px solid var(--ink);
	overflow: hidden;
}
.photo-credit__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.photo-credit__name {
	font-family: var(--f-block);
	font-size: clamp(28px, 3.2vw, 46px);
	line-height: 1;
	text-transform: uppercase;
}
.photo-credit__line { margin-top: 6px !important; font-size: 16px; font-weight: 600; }

.photos-compare > .compare-switch { margin: clamp(28px, 4vw, 48px) var(--gutter) 0; }
.photos-compare > .compare__version > .proposed-label { margin: 0 0 18px; }

/* Set headings (shared) */
.photo-set .gallery__head,
.darkroom .gallery__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px 24px;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 2px solid currentColor;
}
.gallery__title {
	margin: 0;
	font-family: var(--f-block);
	font-weight: 400;
	font-size: clamp(32px, 4vw, 60px);
	line-height: 1;
	text-transform: uppercase;
}
.gallery__meta { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* Photo buttons (open the viewer) */
.photo-open {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: var(--ink);
	cursor: zoom-in;
}
.photo-open img { display: block; width: 100%; filter: grayscale(1) contrast(1.1); }

/* ---------- Layout A: clean gallery ---------- */
.photo-set { padding-bottom: 0; }
.page-content .mosaic { margin: 0; padding: 0; }
.mosaic {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: clamp(140px, 15vw, 230px);
	grid-auto-flow: dense;
	gap: clamp(8px, 1vw, 14px);
	list-style: none;
}
.mosaic__item { min-width: 0; }
.mosaic__item--wide { grid-column: span 6; grid-row: span 2; }
.mosaic__item--tall { grid-column: span 3; grid-row: span 2; }
.mosaic__item--square { grid-column: span 3; }
.mosaic figure { position: relative; height: 100%; margin: 0; overflow: hidden; border: 2px solid var(--ink); }
.mosaic .photo-open img { height: 100%; object-fit: cover; transition: transform .3s; }
.mosaic .photo-open:hover img { transform: scale(1.03); }
/* Approved focus ring (teal, outside the tile): drawn on the tile frame,
   because the frame crops anything drawn by the photo button itself */
.mosaic .photo-open:focus-visible { outline: none; }
.mosaic figure:has(.photo-open:focus-visible) { outline: 3px solid var(--teal); outline-offset: 3px; overflow: visible; }
.mosaic figure:has(.photo-open:focus-visible) .photo-open { overflow: hidden; }
.mosaic figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: 100%;
	padding: 4px 8px;
	background: var(--ink);
	color: var(--cream);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	pointer-events: none;
}

/* ---------- Layout B: darkroom drying lines (exploratory) ---------- */
.photos-layout--darkroom {
	margin-top: clamp(28px, 4vw, 48px);
	margin-bottom: calc(-1 * var(--section-y));
	padding: clamp(28px, 4vw, 56px) var(--gutter) var(--section-y);
	overflow: hidden;
	background:
		radial-gradient(ellipse 70% 40% at 50% 0, rgba(186, 90, 107, .16), transparent 70%),
		var(--ink);
	color: var(--cream);
}
.photos-layout--darkroom :focus-visible { outline-color: var(--cream); }
.photos-layout--darkroom .ph { color: var(--rose-light); }
.darkroom + .darkroom { margin-top: clamp(56px, 7vw, 104px); }
.darkroom .gallery__head { border-bottom-color: rgba(243, 234, 216, .45); margin-bottom: 8px; }

.darkroom__lines {
	--line-gap: clamp(28px, 3vw, 48px);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 36px var(--line-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.strip { position: relative; padding-top: 34px; }
/* The string: each strip draws its share (plus half the gap either side),
   so a row of strips reads as one continuous line at any column count. */
.strip::before {
	content: "";
	position: absolute;
	top: 14px;
	left: calc(var(--line-gap) / -2 - 1px);
	right: calc(var(--line-gap) / -2 - 1px);
	height: 1.5px;
	background: rgba(243, 234, 216, .55);
}
.strip:last-child::before { right: -100vw; }
/* The film hangs from the string: clip and strip move together */
.strip__film { position: relative; transform-origin: 50% -20px; }
.strip__clip {
	position: absolute;
	z-index: 1;
	top: -27px;
	left: 50%;
	width: 18px;
	height: 40px;
	margin-left: -9px;
	border: 2px solid var(--ink);
	border-radius: 2px;
	background: linear-gradient(#b8ada0, #8f8579);
}
.strip__frames {
	position: relative;
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 22px 30px;
	list-style: none;
	background: #0c0b0b;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(243, 234, 216, .08);
}
/* Sprocket holes along both edges */
.strip__frames::before,
.strip__frames::after {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	width: 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Crect width='10' height='12' rx='2.5' fill='%23F3EAD8'/%3E%3C/svg%3E") 0 0 / 10px 20px repeat-y;
	opacity: .9;
}
.strip__frames::before { left: 10px; }
.strip__frames::after { right: 10px; }
.strip__frame { margin: 0; }
.strip__frame .photo-open { height: auto; border-radius: 6px; overflow: hidden; background: #000; }
.strip__frame .photo-open img { height: auto; transition: filter .2s; }
.strip__frame .photo-open:hover img { filter: grayscale(1) contrast(1.15) brightness(1.08); }
.strip__caption {
	display: block;
	margin-top: 6px;
	color: rgba(243, 234, 216, .8);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
/* Slight, still variation: no swaying */
.strip--0 .strip__film { transform: rotate(-.5deg); }
.strip--1 .strip__film { transform: rotate(.4deg); }
.strip--2 .strip__film { transform: rotate(-.25deg); }
.strip--3 .strip__film { transform: rotate(.6deg); }
/* Slightly different lengths of hanger, so the strips don't line up exactly */
.strip--1 { padding-top: 40px; }
.strip--3 { padding-top: 44px; }
.strip--1 .strip__clip { top: -33px; height: 46px; }
.strip--3 .strip__clip { top: -37px; height: 50px; }

/* ---------- Viewer ---------- */
html.has-lightbox { overflow: hidden; }
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 64px;
	grid-template-rows: 64px minmax(0, 1fr) auto;
	align-items: center;
	background: rgba(12, 10, 10, .95);
	color: var(--cream);
}
.lightbox[hidden] { display: none; }
.lightbox :focus-visible { outline-color: var(--cream); }
.lightbox__figure {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 0;
	margin: 0;
}
.lightbox__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100svh - 150px);
	object-fit: contain;
	filter: grayscale(1) contrast(1.08);
}
.lightbox__caption { margin-top: 10px; max-width: 60ch; font-size: 14px; font-weight: 600; text-align: center; }
.lightbox__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-width: 48px;
	min-height: 48px;
	padding: 0 14px;
	border: 2px solid var(--cream);
	background: transparent;
	color: var(--cream);
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}
.lightbox__btn:hover { background: var(--cream); color: var(--ink); }
.lightbox__btn span { font-size: 20px; line-height: 1; }
.lightbox__btn[hidden] { display: none; }
.lightbox__prev { grid-column: 1; grid-row: 2; justify-self: center; padding: 0; }
.lightbox__next { grid-column: 3; grid-row: 2; justify-self: center; padding: 0; }
.lightbox__close { grid-column: 2 / 4; grid-row: 1; justify-self: end; margin-right: 12px; }
.lightbox__count { grid-column: 1 / 3; grid-row: 1; justify-self: start; margin: 0 0 0 16px; pointer-events: none; font-size: 12px; font-weight: 800; letter-spacing: .12em; }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1000px) {
	.darkroom__lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.photo-credit { justify-content: space-between; gap: 14px; margin-top: 14px !important; text-align: left; }
	.photo-credit__portrait { width: 72px; height: 72px; }
	.photo-credit__name { font-size: 28px; }
	.photo-credit__line { font-size: 15px; }

	.mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; }
	.mosaic__item--wide { grid-column: span 2; grid-row: span 1; }
	.mosaic__item--tall { grid-column: span 1; grid-row: span 2; }
	.mosaic__item--square { grid-column: span 1; }

	/* One strip per line, full width, so photos stay large */
	.darkroom__lines { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.strip { max-width: 440px; width: 100%; justify-self: center; }
	.strip::before { left: -100vw; right: -100vw; }
	.strip__frames { padding: 18px 26px; gap: 12px; }
	.strip__frames::before { left: 8px; }
	.strip__frames::after { right: 8px; }
	.strip--1 .strip__film, .strip--3 .strip__film { transform: rotate(.3deg); }

	.lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: 60px minmax(0, 1fr) auto; }
	.lightbox__figure { grid-column: 1 / -1; padding: 0 8px; }
	.lightbox__img { max-height: calc(100svh - 190px); }
	.lightbox__prev, .lightbox__next { grid-row: 3; margin: 12px 0 calc(16px + env(safe-area-inset-bottom)); }
	.lightbox__prev { grid-column: 1; }
	.lightbox__next { grid-column: 2; }
	.lightbox__close { grid-column: 2; }
	.lightbox__count { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.mosaic .photo-open img { transition: none; }
}

/* =========================================================
   Archive page
   One collection, two layouts: A clean archive (option 1's Archive page) and,
   in review mode, B scrapbook (exploratory). One shared viewer.
   ========================================================= */
:root {
	/* Handwritten details (scrapbook only, proposed). System handwriting faces
	   until a licensed web font is approved. */
	--f-hand: "Bradley Hand", "Segoe Print", "Noteworthy", "Comic Neue", cursive;
}
.archive-compare > .compare-switch { margin: clamp(28px, 4vw, 48px) var(--gutter) 0; }
.archive-compare > .review-note { margin: 18px var(--gutter) 0; }

/* Play indicator: always visible, never on hover only */
.play-badge {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 12px 0 8px;
	background: var(--rose-text-bg);
	color: var(--ink);
	font-family: var(--f-text);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	line-height: 1;
	text-transform: uppercase;
	pointer-events: none;
}
.play-badge__icon {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ink);
}
.play-badge__icon::after {
	content: "";
	margin-left: 3px;
	border-left: 9px solid var(--cream);
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}
.play-badge__len { font-weight: 600; letter-spacing: .04em; }

.archive-open {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: inherit;
	cursor: zoom-in;
}
.archive-open[data-kind="video"],
.archive-open[data-kind="youtube"] { cursor: pointer; }
.archive-open img { display: block; width: 100%; height: auto; }
.archive-open:hover .play-badge { background: var(--cream); }

/* ---------- A: Clean archive ---------- */
.archive-clean .rows,
.page-content .archive-clean .rows,
.page-content .archive-grid { margin: 0; padding: 0; list-style: none; }
.rows li {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr 1.4fr;
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid var(--ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.rows li:last-child { border-bottom: 1px solid var(--ink); }
.archive-clean .gallery__head { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.archive-grid { display: grid; gap: clamp(16px, 2vw, 28px); align-items: start; }
.archive-grid--poster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.archive-grid--video { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.archive-grid--photo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.archive-card { min-width: 0; }
.archive-card__media { position: relative; display: block; overflow: hidden; border: 2px solid var(--ink); background: var(--ink); }
.archive-card--photo .archive-card__media { aspect-ratio: 1; }
.archive-card--photo img { height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .3s; }
.archive-card--photo .archive-open:hover img { transform: scale(1.03); }
.archive-card--portrait .archive-card__media { aspect-ratio: 9 / 16; }
.archive-card--landscape { grid-column: span 2; }
.archive-card--landscape .archive-card__media { aspect-ratio: 16 / 9; }
.archive-card--portrait img,
.archive-card--landscape img { height: 100%; object-fit: cover; }
.archive-card .archive-open:focus-visible { outline: none; }
.archive-card .archive-open:focus-visible .archive-card__media { outline: 3px solid var(--teal); outline-offset: 3px; }
.archive-card__caption { margin: 10px 0 0; line-height: 1.3; }
.archive-card__title { display: block; font-size: 15px; font-weight: 700; }
.archive-card__meta { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.archive-grid--photo .archive-card__caption { display: none; }

/* ---------- B: Scrapbook (exploratory) ---------- */
.archive-layout--scrapbook {
	margin-top: clamp(28px, 4vw, 48px);
	padding: clamp(32px, 4vw, 64px) var(--gutter) var(--section-y);
	overflow: hidden;
	background: #f8f3e8;
	border-top: 1px solid rgba(22, 20, 19, .2);
}
.archive-layout--scrapbook > .proposed-label { margin: 0 0 24px; }
.scrapbook {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-flow: row dense;
	column-gap: clamp(4px, .8vw, 12px);
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* With JavaScript, pieces are placed one by one into the lowest free spot
   (archive.js), so columns fill evenly; each reaches slightly into its
   neighbours' space so edges overlap. Without it, the grid above is used. */
.scrapbook { --cols: 12; --bleed: 12px; }
.scrapbook.is-packed { display: block; position: relative; }
.scrapbook.is-packed > .scrap { position: absolute; margin: 0; }
/* Only the visible paper takes clicks, never a piece's transparent margin;
   names sit above neighbouring pieces, drawings never block anything. */
.scrapbook > .scrap { pointer-events: none; }
.scrapbook > .scrap > * { pointer-events: auto; }
.scrapbook > .scrap--drawing, .scrapbook > .scrap--drawing * { pointer-events: none; }
.scrapbook > .scrap--name { z-index: 3; }
.page-content .scrapbook { margin: 0; padding: 0; }
.scrap {
	position: relative;
	min-width: 0;
	padding: 14px 4px 6px;
	transform: rotate(var(--tilt, 0deg));
}
.scrap { grid-column: span var(--span, 3); }
.scrap--s { --span: 2; }
.scrap--m { --span: 3; }
.scrap--l { --span: 4; }
.scrap--xl { --span: 6; }
.scrap--name, .scrap--drawing { --span: 2; }
.scrap--nudge-up { z-index: 2; transform: translateY(-26px) rotate(var(--tilt, 0deg)); }
.scrap--nudge-left { z-index: 2; transform: translateX(-28px) rotate(var(--tilt, 0deg)); }
.scrap--nudge-right { z-index: 2; transform: translateX(28px) rotate(var(--tilt, 0deg)); }

/* Paper: a print border, or straight onto the board */
.scrap__paper { position: relative; }
.scrap--edge-print .scrap__paper { padding: clamp(6px, .7vw, 10px); background: #fffdf8; border: 1px solid rgba(22, 20, 19, .18); }
.scrap--edge-torn .scrap__paper {
	padding: clamp(6px, .7vw, 10px) clamp(6px, .7vw, 10px) 18px;
	background: #fffdf8;
	clip-path: polygon(0 0, 100% 0, 100% 97%, 94% 99%, 87% 96.5%, 80% 99.5%, 72% 97%, 63% 99%, 55% 96.5%, 46% 99.5%, 38% 97%, 29% 99%, 20% 96.5%, 12% 99.5%, 5% 97%, 0 99%);
}
.scrap--edge-none .scrap__paper { padding: 0; }
.scrap__media { position: relative; display: block; }
.scrap--portrait .scrap__media img,
.scrap--landscape .scrap__media img { width: 100%; }
.scrap .archive-open:focus-visible { outline: none; }
.scrap .archive-open:focus-visible .scrap__media,
.scrap .filmstrip__frame:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

/* Tape: translucent pink sellotape */
.scrap--tape-top .scrap__paper::before,
.scrap--tape-corners .scrap__paper::before,
.scrap--tape-corners .scrap__paper::after,
.scrap--strip.scrap--tape-top::before {
	content: "";
	position: absolute;
	z-index: 1;
	width: 84px;
	height: 24px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .12)),
		rgba(231, 164, 176, .72);
	border-left: 1px solid rgba(186, 90, 107, .35);
	border-right: 1px solid rgba(186, 90, 107, .35);
	pointer-events: none;
}
.scrap--tape-top .scrap__paper::before { top: -13px; left: 50%; margin-left: -42px; transform: rotate(-3deg); }
.scrap--tape-corners .scrap__paper::before { top: -6px; left: -24px; width: 70px; transform: rotate(-38deg); }
.scrap--tape-corners .scrap__paper::after { top: -6px; right: -24px; width: 70px; transform: rotate(38deg); }
.scrap--strip.scrap--tape-top::before { top: 4px; left: 50%; margin-left: -42px; transform: rotate(2deg); }

/* Posters: tears (a ragged corner missing, with the white paper core showing
   along the edge) and rips (a split running in from an edge). Each is placed
   over the photograph, away from titles, dates, prices and QR codes. */
.scrap--poster .scrap__media { display: block; }
/* A thin shadow traces the cut edges so tears and rips read on the pale board */
.scrap--poster[class*="scrap--wear-"] { filter: drop-shadow(1px 2px 1.5px rgba(22, 20, 19, .35)); }
.scrap--wear-tear-tl .scrap__paper { clip-path: polygon(16% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 13%, 2.5% 11.6%, 4.2% 12.4%, 5.8% 9.2%, 7.8% 9.6%, 9% 6.4%, 11% 5.6%, 12.2% 3%, 14.4% 2.4%); }
.scrap--wear-tear-tl .scrap__media { clip-path: polygon(19.08% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 15.66%, 3.69% 14.06%, 5.63% 14.98%, 7.45% 11.33%, 9.73% 11.78%, 11.1% 8.14%, 13.38% 7.22%, 14.75% 4.26%, 17.26% 3.58%); }
.scrap--wear-tear-tr .scrap__paper { clip-path: polygon(84% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 13%, 97.5% 11.6%, 95.8% 12.4%, 94.2% 9.2%, 92.2% 9.6%, 91% 6.4%, 89% 5.6%, 87.8% 3%, 85.6% 2.4%); }
.scrap--wear-tear-tr .scrap__media { clip-path: polygon(80.92% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 15.66%, 96.31% 14.06%, 94.37% 14.98%, 92.55% 11.33%, 90.27% 11.78%, 88.9% 8.14%, 86.62% 7.22%, 85.25% 4.26%, 82.74% 3.58%); }
.scrap--wear-tear-bl .scrap__paper { clip-path: polygon(16% 100%, 100% 100%, 100% 0%, 0% 0%, 0% 87%, 2.5% 88.4%, 4.2% 87.6%, 5.8% 90.8%, 7.8% 90.4%, 9% 93.6%, 11% 94.4%, 12.2% 97%, 14.4% 97.6%); }
.scrap--wear-tear-bl .scrap__media { clip-path: polygon(19.08% 100%, 100% 100%, 100% 0%, 0% 0%, 0% 84.34%, 3.69% 85.94%, 5.63% 85.02%, 7.45% 88.67%, 9.73% 88.22%, 11.1% 91.86%, 13.38% 92.78%, 14.75% 95.74%, 17.26% 96.42%); }
.scrap--wear-tear-br .scrap__paper { clip-path: polygon(84% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 87%, 97.5% 88.4%, 95.8% 87.6%, 94.2% 90.8%, 92.2% 90.4%, 91% 93.6%, 89% 94.4%, 87.8% 97%, 85.6% 97.6%); }
.scrap--wear-tear-br .scrap__media { clip-path: polygon(80.92% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 84.34%, 96.31% 85.94%, 94.37% 85.02%, 92.55% 88.67%, 90.27% 88.22%, 88.9% 91.86%, 86.62% 92.78%, 85.25% 95.74%, 82.74% 96.42%); }
.scrap--wear-rip-left .scrap__paper { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 74.4%, 9% 72.42%, 15.6% 73.3%, 22.2% 70.97%, 30% 70%, 21% 68.9%, 13.8% 67.27%, 6.6% 68.15%, 0% 65.6%); }
.scrap--wear-rip-left .scrap__media { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 77.26%, 9.9% 73.99%, 17.16% 75.44%, 24.42% 71.6%, 33% 70%, 23.1% 68.19%, 15.18% 65.5%, 7.26% 66.95%, 0% 62.74%); }
.scrap--wear-rip-right .scrap__paper { clip-path: polygon(100% 0%, 100% 37.6%, 94.28% 40.15%, 88.04% 39.27%, 81.8% 40.9%, 74% 42%, 80.76% 42.97%, 86.48% 45.3%, 92.2% 44.42%, 100% 46.4%, 100% 100%, 0% 100%, 0% 0%); }
.scrap--wear-rip-right .scrap__media { clip-path: polygon(100% 0%, 100% 34.74%, 93.62% 38.95%, 86.66% 37.5%, 79.7% 40.19%, 71% 42%, 78.54% 43.6%, 84.92% 47.45%, 91.3% 45.99%, 100% 49.26%, 100% 100%, 0% 100%, 0% 0%); }
.scrap--wear-rip-top .scrap__paper { clip-path: polygon(0% 0%, 28.8% 0%, 31.24% 4.18%, 30.4% 8.74%, 31.95% 13.3%, 33% 19%, 33.92% 14.06%, 36.15% 9.88%, 35.31% 5.7%, 37.2% 0%, 100% 0%, 100% 100%, 0% 100%); }
.scrap--wear-rip-top .scrap__media { clip-path: polygon(0% 0%, 26.07% 0%, 30.09% 4.84%, 28.7% 10.12%, 31.27% 15.4%, 33% 22%, 34.52% 16.28%, 38.2% 11.44%, 36.81% 6.6%, 39.93% 0%, 100% 0%, 100% 100%, 0% 100%); }

/* Hand-drawn accent: pink crayon strokes over one detail of a photo (drawn on top, not blended) */
.scrap__roto { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Coffee mug ring, partly off the corner */
.scrap__stain {
	position: absolute;
	z-index: 1;
	width: 54%;
	aspect-ratio: 1;
	pointer-events: none;
	mix-blend-mode: multiply;
	background:
		radial-gradient(circle at 54% 46%, transparent 0 62%, rgba(104, 64, 30, .38) 64.5%, rgba(104, 64, 30, .12) 66.5%, transparent 68.5%),
		radial-gradient(circle at 50% 50%, transparent 0 59%, rgba(104, 64, 30, .2) 60.5%, rgba(96, 58, 26, .72) 63.8%, rgba(104, 64, 30, .3) 66%, transparent 68.5%),
		radial-gradient(circle at 44% 56%, rgba(140, 92, 46, .22) 0 57%, rgba(140, 92, 46, .08) 59%, transparent 61%),
		radial-gradient(circle at 80% 78%, rgba(104, 64, 30, .35) 0 3%, transparent 3.6%);
	transform: rotate(-12deg);
}
.scrap__stain--tl { top: -12%; left: -14%; }
.scrap__stain--tr { top: -26%; right: -24%; }
.scrap__stain--bl { bottom: -12%; left: -14%; }
.scrap__stain--br { bottom: -12%; right: -14%; }

/* Handwritten labels */
.scrap__label {
	margin: 8px 4px 0;
	font-family: var(--f-hand);
	font-size: 17px;
	line-height: 1.2;
	text-align: center;
	color: var(--ink);
}

/* Film strips */
.filmstrip {
	position: relative;
	display: flex;
	gap: 8px;
	padding: 18px 10px;
	background: #0c0b0b;
}
.filmstrip--v { flex-direction: column; padding: 10px 24px; }
.filmstrip::before,
.filmstrip::after {
	content: "";
	position: absolute;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Crect width='11' height='7' y='1.5' rx='2' fill='%23F3EAD8'/%3E%3C/svg%3E") 0 0 / 20px 10px repeat-x;
	opacity: .9;
}
.filmstrip--h::before, .filmstrip--h::after { left: 6px; right: 6px; height: 10px; }
.filmstrip--h::before { top: 4px; }
.filmstrip--h::after { bottom: 4px; }
.filmstrip--v::before, .filmstrip--v::after {
	top: 6px; bottom: 6px; width: 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Crect width='7' height='11' x='1.5' rx='2' fill='%23F3EAD8'/%3E%3C/svg%3E") 0 0 / 10px 20px repeat-y;
}
.filmstrip--v::before { left: 7px; }
.filmstrip--v::after { right: 7px; }
.filmstrip__frame { flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 4px; }
.filmstrip--v .filmstrip__frame { flex: none; }
.filmstrip__frame img { aspect-ratio: 3 / 2; height: auto; object-fit: cover; object-position: 50% 30%; }

/* Band member names: handwritten, and clearly a button */
.scrap--name { align-self: center; padding-top: 6px; }
.scrap-name {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 4px 6px;
	border: 0;
	background: none;
	color: var(--ink);
	cursor: pointer;
	text-align: left;
}
.scrap-name__name {
	font-family: var(--f-hand);
	font-size: clamp(34px, 3.2vw, 48px);
	font-weight: 700;
	line-height: 1;
	text-decoration: underline wavy var(--rose) 2px;
	text-underline-offset: 8px;
}
.scrap-name__role {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.scrap-name__plus {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--rose);
	color: var(--ink);
	font-size: 16px;
	line-height: 1;
}
.scrap-name:hover .scrap-name__plus { background: var(--ink); color: var(--cream); }

/* Line drawings (from the homepage), used sparingly */
.scrap--drawing { padding: 0 8px; }
.scrap--drawing .drawing { height: auto; aspect-ratio: 240 / 300; }

/* Post-it note in the approved pink, dark lettering, with a curled corner */
.scrap--note { --span: 3; --tilt: -3deg; padding: 18px 10px 24px; }
.postit {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: 22px 26px 30px;
	background: linear-gradient(170deg, #c56778 0%, var(--rose) 45%);
	color: var(--ink);
	font-family: var(--f-hand);
	font-size: clamp(30px, 2.8vw, 42px);
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	/* bottom-right corner cut away for the curl */
	clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
	transition: transform .15s;
}
/* The curl: the corner lifting up, its paler underside showing */
.postit::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 20%;
	height: 20%;
	background: linear-gradient(135deg, #e3a1ad 0%, #d98c9a 45%, #b45366 50%, transparent 51%);
	transform-origin: 100% 100%;
}
/* The shadow sits on the wrapper so it follows the note's clipped shape */
.scrap--note { filter: drop-shadow(2px 8px 6px rgba(22, 20, 19, .25)); }
.archive-page .scrapbook a.postit,
.archive-page .scrapbook a.postit:hover { color: var(--ink); }
.postit:hover { transform: translateY(-3px) rotate(-.5deg); }

/* ---------- Viewer (shares the Photos page viewer's frame) ---------- */
.archive-viewer { grid-template-rows: 64px minmax(0, 1fr) auto; }
.archive-viewer__stage { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; height: 100%; min-height: 0; }
.archive-viewer__caption { grid-column: 2; grid-row: 3; margin: 10px auto 18px; }
.archive-viewer.is-member .archive-viewer__caption { display: none; }
.archive-viewer .lightbox__img { max-height: calc(100svh - 150px); filter: none; }
.archive-viewer__video { display: block; max-width: 100%; max-height: calc(100svh - 150px); width: auto; height: auto; background: #000; }
.archive-viewer__yt { width: min(100%, 1100px); aspect-ratio: 16 / 9; }
.archive-viewer__yt.is-portrait { width: auto; height: min(calc(100svh - 150px), 900px); aspect-ratio: 9 / 16; max-width: 100%; }
.archive-viewer__yt iframe { display: block; width: 100%; height: 100%; border: 0; }
.member-view {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(18px, 3vw, 40px);
	align-items: center;
	width: min(100%, 860px);
	padding: clamp(16px, 2.5vw, 32px);
	background: var(--cream);
	color: var(--ink);
}
.member-view__photo { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
.member-view__name { margin: 0; font-family: var(--f-block); font-size: clamp(40px, 5vw, 72px); line-height: 1; text-transform: uppercase; }
.member-view__role { margin: 8px 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-deep); }
.member-view__bio p { margin: 0 0 .8em; }
.member-view :focus-visible { outline-color: var(--teal); }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1000px) {
	.archive-grid--video { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.scrapbook { grid-template-columns: repeat(6, minmax(0, 1fr)); --cols: 6; --bleed: 6px; }
	.scrap--s, .scrap--name, .scrap--drawing { --span: 2; }
	.scrap--m, .scrap--l, .scrap--note { --span: 3; }
	.scrap--xl { --span: 6; }
}
@media (max-width: 760px) {
	.rows li { grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 11px; }
	.archive-grid--poster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.archive-grid--video { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.archive-grid--photo { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* Scrapbook: a readable vertical composition, little overlap */
	.scrapbook { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 12px; --cols: 4; --bleed: 4px; }
	.scrap--s, .scrap--m, .scrap--name, .scrap--drawing, .scrap--note { --span: 2; }
	.scrap--l, .scrap--xl, .scrap--strip { --span: 4; }
	.scrap { transform: rotate(calc(var(--tilt, 0deg) * .5)); }
	.scrap--nudge-up, .scrap--nudge-left, .scrap--nudge-right { transform: rotate(calc(var(--tilt, 0deg) * .5)); }
	.scrap-name__name { font-size: 34px; }
	.postit { font-size: 28px; padding: 16px 18px 24px; }

	.archive-viewer { grid-template-rows: 60px minmax(0, 1fr) auto auto; }
	.archive-viewer__stage { grid-column: 1 / -1; padding: 0 8px; }
	.archive-viewer__caption { grid-column: 1 / -1; grid-row: 3; margin: 8px 16px 0; }
	.archive-viewer .lightbox__prev, .archive-viewer .lightbox__next { grid-row: 4; }
	.archive-viewer .lightbox__img, .archive-viewer__video { max-height: calc(100svh - 210px); }
	.archive-viewer__yt.is-portrait { height: calc(100svh - 210px); }
	.member-view { grid-template-columns: 1fr; max-height: calc(100svh - 90px); overflow: auto; }
	.member-view__photo { max-height: 42svh; }
}
@media (prefers-reduced-motion: reduce) {
	.archive-card--photo img, .postit { transition: none; }
}

/* =========================================================
   Homepage "About us" scrapbook (PROPOSED)
   The Archive scrapbook's materials as one continuous composition:
   opening (heading + band photo, film strip), Danny, Lola, Ollie, then the
   whole band. The section is the grid; the band-members wrapper uses
   display: contents so its pieces sit beside the core heading and intro.
   ========================================================= */
.band.band--scrapbook {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(10px, 1.4vw, 22px);
	row-gap: clamp(14px, 2vw, 30px);
	align-items: start;
	overflow: hidden;
}
.band--scrapbook > .band__head { grid-column: 1 / 7; grid-row: 1; display: block; margin: 0; padding-top: clamp(8px, 2vw, 28px); }
.band--scrapbook > .band__head .band__title { margin: 0 0 18px; }
.band--scrapbook > .band__head .band__lede { max-width: 46ch; }
.band--scrapbook .band-members--scrapbook { display: contents; }
.band--scrapbook .about-piece { min-width: 0; margin: 0; }
.band--scrapbook .about-piece img { display: block; width: 100%; height: auto; }
.band--scrapbook .scrap { transform: rotate(var(--tilt, 0deg)); }

/* Placement (desktop): a zigzag that reads Danny → Lola → Ollie; pieces
   overlap their neighbours, but the Post-its always sit on top. */
.band--scrapbook .about-piece--band        { grid-column: 7 / 13; grid-row: 1 / 3; z-index: 1; }
.band--scrapbook .about-piece--spool       { grid-column: 1 / 8;  grid-row: 2; z-index: 2; margin-top: 4px; }
.band--scrapbook .about-piece--danny-who   { grid-column: 1 / 4;  grid-row: 3; margin-top: 10px; z-index: 2; }
.band--scrapbook .about-piece--danny-note  { grid-column: 4 / 7;  grid-row: 3; margin: 40px 0 calc(11vw + 8px) 0; z-index: 4; }   /* room under the note for the guitar */
.band--scrapbook .about-piece--danny-poster { grid-column: 7 / 11; grid-row: 3; margin-top: -70px; z-index: 1; }
.band--scrapbook .about-piece--danny-film  { grid-column: 11 / 13; grid-row: 3; margin-top: 30px; z-index: 2; }
.band--scrapbook .about-piece--danny-extra-1 { grid-column: 1 / 4; grid-row: 4; margin-top: -20px; z-index: 2; }
.band--scrapbook .about-piece--danny-extra-2 { grid-column: 4 / 7; grid-row: 4; margin: 50px 0 0 -10px; z-index: 1; }
/* Lola: mirrored, reading right to left */
.band--scrapbook .about-piece--lola-who    { grid-column: 10 / 13; grid-row: 4; margin-top: 60px; z-index: 2; }
.band--scrapbook .about-piece--lola-note   { grid-column: 7 / 10; grid-row: 4; margin: 110px 0 calc(14.5vw + 8px) 10px; z-index: 4; }   /* room for the drum kit */
.band--scrapbook .about-piece--lola-film   { grid-column: 4 / 7;  grid-row: 5; margin-top: 0; z-index: 3; }
.band--scrapbook .about-piece--lola-poster { grid-column: 1 / 4;  grid-row: 5; margin-top: 40px; z-index: 2; }
.band--scrapbook .about-piece--lola-extra-1 { grid-column: 7 / 11; grid-row: 5; margin-top: 10px; z-index: 2; }
.band--scrapbook .about-piece--lola-extra-2 { grid-column: 9 / 13; grid-row: 5; margin-top: 190px; z-index: 1; }
/* Ollie */
.band--scrapbook .about-piece--ollie-who   { grid-column: 1 / 4;  grid-row: 6; margin-top: 10px; z-index: 2; }
.band--scrapbook .about-piece--ollie-note  { grid-column: 4 / 7;  grid-row: 6; margin: 40px 0 calc(10.5vw + 48px) 0; z-index: 4; }   /* room for the bass (which sits 40px up) */
.band--scrapbook .about-piece--ollie-film  { grid-column: 7 / 9;  grid-row: 6; margin-top: 20px; z-index: 2; }
.band--scrapbook .about-piece--ollie-photo { grid-column: 9 / 12; grid-row: 6; margin-top: -10px; z-index: 1; }
.band--scrapbook .about-piece--ollie-extra { grid-column: 10 / 13; grid-row: 6; margin-top: 170px; z-index: 2; }
.band--scrapbook .about-piece--instruments { grid-column: 2 / 8; grid-row: 7; margin-top: -10px; z-index: 2; }
/* The whole band again */
.band--scrapbook .about-piece--together    { grid-column: 2 / 10; grid-row: 8; margin-top: 0; z-index: 3; }
.band--scrapbook .about-piece--book        { grid-column: 10 / 13; grid-row: 8; align-self: center; margin: 0 0 0 10px; --tilt: -4deg; transform: rotate(var(--tilt)); z-index: 4; }
.band--scrapbook .about-piece--rehearsal   { grid-column: 3 / 12; grid-row: 9; margin-top: -30px; z-index: 4; }
/* "View more photos" under About us (the homepage's link to the Photos page) */
.band--scrapbook > .band__more { grid-column: 1 / -1; grid-row: 10; justify-content: center; margin: clamp(8px, 1.5vw, 20px) 0 0; }

/* Who: line drawing (static), handwritten name, role */
.about-who { text-align: center; }
.about-who__drawing { width: min(100%, 292px); margin: 0 auto; }   /* about the size they were on the original band cards */
.about-who__drawing .drawing { height: auto; aspect-ratio: 240 / 300; }
.about-who__name {
	margin: 6px 0 0;
	font-family: var(--f-hand);
	font-size: clamp(36px, 3.4vw, 50px);
	font-weight: 700;
	line-height: 1;
	text-decoration: underline wavy var(--rose) 2px;
	text-underline-offset: 8px;
}
.about-who__role { margin: 14px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* Post-it biographies: the Archive Post-it (same font and pink), square,
   growing taller if the text needs it. Each is its own scrap of paper. */
.about-note { filter: drop-shadow(2px 8px 6px rgba(22, 20, 19, .25)); transform: rotate(var(--tilt, 0deg)); }
.postit.postit--bio {
	position: relative;
	display: block;
	aspect-ratio: 1;               /* square; grows past it if the bio is longer */
	padding: 30px 28px 36px;
	font-size: clamp(22px, 1.8vw, 25px);
	line-height: 1.3;
	text-align: left;
	clip-path: none;
}
.postit--bio p { position: relative; z-index: 1; margin: 0 0 .55em; }
.postit--bio p:last-child { margin-bottom: 0; }
.postit.postit--bio::after { display: none; }
.postit.postit--bio:hover { transform: none; }

/* Danny: straight top; the bottom-left corner ripped away, unevenly */
.postit.postit--danny {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 41% 100%, 38.5% calc(100% - 3px), 36% calc(100% - 1px), 32% calc(100% - 7px), 29.5% calc(100% - 5px), 25% calc(100% - 13px),
		22% calc(100% - 11px), 19.5% calc(100% - 19px), 15% calc(100% - 17px), 12.5% calc(100% - 27px), 9% calc(100% - 25px), 7% calc(100% - 34px), 4% calc(100% - 37px), 2.5% calc(100% - 46px), 0 calc(100% - 52px));
	padding-bottom: 64px;          /* text stays clear of the 52px torn corner */
}
/* Lola: a few spilt drops of something, dried onto the paper */
/* No overflow clipping here: it stopped the note growing to fit its text (the drops sit inside anyway) */
.postit.postit--lola { overflow: visible; }
.postit.postit--lola::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 78% 16%, rgba(255, 236, 236, .35) 0 2.5%, transparent 2.8%),
		radial-gradient(circle at 80% 18%, rgba(110, 40, 52, .28) 0 5.2%, rgba(110, 40, 52, .12) 5.8%, transparent 6.4%),
		radial-gradient(ellipse 3.6% 2.6% at 69% 27%, rgba(110, 40, 52, .26) 0 92%, transparent 100%),
		radial-gradient(circle at 88% 30%, rgba(110, 40, 52, .24) 0 1.9%, transparent 2.3%),
		radial-gradient(circle at 74% 36%, rgba(110, 40, 52, .2) 0 1.2%, transparent 1.6%),
		radial-gradient(ellipse 2.4% 1.6% at 62% 12%, rgba(110, 40, 52, .2) 0 90%, transparent 100%);
}
/* Ollie: folded bottom-right corner and a crease across the paper */
.postit.postit--ollie {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 46px) 100%, 0 100%);
	background:
		linear-gradient(122deg, transparent 0 46%, rgba(255, 240, 236, .28) 47.5%, rgba(22, 20, 19, .10) 49.2%, transparent 51%),
		linear-gradient(170deg, #c56778 0%, var(--rose) 45%);
}
.postit.postit--ollie::after {
	display: block;
	width: 46px;
	height: 46px;
	background: linear-gradient(135deg, #e3a1ad 0%, #d98c9a 45%, #b45366 50%, transparent 51%);
}
.band--scrapbook .about-piece--book .postit { color: var(--ink); }

/* The whole-band photo: one corner ripped away, unevenly, with a sliver of
   white paper showing along the rip */
.band--scrapbook .about-piece--together .scrap__paper { clip-path: polygon(0 0, 100% 0, 100% 57%, 99.79% 58.54%, 98.61% 59.54%, 98.52% 61.15%, 97.21% 62.08%, 97.02% 63.63%, 97.09% 65.33%, 95.79% 66.26%, 94.88% 67.41%, 95.5% 69.42%, 93.9% 70.18%, 93.6% 71.67%, 94.18% 73.66%, 93.16% 74.75%, 92.15% 75.84%, 92.64% 77.77%, 92.17% 79.17%, 91.23% 80.31%, 90.79% 81.72%, 90.58% 83.26%, 88.57% 83.8%, 88% 85.14%, 87.18% 86.34%, 86.59% 87.67%, 85.9% 88.94%, 85.5% 90.38%, 83.4% 90.86%, 82.47% 92%, 82.03% 93.41%, 80.88% 94.43%, 79.1% 95.1%, 79.52% 96.99%, 77.22% 97.37%, 76.4% 98.57%, 76% 100%, 0 100%); }
.band--scrapbook .about-piece--together .scrap__media { clip-path: polygon(0 0, 100% 0, 99.1% 55.65%, 98.89% 57.19%, 97.71% 58.19%, 97.62% 59.8%, 96.31% 60.73%, 96.12% 62.28%, 96.19% 63.98%, 94.89% 64.91%, 93.98% 66.06%, 94.6% 68.07%, 93% 68.83%, 92.7% 70.32%, 93.28% 72.31%, 92.26% 73.4%, 91.25% 74.49%, 91.74% 76.42%, 91.27% 77.82%, 90.33% 78.96%, 89.89% 80.37%, 89.68% 81.91%, 87.67% 82.45%, 87.1% 83.79%, 86.28% 84.99%, 85.69% 86.32%, 85% 87.59%, 84.6% 89.03%, 82.5% 89.51%, 81.57% 90.65%, 81.13% 92.06%, 79.98% 93.08%, 78.2% 93.75%, 78.62% 95.64%, 76.32% 96.02%, 75.5% 97.22%, 75.1% 98.65%, 0 100%); }

/* Instrument doodles: loose sketches in each member's group, beside their
   Post-it rather than under the portrait (the portrait stays the main drawing) */
.about-doodle { transform: rotate(var(--tilt, 0deg)); pointer-events: none; }
.about-doodle .drawing { height: auto; }
.band--scrapbook .about-piece--danny-doodle { grid-column: 4 / 7; grid-row: 3; align-self: end; margin: 0 0 6px -20px; --tilt: -9deg; }
.band--scrapbook .about-piece--lola-doodle  { grid-column: 7 / 10; grid-row: 4; align-self: end; margin: 0 20px 4px 30px; --tilt: 4deg; }
.band--scrapbook .about-piece--ollie-doodle { grid-column: 3 / 7; grid-row: 6; align-self: end; margin: 0 0 40px 20px; --tilt: 7deg; }   /* the bottom of Ollie's row is always below his note */

/* Phones: one column in reading order; little rotation, no overlap */
@media (max-width: 760px) {
	.band.band--scrapbook { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
	.band--scrapbook > .band__head,
	.band--scrapbook .about-piece { grid-column: 1 !important; grid-row: auto !important; margin: 0 !important; }
	.band--scrapbook > .band__more { grid-row: auto; justify-content: flex-start; margin: 8px 0 0; }
	.band--scrapbook .scrap,
	.band--scrapbook .about-note { transform: rotate(calc(var(--tilt, 0deg) * .5)); }
	.band--scrapbook .about-piece--band,
	.band--scrapbook .about-piece--spool,
	.band--scrapbook .about-piece--together { width: 100%; }
	.band--scrapbook .about-who { display: grid; grid-template-columns: 54% 1fr; align-items: center; gap: 4px 14px; text-align: left; }
	.band--scrapbook .about-who__drawing { grid-row: 1 / 3; width: 100%; }
	.band--scrapbook .about-doodle { width: 62%; }
	.band--scrapbook .about-piece--danny-doodle, .band--scrapbook .about-piece--ollie-doodle { justify-self: start; }
	.band--scrapbook .about-piece--lola-doodle { width: 48%; justify-self: end; }
	.band--scrapbook .about-who__name { align-self: end; font-size: 40px; }
	.band--scrapbook .about-who__role { align-self: start; margin-top: 10px; }
	.band--scrapbook .about-note { width: 88%; justify-self: end; }
	.band--scrapbook .about-piece--danny-poster,
	.band--scrapbook .about-piece--lola-poster { width: 76%; justify-self: center; }
	.band--scrapbook .about-piece--lola-film,
	.band--scrapbook .about-piece--danny-film,
	.band--scrapbook .about-piece--ollie-film { width: 52%; justify-self: center; }
	.band--scrapbook .about-piece--rehearsal,
	.band--scrapbook .about-piece--instruments { width: 100%; }
	.band--scrapbook .about-piece--danny-extra-1,
	.band--scrapbook .about-piece--danny-extra-2 { width: 64%; }
	.band--scrapbook .about-piece--danny-extra-2 { justify-self: end; margin-top: -40px !important; }
	.band--scrapbook .about-piece--lola-extra-1,
	.band--scrapbook .about-piece--lola-extra-2 { width: 84%; }
	.band--scrapbook .about-piece--lola-extra-2 { justify-self: end; }
	.band--scrapbook .about-piece--ollie-photo { width: 66%; justify-self: start; }
	.band--scrapbook .about-piece--ollie-extra { width: 46%; justify-self: end; margin-top: -60px !important; }
	.band--scrapbook .about-piece--book { width: 56%; justify-self: center; }
	.postit.postit--bio { font-size: 22px; }
}

/* =========================================================
   Homepage YouTube carousel (dark section)
   One large video in the centre (a constant 16:9 frame; Shorts sit inside
   it), small dimmed glimpses either side, an arrow on each side and the
   title underneath. Never moves or plays on its own.
   ========================================================= */
.ytc { --ytc-w: 72%; }
.ytc__stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(10px, 2vw, 28px); }
.ytc__slides {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	aspect-ratio: calc(16 / 9 / .72);   /* height of the centre frame */
	overflow: hidden;
	touch-action: pan-y;
}
.page-content .ytc__slides { margin: 0; padding: 0; }
.ytc__slide {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--ytc-w);
	transform: translate(-50%, -50%) translateX(calc(var(--off, 0) * 88%)) scale(.6);
	opacity: .38;
	transition: transform .35s cubic-bezier(.3, .7, .2, 1), opacity .35s;
	cursor: pointer;
}
.ytc__slide.is-active { transform: translate(-50%, -50%); opacity: 1; z-index: 2; cursor: auto; }
.ytc__slide[hidden] { display: none; }
.ytc:not(.is-ready) .ytc__slide { position: relative; left: auto; top: auto; transform: none; opacity: 1; margin: 0 auto; }
.ytc__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 3px solid var(--cream); background: #000; }
.ytc__play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.ytc__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) brightness(.45); transform: scale(1.1); }
.ytc__thumb { position: relative; width: 100%; height: 100%; object-fit: cover; }
.ytc__slide--portrait .ytc__thumb { object-fit: contain; }
.ytc__play .play-badge { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); min-height: 56px; padding: 0 22px 0 12px; font-size: 16px; }
.ytc__play .play-badge__icon { width: 30px; height: 30px; }
.ytc__slide.is-side .play-badge { display: none; }
.ytc__play:hover .play-badge, .ytc__play:focus-visible .play-badge { background: var(--cream); }
.ytc__play:focus-visible { outline: 3px solid var(--cream); outline-offset: -8px; }
.ytc__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ytc__arrow {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border: 2px solid var(--cream);
	border-radius: 50%;
	background: transparent;
	color: var(--cream);
	font: inherit;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.ytc__arrow:hover { background: var(--cream); color: var(--ink); }
.ytc__arrow:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
.ytc__caption { width: var(--ytc-w); margin: 16px auto 0; text-align: center; }
.ytc__title { margin: 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; line-height: 1.3; color: var(--cream); overflow-wrap: anywhere; }
.ytc__meta { margin: 4px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-light); }
.ytc__count { margin: 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: rgba(243, 234, 216, .6); }
.ytc__channel { margin: 28px 0 0; text-align: center; }
@media (max-width: 760px) {
	.ytc { --ytc-w: 96%; }
	.ytc__stage { grid-template-columns: 1fr 1fr; grid-template-areas: "slides slides" "prev next"; row-gap: 14px; }
	.ytc__slides { grid-area: slides; aspect-ratio: calc(16 / 9 / .96); }
	.ytc__arrow { width: 100%; height: 52px; border-radius: 26px; }
	.ytc__arrow--prev { grid-area: prev; }
	.ytc__arrow--next { grid-area: next; }
	.ytc__slide { transform: translate(-50%, -50%) translateX(calc(var(--off, 0) * 98%)) scale(.6); }
	.ytc__caption { width: 100%; }
	.ytc__play .play-badge { min-height: 48px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ytc__slide { transition: none; } }

/* Upcoming gigs: "Recently played" button to the Archive */
.upcoming-gigs .upcoming-gigs__past { margin: clamp(20px, 2.4vw, 28px) 0 0; }

/* Jukebox TV: message when a clip can't be loaded */
.tvframe__screen .tv-error { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 16px; border-radius: 18px; background: #000; color: var(--cream); font-size: 14px; text-align: center; }

/* Booking email: at least 24 px tall to tap, without changing the line */
.contact-list__primary dd a { display: inline-block; padding-block: 2px; }