/* ==========================================================================
   Bass Forge — Industrial Forge landing page
   Design tokens from the active Novamira direction (bass-forge-industrial-forge)
   ========================================================================== */

@font-face {
	font-family: 'Bebas Neue';
	src: url('fonts/BebasNeue.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Archivo';
	src: url('fonts/Archivo-Variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:where(.bf) * {
	box-sizing: border-box;
}

.bf {
	--bg: #0b0908;
	--surface: #151110;
	--ink: #ede8e4;
	--ink-dim: #a89f9a;
	--accent: #c4362a;
	--accent-dim: #5c1512;
	--ink-on-accent: #ffffff;
	--hairline: #2a1f1d;
	--sp-sm: 12px;
	--sp-md: 24px;
	--sp-lg: 64px;
	--sp-xl: 120px;
	--radius: 2px;
	--font-display: 'Bebas Neue', 'Archivo', Arial, sans-serif;
	--font-body: 'Archivo', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--container: 1180px;

	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.bf :where(h1, h2, h3, h4) {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--ink);
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0;
}

.bf p {
	margin: 0;
	color: var(--ink-dim);
}

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

.bf__container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--sp-md);
}

@media (min-width: 900px) {
	.bf__container {
		padding: 0 var(--sp-lg);
	}
}

.bf__eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--sp-sm);
}

.bf__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 16px 30px;
	border-radius: var(--radius);
	border: 1px solid var(--accent);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
}

/* Element-qualified (a.bf__btn--solid, not the bare class): .bf a { color:
   inherit } (top of file) is a class+type selector, specificity (0,1,1) —
   higher than a lone class (0,1,0) — so the bare-class color below was
   silently overridden by it regardless of source order, leaving the solid
   button (e.g. the header's .bf-nav__cta) rendering inherited (--ink) text
   instead of the intended --ink-on-accent. Matching its specificity here
   restores normal cascade order, same pattern as a.bf-section__more,
   a.bf-tile, a.bf-artist, a.bf-compilation, p.bf-comingsoon. The demo-section
   button is unaffected either way: .bf-demo .bf__btn--solid (0,2,0) already
   outranks .bf a and keeps its own dark-on-light override. */
a.bf__btn--solid {
	background: var(--accent);
	color: var(--ink-on-accent);
}
.bf__btn--solid:hover {
	background: #d94334;
	border-color: #d94334;
}

.bf__btn--outline {
	background: transparent;
	color: var(--ink);
}
.bf__btn--outline:hover {
	border-color: var(--ink);
	background: rgba(237, 232, 228, 0.06);
}

.bf__btn--disabled {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}
.bf__btn--disabled:hover {
	border-color: var(--accent);
	background: transparent;
}

/* ---------------------------------------------------------------------- */
/* Sticky nav                                                              */
/* ---------------------------------------------------------------------- */

.bf-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(11, 9, 8, 0.82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--hairline);
	transition: padding 0.25s ease, background-color 0.25s ease;
}

.bf-nav__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0;
	max-width: var(--container);
	margin: 0 auto;
	padding-left: var(--sp-md);
	padding-right: var(--sp-md);
	transition: padding 0.25s ease;
}

@media (min-width: 900px) {
	.bf-nav__bar {
		padding-left: var(--sp-lg);
		padding-right: var(--sp-lg);
	}
}

.bf-nav.is-compact .bf-nav__bar {
	padding-top: 12px;
	padding-bottom: 12px;
}

.bf-nav.is-compact {
	background: rgba(11, 9, 8, 0.96);
}

.bf-nav__brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bf-nav__mark {
	height: 34px;
	width: auto;
	display: block;
}

.bf-nav__word {
	display: none;
	font-family: var(--font-display);
	font-size: 18px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
}

.bf-nav__links {
	display: flex;
	align-items: center;
	gap: var(--sp-lg);
}

.bf-nav__list {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bf-nav__list a {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-dim);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.bf-nav__list a:hover {
	color: var(--ink);
	border-color: var(--accent);
}

.bf-nav__list a.is-current,
.bf-nav__list a[aria-current="page"] {
	color: var(--ink);
	border-color: var(--accent);
}

.bf-nav__cta {
	padding: 11px 20px;
	font-size: 12px;
}

.bf-nav__toggle {
	display: none;
	background: none;
	border: 1px solid var(--hairline);
	color: var(--ink);
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius);
}

.bf-nav__toggle span,
.bf-nav__toggle span::before,
.bf-nav__toggle span::after {
	content: '';
	display: block;
	width: 18px;
	height: 2px;
	background: var(--ink);
	position: relative;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.bf-nav__toggle span::before {
	position: absolute;
	top: -6px;
}
.bf-nav__toggle span::after {
	position: absolute;
	top: 6px;
}

@media (max-width: 899px) {
	.bf-nav__links {
		position: fixed;
		inset: 0;
		top: 0;
		height: 100vh;
		height: 100dvh;
		background: var(--bg);
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		padding: var(--sp-xl) var(--sp-lg);
		overflow-y: auto;
		transform: translateY(-100%);
		opacity: 0;
		visibility: hidden;
		transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
	}
	.bf-nav.is-open .bf-nav__links {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}
	.bf-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		margin-bottom: var(--sp-lg);
	}
	.bf-nav__list a {
		font-size: 22px;
		display: block;
		padding: 12px 0;
		width: 100%;
	}
	.bf-nav__toggle {
		display: inline-flex;
	}
	.bf-nav__cta {
		align-self: flex-start;
	}
	.bf-nav__word {
		display: block;
		flex: 1;
		text-align: center;
		padding: 0 8px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

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

.bf-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: flex-end;
	padding-top: 120px;
	padding-bottom: var(--sp-xl);
	overflow: hidden;
}

.bf-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 30%;
	z-index: 0;
}

.bf-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(11, 9, 8, 0.55) 0%,
		rgba(11, 9, 8, 0.35) 35%,
		rgba(11, 9, 8, 0.92) 100%
	);
	z-index: 1;
}

.bf-hero__content {
	position: relative;
	z-index: 2;
	max-width: 760px;
}

.bf-hero__title {
	font-size: clamp(56px, 11vw, 132px);
	line-height: 0.88;
}

.bf-hero__subtitle {
	margin-top: var(--sp-md);
	max-width: 46ch;
	font-size: 18px;
	color: var(--ink-dim);
}

.bf-hero__actions {
	margin-top: var(--sp-lg);
}

.bf-hero__mark {
	position: absolute;
	left: 50%;
	top: 120px;
	/* --bf-mark-scale / --bf-mark-opacity are written by landing.js as the page
	   scrolls (scroll-coupled shrink + fade behind the fixed nav). The var()
	   fallbacks keep the logo at rest (scale 1, fully opaque) whenever JS is
	   absent, still initializing, or intentionally skipping the effect
	   (reduced motion, element hidden, etc.). */
	transform: translateX(-50%) scale(var(--bf-mark-scale, 1));
	transform-origin: 50% 50%;
	opacity: var(--bf-mark-opacity, 1);
	width: clamp(110px, min(100vh - 580px, 30vw), 340px);
	z-index: 3;
	filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
	will-change: transform, opacity;
}

/* Very short desktop viewports leave no room between nav and headline. */
@media (min-width: 900px) and (max-height: 640px) {
	.bf-hero__mark {
		display: none;
	}
}

@media (max-width: 899px) {
	.bf-hero__mark {
		top: 112px;
		width: clamp(120px, min(100vh - 530px, 62vw), 260px);
		filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
	}
}

/* ---------------------------------------------------------------------- */
/* Section shell                                                           */
/* ---------------------------------------------------------------------- */

.bf-section {
	padding: var(--sp-xl) 0;
	border-top: 1px solid var(--hairline);
	position: relative;
}

.bf-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-sm) var(--sp-md);
	margin-bottom: var(--sp-lg);
}

.bf-section__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: clamp(34px, 5vw, 56px);
}

/* Element-qualified (a.bf-section__more, not the bare class): .bf a { color:
   inherit } (top of file) is a class+type selector, specificity (0,1,1) —
   higher than a lone class (0,1,0) — so a bare-class color here would be
   silently overridden by it regardless of source order. Matching its
   specificity with a.* here lets normal cascade order (this rule comes
   later) decide instead, same pattern already used by .bf-nav__list a,
   .bf-footer__col a, .bf-legal__body a, .bf-footer__legal a. */
a.bf-section__more {
	flex-shrink: 0;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

a.bf-section__more:hover {
	color: var(--ink);
	border-color: var(--accent);
}

a.bf-section__more:focus-visible {
	outline: 1px solid var(--accent);
	outline-offset: 4px;
}

/* Same element-qualification reasoning as a.bf-section__more above, but
   against .bf p { color: var(--ink-dim) } here — coincidentally the same
   value this rule wants, so qualifying is a defensive no-op today, kept for
   consistency with .bf-comingsoon below (which the same rule does change). */
p.bf-empty {
	padding: var(--sp-lg) var(--sp-md);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	color: var(--ink-dim);
	font-size: 15px;
	text-align: center;
}

@media (max-width: 899px) {
	/* Tap-target boost, mobile only — desktop keeps the tighter 3px
	   underline padding. */
	a.bf-section__more {
		padding: 14px 0;
	}
}

/* ---------------------------------------------------------------------- */
/* About / Label statement                                                 */
/* ---------------------------------------------------------------------- */

.bf-about__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--sp-xl);
	align-items: start;
}

.bf-about__statement {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.08;
	text-transform: none;
	color: var(--ink);
}

.bf-about__statement em {
	font-style: normal;
	color: var(--accent);
}

.bf-about__facts {
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
	border-left: 1px solid var(--hairline);
	padding-left: var(--sp-lg);
}

.bf-about__fact dt {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 4px;
}

.bf-about__fact dd {
	margin: 0;
	font-size: 15px;
	color: var(--ink-dim);
}

@media (max-width: 899px) {
	.bf-about__grid {
		grid-template-columns: 1fr;
	}
	.bf-about__facts {
		border-left: none;
		border-top: 1px solid var(--hairline);
		padding-left: 0;
		padding-top: var(--sp-lg);
	}
	/* Contact-section mailto links only — the plain-text About facts
	   (.bf-about__facts with no <a>) are untouched by this selector, and the
	   #contact scope keeps it that way even if a future markup change adds
	   links elsewhere. Only the link itself gains the tap target, not the
	   whole <dd>, per the audit note that the link should carry the hit area. */
	#contact .bf-about__fact dd a {
		display: inline-block;
		padding: 14px 0;
	}
}

/* ---------------------------------------------------------------------- */
/* Releases — uneven bento                                                 */
/* ---------------------------------------------------------------------- */

.bf-releases__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--sp-md);
}

.bf-tile {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	background: linear-gradient(155deg, var(--surface) 0%, #1c1211 60%, var(--accent-dim) 140%);
	border: 1px solid var(--hairline);
	min-height: 220px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--sp-md);
}

.bf-tile--wide {
	grid-column: span 4;
	min-height: 360px;
}

.bf-tile--tall {
	grid-column: span 2;
	/* Was tuned for a single narrow tile beside a --wide one (both min-height:
	   360px, so a fixed height matched a fixed pairing). The homepage now
	   places three --tall tiles side by side across the full 6-column row;
	   a fixed 360px height stretches thinner and thinner between the 1180px
	   container and the 899px breakpoint (334px wide at full container down
	   to ~241px at 900px, same 360px height throughout), reading as
	   increasingly narrow/elongated. aspect-ratio keeps the card proportion
	   constant across that whole range instead. Reset back to auto for the
	   <900px stacked layout below, which is unaffected by any of this. */
	aspect-ratio: 3 / 4;
}

.bf-tile--half {
	grid-column: span 3;
}

.bf-tile--full {
	grid-column: span 6;
	min-height: 280px;
}

.bf-tile__label {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 6px;
}

.bf-tile__title {
	font-family: var(--font-display);
	font-size: 26px;
	text-transform: uppercase;
	color: var(--ink);
}

.bf-tile__meta {
	margin-top: 6px;
	font-size: 13px;
	color: var(--ink-dim);
}

@media (max-width: 899px) {
	.bf-releases__grid {
		grid-template-columns: 1fr;
	}
	.bf-tile,
	.bf-tile--wide,
	.bf-tile--tall,
	.bf-tile--half,
	.bf-tile--full {
		grid-column: span 1;
		min-height: 240px;
		aspect-ratio: auto;
	}
}

/* Homepage release tiles are <a> cards (the whole tile is clickable); the
   archive's .bf-tile--half tiles are plain <div>s with platform links inside
   instead — the a-qualifier keeps this hover/focus affordance off those. */
a.bf-tile {
	transition: border-color 0.2s ease;
}

a.bf-tile:hover,
a.bf-tile:focus-visible {
	border-color: var(--accent);
}

a.bf-tile:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* Artists — horizontal strip                                              */
/* ---------------------------------------------------------------------- */

.bf-artists__strip {
	display: flex;
	gap: var(--sp-md);
	overflow-x: auto;
	padding-bottom: var(--sp-sm);
	scroll-snap-type: x proximity;
}

.bf-artists__strip::-webkit-scrollbar {
	height: 4px;
}
.bf-artists__strip::-webkit-scrollbar-thumb {
	background: var(--accent-dim);
}

.bf-artist {
	flex: 0 0 220px;
	scroll-snap-align: start;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius);
	border: 1px solid var(--hairline);
	background: linear-gradient(200deg, var(--surface), var(--bg));
	display: flex;
	align-items: flex-end;
	padding: var(--sp-md);
	position: relative;
}

.bf-artist__name {
	font-family: var(--font-display);
	font-size: 22px;
	text-transform: uppercase;
}

.bf-artist__role {
	position: absolute;
	top: var(--sp-md);
	left: var(--sp-md);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
}

/* .bf-artist is only ever rendered as a link (homepage roster preview) — kept
   a-qualified anyway for consistency with the other card variants. */
a.bf-artist {
	transition: border-color 0.2s ease;
}

a.bf-artist:hover,
a.bf-artist:focus-visible {
	border-color: var(--accent);
}

a.bf-artist:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* Events — editorial list                                                 */
/* ---------------------------------------------------------------------- */

.bf-events__list {
	display: flex;
	flex-direction: column;
}

.bf-event {
	display: grid;
	grid-template-columns: 140px 1fr auto;
	gap: var(--sp-md);
	align-items: center;
	padding: var(--sp-md) 0;
	border-bottom: 1px solid var(--hairline);
}

.bf-event:first-child {
	border-top: 1px solid var(--hairline);
}

.bf-event__date {
	font-family: var(--font-display);
	font-size: 22px;
	color: var(--accent);
}

.bf-event__name {
	font-size: 18px;
	color: var(--ink);
}

.bf-event__place {
	font-size: 13px;
	color: var(--ink-dim);
	margin-top: 2px;
}

.bf-event__status {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-dim);
	border: 1px solid var(--hairline);
	padding: 6px 12px;
	border-radius: var(--radius);
}

@media (max-width: 640px) {
	.bf-event {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* ---------------------------------------------------------------------- */
/* Workshops + Label — statement band                                      */
/* ---------------------------------------------------------------------- */

.bf-band {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-xl);
}

.bf-band__title {
	font-size: clamp(30px, 4vw, 48px);
}

.bf-band__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
	justify-content: center;
	/* #workshops / #label live on this inner div rather than the <section>
	   (see template-landing.php), so it has none of the section's own
	   120px padding-top to clear the fixed nav on anchor-jump. scroll-margin-top
	   restores that same clearance for this element specifically. Scoped to the
	   class (not the two ids) so any future anchor placed on this reusable
	   component is covered automatically — and scoped narrowly here rather than
	   via a blanket `:target` rule, because the other anchors (#releases,
	   #partners, #contact, …) sit directly on their <section> and already get
	   correct clearance for free from that section's own padding-top; adding
	   scroll-margin-top globally would stack on top of that and push those
	   already-correct anchors too far down. */
	scroll-margin-top: var(--sp-xl);
}

@media (max-width: 899px) {
	.bf-band {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------- */
/* Submit demo — full-bleed CTA                                            */
/* ---------------------------------------------------------------------- */

.bf-demo {
	background: var(--accent);
	color: var(--bg);
	text-align: center;
	padding: var(--sp-xl) 0;
	border-top: 1px solid var(--accent-dim);
}

.bf-demo .bf__eyebrow {
	color: var(--bg);
	opacity: 0.7;
}

.bf-demo__title {
	color: var(--bg);
	font-size: clamp(40px, 7vw, 84px);
	max-width: 18ch;
	margin: 0 auto;
}

.bf-demo__subtitle {
	max-width: 50ch;
	margin: var(--sp-md) auto 0;
	color: rgba(11, 9, 8, 0.75);
}

.bf-demo__actions {
	margin-top: var(--sp-lg);
}

.bf-demo .bf__btn--solid {
	background: var(--bg);
	color: var(--ink);
	border-color: var(--bg);
}
.bf-demo .bf__btn--solid:hover {
	background: var(--surface);
}

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

.bf-footer {
	padding: var(--sp-xl) 0 var(--sp-lg);
	background: var(--surface);
}

.bf-footer__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: var(--sp-xl);
}

.bf-footer__title {
	font-size: clamp(30px, 4vw, 46px);
	margin-bottom: var(--sp-md);
}

.bf-footer__col h4 {
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--sp-sm);
}

.bf-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bf-footer__col a {
	color: var(--ink-dim);
	font-size: 14px;
	display: inline-block;
	padding: 6px 0;
	transition: color 0.2s ease;
}
.bf-footer__col a:hover {
	color: var(--ink);
}

.bf-footer__bottom {
	margin-top: var(--sp-xl);
	padding-top: var(--sp-md);
	border-top: 1px solid var(--hairline);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-sm);
	font-size: 12px;
	color: var(--ink-dim);
	letter-spacing: 0.04em;
}

@media (max-width: 899px) {
	.bf-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--sp-lg);
	}
	/* Tap-target boost, mobile only — desktop keeps the tighter 6px padding
	   so column spacing doesn't stretch out. (.bf-footer__legal a's own
	   boost lives further down, right after its base rule — it is declared
	   later in the cascade there, which a copy here would lose to at equal
	   specificity.) */
	.bf-footer__col a {
		padding: 12px 0;
	}
}

/* ---------------------------------------------------------------------- */
/* Motion (gated by the direction's motion dial — kept light)              */
/* ---------------------------------------------------------------------- */

.bf-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.bf-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

html.bf-no-js .bf-reveal,
.bf-reveal {
	opacity: 1;
	transform: none;
}

html.bf-js .bf-reveal {
	opacity: 0;
	transform: translateY(18px);
}

html.bf-js .bf-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

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

	/* landing.js already no-ops the scroll-coupled effect under reduced
	   motion, so --bf-mark-scale/--bf-mark-opacity are never written — this
	   just pins the rest state explicitly so the logo only ever scrolls
	   normally out of view, never shrinks or fades. */
	.bf-hero__mark {
		transform: translateX(-50%);
		opacity: 1;
		will-change: auto;
	}
}


/* ---------------------------------------------------------------------- */
/* Legal / prose pages (Impressum, Datenschutz)                            */
/* ---------------------------------------------------------------------- */

.bf-legal {
	padding: calc(120px + var(--sp-xl)) 0 var(--sp-xl);
	min-height: 60vh;
}

.bf-legal__inner {
	max-width: 760px;
}

.bf-page-head {
	margin-bottom: var(--sp-lg);
}

/* p.bf-comingsoon (element-qualified): .bf p { color: var(--ink-dim) } is a
   class+type selector, specificity (0,1,1) — a bare .bf-comingsoon class
   (0,1,0) would lose to it regardless of source order and silently render
   ink-dim instead of ink. Matching the specificity here restores normal
   cascade order. */
p.bf-comingsoon {
	font-family: var(--font-display);
	font-size: clamp(40px, 11vw, 128px);
	line-height: 0.9;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: var(--sp-lg);
}

.bf-archive-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-xl);
}

.bf-archive-list > * + * {
	padding-top: var(--sp-xl);
	border-top: 1px solid var(--hairline);
}

.bf-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--sp-xl);
}

.bf-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--ink-dim);
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.bf-pagination .page-numbers:hover {
	border-color: var(--accent);
	color: var(--ink);
}

.bf-pagination .page-numbers.current {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--bg);
}

.bf-pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--ink-dim);
}

@media (max-width: 899px) {
	/* Tap-target boost, mobile only — desktop keeps the tighter 40px box. */
	.bf-pagination .page-numbers {
		min-width: 44px;
		height: 44px;
	}
}

.bf-legal__title {
	font-size: clamp(40px, 6vw, 64px);
	margin-bottom: var(--sp-lg);
}

.bf-legal__body h2 {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(20px, 2.4vw, 26px);
	letter-spacing: 0.01em;
	margin-top: var(--sp-lg);
	margin-bottom: var(--sp-sm);
	padding-top: var(--sp-md);
	border-top: 1px solid var(--hairline);
}

.bf-legal__body h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.bf-legal__body p,
.bf-legal__body li {
	color: var(--ink-dim);
	font-size: 15px;
	line-height: 1.7;
	max-width: 68ch;
}

.bf-legal__body p {
	margin-bottom: var(--sp-sm);
}

.bf-legal__body ul {
	margin: 0 0 var(--sp-sm);
	padding-left: 1.2em;
}

.bf-legal__body a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bf-legal__body a:hover {
	color: var(--ink);
}

.bf-legal__body em {
	font-style: normal;
	color: var(--ink);
}

.bf-footer__legal {
	display: flex;
	gap: 20px;
}

.bf-footer__legal a {
	color: var(--ink-dim);
	font-size: 12px;
	letter-spacing: 0.04em;
	display: inline-block;
	padding: 6px 0;
	transition: color 0.2s ease;
}

.bf-footer__legal a:hover {
	color: var(--ink);
}

@media (max-width: 899px) {
	/* Tap-target boost, mobile only — desktop keeps the tighter 6px padding. */
	.bf-footer__legal a {
		padding: 13px 0;
	}
}

/* ---------------------------------------------------------------------- */
/* Release platform links + artist feature card                           */
/* ---------------------------------------------------------------------- */

.bf-tile__links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.bf-platform-link {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 10px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	color: var(--ink-dim);
	background: rgba(11, 9, 8, 0.4);
	transition: border-color 0.2s ease, color 0.2s ease;
}

@media (max-width: 899px) {
	.bf-platform-link {
		padding: 10px 14px;
		font-size: 12px;
	}
}

.bf-platform-link:hover {
	border-color: var(--accent);
	color: var(--ink);
}

.bf-artist-feature {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: var(--sp-xl);
	align-items: center;
}

.bf-artist-feature__photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	display: block;
}

.bf-artist-feature__role {
	display: block;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--sp-sm);
}

.bf-artist-feature__name {
	font-size: clamp(36px, 5vw, 56px);
}

.bf-artist-feature__bio {
	margin-top: var(--sp-md);
	max-width: 56ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-dim);
}

.bf-artist-feature__links {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: var(--sp-lg);
}

.bf-artist-feature__note {
	margin-top: var(--sp-md);
	font-size: 13px;
	color: var(--ink-dim);
}

.bf-artist-feature__note a {
	color: var(--accent);
}

@media (max-width: 899px) {
	.bf-artist-feature {
		grid-template-columns: 1fr;
	}
	.bf-artist-feature__photo {
		max-width: 260px;
		margin: 0 auto;
	}
	.bf-artist-feature > div {
		text-align: center;
	}
	.bf-artist-feature__bio {
		margin-left: auto;
		margin-right: auto;
	}
	.bf-artist-feature__links {
		justify-content: center;
	}
	/* Tap-target boost, mobile only — desktop keeps the inline text link
	   untouched. */
	.bf-artist-feature__note a {
		display: inline-block;
		padding: 12px 0;
	}
}

body.bf-nav-locked {
	overflow: hidden;
}


/* ---------------------------------------------------------------------- */
/* Compilations                                                            */
/* ---------------------------------------------------------------------- */

.bf-compilation {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: var(--sp-xl);
	align-items: start;
}

.bf-compilation__cover {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	display: block;
}

.bf-compilation__meta {
	display: block;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--sp-sm);
}

.bf-compilation__title {
	font-size: clamp(30px, 4vw, 44px);
	margin-bottom: var(--sp-md);
}

.bf-compilation__tracklist {
	list-style: none;
	margin: 0 0 var(--sp-lg);
	padding: 0;
	counter-reset: track;
}

.bf-compilation__tracklist li {
	counter-increment: track;
	display: grid;
	grid-template-columns: 28px 1fr auto;
	gap: var(--sp-sm);
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--hairline);
}

.bf-compilation__tracklist li:first-child {
	border-top: 1px solid var(--hairline);
}

.bf-compilation__tracklist li::before {
	content: counter(track, decimal-leading-zero);
	color: var(--accent);
	font-family: var(--font-display);
	font-size: 13px;
}

.bf-compilation__track-name {
	color: var(--ink);
	font-size: 14px;
}

.bf-compilation__track-artist {
	color: var(--ink-dim);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: right;
}

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

@media (max-width: 899px) {
	.bf-compilation {
		grid-template-columns: 1fr;
	}
	.bf-compilation__cover {
		max-width: 280px;
		margin: 0 auto var(--sp-md);
	}
}

/* Homepage compilation preview is a full-card <a>; the archive .bf-compilation
   is a plain <div> (platform links live inside it instead) — the a-qualifier
   keeps this hover/focus affordance off the archive variant. The card itself
   has no border of its own to re-color, so the accent frame lands on its one
   bordered element (the cover), plus an outline on the full card for the
   keyboard-focus indicator. */
a.bf-compilation .bf-compilation__cover {
	transition: border-color 0.2s ease;
}

a.bf-compilation:hover .bf-compilation__cover,
a.bf-compilation:focus-visible .bf-compilation__cover {
	border-color: var(--accent);
}

a.bf-compilation:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}