/* ==========================================================================
   TEDDY RECORDS — the deck.
   One object, three moments: playing the featured project in the homepage
   hero, receiving the record you pick out of the crate, and carrying it as
   the hero of the case study. Shared file so the two pages cannot drift.
   ========================================================================== */

:root{
  --ff-display:'Fraunces',ui-serif,Georgia,serif;
  --ff-body:'DM Sans',ui-sans-serif,system-ui,sans-serif;
  --ff-mono:'JetBrains Mono',ui-monospace,monospace;
  --olive:#3F4528; --olive-2:#4A5030; --olive-ink:#525A30;
  --cream:#E8E2CE; --cream-2:#D6D0B9; --cream-3:#C7C1A8;
  --paper:#EDE8D8; --ink:#20240F;
  --rust:#742C2C; --denim:#2C4274; --accent-green:#7BE38A;
  --walnut-1:#7a6541; --walnut-2:#5c4a2e; --walnut-3:#3a2f1c;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.42'/></svg>");
}

/* ---------------- plinth ---------------- */
.deck{
  position:relative;width:min(92vmin,var(--deck-w,620px));aspect-ratio:1/.92;
  background:
    /* brushed grain, then the walnut */
    repeating-linear-gradient(96deg, rgba(0,0,0,.05) 0 2px, rgba(255,255,255,.022) 2px 5px),
    linear-gradient(163deg,var(--walnut-1) 0%,var(--walnut-2) 44%,var(--walnut-3) 100%);
  border-radius:6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 0 0 1px rgba(0,0,0,.4),
    0 44px 76px rgba(0,0,0,.52),
    0 10px 20px rgba(0,0,0,.34);
  padding:7% 7% 8%;
  display:grid;grid-template-columns:1fr auto;gap:4.5%;
  isolation:isolate;
  container-type:inline-size;
}
/* a chamfer along the top edge, the way a real cabinet is finished */
.deck::before{content:"";position:absolute;left:0;right:0;top:0;height:5%;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,0));pointer-events:none;z-index:1}
.deck::after{
  content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;z-index:4;
  background-image:var(--grain);background-size:120px 120px;
  mix-blend-mode:multiply;opacity:.38;
}
/* height-driven variant: width derives from height through aspect-ratio, so
   the height cap must be the column width TIMES the aspect (0.92) — higher
   and the plinth spills out of its column. */
.deck.is-fit{height:min(100cqh, 92cqw);width:auto;max-width:none}

/* ---------------- platter well + record ---------------- */
.deck-platter{
  position:relative;align-self:center;justify-self:center;
  width:100%;aspect-ratio:1;border-radius:50%;
  /* the well the platter sits in, then the felt mat */
  background:
    radial-gradient(circle at 50% 50%, #3c3323 0 49%, transparent 49.5%),
    radial-gradient(circle at 42% 34%, #4a3f28, #2d2517 62%, #211b10);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 14px 30px rgba(0,0,0,.5) inset,
    0 2px 0 rgba(255,255,255,.07);
  grid-column:1;
}
/* strobe dots around the rim — the detail that says turntable */
.deck-platter::before{
  content:"";position:absolute;inset:1.5%;border-radius:50%;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(from 0deg,
    rgba(232,226,206,.28) 0 .8deg, transparent .8deg 4.5deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 0 94.5%, #000 95%);
  mask-image:radial-gradient(circle at 50% 50%, transparent 0 94.5%, #000 95%);
}
.deck-record{
  position:absolute;inset:4.5%;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 38% 30%, rgba(232,226,206,.12), transparent 54%), #14160d;
  box-shadow:0 16px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.6);
}
.deck-grooves{
  position:absolute;inset:0;border-radius:50%;will-change:transform;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(232,226,206,.115) 0 1.5px, transparent 1.5px 5px),
    conic-gradient(from 0deg, rgba(232,226,206,.1) 0 8deg, transparent 8deg 40deg);
}
/* the lead-in: a wider band at the outer edge, like a real pressing */
.deck-record::after{content:"";position:absolute;inset:2%;border-radius:50%;pointer-events:none;z-index:1;
  background:repeating-radial-gradient(circle at 50% 50%, rgba(232,226,206,.05) 0 1px, transparent 1px 9px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 0 92%, #000 92.5%);
  mask-image:radial-gradient(circle at 50% 50%, transparent 0 92%, #000 92.5%)}

/* the label — the client's mark, centred, nothing else competing with it */
.deck-label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:37%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--lbl,#742C2C);color:var(--cream);
  display:grid;place-items:center;text-align:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 2px 7px rgba(0,0,0,.4);
}
.deck-label .lbl-art{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:0 20%}
.deck-label .lbl-art img{max-width:100%;max-height:34%;width:auto;height:auto;opacity:.96;
  filter:brightness(0) saturate(100%) invert(93%) sepia(9%) saturate(430%) hue-rotate(9deg) brightness(97%)}
.deck-label .lbl-art.is-type span{font-family:var(--ff-display);font-weight:500;
  font-size:clamp(9px,4.6cqw,22px);line-height:.96;letter-spacing:-.02em;
  color:var(--cream);text-align:center}
.deck-label .lbl-bot{position:absolute;left:0;right:0;bottom:9%;z-index:3;font-family:var(--ff-mono);
  font-size:clamp(4px,2cqw,8px);letter-spacing:.2em;text-transform:uppercase;opacity:.6}

/* ---------------- tonearm ---------------- */
.deck-arm-wrap{position:absolute;inset:0;pointer-events:none;z-index:6}
/* pivot mount */
.deck-arm-wrap::before{content:"";position:absolute;top:calc(7% - 10px);right:calc(7% - 26px);
  width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #766a4a, #453c23 70%, #2a2413);
  box-shadow:0 6px 14px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.14) inset}
.deck-tone{
  position:absolute;top:calc(7% + 16px);right:calc(7% + 4px);
  width:30%;height:9px;transform-origin:100% 50%;
  transform:rotate(var(--arm-angle,-30deg)) translateY(var(--arm-lift,0px));
  filter:drop-shadow(0 var(--arm-shadow,4px) var(--arm-blur,8px) rgba(0,0,0,.45));
}
/* arm tube */
.deck-tone i{position:absolute;left:8%;right:-1%;top:2px;bottom:2px;
  background:linear-gradient(180deg,#f3ecd6,#cec3a4 55%,#9d9376);border-radius:3px}
/* counterweight, behind the pivot */
.deck-tone b{position:absolute;right:-34px;top:50%;transform:translateY(-50%);
  width:34px;height:26px;border-radius:6px;
  background:linear-gradient(180deg,#8c8163,#4d452c 62%,#2f2a1a);
  box-shadow:0 5px 11px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.22) inset}
/* headshell + stylus */
.deck-tone u{position:absolute;left:-22px;top:-7px;width:36px;height:23px;text-decoration:none;
  background:linear-gradient(180deg,#f3ecd6,#bcb298);
  clip-path:polygon(12% 0,100% 20%,100% 80%,12% 100%,0 64%,0 36%);
  box-shadow:0 4px 9px rgba(0,0,0,.45)}
/* the stylus, sitting in the groove */
.deck-tone u::after{content:"";position:absolute;left:3px;bottom:-6px;width:2px;height:8px;
  background:#241f12;border-radius:0 0 1px 1px}

/* ---------------- controls ---------------- */
.deck-plate{
  grid-column:2;align-self:end;display:flex;flex-direction:column;gap:11px;align-items:center;
}
.deck-knob{width:clamp(18px,100%,44px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #ded5b8, #8a8268 70%, #4e4838);
  box-shadow:0 4px 9px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.25) inset}
.deck-knob::after{content:"";display:block;width:9%;height:36%;margin:9% auto 0;background:#2b2718;border-radius:2px}
.deck-speed{display:flex;flex-direction:column;gap:3px;align-items:center;
  font-family:var(--ff-mono);font-size:7px;letter-spacing:.1em;color:#cfc5a6;opacity:.75}
.deck-speed span{line-height:1}

/* ---------------- now-playing readout ---------------- */
.np{display:flex;flex-direction:column;gap:clamp(8px,1.4vw,16px)}
.np-kicker{font-family:var(--ff-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:color-mix(in oklab,var(--olive) 62%,var(--cream));display:flex;align-items:center;gap:9px}
.np-kicker i{width:7px;height:7px;border-radius:50%;background:var(--rust);flex:0 0 auto}
.np-title{font-family:var(--ff-display);font-weight:500;
  font-size:clamp(38px,6.6vw,104px);line-height:.98;letter-spacing:-.02em;margin:0;
  color:var(--cream)}
.np-claim{margin:0;max-width:26ch;color:var(--cream-2);font-size:clamp(14px,1.15vw,18px)}
.np-meta{display:flex;gap:clamp(14px,2.2vw,34px);flex-wrap:wrap;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-3)}
.np-meta b{color:var(--rust);font-weight:500}

@media (prefers-reduced-motion:reduce){
  .deck-grooves{animation:none!important}
}


/* ==========================================================================
   SHOWCASE BELT — the project's screens running while the record plays.
   ========================================================================== */
.sc{position:relative;overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:clamp(8px,1.2vh,16px)}
.sc-belt{position:relative;overflow:hidden;flex:1;min-height:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.sc-track{display:flex;gap:clamp(10px,1.2vw,20px);height:100%;width:max-content;will-change:transform;align-items:stretch}
.sc-shot{margin:0;height:100%;aspect-ratio:16/10;overflow:hidden;position:relative;flex:0 0 auto;
  border:1px solid rgba(232,226,206,.16);background:#20240F}
.sc-shot img{width:100%;height:100%;object-fit:cover;display:block}
.sc-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(32,36,15,0) 55%,rgba(32,36,15,.38))}

/* ==========================================================================
   THE RACK — the catalogue filed spine-out. Every spine identical: same
   width, same height, no tilt. The only thing that varies is the ink and the
   title, which is what makes a shelf of records read as a shelf.
   ========================================================================== */
.shelf{position:relative;display:flex;flex-direction:column;gap:10px;min-height:0}
.shelf-head{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in oklab,var(--olive) 78%,var(--cream));display:flex;justify-content:flex-start;gap:10px;flex:0 0 auto;white-space:nowrap}
.shelf-rail{position:relative;min-height:0;min-width:0;flex:1;display:flex}
.shelf-track{display:flex;height:100%;width:100%;align-items:stretch;gap:clamp(3px,.4vw,7px)}

.spine{position:relative;flex:1 1 0;min-width:0;height:100%;cursor:pointer;
  background:var(--ink-c,#742C2C);color:var(--cream);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;
  padding:12px 0 13px;overflow:hidden;
  transition:filter .3s ease, box-shadow .3s ease, translate .3s cubic-bezier(.2,.8,.25,1);
  filter:brightness(.9) saturate(1);
  box-shadow:0 16px 30px rgba(32,36,15,.26)}
.spine::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.26),rgba(255,255,255,0))}
.spine::after{content:"";position:absolute;right:0;top:0;bottom:0;width:4px;
  background:linear-gradient(270deg,rgba(0,0,0,.3),rgba(0,0,0,0))}
.spine .sp-cat{font-family:var(--ff-mono);font-size:clamp(5px,.6vw,8px);letter-spacing:.1em;
  text-transform:uppercase;opacity:.66;writing-mode:vertical-rl;transform:rotate(180deg)}
.spine .sp-name{writing-mode:vertical-rl;transform:rotate(180deg);align-self:center;
  font-family:var(--ff-display);font-weight:500;font-size:clamp(10px,.95vw,15px);
  letter-spacing:-.01em;white-space:nowrap;line-height:1}
.spine .sp-band{width:60%;height:3px;background:currentColor;opacity:.5}
/* a paper spine would vanish into a cream ground, so it gets an edge */
.spine.is-cream{background:var(--paper);color:var(--ink);
  box-shadow:0 16px 30px rgba(32,36,15,.24), inset 0 0 0 1px color-mix(in oklab,var(--olive) 40%,transparent)}
.spine.is-cream .sp-band{background:var(--rust);opacity:.75}
.spine:hover,.spine:focus-visible{filter:brightness(1.04) saturate(1.02)}
.spine[aria-current="true"]{filter:none;translate:0 -2%;
  box-shadow:0 22px 38px rgba(32,36,15,.34), inset 0 0 0 2px var(--olive)}
.spine[aria-current="true"] .sp-band{height:6px;width:78%;opacity:1}
@media (prefers-reduced-motion:reduce){ .spine{transition:none} }

/* ==========================================================================
   THE REEL — the project's screens running under the deck.
   ========================================================================== */
/* the fade is a percentage of the strip, so widening the reel to the full
   section widened the fade with it and ate the first card. Pinned in px. */
.reel{position:relative;overflow:hidden;min-height:0;flex:0 0 auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.reel-track{display:flex;gap:clamp(8px,.9vw,14px);height:100%;width:max-content;align-items:stretch;will-change:transform}
.reel-shot{margin:0;height:100%;aspect-ratio:16/10;overflow:hidden;flex:0 0 auto;position:relative;
  border:1px solid color-mix(in oklab,var(--olive) 26%,transparent);
  background:var(--paper);box-shadow:0 6px 14px rgba(32,36,15,.14)}
.reel-shot img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}

/* ==========================================================================
   SLEEVE — the record jacket. Shared: crate, shelf, and anywhere a record
   needs to be shown as an object rather than a row of text.
   ========================================================================== */
.sleeve{position:relative;background:var(--paper);color:var(--ink);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 18px 34px rgba(0,0,0,.42);
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;text-align:left}
.sleeve.ink-olive{background:var(--olive);color:var(--cream)}
.sleeve.ink-rust{background:var(--rust);color:var(--cream)}
.sleeve.ink-denim{background:var(--denim);color:var(--cream)}
.sl-top{display:flex;justify-content:space-between;gap:8px;padding:9% 9% 0;
  font-family:var(--ff-mono);font-size:clamp(6px,3.4cqw,10px);letter-spacing:.16em;
  text-transform:uppercase;opacity:.72}
.sl-body{padding:5% 9% 0;display:flex;flex-direction:column;gap:4%;min-height:0}
.sl-name{font-family:var(--ff-display);font-weight:500;font-size:clamp(13px,13cqw,46px);
  line-height:.96;letter-spacing:-.02em;margin:0}
.sl-claim{margin:0;font-size:clamp(7px,4.4cqw,14px);line-height:1.3;opacity:.86;max-width:24ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sl-art{position:relative;margin:6% 9% 0;min-height:0;overflow:hidden;color:inherit;
  display:flex;align-items:center;justify-content:center;opacity:.95}
.sl-art::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:radial-gradient(currentColor 1px,transparent 1.15px);background-size:4px 4px;opacity:.22}
.sl-fig{position:relative;height:100%;width:auto;aspect-ratio:1;color:inherit;
  background-repeat:no-repeat;background-position:center}
.sl-fig[data-fig="bars"],.sl-fig[data-fig="stack"]{width:100%;aspect-ratio:auto}
.sl-fig[data-fig="rings"]{background-image:
  radial-gradient(circle at 50% 50%, currentColor 0 15%, transparent 15.5%),
  radial-gradient(circle at 50% 50%, transparent 0 27%, currentColor 27% 34%, transparent 34.5%),
  radial-gradient(circle at 50% 50%, transparent 0 46%, currentColor 46% 50%, transparent 50.5%);background-size:100% 100%}
.sl-fig[data-fig="arc"]{background-image:
  radial-gradient(circle at 50% 100%, currentColor 0 62%, transparent 62.5%);background-size:100% 100%}
.sl-fig[data-fig="bars"]{background-image:repeating-linear-gradient(90deg,currentColor 0 9%,transparent 9% 20%);
  background-size:100% 76%}
.sl-fig[data-fig="burst"]{background-image:
  radial-gradient(circle at 50% 50%, currentColor 0 17%, transparent 17.5%),
  repeating-conic-gradient(from 0deg, currentColor 0 5deg, transparent 5deg 22.5deg);
  background-size:100% 100%;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0 50%, transparent 50.5%);
  mask-image:radial-gradient(circle at 50% 50%, #000 0 50%, transparent 50.5%)}
.sl-fig[data-fig="stack"]{background-image:
  linear-gradient(90deg,currentColor 0 100%),linear-gradient(90deg,currentColor 0 100%),linear-gradient(90deg,currentColor 0 100%);
  background-size:70% 18%, 88% 18%, 54% 18%;background-position:8% 20%, 8% 50%, 8% 80%}
.sl-foot{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6% 9% 9%;
  font-family:var(--ff-mono);font-size:clamp(6px,3.4cqw,10px);letter-spacing:.14em;text-transform:uppercase}
.sl-foot b{font-weight:500;color:var(--rust)}
.sl-wear{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:74%;aspect-ratio:1;
  border-radius:50%;border:1px solid currentColor;opacity:.09;pointer-events:none}
/* sleeve type scales with the sleeve, so the shelf and a full-size crate
   can share one component without a second set of sizes */
.shelf-sleeve{container-type:inline-size}


/* ==========================================================================
   THE RACK ON A PHONE — a 20px-wide vertical spine is not a tap target, and
   a rotated title will not fit a 140px rail. Below 1000px the rack becomes a
   horizontal row of chips: same ink, same catalogue number, readable name.
   ========================================================================== */
@media (max-width:1000px){
  .shelf-rail{padding:clamp(10px,2vw,16px)}
  .shelf-track{align-items:center;gap:8px;overflow-x:auto;height:auto}
  .spine{flex:0 0 auto;height:auto;width:auto;min-height:44px;
    display:flex;flex-direction:row;align-items:center;gap:9px;
    padding:11px 15px;border-radius:999px;filter:none;
    box-shadow:0 6px 14px rgba(32,36,15,.22)}
  .spine .sp-cat{writing-mode:horizontal-tb;transform:none;font-size:9px;opacity:.7}
  .spine .sp-name{writing-mode:horizontal-tb;transform:none;font-size:13px;letter-spacing:-.01em}
  .spine .sp-band{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
  .spine[aria-current="true"]{translate:0 0;box-shadow:0 8px 18px rgba(32,36,15,.3), inset 0 0 0 2px var(--olive)}
  .spine:hover,.spine:focus-visible{translate:0 0;filter:none}
}