/* =========================================================
   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;
}

/* 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 ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	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. */
.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; }
}

/* Combined with .container (for consistent side padding), but must override
   .container's margin:0 auto — otherwise this narrower block centers itself
   inside the wider container instead of staying flush left. */
.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); }

/* ---------- 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%);
}

/* ---------- 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-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; }

	.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 {
	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%);
}