*{box-sizing:border-box}
:root{--gold:#b08a3e;--gold-dark:#8f6e2f;--purple:#6b3fa0;--orange:#df7b28;--text:#444;--muted:#777;--cream:#fbfaf7}
body{margin:0;background:var(--cream);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}
.site-header{background:#fff}
.header-image{height:210px;background:linear-gradient(90deg,rgba(35,35,35,.62),rgba(35,35,35,.18)),url("header-banner.jpg") center/cover no-repeat;display:flex;align-items:flex-end}
.header-image-inner{width:1100px;max-width:calc(100% - 50px);margin:0 auto;padding:28px 0}
.header-image h1{margin:0;color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:42px;font-weight:400;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.header-bar{border-bottom:1px solid #e8e3d8;background:#fff}
.header-bar-inner{max-width:1100px;margin:0 auto;padding:10px 25px;display:flex;align-items:center;justify-content:space-between}
.logo{height:48px;width:auto;max-width:180px;object-fit:contain}
.back-link{color:var(--purple);font-size:14px;text-decoration:none}
.back-link:hover{color:var(--orange);text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:30px 25px 55px}
.intro{max-width:850px;margin:0 0 25px;color:#555}
.intro h2{margin:0 0 10px;color:var(--gold);font-family:Georgia,"Times New Roman",serif;font-size:28px;font-weight:400}
.controls{margin-bottom:22px}
#search{width:100%;padding:14px 17px;border:1px solid #d8d2c6;border-radius:3px;font:inherit;background:#fff;outline:none}
#search:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(176,138,62,.14)}
nav{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 10px}
nav button{font:inherit;font-size:14px;padding:8px 15px;border:1px solid #d8d2c6;border-radius:3px;background:#fff;color:#555;cursor:pointer}
nav button:hover{border-color:var(--gold);color:var(--gold-dark)}
nav button.active{background:var(--gold);color:#fff;border-color:var(--gold)}
#count{font-size:14px;color:#888;margin:12px 0}
.card{background:#fff;border:1px solid #e3dfd6;border-radius:3px;margin:13px 0;overflow:hidden;box-shadow:0 1px 5px rgba(0,0,0,.045)}
.head{padding:18px 20px;cursor:pointer;position:relative}
.head:hover{background:#fdfcf9}
.head:after{content:'+';position:absolute;right:20px;top:18px;color:#aaa;font-size:22px;line-height:1}
.card.open .head:after{content:'−'}
.head h2{margin:0 30px 2px 0;color:var(--gold);font-family:Georgia,"Times New Roman",serif;font-size:22px;font-weight:400}
.artist{color:#666}.voicing{font-size:13px;color:#888;margin-top:3px}
.badges{margin-top:9px}
.badge{display:inline-block;margin:0 6px 4px 0;padding:3px 9px;border-radius:2px;background:#f1edf4;color:var(--purple);font-size:12px}
.content{display:none;padding:4px 20px 20px;border-top:1px solid #eee}
.card.open .content{display:block}
.voice{padding:17px 0;border-bottom:1px solid #eee}.voice:last-child{border-bottom:0}
.voice h3{margin:0 0 9px;color:var(--gold);font-family:Georgia,"Times New Roman",serif;font-size:17px;font-weight:400}
.button-row{display:flex;flex-wrap:wrap;gap:8px}
.btn{display:inline-block;padding:8px 13px;border-radius:3px;color:#fff;text-decoration:none;font-size:14px}
.btn.purchase{background:var(--purple)}.btn.purchase:hover{background:#573080}
.btn.performance{background:var(--orange)}.btn.performance:hover{background:#bd6116}
.note{margin-top:10px;padding:11px 13px;background:#faf7fc;border-left:3px solid var(--purple);color:#666;font-size:14px}
.note.contact{background:#fbf8ef;border-left-color:var(--gold)}
.note a{color:var(--purple);text-decoration:underline}
.error,.empty{padding:18px;border:1px solid #ddd;color:#666;background:#fff}
footer{border-top:1px solid #e8e3d8;text-align:center;padding:25px;color:#888;font-size:13px;background:#fff}
footer a{color:var(--purple)}
@media(max-width:700px){.header-image{height:170px}.header-image h1{font-size:32px}.header-image-inner{max-width:calc(100% - 36px);padding-bottom:22px}.header-bar-inner{padding:9px 18px}.logo{height:42px}.container{padding:25px 18px 45px}.button-row{flex-direction:column}.btn{text-align:center}}


/* Final refinements */

body,
h1,
h2,
h3,
h4,
h5,
h6,
input,
button {
  font-family: Arial, Helvetica, sans-serif !important;
}

.back-link {
  display: inline-block !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
}

:root {
  --gold: #b08a3e;
  --gold-dark: #8f6e2f;
  --teal: #496d70;
  --plum: #75607d;
}

/* Complementary link colours */
.btn.purchase {
  background: var(--teal) !important;
}
.btn.purchase:hover {
  background: #39575a !important;
}

.btn.performance {
  background: var(--plum) !important;
}
.btn.performance:hover {
  background: #5d4b64 !important;
}

.btn.tracks {
  background: #7b6a3d !important;
}
.btn.tracks:hover {
  background: #62552f !important;
}

.voice h3 {
  color: var(--gold) !important;
}

.genre {
  margin: 4px 0 5px;
  font-size: 12px;
  color: var(--gold-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.description {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 5px;
}

/* Featured arrangement: deliberately kept close in size to a normal card */
.featured {
  margin: 0 0 22px;
}

.featured-card {
  background: #fff;
  border: 1px solid #e3dfd6;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(0,0,0,.045);
  position: relative;
}

.featured-label {
  padding: 10px 20px 0;
  color: var(--gold-dark);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.featured-head {
  padding: 7px 20px 15px;
}

.featured-head h2 {
  margin: 0 30px 2px 0;
  color: var(--gold);
  font-size: 22px;
  font-weight: 400;
}

.featured-head .artist {
  color: #666;
}

.featured-head .voicing {
  font-size: 13px;
  color: #888;
  margin-top: 3px;
}

.featured-toggle {
  margin: 0 20px 18px;
  padding: 8px 13px;
  border: 0;
  border-radius: 3px;
  background: var(--gold);
  color: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.featured-toggle:hover {
  background: var(--gold-dark);
}

.featured-content {
  display: none;
  padding: 4px 20px 5px;
  border-top: 1px solid #eee;
}

.featured-content.show {
  display: block;
}

.featured-content .voice {
  padding: 14px 0;
}

.featured-content .voice h3 {
  font-size: 17px;
}