/**
 * Muledge — AFTER HOURS, BEFORE THE ENCORE.
 *
 * Redesigned per docs/handoff/muledge-art-direction-claude.md (2026-09-28).
 * A quiet, edited, night-time listening bar / music culture magazine.
 *
 * Rules that override my earlier draft:
 * - Tokens are --ml-* per spec.
 * - Radius 0-4px everywhere (no pill/rounded-card look).
 * - 4:8 or 7:5 editorial grid, not equal-card walls.
 * - Header + body are the same dark, unified world.
 * - Typography: JP serif for hero, JP sans for body, Latin display sans for
 *   editorial mastheads (QUEEN, MULEDGE).
 * - No neon, no glass, no gold gradients, no rainbow, no ultra-thin grey body.
 */

/* ─────────────────────────  Tokens  ───────────────────────── */

:root {
	/* Palette lifted from marshall.com/jp/ja/60-years-of-marshall-and-hendrix
	 * per user direction. Pure black stage with high-contrast white text,
	 * Hendrix violet as the sole text accent, red reserved for
	 * promotional callouts only. Primary CTAs invert to white-on-black,
	 * not accent-filled — the Marshall convention. */
	--ml-bg:              #000000;
	--ml-surface:         #0D0D0D;
	--ml-surface-2:       #171717;
	--ml-text:            #FFFFFF;
	--ml-muted:           #A0A0A0;   /* lifted from #8C8C8C for the photo backdrop */
	--ml-accent:          #8371F2;
	--ml-accent-text:     #9C8FEF;   /* the same violet, lifted. Used wherever the accent is TEXT,
	                                    so it stays legible on the photo backdrop; fills and
	                                    borders keep --ml-accent. Same value as --ml-accent-hi. */
	--ml-accent-hi:       #9C8FEF;   /* slightly lifted for focus / interaction */
	--ml-alert:           #E42A2A;   /* reserved for promotional callouts only */
	--ml-chrome:          #180033;   /* header/footer — Marshall "dark-purple" texture average */
	--ml-header-h:        73px;      /* the fixed header occupies this much */
	--ml-ink:             #000000;   /* text on white/accent surfaces */
	/* The record sleeve. Not paper-white — a stock that has sat in a rack
	 * for forty years, which is warmer and much easier on a dark page. */
	--ml-paper:           #EDE4D1;
	--ml-paper-rule:      #CEC2A9;
	--ml-paper-ink:       #1A1714;
	--ml-paper-muted:     #6B6354;
	--ml-paper-accent:    #5243B8;   /* the violet, taken down to read on cream */
	--ml-rule:            rgba(255, 255, 255, 0.14);
	--ml-rule-strong:     rgba(255, 255, 255, 0.28);
	--ml-control-border:  #4A4A4A;

	--ml-container:       1200px;
	--ml-pad-sp:          20px;
	--ml-pad-pc:          clamp(48px, 5vw, 64px);
	--ml-gap:             24px;
	--ml-section-pc:      clamp(80px, 8vw, 112px);
	--ml-section-sp:      clamp(48px, 8vw, 64px);
	/* Vertical section padding token honoring the spec range
	 * (SP 48-64 / PC 80-112). One clamp covers both bands via vw. */
	--ml-section-y:       clamp(48px, 8vw, 112px);
	--ml-section-y-sm:    clamp(40px, 6vw, 80px);
	--ml-radius:          4px;

	/* Display (site logo + English headings): Cooper Black via the
	 * Adobe Fonts kit (family "cooper-black-std", weight 400 only).
	 * Body / everything JP: Noto Sans JP + system JP gothic. */
	--ml-font-body:       "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
	--ml-font-sans:       var(--ml-font-body);
	/* JP gothic sits right after Cooper Black so Japanese characters in a
	 * display-face element (e.g. "ミューレッジ｜" in the header brand)
	 * render in the body gothic instead of a system serif. */
	--ml-font-display:    "cooper-black-std", "Cooper Black", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif;
	--ml-font-serif:      var(--ml-font-body); /* backward-compat: no mincho anywhere */
	--ml-font-ja:         var(--ml-font-body); /* backward-compat */
	--ml-font-mono-ish:   "SF Mono", "Menlo", "Consolas", monospace;

	--ml-transition:      180ms ease;
}

/* ─────────────────────────  Site shell  ────────────────────── */

/* `html, body` alone loses to the parent theme's 02-base.css, which
 * loads after this file and paints both white. Hence html:root / html body. */
html:root,
html body {
	background: var(--ml-bg);
	color: var(--ml-text);
	/* Cooper Black ships weight 400 only; block faux-bold on the display
	 * face (Noto Sans JP has real weights, so nothing is lost). */
	font-synthesis: style;
}

/* ── Fixed room backdrop ─────────────────────────────────────
 * The lounge photo sits behind everything and does not scroll.
 * A fixed pseudo-element is used rather than
 * `background-attachment: fixed`, which iOS Safari ignores and
 * which janks badly on long pages.
 * The scrim strength is set by contrast, not taste. muledge-bg.webp
 * is already tone-mapped by tools/make-backdrop.py — shadows lifted,
 * highlights rolled off from 255 to 116 — which is what lets the
 * scrim sit at 0.62 instead of 0.84 — the room reads about twice as
 * strongly. Against that peak, muted grey lands at 5.0:1 and the text
 * violet at 4.8:1, both clear of WCAG AA.
 * Lighten either the scrim or the tone map and they drop below 4.5. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: var(--ml-bg);
	background-image:
		linear-gradient(rgba(6, 0, 12, 0.62), rgba(6, 0, 12, 0.62)),
		url("muledge-bg.webp");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* Let the backdrop through: html keeps the black fallback, everything
 * above it is transparent so body::before is what you see. */
html body,
body #nt-main,
body .nt-page-header,
body .nt-article,
body .nt-section {
	background: transparent;
}

/* Site-wide default link hover. The parent theme's a:hover mixes its blue
 * primary into its dark text colour (≈ #1A306C), which is nearly invisible
 * on the black stage. Any link without its own hover colour now uses the
 * same Hendrix violet as the header nav and text links. */
body a:hover,
body a:focus-visible {
	color: var(--ml-accent-text);
}

body {
	font-family: var(--ml-font-sans);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

@media (min-width: 720px) {
	.ml-container {
		padding: 0 var(--ml-pad-pc);
	}
}

/* ─────────────────────  Parent theme quiet-down  ─────────────
 * neutrope-starter renders a white header + white page shell.
 * Repaint everything, minimal surgery, no !important on structural.
 * ────────────────────────────────────────────────────────────── */

/* Header rides above the page and lets a little of the room through.
 * position: fixed rather than sticky because html/body carry
 * `overflow-x: clip`, which breaks sticky's viewport anchoring.
 * Body gets matching top padding since the header leaves the flow. */
body .nt-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(24, 0, 51, 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(130%);
	backdrop-filter: blur(14px) saturate(130%);
	border-bottom: 1px solid var(--ml-rule);
	color: var(--ml-text);
}

/* Browsers without backdrop-filter get the solid chrome instead, so the
 * nav never sits on bare photo. */
@supports not (backdrop-filter: blur(1px)) {
	body .nt-header {
		background: var(--ml-chrome);
	}
}

/* Offset for the fixed header. It goes on the main wrapper, not body:
 * the admin-bar plugin forces body padding with !important for logged-in
 * users, and #nt-main is left alone by everything.
 * scroll-padding-top keeps in-page anchors clear of the header. */
body #nt-main {
	padding-top: var(--ml-header-h);
}

html {
	scroll-padding-top: calc(var(--ml-header-h) + 16px);
}

/* The admin bar sits above the header, so anchor targets need the extra
 * room too. :has() is the only way to reach html from a body class; where
 * it is unsupported the base value above still applies. */
html:has(body.admin-bar) {
	scroll-padding-top: calc(var(--ml-header-h) + 48px);
}

/* Logged-in users also have the admin bar above the header. */
body.admin-bar #nt-main {
	padding-top: calc(var(--ml-header-h) + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar #nt-main {
		padding-top: calc(var(--ml-header-h) + 46px);
	}
}

/* The WordPress admin bar is itself fixed at the top for logged-in
 * users; drop the header below it so they do not overlap. */
body.admin-bar .nt-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .nt-header {
		top: 46px;
	}
}

body .nt-footer {
	background: rgba(24, 0, 51, 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(130%);
	backdrop-filter: blur(14px) saturate(130%);
	color: var(--ml-text);
	border-top: 1px solid var(--ml-rule);
}

@supports not (backdrop-filter: blur(1px)) {
	body .nt-footer {
		background: var(--ml-chrome);
	}
}

body .nt-footer a,
body .nt-footer .nt-footer__brand-name,
body .nt-footer .nt-footer__description,
body .nt-footer .nt-footer__copy {
	color: var(--ml-text);
}

body .nt-footer .nt-footer__description,
body .nt-footer .nt-footer__copy {
	color: var(--ml-muted);
}

/* Footer brand = site logo: same treatment as the header brand. */
body .nt-footer .nt-footer__brand-name {
	font-family: var(--ml-font-display);
	font-weight: 400;
	letter-spacing: 0.02em;
}

body .nt-footer .nt-footer__bottom {
	border-top-color: var(--ml-rule);
}

body .nt-header__brand,
body .nt-header__brand:link,
body .nt-header__brand:visited {
	color: var(--ml-text);
	/* Latin part ("Music Knowledge") gets Cooper Black / Alfa Slab One;
	 * the Japanese "ミューレッジ" falls through to the JP body stack
	 * automatically per-character. */
	font-family: var(--ml-font-display);
	font-weight: 400;
	letter-spacing: 0.02em;
	font-size: 18px;
	text-decoration: none;
}

body .nt-header .nt-header__menu {
	list-style: none;
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0;
}

body .nt-header .nt-header__menu a {
	color: var(--ml-text);
	text-decoration: none;
	font-size: 13px;
	letter-spacing: 0.08em;
	transition: color var(--ml-transition);
}

body .nt-header .nt-header__menu a:hover,
body .nt-header .nt-header__menu a:focus {
	color: var(--ml-accent-text);
}

/* nt-main wrapper — remove padding-locked light backgrounds. Kept
 * transparent so the fixed room backdrop shows through. */
body #nt-main,
body .nt-page-header {
	background: transparent;
	color: var(--ml-text);
}

/* Suppress the parent theme's default page hero (H1 sitting alone in a
 * lighter band before the content). Muledge shortcodes provide their own. */
body .nt-page-hero,
body .nt-page-header {
	display: none;
}

/* Parent theme's back-to-top button — recolor to Muledge accent, not blue */
body .nt-back-to-top {
	background: var(--ml-accent);
	color: var(--ml-ink);
}

/* Breadcrumbs container — quieter */
body .nt-breadcrumbs {
	padding: 20px 0 4px;
}

/* Parent theme's page article uses a grid whose content column is only
 * 760px wide. Muledge hero/collection/about need the full viewport so
 * the editorial 7:5 / 4:8 grids can breathe. Push them into the grid's
 * `full` area. Also strip the extra padding on nt-article/nt-section
 * for Muledge shortcode pages so we control spacing. */
body .nt-article > .ml-hero,
body .nt-article > .ml-tonight,
body .nt-article > .ml-featured,
body .nt-article > .ml-collection,
body .nt-article > .ml-picks,
body .nt-article > .ml-decades,
body .nt-article > .ml-about,
body .nt-article > .ml-principle,
body .nt-article > .ml-pillars,
body .nt-article > .ml-now {
	grid-column: full-start / full-end;
}

/* The parent article-content wrapper adds padding; kill it so our
 * container-driven layout takes over. */
body .nt-article-content {
	padding: 0;
}
body .nt-article > .nt-article-content:has(.ml-hero, .ml-tonight, .ml-featured, .ml-collection, .ml-picks, .ml-decades, .ml-about, .ml-principle, .ml-pillars, .ml-now) {
	padding: 0;
}

/* If the article-content wrapper itself constrains our sections, also
 * push them out from within it. */
body .nt-article-content > .ml-hero,
body .nt-article-content > .ml-tonight,
body .nt-article-content > .ml-featured,
body .nt-article-content > .ml-collection,
body .nt-article-content > .ml-picks,
body .nt-article-content > .ml-decades,
body .nt-article-content > .ml-about,
body .nt-article-content > .ml-principle,
body .nt-article-content > .ml-pillars,
body .nt-article-content > .ml-now {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* 100vw includes the vertical scrollbar, so the breakout above overhangs
 * the viewport by half a scrollbar on each side (still centred). Clip that
 * sliver instead of letting it create a horizontal scrollbar. `clip` (not
 * `hidden`) keeps position: sticky working. */
html,
body {
	overflow-x: clip;
}

/* Cocoon / neutrope-starter breadcrumbs — recolor to muted */
body .nt-breadcrumbs,
body .nt-breadcrumbs a {
	color: var(--ml-muted);
	background: transparent;
}
body .nt-breadcrumbs a:hover { color: var(--ml-accent-text); }

/* ─────────────────  Common typographic building blocks  ───── */

.ml-eyebrow {
	display: inline-block;
	font-family: var(--ml-font-display);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: none;
	color: var(--ml-accent-text);
	margin: 0;
	line-height: 1;
}

.ml-label-ja {
	color: var(--ml-accent-text);
	font-size: 13px;
	letter-spacing: 0.14em;
	margin: 0;
	line-height: 1.4;
}

.ml-rule {
	border: 0;
	border-top: 1px solid var(--ml-rule);
	margin: 0;
}

/* ─────────────────────────  Silver text  ─────────────────────
 * Brushed-metal fill for page H1s and Cooper Black English labels.
 * The vertical gradient repeats once per line (1lh) so multi-line
 * headings get the same chrome band on every line. Static — no shine
 * animation. Plain light-grey color is the fallback where
 * background-clip:text is unavailable. */

.ml-hero__title,
.ml-collection__title,
.ml-about__headline,
.ml-eyebrow,
.ml-meta__type,
.ml-pillars__item h3,
.muledge-result__tier,
.muledge-badge__family,
.muledge-badge__name {
	color: #DCDCDC;
	background-image: linear-gradient(180deg, #FFFFFF 0%, #EDEDED 36%, #A6A6A6 52%, #D4D4D4 70%, #F6F6F6 100%);
	background-repeat: repeat-y;
	background-size: 100% 1.35em;
	background-size: 100% 1lh;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (forced-colors: active), print {
	.ml-hero__title,
	.ml-collection__title,
	.ml-about__headline,
	.ml-eyebrow,
	.ml-meta__type,
	.ml-pillars__item h3,
	.muledge-result__tier,
	.muledge-badge__family,
	.muledge-badge__name {
		background-image: none;
		-webkit-text-fill-color: currentColor;
	}
}

/* ─────────────────────────  Buttons  ──────────────────────── */

.ml-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: var(--ml-radius);
	font-family: var(--ml-font-sans);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ml-transition), color var(--ml-transition), border-color var(--ml-transition), transform 120ms ease;
	border: 1px solid transparent;
}

.ml-btn:hover,
.ml-btn:focus {
	transform: translateY(-1px);
}

.ml-btn--primary {
	background: var(--ml-text);
	color: var(--ml-ink);
	border-color: var(--ml-text);
}

.ml-btn--primary:hover,
.ml-btn--primary:focus {
	background: var(--ml-text);
	border-color: var(--ml-accent);
	color: var(--ml-ink);
}

.ml-btn--ghost {
	background: transparent;
	color: var(--ml-text);
	border-color: var(--ml-rule-strong);
}

.ml-btn--ghost:hover,
.ml-btn--ghost:focus {
	border-color: var(--ml-accent);
	color: var(--ml-accent-text);
}

.ml-link {
	color: var(--ml-text);
	text-decoration: none;
	letter-spacing: 0.06em;
	font-size: 14px;
	border-bottom: 1px solid var(--ml-rule-strong);
	padding-bottom: 3px;
	transition: color var(--ml-transition), border-color var(--ml-transition);
}

.ml-link:hover,
.ml-link:focus {
	color: var(--ml-accent-text);
	border-color: var(--ml-accent);
}

.ml-link::after {
	content: " →";
	margin-left: 4px;
}

/* ─────────────────────────  Hero  ─────────────────────────── */

.ml-hero {
	padding: var(--ml-section-y) 0;
}

.ml-hero__grid {
	display: grid;
	gap: 40px;
	align-items: center;
}

@media (min-width: 900px) {
	.ml-hero__grid {
		grid-template-columns: 7fr 5fr;
		gap: 48px;
	}

	/* A cover page is the one place the drawing is the subject rather
	 * than a thumbnail. Beside the words it can never be more than half
	 * a column wide, so here it drops below them and takes the whole
	 * width — roughly twice the size, and the page reads as a cover. */
	.ml-hero__grid:has(.ml-artwork--photo) {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.ml-hero__grid:has(.ml-artwork--photo) .ml-hero__desc {
		max-width: 56ch;
	}

	/* A grid track will not shrink below its content, and a frame sized
	 * by height is as wide as the drawing makes it — without this the
	 * picture would push the words into a column one letter wide. */
	.ml-hero__art {
		min-width: 0;
	}

	/* Asked for as a width, not a height: a height plus max-width would
	 * clamp the box without clamping the height, and the layout inside
	 * is computed from the frame's own ratio — the figure would then hang out
	 * of the frame and over the words. */
	.ml-hero__art .ml-artwork--photo {
		width: min(100%, calc(420px * var(--ml-art-span)));
		max-width: none;
		height: auto;
		margin-inline: auto;
	}
}

@media (min-width: 900px) and (max-width: 1099px) {
	.ml-hero__art .ml-artwork--photo {
		width: min(100%, calc(340px * var(--ml-art-span)));
	}
}

@media (max-width: 899px) {
	.ml-hero__art .ml-artwork--photo {
		width: min(100%, calc(240px * var(--ml-art-span)));
		max-width: none;
		height: auto;
		margin-inline: 0 auto;
	}
}

.ml-hero__label {
	margin: 0 0 20px;
}

.ml-hero__title {
	font-family: var(--ml-font-serif);
	color: var(--ml-text);
	font-weight: 700;
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.35;
	letter-spacing: 0.02em;
	margin: 0 0 24px;
	font-feature-settings: "palt" 1;
}

.ml-hero__desc {
	color: var(--ml-muted);
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.9;
	max-width: 46ch;
	margin: 0 0 32px;
}

.ml-hero__ctas {
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
}

.ml-hero__meta {
	margin: 24px 0 0;
}

/* Meta line: "ARTIST QUIZ · 10 Questions · 約3分".
 * Quiz type in the display face; the rest in the JP body face. */
.ml-hero__meta,
.ml-featured__meta,
.ml-collection__meta {
	color: var(--ml-muted);
	font-family: var(--ml-font-body);
	font-size: 13px;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

.ml-meta__type {
	font-family: var(--ml-font-display);
	letter-spacing: 0.04em;
	text-transform: none;
}

/* SP order: label -> title -> desc -> ctas -> artwork */
@media (max-width: 899px) {
	.ml-hero__art {
		order: 99;
		margin-top: 40px;
	}
}

/* ────────────────  Queen artwork (right of hero)  ─────────── */

.ml-artwork {
	position: relative;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 1;
	margin: 0 auto;
	container-type: inline-size;
}

@media (max-width: 899px) {
	.ml-artwork {
		max-width: 320px;
	}
}

/* Record disc — black vinyl peeking out to the right of the sleeve,
 * slightly smaller than the sleeve and vertically centred with it. */
.ml-artwork__record {
	position: absolute;
	top: 50%;
	right: -4%;
	width: 82%;
	aspect-ratio: 1;
	transform: translateY(-50%);
	border-radius: 50%;
	/* Coloured, translucent pressing. Black vinyl disappeared into the black
	 * stage; a tinted disc lets the backdrop through and reads as a record.
	 * --ml-vinyl is set per genre family below. */
	background-color: rgba(12, 4, 24, 0.45);
	background:
		linear-gradient(118deg,
			hsl(0 0% 100% / 0.16) 0 12%,
			hsl(0 0% 100% / 0) 30% 68%,
			hsl(0 0% 100% / 0.10) 88% 100%),
		radial-gradient(circle at center,
			rgba(0, 0, 0, 0.55) 0 1.1%,
			hsl(var(--ml-vinyl) / 0.95) 1.4% 5%,
			hsl(var(--ml-vinyl) / 0.28) 5.5% 8%,
			hsl(var(--ml-vinyl) / 0.46) 8.5% 92%,
			hsl(var(--ml-vinyl) / 0.32) 92.5% 100%);
	box-shadow:
		0 30px 60px -20px rgba(0, 0, 0, 0.6),
		inset 0 0 0 1px hsl(var(--ml-vinyl) / 0.5),
		inset 0 0 40px hsl(var(--ml-vinyl) / 0.18);
}

/* Genre families (muledge_companion_record_tint). Hue, saturation, lightness
 * only — the alpha lives in the gradients above so every pressing keeps the
 * same translucency. */
.ml-artwork               { --ml-vinyl: 268 70% 62%; }
.ml-artwork--vinyl-rock   { --ml-vinyl: 356 78% 60%; }
.ml-artwork--vinyl-metal  { --ml-vinyl:  22 88% 56%; }
.ml-artwork--vinyl-blues  { --ml-vinyl: 208 82% 58%; }
.ml-artwork--vinyl-soul   { --ml-vinyl:  43 92% 56%; }
.ml-artwork--vinyl-punk   { --ml-vinyl: 330 80% 62%; }
.ml-artwork--vinyl-pop    { --ml-vinyl: 288 76% 66%; }
.ml-artwork--vinyl-dance  { --ml-vinyl: 168 72% 52%; }
.ml-artwork--vinyl-roots  { --ml-vinyl: 108 58% 52%; }
.ml-artwork--vinyl-house  { --ml-vinyl: 268 70% 62%; }
.ml-artwork--vinyl-cult   { --ml-vinyl: 276 62% 50%; }

/* Decades run as one chronological sweep, warm 50s to cool 10s. */
.ml-artwork--vinyl-d1950  { --ml-vinyl:  38 82% 58%; }
.ml-artwork--vinyl-d1960  { --ml-vinyl:  78 62% 52%; }
.ml-artwork--vinyl-d1970  { --ml-vinyl: 138 60% 50%; }
.ml-artwork--vinyl-d1980  { --ml-vinyl: 190 76% 56%; }
.ml-artwork--vinyl-d1990  { --ml-vinyl: 228 78% 64%; }
.ml-artwork--vinyl-d2000  { --ml-vinyl: 276 74% 64%; }
.ml-artwork--vinyl-d2010  { --ml-vinyl: 322 74% 62%; }

/* An artist drawing joins the sleeve and the record rather than replacing
 * them, standing in front of the card and crossing its left edge by about
 * the width of the card's own margin.
 *
 * Every drawing is sized by its HEIGHT, so a band drawn wide and a singer
 * drawn tall stand the same height on the page. The frame therefore has
 * to be as wide as that particular drawing turns out to be, which is what
 * --ml-art-ar (the figure's width / height, measured by build-art.py) is
 * for. In multiples of the frame's height h:
 *
 *   sleeve   0.86h square, right edge 0.146h inside the frame's
 *   record   0.82h across, right edge at the frame's — clearing the
 *            sleeve by the same 17% of the sleeve's width as always
 *   figure   1.00h tall, right edge 0.05h inside the sleeve's left edge
 *
 * so the frame is (ar + 0.956)h wide, and every horizontal length is that
 * multiple of h written as the matching percentage of the width. */
.ml-artwork--photo {
	--ml-art-ar: 0.7;
	--ml-art-span: calc(var(--ml-art-ar) + 0.956);
	aspect-ratio: var(--ml-art-span);
}

.ml-artwork--photo .ml-artwork__paper {
	left: auto;
	right: calc(14.62% / var(--ml-art-span));
	/* Both axes given: a percentage of the width over the span is the same
	 * length as that percentage of the height, and an absolutely
	 * positioned box with auto width would shrink to fit its text. */
	width: calc(86% / var(--ml-art-span));
	height: 86%;
}

.ml-artwork--photo .ml-artwork__record {
	right: 0;
	width: calc(82% / var(--ml-art-span));
	height: 82%;
}

.ml-artwork__photo {
	position: absolute;
	left: auto;
	right: calc(95.62% / var(--ml-art-span));
	bottom: 0;
	/* Height fixed, width from the drawing's own shape. */
	width: auto;
	height: 100%;
	z-index: 3;
	filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.65));
	pointer-events: none;
}

/* cqi still measures the frame's width, and the sleeve is now a varying
 * fraction of it — so each type size is the original divided by the span,
 * which leaves it the same size relative to the card it sits on. */
.ml-artwork--photo .ml-artwork__paper {
	padding: clamp(9px, calc(6cqi / var(--ml-art-span)), 26px);
}

.ml-artwork--photo .ml-artwork__mark {
	font-size: clamp(12px, min(calc(17cqi / var(--ml-art-span)), calc(85cqi / var(--ml-art-span) / var(--ml-mark-chars, 5))), 84px);
}

.ml-artwork--photo .ml-artwork__rules,
.ml-artwork--photo .ml-artwork__caption {
	font-size: clamp(7px, calc(2.4cqi / var(--ml-art-span)), 14px);
}

/* A frame that can be twice as wide as it is tall earns more of the
 * card's column. */
.ml-collection__art:has(.ml-artwork--photo) {
	max-width: none;
}

.ml-picks__art:has(.ml-artwork--photo) {
	max-width: 100%;
}

/* In a list, the frames are read against each other, so the height is
 * fixed and the width is whatever that drawing needs: every artist comes
 * out the same height down the page. The hero shows one set on its own
 * with nothing to compare it to, so there it still takes the width it is
 * given. */
.ml-collection__item .ml-artwork--photo,
.ml-picks__item .ml-artwork--photo {
	width: auto;
	max-width: 100%;
	margin-inline: 0;
}

/* No percentage here: the artwork column sizes itself to its content, so
 * a width of 100% has nothing to resolve against and collapses the frame
 * to nothing. A plain length keeps every row the same height, and 200 is
 * the tallest the widest drawing can be and still leave the text its
 * 520 — 200 x 2.52 + 520 + 40 fits the container. */
.ml-collection__item .ml-artwork--photo {
	width: calc(200px * var(--ml-art-span));
	max-width: none;
	height: auto;
}

/* A set with no drawing is the same height as one with. It also needs a
 * length rather than a percentage: the column sizes itself to its
 * content now, so a width of 100% has nothing to measure and collapses. */
.ml-collection__item .ml-artwork:not(.ml-artwork--photo) {
	width: auto;
	height: 200px;
	margin-inline: 0;
}

/* The picks sit six to a grid, so their frames get a height that leaves
 * even the widest drawing inside its cell. */
.ml-picks__item .ml-artwork--photo {
	width: min(100%, calc(130px * var(--ml-art-span)));
	height: auto;
}

@media (max-width: 719px) {
	/* Stacked, the column is the width of the page, so a percentage
	 * resolves again and keeps a wide drawing inside it. */
	.ml-collection__item .ml-artwork--photo {
		width: min(100%, calc(150px * var(--ml-art-span)));
	}

	.ml-collection__item .ml-artwork:not(.ml-artwork--photo) {
		height: 150px;
	}
}

/* Concentric grooves */
.ml-artwork__record::before,
.ml-artwork__record::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: repeating-radial-gradient(
		circle at center,
		transparent 0 3px,
		rgba(255, 255, 255, 0.11) 3px 4px
	);
	mask: radial-gradient(circle at center, transparent 0 12%, black 12.5% 92%, transparent 92.5% 100%);
	-webkit-mask: radial-gradient(circle at center, transparent 0 12%, black 12.5% 92%, transparent 92.5% 100%);
	pointer-events: none;
}
.ml-artwork__record::after {
	background: repeating-radial-gradient(
		circle at center,
		transparent 0 8px,
		hsl(var(--ml-vinyl) / 0.22) 8px 9px
	);
}

/* Paper card — square white album sleeve, vertically centred.
 * Padding scales with the artwork (cqi) so the contents keep the same
 * proportions at hero (480px) and collection (240px) sizes. */
.ml-artwork__paper {
	position: absolute;
	top: 50%;
	left: 0;
	width: 86%;
	aspect-ratio: 1;
	background: var(--ml-paper);
	color: var(--ml-paper-ink);
	transform: translateY(-50%) rotate(-3.5deg);
	transform-origin: center;
	padding: clamp(12px, 6cqi, 28px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6);
	border: 1px solid var(--ml-paper-rule);
	overflow: hidden;
}

.ml-artwork__label {
	font-family: var(--ml-font-display);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--ml-paper-muted);
	text-transform: uppercase;
	margin: 0;
}

.ml-artwork__stack {
	margin: auto 0;
}

.ml-artwork__mark {
	font-family: var(--ml-font-display);
	font-weight: 700;
	color: var(--ml-paper-ink);
	/* Scale to the artwork container so the letterform never overruns
	 * the paper card at any hero/featured/collection size. */
	/* Cooper Black "QUEEN" measures ~3.9em; the paper's inner box is
	 * ~74% of the container, so 17cqi keeps it inside with margin. */
	/* Longer words step the size down: 5 chars (QUEEN) keeps 17cqi, and
	 * --ml-mark-chars (longest word, set inline) scales the rest. */
	font-size: clamp(14px, min(17cqi, calc(85cqi / var(--ml-mark-chars, 5))), 96px);
	line-height: 0.95;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
	max-width: 100%;
}

.ml-artwork__label,
.ml-artwork__mark--wrap {
	white-space: normal;
}

.ml-artwork__rules,
.ml-artwork__caption {
	font-size: clamp(8px, 2.4cqi, 14px);
}

.ml-artwork__rules {
	border-top: 1px solid var(--ml-paper-rule);
	border-bottom: 1px solid var(--ml-paper-rule);
	padding: 8px 0;
	color: #3A342B;
	font-family: var(--ml-font-serif);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ml-artwork__caption {
	font-family: var(--ml-font-serif);
	color: var(--ml-paper-muted);
	margin: 0;
	letter-spacing: 0.02em;
}

.ml-artwork__caption em {
	font-style: italic;
	color: var(--ml-paper-accent);
}

/* ─────────────────  Tonight thin editorial band  ──────────── */

.ml-tonight {
	border-top: 1px solid var(--ml-rule);
	border-bottom: 1px solid var(--ml-rule);
	padding: clamp(28px, 4vw, 40px) 0;
	background: transparent;
}

.ml-tonight__eyebrow {
	margin: 0 0 12px;
}

.ml-tonight__body {
	font-family: var(--ml-font-serif);
	color: var(--ml-text);
	font-size: clamp(16px, 1.8vw, 20px);
	line-height: 1.9;
	margin: 0;
	max-width: 62ch;
}

.ml-tonight__body strong {
	font-weight: 700;
	color: var(--ml-text);
}

.ml-tonight__lead {
	margin-bottom: 8px;
}

/* ─────────────────  Featured (Tonight's Pick) editorial  ──── */

.ml-featured {
	padding: var(--ml-section-y) 0;
}

.ml-featured__head {
	margin-bottom: 32px;
}

.ml-featured__eyebrow {
	margin: 0 0 12px;
}

.ml-featured__title {
	font-family: var(--ml-font-serif);
	color: var(--ml-text);
	font-size: clamp(26px, 3.6vw, 36px);
	line-height: 1.4;
	font-weight: 700;
	margin: 0;
}

.ml-featured__grid {
	display: grid;
	gap: 32px;
	align-items: center;
}

@media (min-width: 900px) {
	.ml-featured__grid {
		grid-template-columns: 4fr 8fr;
		gap: 48px;
	}
}

.ml-featured__art {
	max-width: 320px;
	margin: 0;
}

.ml-featured__meta {
	margin: 0 0 16px;
}

.ml-featured__name {
	font-family: var(--ml-font-serif);
	color: var(--ml-text);
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.4;
	font-weight: 700;
	margin: 0 0 12px;
}

.ml-featured__hook {
	color: var(--ml-muted);
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 1.9;
	margin: 0 0 24px;
	max-width: 52ch;
}

.ml-featured__cta {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	align-items: center;
}

/* ─────────────────  Quiz collection list (/quiz/)  ────────── */

.ml-collection {
	padding: var(--ml-section-y) 0;
}

.ml-collection__head {
	margin-bottom: 32px;
}

.ml-collection__eyebrow { margin: 0 0 12px; }

.ml-collection__title {
	font-family: var(--ml-font-serif);
	color: var(--ml-text);
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.3;
	font-weight: 700;
	margin: 0;
}

/* Jump bar: A-Z plus the non-artist blocks. Letters nobody has an artist
 * under stay in place, dimmed, so the alphabet keeps its shape. */
.ml-jump {
	margin: 0 0 clamp(24px, 3vw, 36px);
	padding-bottom: 20px;
	border-bottom: 1px solid var(--ml-rule);
}

.ml-jump__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 4px;
	align-items: center;
}

.ml-jump__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2em;
	min-height: 2em;
	padding: 0 0.4em;
	border: 1px solid transparent;
	border-radius: var(--ml-radius);
	font-family: var(--ml-font-display);
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 1;
	color: var(--ml-text);
	text-decoration: none;
}

a.ml-jump__link:hover,
a.ml-jump__link:focus-visible {
	color: var(--ml-ink);
	background: var(--ml-accent);
	border-color: var(--ml-accent);
}

.ml-jump__link--off {
	color: var(--ml-muted);
	opacity: 0.45;
}

/* Decade and Cult read as words, not letters. */
.ml-jump__link--section {
	padding: 0 0.9em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-color: var(--ml-rule-strong);
}

/* One taped-off block per quiz family (Artist / Decade / Cult). The top
 * rule gives the tape something to be stuck to. */
.ml-collection__section {
	position: relative;
	margin-top: clamp(56px, 7vw, 88px);
	padding-top: 32px;
	border-top: 1px solid var(--ml-rule);
}

.ml-collection__section:first-of-type {
	margin-top: 8px;
}

/* A strip of tape, stuck on crooked. Reusable: any block that wants a
 * label in the top-right corner can carry .ml-tape. */
.ml-tape {
	position: absolute;
	/* Stuck over the rule, not tidily below it. */
	top: -1.9em;
	right: clamp(4px, 3vw, 32px);
	z-index: 2;
	margin: 0;
	padding: 0.5em 1.9em;
	transform: rotate(7.5deg);
	transform-origin: center;
	font-family: var(--ml-font-display);
	font-size: clamp(19px, 2.4vw, 26px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #FFFFFF;
	/* Same translucent chrome as the header and footer, flat — a strip of
	 * tape is flat. The frame is the header's own hairline. */
	background: rgba(24, 0, 51, 0.72);
	border: 1px solid var(--ml-rule);
	box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.8);
	-webkit-backdrop-filter: blur(14px) saturate(130%);
	backdrop-filter: blur(14px) saturate(130%);
	pointer-events: none;
}

.ml-collection__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 24px;
}

.ml-collection__item {
	border-top: 1px solid var(--ml-rule);
	padding-top: 24px;
}

.ml-collection__item:first-child {
	border-top: none;
	padding-top: 0;
}

.ml-collection__link {
	display: grid;
	gap: 24px;
	color: var(--ml-text);
	text-decoration: none;
	align-items: center;
}

@media (min-width: 720px) {
	.ml-collection__link {
		/* The artwork takes the width it needs and the prose is capped
		 * where Japanese stops being comfortable to read — which is also
		 * about where ten volumes fall into two rows of five. What is
		 * left over goes to the picture. */
		grid-template-columns: auto minmax(0, 520px);
		gap: 40px;
		/* The picture and the words are one object; it sits in the middle
		 * of the row, with the volumes centred under it. */
		justify-content: center;
	}
}

.ml-collection__art {
	max-width: 240px;
	margin: 0;
}

.ml-collection__meta {
	margin: 0 0 10px;
}

.ml-collection__name {
	font-family: var(--ml-font-serif);
	color: var(--ml-text);
	font-size: clamp(20px, 2.6vw, 26px);
	line-height: 1.45;
	margin: 0 0 10px;
	font-weight: 700;
	transition: color var(--ml-transition);
}

.ml-collection__link:hover .ml-collection__name,
.ml-collection__link:focus .ml-collection__name {
	color: var(--ml-accent-text);
}

.ml-collection__hook {
	color: var(--ml-muted);
	line-height: 1.9;
	margin: 0;
	font-size: 15px;
	max-width: 52ch;
}

/* Volume links under a multi-volume artist card; aligned to the card's
 * text column on desktop. */
/* The volumes run the full width of the row, under both columns, so all
 * ten sit on one line and only wrap when the window makes them. Breaking
 * them into fixed rows looked arbitrary against the blocks above. */
.ml-collection__vols {
	margin-top: 16px;
}

.ml-collection__vols-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}


.ml-collection__vol {
	display: inline-block;
	padding: 6px 10px;
	border: 1px solid var(--ml-control-border);
	border-radius: var(--ml-radius);
	color: var(--ml-text);
	font-family: var(--ml-font-display);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: color var(--ml-transition), border-color var(--ml-transition);
}

.ml-collection__vol:hover,
.ml-collection__vol:focus-visible {
	color: var(--ml-accent-text);
	border-color: var(--ml-accent);
}

.ml-collection__vol-label {
	color: var(--ml-muted);
	margin-right: 2px;
}

/* ─────────────────────  About page  ───────────────────────── */

.ml-about {
	padding: var(--ml-section-y) 0;
}

.ml-about__eyebrow { margin: 0 0 20px; }

.ml-about__headline {
	font-family: var(--ml-font-serif);
	color: var(--ml-text);
	font-size: clamp(28px, 4.4vw, 46px);
	line-height: 1.4;
	font-weight: 700;
	margin: 0 0 24px;
}

.ml-about__lead {
	color: var(--ml-muted);
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 2;
	max-width: 60ch;
	margin: 0;
}

.ml-principle {
	padding: var(--ml-section-y-sm) 0;
	border-top: 1px solid var(--ml-rule);
	border-bottom: 1px solid var(--ml-rule);
}

.ml-principle__eyebrow { margin: 0 0 20px; }

.ml-principle__pull {
	font-family: var(--ml-font-serif);
	color: var(--ml-text);
	font-size: clamp(24px, 4vw, 42px);
	line-height: 1.55;
	font-weight: 700;
	margin: 0 0 24px;
	max-width: 22ch;
}

.ml-principle__body {
	color: var(--ml-muted);
	line-height: 2;
	max-width: 56ch;
	margin: 0;
}

.ml-pillars {
	padding: var(--ml-section-y-sm) 0;
}

.ml-pillars__eyebrow { margin: 0 0 24px; }

.ml-pillars__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 24px;
}

@media (min-width: 720px) {
	.ml-pillars__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ml-pillars__item {
	border-top: 1px solid var(--ml-rule);
	padding: 20px 0 0;
}

.ml-pillars__item h3 {
	font-family: var(--ml-font-display);
	color: var(--ml-accent-text);
	font-size: 18px;
	letter-spacing: 0.18em;
	font-weight: 700;
	margin: 0 0 8px;
}

.ml-pillars__item p {
	color: var(--ml-text);
	line-height: 1.9;
	margin: 0;
}

.ml-now {
	padding: var(--ml-section-y-sm) 0;
	border-top: 1px solid var(--ml-rule);
}

.ml-now__eyebrow { margin: 0 0 20px; }

.ml-now__body {
	font-family: var(--ml-font-serif);
	color: var(--ml-text);
	font-size: clamp(16px, 2vw, 20px);
	line-height: 2;
	margin: 0 0 32px;
	max-width: 56ch;
}

/* ═════════════  Neutrope Quiz Engine — Muledge overrides  ════════════ */

body .skl-quiz {
	max-width: 760px;
	margin: 0 auto;
	background: transparent;
	border: none;
	color: var(--ml-text);
	font-family: var(--ml-font-sans);
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}

body .skl-quiz * { box-sizing: border-box; }

/* Hide duplicates — Muledge cover carries title/tag */
body .skl-quiz .skl-quiz__header,
body .skl-quiz .skl-quiz__title,
body .skl-quiz .skl-quiz__intro-title {
	display: none;
}

/* Intro (start card) — a plain ivory-on-black liner note */

body .skl-quiz .skl-quiz__intro,
body .skl-quiz .skl-quiz__intro-card {
	background: transparent;
	border: 1px solid var(--ml-rule);
	border-radius: var(--ml-radius);
	padding: clamp(24px, 4vw, 40px);
	margin: 0;
	box-shadow: none;
	color: var(--ml-text);
}

body .skl-quiz .skl-quiz__intro-mode {
	background: transparent;
	border: 1px solid var(--ml-accent);
	color: var(--ml-accent-text);
	font-family: var(--ml-font-display);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--ml-radius);
	display: inline-block;
	margin: 0 0 20px;
}

body .skl-quiz .skl-quiz__intro-meta {
	background: transparent;
	color: var(--ml-muted);
	border: 0;
	margin: 0 0 20px;
	padding: 0;
}

body .skl-quiz .skl-quiz__intro-meta-row {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid var(--ml-rule);
	gap: 24px;
}

body .skl-quiz .skl-quiz__intro-meta-row:last-child {
	border-bottom: none;
}

body .skl-quiz .skl-quiz__intro-meta dt {
	color: var(--ml-muted);
	font-size: 13px;
	letter-spacing: 0.06em;
}

body .skl-quiz .skl-quiz__intro-meta dd {
	color: var(--ml-text);
	font-family: var(--ml-font-display);
	font-size: 15px;
	font-weight: 700;
	margin: 0;
}

body .skl-quiz .skl-quiz__intro-note {
	background: transparent;
	color: var(--ml-muted);
	border-left: 2px solid var(--ml-accent);
	padding: 8px 16px;
	margin: 20px 0;
	font-size: 13px;
	line-height: 1.8;
	border-radius: 0;
}

body .skl-quiz .skl-quiz__intro-actions {
	display: flex;
	gap: 20px;
	justify-content: flex-start;
	margin-top: 8px;
}

/* Stage (question surface) */

body .skl-quiz .skl-quiz__stage {
	background: transparent;
	border: none;
}

body .skl-quiz .skl-quiz__question {
	background: transparent;
	border: none;
	padding: 32px 0;
}

body .skl-quiz .skl-quiz__question-header {
	background: transparent;
	border: 0;
	padding: 0 0 16px;
	color: var(--ml-muted);
	display: flex;
	align-items: baseline;
	gap: 16px;
}

body .skl-quiz .skl-quiz__question-num {
	color: var(--ml-accent-text);
	font-family: var(--ml-font-display);
	font-size: 14px;
	letter-spacing: 0.18em;
	font-weight: 700;
	background: transparent;
}

body .skl-quiz .skl-quiz__question-body {
	color: var(--ml-text);
	font-family: var(--ml-font-serif);
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.7;
	margin: 0 0 28px;
	font-weight: 700;
	font-feature-settings: "palt" 1;
}

/* Choices */

body .skl-quiz .skl-quiz__choices,
body .skl-quiz .skl-quiz__choice-list {
	display: grid;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 0;
}

body .skl-quiz .skl-quiz__choice {
	background: var(--ml-surface);
	border: 1px solid var(--ml-control-border);
	color: var(--ml-text);
	padding: 16px 20px;
	min-height: 56px;
	border-radius: var(--ml-radius);
	display: flex;
	align-items: center;
	gap: 16px;
	cursor: pointer;
	font-size: 16px;
	line-height: 1.5;
	transition: background var(--ml-transition), border-color var(--ml-transition), transform 120ms ease;
}

/* QE's own .skl-quiz__choice:hover:not(:disabled) sets color to its dark
 * navy, which vanishes on black — override text colour as well. */
body .skl-quiz .skl-quiz__choice:hover {
	background: var(--ml-surface-2);
	border-color: var(--ml-accent);
	color: var(--ml-accent-text);
}

body .skl-quiz .skl-quiz__choice:focus-visible {
	outline: 2px solid var(--ml-accent);
	outline-offset: 2px;
}

body .skl-quiz .skl-quiz__choice-label,
body .skl-quiz .skl-quiz__choice-marker,
body .skl-quiz .skl-quiz__choice-prefix {
	background: transparent;
	color: var(--ml-accent-text);
	border: 1px solid var(--ml-accent);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ml-font-display);
	font-weight: 700;
	font-size: 13px;
	flex-shrink: 0;
}

body .skl-quiz .skl-quiz__choice--selected {
	background: rgba(131, 113, 242, 0.12);
	border-color: var(--ml-accent);
}

body .skl-quiz .skl-quiz__choice--locked.skl-quiz__choice--correct,
body .skl-quiz .skl-quiz__choice--correct {
	background: rgba(131, 113, 242, 0.20);
	border-color: var(--ml-accent);
	color: var(--ml-text);
}

body .skl-quiz .skl-quiz__choice--correct .skl-quiz__choice-label,
body .skl-quiz .skl-quiz__choice--correct .skl-quiz__choice-marker,
body .skl-quiz .skl-quiz__choice--correct .skl-quiz__choice-prefix {
	background: var(--ml-accent);
	color: var(--ml-ink);
	border-color: var(--ml-accent);
}

body .skl-quiz .skl-quiz__choice--incorrect {
	border-color: var(--ml-control-border);
	color: var(--ml-muted);
	background: transparent;
}

body .skl-quiz .skl-quiz__choice--locked {
	cursor: default;
}

/* Feedback line */

body .skl-quiz .skl-quiz__feedback {
	background: transparent;
	border: 0;
	color: var(--ml-text);
	padding: 20px 0 0;
	margin: 0;
	font-family: var(--ml-font-display);
	font-size: 15px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 12px;
	border-radius: 0;
}

body .skl-quiz .skl-quiz__feedback::before {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--ml-accent);
}

/* QE hides the empty feedback slot with the [hidden] attribute before an
 * answer; the display:flex above would otherwise reveal it (and its
 * ::before rule line). Same guard for every QE element we give a display
 * value to — !important is the conventional way to keep [hidden] honest. */
body .skl-quiz [hidden] {
	display: none !important;
}

body .skl-quiz .skl-quiz__feedback--correct { color: var(--ml-accent-text); }
body .skl-quiz .skl-quiz__feedback--incorrect,
body .skl-quiz .skl-quiz__feedback--wrong { color: var(--ml-muted); }

/* Explanation */

body .skl-quiz .skl-quiz__explanation {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--ml-rule);
	padding: 24px 0 0;
	margin: 24px 0 0;
	color: var(--ml-text);
	border-radius: 0;
}

body .skl-quiz .skl-quiz__explanation-label {
	color: var(--ml-accent-text);
	font-family: var(--ml-font-display);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

body .skl-quiz .skl-quiz__explanation-body {
	color: var(--ml-text);
	font-family: var(--ml-font-sans);
	font-size: 16px;
	line-height: 1.9;
	margin: 0;
}

body .skl-quiz .skl-quiz__explanation-body p { margin: 0 0 12px; }
body .skl-quiz .skl-quiz__explanation-body p:last-child { margin-bottom: 0; }

/* Nav / action buttons */

body .skl-quiz .skl-quiz__btn,
body .skl-quiz button.skl-quiz__btn {
	font-family: var(--ml-font-sans);
	font-weight: 700;
	padding: 12px 24px;
	min-height: 48px;
	border-radius: var(--ml-radius);
	border: 1px solid var(--ml-rule-strong);
	background: transparent;
	color: var(--ml-text);
	cursor: pointer;
	letter-spacing: 0.06em;
	transition: background var(--ml-transition), border-color var(--ml-transition), color var(--ml-transition);
}

body .skl-quiz .skl-quiz__btn:hover,
body .skl-quiz .skl-quiz__btn:focus {
	border-color: var(--ml-accent);
	color: var(--ml-accent-text);
}

body .skl-quiz .skl-quiz__btn--primary,
body .skl-quiz .skl-quiz__btn--start,
body .skl-quiz .skl-quiz__btn--next,
body .skl-quiz button.skl-quiz__btn--primary,
body .skl-quiz button.skl-quiz__btn--start,
body .skl-quiz button.skl-quiz__btn--next {
	background: var(--ml-text);
	color: var(--ml-ink);
	border-color: var(--ml-text);
}

body .skl-quiz .skl-quiz__btn--primary:hover,
body .skl-quiz .skl-quiz__btn--primary:focus,
body .skl-quiz .skl-quiz__btn--start:hover,
body .skl-quiz .skl-quiz__btn--start:focus,
body .skl-quiz .skl-quiz__btn--next:hover,
body .skl-quiz .skl-quiz__btn--next:focus {
	background: var(--ml-text);
	border-color: var(--ml-accent);
	color: var(--ml-ink);
}

body .skl-quiz .skl-quiz__btn--secondary,
body .skl-quiz .skl-quiz__btn--prev {
	background: transparent;
	color: var(--ml-text);
	border-color: var(--ml-rule-strong);
}

body .skl-quiz .skl-quiz__btn:disabled,
body .skl-quiz .skl-quiz__btn[aria-disabled="true"] {
	opacity: 0.35;
	cursor: not-allowed;
}

body .skl-quiz .skl-quiz__nav,
body .skl-quiz .skl-quiz__actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--ml-rule);
}

/* Result — liner-notes back inspired */

/* .skl-quiz__result is only QE's wrapper around the card — framing both
 * produced a double border, so only the card carries the hairline. */
body .skl-quiz .skl-quiz__result {
	background: transparent;
	border: 0;
	padding: 0;
	margin-top: 32px;
	color: var(--ml-text);
}

body .skl-quiz .skl-quiz__result-card {
	background: transparent;
	border: 1px solid var(--ml-rule);
	border-radius: var(--ml-radius);
	padding: clamp(24px, 4vw, 40px);
	color: var(--ml-text);
}

body .skl-quiz .skl-quiz__result .skl-quiz__btn {
	box-shadow: none; /* QE adds a navy/blue drop shadow */
}

body .skl-quiz .skl-quiz__result-title,
body .skl-quiz h1.skl-quiz__result-title,
body .skl-quiz h2.skl-quiz__result-title,
body .skl-quiz h3.skl-quiz__result-title,
body .skl-quiz h4.skl-quiz__result-title {
	color: var(--ml-accent-text) !important; /* QE/parent theme set a blue heading color */
	font-family: var(--ml-font-display);
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	margin: 0 0 20px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--ml-rule);
	background: transparent;
	font-weight: 700;
}

body .skl-quiz .skl-quiz__score,
body .skl-quiz dl.skl-quiz__score {
	background: transparent;
	color: var(--ml-text);
	margin: 0;
	padding: 0;
	border: 0; /* QE draws a pale-blue box here */
	border-radius: 0;
}

body .skl-quiz .skl-quiz__score-row {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid var(--ml-rule);
	gap: 24px;
	background: transparent;
}
body .skl-quiz .skl-quiz__score-row:last-child { border-bottom: none; }

body .skl-quiz .skl-quiz__score dt {
	color: var(--ml-muted);
	font-size: 13px;
	letter-spacing: 0.06em;
}

body .skl-quiz .skl-quiz__score dd {
	color: var(--ml-text);
	font-family: var(--ml-font-display);
	font-weight: 700;
	font-size: 18px;
	margin: 0;
}

body .skl-quiz .skl-quiz__field-breakdown,
body .skl-quiz section.skl-quiz__field-breakdown {
	margin-top: 24px;
	padding: 20px 0 0;
	border: 0; /* QE draws pale-blue side/bottom borders */
	border-top: 1px solid var(--ml-rule);
	background: transparent;
	color: var(--ml-text);
	border-radius: 0;
	box-shadow: none;
}

body .skl-quiz .skl-quiz__field-list {
	list-style: none;
	padding: 0;
	margin: 0;
	background: transparent;
}

/* QE ships its own progress-bar fill class */
body .skl-quiz .skl-quiz__field-bar-fill {
	background: var(--ml-accent) !important; /* QE may inline width via style */
}

body .skl-quiz .skl-quiz__field-breakdown-title,
body .skl-quiz h2.skl-quiz__field-breakdown-title,
body .skl-quiz h3.skl-quiz__field-breakdown-title,
body .skl-quiz h4.skl-quiz__field-breakdown-title {
	color: var(--ml-accent-text) !important;
	font-family: var(--ml-font-display);
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	margin: 0 0 16px;
	background: transparent;
	font-weight: 700;
}

/* Field row layout */
body .skl-quiz .skl-quiz__field-head {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 6px;
}

body .skl-quiz .skl-quiz__field-name {
	color: var(--ml-text);
	font-family: var(--ml-font-serif);
	font-size: 14px;
	letter-spacing: 0.02em;
	margin-right: auto;
}

body .skl-quiz .skl-quiz__field-score {
	color: var(--ml-muted);
	font-family: var(--ml-font-display);
	font-size: 13px;
	letter-spacing: 0.08em;
}

body .skl-quiz .skl-quiz__field-rate {
	color: var(--ml-accent-text) !important;
	font-family: var(--ml-font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	min-width: 48px;
	text-align: right;
}

body .skl-quiz .skl-quiz__field-item {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ml-rule);
	padding: 12px 0;
}

body .skl-quiz .skl-quiz__field-item:last-child { border-bottom: none; }

/* Volumes 4, 5 and 7 are single-theme by design (Members / Live / Roots),
 * so their breakdown would be one bar restating the score. Hide it. */
body .skl-quiz .skl-quiz__field-breakdown:has(.skl-quiz__field-item:only-child) {
	display: none;
}

body .skl-quiz .skl-quiz__field-name {
	color: var(--ml-text);
	font-size: 14px;
}

body .skl-quiz .skl-quiz__field-score {
	color: var(--ml-muted);
	font-family: var(--ml-font-display);
	font-size: 13px;
	letter-spacing: 0.08em;
}

body .skl-quiz .skl-quiz__field-note {
	background: transparent;
	color: var(--ml-muted);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border: 1px solid var(--ml-rule-strong);
	padding: 2px 8px;
	border-radius: var(--ml-radius);
}

body .skl-quiz .skl-quiz__field-note--good {
	color: var(--ml-accent-text);
	border-color: var(--ml-accent);
}

body .skl-quiz .skl-quiz__field-progress,
body .skl-quiz .skl-quiz__field-bar,
body .skl-quiz .skl-quiz__progress-bar {
	background: rgba(255, 255, 255, 0.06);
	border-radius: 0;
}

body .skl-quiz .skl-quiz__field-progress > *,
body .skl-quiz .skl-quiz__field-bar > *,
body .skl-quiz .skl-quiz__progress-bar > * {
	background: var(--ml-accent) !important; /* QE may inline color */
}

/* ─────────────  Muledge result chrome (JS-filled)  ────────── */

.muledge-scope {
	width: 100%; /* auto margins in the article grid would shrink-wrap it */
	max-width: 760px;
	margin: 32px auto 0;
	padding: clamp(24px, 4vw, 40px);
	background: transparent;
	border: 1px solid var(--ml-rule);
	border-radius: var(--ml-radius);
	color: var(--ml-text);
	font-family: var(--ml-font-sans);
	line-height: 1.8;
}

.muledge-scope * { box-sizing: border-box; }

.muledge-result__score {
	font-family: var(--ml-font-display);
	font-size: clamp(48px, 8vw, 72px);
	line-height: 1;
	color: var(--ml-text);
	margin: 0 0 8px;
	font-weight: 700;
}

.muledge-result__tier {
	font-family: var(--ml-font-display);
	color: var(--ml-accent-text);
	font-size: clamp(16px, 2vw, 20px);
	letter-spacing: 0.06em;
	text-transform: none;
	margin: 0 0 16px;
	font-weight: 700;
}

.muledge-result__tier-body {
	color: var(--ml-muted);
	font-family: var(--ml-font-serif);
	line-height: 1.9;
	margin: 0 0 24px;
	max-width: 46ch;
}

.muledge-badge {
	padding: 20px 0;
	border-top: 1px solid var(--ml-rule);
	border-bottom: 1px solid var(--ml-rule);
	margin: 0 0 24px;
}

.muledge-badge__family {
	font-family: var(--ml-font-display);
	color: var(--ml-muted);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: none;
	margin: 0 0 6px;
}

.muledge-badge__name {
	font-family: var(--ml-font-display);
	color: var(--ml-text);
	font-size: 22px;
	letter-spacing: 0.04em;
	margin: 0 0 8px;
	font-weight: 700;
}

.muledge-badge__tier {
	display: inline-block;
	font-family: var(--ml-font-display);
	color: var(--ml-accent-text);
	font-size: 11px;
	letter-spacing: 0.06em;
	border: 1px solid var(--ml-accent);
	padding: 2px 8px;
	border-radius: var(--ml-radius);
	margin: 0 0 8px;
	background: transparent;
}

/* Reset earlier per-tier color overrides (bronze/silver/gold) so all
 * tier chips share the Muledge brass ghost look. Tier name text alone
 * carries the tier meaning. */
.muledge-badge__tier[data-tier="BRONZE"],
.muledge-badge__tier[data-tier="SILVER"],
.muledge-badge__tier[data-tier="GOLD"] {
	background: transparent;
	color: var(--ml-accent-text);
	border-color: var(--ml-accent);
}

.muledge-badge__microcopy {
	color: var(--ml-muted);
	font-size: 13px;
	margin: 0;
}

.muledge-recommendations__title {
	font-family: var(--ml-font-display);
	color: var(--ml-accent-text);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.muledge-recommendations__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
}

.muledge-recommendations__list a {
	display: block;
	padding: 14px 16px;
	border: 1px solid var(--ml-rule-strong);
	border-radius: var(--ml-radius);
	color: var(--ml-text);
	text-decoration: none;
	font-family: var(--ml-font-serif);
	transition: border-color var(--ml-transition), color var(--ml-transition);
}
.muledge-recommendations__list a:hover,
.muledge-recommendations__list a:focus {
	border-color: var(--ml-accent);
	color: var(--ml-accent-text);
}

.muledge-share {
	margin-top: 24px;
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
}

.muledge-share__button {
	background: transparent;
	color: var(--ml-text);
	border: 1px solid var(--ml-rule-strong);
	padding: 10px 18px;
	border-radius: var(--ml-radius);
	font-family: var(--ml-font-sans);
	font-size: 14px;
	cursor: pointer;
	transition: border-color var(--ml-transition), color var(--ml-transition);
}
.muledge-share__button:hover,
.muledge-share__button:focus {
	border-color: var(--ml-accent);
	color: var(--ml-accent-text);
}

.muledge-share__cta {
	color: var(--ml-accent-text);
	text-decoration: none;
	border-bottom: 1px solid var(--ml-rule-strong);
	padding-bottom: 3px;
	font-family: var(--ml-font-sans);
}

/* MORE MULEDGE (post-answer editorial reveal, injected by muledge-quiz.js
 * into .skl-quiz__explanation-body). Live inline with the explanation, no
 * bordered box, no shift. */

.muledge-more,
body .skl-quiz .skl-quiz__explanation-body .muledge-more {
	margin: 20px 0 0;
	padding: 20px 0 0;
	border: 0;
	border-top: 1px solid var(--ml-rule);
	background: transparent;
	border-radius: 0;
}

.muledge-more__label {
	font-family: var(--ml-font-display);
	color: var(--ml-accent-text);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	margin: 0 0 12px;
	font-weight: 700;
}

.muledge-more__body {
	color: var(--ml-text);
	font-family: var(--ml-font-serif);
	font-size: 15px;
	line-height: 2;
	margin: 0;
}

/* MORE MULEDGE may be injected as a sibling of skl-quiz__explanation
 * (fallback host). Same visual — a thin editorial rule + Muledge tone. */
body .skl-quiz .muledge-more,
body .skl-quiz .skl-quiz__question .muledge-more {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--ml-rule);
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	background: transparent;
	box-shadow: none;
}

/* Motion respect */

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

/* Reveal on load — very subtle */

.ml-reveal {
	opacity: 0;
	transform: translateY(12px);
	animation: ml-reveal 520ms ease forwards;
	animation-delay: 80ms;
}

@keyframes ml-reveal {
	to { opacity: 1; transform: translateY(0); }
}

/* ────────────────────────  Focus-visible (a11y)  ─────────────────────
 * Consistent visible focus ring across every interactive Muledge/QE
 * element so keyboard users can always see where they are. Uses only
 * the accent token, no hover-color changes.
 */

.ml-btn:focus-visible,
.ml-link:focus-visible,
.ml-collection__link:focus-visible,
.muledge-share__button:focus-visible,
.muledge-share__cta:focus-visible,
.muledge-recommendations__list a:focus-visible,
body .nt-header .nt-header__menu a:focus-visible,
body .skl-quiz .skl-quiz__btn:focus-visible,
body .skl-quiz .skl-quiz__choice:focus-visible {
	outline: 2px solid var(--ml-accent);
	outline-offset: 3px;
	border-radius: var(--ml-radius);
}

/* Skip link — parent theme has it but styled for the old palette */
body .nt-skip-link:focus,
body .nt-skip-link:focus-visible {
	background: var(--ml-bg);
	color: var(--ml-accent-text);
	outline: 2px solid var(--ml-accent);
	outline-offset: 2px;
	border-radius: var(--ml-radius);
}

/* Print — flat, high-contrast fallback in case anyone prints a quiz */
@media print {
	body, body #nt-main { background: #fff; color: #111; }
	.ml-btn, .ml-link, .muledge-recommendations__list a { color: #111; }
	.ml-artwork__record { display: none; }
}

/* ─────────────────  Home: Tonight's Picks  ────────────────── */

.ml-picks,
.ml-decades {
	padding: var(--ml-section-y) 0;
}

.ml-decades {
	border-top: 1px solid var(--ml-rule);
}

.ml-picks__head,
.ml-decades .ml-picks__head {
	margin-bottom: 32px;
}

.ml-picks__eyebrow { margin: 0 0 12px; }

.ml-picks__title {
	font-family: var(--ml-font-serif);
	color: var(--ml-text);
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.35;
	font-weight: 700;
	margin: 0;
}

.ml-picks__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 32px 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 720px) {
	.ml-picks__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ml-picks__link {
	display: block;
	color: var(--ml-text);
	text-decoration: none;
}

.ml-picks__art {
	margin: 0 0 16px;
}

body .ml-picks__name {
	/* The parent theme colours h3 directly, which beats inheriting from
	 * the link, so set it explicitly. */
	color: var(--ml-text);
	font-family: var(--ml-font-serif);
	font-size: clamp(16px, 2vw, 20px);
	line-height: 1.4;
	font-weight: 700;
	margin: 0 0 6px;
	transition: color var(--ml-transition);
}

body .ml-picks__link:hover .ml-picks__name,
body .ml-picks__link:focus-visible .ml-picks__name {
	color: var(--ml-accent-text);
}

.ml-picks__meta {
	color: var(--ml-muted);
	font-family: var(--ml-font-body);
	font-size: 13px;
	letter-spacing: 0.04em;
	margin: 0;
}

.ml-picks__more {
	margin: 32px 0 0;
}

/* ─────────────────  Home: by decade  ────────────────── */

.ml-decades__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ml-decades__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 22px;
	border: 1px solid var(--ml-control-border);
	border-radius: var(--ml-radius);
	color: var(--ml-text);
	font-family: var(--ml-font-display);
	font-size: clamp(16px, 2vw, 20px);
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: color var(--ml-transition), border-color var(--ml-transition);
}

.ml-decades__count {
	font-family: var(--ml-font-body);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--ml-muted);
}

.ml-decades__link:hover,
.ml-decades__link:focus-visible {
	color: var(--ml-accent-text);
	border-color: var(--ml-accent);
}