/* ============================================================
   KOMPX RECORDS — SHARED STYLESHEET
   Design tokens, nav, and component library per design-system.html
============================================================ */
:root{
  --black:#0A0A0A;
  --charcoal:#131211;
  --charcoal-2:#1B1A18;
  --white:#FFFFFF;
  --paper:#F5F3EF;
  --platinum:#C9CBCC;
  --platinum-dim:#87898B;
  --gold:#A6875B;
  --line:rgba(255,255,255,0.13);
  --line-dark:rgba(10,10,10,0.12);

  --font-display:'Fraunces', serif;
  --font-ui:'Inter', sans-serif;

  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --space-5:48px; --space-6:64px; --space-7:96px; --space-8:128px; --space-9:192px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:200ms; --dur-med:400ms; --dur-slow:700ms;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--black); color:var(--white);
  font-family:var(--font-ui); font-weight:300;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
.skip-link{
  position:absolute; top:-100px; left:16px; z-index:200;
  background:var(--white); color:var(--black); font-family:var(--font-ui); font-size:13px;
  letter-spacing:0.04em; padding:12px 20px; transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:16px; outline:none; }
.eyebrow{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.wordmark{ color:var(--white); }
.wordmark.on-light{ color:var(--black); }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ============================================================
   NAV
============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px clamp(20px,4vw,56px);
  transition:background var(--dur-med) var(--ease), padding var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(10,10,10,0.92); backdrop-filter:blur(10px); padding-top:16px; padding-bottom:16px; border-color:var(--line); }
.nav .mark{ width:96px; height:auto; color:var(--white); fill:currentColor; }
.nav-links{ display:flex; gap:34px; }
.nav-links a{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--platinum); position:relative; padding-bottom:4px; }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--white); transition:width var(--dur-fast) var(--ease); }
.nav-links a:hover, .nav-links a.current{ color:var(--white); }
.nav-links a:hover::after, .nav-links a.current::after{ width:100%; }
.nav-toggle{ display:none; background:none; border:none; color:var(--white); font-family:var(--font-ui); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; cursor:pointer; }

.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--black);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:28px;
  padding:200px 32px 40px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateY(-100%); transition:transform var(--dur-med) var(--ease);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--font-display); font-weight:300; font-size:34px; }

/* ============================================================
   HERO (homepage)
============================================================ */
.hero{
  min-height:100vh; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 24px 80px; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 15%, #201f1c 0%, #0A0A0A 55%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
  z-index:0;
}
.hero::after{
  content:''; position:absolute; inset:0; opacity:0.05; mix-blend-mode:overlay; z-index:0;
  background-image: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='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero-content{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.hero-mark{ width:min(72vw, 640px); height:auto; color:var(--white); fill:currentColor; transition:transform 120ms linear, filter 120ms linear; }
.hero-tagline{
  margin-top:var(--space-4); font-size:12.5px; letter-spacing:0.4em; text-transform:uppercase;
  color:var(--platinum); font-weight:500;
}
.hero-cta{
  margin-top:var(--space-6); font-size:13px; letter-spacing:0.12em; text-transform:uppercase;
  border-bottom:1px solid var(--platinum-dim); padding-bottom:6px; transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hero-cta:hover{ border-color:var(--white); color:var(--white); }
.hero-scroll-cue{ position:absolute; bottom:32px; left:50%; transform:translateX(-50%); width:1px; height:46px; background:linear-gradient(var(--platinum-dim), transparent); z-index:1; }

/* ============================================================
   PAGE HEADER (interior pages)
============================================================ */
.page-header{
  min-height:52vh; position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  padding:160px clamp(20px,6vw,80px) var(--space-7); border-bottom:1px solid var(--line);
  background:radial-gradient(120% 90% at 20% 0%, #17160f 0%, #0A0A0A 60%);
}
.page-header .eyebrow{ margin-bottom:18px; }
.page-title{ font-family:var(--font-display); font-weight:300; font-size:clamp(38px,7vw,84px); line-height:1.02; max-width:900px; }
.page-title em{ font-style:italic; font-weight:400; }
.page-intro{ margin-top:var(--space-4); font-size:15px; line-height:1.8; color:var(--platinum); max-width:520px; }

/* ============================================================
   SECTION SHELL
============================================================ */
.section{ padding:var(--space-8) clamp(20px,6vw,80px); border-bottom:1px solid var(--line); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:var(--space-6); gap:24px; flex-wrap:wrap; }
.section-title{ font-family:var(--font-display); font-weight:300; font-size:clamp(28px,4vw,46px); }
.section-link{ font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--platinum); border-bottom:1px solid var(--line); padding-bottom:5px; white-space:nowrap; }
.section-link:hover{ color:var(--white); border-color:var(--white); }

/* ============================================================
   FEATURED RELEASE
============================================================ */
.release{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(32px,6vw,90px); align-items:center; }
.release-art{
  aspect-ratio:1/1; background:var(--charcoal); position:relative;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
}
.release-art .mark{ width:38%; height:auto; color:var(--platinum); fill:currentColor; }
.release-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.release-art .corner{ position:absolute; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--platinum-dim); }
.release-art .tl{ top:22px; left:22px; }
.release-art .br{ bottom:22px; right:22px; text-align:right; }
.release-cat{ font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--platinum-dim); margin-bottom:18px; }
.release-title{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(32px,5vw,58px); line-height:1.05; margin-bottom:26px; }
.release-cta{ display:inline-block; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; border-bottom:1px solid var(--white); padding-bottom:6px; margin-bottom:30px; }
.release-streams{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; font-size:12px; letter-spacing:0.08em; color:var(--platinum-dim); }
.release-streams .sep{ opacity:0.4; }
.release-streams .streams-note{ font-style:italic; color:var(--platinum-dim); }

/* ============================================================
   ARTISTS GRID
============================================================ */
.artist-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,36px); }
.artist-card{ display:flex; flex-direction:column; }
.artist-portrait{
  aspect-ratio:4/5; overflow:hidden; margin-bottom:18px; position:relative;
  background:linear-gradient(155deg, var(--charcoal-2) 0%, var(--charcoal) 60%, #0d0c0b 100%);
  transition:transform var(--dur-slow) var(--ease);
}
.artist-portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.artist-portrait::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(200deg, transparent 40%, rgba(201,203,204,0.10) 100%);
}
.artist-card:hover .artist-portrait{ transform:scale(1.025); }
.artist-name{ font-family:var(--font-display); font-weight:400; font-size:19px; margin-bottom:4px; }
.artist-name a{ border-bottom:1px solid var(--platinum-dim); padding-bottom:1px; transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.artist-name a:hover{ color:var(--gold); border-color:var(--gold); }
.artist-genre{ font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--platinum-dim); margin-bottom:6px; }
.artist-release{ font-size:12.5px; color:var(--platinum); }
.artist-bio{ font-size:13px; line-height:1.7; color:var(--platinum-dim); margin-top:10px; }

/* ============================================================
   ARTIST PROFILE (individual artist pages)
============================================================ */
.artist-hero{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(32px,6vw,90px); align-items:center; margin-bottom:var(--space-2); }
.artist-hero-image{
  aspect-ratio:4/5; overflow:hidden; position:relative; border:1px solid var(--line);
  background:linear-gradient(155deg, var(--charcoal-2) 0%, var(--charcoal) 60%, #0d0c0b 100%);
}
.artist-hero-image img, .artist-hero-image video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.artist-hero-body .eyebrow{ margin-bottom:18px; }
.artist-hero-name{ font-family:var(--font-display); font-weight:300; font-size:clamp(38px,6vw,72px); line-height:1.05; margin-bottom:28px; }
.artist-hero-bio p{ font-size:15px; line-height:1.9; color:var(--platinum); max-width:480px; margin-bottom:20px; }

/* ============================================================
   RELEASE CATALOGUE + FILTERS
============================================================ */
.filter-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:var(--space-6); }
.filter-tab{
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--platinum-dim);
  border:1px solid var(--line); padding:9px 18px; cursor:pointer; background:none; font-family:var(--font-ui);
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.filter-tab:hover{ color:var(--white); border-color:var(--platinum-dim); }
.filter-tab.active{ color:var(--black); background:var(--platinum); border-color:var(--platinum); }
.catalog-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,36px); }
.catalog-item{ display:flex; flex-direction:column; transition:opacity var(--dur-fast) var(--ease); }
.catalog-item.hidden{ display:none; }
.catalog-art{
  aspect-ratio:1/1; background:linear-gradient(155deg, var(--charcoal-2) 0%, var(--charcoal) 60%, #0d0c0b 100%);
  position:relative; margin-bottom:16px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:transform var(--dur-slow) var(--ease);
}
.catalog-item:hover .catalog-art{ transform:scale(1.02); }
.catalog-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.catalog-art span{ position:relative; z-index:1; font-family:var(--font-display); letter-spacing:0.1em; color:var(--platinum-dim); font-size:12px; text-shadow:0 1px 8px rgba(0,0,0,0.6); }
.catalog-cat{ font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--platinum-dim); margin-bottom:6px; }
.catalog-title{ font-family:var(--font-display); font-weight:400; font-size:19px; margin-bottom:4px; }
.catalog-artist{ font-size:12.5px; color:var(--platinum); margin-bottom:4px; }
.catalog-meta{ font-size:10.5px; letter-spacing:0.08em; color:var(--platinum-dim); }

/* ============================================================
   STUDIO
============================================================ */
.studio{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(32px,6vw,90px); align-items:center; }
.studio-image{
  aspect-ratio:6/5; background:
    linear-gradient(160deg, #1c1a17 0%, #0A0A0A 65%);
  position:relative; border:1px solid var(--line);
}
.studio-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.studio-image::after{ content:''; position:absolute; inset:0; opacity:0.06; mix-blend-mode:overlay; z-index:1;
  background-image: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='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.studio-body p{ font-size:14.5px; line-height:1.9; color:var(--platinum); max-width:440px; margin-bottom:34px; }

.spec-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.spec-table th{ text-align:left; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--platinum-dim); padding:10px 0; border-bottom:1px solid var(--line); }
.spec-table td{ padding:14px 0; border-bottom:1px solid var(--line); color:var(--platinum); vertical-align:top; }
.spec-table td:first-child{ color:var(--white); white-space:nowrap; padding-right:24px; }

/* ============================================================
   FORMS (booking / contact)
============================================================ */
.form-grid{ max-width:480px; }
.form-field{ margin-bottom:var(--space-4); }
.form-field label{ display:block; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--platinum-dim); margin-bottom:10px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; background:none; border:none; border-bottom:1px solid var(--line);
  color:var(--white); font-family:var(--font-ui); font-weight:300; font-size:15px;
  padding:10px 0; transition:border-color var(--dur-fast) var(--ease);
}
.form-field select option{ background:var(--charcoal); color:var(--white); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--gold); }
.form-field textarea{ resize:vertical; min-height:100px; }
.form-submit{
  font-size:13px; letter-spacing:0.12em; text-transform:uppercase; background:none; border:none; color:var(--white);
  font-family:var(--font-ui); cursor:pointer; border-bottom:1px solid var(--white); padding:0 0 6px;
  transition:opacity var(--dur-fast) var(--ease);
}
.form-submit:hover{ opacity:0.7; }
.form-note{ font-size:12px; color:var(--platinum-dim); line-height:1.7; margin-top:var(--space-3); }

/* Contact page — centred, minimal (per design-system.html Page Templates spec) */
.contact-wrap{ max-width:480px; margin:0 auto; text-align:center; }
.contact-wrap .form-grid{ margin:0 auto; text-align:left; }
.contact-direct{ font-size:13px; color:var(--platinum-dim); margin-top:var(--space-5); }
.contact-direct a{ color:var(--white); border-bottom:1px solid var(--platinum-dim); padding-bottom:1px; transition:border-color var(--dur-fast) var(--ease); }
.contact-direct a:hover{ border-color:var(--white); }

/* ============================================================
   AUDIO PLAYER
============================================================ */
.audio-player{
  display:flex; align-items:center; gap:16px;
  border:1px solid var(--line); background:var(--charcoal);
  padding:16px 20px; max-width:400px; margin-bottom:30px;
}
.audio-player.small{ padding:12px 16px; gap:12px; max-width:100%; margin:14px 0 0; }
.audio-player audio{ display:none; }

.audio-play-btn{
  flex-shrink:0; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:none; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color var(--dur-fast) var(--ease);
}
.audio-play-btn:hover{ border-color:var(--white); }
.audio-player.small .audio-play-btn{ width:34px; height:34px; }
.audio-play-btn .icon-play{
  width:0; height:0; margin-left:3px;
  border-style:solid; border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent var(--white);
}
.audio-play-btn .icon-pause{ display:none; gap:3px; }
.audio-play-btn .icon-pause span{ width:3px; height:12px; background:var(--white); display:block; }
.audio-play-btn.is-playing .icon-play{ display:none; }
.audio-play-btn.is-playing .icon-pause{ display:flex; }

.audio-body{ flex:1; min-width:0; }
.audio-progress{ height:4px; border-radius:2px; background:var(--line); position:relative; cursor:pointer; overflow:hidden; }
.audio-progress-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background:var(--white); }
.audio-progress:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.audio-waveform{ height:40px; cursor:pointer; }
.audio-waveform canvas{ display:block; width:100%; height:100%; }
.audio-waveform:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.audio-player.small .audio-waveform{ height:26px; }
.audio-time{ margin-top:9px; font-size:10.5px; letter-spacing:0.05em; color:var(--platinum-dim); font-variant-numeric:tabular-nums; }

.catalog-status{ font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--platinum-dim); margin-top:14px; }

/* ============================================================
   VINYL PRE-ORDER
============================================================ */
.vinyl-copy{ font-size:14.5px; line-height:1.8; color:var(--platinum); max-width:440px; margin-bottom:22px; }
.vinyl-price{ font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--platinum-dim); margin-bottom:26px; }
.vinyl-notify-form{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; max-width:420px; }
.vinyl-notify-form input[type="email"]{
  flex:1; min-width:200px; background:none; border:none; border-bottom:1px solid var(--line);
  color:var(--white); font-family:var(--font-ui); font-weight:300; font-size:15px;
  padding:10px 0; transition:border-color var(--dur-fast) var(--ease);
}
.vinyl-notify-form input[type="email"]::placeholder{ color:var(--platinum-dim); }
.vinyl-notify-form input[type="email"]:focus{ outline:none; border-color:var(--gold); }

/* ============================================================
   JOURNAL
============================================================ */
.journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px); }
.journal-card{ border-top:1px solid var(--line); padding-top:22px; }
.journal-meta{ display:flex; gap:14px; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--platinum-dim); margin-bottom:16px; }
.journal-meta .tag{ color:var(--gold); }
.journal-title{ font-family:var(--font-display); font-weight:400; font-size:21px; line-height:1.3; }
.journal-excerpt{ font-size:13px; line-height:1.7; color:var(--platinum-dim); margin-top:12px; }

/* ============================================================
   EDITORIAL (about)
============================================================ */
.editorial{ max-width:640px; }
.editorial .lede{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(22px,3vw,30px); line-height:1.4; margin-bottom:var(--space-5); color:var(--white); }
.editorial p{ font-size:15px; line-height:1.9; color:var(--platinum); margin-bottom:var(--space-4); }
.values-list{ margin-top:var(--space-6); display:grid; gap:var(--space-4); }
.values-list .value-name{ font-family:var(--font-display); font-size:19px; margin-bottom:6px; }
.values-list .value-desc{ font-size:13.5px; line-height:1.7; color:var(--platinum-dim); max-width:520px; }

/* ============================================================
   FOOTER
============================================================ */
footer{ padding:var(--space-7) clamp(20px,6vw,80px) var(--space-6); }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; margin-bottom:var(--space-7); }
.footer-mark{ width:150px; height:auto; color:var(--white); margin-bottom:18px; fill:currentColor; }
.footer-tagline{ font-size:12px; letter-spacing:0.08em; color:var(--platinum-dim); max-width:260px; line-height:1.6; }
.footer-newsletter{ margin-top:28px; max-width:260px; }
.footer-newsletter-label{ display:block; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--platinum-dim); margin-bottom:10px; }
.footer-newsletter-row{ display:flex; align-items:center; border-bottom:1px solid var(--line); transition:border-color var(--dur-fast) var(--ease); }
.footer-newsletter-row:focus-within{ border-color:var(--gold); }
.footer-newsletter-row input[type="email"]{ flex:1; min-width:0; background:none; border:none; color:var(--white); font-family:var(--font-ui); font-weight:300; font-size:13px; padding:8px 0; }
.footer-newsletter-row input[type="email"]::placeholder{ color:var(--platinum-dim); }
.footer-newsletter-row input[type="email"]:focus{ outline:none; }
.footer-newsletter-btn{ flex-shrink:0; background:none; border:none; color:var(--platinum); cursor:pointer; font-size:16px; line-height:1; padding:8px 2px 8px 12px; transition:color var(--dur-fast) var(--ease); }
.footer-newsletter-btn:hover{ color:var(--white); }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col small{ display:block; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--platinum-dim); margin-bottom:14px; }
.footer-col a{ display:block; font-size:13px; color:var(--platinum); margin-bottom:10px; }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{ display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:24px; font-size:11px; letter-spacing:0.06em; color:var(--platinum-dim); flex-wrap:wrap; gap:12px; }

/* ============================================================
   SAMPLE LIBRARY — UPLOAD / TAGGING
============================================================ */
.dropzone{
  border:1px dashed var(--line); background:var(--charcoal); padding:var(--space-6) var(--space-4);
  text-align:center; cursor:pointer; transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.dropzone:hover, .dropzone:focus-visible{ border-color:var(--platinum-dim); outline:none; }
.dropzone.is-dragover{ border-color:var(--gold); background:var(--charcoal-2); }
.dropzone-icon{ font-size:28px; color:var(--gold); margin-bottom:10px; line-height:1; }
.dropzone-text{ font-size:14px; color:var(--white); margin-bottom:6px; }
.dropzone-sub{ font-size:11.5px; color:var(--platinum-dim); }

.pending-list{ display:grid; gap:var(--space-3); margin-top:var(--space-4); }
.pending-card{ border:1px solid var(--line); background:var(--charcoal); padding:var(--space-3) clamp(16px,3vw,28px); }
.pending-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.pending-name{
  flex:1; background:none; border:none; border-bottom:1px solid var(--line); color:var(--white);
  font-family:var(--font-ui); font-size:15px; font-weight:400; padding:6px 0;
}
.pending-name:focus{ outline:none; border-color:var(--gold); }
.pending-discard{
  flex-shrink:0; background:none; border:1px solid var(--line); color:var(--platinum-dim); width:28px; height:28px;
  border-radius:50%; cursor:pointer; font-size:12px; transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pending-discard:hover{ color:var(--white); border-color:var(--white); }
.pending-fields{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:18px 0 6px; }
.bpm-row{ display:flex; gap:10px; align-items:center; }
.bpm-row input{ flex:1; }
.tap-tempo-btn, .transport-btn{
  font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--platinum);
  background:none; border:1px solid var(--line); padding:8px 14px; cursor:pointer; font-family:var(--font-ui);
  white-space:nowrap; transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tap-tempo-btn:hover, .transport-btn:hover{ color:var(--white); border-color:var(--platinum-dim); }
.pending-save{ margin-top:6px; }

.library-search{
  background:none; border:1px solid var(--line); color:var(--white); font-family:var(--font-ui);
  font-size:13px; padding:10px 14px; min-width:220px;
}
.library-search:focus{ outline:none; border-color:var(--gold); }
.library-select{
  background:var(--charcoal); border:1px solid var(--line); color:var(--platinum); font-family:var(--font-ui);
  font-size:12px; padding:10px 14px; cursor:pointer;
}
.library-select:focus{ outline:none; border-color:var(--gold); }

.sample-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,28px); }
.sample-card{ border:1px solid var(--line); background:var(--charcoal); padding:20px; }
.sample-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px; }
.sample-name{ font-family:var(--font-display); font-size:17px; }
.sample-delete{
  flex-shrink:0; background:none; border:1px solid var(--line); color:var(--platinum-dim); width:24px; height:24px;
  border-radius:50%; cursor:pointer; font-size:10px; transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.sample-delete:hover{ color:var(--white); border-color:var(--white); }
.sample-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.tag-chip{ font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); border:1px solid var(--line); padding:5px 10px; }

/* ============================================================
   SAMPLE LIBRARY — TRACK SPLITTER
============================================================ */
.splitter-workspace{ display:none; margin-top:var(--space-4); }
.splitter-workspace.is-visible{ display:block; }
.splitter-track-name{ font-size:13px; color:var(--platinum); margin-bottom:16px; }
.waveform-canvas{ width:100%; height:120px; display:block; background:var(--charcoal); border:1px solid var(--line); margin-bottom:var(--space-3); }

.splitter-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,3vw,28px); margin-bottom:var(--space-3); }
.splitter-controls .transport-control input[type="number"]{ width:64px; }

.splitter-progress{ display:none; margin-bottom:var(--space-4); }
.splitter-progress.is-visible{ display:block; }
.splitter-progress-label{ font-size:11px; color:var(--platinum-dim); margin-bottom:8px; }
.splitter-progress-bar{ height:4px; background:var(--line); border-radius:2px; overflow:hidden; }
.splitter-progress-fill{ height:100%; width:0%; background:var(--gold); transition:width var(--dur-fast) linear; }

.chunk-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:var(--space-4); }
.chunk-card{ border:1px solid var(--line); background:var(--charcoal); padding:16px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.chunk-card-head{ display:flex; justify-content:space-between; width:100%; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--platinum-dim); }
.chunk-actions{ display:flex; flex-direction:column; gap:8px; width:100%; }
.chunk-actions .tap-tempo-btn{ width:100%; text-align:center; }

/* ============================================================
   REMIX — TRANSPORT
============================================================ */
.transport{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px,3vw,32px); }
.transport-play{
  flex-shrink:0; width:56px; height:56px; border-radius:50%; border:1px solid var(--line); background:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color var(--dur-fast) var(--ease);
}
.transport-play:hover{ border-color:var(--white); }
.transport-play .icon-play{ width:0; height:0; margin-left:4px; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent var(--white); }
.transport-play .icon-pause{ display:none; gap:4px; }
.transport-play .icon-pause span{ width:4px; height:16px; background:var(--white); display:block; }
.transport-play.is-playing .icon-play{ display:none; }
.transport-play.is-playing .icon-pause{ display:flex; }

.transport-control{ display:flex; align-items:center; gap:10px; }
.transport-control label{ font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--platinum-dim); }
.transport-control input[type="number"]{
  width:64px; background:none; border:none; border-bottom:1px solid var(--line); color:var(--white);
  font-family:var(--font-ui); font-size:15px; padding:6px 0;
}
.transport-control input[type="number"]:focus{ outline:none; border-color:var(--gold); }
.transport-control input[type="range"]{ accent-color:var(--gold); width:110px; }
.transport-value{ font-size:11px; color:var(--platinum-dim); min-width:32px; font-variant-numeric:tabular-nums; }

/* ============================================================
   REMIX — KIT PRESETS
============================================================ */
.kit-nav{ display:flex; align-items:center; gap:16px; }
.kit-nav-btn{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--white);
  cursor:pointer; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:border-color var(--dur-fast) var(--ease);
}
.kit-nav-btn:hover{ border-color:var(--white); }
.kit-name{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--platinum); min-width:130px; text-align:center; }
.pad-hint{ font-size:11.5px; color:var(--platinum-dim); margin:-10px 0 var(--space-4); }

/* ============================================================
   REMIX — PAD GRID
============================================================ */
.pad-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:640px; }
.pad{
  position:relative; aspect-ratio:1/1; border:1px solid var(--line); background:var(--charcoal);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; user-select:none; transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pad:hover{ border-color:var(--platinum-dim); }
.pad:focus-visible{ outline:none; border-color:var(--gold); }
.pad.is-hit{ background:var(--gold); border-color:var(--gold); }
.pad.is-hit .pad-name, .pad.is-hit .pad-key{ color:var(--black); }
.pad-key{ font-size:10px; letter-spacing:0.1em; color:var(--platinum-dim); text-transform:uppercase; }
.pad-name{ font-family:var(--font-display); font-size:14px; text-align:center; padding:0 8px; line-height:1.2; }
.pad-assign{
  position:absolute; top:6px; right:6px; background:none; border:none; color:var(--platinum-dim);
  font-size:16px; cursor:pointer; line-height:1; padding:4px; transition:color var(--dur-fast) var(--ease);
}
.pad-assign:hover{ color:var(--white); }
.pad.is-loop-pad{ border-style:dashed; }
.pad.is-looping{
  border-color:var(--gold); border-style:solid; background:rgba(166,135,91,0.16);
  animation:pad-pulse 1.4s ease-in-out infinite;
}
@keyframes pad-pulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(166,135,91,0.35); }
  50%{ box-shadow:0 0 0 4px rgba(166,135,91,0.05); }
}

/* ============================================================
   REMIX — STEP SEQUENCER
============================================================ */
.sequencer{ display:grid; gap:6px; overflow-x:auto; }
.seq-row{ display:grid; grid-template-columns:120px 1fr; align-items:center; gap:14px; }
.seq-row-label{ font-size:11.5px; color:var(--platinum); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:sticky; left:0; background:var(--black); z-index:1; }
.seq-row-note{ font-size:11px; color:var(--platinum-dim); font-style:italic; }
.seq-steps{ display:grid; grid-template-columns:repeat(16,1fr); gap:4px; min-width:520px; }
.seq-step{
  aspect-ratio:1/1; background:var(--charcoal); border:1px solid var(--line); cursor:pointer; padding:0;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.seq-step.group-start{ border-left-color:var(--platinum-dim); }
.seq-step:hover{ border-color:var(--platinum-dim); }
.seq-step.is-active{ background:var(--platinum); border-color:var(--platinum); }
.seq-step.is-current{ border-color:var(--gold); }
.seq-step.is-active.is-current{ background:var(--gold); border-color:var(--gold); }

/* ============================================================
   REMIX — ASSIGN MODAL
============================================================ */
.pad-modal-backdrop{
  position:fixed; inset:0; z-index:200; background:rgba(10,10,10,0.86); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.pad-modal-backdrop.is-open{ display:flex; }
.pad-modal{ width:min(760px,100%); max-height:80vh; overflow-y:auto; background:var(--charcoal); border:1px solid var(--line); padding:var(--space-4) clamp(20px,4vw,40px); }
.pad-modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-4); }
.pad-modal-key-row{ display:flex; align-items:center; gap:14px; margin-bottom:var(--space-4); padding-bottom:var(--space-3); border-bottom:1px solid var(--line); }
.pad-modal-key-label{ font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--platinum-dim); }
.key-badge{
  min-width:44px; padding:8px 14px; border:1px solid var(--line); background:var(--charcoal-2); color:var(--white);
  font-family:var(--font-ui); font-size:13px; letter-spacing:0.05em; text-transform:uppercase; cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.key-badge:hover{ border-color:var(--platinum-dim); }
.key-badge.is-listening{ border-color:var(--gold); color:var(--gold); }
.mode-toggle{ display:flex; border:1px solid var(--line); }
.mode-toggle-btn{
  background:none; border:none; color:var(--platinum-dim); font-family:var(--font-ui); font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase; padding:8px 16px; cursor:pointer;
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.mode-toggle-btn + .mode-toggle-btn{ border-left:1px solid var(--line); }
.mode-toggle-btn:hover{ color:var(--white); }
.mode-toggle-btn.is-active{ background:var(--gold); color:var(--black); }
.mode-toggle-btn:disabled{ opacity:0.35; cursor:not-allowed; }
.mode-toggle-btn:disabled:hover{ color:var(--platinum-dim); }
.pad-modal-body{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.pad-modal-col small{ display:block; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--platinum-dim); margin-bottom:14px; }
.pad-modal-list{ display:flex; flex-direction:column; gap:6px; max-height:280px; overflow-y:auto; }
.pad-modal-item{
  text-align:left; font-size:13px; color:var(--platinum); background:none; border:1px solid var(--line);
  padding:10px 12px; cursor:pointer; font-family:var(--font-ui); transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pad-modal-item:hover{ color:var(--white); border-color:var(--platinum-dim); }
.pad-modal-item.is-selected{ color:var(--black); background:var(--gold); border-color:var(--gold); }
.pad-modal-empty{ font-size:12.5px; color:var(--platinum-dim); }
.pad-upload-label{ display:inline-block; cursor:pointer; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1024px){
  .artist-grid{ grid-template-columns:repeat(2,1fr); }
  .catalog-grid{ grid-template-columns:repeat(2,1fr); }
  .release{ grid-template-columns:1fr; }
  .studio{ grid-template-columns:1fr; }
  .artist-hero{ grid-template-columns:1fr; }
  .journal-grid{ grid-template-columns:repeat(2,1fr); }
  .sample-grid{ grid-template-columns:repeat(2,1fr); }
  .pad-modal-body{ grid-template-columns:1fr; }
  .chunk-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .artist-grid{ grid-template-columns:1fr 1fr; gap:16px; }
  .catalog-grid{ grid-template-columns:1fr 1fr; gap:16px; }
  .journal-grid{ grid-template-columns:1fr; }
  .section{ padding:var(--space-6) 20px; }
  .page-header{ padding:130px 20px var(--space-6); }
  .footer-cols{ gap:36px; }
  .pending-fields{ grid-template-columns:1fr; gap:14px; }
  .sample-grid{ grid-template-columns:1fr; }
  .pad-grid{ max-width:100%; gap:10px; }
  .seq-row{ grid-template-columns:80px 1fr; gap:8px; }
  .seq-row-label{ font-size:10px; }
  .transport{ gap:16px; }
  .chunk-grid{ grid-template-columns:1fr 1fr; gap:12px; }
}