:root{
  --bg:#0a0a0b;
  --bg-elev:#111214;
  --panel:#15171a;
  --panel-2:#1b1f24;
  --text:#f5f4f0;
  --muted:#b2b0aa;
  --line:#2b3138;
  --accent:#d8b36a;
  --accent-soft:rgba(216,179,106,.14);
  --max:1180px;
  --radius:22px;
  --shadow:0 20px 50px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top, rgba(216,179,106,.08), transparent 28%),
    linear-gradient(180deg, #090909 0%, #0d0e10 100%);
  color:var(--text);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(calc(100% - 2rem), var(--max)); margin-inline:auto}
.muted{color:var(--muted)}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.76rem;
  color:var(--accent);
}
.eyebrow::before,.eyebrow::after{content:""; width:22px; height:1px; background:currentColor; opacity:.75}

.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(14px);
  background:rgba(10,10,11,.78);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 0;
}
.brand{
  display:flex; flex-direction:column; gap:.1rem;
}
.brand-title{
  font-family: Georgia, "Times New Roman", serif;
  font-size:1.2rem; letter-spacing:.08em; text-transform:uppercase;
}
.brand-sub{font-size:.76rem; color:var(--muted); letter-spacing:.18em; text-transform:uppercase}
.nav{
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.55rem;
}
.nav a{
  padding:.62rem .9rem; border-radius:999px; color:var(--muted);
  border:1px solid transparent; transition:.2s ease;
}
.nav a:hover,.nav a.active{color:var(--text); border-color:var(--line); background:rgba(255,255,255,.03)}

.hero{padding:6rem 0 3.2rem}
.hero-grid{display:grid; grid-template-columns:1.2fr .9fr; gap:2rem; align-items:center}
.hero-card,.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero-copy{padding:clamp(1.5rem, 4vw, 3rem)}
.hero h1{
  margin:.5rem 0 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height:.96;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.hero p{max-width:60ch; color:#d8d6d0}
.hero-art{
  min-height:420px; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(216,179,106,.22), transparent 20%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.08), transparent 18%),
    linear-gradient(145deg, #111214 0%, #181b20 100%);
}
.hero-art::before,
.hero-art::after{
  content:""; position:absolute; inset:9%; border:1px solid rgba(216,179,106,.24); border-radius:36px;
  transform:rotate(9deg);
}
.hero-art::after{inset:19%; transform:rotate(-12deg)}
.hero-glyph{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family: Georgia, serif; font-size:clamp(4rem, 15vw, 8rem);
  color:rgba(255,255,255,.07); letter-spacing:.18em;
}
.button-row{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.6rem}
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.2rem; border-radius:999px; font-weight:600; transition:.2s ease;
  border:1px solid var(--line); background:var(--panel); color:var(--text);
}
.button.primary{background:var(--accent); color:#16120a; border-color:transparent}
.button:hover{transform:translateY(-2px)}

.section{padding:1.4rem 0 3.2rem}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.3rem}
.section-head h2{margin:.3rem 0 0; font-family: Georgia, serif; font-size:clamp(1.7rem, 4vw, 2.5rem); text-transform:uppercase; letter-spacing:.04em}
.cards-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem}
.card{padding:1.25rem; border-radius:18px; background:var(--panel); border:1px solid var(--line)}
.card h3{margin:.1rem 0 .5rem; font-size:1.05rem}
.icon-badge{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--accent-soft); border:1px solid rgba(216,179,106,.2); margin-bottom:.85rem}
.icon-badge svg{width:22px; height:22px; stroke:var(--accent)}

.artist-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem}
.artist-card{padding:1.2rem; border-radius:18px; background:var(--panel); border:1px solid var(--line)}
.artist-top{display:flex; gap:1rem; align-items:flex-start}
.artist-avatar{
  width:72px; height:72px; border-radius:18px;
  background:linear-gradient(145deg, rgba(216,179,106,.22), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  display:grid; place-items:center; flex-shrink:0;
  font-size:1.2rem; font-weight:700; color:var(--accent);
}
.artist-card h3{margin:.1rem 0 .2rem; font-size:1.15rem}
.artist-meta{color:var(--muted); font-size:.94rem}
.artist-links{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}
.pill-link{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.62rem .8rem; border-radius:999px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--muted); transition:.2s ease;
}
.pill-link:hover{color:var(--text); border-color:rgba(216,179,106,.35)}
.pill-link svg{width:16px; height:16px; opacity:.92}

.cta-panel{padding:1.5rem; display:grid; grid-template-columns:1.15fr .85fr; gap:1rem; align-items:center}
.list-clean{padding-left:1.1rem; margin:.8rem 0 0}
.list-clean li+li{margin-top:.35rem}

.page-hero{padding:4.2rem 0 2rem}
.page-hero .panel{padding:2rem}
.page-title{margin:.4rem 0 0; font-family: Georgia, serif; font-size:clamp(2rem, 5vw, 3.5rem); text-transform:uppercase; letter-spacing:.05em}
.content-grid{display:grid; grid-template-columns:1fr 320px; gap:1.2rem}
.stack{display:grid; gap:1rem}
.info-block{padding:1.3rem}
.info-block h3{margin:.15rem 0 .6rem; font-size:1.1rem}
.sidebar-note{position:sticky; top:90px; padding:1.2rem}

.faq-list{display:grid; gap:.85rem}
.faq-item{
  border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--panel)
}
.faq-item summary{
  cursor:pointer; list-style:none; padding:1rem 1.1rem; font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:1rem
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+'; font-size:1.4rem; color:var(--accent)}
.faq-item[open] summary::after{content:'–'}
.faq-answer{padding:0 1.1rem 1.1rem; color:#ddd8cf}

.footer{padding:2rem 0 3rem; color:var(--muted)}
.footer-inner{display:flex; justify-content:space-between; gap:1rem; border-top:1px solid rgba(255,255,255,.08); padding-top:1.25rem}

@media (max-width: 960px){
  .hero-grid,.cta-panel,.content-grid,.cards-3,.artist-grid{grid-template-columns:1fr}
  .nav{display:none}
  .hero{padding-top:4rem}
  .sidebar-note{position:static}
}

@media (max-width: 600px){
  .container{width:min(calc(100% - 1.1rem), var(--max))}
  .hero-copy,.page-hero .panel,.card,.artist-card,.info-block{padding:1rem}
  .brand-title{font-size:1rem}
}

.hero-art{
  position: relative;
  overflow: hidden;
  min-height: 420px;
}

.hero-slideshow{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border-radius: inherit;
  overflow: hidden;
}

.hero-slideshow .slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-slideshow .slide.active{
  opacity: 1;
}