/* musica.studio - StashPop's pixel layout in forest green and grey.
   Block-character mountains sit on a fixed canvas behind everything (js/mountains.js). */
:root{
  --bg:#07130c;
  --bg2:#0c1c12;
  --panel:#10261a;
  --ink:#e9f1ea;
  --muted:#a3bfaa;
  --faint:#64836d;
  --green:#7ed47f;         /* the accent, where StashPop uses yellow */
  --green-ink:#07190d;     /* text on green */
  --grey:#9a969a;          /* logo grey */
  --grey2:#787478;         /* logo shadow grey */
  --snow:#f4f6f2;
  --shadow:#030906;        /* hard pixel-shadow colour */
  --line:#23402e;
  --rail:clamp(64px, 10vw, 120px);
  --pixel:"Press Start 2P", monospace;
  --mono:"Space Mono", ui-monospace, monospace;
  --body:"Inter", system-ui, sans-serif;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; min-height:100vh; color:var(--ink); font-family:var(--body);
  line-height:1.6; background:var(--bg);
}
/* subtle CRT scanlines, dialled down to stay modern */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px);
  opacity:.45; mix-blend-mode:multiply;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--green); color:var(--green-ink); }
:focus-visible{ outline:3px dashed var(--green); outline-offset:3px; }
button{ font:inherit; color:inherit; }

#mtn{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; }
.wrap{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 22px; }

/* ---------------- masthead ---------------- */
header.mast{ padding:56px 0 22px; }
.mast-row{ display:flex; align-items:center; gap:22px; }
.logo{ flex:0 0 auto; padding:7px; line-height:0; margin-bottom:12px; }
.logo .note{ width:var(--size, 84px); height:auto; display:block; overflow:visible; }   /* js/note.js animates the rects; the notes rise above the box */
.title-block{ display:flex; flex-direction:column; gap:10px; min-width:0; flex:1 1 auto; }
.wordmark-link{ display:block; line-height:0; }
.wordmark-link img{ width:100%; max-width:560px; height:auto; display:block; image-rendering:pixelated; }
.byline{
  font-family:var(--mono); font-size:13px; color:var(--muted);
  letter-spacing:.04em; position:relative; margin:0;
}
.byline b{ color:var(--ink); font-weight:700; }
.byline a:hover{ color:var(--green); }
.byline-tags{ position:absolute; top:100%; right:0; margin-top:4px; color:var(--faint); white-space:nowrap; }

/* ---------------- pixel divider ---------------- */
.divider{
  height:10px; margin:26px 0 30px;
  background:repeating-linear-gradient(90deg, var(--grey2) 0 14px, var(--green) 14px 28px);
  box-shadow:0 3px 0 var(--shadow);
}

/* ---------------- sections ---------------- */
.eyebrow{
  font-family:var(--pixel); font-size:10px; letter-spacing:1px;
  color:var(--faint); text-transform:uppercase; margin:0 0 18px;
  display:flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:9px; height:9px; background:var(--green); display:inline-block; }
section{ margin:0 0 34px; }
.panel{
  background:linear-gradient(180deg, rgba(16,38,26,.95), rgba(12,28,18,.95));
  border:3px solid var(--line);
  box-shadow:7px 7px 0 var(--shadow);
  padding:18px 20px;
}
.panel p{ margin:0 0 12px; }
.panel p:last-child{ margin-bottom:0; }
.panel a{ color:var(--green); text-decoration:underline; text-underline-offset:2px; }
.panel a:hover{ color:var(--snow); }
.stats{ display:flex; flex-wrap:wrap; gap:8px 22px; font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.04em; }
.stats b{ color:var(--green); font-weight:700; }

/* ---------------- filter pills ---------------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px; }
.pill{
  font-family:var(--pixel); font-size:9px; letter-spacing:1px; cursor:pointer;
  background:var(--panel); color:var(--muted);
  padding:10px 12px; border:3px solid var(--line); box-shadow:4px 4px 0 var(--shadow);
  transition:transform .08s steps(2), box-shadow .08s steps(2);
}
.pill:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--shadow); color:var(--ink); }
.pill.is-on{ background:var(--green); color:var(--green-ink); border-color:var(--shadow); }

/* ---------------- tracks ---------------- */
.tracks{ display:flex; flex-direction:column; gap:20px; padding-bottom:8px; margin-bottom:34px; }
.track{
  display:flex; gap:18px; align-items:stretch;
  background:linear-gradient(180deg, rgba(16,38,26,.95), rgba(12,28,18,.95));
  border:3px solid var(--line);
  box-shadow:7px 7px 0 var(--shadow);
  padding:18px;
  transition:transform .09s steps(2), box-shadow .09s steps(2), border-color .12s;
}
.track:hover{ transform:translate(3px,3px); box-shadow:4px 4px 0 var(--shadow); border-color:var(--grey2); }
.track.is-playing{ border-color:var(--green); }
.track[hidden]{ display:none; }
.track-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.track-meta{
  font-family:var(--mono); font-size:11px; color:var(--green);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px;
}
.track-meta .star{ color:var(--grey); }
.track-title{ font-size:20px; font-weight:600; line-height:1.25; margin:0 0 6px; letter-spacing:-.01em; }
.title-btn{ background:none; border:0; padding:0; cursor:pointer; text-align:left; font:inherit; }
.title-btn:hover{ color:var(--green); }
.track-suite{ font-family:var(--mono); font-size:11px; color:var(--grey); letter-spacing:.04em; margin:-2px 0 8px; }
.track-desc{ margin:0 0 12px; color:var(--muted); font-size:14.5px; }
.track-desc .yt{ color:var(--green); white-space:nowrap; }
.track-desc .yt:hover{ color:var(--snow); }
.track-tools{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.tool{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.03em;
  background:var(--bg); border:2px solid var(--line); padding:3px 8px 3px 4px;
}
.tool img{ width:16px; height:16px; image-rendering:pixelated; }
.track-actions{ margin-top:auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.read{
  align-self:flex-start; cursor:pointer; appearance:none; -webkit-appearance:none;
  font-family:var(--pixel); font-size:9px; letter-spacing:1px;
  color:var(--green-ink); background:var(--green);
  padding:10px 13px; border:3px solid var(--shadow);
  box-shadow:4px 4px 0 var(--shadow);
  transition:transform .08s steps(2), box-shadow .08s steps(2);
}
.read:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--shadow); }
.read .arr{ color:var(--grey2); }
.track.is-playing .read{ background:var(--snow); }
.dl{ font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.04em; }
.dl:hover{ color:var(--green); }

/* cover tile, where StashPop has the short tile */
.tile{
  flex:0 0 112px; width:112px; height:112px; position:relative; align-self:flex-start;
  border:3px solid var(--shadow); background:var(--bg);
  box-shadow:4px 4px 0 var(--shadow); overflow:hidden; cursor:pointer;
  appearance:none; -webkit-appearance:none; padding:0; margin:0;
  transition:transform .08s steps(2), box-shadow .08s steps(2);
}
.tile:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--shadow); }
.tile-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile-tag{
  position:absolute; left:0; bottom:0; right:0;
  font-family:var(--pixel); font-size:7px; letter-spacing:1px; color:var(--ink);
  background:var(--shadow); padding:6px 7px; text-align:center;
}
.track.is-playing .tile-tag{ background:var(--green); color:var(--green-ink); font-size:0; }
.track.is-playing .tile-tag::after{ content:"NOW PLAYING"; font-size:7px; }
.track.is-playing.is-paused .tile-tag::after{ content:"PAUSED"; }

/* ---------------- about ---------------- */
.about-grid{ display:grid; grid-template-columns:3fr 2fr; gap:22px; }
.about-text{ font-size:15px; }
.about-facts{ margin:0; font-size:13px; color:var(--muted); }
.about-facts dt{ font-family:var(--mono); font-size:10px; color:var(--green); text-transform:uppercase; letter-spacing:.08em; margin:0 0 4px; }
.about-facts dd{ margin:0 0 14px; line-height:1.55; }
.about-facts dd:last-child{ margin-bottom:0; }

/* ---------------- lineage ---------------- */
.timeline{ list-style:none; margin:0; padding:18px 20px; display:flex; flex-direction:column; gap:12px; }
.timeline li{ display:grid; grid-template-columns:52px 1fr; gap:12px; align-items:baseline; font-size:14.5px; color:var(--muted); }
.timeline b{ font-family:var(--mono); font-size:12px; color:var(--green); letter-spacing:.06em; position:relative; padding-left:16px; }
.timeline b::before{ content:""; position:absolute; left:0; top:.2em; width:8px; height:8px; background:var(--grey2); }
.timeline li:last-child b::before{ background:var(--green); }

/* ---------------- social footer ---------------- */
footer.social{ padding:20px 0 64px; }
.social-grid{ display:flex; flex-wrap:wrap; gap:12px; }
.ico{
  flex:1 1 140px; min-width:120px;
  display:flex; align-items:center; gap:11px;
  background:var(--panel); border:3px solid var(--line);
  box-shadow:5px 5px 0 var(--shadow);
  padding:13px 14px;
  transition:transform .08s steps(2), box-shadow .08s steps(2), border-color .12s, background .12s;
}
.ico:hover{ transform:translate(2px,2px); box-shadow:3px 3px 0 var(--shadow); border-color:var(--grey2); background:var(--bg2); }
.glyph{
  flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center;
  font-family:var(--pixel); font-size:10px; color:var(--green-ink);
  background:var(--green); border:2px solid var(--shadow);
}
.ico .label{ font-family:var(--mono); font-size:12px; color:var(--ink); letter-spacing:.03em; }
.ico .sub{ display:block; font-size:10px; color:var(--faint); }
.colophon{
  margin-top:26px; font-family:var(--mono); font-size:11px; color:var(--faint);
  letter-spacing:.04em; display:flex; align-items:center; gap:8px;
}
.colophon .dot{ width:7px; height:7px; background:var(--grey2); }

/* ---------------- the player bar ---------------- */
body.has-player{ padding-bottom:120px; }
.player{
  position:fixed; left:0; right:var(--rail); bottom:0; z-index:6;
  display:grid; grid-template-columns:56px minmax(140px,1fr) minmax(160px,2fr) auto auto;
  gap:14px; align-items:center; padding:10px 18px;
  background:#0a1a10; border-top:3px solid var(--green); box-shadow:0 -6px 0 var(--shadow);
}
.player[hidden]{ display:none; }
.p-art{ width:56px; height:56px; object-fit:cover; border:2px solid var(--shadow); box-shadow:3px 3px 0 var(--shadow); background:var(--bg); }
.p-info{ min-width:0; }
.p-kicker{ font-family:var(--pixel); font-size:7px; letter-spacing:1px; color:var(--green); text-transform:uppercase; margin-bottom:4px; }
.p-title{ font-weight:600; font-size:15px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.p-sub{ font-family:var(--mono); font-size:10px; color:var(--faint); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.p-wave{ height:44px; cursor:pointer; }
.p-wave canvas{ display:block; width:100%; height:100%; image-rendering:pixelated; }
.p-time{ font-family:var(--mono); font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.p-btns{ display:flex; gap:8px; }
.pbtn{
  cursor:pointer; appearance:none; -webkit-appearance:none; line-height:1;
  font-family:var(--pixel); font-size:9px; color:var(--ink);
  background:var(--panel); border:3px solid var(--line); padding:9px 10px;
  box-shadow:3px 3px 0 var(--shadow); transition:transform .08s steps(2), box-shadow .08s steps(2);
  display:inline-grid; place-items:center;
}
.pbtn:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--shadow); }
.pbtn-main{ background:var(--green); color:var(--green-ink); border-color:var(--shadow); font-size:11px; min-width:40px; }

/* ---------------- right-side pixel rail ---------------- */
body{ padding-right:var(--rail); }
.rail{
  position:fixed; top:0; right:0; bottom:0; width:var(--rail); z-index:5;
  border-left:3px solid var(--green); background:#040b07;
  box-shadow:-6px 0 0 var(--shadow);
}
.rail canvas{ display:block; width:100%; height:100%; image-rendering:pixelated; }

@media (max-width:760px){
  .about-grid{ grid-template-columns:1fr; }
  .player{ grid-template-columns:48px 1fr auto; grid-template-areas:"art info btns" "wave wave wave"; gap:10px 12px; padding:10px 14px; }
  .p-art{ grid-area:art; width:48px; height:48px; }
  .p-info{ grid-area:info; }
  .p-btns{ grid-area:btns; }
  .p-wave{ grid-area:wave; height:36px; }
  .p-time{ display:none; }
  body.has-player{ padding-bottom:140px; }
}
@media (max-width:560px){
  :root{ --rail:0px; }
  .rail{ display:none; }
  .track{ gap:12px; padding:14px; }
  .tile{ flex-basis:88px; width:88px; height:88px; }
  .tile-tag{ font-size:6px; padding:5px 4px; }
  .byline-tags{ position:static; display:block; margin-top:2px; white-space:normal; }
  .logo .note{ --size:60px; }
  .mast-row{ gap:14px; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}