/*
 * home.css
 * Homepage-only stylesheet for the "Esoteric Delicatessens" landing.
 * Enqueued only on is_front_page() - does not affect /blog or product pages.
 *
 * Aesthetic: late-night studio zine meets vintage electronics catalog.
 * Primary motif: cassette J-cards, tape-deck specs, receipt-paper CTAs.
 */

/* ------------------------------------------------------------------ */
/* 1. Design tokens                                                    */
/* ------------------------------------------------------------------ */
.home-main {
	--color-coral: #e8a87c;        /* borders, stickers, decorative accents only */
	--color-coral-deep: #cc885a;
	--color-cream: #ffe8cc;
	--color-cream-soft: #f3dcc1;
	--color-pink: #ffbfd9;
	--color-crimson: #e94560;
	--color-gold: #d4a830;
	--color-ink: #140b22;
	--color-ink-2: #0e0817;
	--color-ink-3: rgba(20, 11, 34, 0.72);
	--color-panel: rgba(20, 11, 34, 0.82);
	--color-panel-alt: rgba(232, 168, 124, 0.08);
	--color-text: #fff4e4;         /* bumped brighter for WebGL readability */
	--color-text-dim: #f0e2cb;
	--color-muted: #c5b8a4;
	--color-line: rgba(255, 232, 204, 0.38);
	--color-line-strong: rgba(255, 232, 204, 0.7);
	--color-accent: #ffd7ac;

	/* ---- Reel-to-reel chrome palette (tape-machine aesthetic) ---- */
	--ad-gunmetal:      #2a2d35;
	--ad-gunmetal-hi:   #3a3d46;
	--ad-gunmetal-lo:   #1a1c22;
	--ad-steel:         #8a8d94;
	--ad-chrome:        #d5d6da;
	--ad-chrome-dim:    #a8abb2;
	--ad-wood:          #3d2817;
	--ad-wood-edge:     #2a1b0f;
	--ad-tape:          #4a3a2b;
	--ad-tape-edge:     #1a120d;
	--ad-led-amber:     #ffb84d;
	--ad-led-red:       #ff4d4d;
	--ad-led-green:     #4acf5c;
	--ad-led-glow:      rgba(255, 184, 77, 0.55);
	--ad-ivory:         #e8e2d4;
	--ad-ivory-dim:     #a8a396;
	--ad-brass:         #c9a75e;

	--shadow-readable: 0 1px 0 rgba(0, 0, 0, 0.6), 0 2px 10px rgba(14, 8, 23, 0.7);

	/* Fonts - Abril Fatface for hero brand (classic vintage magazine display
	   serif), Oswald for rack-unit nameplates, Cutive Mono for body (warm
	   typewriter), VT323 for mechanical readouts. */
	--font-hero:      'Abril Fatface', Georgia, serif;
	--font-nameplate: 'Oswald', 'Arial Narrow', sans-serif;
	--font-display:   'Abril Fatface', Georgia, serif;
	--font-readout:   'VT323', 'Courier New', monospace;
	--font-body:      'Cutive Mono', 'Space Mono', 'Courier New', monospace;
	--font-mono:      'Cutive Mono', 'Space Mono', 'Courier New', monospace;

	/* Scroll-driven custom properties - set by home-interactions.js, read by CSS */
	--reel-speed: 22s;         /* rotation period, shorter = faster spin */
	--scroll-progress: 0;      /* 0 -> 100 */
	--vu-left: 0.15;           /* 0 -> 1 (0 = -45deg needle, 1 = +45deg) */
	--vu-right: 0.12;

	--space-section: clamp(20px, 3vw, 40px);
	--space-gutter: clamp(14px, 1.8vw, 22px);
	--space-card: clamp(14px, 1.6vw, 22px);
	--panel-bg: rgba(14, 8, 23, 0.35);
	--radius-sharp: 2px;
	--radius-soft: 8px;
	--radius-pill: 999px;

	--max-width: 1240px;
	--content-width: 960px;
}

/* ------------------------------------------------------------------ */
/* 2. Main canvas                                                      */
/* ------------------------------------------------------------------ */
.home-main {
	display: block;
	color: var(--color-text);
	font-family: var(--font-body);
	line-height: 1.55;
	font-size: 17px;
	padding: 0;
}

.home-main a { color: inherit; }

/* Beat the parent theme's `#primary h1/h2/h3 { color: #030303 }` on every
   heading inside our homepage main. Our stylesheet loads later, so same
   specificity but later source wins. */
#home-main h1,
#home-main h2,
#home-main h3,
#home-main h4,
#home-main h1 a,
#home-main h2 a,
#home-main h3 a {
	color: var(--color-cream);
}

/* Hero section stays contained and centered (WebGL shows on all sides). */
.home-main .home-hero {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 40px) clamp(24px, 3vw, 40px);
}

/* All content sections below the hero bleed edge-to-edge with a dark panel
   so they read cleanly against the WebGL background. Inner children are
   constrained to max-width via the wrapper pattern below. */
.home-main .home-section:not(.home-hero) {
	background: var(--panel-bg);
	padding: var(--space-section) 0;
	scroll-margin-top: 80px;
}
/* Constrain all direct children of non-hero sections to the max-width box. */
.home-main .home-section:not(.home-hero) > * {
	max-width: var(--max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(20px, 4vw, 40px);
	padding-right: clamp(20px, 4vw, 40px);
	box-sizing: border-box;
}
/* First non-hero section gets a top border-accent to mark the transition. */
.home-main .home-hero + .home-section {
	border-top: 1px solid rgba(232, 168, 124, 0.35);
	box-shadow: 0 -12px 24px -12px rgba(0, 0, 0, 0.6);
}

.home-main .home-section__note {
	margin: -0.5rem 0 calc(var(--space-gutter) * 1.25);
	color: var(--color-text-dim);
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	max-width: 52ch;
}

#home-main a.home-section__footer-link {
	display: inline-flex;
	gap: 0.6em;
	align-items: baseline;
	margin-top: var(--space-gutter);
	padding: 0.65em 1.3em;
	color: var(--color-accent);
	font-family: 'Space Mono', 'Courier New', monospace;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.82rem;
	background: rgba(14, 8, 23, 0.6);
	border: 1.5px solid var(--color-line);
	text-decoration: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
	transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
#home-main a.home-section__footer-link:hover {
	color: #1a0f26;
	border-color: var(--color-accent);
	background: var(--color-accent);
	text-shadow: none;
}

/* ------------------------------------------------------------------ */
/* 3. Section label (the "SIDE A · NAME ─── ● REC" strip)              */
/* ------------------------------------------------------------------ */
/* Cassette J-card label strip — chunky, analog, dominant.
   Coral-amber gradient, sharp dark borders, two reel-dot ends,
   BUNGEE section name, tape-spindle detail. Replaces the old thin dashed rules. */
.home-main .section-label {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9em;
	margin-bottom: var(--space-gutter);
	padding: 14px clamp(56px, 6vw, 90px);
	font-family: 'Space Mono', 'Courier New', monospace;
	font-size: clamp(0.78rem, 1vw, 0.9rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #1a0f26;
	background:
		repeating-linear-gradient(45deg, transparent 0 10px, rgba(0,0,0,0.035) 10px 11px),
		linear-gradient(180deg, #ffc89a 0%, var(--color-coral) 55%, #cd8a5a 100%);
	border-top: 3px solid #1a0f26;
	border-bottom: 3px solid #1a0f26;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.35),
		inset 0 -1px 0 rgba(0,0,0,0.25),
		0 6px 18px -8px rgba(0,0,0,0.55);
}

/* Reel-dot ends — dark spun-circle caps on each side */
.home-main .section-label::before,
.home-main .section-label::after {
	content: "";
	position: absolute;
	top: 50%;
	width: clamp(22px, 2.4vw, 30px);
	height: clamp(22px, 2.4vw, 30px);
	border-radius: 50%;
	transform: translateY(-50%);
	background:
		radial-gradient(circle at 50% 50%,
			var(--color-coral) 0 10%,
			#0e0817 12% 30%,
			#2b1c3f 32% 52%,
			#14091f 54% 100%);
	border: 2px solid #1a0f26;
	box-shadow:
		inset 0 0 0 2px rgba(232,168,124,0.35),
		inset 0 0 6px rgba(0,0,0,0.8),
		0 1px 0 rgba(255,255,255,0.15);
}
.home-main .section-label::before { left: clamp(12px, 1.6vw, 20px); }
.home-main .section-label::after  { right: clamp(12px, 1.6vw, 20px); }

.home-main .section-label__mark { display: none; }

.home-main .section-label__track {
	color: #1a0f26;
	font-weight: 700;
	flex: 0 0 auto;
	text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

.home-main .section-label__name {
	color: #1a0f26;
	font-family: 'Bungee', 'VT323', 'Courier New', monospace;
	font-weight: 400;
	font-style: normal;
	font-size: clamp(1.05rem, 1.9vw, 1.5rem);
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: uppercase;
	flex: 0 1 auto;
	padding: 0 0.2em;
	text-shadow:
		1px 1px 0 rgba(255,255,255,0.35),
		-1px -1px 0 rgba(0,0,0,0.1);
}

.home-main .section-label__rule {
	flex: 1 1 auto;
	min-width: 1rem;
	height: 2px;
	background:
		linear-gradient(to right, transparent 0, rgba(26,15,38,0.55) 3px, rgba(26,15,38,0.55) 8px, transparent 8px) repeat-x;
	background-size: 11px 2px;
}

.home-main .section-label__tag {
	color: #fff6e4;
	font-weight: 700;
	font-size: 0.92em;
	flex: 0 0 auto;
	padding: 3px 9px;
	background: #1a0f26;
	border-radius: 2px;
	letter-spacing: 0.14em;
	text-shadow: none;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

@media (max-width: 600px) {
	.home-main .section-label {
		padding: 10px 42px;
		gap: 0.5em;
	}
	.home-main .section-label__track { display: none; }
	.home-main .section-label__rule { display: none; }
}

/* ------------------------------------------------------------------ */
/* 4. Hero                                                             */
/* ------------------------------------------------------------------ */
.home-main .home-hero {
	position: relative;
	text-align: center;
	animation: ad-hero-in 900ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
	isolation: isolate;
}
.home-main .home-hero::before {
	content: "";
	position: absolute;
	inset: -2vw 0 -4vw;
	background: radial-gradient(ellipse 60% 70% at 50% 45%,
		rgba(14, 8, 23, 0.55) 0%,
		rgba(14, 8, 23, 0.25) 45%,
		transparent 75%);
	z-index: -1;
	pointer-events: none;
}

@keyframes ad-hero-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

.home-main .home-hero__inner {
	max-width: var(--content-width);
	margin: 0 auto;
}

.home-main .home-hero__eyebrow {
	display: inline-flex;
	gap: 0.8em;
	align-items: center;
	margin: 0 0 clamp(18px, 2.5vw, 28px);
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--color-accent);
	text-shadow: var(--shadow-readable);
}
.home-main .tape-marker {
	display: inline-block;
	transform: translateY(-1px);
}

/* Hero title - scoped to #home-main to beat parent's `#primary h1` color rule. */
#home-main h1.home-hero__title {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25em 0.35em;
	margin: 0 0 0.2em;
	font-family: 'Bungee', 'VT323', 'Courier New', monospace;
	font-weight: 400;
	font-size: clamp(2.2rem, 8vw, 4.6rem);
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--color-cream);
	text-shadow:
		0 2px 0 rgba(0, 0, 0, 0.55),
		0 6px 22px rgba(14, 8, 23, 0.75);
}
#home-main .home-hero__title-word {
	display: inline-block;
	color: var(--color-cream);
}
#home-main .home-hero__title-word--alt {
	color: var(--color-accent);
}

.home-main .home-hero__tagline {
	display: inline-block;
	margin: 0 0 clamp(20px, 3vw, 32px);
	padding: 0.2em 0.9em;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.2rem, 2.6vw, 1.75rem);
	color: var(--color-cream);
	letter-spacing: 0.02em;
	background: rgba(14, 8, 23, 0.55);
	border-top: 1px solid rgba(232, 168, 124, 0.35);
	border-bottom: 1px solid rgba(232, 168, 124, 0.35);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.home-main .home-hero__copy {
	max-width: 54ch;
	margin: 0 auto clamp(24px, 3vw, 36px);
	font-size: clamp(1.05rem, 1.3vw, 1.18rem);
	color: var(--color-cream);
	line-height: 1.7;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.home-main .home-hero__cta-row {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 0 0 clamp(32px, 4vw, 48px);
}

/* CTA buttons - every color hooked to Customizer custom properties so
   `Appearance > Customize > Home Page` can drive them. Scoped to #home-main
   to beat the parent theme's `#primary a` cascade. */
#home-main a.home-cta,
#home-main a.home-cta--primary,
#home-main a.home-cta--ghost,
#home-main a.release-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.85em 1.7em;
	font-family: 'Space Mono', 'Courier New', monospace;
	font-weight: 700;
	font-size: 0.88rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	text-decoration: none;
	cursor: pointer;
	text-shadow: none;
	transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 200ms ease;
}

/* Primary - vintage bakelite pill (dark brown bg, cream text). Selector
   scoped to `body.home #home-main` so the parent theme's `#primary a`
   color cascade can never win (specificity 0,2,2,1 vs parent 0,1,0,1). */
body.home #home-main a.home-cta--primary,
body.home #home-main a.release-card__cta {
	color: var(--ad-btn-primary-text, #ffe8cc);
	background: var(--ad-btn-primary-bg, #2a1d0e);
	border-color: var(--ad-btn-primary-bg, #2a1d0e);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		inset 0 -1px 0 rgba(0, 0, 0, 0.5),
		0 4px 14px rgba(0, 0, 0, 0.35);
}
body.home #home-main a.home-cta--primary:hover,
body.home #home-main a.release-card__cta:hover {
	color: var(--ad-btn-primary-text-hover, var(--ad-btn-primary-text, #ffe8cc));
	background: var(--ad-btn-primary-bg-hover, var(--ad-btn-primary-bg, #4a3218));
	border-color: var(--ad-btn-primary-bg-hover, var(--ad-btn-primary-bg, #4a3218));
	transform: translateY(-1px);
}

/* Ghost - darker pill that mirrors the primary with tighter outline */
body.home #home-main a.home-cta--ghost {
	color: var(--ad-btn-ghost-text, #ffe8cc);
	background: var(--ad-btn-ghost-bg, #0e0817);
	border-color: var(--ad-btn-ghost-bg, #0e0817);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
body.home #home-main a.home-cta--ghost:hover {
	color: var(--ad-btn-ghost-text-hover, #ffe8cc);
	background: var(--ad-btn-ghost-bg-hover, #2a1d0e);
	border-color: var(--ad-btn-ghost-bg-hover, #2a1d0e);
	transform: translateY(-1px);
}

/* Release-card CTA inherits all primary styling above, but has its own
   alignment + margin. */
#home-main .release-card__cta {
	align-self: flex-start;
	margin-top: 0.4em;
}

/* VU-meter style hero meta */
.home-main .home-hero__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.home-main .meter {
	display: inline-block;
	width: 120px;
	height: 6px;
	border: 1px solid var(--color-line);
	background: var(--color-ink-2);
	overflow: hidden;
}
.home-main .meter__fill {
	display: block;
	height: 100%;
	width: 68%;
	background: linear-gradient(90deg, #4acf5c 0%, var(--color-gold) 70%, var(--color-crimson) 100%);
	animation: ad-meter 3.2s ease-in-out infinite alternate;
}
@keyframes ad-meter {
	0%   { width: 28%; }
	50%  { width: 72%; }
	100% { width: 58%; }
}

/* ------------------------------------------------------------------ */
/* 5. Release card (cassette)                                          */
/* ------------------------------------------------------------------ */
.home-main .release-card {
	display: grid;
	grid-template-columns: minmax(220px, 380px) 1fr;
	gap: clamp(20px, 3vw, 40px);
	padding: clamp(20px, 2.4vw, 32px);
	background: var(--color-panel);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sharp);
	position: relative;
	isolation: isolate;
}
.home-main .release-card::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px dashed var(--color-line);
	border-radius: var(--radius-sharp);
	pointer-events: none;
	z-index: 0;
}
.home-main .release-card > * { position: relative; z-index: 1; }

.home-main .release-card__art {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: linear-gradient(135deg, #2a1b3a 0%, #1a0e2b 100%);
	border: 1px solid var(--color-line-strong);
	display: block;
	text-decoration: none;
}
.home-main .release-card__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.home-main .release-card__art:hover img { transform: scale(1.04); }

.home-main .release-card__art-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--color-coral);
	font-family: var(--font-display);
	font-size: clamp(4rem, 10vw, 7rem);
	font-style: italic;
}

.home-main .release-card__sprocket {
	position: absolute;
	top: 10%;
	width: 18%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, #0d0818 0 32%, #2b1c3f 33% 48%, var(--color-ink-2) 49% 100%);
	border: 1px solid rgba(232, 168, 124, 0.25);
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
	pointer-events: none;
	animation: ad-spin 24s linear infinite;
}
.home-main .release-card__sprocket::after {
	content: "";
	position: absolute;
	inset: 35%;
	border-radius: 50%;
	background: radial-gradient(circle, var(--color-coral) 0 30%, transparent 31% 100%);
	opacity: 0.4;
}
.home-main .release-card__sprocket--left  { left: 8%; }
.home-main .release-card__sprocket--right { right: 8%; animation-direction: reverse; }
@keyframes ad-spin { to { transform: rotate(360deg); } }

.home-main .release-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	align-self: center;
	min-width: 0;
}
.home-main .release-card__kicker {
	font-family: var(--font-mono);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.78rem;
	color: var(--color-coral);
}
.home-main .release-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.8rem, 3.6vw, 2.8rem);
	line-height: 1.05;
	color: var(--color-cream);
}
.home-main .release-card__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 280ms ease;
}
.home-main .release-card__title a:hover { background-size: 100% 1px; }

.home-main .release-card__excerpt {
	margin: 0;
	font-size: 1.05rem;
	color: var(--color-text);
	max-width: 58ch;
	line-height: 1.65;
}

.home-main .release-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 1.6em;
	margin: 0.3em 0 0.6em;
	padding: 0;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--color-text-dim);
	text-transform: uppercase;
}
.home-main .release-card__specs > div { display: inline-flex; gap: 0.4em; }
.home-main .release-card__specs dt { color: var(--color-coral); margin: 0; }
.home-main .release-card__specs dd { margin: 0; color: var(--color-cream); }

.home-main .release-card__cta { align-self: flex-start; margin-top: 0.4em; }

@media (max-width: 720px) {
	.home-main .release-card {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ */
/* 6. Product rack (shared by paid / free / music)                     */
/* ------------------------------------------------------------------ */
.home-main .product-rack {
	display: grid;
	gap: var(--space-gutter);
	list-style: none;
	margin: 0;
	padding: 0;
}

.home-main .product-rack--paid {
	grid-template-columns: repeat(3, 1fr);
}
.home-main .product-rack--free {
	grid-template-columns: repeat(3, 1fr);
}
.home-main .product-rack--music {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
	.home-main .product-rack--paid,
	.home-main .product-rack--free,
	.home-main .product-rack--music {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 520px) {
	.home-main .product-rack--paid,
	.home-main .product-rack--free,
	.home-main .product-rack--music {
		grid-template-columns: 1fr;
	}
}

.home-main .product-card {
	position: relative;
	background: var(--color-panel);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sharp);
	overflow: hidden;
	transition: transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1), border-color 220ms ease, box-shadow 220ms ease;
}
.home-main .product-card:hover {
	transform: translateY(-3px);
	border-color: var(--color-coral);
	box-shadow: 0 14px 40px -18px rgba(232, 168, 124, 0.45);
}

.home-main .product-card__link {
	display: grid;
	grid-template-rows: auto 1fr;
	text-decoration: none;
	height: 100%;
	color: inherit;
}

.home-main .product-card__frame {
	position: relative;
	display: block;
	background: linear-gradient(160deg, #2a1b3a 0%, #14091f 100%);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.home-main .product-rack--free .product-card__frame { aspect-ratio: 1 / 1; }

.home-main .product-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.home-main .product-card:hover .product-card__image { transform: scale(1.05); }

.home-main .product-card__image--placeholder {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	color: var(--color-coral);
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(2rem, 4vw, 3rem);
	overflow: hidden;
	background:
		radial-gradient(120% 80% at 80% -10%, var(--tile-glow, rgba(232, 168, 124, 0.25)) 0%, transparent 60%),
		linear-gradient(160deg, var(--tile-from, #2a1b3a) 0%, var(--tile-to, #120820) 100%);
}
.home-main .product-card__image--placeholder::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px dashed rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-sharp);
	pointer-events: none;
}
.home-main .product-card__monogram {
	color: var(--tile-ink, var(--color-cream));
	font-size: clamp(2.6rem, 6vw, 4.2rem);
	font-style: italic;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 0.9;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.home-main .product-card__catalog {
	font-family: var(--font-mono);
	font-style: normal;
	font-size: 0.66rem;
	letter-spacing: 0.3em;
	color: rgba(255, 255, 255, 0.55);
	padding: 0.2em 0.6em;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-sharp);
	text-transform: uppercase;
}

/* Per-product accent tints for free downloads (zine-catalog style) */
.home-main .product-card[data-accent="coral"]  { --tile-from: #5c2d24; --tile-to: #1f0f1c; --tile-glow: rgba(232,168,124,0.35); --tile-ink: #ffd6b3; }
.home-main .product-card[data-accent="violet"] { --tile-from: #3d2656; --tile-to: #160a25; --tile-glow: rgba(200,150,255,0.30); --tile-ink: #e5d5ff; }
.home-main .product-card[data-accent="mint"]   { --tile-from: #1f4a3d; --tile-to: #081c18; --tile-glow: rgba(140,230,190,0.28); --tile-ink: #d5f7e6; }
.home-main .product-card[data-accent="amber"]  { --tile-from: #5a3b12; --tile-to: #201406; --tile-glow: rgba(232,180,90,0.30); --tile-ink: #f7e0b0; }
.home-main .product-card[data-accent="rose"]   { --tile-from: #5a2740; --tile-to: #1f0b15; --tile-glow: rgba(255,180,210,0.28); --tile-ink: #ffd4e4; }
.home-main .product-card[data-accent="gold"]   { --tile-from: #4e3a0a; --tile-to: #1c1304; --tile-glow: rgba(240,200,80,0.30); --tile-ink: #ffe8a8; }

/* Price chip (paid row) */
.home-main .product-card__price-chip {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 0.4em 0.8em;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-cream);
	background: var(--color-crimson);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-sharp);
	box-shadow: 0 4px 14px rgba(233, 69, 96, 0.35), inset 0 0 0 1px rgba(0,0,0,0.15);
	transform: rotate(2.5deg);
}
.home-main .product-card__price-chip--license {
	background: var(--color-ink-2);
	color: var(--color-coral);
	border-color: var(--color-line-strong);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* FREE sticker (free row) */
.home-main .product-card__sticker {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 0.4em 0.6em;
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 0.76rem;
	letter-spacing: 0.24em;
	color: var(--color-ink);
	background: var(--color-cream);
	border: 1.5px solid var(--color-ink);
	border-radius: var(--radius-sharp);
	box-shadow: 2px 2px 0 var(--color-crimson);
	transform: rotate(-3deg);
}

.home-main .product-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	padding: var(--space-card);
}

.home-main .product-card__kicker {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-coral);
}

.home-main .product-card__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.2rem, 1.7vw, 1.5rem);
	color: var(--color-cream);
	line-height: 1.2;
}
.home-main .product-rack--free .product-card__title {
	font-size: clamp(1rem, 1.4vw, 1.1rem);
	color: var(--color-cream);
}

.home-main .product-card__excerpt {
	margin-top: 0.4em;
	font-size: 0.95rem;
	color: var(--color-text);
	line-height: 1.6;
}

/* ------------------------------------------------------------------ */
/* 7. Thoughts grid (editorial)                                        */
/* ------------------------------------------------------------------ */
.home-main .thoughts-grid {
	display: grid;
	gap: var(--space-gutter);
	grid-template-columns: repeat(12, 1fr);
}

.home-main .thought-card {
	grid-column: span 4;
	background: var(--color-panel);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sharp);
	overflow: hidden;
	transition: transform 220ms ease, border-color 220ms ease;
}
.home-main .thought-card:hover {
	transform: translateY(-3px);
	border-color: var(--color-coral);
}

.home-main .thought-card--lead {
	grid-column: span 12;
}

.home-main .thought-card__link {
	display: grid;
	grid-template-rows: auto 1fr;
	text-decoration: none;
	height: 100%;
	color: inherit;
}
.home-main .thought-card--lead .thought-card__link {
	grid-template-rows: auto;
	grid-template-columns: minmax(280px, 48%) 1fr;
}

.home-main .thought-card__image {
	display: block;
	width: 100%;
	background-color: var(--color-ink-2);
	background-size: cover;
	background-position: center;
	aspect-ratio: 4 / 3;
}
.home-main .thought-card--lead .thought-card__image {
	aspect-ratio: auto;
	min-height: 260px;
	height: 100%;
}

.home-main .thought-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	padding: var(--space-card);
}
.home-main .thought-card--lead .thought-card__body {
	padding: calc(var(--space-card) * 1.4);
	justify-content: center;
}

.home-main .thought-card__kicker {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-coral);
}
.home-main .thought-card__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	color: var(--color-cream);
	line-height: 1.2;
}
.home-main .thought-card--lead .thought-card__title {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.home-main .thought-card--lead .thought-card__title::first-letter {
	font-size: 1.4em;
	color: var(--color-coral);
	font-style: italic;
	padding-right: 0.05em;
}
.home-main .thought-card__excerpt {
	margin-top: 0.4em;
	font-size: 1.02rem;
	color: var(--color-text);
	line-height: 1.65;
	max-width: 58ch;
}
.home-main .thought-card__date {
	margin-top: auto;
	padding-top: 0.6em;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-cream);
}

@media (max-width: 900px) {
	.home-main .thought-card { grid-column: span 6; }
	.home-main .thought-card--lead { grid-template-columns: 1fr; display: block; }
	.home-main .thought-card--lead .thought-card__link { display: grid; grid-template-rows: auto 1fr; grid-template-columns: 1fr; }
	.home-main .thought-card--lead .thought-card__image { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 600px) {
	.home-main .thought-card { grid-column: span 12; }
}

/* ------------------------------------------------------------------ */
/* 8. Newsletter receipt                                               */
/* ------------------------------------------------------------------ */
.home-main .home-newsletter > .receipt {
	max-width: 560px;
}
/* Newsletter - compact cream card. No scalloped edges, no barcode, no
   sign-off. Just: kicker, title, body, form. */
.home-main .receipt {
	position: relative;
	padding: clamp(14px, 1.8vw, 20px) clamp(18px, 2.4vw, 26px);
	background: var(--color-cream);
	color: var(--color-ink);
	font-family: var(--font-body);
	text-align: center;
	border-radius: var(--radius-sharp);
	box-shadow: 0 6px 20px -12px rgba(0, 0, 0, 0.45);
}

/* Kicker line: single centered dashed/dot sequence — no vertical space */
.home-main .receipt__header { margin: 0 0 0.4em; }
.home-main .receipt__dots { display: none; }        /* drop the dotted rules entirely */
.home-main .receipt__label {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-coral-deep);
}

#home-main .receipt__title {
	margin: 0 0 0.25em;
	font-family: var(--font-display);
	font-weight: 500;
	font-style: italic;
	font-size: clamp(1.2rem, 2.2vw, 1.55rem);
	color: var(--color-ink);
	letter-spacing: 0;
	line-height: 1.15;
}
.home-main .receipt__copy {
	max-width: 44ch;
	margin: 0 auto 0.8em;
	font-family: var(--font-body);
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--color-ink);
	opacity: 1;
}

/* Plugin form - aggressively compact any margins Newsletter plugin applies */
.home-main .receipt__form .tnp-field,
.home-main .receipt__form .tnp-field-firstname,
.home-main .receipt__form .tnp-field-email,
.home-main .receipt__form .tnp-field-button {
	margin: 0 !important;
	padding: 0 !important;
}
.home-main .receipt__form label {
	display: none !important;    /* the inputs are self-labelling via placeholders / name attr */
}
.home-main .receipt__form .tnp-widget {
	padding: 0 !important;
}

.home-main .receipt__form {
	margin: 0 auto;
	max-width: 28rem;
}
.home-main .receipt__form form,
.home-main .receipt__form .tnp,
.home-main .receipt__form .tnp-subscription {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
}
.home-main .receipt__form input[type="email"],
.home-main .receipt__form input[type="text"] {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.75em 0.9em;
	font-family: var(--font-mono);
	font-size: 0.95rem;
	color: var(--color-ink);
	background: var(--color-cream-soft);
	border: 1.5px solid var(--color-ink);
	border-radius: var(--radius-sharp);
	outline: none;
	transition: border-color 160ms ease, background-color 160ms ease;
}
.home-main .receipt__form input[type="email"]:focus,
.home-main .receipt__form input[type="text"]:focus {
	border-color: var(--color-crimson);
	background: #fff;
}
.home-main .receipt__form input[type="submit"],
.home-main .receipt__form button[type="submit"] {
	padding: 0.8em 1.6em;
	font-family: 'Space Mono', 'Courier New', monospace;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff6e4;
	background: #1a0f26;
	border: 2px solid #1a0f26;
	border-radius: var(--radius-sharp);
	cursor: pointer;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.home-main .receipt__form input[type="submit"]:hover,
.home-main .receipt__form button[type="submit"]:hover {
	color: #fff6e4;
	background: var(--color-crimson);
	border-color: var(--color-crimson);
	transform: translateY(-1px);
}
.home-main .receipt__fallback {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--color-ink);
}
.home-main .receipt__fallback a {
	color: var(--color-crimson);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.home-main .receipt__barcode {
	display: block;
	margin: 0.3em 0 0.3em;
	font-size: 1rem;
	letter-spacing: 0.06em;
	color: var(--color-ink);
}

/* ------------------------------------------------------------------ */
/* 9. Stagger-reveal animation for sections (on initial load)          */
/* ------------------------------------------------------------------ */
.home-main .home-section {
	animation: ad-section-in 800ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.home-main .home-release     { animation-delay: 160ms; }
.home-main .home-paid        { animation-delay: 240ms; }
.home-main .home-free        { animation-delay: 320ms; }
.home-main .home-thoughts    { animation-delay: 400ms; }
.home-main .home-music       { animation-delay: 480ms; }
.home-main .home-newsletter  { animation-delay: 560ms; }

@keyframes ad-section-in {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.home-main *,
	.home-main *::before,
	.home-main *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* 10. Small-screen niceties                                           */
/* ------------------------------------------------------------------ */
@media (max-width: 600px) {
	.home-main .home-hero__eyebrow { letter-spacing: 0.25em; font-size: 0.65rem; }
	.home-main .section-label { flex-wrap: wrap; font-size: 0.7rem; }
	.home-main .section-label__rule { min-width: 1rem; }
}

/* ------------------------------------------------------------------ */
/* 11. Parent-theme overrides on home only                             */
/*     The parent theme wraps content in a 1160px max-width white-bg   */
/*     `.main-content.wrapped-content` with 40px side padding. On the  */
/*     homepage that causes white bars and caps our edge-to-edge       */
/*     sections. Nuke the wrappers; full-bleed is the intent.          */
/* ------------------------------------------------------------------ */
body.home .entry-header {
	display: none;
}
body.home #primary,
body.home #primary.site-main,
body.home .main-content,
body.home .main-content.wrapped-content {
	background: transparent !important;
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
body.home .sidebar-right-wrap,
body.home .sidebar-left-wrap {
	display: none !important;
}

/* Dark translucent nav over WebGL. The !important is required because the
   parent theme injects the light linen color inline via style="" attribute. */
body.home #main-navigation {
	background: rgba(14, 8, 23, 0.55) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(232, 168, 124, 0.22);
}
body.home #main-navigation a,
body.home #main-navigation .site-menu a {
	color: var(--color-cream);
}

body.home #home-main { width: 100%; }

/* =================================================================== */
/* Zen mode: hide all UI, show only the WebGL scene + wordmark.        */
/* Toggled by #ad-zen-toggle (top-right X). Click anywhere to exit.    */
/* =================================================================== */

/* Hide the parent theme's search icon on home (replaced by the zen X) */
body.home .main-navigation-search,
body.home .navigation-search-overlay {
	display: none !important;
}

.ad-zen-toggle {
	position: fixed;
	top: 14px;
	right: 14px;
	z-index: 10001;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-nameplate);
	font-size: 28px;
	line-height: 1;
	color: var(--ad-ivory);
	background: rgba(14, 8, 23, 0.6);
	border: 1.5px solid rgba(255, 232, 204, 0.45);
	border-radius: 50%;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
	transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, color 160ms ease;
}
.ad-zen-toggle:hover {
	color: #1a0f26;
	background: var(--ad-led-amber);
	border-color: var(--ad-led-amber);
	transform: rotate(90deg);
}

/* Floating wordmark + hint — only visible in zen mode */
.ad-zen-wordmark {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10000;
	font-family: var(--font-nameplate);
	font-size: clamp(2.2rem, 7vw, 5.5rem);
	line-height: 1.1;
	letter-spacing: 0.1em;
	color: var(--ad-ivory);
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	text-shadow:
		0 2px 0 rgba(0, 0, 0, 0.8),
		0 0 20px rgba(0, 0, 0, 0.75),
		0 8px 40px rgba(0, 0, 0, 0.9);
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms ease;
}
.ad-zen-hint {
	position: fixed;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10000;
	font-family: var(--font-readout);
	font-size: 0.95rem;
	letter-spacing: 0.28em;
	color: var(--ad-led-amber);
	text-shadow: 0 0 6px var(--ad-led-glow);
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms ease;
}
body.ad-zen .ad-zen-hint {
	animation: ad-hint-pulse 2.4s ease-in-out infinite;
}
@keyframes ad-hint-pulse {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1;    }
}

/* --- Active zen state: hide everything except WebGL + wordmark/hint --- */
body.ad-zen #home-main,
body.ad-zen #site-header,
body.ad-zen #main-navigation,
body.ad-zen .entry-header,
body.ad-zen #site-footer,
body.ad-zen .site-footer-wrap,
body.ad-zen .ad-progress-strip {
	visibility: hidden !important;
	pointer-events: none !important;
}
body.ad-zen .ad-zen-toggle {
	display: none;
}
body.ad-zen .ad-zen-wordmark,
body.ad-zen .ad-zen-hint {
	opacity: 1;
}
/* Cookie banner frequently has its own high z-index and inline positioning -
   hide its common root selectors so zen mode is truly empty. */
body.ad-zen .cky-consent-container,
body.ad-zen .cookie-notice,
body.ad-zen #CookielawBanner,
body.ad-zen [class*="cookie-banner"] {
	visibility: hidden !important;
	pointer-events: none !important;
}
body.ad-zen {
	cursor: pointer;
}

/* =================================================================== */
/* REEL-TO-REEL PRIMITIVES + TAPE-MACHINE TREATMENT (v2 redesign)      */
/* Everything below this banner is scoped to #home-main.               */
/* =================================================================== */

/* ---- Reusable primitive: brushed gunmetal plate ---- */
#home-main .ad-plate {
	background:
		linear-gradient(180deg, var(--ad-gunmetal-hi) 0%, var(--ad-gunmetal) 50%, var(--ad-gunmetal-lo) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		inset 0 -1px 0 rgba(0, 0, 0, 0.6),
		0 4px 14px -6px rgba(0, 0, 0, 0.7);
	position: relative;
}
/* Baked brushed-aluminum pinstripe texture (pure CSS, no feTurbulence) */
#home-main .ad-plate::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 7px);
	pointer-events: none;
	border-radius: inherit;
}

/* ---- Corner rivets (4 dots via box-shadow, zero extra DOM) ---- */
#home-main .ad-rivet-corners {
	position: relative;
}
#home-main .ad-rivet-corners::before {
	content: "";
	position: absolute;
	top: 7px; left: 7px;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, #9aa0a8 0%, #4a4d54 55%, #1a1c22 100%);
	box-shadow:
		calc(100% + 14px - 6px) 0 0 0 transparent,   /* placeholder */
		0 0 2px rgba(0, 0, 0, 0.8);
	pointer-events: none;
	z-index: 2;
}
#home-main .ad-rivet-corners::after {
	content: "";
	position: absolute;
	inset: 7px;
	pointer-events: none;
	background:
		radial-gradient(circle at 0 0,         #9aa0a8 0, #4a4d54 3px, transparent 4px),
		radial-gradient(circle at 100% 0,      #9aa0a8 0, #4a4d54 3px, transparent 4px),
		radial-gradient(circle at 0 100%,      #9aa0a8 0, #4a4d54 3px, transparent 4px),
		radial-gradient(circle at 100% 100%,   #9aa0a8 0, #4a4d54 3px, transparent 4px);
	z-index: 2;
}
#home-main .ad-rivet-corners::before { display: none; } /* the ::after version does all 4 */

/* ---- Engraved-text utility (two-tone text-shadow) ---- */
#home-main .ad-engraved {
	color: var(--ad-chrome);
	text-shadow:
		1px 1px 0 rgba(255, 255, 255, 0.10),
		-1px -1px 0 rgba(0, 0, 0, 0.7);
}

/* ---- SVG reel (decorative, spinning). Size via --reel-size. ---- */
#home-main .ad-reel {
	--reel-size: 48px;
	width: var(--reel-size);
	height: var(--reel-size);
	flex-shrink: 0;
	animation: ad-reel-spin var(--reel-speed) linear infinite;
	will-change: transform;
}
#home-main .ad-reel--reverse {
	animation-direction: reverse;
}
#home-main .ad-reel--sm { --reel-size: 36px; }
#home-main .ad-reel--md { --reel-size: 72px; }
#home-main .ad-reel--lg { --reel-size: clamp(96px, 14vw, 160px); }

@keyframes ad-reel-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* ---- Amber LED indicator with pulse-when-lit ---- */
#home-main .ad-led {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5) 0 15%, var(--ad-led-amber) 20% 60%, #a06b1f 70% 100%);
	box-shadow:
		0 0 8px var(--ad-led-glow),
		inset 0 0 3px rgba(0, 0, 0, 0.6);
	vertical-align: middle;
	flex-shrink: 0;
	transition: box-shadow 300ms ease;
}
#home-main .ad-led--red {
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5) 0 15%, var(--ad-led-red) 20% 60%, #6b1515 70% 100%);
	box-shadow: 0 0 8px rgba(255, 77, 77, 0.6), inset 0 0 3px rgba(0,0,0,0.6);
}
#home-main .ad-led--green {
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5) 0 15%, var(--ad-led-green) 20% 60%, #1f6b27 70% 100%);
	box-shadow: 0 0 8px rgba(74, 207, 92, 0.55), inset 0 0 3px rgba(0,0,0,0.6);
}
#home-main .ad-led.is-lit {
	animation: ad-led-pulse 2.4s ease-in-out infinite;
}
@keyframes ad-led-pulse {
	0%, 100% { filter: brightness(1);   }
	50%      { filter: brightness(1.5); }
}

/* ---- Amber-glow readout/counter (VT323 digits in an inset black box) ---- */
#home-main .ad-counter {
	display: inline-block;
	padding: 3px 8px;
	background: #0a0a0e;
	color: var(--ad-led-amber);
	font-family: var(--font-readout);
	font-size: 1.15em;
	line-height: 1;
	letter-spacing: 0.12em;
	border: 1px solid #050507;
	border-radius: 2px;
	box-shadow:
		inset 0 0 8px rgba(255, 184, 77, 0.25),
		inset 0 0 1px rgba(255, 184, 77, 0.5),
		0 0 4px rgba(255, 184, 77, 0.18);
	text-shadow: 0 0 6px rgba(255, 184, 77, 0.7);
}

/* =================================================================== */
/* Section label -> rack-unit engraved plate (replaces cassette strip) */
/* =================================================================== */
/* Override the existing .section-label rules with higher-specificity
   #home-main ID-scoped rules. The older cassette-strip declarations
   remain in the file but are shadowed by everything below. */

/* Rack-FX unit faceplate: 3-slot horizontal grid
     [ control cluster ][ section name (centered) ][ tag pill ]
   Palette is driven by the unit modifier classes further down. */
#home-main .section-label {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: clamp(14px, 2.2vw, 28px);
	margin-bottom: var(--space-gutter);
	padding: 8px clamp(14px, 2vw, 22px);
	min-height: 92px;
	overflow: hidden;

	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;

	background:
		linear-gradient(180deg, var(--ad-gunmetal-hi) 0%, var(--ad-gunmetal) 50%, var(--ad-gunmetal-lo) 100%);
	border-top: 2px solid #111318;
	border-bottom: 2px solid #000;
	border-radius: 3px;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.12),
		inset 0 -1px 0 rgba(0,0,0,0.65),
		0 6px 18px -10px rgba(0,0,0,0.7);
}
/* Brushed pinstripe + corner rivets overlay */
#home-main .section-label::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(90deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 3px),
		radial-gradient(circle at 0 0,       #9aa0a8 0, #4a4d54 3px, transparent 4px),
		radial-gradient(circle at 100% 0,    #9aa0a8 0, #4a4d54 3px, transparent 4px),
		radial-gradient(circle at 0 100%,    #9aa0a8 0, #4a4d54 3px, transparent 4px),
		radial-gradient(circle at 100% 100%, #9aa0a8 0, #4a4d54 3px, transparent 4px);
	background-position: 0 0, 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px);
	background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	background-size: 3px 100%, 6px 6px, 6px 6px, 6px 6px, 6px 6px;
	pointer-events: none;
	border-radius: inherit;
}
#home-main .section-label > * { position: relative; z-index: 1; }

/* Control cluster */
#home-main .section-label__controls {
	display: inline-flex;
	align-items: center;
	gap: clamp(6px, 0.8vw, 10px);
	flex-shrink: 0;
}
#home-main .section-label .rack-controls {
	display: inline-flex;
	align-items: center;
	gap: clamp(4px, 0.7vw, 9px);
}

/* Centered text block */
#home-main .section-label__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.3em 0.6em;
	min-width: 0;
	text-align: center;
}
#home-main .section-label__track {
	color: var(--ad-chrome-dim);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(0.72rem, 0.95vw, 0.82rem);
	letter-spacing: 0.22em;
	text-shadow: 1px 1px 0 rgba(255,255,255,0.06), -1px -1px 0 rgba(0,0,0,0.6);
}
#home-main .section-label__sep {
	color: var(--ad-chrome-dim);
	opacity: 0.6;
}
#home-main .section-label__name {
	color: var(--ad-chrome);
	font-family: var(--font-nameplate);
	font-size: clamp(1.05rem, 1.8vw, 1.4rem);
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	text-shadow:
		1px 1px 0 rgba(255,255,255,0.12),
		-1px -1px 0 rgba(0,0,0,0.7);
}

/* Right-side state tag (LED + short label) */
#home-main .section-label__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 4px 9px;
	color: var(--ad-ivory);
	font-family: var(--font-readout);
	font-size: 0.95rem;
	letter-spacing: 0.1em;
	background: #0a0a0e;
	border: 1px solid #000;
	border-radius: 2px;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.05),
		inset 0 0 6px rgba(255,184,77,0.15);
	flex-shrink: 0;
}
/* When the section has no tag, reserve a small amount so the centered
   name text doesn't shift relative to tagged dividers. */
#home-main .section-label__tag-spacer {
	display: inline-block;
	width: 1px;
}
#home-main .section-label .section-label__mark { display: none; }

/* =================================================================== */
/* PRIMITIVE STYLES                                                    */
/* =================================================================== */

/* Knob */
#home-main .ad-knob {
	display: inline-block;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
}
#home-main .ad-knob--lg { width: 44px; height: 44px; }
#home-main .ad-knob svg { display: block; width: 100%; height: 100%; overflow: visible; }
#home-main .ad-knob__pointer {
	transform: rotate(var(--tilt, 0deg));
	transform-origin: 20px 20px;
	transition: transform 160ms ease;
}

/* Round VU meter */
#home-main .ad-vu-round {
	display: inline-block;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
}
#home-main .ad-vu-round svg { display: block; width: 100%; height: 100%; }
#home-main .ad-vu-round .ad-vu-needle {
	transform-origin: 30px 42px;
	transform: rotate(calc(-45deg + var(--vu-left, 0.15) * 90deg));
	transition: transform 160ms linear;
}

/* Rectangular VU meter (1176) */
#home-main .ad-vu-rect {
	display: inline-block;
	width: 86px;
	height: 44px;
	flex-shrink: 0;
}
#home-main .ad-vu-rect svg { display: block; width: 100%; height: 100%; }
#home-main .ad-vu-rect .ad-vu-needle {
	transform-origin: 43px 40px;
	transform: rotate(calc(-45deg + var(--vu-right, 0.12) * 90deg));
	transition: transform 160ms linear;
}

/* SSL LED bar */
#home-main .ad-led-bar {
	display: inline-flex;
	gap: 3px;
	align-items: center;
	padding: 3px 5px;
	background: #0a0a0e;
	border: 1px solid #000;
	border-radius: 2px;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
	flex-shrink: 0;
}
/* LED segments - flat fills, single-color glow halos, no inset gradients */
#home-main .ad-led-bar__seg {
	width: 7px;
	height: 18px;
	background: #141418;
	border: 1px solid #000;
	transition: background 120ms ease, box-shadow 120ms ease;
}
#home-main .ad-led-bar__seg.is-on.ad-led-bar__seg--green {
	background: var(--ad-led-green);
	box-shadow: 0 0 5px var(--ad-led-green);
}
#home-main .ad-led-bar__seg.is-on.ad-led-bar__seg--amber {
	background: var(--ad-led-amber);
	box-shadow: 0 0 5px var(--ad-led-amber);
}
#home-main .ad-led-bar__seg.is-on.ad-led-bar__seg--red {
	background: var(--ad-led-red);
	box-shadow: 0 0 5px var(--ad-led-red);
}

/* Toggle switch */
#home-main .ad-toggle {
	display: inline-block;
	width: 14px;
	height: 24px;
	flex-shrink: 0;
}
#home-main .ad-toggle svg { display: block; width: 100%; height: 100%; }

/* Push-button pad - FLAT vintage style. Single flat colour,
   hard 1px highlight top + shadow bottom. No gradient. */
#home-main .ad-button-pad {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	padding: 3px 5px;
	font-family: var(--font-readout);
	font-size: 0.85rem;
	letter-spacing: 0;
	color: var(--ad-ivory);
	background: #2a2d34;
	border: 1px solid #000;
	border-top-color: #4a4d54;
	border-radius: 1px;
}
#home-main .ad-button-pad.is-pressed {
	background: #f0b840;
	border-top-color: #000;
	border-bottom-color: #b07820;
	color: #1a0f06;
	text-shadow: none;
	box-shadow: 0 0 6px rgba(240, 184, 64, 0.5);
}
#home-main .rack-buttons {
	display: inline-flex;
	gap: 3px;
	flex-shrink: 0;
}

/* =================================================================== */
/* Per-unit overrides: knob + text colours shift with the faceplate.   */
/* (Background palettes set further below under section-label--XXX.)   */
/* =================================================================== */

/* A-SIDE: LA-2A (beige) — dark controls on cream */
#home-main .section-label--release .section-label__name  { color: #2a1d0a; text-shadow: 1px 1px 0 rgba(255,255,255,0.3), -1px -1px 0 rgba(0,0,0,0.2); }
#home-main .section-label--release .section-label__track { color: #4a3a1e; text-shadow: 1px 1px 0 rgba(255,255,255,0.3); }
#home-main .section-label--release .section-label__sep   { color: #4a3a1e; }

/* B-SIDE: 1176 (silver) — dark text on silver */
#home-main .section-label--paid .section-label__name  { color: #0a0b0f; text-shadow: 1px 1px 0 rgba(255,255,255,0.45), -1px -1px 0 rgba(0,0,0,0.2); }
#home-main .section-label--paid .section-label__track { color: #1a1c22; text-shadow: 1px 1px 0 rgba(255,255,255,0.4); }
#home-main .section-label--paid .section-label__sep   { color: #1a1c22; }

/* C-SIDE: SSL (black) — light text on black */
#home-main .section-label--free .section-label__name  { color: #f0ead8; text-shadow: 0 0 6px rgba(255,77,77,0.35); }
#home-main .section-label--free .section-label__track { color: #888; text-shadow: none; }
#home-main .section-label--free .section-label__sep   { color: #666; }

/* D-SIDE: Pultec (cream) — dark text on warm cream */
#home-main .section-label--thoughts .section-label__name  { color: #2a1d0a; text-shadow: 1px 1px 0 rgba(255,255,255,0.35), -1px -1px 0 rgba(0,0,0,0.2); }
#home-main .section-label--thoughts .section-label__track { color: #3a2a10; text-shadow: 1px 1px 0 rgba(255,255,255,0.3); }
#home-main .section-label--thoughts .section-label__sep   { color: #3a2a10; }

/* OUTRO: API (olive drab) */
#home-main .section-label--music .section-label__name  { color: #f0ead8; text-shadow: 1px 1px 0 rgba(0,0,0,0.6); }
#home-main .section-label--music .section-label__track { color: #d8d9de; }
#home-main .section-label--music .section-label__sep   { color: #d8d9de; opacity: 0.7; }

/* =================================================================== */
/* Mobile: shrink height; keep only the biggest single control per unit */
/* =================================================================== */
@media (max-width: 600px) {
	#home-main .section-label {
		min-height: 64px;
		padding: 8px 12px;
		column-gap: 10px;
	}
	#home-main .section-label__text { flex-direction: column; gap: 1px; }
	#home-main .section-label__track { font-size: 0.65rem; }
	#home-main .section-label__name  { font-size: clamp(0.9rem, 4vw, 1.1rem); }
	#home-main .section-label__sep   { display: none; }
	/* Hide smaller or redundant controls to keep the strip cohesive. */
	#home-main .section-label .ad-knob,
	#home-main .section-label .ad-toggle,
	#home-main .section-label .rack-buttons { display: none; }
	/* Keep the hero control (VU or LED bar) for each unit. */
	#home-main .section-label--release .ad-vu-round,
	#home-main .section-label--paid    .ad-vu-rect,
	#home-main .section-label--free    .ad-led-bar,
	#home-main .section-label--thoughts .ad-vu-round { display: inline-block; }
}

/* =================================================================== */
/* Each section divider styled as a different iconic rack compressor   */
/* (without logos). Overrides the base gunmetal-rack palette.          */
/*   A-SIDE / release  -> Teletronix LA-2A   (warm beige leveler)      */
/*   B-SIDE / paid     -> Urei 1176           (silver / brushed alum)  */
/*   C-SIDE / free     -> SSL G Bus comp      (matte black + red LED)  */
/*   D-SIDE / thoughts -> Fairchild 670       (cream / vintage stereo) */
/*   OUTRO  / music    -> API 2500            (gray + colored knobs)   */
/* =================================================================== */

/* ALL rack dividers: matte black faceplate. Differentiation comes from the
   unit's specific control cluster + a thin accent stripe + the accent LED
   color. No more beige/silver/cream — this is a black-rack chassis. */
#home-main .section-label--release,
#home-main .section-label--paid,
#home-main .section-label--free,
#home-main .section-label--thoughts,
#home-main .section-label--music {
	background:
		repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #1a1c22 0%, #0a0b0f 55%, #0e0f14 100%);
	border-top-color: #000;
	border-bottom-color: #000;
}

/* Corner bolts shared by every rack-unit divider */
#home-main .section-label--release::after,
#home-main .section-label--paid::after,
#home-main .section-label--free::after,
#home-main .section-label--thoughts::after,
#home-main .section-label--music::after {
	background:
		radial-gradient(circle at 0 0,       #3a3d44 0, #0a0b0f 3px, transparent 4px),
		radial-gradient(circle at 100% 0,    #3a3d44 0, #0a0b0f 3px, transparent 4px),
		radial-gradient(circle at 0 100%,    #3a3d44 0, #0a0b0f 3px, transparent 4px),
		radial-gradient(circle at 100% 100%, #3a3d44 0, #0a0b0f 3px, transparent 4px);
	background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px);
	background-repeat: no-repeat;
	background-size: 6px 6px;
}

/* Text: chrome on black, identical treatment across units */
#home-main .section-label--release .section-label__name,
#home-main .section-label--paid    .section-label__name,
#home-main .section-label--free    .section-label__name,
#home-main .section-label--thoughts .section-label__name,
#home-main .section-label--music   .section-label__name {
	color: var(--ad-ivory);
	text-shadow:
		1px 1px 0 rgba(255, 255, 255, 0.08),
		-1px -1px 0 rgba(0, 0, 0, 0.7);
}
#home-main .section-label--release .section-label__track,
#home-main .section-label--paid    .section-label__track,
#home-main .section-label--free    .section-label__track,
#home-main .section-label--thoughts .section-label__track,
#home-main .section-label--music   .section-label__track {
	color: var(--ad-chrome-dim);
}

/* No per-unit accent stripe - all dividers share the plain black faceplate. */

/* =================================================================== */
/* Tape-head progress strip (fixed bottom)                             */
/* =================================================================== */
.ad-progress-strip {
	position: fixed;
	left: 0;
	bottom: 0;
	height: 3px;
	width: calc(var(--scroll-progress, 0) * 1%);
	background: linear-gradient(90deg,
		rgba(255,184,77,0) 0,
		var(--ad-led-amber) 8%,
		var(--ad-led-amber) 100%);
	box-shadow:
		0 0 6px var(--ad-led-glow),
		0 0 14px rgba(255, 184, 77, 0.3);
	pointer-events: none;
	z-index: 9999;
	transition: width 60ms linear;
}

/* =================================================================== */
/* Hero layout: two columns                                            */
/*   Left  - brand copy (visible over the WebGL torii/sunset scene)    */
/*   Right - unified tape-deck faceplate (ONE coherent machine)        */
/* On narrow viewports they stack and the deck shrinks.                */
/* =================================================================== */

#home-main .home-hero {
	position: relative;
	isolation: isolate;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: clamp(24px, 3vw, 40px) clamp(16px, 4vw, 40px);
	overflow: hidden;   /* belt-and-suspenders: never leak off the viewport */
}
#home-main .home-hero__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(24px, 3.5vw, 56px);
	align-items: center;
}
@media (max-width: 900px) {
	#home-main .home-hero__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(20px, 3vw, 32px);
	}
}
/* Every grid child must be shrinkable below its content min-width or the
   deck's internal content pushes the whole layout off-screen on narrow
   viewports. */
#home-main .home-hero__copy-col,
#home-main .home-hero__deck {
	min-width: 0;
	max-width: 100%;
}

/* ---- Left column: brand copy on a dark "vinyl sleeve" panel for
   guaranteed readability against the warm WebGL sunset.
   Tighter vertical padding — the panel should hug its text. ---- */
#home-main .home-hero__copy-col {
	text-align: left;
	padding: clamp(12px, 1.5vw, 18px) clamp(22px, 3vw, 34px);
	background: rgba(12, 7, 20, 0.82);
	border: 1px solid rgba(255, 232, 204, 0.35);
	border-radius: 3px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 12px 28px -14px rgba(0, 0, 0, 0.8);
}
@media (max-width: 900px) {
	#home-main .home-hero__copy-col { text-align: center; }
}

#home-main .home-hero__eyebrow {
	display: inline-block;
	margin: 0 0 clamp(12px, 1.6vw, 20px);
	padding: 0.3em 0.9em;
	font-family: var(--font-readout);
	font-size: 0.95rem;
	letter-spacing: 0.32em;
	color: var(--ad-led-amber);
	background: rgba(14, 8, 23, 0.7);
	border: 1px solid rgba(255, 184, 77, 0.35);
	border-radius: 2px;
	text-shadow: 0 0 4px var(--ad-led-glow);
}

#home-main h1.home-hero__wordmark {
	margin: 0 0 clamp(6px, 0.8vw, 12px);
	font-family: var(--font-hero);
	font-weight: 400;
	font-size: clamp(2.4rem, 5.8vw, 4.4rem);
	line-height: 0.92;
	letter-spacing: 0.01em;
	text-transform: none;
	color: #fff6e4;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
#home-main .home-hero__wordmark-line {
	display: block;
	color: #fff6e4;
}
#home-main .home-hero__wordmark-line--alt {
	color: #ffc890;       /* warm cream-amber, not saturated orange */
	font-style: italic;
}

#home-main .home-hero__tagline {
	display: block;
	margin: 0 0 clamp(8px, 1.2vw, 14px);
	padding: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	color: #ffc890;
	background: none;
	border: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

#home-main .home-hero__copy {
	max-width: 54ch;
	margin: 0 0 clamp(20px, 2.8vw, 30px);
	font-family: var(--font-body);
	color: #f5ecd9;
	font-size: clamp(1.02rem, 1.3vw, 1.18rem);
	line-height: 1.6;
	text-shadow: none;
}
@media (max-width: 900px) {
	#home-main .home-hero__copy { margin-left: auto; margin-right: auto; }
}

#home-main .home-hero__cta-row {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---- Right column: the UNIFIED tape-deck faceplate ---- */
/* Wood sidewalls + brushed-metal faceplate sandwich; everything inside
   reads as one coherent machine. */

/* Pioneer RT-1011L: silver faceplate, wood sidewalls, flat vintage.
   No radial shine - just flat silver with 1px brushed hatching. */
#home-main .home-hero__deck {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	justify-self: end;
	width: 100%;
	max-width: 560px;
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid #1a120d;
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.7);
}
#home-main .home-hero__deck .deck__face {
	min-width: 0;   /* allow the face to shrink below its content min-width */
}
@media (max-width: 900px) {
	#home-main .home-hero__deck {
		justify-self: center;
		max-width: 540px;
	}
}

/* Wood sidewalls - flat hatched teak/walnut */
#home-main .home-hero__deck .deck__wood {
	width: clamp(14px, 2vw, 22px);
	background:
		repeating-linear-gradient(180deg,
			#2a1b0f 0 3px, #3d2817 3px 8px,
			#2a1b0f 8px 10px, #3d2817 10px 16px),
		#3d2817;
	border-right: 1px solid #1a0f07;
}
#home-main .home-hero__deck .deck__wood--left  { border-right: 1px solid #1a0f07; }
#home-main .home-hero__deck .deck__wood--right { border-right: none; border-left: 1px solid #1a0f07; }

/* Silver brushed aluminum faceplate - FLAT, only brushed horizontal hatching */
#home-main .home-hero__deck .deck__face {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto auto auto;
	gap: clamp(10px, 1.4vw, 16px);
	padding: clamp(16px, 2vw, 24px) clamp(18px, 2.2vw, 28px);
	background:
		repeating-linear-gradient(180deg,
			rgba(255, 255, 255, 0.07) 0 1px,
			transparent 1px 3px,
			rgba(0, 0, 0, 0.06) 3px 4px,
			transparent 4px 6px),
		#c2c4c8;
	border-top: 1px solid #5a5d63;
	border-bottom: 1px solid #3a3d44;
	position: relative;
}
/* 4 corner bolts - flat circles with hard edge */
#home-main .home-hero__deck .deck__face::after {
	content: "";
	position: absolute;
	inset: 10px;
	pointer-events: none;
	background:
		radial-gradient(circle at 0 0,       #2a2d34 0, #2a2d34 3px, transparent 3.5px),
		radial-gradient(circle at 100% 0,    #2a2d34 0, #2a2d34 3px, transparent 3.5px),
		radial-gradient(circle at 0 100%,    #2a2d34 0, #2a2d34 3px, transparent 3.5px),
		radial-gradient(circle at 100% 100%, #2a2d34 0, #2a2d34 3px, transparent 3.5px);
	background-repeat: no-repeat;
	background-size: 7px 7px;
}
#home-main .home-hero__deck .deck__face > * { position: relative; z-index: 1; }

/* --- Reels row: two big reels with a tape path connecting them --- */
#home-main .deck__reels {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(8px, 1.2vw, 14px);
	min-width: 0;
}
/* Reel wells - flat black circles with chrome outer ring (RT-1011L style) */
#home-main .deck__reel-window {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(80px, 12vw, 120px);
	height: clamp(80px, 12vw, 120px);
	padding: 8px;
	background: #0a0a0c;
	border: 3px solid #1a1c22;
	outline: 1px solid #8a8d94;  /* chrome outer ring */
	border-radius: 50%;
}
#home-main .deck__reel-window .ad-reel {
	--reel-size: 100%;
	width: 100%;
	height: 100%;
}
/* Tape path between the reels */
#home-main .deck__tape-path {
	position: relative;
	height: 16px;
	background: linear-gradient(180deg, #0a0b0f 0%, #1a1c22 100%);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(0, 0, 0, 0.6);
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
}
#home-main .deck__tape-path svg {
	display: block;
	width: 100%;
	height: 100%;
}
#home-main .deck__tape-dashes {
	animation: ad-tape-slide 1.6s linear infinite;
}
@keyframes ad-tape-slide {
	from { stroke-dashoffset: 0;  }
	to   { stroke-dashoffset: -28; }
}

/* Nameplate - flat silver recessed panel with engraved black text */
#home-main .deck__nameplate {
	padding: clamp(10px, 1.4vw, 14px) clamp(10px, 1.6vw, 16px);
	background: #a4a6ab;
	border: 1px solid #3a3d44;
	border-top-color: #6a6d74;
	border-bottom-color: #141418;
	border-radius: 1px;
	text-align: center;
}
#home-main .deck__brand {
	display: block;
	font-family: var(--font-nameplate);
	font-size: clamp(1.1rem, 2vw, 1.65rem);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #0a0b0f;
	line-height: 1;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

/* --- Stereo VU + counter --- */
#home-main .deck__meters {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: clamp(6px, 1vw, 10px);
	align-items: stretch;
}
#home-main .deck__meters .vu-meter {
	width: 100%;
	height: auto;
	max-height: clamp(60px, 8vw, 84px);
}
#home-main .deck__meters .vu-meter__needle {
	transform-origin: 50% 100%;
	transform: rotate(calc(-45deg + var(--vu-val, 0) * 90deg));
	transition: transform 120ms linear;
}
#home-main .deck__meters .vu-meter--left  { --vu-val: var(--vu-left,  0.12); }
#home-main .deck__meters .vu-meter--right { --vu-val: var(--vu-right, 0.1); }

/* Pioneer RT-1011L-style mechanical tape counter.
   Black recessed well with off-white mechanical digits, subtle tumbler
   split lines between positions, chrome bezel. No amber glow - these are
   real counter wheels, not LEDs. */
/* Counter - flat silver bezel, black recessed well, cream mechanical digits */
#home-main .deck__counter {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	min-width: 96px;
	padding: 3px;
	background: #a4a6ab;
	border: 1px solid #141418;
	border-top-color: #6a6d74;
	border-radius: 1px;
}
#home-main .deck__counter-label {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	color: var(--ad-gunmetal-lo);
	text-align: center;
	margin-bottom: 2px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
#home-main .deck__counter .ad-counter {
	display: block;
	margin: 0;
	padding: 6px 8px;
	background: #0a0a0c;
	border: 1px solid #000;
	border-radius: 1px;
	/* Hard thin split-lines between digits for the mechanical-tumbler feel */
	background-image:
		linear-gradient(90deg,
			transparent 24.6%, rgba(255,255,255,0.06) 24.6%, rgba(255,255,255,0.06) 25%, transparent 25%,
			transparent 49.6%, rgba(255,255,255,0.06) 49.6%, rgba(255,255,255,0.06) 50%, transparent 50%,
			transparent 74.6%, rgba(255,255,255,0.06) 74.6%, rgba(255,255,255,0.06) 75%, transparent 75%);
	color: #f0ead8;
	font-family: var(--font-readout);
	font-size: 1.45rem;
	font-weight: 400;
	letter-spacing: 0.28em;
	text-align: center;
	text-shadow: none;
}
#home-main .deck__counter .ad-counter > span {
	color: inherit;
}

/* --- Transport buttons (real buttons, wired by JS) --- */
#home-main .deck__transport {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}
/* Transport buttons - flat silver-black, RT-1011L style. Dark body,
   1px lighter top edge, 1px darker bottom edge. No gradient. */
#home-main .deck__transport .xport {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	padding: 8px 8px;
	font-family: var(--font-readout);
	font-size: 0.9rem;
	letter-spacing: 0.15em;
	color: #f0ead8;
	background: #1a1c22;
	border: 1px solid #000;
	border-top-color: #3a3d44;
	border-radius: 1px;
	cursor: pointer;
	transition: background 120ms ease;
}
#home-main .deck__transport .xport:hover {
	background: #2a2d34;
}
#home-main .deck__transport .xport:active,
#home-main .deck__transport .xport.is-active {
	background: #0a0b0f;
	border-top-color: #141418;
	color: var(--ad-led-amber);
	text-shadow: 0 0 4px var(--ad-led-amber);
}
#home-main .deck__transport .xport--rec {
	cursor: default;
	opacity: 0.85;
}
#home-main .deck__transport .xport--rec:hover {
	background: linear-gradient(180deg, #4a4d54 0%, #25272c 100%);  /* no hover change */
}
#home-main .deck__transport .xport--rec .ad-led {
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5) 0 15%, var(--ad-led-red) 20% 60%, #6b1515 70% 100%);
	box-shadow: 0 0 4px rgba(255, 77, 77, 0.5);
}

/* =================================================================== */
/* Mobile deck: pack tight, keep the machine visible                   */
/* =================================================================== */
@media (max-width: 600px) {
	#home-main .home-hero__deck {
		max-width: 100%;
	}
	#home-main .home-hero__deck .deck__wood {
		width: 10px;
	}
	#home-main .home-hero__deck .deck__face {
		padding: 12px;
		gap: 10px;
	}
	#home-main .deck__reel-window {
		width: 20vw;
		height: 20vw;
		max-width: 90px;
		max-height: 90px;
		padding: 6px;
	}
	#home-main .deck__nameplate {
		padding: 10px 12px;
	}
	#home-main .deck__meters {
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}
	#home-main .deck__counter {
		grid-column: 1 / -1;
		flex-direction: row;
		gap: 10px;
		min-width: 0;
	}
	#home-main .deck__counter-label { margin-bottom: 0; }
	#home-main .deck__counter .ad-counter {
		flex: 1 1 auto;
		font-size: 1.15rem;
	}
	#home-main .deck__transport {
		grid-template-columns: repeat(4, 1fr);
		gap: 4px;
	}
	#home-main .deck__transport .xport {
		padding: 5px 4px;
		font-size: 0.7rem;
		letter-spacing: 0.12em;
	}
	#home-main .deck__transport .xport .ad-led {
		width: 7px; height: 7px;
	}
	#home-main .deck__now-playing {
		font-size: 0.78rem;
		padding: 5px 8px;
	}
}
#home-main .deck__transport .xport[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Now-playing strip at the bottom of the deck */
#home-main .deck__now-playing {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 6px 10px;
	background: #0a0a0e;
	border: 1px solid #000;
	border-radius: 2px;
	box-shadow: inset 0 0 8px rgba(255, 184, 77, 0.18);
	font-family: var(--font-readout);
	font-size: 0.9rem;
}
#home-main .deck__np-label {
	color: var(--ad-led-amber);
	letter-spacing: 0.22em;
	text-shadow: 0 0 4px var(--ad-led-glow);
	flex-shrink: 0;
}
#home-main .deck__np-title {
	color: var(--ad-ivory);
	letter-spacing: 0.06em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#home-main .deck__now-playing--empty .deck__np-label { color: var(--ad-ivory-dim); text-shadow: none; }
#home-main .deck__now-playing--empty .deck__np-title { color: var(--ad-ivory-dim); font-size: 0.82rem; }

/* =================================================================== */
/* Paid-products cards -> rack-mount 1U units                          */
/* =================================================================== */
#home-main .product-card--paid {
	background:
		linear-gradient(180deg, var(--ad-gunmetal-hi) 0%, var(--ad-gunmetal) 50%, var(--ad-gunmetal-lo) 100%);
	border: 1px solid #000;
	border-radius: 3px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.55),
		0 6px 18px -8px rgba(0, 0, 0, 0.7);
	transition: transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 220ms ease;
}
#home-main .product-card--paid:hover {
	transform: translateY(-2px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.15),
		inset 0 -1px 0 rgba(0, 0, 0, 0.55),
		0 10px 24px -8px rgba(0, 0, 0, 0.8),
		0 0 18px rgba(255, 184, 77, 0.22);
}
/* Corner rivets on paid cards (same trick as section labels) */
#home-main .product-card--paid::after {
	content: "";
	position: absolute;
	inset: 7px;
	pointer-events: none;
	z-index: 3;
	background:
		radial-gradient(circle at 0 0,       #9aa0a8 0, #4a4d54 3px, transparent 4px),
		radial-gradient(circle at 100% 0,    #9aa0a8 0, #4a4d54 3px, transparent 4px),
		radial-gradient(circle at 0 100%,    #9aa0a8 0, #4a4d54 3px, transparent 4px),
		radial-gradient(circle at 100% 100%, #9aa0a8 0, #4a4d54 3px, transparent 4px);
	background-repeat: no-repeat;
	background-size: 6px 6px;
}
/* Chrome bezel around the product image */
#home-main .product-card--paid .product-card__frame {
	margin: 14px 14px 0;
	border: 3px solid #0a0b0f;
	border-radius: 2px;
	box-shadow:
		inset 0 0 0 1px #4a4d54,
		inset 0 0 12px rgba(0, 0, 0, 0.7);
	aspect-ratio: 16 / 10;
	background: linear-gradient(180deg, #1f222a 0%, #0e1013 100%);
}
#home-main .product-card--paid .product-card__body {
	padding: 14px 18px 18px;
}
#home-main .product-card--paid .product-card__title {
	color: var(--ad-chrome);
	font-family: var(--font-display);
	font-weight: 400;
	text-shadow:
		1px 1px 0 rgba(255, 255, 255, 0.1),
		-1px -1px 0 rgba(0, 0, 0, 0.7);
}
#home-main .product-card--paid .product-card__kicker {
	color: var(--ad-led-amber);
	font-family: var(--font-readout);
	font-size: 0.9rem;
	letter-spacing: 0.22em;
	text-shadow: 0 0 6px rgba(255, 184, 77, 0.3);
}
#home-main .product-card--paid .product-card__excerpt {
	color: var(--ad-ivory-dim);
}

/* Amber-LED price chip replaces crimson sticker */
#home-main .product-card--paid .product-card__price-chip {
	top: 20px;
	right: 20px;
	transform: none;
	padding: 4px 10px;
	background: #0a0a0e;
	color: var(--ad-led-amber);
	font-family: var(--font-readout);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	border: 1px solid #000;
	border-radius: 2px;
	box-shadow:
		inset 0 0 8px rgba(255, 184, 77, 0.28),
		inset 0 1px 0 rgba(255, 184, 77, 0.15),
		0 0 6px rgba(255, 184, 77, 0.2);
	text-shadow: 0 0 6px rgba(255, 184, 77, 0.7);
}
#home-main .product-card--paid .product-card__price-chip--license {
	color: var(--ad-ivory-dim);
	background: #0a0a0e;
	box-shadow:
		inset 0 0 6px rgba(168, 171, 178, 0.18),
		inset 0 1px 0 rgba(168, 171, 178, 0.1);
	text-shadow: none;
}

/* Replace monogram color for paid placeholder (consistent with rack-unit) */
#home-main .product-card--paid .product-card__monogram {
	color: var(--ad-chrome);
}

/* =================================================================== */
/* Reduced motion: halt every spin/pulse/meter transition              */
/* =================================================================== */
@media (prefers-reduced-motion: reduce) {
	#home-main .ad-reel,
	#home-main .ad-led.is-lit,
	.ad-progress-strip,
	#home-main .home-hero__vu .vu-meter__needle {
		animation: none !important;
		transition: none !important;
	}
	#home-main .home-hero__vu .vu-meter__needle {
		transform: rotate(0deg);   /* center */
	}
	.ad-progress-strip { display: none; }
}