:root{
  --brown-900:#4e342e;
  --brown-700:#6d4c41;
  --brown-500:#8d6e63;
  --tan-300:#c5a37a;
  --tan-200:#d7b98d;
  --cream-100:#faefe2;
  --cream-50:#fff8ef;
  --accent:#b87333; /* copper */
  --text-900:#2a1f1a;
  --text-700:#4b3b33;
  --shadow: 0 10px 30px rgba(78,52,46,.25);
  --radius-2xl: 28px; /* rounded square / circular rectangle */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text-900);
  background:var(--cream-100);
  line-height:1.6;
}

h1,h2,h3,.display,.title{
  font-family:"Playfair Display", Georgia, "Times New Roman", serif;
  color:var(--brown-900);
  letter-spacing:.2px;
}

a{color:var(--brown-700);text-decoration:none}
a:hover{color:var(--brown-900)}

.container{width:min(1100px, 92%); margin:0 auto;}

.bg-gradient{
  background: radial-gradient(1200px 600px at 50% -20%, var(--cream-50), var(--tan-300)),
              linear-gradient(180deg, var(--cream-100), var(--tan-200));
  min-height:100dvh;
}

.bg-texture{
  background:
    radial-gradient(800px 400px at 100% -10%, rgba(200,160,110,.25), transparent 60%),
    radial-gradient(700px 350px at 0% 0%, rgba(255,255,255,.6), transparent 60%),
    linear-gradient(180deg, var(--cream-100), var(--cream-50));
  min-height:100dvh;
}

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(250,239,226,.9);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
}

.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{font-weight:700; font-family:"Playfair Display"; font-size:1.25rem; color:var(--brown-900)}
.main-nav ul{display:flex; gap:16px; list-style:none; margin:0; padding:0;}
.nav-link{padding:10px 14px; border-radius:14px; transition:transform .2s ease, background .2s ease}
.nav-link:hover{background:var(--cream-50); transform:translateY(-1px)}

.dropdown{position:relative}
.dropdown-menu{
  position:absolute; top:120%; left:0; min-width:220px; padding:10px;
  background:var(--cream-50); border:1px solid rgba(0,0,0,.06); border-radius:18px;
  box-shadow:var(--shadow); display:none; flex-direction:column; gap:6px;
}
.dropdown:hover .dropdown-menu{display:flex}
.dropdown-menu a{padding:10px 12px; border-radius:12px}
.dropdown-menu a:hover{background:rgba(0,0,0,.04)}

.button{
  display:inline-block; padding:12px 18px; border-radius:18px;
  background:linear-gradient(180deg, var(--tan-200), var(--tan-300)); color:#3b2a22;
  font-weight:600; box-shadow:var(--shadow); border:none; cursor:pointer; transition:transform .15s ease, filter .2s ease;
}
.button:hover{transform:translateY(-2px); filter:brightness(1.05)}
.button.small{padding:8px 12px; border-radius:14px}
.button.wide{width:100%}

.link{font-weight:500}
.hint{font-size:.86rem; color:var(--text-700)}

.center-stage{min-height:100dvh; display:grid; place-items:center; padding:40px 16px}
.center-stage-narrow{display:grid; place-items:center; padding:40px 0}

.max-w-480{width:min(480px, 92%)}

.card{
  background:linear-gradient(180deg, #fff, var(--cream-50));
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-2xl);
  padding:24px; box-shadow:var(--shadow);
}
.card-float{animation:float 6s ease-in-out infinite}
.card-glow{box-shadow: 0 12px 30px rgba(139,110,99,.25), inset 0 0 0 1px rgba(255,255,255,.6)}
.card-hover{transition:transform .2s ease, box-shadow .2s ease}
.card-hover:hover{transform:translateY(-4px) scale(1.01); box-shadow: 0 16px 40px rgba(78,52,46,.28)}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

.title{margin:0 0 6px 0; font-size:2rem}
.subtitle{margin:0 0 20px 0; color:var(--text-700)}

.form-field{display:grid; gap:8px}
input, select, textarea{
  width:100%; padding:12px 14px; border-radius:14px; border:1px solid rgba(0,0,0,.12);
  background:#fff; outline:none; transition:border-color .2s ease, box-shadow .2s ease, transform .1s ease;
}
input:focus{border-color:var(--tan-300); box-shadow:0 0 0 4px rgba(199,160,120,.25)}
.checkbox{display:flex; align-items:center; gap:8px}
.form-row{display:flex; align-items:center; gap:12px}
.space-between{justify-content:space-between}
.stack-16{display:grid; gap:16px}

.display{font-size:2.2rem; margin:8px 0 4px}
.lead{font-size:1.05rem; color:var(--text-700)}
.muted{color:#6b5447}

.hero{margin:28px 0}
.hero-content{display:grid; grid-template-columns: 1.1fr 1.4fr; gap:24px}
.avatar{width:128px; height:128px; border-radius:28px; object-fit:cover; box-shadow:var(--shadow); border:3px solid #fff}

/* Slideshow */
.slideshow{position:relative; overflow:hidden; border-radius:var(--radius-2xl); border:1px solid rgba(0,0,0,.06)}
.slides{position:relative; height:100%}
.slide{display:none; width:100%; height:100%; object-fit:cover}
.slide.active{display:block; animation:fade .6s ease}
@keyframes fade{from{opacity:.2} to{opacity:1}}
.control{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.8);
  border:none; border-radius:50%; width:40px; height:40px; cursor:pointer; box-shadow:var(--shadow);
}
.control.prev{left:10px} .control.next{right:10px}
.dots{position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:8px}
.dots button{
  width:10px; height:10px; border-radius:50%; border:1px solid rgba(0,0,0,.3); background:rgba(255,255,255,.9);
  cursor:pointer; transition:transform .2s ease;
}
.dots button.active{transform:scale(1.2); background:var(--tan-300)}

.card-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin:28px 0}

/* Tables */
table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:18px}
.results thead th{
  text-align:left; padding:14px; background:var(--tan-200); color:#3b2a22;
}
.results td{padding:12px 14px; border-bottom:1px solid rgba(0,0,0,.06)}
.results tbody tr:nth-child(even){background:#fff}
.results tbody tr:nth-child(odd){background:var(--cream-50)}
.results tbody tr:hover{background:rgba(199,160,120,.15)}

/* Media / gallery */
.media video{border-radius:18px; border:1px solid rgba(0,0,0,.06); box-shadow:var(--shadow)}
.gallery{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
.gallery img{width:100%; border-radius:16px; box-shadow:var(--shadow); transition:transform .2s}
.gallery img:hover{transform:scale(1.02)}

/* Footer */
.site-footer{padding:32px 0; color:var(--text-700)}

/* Responsive */
@media (max-width: 900px){
  .hero-content{grid-template-columns:1fr;}
  .card-grid{grid-template-columns:1fr; }
}

.music-card {
  width: 300px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
  text-align: center;
  background: #fff3e0; /* warm pastel background */
  font-family: 'Poppins', sans-serif;
  padding-bottom: 15px;
  margin: 20px auto;
}

.cover-wrap {
  position: relative;
}

.cover-art {
  width: 100%;
  border-bottom: 2px solid #e0a96d;
  display: block;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(224, 169, 109, 0.9); /* warm brown tone */
  border: none;
  color: white;
  font-size: 2rem;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease;
}
.play-button:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(180, 120, 70, 0.95);
}

.track-title {
  margin: 12px 0 4px;
  font-weight: 600;
  color: #5d4037;
}

.track-artist {
  margin: 0;
  font-size: 0.9rem;
  color: #7b5e57;
}