/* =========================================================================
   Drift Lab — main stylesheet
   Order: tokens → reset → layout → header → hero → sections → cards →
          components → templates → footer → utilities → responsive
   ========================================================================= */

/* ---------- Tokens ------------------------------------------------------ */

:root {
	/* Brand — sampled from the "Sunlight" cover (night skyline + gold sun),
	   so the site, the cover and the logo read as one identity. */
	--dl-accent:        #f0c94d; /* the sun's gold glow */
	--dl-accent-dim:    #caa233; /* hover / pressed state */
	--dl-accent-soft:   rgba(240, 201, 77, 0.14);
	--dl-teal:          #2b93b0; /* skyline accent — used sparingly, tags/badges */

	/* Surfaces — the cover's dominant night-sky indigo */
	--dl-bg:            #120f2b;
	--dl-bg-alt:        #171c3c;
	--dl-surface:       #1e1b3f;
	--dl-line:          rgba(255, 255, 255, 0.10);
	--dl-line-strong:   rgba(255, 255, 255, 0.22);

	/* Text */
	--dl-text:          #f4f2fb;
	--dl-muted:         #9c9ac2; /* the cover's lavender border frame */
	--dl-on-accent:     #241a04;

	/* Type */
	--dl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	           "Helvetica Neue", Arial, sans-serif;
	--dl-font-display: var(--dl-font);
	--dl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Fluid type scale */
	--dl-step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
	--dl-step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem);
	--dl-step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
	--dl-step-2:  clamp(1.50rem, 1.30rem + 1.00vw, 2.20rem);
	--dl-step-3:  clamp(2.00rem, 1.60rem + 2.00vw, 3.40rem);
	--dl-step-4:  clamp(2.60rem, 1.80rem + 4.00vw, 6.00rem);

	/* Space */
	--dl-gutter: clamp(1.25rem, 4vw, 3rem);
	--dl-section: clamp(3.5rem, 8vw, 7rem);
	--dl-wrap: 1240px;
	--dl-wrap-narrow: 760px;

	/* Motion & shape */
	--dl-radius: 4px;
	--dl-radius-lg: 8px;
	--dl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dl-header-h: 76px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Reset ------------------------------------------------------- */

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

/* Safety net: nothing may ever widen the page sideways. On phones any element
   wider than the screen enlarges the layout viewport, and then fixed bars (the
   cookie banner, the header) extend past the right edge where their buttons
   can't be tapped. `clip` (unlike `hidden`) doesn't create a scroll container,
   so position: sticky keeps working. */
html { overflow-x: clip; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--dl-bg);
	color: var(--dl-text);
	font-family: var(--dl-font);
	font-size: var(--dl-step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video,
iframe { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	font-family: var(--dl-font-display);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	font-weight: 650;
	text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--dl-accent); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--dl-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

hr { border: 0; border-top: 1px solid var(--dl-line); margin: 2rem 0; }

::selection { background: var(--dl-accent); color: var(--dl-on-accent); }

/* ---------- Layout ------------------------------------------------------ */

.wrap {
	width: 100%;
	max-width: var(--dl-wrap);
	margin-inline: auto;
	padding-inline: var(--dl-gutter);
}

.wrap--narrow { max-width: var(--dl-wrap-narrow); }

.site-main { display: block; }

.section { padding-block: var(--dl-section); }
.section + .section { padding-top: 0; }

/* One-page nav: offset anchor targets so the fixed header never covers the
   section title when the primary nav scrolls the page to it. */
.section[id] { scroll-margin-top: calc(var(--dl-header-h) + 20px); }
.section--feature,
.section--about { background: var(--dl-bg-alt); }
.section--feature { padding-block: var(--dl-section); }
.section + .section--feature,
.section + .section--about { padding-top: var(--dl-section); }

/* Desktop: as the visitor scrolls to About, gently snap it into a full, framed
   view (photo + copy + press-kit button all visible), with a tighter top so the
   block sits neatly under the header. Mobile scrolls normally. */
@media (min-width: 901px) {
	html { scroll-snap-type: y proximity; }
	.section--about {
		scroll-snap-align: start;
		scroll-margin-top: var(--dl-header-h);
		padding-block: clamp(2.5rem, 3.5vw, 3.5rem);
	}
	.section + .section--about { padding-top: clamp(2.5rem, 3.5vw, 3.5rem); }
}

.section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--dl-line);
}

.section__title {
	font-size: var(--dl-step-2);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.section__more {
	font-size: var(--dl-step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dl-muted);
	white-space: nowrap;
	transition: color 0.2s var(--dl-ease);
}
.section__more span { margin-left: 0.4em; }
.section__more:hover { color: var(--dl-accent); }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.empty {
	padding: 3rem 0;
	color: var(--dl-muted);
	text-align: center;
	font-size: var(--dl-step-1);
}

/* ---------- Site header ------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(18, 15, 43, 0.88);
	backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid var(--dl-line);
}

.has-overlay-header .site-header {
	position: fixed;
	inset-inline: 0;
	background: transparent;
	border-bottom-color: transparent;
	transition: background 0.3s var(--dl-ease), border-color 0.3s var(--dl-ease);
}

.has-overlay-header .site-header.is-stuck {
	background: rgba(18, 15, 43, 0.92);
	border-bottom-color: var(--dl-line);
}

.site-header__inner {
	max-width: var(--dl-wrap);
	margin-inline: auto;
	padding-inline: var(--dl-gutter);
	min-height: var(--dl-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

/* Site logo — one image, reused at a different scale per context. */
.site-logo { display: inline-flex; align-items: center; }
.site-logo__img { display: block; height: auto; width: auto; }

.site-logo--header .site-logo__img {
	max-height: 48px;
	transition: max-height 0.3s var(--dl-ease);
}

/* On the homepage hero the header still has room to breathe before it
   condenses on scroll, so the mark gets to be bigger there — then settles
   back to the standard size once .is-stuck kicks in, same as every other
   page. */
.has-overlay-header .site-header:not(.is-stuck) .site-logo--header .site-logo__img {
	max-height: 66px;
}

.site-logo--footer { margin-bottom: 0.9rem; }
.site-logo--footer .site-logo__img { max-height: 30px; }

/* "Official Web Site" tagline shown only on mobile, sitting just under the
   logo. Uses the same label language as the section eyebrows (Inter,
   uppercase, wide tracking) so it reads as part of the brand mark. */
.site-brand__tagline { display: none; }

@media (max-width: 900px) {
	.site-brand {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.6rem;
		min-width: 0; /* allow the brand to shrink so it can never push the menu button off-screen */
	}
	.site-logo--header { flex: none; } /* the logo keeps its size; only the tagline yields */
	/* The menu button is essential: it must never shrink or be pushed off the
	   screen, whatever the brand width or the browser's font metrics (this was
	   breaking on Firefox mobile). Give it an explicit colour too, so the bars
	   stay visible over the transparent overlay header on the home page. */
	.nav-toggle {
		flex: none;
		color: var(--dl-text);
	}
	.has-overlay-header .site-header:not(.is-stuck) .nav-toggle { color: #fff; }
	/* Reclaim a little horizontal room on phones so both the logo and the
	   one-line tagline can grow without crowding the menu button. */
	.site-header__inner {
		padding-inline: 12px;
		gap: 0.8rem;
		flex-wrap: nowrap;
	}
	.site-logo--header .site-logo__img,
	.has-overlay-header .site-header:not(.is-stuck) .site-logo--header .site-logo__img {
		max-height: 50px;
	}
	.site-brand__tagline {
		display: block;
		flex: 0 1 auto;
		min-width: 0;
		font-family: var(--dl-font);
		font-size: 0.6rem;
		font-weight: 600;
		letter-spacing: 0.13em;
		text-transform: uppercase;
		color: var(--dl-muted);
		line-height: 1;
		padding-left: 0.5rem;
		border-left: 1px solid var(--dl-line, rgba(255, 255, 255, 0.18));
		white-space: nowrap;
		overflow: hidden; /* if space is ever tight, the tagline clips — the menu button never does */
	}
}

/* Narrowest phones: drop the tagline entirely so the header is just the logo
   and the menu button, which always fit — no risk of crowding the toggle. */
@media (max-width: 360px) {
	.site-brand__tagline { display: none; }
}

/* Text fallback for as long as no logo image is set in the Customizer. */
.site-logo--text {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dl-accent);
}

.primary-nav { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem); }

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.85rem, 1.5vw, 1.5rem);
}

/* Social icons read as their own group, set apart from the nav links rather
   than trailing straight off the last item. */
.primary-nav__social {
	margin-left: clamp(0.5rem, 2vw, 1.5rem);
	padding-left: clamp(1rem, 2vw, 1.75rem);
	border-left: 1px solid var(--dl-line);
}

/* Desktop: dissolve the nav wrapper so the logo, the menu and the social row
   become three separate flex children of the header. space-between then keeps
   the menu clearly spaced from both the logo and the social links, instead of
   the menu+social riding together against the right edge. */
@media (min-width: 901px) {
	.primary-nav { display: contents; }
}

.primary-nav__list a {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--dl-text);
	padding-block: 0.5rem;
	position: relative;
	white-space: nowrap;
}

.primary-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--dl-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--dl-ease);
}

.primary-nav__list a:hover::after,
.primary-nav__list .current-menu-item > a::after,
.primary-nav__list .current_page_item > a::after { transform: scaleX(1); }

.primary-nav__list .current-menu-item > a { color: var(--dl-accent); }

/* Sub menus */
.primary-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 190px;
	padding: 0.5rem 0;
	background: var(--dl-surface);
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all 0.2s var(--dl-ease);
}
.primary-nav__list > li { position: relative; flex: 0 0 auto; }
.primary-nav__list > li:hover > .sub-menu,
.primary-nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.primary-nav__list .sub-menu a { display: block; padding: 0.45rem 1rem; letter-spacing: 0.06em; }
.primary-nav__list .sub-menu a::after { display: none; }

.nav-toggle {
	display: none;
	background: none;
	border: 0;
	color: inherit;
	padding: 0.5rem;
	cursor: pointer;
}

.nav-toggle__box { display: block; width: 26px; height: 14px; position: relative; }
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 0.25s var(--dl-ease), opacity 0.2s var(--dl-ease);
}
.nav-toggle__bar { top: 6px; }
.nav-toggle__bar::before { content: ""; top: -6px; }
.nav-toggle__bar::after { content: ""; top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero -------------------------------------------------------- */

.hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(520px, 88svh, 900px);
	padding-block: calc(var(--dl-header-h) + 3rem) 5rem;
	overflow: hidden;
	text-align: center;
	background: radial-gradient(120% 90% at 50% 0%, #211c48 0%, var(--dl-bg) 62%);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }

.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Zoom in slightly so the album-cover side strips (artist names printed
	   on the left/right of the Sunlight artwork) are cropped out of frame. */
	transform: scale(1.2);
	transform-origin: center;
	opacity: 0.55;
}

.hero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,13,14,0.75) 0%, rgba(10,13,14,0.35) 45%, var(--dl-bg) 100%);
	z-index: 1;
}

.hero__inner { position: relative; z-index: 2; }

.hero__eyebrow {
	font-size: var(--dl-step-1);
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--dl-accent);
	margin-bottom: 1.1rem;
}

.hero__title {
	font-size: var(--dl-step-4);
	letter-spacing: -0.035em;
	margin: 0 0 1rem;
}

.hero__text {
	max-width: 46ch;
	margin-inline: auto;
	font-size: var(--dl-step-1);
	color: var(--dl-muted);
}

.hero__actions { margin-top: 2rem; }

.hero__scroll {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	z-index: 2;
	width: 1px;
	height: 48px;
	background: linear-gradient(180deg, transparent, var(--dl-accent));
	transform: translateX(-50%);
}

/* ---------- Buttons ----------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 650;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s var(--dl-ease), color 0.2s var(--dl-ease),
	            border-color 0.2s var(--dl-ease), transform 0.2s var(--dl-ease);
}

.btn:hover { transform: translateY(-1px); }

.btn--accent { background: var(--dl-accent); color: var(--dl-on-accent); }
.btn--accent:hover { background: #4de3d5; color: var(--dl-on-accent); }

.btn--ghost { border-color: var(--dl-line-strong); color: var(--dl-text); }
.btn--ghost:hover { border-color: var(--dl-accent); color: var(--dl-accent); background: var(--dl-accent-soft); }

.btn--lg { padding: 0.95rem 2.2rem; font-size: 0.85rem; }

.btn.is-disabled {
	opacity: 0.45;
	pointer-events: none;
	transform: none;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: var(--dl-step--1);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dl-accent);
}
.link-arrow span { transition: transform 0.2s var(--dl-ease); }
.link-arrow:hover span { transform: translateX(4px); }

.tag {
	display: inline-block;
	margin-left: 0.6rem;
	padding: 0.15em 0.6em;
	border: 1px solid var(--dl-teal);
	border-radius: 999px;
	font-size: 0.62rem;
	font-weight: 650;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dl-teal);
	vertical-align: middle;
}

/* ---------- Shows (tour list) ------------------------------------------ */

.shows { border-top: 1px solid var(--dl-line); }

.show {
	display: grid;
	grid-template-columns: 88px 1fr auto;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding-block: 1.35rem;
	border-bottom: 1px solid var(--dl-line);
	transition: background 0.2s var(--dl-ease);
}

.show:hover { background: rgba(255, 255, 255, 0.025); }

.show__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
	padding: 0.4rem 0;
	border-right: 1px solid var(--dl-line);
}

.show__day { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.03em; }
.show__month { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dl-accent); }
.show__year { font-size: 0.68rem; letter-spacing: 0.12em; color: var(--dl-muted); }

.show__venue { font-size: var(--dl-step-1); margin: 0 0 0.15rem; }
.show__place { color: var(--dl-muted); margin: 0; font-size: 0.95rem; }
.show__time { color: var(--dl-muted); margin: 0; font-size: 0.85rem; }
.show__tba { color: var(--dl-muted); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Cards ------------------------------------------------------- */

.card { position: relative; }

.card__link { display: block; }

.card__media {
	position: relative;
	overflow: hidden;
	background: var(--dl-surface);
	border-radius: var(--dl-radius);
	display: grid;
	place-items: center;
}

.card__media--square { aspect-ratio: 1 / 1; }
.card__media--wide { aspect-ratio: 16 / 9; }

.card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--dl-ease);
}

/* Hover cues only on cards that are actually links (release cards). */
a.card__link:hover .card__img { transform: scale(1.04); }

.card__placeholder {
	font-size: 3rem;
	font-weight: 700;
	color: var(--dl-line-strong);
}

.card__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	opacity: 1;
	pointer-events: none;
}
.card__play svg {
	background: rgba(18, 15, 43, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	padding: 0.7rem;
	width: 54px;
	height: 54px;
}

.card__body { padding-top: 0.9rem; }

.card__title {
	font-size: var(--dl-step-1);
	margin: 0 0 0.25rem;
	transition: color 0.2s var(--dl-ease);
}
a.card__link:hover .card__title { color: var(--dl-accent); }

.card__meta {
	display: flex;
	gap: 0.75rem;
	margin: 0;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dl-muted);
}

.card__excerpt { margin: 0.6rem 0 0; color: var(--dl-muted); font-size: 0.95rem; }

/* ---------- Featured release ------------------------------------------- */

.feature {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.feature__cover {
	aspect-ratio: 1 / 1;
	background: var(--dl-surface);
	border-radius: var(--dl-radius-lg);
	overflow: hidden;
	display: grid;
	place-items: center;
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}

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

.feature__placeholder { font-size: 6rem; font-weight: 700; color: var(--dl-line-strong); }

.feature__eyebrow {
	font-size: var(--dl-step--1);
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--dl-accent);
	margin-bottom: 0.75rem;
}

.feature__title { font-size: var(--dl-step-3); margin-bottom: 1rem; }

.feature__text { color: var(--dl-muted); font-size: var(--dl-step-1); max-width: 50ch; }

.feature__more { margin-top: 1.5rem; }

.stream-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.75rem;
}

/* Store logos ride at a smaller size than the icon system's default 20px —
   the uppercase pill label is only ~12px tall, so 20px would dwarf it. */
.stream-links .icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* ---------- Video ------------------------------------------------------- */

.embed {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--dl-radius);
	overflow: hidden;
}
.embed iframe,
.embed video,
.embed object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Bandcamp and Spotify players are not 16:9 — let them keep their own height. */
.release__player { margin: 1.5rem 0 1.75rem; }
.release__player .embed { aspect-ratio: auto; min-height: 120px; }
.release__player .embed iframe { position: static; height: 352px; }

/* Release-page videos: a titled row between the hero and the body. Breaks out
   of the standard content wrap to run nearly edge-to-edge so the three players
   are as large as the viewport comfortably allows. */
.release__videos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 1.6vw, 1.75rem);
	width: 100%;
	max-width: 1800px;
	margin: 0 auto 2.75rem;
	padding-inline: var(--dl-gutter);
}
.release__video { margin: 0; }
.release__video .embed { aspect-ratio: 16 / 9; }
.release__video-title {
	margin: 0.7rem 0 0;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dl-muted);
	text-align: center;
}

@media (max-width: 760px) {
	.release__videos { grid-template-columns: 1fr; gap: 1.75rem; max-width: 560px; }
}

.video-feature__title { font-size: var(--dl-step-2); margin: 1.25rem 0 0; }

/* Watch section: the main video flanked by a Short on each side.
   The centre column is ~3.1x a side column so a 9:16 Short stands as tall as
   the 16:9 main video beside it. On narrow screens the main sits on top with
   the two Shorts side by side beneath it. */
.video-feature--flank {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"main main"
		"sl sr";
	gap: 1.25rem;
}

@media (min-width: 760px) {
	.video-feature--flank {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3.1fr) minmax(0, 1fr);
		grid-template-areas: "sl main sr";
		align-items: center;
	}
}

.video-feature--flank .video-feature__main { grid-area: main; }
.video-feature__short--left { grid-area: sl; }
.video-feature__short--right { grid-area: sr; }

.embed--short { aspect-ratio: 9 / 16; }

/* ---------- Line-up ----------------------------------------------------- */

.lineup {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1px;
	background: var(--dl-line);
	border: 1px solid var(--dl-line);
}

.lineup__item {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1.5rem;
	background: var(--dl-bg);
}

.lineup__name { font-weight: 650; font-size: var(--dl-step-1); letter-spacing: -0.01em; }
.lineup__role { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dl-accent); }

.members { display: grid; gap: clamp(2.5rem, 5vw, 4rem); padding-block: var(--dl-section); }

.member {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

.member__media {
	aspect-ratio: 1 / 1;
	background: var(--dl-surface);
	border-radius: var(--dl-radius);
	overflow: hidden;
	display: grid;
	place-items: center;
}
.member__img { width: 100%; height: 100%; object-fit: cover; }
.member__placeholder { font-size: 3.5rem; font-weight: 700; color: var(--dl-line-strong); }

.member__name { font-size: var(--dl-step-2); margin-bottom: 0.2rem; }
.member__role {
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dl-accent);
	margin-bottom: 1rem;
}
.member__bio { color: var(--dl-muted); }
.member__bio p { margin: 0 0 0.75rem; }
.member__bio p:last-child { margin-bottom: 0; }
.member__bio ul { margin: 0 0 0.85rem; padding-left: 1.1rem; }
.member__bio li { margin-bottom: 0.4rem; }
.member__bio strong { color: var(--dl-text); font-weight: 650; }
.member__links { display: flex; gap: 1.25rem; margin-top: 1rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* On the homepage the band section already provides vertical rhythm. */
.members--home { padding-block: 0; }

/* ---------- About block ------------------------------------------------- */

.about-block { max-width: 62ch; }
.about-block__title { font-size: var(--dl-step-2); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 1.25rem; }

/* With a side photo the About block becomes two columns: image left, copy right.
   The press-kit button sits in the empty space under the photo (left column,
   row 2) so it stays visible in the viewport when you jump to #about. */
.about-block--has-media {
	max-width: none;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
	grid-template-rows: auto 1fr;
	column-gap: clamp(2rem, 5vw, 4rem);
	row-gap: 1.25rem;
	align-items: start;
}
.about-block--has-media > .about-block__media    { grid-column: 1; grid-row: 1; }
.about-block--has-media > .about-block__body      { grid-column: 2; grid-row: 1 / span 2; }
.about-block--has-media > .about-block__presskit  { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0.5rem; }
.about-block__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--dl-radius);
}

/* Download-press-kit button — centred under the photo. */
.about-block__presskit { margin: 1.75rem 0 0; text-align: center; }
.about-block__presskit-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.about-block__presskit-icon {
	display: inline-flex;
	align-items: center;
}

@media (max-width: 820px) {
	.about-block--has-media { grid-template-columns: 1fr; grid-template-rows: none; }
	.about-block--has-media > .about-block__media,
	.about-block--has-media > .about-block__body,
	.about-block--has-media > .about-block__presskit { grid-column: auto; grid-row: auto; }
	.about-block--has-media .about-block__media { max-width: 420px; margin-inline: auto; }
}
.about__media { margin: 0 0 var(--dl-section); }
.about__media img { width: 100%; max-height: 70svh; object-fit: cover; }

/* ---------- Page head --------------------------------------------------- */

.page-head {
	padding-block: calc(var(--dl-header-h) * 0.55 + 3rem) 2.5rem;
	border-bottom: 1px solid var(--dl-line);
	margin-bottom: var(--dl-section);
}

.has-overlay-header .page-head { padding-top: calc(var(--dl-header-h) + 3rem); }

.page-head__title {
	font-size: var(--dl-step-3);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: -0.02em;
}

.page-head__text { color: var(--dl-muted); margin: 0.75rem 0 0; max-width: 55ch; }

.tabs { display: flex; gap: 1.75rem; margin-top: 1.5rem; }

.tabs__item {
	font-size: 0.78rem;
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dl-muted);
	padding-bottom: 0.4rem;
	border-bottom: 2px solid transparent;
}
.tabs__item.is-active { color: var(--dl-text); border-bottom-color: var(--dl-accent); }

/* ---------- Single release --------------------------------------------- */

.release__hero {
	padding-block: calc(var(--dl-header-h) + 3.5rem) var(--dl-section);
	background: linear-gradient(180deg, var(--dl-bg-alt), var(--dl-bg));
	border-bottom: 1px solid var(--dl-line);
}

.release__hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.release__cover {
	aspect-ratio: 1 / 1;
	background: var(--dl-surface);
	border-radius: var(--dl-radius-lg);
	overflow: hidden;
	display: grid;
	place-items: center;
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}
.release__img { width: 100%; height: 100%; object-fit: cover; }

.release__eyebrow {
	font-size: var(--dl-step--1);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--dl-accent);
}
.release__title { font-size: var(--dl-step-4); margin: 0.5rem 0 1rem; }
.release__lede { font-size: var(--dl-step-1); color: var(--dl-muted); max-width: 48ch; }
.release__catalog { margin-top: 1.5rem; font-family: var(--dl-font-mono); font-size: 0.78rem; color: var(--dl-muted); }

.release__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: clamp(2rem, 5vw, 4rem);
	padding-block: var(--dl-section);
	align-items: start;
}

.release__subtitle {
	font-size: var(--dl-step--1);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dl-muted);
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--dl-line);
	margin-bottom: 0.5rem;
}

.tracklist { counter-reset: track; }

.tracklist__row {
	counter-increment: track;
	display: grid;
	grid-template-columns: 2.2rem 1fr auto;
	gap: 0.75rem;
	align-items: baseline;
	padding-block: 0.7rem;
	border-bottom: 1px solid var(--dl-line);
}
.tracklist__row::before {
	content: counter(track, decimal-leading-zero);
	font-family: var(--dl-font-mono);
	font-size: 0.75rem;
	color: var(--dl-accent);
}
.tracklist__len { font-family: var(--dl-font-mono); font-size: 0.8rem; color: var(--dl-muted); }

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 2.5rem;
	border-top: 1px solid var(--dl-line);
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dl-muted);
}
.post-nav__next { margin-left: auto; text-align: right; }

/* ---------- Single templates -------------------------------------------- */

.single-post,
.single-video,
.single-show,
.single-member { padding-block: calc(var(--dl-header-h) * 0.4 + 3rem) var(--dl-section); }

.single-post__meta,
.single-video__meta {
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dl-accent);
}

.single-post__title { font-size: var(--dl-step-3); }
.single-post__media { margin: 0 0 2.5rem; }

.single-video__player { margin-bottom: 2rem; }
.single-video__title { font-size: var(--dl-step-2); margin: 0.5rem 0 0; }

.single-show__date { font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dl-accent); }
.single-show__title { font-size: var(--dl-step-3); margin: 0.4rem 0 0.5rem; }
.single-show__place { color: var(--dl-muted); font-size: var(--dl-step-1); }
.single-show__time { margin-left: 1rem; font-size: 0.9rem; }
.single-show__cta { margin-top: 2rem; }

.single-member__media { margin: 0 0 2rem; max-width: 340px; border-radius: var(--dl-radius); overflow: hidden; }
.single-member__name { font-size: var(--dl-step-3); margin-bottom: 0.2rem; }
.single-member__role { font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dl-accent); margin-bottom: 2rem; }

.back-link { margin-top: 3rem; }
.back-link .link-arrow span { margin-right: 0.45em; }
.back-link .link-arrow:hover span { transform: translateX(-4px); }

/* ---------- Entry content ----------------------------------------------- */

.entry-content { font-size: 1.05rem; line-height: 1.75; color: #d7dedf; }
.entry-content--lede { font-size: var(--dl-step-1); line-height: 1.65; }

.entry-content > * + * { margin-top: 1.15em; }
.entry-content h2 { font-size: var(--dl-step-2); margin-top: 2em; }
.entry-content h3 { font-size: var(--dl-step-1); margin-top: 1.8em; }
.entry-content a { color: var(--dl-accent); text-decoration: underline; text-underline-offset: 0.18em; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content ul li { list-style: disc; }
.entry-content ol li { list-style: decimal; }
.entry-content li + li { margin-top: 0.35em; }
.entry-content blockquote {
	margin: 2em 0;
	padding-left: 1.4em;
	border-left: 2px solid var(--dl-accent);
	font-size: var(--dl-step-1);
	color: var(--dl-text);
}
.entry-content img { border-radius: var(--dl-radius); }
.entry-content figcaption { font-size: 0.82rem; color: var(--dl-muted); margin-top: 0.5rem; }

/* ---------- Press, contact, search, 404 --------------------------------- */

.press-grid__item figcaption { margin-top: 0.6rem; font-size: 0.82rem; color: var(--dl-muted); }

.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2.5rem;
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid var(--dl-line);
}
.contact-grid h2 {
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dl-muted);
	margin-bottom: 0.75rem;
}
.contact-grid a { color: var(--dl-accent); }

/* ---------- Contact form ------------------------------------------------ */

.contact-form {
	max-width: 620px;
	margin: 2rem auto 0;
	display: grid;
	gap: 1rem;
}

/* Honeypot: kept in the DOM for bots, hidden from people and screen readers. */
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form__field { display: grid; gap: 0.35rem; margin: 0; }
.contact-form__field label { font-size: 0.82rem; letter-spacing: 0.03em; color: var(--dl-muted); }
.contact-form__field .req { color: var(--dl-accent); }

.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 0.62rem 0.9rem;
	background: #ececec;
	border: 1px solid transparent;
	border-radius: 8px;
	color: #17151f;
	font: inherit;
	transition: border-color 0.2s var(--dl-ease), box-shadow 0.2s var(--dl-ease);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #8a8894; }
.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--dl-accent);
	box-shadow: 0 0 0 3px var(--dl-accent-soft);
}
.contact-form textarea { resize: vertical; min-height: 104px; }

/* Privacy acknowledgement checkbox. */
.contact-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0.15rem 0 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--dl-muted);
}
.contact-form input[type="checkbox"] {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.15rem 0 0;
	padding: 0;
	accent-color: var(--dl-accent);
	cursor: pointer;
}
.contact-form__consent label { cursor: pointer; }
.contact-form__consent a { color: var(--dl-text); text-decoration: underline; text-underline-offset: 2px; }
.contact-form__consent .req { color: var(--dl-accent); }

/* reCAPTCHA v3 notice. Google allows hiding its floating badge (which would
   sit on top of the cookie bar) as long as this text is shown instead. */
.contact-form__recaptcha {
	margin: 0;
	text-align: center;
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--dl-muted);
}
.contact-form__recaptcha a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.grecaptcha-badge { visibility: hidden !important; }
.contact-form__submit:disabled { opacity: 0.6; cursor: progress; transform: none; }

.contact-form__actions { margin: 0.25rem 0 0; text-align: center; }
.contact-form__submit {
	min-width: 170px;
	padding: 0.8rem 2.3rem;
	border: 0;
	border-radius: 8px;
	background: #2f2d38;
	color: var(--dl-text);
	font-size: 0.82rem;
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s var(--dl-ease), color 0.2s var(--dl-ease), transform 0.2s var(--dl-ease);
}
.contact-form__submit:hover { background: var(--dl-accent); color: var(--dl-on-accent); transform: translateY(-1px); }

.form-note {
	max-width: 620px;
	margin: 1.5rem auto 0;
	padding: 0.9rem 1.1rem;
	border-radius: 8px;
	font-size: 0.9rem;
}
.form-note--ok { background: var(--dl-accent-soft); color: var(--dl-text); border: 1px solid var(--dl-accent); }
.form-note--error { background: rgba(179, 45, 46, 0.15); color: #f0b4b4; border: 1px solid #b32d2e; }

/* Follow + Listen & buy rows under the form. */
.contact-connect {
	margin-top: 1.6rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--dl-line);
	text-align: center;
}
.contact-connect__title {
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dl-muted);
	margin-bottom: 0.95rem;
}

/* Social icons and store logos flow together as one centred icon strip. */
.connect-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}
/* The icon rows must wrap: with 13 store links a single row is ~450px wide,
   wider than a phone screen, which widened the whole page on mobile and pushed
   fixed elements (cookie bar, header) partly off-screen to the right. */
.connect-icons .social {
	margin: 0;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 100%;
}
/* Slightly larger social + store logos in the contact strip. */
.connect-icons .social a { width: 42px; height: 42px; }
.connect-icons .social .icon { width: 24px; height: 24px; }

.results { border-top: 1px solid var(--dl-line); }
.results__item { border-bottom: 1px solid var(--dl-line); }
.results__link { display: flex; flex-direction: column; gap: 0.2rem; padding-block: 1.1rem; }
.results__type { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dl-accent); }
.results__title { font-size: var(--dl-step-1); }

.search-form { display: flex; gap: 0.6rem; margin-bottom: 2.5rem; }
.search-form__field {
	flex: 1;
	padding: 0.75rem 1rem;
	background: var(--dl-surface);
	border: 1px solid var(--dl-line);
	border-radius: 999px;
	color: var(--dl-text);
	font: inherit;
	font-size: 0.95rem;
}
.search-form__field::placeholder { color: var(--dl-muted); }

.error-404 { padding-block: calc(var(--dl-header-h) + 4rem) var(--dl-section); text-align: center; }
.error-404__code { font-size: var(--dl-step-4); font-weight: 700; color: var(--dl-accent); line-height: 1; margin: 0; }
.error-404__title { font-size: var(--dl-step-2); margin: 1rem 0; }
.error-404__text { color: var(--dl-muted); max-width: 42ch; margin-inline: auto; }
.error-404__actions { display: flex; gap: 0.75rem; justify-content: center; margin: 2rem 0 3rem; }

/* ---------- Pagination -------------------------------------------------- */

.pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--dl-section);
}
.pagination .nav-links { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.75rem;
	border: 1px solid var(--dl-line);
	border-radius: 999px;
	font-size: 0.85rem;
	color: var(--dl-muted);
	transition: all 0.2s var(--dl-ease);
}
.pagination .page-numbers:hover { border-color: var(--dl-accent); color: var(--dl-accent); }
.pagination .page-numbers.current { background: var(--dl-accent); border-color: var(--dl-accent); color: var(--dl-on-accent); }

/* ---------- Social ------------------------------------------------------ */

.social { display: flex; align-items: center; gap: 1rem; }
.social a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--dl-muted);
	transition: color 0.2s var(--dl-ease), background 0.2s var(--dl-ease);
}
.social a:hover { color: var(--dl-accent); background: var(--dl-accent-soft); }
.social--center { justify-content: center; margin-top: 2rem; }
.social--footer { margin-top: 1.25rem; }

/* ---------- Newsletter -------------------------------------------------- */

.newsletter {
	padding-block: var(--dl-section);
	background: var(--dl-bg-alt);
	border-top: 1px solid var(--dl-line);
	text-align: center;
}
.newsletter__title { font-size: var(--dl-step-2); text-transform: uppercase; letter-spacing: 0.02em; }
.newsletter__text { color: var(--dl-muted); margin-bottom: 2rem; }
.newsletter__form {
	display: flex;
	gap: 0.6rem;
	max-width: 480px;
	margin-inline: auto;
}
.newsletter__form input {
	flex: 1;
	padding: 0.85rem 1.25rem;
	background: var(--dl-surface);
	border: 1px solid var(--dl-line);
	border-radius: 999px;
	color: var(--dl-text);
	font: inherit;
	font-size: 0.95rem;
}
.newsletter__form input::placeholder { color: var(--dl-muted); }

/* ---------- Footer ------------------------------------------------------ */

.site-footer { border-top: 1px solid var(--dl-line); margin-top: var(--dl-section); }
.newsletter + .site-footer__main { margin-top: 0; }

.site-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(auto-fit, minmax(160px, 1fr));
	gap: 2.5rem;
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.site-footer__note { color: var(--dl-muted); max-width: 40ch; font-size: 0.95rem; }

.site-footer__list { display: grid; gap: 0.6rem; }
.site-footer__list a { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dl-muted); }
.site-footer__list a:hover { color: var(--dl-accent); }

.footer-widget__title { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dl-muted); }

.site-footer__legal {
	padding-block: 1.5rem;
	border-top: 1px solid var(--dl-line);
	font-size: 0.78rem;
	color: var(--dl-muted);
	letter-spacing: 0.04em;
}
.site-footer__legal p { margin: 0; }

/* ---------- Utilities --------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 999;
	width: auto;
	height: auto;
	clip-path: none;
	padding: 0.75rem 1.25rem;
	background: var(--dl-accent);
	color: var(--dl-on-accent);
	border-radius: var(--dl-radius);
	font-weight: 650;
}

.embed-fallback { word-break: break-all; }
.embed-fallback a { color: var(--dl-accent); }

/* Reveal on scroll — the JS adds .is-in when the element enters the viewport. */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--dl-ease), transform 0.7s var(--dl-ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 1024px) {
	.grid--4 { grid-template-columns: repeat(3, 1fr); }
	.release__body { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.nav-toggle { display: block; }

	.primary-nav {
		position: fixed;
		top: var(--dl-header-h);
		right: 0;
		left: 0;
		/* Explicit height: a fixed flex column doesn't reliably stretch from
		   top+bottom insets, which left the panel ~97px tall and clipped the
		   menu to its middle items. dvh tracks the mobile browser chrome. */
		height: calc(100vh - var(--dl-header-h));
		height: calc(100dvh - var(--dl-header-h));
		flex-direction: column;
		justify-content: center;
		gap: 2.5rem;
		padding: 2rem var(--dl-gutter) 4rem;
		background: var(--dl-bg);
		border-top: 1px solid var(--dl-line);
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		overflow-y: auto;
		transition: opacity 0.25s var(--dl-ease), transform 0.25s var(--dl-ease), visibility 0.25s;
	}

	.primary-nav.is-open { opacity: 1; visibility: visible; transform: none; }

	.primary-nav__list { flex-direction: column; gap: 1.4rem; text-align: center; }
	.primary-nav__list a { font-size: 1.15rem; letter-spacing: 0.1em; }
	.primary-nav__list a::after { display: none; }
	.primary-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: none;
		border: 0;
		padding: 0.5rem 0 0;
	}
	.primary-nav__list .sub-menu a { font-size: 0.9rem; color: var(--dl-muted); }
	.primary-nav__social {
		display: flex;
		justify-content: center;
		margin-left: 0;
		padding-left: 0;
		padding-top: 1.75rem;
		border-left: 0;
		border-top: 1px solid var(--dl-line);
	}

	body.nav-open { overflow: hidden; }

	.feature,
	.release__hero-inner { grid-template-columns: 1fr; }
	.feature__cover,
	.release__cover { max-width: 420px; }

	.member { grid-template-columns: 1fr; }
	.member__media { max-width: 260px; }

	.grid--3 { grid-template-columns: repeat(2, 1fr); }
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
	.show {
		grid-template-columns: 64px 1fr;
		grid-template-areas:
			"date body"
			"date action";
		row-gap: 0.85rem;
	}
	.show__date { grid-area: date; }
	.show__body { grid-area: body; }
	.show__action { grid-area: action; justify-self: start; }

	.show__day { font-size: 1.35rem; }

	.grid--3,
	.grid--4 { grid-template-columns: 1fr; }

	.newsletter__form,
	.search-form { flex-direction: column; }
	.newsletter__form input,
	.search-form__field { border-radius: var(--dl-radius-lg); }
	.newsletter__form .btn,
	.search-form .btn { width: 100%; }

	.error-404__actions { flex-direction: column; align-items: center; }

	.post-nav { flex-direction: column; }
	.post-nav__next { margin-left: 0; text-align: left; }
}

/* ---------- News: social wall (Facebook / Instagram / X) ---------- */
.section--social { background: var(--dl-bg-alt); }

/* Adaptive columns: fills nicely with 2 or 3 networks (no empty track), and
   caps each column so the Facebook Page Plugin — max 500px wide — never leaves
   a gap. Stacks to one column on narrow screens. */
.social-wall {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
	justify-content: center;
	align-items: start;
}

.social-embed {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0; /* let iframes shrink inside the grid track */
}

.social-embed__label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--dl-step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dl-muted);
}
.social-embed__label svg { width: 18px; height: 18px; flex: none; }

.social-embed__frame {
	position: relative;
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius-lg);
	overflow: hidden;
	background: #fff; /* FB and Instagram embeds render on a light surface */
}
.social-embed__frame iframe { display: block; width: 100%; border: 0; }

/* Cookie-consent placeholder shown over a blocked social feed. */
.social-embed__consent {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1.5rem;
	text-align: center;
	background: var(--dl-bg-alt);
	color: var(--dl-text);
}
.social-embed__consent-icon { color: var(--dl-muted); }
.social-embed__consent-text {
	margin: 0;
	max-width: 30ch;
	font-size: var(--dl-step--1);
	color: var(--dl-muted);
	line-height: 1.5;
}
.social-embed__consent-text strong { color: var(--dl-text); }
.social-embed__consent-btn { cursor: pointer; }

/* ---------- Complianz cookie banner — themed to match Drift Lab ---------
   Complianz ships a light banner with hard-coded colours; these overrides
   (scoped to .cmplz-* with !important to beat the plugin CSS) restyle it into
   the dark Drift Lab look: dark surface, light text, yellow accept button. */
.cmplz-cookiebanner {
	background: var(--dl-bg-alt) !important;
	color: var(--dl-text) !important;
	border: 1px solid var(--dl-line) !important;
	border-radius: var(--dl-radius-lg) !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
	font-family: var(--dl-font);
}
.cmplz-cookiebanner .cmplz-title {
	color: var(--dl-text) !important;
	font-size: var(--dl-step-1);
	letter-spacing: -0.01em;
}
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-message * {
	color: var(--dl-muted) !important;
}
.cmplz-cookiebanner .cmplz-close { color: var(--dl-muted) !important; }
.cmplz-cookiebanner .cmplz-close:hover { color: var(--dl-accent) !important; }

/* Policy links */
.cmplz-cookiebanner .cmplz-links a,
.cmplz-cookiebanner a { color: var(--dl-accent) !important; }

/* Buttons — shared */
.cmplz-cookiebanner .cmplz-btn {
	border-radius: 999px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	transition: transform 0.15s var(--dl-ease), background 0.2s var(--dl-ease), color 0.2s var(--dl-ease), border-color 0.2s var(--dl-ease);
}
.cmplz-cookiebanner .cmplz-btn:hover { transform: translateY(-1px); }

/* Accept + Save — primary yellow action (matches the site's accent buttons) */
.cmplz-cookiebanner .cmplz-accept,
.cmplz-cookiebanner .cmplz-save-preferences,
.cmplz-cookiebanner .cmplz-accept-all {
	background: var(--dl-accent) !important;
	color: #171c3c !important;
	border: 1px solid var(--dl-accent) !important;
}
.cmplz-cookiebanner .cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-save-preferences:hover,
.cmplz-cookiebanner .cmplz-accept-all:hover {
	background: #ffd873 !important;
	border-color: #ffd873 !important;
}

/* Deny + View preferences — quiet secondary buttons */
.cmplz-cookiebanner .cmplz-deny,
.cmplz-cookiebanner .cmplz-view-preferences {
	background: transparent !important;
	color: var(--dl-text) !important;
	border: 1px solid var(--dl-line) !important;
}
.cmplz-cookiebanner .cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-view-preferences:hover {
	background: rgba(255, 255, 255, 0.06) !important;
	border-color: var(--dl-muted) !important;
}

/* Preferences panel (per-category consent) */
.cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid var(--dl-line) !important;
	border-radius: var(--dl-radius) !important;
}
.cmplz-cookiebanner .cmplz-category-title { color: var(--dl-text) !important; }
.cmplz-cookiebanner .cmplz-category .cmplz-description,
.cmplz-cookiebanner .cmplz-category-description { color: var(--dl-muted) !important; }
/* Category toggle slider — accent when the category is enabled */
.cmplz-cookiebanner .cmplz-consent-checkbox:checked + .cmplz-label { background: var(--dl-accent) !important; }

/* Floating "Manage consent" revoke tab */
.cmplz-manage-consent {
	background: var(--dl-bg-alt) !important;
	color: var(--dl-text) !important;
	border: 1px solid var(--dl-line) !important;
	border-radius: 999px 0 0 999px !important;
}
.cmplz-manage-consent:hover { color: var(--dl-accent) !important; }

/* Full-width single-line bar at the bottom (position "bottom"). Message on the
   left, buttons on the right; everything wraps on narrow screens. */
.cmplz-cookiebanner.cmplz-bottom {
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	/* Complianz's generated CSS centres its banner with left:50% plus
	   transform: translateX(-50%) (and top:50% on some widths); with our left:0
	   that shifted the bar half off-screen on phones. Neutralise both. */
	top: auto !important;
	transform: none !important;
	-ms-transform: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	border-radius: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: center !important;
	column-gap: clamp(1rem, 3vw, 2.5rem) !important;
	row-gap: 0.75rem !important;
	padding: 0.9rem clamp(1rem, 4vw, 3rem) !important;
}
/* Only lay out as a flex bar when the banner is actually shown — otherwise
   Complianz's own display:none (after Accept/Deny) must win so it can close. */
.cmplz-cookiebanner.cmplz-bottom.cmplz-show { display: flex !important; }
.cmplz-cookiebanner.cmplz-bottom .cmplz-header,
.cmplz-cookiebanner.cmplz-bottom .cmplz-divider { display: none !important; }
.cmplz-cookiebanner.cmplz-bottom .cmplz-body {
	flex: 1 1 320px !important;
	margin: 0 !important;
	min-width: 0 !important;
}
.cmplz-cookiebanner.cmplz-bottom .cmplz-message { margin: 0 !important; }
.cmplz-cookiebanner.cmplz-bottom .cmplz-categories { flex-basis: 100% !important; }
.cmplz-cookiebanner.cmplz-bottom .cmplz-buttons {
	display: flex !important;
	flex: 0 1 auto !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 0.6rem !important;
	margin: 0 !important;
	width: auto !important;
}
.cmplz-cookiebanner.cmplz-bottom .cmplz-buttons .cmplz-btn {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	white-space: nowrap !important;
}
.cmplz-cookiebanner.cmplz-bottom .cmplz-documents.cmplz-links {
	flex: 0 0 auto !important;
	margin: 0 !important;
}
/* When the preferences panel is open the bar naturally grows taller. */
.cmplz-cookiebanner.cmplz-bottom.cmplz-categories-visible { align-items: flex-start !important; }

/* Facebook and X carry a fixed viewport; Instagram (LightWidget) auto-sizes. */
.social-embed--facebook .social-embed__frame,
.social-embed--x .social-embed__frame { height: 640px; }
.social-embed--x .social-embed__frame { background: var(--dl-surface); }
.social-embed--x .twitter-timeline { width: 100% !important; }

.social-wall__note {
	margin-top: 1.5rem;
	font-size: var(--dl-step--1);
	color: var(--dl-muted);
}

/* Homepage News board: two equal columns that fill the section. Both feeds
   share the same fixed box height; the Facebook timeline scrolls internally,
   the Instagram widget's post grid sits at the top of its matching box. */
.section--news .social-wall {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	justify-content: stretch;
	align-items: stretch;
}
.section--news .social-embed__frame {
	height: 640px;
	overflow: auto;
}
.section--news .social-embed--instagram .social-embed__frame {
	overflow: hidden;
	background: var(--dl-bg-alt);
}
.section--news .social-embed__frame > * { width: 100%; }

/* Desktop: Instagram matches the Facebook column's fixed 640px box. Force the
   iframe to fill it — overriding the LightWidget resizer's content height — so
   the two columns are the exact same size side by side. The panel-coloured
   frame background keeps any area beneath the posts integrated with the site. */
@media (min-width: 761px) {
	.section--news .social-embed--instagram iframe { height: 100% !important; }
}

/* Mobile: the two feeds stack, so a matching height serves no purpose and would
   only leave a tall empty tail below the 9 posts. Let the Instagram box hug the
   widget's real content height instead (no empty space). */
@media (max-width: 760px) {
	.section--news .social-wall { grid-template-columns: 1fr; }
	.section--news .social-embed--instagram .social-embed__frame {
		height: auto;
		min-height: 320px;
		background: transparent;
	}
}