/* ============================================================
   XPRSHUN · Music site product styles
   Loaded after ../../styles.css by index.html (no @import, so the
   parent sheet is parsed once). .mus-surface inherits every token
   unchanged; the rules below only draw the Home preview.
   ============================================================ */

.mus-surface { /* Full inheritance from the parent tokens. */ }

.site {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}

.site__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--space-md);
  border-bottom: 1px solid var(--color-rule);
}
.site__bar span:not(.site__url) {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-rule);
}
.site__url {
  margin-left: var(--space-md);
  padding: 2px var(--space-md);
  border-radius: var(--radius-full);
  background: var(--color-canvas);
  color: var(--color-ink-3);
  font-size: var(--fs-xs);
}

.site__page {
  background: var(--color-canvas);
  color: var(--color-ink);
  padding: var(--space-lg) clamp(var(--space-md), 4vw, var(--space-2xl)) var(--space-2xl);
  transition: background-color var(--dur-dissolve) var(--ease-dawn), color var(--dur-dissolve) var(--ease-dawn);
}

.site__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-rule);
}
.site__mark { display: inline-flex; }
.wm-site { height: 14px; width: auto; }
.wm-site--paper { display: none; }
.site__page.theme-dusk .wm-site--ink { display: none; }
.site__page.theme-dusk .wm-site--paper { display: block; }
.site__nav { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--fs-sm); color: var(--color-ink-2); }
.site__theme { margin-left: auto; }

.site__hero {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  align-items: end;
}
.site__release .cover { max-width: 260px; margin-bottom: var(--space-md); }
.site__title {
  font-family: var(--font-voice);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(var(--fs-2xl), 1.2rem + 2vw, var(--fs-4xl));
  line-height: 1.05;
  margin: var(--space-2xs) 0 var(--space-md);
}
.site__release .stream-row { margin-top: var(--space-md); }

.site__bio {
  margin-top: var(--space-xl);
  max-width: 40rem;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--color-ink);
}

.site__chapter { margin-top: var(--space-2xl); }
.site__dawn { height: 10px; border-radius: 999px; background: var(--gradient-dawn); }
.site__covers {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-md);
}
.site__covers figure { margin: 0; }
.site__covers figcaption { margin-top: 4px; font-size: var(--fs-xs); color: var(--color-ink-3); }

.site__letters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.site__letters .voice { font-size: var(--fs-xl); }
.site__field { display: flex; gap: var(--space-xs); align-items: center; }
.site__field .input { width: 220px; min-height: 36px; display: inline-flex; align-items: center; color: var(--color-ink-3); background: var(--color-canvas); }

.site__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
  font-size: var(--fs-xs);
  color: var(--color-ink-3);
}

@media (max-width: 760px) {
  .site__hero { grid-template-columns: minmax(0, 1fr); }
  .site__covers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site__theme { margin-left: 0; }
}