/* Records — Lunatika Records. Archivio (.rec) + scheda disco (.rec-d).
   Portato dal demo (RecordsArchive.jsx / RecordDetail.jsx / records.css) via
   ALIAS LAYER: i token risolvono dal palette del tema (tokens-demo-alias.css /
   core.css), nessun colore ri-tradotto.

   Differenze dal demo (vincoli del blocco):
   - niente font mono importato: i numeri/durate tracce usano --font-accent (Syne);
   - copertina: varianti "artwork" (immagine reale) e "type" (ripiego tipografico);
     le card «in evidenza» origine/icona sono trattamenti di LAYOUT (badge/eyebrow),
     la copertina resta artwork/type;
   - link streaming = componente globale .lf-streaming-link (components.css), non
     .rec-stream; i glifi play sono decorativi (aria-hidden), nessun audio in scope;
   - reveal-on-scroll = progressive enhancement, gated dietro html.lf-js. */

/* ============================================================
   COVER SYSTEM — quadrata, costruita di brand
   ============================================================ */
.rec-cover {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--lf-notte);
	border: 1px solid var(--lf-card-border-strong);
	isolation: isolate;
	container-type: inline-size;
	--pad: clamp(14px, 9%, 30px);
}
.rec-cover-photo { position: absolute; inset: 0; z-index: 0; }
.rec-cover-photo img { width: 100%; height: 100%; object-fit: cover; }
.rec-cover-ink { position: absolute; inset: 0; z-index: 1; }
.rec-cover-face {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column;
	padding: var(--pad);
	color: var(--lf-on-accent);
}

/* grana carta sulle copertine tipografiche */
.rec-cover--type::after {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	opacity: 0.5;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* pezzi tipografici condivisi */
.rec-cover-kicker {
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: 0.2em; text-transform: uppercase;
	font-size: clamp(7px, 1.6cqw, 10px);
	color: var(--lf-rame-light);
}
.rec-cover-title {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--lf-on-accent);
	margin: 0;
}
.rec-cover-sub {
	font-family: var(--font-display);
	font-style: italic;
	color: rgba(245, 239, 230, 0.82);
	line-height: 1.2;
}
.rec-cover-rule { display: block; width: 26px; height: 2px; background: var(--lf-rame); }

/* ---- variante: TYPE (pura tipografica, scura in entrambi i temi) ---- */
.rec-cover--type {
	background:
		radial-gradient(120% 80% at 18% 8%, rgba(139,34,82,0.55), transparent 60%),
		linear-gradient(160deg, #2a1422, #140d16 70%);
}
/* "Disco stilizzato" INTEGRATO nel ripiego: solchi vinile filigrana dietro al
   testo (mascherati a cerchio) → la cover senza immagine legge come un disco,
   senza un secondo placeholder (niente doppione). */
.rec-cover--type::before {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: repeating-radial-gradient(circle at 50% 50%, transparent 0 6.5%, rgba(var(--accent-2-rgb), 0.05) 6.5% 7.2%);
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 70%);
	mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 70%);
}
.rec-cover--type .rec-cover-face { justify-content: space-between; }
.rec-cover--type .rec-cover-title {
	font-size: clamp(20px, 7.5cqw, 60px);
	margin-top: auto;
}
.rec-cover--type .rec-cover-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* ---- variante: ARTWORK (copertina reale, illustrazione intera su fondo chiaro) ---- */
.rec-cover--artwork {
	background: #faf8f4;
	border-color: rgba(196, 149, 106, 0.4);
}
.rec-cover--artwork .rec-cover-photo { position: absolute; inset: 0; z-index: 0; }
.rec-cover--artwork .rec-cover-photo img {
	width: 100%; height: 100%;
	object-fit: contain;          /* l'illustrazione intera, niente crop */
	object-position: center;
}

/* size hint */
.rec-cover--sm { border-radius: var(--r-xs); }
.rec-cover--xl { border-radius: var(--r-md); }

/* ============================================================
   ARCHIVIO (.rec)
   ============================================================ */
.rec { max-width: 1240px; margin: 0 auto; padding: 96px clamp(20px, 6vw, 64px) 120px; }

.rec-hero { padding: clamp(28px, 6vw, 64px) 0 clamp(28px, 5vw, 52px); }
.rec-hero-eyebrow {
	font-family: var(--font-body); font-size: 11px; font-weight: 700;
	letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-2);
	margin-bottom: 18px;
}
.rec-hero-h {
	font-family: var(--font-display); font-weight: 400;
	font-size: clamp(46px, 9vw, 104px); line-height: 0.98; letter-spacing: -0.02em;
	color: var(--fg); margin: 0;
}
.rec-hero-h em { font-style: italic; color: var(--accent-2-hover); }
.rec-hero-stand {
	font-family: var(--font-display); font-style: italic; font-weight: 400;
	font-size: clamp(18px, 2.4vw, 26px); line-height: 1.45;
	color: var(--fg-dim); max-width: 640px; margin: 26px 0 0;
	text-wrap: pretty;
}
.rec-hero-meta {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin-top: 26px;
	font-family: var(--font-body); font-size: 13px; color: var(--fg-muted);
}
.rec-hero-meta strong { color: var(--fg); font-weight: 600; }
.rec-hero-meta .dot { color: var(--accent-2); opacity: 0.6; }

/* ---- IN EVIDENZA — origine + icona ---- */
.rec-feat {
	display: grid; grid-template-columns: 1.62fr 1fr; gap: clamp(18px, 2.4vw, 30px);
	margin-bottom: clamp(40px, 6vw, 72px);
}
/* Fascia con UNA sola card (manca origine o icona): niente colonna vuota a fianco.
   La card resta nelle proporzioni del mockup ed è centrata → equilibrata, mai una
   copertina gigante che galleggia in un vuoto. */
.rec-feat--solo { grid-template-columns: 1fr; }
.rec-feat--solo .rec-feat-origin { max-width: 720px; margin-inline: auto; }
.rec-feat--solo .rec-feat-icon { max-width: 380px; margin-inline: auto; }
.rec-feat-origin {
	display: grid; grid-template-columns: 0.92fr 1fr; gap: clamp(20px, 3vw, 40px);
	align-items: center;
	background: linear-gradient(150deg, rgba(139,34,82,0.12), rgba(196,149,106,0.05));
	border: 1px solid var(--lf-card-border-strong);
	border-radius: var(--r-xl);
	padding: clamp(20px, 2.6vw, 36px);
	transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.rec-feat-origin:hover { border-color: rgba(196,149,106,0.45); transform: translateY(-3px); }
.rec-feat-origin-cover { box-shadow: var(--sh-3); border-radius: var(--r-md); }
.rec-feat-badge {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-body); font-size: 10px; font-weight: 700;
	letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-2);
	margin-bottom: 14px;
}
.rec-feat-badge-glyph { font-size: 14px; color: var(--accent-2-hover); }
.rec-feat-title {
	font-family: var(--font-display); font-weight: 500; font-style: italic;
	font-size: clamp(30px, 4vw, 52px); line-height: 1.02; letter-spacing: -0.01em;
	color: var(--fg); margin: 0 0 14px;
}
.rec-feat-blurb {
	font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.6;
	color: var(--fg-muted); margin: 0 0 22px; max-width: 46ch;
}
.rec-feat-foot { display: flex; flex-direction: column; gap: 12px; }
.rec-feat-line {
	font-family: var(--font-body); font-size: 12px; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim);
}
.rec-feat-cta {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--accent-2-hover);
	transition: gap var(--t-base) var(--ease);
}
.rec-feat-origin:hover .rec-feat-cta { gap: 13px; }

.rec-feat-icon {
	display: flex; flex-direction: column;
	background: var(--bg-card); border: 1px solid var(--lf-card-border);
	border-radius: var(--r-xl); padding: clamp(18px, 2vw, 26px);
	transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.rec-feat-icon:hover { border-color: var(--lf-card-border-strong); transform: translateY(-3px); }
.rec-feat-icon-cover { box-shadow: var(--sh-2); border-radius: var(--r-md); margin-bottom: 18px; }
.rec-feat-icon-eyebrow {
	font-family: var(--font-body); font-size: 10px; font-weight: 700;
	letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 8px;
}
.rec-feat-icon-title {
	font-family: var(--font-display); font-weight: 600; font-style: italic;
	font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; color: var(--fg); margin: 0 0 6px;
}
.rec-feat-icon-line {
	font-family: var(--font-body); font-size: 12px; color: var(--fg-muted);
	letter-spacing: 0.04em; margin-bottom: 16px;
}
.rec-feat-icon-cta {
	display: inline-flex; align-items: center; gap: 7px; margin-top: auto;
	font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--accent-2-hover);
	transition: gap var(--t-base) var(--ease);
}
.rec-feat-icon:hover .rec-feat-icon-cta { gap: 12px; }

/* ---- BARRA FILTRI ---- */
.rec-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	flex-wrap: wrap;
	padding: 18px 0; margin-bottom: 8px;
	border-top: 1px solid var(--lf-card-border);
	border-bottom: 1px solid var(--lf-card-border);
	position: sticky; top: 64px; z-index: 20;
	background: rgba(var(--bg-rgb), 0.86); backdrop-filter: blur(12px);
}
.rec-bar-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rec-select { position: relative; display: inline-flex; align-items: center; }
.rec-select-label {
	position: absolute; left: 14px; top: -8px;
	font-family: var(--font-body); font-size: 8.5px; font-weight: 700;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2);
	background: var(--bg); padding: 0 6px; pointer-events: none;
}
.rec-select select {
	appearance: none; -webkit-appearance: none;
	font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--fg);
	background: transparent; border: 1px solid var(--lf-card-border-strong);
	border-radius: var(--r-pill); padding: 11px 38px 11px 18px; cursor: pointer;
	transition: border-color var(--t-base) var(--ease);
}
.rec-select select:hover { border-color: var(--accent-2); }
.rec-select select:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.rec-select > svg { position: absolute; right: 14px; pointer-events: none; color: var(--accent-2); }
.rec-select select option { background: var(--bg-card); color: var(--fg); }
.rec-bar-label-note {
	font-family: var(--font-body); font-size: 12px; color: var(--fg-muted);
	letter-spacing: 0.02em;
}
.rec-bar-label-note strong { color: var(--fg); font-weight: 600; }

.rec-bar-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rec-bar-apply {
	font-family: var(--font-body); font-size: 12px; font-weight: 600;
	color: var(--lf-on-accent); background: var(--accent); border: 1px solid var(--accent);
	padding: 11px 20px; border-radius: var(--r-pill); cursor: pointer;
	transition: background-color var(--t-base) var(--ease);
}
.rec-bar-apply:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.rec-bar-apply:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.rec-seg {
	display: inline-flex; gap: 2px; padding: 3px;
	background: rgba(var(--fg-rgb), 0.05); border: 1px solid var(--lf-card-border);
	border-radius: var(--r-pill);
}
.rec-seg a {
	font-family: var(--font-body); font-size: 12px; font-weight: 600;
	color: var(--fg-muted); background: transparent; border: none;
	padding: 7px 15px; border-radius: var(--r-pill); cursor: pointer;
	transition: color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.rec-seg a:hover { color: var(--fg); }
.rec-seg a.on { background: var(--accent); color: var(--lf-on-accent); }

/* ---- CONTEGGIO ---- */
.rec-count {
	display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
	margin: 26px 0 22px;
}
.rec-count strong {
	font-family: var(--font-display); font-size: 32px; font-weight: 600; color: var(--accent-2-hover);
	line-height: 1;
}
.rec-count > span {
	font-family: var(--font-body); font-size: 13px; color: var(--fg-muted);
	letter-spacing: 0.04em;
}
.rec-count-clear {
	margin-left: auto;
	font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--accent-2);
	border-bottom: 1px solid transparent;
}
.rec-count-clear:hover { border-bottom-color: var(--accent-2); }

/* ---- GRIGLIA ---- */
.rec-grid {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.4vw, 34px) clamp(16px, 1.8vw, 24px);
}
.rec-card { display: flex; flex-direction: column; }
.rec-card-cover { position: relative; border-radius: var(--r-sm); }
.rec-card .rec-cover {
	box-shadow: var(--sh-2);
	transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.rec-card:hover .rec-cover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.rec-card-play {
	position: absolute; right: 12px; bottom: 12px; z-index: 3;
	width: 40px; height: 40px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--accent); color: var(--lf-on-accent);
	box-shadow: var(--sh-2);
	opacity: 0; transform: translateY(8px) scale(0.9);
	transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.rec-card:hover .rec-card-play { opacity: 1; transform: translateY(0) scale(1); }
.rec-card-body { padding: 14px 2px 0; }
.rec-card-top {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 5px;
}
.rec-card-type {
	font-family: var(--font-body); font-size: 9.5px; font-weight: 700;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2);
}
.rec-card-year { font-family: var(--font-body); font-size: 12px; color: var(--fg-muted); }
.rec-card-title {
	font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.12;
	color: var(--fg); margin: 0 0 3px; transition: color var(--t-base) var(--ease);
}
.rec-card:hover .rec-card-title { color: var(--accent-2-hover); }
.rec-card-artist { font-family: var(--font-body); font-size: 13px; color: var(--fg-muted); }
.rec-card.is-icon .rec-card-title { font-style: italic; }

/* empty + nota di chiusura */
.rec-empty {
	text-align: center; padding: clamp(40px, 7vw, 72px) 20px;
	border: 1px dashed var(--lf-card-border-strong); border-radius: var(--r-xl);
}
.rec-empty-glyph { font-size: 34px; color: var(--accent-2); display: block; margin-bottom: 14px; }
.rec-empty p { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--fg-muted); margin: 0; }
.rec-empty a { color: var(--accent-2); border-bottom: 1px solid currentColor; }
.rec-foot-note {
	margin-top: clamp(36px, 5vw, 60px);
	font-family: var(--font-display); font-style: italic; font-size: 15px;
	color: var(--fg-muted); max-width: 60ch; text-wrap: pretty;
}

/* ============================================================
   REVEAL (progressive enhancement: senza JS tutto è visibile)
   ============================================================ */
html.lf-js .rec .rv,
html.lf-js .rec-d .rv {
	opacity: 0; transform: translateY(18px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
html.lf-js .rec .rv.vis,
html.lf-js .rec-d .rv.vis { opacity: 1; transform: none; }
.rec .rv-d1, .rec-d .rv-d1 { transition-delay: 0.08s; }
.rec .rv-d2, .rec-d .rv-d2 { transition-delay: 0.16s; }
.rec .rv-d3, .rec-d .rv-d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
	html.lf-js .rec .rv,
	html.lf-js .rec-d .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   RESPONSIVE — archivio
   ============================================================ */
@media (max-width: 1080px) {
	.rec-grid { grid-template-columns: repeat(3, 1fr); }
	.rec-feat { grid-template-columns: 1fr; }
	.rec-feat-icon { flex-direction: row; align-items: center; gap: 20px; }
	.rec-feat-icon-cover { width: 200px; flex: none; margin-bottom: 0; }
	.rec-feat-icon-body { flex: 1; }
}
@media (max-width: 720px) {
	.rec-grid { grid-template-columns: repeat(2, 1fr); }
	.rec-feat-origin { grid-template-columns: 1fr; }
	.rec-feat-origin-cover { max-width: 320px; }
	.rec-bar { position: static; }
	.rec-bar-tools { width: 100%; }
}
@media (max-width: 440px) {
	.rec-feat-icon { flex-direction: column; align-items: stretch; }
	.rec-feat-icon-cover { width: 100%; }
}

/* ============================================================
   LIGHT THEME — archivio (le copertine restano scure di proposito)
   ============================================================ */
[data-theme="light"] .rec-bar { background: rgba(var(--bg-rgb), 0.9); }
[data-theme="light"] .rec-select-label { background: var(--bg); }
[data-theme="light"] .rec-seg a.on { background: var(--lf-borgogna-soft); }
[data-theme="light"] .rec-feat-origin {
	background: linear-gradient(150deg, rgba(110,28,65,0.07), rgba(143,98,64,0.05));
}
[data-theme="light"] .rec-hero-h em,
[data-theme="light"] .rec-feat-icon-title,
[data-theme="light"] .rec-card:hover .rec-card-title { color: var(--lf-borgogna-soft); }
/* Light: card senza ombra (su carta pesa). In dark resta com'è; l'hover dà già il lift. */
[data-theme="light"] .rec-card .rec-cover,
[data-theme="light"] .rec-card:hover .rec-cover,
[data-theme="light"] .rec-d-more-card .rec-cover,
[data-theme="light"] .rec-d-more-card:hover .rec-cover { box-shadow: none; }

/* ============================================================
   SCHEDA (.rec-d)
   ============================================================ */
.rec-d { max-width: 1080px; margin: 0 auto; padding: 96px clamp(20px, 6vw, 64px) 120px; }

.rec-d-crumb {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em;
	color: var(--fg-muted); padding: clamp(20px, 4vw, 40px) 0 clamp(20px, 3vw, 32px);
}
.rec-d-crumb a { color: var(--accent-2); transition: color var(--t-base) var(--ease); }
.rec-d-crumb a:hover { color: var(--accent-2-hover); }
.rec-d-crumb span[aria-hidden] { opacity: 0.4; }

/* ---- HERO ---- */
.rec-d-hero {
	display: grid; grid-template-columns: minmax(0, 0.82fr) 1fr;
	gap: clamp(28px, 5vw, 64px); align-items: center;
}
.rec-d-hero-cover { position: relative; }
.rec-d-hero-cover .rec-cover { box-shadow: var(--sh-3); border-radius: var(--r-md); }
.rec-d-origin-tag {
	position: absolute; top: -12px; left: -12px; z-index: 4;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 16px; border-radius: var(--r-pill);
	background: var(--accent); color: var(--lf-on-accent);
	font-family: var(--font-body); font-size: 10px; font-weight: 700;
	letter-spacing: 0.2em; text-transform: uppercase;
	box-shadow: var(--sh-2);
}
.rec-d-origin-tag-glyph { font-size: 13px; }

.rec-d-eyebrow {
	font-family: var(--font-body); font-size: 11px; font-weight: 700;
	letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-2);
	margin-bottom: 16px;
}
.rec-d-title {
	font-family: var(--font-display); font-weight: 500; font-style: italic;
	font-size: clamp(40px, 6vw, 76px); line-height: 0.98; letter-spacing: -0.02em;
	color: var(--fg); margin: 0 0 16px; text-wrap: balance;
}
.rec-d-artists {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	font-family: var(--font-display); font-size: clamp(18px, 2vw, 23px);
	margin-bottom: 22px; color: var(--fg);
}
.rec-d-artists a { color: var(--accent-2-hover); border-bottom: 1px solid transparent; transition: border-color var(--t-base) var(--ease); }
.rec-d-artists a:hover { border-bottom-color: currentColor; }
.rec-d-artists .sep { color: var(--fg-muted); } /* no opacity su muted (AA) */
.rec-d-blurb {
	font-family: var(--font-body); font-weight: 300; font-size: clamp(15px, 1.7vw, 18px);
	line-height: 1.6; color: var(--fg-muted); margin: 0 0 28px; max-width: 52ch; text-wrap: pretty;
}
.rec-d-meta {
	display: grid; grid-template-columns: repeat(2, auto); gap: 16px 40px;
	justify-content: start;
	padding: 22px 0; margin: 0 0 26px;
	border-top: 1px solid var(--lf-card-border); border-bottom: 1px solid var(--lf-card-border);
}
.rec-d-meta dt {
	font-family: var(--font-body); font-size: 9.5px; font-weight: 700;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 4px;
}
.rec-d-meta dd { margin: 0; font-family: var(--font-display); font-size: 18px; color: var(--fg); }

.rec-d-streams { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- ORIGINE manifesto ---- */
.rec-d-manifesto {
	text-align: center; max-width: 720px; margin: clamp(44px, 7vw, 80px) auto;
	padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 40px);
	border: 1px solid rgba(196,149,106,0.3); border-radius: var(--r-xl);
	background: linear-gradient(160deg, rgba(139,34,82,0.08), rgba(196,149,106,0.03));
}
.rec-d-manifesto-glyph { font-size: 30px; color: var(--accent-2-hover); display: block; margin-bottom: 16px; }
.rec-d-manifesto-kicker {
	font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
	letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 16px;
}
.rec-d-manifesto-text {
	font-family: var(--font-display); font-style: italic; font-weight: 400;
	font-size: clamp(19px, 2.4vw, 27px); line-height: 1.5; color: var(--fg);
	margin: 0; text-wrap: pretty;
}

/* ---- GRID: tracklist + sidebar ---- */
.rec-d-grid {
	display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(28px, 4vw, 56px);
	margin-top: clamp(40px, 6vw, 72px);
}
/* Solo tracklist O solo sidebar: colonna unica centrata (niente vuoto a fianco). */
.rec-d-grid--single { grid-template-columns: minmax(0, 720px); justify-content: center; }
.rec-d-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.rec-d-sec-title {
	font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px);
	color: var(--fg); margin: 0;
}
.rec-d-sec-meta { font-family: var(--font-body); font-size: 12px; color: var(--fg-muted); letter-spacing: 0.04em; }

.rec-d-tracklist { list-style: none; margin: 0; padding: 0; }
.rec-d-track {
	display: grid; grid-template-columns: 28px 36px 1fr auto; align-items: center; gap: 14px;
	padding: 13px 0; border-bottom: 1px solid var(--lf-divider-dark);
}
.rec-d-track:last-child { border-bottom: none; }
.rec-d-track-n {
	font-family: var(--font-accent); font-weight: 800; font-size: 12px;
	font-variant-numeric: tabular-nums; color: var(--fg-muted);
}
.rec-d-track-play {
	width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: rgba(var(--fg-rgb), 0.05); border: 1px solid var(--lf-card-border); color: var(--accent-2);
	transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.rec-d-track:hover .rec-d-track-play { background: var(--accent); border-color: var(--accent); color: var(--lf-on-accent); }
.rec-d-track-title { font-family: var(--font-display); font-size: 19px; color: var(--fg); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rec-d-track-note {
	font-family: var(--font-body); font-style: normal; font-size: 9px; font-weight: 700;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2);
	border: 1px solid var(--lf-card-border-strong); border-radius: var(--r-pill); padding: 2px 9px;
}
.rec-d-track-len {
	font-family: var(--font-accent); font-weight: 800; font-size: 12.5px;
	font-variant-numeric: tabular-nums; color: var(--fg-muted);
}

.rec-d-side { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); }
.rec-d-credit-list { margin: 0; }
.rec-d-credit { padding: 11px 0; border-bottom: 1px solid var(--lf-divider-dark); }
.rec-d-credit:last-child { border-bottom: none; }
.rec-d-credit dt {
	font-family: var(--font-body); font-size: 10px; font-weight: 700;
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 4px;
}
.rec-d-credit dd { margin: 0; font-family: var(--font-display); font-size: 18px; color: var(--fg); line-height: 1.3; }
.rec-d-note p {
	font-family: var(--font-display); font-style: italic; font-size: 16px; line-height: 1.6;
	color: var(--fg-muted); margin: 0 0 0.8em; text-wrap: pretty;
}
.rec-d-note p:last-child { margin-bottom: 0; }

/* ---- ALTRE USCITE ---- */
.rec-d-more { margin-top: clamp(56px, 8vw, 96px); }
.rec-d-more-all {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--accent-2-hover);
	transition: gap var(--t-base) var(--ease);
}
.rec-d-more-all:hover { gap: 12px; }
.rec-d-more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 26px); }
.rec-d-more-card { display: flex; flex-direction: column; }
.rec-d-more-card .rec-cover { box-shadow: var(--sh-2); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.rec-d-more-card:hover .rec-cover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.rec-d-more-info { padding: 12px 2px 0; display: flex; flex-direction: column; gap: 3px; }
.rec-d-more-type { font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); }
.rec-d-more-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--fg); line-height: 1.15; }
.rec-d-more-artist { font-family: var(--font-body); font-size: 12px; color: var(--fg-muted); }

/* ---- scheda responsive ---- */
@media (max-width: 880px) {
	.rec-d-hero { grid-template-columns: 1fr; gap: 28px; }
	.rec-d-hero-cover { max-width: 380px; }
	.rec-d-grid { grid-template-columns: 1fr; }
	.rec-d-more-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.rec-d-meta { grid-template-columns: 1fr 1fr; gap: 14px 20px; }
	.rec-d-track { grid-template-columns: 22px 32px 1fr auto; gap: 10px; }
	.rec-d-track-title { font-size: 16px; }
}

/* ---- scheda light ---- */
[data-theme="light"] .rec-d-manifesto { background: linear-gradient(160deg, rgba(110,28,65,0.06), rgba(143,98,64,0.04)); border-color: rgba(143,98,64,0.3); }
[data-theme="light"] .rec-d-track:hover .rec-d-track-play { background: var(--accent); border-color: var(--accent); }

/* ============================================================
   TESTO — sezione collassabile (chiusa di default)
   ============================================================ */
.rec-d-lyrics-sec { margin-top: clamp(40px, 6vw, 72px); }
.rec-d-lyrics {
	border: 1px solid var(--lf-card-border-strong);
	border-radius: var(--r-lg);
	background: var(--bg-card);
	overflow: hidden;
}
.rec-d-lyrics-sum {
	list-style: none; cursor: pointer; user-select: none;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: clamp(16px, 2.4vw, 22px) clamp(18px, 3vw, 32px);
	transition: background-color var(--t-base) var(--ease);
}
.rec-d-lyrics-sum::-webkit-details-marker { display: none; }
.rec-d-lyrics-sum:hover { background: rgba(var(--accent-2-rgb), 0.05); }
.rec-d-lyrics-sum-main { display: inline-flex; align-items: center; gap: 13px; }
.rec-d-lyrics-glyph { color: var(--accent-2-hover); font-size: 19px; }
.rec-d-lyrics-label {
	font-family: var(--font-display); font-weight: 600;
	font-size: clamp(21px, 2.4vw, 27px); color: var(--fg); line-height: 1;
}
.rec-d-lyrics-toggle {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--font-body); font-size: 12px; font-weight: 600;
	letter-spacing: 0.06em; color: var(--accent-2);
}
.rec-d-lyrics-toggle svg { color: var(--accent-2); transition: transform var(--t-base) var(--ease); }
.rec-d-lyrics[open] .rec-d-lyrics-toggle svg { transform: rotate(180deg); }
.rec-d-lyrics-hide { display: none; }
.rec-d-lyrics[open] .rec-d-lyrics-show { display: none; }
.rec-d-lyrics[open] .rec-d-lyrics-hide { display: inline; }
.rec-d-lyrics-sum:hover .rec-d-lyrics-toggle { color: var(--accent-2-hover); }

.rec-d-lyrics-body {
	padding: clamp(22px, 3vw, 32px) clamp(18px, 3vw, 32px) clamp(28px, 4vw, 40px);
	border-top: 1px solid var(--lf-divider-dark);
	columns: 2; column-gap: clamp(30px, 4vw, 60px);
}
.rec-d-lyrics-stanza {
	font-family: var(--font-display); font-weight: 500;
	font-size: 18.5px; line-height: 1.66;
	color: rgba(var(--fg-rgb), 0.92);
	white-space: pre-line; text-wrap: pretty;
	break-inside: avoid; margin: 0 0 1.3em;
}
.rec-d-lyrics-stanza:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .rec-d-lyrics-body { columns: 1; } }

/* [DS-muted 16/07] eyebrow AA in LIGHT: il rame (--lf-rame #8f6240 in light)
   sul crema scende sotto AA (~4.35:1, pink Permette Signorina 2.13) su testo
   minuscolo maiuscolo. Convenzione del tema (già su HoF card/modal, chi-siamo,
   taccuino feature): in LIGHT l'occhiello passa a --lf-borgogna-soft (#6e1c41 =
   7.3–10:1 sui fondi chiari). Dark invariato (rame ~7.3:1). Hero FOTO (fondo
   scuro) esclusi via :not(). */
[data-theme="light"] .rec-hero-eyebrow,
[data-theme="light"] .rec-cover-kicker,
[data-theme="light"] .rec-feat-icon-eyebrow,
[data-theme="light"] .rec-d-eyebrow,
[data-theme="light"] .rec-d-manifesto-kicker { color: var(--lf-borgogna-soft); }