/* Sections — rhythm, tracklist, metal+wood chassis, turntable, crate */

/* =========================================================
   SECTIONS
   ========================================================= */
section{padding:94px 0;}
.sec-head{margin-bottom:46px;}
.sec-head h2{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;
  font-size:clamp(28px,4.2vw,44px);line-height:1.08;margin-top:14px;letter-spacing:-0.025em;
}
.sec-head p{max-width:52ch;color:var(--manila-dim);margin-top:15px;font-size:17px;line-height:1.6;}
.sec-head.center{text-align:center;}
.sec-head.center p{margin-left:auto;margin-right:auto;}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ===== TRACKLIST =====
   The panel itself now lives in 09-receiver.css — the old .panel /
   .track-btn grid was replaced by the receiver face. Only the section
   shell stays here. */
/* No background here. 07-ambient.css sets the three banded sections to
   the sheer --band so the aura field shows through; an opaque --wax-soft
   at equal specificity in an earlier file just never applied. */
.jukebox-section{
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
}

/* =========================================================
   METAL + WOOD CHASSIS (turntable + contact)
   ========================================================= */
.unit{
  position:relative;border-radius:5px;background:var(--walnut);
  background-image:var(--grain);padding:0 14px;
  box-shadow:0 34px 70px -30px rgba(0,0,0,.9),0 2px 0 rgba(255,255,255,.05) inset;
}
.unit::before,.unit::after{
  content:'';position:absolute;top:0;bottom:0;width:14px;z-index:1;
  background:linear-gradient(90deg,var(--walnut-hi),var(--walnut-lo));
  background-blend-mode:multiply;
}
.unit::before{left:0;border-radius:5px 0 0 5px;}
.unit::after{right:0;border-radius:0 5px 5px 0;}
.faceplate{
  position:relative;z-index:2;
  background:linear-gradient(180deg,var(--alu-hi) 0%,var(--alu) 22%,var(--alu-lo) 100%);
  border-top:1px solid rgba(255,255,255,.55);border-bottom:1px solid rgba(0,0,0,.4);
  box-shadow:inset 0 0 30px rgba(0,0,0,.18);color:var(--engrave);overflow:hidden;
}
.faceplate::after{
  content:'';position:absolute;inset:0;pointer-events:none;background:var(--brushed);opacity:.5;
}
.fp-pad{position:relative;z-index:2;padding:24px;}
.screws{position:absolute;inset:0;pointer-events:none;z-index:3;}
.screws i{
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#E8EAEC,#6E7278 60%,#4A4D52);
  box-shadow:0 1px 1px rgba(255,255,255,.5),inset 0 -1px 1px rgba(0,0,0,.4);
}
.screws i::after{
  content:'';position:absolute;top:50%;left:22%;right:22%;height:1px;
  background:rgba(0,0,0,.45);transform:translateY(-50%) rotate(28deg);
}
.screws i:nth-child(1){top:9px;left:10px;}
.screws i:nth-child(2){top:9px;right:10px;}
.screws i:nth-child(3){bottom:9px;left:10px;}
.screws i:nth-child(4){bottom:9px;right:10px;}
.fp-header{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:13px;margin-bottom:18px;
  border-bottom:1px solid rgba(0,0,0,.22);box-shadow:0 1px 0 rgba(255,255,255,.35);
}
.fp-title{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;
  letter-spacing:-0.02em;color:var(--engrave);
}
.fp-meta{
  font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.18em;font-size:10px;font-weight:600;color:var(--engrave-dim);
  display:flex;align-items:center;gap:9px;
}
.led-sm{
  width:7px;height:7px;border-radius:50%;background:#6FD8BE;
  box-shadow:0 0 8px #6FD8BE;display:inline-block;
  animation:ledBreathe 3.4s ease-in-out infinite;
}
@keyframes ledBreathe{0%,100%{opacity:.7;}50%{opacity:1;}}

/* ===== TURNTABLE =====
   The deck itself (plinth, platter, tonearm, controls) is in
   10-deck.css. What stays here is the section scaffolding and the
   track list beside it. */
.turntable-section{padding:0;}
.tt-scroll{position:relative;}
.tt-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;}
.tt-inner{
  max-width:1060px;margin:0 auto;padding:0 26px;width:100%;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center;
}
@media(max-width:900px){
  .tt-inner{grid-template-columns:1fr;gap:38px;}
  .tt-sticky{height:auto;position:relative;top:auto;padding:82px 0;}
}

.tt-head{margin-bottom:22px;}
.tt-head h2{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;
  font-size:clamp(26px,3.8vw,40px);line-height:1.08;margin-top:12px;letter-spacing:-0.025em;
}
.tt-tracks{display:flex;flex-direction:column;gap:5px;}
.tt-item{
  display:block;width:100%;text-align:left;background:transparent;border:none;
  border-left:2px solid var(--rule);color:inherit;
  padding:16px 8px 16px 22px;opacity:.72;border-radius:0 6px 6px 0;
  transition:border-color .45s var(--ease),opacity .45s var(--ease),
             transform .45s var(--ease),background .3s var(--ease);
}
.tt-item:hover{opacity:.95;background:var(--fill-1);}
.tt-item.is-active{
  opacity:1;transform:translateX(5px);
  border-color:color-mix(in srgb, var(--tt-accent,var(--brass-ink)) 74%, var(--ink-mix));
  background:var(--fill-2);
}
.tt-item .tt-num{
  font-family:'Courier Prime',monospace;font-size:11px;letter-spacing:.16em;
  color:var(--manila-soft);margin-bottom:8px;display:flex;align-items:center;gap:8px;
  text-transform:uppercase;
}
/* Project accents are picked to glow on a lamp, not to be read on
   paper — #C99A3F on bone is about 2.2:1. Mixed toward the ink the
   same way the project write-ups do it, so each track keeps its
   identity and stays legible. */
.tt-item.is-active .tt-num{
  color:color-mix(in srgb, var(--tt-accent,var(--brass-ink)) 52%, var(--ink-mix));
}
.play-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0;transition:opacity .35s var(--ease);}
.tt-item.is-active .play-dot{opacity:1;animation:pulse 2s ease-out infinite;}
.tt-item h3{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:19px;
  letter-spacing:-0.015em;margin-bottom:6px;
}
.tt-item p{font-size:15.5px;line-height:1.6;color:var(--manila-dim);max-width:46ch;}
@media(max-width:900px){
  .tt-item{opacity:.7;}
  .tt-item p{max-height:0;overflow:hidden;opacity:0;
    transition:max-height .5s var(--ease),opacity .4s var(--ease),margin .4s var(--ease);}
  .tt-item.is-active{opacity:1;}
  .tt-item.is-active p{max-height:320px;opacity:1;margin-top:2px;}
}

/* ===== CRATE ===== */
.rotation-section{  /* background: see .jukebox-section above */
  border-top:1px solid var(--rule-soft);
}
.rotation-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start;}
@media(max-width:820px){.rotation-grid{grid-template-columns:1fr;gap:40px;}}
.rotation-grid > div > p{color:var(--manila-dim);font-size:16.5px;line-height:1.62;margin-bottom:15px;max-width:52ch;}
.crate{display:flex;flex-direction:column;border-top:1px solid var(--rule);perspective:900px;}
.crate-row{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:15px 4px;border-bottom:1px solid var(--rule);
  opacity:0;transform:rotateX(-46deg) translateY(18px);transform-origin:top center;
  transition:opacity .6s var(--ease),transform .6s var(--ease),padding-left .3s var(--ease);
}
.crate.is-visible .crate-row{opacity:1;transform:rotateX(0) translateY(0);}
.crate.is-visible .crate-row:nth-child(1){transition-delay:.05s;}
.crate.is-visible .crate-row:nth-child(2){transition-delay:.14s;}
.crate.is-visible .crate-row:nth-child(3){transition-delay:.23s;}
.crate.is-visible .crate-row:nth-child(4){transition-delay:.32s;}
.crate.is-visible .crate-row:nth-child(5){transition-delay:.41s;}
.crate-row:hover{padding-left:14px;}
.crate-row .cr-name{font-weight:600;font-size:15px;}
.crate-row .cr-note{
  font-family:'Courier Prime',monospace;font-size:11.5px;color:var(--manila-soft);
  text-align:right;flex-shrink:0;
}