/* Music Explorer v2.9 — standalone web app stylesheet */

:root {
  color-scheme: light;
  --sv-bg: #f6f1e7;
  --sv-surface: #fffdf8;
  --sv-surface-2: #efe4cf;
  --sv-text: #2f2922;
  --sv-muted: #746b60;
  --sv-border: #d9cbb6;
  --sv-accent: #8a5b2b;
  --sv-accent-dark: #68411e;
  --sv-shadow: 0 12px 32px rgba(66, 48, 29, .10);
  --sv-radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sv-bg);
  color: var(--sv-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }



/* ---------- Site shell ---------- */
a { color: inherit; }
.site-width { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(246,241,231,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--sv-border); }
.site-bar { width: min(1180px, calc(100% - 32px)); margin-inline: auto; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-brand { text-decoration: none; font-weight: 800; letter-spacing: .035em; font-size: 1.08rem; }
.site-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.site-nav a { text-decoration: none; padding: 9px 13px; border-radius: 999px; color: var(--sv-muted); font-weight: 650; }
.site-nav a:hover, .site-nav a.active { color: var(--sv-text); background: var(--sv-surface-2); }
.site-page[hidden] { display: none !important; }
.home-hero {
  min-height: clamp(560px, 70vw, 760px);
  padding: clamp(72px, 9vw, 120px) 0;
  border-bottom: 1px solid var(--sv-border);
  background-image: linear-gradient(90deg, rgba(246,241,231,.98) 0%, rgba(246,241,231,.90) 34%, rgba(246,241,231,.28) 58%, rgba(246,241,231,0) 76%), url("../assets/images/music-explorer-hero.png");
  background-size: cover;
  background-position: center right;
  display: flex;
  align-items: center;
}
.hero-inner { width: min(1180px, calc(100% - 32px)); }
.hero-content { max-width: 600px; }
.hero-kicker, .section-kicker { margin: 0 0 10px; text-transform: uppercase; letter-spacing: .15em; font-size: .75rem; font-weight: 750; color: var(--sv-accent); }
.home-hero h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.5rem, 8vw, 6.8rem); line-height: .92; margin: 0 0 22px; letter-spacing: -.045em; }
.hero-copy { max-width: 560px; margin: 0 0 28px; color: #4f463c; font-size: clamp(1rem, 2vw, 1.16rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.primary-action, .secondary-action { display: inline-block; text-decoration: none; padding: 13px 20px; border-radius: 999px; font-weight: 750; transition: transform .18s ease, background .18s ease; }
.primary-action { background: var(--sv-accent); color: #fff; }
.primary-action:hover { background: var(--sv-accent-dark); transform: translateY(-2px); }
.secondary-action { background: rgba(255,253,248,.88); color: var(--sv-text); border: 1px solid var(--sv-border); }
.secondary-action:hover { background: #fff; transform: translateY(-2px); }
.home-section { padding: 56px 0; }
.home-section.divided { border-top: 1px solid var(--sv-border); }
.section-heading { max-width: 760px; }
.section-heading h1, .section-heading h2 { margin: 0 0 12px; line-height: 1.05; }
.section-heading h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.section-heading p:last-child { color: var(--sv-muted); }
.home-streams { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.home-stream { text-decoration: none; min-height: 140px; padding: 20px; border: 1px solid var(--sv-border); border-radius: var(--sv-radius); background: var(--sv-surface); display: flex; flex-direction: column; justify-content: space-between; transition: transform .18s ease, box-shadow .18s ease; }
.home-stream:hover { transform: translateY(-3px); box-shadow: var(--sv-shadow); }
.home-stream span { font-size: 2rem; }
.topic-chips, .resource-regions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.topic-chips span, .resource-regions span { border: 1px solid var(--sv-border); background: var(--sv-surface); padding: 8px 12px; border-radius: 999px; color: var(--sv-muted); }
.steps-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.steps-grid article, .resource-grid article, .about-card { border: 1px solid var(--sv-border); border-radius: var(--sv-radius); background: var(--sv-surface); padding: 22px; }
.steps-grid article > span { color: var(--sv-accent); font-weight: 800; font-size: .8rem; letter-spacing: .08em; }
.steps-grid h3 { margin: 22px 0 7px; }
.steps-grid p, .resource-grid p, .about-card p { margin-bottom: 0; color: var(--sv-muted); }
.inner-page { padding: clamp(50px, 8vw, 90px) 0 80px; }
.wide-heading { max-width: 820px; }
.wide-heading h1 { font-size: clamp(2.4rem, 6vw, 4.8rem); letter-spacing: -.035em; }
.resource-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 28px; }
.resource-grid h2 { margin-top: 0; font-size: 1.25rem; }
.coming-soon { font-size: .88rem; font-weight: 700; color: var(--sv-accent) !important; }
.about-layout { max-width: 900px; }
.about-card { margin-top: 32px; }
.site-footer { border-top: 1px solid var(--sv-border); padding: 24px 0; color: var(--sv-muted); font-size: .88rem; }
.explorer-heading { margin-bottom: 10px; }

@media (max-width: 900px) {
  .home-streams { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .steps-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .site-bar { align-items: flex-start; flex-direction: column; padding: 14px 0; gap: 10px; }
  .site-nav { width: 100%; gap: 4px; }
  .site-nav a { padding: 8px 10px; }
  .home-streams, .steps-grid, .resource-grid { grid-template-columns: 1fr; }
  .home-hero { min-height: 620px; padding: 72px 0 54px; background-image: linear-gradient(180deg, rgba(246,241,231,.98) 0%, rgba(246,241,231,.92) 42%, rgba(246,241,231,.35) 72%, rgba(246,241,231,.08) 100%), url("../assets/images/music-explorer-hero.png"); background-position: 66% center; }
  .hero-content { max-width: 100%; }
  .home-hero h1 { font-size: clamp(3.2rem, 16vw, 5.3rem); }
}

#music-explorer { min-height: 100vh; }
#music-explorer .sv-wrap {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 56px 0 40px;
}
#music-explorer h1,
#music-explorer h2,
#music-explorer h3 { line-height: 1.15; margin-top: 0; }
#music-explorer h1 { font-size: clamp(2rem, 5vw, 4.4rem); margin-bottom: 14px; }
#music-explorer h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
#music-explorer h3 { font-size: 1.05rem; }
#music-explorer p { margin-top: 0; }
#music-explorer .intro { color: var(--sv-muted); max-width: 850px; }
#music-explorer .small {
  font-size: .76rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sv-muted);
}

#music-explorer .streams {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 30px 0 24px;
}
#music-explorer .stream,
#music-explorer .substyle,
#music-explorer .back {
  border: 1px solid var(--sv-border);
  background: var(--sv-surface);
  border-radius: 14px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#music-explorer .stream:hover,
#music-explorer .substyle:hover,
#music-explorer .back:hover {
  transform: translateY(-2px);
  box-shadow: var(--sv-shadow);
  border-color: #c3ae8d;
}
#music-explorer .stream { padding: 18px; text-align: left; min-height: 132px; }
#music-explorer .stream .ico { font-size: 1.85rem; margin-bottom: 9px; }
#music-explorer .stream strong,
#music-explorer .substyle strong { display: block; margin-bottom: 6px; }

#music-explorer .panel,
#music-explorer .research {
  display: none;
  background: rgba(255,253,248,.68);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  padding: clamp(20px, 4vw, 36px);
  box-shadow: var(--sv-shadow);
  scroll-margin-top: 24px;
}
#music-explorer .panel.show,
#music-explorer .research.show { display: block; }
#music-explorer .subgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
#music-explorer .substyle { padding: 18px; text-align: left; min-height: 112px; }

#music-explorer .research { margin-top: 24px; }
#music-explorer .research .head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
#music-explorer .region { color: var(--sv-muted); }
#music-explorer .back { padding: 10px 14px; white-space: nowrap; }
#music-explorer .content {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr);
  gap: 18px;
}
#music-explorer .card {
  background: var(--sv-surface);
  border: 1px solid var(--sv-border);
  border-radius: 15px;
  padding: 20px;
}
#music-explorer .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
#music-explorer .tag {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--sv-surface-2);
  border: 1px solid var(--sv-border);
  font-size: .88rem;
}
#music-explorer .instrument-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
#music-explorer .inst-card {
  overflow: hidden;
  border: 1px solid var(--sv-border);
  border-radius: 13px;
  background: #fff;
  text-align: center;
  font-weight: 650;
}
#music-explorer .inst-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #eee;
}
#music-explorer .inst-card div { padding: 9px; }
#music-explorer .artist { padding: 9px 0; border-bottom: 1px solid #eee4d4; }
#music-explorer .artist:last-child { border-bottom: 0; }
#music-explorer ul { padding-left: 1.25rem; margin-bottom: 0; }
#music-explorer .notice { padding: 18px; background: var(--sv-surface); border-radius: 12px; }
#music-explorer footer {
  margin-top: 30px;
  padding: 18px 0 4px;
  color: var(--sv-muted);
  font-size: .92rem;
}

@media (max-width: 900px) {
  #music-explorer .streams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #music-explorer .subgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #music-explorer .content { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  #music-explorer .sv-wrap { width: min(100% - 20px, 1180px); padding-top: 28px; }
  #music-explorer .streams,
  #music-explorer .subgrid { grid-template-columns: 1fr; }
  #music-explorer .research .head { flex-direction: column; }
  #music-explorer .back { width: 100%; }
}