/* =============================================================
   Hampton — theme stylesheet
   Palette: #41483A (dark olive) / #FFFBE0 (cream)
   Motion rules: opacity + color transitions only for hovers/reveals.
   Transform is used strictly for the carousel's sliding mechanism —
   never for hover "lift" or "grow" effects, and never with a drop shadow.
   ============================================================= */

:root {
	--color-dark: #41483a;
	--color-dark-deep: #262b20;
	--color-cream: #fffbe0;
	--color-overlay-dark: rgba(38, 43, 32, 0.6);

	--font-display: "spirits-sharp", Georgia, "Times New Roman", serif;
	--font-display-weight: 300;
	--font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

	--ease: cubic-bezier(0.65, 0, 0.35, 1);
	--transition-fast: 0.2s ease;
	--transition-medium: 0.45s var(--ease);

	--container: 1440px;
	--gutter: clamp(1.25rem, 4vw, 6rem);
	/* Shared right-hand inset for the hero — used by both the header nav
	   stack and the featured-song block so they always sit on the same
	   vertical column, no matter the viewport width. */
	--hero-column-inset: clamp(4rem, 11vw, 9rem);
}

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

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--color-dark-deep);
	color: var(--color-cream);
	font-family: var(--font-body);
	line-height: 1.5;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	display: block;
}

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

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

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	width: auto;
	height: auto;
	clip: auto;
	background: var(--color-cream);
	color: var(--color-dark);
	padding: 0.75rem 1.25rem;
	z-index: 100;
	border-radius: 2px;
}

/* ---------- Scroll reveal ---------- */
.reveal {
	opacity: 0;
	transition: opacity 0.8s ease;
}

.reveal.is-visible {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transition: none;
	}
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-block;
	padding: 0.85em 1.9em;
	background: var(--color-cream);
	color: var(--color-dark);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	border: 1px solid var(--color-cream);
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn:hover,
.btn:focus-visible {
	background: transparent;
	color: var(--color-cream);
}

/* ---------- Video overlay ----------
   Fixed full-viewport layer that stays put while the page scrolls, so it
   always sits over whichever section background is currently in view. */
.video-overlay {
	position: fixed;
	inset: 0;
	height: 100vh;
	height: 100svh;
	width: 100%;
	z-index: 5;
	pointer-events: none;
	overflow: hidden;
	opacity: var(--overlay-opacity, 0.35);
	mix-blend-mode: var(--overlay-blend, overlay);
}

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

/* ---------- Layout shells ---------- */
.section {
	position: relative;
	overflow: hidden;
}

/* Default: the background photo runs the full width of the screen and its
   height simply follows from its own aspect ratio — nothing is ever
   cropped, and there's no letterboxing because the section's height comes
   from the image itself. Editors can opt in (per image, via ACF) to a
   fixed-height fill/crop treatment instead — see .section--bg-crop below. */
.section__bg {
	position: relative;
}

.section__bg-image {
	width: 100%;
	height: auto;
	display: block;
}

.section--bg-crop .section__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--color-dark-deep);
}

.section--bg-crop .section__bg-image {
	height: 100%;
	object-fit: cover;
}

/* A hero video carries .section__bg-image too, so every rule above (crop,
   focus point, the mobile fill treatment) already applies to it unchanged.
   All it needs on top is a dark base so there's no white flash in the beat
   before the first frame paints. */
.section__bg-video {
	background-color: var(--color-dark-deep);
}

/* ---------- Header ---------- */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 20;
	display: flex;
	justify-content: flex-end;
	padding: clamp(3.5rem, 9vw, 7rem) var(--hero-column-inset) 0;
}

/* Cream marks solve the dark frames but not the blown-out ones — the b-roll
   swings from near-black to bright white within a single loop, so a fixed
   color can't win everywhere on its own. This scrim fades out well before it
   reads as a bar, and only darkens the top band the header sits in. Drop this
   rule if the hero goes back to a consistently dark photo. */
.site-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: clamp(260px, 34vh, 420px);
	background: linear-gradient(to bottom, rgba(38, 43, 32, 0.5), rgba(38, 43, 32, 0));
	pointer-events: none;
	z-index: -1;
}

/* Alignment of the nav/logo/social stack is editor-controlled (ACF), set
   independently for desktop and mobile since the hero photo's subject can
   sit in different spots at each. */
.site-header--desktop-left {
	justify-content: flex-start;
}

.site-header--desktop-center {
	justify-content: center;
}

.site-header--desktop-right {
	justify-content: flex-end;
}

.site-header__inner {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.9rem, 2vw, 1.75rem);
	text-align: center;
}

.site-nav {
	display: flex;
	gap: clamp(1.5rem, 3vw, 3rem);
}

/* Nav links and social icons are colored/sized specially only in the hero
   header — the footer reuses .social-links__link and keeps its own
   (cream) look. */
.site-header .site-nav__link {
	font-size: clamp(0.9rem, 1.3vw, 1.1rem);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-cream);
	opacity: 0.92;
	transition: opacity var(--transition-fast);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
	opacity: 1;
}

.site-header .site-logo {
	margin: clamp(1rem, 3vw, 2.5rem) 0;
}

.site-header .site-logo__image {
	max-height: clamp(3.5rem, 6.5vw, 8rem);
}

.site-logo__image {
	max-height: clamp(2.75rem, 5vw, 6.5rem);
	width: auto;
	/* The uploaded wordmark is a dark silhouette on transparency, so its color
	   lives in the pixels rather than in CSS. brightness(0) flattens it to
	   black whatever color it was uploaded in, invert(1) makes it white, and
	   the sepia/saturate pair tints that white to --color-cream (#fffbe0).
	   Alpha is untouched, so the antialiased edges stay clean. */
	filter: brightness(0) invert(1) sepia(1) saturate(2);
}

.site-logo__text {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: var(--font-display-weight);
	font-style: normal;
	font-size: clamp(2rem, 4vw, 4.5rem);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-cream);
}

.social-links {
	display: flex;
	gap: 1rem;
}

.social-links__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--color-cream);
	opacity: 0.85;
	transition: opacity var(--transition-fast);
}

.social-links__link:hover,
.social-links__link:focus-visible {
	opacity: 1;
}

.site-header .social-links__link {
	width: clamp(20px, 1.5vw, 24px);
	height: clamp(20px, 1.5vw, 24px);
	color: var(--color-cream);
}

.social-links__icon {
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
}

/* ---------- Hero + Featured Song ---------- */
/* Only forced to a viewport-based height in crop mode — see
   .section--bg-crop.section__bg above. In the default (no-crop) mode the
   hero's height is intrinsic, following the background photo. */
.section-hero.section--bg-crop {
	min-height: 128vh;
	min-height: 128svh;
}

.featured-song {
	position: absolute;
	right: var(--hero-column-inset);
	bottom: 8%;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.5rem;
	/* One formula for every breakpoint — same position (right/bottom) and
	   same scaling rule on mobile as desktop, just naturally smaller at
	   narrow widths, so it can never outgrow the hero photo. */
	width: clamp(120px, 26vw, 560px);
}

.featured-song__artwork {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.featured-song__artwork-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.featured-song__details {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	text-align: center;
}

.featured-song__label {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.85;
}

.featured-song__title {
	margin: 0;
	font-family: var(--font-display);
	font-style: normal;
	font-weight: var(--font-display-weight);
	font-size: clamp(1.6rem, 2.75vw, 3.25rem);
	text-transform: uppercase;
}

/* ---------- Music / Videos ----------
   Music and Videos each get an identical-width column pinned to the left
   half of the section, leaving the right half of the shared background
   photo uncovered. Within that column, one slide is always the full-opacity
   "front" card with the next/previous slides peeking, dimmed, at its edges.
   Video slides use a wider flex-basis (rectangular thumbnails need the
   space) so they peek less than Music's square art, even though both
   columns are the same width. */
.section-music-videos {
	padding: clamp(3rem, 8vw, 8rem) 0;
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 8vw, 6rem);
}

.section-music-videos__left-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.carousel-block {
	position: relative;
	z-index: 10;
	width: 50%;
	padding-left: var(--gutter);
	text-align: center;
}

.carousel-block__heading {
	margin: 0 0 1.75rem;
	font-family: var(--font-display);
	font-weight: var(--font-display-weight);
	font-style: normal;
	font-size: clamp(1.75rem, 3vw, 3.5rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Reuses .carousel-block's column width/gutter/responsive rules; adds its
   own artwork + label + title + button layout in place of a carousel. */
.new-release-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.new-release-block__artwork {
	width: 100%;
	max-width: 320px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: rgba(65, 72, 58, 0.55);
}

.new-release-block__artwork-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.new-release-block__title {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	opacity: 0.9;
}

/* The heading's own bottom margin (shared with .carousel-block__heading)
   would stack with the flex gap below, doubling the space before the
   artwork — cancel it out so only the gap applies. */
.new-release-block .carousel-block__heading {
	margin-bottom: 0;
}

.carousel {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1.5vw, 1.5rem);
}

.carousel__arrow {
	flex: 0 0 auto;
	width: clamp(20px, 1.6vw, 30px);
	height: clamp(20px, 1.6vw, 30px);
	color: var(--color-cream);
	opacity: 0.8;
	transition: opacity var(--transition-fast);
}

.carousel__arrow:hover,
.carousel__arrow:focus-visible {
	opacity: 1;
}

.carousel__arrow[disabled] {
	opacity: 0.25;
	cursor: default;
}

.carousel__arrow svg {
	width: 100%;
	height: 100%;
}

.carousel__viewport {
	flex: 1 1 auto;
	overflow: hidden;
}

.carousel__track {
	display: flex;
	align-items: center;
	transition: transform var(--transition-medium);
	will-change: transform;
}

/* The front/active card sits at its natural size; side cards are scaled
   down and pulled in with a negative margin so they tuck partially behind
   it rather than sitting beside it with a gap. */
.carousel__slide {
	flex: 0 0 62%;
	margin-left: -16%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	opacity: 0.5;
	transform: scale(0.82);
	transition: opacity var(--transition-medium), transform var(--transition-medium);
	z-index: 1;
}

.carousel__slide:first-child {
	margin-left: 0;
}

.carousel__slide.is-active {
	opacity: 1;
	transform: scale(1);
	z-index: 2;
}

.carousel--video .carousel__slide {
	flex-basis: 86%;
	margin-left: -9%;
}

.carousel--video .carousel__slide:first-child {
	margin-left: 0;
}

.carousel__card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: rgba(65, 72, 58, 0.55);
	overflow: hidden;
}

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

.carousel__card--video {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.carousel__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-cream);
	background: rgba(38, 43, 32, 0.25);
	transition: background var(--transition-fast);
}

.carousel__card--video:hover .carousel__play,
.carousel__card--video:focus-visible .carousel__play {
	background: rgba(38, 43, 32, 0.4);
}

.carousel__play svg {
	width: 44px;
	height: 44px;
}

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

.carousel__caption {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	opacity: 0.9;
}

/* ---------- About ---------- */
/* Capped so a long bio doesn't stretch the whole section (and the photo
   along with it) to an awkward height on desktop — the bio scrolls inside
   its own panel instead if it ever runs longer than the cap allows. */
.section-about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: clamp(560px, 100vh, 900px);
}

.section-about--no-image {
	display: block;
	min-height: 0;
}

.about__image {
	position: relative;
	z-index: 10;
	height: 100%;
}

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

.about__panel {
	position: relative;
	z-index: 10;
	height: 100%;
	display: flex;
	align-items: center;
	background-image: var(--about-panel-bg, none);
	background-size: cover;
	background-position: center;
}

.about__panel-overlay {
	position: absolute;
	inset: 0;
}

/* max-height/overflow live here (not on the flex container itself) so a
   too-long bio scrolls within its own box instead of affecting how the
   block is vertically centered in .about__panel. */
.about__panel-content {
	position: relative;
	z-index: 1;
	max-height: 100%;
	overflow-y: auto;
	padding: clamp(2.5rem, 5.5vw, 7rem);
}

.about__heading {
	margin: 0 0 1.25rem;
	font-family: var(--font-display);
	font-weight: var(--font-display-weight);
	font-style: normal;
	font-size: clamp(2rem, 3.5vw, 4rem);
	text-transform: uppercase;
}

.about__content {
	font-size: 0.95rem;
	line-height: 1.75;
}

.about__content p {
	margin: 0 0 1.1em;
}

.about__content p:last-child {
	margin-bottom: 0;
}

/* ---------- Contact ---------- */
.section-contact {
	position: relative;
	background-color: var(--color-dark-deep);
	background-image: var(--contact-bg, none);
	background-size: cover;
	background-position: center;
	padding: clamp(4rem, 9vw, 8rem) var(--gutter);
}

.section-contact__overlay {
	position: absolute;
	inset: 0;
}

.section-contact__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.section-contact__heading {
	max-width: none;
	margin: 0 0 0.75rem;
	font-family: var(--font-display);
	font-weight: var(--font-display-weight);
	font-style: normal;
	font-size: clamp(1rem, 4.5vw, 2.75rem);
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--color-cream);
}

.section-contact__subheading {
	margin: 0 0 2.5rem;
	font-size: 0.9rem;
	opacity: 0.75;
}

.section-contact__form {
	width: 100%;
	max-width: 480px;
}

.section-contact__form .gform_wrapper {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0;
}

.section-contact__form .gform_wrapper .gform_fields {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.section-contact__form .gform_wrapper .gfield {
	text-align: left;
}

.section-contact__form .gform_wrapper label.gfield_label,
.section-contact__form .gform_wrapper legend.gfield_label {
	color: var(--color-cream);
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.85;
	margin-bottom: 0.5em;
}

/* GF marks required fields in red by default (.gfield_required /
   .gfield_required_asterisk) — tone that down to match the cream palette
   instead of a clashing red accent. */
.section-contact__form .gform_wrapper .gfield_required {
	color: var(--color-cream);
	opacity: 0.7;
}

.section-contact__form .gform_wrapper .ginput_container input,
.section-contact__form .gform_wrapper .ginput_container select,
.section-contact__form .gform_wrapper .ginput_container textarea {
	width: 100%;
	background: transparent;
	border: 1px solid rgba(255, 251, 224, 0.4);
	border-radius: 0;
	padding: 0.7em 0.9em;
	color: var(--color-cream);
	font-family: var(--font-body);
	font-size: 0.85rem;
	transition: border-color var(--transition-fast);
}

.section-contact__form .gform_wrapper textarea {
	min-height: 6em;
	resize: vertical;
}

.section-contact__form .gform_wrapper .ginput_container input::placeholder,
.section-contact__form .gform_wrapper .ginput_container textarea::placeholder {
	color: rgba(255, 251, 224, 0.55);
}

.section-contact__form .gform_wrapper .ginput_container input:focus,
.section-contact__form .gform_wrapper .ginput_container select:focus,
.section-contact__form .gform_wrapper .ginput_container textarea:focus {
	outline: none;
	border-color: var(--color-cream);
}

.section-contact__form .gform_wrapper .gform_footer {
	margin-top: 1.5rem;
	padding: 0;
	justify-content: center;
}

.section-contact__form .gform_wrapper .gform_button {
	display: inline-block;
	padding: 0.85em 6em;
	background: var(--color-cream) !important;
	color: var(--color-dark) !important;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase !important;
	border: 1px solid var(--color-cream);
	border-radius: 0;
	text-align: center;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.section-contact__form .gform_wrapper .gform_button:hover,
.section-contact__form .gform_wrapper .gform_button:focus-visible {
	background: transparent !important;
	color: var(--color-cream) !important;
	cursor: pointer;
}

.section-contact__form .gform_wrapper .gfield_description,
.section-contact__form .gform_wrapper .gform_description {
	color: var(--color-cream);
	opacity: 0.7;
	font-size: 0.75rem;
}

.section-contact__form .gform_wrapper .validation_message,
.section-contact__form .gform_wrapper .gfield_validation_message {
	color: #ffb4b4;
	font-size: 0.75rem;
	margin-top: 0.4em;
}

.section-contact__form .gform_confirmation_message {
	color: var(--color-cream);
	font-family: var(--font-body);
	font-size: 0.85rem;
}

/* ---------- Footer ---------- */
.site-footer {
	position: relative;
	background-image: var(--footer-bg, none);
	background-size: cover;
	background-position: center;
	padding: clamp(2.5rem, 5vw, 5rem) var(--gutter);
}

.site-footer__overlay {
	position: absolute;
	inset: 0;
}

.site-footer__inner {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
}

.site-logo--footer {
	display: inline-block;
	margin: clamp(1rem, 3vw, 2.5rem) 0;
}

.site-footer__nav {
	display: flex;
	gap: 2rem;
}

.site-footer__nav-link {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.85;
	transition: opacity var(--transition-fast);
}

.site-footer__nav-link:hover,
.site-footer__nav-link:focus-visible {
	opacity: 1;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1rem;
	font-size: 0.7rem;
	opacity: 0.7;
	margin-top: 1rem;
}

.site-footer__legal a {
	transition: opacity var(--transition-fast);
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
	opacity: 0.75;
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 900px) {
	.carousel-block {
		width: 100%;
		padding-left: var(--gutter);
		padding-right: var(--gutter);
	}

	.section-about {
		grid-template-columns: 1fr;
		height: auto;
	}

	.about__panel {
		height: auto;
	}

	.about__image {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 640px) {
	/* Mobile-only: always crop the hero photo to fill a slightly taller
	   frame here, regardless of the ACF "Crop Image to Fill Screen"
	   setting — desktop is untouched, and .site-header/.featured-song's
	   own rules aren't changed, so they stay positioned exactly as they
	   already are (just against a taller hero on this breakpoint). */
	.section-hero .section__bg {
		position: absolute;
		inset: 0;
		z-index: 0;
		background-color: var(--color-dark-deep);
	}

	.section-hero .section__bg-image {
		height: 100%;
		object-fit: cover;
	}

	.section-hero {
		min-height: 95vh;
		min-height: 95svh;
	}

	.site-header {
		padding: 2rem 1.5rem 0;
	}

	.site-header .social-links__link {
		width: 16px;
		height: 16px;
	}

	.featured-song {
		gap: 0.75rem;
		width: clamp(150px, 34vw, 260px);
		bottom: 11%;
		right: calc(var(--hero-column-inset) - 1rem);
	}

	/* The bulk of the "extra" gap here is line-height leading around large
	   display type, not the flex gap itself — tighten both. Switched from
	   a uniform gap to explicit margins so the title→button spacing can
	   be set separately (near-zero) from the label→title spacing. */
	.featured-song__details {
		gap: 0;
	}

	.featured-song__label {
		line-height: 1.2;
	}

	.featured-song__title {
		line-height: 1.1;
		margin-top: 0.35rem;
	}

	.featured-song .btn {
		margin-top: 0.35rem;
		font-size: clamp(0.6rem, 2.8vw, 0.7rem);
		padding: clamp(0.6em, 2.2vw, 0.8em) clamp(1.1em, 4.5vw, 1.6em);
	}

	.site-header--mobile-left {
		justify-content: flex-start;
	}

	.site-header--mobile-center {
		justify-content: center;
	}

	.site-header--mobile-right {
		justify-content: flex-end;
	}

	.site-nav {
		gap: 1rem;
	}

	/* Floor so the header and featured-song block always have enough room
	   between them, even in the default (no-crop) mode where the hero's
	   height otherwise just follows the photo's own aspect ratio — a
	   landscape-ish photo at phone width alone isn't always tall enough. */
	.section-hero.section--bg-crop {
		min-height: 118vh;
		min-height: 118svh;
	}

	.carousel {
		gap: 0.5rem;
	}

	.carousel__arrow {
		width: 22px;
		height: 22px;
	}

	.site-footer__legal {
		font-size: 0.65rem;
	}
}