/* Shelf Copy v3: "the collection", calmer.
   ONE material family: graphite (page) + aluminium (light surfaces) + blue gel (community / actions) + black chrome (official / buy).
   Walnut appears only where it is a physical object: the artist-page crate and the homepage shelf cabinets. The artwork supplies the colour.
   Rules: labels are words (never colour alone); body text >= 4.5:1; motion is short and optional (see the end of the file). */

:root {
  --bg-1: #262529; --bg-2: #1a191c; --bg-3: #101012;
  --on-dark: #eeece8; --on-dark-2: #b9b5ae;
  --surface-1: #f5f4f1; --surface-2: #e9e7e2; --tray-1: #dcdad4; --tray-2: #e7e5e0; --line: #a3a098; --edge: #6d6b66;
  --ink: #1c1b1a; --ink-2: #4a4843;
  --link: #1749b8; --link-dark: #a9c8ff;
  --blue-1: #3672dc; --blue-2: #1d5bd0; --blue-3: #174cae; --blue-edge: #0f2f78; --blue-tint-1: #e3ebfb; --blue-tint-2: #d2def6;
  --chrome-1: #55555b; --chrome-2: #2b2b2f; --chrome-3: #111113;
  --wood-1: #5f4a38; --wood-2: #43342a; --wood-3: #2c221b;
  --curated-1: #cc3d2a; --curated-2: #a3271a; --curated-edge: #6e150c;
  --green-1: #258448; --green-2: #1c7a3c; --green-edge: #124f27;
  --focus-dark: #9cc3ff; --focus: var(--focus-dark);
  --ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --metal: linear-gradient(#fbfbfa 0%, #e6e5e1 48%, #cfcdc7 52%, #dedcd7 100%);
  --brushed: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, rgba(0,0,0,.015) 1px 3px);
  --r-sm: 6px; --r: 9px; --r-lg: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; overflow-x: clip; color: var(--on-dark); font: 400 1rem/1.5 var(--ui);
  background: radial-gradient(1000px 380px at 50% -40px, rgba(255, 255, 255, .07), transparent 72%), linear-gradient(var(--bg-1), var(--bg-2) 60%, var(--bg-3)); }
img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--ui); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; } h4 { font-size: .98rem; }
p { margin: 0 0 .85em; }
a { color: var(--link-dark); text-underline-offset: 3px; }
a:hover { color: #fff; }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
table { border-collapse: collapse; width: 100%; }
.wrap { width: min(1220px, 100% - 32px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#main { min-height: 85vh; }
#main > .wrap:first-child { padding-top: 1.4rem; } /* keeps the footer below the fold before content renders, so it can't jump down (layout shift) */

/* light surfaces: dark text, blue links, blue focus ring */
.panel, .panel-inset, .site-header, .toolbar, .create__panel, .mod-card, .lib-row, .fmt-row, .stepper { color: var(--ink); --focus: #1749b8; }
.panel a, .panel-inset a, .create__panel a, .mod-card a, .lib-row a:not(.btn), .fmt-row a:not(.btn), .toolbar a, .site-header a { color: var(--link); }
.panel a:hover, .panel-inset a:hover, .create__panel a:hover, .mod-card a:hover, .fmt-row a:not(.btn):hover { color: #0b2f80; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
main:focus, h1:focus { outline: none; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; padding: .6rem 1rem; color: var(--ink); background: var(--metal); border: 1px solid var(--edge); border-radius: var(--r); font: 600 1rem var(--ui); cursor: pointer; }
.skip:focus { top: 8px; }
.page-enter { animation: page-in .16s ease-out; }
@keyframes page-in { from { opacity: .35; } to { opacity: 1; } }

/* ---------- header: aluminium bar, slim graphite sub-bar ---------- */
.site-header { position: sticky; top: 0; z-index: 10; overflow-x: clip; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); } /* stays put; the notice strip below tucks under it as the page scrolls (js/header-scroll.js) */
.site-header__row { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.2rem; padding: .55rem 0; background: var(--brushed), linear-gradient(#f6f6f4, #d9d8d3); position: relative; }
.site-header__row::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); background: var(--brushed), linear-gradient(#f6f6f4, #d9d8d3); border-bottom: 1px solid #55534f; z-index: -1; }
.logo { display: inline-flex; align-items: center; gap: .75rem; font: 700 1.45rem/1 var(--ui); letter-spacing: -.02em; text-decoration: none; color: var(--ink) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.logo__mark { width: 42px; height: 42px; border-radius: 9px; background: url("/art/logo-mark.png") center / contain no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4); } /* 42px matches the search box's own height (.site-search input/button), the tallest thing already in this row, so the mark is as large as it can be without making the header any taller */
.site-search { display: flex; flex: 1 1 320px; max-width: 620px; }
.site-search input { flex: 1; min-width: 0; height: 42px; padding: 0 1rem; border: 1px solid var(--edge); border-right: 0; border-radius: 21px 0 0 21px; background: #fff; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .22); font: 400 1rem var(--ui); color: var(--ink); }
.site-search button { height: 42px; padding: 0 1.1rem; border: 1px solid var(--edge); border-radius: 0 21px 21px 0; background: var(--metal); font: 600 .92rem var(--ui); color: var(--ink); cursor: pointer; text-shadow: 0 1px 0 #fff; }
.site-search button:active { background: linear-gradient(#b9b8b3, #d3d2cd); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
.site-nav { display: inline-flex; margin-left: auto; border: 1px solid var(--edge); border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.site-nav a { padding: .55rem .95rem; font: 600 .9rem var(--ui); text-decoration: none; color: var(--ink) !important; background: var(--metal); text-shadow: 0 1px 0 rgba(255, 255, 255, .8); white-space: nowrap; }
.site-nav a + a { border-left: 1px solid var(--edge); }
.site-nav a:hover { filter: brightness(1.05); }
.site-nav a[aria-current] { background: linear-gradient(#aeada8, #cdccc7); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
/* The strip is a clipped panel: js/header-scroll.js sets its height and slides the row up under the main header 1 px per px scrolled. Its bottom line lives on the
   row so it travels with the text and is clipped away with it. */
.subbar { background: #0e0e10; overflow: hidden; }
.subbar__row { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .1rem 1.5rem; padding: .28rem 0; }
.subbar__row::after { content: ""; position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: 0; height: 1px; background: #000; }
.notice { margin: 0; font: 500 .72rem/1.4 var(--mono); color: var(--on-dark-2); }
.subnav { display: flex; gap: 1.1rem; }
.subnav a { font: 500 .78rem var(--ui); color: var(--on-dark-2); text-decoration: none; }
.subnav a:hover, .subnav a[aria-current] { color: #fff; text-decoration: underline; }
html, body { overflow-anchor: none; } /* the header changes height while scrolling; the browser must not "correct" the scroll position for that */
html { scroll-padding-top: calc(var(--header-max-h, 0px) + 8px); } /* focus and anchor jumps land below the sticky header, not under it */
.site-footer::after { content: ""; display: block; height: var(--subbar-hidden, 0px); } /* keeps the document's total height constant while the strip is tucked away */
.site-footer { margin-top: 3.5rem; padding: 1.6rem 0 2rem; background: #0d0d0f; border-top: 1px solid #000; color: var(--on-dark-2); font-size: .88rem; }
.site-footer p { max-width: 80ch; margin: 0; }
.site-footer b { color: var(--on-dark); }

/* ---------- type helpers ---------- */
.kicker { margin: 0 0 .5rem; font: 500 .72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--on-dark-2); }
.kicker a { color: inherit; }
/* Compact "← Back to X" link (web/js/lib/breadcrumb.js): same kicker line as before, just one real link. */
/* Breadcrumb (web/js/lib/breadcrumb.js): an <ol> laid out as the site's usual "A / B / C" text line. */
.crumb-list { display: inline; list-style: none; margin: 0; padding: 0; }
.crumb-list li { display: inline; }
.crumb-list li + li::before { content: ' / '; }
.crumb-list li[aria-current] { color: inherit; }
.lede { max-width: 60ch; font-size: 1.02rem; color: var(--on-dark); }
.note { max-width: 70ch; font-size: .9rem; color: var(--ink-2); }
.note--dark { color: var(--on-dark-2); }
.help { font-size: .84rem; color: var(--ink-2); }
.help--dark { color: var(--on-dark-2); }
.empty { margin: 0; padding: .9rem 1.1rem; list-style: none; border-radius: var(--r); background: rgba(0, 0, 0, .3); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5); color: var(--on-dark); font-style: italic; }
.flag-label { font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.count { margin: 0; font: 500 .8rem var(--mono); }
.count-badge { display: inline-block; margin-left: .5rem; padding: 0 .5rem; border-radius: 9px; background: #0d0d0f; box-shadow: inset 0 1px 3px #000, 0 1px 0 rgba(255, 255, 255, .1); color: var(--on-dark-2); font: 600 .74rem/1.5 var(--mono); vertical-align: middle; }
.shelf-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem; margin: 2.2rem 0 1rem; font-size: 1.25rem; }
.shelf-h span { font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--on-dark-2); }

/* ---------- buttons: aluminium (neutral) / blue gel (community download) / black chrome (official buy) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 44px; padding: .5rem 1rem; font: 600 .93rem/1.1 var(--ui); text-decoration: none; text-align: center; color: var(--ink) !important; cursor: pointer;
  border: 1px solid var(--edge); border-radius: var(--r); background: var(--metal); text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 1px 3px rgba(0, 0, 0, .45); transition: filter .12s, box-shadow .12s, transform .12s; }
.btn:hover { filter: brightness(1.05); }
.btn:active, .btn[aria-pressed="true"] { background: linear-gradient(#b9b8b3, #d3d2cd); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .5); transform: translateY(1px); }
.btn--download { color: #fff !important; border-color: var(--blue-edge); text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); background: linear-gradient(#3a76e0 0%, var(--blue-2) 50%, var(--blue-3) 52%, #1f5fd2 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 1px 4px rgba(0, 0, 0, .55); }
.btn--download:active { background: linear-gradient(#173f92, #1d55c2); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55); }
.btn--buy { color: #f3f1ec !important; border-color: #000; text-shadow: 0 -1px 0 rgba(0, 0, 0, .8); background: linear-gradient(var(--chrome-1) 0%, var(--chrome-2) 50%, var(--chrome-3) 52%, #252529 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 2px 5px rgba(0, 0, 0, .6); }
.btn--buy:active { background: linear-gradient(#0d0d0f, #26262a); box-shadow: inset 0 2px 6px #000; }
.btn--small { min-height: 40px; padding: .4rem .8rem; font-size: .88rem; }
.btn--big { min-height: 52px; padding: .8rem 1.3rem; font-size: 1.05rem; }
.btn--quiet { background: transparent; box-shadow: none; border-color: transparent; text-decoration: underline; text-shadow: none; }
.btn--remove { color: #fff !important; border-color: #6e150c; text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); background: linear-gradient(#d6432f 0%, #b5342a 50%, #963022 52%, #7a1e14 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 4px rgba(0, 0, 0, .5); }
.btn--remove:active { background: linear-gradient(#5c130a, #7a1e14); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55); }
.btn[hidden] { display: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .6rem; }
input[type="file"] { max-width: 100%; font: 500 .9rem var(--ui); }
input[type="file"]::file-selector-button { margin-right: .8rem; min-height: 40px; padding: .4rem .9rem; font: 600 .88rem/1.1 var(--ui); color: var(--ink); cursor: pointer; border: 1px solid var(--edge); border-radius: var(--r); background: var(--metal); text-shadow: 0 1px 0 rgba(255, 255, 255, .85); box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 1px 3px rgba(0, 0, 0, .45); }
input[type="file"]::file-selector-button:hover { filter: brightness(1.05); }

/* ---------- plates (labels are always words) ---------- */
.plate { display: inline-block; padding: .2em .6em .16em; font: 600 .7rem/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: linear-gradient(#f6f5f2, #dedcd6); border: 1px solid var(--line); border-radius: 4px; }
.plate--official { color: #f3f1ec; background: linear-gradient(#48484e, #141416); border-color: #000; }
.plate--community { color: #fff; background: linear-gradient(#346fd6, var(--blue-3)); border-color: var(--blue-edge); }
.plate--curated { color: var(--ink); background: linear-gradient(#fcfcfb 0%, #e6e4de 48%, #c3c0b8 52%, #ece9e2 100%); border-color: #8c887f; } /* silver/chrome, distinct from the official plate's black chrome */
.plate--fan-made { color: #fff; background: linear-gradient(var(--green-1), var(--green-2)); border-color: var(--green-edge); }
.plate--unreleased { color: #fff; background: linear-gradient(var(--curated-1), var(--curated-2)); border-color: var(--curated-edge); } /* matches the red page background, so the kind badge stands out where the page itself says "not a catalog release" */
.plate--demo { background: linear-gradient(#f4ecd2, #e6d9a8); border-color: #a9995c; }
.plate--todo { border-style: dashed; }
.plate--cert-confirmed { background: #d9ecdf; border-color: #2f6b52; color: #123c2b; }
.plate--cert-disputed { background: #f6dcd2; border-color: #a73a1d; color: #5e1405; }
.plate--cert-speculated { background: #f7edc6; border-color: #8a6100; color: #4a3300; }
.plate--cert-unknown, .plate--cert-mixed { border-style: dashed; }

/* ---------- panels: matte aluminium ---------- */
.panel, .create__panel { background: linear-gradient(var(--surface-1), var(--surface-2)); border: 1px solid var(--edge); border-radius: var(--r-lg); padding: 1.2rem 1.4rem; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 8px 20px rgba(0, 0, 0, .45); }
.panel-inset { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--r); background: linear-gradient(var(--blue-tint-1), var(--blue-tint-2)); border: 1px solid #6a89cf; box-shadow: inset 0 2px 5px rgba(0, 20, 80, .2); }
.panel--warn { border-color: #a73a1d; background: linear-gradient(#fbeee8, #f3d6ca); }
.panel + .panel, .panel + .wrap .panel { margin-top: 1.2rem; }
.panel:has(> :only-child:empty) { display: none; } /* a step that has nothing to show yet (import steps 2-4) */
.panel h2 { font-size: 1.25rem; }
.panel__hint { font-size: .86rem; color: var(--ink-2); margin-top: .5rem; }

/* ---------- forms: inset fields ---------- */
label { font-weight: 600; font-size: .92rem; }
.field { display: flex; flex-direction: column; gap: .3rem; }
input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="url"], input[type="date"], input[type="password"], select, textarea { width: 100%; padding: .55rem .7rem; color: var(--ink); background: #fff; border: 1px solid #8b8e94; border-radius: var(--r-sm); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .16); font: 400 .98rem var(--ui); }
textarea { resize: vertical; }
select { background: var(--metal); box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(0, 0, 0, .3); font-weight: 500; }
input[type="color"] { width: 3rem; height: 2.4rem; padding: 0; border: 1px solid #8b8e94; border-radius: var(--r-sm); background: #fff; }
input[type="range"] { width: 100%; accent-color: var(--blue-2); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin-bottom: .3rem; font-weight: 600; font-size: .92rem; }
.form { display: grid; gap: .5rem; max-width: 640px; }
.form--wide { max-width: 760px; }
.form label { margin-top: .4rem; }
.form-status { min-height: 1.4em; margin: .4rem 0 0; font-weight: 600; }
.form-error { color: #7d1200; font-weight: 600; }
.check { display: flex; align-items: center; gap: .55rem; }
.check input, .radio input { width: 1.15rem; height: 1.15rem; accent-color: var(--blue-2); }
.check label, .radio label { font-weight: 500; }
.radios { display: grid; gap: .3rem; }
.radios--row { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.radio { display: flex; align-items: center; gap: .45rem; }

/* segmented chips (filters) */
.chips { display: flex; flex-wrap: wrap; align-items: end; gap: .3rem 0; }
.chips legend { width: 100%; }
.chip { display: contents; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip label { display: inline-block; padding: .42rem .8rem; margin: 0 -1px 0 0; font: 600 .86rem var(--ui); color: var(--ink); cursor: pointer; background: var(--metal); border: 1px solid var(--edge); text-shadow: 0 1px 0 rgba(255, 255, 255, .8); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset; }
.chip:first-of-type label { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.chip:last-of-type label { border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-right: 0; }
.chip label:hover { filter: brightness(1.05); }
.chip input:checked + label { background: linear-gradient(#b0afaa, #cfcec9); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4); }
.chip input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; position: relative; }

/* ---------- toolbar (browse / editions pages) ---------- */
.toolbar { display: grid; grid-template-columns: minmax(220px, 1.1fr) auto auto auto; gap: .9rem 1.4rem; align-items: end; margin: 1rem 0 1.4rem; padding: .9rem 1.1rem; border: 1px solid var(--edge); border-radius: var(--r-lg); background: var(--brushed), linear-gradient(#f2f2f0, #d5d4cf); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 14px rgba(0, 0, 0, .4); }
.toolbar--compact { grid-template-columns: repeat(auto-fit, minmax(150px, max-content)); align-items: start; }
.toolbar .count { text-align: right; align-self: center; }
.field--sort { min-width: 150px; }

/* ---------- homepage: tagline + rows ---------- */
.tagline { padding: 1.5rem 0 .2rem; }
.tagline h1 { margin-bottom: .25rem; }
.tagline p { margin: 0; color: var(--on-dark-2); max-width: 70ch; }
.row { margin-top: 2rem; }
.row__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .2rem; }
.row__head h2 { margin: 0; font-size: 1.25rem; }
.row__tools { display: flex; align-items: center; gap: .9rem; }
.row__head > .row__tools, .row__head > .view-all { margin-left: auto; } /* controls stay at the right edge even when a long heading pushes them onto their own line */
.row__nav { display: flex; gap: .4rem; }
.row__nav[hidden] { display: none; }
.view-all { font: 600 .9rem var(--ui); text-decoration: none; }
.view-all:hover { text-decoration: underline; }
.nav-btn { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; font: 700 1.25rem/1 var(--ui); color: var(--ink); cursor: pointer; border: 1px solid var(--edge); border-radius: 50%; background: var(--metal); box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 1px 3px rgba(0, 0, 0, .5); }
.nav-btn:active:not(:disabled) { background: linear-gradient(#b9b8b3, #d3d2cd); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4); }
.nav-btn:disabled { opacity: .4; cursor: default; }
.nav-btn span { transform: translateY(-1px); }
.row__stage { position: relative; isolation: isolate; }
.row--artists .row__stage { margin: 0 -8px; }
.row__track { position: relative; z-index: 1; padding: 22px 8px 10px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 8px; overscroll-behavior-x: contain; scrollbar-width: none; }
.row__track::-webkit-scrollbar { display: none; } /* arrows, swipe and keys still scroll; the bar just looked bad under the shelf */
@media (pointer: coarse) { .row__track { scroll-snap-type: x mandatory; } } /* touch: follow the finger, settle on a whole card when released */
.row__track.is-gliding { scroll-snap-type: none; } /* while an arrow click drives the scroll */
.row__track:focus-visible { outline-offset: -2px; }
.row__list { display: flex; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
.card { flex: none; scroll-snap-align: start; }
.card__link { display: block; color: inherit; text-decoration: none; border-radius: var(--r-sm); }
.card__link:focus-visible { outline: 3px solid var(--focus-dark); outline-offset: 5px; }
.card__text { display: flex; flex-direction: column; gap: .12rem; margin-top: 1rem; }
.card__text--center { align-items: center; text-align: center; }
.card__title { font: 600 .98rem/1.25 var(--ui); }
.card__by { font-size: .86rem; color: var(--on-dark-2); }
.card__meta { font: 500 .72rem var(--mono); color: var(--on-dark-2); }
.card__facts { font-size: .8rem; color: var(--on-dark-2); }
.card__facts--printable.has { color: var(--link-dark); font-weight: 600; }
.card:hover .card__title { text-decoration: underline; text-underline-offset: 3px; }
/* ---------- the cabinet: ONE construction for every shelf row (album rows, edition rows, artist collections) ----------
   .row__cabinet (back panel + shelf) sits behind the scrolling track; .row__frame (slim sides and top rail) sits in front of it, so covers slide in beneath the edges.
   The stage is only as wide as its contents, up to the available width, and left-aligned: one release gets a compact compartment, a long row scrolls.
   Every object rests on the same baseline: its art box is --art-h tall and objects are bottom-aligned in it; the shelf surface runs --rest behind that line. */
.row--albums, .row--editions { --pad: 12px; --surf: 26px; --face: 12px; --rest: 11px; --lift: 26px; --side: 8px; --rail: 6px; --shelf-h: calc(var(--surf) + var(--face)); --cab-h: calc(var(--lift) + var(--art-h) - var(--rest) + var(--shelf-h)); }
.row--albums { --album-w: 204px; --art-h: var(--album-w); }
.row--editions { --ed-s: 176px; --art-h: calc(var(--ed-s) + 3px); }
.row--albums .row__stage, .row--editions .row__stage { width: fit-content; max-width: 100%; }
.row--albums .row__track, .row--editions .row__track { padding: var(--lift) calc(var(--side) + var(--pad)) 12px; scroll-padding: 0 calc(var(--side) + var(--pad)); }
.row__cabinet, .row__frame { position: absolute; left: 0; right: 0; top: 0; height: var(--cab-h); pointer-events: none; }
.row__cabinet { z-index: 0; border-radius: 4px 4px 2px 2px; /* a subtly recessed back panel: darker than the page, shaded from the top and sides, with a soft shadow under the shelf */
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .006) 0 1px, transparent 1px 6px), linear-gradient(#09080a, #121013 45%, #181519);
  box-shadow: inset 0 14px 18px -6px rgba(0, 0, 0, .8), inset 12px 0 14px -8px rgba(0, 0, 0, .7), inset -12px 0 14px -8px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .05), 0 12px 16px -8px rgba(0, 0, 0, .7); }
.row__shelf { position: absolute; left: 0; right: 0; bottom: 0; height: var(--shelf-h); border-radius: 0 0 2px 2px;
  background: linear-gradient(#4f3d2d 0, #7d6349 calc(var(--surf) - 1px), #a48865 calc(var(--surf) - 1px), #a48865 var(--surf), var(--wood-1) var(--surf), var(--wood-2) calc(var(--surf) + 8px), var(--wood-3));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .65); }
.row__shelf::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 30px; background: linear-gradient(transparent, rgba(0, 0, 0, .38)); } /* the panel darkens where it meets the shelf */
.row__frame { z-index: 2; box-sizing: border-box; padding: var(--rail) var(--side) 0; border-radius: 4px 4px 2px 2px;
  /* ONE piece of walnut (one gradient across rail and both sides, so the corners are seamless) with the opening cut out by a mask. A single highlight runs round the opening. */
  background:
    linear-gradient(rgba(255, 255, 255, .13), rgba(255, 255, 255, .13)) top / 100% 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)) var(--side) calc(var(--rail) - 1px) / calc(100% - 2 * var(--side)) 1px no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px calc(100% - 1px), rgba(255, 255, 255, .1) calc(100% - 1px) 100%) calc(var(--side) - 1px) var(--rail) / calc(100% - 2 * var(--side) + 2px) calc(100% - var(--rail)) no-repeat, /* both inner side edges, one layer (hard-stop gradient) instead of two identical-except-mirrored ones */
    linear-gradient(#54402f, #3b2e24 30%, #2a2019);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .row__frame { display: none; } } /* no mask support: skip the frame rather than draw it solid over the covers */
.row--albums .card__art::after, .row--editions .card__art::after { display: none; }
/* contact shadow on the shelf surface, hugging the object's base and spilling toward the viewer; it softens when the object lifts */
.row--albums .card__art::before, .row--editions .card__art::before { content: ""; position: absolute; left: 0; width: var(--ow, 100%); bottom: -7px; height: 14px; background: radial-gradient(ellipse at 50% 28%, rgba(0, 0, 0, .72), rgba(0, 0, 0, .3) 45%, transparent 72%); pointer-events: none; transition: opacity .18s ease-out, transform .18s ease-out; }
.row--albums .card__text, .row--editions .card__text { margin-top: calc(var(--shelf-h) - var(--rest) + 14px); } /* labels sit below the cabinet, under their own object */
@media (hover: hover) {
  .row--albums .card__link:hover .card__art::before, .row--albums .card__link:focus-visible .card__art::before, .row--editions .card__link:hover .card__art::before, .row--editions .card__link:focus-visible .card__art::before { opacity: .5; transform: scale(.92, 1.15); }
}

/* album sleeve card. In a browse grid each card carries a ledge that reaches half the column gap either side, with no lateral shadow, so neighbours join into one strip. */
.card--release { --surf: 26px; --face: 12px; --rest: 11px; width: 204px; }
.row--albums .card--release { width: var(--album-w); }
.card--release .card__art { position: relative; display: block; isolation: isolate; } /* own stacking context: shelf < contact shadow < cover, so a cover always stands ON the shelf */
.card--release .obj { z-index: 2; }
.card--release .card__art::after { content: ""; position: absolute; z-index: 0; left: calc(var(--col-gap, 1.2rem) / -2); right: calc(var(--col-gap, 1.2rem) / -2); top: -22px; bottom: calc(var(--rest) - var(--surf) - var(--face) - 9px);
  background: /* the cabinet's materials as a strip: shelf (surface, lit edge, face, shadow tail) at the bottom, the panel darkening above it, the panel, and a top rail */
    linear-gradient(#4f3d2d 0, #7d6349 calc(var(--surf) - 1px), #a48865 calc(var(--surf) - 1px), #a48865 var(--surf), var(--wood-1) var(--surf), var(--wood-2) calc(var(--surf) + 8px), var(--wood-3) calc(var(--surf) + var(--face)), rgba(0, 0, 0, .55) calc(var(--surf) + var(--face)), transparent calc(var(--surf) + var(--face) + 9px)) left bottom / 100% calc(var(--surf) + var(--face) + 9px) no-repeat,
    linear-gradient(transparent, rgba(0, 0, 0, .38)) left bottom calc(var(--surf) + var(--face) + 9px) / 100% 30px no-repeat,
    linear-gradient(#4a3a2c, #33281f 70%, #221a14) top / 100% 5px no-repeat,
    linear-gradient(rgba(0, 0, 0, .5), transparent) 0 5px / 100% 14px no-repeat,
    linear-gradient(#09080a, #121013 45%, #181519); }
.card--release .card__art::before { content: ""; position: absolute; z-index: 1; left: 1%; right: 1%; bottom: -7px; height: 14px; background: radial-gradient(ellipse at 50% 28%, rgba(0, 0, 0, .72), rgba(0, 0, 0, .3) 45%, transparent 72%); pointer-events: none; transition: opacity .18s ease-out, transform .18s ease-out; }
.card--release .card__text { margin-top: calc(var(--surf) + var(--face) - var(--rest) + 12px); }
.card--release .obj__body { transition: transform .18s ease-out, box-shadow .18s ease-out; }
@media (hover: hover) {
  .card--release .card__link:hover .obj__body, .card--release .card__link:focus-visible .obj__body { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 1px 1px 0 1px #ddd6c4, 2px 2px 0 1px #b9b19d, 0 12px 12px -6px rgba(0, 0, 0, .7); }
  .card--release .card__link:hover .card__art::before, .card--release .card__link:focus-visible .card__art::before { opacity: .5; transform: scale(.92, 1.15); }
}
/* downloadable edition card: the case or cassette itself stands on the shelf (no tile, no base of its own). Objects keep their own proportions, are
   bottom-aligned on the shared baseline, and share the album cards' left edge with their labels. */
.card--edition { width: calc(var(--ed-s, 176px) + 48px); }
.card__art--case { position: relative; display: flex; align-items: flex-end; justify-content: center; height: var(--art-h); }
.card__art--case { --ow: var(--ed-s); }
.card__art--cassette { --ow: calc(var(--ed-s) * .66); }
.card--edition .obj { --s: var(--ed-s); position: relative; z-index: 1; margin-bottom: -3px; transition: transform .18s ease-out; } /* the SVG carries ~3px of padding below the case */
@media (hover: hover) { .card--edition .card__link:hover .obj, .card--edition .card__link:focus-visible .obj { transform: translateY(-6px); } }
.card--edition .plate { align-self: flex-start; margin-top: auto; } /* plates share one baseline: the card fills the row height and the plate sinks to the bottom */
.card--edition, .card--edition .card__link, .card--edition .card__text { display: flex; flex-direction: column; }
.card--edition .card__link, .card--edition .card__text { flex: 1; }
.card--edition .card__facts { margin-bottom: .35rem; }
.card--artist { width: 176px; }
.card--artist-wide { width: auto; }
.portrait { display: block; width: var(--pd, 132px); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; overflow: hidden; background: #0c0c0e; box-shadow: 0 0 0 2px #0a0a0b, 0 0 0 4px #9a9891, 0 8px 14px rgba(0, 0, 0, .55); }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait--large { --pd: 156px; }
@media (hover: hover) { .card--artist .card__link:hover .portrait { box-shadow: 0 0 0 2px #0a0a0b, 0 0 0 4px #d5d3cd, 0 10px 16px rgba(0, 0, 0, .6); } }
.grid { --col-gap: 1.2rem; list-style: none; margin: 0; padding: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(204px, 1fr)); gap: 2.2rem 1.2rem; }
.grid .card { width: auto; }
.grid:has(> .card--release) { padding-top: 22px; row-gap: 2.8rem; } /* room for the strip's panel above each row of covers */
.grid--artists { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ---------- physical objects ---------- */
.obj { --s: 200px; position: relative; width: var(--s); aspect-ratio: 1; }
.obj__shadow { position: absolute; left: 4%; right: 4%; bottom: -3.5%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .7), transparent 70%); filter: blur(4px); }
.obj__body { position: absolute; inset: 0; border-radius: 2px; background: #1a1a1a; box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 1px 1px 0 1px #ddd9cf, 2px 2px 0 1px #b8b4a8, 0 3px 6px rgba(0, 0, 0, .45); }
.art { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.art--bleed img { inset: auto; left: 50%; top: 50%; width: var(--iw); height: var(--ih); max-width: none; object-fit: fill; transform: translate(-50%, -50%); } /* PNGs include printing bleed: scale so only the finished size shows, same ratio on both axes */
.obj__sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .3) 0, rgba(255, 255, 255, .14) 1.4%, transparent 4.5%), linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .05) 30%, transparent 48%, transparent 72%, rgba(0, 0, 0, .16) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.obj--tile { width: 100%; }
.obj--scene { aspect-ratio: auto; height: auto; } /* jewel case / cassette case cards: the SVG scene sets the shape */
.obj--scene .scene { display: block; width: 100%; height: auto; overflow: visible; }
.obj--cassette { width: calc(var(--s) * .66); }
/* cassette: clear case with thickness + hinge + fitted J-card, and a molded cassette pulled part-way out.
   Layout is in percent of the whole object; the case and the tape are containers so their details scale together. */


/* ---------- product gallery: main view, labelled thumbnails, enlarged inspection ---------- */
.gallery { --focus: var(--focus-dark); }
.gallery [hidden] { display: none !important; }
.gallery__view { container-type: inline-size; aspect-ratio: 4 / 3; max-height: max(15rem, min(72vh, calc(100vh - 21rem - var(--header-max-h, 0px)))); width: 100%; display: grid; border-radius: var(--r-lg);
  background: radial-gradient(ellipse 85% 70% at 50% 38%, #46444b 0%, #2a282e 55%, #18171a 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 14px 34px rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .45); touch-action: pan-y; }
.gallery__view .scene { width: 100%; height: 100%; display: block; }
.gallery__view.is-swap .scene { animation: gal-in .18s ease-out; }
@keyframes gal-in { from { opacity: .2; } to { opacity: 1; } }
.gallery__tools { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; }
.gallery__nav { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); color: #fff; background: rgba(255, 255, 255, .08); font: 400 1.7rem/1 var(--ui); cursor: pointer; display: grid; place-items: center; padding: 0 0 .15rem; }
.gallery__nav:hover { background: rgba(255, 255, 255, .18); }
.gallery__status { flex: 1; margin: 0; text-align: center; font: 600 .86rem var(--mono); color: var(--on-dark); }
.gallery__caption { margin: .55rem 0 .5rem; font: 500 .8rem/1.5 var(--mono); color: var(--on-dark-2); }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .8rem; padding: 0; list-style: none; }
.tag { padding: .2rem .6rem; border-radius: 999px; font: 500 .76rem/1.35 var(--ui); color: var(--on-dark); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.tag b { font: 700 .68rem var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.tag--kit { background: rgba(54, 114, 220, .3); box-shadow: inset 0 0 0 1px #6f9bea; }
.tag--none, .tag--prop { background: transparent; box-shadow: none; border: 1px dashed rgba(255, 255, 255, .45); }
.gallery__thumbs { position: relative; display: flex; gap: .55rem; margin: 0 0 .5rem; padding: 0 0 .3rem; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; }
.gallery__thumbs li { flex: 0 0 auto; scroll-snap-align: start; }
.gallery__groups { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 .55rem; }
.gallery__groups[hidden] { display: none; }
.gtab { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .3rem .8rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: var(--on-dark); font: 600 .84rem var(--ui); cursor: pointer; }
.gtab:hover { background: rgba(255, 255, 255, .12); }
.gtab[aria-pressed="true"] { background: linear-gradient(#5b8fe6, #2f66cf); border-color: #8db3f2; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 3px rgba(0, 0, 0, .4); }
.gtab__n { min-width: 1.5em; padding: 0 .35em; border-radius: 999px; background: rgba(0, 0, 0, .3); font: 600 .72rem/1.6 var(--mono); text-align: center; }
.gallery__thumbs li[hidden] { display: none; }
/* The preview's height leaves room for the controls and thumbnails, so on most desktop windows the whole gallery fits and can stay in view. gallery.js adds .is-pinned only when it measurably fits. */
.gallery.is-pinned { position: sticky; top: calc(var(--header-max-h, 0px) + 12px); align-self: start; }
.gallery__notice { margin: 0 0 .3rem; font: 500 .78rem/1.45 var(--mono); color: var(--on-dark-2); }
.gallery__notice b { color: var(--on-dark); }
.thumbs__group { align-self: stretch; display: flex; align-items: center; max-width: 7.5rem; padding: 0 .3rem 0 .6rem; border-left: 1px solid rgba(255, 255, 255, .3); font: 600 .68rem/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--on-dark-2); }
.thumb { display: grid; gap: .3rem; width: 112px; padding: .35rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r); background: rgba(255, 255, 255, .05); color: var(--on-dark); cursor: pointer; font: 600 .74rem/1.25 var(--ui); text-align: center; }
.thumb:hover { background: rgba(255, 255, 255, .1); }
.thumb[aria-pressed="true"] { border-color: #8db3f2; background: rgba(54, 114, 220, .28); box-shadow: 0 0 0 1px #8db3f2; }
.thumb__pic { display: grid; aspect-ratio: 4 / 3; border-radius: 5px; background: radial-gradient(ellipse at 50% 35%, #46444b, #1c1b1f); }
.thumb__pic .scene { width: 100%; height: 100%; }
.gallery__missing { margin: .5rem 0 1rem; font: 500 .76rem/1.5 var(--mono); color: var(--on-dark-2); }
.lightbox { width: min(1100px, 96vw); max-height: 94vh; padding: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--r-lg); color: var(--on-dark); background: #1a191c; --focus: var(--focus-dark); }
.lightbox::backdrop { background: rgba(6, 6, 8, .82); }
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem 1rem; }
.lightbox__title { margin: 0; font-size: 1.05rem; }
.lightbox__body { flex: 1 1 auto; min-height: 0; height: min(72vh, 780px); overflow: auto; overscroll-behavior: contain; margin: 0 1rem; border-radius: var(--r); background: radial-gradient(ellipse 85% 70% at 50% 38%, #46444b 0%, #2a282e 55%, #18171a 100%); }
.lightbox__body .scene { display: block; width: 100%; height: 100%; }
.lightbox__body.is-zoomed .scene { width: 220%; height: 220%; }
.lightbox__caption { margin: .7rem 1rem .4rem; font: 500 .8rem/1.5 var(--mono); color: var(--on-dark-2); }
.lightbox .tags { margin: 0 1rem 1rem; }

/* ---------- edition page: information hierarchy (essentials up top, detail in expandable sections) ---------- */
.folds { margin-top: 1rem; border-top: 1px solid var(--line); }
.fold { border-bottom: 1px solid var(--line); }
.fold > summary { cursor: pointer; padding: .8rem .2rem; font: 600 .98rem var(--ui); list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "+"; font: 600 1.2rem var(--mono); color: var(--ink-2); }
.fold[open] > summary::after { content: "−"; }
.fold > *:not(summary) { padding-bottom: .8rem; }
.fold__h { font-size: 1.05rem; }
.edition-details > .fold { margin-bottom: 1rem; }
.edition-details > .fold > summary { color: var(--on-dark); }
.edition-details > .fold { border-color: rgba(255, 255, 255, .22); }
.edition-details > .fold > summary::after { color: var(--on-dark-2); }
.linklike { border: 0; background: none; padding: 0; font: inherit; color: var(--link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.print-status { margin: .5rem 0 .4rem; font-size: .88rem; }
.print-warn { margin: .5rem 0; padding: .55rem .8rem; border-radius: var(--r-sm); background: #fbeee8; border: 1px solid #a73a1d; font-size: .9rem; }
.essential { margin: .3rem 0 0; font-size: .9rem; }

/* ---------- artist page: portrait + one crate per collection ---------- */
.artist-crumb { padding-top: 1.4rem; margin-bottom: .7rem; }
.artist-head { display: flex; align-items: center; gap: 1.6rem; padding: 0 0 .6rem; }
.artist-head__text { min-width: 0; }
.nameplate { display: inline-block; max-width: 100%; margin: 0 0 .6rem; padding: .3rem 1.1rem .35rem; border-radius: var(--r-sm); background: var(--brushed), linear-gradient(#f6f6f4, #cccbc5); border: 1px solid var(--edge); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 4px 10px rgba(0, 0, 0, .45); }
.nameplate h1 { margin: 0; color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .7); font-size: clamp(1.5rem, 3vw, 2.3rem); }
.artist-head__bio { max-width: 62ch; margin-bottom: .4rem; }
.artist-head__meta { margin-bottom: .6rem; font: 500 .78rem var(--mono); color: var(--on-dark-2); }
.collections { display: grid; gap: 2.6rem; margin-top: 1.4rem; } /* one full-width shelf per collection */
.collection { min-width: 0; }
.collection__title { margin: 0 0 .6rem; font-size: 1.05rem; }
.crate { --sw: 214px; --lip: 24px; list-style: none; margin: 0; padding: 46px 12px 0; display: flex; flex-wrap: wrap; gap: 42px 16px; width: 100%; perspective: 1100px; /* column-gap keeps the box fronts (they fill their slot edge to edge) from touching their neighbour */
  border-radius: var(--r) var(--r) 0 0; background: linear-gradient(#0c0b0d, #181518 75%); box-shadow: inset 0 12px 20px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 12px 22px rgba(0, 0, 0, .5); }
.slot { position: relative; flex: none; display: flex; width: var(--sw); padding: 0 8px; } /* flex: boxes in one row share a height, so their labels line up */
.slot__link { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; border-radius: 3px; --focus: var(--focus-dark); }
/* The default outline would be painted UNDER the crate's positioned layers, so the ring is drawn on the sleeve and label card instead. */
.slot__link:focus-visible { outline: none; }
.slot__link:focus-visible .tab__card { outline: 3px solid var(--focus-dark); outline-offset: 3px; }
.slot__link:focus-visible .obj__body { box-shadow: 0 0 0 3px var(--focus-dark), 0 0 0 4px #000; }
.slot__link .obj { position: relative; z-index: 1; }
/* The sleeve stands in the box: a gentle shade darkens its lower part where it enters the box front. It stays put when the sleeve lifts, so the sleeve slides up out of it. */
.slot__bay { position: relative; display: block; }
.slot__bay::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: calc(var(--lip) + 34px); pointer-events: none; background: linear-gradient(transparent, rgba(0, 0, 0, .5)); }
.slot__under { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 34px; overflow: hidden; pointer-events: none; }
.under { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1; }
.under__body { position: absolute; inset: 0; border-radius: 2px; background: #1a1a1a; } /* this copy never lifts */
.slot__link .obj__body { transform-origin: 50% 100%; transition: transform .24s cubic-bezier(.2, .75, .25, 1), box-shadow .24s ease; will-change: transform; }
.tab { --hole-top: 9px; --hole-h: 10px; --hole-w: min(22%, 48px); position: relative; z-index: 3; flex: 1; transition: transform .2s ease-out, box-shadow .2s ease-out; display: flex; flex-direction: column; margin: calc(var(--lip) * -1) -8px 0; padding: calc(var(--lip) + 10px) 12px 12px; border-top: 1px solid transparent; box-shadow: 0 -3px 5px rgba(0, 0, 0, .5); }
/* The wood is a layer of its own with a real cut-out: a finger pull you can see the album through (the sleeve, or the box interior once it is lifted out). */
.tab::before { content: ""; position: absolute; z-index: -1; top: -1px; left: 0; right: 0; bottom: 0; background: linear-gradient(var(--wood-1) 0, var(--wood-2) 12%, var(--wood-3) 100%); border-top: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 10' preserveAspectRatio='none'%3E%3Crect width='48' height='10' rx='5' fill='%23000'/%3E%3C/svg%3E");
  mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 10' preserveAspectRatio='none'%3E%3Crect width='48' height='10' rx='5' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%, var(--hole-w) var(--hole-h); mask-size: 100% 100%, var(--hole-w) var(--hole-h);
  -webkit-mask-position: 0 0, 50% var(--hole-top); mask-position: 0 0, 50% var(--hole-top);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: xor; mask-composite: exclude; }
.tab__card { display: block; flex: 1; padding: .4rem .55rem .45rem; color: var(--ink); background: linear-gradient(#f7f6f3, #e5e3de); border-radius: 2px; box-shadow: 0 0 0 1px #6d6b66, 0 2px 3px rgba(0, 0, 0, .6); }
.tab::after { content: ""; position: absolute; left: 50%; top: var(--hole-top); width: var(--hole-w); height: var(--hole-h); transform: translateX(-50%); border-radius: 6px; pointer-events: none; /* rim of the cut-out: no fill */
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .16), 0 -1px 0 rgba(0, 0, 0, .55); }
.tab__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font: 600 .95rem/1.2 var(--ui); } /* clamps at two lines; no extra space is reserved */
.tab__meta, .tab__formats, .tab__count { display: block; font: 500 .72rem/1.28 var(--mono); color: var(--ink-2); }
.tab__formats, .tab__count { margin-top: .1rem; padding-top: .1rem; border-top: 1px dotted #8a867d; overflow-wrap: anywhere; } /* dotted dividers only BETWEEN the metadata lines, never under the title */
@media (hover: hover) and (min-width: 761px) {
  .slot__link:hover .obj__body, .slot__link:focus-visible .obj__body { transform: translateY(-11%) rotateX(-8deg) scale(1.03); box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 1px 1px 0 1px #ddd9cf, 2px 2px 0 1px #b8b4a8, 0 26px 24px -12px rgba(0, 0, 0, .8), 0 8px 12px rgba(0, 0, 0, .45); }
  .slot__link:focus-visible .obj__body { box-shadow: 0 0 0 3px var(--focus-dark), 0 0 0 4px #000, 0 26px 24px -12px rgba(0, 0, 0, .8), 0 8px 12px rgba(0, 0, 0, .45); }
  .slot__link:hover, .slot__link:focus-visible { z-index: 2; }
  .slot__link:hover .tab, .slot__link:focus-visible .tab { transform: translateY(-2px); box-shadow: 0 -5px 8px rgba(0, 0, 0, .55); }
}
@media (hover: none), (max-width: 760px) { /* touch and small screens: whole sleeves on a shelf, tap to open, no hover needed */
  .crate { --lip: 0px; width: 100%; padding-top: 16px; perspective: none; gap: 28px 12px; }
  .slot { width: calc(50% - 6px); } /* accounts for the crate's column-gap, so two still fit per row */
  .tab { --hole-top: 4px; --hole-h: 8px; margin-top: 0; padding: 18px 8px 12px; }
  .tab__formats, .tab__count { font-size: .68rem; } /* keeps "2 printable editions" on one line in the narrower phone label */
  .slot__bay::after { display: none; } /* phone: the whole cover sits above the box front, so there is no mouth to shade */
  .slot__link:active .obj__body { transform: scale(.975); }
  }

/* ---------- album + edition pages ---------- */
/* Unreleased/community-assembled/imagined projects (no catalog release exists) get a red-tinted page, the same red family as the curated-edition plate, so the whole page reads as "off the catalog" before you read a word. */
/* Themed pages: their gradients are lighter than the graphite page, so the secondary text and link colours are lifted to stay at 4.5:1 or better on every stop (measured in a11y review). */
.album-page--unreleased, .edition-page--community, .edition-page--original-cover { --on-dark-2: #dcd8d0; --link-dark: #cfe0ff; }
.album-page--unreleased { background: radial-gradient(1000px 380px at 50% -40px, rgba(255, 255, 255, .06), transparent 72%), linear-gradient(#3a1712, var(--curated-2) 55%, var(--curated-edge)); }
/* An edition page picks up the same page-tinted-to-its-badge treatment, keyed to its origin instead of the project's kind: community edition (green), original-cover edition (blue). Curated (silver) stays on the plain page, since a silver page reads as washed-out rather than themed. */
.edition-page--community { background: radial-gradient(1000px 380px at 50% -40px, rgba(255, 255, 255, .06), transparent 72%), linear-gradient(#0f2c1a, #176a38 55%, var(--green-edge)); }
.edition-page--original-cover { background: radial-gradient(1000px 380px at 50% -40px, rgba(255, 255, 255, .06), transparent 72%), linear-gradient(#122043, var(--blue-3) 55%, var(--blue-edge)); }
/* Shelf Copy curated edition: a bone-white page to match its silver plate. Text that sits on the page itself switches to ink; the dark gallery stage keeps its own light text. */
.edition-page--inlay-curated { --on-dark: var(--ink); --on-dark-2: #4a4843; --link-dark: var(--link); --focus-dark: #1749b8; background: linear-gradient(#f6f3ec, #e9e6dc 55%, #d8d5ca); color: var(--ink); }
.edition-page--inlay-curated .lightbox { --on-dark: #eeece8; --on-dark-2: #b9b5ae; --link-dark: #a9c8ff; --focus-dark: #9cc3ff; } /* the enlarged view is a dark dialog: it keeps light text */
.edition-page--inlay-curated .gallery__nav { color: var(--ink); border-color: rgba(28, 27, 26, .45); background: rgba(28, 27, 26, .06); }
.edition-page--inlay-curated .gallery__nav:hover { background: rgba(28, 27, 26, .14); }
.edition-page--inlay-curated .gtab { border-color: rgba(28, 27, 26, .4); background: rgba(28, 27, 26, .05); }
.edition-page--inlay-curated .gtab:hover { background: rgba(28, 27, 26, .12); }
.edition-page--inlay-curated .gtab[aria-pressed="true"] { border-color: #8db3f2; background: linear-gradient(#5b8fe6, #2f66cf); }
.edition-page--inlay-curated .thumb { border-color: rgba(28, 27, 26, .3); background: rgba(28, 27, 26, .05); }
.edition-page--inlay-curated .lightbox .gallery__nav, .edition-page--inlay-curated .lightbox .btn { color: inherit; }
.album { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); grid-template-areas: "crumb crumb" "stage head" "stage config"; grid-template-rows: auto auto 1fr; column-gap: 1.8rem; row-gap: 1rem; align-items: start; padding-top: 1.4rem; }
/* DOM order is: breadcrumb, title block, gallery, details. That is the reading and keyboard order on phones; on desktop the areas put the gallery on the left. */
.album__crumb { grid-area: crumb; margin: 0; }
.album__head { grid-area: head; }
.album__config { grid-area: config; }
.album__stage { grid-area: stage; min-width: 0; align-self: stretch; } /* spans both right-hand rows, so the (sticky) gallery has the whole height of the details column to travel in. Nothing else lives in this cell. */
.album__head .album__plates { margin-bottom: .5rem; }
.album__head .byline { margin-bottom: .4rem; }
.album__head .kit-includes { margin: 0; }
.print-opts { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid rgba(23, 73, 184, .25); }
.print-opts h3 { margin: 0 0 .4rem; font: 600 .72rem var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); }
.print-notes { margin: 0; padding-left: 1.2rem; font-size: .9rem; }
.album__config h1 { font-size: clamp(1.45rem, 2.3vw, 1.95rem); margin-bottom: .2rem; }
.byline { margin: 0 0 .6rem; color: var(--ink-2); }
.album__plates { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .7rem; }
.plate-line { margin: 0 0 .5rem; }
.album__sum { margin-bottom: .9rem; }
/* Release facts for an official release (date, length, genre, label line, listen links) */
.album__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .9rem; margin: 0 0 .5rem; font-size: .88rem; }
.album__facts dt { font: 600 .7rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.album__facts dd { margin: 0; overflow-wrap: anywhere; }
.track__time { margin-left: auto; font: 500 .8rem var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.off__refs { margin: .5rem 0 0; padding: 0; list-style: none; font-size: .84rem; color: var(--on-dark-2); } /* the format card is dark: light text, light links */
.off__refs a { color: var(--link-dark); }
.off__refs li + li { margin-top: .2rem; }
.artist-head__links { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
.formats legend { margin-bottom: .5rem; font: 600 .72rem var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); }
.fmt-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.fmt-row { position: relative; overflow: hidden; border: 1px solid var(--edge); border-radius: var(--r); background: linear-gradient(#fbfbfa, var(--surface-2)); box-shadow: 0 1px 0 #fff inset, 0 1px 3px rgba(0, 0, 0, .3); }
.fmt-row > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fmt-row > label { display: flex; flex-direction: column; align-items: center; gap: .15rem; height: 100%; min-height: 96px; padding: .6rem .35rem; margin: 0; text-align: center; cursor: pointer; }
.fmt-row > label:hover { background: rgba(255, 255, 255, .55); }
.fmt-row > input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: -3px; }
.fmt-row > label b { font-size: 1.05rem; }
.fmt-row > label small { font: 500 .68rem/1.3 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.fmt-row.is-open { border-color: #16130f; box-shadow: 0 0 0 2px #16130f, 0 3px 8px rgba(0, 0, 0, .4); }
.fmt-row.is-open > label { background: linear-gradient(#c6c5c0, #dddcd7); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35); }
.fmt-row.is-open > label::after { content: ""; width: 14px; height: 14px; margin-top: .1rem; border-radius: 50%; border: 1px solid var(--blue-edge); background: radial-gradient(circle, #fff 0 22%, var(--blue-2) 26%, var(--blue-3)); }
.ficon { flex: none; position: relative; width: 34px; height: 34px; }
.ficon--vinyl, .ficon--cd { border-radius: 50%; background: radial-gradient(circle, #e8e5da 0 12%, #111 13% 16%, transparent 17%), conic-gradient(from 30deg, #2a2a2d, #6b6b70 12%, #232326 25%, #232326 50%, #6b6b70 62%, #232326 75%); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.ficon--cd { background: radial-gradient(circle, #fff 0 11%, transparent 12% 14%, #cfd4dc 15% 100%), conic-gradient(from 20deg, #dfe4ea, #a9b6c8 15%, #f4f6f9 30%, #b7c2d2 50%, #eef1f5 70%, #dfe4ea); }
.ficon--cassette { width: 40px; height: 26px; margin: 4px 0; border-radius: 3px; background: radial-gradient(circle at 30% 55%, #ddd 0 9%, #222 10% 16%, transparent 17%), radial-gradient(circle at 70% 55%, #ddd 0 9%, #222 10% 16%, transparent 17%), linear-gradient(#e6e3d8 0 44%, #333 45%); box-shadow: 0 0 0 1px #000, 0 1px 3px rgba(0, 0, 0, .5); }
.fmt-pick { margin: .9rem 0 0; font-size: .92rem; color: var(--ink-2); }
.fmt-panel { display: none; }
.fmt-panel.is-open { display: block; }
.grp { margin: .9rem 0; }
.grp h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font: 600 .72rem var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); }
.off { margin-bottom: .6rem; padding: .8rem .9rem; color: var(--on-dark); background: linear-gradient(#333337, #161618); border: 1px solid #000; border-radius: var(--r); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 5px rgba(0, 0, 0, .4); }
.off h4 { margin: 0 0 .15rem; }
.off__meta { margin-bottom: .4rem; font: 500 .76rem var(--mono); color: var(--on-dark-2); }
.off__notes { font-size: .9rem; margin: 0; }
.off .fold { margin-bottom: .5rem; border-color: rgba(255, 255, 255, .22); }
.off .fold > summary { padding: .5rem 0; color: var(--on-dark); font-size: .84rem; }
.off .fold > summary::after { color: var(--on-dark-2); }
.off__variants { margin: .3rem 0 .5rem; }
.off__buy { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin-top: .5rem; }
.off__src { margin: 0; font-size: .82rem; color: var(--on-dark-2); }
.off__src strong { padding: 0 .3em; color: #2a2100; background: #e6d9a8; }
.off__none { margin: .4rem 0 0; padding: .4rem .6rem; border: 1px dashed #8c8a84; border-radius: var(--r-sm); font-size: .88rem; font-style: italic; color: var(--on-dark-2); }
.none { margin: 0; padding: .7rem .85rem; border-radius: var(--r-sm); background: linear-gradient(var(--tray-1), var(--tray-2)); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22); }
.ed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ed { position: relative; overflow: hidden; border: 1px solid #7488bd; border-radius: var(--r); background: linear-gradient(#f6f8ff, #dfe7fa); box-shadow: 0 1px 0 #fff inset, 0 1px 3px rgba(0, 0, 0, .3); }
.ed > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ed > label { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: .8rem; align-items: center; margin: 0; padding: .6rem .8rem; cursor: pointer; }
.ed > input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: -3px; }
.ed__thumb .obj { --s: 70px; }
.ed__text { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-width: 0; }
.ed__text small { font-size: .8rem; color: var(--ink-2); }
.ed.is-selected { border-color: var(--blue-edge); background: linear-gradient(#cfdcf8, #bccdf3); box-shadow: inset 0 2px 5px rgba(0, 25, 90, .3), 0 0 0 2px var(--blue-2); }
.ed__sum { color: var(--ink) !important; }
.ed__act { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 .8rem .7rem; }
.grp__lead { margin: 0 0 .5rem; font-size: .92rem; }
.featured { margin-top: 2rem; }
.featured__head { margin-bottom: 1rem; }
.featured__sub { margin-left: .8rem; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--on-dark-2); }

/* featured community editions */
.featured__list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); gap: 1.6rem; justify-content: start; }
.fcard { display: flex; flex-direction: column; gap: .7rem; }
.fcard__stage { position: relative; display: grid; place-items: end center; padding: 1.6rem 1rem 1.1rem; overflow: hidden; border-radius: var(--r-lg); text-decoration: none; background: radial-gradient(ellipse 80% 70% at 50% 30%, #4a4750, #211f24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 10px 24px rgba(0, 0, 0, .45), 0 8px 18px rgba(0, 0, 0, .45); }
.fcard__shelf { position: absolute; left: 0; right: 0; bottom: 0; height: 20%; background: linear-gradient(var(--wood-1), var(--wood-3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.fcard__stage .obj { --s: 196px; position: relative; z-index: 1; transition: transform .2s ease-out; }
@media (hover: hover) { .fcard__stage:hover .obj { transform: translateY(-5px); } }
.fcard__body h3 { margin: 0 0 .1rem; font-size: 1.08rem; }
.fcard__body h3 a { color: var(--on-dark); text-decoration: none; }
.fcard__body h3 a:hover { text-decoration: underline; }
.fcard__by, .fcard__what { margin: .1rem 0 .4rem; font-size: .88rem; color: var(--on-dark-2); }
.featured__all { margin: 0; }

/* tracklist & sources */
.liner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem; margin-top: 2.2rem; }
.liner__cert { font-size: .9rem; color: var(--ink-2); }
.tracks { columns: 2 16rem; column-gap: 2rem; margin: 0; padding: 0; list-style: none; counter-reset: t; }
.track { counter-increment: t; break-inside: avoid; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; padding: .35rem 0; border-bottom: 1px dotted var(--line); }
.track::before { content: counter(t, decimal-leading-zero); width: 2.1em; font: 500 .82rem var(--mono); color: var(--ink-2); }
.track__title { font-weight: 600; }
.track__note { flex-basis: 100%; padding-left: 2.6em; font-size: .84rem; color: var(--ink-2); }
.sources { list-style: none; padding: 0; margin: 0 0 .8rem; }
.sources li { padding: .4rem 0; border-bottom: 1px dotted var(--line); }
.src-date { font: 500 .78rem var(--mono); }
.src-note { display: block; font-size: .86rem; color: var(--ink-2); }
.report { margin-top: 1.6rem; padding: .8rem 1.2rem; }
.report summary { cursor: pointer; font-weight: 600; }
.edition-details { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: .5rem; }
/* kit overview: real pieces at their finished proportions; missing ones are stated, never drawn */
.kit-overview__lead { margin: 0 0 .9rem; }
.kit-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.kit-slot { display: grid; grid-template-rows: auto 1fr; gap: .5rem; padding: .7rem; border-radius: var(--r); background: linear-gradient(#fbfaf8, #ecebe6); box-shadow: inset 0 0 0 1px #b9b6ae; }
.kit-slot--wide { grid-column: 1 / -1; }
.kit-fig { display: grid; gap: .2rem; margin: 0; justify-items: center; }
.kit-fig figcaption { font: 600 .68rem var(--mono); color: var(--ink-2); }
.kit-slot--wide .kit-slot__pics { gap: .4rem; }
.kit-slot--wide .kit-thumb { --h: 96px; }
.kit-slot.is-out { background: transparent; box-shadow: none; border: 1px dashed var(--line); }
.kit-slot__pics { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; min-height: 132px; }
.kit-slot__none { min-height: 132px; border-radius: 4px; background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(0, 0, 0, .05) 8px 9px); }
.kit-thumb { --h: 132px; position: relative; display: block; width: min(calc(var(--h) * var(--r)), 100%); height: auto; aspect-ratio: var(--r); overflow: hidden; background: #1a191c; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 3px 6px rgba(0, 0, 0, .3); }
.kit-thumb--disc { border-radius: 50%; background: radial-gradient(circle, #d9dce1 0 40%, #b4b9c2); }
.kit-slot__text { display: grid; gap: .15rem; align-content: start; }
.kit-slot__text small { font: 500 .74rem/1.4 var(--mono); color: var(--ink-2); }
.kit-overview.is-compact { margin: .6rem 0; }
.kit-overview.is-compact h4 { margin-bottom: .3rem; }
.kit-overview.is-compact .kit-overview__lead { display: none; }
.kit-overview.is-compact .kit-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.kit-overview.is-compact .kit-slot { padding: .45rem; }
.kit-overview.is-compact .kit-slot__pics, .kit-overview.is-compact .kit-slot__none { min-height: 64px; }
.kit-overview.is-compact .kit-thumb, .kit-overview.is-compact .kit-slot--wide .kit-thumb { --h: 56px; }
.kit-overview.is-compact .kit-slot__text b { font-size: .82rem; }
.kit-includes { margin: 0 0 .6rem; }
.tpl-note { margin: .6rem 0 0; padding: .55rem .8rem; border-radius: var(--r-sm); font-size: .9rem; background: var(--blue-tint-1); border: 1px solid #9bb3e3; }
.tpl-note--none { background: #efeeea; border: 1px dashed var(--line); }
.unofficial { margin: .4rem 0 .9rem; padding: .5rem .8rem; border-radius: var(--r-sm); background: linear-gradient(var(--blue-tint-1), var(--blue-tint-2)); border: 1px solid #6a89cf; font-weight: 600; font-size: .9rem; }
.compare { margin-top: 1rem; padding: .8rem .95rem; border-radius: var(--r); background: linear-gradient(var(--tray-1), var(--tray-2)); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22); font-size: .92rem; }
.compare--official { color: var(--on-dark); background: linear-gradient(#333337, #161618); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.compare--official a:not(.btn) { color: var(--link-dark); }
.compare p { margin-bottom: .6rem; }
.size { margin-left: .3em; font-weight: 400; }

/* ---------- edition lists ---------- */
.library { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.lib-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 1.1rem; align-items: center; padding: .7rem 1rem .7rem .8rem; border: 1px solid var(--edge); border-radius: var(--r); background: linear-gradient(var(--surface-1), var(--surface-2)); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 4px 10px rgba(0, 0, 0, .4); }
.lib-row__case .obj { --s: 120px; }
.lib-row__body { display: flex; flex-direction: column; min-width: 0; }
.lib-row__title { margin-bottom: .1rem; font: 700 1.2rem/1.2 var(--ui); }
.lib-row__body .plate { align-self: flex-start; margin-top: .4rem; }
.lib-row__brief { font-size: .84rem; color: var(--ink-2); }
.lib-row__act { display: flex; flex-direction: column; gap: .45rem; align-items: stretch; }
.lib-row__act .btn { white-space: nowrap; }
.lib-row__meta { font-size: .88rem; }

/* ---------- tables and lists in panels ---------- */
.table-scroll { position: relative; overflow-x: auto; } /* relative: clips the absolutely-positioned .sr-only labels inside, which would otherwise widen the page */
table.data { min-width: 640px; font-size: .92rem; }
table.data caption { padding-bottom: .4rem; text-align: left; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
table.data th, table.data td { padding: .5rem .6rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data thead th { color: var(--ink); font: 600 .74rem var(--ui); letter-spacing: .05em; text-transform: uppercase; background: var(--metal); text-shadow: 0 1px 0 #fff; }
table.data tbody th { background: rgba(0, 0, 0, .04); font-weight: 600; }
td.files { white-space: nowrap; }
td.files .btn { margin: 0 .2rem .2rem 0; }
.steps { padding-left: 1.4rem; }
.steps li { max-width: 72ch; margin-bottom: .5rem; }

/* ---------- create / import / moderate / about ---------- */
.create { padding-top: 1.6rem; }
.create__head h1 { margin-bottom: .3rem; }
.save-status { min-height: 1.4em; margin: 0; font: 500 .78rem var(--mono); color: var(--on-dark-2); }
.stepper { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.2rem; padding: 0; }
.stepper li { flex: 1 1 130px; }
.stepper button { width: 100%; min-height: 44px; padding: .5rem .7rem; text-align: left; font: 600 .88rem var(--ui); color: var(--ink); cursor: pointer; background: var(--metal); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 1px 3px rgba(0, 0, 0, .45); text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.stepper button:disabled { cursor: not-allowed; }
.stepper .is-ok button { background: linear-gradient(#cfe6d7, #a9d0b6); border-color: #37764f; }
.stepper .is-warn button { background: linear-gradient(#f0cfcd, #e3aeab); border-color: #96332e; }
.stepper .is-current button { background: linear-gradient(#b0afaa, #cfcec9); border-color: var(--edge); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4); }
.stepper .is-current.is-ok button { background: linear-gradient(#a3cbb0, #8ab89a); border-color: #37764f; }
.stepper .is-current.is-warn button { background: linear-gradient(#dba9a6, #cf908c); border-color: #96332e; }
.stepper button:disabled { opacity: .85; }
.stepper__n { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: .3rem; border: 1px solid currentColor; border-radius: 50%; font: 700 .78rem var(--ui); }
.create__panel > h2 { margin-bottom: .6rem; }
.privacy { max-width: 74ch; padding: .65rem .9rem; border-radius: var(--r-sm); background: linear-gradient(#e4efe7, #d2e5d8); border: 1px solid #2f6b52; box-shadow: inset 0 2px 4px rgba(0, 60, 30, .16); }
.step-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.choice, .ctl, .rights, .details-group, .review, .drop, .tpl, .src-row, .declaration, .layer-row, .warnings { border-radius: var(--r); background: linear-gradient(var(--tray-1), var(--tray-2)); border: 1px solid var(--line); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .18), 0 1px 0 rgba(255, 255, 255, .7); }
.choice { padding: 1rem; display: grid; gap: .6rem; align-content: start; }
.choice h3 { margin: 0; }
.draft-list { list-style: none; display: grid; gap: .6rem; padding: 0; }
.draft-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.rights { padding: .9rem 1rem 1rem; display: grid; gap: .4rem; }
.rights > legend { float: left; width: 100%; margin-bottom: .3rem; } /* a floated legend is laid out inside the box instead of straddling its top border */
.imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.imgs-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: .8rem; }
.imgs-more__h { grid-column: 1 / -1; margin: .4rem 0 0; font-size: .92rem; }
.drop { display: grid; gap: .4rem; align-content: start; padding: 1rem; border-style: dashed; border-width: 2px; }
.drop.is-over { border-color: var(--blue-2); background: linear-gradient(#dbe6fb, #cddcf6); }
.img-box { display: flex; align-items: center; gap: .8rem; }
.img-thumb { width: 120px; height: 120px; object-fit: contain; background: #fff; border: 1px solid #8b8e94; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); }
.img-info { margin: 0; font-size: .88rem; }
.img-group-title { margin: 0; font-size: 1rem; }
.img-group { display: grid; gap: .9rem; }
.img-slot { display: grid; gap: .4rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.img-slot__title { display: flex; align-items: center; }
.crop-review { margin-top: .3rem; padding: .6rem; background: rgba(255, 159, 10, .1); border: 1px solid #a9995c; border-radius: var(--r-sm); }
.crop-review__canvas { display: block; max-width: 100%; height: auto; margin: .3rem 0 .5rem; border-radius: 3px; }
.img-slot:first-child { padding-top: 0; border-top: none; }
.tpl-list { display: grid; gap: .9rem; }
.tpl { padding: 1rem 1.2rem; }
.tpl h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .4rem; }
.tpl--on { border-width: 2px; border-color: #2f6b52; }
.tpl--off { opacity: .8; border-style: dashed; }
.edit { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 1.4rem; align-items: start; }
.edit__preview { position: sticky; top: calc(var(--header-max-h, 0px) + 8px); }
.edit__stage { padding: .8rem; border-radius: 0 0 var(--r) var(--r); background: linear-gradient(#302e34, #1b1a1e); box-shadow: inset 0 6px 14px rgba(0, 0, 0, .55); }
.edit__canvas { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .6); }
.viewer__tabs { display: flex; border: 1px solid var(--edge); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; overflow: hidden; }
.viewer__tab { flex: 1; min-height: 44px; padding: .6rem .8rem; border: 0; font: 600 .92rem var(--ui); color: var(--ink); cursor: pointer; background: var(--metal); text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.viewer__tab + .viewer__tab { box-shadow: inset 1px 0 0 var(--edge); }
.viewer__tab[aria-pressed="true"] { background: linear-gradient(#b0afaa, #cfcec9); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4); }
.guides-toggle { margin: .6rem 0 .3rem; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 .8rem; padding: 0; font: 500 .78rem var(--mono); }
.legend i { display: inline-block; width: 1.4rem; height: .5rem; margin-right: .35rem; border: 1px solid var(--ink); vertical-align: middle; }
.edit__controls { display: grid; gap: .9rem; }
.ctl { display: grid; gap: .5rem; padding: .8rem .9rem 1rem; }
.ctl legend { padding: 0 .5rem; border-radius: 4px; font: 600 .72rem var(--ui); letter-spacing: .07em; text-transform: uppercase; color: #f1efea; background: linear-gradient(#4a4a50, #1b1b1e); }
.field--range label { display: flex; justify-content: space-between; }
.field--range output { font: 500 .84rem var(--mono); }
.colors { display: grid; gap: .6rem; }
.swatches { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.swatch { width: 2rem; height: 2rem; padding: 0; border: 1px solid #000; border-radius: 4px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .4); }
.layer-row { display: grid; gap: .4rem; padding: .6rem .7rem; box-shadow: none; background: rgba(255, 255, 255, .4); }
.layer-row__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.layer-row__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .5rem; align-items: end; }
.warnings { padding: .7rem .9rem; }
.warnings h3 { margin: 0 0 .3rem; font-size: 1rem; }
.warnings ul { margin: 0; padding-left: 1.1rem; }
.w--soft, .w--low, .w--warn { color: #6d1707; font-weight: 600; }
.final-preview { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; margin: 1rem 0; }
.final-fig { flex: 1 1 280px; min-width: 0; margin: 0; }
.final-fig canvas { display: block; width: 100%; height: auto; box-shadow: 0 4px 12px rgba(0, 0, 0, .55); }
.final-fig figcaption { margin-top: .4rem; font: 500 .78rem var(--mono); }
.export-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.2rem 0; }
.publish { margin-top: 1.6rem; }
.src-row { display: grid; gap: .3rem; padding: .8rem 1rem 1rem; }
.src-row__head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin: 0 0 .2rem; }
.src-row__head h4 { margin: 0; font-size: 1rem; }
.src-row__head small { min-width: 0; overflow-wrap: anywhere; font: 500 .8rem var(--mono); color: var(--ink-2); }
.src-row__shared { margin: 0; padding: .35rem .6rem; font-size: .84rem; color: #123c2b; background: #d9ecdf; border: 1px solid #2f6b52; border-radius: var(--r-sm); }
.src-row__basis-intro { margin: 0 0 .1rem; }
.src-row__prov { display: grid; gap: .3rem; margin-top: .3rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
.src-row__prov-h { margin: 0; font-size: .82rem; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.declaration { align-items: flex-start; padding: .8rem; }
.declaration input { flex: none; margin-top: .25rem; }
.import-flow .panel { margin-top: 1.2rem; }
.row--dropped { background: #f4d6cb; }
.row--flag { background: #f7edc6; }
.data--review { min-width: 1000px; }
.mono-break { font: 500 .78rem var(--mono); word-break: break-all; }
.flags { margin: 0; padding-left: 1rem; font-size: .84rem; }
.summary { padding-left: 1.1rem; }
.fixture-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.prose { max-width: 900px; }
.mod-card { margin: 1rem 0; padding: 1rem 1.2rem; border: 1px solid var(--edge); border-radius: var(--r-lg); background: linear-gradient(var(--surface-1), var(--surface-2)); box-shadow: 0 8px 18px rgba(0, 0, 0, .4); }
.mod-card header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.mod-card h3 { margin: 0; }
.mod-files { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: 0; }
.events { font: 500 .76rem var(--mono); color: var(--ink-2); }
/* moderator Curate section: same cards and tables as the queue */
.curate { margin: 1.5rem 0 2.5rem; }
.curate__hits { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; }
.curate__thumb { object-fit: contain; background: #111; border-radius: 4px; }
.curate__auto { color: var(--on-dark-2); }
.curate__progress { list-style: none; padding: 0; font: 500 .85rem var(--mono); }
.curate__gallery { max-width: 560px; }
.curate__draft .final-preview img { max-width: 100%; height: auto; display: block; }
.curate__step { margin: 1.2rem 0; }
.curate__cands { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; padding: 0; }
.curate__cand { padding: .5rem; border: 1px solid var(--edge); border-radius: var(--r-lg); font-size: .82rem; }
.curate__cand.is-chosen { outline: 3px solid var(--focus, #1749b8); }
.curate__cand img, .curate__cand-blank { display: grid; place-items: center; width: 100%; aspect-ratio: 1; object-fit: contain; background: #111; border-radius: 4px; }
.curate__cand p { margin: .35rem 0; }
.curate__url { overflow-wrap: anywhere; }
.curate__review { max-width: min(760px, 94vw); }
.curate__review-img { display: block; max-width: 100%; max-height: 60vh; margin: 0 auto; object-fit: contain; }
.curate__side { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.curate__refs { display: grid; gap: .8rem; }
.curate__ref { margin: 0; font-size: .8rem; }
.curate__ref img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #111; border-radius: 4px; }
.curate__swatches { display: flex; gap: 3px; margin-top: .3rem; }
.curate__swatches i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.3); }
.curate__dpi { margin: 0; padding-left: 1rem; }
.curate__ctl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.curate__ctl-grid fieldset { border: 1px solid var(--edge); border-radius: var(--r-lg); padding: .6rem .8rem; min-width: 0; }
.curate__ctl-grid .field { margin: .4rem 0; }
.curate__ctl-grid input[type=range] { width: 100%; }
@media (max-width: 720px) { .curate__side { grid-template-columns: 1fr; } .curate__refs { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .album { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumb" "head" "stage" "config"; grid-template-rows: none; }
  .liner, .edit { grid-template-columns: 1fr; }
  .edit__preview { position: static; }
  .toolbar { grid-template-columns: 1fr; }
  .toolbar .count { text-align: left; }
  .choices, .imgs, .imgs-more { grid-template-columns: 1fr; }
  .site-nav { margin-left: 0; }
}
@media (max-width: 640px) {
  .gallery__enlarge-more { display: none; }
  .gallery__status { font-size: .74rem; }
  .gallery__enlarge { padding-inline: .6rem; }
  .site-header__row { gap: .4rem .8rem; padding: .45rem 0; }
  .logo { font-size: 1.25rem; }
  .logo__mark { width: 38px; height: 38px; }
  .site-search { order: 1; flex: 1 1 0; min-width: 0; }
  .site-search input, .site-search button { height: 38px; }
  .site-nav { order: 2; width: 100%; overflow-x: auto; }
  .site-nav a { flex: 1 0 auto; padding: .45rem .5rem; font-size: .78rem; text-align: center; }
  .subbar__row { flex-direction: column; align-items: flex-start; }
  .artist-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .lib-row { grid-template-columns: 88px minmax(0, 1fr); }
  .lib-row__case .obj { --s: 84px; }
  .lib-row__act { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .card--release { width: 168px; }
  .row--albums { --album-w: clamp(108px, calc((100vw - 66px) / 2.35), 168px); --pad: 8px; } /* two covers and a slice of the third: the browsing cue */
  .row--editions { --ed-s: 152px; --pad: 8px; }
  .card--artist { width: 148px; }
  .portrait { --pd: 112px; }
  .grid { --col-gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem .9rem; }
  .grid--artists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layer-row__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-nav { flex-wrap: wrap; }
  .stepper li { flex: 1 1 44%; }
  .panel, .create__panel { padding: 1rem; }
  .ed > label { grid-template-columns: 60px minmax(0, 1fr); }
  .ed__thumb .obj { --s: 56px; }
  .featured__list { grid-template-columns: 1fr; }
}

/* ---------- motion: everything above is optional; none of it is needed to use the site ---------- */
/* ---------- accessibility and polish (from the UI review) ---------- */
.account-nav:empty { display: none; } /* signed out / no account area: no empty "Account" landmark for screen readers */
a, button, summary, label, select, .btn { touch-action: manipulation; } /* no double-tap-zoom delay on taps */
table.data th, table.data td, .count-badge, .size, output { font-variant-numeric: tabular-nums; } /* numbers line up in columns */
h1, h2, h3 { text-wrap: balance; } /* no one-word last lines on headings */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .slot__link:hover .obj__body, .slot__link:focus-visible .obj__body { transform: none !important; box-shadow: 0 0 0 3px var(--focus-dark), 0 0 0 4px #000 !important; } /* a static highlight instead of the lift */
  .slot__link:hover .tab, .slot__link:focus-visible .tab { transform: none !important; }
  .card--release .card__link:hover .obj__body, .card--release .card__link:focus-visible .obj__body, .card--edition .card__link:hover .obj, .fcard__stage:hover .obj { transform: none !important; }
  .card__link:hover .card__art::before, .card__link:focus-visible .card__art::before { opacity: 1 !important; transform: none !important; }
  .card--release .card__link:hover .obj__body { box-shadow: 0 0 0 2px var(--on-dark), 0 0 0 3px #000 !important; } /* static selection cue instead of the lift */
  .card--release .card__link:focus-visible .obj__body { box-shadow: 0 0 0 3px var(--focus-dark), 0 0 0 4px #000 !important; }
}

/* ---------- search results and filters ---------- */
.chips__hint { margin: 0; font: 500 .74rem/1.4 var(--mono); color: var(--ink-2); }
.more-filters { grid-column: 1 / -1; }
.more-filters > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 600 .9rem var(--ui); color: var(--link); }
.more-filters__body { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; padding: .3rem 0 .5rem; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .9rem 0 0; }
.active-filters[hidden] { display: none; }
.active-filters__label { font: 600 .74rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--on-dark-2); }
.active-filters__list { display: contents; list-style: none; margin: 0; padding: 0; }
.active-filters__list li { list-style: none; }
.afilter { min-height: 40px; padding: .3rem .8rem; border-radius: 999px; border: 1px solid #8db3f2; background: rgba(54, 114, 220, .3); color: #fff; font: 600 .84rem var(--ui); cursor: pointer; }
.afilter:hover { background: rgba(54, 114, 220, .5); }
.browse__group { margin-top: 1.6rem; }
.shelf-rows { position: relative; }
.shelf-rows .row { margin-top: 1.4rem; }
.shelf-rows .row:first-child { margin-top: 0; }
.shelf-probe { position: absolute; visibility: hidden; height: 0; overflow: hidden; margin: 0; pointer-events: none; }
.shelf-probe .row__track { overflow: hidden; }
.browse__results { margin-top: .4rem; }
.empty-results { margin-top: 1.4rem; }
.browse .toolbar { grid-template-columns: auto minmax(0, 1fr) auto; }
.browse .toolbar .chips__hint, .browse .toolbar .more-filters { grid-column: 1 / -1; }
@media (max-width: 960px) { .browse .toolbar { grid-template-columns: 1fr; } }

/* ---------- create: first decision ---------- */
.create__formats { margin: .2rem 0 1rem; font-size: .92rem; }
.radios--cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; margin: 0 0 1rem; padding: 0; border: 0; }
.radios--cards legend { margin-bottom: .5rem; font: 600 .72rem var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); }
.radio--card { position: relative; }
.radio--card > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio--card > label { display: flex; flex-direction: column; gap: .1rem; min-height: 64px; padding: .7rem .9rem; margin: 0; border: 1px solid var(--edge); border-radius: var(--r); background: linear-gradient(#fbfbfa, var(--surface-2)); box-shadow: 0 1px 0 #fff inset, 0 1px 3px rgba(0, 0, 0, .3); cursor: pointer; }
.radio--card > label small { font: 500 .78rem var(--mono); color: var(--ink-2); }
.radio--card > input:checked + label { border-color: #16130f; background: linear-gradient(#c6c5c0, #dddcd7); box-shadow: 0 0 0 2px #16130f, inset 0 2px 5px rgba(0, 0, 0, .3); }
.radio--card > input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.create__more { margin-top: 1.2rem; }
.create__more h3 { margin: .8rem 0 .3rem; font-size: 1rem; }
.choice[hidden] { display: none; }
.radio--card { display: block; min-width: 0; } .radio--card > label { width: 100%; box-sizing: border-box; } .radios--cards { max-width: 640px; }

@media (max-width: 640px), (pointer: coarse) { .chip label { display: inline-flex; align-items: center; min-height: 44px; } .lede a { display: inline-block; padding: .5rem 0; } }

[hidden] { display: none !important; } /* author display rules (e.g. .form { display: grid }) must not un-hide an element the script hid */
/* ---- Accounts: sign in / sign up / reset / account. Same aluminium panels, gel buttons and inset fields as the rest of the site. ---- */
.auth { padding-block: 1.6rem 3rem; }
.auth__panel { max-width: 520px; }
.auth__panel + .auth__panel { margin-top: 1.2rem; }
.auth__lede { color: var(--ink-2); }
.auth__form { max-width: none; }
.auth__actions { margin-top: .6rem; }
.auth__submit { width: 100%; }
.auth__links { margin: 1rem 0 0; font-size: .92rem; }
.auth__note { padding: .55rem .8rem; border-radius: var(--r-sm); background: linear-gradient(var(--blue-tint-1), var(--blue-tint-2)); border: 1px solid #6a89cf; color: var(--ink); box-shadow: inset 0 2px 4px rgba(0, 20, 80, .16); }
.auth__flash { padding: .55rem .8rem; border-radius: var(--r-sm); background: #f6dcd2; border: 1px solid #a73a1d; }
.auth__sent h2 { margin-top: 0; }
.auth__facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 1rem; }
.auth__facts dt { font: 600 .72rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); align-self: center; }
.auth__facts dd { margin: 0; overflow-wrap: anywhere; }
.auth__resend { margin-top: .8rem; }
.field__error:empty, .form-error:empty { display: none; }
.field__error { margin: 0; font-size: .88rem; }
.field__opt { font-weight: 400; color: var(--ink-2); }
.field :is(input, select, textarea)[aria-invalid="true"] { border-color: #a73a1d; background: #fdeeea; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .16), 0 0 0 2px rgba(167, 58, 29, .35); }
.declaration:has(input[aria-invalid="true"]) { border-color: #a73a1d; background: #fdeeea; box-shadow: 0 0 0 2px rgba(167, 58, 29, .35); }
.declaration input[aria-invalid="true"] { outline: 2px solid #a73a1d; outline-offset: 2px; }
.pw { position: relative; display: flex; }
.pw input { padding-right: 4.6rem; min-height: 48px; }
.pw__toggle { position: absolute; right: 2px; top: 2px; bottom: 2px; min-width: 44px; padding: 0 .7rem; font: 600 .82rem var(--ui); color: var(--ink); cursor: pointer; border: 1px solid var(--edge); border-radius: var(--r-sm); background: var(--metal); box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 1px 2px rgba(0, 0, 0, .35); }
.pw__toggle:active, .pw__toggle[aria-pressed="true"] { background: linear-gradient(#b9b8b3, #d3d2cd); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4); }
.auth__or { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; font: 600 .72rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, .8); }

/* "Continue with Google": Google's light button (white, #747775 border, #1F1F1F label, multicolour G, 12px / 10px / 12px spacing),
   given the site's pressed-metal depth. The label uses Google Sans when installed and falls back to the site's own sans. */
.gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 12px; color: #1f1f1f; cursor: pointer; background: #fff; border: 1px solid #747775; border-radius: var(--r);
  font: 500 15px/20px "Google Sans", var(--ui); letter-spacing: .01em; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .4); transition: background-color .12s, box-shadow .12s, transform .12s; }
.gbtn__logo { width: 20px; height: 20px; flex: none; }
.gbtn:hover { background: linear-gradient(rgba(48, 48, 48, .08), rgba(48, 48, 48, .08)), #fff; }
.gbtn:focus-visible { background: linear-gradient(rgba(48, 48, 48, .12), rgba(48, 48, 48, .12)), #fff; outline: 3px solid var(--focus); outline-offset: 2px; }
.gbtn:active { background: linear-gradient(rgba(48, 48, 48, .12), rgba(48, 48, 48, .12)), #fff; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35); transform: translateY(1px); }
.gbtn[aria-busy="true"] { cursor: progress; }
.gbtn[disabled] { opacity: .75; }
.gbtn[aria-disabled="true"] { color: rgba(31, 31, 31, .38); background: rgba(255, 255, 255, .38); border-color: rgba(31, 31, 31, .12); box-shadow: none; cursor: not-allowed; transform: none; }
.gbtn[aria-disabled="true"] .gbtn__logo { opacity: .38; }
.auth__google .help { margin: .5rem 0 0; }
.auth__providers { display: grid; gap: .6rem; }
/* "Continue with Apple": Apple's black button with a white logo, on the same footprint, spacing, label size and pressed-metal depth as Google's. */
.gbtn--apple { color: #fff; background: #000; border-color: #000; font-family: -apple-system, "SF Pro Text", var(--ui); box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 1px 3px rgba(0, 0, 0, .55); }
.gbtn--apple:hover { background: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)), #000; }
.gbtn--apple:focus-visible { background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)), #000; outline: 3px solid var(--focus); outline-offset: 2px; }
.gbtn--apple:active { background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)), #000; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6); transform: translateY(1px); }
.gbtn--apple[aria-disabled="true"] { color: rgba(255, 255, 255, .55); background: rgba(0, 0, 0, .45); border-color: rgba(0, 0, 0, .2); box-shadow: none; cursor: not-allowed; transform: none; }
.gbtn--apple[aria-disabled="true"] .gbtn__logo { opacity: .55; }
.gbtn--apple .gbtn__logo { width: 20px; height: 20px; }
.row-break { flex-basis: 100%; height: 0; margin: -.55rem 0; }
.site-nav { margin-left: 0; }
.account-nav { margin-left: auto; }
.account-nav a { display: inline-block; padding: .55rem .95rem; font: 700 .9rem var(--ui); text-decoration: none; white-space: nowrap; color: #3a2a00 !important; background: linear-gradient(#ffe27a, #f2b600); border: 1px solid #a67c00; border-radius: var(--r); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); box-shadow: 0 1px 0 rgba(255, 255, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .6); }
.account-nav a:hover { filter: brightness(1.06); }
.account-nav a[aria-current] { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); }
@media (max-width: 640px) { .auth__facts { grid-template-columns: 1fr; } }

/* ---- Create: numbered tracklist (one single-line field per song) ---- */
.trk__head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; }
.trk__label { font-weight: 600; }
.trk__tracks { margin: 0 0 0 auto; font: 600 .72rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.trk__count { width: auto; min-width: 5.2rem; min-height: 36px; padding: .2rem .5rem; font: 600 .88rem var(--ui); color: var(--ink); border: 1px solid var(--edge); border-radius: var(--r-sm); background: var(--metal); box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 1px 2px rgba(0, 0, 0, .35); }
.trk__custom { width: 5rem !important; min-height: 36px; padding: .2rem .5rem !important; }
.trk__list { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .3rem; }
.trk__row { display: grid; grid-template-columns: 2.2rem 1fr; align-items: center; gap: .5rem; }
.trk__n { text-align: right; font: 600 .84rem var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.trk__title { min-height: 40px; padding-block: .35rem !important; }
@media (max-width: 480px) { .trk__tracks { margin-left: 0; } .trk__row { grid-template-columns: 1.8rem 1fr; gap: .35rem; } }

.off__no-photo { display: block; width: 100%; padding: .5rem .7rem; margin: 0 0 .7rem; font: inherit; font-size: .88rem; text-align: left; color: var(--on-dark-2); background: rgba(255, 255, 255, .04); border: 1px dashed rgba(255, 255, 255, .25); border-radius: var(--r-sm); cursor: pointer; }
.off__no-photo:hover { background: rgba(255, 255, 255, .08); }
.off__no-photo:focus-visible { outline: 3px solid var(--focus-dark); outline-offset: 2px; }
.off__no-photo.is-selected { border-style: solid; border-color: #d8b85a; }
.off__no-photo b { color: var(--on-dark); }
.off__no-photo a { color: var(--link-dark); }

/* Left-hand stand-in for the gallery when an official release has no rights-approved photo yet: same slot, same rough footprint, so choosing between a photographed and a pending release never jumps the layout. */
.off-pending { container-type: inline-size; min-height: max(15rem, min(50vh, calc(100vh - 21rem - var(--header-max-h, 0px)))); width: 100%; display: grid; place-items: center; padding: 2rem 1.4rem; text-align: center; border-radius: var(--r-lg);
  background: radial-gradient(ellipse 85% 70% at 50% 38%, #46444b 0%, #2a282e 55%, #18171a 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 14px 34px rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .45); }
.off-pending__box { max-width: 26rem; }
.off-pending__badge { margin: 0 0 .6rem; font: 700 .95rem var(--ui); color: var(--on-dark); }
.off-pending__note { margin: 0 0 1rem; font: 500 .84rem/1.5 var(--mono); color: var(--on-dark-2); }

/* ---------- Create step 2: grouped project details, step 6 text review ---------- */
.form--details { gap: 1rem; }
.form--details label { margin-top: 0; }
.details-group, .review { padding: .9rem 1rem 1rem; display: grid; gap: .75rem; }
.details-group > legend { float: left; width: 100%; margin-bottom: .1rem; font: 600 .72rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.form--details :is(input[type="text"], select) { min-height: 2.6rem; line-height: 1.35; }
.form--details .help { margin: 0; }
.field__req, .field__opt { font-weight: 400; font-size: .82rem; color: var(--ink-2); }
.field__req { color: #7d1200; }
.field__err { margin: 0; font-size: .86rem; }
.field__err:empty { display: none; }
.why > summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; font: 600 .84rem var(--ui); color: var(--blue-2); }
.why > p { margin: .3rem 0 0; font-size: .86rem; color: var(--ink-2); max-width: 70ch; }
.review { margin: 0 0 1.2rem; justify-items: start; }
.review h3 { margin: 0; }
.review__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0; width: 100%; }
.review__list dt { font-weight: 600; font-size: .88rem; }
.review__list dd { margin: 0; overflow-wrap: anywhere; }
.review__tracks { margin: 0; padding-left: 1.6rem; columns: 2 16rem; column-gap: 1.6rem; }
.review__pre { white-space: pre-wrap; }
@media (max-width: 480px) { .review__list { grid-template-columns: 1fr; } .review__list dd { margin-bottom: .4rem; } }
.spine-off { margin: 0; padding: .55rem .75rem; font-size: .88rem; font-weight: 600; border-radius: var(--r-sm); background: #fdf3dc; border: 1px solid #a8801c; }
.spine-off[hidden] { display: none; }

/* ---- "Official release" hype sticker: a cream-and-gold label on the corner of a physical-format tile that has a documented official release ---- */
.fmt-row { overflow: visible; }
.hype { position: absolute; z-index: 4; top: -15px; right: -9px; display: block; padding: .18rem .42rem .2rem; text-align: center; pointer-events: none; transform: rotate(7deg); transform-origin: 70% 30%;
  color: #4a3300; background: linear-gradient(135deg, #fff3c4 0%, #f1d685 48%, #dcb04a 100%); border: 1px solid #a8842a; border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 2px 4px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .12); }
.hype::after { content: ""; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, .55) 50%, rgba(120, 88, 20, .35)); border-radius: 0 0 5px 0; } /* the peeled corner */
.hype__top { display: grid; font: 700 .62rem/1.15 var(--mono); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.fmt-tabs { padding-top: 14px; } /* room for the stickers that hang over the tiles' top edge, clear of the legend */

/* Create: searchable album picker. The results panel sits in the flow under the input so no container can clip it. */
.picker__panel { margin-top: .25rem; background: var(--surface-1); border: 1px solid #8b8e94; border-radius: var(--r-sm); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); overflow: hidden; }
.picker__list { list-style: none; margin: 0; padding: .2rem 0; max-height: 22rem; overflow-y: auto; }
.picker__opt { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .45rem .75rem; cursor: pointer; border-left: 3px solid transparent; overflow-wrap: anywhere; }
.picker__opt > span:last-child { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.picker__opt span, .picker__chosen span span { font-size: .86rem; color: var(--edge); }
.picker__thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); background: #fff; flex: none; }
.picker__thumb--blank { background: var(--surface-2); }
.picker__opt:hover { background: var(--surface-2); }
.picker__opt[aria-selected="true"] { background: var(--blue-tint-1); border-left-color: var(--blue-2); }
.picker__note { margin: 0; padding: .5rem .75rem; font-size: .86rem; color: var(--edge); border-top: 1px solid var(--surface-2); }
.picker__note:only-child, .picker__list[hidden] + .picker__note { border-top: 0; }
.picker__note[hidden] { display: none; }
.picker__chosen { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .75rem; background: var(--blue-tint-1); border: 1px solid var(--blue-2); border-radius: var(--r-sm); overflow-wrap: anywhere; }
.picker__chosen[hidden] { display: none; }
.picker__chosen > span { display: flex; flex-direction: column; min-width: 0; }
.picker__chosen small { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--edge); }
.linkish { padding: 0; min-height: 44px; font: inherit; font-weight: 600; color: var(--blue-3); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.picker input:focus-visible, .linkish:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }

/* ---- Official product images (an official release shown in the big gallery): black chrome, never the blue of community editions ---- */
.off-gallery { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .7rem; }
.off-thumb { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 92px; padding: .4rem .3rem .5rem; text-align: center; cursor: pointer;
  color: #f3f1ec; background: linear-gradient(var(--chrome-1), var(--chrome-2) 50%, var(--chrome-3) 52%, #252529); border: 1px solid #000; border-radius: var(--r-sm);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 2px 5px rgba(0, 0, 0, .6); }
.off-thumb:hover { filter: brightness(1.08); }
.off-thumb:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.off-thumb.is-selected { background: linear-gradient(#0d0d0f, #26262a); box-shadow: inset 0 2px 6px #000, 0 0 0 2px #d8b85a; }
.off-thumb__pic .scene { display: block; width: 100%; height: 58px; border-radius: 4px; background: radial-gradient(ellipse 85% 70% at 50% 38%, #46444b 0%, #2a282e 55%, #18171a 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.off-thumb__cap { font: 500 .68rem/1.25 var(--mono); color: #cfcac0; }
.off-thumb.is-selected .off-thumb__cap { color: #fff; }
.gallery__vis-caption { margin: .5rem 0 .3rem; font: 600 .92rem/1.4 var(--ui); color: var(--on-dark); }
.gallery__action { margin: .4rem 0 .5rem; }
.gallery__action .btn { width: auto; }
.tag--official { background: rgba(216, 184, 90, .22); box-shadow: inset 0 0 0 1px #d8b85a; }

/* ---- Info popover: a "?" button that reveals a short "why this matters" note next to a field's label ---- */
.info-pop-wrap { position: relative; display: inline-flex; margin-left: .35rem; vertical-align: middle; }
.info-pop-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; font: 700 .76rem var(--ui); line-height: 1; color: var(--ink); cursor: pointer;
  background: var(--metal); border: 1px solid var(--edge); border-radius: 50%; box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 1px 2px rgba(0, 0, 0, .35); }
.info-pop-btn:hover { filter: brightness(1.06); }
.info-pop-btn[aria-expanded="true"] { background: linear-gradient(#b9b8b3, #d3d2cd); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
.info-pop-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.info-pop { position: absolute; z-index: 20; top: calc(100% + 8px); width: 20rem; max-width: min(20rem, calc(100vw - 32px)); padding: .6rem .75rem; font-size: .84rem; line-height: 1.45; color: var(--ink);
  background: var(--surface-1); border: 1px solid #8b8e94; border-radius: var(--r-sm); box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .12s ease-out, transform .12s ease-out; }
.info-pop.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.info-pop.is-above { top: auto; bottom: calc(100% + 8px); transform: translateY(4px); }
.info-pop.is-above.is-open { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .info-pop { transition: none; } }

/* ---------- loading: a miniature shelf of three jewel cases (content areas) and a small silver CD (buttons, inline waits) ----------
   Built from the same materials as the homepage cabinets (recessed back panel, walnut shelf with a lit edge and a front face) and the
   jewel cases (clear plastic edge, hinge strip, gloss). Nothing shows for --loader-delay, so a fast operation never flashes a loader,
   yet the loader is in the page from the start, so nothing moves when it appears. Movement is transform and opacity only. */
:root { --loader-delay: 250ms; }
@keyframes loader-reveal { from { opacity: 0; } to { opacity: 1; } }
.loader, .btn__busy { opacity: 0; animation: loader-reveal .18s ease-out var(--loader-delay) both; }
.loader { --loader-text: var(--on-dark-2); --loader-edge: rgba(255, 255, 255, .6); --loader-w: 120px; }
.panel .loader, .panel-inset .loader, .create__panel .loader, .mod-card .loader, .lib-row .loader, .fmt-row .loader, .toolbar .loader, .site-header .loader { --loader-text: var(--ink-2); --loader-edge: rgba(255, 255, 255, .85); }
.loader__text { margin: 0; font: 500 .85rem/1.4 var(--mono); color: var(--loader-text); text-align: center; }

.loader--shelf { display: grid; justify-items: center; gap: .75rem; padding: 3rem 0; }
.loader__shelf { position: relative; width: var(--loader-w); height: 52px; border-radius: 3px 3px 2px 2px; overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .006) 0 1px, transparent 1px 6px), linear-gradient(#09080a, #121013 45%, #181519);
  box-shadow: inset 0 8px 10px -4px rgba(0, 0, 0, .8), inset 8px 0 10px -6px rgba(0, 0, 0, .7), inset -8px 0 10px -6px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 9px -5px rgba(0, 0, 0, .7); }
.loader__ledge { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; /* the shelf's own gradient, scaled: lit top surface, bright edge, front face, shadow tail */
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 7px), linear-gradient(#4f3d2d 0, #7d6349 7px, #a48865 7px, #a48865 8px, var(--wood-1) 8px, var(--wood-2) 11px, var(--wood-3));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .65), 0 -8px 8px -2px rgba(0, 0, 0, .35); }
.loader__row { position: absolute; left: 8px; right: 8px; bottom: 11px; display: flex; justify-content: space-between; z-index: 1; } /* cases rest a little way into the shelf's surface */
.loader__slot { position: relative; flex: none; width: 30px; height: 27px; }
.loader__slot::before { content: ""; position: absolute; left: -2px; right: -2px; bottom: -4px; height: 8px; background: radial-gradient(ellipse at 50% 35%, rgba(0, 0, 0, .7), rgba(0, 0, 0, .25) 50%, transparent 72%); animation: loader-shadow 2s ease-in-out calc(var(--i) * .6s) infinite; }
.loader__case { position: absolute; inset: 0; overflow: hidden; border-radius: 2px; transform-origin: 50% 100%; /* clear plastic: a bright edge, a hinge strip, a faint glass tint */
  border: 1px solid var(--loader-edge); background: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06) 42%, rgba(255, 255, 255, .14));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 2px 0 0 rgba(0, 0, 0, .28); animation: loader-lift 2s ease-in-out calc(var(--i) * .6s) infinite; }
.loader__case::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 3px; background: linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(255, 255, 255, .18)); } /* the hinge side */
.loader__case::after { content: ""; position: absolute; z-index: 2; top: -10%; bottom: -10%; left: 0; width: 60%; pointer-events: none; /* the reflection that passes across the plastic */
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%); transform: translateX(-120%) skewX(-12deg); animation: loader-gloss 2s ease-in-out calc(var(--i) * .6s) infinite; }
.loader__cover { position: absolute; inset: 2px 2px 2px 4px; border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.loader__case--a .loader__cover { background: radial-gradient(circle at 68% 34%, #e0563f 0 5px, transparent 5.5px), linear-gradient(#1d2f55, #1d2f55) 0 100% / 100% 8px no-repeat, #efe6d2; }   /* cream, navy, coral */
.loader__case--b .loader__cover { background: radial-gradient(circle at 36% 62%, #efe6d2 0 5px, transparent 5.5px), linear-gradient(#e0563f, #e0563f) 0 0 / 100% 6px no-repeat, #1d2f55; }
.loader__case--c .loader__cover { background: linear-gradient(#1d2f55, #1d2f55) 0 62% / 100% 3px no-repeat, linear-gradient(#efe6d2, #efe6d2) 10% 22% / 9px 9px no-repeat, #e0563f; }
/* each case's turn takes the first quarter of the 2 s loop (its start staggered by .6 s), so the next case moves only after it has settled */
@keyframes loader-lift { 0% { transform: none; } 12% { transform: translateY(-4px) rotate(-3deg); } 26%, 100% { transform: none; } }
@keyframes loader-gloss { 0%, 4% { transform: translateX(-120%) skewX(-12deg); } 22%, 100% { transform: translateX(240%) skewX(-12deg); } }
@keyframes loader-shadow { 0% { opacity: 1; transform: none; } 12% { opacity: .7; transform: scaleX(.92); } 26%, 100% { opacity: 1; transform: none; } }

.loader--cd { display: inline-flex; align-items: center; gap: .5em; vertical-align: middle; }
.loader--cd .loader__text { text-align: left; font: inherit; color: var(--loader-text); }
.loader__disc { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .45);
  background: conic-gradient(#f4f4f2, #bdbbb6 12%, #fbfbfa 26%, #9c9a95 44%, #f4f4f2 60%, #b6b4af 78%, #f4f4f2);
  -webkit-mask: radial-gradient(circle, transparent 0 2.4px, #000 2.8px); mask: radial-gradient(circle, transparent 0 2.4px, #000 2.8px); /* the spindle hole is real: whatever is behind shows through */
  animation: loader-spin 3.2s linear infinite; }
@keyframes loader-spin { to { transform: rotate(360deg); } }

/* a button that is working: its own label stays in place (so its width and height never change) and a CD and short text are laid over it */
.btn.is-busy { position: relative; pointer-events: none; cursor: progress; }
.btn__label { display: inline-flex; align-items: center; justify-content: center; gap: .4em; } /* the button's own layout, kept while it is working */
.btn.is-busy .btn__label { animation: loader-label-out 0s linear var(--loader-delay) forwards; }
@keyframes loader-label-out { to { visibility: hidden; } }
.btn__busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 .6rem; overflow: hidden; white-space: nowrap; color: inherit; }
.btn__busy .loader { opacity: 1; animation: none; }
.btn__busy .loader__text { overflow: hidden; text-overflow: ellipsis; color: inherit; }
.btn .loader__disc { width: 18px; height: 18px; }

.loader-error { display: grid; justify-items: center; gap: .6rem; padding: 2.4rem 1rem; text-align: center; }
.loader-error p { margin: 0; max-width: 40ch; }

@media (prefers-reduced-motion: reduce) {
  /* the page-wide rule above stops every animation; the loaders keep only their "stay invisible for 250 ms" step (no movement), and show a still shelf or CD */
  .loader, .btn__busy { animation: loader-reveal .01s linear var(--loader-delay) both !important; }
  .btn__busy .loader { animation: none !important; opacity: 1; }
  .btn.is-busy .btn__label { animation: loader-label-out 0s linear var(--loader-delay) forwards !important; }
}

/* Release sync (moderation page only, web/js/views/release-sync.js): cards inside the existing .mod-card panels. */
.rsync__artist, .rsync__review, .rsync__candidate, .rsync__pub { margin: .9rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--line); }
.rsync__artist header, .rsync__review header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rsync__artist h4, .rsync__review h4, .rsync__candidate h4 { margin: 0 auto 0 0; }
.rsync__review ul, .rsync__artist ul, .rsync__candidate ul { margin: .4rem 0; padding-left: 1.2rem; }
.rsync__group > summary, .rsync__pub > summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
.rsync .btn-row, .rsync__artist .btn-row { margin-top: .6rem; }

/* Artwork stays in its finished frame throughout loading, decoding and retry. */
.artwork-surface { display: block; position: relative; min-width: 0; }
.artwork-surface--image { width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
.artwork-surface--image > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.portrait .artwork-surface > img { object-fit: cover; }
.artwork-surface--scene { width: 100%; }
.gallery__view > .artwork-surface, .thumb__pic > .artwork-surface,
.lightbox__body > .artwork-surface { width: 100%; height: 100%; aspect-ratio: auto !important; min-height: 0; }
.artwork-paper { position: absolute; inset: 0; overflow: hidden;
  background: repeating-linear-gradient(87deg, transparent 0 3px, rgba(255,255,255,.015) 3px 4px), linear-gradient(135deg,#35353b,#232328 48%,#141417);
  box-shadow: inset 0 0 0 1px #111114, inset 0 4px 15px rgba(0,0,0,.4); }
.artwork-paper::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 25%,rgba(235,234,225,.09) 50%,transparent 75%); transform: translateX(-100%); }
.artwork-surface--image:is([data-artwork-state="loading"],[data-artwork-state="waiting"]) .artwork-paper::after,
.artwork-slot:is([data-artwork-state="loading"],[data-artwork-state="waiting"]) .artwork-paper::after { animation: artwork-highlight 2.8s ease-in-out infinite; }
.artwork-svg-inset { position: relative; width: 100%; height: 100%; overflow: hidden; }
@keyframes artwork-highlight { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.artwork-image { opacity: 0; }
.artwork-image.artwork-decoded, [data-artwork-state="missing"] > .artwork-image { opacity: 1; }
.artwork-fade { animation: artwork-reveal .16s ease-out; }
@keyframes artwork-reveal { from { opacity: 0; } to { opacity: 1; } }
.artwork-surface[data-artwork-state="ready"] > .artwork-paper,
.artwork-surface[data-artwork-state="missing"] > .artwork-paper,
.artwork-slot[data-artwork-state="ready"] > .artwork-paper-svg { display: none; }
.artwork-surface[data-artwork-state="failed"] > .artwork-paper,
.artwork-slot[data-artwork-state="failed"] > .artwork-paper-svg { filter: brightness(.7); }
.artwork-missing { position: absolute; inset: 0; display: grid; place-items: center; padding: .5rem; color: #d2cec6; font: 500 .75rem var(--mono); text-align: center; background: #232328; }
.artwork-control-host { position: relative; }
.artwork-retry { position: absolute; z-index: 12; transform: translate(-50%,-50%); padding: .55rem .9rem;
  min-height: 44px; border: 1px solid #92918e; border-radius: 6px; color: #eeece8; background: linear-gradient(#4b4b51,#202024 65%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),0 2px 8px #0009; cursor: pointer; font: 600 .9rem/1.2 var(--ui); }
.artwork-retry--compact { padding: .25rem .45rem; min-height: 32px; font-size: .72rem; }
@media (pointer: coarse) { .artwork-retry--compact { min-height: 44px; min-width: 44px; } }
.artwork-retry:hover { filter: brightness(1.18); }
.artwork-retry:focus-visible { outline: 3px solid var(--focus-dark,#9cc3ff); outline-offset: 3px; }
.artwork-failure { position: absolute; top: 50%; left: 50%; width: 85%; transform: translate(-50%,calc(-100% - 2rem)); color: #eeece8; text-align: center; font: 500 .9rem/1.4 var(--ui); pointer-events: none; }
.card:has(.artwork-retry) .obj, .card:has(.artwork-retry) .obj__body, .slot:has(.artwork-retry) .obj__body { transform: none !important; transition: none; }

/* Catalog placeholders inherit the real shelves, cards, typography and responsive dimensions. */
.provisional-line { display: block; background: linear-gradient(90deg,#39393e,#2c2c31); border-radius: 2px; width: 78%; min-height: 1em; }
.row__head .provisional-line, .collection__title.provisional-line { width: 12rem; height: 1.25em; }
.is-provisional .card__text, .is-provisional .tab__card { gap: .2rem; }
.is-provisional .card__title, .is-provisional .tab__title { height: 2.5em; }
.is-provisional .card__meta, .is-provisional .tab__meta { width: 62%; }
.is-provisional .card__facts, .is-provisional .tab__count { height: 2.5em; width: 90%; }
.is-provisional .tab__card .provisional-line { background: #c6c3bc; }
.artist-head .provisional-line { width: min(25rem,70vw); }
.card--release .card__text { min-height: 7rem; }
.row__head { min-height: 36px; }
.shelf-reveal { animation: shelf-arrive .2s ease-out; }
@keyframes shelf-arrive { from { opacity: .65; } to { opacity: 1; } }
.shelf-retire { overflow: hidden; opacity: 0; margin-top: 0; transition: height .24s ease-out, opacity .18s ease-out, margin .24s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .artwork-paper::after, .artwork-glint, .artwork-fade, .shelf-reveal { animation: none !important; }
  .artwork-paper::after, .artwork-glint { transform: none; }
  .shelf-retire { transition: none; }
}

.artist-head h1.provisional-line { height: 1.2em; }
.artist-head .artist-head__bio.provisional-line { height: 3em; }
.artist-head .artist-head__meta.provisional-line { height: 2.8em; }
.artist-head .artist-head__links.provisional-line { height: 1.5em; }
.artist-head .plate.provisional-line { width: 11rem; height: 1.7em; }

.artist-header-reveal { overflow: hidden; transition: height .24s ease-out; }
@media (prefers-reduced-motion: reduce) { .artist-header-reveal { transition: none; } }