/* =========================================================
   Sirup Label – Basis-Styles (Magenta/Ink brand, Light default)
   Farben stammen aus dem alten Theme-Export (settings.csv) bzw.
   deren Invertierung fuer die helle Variante:
   Primary #e41460, Secondary #8a0235
   ========================================================= */

:root {
	/* Light is the default look. */
	--sirup-bg: #f5f4f1;
	--sirup-bg-raised: #ffffff;
	--sirup-ink: #8a0235;
	--sirup-magenta: #e41460;
	--sirup-text: #14141a;
	--sirup-text-muted: #5c5c66;
	--sirup-border: #e1dfd9;

	/* Typography: Neue Helvetica only — Black / Bold / Medium.
	   "Neue Helvetica" itself ships as a licensed font (not on Google Fonts);
	   the stack below falls back to "Helvetica Neue" / Helvetica / Arial so
	   the same weights render correctly on macOS, Windows and Linux until a
	   licensed webfont file (woff2) is supplied and @font-face'd here. */
	--sirup-font: "Neue Helvetica", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--sirup-font-display: var(--sirup-font);
	--sirup-font-body: var(--sirup-font);
	--sirup-weight-medium: 500;
	--sirup-weight-bold: 700;
	--sirup-weight-black: 900;
}

/* Text highlight utility — for the occasional hand-picked word/phrase inside
   body copy that should stand out in the brand's dark magenta ("ink"). Use
   sparingly: wrap just the words that need it, e.g. <span class="hl">25 years</span>. */
.hl { color: var(--sirup-ink); }

/* Drop in a licensed Neue Helvetica webfont here when available, e.g.:
@font-face {
	font-family: "Neue Helvetica";
	src: url("../fonts/NeueHelvetica-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
*/

* { box-sizing: border-box; }

html, body {
	margin: 0;
	background: var(--sirup-bg);
	color: var(--sirup-text);
	font-family: var(--sirup-font-body);
	font-weight: var(--sirup-weight-medium);
	line-height: 1.5;
}

/* Faint sitewide echo of the 3D artwork: a fixed backdrop behind every
   section (not just the hero) so the background reads as one continuous
   atmosphere rather than a graphic confined to a single block. Kept very
   subtle per brand direction ("nicht zu extrem"). Multiply reads correctly
   on the light default; dark mode switches it to screen further down. */
body {
	position: relative;
}
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: url("../images/bg-hero.webp");
	background-size: cover;
	background-position: center 35%;
	background-repeat: no-repeat;
	opacity: 0.05;
	mix-blend-mode: multiply;
	pointer-events: none;
}

a { color: var(--sirup-text); text-decoration: none; }
a:hover { color: var(--sirup-magenta); }

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

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Header ---------- */
/* The blurred background lives on ::before rather than directly on
   .site-header: a `backdrop-filter` (like `filter`) on an element makes
   IT the positioning container for any `position: fixed` descendant —
   including the mobile nav dropdown further down. With the filter on
   .site-header itself, the fixed-position mobile menu ended up anchored
   to the ~70px-tall header box instead of the viewport, so on iOS it
   rendered squashed into the header and appeared hidden behind the
   page's background imagery when opened. Keeping .site-header free of
   filter/transform/will-change lets the fixed nav anchor to the real
   viewport as intended. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
}
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(245, 244, 241, 0.9);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--sirup-border);
}

/* Logo artwork ships as a black wordmark+mark on a transparent PNG (real
   alpha channel, re-rendered from the vector EPS — no more flattened white
   box behind it). Dark mode inverts it to white via filter, further down. */
.site-header .logo img,
.site-footer .logo img { height: 28px; width: auto; }
.site-footer .logo img { height: 22px; margin-bottom: 16px; }

.site-header nav ul {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header nav a {
	font-size: 13px;
	font-weight: var(--sirup-weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sirup-text-muted);
}

.site-header nav a:hover,
.site-header nav .current-menu-item a { color: var(--sirup-magenta); }

/* Hamburger toggle — hidden on desktop, shown only under the mobile
   breakpoint further down. A plain <button> with three CSS-drawn bars that
   morph into an "X" via .is-open, so no icon font/SVG dependency. */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.menu-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	margin: 0 auto;
	background: var(--sirup-text);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle.is-open .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-open .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Visually-hidden helper for the toggle's accessible label. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Hero ---------- */
/* Top-aligned, not vertically centered: the headline sits right under the
   header/logo and leads straight into Latest Releases below it, instead of
   floating in the vertical middle of the viewport. Deliberately NOT
   display:flex — a plain block element already top-aligns its single child
   with no extra rules needed, and flex actively breaks the .hero__content
   centering on wide screens (a width:100% flex item's auto margins get
   resolved against zero free space before max-width clamps it down to
   1200px, leaving it flush left instead of centered — visible only once
   the viewport is wider than ~1200px, which is why it slipped through on
   a narrower check). */
.hero {
	position: relative;
	padding: 64px 0 56px;
	overflow: hidden;
	background: radial-gradient(ellipse at 70% 30%, rgba(228, 20, 96, 0.10), transparent 60%), var(--sirup-bg);
}

.hero__bg {
	position: absolute;
	inset: -10%;
	background-image: url("../images/bg-hero.webp");
	background-size: cover;
	background-position: center 40%;
	background-repeat: no-repeat;
	opacity: 0.28;
	mix-blend-mode: multiply;
	pointer-events: none;
	animation: sirup-hero-drift 36s ease-in-out infinite alternate;
	will-change: transform;
}

/* Slow, subtle drift + breathing scale — a living background, not a static
   photo, but slow enough to never distract from the content in front of it. */
@keyframes sirup-hero-drift {
	0%   { transform: scale(1)     translate3d(0, 0, 0); }
	50%  { transform: scale(1.06)  translate3d(-1.5%, -1%, 0); }
	100% { transform: scale(1.03)  translate3d(1.5%, 1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__bg { animation: none; }
}

/* hero__content is a plain .container here — same max-width:1200px/24px-
   padding/auto-centering as every other section's .container, so the hero
   text lines up with "Latest Releases" and everything below it, and is
   capped at the exact same distance from the left edge as the rest of the
   page (never drifts further toward center than any other section does,
   even on very wide screens). The narrower reading width lives on the
   inner wrapper below instead of on this outer container, so it doesn't
   re-center itself independently of the shared alignment. */
.hero__content { position: relative; z-index: 1; }

/* Constrains headline/paragraph/buttons to a comfortable reading width
   without affecting where that block starts horizontally — a plain block
   left-aligned inside the already-correctly-positioned .hero__content. */
.hero__inner { max-width: 640px; }

.hero__icon { width: 64px; margin-bottom: 24px; }

.hero h1 {
	font-family: var(--sirup-font-display);
	font-weight: var(--sirup-weight-black);
	font-size: clamp(2.4rem, 6vw, 4.2rem);
	line-height: 1.02;
	margin: 0 0 20px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.hero h1 .accent { color: var(--sirup-magenta); }

.hero p { color: var(--sirup-text-muted); font-size: 1.05rem; max-width: 46ch; }

.button {
	display: inline-block;
	margin-top: 20px;
	padding: 14px 28px;
	background: var(--sirup-magenta);
	color: #fff;
	font-family: var(--sirup-font);
	font-weight: var(--sirup-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 13px;
	border-radius: 2px;
}
.button:hover { background: var(--sirup-ink); color: #fff; }
.button--ghost { background: transparent; border: 1px solid var(--sirup-border); color: var(--sirup-text); }
.button--ghost:hover { border-color: var(--sirup-magenta); color: var(--sirup-magenta); }

/* ---------- Homepage news strip ---------- */
/* A slim band between the hero and Latest Releases surfacing the 1-2 most
   recent News posts as plain headline links. Deliberately NOT a numbered
   "0X" section like the ones below it (Latest Releases, Featured Artists,
   etc.) — it's a quick ticker, not a content block competing with those
   for attention, and front-page.php hides it entirely until a real post
   exists (no empty strip, no "Hello World!" placeholder shown to visitors). */
.news-strip {
	border-bottom: 1px solid var(--sirup-border);
	background: var(--sirup-bg-raised);
}
.news-strip__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 32px;
	padding: 16px 24px;
}
.news-strip__label {
	flex: 0 0 auto;
	font-family: var(--sirup-font);
	text-transform: uppercase;
	font-size: 11px;
	font-weight: var(--sirup-weight-black);
	letter-spacing: 0.08em;
	color: var(--sirup-magenta);
}
.news-strip__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 28px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
}
.news-strip__item a {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.news-strip__item a:hover .news-strip__title { color: var(--sirup-magenta); }
.news-strip__date {
	flex: 0 0 auto;
	font-size: 11px;
	color: var(--sirup-text-muted);
	white-space: nowrap;
}
.news-strip__title {
	font-size: 13px;
	font-weight: var(--sirup-weight-bold);
	color: var(--sirup-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 40ch;
}
.news-strip__all {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 12px;
	font-weight: var(--sirup-weight-bold);
	color: var(--sirup-text-muted);
}
.news-strip__all:hover { color: var(--sirup-magenta); }

@media (max-width: 640px) {
	.news-strip__inner { flex-direction: column; align-items: flex-start; }
	.news-strip__list { flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
	.news-strip__title { max-width: none; white-space: normal; }
	.news-strip__all { margin-left: 0; }
}

/* ---------- Section headings ---------- */
.section { position: relative; padding: 72px 0; border-top: 1px solid var(--sirup-border); }
.section__head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 32px;
}
.section__head h2 {
	font-family: var(--sirup-font-display);
	font-weight: var(--sirup-weight-black);
	text-transform: uppercase;
	font-size: 1.8rem;
	margin: 0;
}
.section__head a { font-size: 13px; font-weight: var(--sirup-weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sirup-text-muted); }

/* Eyebrow kicker: small numbered badge + label above a section heading —
   a cheap way to give each section its own identity instead of every block
   looking like the same grey slab in sequence. */
.section__kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.section__kicker-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border: 1px solid var(--sirup-magenta);
	border-radius: 50%;
	color: var(--sirup-magenta);
	font-size: 11px;
	font-weight: var(--sirup-weight-bold);
}
.section__kicker-label {
	font-size: 12px;
	font-weight: var(--sirup-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--sirup-text-muted);
}

/* ---------- Decorative section treatments ---------- */
/* Full-bleed alternate band: breaks a section out of the page's flat
   background onto a raised/tinted full-width band, echoing the alternating
   color sections on the reference Publishing site — kept in brand tones
   (never the reference's mint) and opt-in via .section--band so only
   selected sections use it. */
.section--band {
	overflow: hidden;
	border-top-color: transparent;
}
.section--band::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--sirup-bg-raised);
	z-index: 0;
}

/* Organic soft-blob glow — a blurred, irregular radial shape rather than a
   flat tint, so the band reads as alive/dimensional. Two size-varied blobs
   per section keep it from looking like a single centered spotlight. */
.section--glow::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	width: 620px;
	height: 620px;
	top: -220px;
	right: -160px;
	border-radius: 42% 58% 61% 39% / 45% 40% 60% 55%;
	background: radial-gradient(circle at 40% 40%, rgba(228, 20, 96, 0.16), rgba(228, 20, 96, 0) 70%);
	filter: blur(10px);
}
.section--glow .section__blob {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	width: 420px;
	height: 420px;
	left: -140px;
	bottom: -160px;
	border-radius: 55% 45% 40% 60% / 60% 55% 45% 40%;
	background: radial-gradient(circle at 60% 40%, rgba(138, 2, 53, 0.14), rgba(138, 2, 53, 0) 70%);
	filter: blur(6px);
}

/* Diagonal light-streak accent — a thin, angled band of brand light crossing
   a corner of the section, standing in for the reference site's diagonal
   rays but rendered in magenta instead of mint. Pure CSS, no image asset. */
.section__streak {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	top: -10%;
	right: 8%;
	width: 3px;
	height: 140%;
	background: linear-gradient(180deg, rgba(228, 20, 96, 0) 0%, rgba(228, 20, 96, 0.5) 45%, rgba(228, 20, 96, 0) 100%);
	transform: rotate(18deg);
	filter: blur(1px);
}
.section__streak--2 {
	right: 16%;
	width: 1px;
	opacity: 0.6;
	background: linear-gradient(180deg, rgba(138, 2, 53, 0) 0%, rgba(138, 2, 53, 0.6) 55%, rgba(138, 2, 53, 0) 100%);
}

.section--band .container,
.section--band .section__head { position: relative; z-index: 1; }

/* ---------- Release grid ---------- */
.release-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
}

.release-card { position: relative; }
.release-card__cover {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--sirup-bg-raised);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.release-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.release-card:hover .release-card__cover img { transform: scale(1.05); }

.release-card__title { font-size: 14px; font-weight: var(--sirup-weight-bold); margin: 0 0 2px; }
.release-card__artist { font-size: 12px; color: var(--sirup-text-muted); margin: 0; }

.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
}
.filter-bar a {
	padding: 6px 14px;
	border: 1px solid var(--sirup-border);
	border-radius: 20px;
	font-size: 12px;
	font-weight: var(--sirup-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sirup-text-muted);
}
.filter-bar a.is-active,
.filter-bar a:hover { border-color: var(--sirup-magenta); color: var(--sirup-magenta); }

/* ---------- Release search (Besuchersuche, 02.10.2026) ---------- */
/* Kompakte Pille im section__head, neben dem Titel -- gleiche Hoehe/Optik
   wie .filter-bar a, statt eines separaten, zu grossen Suchformulars. */
.release-search {
	position: relative;
	display: flex;
	align-items: center;
}
.release-search__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--sirup-text-muted);
	pointer-events: none;
}
.release-search__input {
	width: 220px;
	max-width: 50vw;
	padding: 7px 14px 7px 36px;
	font-family: var(--sirup-font-body);
	font-size: 12px;
	font-weight: var(--sirup-weight-bold);
	letter-spacing: 0.02em;
	color: var(--sirup-text);
	background: transparent;
	border: 1px solid var(--sirup-border);
	border-radius: 20px;
	transition: border-color 0.15s ease, width 0.15s ease;
}
.release-search__input::placeholder {
	color: var(--sirup-text-muted);
	font-weight: var(--sirup-weight-medium);
	text-transform: none;
	letter-spacing: normal;
}
.release-search__input:focus {
	outline: none;
	border-color: var(--sirup-magenta);
	width: 260px;
}
.release-search__clear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	line-height: 16px;
	text-align: center;
	border-radius: 50%;
	font-size: 15px;
	color: var(--sirup-text-muted);
}
.release-search__clear:hover { color: var(--sirup-magenta); }
.release-search__meta {
	font-size: 12px;
	color: var(--sirup-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: -24px 0 24px;
}
@media (max-width: 640px) {
	.section__head { flex-wrap: wrap; gap: 14px; }
	.release-search__input { width: 100%; max-width: none; }
}

/* ---------- Artist grid ---------- */
.artist-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 24px;
}
.artist-card { text-align: center; }
.artist-card__portrait {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--sirup-bg-raised);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.artist-card__portrait img { width: 100%; height: 100%; object-fit: cover; }
.artist-card__name { font-family: var(--sirup-font-display); font-weight: var(--sirup-weight-black); text-transform: uppercase; font-size: 0.95rem; }

/* ---------- Artist index (full A-Z list, auto-generated from releases) ---------- */
.artist-index {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 4px 24px;
}
.artist-index__item a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid var(--sirup-border);
	font-size: 14px;
	color: var(--sirup-text-muted);
}
.artist-index__item a:hover { color: var(--sirup-text); }
.artist-index__item.is-featured a { color: var(--sirup-text); font-weight: var(--sirup-weight-bold); }
.artist-index__badge {
	flex-shrink: 0;
	font-size: 9px;
	font-weight: var(--sirup-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sirup-magenta);
	border: 1px solid var(--sirup-magenta);
	border-radius: 10px;
	padding: 2px 8px;
}

/* ---------- News grid ---------- */
.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 32px;
}
.news-card__cover {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--sirup-bg-raised);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.news-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.news-card__date {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sirup-text-muted);
	margin: 0 0 6px;
}
.news-card__title {
	font-family: var(--sirup-font-display);
	font-weight: var(--sirup-weight-black);
	text-transform: uppercase;
	font-size: 1.05rem;
	margin: 0 0 8px;
}
.news-card__excerpt { font-size: 13px; color: var(--sirup-text-muted); margin: 0; }

/* ---------- Publishing teaser (homepage) ---------- */
/* A solid dark band for contrast/variety, breaking up the otherwise flat
   sequence of sections — deliberately fixed-dark regardless of light/dark
   mode, so it always reads as a deeper contrast block, not a tint. Text
   stays flush left with the rest of the page — only its reading width is
   narrower, so it must not inherit .container's auto centering the way
   single-post templates intentionally do. */
.section--publishing {
	overflow: hidden;
	background: #0c0c0f;
	border-top-color: transparent;
}
.section--publishing .container { position: relative; z-index: 1; }
.section--publishing .section__head h2 { color: #f5f5f7; }
.section--publishing .section__kicker-label { color: #a3a3ad; }
.section--publishing__text {
	max-width: 640px;
	margin: 0 0 20px;
	color: #a3a3ad;
}
.section--publishing .button--ghost { border-color: rgba(245, 245, 247, 0.25); color: #f5f5f7; }
.section--publishing .button--ghost:hover { border-color: var(--sirup-magenta); color: var(--sirup-magenta); }

/* Dimensional accents on the dark Publishing band: a soft magenta/ink glow
   pair plus two crossing light-streaks, brighter than the light-band glow
   above since they sit on near-black rather than off-white. */
.section--publishing::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	width: 700px;
	height: 700px;
	top: -260px;
	right: -220px;
	border-radius: 42% 58% 61% 39% / 45% 40% 60% 55%;
	background: radial-gradient(circle at 40% 40%, rgba(228, 20, 96, 0.28), rgba(228, 20, 96, 0) 70%);
	filter: blur(6px);
}
.section--publishing .section__blob {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	width: 480px;
	height: 480px;
	left: -160px;
	bottom: -200px;
	border-radius: 55% 45% 40% 60% / 60% 55% 45% 40%;
	background: radial-gradient(circle at 60% 40%, rgba(228, 20, 96, 0.16), rgba(228, 20, 96, 0) 70%);
	filter: blur(4px);
}
.section--publishing .section__streak {
	background: linear-gradient(180deg, rgba(228, 20, 96, 0) 0%, rgba(228, 20, 96, 0.7) 45%, rgba(228, 20, 96, 0) 100%);
}
.section--publishing .section__streak--2 {
	background: linear-gradient(180deg, rgba(245, 245, 247, 0) 0%, rgba(245, 245, 247, 0.25) 55%, rgba(245, 245, 247, 0) 100%);
}

/* ---------- WPForms (Contact page) ---------- */
/* Layout: First / Last / Email share one row as three equal columns (the
   Name field's own First+Last sub-row splits internally into two of those
   three columns), then the category dropdown and the message field each
   run the full row width below, matching page.php's 640px convention. */
#wpforms-form-60 { max-width: 640px; }
#wpforms-form-60 fieldset {
	border: none;
	margin: 0;
	padding: 0;
}
#wpforms-form-60 legend {
	padding: 0;
	width: 100%;
}
#wpforms-form-60 .wpforms-field-container {
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
}
#wpforms-form-60 .wpforms-field { flex: 1 1 100%; padding: 0 0 16px; }
/* Name field (First+Last together) takes 2 of the 3 top-row columns... */
#wpforms-60-field_1-container {
	flex: 1 1 calc(66.6667% - 6.6667px) !important;
}
/* ...Email takes the 3rd. Together with the 20px column-gap between this
   field and the Name field, all three resulting columns end up equal
   width (see the internal First/Last split just below). */
#wpforms-60-field_2-container {
	flex: 1 1 calc(33.3333% - 13.3333px) !important;
}
/* Split the Name field's own First/Last row into two equal columns with
   the same 20px gutter as the outer row, so First/Last/Email all line up
   as three even columns rather than Name-as-one-block plus Email. */
#wpforms-60-field_1-container .wpforms-field-row {
	display: flex;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	gap: 20px;
	max-width: 100% !important;
	width: 100% !important;
}
/* WPForms' own clearfix (row::before { display: table }) becomes an
   invisible third flex item once the row is flex, eating one extra gap's
   worth of width before First. Drop it so First/Last/Email land flush. */
#wpforms-60-field_1-container .wpforms-field-row::before {
	display: none !important;
	content: none !important;
}
#wpforms-60-field_1-container .wpforms-field-row-block {
	flex: 0 0 calc(50% - 10px) !important;
	width: calc(50% - 10px) !important;
	margin: 0 !important;
	padding: 0 !important;
}
#wpforms-form-60 label.wpforms-field-label,
#wpforms-form-60 label.wpforms-field-sublabel,
#wpforms-form-60 legend.wpforms-field-label {
	font-family: var(--sirup-font);
	text-transform: uppercase;
	font-size: 11px;
	font-weight: var(--sirup-weight-black);
	letter-spacing: 0.08em;
	color: var(--sirup-text);
	margin: 0 0 6px;
}
#wpforms-form-60 label.wpforms-field-sublabel {
	text-transform: none;
	font-weight: var(--sirup-weight-medium);
	letter-spacing: normal;
	color: var(--sirup-text-muted);
}
#wpforms-form-60 input[type=text],
#wpforms-form-60 input[type=email],
#wpforms-form-60 input[type=tel],
#wpforms-form-60 input[type=url],
#wpforms-form-60 select,
#wpforms-form-60 textarea {
	font-family: var(--sirup-font-body) !important;
	font-size: 15px !important;
	color: var(--sirup-text) !important;
	background: var(--sirup-bg-raised) !important;
	border: 1px solid var(--sirup-border) !important;
	border-radius: 2px !important;
	padding: 11px 14px !important;
	width: 100%;
	height: auto !important;
}
#wpforms-form-60 input[type=text]:focus,
#wpforms-form-60 input[type=email]:focus,
#wpforms-form-60 select:focus,
#wpforms-form-60 textarea:focus {
	border-color: var(--sirup-magenta) !important;
	box-shadow: none !important;
	outline: none;
}
#wpforms-form-60 textarea { min-height: 140px; }
#wpforms-form-60 button[type=submit] {
	display: inline-block !important;
	height: auto !important;
	width: auto !important;
	margin-top: 4px;
	padding: 14px 28px !important;
	background-color: var(--sirup-magenta) !important;
	color: #fff !important;
	font-family: var(--sirup-font) !important;
	font-weight: var(--sirup-weight-bold) !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 13px !important;
	border: none !important;
	border-radius: 2px !important;
	cursor: pointer;
}
#wpforms-form-60 button[type=submit]:hover,
#wpforms-form-60 button[type=submit]:active {
	background-color: var(--sirup-ink) !important;
}

/* ---------- Footer ---------- */
.site-footer {
	border-top: 1px solid var(--sirup-border);
	padding: 48px 0 32px;
	color: var(--sirup-text-muted);
	font-size: 13px;
}
.site-footer a { color: var(--sirup-text-muted); }
.site-footer a:hover { color: var(--sirup-magenta); }
.footer-signup {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	background: var(--sirup-ink);
	border-radius: 16px;
	padding: 40px 48px;
	margin-bottom: 32px;
}
.footer-signup__text { max-width: 320px; }
.footer-signup__text h4 {
	text-transform: uppercase;
	font-size: 11px;
	font-weight: var(--sirup-weight-black);
	letter-spacing: 0.08em;
	color: #ffffff;
	margin: 0 0 8px;
}
.footer-signup__text p { margin: 0; color: rgba(255,255,255,0.72); }
.footer-signup__form {
	flex: 0 0 360px;
	width: 360px;
	background: #ffffff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.footer-signup__form iframe { display: block; border-radius: 10px; }
.footer-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px;
	margin-bottom: 32px;
}
.footer-columns h4 {
	text-transform: uppercase;
	font-size: 11px;
	font-weight: var(--sirup-weight-black);
	letter-spacing: 0.08em;
	color: var(--sirup-text);
	margin: 0 0 12px;
}
.footer-columns ul { list-style: none; margin: 0; padding: 0; }
.footer-columns li { margin-bottom: 8px; }

@media (max-width: 640px) {
	.menu-toggle { display: flex; }

	.footer-signup {
		flex-direction: column;
		align-items: stretch;
		padding: 28px 24px;
		border-radius: 12px;
	}
	.footer-signup__text { max-width: none; }
	.footer-signup__form { width: auto; flex: none; }

	.site-header nav {
		position: fixed;
		top: 69px; /* height of the sticky header, so it sits directly below it */
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		background: var(--sirup-bg);
		border-top: 1px solid var(--sirup-border);
		padding: 8px 24px 32px;
		overflow-y: auto;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
	}
	.site-header nav.is-open {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.18s ease, transform 0.18s ease;
	}
	.site-header nav ul {
		flex-direction: column;
		gap: 0;
	}
	.site-header nav li {
		border-bottom: 1px solid var(--sirup-border);
	}
	.site-header nav a {
		display: block;
		padding: 16px 0;
		font-size: 15px;
	}

	/* Prevent the page behind the open mobile menu from scrolling. */
	body.menu-open { overflow: hidden; }

	.hero__bg { background-position: center 20%; opacity: 0.22; }
	body::before { opacity: 0.035; }
}

/* =========================================================
   Dark variant — same Magenta/Ink brand, inverted base.
   Toggle by setting data-theme="dark" on <html> (or <body>);
   everything else (layout, type, components) is unchanged.
   ========================================================= */
:root[data-theme="dark"] {
	--sirup-bg: #000000;
	--sirup-bg-raised: #0e0e10;
	--sirup-text: #f5f5f7;
	--sirup-text-muted: #a3a3ad;
	--sirup-border: #2a2a2e;
	/* --sirup-magenta and --sirup-ink stay identical — same brand accent on both. */
}

[data-theme="dark"] body::before {
	opacity: 0.05;
	mix-blend-mode: screen;
}

[data-theme="dark"] .site-header::before {
	background: rgba(0, 0, 0, 0.85);
}
/* Logo ships black-on-transparent for the light default; invert to white for dark mode. */
[data-theme="dark"] .site-header .logo img,
[data-theme="dark"] .site-footer .logo img { filter: invert(1); }

[data-theme="dark"] .hero {
	background: radial-gradient(ellipse at 70% 30%, rgba(228, 20, 96, 0.18), transparent 60%), var(--sirup-bg);
}
[data-theme="dark"] .hero__bg {
	opacity: 0.22;
	mix-blend-mode: screen;
}
[data-theme="dark"] .button { color: #000; }
[data-theme="dark"] .button:hover { background: #fff; color: #000; }
[data-theme="dark"] .release-card__cover,
[data-theme="dark"] .artist-card__portrait,
[data-theme="dark"] .news-card__cover { box-shadow: none; }

/* Alternating band + glow accents stay legible on the near-black dark
   variant: the raised band is barely lighter than pure black, and the
   glows brighten slightly to keep them visible without going glaring. */
[data-theme="dark"] .section--glow::after {
	background: radial-gradient(circle at 40% 40%, rgba(228, 20, 96, 0.22), rgba(228, 20, 96, 0) 70%);
}
[data-theme="dark"] .section--glow .section__blob {
	background: radial-gradient(circle at 60% 40%, rgba(228, 20, 96, 0.14), rgba(228, 20, 96, 0) 70%);
}

/* ---------- Release detail page (single-release.php) ---------- */
.release-hero {
	padding: 140px 0 32px;
	border-bottom: 1px solid var(--sirup-border);
}
.release-hero__grid {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
.release-hero__cover {
	width: 340px;
	max-width: 340px;
	min-width: 0;
	height: 340px;
	border-radius: 4px;
	object-fit: cover;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.release-hero__kicker {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: var(--sirup-weight-black);
	letter-spacing: 0.08em;
	color: var(--sirup-magenta);
	margin-bottom: 14px;
}
.release-hero__title {
	font-family: var(--sirup-font-display);
	text-transform: uppercase;
	font-size: 2.6rem;
	font-weight: var(--sirup-weight-black);
	margin: 0 0 10px;
	line-height: 1.05;
}
.release-hero__artist {
	font-size: 1.2rem;
	font-weight: var(--sirup-weight-bold);
	color: var(--sirup-text-muted);
	margin: 0 0 28px;
}
.release-hero__artist a { color: var(--sirup-text); }
.release-hero__artist a:hover { color: var(--sirup-magenta); }

.release-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-bottom: 32px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--sirup-border);
}
.release-meta__label {
	display: block;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: var(--sirup-weight-bold);
	letter-spacing: 0.06em;
	color: var(--sirup-text-muted);
	margin-bottom: 4px;
}
.release-meta__value {
	font-size: 14px;
	font-weight: var(--sirup-weight-bold);
}

/* DSP links */
.dsp-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.dsp-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--sirup-border);
	border-radius: 2px;
	font-size: 13px;
	font-weight: var(--sirup-weight-bold);
	color: var(--sirup-text);
	background: var(--sirup-bg-raised);
	transition: border-color .15s, color .15s;
}
.dsp-link:hover { border-color: var(--sirup-magenta); color: var(--sirup-magenta); }
.dsp-link__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--sirup-text-muted);
	flex: 0 0 auto;
}
.dsp-link--primary { border-color: var(--sirup-magenta); color: var(--sirup-magenta); }
.dsp-link--primary .dsp-link__dot { background: var(--sirup-magenta); }
.dsp-link--spotify .dsp-link__dot { background: #1DB954; }
.dsp-link--apple-music .dsp-link__dot { background: #FA243C; }
.dsp-link--deezer .dsp-link__dot { background: #A238FF; }
.dsp-link--beatport .dsp-link__dot { background: #01FF95; }
.dsp-link--youtube .dsp-link__dot { background: #FF0000; }
.dsp-link--soundcloud .dsp-link__dot { background: #FF7700; }
.dsp-links__pending {
	font-size: 12px;
	color: var(--sirup-text-muted);
	font-style: italic;
	align-self: center;
}

/* Tracklist */
.tracklist { border-top: 1px solid var(--sirup-border); }
.tracklist__row {
	display: grid;
	grid-template-columns: 40px 1fr auto auto;
	align-items: center;
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px solid var(--sirup-border);
}
.tracklist__num {
	font-size: 13px;
	color: var(--sirup-text-muted);
	font-weight: var(--sirup-weight-bold);
}
.tracklist__title {
	font-size: 15px;
	font-weight: var(--sirup-weight-bold);
}
.tracklist__artist {
	font-size: 13px;
	color: var(--sirup-text-muted);
	margin-top: 2px;
}
.tracklist__genre {
	font-size: 12px;
	color: var(--sirup-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.tracklist__duration {
	font-size: 13px;
	color: var(--sirup-text-muted);
	font-variant-numeric: tabular-nums;
}

.footer-legal {
	font-size: 11px;
	color: var(--sirup-text-muted);
	padding-top: 24px;
	border-top: 1px solid var(--sirup-border);
}

/* Release detail page: the two .section blocks after the hero (tracklist +
   press text) use the global .section padding (72px), which reads as a big
   empty gap on a page with otherwise little content. Scope a compact
   variant to single-release only so other pages using .section are
   unaffected. */
.single-release .section {
	padding: 36px 0;
}
.single-release .section:first-of-type {
	border-top: none;
}

/* Press text (post_content from the DDEX MarketingComment field) — smaller,
   tighter, narrower than the default body copy so it reads like liner
   notes rather than a full article. */
/* Tracklist section on the release page: the kicker label ("Tracklist")
   already reads as a heading on its own, so single-release.php drops the
   redundant "Songs on This Release" H2 and uses this modifier for a bit
   more breathing room before the list. */
.section__kicker--standalone {
	margin-bottom: 20px;
}

.release-promo-text {
	font-size: 0.875rem;
	line-height: 1.65;
	max-width: 680px;
}
.release-promo-text p {
	margin: 0 0 1em;
}
.release-promo-text p:last-child {
	margin-bottom: 0;
}

@media (max-width: 720px) {
	.release-hero { padding-top: 100px; }
	.release-hero__grid { grid-template-columns: 1fr; }
	.release-hero__cover { width: 100%; height: auto; aspect-ratio: 1 / 1; }
	.tracklist__row { grid-template-columns: 28px 1fr auto; }
	.tracklist__genre { display: none; }
}

/* Text highlight utility — for the occasional hand-picked word/phrase inside
   body copy that should stand out in the brand's dark magenta ("ink"). Use
   sparingly: wrap just the words that need it, e.g. <span class="hl">25 years</span>. */
.hl { color: var(--sirup-ink); }

/* Drop in a licensed Neue Helvetica webfont here when available, e.g.:
@font-face {
	font-family: "Neue Helvetica";
	src: url("../fonts/NeueHelvetica-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
*/

* { box-sizing: border-box; }

html, body {
	margin: 0;
	background: var(--sirup-bg);
	color: var(--sirup-text);
	font-family: var(--sirup-font-body);
	font-weight: var(--sirup-weight-medium);
	line-height: 1.5;
}

/* Faint sitewide echo of the 3D artwork: a fixed backdrop behind every
   section (not just the hero) so the background reads as one continuous
   atmosphere rather than a graphic confined to a single block. Kept very
   subtle per brand direction ("nicht zu extrem"). Multiply reads correctly
   on the light default; dark mode switches it to screen further down. */
body {
	position: relative;
}
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: url("../images/bg-hero.webp");
	background-size: cover;
	background-position: center 35%;
	background-repeat: no-repeat;
	opacity: 0.05;
	mix-blend-mode: multiply;
	pointer-events: none;
}

a { color: var(--sirup-text); text-decoration: none; }
a:hover { color: var(--sirup-magenta); }

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

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Header ---------- */
/* The blurred background lives on ::before rather than directly on
   .site-header: a `backdrop-filter` (like `filter`) on an element makes
   IT the positioning container for any `position: fixed` descendant —
   including the mobile nav dropdown further down. With the filter on
   .site-header itself, the fixed-position mobile menu ended up anchored
   to the ~70px-tall header box instead of the viewport, so on iOS it
   rendered squashed into the header and appeared hidden behind the
   page's background imagery when opened. Keeping .site-header free of
   filter/transform/will-change lets the fixed nav anchor to the real
   viewport as intended. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
}
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(245, 244, 241, 0.9);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--sirup-border);
}

/* Logo artwork ships as a black wordmark+mark on a transparent PNG (real
   alpha channel, re-rendered from the vector EPS — no more flattened white
   box behind it). Dark mode inverts it to white via filter, further down. */
.site-header .logo img,
.site-footer .logo img { height: 28px; width: auto; }
.site-footer .logo img { height: 22px; margin-bottom: 16px; }

.site-header nav ul {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header nav a {
	font-size: 13px;
	font-weight: var(--sirup-weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sirup-text-muted);
}

.site-header nav a:hover,
.site-header nav .current-menu-item a { color: var(--sirup-magenta); }

/* Hamburger toggle — hidden on desktop, shown only under the mobile
   breakpoint further down. A plain <button> with three CSS-drawn bars that
   morph into an "X" via .is-open, so no icon font/SVG dependency. */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.menu-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	margin: 0 auto;
	background: var(--sirup-text);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle.is-open .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-open .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Visually-hidden helper for the toggle's accessible label. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Hero ---------- */
/* Top-aligned, not vertically centered: the headline sits right under the
   header/logo and leads straight into Latest Releases below it, instead of
   floating in the vertical middle of the viewport. Deliberately NOT
   display:flex — a plain block element already top-aligns its single child
   with no extra rules needed, and flex actively breaks the .hero__content
   centering on wide screens (a width:100% flex item's auto margins get
   resolved against zero free space before max-width clamps it down to
   1200px, leaving it flush left instead of centered — visible only once
   the viewport is wider than ~1200px, which is why it slipped through on
   a narrower check). */
.hero {
	position: relative;
	padding: 64px 0 56px;
	overflow: hidden;
	background: radial-gradient(ellipse at 70% 30%, rgba(228, 20, 96, 0.10), transparent 60%), var(--sirup-bg);
}

.hero__bg {
	position: absolute;
	inset: -10%;
	background-image: url("../images/bg-hero.webp");
	background-size: cover;
	background-position: center 40%;
	background-repeat: no-repeat;
	opacity: 0.28;
	mix-blend-mode: multiply;
	pointer-events: none;
	animation: sirup-hero-drift 36s ease-in-out infinite alternate;
	will-change: transform;
}

/* Slow, subtle drift + breathing scale — a living background, not a static
   photo, but slow enough to never distract from the content in front of it. */
@keyframes sirup-hero-drift {
	0%   { transform: scale(1)     translate3d(0, 0, 0); }
	50%  { transform: scale(1.06)  translate3d(-1.5%, -1%, 0); }
	100% { transform: scale(1.03)  translate3d(1.5%, 1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__bg { animation: none; }
}

/* hero__content is a plain .container here — same max-width:1200px/24px-
   padding/auto-centering as every other section's .container, so the hero
   text lines up with "Latest Releases" and everything below it, and is
   capped at the exact same distance from the left edge as the rest of the
   page (never drifts further toward center than any other section does,
   even on very wide screens). The narrower reading width lives on the
   inner wrapper below instead of on this outer container, so it doesn't
   re-center itself independently of the shared alignment. */
.hero__content { position: relative; z-index: 1; }

/* Constrains headline/paragraph/buttons to a comfortable reading width
   without affecting where that block starts horizontally — a plain block
   left-aligned inside the already-correctly-positioned .hero__content. */
.hero__inner { max-width: 640px; }

.hero__icon { width: 64px; margin-bottom: 24px; }

.hero h1 {
	font-family: var(--sirup-font-display);
	font-weight: var(--sirup-weight-black);
	font-size: clamp(2.4rem, 6vw, 4.2rem);
	line-height: 1.02;
	margin: 0 0 20px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.hero h1 .accent { color: var(--sirup-magenta); }

.hero p { color: var(--sirup-text-muted); font-size: 1.05rem; max-width: 46ch; }

.button {
	display: inline-block;
	margin-top: 20px;
	padding: 14px 28px;
	background: var(--sirup-magenta);
	color: #fff;
	font-family: var(--sirup-font);
	font-weight: var(--sirup-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 13px;
	border-radius: 2px;
}
.button:hover { background: var(--sirup-ink); color: #fff; }
.button--ghost { background: transparent; border: 1px solid var(--sirup-border); color: var(--sirup-text); }
.button--ghost:hover { border-color: var(--sirup-magenta); color: var(--sirup-magenta); }

/* ---------- Homepage news strip ---------- */
/* A slim band between the hero and Latest Releases surfacing the 1-2 most
   recent News posts as plain headline links. Deliberately NOT a numbered
   "0X" section like the ones below it (Latest Releases, Featured Artists,
   etc.) — it's a quick ticker, not a content block competing with those
   for attention, and front-page.php hides it entirely until a real post
   exists (no empty strip, no "Hello World!" placeholder shown to visitors). */
.news-strip {
	border-bottom: 1px solid var(--sirup-border);
	background: var(--sirup-bg-raised);
}
.news-strip__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 32px;
	padding: 16px 24px;
}
.news-strip__label {
	flex: 0 0 auto;
	font-family: var(--sirup-font);
	text-transform: uppercase;
	font-size: 11px;
	font-weight: var(--sirup-weight-black);
	letter-spacing: 0.08em;
	color: var(--sirup-magenta);
}
.news-strip__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 28px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
}
.news-strip__item a {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.news-strip__item a:hover .news-strip__title { color: var(--sirup-magenta); }
.news-strip__date {
	flex: 0 0 auto;
	font-size: 11px;
	color: var(--sirup-text-muted);
	white-space: nowrap;
}
.news-strip__title {
	font-size: 13px;
	font-weight: var(--sirup-weight-bold);
	color: var(--sirup-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 40ch;
}
.news-strip__all {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 12px;
	font-weight: var(--sirup-weight-bold);
	color: var(--sirup-text-muted);
}
.news-strip__all:hover { color: var(--sirup-magenta); }

@media (max-width: 640px) {
	.news-strip__inner { flex-direction: column; align-items: flex-start; }
	.news-strip__list { flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
	.news-strip__title { max-width: none; white-space: normal; }
	.news-strip__all { margin-left: 0; }
}

/* ---------- Section headings ---------- */
.section { position: relative; padding: 72px 0; border-top: 1px solid var(--sirup-border); }
.section__head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 32px;
}
.section__head h2 {
	font-family: var(--sirup-font-display);
	font-weight: var(--sirup-weight-black);
	text-transform: uppercase;
	font-size: 1.8rem;
	margin: 0;
}
.section__head a { font-size: 13px; font-weight: var(--sirup-weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sirup-text-muted); }

/* Eyebrow kicker: small numbered badge + label above a section heading —
   a cheap way to give each section its own identity instead of every block
   looking like the same grey slab in sequence. */
.section__kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.section__kicker-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border: 1px solid var(--sirup-magenta);
	border-radius: 50%;
	color: var(--sirup-magenta);
	font-size: 11px;
	font-weight: var(--sirup-weight-bold);
}
.section__kicker-label {
	font-size: 12px;
	font-weight: var(--sirup-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--sirup-text-muted);
}

/* ---------- Decorative section treatments ---------- */
/* Full-bleed alternate band: breaks a section out of the page's flat
   background onto a raised/tinted full-width band, echoing the alternating
   color sections on the reference Publishing site — kept in brand tones
   (never the reference's mint) and opt-in via .section--band so only
   selected sections use it. */
.section--band {
	overflow: hidden;
	border-top-color: transparent;
}
.section--band::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--sirup-bg-raised);
	z-index: 0;
}

/* Organic soft-blob glow — a blurred, irregular radial shape rather than a
   flat tint, so the band reads as alive/dimensional. Two size-varied blobs
   per section keep it from looking like a single centered spotlight. */
.section--glow::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	width: 620px;
	height: 620px;
	top: -220px;
	right: -160px;
	border-radius: 42% 58% 61% 39% / 45% 40% 60% 55%;
	background: radial-gradient(circle at 40% 40%, rgba(228, 20, 96, 0.16), rgba(228, 20, 96, 0) 70%);
	filter: blur(10px);
}
.section--glow .section__blob {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	width: 420px;
	height: 420px;
	left: -140px;
	bottom: -160px;
	border-radius: 55% 45% 40% 60% / 60% 55% 45% 40%;
	background: radial-gradient(circle at 60% 40%, rgba(138, 2, 53, 0.14), rgba(138, 2, 53, 0) 70%);
	filter: blur(6px);
}

/* Diagonal light-streak accent — a thin, angled band of brand light crossing
   a corner of the section, standing in for the reference site's diagonal
   rays but rendered in magenta instead of mint. Pure CSS, no image asset. */
.section__streak {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	top: -10%;
	right: 8%;
	width: 3px;
	height: 140%;
	background: linear-gradient(180deg, rgba(228, 20, 96, 0) 0%, rgba(228, 20, 96, 0.5) 45%, rgba(228, 20, 96, 0) 100%);
	transform: rotate(18deg);
	filter: blur(1px);
}
.section__streak--2 {
	right: 16%;
	width: 1px;
	opacity: 0.6;
	background: linear-gradient(180deg, rgba(138, 2, 53, 0) 0%, rgba(138, 2, 53, 0.6) 55%, rgba(138, 2, 53, 0) 100%);
}

.section--band .container,
.section--band .section__head { position: relative; z-index: 1; }

/* ---------- Release grid ---------- */
.release-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
}

.release-card { position: relative; }
.release-card__cover {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--sirup-bg-raised);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.release-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.release-card:hover .release-card__cover img { transform: scale(1.05); }

.release-card__title { font-size: 14px; font-weight: var(--sirup-weight-bold); margin: 0 0 2px; }
.release-card__artist { font-size: 12px; color: var(--sirup-text-muted); margin: 0; }

.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
}
.filter-bar a {
	padding: 6px 14px;
	border: 1px solid var(--sirup-border);
	border-radius: 20px;
	font-size: 12px;
	font-weight: var(--sirup-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sirup-text-muted);
}
.filter-bar a.is-active,
.filter-bar a:hover { border-color: var(--sirup-magenta); color: var(--sirup-magenta); }

/* ---------- Artist grid ---------- */
.artist-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 24px;
}
.artist-card { text-align: center; }
.artist-card__portrait {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--sirup-bg-raised);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.artist-card__portrait img { width: 100%; height: 100%; object-fit: cover; }
.artist-card__name { font-family: var(--sirup-font-display); font-weight: var(--sirup-weight-black); text-transform: uppercase; font-size: 0.95rem; }

/* ---------- Artist index (full A-Z list, auto-generated from releases) ---------- */
.artist-index {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 4px 24px;
}
.artist-index__item a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid var(--sirup-border);
	font-size: 14px;
	color: var(--sirup-text-muted);
}
.artist-index__item a:hover { color: var(--sirup-text); }
.artist-index__item.is-featured a { color: var(--sirup-text); font-weight: var(--sirup-weight-bold); }
.artist-index__badge {
	flex-shrink: 0;
	font-size: 9px;
	font-weight: var(--sirup-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sirup-magenta);
	border: 1px solid var(--sirup-magenta);
	border-radius: 10px;
	padding: 2px 8px;
}

/* ---------- News grid ---------- */
.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 32px;
}
.news-card__cover {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--sirup-bg-raised);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.news-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.news-card__date {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sirup-text-muted);
	margin: 0 0 6px;
}
.news-card__title {
	font-family: var(--sirup-font-display);
	font-weight: var(--sirup-weight-black);
	text-transform: uppercase;
	font-size: 1.05rem;
	margin: 0 0 8px;
}
.news-card__excerpt { font-size: 13px; color: var(--sirup-text-muted); margin: 0; }

/* ---------- Publishing teaser (homepage) ---------- */
/* A solid dark band for contrast/variety, breaking up the otherwise flat
   sequence of sections — deliberately fixed-dark regardless of light/dark
   mode, so it always reads as a deeper contrast block, not a tint. Text
   stays flush left with the rest of the page — only its reading width is
   narrower, so it must not inherit .container's auto centering the way
   single-post templates intentionally do. */
.section--publishing {
	overflow: hidden;
	background: #0c0c0f;
	border-top-color: transparent;
}
.section--publishing .container { position: relative; z-index: 1; }
.section--publishing .section__head h2 { color: #f5f5f7; }
.section--publishing .section__kicker-label { color: #a3a3ad; }
.section--publishing__text {
	max-width: 640px;
	margin: 0 0 20px;
	color: #a3a3ad;
}
.section--publishing .button--ghost { border-color: rgba(245, 245, 247, 0.25); color: #f5f5f7; }
.section--publishing .button--ghost:hover { border-color: var(--sirup-magenta); color: var(--sirup-magenta); }

/* Dimensional accents on the dark Publishing band: a soft magenta/ink glow
   pair plus two crossing light-streaks, brighter than the light-band glow
   above since they sit on near-black rather than off-white. */
.section--publishing::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	width: 700px;
	height: 700px;
	top: -260px;
	right: -220px;
	border-radius: 42% 58% 61% 39% / 45% 40% 60% 55%;
	background: radial-gradient(circle at 40% 40%, rgba(228, 20, 96, 0.28), rgba(228, 20, 96, 0) 70%);
	filter: blur(6px);
}
.section--publishing .section__blob {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	width: 480px;
	height: 480px;
	left: -160px;
	bottom: -200px;
	border-radius: 55% 45% 40% 60% / 60% 55% 45% 40%;
	background: radial-gradient(circle at 60% 40%, rgba(228, 20, 96, 0.16), rgba(228, 20, 96, 0) 70%);
	filter: blur(4px);
}
.section--publishing .section__streak {
	background: linear-gradient(180deg, rgba(228, 20, 96, 0) 0%, rgba(228, 20, 96, 0.7) 45%, rgba(228, 20, 96, 0) 100%);
}
.section--publishing .section__streak--2 {
	background: linear-gradient(180deg, rgba(245, 245, 247, 0) 0%, rgba(245, 245, 247, 0.25) 55%, rgba(245, 245, 247, 0) 100%);
}

/* ---------- WPForms (Contact page) ---------- */
/* Layout: First / Last / Email share one row as three equal columns (the
   Name field's own First+Last sub-row splits internally into two of those
   three columns), then the category dropdown and the message field each
   run the full row width below, matching page.php's 640px convention. */
#wpforms-form-60 { max-width: 640px; }
#wpforms-form-60 fieldset {
	border: none;
	margin: 0;
	padding: 0;
}
#wpforms-form-60 legend {
	padding: 0;
	width: 100%;
}
#wpforms-form-60 .wpforms-field-container {
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
}
#wpforms-form-60 .wpforms-field { flex: 1 1 100%; padding: 0 0 16px; }
/* Name field (First+Last together) takes 2 of the 3 top-row columns... */
#wpforms-60-field_1-container {
	flex: 1 1 calc(66.6667% - 6.6667px) !important;
}
/* ...Email takes the 3rd. Together with the 20px column-gap between this
   field and the Name field, all three resulting columns end up equal
   width (see the internal First/Last split just below). */
#wpforms-60-field_2-container {
	flex: 1 1 calc(33.3333% - 13.3333px) !important;
}
/* Split the Name field's own First/Last row into two equal columns with
   the same 20px gutter as the outer row, so First/Last/Email all line up
   as three even columns rather than Name-as-one-block plus Email. */
#wpforms-60-field_1-container .wpforms-field-row {
	display: flex;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	gap: 20px;
	max-width: 100% !important;
	width: 100% !important;
}
/* WPForms' own clearfix (row::before { display: table }) becomes an
   invisible third flex item once the row is flex, eating one extra gap's
   worth of width before First. Drop it so First/Last/Email land flush. */
#wpforms-60-field_1-container .wpforms-field-row::before {
	display: none !important;
	content: none !important;
}
#wpforms-60-field_1-container .wpforms-field-row-block {
	flex: 0 0 calc(50% - 10px) !important;
	width: calc(50% - 10px) !important;
	margin: 0 !important;
	padding: 0 !important;
}
#wpforms-form-60 label.wpforms-field-label,
#wpforms-form-60 label.wpforms-field-sublabel,
#wpforms-form-60 legend.wpforms-field-label {
	font-family: var(--sirup-font);
	text-transform: uppercase;
	font-size: 11px;
	font-weight: var(--sirup-weight-black);
	letter-spacing: 0.08em;
	color: var(--sirup-text);
	margin: 0 0 6px;
}
#wpforms-form-60 label.wpforms-field-sublabel {
	text-transform: none;
	font-weight: var(--sirup-weight-medium);
	letter-spacing: normal;
	color: var(--sirup-text-muted);
}
#wpforms-form-60 input[type=text],
#wpforms-form-60 input[type=email],
#wpforms-form-60 input[type=tel],
#wpforms-form-60 input[type=url],
#wpforms-form-60 select,
#wpforms-form-60 textarea {
	font-family: var(--sirup-font-body) !important;
	font-size: 15px !important;
	color: var(--sirup-text) !important;
	background: var(--sirup-bg-raised) !important;
	border: 1px solid var(--sirup-border) !important;
	border-radius: 2px !important;
	padding: 11px 14px !important;
	width: 100%;
	height: auto !important;
}
#wpforms-form-60 input[type=text]:focus,
#wpforms-form-60 input[type=email]:focus,
#wpforms-form-60 select:focus,
#wpforms-form-60 textarea:focus {
	border-color: var(--sirup-magenta) !important;
	box-shadow: none !important;
	outline: none;
}
#wpforms-form-60 textarea { min-height: 140px; }
#wpforms-form-60 button[type=submit] {
	display: inline-block !important;
	height: auto !important;
	width: auto !important;
	margin-top: 4px;
	padding: 14px 28px !important;
	background-color: var(--sirup-magenta) !important;
	color: #fff !important;
	font-family: var(--sirup-font) !important;
	font-weight: var(--sirup-weight-bold) !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 13px !important;
	border: none !important;
	border-radius: 2px !important;
	cursor: pointer;
}
#wpforms-form-60 button[type=submit]:hover,
#wpforms-form-60 button[type=submit]:active {
	background-color: var(--sirup-ink) !important;
}

/* ---------- Footer ---------- */
.site-footer {
	border-top: 1px solid var(--sirup-border);
	padding: 48px 0 32px;
	color: var(--sirup-text-muted);
	font-size: 13px;
}
.site-footer a { color: var(--sirup-text-muted); }
.site-footer a:hover { color: var(--sirup-magenta); }
.footer-signup {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	background: var(--sirup-ink);
	border-radius: 16px;
	padding: 40px 48px;
	margin-bottom: 32px;
}
.footer-signup__text { max-width: 320px; }
.footer-signup__text h4 {
	text-transform: uppercase;
	font-size: 11px;
	font-weight: var(--sirup-weight-black);
	letter-spacing: 0.08em;
	color: #ffffff;
	margin: 0 0 8px;
}
.footer-signup__text p { margin: 0; color: rgba(255,255,255,0.72); }
.footer-signup__form {
	flex: 0 0 360px;
	width: 360px;
	background: #ffffff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.footer-signup__form iframe { display: block; border-radius: 10px; }
.footer-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px;
	margin-bottom: 32px;
}
.footer-columns h4 {
	text-transform: uppercase;
	font-size: 11px;
	font-weight: var(--sirup-weight-black);
	letter-spacing: 0.08em;
	color: var(--sirup-text);
	margin: 0 0 12px;
}
.footer-columns ul { list-style: none; margin: 0; padding: 0; }
.footer-columns li { margin-bottom: 8px; }

@media (max-width: 640px) {
	.menu-toggle { display: flex; }

	.footer-signup {
		flex-direction: column;
		align-items: stretch;
		padding: 28px 24px;
		border-radius: 12px;
	}
	.footer-signup__text { max-width: none; }
	.footer-signup__form { width: auto; flex: none; }

	.site-header nav {
		position: fixed;
		top: 69px; /* height of the sticky header, so it sits directly below it */
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		background: var(--sirup-bg);
		border-top: 1px solid var(--sirup-border);
		padding: 8px 24px 32px;
		overflow-y: auto;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
	}
	.site-header nav.is-open {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.18s ease, transform 0.18s ease;
	}
	.site-header nav ul {
		flex-direction: column;
		gap: 0;
	}
	.site-header nav li {
		border-bottom: 1px solid var(--sirup-border);
	}
	.site-header nav a {
		display: block;
		padding: 16px 0;
		font-size: 15px;
	}

	/* Prevent the page behind the open mobile menu from scrolling. */
	body.menu-open { overflow: hidden; }

	.hero__bg { background-position: center 20%; opacity: 0.22; }
	body::before { opacity: 0.035; }
}

/* =========================================================
   Dark variant — same Magenta/Ink brand, inverted base.
   Toggle by setting data-theme="dark" on <html> (or <body>);
   everything else (layout, type, components) is unchanged.
   ========================================================= */
:root[data-theme="dark"] {
	--sirup-bg: #000000;
	--sirup-bg-raised: #0e0e10;
	--sirup-text: #f5f5f7;
	--sirup-text-muted: #a3a3ad;
	--sirup-border: #2a2a2e;
	/* --sirup-magenta and --sirup-ink stay identical — same brand accent on both. */
}

[data-theme="dark"] body::before {
	opacity: 0.05;
	mix-blend-mode: screen;
}

[data-theme="dark"] .site-header::before {
	background: rgba(0, 0, 0, 0.85);
}
/* Logo ships black-on-transparent for the light default; invert to white for dark mode. */
[data-theme="dark"] .site-header .logo img,
[data-theme="dark"] .site-footer .logo img { filter: invert(1); }

[data-theme="dark"] .hero {
	background: radial-gradient(ellipse at 70% 30%, rgba(228, 20, 96, 0.18), transparent 60%), var(--sirup-bg);
}
[data-theme="dark"] .hero__bg {
	opacity: 0.22;
	mix-blend-mode: screen;
}
[data-theme="dark"] .button { color: #000; }
[data-theme="dark"] .button:hover { background: #fff; color: #000; }
[data-theme="dark"] .release-card__cover,
[data-theme="dark"] .artist-card__portrait,
[data-theme="dark"] .news-card__cover { box-shadow: none; }

/* Alternating band + glow accents stay legible on the near-black dark
   variant: the raised band is barely lighter than pure black, and the
   glows brighten slightly to keep them visible without going glaring. */
[data-theme="dark"] .section--glow::after {
	background: radial-gradient(circle at 40% 40%, rgba(228, 20, 96, 0.22), rgba(228, 20, 96, 0) 70%);
}
[data-theme="dark"] .section--glow .section__blob {
	background: radial-gradient(circle at 60% 40%, rgba(228, 20, 96, 0.14), rgba(228, 20, 96, 0) 70%);
}


/* ---------- Artist profile (single-sirup_artist.php) ---------- */
.artist-profile__kicker {
	font-family: var(--sirup-font-display);
	font-weight: var(--sirup-weight-black);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 12px;
	color: var(--sirup-magenta);
	margin: 0 0 6px;
}
.artist-profile__portrait {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--sirup-bg-raised);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.artist-profile__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artist-social-row { display: flex; gap: 12px; flex-wrap: wrap; }
.artist-social-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--sirup-border);
	border-radius: 999px;
	background: var(--sirup-bg-raised);
	font-family: var(--sirup-font-display);
	font-weight: var(--sirup-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 12.5px;
	color: var(--sirup-text);
}
.artist-social-btn:hover { border-color: var(--sirup-magenta); color: var(--sirup-magenta); }
.artist-social-btn svg { flex-shrink: 0; }


/* ---------- Back link (release + artist detail pages) ---------- */
.page-back-link {
	margin: 0 0 24px;
}
.page-back-link a {
	display: inline-block;
	font-size: 12px;
	font-weight: var(--sirup-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sirup-text-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}
.page-back-link a:hover {
	color: var(--sirup-magenta);
}

/* ---------- Release detail page (single-release.php) ---------- */
.release-hero {
	padding: 140px 0 60px;
	border-bottom: 1px solid var(--sirup-border);
}
.release-hero__grid {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
.release-hero__cover {
	width: 340px;
	max-width: 340px;
	min-width: 0;
	height: 340px;
	border-radius: 4px;
	object-fit: cover;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.release-hero__kicker {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: var(--sirup-weight-black);
	letter-spacing: 0.08em;
	color: var(--sirup-magenta);
	margin-bottom: 14px;
}
.release-hero__title {
	font-family: var(--sirup-font-display);
	text-transform: uppercase;
	font-size: 2.6rem;
	font-weight: var(--sirup-weight-black);
	margin: 0 0 10px;
	line-height: 1.05;
}
.release-hero__artist {
	font-size: 1.2rem;
	font-weight: var(--sirup-weight-bold);
	color: var(--sirup-text-muted);
	margin: 0 0 28px;
}
.release-hero__artist a { color: var(--sirup-text); }
.release-hero__artist a:hover { color: var(--sirup-magenta); }

.release-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-bottom: 32px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--sirup-border);
}
.release-meta__label {
	display: block;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: var(--sirup-weight-bold);
	letter-spacing: 0.06em;
	color: var(--sirup-text-muted);
	margin-bottom: 4px;
}
.release-meta__value {
	font-size: 14px;
	font-weight: var(--sirup-weight-bold);
}

/* DSP links */
.dsp-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.dsp-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--sirup-border);
	border-radius: 2px;
	font-size: 13px;
	font-weight: var(--sirup-weight-bold);
	color: var(--sirup-text);
	background: var(--sirup-bg-raised);
	transition: border-color .15s, color .15s;
}
.dsp-link:hover { border-color: var(--sirup-magenta); color: var(--sirup-magenta); }
.dsp-link__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--sirup-text-muted);
	flex: 0 0 auto;
}
.dsp-link--primary { border-color: var(--sirup-magenta); color: var(--sirup-magenta); }
.dsp-link--primary .dsp-link__dot { background: var(--sirup-magenta); }
.dsp-link--spotify .dsp-link__dot { background: #1DB954; }
.dsp-link--beatport .dsp-link__dot { background: #01FF95; }
.dsp-link--youtube .dsp-link__dot { background: #FF0000; }
.dsp-link--soundcloud .dsp-link__dot { background: #FF7700; }
.dsp-links__pending {
	font-size: 12px;
	color: var(--sirup-text-muted);
	font-style: italic;
	align-self: center;
}

/* Tracklist */
.tracklist { border-top: 1px solid var(--sirup-border); }
.tracklist__row {
	display: grid;
	grid-template-columns: 40px 1fr auto auto;
	align-items: center;
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px solid var(--sirup-border);
}
.tracklist__num {
	font-size: 13px;
	color: var(--sirup-text-muted);
	font-weight: var(--sirup-weight-bold);
}
.tracklist__title {
	font-size: 15px;
	font-weight: var(--sirup-weight-bold);
}
.tracklist__artist {
	font-size: 13px;
	color: var(--sirup-text-muted);
	margin-top: 2px;
}
.tracklist__genre {
	font-size: 12px;
	color: var(--sirup-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.tracklist__duration {
	font-size: 13px;
	color: var(--sirup-text-muted);
	font-variant-numeric: tabular-nums;
}

.footer-legal {
	font-size: 11px;
	color: var(--sirup-text-muted);
	padding-top: 24px;
	border-top: 1px solid var(--sirup-border);
}

@media (max-width: 720px) {
	.release-hero { padding-top: 100px; }
	.release-hero__grid { grid-template-columns: 1fr; }
	.release-hero__cover { width: 100%; height: auto; aspect-ratio: 1 / 1; }
	.tracklist__row { grid-template-columns: 28px 1fr auto; }
	.tracklist__genre { display: none; }
}