/* Layout: a horizontal crate of sleeves in 3D; settling on one lifts it out, flips it front-up and slides the record out below while the crate blurs. */
  :root {
    --room: #0b0b0a;
    --ink: #e9e7df;
    --dim: #7d7b73;
    --vinyl: #0e0e0e;
    --groove: #1c1c1b;
    --story: #cfcdc5;
    --rule: #55534e;
    --grain: .09;
    --behind: brightness(.45);
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --card: min(72vw, 460px, 56vh);
    --start: calc(50vw - var(--card) * 0.58);
    --focus: min(calc(100vw - 24px), 560px, calc((100vh - 200px) / 2));
    --ease: cubic-bezier(.2,.8,.2,1);
    color-scheme: dark;
  }
  /* Light mode: the site's warm off-white; records and sleeves stay as they are */
  :root[data-theme="light"] {
    --room: #f5f3eb;
    --ink: #1a1a18;
    --dim: #7a776d;
    --story: #33322e;
    --rule: #b9b5a8;
    --grain: .05;
    --behind: saturate(.35) opacity(.36);
    color-scheme: light;
  }
  html, body { transition: background-color .4s, color .4s; }
  * { box-sizing: border-box; }
  html, body { height: 100%; background: var(--room); color: var(--ink); }
  body {
    margin: 0; overflow: hidden;
    font-family: var(--mono); font-size: 12px; line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; user-select: none;
  }
  body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; opacity: var(--grain); z-index: 50;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .app { position: relative; z-index: 1; isolation: isolate; height: 100%; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 100%; }

  header, footer {
    display: flex; justify-content: space-between; gap: 12px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-block: 18px;
    text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; color: var(--dim);
    position: relative; z-index: 20;
  }
  header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding-block: calc(16px + env(safe-area-inset-top, 0px)) 6px; }
  header .hback { font-size: 15px; line-height: 1; width: max-content; color: var(--ink); text-transform: none; letter-spacing: 0; }
  header .title { display: block; text-align: center; color: var(--ink); text-decoration: none; }
  .sigmark { display: block; width: 104px; margin: 0 auto; }
  .sigmark .signature { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink); }
  .signature :is(path, rect, polygon, circle) { fill: currentColor; stroke: none; }
  .signature mask polyline { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
  header .title small { display: block; margin-top: 8px; color: var(--dim); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
  header .mode { justify-self: end; }
  @media (min-width: 900px) { .sigmark { width: 128px; } }
  .count { font-variant-numeric: tabular-nums; color: var(--ink); }

  /* ---------- The crate ---------- */
  .crate-wrap {
    position: relative; min-height: 0; min-width: 0; isolation: isolate;
    transition: filter 1s cubic-bezier(.45,0,.25,1), opacity 1s cubic-bezier(.45,0,.25,1), transform 1s cubic-bezier(.45,0,.25,1);
  }
  .is-focused .crate-wrap { filter: blur(10px) var(--behind); transform: scale(.94); }

  .crate {
    position: absolute; inset: 0;
    perspective: 1000px; perspective-origin: 40% 50%;
    overflow-x: clip; overflow-y: visible; clip-path: inset(-70px 0 -40px 0);   /* a pulled-out sleeve may rise a little above the crate without being cut */
    touch-action: pan-y;
    cursor: grab;
  }
  .crate.dragging { cursor: grabbing; }
  .slot {
    position: absolute; top: 50%; left: var(--start);
    width: var(--card); max-width: 100%; aspect-ratio: 1;
    margin-top: calc(var(--card) / -2);
    background: #111 center / cover no-repeat;
    box-shadow: -14px 20px 40px -14px rgba(0,0,0,.9);
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    cursor: inherit;
    border: 0; padding: 0;
  }
  .slot::after { /* subtle edge light on each sleeve, like the reference stack */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.45), transparent 35%, transparent 88%, rgba(255,255,255,.07));
  }
  .slot:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
  .slot.lifted { visibility: hidden; }

  .hint { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; color: var(--dim);
          text-transform: uppercase; letter-spacing: .12em; font-size: 10px; transition: opacity .4s; pointer-events: none; }
  .is-focused .hint, .moved .hint { opacity: 0; }

  /* ---------- Focus layer ---------- */
  .focus { position: fixed; inset: 0; z-index: 30; pointer-events: none; isolation: isolate; }
  .is-focused .focus { pointer-events: auto; }

  .record {
    position: absolute; left: 50%; top: 50%;
    width: var(--focus); aspect-ratio: 1;
    margin-left: calc(var(--focus) / -2);
    margin-top: calc(var(--focus) * -0.985 - 36px);
    transform-origin: 50% 50%;
    visibility: hidden;
    transform-style: preserve-3d;   /* the sleeve turns in the same 3D space as the crate */
  }
  .record.show { visibility: visible; }

  .flip {
    position: absolute; inset: 0; z-index: 2;
    transform-style: preserve-3d;
    transition: transform .85s var(--ease);
  }
  .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
          box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); }
  .front { background: #111 center / cover no-repeat; }
  .front { transform: translateZ(1px); }
  .back {
    transform: rotateY(180deg) translateZ(1px);
    background: #161615;
    display: grid; align-content: space-between; padding: 9%;
    color: #b9b7af; font-size: clamp(7px, 2.2vw, 10px); letter-spacing: .06em; text-transform: uppercase;
  }
  .back b { color: var(--ink); font-weight: 500; display: block; font-size: 1.25em; }
  .back ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .5em; }

  .disc {
    position: absolute; inset: 3%; z-index: 1;
    transition: transform .9s var(--ease), opacity .18s linear;
    opacity: 0;
    cursor: pointer;
  }
  /* Flipping to the other side is a flat squeeze-and-turn (no 3D backfaces, which some
     phones drew as stray white lines). The grooves are a pre-drawn image so they can't shimmer. */
  .disc-flip { position: absolute; inset: 0; transition: transform .26s cubic-bezier(.45,0,.55,1); }
  .side {
    position: absolute; inset: 0; border-radius: 50%;
    background: #0e0e0e url("/images/vinyl-grooves.webp") center / 100% 100% no-repeat;
    box-shadow: 0 24px 50px -18px rgba(0,0,0,.95);
  }
  .side.b { display: none; }
  .disc-flip.show-b .side.a { display: none; }
  .disc-flip.show-b .side.b { display: block; }
  .side::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 2; pointer-events: none;
    background: conic-gradient(from var(--sheen, 30deg), transparent 0 7%, rgba(255,255,255,var(--sheen-a, .10)) 12%, transparent 18% 50%, rgba(255,255,255,var(--sheen-b, .07)) 58%, transparent 64%);
  }
  .side-tag { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 3;
              font-size: 9px; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
  .flip { cursor: pointer; }
  .spin { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; will-change: transform; }
  .label { position: absolute; inset: 32%; border-radius: 50%; background: center / cover no-repeat; }
  .label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5%; height: 5%; border-radius: 50%;
                  transform: translate(-50%, -50%); background: var(--room); }

  /* Record slides out downward, fully clear of the sleeve (portrait screens have room below). */
  .record.open .disc { transform: translateY(calc(101% * var(--out, 1))) }
  .record.disc-in .disc { opacity: 1; }
  .record.open .spin { animation: turn 1.8s linear infinite; }
  @keyframes turn { to { transform: rotate(360deg); } }

  .caption {
    position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
    text-align: center; display: grid; gap: 2px; opacity: 0; transform: translateY(8px);
    transition: opacity .5s, transform .5s var(--ease);
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .caption b { font-weight: 500; letter-spacing: .04em; font-size: 12.5px; }
  .caption span { color: var(--dim); }
  .focus:has(.record.open) .caption { opacity: 1; transform: none; transition-delay: .25s; }


  /* ---------- Project story (revealed by scrolling up) ---------- */
  .lift { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
  .lift .record { pointer-events: auto; }
  .lift.snap, .sheet.snap, .caption.snap { transition: transform .55s var(--ease), opacity .4s; }
  /* The story sits right where the album title is and travels up with the sleeve, like one page */
  .sheet {
    position: absolute; left: 0; right: 0; top: 0;
    background: transparent;
    opacity: 0; pointer-events: none;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-block: 0 calc(48px + env(safe-area-inset-bottom, 0px));
    -webkit-user-select: text; user-select: text;
    z-index: 3;
    will-change: transform, opacity;
  }
  .sheet-inner { max-width: 62ch; margin: 0 auto; display: grid; gap: 22px; }
  .grip { width: 36px; height: 3px; border-radius: 2px; background: #3a3936; margin: 0 auto 4px; }
  .facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 12px; }
  .facts dt { color: var(--dim); }
  .facts dd { margin: 0; font-weight: 500; }
  .facts a, .story a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
  .story { display: grid; gap: 1em; font-size: 12.5px; line-height: 1.7; color: var(--story); }
  .story p { margin: 0; }
  .more-hint { display: block; margin-top: 4px; color: var(--dim); }

  @media (prefers-reduced-motion: reduce) {
    .flip, .disc, .crate-wrap, .caption { transition: none !important; }
    .record.open .spin { animation: none; }
  }

  /* ---------- Real-site additions ---------- */
  .back.has-img { padding: 0; background: #111 center / cover no-repeat; }
  .back.has-img #backText { display: none !important; }
  .sound {
    font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer;
    text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px;
  }
  .sound[hidden] { display: none !important; }
  .sound:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
  .now { color: var(--dim); }
  .story-src { display: none; }
  .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); text-align: center; padding: 24px; }

  /* Records whose back cover is designed to be read upside-down flip top-over-bottom */
  .record.vflip .back { transform: rotateX(180deg) translateZ(1px); }

  /* Die-cut corner: the cover is cut away and the inner sleeve shows through */
  .inner-sleeve { position: absolute; inset: 0; display: none; background: var(--inner, #222); }
  .record.has-cut .inner-sleeve { display: block; }
  .inner-sleeve::after { /* shadow the cover's cut edge casts on the inner sleeve */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(var(--cut-angle, 225deg), transparent calc(var(--cs, 16%) / 2 - 3%), rgba(0,0,0,.42) calc(var(--cs, 16%) / 2));
  }

  /* Foil finish: a metallic sheen masked to the foil areas, moving with the viewer */
  .foil {
    position: absolute; inset: 0; display: none; pointer-events: none;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    background-size: 320% 320%;
    background-position: var(--fx, 50%) var(--fy, 50%);
  }
  .record.has-foil .foil { display: block; }
  .record[data-foil="gold"] .foil {
    background-image:
      linear-gradient(115deg, #5e3f0c 0%, #b9862a 12%, #f9e7a2 19%, #ffffff 21%, #e0b154 25%, #8f6417 36%, #d7a846 48%, #fff2c2 55%, #c2902f 63%, #6e4b10 76%, #c99a3a 88%, #f4dc8c 100%);
  }
  .record[data-foil="silver"] .foil {
    background-image:
      linear-gradient(115deg, #5d6066 0%, #a9adb4 12%, #eef0f3 19%, #ffffff 21%, #c4c8ce 25%, #7d8187 36%, #b8bcc2 48%, #f4f5f7 55%, #a0a4aa 63%, #64676d 76%, #b0b4ba 88%, #e6e8ec 100%);
  }

  /* Landscape screens: the record slides out to the right, so both can be much larger */
  @media (orientation: landscape) and (min-width: 700px) {
    :root {
      --card: min(34vw, 480px, 50vh);
      --start: calc(50vw - var(--card) * 0.42);
      --focus: min(calc((100vw - 120px) / 2.05), 620px, calc(100vh - 200px));
    }
    .record { margin-left: calc(var(--focus) * -1.02); margin-top: calc(var(--focus) / -2 - 20px); }
    .record.open .disc { transform: translateX(calc(101% * var(--out, 1))) }
  }

  .side-tag { display: none; }

  /* While the story is being dragged open, the record follows the finger directly */
  .record.dragging .disc { transition: opacity .18s linear; }

  /* No text under the open record: the project facts appear there as you scroll.
     The caption stays in the layout (invisible) only to mark where the facts start. */
  .caption { visibility: hidden; }

  /* Quiet cue at the bottom while a record is open: there is a story behind the cover */
  .story-hint { position: absolute; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom, 0px)); margin: 0; z-index: 4; text-align: center; pointer-events: none;
    color: var(--dim); text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; line-height: 1.6; opacity: 0; transition: opacity .5s; }
  .focus:has(.record.open) .story-hint { opacity: 1; transition-delay: .9s; }
  .story-hint .arrow { display: block; font-size: 14px; letter-spacing: 0; animation: nudge 2.2s ease-in-out infinite; }
  .story-hint .t-mouse { display: none; }
  @media (hover: hover) and (pointer: fine) { .story-hint .t-touch { display: none; } .story-hint .t-mouse { display: inline; } }
  @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  @media (prefers-reduced-motion: reduce) { .story-hint .arrow { animation: none; } }


  /* While a sleeve flies back into the crate it gradually takes on the crate's shading and
     shadow, so nothing pops when the real crate sleeve takes over */
  .face { transition: box-shadow 1s cubic-bezier(.55,0,.2,1); }
  .face::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.45), transparent 35%, transparent 88%, rgba(255,255,255,.07));
    transition: opacity 1s cubic-bezier(.55,0,.2,1);
  }
  .record.landing .face { box-shadow: -14px 20px 40px -14px rgba(0,0,0,.9); }
  .record.landing .face::after { opacity: 1; }


  /* ---------- Light / dark switch (top right) ---------- */
  .mode { font: inherit; background: none; border: 0; padding: 4px 0; margin: -4px 0; cursor: pointer; color: var(--ink); }
  .mode-ico { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .mode-ico.i-sun { display: none; }
  :root[data-theme="dark"] .mode-ico.i-sun { display: block; }
  :root[data-theme="dark"] .mode-ico.i-moon { display: none; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mode-ico.i-sun { display: block; } :root:not([data-theme="light"]) .mode-ico.i-moon { display: none; } }
  .mode:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

  /* Spot UV: a clear gloss varnish. No colour of its own, just a glassy highlight that
     sweeps across the glossy area as you tilt or move, over an otherwise matte print. */
  .record[data-foil="uv"] .foil {
    background-image:
      linear-gradient(115deg, transparent 0%, transparent 34%, rgba(255,255,255,.04) 40%, rgba(255,255,255,.26) 45.5%, rgba(255,255,255,.42) 47%, rgba(255,255,255,.2) 49%, rgba(255,255,255,.03) 55%, transparent 60%, transparent 100%),
      linear-gradient(115deg, rgba(255,255,255,.035), rgba(255,255,255,.01) 50%, rgba(255,255,255,.04));
    background-size: 260% 260%, 100% 100%;
    background-position: var(--fx, 50%) var(--fy, 50%), 0 0;
    mix-blend-mode: screen;
  }