/* ==========================================================================
   liadscher — site stylesheet
   RTL Hebrew. One family (Greycliff Hebrew CF), hierarchy by weight and size.

   The design was drawn inside fixed 1440 / 768 / 375 frames using container
   query units, so `.site` is declared a size container and every `cqi` value
   below is the design's own number, unchanged.
   ========================================================================== */

/* --------------------------------------------------------- tokens */

:root {
	--paper: #F7F4EF;
	--paper-2: #F2EDE5;
	--card: #FBF9F5;

	--ink: #1E1C19;
	--ink-2: #23211E;
	--ink-3: #2B2825;
	--ink-4: #3A362F;
	--muted: #55504A;
	--muted-2: #6E675F;
	--muted-3: #6B655C;
	/* Both faint steps clear 4.5:1 on --paper-2, which is the binding ground:
	   the song hero paints it, and it is darker than either --paper or --card,
	   so a value tuned against --paper alone still fails there. (It did — the
	   "האזנה" label landed at 4.32:1 on the hero while passing everywhere else.)
	   They read as small print, but they are still print: WCAG 1.4.3 makes no
	   allowance for text being deliberately quiet, and the tab strip and that
	   label are the resting state of real controls. There is almost no headroom
	   above 4.5:1 on paper this light, so the two steps sit close together by
	   necessity rather than by taste. --faint-3 is not in this ramp: it only
	   ever colours an underline, which is decoration. */
	--faint: #6D675E;
	--faint-2: #706A61;
	--faint-3: #C9C1B6;

	--hair-soft: rgba(35, 33, 30, .09);
	--hair-2: rgba(35, 33, 30, .11);
	--hair: rgba(35, 33, 30, .13);
	--hair-3: rgba(35, 33, 30, .16);
	--hair-strong: rgba(35, 33, 30, .22);
	--line: rgba(35, 33, 30, .30);

	--accent: #B87C74;
	--accent-ink: color-mix(in oklab, var(--accent) 70%, #1E1C19);
	--accent-wash: color-mix(in oklab, var(--accent) 8%, transparent);
	--accent-wash-2: color-mix(in oklab, var(--accent) 14%, transparent);

	--font: "greycliff-hebrew-cf", sans-serif;

	--ease: cubic-bezier(.23, 1, .32, 1);
	--ease-2: cubic-bezier(.16, .84, .28, 1);

	--pad-x: clamp(20px, 4cqi, 56px);
}

/* --------------------------------------------------------- reset */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html,
body {
	margin: 0;
	padding: 0;
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

body {
	font-family: var(--font);
	font-weight: 400;
	color: var(--ink-2);
	line-height: 1.6;
}

img,
picture,
svg { max-width: 100%; }

img { height: auto; }

h1, h2, h3, h4, p, dl, dd, figure, ol, ul { margin: 0; }

ol, ul { padding: 0; list-style: none; }

button {
	font: inherit;
	color: inherit;
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

a {
	color: var(--ink-2);
	text-decoration: none;
	transition: color 180ms ease-out;
}

a:hover { color: var(--accent-ink); }

:focus-visible {
	outline: 2px solid color-mix(in oklab, var(--accent) 78%, #1E1C19);
	outline-offset: 3px;
}

::selection { background: color-mix(in oklab, var(--accent) 22%, transparent); }

[hidden] { display: none !important; }

/* --------------------------------------------------------- utilities */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Hidden until focused — by clipping, never by an offset. Parking it at
   `inset-inline-start: -9999px` reads as "far off-screen left", but inline-start
   is the RIGHT edge in RTL, so it landed 10,000px off the right of the document:
   real scrollable overflow, and it lives outside .site so nothing clipped it.
   Chrome would not scroll there; iOS Safari panned the whole page into it. */
.skip-link {
	position: absolute;
	inset-inline-start: 12px;
	top: 12px;
	z-index: 100;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	background: var(--card);
	font-weight: 600;
}

.skip-link:focus {
	width: auto;
	height: auto;
	padding: 10px 16px;
	border: 1px solid var(--hair);
	overflow: visible;
	clip-path: none;
}

/* Numerals, timecodes and Latin metadata. Greycliff is the only family on the
   site, so the "mono" role is carried by tabular figures plus tracking. */
.num {
	font-variant-numeric: tabular-nums;
	letter-spacing: .06em;
	unicode-bidi: isolate;
}

.dot {
	color: var(--faint-2);
	padding: 0 6px;
}

.prose { color: var(--ink-4); }
.prose p { margin: 0 0 .9em; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose a { text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------- shared components */

.eyebrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(10px, 1.4cqi, 16px);
}

.eyebrow__type {
	font-weight: 700;
	font-size: clamp(11px, .95cqi, 12.5px);
	line-height: 1;
	letter-spacing: .2em;
	color: var(--accent-ink);
}

.eyebrow__rule {
	width: 22px;
	height: 1px;
	background: var(--hair-strong);
}

.eyebrow__year {
	font-size: clamp(11px, .95cqi, 12.5px);
	line-height: 1;
	letter-spacing: .12em;
	color: var(--muted-2);
}

.eyebrow__label {
	font-weight: 500;
	font-size: clamp(12.5px, 1.05cqi, 13.5px);
	letter-spacing: .04em;
	color: var(--muted);
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 11px 15px;
	border: 1px solid var(--hair-strong);
	background: var(--card);
	color: var(--ink-2);
	transition: border-color 180ms ease-out, background-color 180ms ease-out, color 180ms ease-out;
}

.btn:hover {
	border-color: var(--accent);
	background: var(--accent-wash);
	color: var(--ink);
}

.btn__label {
	font-weight: 600;
	font-size: clamp(14px, 1.2cqi, 16px);
	line-height: 1;
}

.btn__meta {
	font-size: 11.5px;
	line-height: 1;
	color: var(--faint);
	white-space: nowrap;
}

.btn__arrow {
	color: var(--muted-3);
	line-height: 1;
}

.linkrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.linkrow__label {
	font-weight: 700;
	font-size: 11.5px;
	line-height: 1;
	letter-spacing: .16em;
	color: var(--faint-2);
	padding-inline-end: 4px;
}

.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 9px 13px;
	border: 1px solid var(--hair-3);
	background: var(--card);
	color: var(--muted);
	transition: border-color 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}

.pill:hover {
	border-color: var(--accent);
	background: var(--accent-wash);
	color: var(--ink);
}

.pill__label {
	font-weight: 600;
	font-size: clamp(13.5px, 1.1cqi, 15px);
	line-height: 1;
	white-space: nowrap;
}

.linkrow--presave .pill {
	border-color: color-mix(in oklab, var(--accent) 55%, #E4DED4);
	background: color-mix(in oklab, var(--accent) 7%, transparent);
}

.linkrow--presave .pill:hover {
	border-color: var(--accent);
	background: var(--accent-wash-2);
}

.textlink {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 10px;
	padding-bottom: 4px;
	border-bottom: 1px solid color-mix(in oklab, var(--accent) 55%, #E4DED4);
	font-weight: 600;
	font-size: clamp(15px, 1.35cqi, 18px);
	line-height: 1.3;
	color: var(--ink);
	transition: border-color 200ms var(--ease), color 200ms var(--ease);
}

.textlink:hover { border-color: var(--accent); }

.embargo {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.2cqi, 14px);
	padding-top: 12px;
	border-top: 1px solid var(--hair);
}

.embargo__line {
	font-weight: 500;
	font-size: clamp(14px, 1.3cqi, 17px);
	line-height: 1.5;
	color: var(--muted);
	text-wrap: pretty;
}

.embargo__date {
	font-weight: 500;
	color: var(--accent-ink);
}

/* --------------------------------------------------------- site chrome */

.site {
	container-type: inline-size;
	position: relative;
	/* `hidden` on one axis forces the other to `auto`, which quietly makes .site
	   a scroll container — the thing that lets iOS pan it. `clip` does not.
	   The `hidden` line stays as the fallback for Safari < 16. */
	overflow-x: hidden;
	overflow-x: clip;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--paper);
}

.site-main { flex: 1; }

.site-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: clamp(18px, 2.4cqi, 30px) var(--pad-x) 0;
}

.site-logo {
	font-weight: 700;
	font-size: clamp(16px, 1.4cqi, 19px);
	line-height: 1;
	letter-spacing: .01em;
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(14px, 1.8cqi, 26px);
	font-weight: 500;
	font-size: clamp(13px, 1.05cqi, 14px);
	line-height: 1;
	letter-spacing: .04em;
}

.site-nav__list a { color: var(--muted); }
.site-nav__list a:hover { color: var(--accent-ink); }

.site-nav__list .current-menu-item > a,
.site-nav__list li.current-menu-item a {
	color: var(--accent-ink);
	font-weight: 700;
}

.site-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 24px;
	margin-top: clamp(40px, 5cqi, 76px);
	padding: clamp(14px, 1.5cqi, 18px) var(--pad-x) clamp(22px, 2.4cqi, 30px);
	border-top: 1px solid var(--hair-2);
}

.site-footer__contacts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 20px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--muted);
}

.contact__label { color: var(--muted-2); }
.contact .num { font-size: 12.5px; }
.contact__phone { white-space: nowrap; }

.site-footer__legal {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--muted-2);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--faint-3);
}

.site-footer__legal:hover { text-decoration-color: currentColor; }

.social-list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13.5px;
	line-height: 1.4;
}

/* --------------------------------------------------------- home: spotlight */

.home { padding-inline: var(--pad-x); }

.spotlight {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(26px, 4cqi, 64px);
	padding: clamp(30px, 5cqi, 72px) 0 clamp(34px, 4.6cqi, 68px);
}

.spotlight__sleeve {
	display: block;
	flex: 0 0 46%;
	max-width: 520px;
}

.spotlight__frame {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--paper-2);
	box-shadow: 0 0 0 1px var(--hair), 0 30px 64px -28px rgba(35, 33, 30, .42);
	transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}

.spotlight__sleeve:hover .spotlight__frame {
	transform: scale(1.015);
	box-shadow: 0 0 0 1px rgba(35, 33, 30, .18), 0 38px 80px -30px rgba(35, 33, 30, .5);
}

.spotlight__frame img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spotlight__text {
	flex: 1 1 320px;
	min-width: 0;
}

.spotlight__title {
	font-weight: 700;
	font-size: clamp(46px, 6.6cqi, 96px);
	line-height: .98;
	color: var(--ink);
	text-wrap: pretty;
	unicode-bidi: plaintext;
	text-align: right;
}

.spotlight__en {
	margin-top: clamp(6px, .9cqi, 12px);
	font-weight: 500;
	font-size: clamp(17px, 1.6cqi, 24px);
	line-height: 1.2;
	letter-spacing: .08em;
	color: var(--muted-2);
	unicode-bidi: isolate;
	text-align: right;
}

.spotlight__artist {
	margin-top: clamp(12px, 1.4cqi, 18px);
	font-weight: 500;
	font-size: clamp(17px, 1.5cqi, 22px);
	line-height: 1.3;
	letter-spacing: .04em;
	color: var(--muted);
}

.spotlight__actions {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.7cqi, 20px);
	margin-top: clamp(22px, 2.8cqi, 38px);
	padding-top: clamp(18px, 2.2cqi, 26px);
	border-top: 1px solid var(--hair);
}

/* --------------------------------------------------------- home: tiers */

.tier { padding-top: clamp(28px, 3.4cqi, 46px); }

.tier--albums,
.tier--guests {
	border-top: 1px solid var(--hair);
}

.tier--singles { padding-top: clamp(34px, 4.4cqi, 64px); }
.tier--guests { margin-top: clamp(36px, 4.6cqi, 68px); }

.tier__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: clamp(18px, 2.4cqi, 30px);
}

.tier__title {
	font-weight: 700;
	font-size: clamp(14px, 1.2cqi, 16px);
	line-height: 1;
	letter-spacing: .18em;
	color: var(--muted);
}

.tier__rule {
	flex: 1;
	height: 1px;
	background: var(--hair);
}

.tier__count {
	font-size: 12px;
	line-height: 1;
	letter-spacing: .1em;
	color: var(--muted-2);
}

/* --------------------------------------------------------- home: albums */

.albums {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(22px, 3cqi, 48px);
}

.album {
	display: flex;
	align-items: flex-start;
	gap: clamp(16px, 1.9cqi, 26px);
}

.album__sleeve {
	flex: 0 0 clamp(160px, 15cqi, 216px);
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--paper-2);
	box-shadow: 0 0 0 1px var(--hair), 0 16px 38px -26px rgba(35, 33, 30, .5);
	transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}

.album:hover .album__sleeve {
	transform: scale(1.025);
	box-shadow: 0 0 0 1px rgba(35, 33, 30, .2), 0 26px 52px -26px rgba(35, 33, 30, .55);
}

.album__sleeve img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.album__text {
	flex: 1 1 0;
	min-width: 0;
	padding-top: clamp(2px, .6cqi, 8px);
}

.album__title {
	font-weight: 700;
	font-size: clamp(22px, 2.1cqi, 30px);
	line-height: 1.2;
	color: var(--ink);
	text-wrap: pretty;
	unicode-bidi: plaintext;
	text-align: right;
}

.album__meta {
	margin-top: 10px;
	font-weight: 500;
	font-size: clamp(15px, 1.25cqi, 16.5px);
	line-height: 1.6;
	color: var(--muted);
}

.album__sub {
	margin-top: 4px;
	font-size: clamp(14.5px, 1.15cqi, 15.5px);
	line-height: 1.6;
	color: var(--muted-2);
}

.album__artist,
.card__artist {
	unicode-bidi: plaintext;
}

/* --------------------------------------------------------- cover cards */

.cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2.4cqi, 38px) clamp(16px, 2cqi, 32px);
}

.cards--pane {
	grid-template-columns: repeat(auto-fit, minmax(130px, 190px));
	justify-content: start;
	gap: clamp(14px, 1.6cqi, 24px);
}

.card { display: block; }

.card__sleeve {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #E9E3DA;
	box-shadow: 0 0 0 1px var(--hair), 0 12px 30px -24px rgba(35, 33, 30, .5);
	transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}

.card:hover .card__sleeve {
	transform: scale(1.025);
	box-shadow: 0 0 0 1px rgba(35, 33, 30, .2), 0 22px 44px -24px rgba(35, 33, 30, .55);
}

.card__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Non-square art (the only עננה frame is a 4:3 YouTube still): letterbox it over
   a blurred copy rather than crop the frame. */
.card__sleeve--fit .card__img { object-fit: contain; }

.card__blur {
	position: absolute;
	inset: -8%;
	display: block;
	width: 116%;
	height: 116%;
	object-fit: cover;
	filter: blur(22px) saturate(1.15);
	opacity: .92;
}

.card__title {
	margin-top: 12px;
	font-weight: 600;
	font-size: clamp(16.5px, 1.35cqi, 18px);
	line-height: 1.35;
	color: var(--ink);
	text-wrap: pretty;
	unicode-bidi: plaintext;
	text-align: right;
}

.card__meta {
	margin-top: 5px;
	font-size: clamp(14.5px, 1.1cqi, 15.5px);
	line-height: 1.5;
	color: var(--muted);
}

.card__meta .num { color: var(--muted-2); }

/* --------------------------------------------------------- home: guests */

.guest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(14px, 1.6cqi, 20px);
	padding: clamp(14px, 1.6cqi, 18px) 0;
	border-bottom: 1px solid var(--hair-soft);
}

.guest__thumb {
	flex: 0 0 68px;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--paper-2);
	box-shadow: 0 0 0 1px var(--hair);
}

.guest__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.guest__text {
	flex: 1 1 180px;
	min-width: 0;
}

.guest__title {
	font-weight: 600;
	font-size: clamp(16.5px, 1.4cqi, 19px);
	line-height: 1.35;
	color: var(--ink);
	unicode-bidi: plaintext;
	text-align: right;
}

.guest__role {
	margin-top: 3px;
	font-size: clamp(14.5px, 1.1cqi, 15.5px);
	line-height: 1.5;
	color: var(--muted);
}

.guest__actions {
	flex: 0 0 auto;
	margin-inline-start: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.guest__label {
	font-weight: 500;
	font-size: clamp(14px, 1.1cqi, 15px);
	line-height: 1;
	color: var(--muted-2);
	white-space: nowrap;
}

/* --------------------------------------------------------- empty states */

.empty {
	padding: clamp(60px, 12cqi, 160px) var(--pad-x);
	max-width: 46ch;
}

.empty__title {
	font-weight: 700;
	font-size: clamp(34px, 5cqi, 68px);
	line-height: 1.05;
	color: var(--ink);
	text-wrap: pretty;
}

.empty__text {
	margin-top: 14px;
	font-size: clamp(16px, 1.4cqi, 19px);
	color: var(--muted);
}

.empty__actions { margin-top: 28px; }

/* --------------------------------------------------------- song: hero shell */

.single-song .site-header {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 5;
}

.single-song .site-main {
	display: flex;
	flex-direction: column;
}

.song,
.song-hero {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.song-hero {
	position: relative;
	overflow: hidden;
	background: var(--paper-2);
	padding-block-start: clamp(56px, 6cqi, 80px);
}

/* Landing mode prints no header, so the hero drops the top padding that exists
   only to clear the absolutely positioned one. */
.single-song.is-landing .song-hero { padding-block-start: clamp(26px, 3.2cqi, 44px); }

/* The hero stretches to the bottom of the viewport, so the footer's usual top
   margin would open a strip of bare paper between the artwork and the hairline.
   The full-bleed video section below carries its own bottom padding rather than
   borrowing that margin. */
.single-song .site-footer { margin-top: 0; }

.song-hero__media {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 100%;
	z-index: 0;
}

.song-hero__bg,
.song-hero__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 36% 44%;
}

.song-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to left,
		rgba(247, 244, 239, .96) 0%,
		rgba(247, 244, 239, .93) 30%,
		rgba(247, 244, 239, .72) 54%,
		rgba(247, 244, 239, .34) 78%,
		rgba(247, 244, 239, .12) 100%);
}

.song-hero__inner {
	position: relative;
	z-index: 3;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	align-items: stretch;
	gap: clamp(28px, 3.4cqi, 48px);
	padding: clamp(20px, 2.6cqi, 34px) var(--pad-x) clamp(18px, 2.2cqi, 28px);
}

.song-lead {
	flex: 0 0 46%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.song-title {
	font-weight: 700;
	font-size: clamp(50px, 7cqi, 102px);
	line-height: .92;
	letter-spacing: -.015em;
	color: var(--ink);
	text-wrap: pretty;
	unicode-bidi: plaintext;
	text-align: right;
}

.song-title-en {
	margin-top: clamp(6px, .8cqi, 10px);
	font-weight: 500;
	font-size: clamp(16px, 1.5cqi, 22px);
	line-height: 1.2;
	letter-spacing: .08em;
	color: var(--muted-2);
	unicode-bidi: isolate;
	text-align: right;
}

.song-artist {
	margin-top: clamp(10px, 1.2cqi, 16px);
	font-weight: 500;
	font-size: clamp(18px, 1.75cqi, 26px);
	line-height: 1.2;
	letter-spacing: .04em;
	color: var(--muted);
}

/* A step quieter than the credit line above it — provenance, not billing. The
   album title is the only part that carries the underline. */
.song-album {
	margin-top: clamp(6px, .8cqi, 10px);
	font-weight: 500;
	font-size: clamp(15px, 1.35cqi, 19px);
	line-height: 1.35;
	letter-spacing: .02em;
	color: var(--muted-2);
}

.song-album a {
	color: var(--ink-4);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--faint-3);
	transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease);
}

.song-album a:hover,
.song-album a:focus-visible {
	color: var(--accent-ink);
	text-decoration-color: currentColor;
}

.song-lead__row {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(18px, 2.2cqi, 30px);
	margin-top: clamp(20px, 2.6cqi, 34px);
}

.sleeve {
	flex: 0 0 212px;
	margin: 0;
}

.sleeve img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 0 0 1px var(--hair), 0 22px 52px -18px rgba(35, 33, 30, .34);
}

.song-actions {
	flex: 1 1 240px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.6cqi, 20px);
}

/* --------------------------------------------------------- song: player */

.player {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(12px, 1.4cqi, 18px);
	padding: clamp(13px, 1.4cqi, 17px);
	background: var(--card);
	border: 1px solid var(--hair);
	box-shadow: 0 14px 40px -22px rgba(35, 33, 30, .30);
	--pct: 0%;
	--vol: 85%;
}

.player__play {
	flex: 0 0 auto;
	position: relative;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px -8px color-mix(in oklab, var(--accent) 70%, transparent);
	transition: box-shadow 220ms ease-out, transform 180ms ease-out;
}

.player.is-playing .player__play {
	box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 14%, transparent);
}

.player.is-seeking .player__play { transform: scale(.97); }

.player__icon { display: flex; }
.player__icon--pause,
.player.is-playing .player__icon--play { display: none; }
.player.is-playing .player__icon--pause { display: flex; }

.player__spinner {
	display: none;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255, 255, 255, .32);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spinArc 760ms linear infinite;
}

.player.is-loading .player__spinner { display: block; }
.player.is-loading .player__icon { display: none; }

.player__mid {
	flex: 1 1 150px;
	min-width: 0;
}

.player__bar,
.player__volbar {
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
	touch-action: none;
}

.player__bar { height: 20px; }
.player__volbar { width: 52px; height: 18px; }

.player__track {
	position: relative;
	width: 100%;
	height: 2px;
	background: var(--hair-3);
}

.player__fill {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	height: 100%;
	width: var(--pct);
	background: var(--accent);
}

.player__fill--vol {
	width: var(--vol);
	background: var(--muted);
}

.player__handle {
	position: absolute;
	top: 50%;
	inset-inline-start: calc(var(--pct) - 5px);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--accent);
	transform: translateY(-50%);
	opacity: 0;
	box-shadow: 0 0 0 3px rgba(251, 249, 245, .9);
	transition: opacity 160ms ease-out, width 160ms ease-out, height 160ms ease-out;
}

.player.is-playing .player__handle,
.player__bar:hover .player__handle,
.player__bar:focus-visible .player__handle { opacity: 1; }

.player.is-seeking .player__handle {
	opacity: 1;
	width: 12px;
	height: 12px;
	inset-inline-start: calc(var(--pct) - 6px);
}

.player__times {
	display: flex;
	justify-content: space-between;
	margin-top: 5px;
	font-size: 11.5px;
	line-height: 1;
	letter-spacing: .04em;
	color: var(--muted);
}

.player.is-seeking .player__times { color: var(--ink-2); }
.player__total { color: var(--faint-2); }

.player__vol {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--faint);
}

.downloads {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

/* --------------------------------------------------------- song: pane */

.song-pane {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
}

.pane {
	flex: 1;
	min-width: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--hair);
	box-shadow: 0 18px 50px -28px rgba(35, 33, 30, .30);
}

.pane__tabs {
	flex: 0 0 auto;
	display: flex;
	gap: clamp(14px, 1.6cqi, 22px);
	padding: 0 clamp(16px, 1.7cqi, 24px);
	border-bottom: 1px solid var(--hair-2);
	overflow-x: auto;
	scrollbar-width: none;
}

.pane__tabs::-webkit-scrollbar { width: 0; height: 0; }

.pane__tab {
	white-space: nowrap;
	padding: 15px 0 13px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	font-weight: 500;
	font-size: 14.5px;
	line-height: 1;
	letter-spacing: .02em;
	color: var(--faint);
	transition: color 160ms ease-out, border-color 160ms ease-out;
}

.pane__tab:hover { color: var(--muted); }

.pane__tab[aria-selected="true"] {
	font-weight: 700;
	color: var(--ink);
	border-bottom-color: var(--accent-ink);
}

.pane__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none;
	padding: clamp(18px, 2cqi, 28px) clamp(16px, 1.7cqi, 24px) clamp(20px, 2.2cqi, 30px);
}

.pane__body::-webkit-scrollbar { width: 0; height: 0; }

.pane__panel.is-hidden { display: none; }

/* Without JS every panel stays open and its own heading does the labelling. */
html:not(.has-js) .pane__tabs { display: none; }
html:not(.has-js) .pane__panel.is-hidden { display: block; }
html:not(.has-js) .pane__panel + .pane__panel { margin-top: clamp(24px, 3cqi, 40px); }

/* Same deal for the album lyrics box: with no JS every track's lyrics are shown
   stacked rather than one being selectable. */
html:not(.has-js) .album-lyrics__panel.is-hidden { display: block; }

html:not(.has-js) .album-lyrics__panel + .album-lyrics__panel {
	margin-top: clamp(20px, 2.4cqi, 32px);
	padding-top: clamp(20px, 2.4cqi, 32px);
	border-top: 1px solid var(--hair-soft);
}

.pane__panel-title {
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	letter-spacing: .18em;
	color: var(--muted);
	margin-bottom: 16px;
}

.has-js .pane__panel-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------- song: panels */

.lyrics {
	columns: 2;
	column-gap: clamp(24px, 2.6cqi, 40px);
	font-size: clamp(15.5px, 1.3cqi, 17px);
	line-height: 1.85;
	letter-spacing: .01em;
	color: var(--ink-3);
}

.lyrics p {
	margin: 0 0 1.5em;
	break-inside: avoid;
	/* Lyrics may be Hebrew or English, and <br> starts a new bidi paragraph — so
	   each line picks up its own direction and its punctuation stays put. */
	unicode-bidi: plaintext;
	text-align: start;
}

.lyrics p:last-child { margin-bottom: 0; }

/* A chorus can be marked in the editor with the "chorus" class; italics read as
   the bridge. Both are optional — plain paragraphs are the default. */
.lyrics .chorus { color: var(--accent-ink); }
.lyrics em,
.lyrics i {
	font-style: italic;
	color: var(--muted);
}

.credits {
	columns: 2;
	column-gap: clamp(28px, 3cqi, 48px);
}

.credits__row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	border-bottom: 1px solid var(--hair-soft);
	break-inside: avoid;
}

.credits__row:last-child { border-bottom: 0; }

.credits__row--wide { justify-content: flex-start; }

.credits dt {
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--faint);
}

.credits dd {
	font-weight: 500;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ink-3);
	text-align: left;
	unicode-bidi: plaintext;
}

.credits__row--wide dd { text-align: right; }

/* The communiqué opens with a full-width lead line, which leaves the far side
   of that row empty — that is where the document download parks. */
.press-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 14px clamp(20px, 2.4cqi, 36px);
	margin-bottom: clamp(14px, 1.6cqi, 22px);
}

.press-head .press-lead { flex: 1 1 min(100%, 32ch); }

.press-head .press-lead p:last-child { margin-bottom: 0; }

.press-dl {
	flex: 0 0 auto;
	margin-inline-start: auto;
}

.press-lead p {
	margin: 0 0 .9em;
	font-weight: 500;
	font-size: clamp(18px, 1.75cqi, 23px);
	line-height: 1.45;
	color: var(--ink);
	text-wrap: pretty;
}

.press-body {
	columns: 2;
	column-gap: clamp(24px, 2.6cqi, 40px);
	font-size: clamp(14.5px, 1.25cqi, 16px);
	line-height: 1.75;
	color: #4A453F;
}

.press-body p {
	margin: 0 0 .9em;
	text-wrap: pretty;
	break-inside: avoid;
}

.press-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- song: video */

.video {
	position: relative;
	background: var(--paper-2);
}

.video__trigger {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 52%;
}

.video__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(30, 28, 25, .26) 0%, rgba(30, 28, 25, .04) 44%, rgba(30, 28, 25, 0) 72%);
}

.video__play {
	position: absolute;
	top: 50%;
	inset-inline-start: 50%;
	transform: translate(50%, -50%);
	width: clamp(56px, 6cqi, 84px);
	height: clamp(56px, 6cqi, 84px);
	border-radius: 50%;
	background: rgba(251, 249, 245, .93);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 34px -10px rgba(30, 28, 25, .42);
	transition: transform 220ms var(--ease-2), background-color 220ms ease-out;
}

.video__trigger:hover .video__play {
	transform: translate(50%, -50%) scale(1.06);
	background: #fff;
}

.video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.video__caption {
	margin-top: 12px;
	font-weight: 500;
	font-size: clamp(14px, 1.25cqi, 15.5px);
	line-height: 1.5;
	color: var(--muted);
}

.video__fallback {
	display: inline-block;
	margin-top: 10px;
	text-decoration: underline;
}

.song-video-full {
	padding: clamp(28px, 4cqi, 64px) var(--pad-x);
}

/* --------------------------------------------------------- song: press assets */

.assets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 190px));
	justify-content: start;
	gap: clamp(12px, 1.4cqi, 20px);
}

.asset { margin: 0; }

.asset__frame {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--hair);
}

.asset__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.asset__cap {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.asset__name {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ink-3);
}

.asset__dl {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10.5px;
	line-height: 1;
	color: var(--faint-2);
}

.asset__dl:hover { color: var(--accent-ink); }

/* --------------------------------------------------------- generic page */

/* Centred: pinned to the start edge, a 74ch measure leaves half a desktop
   screen empty beside it and reads as a layout bug rather than a document. */
.page {
	margin-inline: auto;
	padding: clamp(34px, 5cqi, 78px) var(--pad-x) clamp(44px, 6cqi, 96px);
	max-width: calc(74ch + var(--pad-x) * 2);
}

.page__title {
	font-weight: 700;
	font-size: clamp(30px, 4cqi, 54px);
	line-height: 1.1;
	color: var(--ink);
	text-wrap: balance;
}

.page__meta {
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 1;
	letter-spacing: .04em;
	color: var(--faint);
}

.page__body {
	margin-top: clamp(26px, 3cqi, 42px);
	font-size: clamp(15px, 1.3cqi, 16.5px);
	line-height: 1.85;
	color: #4A453F;
}

.page__body h2 {
	margin: clamp(30px, 3.4cqi, 46px) 0 12px;
	font-weight: 700;
	font-size: clamp(17px, 1.6cqi, 21px);
	line-height: 1.3;
	color: var(--ink);
	text-wrap: pretty;
}

.page__body h2:first-child { margin-top: 0; }

.page__body h3 {
	margin: clamp(20px, 2.2cqi, 28px) 0 8px;
	font-weight: 600;
	font-size: clamp(15px, 1.35cqi, 17px);
	line-height: 1.4;
	color: var(--ink-3);
}

.page__body p { margin: 0 0 1em; text-wrap: pretty; }

/* The global reset strips list styling, so prose lists put it back. */
.page__body ul,
.page__body ol {
	margin: 0 0 1em;
	padding-inline-start: 1.3em;
	list-style: disc;
}

.page__body ol { list-style: decimal; }
.page__body li { margin-bottom: .5em; }
.page__body li:last-child { margin-bottom: 0; }

.page__body strong { font-weight: 600; color: var(--ink-2); }

.page__body a {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--faint-3);
}

.page__body a:hover { text-decoration-color: currentColor; }

.page__body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .88em;
	unicode-bidi: isolate;
	direction: ltr;
	background: var(--paper-2);
	padding: 1px 5px;
}

.page__body > *:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- album page */

.album-page {
	display: flex;
	flex-direction: column;
	gap: clamp(34px, 3.8cqi, 58px);
	padding: clamp(26px, 3cqi, 46px) var(--pad-x) clamp(34px, 3.4cqi, 52px);
}

.album-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: clamp(22px, 3cqi, 44px);
}

.album-hero__sleeve {
	flex: 0 0 auto;
	width: clamp(208px, 21cqi, 304px);
	margin: 0;
}

.album-hero__sleeve img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--paper-2);
	box-shadow: 0 0 0 1px var(--hair), 0 24px 54px -20px rgba(35, 33, 30, .36);
}

.album-hero__text {
	flex: 1 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.album-hero__title {
	font-weight: 800;
	font-size: clamp(40px, 5cqi, 74px);
	line-height: 1.02;
	color: var(--ink);
	text-wrap: pretty;
	unicode-bidi: plaintext;
	text-align: right;
}

.album-hero__artist {
	margin-top: clamp(9px, 1.1cqi, 15px);
	font-weight: 500;
	font-size: clamp(17px, 1.6cqi, 24px);
	line-height: 1.25;
	letter-spacing: .02em;
	color: var(--muted);
	unicode-bidi: plaintext;
	text-align: right;
}

.album-hero__text .linkrow { margin-top: clamp(18px, 2.2cqi, 28px); }

.album-hero__about {
	margin-top: clamp(20px, 2.4cqi, 30px);
	max-width: 62ch;
	font-size: clamp(16.5px, 1.35cqi, 18px);
	line-height: 1.7;
}

/* Tracklist and lyrics sit side by side on desktop — in RTL the first child is
   the right-hand column, so the lyrics box lands on the left. Below 1024 they
   wrap and the lyrics fall underneath. */
.album-body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(24px, 3cqi, 52px);
}

.tracks {
	flex: 1 1 clamp(300px, 42cqi, 620px);
	min-width: 0;
	max-width: 880px;
}

.album-lyrics {
	flex: 1 1 clamp(260px, 26cqi, 400px);
	min-width: 0;
	position: sticky;
	top: clamp(16px, 2cqi, 28px);
	max-height: calc(100vh - clamp(32px, 4cqi, 56px));
	overflow-y: auto;
	scrollbar-width: none;
	padding: clamp(18px, 2cqi, 28px) clamp(16px, 1.7cqi, 24px);
	background: var(--card);
	border: 1px solid var(--hair);
	box-shadow: 0 18px 50px -28px rgba(35, 33, 30, .30);
}

.album-lyrics::-webkit-scrollbar { width: 0; height: 0; }

.album-lyrics__title {
	font-weight: 700;
	font-size: clamp(13px, 1.1cqi, 14px);
	line-height: 1;
	letter-spacing: .18em;
	color: var(--muted);
	padding-bottom: clamp(9px, 1cqi, 13px);
	margin-bottom: clamp(14px, 1.6cqi, 20px);
	border-bottom: 1px solid var(--hair);
}

.album-lyrics__panel.is-hidden { display: none; }

.album-lyrics__track {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: clamp(12px, 1.4cqi, 18px);
}

.album-lyrics__track .num {
	font-size: clamp(13px, 1.05cqi, 14px);
	color: var(--muted-3);
}

.album-lyrics__name {
	font-weight: 600;
	font-size: clamp(16px, 1.35cqi, 19px);
	line-height: 1.3;
	color: var(--ink);
	unicode-bidi: plaintext;
	text-align: right;
	text-wrap: pretty;
}

.lyrics--album {
	columns: 1;
	font-size: clamp(15px, 1.25cqi, 16.5px);
}

/* Rows that drive the lyrics panel are buttons — reset the button box so they
   keep the designed grid, and mark the open one. */
button.track__inner {
	width: 100%;
	text-align: inherit;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
}

.track--lyrics .track__inner {
	cursor: pointer;
	transition: background-color 180ms ease-out;
	padding-inline: 10px;
	margin-inline: -10px;
}

.track--lyrics .track__inner:hover {
	background-color: color-mix(in oklab, var(--accent) 7%, transparent);
}

.track--lyrics.is-open .track__inner {
	background-color: color-mix(in oklab, var(--accent) 10%, transparent);
}

.track--lyrics.is-open .track__name {
	font-weight: 700;
	color: var(--ink);
}

/* When a row both carries lyrics and has a song page the two actions have to
   stay separable: the row selects the lyrics, and the arrow at the end of the
   row is its own link to the song page. */
.track__inner { flex: 1 1 auto; min-width: 0; }

.track__go {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 0 10px;
	color: var(--accent-ink);
	transition: color 180ms ease-out, transform 180ms var(--ease);
}

.track__go:hover {
	color: var(--accent);
	transform: translateX(-3px);
}

.tracks__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: clamp(9px, 1cqi, 13px);
	border-bottom: 1px solid var(--line);
}

.tracks__title {
	font-weight: 700;
	font-size: clamp(13px, 1.1cqi, 14px);
	line-height: 1;
	letter-spacing: .18em;
	color: var(--ink-4);
}

.tracks__meta {
	font-size: clamp(13px, 1.1cqi, 14px);
	line-height: 1;
	letter-spacing: .08em;
	color: var(--muted);
	white-space: nowrap;
}

.track {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--hair);
}

.track__inner {
	display: grid;
	grid-template-columns: 2.7em minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(10px, 1.4cqi, 20px);
	min-height: 46px;
	padding: clamp(11px, 1.15cqi, 15px) 0;
}

.track--linked .track__inner {
	padding-inline: 10px;
	margin-inline: -10px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	text-decoration-color: color-mix(in oklab, var(--accent) 60%, #E4DED4);
	transition: background-color 180ms ease-out, text-decoration-color 180ms ease-out;
}

.track--linked .track__inner:hover {
	background-color: color-mix(in oklab, var(--accent) 9%, transparent);
	text-decoration-color: var(--accent);
}

.track__num {
	font-size: clamp(15px, 1.15cqi, 16px);
	line-height: 1;
	letter-spacing: .04em;
	color: var(--muted-3);
	text-align: right;
}

.track__title {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 9px;
}

.track__name {
	min-width: 0;
	font-weight: 500;
	font-size: clamp(17px, 1.4cqi, 20px);
	line-height: 1.35;
	color: var(--ink-2);
	text-wrap: pretty;
	unicode-bidi: plaintext;
	text-align: right;
}

.track--linked .track__name {
	font-weight: 600;
	color: var(--ink);
}

.track__arrow {
	flex: 0 0 auto;
	font-size: 15px;
	line-height: 1;
	color: var(--accent-ink);
}

.track__dur {
	font-size: clamp(15px, 1.15cqi, 16px);
	line-height: 1;
	letter-spacing: .03em;
	color: var(--muted);
	text-align: left;
	min-width: 3.8em;
	white-space: nowrap;
}

.tracks__note {
	margin-top: clamp(12px, 1.3cqi, 16px);
	font-size: clamp(14px, 1.15cqi, 15px);
	line-height: 1.5;
	color: var(--muted);
}

/* --------------------------------------------------------- index fallback */

.simple-list { display: flex; flex-direction: column; gap: 28px; }
.simple-list__title { font-weight: 700; font-size: clamp(20px, 2cqi, 28px); line-height: 1.25; }

/* --------------------------------------------------------- tablet */

@media (max-width: 1023px) {

	.song-hero {
		padding-block-start: clamp(52px, 9cqi, 72px);
	}

	.song-hero__media { height: clamp(380px, 62vh, 640px); }

	.song-hero__scrim {
		background: linear-gradient(to top,
			rgba(247, 244, 239, .98) 0%,
			rgba(247, 244, 239, .96) 46%,
			rgba(247, 244, 239, .72) 68%,
			rgba(247, 244, 239, .18) 88%,
			rgba(247, 244, 239, .04) 100%);
	}

	.song-hero__inner { align-items: flex-start; }

	.song-lead { flex: 1 1 100%; }

	.song-pane {
		flex: 1 1 100%;
		margin-top: clamp(26px, 3cqi, 36px);
	}

	.pane { height: auto; }
	.pane__body { overflow-y: visible; }

	.sleeve { flex: 0 0 260px; }

	.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.album__sleeve { flex: 0 0 150px; }

	.tracks,
	.album-lyrics { flex: 1 1 100%; }

	.album-lyrics {
		position: static;
		max-height: none;
		overflow-y: visible;
	}
}

/* --------------------------------------------------------- mobile */

@media (max-width: 767px) {

	.site-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.single-song .site-header { position: static; }
	.single-song .song-hero { padding-block-start: clamp(20px, 5cqi, 32px); }
	.single-song.is-landing .song-hero { padding-block-start: clamp(20px, 5cqi, 32px); }

	.spotlight__sleeve { flex: 1 1 100%; max-width: none; }
	.spotlight__text { flex: 1 1 100%; }

	.albums { grid-template-columns: 1fr; }
	.album__sleeve { flex: 0 0 112px; }

	.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* The song page has to hand over the fold. Everything from the title down to
	   the streaming row used to end below it, so the pane's tab strip never
	   showed and nobody who did not think to scroll ever found מילים, קרדיטים or
	   the קומוניקט. The rules below give back roughly 200px between the title
	   and the strip — enough for it to peek on the ~700px a phone browser
	   actually leaves once its own bars are drawn. */
	.song-lead__row {
		margin-top: 16px;
		gap: 16px;
	}

	/* The cover stops filling the width and pins to the right instead, holding
	   the same axis as the title above it — a centred one at this size reads as
	   an image that came out small rather than as a deliberate crop. */
	.sleeve {
		flex: 0 0 auto;
		width: min(72%, 250px);
		margin-inline-start: auto;
	}

	/* The pane already sits a hero gap below the lead; its own top margin only
	   doubled that into a strip of bare paper. */
	.song-pane { margin-top: 0; }

	.player {
		gap: 12px;
		padding: 11px;
	}

	.player__play {
		width: 44px;
		height: 44px;
	}

	.player__vol { display: none; }

	/* Three services on one row. The label in front of them goes — the icons and
	   the names say what the row is, and the group keeps the label for screen
	   readers — and each pill stacks its icon over its name, which is the only
	   arrangement that fits Spotify, Apple Music and YouTube Music side by side
	   from 360px up without shortening or truncating any of them. Scoped to the
	   song page: the album row carries Bandcamp as a fourth pill and does not
	   fit on one line at any size worth setting. */
	.song-actions .linkrow {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.song-actions .linkrow__label { display: none; }

	.song-actions .pill {
		flex: 1 1 0;
		min-width: 0;
		flex-direction: column;
		gap: 5px;
		padding: 9px 6px;
	}

	.song-actions .pill__label { font-size: 12px; }

	.lyrics,
	.credits,
	.press-body { columns: 1; }

	/* Too narrow to sit beside the lead, so it stops pretending to: the button
	   takes the full width under it and reads as the panel's attachment. Once it
	   is stacked it belongs to the title above it, not to the body below — hence
	   the tight row gap against the generous margin. */
	.press-head {
		gap: 10px;
		margin-bottom: 26px;
	}

	.press-dl {
		flex: 1 1 100%;
		margin-inline-start: 0;
		justify-content: center;
	}

	.pane__tab { padding: 13px 0 11px; font-size: 13.5px; }

	.guest__thumb { flex: 0 0 56px; }

	.guest__actions {
		flex: 1 1 100%;
		margin-inline-start: 0;
		margin-top: 12px;
		gap: 8px;
		padding-inline-start: calc(56px + clamp(14px, 1.6cqi, 20px));
	}

	.guest__actions .pill__label { display: none; }

	.site-footer { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------- motion */

@keyframes riseIn {
	from { opacity: 0; transform: translateX(28px); }
	to { opacity: 1; transform: none; }
}

@keyframes sleeveIn {
	from { opacity: 0; transform: translateX(48px) scale(.965); }
	to { opacity: 1; transform: none; }
}

@keyframes coverIn {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@keyframes rowIn {
	from { opacity: 0; transform: translateX(14px); }
	to { opacity: 1; transform: none; }
}

@keyframes spinArc { to { transform: rotate(360deg); } }

.is-ready .song-lead .eyebrow { animation: riseIn 620ms var(--ease-2) 60ms both; }
.is-ready .song-title { animation: riseIn 780ms var(--ease-2) 120ms both; }
.is-ready .song-title-en { animation: riseIn 780ms var(--ease-2) 170ms both; }
.is-ready .song-artist { animation: riseIn 780ms var(--ease-2) 200ms both; }
.is-ready .song-album { animation: riseIn 780ms var(--ease-2) 230ms both; }
.is-ready .sleeve { animation: sleeveIn 900ms var(--ease-2) 180ms both; }
.is-ready .player { animation: riseIn 820ms var(--ease-2) 320ms both; }

.is-ready .spotlight__sleeve { animation: sleeveIn 900ms var(--ease-2) 140ms both; }
.is-ready .spotlight .eyebrow { animation: riseIn 620ms var(--ease-2) 60ms both; }
.is-ready .spotlight__title { animation: riseIn 780ms var(--ease-2) 120ms both; }
.is-ready .spotlight__en { animation: riseIn 780ms var(--ease-2) 170ms both; }
.is-ready .spotlight__artist { animation: riseIn 780ms var(--ease-2) 220ms both; }
.is-ready .spotlight__actions { animation: riseIn 820ms var(--ease-2) 300ms both; }

.is-ready .album-hero__sleeve { animation: sleeveIn 820ms var(--ease) 80ms both; }
.is-ready .album-hero .eyebrow { animation: riseIn 620ms var(--ease) 60ms both; }
.is-ready .album-hero__title { animation: riseIn 760ms var(--ease) 130ms both; }
.is-ready .album-hero__artist { animation: riseIn 760ms var(--ease) 200ms both; }
.is-ready .album-hero__text .linkrow { animation: riseIn 760ms var(--ease) 270ms both; }
.is-ready .album-hero__about { animation: riseIn 760ms var(--ease) 330ms both; }

.is-ready .track { animation: rowIn 480ms var(--ease) both; }
.is-ready .track:nth-child(1) { animation-delay: .30s; }
.is-ready .track:nth-child(2) { animation-delay: .34s; }
.is-ready .track:nth-child(3) { animation-delay: .38s; }
.is-ready .track:nth-child(4) { animation-delay: .42s; }
.is-ready .track:nth-child(5) { animation-delay: .46s; }
.is-ready .track:nth-child(6) { animation-delay: .50s; }
.is-ready .track:nth-child(7) { animation-delay: .54s; }
.is-ready .track:nth-child(8) { animation-delay: .58s; }
.is-ready .track:nth-child(9) { animation-delay: .62s; }
.is-ready .track:nth-child(10) { animation-delay: .66s; }
.is-ready .track:nth-child(n+11) { animation-delay: .70s; }

/* Staggered reveal is armed by JS once the grid scrolls into view. */
.cards[data-stagger].is-armed > .card { opacity: 0; }
.cards[data-stagger].is-revealed > .card {
	opacity: 1;
	animation: coverIn 520ms var(--ease) both;
	animation-delay: calc(var(--i, 0) * 50ms);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.cards[data-stagger].is-armed > .card { opacity: 1; }

	.spotlight__sleeve:hover .spotlight__frame,
	.album:hover .album__sleeve,
	.card:hover .card__sleeve,
	.video__trigger:hover .video__play { transform: none; }
}