/*
Theme Name: Diorama
Theme URI: https://dioramaband.com
Author: Diorama
Description: Custom block theme for DIORAMA (SG). Dark rooms, one light per room. Tokens live in theme.json; motion lives in assets/css/motion.css and assets/js/motion.js.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.36
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diorama
*/

/* ---------- Base ---------- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Phones ignore overflow on body, so clip the page wrapper too: nothing can push the page sideways.
   "clip" is not a scroll container, so the sticky header still sticks. */
.wp-site-blocks {
	overflow-x: clip;
}

h1, h2, h3 {
	text-wrap: balance;
	margin: 0;
}

p {
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* Visible focus everywhere, in Bone. */
:where(a, button, input, textarea, select, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--bone);
	outline-offset: 3px;
}

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

/* Every link and button eases its colour, border and glow; components add their own movement. */
:where(a, button) {
	transition:
		color var(--wp--custom--motion--base) ease,
		background-color var(--wp--custom--motion--base) ease,
		border-color var(--wp--custom--motion--base) ease,
		text-decoration-color var(--wp--custom--motion--base) ease,
		box-shadow var(--wp--custom--motion--base) ease,
		opacity var(--wp--custom--motion--base) ease;
}

/* ---------- Type helpers ---------- */
.eyebrow,
.meta,
.show-date {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	text-transform: uppercase;
}

.eyebrow {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ash);
}

.meta {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--ash);
}

.eyebrow.is-corridor { color: var(--wp--preset--color--corridor-text); }
.eyebrow.is-stage { color: var(--wp--preset--color--stage-text); }
.eyebrow.is-tungsten { color: var(--wp--preset--color--tungsten); }

.muted { color: var(--wp--preset--color--ash); }
.is-small { font-size: 0.9375rem; }

.lede {
	font-size: 1.25rem;
	line-height: 1.5;
	max-width: 35rem;
}

/* Big type is printed, not typeset: a light worn texture (Figma "Type + Motion", A1).
   The tile is opaque where the ink stays; it scales with the heading (3em, 112–256px) and motion.js
   gives each heading its own patch of it. More contrast or forced colours: clean type. */
:where(h1, h2, .timeline__year) {
	-webkit-mask: url("assets/img/wear-2.webp") var(--wear-x, 0) var(--wear-y, 0) / clamp(112px, 3em, 256px) repeat;
	mask: url("assets/img/wear-2.webp") var(--wear-x, 0) var(--wear-y, 0) / clamp(112px, 3em, 256px) repeat;
	mask-clip: no-clip;
}

@media (prefers-contrast: more), (forced-colors: active) {
	:where(h1, h2, .timeline__year) {
		-webkit-mask: none;
		mask: none;
	}
}

/* ---------- Buttons ---------- */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
}

/* On the narrowest phones a long label wraps rather than pushing the page sideways. */
@media (max-width: 400px) {
	.wp-element-button,
	.wp-block-button__link {
		max-width: 100%;
		white-space: normal;
		text-align: center;
		line-height: 1.25;
	}
}

a.wp-element-button:not(.is-ghost) {
	background: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--ink);
	border-radius: 999px;
	padding: 0.875rem 1.5rem;
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wp-element-button.is-ghost,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--bone);
	border: 1px solid var(--wp--preset--color--smoke);
	border-radius: 999px;
	padding: 0.875rem 1.5rem;
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wp-element-button.is-ghost:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--bone);
}

/* Icon-only buttons (the places to listen): round, the name in a tooltip and for screen readers. */
a.wp-element-button.is-icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border-radius: 50%;
}

.wp-block-button.is-small .wp-block-button__link {
	padding: 0.75rem 1.5rem;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---------- Header ---------- */
/* The header template part is the sticky element; its inner group carries the look. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.site-header {
	position: relative;
	border-bottom: 1px solid var(--wp--preset--color--graphite);
	padding-block: 14px;
}

/* The frosted backdrop sits on a layer behind the header: a backdrop-filter on the header
   itself would trap the full-screen mobile menu inside the header's box. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.site-header__bar {
	min-height: 42px;
}

.site-wordmark {
	display: block;
	line-height: 0;
}

.site-wordmark img {
	width: 124px;
	height: auto;
}

.site-header__right {
	gap: 32px;
}

.site-nav .wp-block-navigation__container {
	gap: 28px;
}

.site-nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ash);
	text-decoration: none;
	transition: color var(--wp--custom--motion--fast) ease;
}

.site-nav .wp-block-navigation-item__content:hover,
.site-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--bone);
}

.site-nav .wp-block-navigation__responsive-container-open,
.site-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--bone);
}

/* Links that only belong in the mobile menu (Contact, socials). */
.site-nav .nav-mobile-only {
	display: none;
}

/* ---------- Mobile menu (open) ----------
   Full screen, dark, wordmark top left where the header's is; the thumb bar stays on top. */
.site-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	inset: 0;
	padding: 0 16px 120px;
	background:
		url("assets/svg/wordmark.svg") 16px 26px / 104px auto no-repeat,
		var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
	overflow-y: auto;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 19px;
	right: 0;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 92px;
	align-items: stretch;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: "Menu";
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ash);
	margin-bottom: 14px;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0 18px;
	width: 100%;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	flex: 0 0 100%;
	border-bottom: 1px solid var(--wp--preset--color--graphite);
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	padding-block: 14px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.875rem;
	line-height: 1;
	letter-spacing: 0;
	color: var(--wp--preset--color--bone);
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: "→";
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1rem;
	color: var(--wp--preset--color--ash);
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content::after {
	color: var(--wp--preset--color--tungsten);
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .nav-mobile-only {
	display: block;
}

/* Social links: a small row under the menu, not full-width rows. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .nav-social {
	flex: 0 0 auto;
	border-bottom: 0;
	margin-top: 24px;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .nav-social .wp-block-navigation-item__content {
	padding: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--ash);
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .nav-social .wp-block-navigation-item__content::after {
	content: none;
}

/* ---------- Rooms (page sections) ---------- */
.room {
	position: relative;
	padding-block: 72px;
	background: var(--wp--preset--color--ink);
}

.room > * + * {
	margin-block-start: 24px;
}

.room > .eyebrow + h2,
.room > .eyebrow + .wp-block-heading {
	margin-block-start: 22px;
}

/* One light per room: a soft glow from the top edge. */
.room--stage { background: radial-gradient(71% 56% at 50% 0%, rgba(227, 18, 31, .18), rgba(227, 18, 31, 0) 100%), var(--wp--preset--color--ink); }
.room--corridor { background: radial-gradient(71% 56% at 50% 0%, rgba(31, 111, 224, .16), rgba(31, 111, 224, 0) 100%), var(--wp--preset--color--ink); }
.room--tungsten { background: radial-gradient(71% 56% at 50% 0%, rgba(232, 144, 79, .16), rgba(232, 144, 79, 0) 100%), var(--wp--preset--color--ink); }

.room--tight {
	padding-block: 72px;
}

.page-shell {
	min-height: 60vh;
}

.card {
	background: var(--wp--preset--color--soot);
	border: 1px solid var(--wp--preset--color--graphite);
	border-radius: 12px;
	padding: 28px;
}

.card > * + * {
	margin-block-start: 12px;
}

.card > .wp-block-buttons,
.card > .diorama-join {
	margin-block-start: 18px;
}

/* ---------- Home hero ---------- */
/* Full height under the sticky header. hero.js sets --hero-p (0 to 1) as you scroll away. */
.home-hero {
	--hero-p: 0;
	--header-h: 71px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: calc(100vh - var(--header-h));
	min-height: calc(100svh - var(--header-h));
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-block: 168px 96px;
	background: var(--wp--preset--color--ink);
}

.home-hero > .home-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	max-width: none;
	margin: 0;
	background: url("assets/img/hero-loop-desktop.jpg") 50% 50% / cover no-repeat, var(--wp--preset--color--ink);
	opacity: calc(1 - var(--hero-p) * .85);
	transform: translate3d(0, calc(var(--hero-p) * 12vh), 0) scale(calc(1 + var(--hero-p) * .06));
}

.home-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--wp--custom--motion--slow) ease;
}

.home-hero.is-loaded .home-hero__video {
	opacity: 1;
}

/* Scanlines, and the shade that keeps the words readable. */
.home-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px),
		linear-gradient(90deg, rgba(11, 11, 13, .85) 0%, rgba(11, 11, 13, .55) 55%, rgba(11, 11, 13, 0) 80%),
		linear-gradient(180deg, rgba(11, 11, 13, 0) 55%, var(--wp--preset--color--ink) 100%);
}

.home-hero.has-spotlight::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(280px circle at var(--mx, 70%) var(--my, 40%), rgba(227, 18, 31, .16), transparent 70%);
	mix-blend-mode: screen;
}

/* The hero is a flex column, which would shrink-wrap and centre this box;
   full width keeps it on the same left edge as the header and every section. */
.home-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	opacity: calc(1 - var(--hero-p) * 1.6);
	transform: translate3d(0, calc(var(--hero-p) * -48px), 0);
}

.home-hero__inner > * + * {
	margin-block-start: 28px;
}

/* VIMA logo before the award line; one link to the Vendetta page. */
.home-hero__award {
	display: flex;
	align-items: center;
	gap: 12px;
	width: fit-content;
	text-decoration: none;
}

.home-hero__award img {
	flex: none;
	width: 64px;
	height: auto;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .6));
	transition: filter var(--wp--custom--motion--base) ease, transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.home-hero__award:hover img,
.home-hero__award:focus-visible img {
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .6)) drop-shadow(0 0 16px rgba(237, 234, 228, .35));
	transform: translateY(-2px);
}

.home-hero__award .eyebrow {
	transition: color var(--wp--custom--motion--base) ease;
}

.home-hero__award:hover .eyebrow,
.home-hero__award:focus-visible .eyebrow {
	color: var(--wp--preset--color--bone);
}

.home-hero .wordmark {
	display: block;
	width: min(520px, 100%);
	height: auto;
}

.home-hero__title {
	font-size: var(--wp--preset--font-size--xx-large);
	max-width: 760px;
}

/* Sound and Pause, bottom right, level with the buttons. */
.home-hero > .home-hero__side {
	position: absolute;
	z-index: 2;
	right: max(var(--wp--style--root--padding-right, 24px), calc((100% - 1180px) / 2));
	bottom: 96px;
	max-width: 360px;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	text-align: right;
	opacity: calc(1 - var(--hero-p) * 1.6);
}

.home-hero__controls {
	display: flex;
	gap: 8px;
}

.home-hero__controls[hidden] {
	display: none;
}

.hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	min-width: 44px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--smoke);
	border-radius: 999px;
	background: rgba(11, 11, 13, .4);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.hero-btn:hover {
	border-color: var(--wp--preset--color--bone);
}

.hero-btn[aria-pressed="true"] {
	border-color: var(--wp--preset--color--bone);
	background: rgba(237, 234, 228, .14);
}

.hero-btn--play {
	width: 44px;
	padding: 0;
}

.hero-btn .icon--sound-on,
.hero-btn .icon--play,
.hero-btn[aria-pressed="true"] .icon--sound-off,
.home-hero.is-paused .hero-btn .icon--pause {
	display: none;
}

.hero-btn[aria-pressed="true"] .icon--sound-on,
.home-hero.is-paused .hero-btn .icon--play {
	display: block;
}

.home-hero > .home-hero__scroll {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 20px;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ash);
	transform: translateX(-50%);
	opacity: calc(1 - var(--hero-p) * 4);
}

.home-hero__scroll::after {
	content: "";
	width: 1px;
	height: 32px;
	background: linear-gradient(var(--wp--preset--color--bone), transparent);
	transform-origin: top;
	animation: scroll-cue 1.8s var(--wp--custom--motion--ease) infinite;
}

@keyframes scroll-cue {
	0% { transform: scaleY(0); opacity: 1; }
	55% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- Shows ---------- */
.show-list .wp-block-post-template {
	border-top: 1px solid var(--wp--preset--color--graphite);
}

.show-row {
	gap: 24px;
	padding-block: 20px;
	border-bottom: 1px solid var(--wp--preset--color--graphite);
	transition: background-color var(--wp--custom--motion--fast) ease;
}

.show-row:hover {
	background: linear-gradient(90deg, rgba(227, 18, 31, .14), transparent 70%);
}

.show-row__when {
	flex: 0 0 140px;
	transition: transform var(--wp--custom--motion--fast) ease;
}

.show-row:hover .show-row__when {
	transform: translateX(4px);
}

.show-row__where {
	flex: 1;
}

.show-date {
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--bone);
}

.show-city {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	text-transform: uppercase;
	line-height: 1.05;
}

.show-venue {
	color: var(--wp--preset--color--ash);
	font-size: 0.9375rem;
}

/* ---------- Release cards ---------- */
.release-grid {
	gap: 24px;
}

.release-card > * + * {
	margin-block-start: 10px;
}

.release-card .meta {
	margin-block-start: 10px;
}

.release-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
	margin-block-start: 6px;
}

.release-card .wp-block-post-title a {
	color: var(--wp--preset--color--bone);
	text-decoration: none;
}

.release-card__cover {
	position: relative;
	isolation: isolate;
	margin: 0;
}

.release-card__cover a,
.release-card__cover img {
	position: relative;
	z-index: 1;
	display: block;
}

.release-card__cover img {
	border-radius: 3px;
	transition:
		box-shadow var(--wp--custom--motion--base) ease,
		transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

/* The vinyl that slides out of the sleeve. */
.release-card__cover::before {
	content: "";
	position: absolute;
	inset: 3%;
	z-index: 0;
	border-radius: 50%;
	background:
		radial-gradient(circle, #d8d4cc 0 3%, var(--wp--preset--color--stage) 3.5% 16%, transparent 16.5%),
		repeating-radial-gradient(circle, #111 0 2px, #1b1b1f 2px 3px);
	box-shadow: 0 0 0 1px #000;
	transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease);
}

.release-card:hover .release-card__cover img,
.release-card:focus-within .release-card__cover img {
	box-shadow: 0 12px 40px rgba(31, 111, 224, .45);
	transform: translateY(-4px);
}

.release-card:hover .release-card__cover::before,
.release-card:focus-within .release-card__cover::before {
	transform: translateX(22%) rotate(200deg);
}

/* ---------- Watch ---------- */
.watch {
	display: grid;
	grid-template-columns: minmax(0, 720fr) minmax(0, 420fr);
	gap: 40px;
	align-items: start;
}

.yt {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--soot);
}

.yt img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease);
}

.yt::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(11, 11, 13, .35);
}

.yt:hover img {
	transform: scale(1.03);
}

.yt__play {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	width: 76px;
	height: 76px;
	margin: -38px 0 0 -38px;
	border-radius: 50%;
	background: var(--wp--preset--color--bone);
	transition: transform var(--wp--custom--motion--fast) ease, box-shadow var(--wp--custom--motion--fast) ease;
}

.yt__play::before {
	content: "";
	position: absolute;
	left: 31px;
	top: 26px;
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--wp--preset--color--ink);
}

.yt:hover .yt__play {
	transform: scale(1.06);
	box-shadow: 0 0 0 6px rgba(237, 234, 228, .18);
}

.yt iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.yt.is-playing::after {
	display: none;
}

.watch__meta {
	margin-block-start: 14px;
}

.watch__title {
	font-size: var(--wp--preset--font-size--display-m);
	margin-block-start: 8px;
}

.watch__list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.watch__list a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-block: 16px;
	border-bottom: 1px solid var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--bone);
	text-decoration: none;
	transition: background-color var(--wp--custom--motion--fast) ease;
}

.watch__list li:first-child a {
	padding-top: 0;
}

.watch__row-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	text-transform: uppercase;
	line-height: 1.05;
	transition: color var(--wp--custom--motion--fast) ease;
}

.watch__list a:hover .watch__row-title,
.watch__list a[aria-current="true"] .watch__row-title {
	color: var(--wp--preset--color--corridor-text);
}

/* ---------- Story teaser ---------- */
.story {
	display: grid;
	grid-template-columns: 440px minmax(0, 600px);
	gap: 72px;
	align-items: center;
}

.story__lens {
	margin: 0;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--wp--preset--color--tungsten);
	box-shadow: 0 0 60px rgba(232, 144, 79, .18);
}

.story__photo {
	display: grid;
	justify-items: center;
	gap: 14px;
}

.story__photo .story__lens {
	width: 100%;
}

/* Photographer credits, small and quiet. */
.photo-credit {
	margin: 0;
	font-size: 11px;
	color: var(--wp--preset--color--ash);
}

/* On a page hero: bottom right, over the photo. */
.page-hero__credit {
	position: absolute;
	right: max(var(--wp--style--root--padding-right), calc((100% - 1180px) / 2));
	bottom: 32px;
}

.story__lens img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.story__text > * + * {
	margin-block-start: 22px;
}

.story__text h2 {
	font-size: var(--wp--preset--font-size--xx-large);
}

.timeline-teaser {
	list-style: none;
	margin-inline: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	max-width: 600px;
}

.timeline-teaser li {
	position: relative;
	padding-top: 19px;
}

.timeline-teaser li::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 4px;
	height: 1px;
	background: var(--wp--preset--color--smoke);
}

.timeline-teaser li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--tungsten);
}

.timeline-teaser li.is-now::before {
	background: var(--wp--preset--color--tungsten);
}

.timeline-teaser li.is-now .meta {
	color: var(--wp--preset--color--tungsten);
}

/* ---------- Join + press ---------- */
.join-press {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}

.join-press .card {
	border-radius: 6px;
}

.join-press > * + * {
	margin-block-start: 0;
}

.diorama-join__row {
	display: flex;
	gap: 10px;
	align-items: center;
}

.diorama-join input[type="email"] {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	height: 48px;
	padding: 0 18px;
	line-height: normal;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--bone);
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--smoke);
	border-radius: 999px;
}

.diorama-join input[type="email"]::placeholder {
	color: var(--wp--preset--color--smoke);
}

.diorama-join button {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	background: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--ink);
	border-radius: 999px;
	padding: 0.875rem 1.5rem;
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.diorama-join__privacy {
	margin-top: 12px;
	color: var(--wp--preset--color--smoke);
}

.diorama-join__privacy a,
.site-footer__bottom > .meta a {
	color: var(--wp--preset--color--ash);
}

.diorama-join__hp {
	position: absolute;
	left: -9999px;
}

.diorama-join__note {
	margin-top: 12px;
	font-size: 0.9375rem;
}

.diorama-join__note.is-ok { color: var(--wp--preset--color--exit); }
.diorama-join__note.is-error { color: var(--wp--preset--color--stage-text); }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--wp--preset--color--soot);
	border-top: 1px solid var(--wp--preset--color--graphite);
	padding-block: 56px 40px;
}

.site-footer a {
	text-decoration: none;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.site-footer__top,
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.site-footer__bottom {
	margin-top: 32px;
}

.site-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: 16px;
}

.site-footer__brand img {
	width: 48px;
	height: 48px;
}

.site-footer__socials {
	gap: 12px;
}

.site-footer__socials a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--wp--preset--color--graphite);
	border-radius: 50%;
	color: var(--wp--preset--color--corridor-text);
	transition:
		color var(--wp--custom--motion--base) ease,
		border-color var(--wp--custom--motion--base) ease,
		box-shadow var(--wp--custom--motion--base) ease,
		transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.site-footer__socials a:hover,
.site-footer__socials a:focus-visible {
	color: var(--wp--preset--color--bone);
	border-color: var(--wp--preset--color--corridor);
	box-shadow: 0 0 18px color-mix(in srgb, var(--wp--preset--color--corridor) 45%, transparent);
	transform: translateY(-2px);
}

.site-footer__nav a:hover {
	color: var(--wp--preset--color--bone);
}

.site-footer__bottom > .meta {
	color: var(--wp--preset--color--smoke);
}

.site-footer__credit::before {
	content: "·";
	margin-inline: 0.5em;
}

.site-footer__nav li + li::before {
	content: "·";
	margin-inline: 0.5em;
	color: var(--wp--preset--color--smoke);
}

.site-footer__nav a {
	color: var(--wp--preset--color--ash);
}

/* ---------- Server-rendered sections (Music, releases) ---------- */
section.room:has(> .wrap) {
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.wrap {
	max-width: 1180px;
	margin-inline: auto;
}

.wrap > * + * {
	margin-block-start: 24px;
}

.wrap > .eyebrow + h2 {
	margin-block-start: 22px;
}

h2 a,
h3 a {
	color: inherit;
	text-decoration: none;
}

/* Page heroes (inner pages) */
.page-hero {
	position: relative;
	min-height: 555px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-block: 150px 96px;
	background-color: var(--wp--preset--color--ink);
}

.page-hero__inner {
	width: 100%;
}

.page-hero__inner > * + * {
	margin-block-start: 24px;
}

.page-hero__inner .actions {
	margin-block-start: 32px;
}

.page-hero h1 {
	line-height: 0.95;
}

.page-hero--music {
	background:
		linear-gradient(90deg, var(--wp--preset--color--ink) 0%, rgba(11, 11, 13, .75) 60%, rgba(11, 11, 13, .2) 100%),
		linear-gradient(180deg, rgba(11, 11, 13, 0) 60%, var(--wp--preset--color--ink) 100%),
		url("assets/img/music-hero-desktop.jpg") 50% 50% / cover no-repeat,
		var(--wp--preset--color--ink);
}

/* Cover + info split (latest release, release detail) */
.release-split {
	display: grid;
	grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.release-split--wide {
	grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
	align-items: center;
}

.wrap.release-split > * + * {
	margin-block-start: 0;
}

.release-split__cover {
	margin: 0;
}

.release-split__cover img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.release-split__info > * + * {
	margin-block-start: 16px;
}

.release-split__info h1,
.release-split__info h2 {
	font-size: var(--wp--preset--font-size--xx-large);
}

.release-split__info .eyebrow + .meta {
	margin-block-start: 18px;
}

.release-detail {
	background: var(--wp--preset--color--soot);
	padding-block: 88px;
}

.latest-release {
	padding-block: 96px;
}

.tracklist {
	list-style: none;
	margin-inline: 0;
	padding: 8px 0;
}

.tracklist li {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding-block: 12px;
	border-bottom: 1px solid var(--wp--preset--color--graphite);
}

.tracklist__no {
	flex: 0 0 28px;
}

.tracklist__title {
	flex: 1;
	font-size: 1.0625rem;
}

/* Click-to-load player */
.player__card {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 14px 16px 14px 14px;
	background: var(--wp--preset--color--soot);
	border: 1px solid var(--wp--preset--color--graphite);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color var(--wp--custom--motion--fast) ease;
}

.player__card:hover {
	border-color: var(--wp--preset--color--smoke);
}

.player__card:focus-visible {
	outline: 2px solid var(--wp--preset--color--bone);
	outline-offset: 3px;
}

.player__thumb img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 4px;
}

.player__track {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.player__names {
	display: flex;
	align-items: baseline;
	gap: 10px;
	white-space: nowrap;
	overflow: hidden;
}

.player__title {
	font-size: 1.0625rem;
	color: var(--wp--preset--color--bone);
	overflow: hidden;
	text-overflow: ellipsis;
}

.player__artist {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ash);
}

.player__bar {
	position: relative;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--graphite);
}

.player__bar::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 22%;
	border-radius: 2px;
	background: var(--wp--preset--color--corridor);
}

.player__times {
	display: flex;
	justify-content: space-between;
}

.player__play {
	position: relative;
	flex: 0 0 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--bone);
	transition: box-shadow var(--wp--custom--motion--fast) ease, transform var(--wp--custom--motion--fast) ease;
}

.player__play::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 16px;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent var(--wp--preset--color--ink);
}

.player__card:hover .player__play {
	transform: scale(1.06);
	box-shadow: 0 0 24px rgba(25, 201, 155, .45);
}

.player iframe {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 12px;
	background: var(--wp--preset--color--soot);
}

.listen-links {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 24px;
	padding-top: 6px;
}

.listen-links a {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--corridor-text);
	text-decoration: none;
}

.listen-links a:hover {
	color: var(--wp--preset--color--bone);
}

.release-split__info .actions {
	margin-block-start: 24px;
}

.release-detail__notes {
	color: var(--wp--preset--color--ash);
}

/* Award badges */
.awards {
	list-style: none;
	margin-inline: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.award {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 10px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--tungsten) 55%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--tungsten) 10%, transparent);
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tungsten);
}

.award__icon {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #f6c79e, var(--wp--preset--color--tungsten) 60%, #8a4a1c);
	box-shadow: 0 0 10px rgba(232, 144, 79, .6);
}

.eyebrow a {
	color: inherit;
	text-decoration: none;
}

.eyebrow a:hover {
	color: var(--wp--preset--color--bone);
}

/* Release story: free content from the editor (award photos, credits, notes) */
.release-story__content > * {
	max-width: 720px;
}

.release-story__content > .wp-block-gallery,
.release-story__content > .alignwide,
.release-story__content > .alignfull {
	max-width: none;
}

.release-story__content > p {
	color: var(--wp--preset--color--ash);
}

.release-story__content h2 {
	font-size: var(--wp--preset--font-size--xx-large);
}

.release-story__content .wp-block-gallery {
	gap: 24px;
}

.release-story__content .wp-block-gallery .wp-block-image {
	position: relative;
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--soot);
}

.release-story__content .wp-block-gallery .wp-block-image img {
	transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease);
}

.release-story__content .wp-block-gallery .wp-block-image:hover img {
	transform: scale(1.03);
}

.release-story__content .wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-direction: column;
	background: transparent;
	overflow: visible;
}

.release-story__content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	flex: none;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 6px;
}

.release-story__content .wp-block-gallery.has-nested-images figure.wp-block-image > a {
	flex: none;
	display: block;
}

.release-story__content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption.wp-element-caption {
	position: static;
	max-height: none;
	overflow: visible;
	background: none;
	padding: 12px 0 0;
	text-align: left;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--wp--preset--color--ash);
	text-shadow: none;
}

.release-story__content .wp-block-gallery.has-nested-images figure.wp-block-image::before {
	display: none;
}

.release-story__content .eyebrow {
	color: var(--wp--preset--color--tungsten);
}

/* Live + on TV */
.appearances {
	list-style: none;
	margin-inline: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--graphite);
}

.appearance {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	padding-block: 24px;
	border-bottom: 1px solid var(--wp--preset--color--graphite);
	transition: background-color var(--wp--custom--motion--fast) ease;
}

.appearance:hover {
	background: linear-gradient(90deg, rgba(232, 144, 79, .1), transparent 70%);
}

.appearance__date {
	color: var(--wp--preset--color--tungsten);
}

.appearance.has-thumb {
	grid-template-columns: 280px minmax(0, 1fr) auto;
	gap: 32px;
}

.appearance__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--soot);
}

.appearance__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease);
}

.appearance__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(11, 11, 13, .25);
}

.appearance__thumb .yt__play {
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
}

.appearance__thumb .yt__play::before {
	left: 21px;
	top: 17px;
	border-width: 9px 0 9px 15px;
}

.appearance:hover .appearance__thumb img {
	transform: scale(1.04);
}

.appearance__body > * + * {
	margin-block-start: 8px;
}

.appearance__body p {
	max-width: 620px;
}

/* Release browser */
.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.filter {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--smoke);
	background: transparent;
	color: var(--wp--preset--color--bone);
	transition: background-color var(--wp--custom--motion--fast) ease, color var(--wp--custom--motion--fast) ease;
}

.filter:hover {
	border-color: var(--wp--preset--color--bone);
}

.filter[aria-pressed="true"] {
	background: var(--wp--preset--color--bone);
	border-color: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--ink);
}

ul.release-grid--all {
	list-style: none;
	margin-inline: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px 24px;
}

.release-card[hidden] {
	display: none;
}

.release-card__title {
	font-size: var(--wp--preset--font-size--x-large);
	margin-block-start: 6px;
}

.release-video .watch__featured {
	max-width: 720px;
}

/* ---------- Shows page ---------- */
.page-hero--shows {
	background:
		linear-gradient(90deg, var(--wp--preset--color--ink) 0%, rgba(11, 11, 13, .7) 40%, rgba(11, 11, 13, 0) 70%),
		linear-gradient(180deg, rgba(11, 11, 13, 0) 60%, var(--wp--preset--color--ink) 100%),
		/* Diorama on stage (2024), full width. */
		url("assets/img/shows-hero-desktop.jpg") 50% 45% / cover no-repeat,
		var(--wp--preset--color--ink);
}

.room--soot {
	background: var(--wp--preset--color--soot);
}

.past-shows {
	list-style: none;
	margin-inline: 0;
	padding: 0;
}

.past-show {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr) 200px 100px;
	gap: 32px;
	align-items: center;
	padding-block: 20px;
	border-bottom: 1px solid var(--wp--preset--color--graphite);
	transition: background-color var(--wp--custom--motion--fast) ease;
}

.past-show:hover {
	background: linear-gradient(90deg, rgba(227, 18, 31, .1), transparent 70%);
}

.past-show__date {
	color: var(--wp--preset--color--ash);
}

.past-show__title {
	font-size: var(--wp--preset--font-size--x-large);
}

.past-show__link {
	text-align: right;
}

.past-show__link a {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--corridor-text);
	text-decoration: none;
}

.past-show__link a:hover {
	color: var(--wp--preset--color--bone);
}

.booking {
	display: grid;
	grid-template-columns: minmax(0, 521fr) minmax(0, 579fr);
	gap: 80px;
	align-items: start;
	padding-block: 16px;
}

.booking__pitch > * + * {
	margin-block-start: 18px;
}

.booking__contact {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 0.8125rem;
}

.booking__contact .meta {
	color: var(--wp--preset--color--bone);
}

.booking__contact a {
	color: var(--wp--preset--color--corridor-text);
}

.booking__include {
	border: 1px solid var(--wp--preset--color--smoke);
	border-radius: 12px;
	padding: 24px 28px;
}

.booking__include ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.booking__include li {
	position: relative;
	padding: 14px 0 14px 20px;
	border-bottom: 1px solid var(--wp--preset--color--graphite);
	font-size: 1.0625rem;
}

.booking__include li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: var(--wp--preset--color--stage);
}

.show-detail {
	padding-block: 96px;
}

.show-detail__grid {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.wrap.show-detail__grid > * + * {
	margin-block-start: 0;
}

.show-detail__when > * + *,
.show-detail__info > * + * {
	margin-block-start: 16px;
}

.show-detail__date {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 1.125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
}

.show-detail__info h1 {
	font-size: var(--wp--preset--font-size--xx-large);
}

.show-detail__info .actions {
	margin-block-start: 28px;
}

.status-pill {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--smoke);
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.status-pill--sold-out,
.status-pill--cancelled {
	border-color: var(--wp--preset--color--stage);
	color: var(--wp--preset--color--stage-text);
}

.status-pill--on-sale,
.status-pill--few-left,
.status-pill--free {
	border-color: var(--wp--preset--color--exit);
	color: var(--wp--preset--color--exit);
}

/* ---------- Mobile: thumb-zone action bar ---------- */
.mobile-actions {
	display: none;
}

/* ---------- Tablet and down ---------- */
@media (max-width: 1100px) {
	.story {
		grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
		gap: 48px;
	}
}

@media (max-width: 781px) {
	.site-header {
		padding-block: 12px;
	}

	.site-header .site-header__listen {
		display: none;
	}

	/* Phones: the footage fills the screen, words at the bottom, clear of the thumb bar. */
	.home-hero {
		--header-h: 67px;
		padding-block: 96px 112px;
	}

	.home-hero > .home-hero__media {
		background-image: url("assets/img/hero-loop-mobile.jpg");
		background-position: 50% 30%;
	}

	.home-hero__media::after {
		background:
			repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px),
			linear-gradient(180deg, rgba(11, 11, 13, .35) 0%, rgba(11, 11, 13, 0) 18%, rgba(11, 11, 13, 0) 35%, rgba(11, 11, 13, .85) 70%, var(--wp--preset--color--ink) 100%);
	}

	.home-hero__inner > * + * {
		margin-block-start: 20px;
	}

	.home-hero__award img {
		width: 52px;
	}

	.home-hero__actions {
		display: none;
	}

	.home-hero > .home-hero__side {
		top: 16px;
		right: 16px;
		bottom: auto;
	}

	.hero-btn {
		height: 40px;
		min-width: 40px;
	}

	.hero-btn--play {
		width: 40px;
	}

	.home-hero > .home-hero__scroll {
		display: none;
	}

	.room {
		padding-block: 56px;
	}

	.room--tight {
		padding-block: 40px 56px;
	}

	.release-grid.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 32px 16px;
	}

	.release-card .wp-block-post-title {
		font-size: 1.0625rem;
	}

	.watch,
	.join-press {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.join-press {
		gap: 16px;
	}

	.story {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.story__lens,
	.story__photo .story__lens {
		width: min(260px, 70vw);
		margin-inline: auto;
	}

	/* Phones: the hero photo sits above the text, so the credit follows the text. */
	.page-hero__credit {
		position: static;
		width: 100%;
		margin-top: 24px;
	}

	.show-row {
		flex-wrap: wrap !important;
	}

	.show-row__when {
		flex-basis: 100%;
	}

	.page-hero {
		min-height: 0;
		padding-block: 300px 40px;
	}

	.page-hero--music {
		background:
			linear-gradient(180deg, rgba(11, 11, 13, .1) 0%, rgba(11, 11, 13, .45) 40%, var(--wp--preset--color--ink) 70%),
			url("assets/img/music-hero-mobile.jpg") 50% 0% / 100% auto no-repeat,
			var(--wp--preset--color--ink);
	}

	.release-split,
	.release-split--wide {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.release-detail,
	.latest-release {
		padding-block: 56px;
	}

	ul.release-grid--all {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 16px;
	}

	.release-card__title {
		font-size: 1.0625rem;
	}

	.player__times span:last-child {
		display: none;
	}

	.appearance,
	.appearance.has-thumb {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.appearance__link {
		justify-self: start;
	}

	/* Phones: the stage photo is a strip on top, the text below it. */
	.page-hero--shows {
		min-height: 0;
		padding-block: calc(57.3vw + 16px) 40px;
		background:
			linear-gradient(180deg, rgba(11, 11, 13, 0) 30vw, var(--wp--preset--color--ink) 57.3vw),
			url("assets/img/shows-hero-mobile.jpg") 50% 0% / 100% auto no-repeat,
			var(--wp--preset--color--ink);
	}

	.past-show {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}

	.past-show__link {
		text-align: left;
	}

	.booking,
	.show-detail__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.show-detail {
		padding-block: 56px;
	}

	.site-footer {
		padding-block: 40px calc(128px + env(safe-area-inset-bottom, 0px));
	}

	.site-footer__top,
	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	/* Phones: the credit gets its own line under the copyright. */
	.site-footer__credit {
		display: block;
		margin-top: 8px;
	}

	.site-footer__credit::before {
		content: none;
	}

	.mobile-actions {
		display: flex;
		position: fixed;
		inset: auto 0 0 0;
		z-index: 60;
		gap: 10px;
		padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
		background: color-mix(in srgb, var(--wp--preset--color--ink) 92%, transparent);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-top: 1px solid var(--wp--preset--color--graphite);
	}

	.mobile-actions .wp-element-button {
		flex: 1;
		box-sizing: border-box;
		min-height: 48px;
	}
}