/* ==========================================================================
   RECORD SHELF — recreated from the pen Adam supplied ("3D Infinite
   Carousel — Record Shelf"). The pen's CSS is kept verbatim below, with
   three deltas:
   (1) fonts load via <link> in the head (site convention) instead of
       @import — and the pen's unused Inter link was dropped (its CSS only
       ever used Fraunces + JetBrains Mono);
   (2) card titles are h2 in the markup (SEO heading order) — all card
       styles are class-based, so nothing here changed for that;
   (3) the theme-for-sale kit (h1, liner-notes card, tags, action buttons)
       is styled in the crate idiom: mono catalog type, gold accents,
       sleeve-style card.
   Layout: on mobile the page stacks and scrolls (body min-height only —
   never give body a fixed height while flex-centering, or content taller
   than the viewport clips off the top and the header becomes unreachable).
   On desktop (≥1100px) .stage is a 100svh grid: header across the top,
   carousel column left, liner-notes card right — the whole theme fits one
   viewport. The ring is wider than its column (3D cards fan out past it);
   .liner_notes sits at z-index:2 so passing sleeves slide beneath it.
   ========================================================================== */
:root {
  --bg: #0b0b0d;
  --bg2: #17151a;
  --ink: #f2ede4;
  --ink-dim: #9a948c;
  --gold: #e8a33d;
  --line: rgba(242, 237, 228, .14);
  --card-w: 260px;
  --card-h: 340px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(232, 163, 61, .09), transparent 60%),
    var(--bg);
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink);
  overflow-x: hidden;
}

.stage {
  width: min(92vw, 640px);
  padding: 40px 12px 40px;
  text-align: center;
}

.crate-label {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 18px;
}

.crate-label span {
  color: var(--gold);
}

.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  perspective: 1400px;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

.carousel:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
  border-radius: 8px;
}

.ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---- Card = record sleeve ---- */
.record {
  --hue: 210deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--card-w);
  height: var(--card-h);
  margin: calc(var(--card-h) / -2) 0 0 calc(var(--card-w) / -2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px 16px 16px;
  border-radius: 10px;
  overflow: hidden;
  backface-visibility: hidden;
  background: linear-gradient(160deg,
      hsl(var(--hue), 36%, 36%),
      hsl(var(--hue), 42%, 13%));
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .75);
  cursor: grab;
}

/* grain texture + bottom info gradient */
.record::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .55) 75%, rgba(0, 0, 0, .82)),
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 100% 100%, 3px 3px;
  pointer-events: none;
}

/* vinyl disc peeking out the top */
.record::after {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgba(0, 0, 0, .35) 0 2px, transparent 2px 5px),
    var(--bg2);
  box-shadow: 0 0 0 3px rgba(242, 237, 228, .06);
}

/* icon → small gold stamp, top-right */
.card-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  fill: var(--gold);
  opacity: .35;
  z-index: 1;
}

/* tags → catalog line (e.g. "NLP · CONTEXT") */
.card-tags {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: .9em;
  margin-bottom: 4px;
}

.card-tag {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, .65);
}

.card-tag+.card-tag::before {
  content: "·";
  margin-right: .9em;
  color: rgba(242, 237, 228, .4);
}

.card-title {
  position: relative;
  z-index: 1;
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 2px;
}

.card-desc {
  position: relative;
  z-index: 1;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(242, 237, 228, .78);
  margin: 0;
}

/* ---- Controls ---- */
.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 32px;
}

.nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 17px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, color .2s;
}

.nav-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.nav-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.dial {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex: 0 0 auto;
}

.dial::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(242, 237, 228, .16);
}

.needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 15px;
  background: var(--gold);
  margin: -15px 0 0 -1px;
  transform-origin: bottom center;
  border-radius: 2px;
}

.now-playing {
  margin-top: 22px;
  font-size: 12px;
  color: var(--ink-dim);
  min-height: 16px;
}

.now-playing b {
  color: var(--ink);
  font-weight: 500;
}

.hint {
  margin: 6px 0 0;
  font-size: 10px;
  color: rgba(154, 148, 140, .6);
  letter-spacing: .04em;
}

/* ==========================================================================
   Theme-for-sale kit (site convention: badge, h1, description card, tags,
   two actions) — styled as the record's liner notes. The .crate-label
   above the h1 plays the badge.
   ========================================================================== */
h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 8vw, 54px);
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 34px;
}

.liner_notes {
  position: relative;
  z-index: 2;
  margin: 44px 0 0;
  padding: 26px 28px 28px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--bg2), rgba(23, 21, 26, .45));
}

.liner_heading {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}

.liner_notes p {
  font-size: 13px;
  line-height: 1.75;
  color: rgba(242, 237, 228, .82);
  margin: 0 0 14px;
}

.liner_notes a {
  color: var(--gold);
  text-underline-offset: 3px;
}

/* tags — same catalog-line voice as the sleeves' .card-tags */
.theme_tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .9em;
  margin: 20px 0 24px;
  padding: 0;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, .65);
}

.theme_tags li+li::before {
  content: "·";
  margin-right: .9em;
  color: rgba(242, 237, 228, .4);
}

.theme_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.theme_btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .2s, color .2s, background-color .2s;
}

.theme_btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.theme_btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.theme_btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg) !important;
  font-weight: 500;
}

.theme_btn--gold:hover {
  background: #f0b355;
  border-color: #f0b355;
  color: var(--bg);
}

/* ==========================================================================
   Desktop: one viewport, liner notes beside the crate. The children stay
   flat siblings in the HTML — grid areas do the placement: label + h1 span
   both columns, the carousel stack fills the left, the kit card centers on
   the right. minmax(400px,1fr) on the carousel row keeps the sleeves from
   being crushed on short windows (the stage just scrolls instead —
   min-height, not height).
   ========================================================================== */
@media (min-width:1100px) {
  .stage {
    width: min(94vw, 1280px);
    min-height: 100svh;
    padding: 28px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    grid-template-rows: auto auto minmax(400px, 1fr) auto auto auto;
    grid-template-areas:
      "label      label"
      "title      title"
      "carousel   notes"
      "controls   notes"
      "nowplaying notes"
      "hint       notes";
    column-gap: clamp(36px, 5vw, 80px);
    align-content: center;
  }

  .crate-label {
    grid-area: label;
  }

  h1 {
    grid-area: title;
    margin-bottom: 24px;
  }

  .carousel {
    grid-area: carousel;
    height: auto;
  }

  .controls {
    grid-area: controls;
  }

  .now-playing {
    grid-area: nowplaying;
  }

  .hint {
    grid-area: hint;
  }

  .liner_notes {
    grid-area: notes;
    align-self: center;
    margin: 0;
  }
}