/* v20 Record Crate: shared tokens, sleeve backs, sleeve finish, buttons */
:root {
  --night: #14110f;
  --night-2: #1d1916;
  --ink: #f3ece0;
  --soft: #a89c8b;
  --line: rgba(243, 236, 224, 0.16);
  --paper: #f4eddf;
  --paper-ink: #1c1712;
  --hot: #ffb547;
  --pine: #c38d56;
  --pine-dark: #8f5f33;
  --mono: "Martian Mono", ui-monospace, Menlo, monospace;
  --grot: Archivo, "Arial Narrow", Arial, sans-serif;
  --serif: "Bodoni Moda", Didot, Georgia, serif;
  --hand: Kalam, "Comic Sans MS", cursive;
  --sten: "Saira Stencil One", Archivo, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); color: var(--ink); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; background: var(--night); color: var(--ink); font: 400 16px/1.45 var(--grot); }
img, svg { display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 1.5px solid currentColor; border-radius: 3px;
  background: transparent; color: inherit; cursor: pointer; text-decoration: none;
  font: 600 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-solid { background: var(--ink); color: var(--night); border-color: var(--ink); }
.btn:disabled { opacity: 0.35; cursor: default; transform: none; }

/* Sleeve finish: ring wear, shrink-wrap shine and worn edges, over any front cover */
.sleeve-front { position: relative; overflow: hidden; }
.sleeve-front > svg { width: 100%; height: 100%; }
.sleeve-front::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 40.5%, rgba(255, 255, 255, 0.1) 42.5%, rgba(255, 255, 255, 0.04) 44.5%, transparent 46.5%),
    linear-gradient(122deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, 0.07) 74%, rgba(0, 0, 0, 0.14) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28), inset 0 0 22px rgba(0, 0, 0, 0.16);
}

/* Sleeve back: track list and liner note. Sized from the sleeve's own width. */
.bk {
  --fz: 1;
  position: absolute; inset: 0; container-type: inline-size; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: var(--grot);
}
.bk-in {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: calc(2.4cqw * var(--fz));
  padding: 6.4cqw 7cqw 5.6cqw;
}
.bk::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), transparent 40%, rgba(0, 0, 0, 0.12));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}
.bk p, .bk ol { margin: 0; }
.bk-head {
  display: flex; justify-content: space-between; gap: 12px;
  padding-bottom: 2.2cqw; border-bottom: 0.4cqw solid currentColor;
  font: 600 calc(max(11px, 2.9cqw) * var(--fz))/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.bk-title {
  font: 800 calc(7cqw * var(--fz))/0.95 var(--grot); font-stretch: 75%; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.bk-artist { margin-top: -1cqw !important; font: 600 calc(max(11px, 2.9cqw) * var(--fz))/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.bk-sides { display: grid; gap: calc(2.2cqw * var(--fz)); }
.bk-sn {
  display: flex; align-items: center; gap: 2cqw; margin-bottom: calc(1.2cqw * var(--fz)) !important;
  font: 600 calc(max(11px, 2.7cqw) * var(--fz))/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.bk-sn::after { content: ""; flex: 1; height: 0.3cqw; background: var(--acc); }
.bk-tracks { list-style: none; padding: 0; display: grid; gap: calc(1cqw * var(--fz)); }
.bk-tracks li { display: grid; grid-template-columns: 8cqw minmax(0, 1fr); align-items: baseline; }
.bk-n { font: 700 calc(max(11px, 2.9cqw) * var(--fz))/1 var(--mono); }
.bk-t { font: 500 calc(max(16px, 4.3cqw) * var(--fz))/1.16 var(--grot); }
.bk-liner {
  margin-top: auto !important;
  font: italic 400 calc(max(16px, 4.1cqw) * var(--fz))/1.3 var(--serif);
}
.bk-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 4cqw;
  font: 500 calc(max(10px, 2.4cqw) * var(--fz))/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
}
.bk-foot span { text-align: right; }
.bk-bar { width: 21cqw; height: 6.2cqw; flex: none; }
.bk-plain { justify-content: flex-start; }
.bk-plain .bk-bar { margin-top: auto; }