/* Lowlight Records: After Hours. A fictional portfolio demo by GemaCat Studio.
   Fonts: Newsreader and Source Sans 3 are the proposed pairing but are NOT bundled
   (pending license verification). Until approved, local fallbacks are used. */

:root {
  /* Approved palette */
  --ink: #101113;
  --midnight: #17232D;
  --tobacco: #604635;
  --cream: #E9DDC5;
  --amber: #D6A363;
  --gray: #B5ADA1;
  --paper-ink: #29241F;

  /* Derived from the palette */
  --paper-ink-soft: #574C42;          /* secondary text on cream paper */
  --paper-edge: #C7B793;              /* fine edge of the paper */
  --line: rgba(233, 221, 197, 0.16);  /* hairlines on dark */
  --tone-slate: color-mix(in srgb, var(--midnight) 92%, var(--cream));
  --tone-deep: color-mix(in srgb, var(--ink) 80%, var(--tobacco));

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --sleeve: 13rem;
  --step: 8.5rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --col-a: 30rem;
  --rise: 2.75rem;   /* how far the disc shows above a sleeve in the crate */
  --reach: 3.1rem;     /* how far the disc shows beside the sleeve at the desktop reading position */
  --sleeve-duration: 520ms;
  --return-delay: 140ms;
  --disc-duration: 380ms;
  --disc-open-duration: 480ms;
  --insert-delay: 160ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--amber); }
button { font: inherit; color: inherit; }
.wrap { width: min(100% - 2rem, 84rem); margin-inline: auto; }

:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }

.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;
}
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: .6rem 1rem; background: var(--cream); color: var(--ink); }
.skip:focus { top: .75rem; }

/* ---------- Top of page ---------- */
.demo-strip {
  padding: .35rem 1rem; text-align: center; font-size: .9375rem; line-height: 1.4;
  color: var(--gray); background: var(--ink); border-bottom: 1px solid var(--line);
}
.site-header { background: var(--ink); }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1.5rem; padding-block: .35rem; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream); font-family: var(--serif); font-size: 1.4rem; font-weight: 500; text-decoration: none; letter-spacing: .01em; }
nav ul { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; }
nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; color: var(--cream); text-decoration: none; }
nav a:hover { color: var(--amber); text-decoration: underline; text-underline-offset: .35em; }

/* ---------- Scene: arrival + crate + liner notes ---------- */
/* The scene is a size container: layout modes follow its width in em, so they also respond to larger text. */
.scene {
  container-type: inline-size; container-name: scene; font-size: 1rem;
  position: relative; overflow-x: clip; padding-bottom: 3rem;
  background:
    radial-gradient(70rem 38rem at 50% 0%, var(--midnight), transparent 72%),
    var(--ink);
}
/* Cooler shadow at the page edges. */
.scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16, 17, 19, .85), transparent 14%, transparent 86%, rgba(16, 17, 19, .85)),
    linear-gradient(0deg, var(--ink), transparent 14%);
}
.scene-grid { position: relative; z-index: 1; font-size: 1.0625rem; display: grid; row-gap: 2rem; padding-top: 2rem; }
.arrival { max-width: 36rem; position: relative; }
.arrival-caption {
  position: absolute; top: -.95rem; left: 0; color: var(--amber);
  font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
}
.arrival h1 { letter-spacing: -.04em; }
.arrival h1 span:nth-child(2) { color: var(--amber); font-style: italic; }
.arrival h1 span:last-child { letter-spacing: -.05em; }

h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 8vw, 4.1rem); line-height: 1.05; letter-spacing: -.015em; text-wrap: balance; }
.lead { margin-top: 1.25rem; max-width: 33rem; color: var(--cream); }
.arrival-link { margin-top: 1rem; }
.arrival-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.arrival-link a:hover { text-decoration-thickness: 2px; }

/* The crate */
.crate-zone { position: relative; min-width: 0; }
/* Overhead warm atmospheric spotlight centered over the crate and counter */
.crate-zone::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -20rem -12rem -5rem -8rem;
  background: radial-gradient(ellipse closest-side at 55% 30%, rgba(214, 163, 99, .28), rgba(214, 163, 99, .09) 58%, transparent 100%);
}
.crate {
  --head: 2.25rem; /* headroom above the sleeves; the rim and the recess both hang from it */
  position: relative;
  filter: drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, .75));
}
/* Crate backboard rim: aged wood edge catching ambient light */
.crate::before {
  content: ""; position: absolute; z-index: 0; left: -.5rem; right: -.5rem; top: calc(var(--head) - 1.15rem); height: .45rem;
  background: linear-gradient(180deg, #443124 0%, #2a1e16 100%);
  border-radius: 2px 2px 0 0; border-top: 1px solid rgba(214, 163, 99, .35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .7); pointer-events: none;
}
.sleeves {
  position: relative; display: flex; width: max-content; min-width: 100%;
  height: calc(var(--sleeve) + var(--head) + .75rem); padding: var(--head) 1.25rem 0;
}
/* Deep internal recess of the crate: internal shadow, wooden base floor */
.sleeves::before {
  content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: calc(var(--head) - .75rem); bottom: 0;
  background:
    linear-gradient(180deg, #070809 0%, #0d0f12 30%, #151412 80%, #1a1613 100%);
  border-radius: 4px 4px 0 0;
  box-shadow:
    inset 0 1.8rem 2.4rem -.6rem rgba(0, 0, 0, .92),
    inset 0 -1.2rem 1.6rem rgba(0, 0, 0, .85),
    inset 3px 0 8px rgba(0, 0, 0, .7),
    inset -3px 0 8px rgba(0, 0, 0, .7);
}
/* Front board of the crate: crafted walnut plank, beveled illuminated lip */
.sleeves::after {
  content: ""; position: absolute; z-index: 12; left: -.5rem; right: -.5rem; bottom: 0; height: 3.25rem;
  background:
    linear-gradient(180deg, #785841 0%, #634734 12%, #523a2a 45%, #442f22 75%, #322218 100%);
  border-top: 1.5px solid rgba(233, 221, 197, .5);
  border-bottom: 3px solid color-mix(in srgb, var(--tobacco) 35%, var(--ink));
  border-radius: 3px 3px 0 0;
  box-shadow:
    0 -1rem 1.8rem -.2rem rgba(0, 0, 0, .72),
    0 1rem 1.8rem rgba(0, 0, 0, .8),
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 -2px 0 rgba(0, 0, 0, .45);
  pointer-events: none;
}
.sleeves li {
  position: relative; z-index: var(--z, 1); flex: 0 0 auto; width: var(--sleeve); height: var(--sleeve);
  transition: z-index 0s linear 0s;
}
.sleeves li + li { margin-left: calc(var(--step) - var(--sleeve)); }
/* A record leaves the crate from behind the front board (it only moves in front once it is clear of it),
   and goes back the same way: above its neighbours (z 1-6) but below the board (z 12) while it settles. */
.sleeves li.is-selected { z-index: 30; transition-delay: 300ms; }
.sleeves li.is-returning { z-index: 8; }
/* The list item stays put while its sleeve travels; only the sleeve itself may take clicks. */
.sleeves li.is-selected { pointer-events: none; }
.sleeves li.is-selected .sleeve { pointer-events: auto; }
.sleeve {
  --tx: 0px; --ty: 0px; --rx: 2.5deg; --sc: 1;
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer; color: var(--cream);
  transform-origin: 50% 100%;
  transform: perspective(70rem) translate(var(--tx), var(--ty)) rotateX(var(--rx)) scale(var(--sc));
  transition: transform var(--sleeve-duration) var(--ease), filter 200ms ease;
}
/* the sleeve itself: an opaque face in front of the disc */
.face {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  width: 100%; height: 100%; padding: .85rem .9rem;
  border-radius: 3px; overflow: hidden;
  box-shadow:
    -4px 0 5px -1px rgba(0, 0, 0, .65),
    -1.1rem 0 1.6rem -.45rem rgba(0, 0, 0, .85),
    inset 1px 0 0 rgba(233, 221, 197, .16),
    inset 0 1px 0 rgba(233, 221, 197, .22);
  transition: box-shadow 520ms var(--ease), border-color 200ms ease;
}

/* The vinyl disc: a plain CSS interface element (concentric grooves, a plain fictional label).
   It rests hidden behind the sleeve face and slides out toward free space. It never spins. */
.disc {
  --dd-x: 0px; --dd-y: calc(-.5rem - var(--rise));
  position: absolute; z-index: 0; left: .5rem; top: .5rem; width: calc(var(--sleeve) - 1rem); aspect-ratio: 1;
  border-radius: 50%; pointer-events: none;
  background:
    conic-gradient(from 25deg, transparent 0 8%, rgba(233, 221, 197, .07) 13%, transparent 20% 58%, rgba(233, 221, 197, .06) 63%, transparent 70%),
    radial-gradient(circle, transparent 0 94%, rgba(233, 221, 197, .08) 94.5% 100%),
    repeating-radial-gradient(circle, rgba(233, 221, 197, .05) 0 1px, transparent 1px 3.5px),
    radial-gradient(circle, #1d1f22, #0b0c0d 72%);
  box-shadow: 0 0 0 1px rgba(233, 221, 197, .08), 0 .5rem .9rem -.3rem rgba(0, 0, 0, .75);
  transition: transform var(--disc-duration) var(--ease);
}
.disc::before { /* center label with spindle hole */
  content: ""; position: absolute; inset: 34%; border-radius: 50%;
  background: radial-gradient(circle, var(--ink) 0 7%, transparent 7.5%), var(--tobacco);
  box-shadow: 0 0 0 1px rgba(214, 163, 99, .5), inset 0 0 0 .22rem color-mix(in srgb, var(--tobacco) 70%, var(--ink));
}
.sleeve.is-selected .disc { transform: translate(var(--dd-x), var(--dd-y)); transition: transform var(--disc-open-duration) var(--ease) var(--insert-delay); }

/* Common sleeve typography elements */
.s-cat { order: 0; max-width: 7.2rem; font-size: .75rem; line-height: 1.4; font-variant-numeric: tabular-nums; letter-spacing: .09em; color: var(--cream); }
.s-format { order: 1; max-width: 7.2rem; font-size: .625rem; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); margin-bottom: .15rem; }
.s-state { order: 2; white-space: pre-line; max-width: 7.2rem; font-size: .875rem; line-height: 1.3; font-weight: 700; color: var(--amber); }
.s-state:empty { display: none; }
.s-title { order: 3; max-width: 7.2rem; margin-top: .15rem; font-family: var(--serif); font-size: 1.1rem; font-weight: 500; line-height: 1.15; }
.s-artist { order: 4; max-width: 7.2rem; margin-top: .3rem; font-size: .875rem; line-height: 1.3; }
.s-genre { order: 5; max-width: 7.2rem; font-size: .8125rem; line-height: 1.3; color: var(--gray); }
.s-no {
  display: none; position: absolute; right: .85rem; top: .55rem; font-family: var(--serif); font-size: 2.6rem; line-height: 1;
  font-variant-numeric: lining-nums; color: var(--amber); opacity: .9;
}
.s-tab {
  position: absolute; left: .6rem; bottom: calc(100% + 1px); padding: .2rem .75rem .15rem;
  font-size: .875rem; line-height: 1.4; white-space: nowrap; font-weight: 600;
  background: linear-gradient(180deg, #1c242c, var(--ink)); color: var(--amber);
  border: 1px solid rgba(214, 163, 99, .5); border-bottom: 0; border-radius: 4px 4px 0 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .45);
}

/* =====================================================================
   INDIVIDUAL RECORD SLEEVE IDENTITIES
   ===================================================================== */

/* --- LR-001: Slow Tide Letters (Marrow & Vale) — Ambient folk --- */
.sleeve[data-cat="LR-001"] .face {
  background: linear-gradient(175deg, #443226 0%, #35261c 60%, #291d15 100%);
  border: 1px solid rgba(214, 163, 99, .35);
  border-left: 2.5px solid rgba(214, 163, 99, .65);
}
.sleeve[data-cat="LR-001"] .s-cat { color: var(--amber); letter-spacing: .12em; }
.sleeve[data-cat="LR-001"] .s-title {
  font-family: var(--serif); font-style: italic; font-size: 1.15rem; font-weight: 400; line-height: 1.15;
}
.sleeve[data-cat="LR-001"] .s-artist { font-size: .875rem; letter-spacing: .02em; color: var(--cream); }
.sleeve[data-cat="LR-001"] .disc::before {
  background: radial-gradient(circle, var(--ink) 0 7%, transparent 7.5%), #4e382b;
  box-shadow: 0 0 0 1px rgba(214, 163, 99, .6), inset 0 0 0 .2rem #36261d;
}

/* --- LR-002: Sodium Hours (Pale Corridor) — Dream pop --- */
.sleeve[data-cat="LR-002"] .face {
  background:
    linear-gradient(180deg, #101922 0%, #172430 42%, rgba(214, 163, 99, .14) 54%, #141f2a 68%, #0d151c 100%);
  border: 1px solid rgba(214, 163, 99, .28);
}
.sleeve[data-cat="LR-002"] .s-cat { letter-spacing: .15em; color: var(--cream); font-size: .7rem; }
.sleeve[data-cat="LR-002"] .s-title {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .12em; font-size: .95rem; font-weight: 400; line-height: 1.25;
}
.sleeve[data-cat="LR-002"] .s-artist { color: var(--amber); letter-spacing: .05em; font-size: .875rem; }
.sleeve[data-cat="LR-002"] .s-genre { text-transform: uppercase; letter-spacing: .08em; font-size: .6875rem; }
.sleeve[data-cat="LR-002"] .disc::before {
  background: radial-gradient(circle, var(--ink) 0 7%, transparent 7.5%), #15222d;
  box-shadow: 0 0 0 1px rgba(214, 163, 99, .5), inset 0 0 0 .2rem #0d161e;
}

/* --- LR-003: Field Notes for Rain (Ines Calloway Trio) — Modal jazz --- */
.sleeve[data-cat="LR-003"] .face {
  background: linear-gradient(180deg, #16181b 0%, #101214 70%, #0a0b0d 100%);
  border: 1px solid rgba(233, 221, 197, .3);
  border-top: 3px solid var(--amber);
}
.sleeve[data-cat="LR-003"] .s-cat { color: var(--amber); font-weight: 700; letter-spacing: .1em; }
.sleeve[data-cat="LR-003"] .s-title {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600; line-height: 1.12; letter-spacing: -.01em;
}
.sleeve[data-cat="LR-003"] .s-artist {
  text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; font-weight: 600; color: var(--cream);
}
.sleeve[data-cat="LR-003"] .s-genre { font-style: italic; font-size: .75rem; }
.sleeve[data-cat="LR-003"] .disc::before {
  background: radial-gradient(circle, var(--ink) 0 7%, transparent 7.5%), linear-gradient(180deg, #1c252d 50%, #e9ddc5 50%);
  box-shadow: 0 0 0 1px rgba(214, 163, 99, .7), inset 0 0 0 .15rem #11171d;
}

/* --- LR-004: Static Orchard (Oko Bellweather) — Electronic --- */
.sleeve[data-cat="LR-004"] .face {
  background: linear-gradient(170deg, #1d2722 0%, #151d19 55%, #0f1512 100%);
  border: 1px solid rgba(214, 163, 99, .3);
}
.sleeve[data-cat="LR-004"] .s-cat {
  font-family: ui-monospace, "Cascadia Code", "Courier New", monospace;
  font-size: .7rem; letter-spacing: .12em; color: var(--amber);
}
.sleeve[data-cat="LR-004"] .s-format {
  font-family: ui-monospace, monospace; font-size: .58rem; color: var(--gray);
}
.sleeve[data-cat="LR-004"] .s-title {
  font-family: var(--sans); font-size: 1.15rem; font-weight: 600; letter-spacing: .02em; line-height: 1.15;
}
.sleeve[data-cat="LR-004"] .s-artist { font-size: .875rem; color: var(--cream); }
.sleeve[data-cat="LR-004"] .s-genre {
  font-family: ui-monospace, monospace; font-size: .6875rem; color: var(--gray);
}
.sleeve[data-cat="LR-004"] .disc::before {
  background:
    radial-gradient(circle, var(--ink) 0 7%, transparent 7.5%),
    repeating-radial-gradient(circle, transparent 0 4px, rgba(214, 163, 99, .14) 5px),
    #1d2a23;
  box-shadow: 0 0 0 1px rgba(214, 163, 99, .55);
}

/* --- LR-005: Everything Is Porch Light (The Night Shift Choir) — Indie rock --- */
.sleeve[data-cat="LR-005"] .face {
  background: linear-gradient(180deg, #533726 0%, #432b1d 60%, #352115 100%);
  border: 1px solid rgba(214, 163, 99, .4);
}
.sleeve[data-cat="LR-005"] .s-cat { font-weight: 700; color: var(--amber); letter-spacing: .07em; }
.sleeve[data-cat="LR-005"] .s-title {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 700; line-height: 1.08; letter-spacing: -.02em;
}
.sleeve[data-cat="LR-005"] .s-artist { font-size: .875rem; font-weight: 600; color: var(--cream); }
.sleeve[data-cat="LR-005"] .s-genre { font-style: italic; font-size: .75rem; }
.sleeve[data-cat="LR-005"] .disc::before {
  background: radial-gradient(circle, var(--ink) 0 7%, transparent 7.5%), #5d3d2a;
  box-shadow: 0 0 0 1px rgba(214, 163, 99, .6), inset 0 0 0 .2rem #412a1c;
}

/* --- LR-006: Low Frequencies Welcome (Dub Cartographers) — Dub and downtempo --- */
.sleeve[data-cat="LR-006"] .face {
  background: linear-gradient(180deg, #0e1115 0%, #13171d 50%, #090b0e 100%);
  border: 1px solid rgba(233, 221, 197, .25);
  border-bottom: 2.5px solid var(--amber);
}
.sleeve[data-cat="LR-006"] .s-cat { font-weight: 800; letter-spacing: .15em; color: var(--cream); }
.sleeve[data-cat="LR-006"] .s-title {
  font-family: var(--sans); font-size: 1rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; line-height: 1.12;
}
.sleeve[data-cat="LR-006"] .s-artist {
  text-transform: uppercase; letter-spacing: .03em; font-size: .75rem; font-weight: 600; color: var(--amber);
}
.sleeve[data-cat="LR-006"] .s-genre { text-transform: uppercase; letter-spacing: .05em; font-size: .625rem; }
.sleeve[data-cat="LR-006"] .disc::before {
  background: radial-gradient(circle, var(--ink) 0 7%, transparent 7.5%), #111419;
  box-shadow: 0 0 0 1px rgba(233, 221, 197, .35), inset 0 0 0 .22rem #07080a;
}

.sleeve:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.sleeve:focus-visible .face { box-shadow: inset 0 0 0 2px var(--ink), -4px 0 6px -1px rgba(0, 0, 0, .7), -1.2rem 0 1.6rem -.45rem rgba(0, 0, 0, .9); }
.sleeve:not(.is-selected):focus-visible { --ty: -1.1rem; --rx: 0deg; filter: brightness(1.1); transition-duration: 200ms, 200ms; transition-delay: 0s; }
@media (hover: hover) {
  .sleeve:not(.is-selected):hover { --ty: -1.1rem; --rx: 0deg; filter: brightness(1.1); transition-duration: 200ms, 200ms; transition-delay: 0s; }
}
.sleeve.is-selected { --rx: 0deg; --sc: 1.03; }
.sleeve.is-selected .face {
  border-color: var(--amber) !important;
  box-shadow: 0 1.8rem 2.4rem -1rem rgba(0, 0, 0, .85), 0 0 0 1px var(--amber), inset 0 1px 0 rgba(233, 221, 197, .25);
}
.sleeve.is-selected:focus-visible .face { box-shadow: 0 1.8rem 2.4rem -1rem rgba(0, 0, 0, .85), 0 0 0 1px var(--amber); }
/* A record being put back: the disc goes first, then the sleeve follows. */
.sleeve.is-returning { transition-delay: var(--return-delay), 0s; }

/* Controls beneath the crate */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem 1rem; margin-top: .6rem; padding-inline: .25rem; }
.tool {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .35rem; background: none; border: 0;
  color: var(--cream); font-size: 1rem; text-decoration: underline; text-decoration-color: rgba(233, 221, 197, .4);
  text-underline-offset: .3em; text-decoration-thickness: 1px; cursor: pointer;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}
.tool:hover { color: var(--amber); text-decoration-color: var(--amber); }
.tool:active { color: var(--cream); }
.tool[hidden] { display: none; }
a.tool { color: var(--amber); font-weight: 600; }
.count { margin-left: auto; padding-left: .35rem; color: var(--gray); font-variant-numeric: tabular-nums; }
.count strong { color: var(--cream); }
.stack-drawer { position: relative; z-index: 45; }
.stack-drawer summary { position: relative; cursor: pointer; display: flex; align-items: center; gap: .3rem; font-size: .9375rem; line-height: calc(1.0625rem * 1.65); }
.stack-drawer summary::before { content: ""; position: absolute; inset: 0; min-height: 44px; }
.stack-drawer summary::after { content: "+"; color: var(--amber); margin-left: .4rem; font-size: 1.2rem; line-height: 1; }
.stack-drawer[open] summary::after { content: "−"; }
.stack-drawer[open] summary { box-shadow: inset 0 -1px var(--amber); }
.stack-panel {
  position: absolute; right: 0; bottom: calc(100% + .75rem); width: min(22rem, 85vw);
  max-height: 24rem; overflow: auto; padding: 1.25rem 1.5rem;
  background: var(--midnight); color: var(--cream); border: 1px solid var(--amber);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .65);
}
.stack-heading { font-family: var(--serif); font-size: 1.4rem; line-height: 1.2; margin-bottom: .75rem; }
.stack-empty { color: var(--gray); }
.stack-footnote { margin-top: .8rem; font-size: .8125rem; color: var(--gray); }
#saved-records li + li { border-top: 1px solid var(--line); }
#saved-records button { display: flex; flex-direction: column; gap: .15rem; width: 100%; min-height: 44px; text-align: left; background: none; border: 0; padding: .6rem .15rem; cursor: pointer; }
#saved-records button:hover { color: var(--amber); }
.saved-cat { color: var(--amber); font-size: .6875rem; letter-spacing: .09em; }

/* Reading area */
.reader { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.slot { display: none; }
.invite {
  grid-area: 1 / 1; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: .75rem; min-height: 10rem; padding: 1.5rem 1.75rem 1.4rem;
  background: linear-gradient(180deg, rgba(8, 9, 10, .55), rgba(16, 17, 19, .15));
  border: 1px solid var(--line); border-radius: 3px; box-shadow: inset 0 1.4rem 2rem -1.1rem rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transition: opacity 260ms ease, visibility 0s linear 260ms;
}
.reader.is-idle .invite { opacity: 1; visibility: visible; transition-delay: 0s; }
.reader-caption { position: absolute; top: .35rem; left: 1.75rem; right: 1.75rem; display: flex; justify-content: space-between; gap: .5rem; color: var(--amber); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; }
.invite { border: 1px solid transparent; border-left-color: rgba(214, 163, 99, .5); border-radius: 0; background: linear-gradient(90deg, rgba(214, 163, 99, .035), transparent 75%); box-shadow: none; }
.invite-title { max-width: 14em; font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.15; text-wrap: balance; color: var(--cream); }
.invite-hint { color: var(--gray); font-size: .9375rem; }
.paper {
  grid-area: 1 / 1; position: relative; z-index: 5; display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem 1.3rem; color: var(--paper-ink);
  background: linear-gradient(98deg, #EDE2CC 0%, var(--cream) 38%, #E3D5B8 100%);
  border: 1px solid var(--paper-edge); border-radius: 2px;
  box-shadow: 0 1.4rem 2rem -1.1rem rgba(0, 0, 0, .75), 0 1px 0 rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transform: translateX(-3rem);
  transition: opacity 280ms ease, transform 420ms var(--ease), visibility 0s linear 420ms;
}
.paper::before { /* fine printed rule inside the edge */
  content: ""; position: absolute; inset: .45rem; border: 1px solid rgba(41, 36, 31, .14); pointer-events: none;
}
.paper-number { position: absolute; top: .85rem; right: 1rem; font-size: .625rem; letter-spacing: .08em; color: var(--paper-ink-soft); font-variant-numeric: tabular-nums; }
.paper:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.reader.is-open .paper:not(.ghost) { opacity: 1; visibility: visible; transform: none; transition: opacity 360ms ease 160ms, transform 520ms var(--ease) 160ms, visibility 0s; }

.paper-inner { position: relative; flex: 1; }
.paper.ghost { display: none; visibility: hidden !important; opacity: 0 !important; transform: none !important; transition: none !important; pointer-events: none; }
.paper { container-type: inline-size; container-name: paper; }
@container paper (min-width: 33rem) {
  .paper-inner { display: grid; grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr); column-gap: 1.75rem; }
  .p-body { padding-left: 1.75rem; border-left: 1px solid rgba(41, 36, 31, .22); }
  .paper .note { margin-top: .15rem; }
}
.paper .cat { font-size: .9375rem; color: var(--paper-ink-soft); font-variant-numeric: tabular-nums; }
.paper h3 { margin-top: .35rem; font-family: var(--serif); font-size: clamp(1.8rem, 5vw, 2.35rem); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; }
.paper .artist { margin-top: .2rem; font-size: 1.15rem; font-weight: 600; }
.paper .intro { margin-top: .8rem; font-family: var(--serif); font-size: 1.2rem; line-height: 1.4; }
.paper .note { margin-top: .7rem; max-width: 38rem; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.65; }
.paper .note::first-letter { float: left; font-size: 2.8rem; line-height: .95; padding: .12rem .25rem 0 0; }
.p-body > :first-child { margin-top: .7rem; }
.paper .by { margin-top: 1rem; color: var(--paper-ink-soft); }
.paper .best { margin-top: .15rem; font-weight: 600; }
.paper-actions { position: relative; display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-top: .9rem; padding-top: .75rem; border-top: 1px solid rgba(41, 36, 31, .25); }
.paper-btn {
  min-height: 44px; padding: 0 1rem; cursor: pointer; background: transparent; color: var(--paper-ink);
  border: 1px solid var(--paper-ink); border-radius: 2px; font-weight: 600;
  transition: background 200ms ease, color 200ms ease;
}
.paper-btn:hover { background: rgba(41, 36, 31, .1); }
.paper-btn[aria-pressed="true"] { background: var(--paper-ink); color: var(--cream); }
.paper-btn[aria-pressed="true"]::before { content: "\2713\00a0"; }
.paper-btn.quiet { border-color: transparent; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.paper-btn.quiet:hover { border-color: transparent; }
.paper :focus-visible, .paper-btn:focus-visible { outline-color: var(--paper-ink); }

/* Without JavaScript the crate and reader are hidden; the record list below stays readable. */
html:not(.js) .js-only { display: none; }
html:not(.js) .crate-zone, html:not(.js) .reader { display: none; }
.static { position: relative; z-index: 1; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.js .static { display: none; }
.static h2 { font-family: var(--serif); font-weight: 500; font-size: 2rem; }
.static-intro { margin-top: .5rem; color: var(--gray); }
.rec { margin-top: 1.5rem; padding: 1.25rem 1.5rem; max-width: 42rem; color: var(--paper-ink); background: var(--cream); border: 1px solid var(--paper-edge); border-radius: 2px; }
.rec h3 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; line-height: 1.15; }
.rec p { margin-top: .6rem; }
.rec .rec-artist { font-weight: 600; margin-top: .15rem; }
.rec .rec-genre, .rec .rec-by { color: var(--paper-ink-soft); margin-top: .1rem; }
.rec .rec-best { font-weight: 600; }

/* ---------- Shared: labels, section rhythm, photography ---------- */
.label { margin-bottom: .6rem; color: var(--amber); font-size: .9375rem; font-weight: 600; }
.shop h2, .visit h2 { font-family: var(--serif); font-weight: 500; line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
.shop p, .visit-lead { max-width: 34rem; }

.photo { margin: 0; }
.photo img { display: block; width: 100%; height: auto; border-radius: 3px; object-fit: cover; background: var(--midnight); }
.photo figcaption { margin-top: .55rem; max-width: 30rem; color: var(--gray); font-size: .9375rem; line-height: 1.45; }
/* Photo A melts into the section: soft left and lower edges, never a hard box. */
.photo-a img { aspect-ratio: 16 / 10; object-position: 50% 55%; }
.photo-b img { aspect-ratio: 4 / 3; box-shadow: 0 1.2rem 1.6rem -1rem rgba(0, 0, 0, .8); }
.photo-b { max-width: 22rem; margin-top: 1.5rem; }

/* ---------- The shop ---------- */
.shop, .visit { container-type: inline-size; container-name: sections; overflow-x: clip; }
.shop { padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 7vw, 5rem); background: radial-gradient(60rem 34rem at 15% 38%, rgba(23, 35, 45, .8), transparent 70%); }
.shop-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.shop h2 { font-size: clamp(2.2rem, 4.4vw, 3.3rem); }
.shop-lede p:not(.label) { margin-top: 1.25rem; }
.pull { margin-top: 1.5rem; font-family: var(--serif); font-size: 1.35rem; line-height: 1.35; color: var(--amber); }
.people li { padding-block: 1.1rem; border-top: 1px solid var(--line); }
.people h3 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; line-height: 1.2; }
.people p { margin-top: .35rem; color: var(--cream); }

/* ---------- Visit ---------- */
.visit {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(44rem 24rem at 14% 30%, rgba(214, 163, 99, .14), transparent 70%),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--tobacco) 30%, var(--ink)));
}
.visit-grid { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); }
.visit h2 { font-size: clamp(2.5rem, 7vw, 3.9rem); }
.visit-lead { font-size: 1.15rem; }
.visit-info { display: grid; gap: 1.5rem 2rem; margin-top: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.visit-info > div { padding-top: .9rem; border-top: 1px solid rgba(233, 221, 197, .3); }
.visit-info dt { font-family: var(--serif); font-size: 1.25rem; color: var(--amber); }
.visit-info dd { margin-top: .3rem; }
.placeholder { border-bottom: 1px dashed var(--gray); }
.visit-note { margin-top: 1.75rem; max-width: 36rem; color: var(--cream); font-size: .9375rem; }

.site-footer { padding-block: 1.75rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--tobacco) 30%, var(--ink)); }
.site-footer p { max-width: 54rem; color: var(--cream); font-size: .9375rem; }

/* ---------- Editorial transition bridge: linking crate to shop ---------- */
.scene-bridge { position: relative; z-index: 2; margin-top: 2rem; }
.bridge-card {
  display: grid; gap: .75rem 1.75rem; padding: 1.2rem 1.6rem;
  background: linear-gradient(135deg, rgba(23, 35, 45, .55), rgba(96, 70, 53, .22));
  border: 1px solid rgba(214, 163, 99, .32); border-radius: 3px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(233, 221, 197, .1);
}
@media (min-width: 48rem) {
  .bridge-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
}
.bridge-pulse {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--amber);
}
.bridge-indicator {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 8px var(--amber);
}
.bridge-copy { color: var(--cream); font-size: .9375rem; line-height: 1.5; max-width: 44rem; }
.bridge-link {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px;
  font-size: .9375rem; font-weight: 600; color: var(--amber);
  text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px;
}
.bridge-link:hover { color: var(--cream); }

/* ---------- Phone and small tablet: a shallow horizontal crate you can scroll, notes directly below ---------- */
@container scene (max-width: 61.99em) {
  .crate { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding-bottom: .25rem; scrollbar-color: var(--tobacco) var(--ink); }
  .sleeves li { scroll-snap-align: center; }
  .tools .count { margin-left: 0; width: 100%; }
  .stack-panel { left: 0; right: auto; }
}

/* ---------- Anything narrower than the full desktop layout: the selected sleeve lifts in place ---------- */
@container scene (max-width: 87.99em) {
  .crate { --head: 4.5rem; }
  .scene-grid { row-gap: .5rem; }
  /* The sleeve only lifts in place here, so it keeps its place in the stack and never hides a neighbor's title. */
  .sleeves li.is-selected { z-index: var(--z, 1); }
  .sleeve.is-selected { --ty: -1.25rem; --sc: 1.02; }
  /* The disc rises where the shop-turntable tab sits, so on the open sleeve the tab steps down onto the jacket. */
  .s-tab { transition: bottom 300ms var(--ease); }
  .sleeve.is-selected .s-tab { z-index: 2; bottom: 1rem; width: 7.2rem; padding: .1rem .5rem; white-space: normal; line-height: 1.2; border-bottom: 1px solid rgba(214, 163, 99, .45); border-radius: 4px; }
  .paper { transform: translateY(-.75rem); }
  .reader { margin-top: .25rem; }
}
@container scene (min-width: 48em) and (max-width: 87.99em) {
  .paper { padding: 2rem 2.25rem 1.5rem; }
}

/* ---------- Wide laptop: headline and introduction side by side, crate across the lower right ---------- */
@container scene (min-width: 62em) and (max-width: 87.99em) {
  .scene-grid { padding-top: 1.5rem; row-gap: .5rem; }
  .arrival { max-width: none; display: grid; grid-template-columns: minmax(0, var(--col-a)) minmax(0, 1fr); column-gap: 2.5rem; align-items: end; }
  .arrival h1 { font-size: 3.6rem; }
  .arrival h1 span { display: inline; }
  .arrival h1 { grid-column: 1; grid-row: 1 / 3; }
  .arrival .lead { grid-column: 2; margin-top: 0; }
  .arrival-link { grid-column: 2; margin-top: .25rem; }
  .crate-zone { justify-self: end; width: calc(5 * var(--step) + var(--sleeve) + 2.5rem); max-width: 100%; }
  .count { margin-left: auto; width: auto; }
}

/* ---------- Desktop: the selected sleeve leaves the crate and sits beside its notes ---------- */
@container scene (min-width: 88em) {
  .scene-grid { --col-a: 26rem; }
  .scene-grid {
    grid-template-columns: minmax(0, var(--col-a)) minmax(0, 1fr);
    grid-template-areas: "arrival reader" "crate crate";
    column-gap: 2.5rem; row-gap: .75rem; padding-top: 1.25rem;
  }
  .arrival { grid-area: arrival; align-self: start; padding-top: 1rem; }
  h1 { font-size: clamp(3.2rem, 4.4vw, 4.3rem); line-height: 1.02; text-wrap: wrap; }
  h1 span { display: block; }
  .invite-title { font-size: clamp(2.1rem, 3vw, 2.9rem); }
  .arrival .lead { margin-top: 1.75rem; }
  .crate-zone { grid-area: crate; justify-self: end; width: calc(5 * var(--step) + var(--sleeve) + 2.5rem); max-width: 100%; }
  .reader { grid-area: reader; grid-template-columns: calc(var(--sleeve) + .5rem) minmax(0, 1fr); column-gap: 1.25rem; }
  .paper.ghost { display: flex; }
  .slot { display: block; grid-area: 1 / 1; width: var(--sleeve); height: var(--sleeve); }
  .invite { grid-column: 1 / -1; }
  .paper { grid-column: 2; padding: 1.4rem 2rem 1.1rem 2.25rem; transform: translateX(-9rem); }
  .sleeve.is-selected .s-no { display: block; }
  .sleeve.is-selected .s-no { top: .8rem; font-family: var(--sans); font-size: .75rem; color: var(--cream); }
  .sleeve.is-selected .s-format { font-size: .65rem; margin-top: .1rem; }
  .sleeve.is-selected .s-title { max-width: 11.5rem; margin-top: .3rem; }
  .sleeve.is-selected .s-artist { max-width: 11.5rem; font-size: .875rem; margin-top: .25rem; }
  .sleeve.is-selected .s-genre { max-width: 11.5rem; font-size: .75rem; }
  .sleeve.is-selected .s-state { order: 6; position: static; margin-top: auto; max-width: 11.5rem; font-size: .6875rem; letter-spacing: .035em; white-space: normal; padding-top: .25rem; }

  .sleeve.is-selected[data-cat="LR-001"] .s-title { font-size: 1.5rem; line-height: 1.05; }
  .sleeve.is-selected[data-cat="LR-002"] .s-title { font-size: 1.15rem; letter-spacing: .15em; font-weight: 300; line-height: 1.2; }
  .sleeve.is-selected[data-cat="LR-003"] .s-title { font-size: 1.45rem; font-weight: 600; line-height: 1.05; }
  .sleeve.is-selected[data-cat="LR-004"] .s-title { font-size: 1.4rem; font-weight: 600; line-height: 1.05; }
  .sleeve.is-selected[data-cat="LR-005"] .s-title { font-size: 1.45rem; font-weight: 700; line-height: 1.02; }
  .sleeve.is-selected[data-cat="LR-006"] .s-title { font-size: 1.25rem; font-weight: 800; line-height: 1.05; }

  .disc { --dd-x: calc(.5rem + var(--reach)); --dd-y: 0px; }
  .count { margin-left: auto; }
}

@container sections (min-width: 45.2em) {
  .people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; }
}
/* One column system: a narrow lead column, then the main column. The scene, shop and visit sections share it. */
@container sections (min-width: 58.3em) {
  .shop-grid, .visit-grid { grid-template-columns: minmax(0, var(--col-a)) minmax(0, 1fr); column-gap: 2.5rem; align-items: start; }
  .shop-grid { row-gap: 2rem; grid-template-areas: "lede photoa" "pull people"; }
  .photo-a { grid-area: photoa; margin-right: calc(-1 * max(1rem, (100cqw - 84rem) / 2)); }
  .photo-a img {
    aspect-ratio: 2.1 / 1;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%), linear-gradient(0deg, transparent, #000 16%), linear-gradient(180deg, transparent, #000 7%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 18%), linear-gradient(0deg, transparent, #000 16%), linear-gradient(180deg, transparent, #000 7%);
    mask-composite: intersect; border-radius: 0;
  }
  .photo-a figcaption { margin-left: 18%; }
  .shop-lede { grid-area: lede; }
  .pull { grid-area: pull; margin-top: 0; align-self: start; }
  .people { grid-area: people; }
  .photo-b { width: min(100%, 18.5rem); margin-top: 2.5rem; margin-left: 2.5rem; }
  .visit-grid { row-gap: 1.5rem; }
}
@container sections (min-width: 82.8em) { .shop-grid, .visit-grid { --col-a: 26rem; } }

/* ---------- Reduced motion: no extraction travel, no perspective, no smooth scrolling ---------- */
html.instant *, html.instant *::before, html.instant *::after {
  transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important; }
  .sleeve { --rx: 0deg !important; --sc: 1 !important; transform: translate(var(--tx), var(--ty)); }
  .sleeve:not(.is-selected):hover, .sleeve:not(.is-selected):focus-visible { --ty: 0px; }
  .paper { transform: none !important; }
}