/* A full-bleed garden, with quiet ornamental labels inspired by the reference. */
body[data-page="home"] .repertoire {
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:clamp(96px,10vh,150px);
  background:linear-gradient(90deg,rgba(19,3,4,.80),rgba(25,7,9,.61) 50%,rgba(19,3,4,.80)),url('/assets/heritage-botanical-landscape-v48.jpg') center / cover no-repeat !important;
}
body[data-page="home"] .repertoire .section-heading,
body[data-page="home"] .repertoire .genre-grid { width:100%; }
body[data-page="home"] .repertoire .genre-grid { gap:clamp(12px,1.8vw,26px); align-items:stretch; }
body[data-page="home"] .repertoire .genre-card {
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:390px;
  padding:55px clamp(38px,3.5vw,58px) !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  text-align:center;
  color:#36181b !important;
  transition:transform .35s ease, filter .35s ease;
}
/* A vector silhouette keeps the curved edge clean at every screen size. */
body[data-page="home"] .repertoire .genre-card::before {
  content:"";
  display:block;
  position:absolute;
  inset:0;
  z-index:-1;
  clip-path:none; box-shadow:none;
  background: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 410' preserveAspectRatio='none'%3E%3Cpath d='M180 7C167 25 151 29 131 30C108 31 94 39 88 60C55 57 37 74 37 104C18 106 10 120 10 143V175C10 188 5 198 1 205C5 212 10 222 10 235V267C10 290 18 304 37 306C37 336 55 353 88 350C94 371 108 379 131 380C151 381 167 385 180 403C193 385 209 381 229 380C252 379 266 371 272 350C305 353 323 336 323 306C342 304 350 290 350 267V235C350 222 355 212 359 205C355 198 350 188 350 175V143C350 120 342 106 323 104C323 74 305 57 272 60C266 39 252 31 229 30C209 29 193 25 180 7Z' fill='%23f0e3d4' stroke='%23b9997e' stroke-width='1.2'/%3E%3Cpath d='M180 19C166 35 151 40 130 40C109 41 99 50 96 69C64 67 48 81 48 112C28 115 20 126 20 146V175C20 188 16 197 12 205C16 213 20 222 20 235V264C20 284 28 295 48 298C48 329 64 343 96 341C99 360 109 369 130 370C151 370 166 375 180 391C194 375 209 370 230 370C251 369 261 360 264 341C296 343 312 329 312 298C332 295 340 284 340 264V235C340 222 344 213 348 205C344 197 340 188 340 175V146C340 126 332 115 312 112C312 81 296 67 264 69C261 50 251 41 230 40C209 40 194 35 180 19Z' fill='none' stroke='%23c4a58c' stroke-opacity='.7' stroke-width='.8'/%3E%3Cg fill='none' stroke='%23b08b76' stroke-opacity='.7' stroke-width='1'%3E%3Cpath d='M55 116c10-20 22-27 38-29m-20 14c-2-8 0-13 6-18 3 7 1 12-6 18zm6-9c7-3 12-2 16 2-6 4-11 4-16-2zM305 294c-10 20-22 27-38 29m20-14c2 8 0 13-6 18-3-7-1-12 6-18zm-6 9c-7 3-12 2-16-2 6-4 11-4 16 2z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
body[data-page="home"] .repertoire .genre-card::after { content:none; }
body[data-page="home"] .repertoire .genre-card:hover { transform:translateY(-4px); filter:brightness(1.035); }
body[data-page="home"] .repertoire .genre-card > span:first-child { color:#765447 !important; font-size:10px; letter-spacing:.13em; }
body[data-page="home"] .repertoire .genre-card .genre-icon { margin:11px 0 13px; color:#8d5748 !important; }
body[data-page="home"] .repertoire .genre-card .genre-icon .icon { width:23px; height:23px; color:inherit !important; }
body[data-page="home"] .repertoire .genre-card h3 { color:#35171b !important; font-size:clamp(21px,1.8vw,27px); line-height:1.15; }
body[data-page="home"] .repertoire .genre-card p { color:#593d3c !important; font-size:14px; line-height:1.5; margin:12px 0 0; max-width:27ch; }
body[data-page="home"] .repertoire .genre-card .genre-link { width:100%; max-width:240px; justify-content:center; gap:10px; margin-top:17px; padding-top:13px; border-top:1px solid #ad8b78; color:#704638 !important; font-size:12px; }
body[data-page="home"] .repertoire .genre-card .genre-link .icon { color:inherit !important; }
body[data-page="home"] .repertoire .genre-card:focus-visible { outline:2px solid #f8d49c; outline-offset:4px; }
@media(max-width:1000px) and (min-width:761px) {
 body[data-page="home"] .repertoire .genre-card { min-height:380px; padding-inline:33px !important; }
 body[data-page="home"] .repertoire .genre-card p { font-size:13px; }
}
@media(max-width:760px) {
 body[data-page="home"] .repertoire { min-height:100svh; padding-block:80px; background-position:58% center !important; }
 body[data-page="home"] .repertoire .genre-grid { grid-template-columns:1fr; gap:16px; max-width:460px; margin-inline:auto; }
 body[data-page="home"] .repertoire .genre-card { min-height:340px; padding:50px clamp(42px,12vw,75px) !important; }
 body[data-page="home"] .repertoire .genre-card p { max-width:29ch; }
}
@media(prefers-reduced-motion:reduce){body[data-page="home"] .repertoire .genre-card{transition:none}body[data-page="home"] .repertoire .genre-card:hover{transform:none}}
/* Keep the medallion silhouette clear when a card is hovered. */
body[data-page="home"] .repertoire .genre-card:hover{background:none!important;border:0!important}