/* A single illustrated landscape unifies the whole music section. */
body[data-page="home"] .repertoire {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(90deg,rgba(27,9,12,.76),rgba(27,9,12,.56) 50%,rgba(27,9,12,.76)),
    url('/assets/heritage-botanical-landscape-v48.jpg') center 58% / cover no-repeat !important;
}
body[data-page="home"] .repertoire .section-heading,
body[data-page="home"] .repertoire .genre-grid { position:relative; z-index:1; }
body[data-page="home"] .repertoire .section-heading h2 { color:#fff4e4; }
body[data-page="home"] .repertoire .section-heading p { color:#f0e2d2; }
body[data-page="home"] .repertoire .genre-grid { align-items:stretch; gap:clamp(16px,2vw,28px); }

/* Keep each category legible over the image, with the same rounded corners. */
body[data-page="home"] .repertoire .genre-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  min-height:300px;
  padding:clamp(26px,2.8vw,40px) !important;
  text-align:left;
  border:1px solid rgba(225,191,150,.31) !important;
  border-radius:22px !important;
  background:rgba(33,13,17,.82) !important;
  color:#f8ecdd;
  box-shadow:0 12px 30px rgba(12,4,6,.16);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  transition:transform .35s ease,border-color .35s ease,background-color .35s ease;
}
body[data-page="home"] .repertoire .genre-card::before { display:none; content:none; }
body[data-page="home"] .repertoire .genre-card:hover {
  transform:translateY(-4px);
  border-color:rgba(230,196,149,.7) !important;
  background:rgba(55,21,27,.9) !important;
}
body[data-page="home"] .repertoire .genre-card > span:first-child {
  color:#d8b483; font-size:10px; letter-spacing:.12em;
}
body[data-page="home"] .repertoire .genre-card .genre-icon {
  margin:18px 0 15px; color:#dcb684;
}
body[data-page="home"] .repertoire .genre-card .genre-icon .icon { width:23px; height:23px; color:inherit; }
body[data-page="home"] .repertoire .genre-card h3 {
  margin:0; color:#fff3e3; font-size:clamp(23px,2vw,28px); line-height:1.2;
}
body[data-page="home"] .repertoire .genre-card p {
  max-width:none; margin:13px 0 25px; color:#eadacc; font-size:15px; line-height:1.65;
}
body[data-page="home"] .repertoire .genre-card .genre-link {
  display:flex; justify-content:space-between; width:100%; max-width:none;
  margin-top:auto; padding-top:16px; border-top:1px solid rgba(222,185,140,.35);
  color:#f0c990; font-size:12px; line-height:1.4;
}
body[data-page="home"] .repertoire .genre-card .genre-link .icon { width:15px; height:15px; color:inherit; }
body[data-page="home"] .repertoire .genre-card:focus-visible { outline:2px solid #f8d49c; outline-offset:4px; }
@media (max-width:760px) {
  body[data-page="home"] .repertoire { background-position:58% center; }
  body[data-page="home"] .repertoire .genre-grid { grid-template-columns:1fr; gap:14px; }
  body[data-page="home"] .repertoire .genre-card { min-height:0; padding:26px !important; border-radius:22px !important; }
  body[data-page="home"] .repertoire .genre-card .genre-icon { margin:13px 0 12px; }
  body[data-page="home"] .repertoire .genre-card p { margin-bottom:20px; }
}
@media (prefers-reduced-motion:reduce) {
  body[data-page="home"] .repertoire .genre-card { transition:none; }
  body[data-page="home"] .repertoire .genre-card:hover { transform:none; }
}