/* ==========================================================================
   Yeats Music — Record Store
   A white-room record shop: flip the crate, drop the needle.
   ========================================================================== */

:root {
	--rs-paper:  #ffffff;
	--rs-paper2: #f8f9fc;
	--rs-paper3: #eff2f7;
	--rs-paper4: #e6eaf0;
	--rs-ink:    #121317;
	--rs-ink2:   #45474d;
	--rs-muted:  #6e7178;
	/* alpha, not a fixed hex — one border token that works on every band */
	--rs-line:   rgba(33, 34, 38, .12);
	--rs-line-2: rgba(33, 34, 38, .06);
	--rs-acc:    #0071e3;
	--rs-acc-d:  #0059b3;
	--rs-vinyl:  #121216;

	--rs-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
	           "Helvetica Neue", Inter, Arial, sans-serif;
	--rs-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, monospace;

	--rs-ease: cubic-bezier(.22, 1, .36, 1);
	--rs-expo: cubic-bezier(.19, 1, .22, 1);   /* ease-out-expo, for reveals */
}

/* ---- strip the theme chrome so the store can go full bleed --------------
   The X theme runs a BOXED layout (.site is max-width:1200px, centred) and
   .x-container.offset is not centred inside it, so the usual
   `width:100vw; margin-left:calc(50% - 50vw)` trick lands off by ~72px.
   Unbox the wrappers on this page instead and let the store be plain 100%. */
body.page-id-3156 { background: var(--rs-paper); }
.page-id-3156 .x-navbar-wrap,
.page-id-3156 .x-logobar,
.page-id-3156 .x-navbar { display: none !important; }

body.page-id-3156 .x-root,
body.page-id-3156 .site {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	box-shadow: none !important;
	background: var(--rs-paper) !important;
}
body.page-id-3156 .x-container.max.width,
body.page-id-3156 .x-container.max.width.offset {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
body.page-id-3156 .x-main,
body.page-id-3156 .x-main.full {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.page-id-3156 .entry-wrap { padding: 0; background: transparent; box-shadow: none; border: 0; }
.page-id-3156 .entry-content { margin: 0; }

#ym-rs {
	width: 100%;
	background: var(--rs-paper);
	color: var(--rs-ink);
	font-family: var(--rs-sans);
	line-height: 1.6;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
#ym-rs *, #ym-rs *::before, #ym-rs *::after { box-sizing: border-box; }
#ym-rs a { text-decoration: none; color: inherit; border: 0; }
#ym-rs button { font-family: inherit; cursor: pointer; }

/* The Customizer ships `.entry-content img { width:100%; max-width:520px;
   margin:0 auto 8px; border-radius:16px }` from an inline <style> that loads
   AFTER this file, so it beats any class-only selector here. Reset at ID
   specificity, then every image rule below is prefixed with #ym-rs to win. */
#ym-rs img {
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0;
	border-radius: 0;
	display: block;
}

.rs-wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }

/* ---- shared type ---- */
.rs-kicker,
.rs-eyebrow {
	font-family: var(--rs-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--rs-muted);
	margin: 0;
}
.rs-num {
	font-family: var(--rs-mono);
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--rs-acc);
}

/* ==========================================================================
   Film grain — the cheapest, biggest "cinematic" win there is
   ========================================================================== */
/* Static, viewport-sized and NOT animated. An animated multiply-blended
   overlay inset by -50% covers 4x the viewport and forces the whole page
   beneath it to re-composite every tick — it tanks raster on a page with
   ~85 cover images. Held still it costs one raster and reads the same. */
.rs-grain {
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	opacity: .26;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Nav
   ========================================================================== */
.rs-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 32px;
	transition: background .4s var(--rs-ease), border-color .4s, padding .4s var(--rs-ease);
	border-bottom: 1px solid transparent;
}
.rs-nav.is-stuck {
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom-color: var(--rs-line);
	padding: 11px 32px;
}
#ym-rs .rs-nav-brand img {
	height: 26px; width: auto; display: block;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .4s var(--rs-ease), transform .4s var(--rs-ease);
}
#ym-rs .rs-nav.is-stuck .rs-nav-brand img { opacity: 1; transform: none; }

.rs-nav-links { display: flex; align-items: center; gap: 4px; }
.rs-nav-links a {
	font-size: 13.5px;
	font-weight: 450;
	letter-spacing: -.008em;
	color: var(--rs-ink2);
	padding: 8px 14px;
	border-radius: 999px;
	transition: color .2s, background .2s;
}
.rs-nav-links a:hover { color: var(--rs-ink); background: rgba(11, 11, 14, .05); }
.rs-nav-search {
	display: grid; place-items: center;
	width: 34px; height: 34px;
	margin-left: 4px;
	border: 0; border-radius: 50%;
	background: transparent;
	color: var(--rs-ink2);
	transition: background .2s, color .2s;
}
.rs-nav-search svg { width: 17px; height: 17px; }
.rs-nav-search:hover { background: rgba(11, 11, 14, .05); color: var(--rs-ink); }

/* ==========================================================================
   1. Shopfront
   ========================================================================== */
.rs-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Bottom padding must exceed (rack row height - its 72px overhang), or the
	   content block grows into the lower rack on short viewports. Rows are
	   190px at desktop widths, so anything over 118px is guaranteed clear. */
	padding: 120px 0 132px;
	overflow: hidden;
	isolation: isolate;
}

/* The racks: one row high, one row low, so the wordmark keeps a clean band
   of white through the middle instead of sitting on top of busy artwork. */
.rs-wall {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}
/* Racks are cropped by the top and bottom edges so they read as shelves
   running out of frame, and the middle band is painted solid white so the
   wordmark and buttons never sit on top of artwork. */
.rs-wall::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 14%, rgba(255,255,255,0) 86%, #fff 100%),
		linear-gradient(180deg,
			rgba(255,255,255,.28) 0%,
			#ffffff 30%,
			#ffffff 70%,
			rgba(255,255,255,.28) 100%);
}

/* The racks drift on SCROLL, not on a timer. An always-on animation across a
   ~3700px-wide layer keeps the compositor re-rastering and Chrome serves
   blank tiles while it catches up; tying it to scroll means the layer is
   static (and fully painted) whenever the visitor is still, and the sideways
   drift doubles as parallax depth on the way down. */
.rs-wall-row {
	position: absolute;
	left: 0;
	display: flex;
	gap: clamp(18px, 3vw, 42px);
	width: max-content;
	opacity: .6;
	backface-visibility: hidden;
}
/* Crop depths are load-bearing, not decorative. The rack must end above the
   hero's padding edge: top rack needs (rowHeight - crop) < padding-top (120),
   and rowHeight maxes out at 190, so an 84px crop clears it at every width.
   The lower rack is handled by the hero's 132px padding-bottom instead. */
.rs-wall-row[data-dir="1"]  { top: -84px; }
.rs-wall-row[data-dir="-1"] { bottom: -72px; }
#ym-rs .rs-wall-row img {
	width: clamp(112px, 13vw, 190px);
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 4px;
	display: block;
	filter: grayscale(.3) contrast(.97);
	box-shadow: none;
}

.rs-hero-inner { position: relative; text-align: center; padding: 0 24px; max-width: 900px; }

/* A white halo that travels with the text. Rack offsets alone can't guarantee
   clearance — the content block grows on narrow/short viewports until it meets
   the racks — so the type carries its own clean backdrop and stays legible at
   any height. Sits above .rs-wall (later in tree order at the same z-index)
   but below the hero copy, which is in normal flow. */
.rs-hero-inner::before {
	content: '';
	position: absolute;
	inset: -48px -80px;
	z-index: -1;
	background: radial-gradient(58% 52% at 50% 50%,
		#ffffff 0%,
		#ffffff 58%,
		rgba(255,255,255,.86) 76%,
		rgba(255,255,255,0) 100%);
	pointer-events: none;
}

.rs-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: clamp(22px, 4vw, 38px);
	color: var(--rs-ink2);
}
.rs-eyebrow i { width: 26px; height: 1px; background: var(--rs-line); display: block; }

.rs-wordmark { margin: 0 0 clamp(20px, 3vw, 30px); font-size: 0; line-height: 0; }
/* visible to crawlers and screen readers, not to the eye */
.rs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
#ym-rs .rs-wordmark img {
	width: min(520px, 76vw);
	height: auto;
	display: inline-block;
}

/* Two deliberate lines rather than a natural wrap — left to itself this broke
   mid-phrase as "A DJ mix podcast. House," / "Deep House and Techno." */
.rs-lede {
	font-size: clamp(17px, 2vw, 21px);
	line-height: 1.35;
	letter-spacing: -.015em;
	color: var(--rs-ink2);
	margin: 0 auto clamp(30px, 4vw, 44px);
	max-width: none;
}
.rs-lede span { display: block; text-wrap: balance; }
.rs-lede .rs-lede-genres { color: var(--rs-muted); margin-top: 2px; }

.rs-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Listen-elsewhere row. Deliberately lighter than .rs-btn — smaller, hairline
   only, no fill — so it reads as secondary to The Crate / Play Vinyl instead
   of competing with them. */
.rs-listen {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: clamp(20px, 2.6vw, 30px);
}
#ym-rs .rs-listen-link {
	font-size: 13px;
	font-weight: 450;
	letter-spacing: -.006em;
	color: var(--rs-ink2);
	padding: 7px 15px;
	border-radius: 999px;
	border: 1px solid var(--rs-line);
	/* a faint fill so these still read as chips — a 12% hairline alone
	   disappears against white and they look like bare text links */
	background: var(--rs-paper2);
	transition: color .15s ease-out, border-color .15s ease-out,
	            background .15s ease-out, transform .25s var(--rs-ease);
	white-space: nowrap;
}
#ym-rs .rs-listen-link:hover {
	color: var(--rs-ink);
	border-color: #c8ccd3;
	background: var(--rs-paper);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(11,11,14,.10);
}
#ym-rs .rs-listen-link:focus-visible { outline: 2px solid var(--rs-acc); outline-offset: 2px; }

.rs-btn {
	font-size: 14.5px;
	font-weight: 450;
	letter-spacing: -.008em;
	padding: 11px 22px;
	border-radius: 999px;
	border: 1px solid var(--rs-line);
	background: var(--rs-paper);
	color: var(--rs-ink);
	transition: transform .25s var(--rs-ease), box-shadow .25s var(--rs-ease),
	            border-color .2s, background .2s, color .2s;
}
.rs-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(11, 11, 14, .12);
	border-color: #d6d8de;
}
.rs-btn-solid { background: var(--rs-ink); border-color: var(--rs-ink); color: #fff; }
.rs-btn-solid:hover { background: #26272e; border-color: #26272e; }
.rs-btn[disabled] { opacity: .45; pointer-events: none; }

.rs-cue {
	position: absolute;
	bottom: 34px; left: 50%;
	transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	font-family: var(--rs-mono);
	font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
	color: var(--rs-muted);
	/* the cue sits in the band the lower rack occupies, so it carries its own
	   glow rather than depending on what happens to be behind it */
	text-shadow: 0 0 8px #fff, 0 0 16px #fff, 0 0 24px #fff;
}
.rs-cue i {
	width: 1px; height: 42px;
	background: linear-gradient(180deg, var(--rs-line), transparent);
	position: relative; overflow: hidden;
}
.rs-cue i::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, var(--rs-ink), transparent);
	animation: rs-cue 2.4s var(--rs-ease) infinite;
}
@keyframes rs-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ==========================================================================
   Section furniture
   ========================================================================== */
.rs-sect-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: clamp(30px, 4vw, 48px);
}
.rs-sect-head h2 {
	margin: 0;
	font-family: var(--rs-sans) !important;
	font-size: clamp(30px, 4.4vw, 52px);
	font-weight: 450;
	letter-spacing: -.018em;
	line-height: 1.05;
	color: var(--rs-ink);
	text-transform: none;
}
.rs-sect-note {
	margin: 0 0 0 auto;
	font-size: 14px;
	color: var(--rs-muted);
	letter-spacing: -.01em;
}

/* ==========================================================================
   2. The deck
   ========================================================================== */
.rs-deck { background: var(--rs-paper2); padding: clamp(70px, 9vw, 120px) 0; position: relative; }
.rs-deck::before,
.rs-deck::after {
	content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--rs-line);
}
.rs-deck::before { top: 0; }
.rs-deck::after { bottom: 0; }

.rs-deck-grid {
	display: grid;
	grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
	gap: clamp(36px, 6vw, 80px);
	align-items: center;
}

.rs-deck-stage { display: flex; justify-content: center; }

.rs-turntable {
	position: relative;
	width: 100%;
	max-width: 560px;
	/* SL-1200 is a landscape slab, not a square — 128:100 matches the deck
	   SVG's viewBox so percentages and SVG units describe the same grid */
	aspect-ratio: 128 / 100;
}

.rs-plinth {
	position: absolute; inset: 0;
	border-radius: 22px;
	/* ground on top of the deck band's tint — the elevation now comes from the
	   surface step and the hairline, not from a stack of shadows. Must NOT be
	   --rs-paper2: that is the band's own colour and the plinth would vanish. */
	background: var(--rs-paper);
	border: 1px solid var(--rs-line);
	box-shadow: 0 16px 40px rgba(11,11,14,.10);
}

/* platter: centre (43%, 50%), radius 39% — the tonearm SVG is drawn to match */
.rs-platter {
	position: absolute;
	/* centre (42,46) radius 33 in 128x100 units */
	left: 7.03%; top: 13%;
	width: 51.5625%; height: 66%;
	border-radius: 50%;
	background: #1a1a1e;
	box-shadow: inset 0 0 22px rgba(0,0,0,.55);
}

.rs-record {
	position: absolute; inset: 1.6%;
	border-radius: 50%;
	overflow: hidden;
	background: var(--rs-vinyl);
	animation: rs-spin 1.8s linear infinite;      /* 33 1/3 rpm */
	animation-play-state: paused;
	will-change: transform;
}
.rs-turntable.is-playing .rs-record { animation-play-state: running; }
@keyframes rs-spin { to { transform: rotate(360deg); } }

.rs-grooves {
	position: absolute; inset: 0; border-radius: 50%;
	background:
		repeating-radial-gradient(circle at 50% 50%,
			rgba(255,255,255,.055) 0 1px,
			rgba(0,0,0,0) 1px 3.2px);
}
.rs-sheen {
	position: absolute; inset: 0; border-radius: 50%;
	background:
		conic-gradient(from 210deg at 50% 50%,
			rgba(255,255,255,0) 0deg,
			rgba(255,255,255,.14) 26deg,
			rgba(255,255,255,0) 62deg,
			rgba(255,255,255,0) 180deg,
			rgba(255,255,255,.10) 208deg,
			rgba(255,255,255,0) 244deg,
			rgba(255,255,255,0) 360deg);
}
#ym-rs .rs-label-art {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 38%; height: 38%;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.rs-spindle {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 2.6%; height: 2.6%;
	border-radius: 50%;
	background: var(--rs-paper2);
	box-shadow: 0 0 0 1.5px rgba(0,0,0,.6);
	z-index: 3;
}

/* strobe dots around the platter rim, like a real deck */
.rs-strobe {
	position: absolute;
	left: 7.03%; top: 13%; width: 51.5625%; height: 66%;
	border-radius: 50%;
	pointer-events: none;
	background: repeating-conic-gradient(from 0deg at 50% 50%,
		rgba(255,255,255,.30) 0deg 1.1deg,
		rgba(255,255,255,0) 1.1deg 5deg);
	-webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 95.5%, #000 96% 100%);
	mask: radial-gradient(circle at 50% 50%, transparent 0 95.5%, #000 96% 100%);
}

.rs-deck-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; overflow: visible; }
#rs-arm { filter: drop-shadow(0 3px 5px rgba(11,11,14,.22)); }

/* ---- deck readout ---- */
.rs-deck-info { min-width: 0; }
.rs-now-title {
	margin: 12px 0 6px;
	font-family: var(--rs-sans) !important;
	font-size: clamp(26px, 3.4vw, 40px);
	font-weight: 450;
	letter-spacing: -.018em;
	line-height: 1.08;
	color: var(--rs-ink);
	text-transform: none;
}
.rs-now-date { margin: 0 0 28px; font-size: 14.5px; color: var(--rs-muted); }

.rs-transport { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }

.rs-play {
	flex: none;
	width: 62px; height: 62px;
	border-radius: 50%;
	border: 0;
	background: var(--rs-ink);
	color: #fff;
	display: grid; place-items: center;
	transition: transform .22s var(--rs-ease), background .2s, box-shadow .22s var(--rs-ease);
	box-shadow: 0 4px 12px rgba(11,11,14,.16);
}
.rs-play:hover { transform: scale(1.06); background: #26272e; box-shadow: 0 12px 30px rgba(11,11,14,.28); }
.rs-play:active { transform: scale(.97); }
.rs-play svg { width: 22px; height: 22px; grid-area: 1 / 1; }
.rs-play .rs-ico-pause,
.rs-dock-play .rs-ico-pause { display: none; }
.rs-turntable.is-playing ~ * .rs-ico-play { display: none; }
#ym-rs.is-playing .rs-play .rs-ico-play,
#ym-rs.is-playing .rs-dock-play .rs-ico-play { display: none; }
#ym-rs.is-playing .rs-play .rs-ico-pause,
#ym-rs.is-playing .rs-dock-play .rs-ico-pause { display: block; }

.rs-scrub-group { flex: 1; min-width: 0; }
.rs-scrub { position: relative; padding: 12px 0; cursor: pointer; touch-action: none; }
.rs-scrub-track {
	height: 4px; border-radius: 999px;
	background: rgba(11,11,14,.11);
	overflow: hidden;
}
.rs-scrub-fill { height: 100%; width: 0; background: var(--rs-ink); border-radius: 999px; }
.rs-scrub-knob {
	position: absolute; top: 50%; left: 0;
	width: 13px; height: 13px; border-radius: 50%;
	background: var(--rs-paper);
	border: 1px solid rgba(11,11,14,.18);
	box-shadow: 0 2px 6px rgba(11,11,14,.22);
	transform: translate(-50%, -50%) scale(0);
	transition: transform .2s var(--rs-ease);
	pointer-events: none;
}
.rs-scrub:hover .rs-scrub-knob,
.rs-scrub:focus-visible .rs-scrub-knob,
.rs-scrub.is-drag .rs-scrub-knob { transform: translate(-50%, -50%) scale(1); }
.rs-times {
	display: flex; justify-content: space-between;
	font-family: var(--rs-mono);
	font-size: 11.5px;
	color: var(--rs-muted);
	font-variant-numeric: tabular-nums;
}

.rs-deck-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rs-chip {
	font-size: 13.5px; font-weight: 450;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--rs-line);
	background: var(--rs-paper);
	color: var(--rs-ink);
	transition: background .2s, border-color .2s, transform .2s var(--rs-ease);
}
.rs-chip:hover { background: #fff; border-color: #d3d5db; transform: translateY(-1px); }
.rs-chip[hidden] { display: none; }

/* ==========================================================================
   3. The crate — one browsing surface
   --------------------------------------------------------------------------
   Tidy and upright at rest so 200+ volumes stay scannable. All the character
   comes from the dig interaction: sleeves near the cursor part and fan open,
   the one under it stands up and slides its disc out. Only .rs-rec-slot is
   transformed — captions stay level and readable throughout.
   ========================================================================== */
.rs-browse { padding: clamp(70px, 9vw, 120px) 0 clamp(70px, 9vw, 110px); }

.rs-crate {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(36px, 3.8vw, 54px) clamp(20px, 2.2vw, 30px);
}
@media (max-width: 1100px) { .rs-crate { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .rs-crate { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rs-rec { position: relative; }

.rs-rec-slot {
	position: relative;
	aspect-ratio: 1;
	cursor: pointer;
}

.rs-rec-sleeve {
	position: absolute; inset: 0;
	border-radius: 4px;
	overflow: hidden;
	background: var(--rs-paper3);
	outline: 1px solid var(--rs-line);
	outline-offset: -1px;
	z-index: 2;
	transition: transform .5s var(--rs-expo), box-shadow .5s var(--rs-ease);
}
#ym-rs .rs-rec-sleeve img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* paper sheen, so a flat sleeve still reads as printed card */
.rs-rec-sleeve::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(118deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 32%, rgba(0,0,0,.09) 100%);
}

.rs-rec-disc {
	position: absolute;
	top: 3%; right: 0;
	width: 94%; aspect-ratio: 1;
	border-radius: 50%;
	z-index: 1;
	background:
		radial-gradient(circle at 50% 50%, var(--rs-paper2) 0 2.3%, transparent 2.6%),
		radial-gradient(circle at 50% 50%, var(--rs-acc) 2.6% 13%, transparent 13.4%),
		repeating-radial-gradient(circle at 50% 50%, #1e1e22 0 1px, #0b0b0d 1px 3px);
	/* starts tucked completely behind the sleeve */
	transform: translateX(0);
	transition: transform .8s var(--rs-expo), box-shadow .6s var(--rs-ease);
}

/* Out while you're on it, back in when you leave. Still one clean direction
   — in to out — with no spin loop; it just doesn't stay out any more. */
@media (hover: hover) {
	.rs-rec-slot:hover .rs-rec-disc {
		transform: translateX(36%);
		box-shadow: 12px 16px 30px rgba(11,11,14,.28);
	}
}

.rs-rec-play {
	position: absolute; z-index: 3;
	left: 12px; bottom: 12px;
	width: 40px; height: 40px;
	border: 0; border-radius: 50%;
	background: rgba(255,255,255,.94);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	color: var(--rs-ink);
	display: grid; place-items: center;
	box-shadow: 0 6px 18px rgba(11,11,14,.22);
	opacity: 0; transform: translateY(8px) scale(.9);
	transition: opacity .25s var(--rs-ease), transform .25s var(--rs-ease), background .15s ease-out;
}
.rs-rec-play svg { width: 14px; height: 14px; fill: currentColor; margin-left: 2px; }
.rs-rec-play:hover { background: #fff; }

@media (hover: hover) {
	.rs-rec-slot:hover .rs-rec-play { opacity: 1; transform: none; }
	/* the cover lifts off the shelf as the record slides out behind it */
	.rs-rec-slot:hover .rs-rec-sleeve {
		transform: translateY(-9px) scale(1.022);
		box-shadow: 0 22px 42px rgba(11,11,14,.26);
	}
	.rs-rec-slot:hover .rs-rec-meta { transform: translateY(2px); }
}
.rs-rec-meta { transition: transform .5s var(--rs-expo); }
.rs-rec-play:focus-visible { opacity: 1; transform: none; }

.rs-rec-meta { padding: 14px 2px 0; }
.rs-rec-vol {
	margin: 0 0 4px;
	font-family: var(--rs-mono);
	font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--rs-muted);
}
.rs-rec-title {
	margin: 0 0 4px;
	font-family: var(--rs-sans) !important;
	font-size: 15px; font-weight: 500; letter-spacing: -.012em; line-height: 1.3;
	color: var(--rs-ink);
	text-transform: none;
	cursor: pointer;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rs-rec-sub {
	margin: 0;
	font-size: 12.5px; color: var(--rs-muted);
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rs-rec-sub i { width: 3px; height: 3px; border-radius: 50%; background: var(--rs-line); display: block; }
.rs-rec-tracks {
	border: 0; background: transparent; padding: 0;
	font-size: 12.5px; color: var(--rs-acc); font-weight: 450;
}
.rs-rec-tracks:hover { color: var(--rs-acc-d); text-decoration: underline; }

/* the record currently on the deck */
.rs-rec.is-current .rs-rec-sleeve { outline: 2px solid var(--rs-acc); outline-offset: -2px; }
.rs-rec.is-current .rs-rec-vol { color: var(--rs-acc); }

.rs-controls {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	margin-bottom: 38px;
}

.rs-segmented {
	position: relative;
	display: inline-flex;
	padding: 4px;
	background: rgba(11,11,14,.055);
	border-radius: 999px;
}
.rs-seg {
	position: relative; z-index: 2;
	border: 0; background: transparent;
	padding: 8px 22px;
	border-radius: 999px;
	font-size: 13.5px; font-weight: 450; letter-spacing: -.008em;
	color: var(--rs-ink2);
	transition: color .15s ease-out;
}
.rs-seg.is-on { color: var(--rs-ink); }
.rs-seg-pill {
	position: absolute; z-index: 1; top: 4px; left: 4px;
	height: calc(100% - 8px);
	border-radius: 999px;
	background: var(--rs-paper);
	box-shadow: 0 2px 6px rgba(11,11,14,.10);
	transition: transform .38s var(--rs-ease), width .38s var(--rs-ease);
}

/* the crate supplies its own top spacing via the rail's hover headroom */
.rs-view-grid { margin-top: 34px; }

.rs-search {
	position: relative;
	display: flex; align-items: center;
	flex: 1; min-width: 220px; max-width: 340px;
	margin-left: auto;
}
.rs-search svg {
	position: absolute; left: 15px;
	width: 16px; height: 16px;
	color: var(--rs-muted);
	pointer-events: none;
}
.rs-search input {
	width: 100%;
	padding: 12px 40px 12px 42px;
	border-radius: 999px;
	border: 1px solid var(--rs-line);
	background: var(--rs-paper);
	font-family: inherit; font-size: 14px;
	color: var(--rs-ink);
	transition: border-color .2s, box-shadow .2s;
	-webkit-appearance: none;
}
.rs-search input::placeholder { color: var(--rs-muted); }
.rs-search input:focus {
	outline: 0;
	border-color: var(--rs-acc);
	box-shadow: 0 0 0 4px rgba(0,113,227,.13);
}
.rs-search input::-webkit-search-cancel-button { display: none; }
.rs-search-clear {
	position: absolute; right: 12px;
	width: 22px; height: 22px; border-radius: 50%;
	border: 0; background: rgba(11,11,14,.08);
	color: var(--rs-ink2); font-size: 15px; line-height: 1;
	display: grid; place-items: center;
}
.rs-search-clear[hidden] { display: none; }


.rs-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 56px 0;
	color: var(--rs-muted);
	font-size: 16px;
}
.rs-more-row { text-align: center; margin-top: clamp(38px, 5vw, 60px); }
.rs-more-row[hidden] { display: none; }

.rs-skeleton {
	border-radius: 4px;
	background: linear-gradient(90deg, #e9e9ee 25%, #f1f1f4 37%, #e9e9ee 63%);
	background-size: 400% 100%;
	animation: rs-shimmer 1.4s ease infinite;
	aspect-ratio: 1;
}
@keyframes rs-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ==========================================================================
   Docked deck
   ========================================================================== */
.rs-dock {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 600;
	display: flex; align-items: center; gap: 16px;
	padding: 11px max(16px, calc((100vw - 1280px) / 2 + clamp(20px, 5vw, 72px)));
	background: rgba(255,255,255,.82);
	-webkit-backdrop-filter: saturate(180%) blur(24px);
	backdrop-filter: saturate(180%) blur(24px);
	border-top: 1px solid var(--rs-line);
	transform: translateY(100%);
	transition: transform .45s var(--rs-ease);
}
.rs-dock[hidden] { display: flex; }        /* keep it laid out so it can slide */
.rs-dock.is-up { transform: none; }

.rs-dock-record {
	flex: none;
	width: 44px; height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--rs-vinyl);
	display: grid; place-items: center;
	animation: rs-spin 1.8s linear infinite;
	animation-play-state: paused;
	box-shadow: 0 2px 8px rgba(11,11,14,.22);
}
#ym-rs.is-playing .rs-dock-record { animation-play-state: running; }
#ym-rs .rs-dock-record img { width: 58%; height: 58%; border-radius: 50%; object-fit: cover; }

.rs-dock-play {
	flex: none;
	width: 38px; height: 38px; border-radius: 50%;
	border: 0; background: var(--rs-ink); color: #fff;
	display: grid; place-items: center;
}
.rs-dock-play svg { width: 14px; height: 14px; grid-area: 1 / 1; }

.rs-dock-meta { flex: 1; min-width: 0; }
.rs-dock-title {
	margin: 0 0 6px;
	font-size: 13.5px; font-weight: 500; letter-spacing: -.01em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	color: var(--rs-ink);
}
.rs-dock-bar { height: 3px; border-radius: 999px; background: rgba(11,11,14,.11); overflow: hidden; cursor: pointer; }
.rs-dock-fill { height: 100%; width: 0; background: var(--rs-ink); border-radius: 999px; }
.rs-dock-time {
	flex: none;
	font-family: var(--rs-mono); font-size: 11.5px; color: var(--rs-muted);
	font-variant-numeric: tabular-nums;
}
.rs-dock-up {
	flex: none;
	width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid var(--rs-line); background: var(--rs-paper); color: var(--rs-ink2);
}
.rs-dock-up:hover { color: var(--rs-ink); border-color: #d3d5db; }

/* ==========================================================================
   Tracklist sheet
   ========================================================================== */
.rs-sheet-overlay {
	position: fixed; inset: 0; z-index: 900;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
	background: rgba(11,11,14,.42);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .3s var(--rs-ease);
}
.rs-sheet-overlay[hidden] { display: none; }
.rs-sheet-overlay.is-open { opacity: 1; }

.rs-sheet {
	position: relative;
	width: 100%; max-width: 560px; max-height: 82vh;
	overflow: auto;
	padding: 34px 36px 38px;
	border-radius: 24px;
	background: var(--rs-paper);
	box-shadow: 0 40px 100px rgba(11,11,14,.4);
	transform: translateY(18px) scale(.985);
	transition: transform .38s var(--rs-ease);
	-webkit-overflow-scrolling: touch;
}
.rs-sheet-overlay.is-open .rs-sheet { transform: none; }
.rs-sheet h3 {
	margin: 6px 44px 22px 0;
	font-family: var(--rs-sans) !important;
	font-size: 24px; font-weight: 500; letter-spacing: -.016em; line-height: 1.15;
	color: var(--rs-ink);
	text-transform: none;
}
.rs-sheet-close {
	position: absolute; top: 18px; right: 20px;
	width: 32px; height: 32px; border-radius: 50%;
	border: 0; background: rgba(11,11,14,.06); color: var(--rs-ink);
	font-size: 19px; line-height: 1;
	display: grid; place-items: center;
}
.rs-sheet-close:hover { background: rgba(11,11,14,.11); }
.rs-sheet-list { margin: 0; padding: 0; list-style: none; counter-reset: rs-t; }
.rs-sheet-list li {
	counter-increment: rs-t;
	display: flex; gap: 14px;
	padding: 11px 0;
	border-top: 1px solid var(--rs-line);
	font-size: 14.5px; line-height: 1.45; color: var(--rs-ink2);
}
.rs-sheet-list li::before {
	content: counter(rs-t, decimal-leading-zero);
	flex: none;
	font-family: var(--rs-mono); font-size: 11px; color: var(--rs-muted);
	padding-top: 3px;
}
.rs-sheet-none { color: var(--rs-muted); font-size: 15px; margin: 0; }

/* ==========================================================================
   Scroll choreography
   ========================================================================== */
.rs-reveal { opacity: 0; transform: translateY(24px); filter: blur(6px); }
.rs-reveal.is-in {
	opacity: 1; transform: none; filter: none;
	transition: opacity .9s var(--rs-expo), transform .9s var(--rs-expo), filter .9s var(--rs-expo);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
	.rs-deck-grid { grid-template-columns: 1fr; gap: 34px; }
	.rs-deck-stage { order: -1; }
	.rs-turntable { max-width: 460px; }
	.rs-sect-note { margin-left: 0; flex-basis: 100%; }
}

@media (max-width: 640px) {
	.rs-wrap { padding: 0 20px; }
	.rs-nav, .rs-nav.is-stuck { padding: 12px 18px; }
	.rs-nav-links a { padding: 8px 10px; font-size: 13px; }
	.rs-hero { min-height: 92svh; padding: 100px 0 70px; }
	.rs-hero-cta .rs-btn { flex: 1 1 auto; }
	.rs-listen { gap: 8px; }
	#ym-rs .rs-listen-link { font-size: 12.5px; padding: 6px 13px; }
	.rs-turntable { max-width: min(400px, 92vw); }
	.rs-plinth { border-radius: 16px; }
	.rs-play { width: 54px; height: 54px; }
	.rs-transport { gap: 14px; }
	/* two up on a phone; the dig is pointer-only so nothing else changes */
	.rs-crate { gap: 26px 16px; }
	.rs-rec-play { width: 36px; height: 36px; left: 9px; bottom: 9px; opacity: 1; transform: none; }
	.rs-rec-title { font-size: 14px; }
	/* filters on one row; search drops to its own line */
	.rs-controls { gap: 12px; }
	.rs-segmented { order: 1; }
	.rs-search { order: 3; flex: 1 1 100%; max-width: none; margin-left: 0; }
	.rs-seg { padding: 8px 16px; }
	.rs-dock { gap: 11px; padding: 9px 14px; }
	.rs-dock-time, .rs-dock-up { display: none; }
	.rs-sheet { padding: 28px 22px 30px; border-radius: 18px; }
	.rs-grain { opacity: .22; }
}

@media (prefers-reduced-motion: reduce) {
	#ym-rs *,
	#ym-rs *::before,
	#ym-rs *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.rs-reveal { opacity: 1; transform: none; filter: none; }
	.rs-grain { display: none; }
	.rs-record, .rs-dock-record { animation: none !important; }
}