:root {
  --black: #05040a;
  --ink: #0b0a12;
  --panel: #121020;
  --cream: #f4eee5;
  --muted: #aaa2b5;
  --gold: #d7ab58;
  --gold-2: #f3d38c;
  --royal-blue: #183a8f;
  --royal-blue-2: #2857c7;
  --royal-purple: #24103f;
  --royal-purple-2: #4a1f78;
  --line: rgba(215,171,88,.28);
  --blue-line: rgba(57,96,191,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(circle at 20% 0%, rgba(40,87,199,.16), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(74,31,120,.18), transparent 30%),
    radial-gradient(circle at 50% 0%, rgba(215,171,88,.09), transparent 38%),
    linear-gradient(180deg, #06050b 0%, #0a0812 45%, #050409 100%);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.6;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .13; z-index: 99;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
.site-header {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 5vw;
  background: linear-gradient(180deg, rgba(8,6,18,.97), rgba(14,9,30,.72), transparent);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--gold); color: var(--gold);
  font-family: "Cormorant Garamond", serif; font-weight: 700; font-size: 22px;
  transform: rotate(45deg);
}
.brand-mark::first-letter { transform: rotate(-45deg); }
.brand-text { letter-spacing: .18em; font-size: 12px; font-weight: 600; }
.nav { display: flex; gap: 26px; color: #d7d0c7; font-size: 13px; }
.nav a:hover { color: var(--gold-2); }
.menu-toggle { display: none; background: none; border: 0; color: var(--cream); font-size: 24px; }

.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 140px 20px 80px; position: relative; overflow: hidden;
}
.hero::before, .hero::after {
  content: ""; position: absolute; width: 34vw; height: 70vh; top: 12vh;
  border: 1px solid rgba(213,170,82,.08); transform: rotate(22deg);
}
.hero::before { left: -17vw; }
.hero::after { right: -17vw; transform: rotate(-22deg); }
.hero-glow {
  position: absolute; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(40,87,199,.18), rgba(74,31,120,.10) 35%, transparent 68%);
  filter: blur(4px);
}
.crest { position: relative; z-index: 2; margin-bottom: 28px; }
.crest-ring {
  width: 180px; height: 180px; border-radius: 50%; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 7px #090909, 0 0 0 8px rgba(213,170,82,.35), 0 0 60px rgba(213,170,82,.1);
  background:
    radial-gradient(circle at 35% 25%, rgba(40,87,199,.22), transparent 38%),
    linear-gradient(135deg, rgba(215,171,88,.15), rgba(74,31,120,.18) 58%, transparent 75%),
    #0b0913;
}
.crest-ring::before, .crest-ring::after {
  content: "✦"; color: var(--gold); position: absolute; top: 50%; transform: translateY(-50%);
}
.crest-ring::before { left: 13px; }
.crest-ring::after { right: 13px; }
.crest-crown { color: var(--gold-2); font-size: 27px; line-height: 1; }
.crest-monogram {
  font-family: "Cormorant Garamond", serif; font-size: 34px; letter-spacing: .11em;
  margin-left: .11em; color: var(--cream); font-weight: 700;
}
.crest-ribbon { color: var(--gold); font-size: 9px; letter-spacing: .28em; }
.eyebrow {
  position: relative; z-index: 2; color: var(--gold); letter-spacing: .22em;
  text-transform: uppercase; font-size: 11px; font-weight: 600;
}
h1, h2, h3 { font-family: "Cormorant Garamond", serif; line-height: 1.05; }
h1 {
  position: relative; z-index: 2; margin: 12px 0 20px;
  font-size: clamp(54px, 8vw, 108px); letter-spacing: .025em; font-weight: 600;
}
h1 span { color: var(--gold-2); }
.hero-copy { position: relative; z-index: 2; max-width: 760px; color: #cbc3b8; font-size: 18px; }
.hero-actions { position: relative; z-index: 2; display: flex; gap: 14px; margin-top: 26px; }
.btn {
  border: 1px solid var(--gold); padding: 13px 22px; border-radius: 2px;
  text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700;
  cursor: pointer; transition: .25s ease;
}
.btn-gold { background: var(--gold); color: #111; }
.btn-gold:hover { background: var(--gold-2); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--gold-2); }
.btn-ghost:hover { background: rgba(213,170,82,.09); }
.hero-footnote { position: relative; z-index: 2; margin-top: 28px; color: #7e766c; font-size: 12px; letter-spacing: .12em; }

.section { padding: 110px 7vw; border-top: 1px solid rgba(255,255,255,.04); }
.section-label {
  color: var(--gold); text-transform: uppercase; letter-spacing: .28em;
  font-size: 11px; margin-bottom: 26px;
}
.section h2 { font-size: clamp(42px, 5vw, 72px); margin: 0 0 24px; font-weight: 600; }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: start; }
.copy { color: #bcb3a7; font-size: 17px; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 70px; border: 1px solid var(--line); }
.values-grid article { padding: 28px; min-height: 185px; border-right: 1px solid var(--line); }
.values-grid article:last-child { border-right: 0; }
.values-grid span { color: var(--gold); font-size: 11px; letter-spacing: .2em; }
.values-grid h3 { font-size: 30px; margin: 28px 0 6px; }
.values-grid p { color: var(--muted); margin: 0; }

.dark-panel { background: linear-gradient(135deg, #12152c 0%, #24103f 50%, #09080f 100%); }
.pillar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 48px; }
.pillar {
  min-height: 300px; padding: 28px 24px; border: 1px solid var(--line);
  background: rgba(255,255,255,.015); position: relative; transition: .25s ease;
}
.pillar:hover { transform: translateY(-6px); border-color: rgba(213,170,82,.65); }
.pillar.featured { background: linear-gradient(180deg, rgba(213,170,82,.11), rgba(213,170,82,.02)); }
.roman { color: var(--gold); font-family: "Cormorant Garamond", serif; font-size: 28px; }
.pillar h3 { margin: 95px 0 14px; font-size: 36px; }
.pillar p { color: #a89e91; }

.charter-card {
  max-width: 1050px; margin: 0 auto; display: grid; grid-template-columns: 150px 1fr;
  gap: 46px; padding: 56px; border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(213,170,82,.06), rgba(255,255,255,.01));
}
.seal {
  width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--gold); color: var(--gold-2);
  font-family: "Cormorant Garamond", serif; font-size: 64px;
  box-shadow: inset 0 0 0 8px #0b0b0b, inset 0 0 0 9px rgba(213,170,82,.35);
}
.seal.small { width: 80px; height: 80px; font-size: 44px; margin: 0 auto 18px; }
.charter-card h2 { font-size: clamp(38px, 5vw, 62px); }
.charter-card p { color: #beb5aa; font-size: 17px; }
.approved { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.approved span { border: 1px solid var(--line); padding: 9px 12px; font-size: 13px; color: #d7cfc4; }
.fine-print { font-size: 12px !important; color: #7c746a !important; }

.membership { background: linear-gradient(135deg, #0d1020, #1d0e32 62%, #0b0910); }
.application { display: grid; gap: 18px; padding: 32px; border: 1px solid var(--line); background: rgba(255,255,255,.015); }
label { display: grid; gap: 8px; color: var(--gold-2); font-size: 12px; text-transform: uppercase; letter-spacing: .13em; }
input, select, textarea {
  width: 100%; padding: 13px 14px; border: 1px solid rgba(213,170,82,.28);
  background: #090909; color: var(--cream); border-radius: 0; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
.form-note { color: #71695f; font-size: 11px; margin: 0; text-transform: none; letter-spacing: 0; }

.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 42px; }
.press-grid article { min-height: 250px; padding: 28px; border: 1px solid var(--line); }
.press-grid time { color: var(--gold); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.press-grid h3 { margin-top: 90px; font-size: 28px; }

.faq-list { max-width: 900px; }
details { border-top: 1px solid var(--line); padding: 22px 0; }
details:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-family: "Cormorant Garamond", serif; font-size: 28px; }
details p { color: var(--muted); }

footer {
  padding: 60px 7vw; border-top: 1px solid var(--line); display: grid;
  grid-template-columns: .7fr 1.3fr .8fr; gap: 35px; align-items: start; color: #81796f; font-size: 12px;
}
.footer-mark { color: var(--gold-2); font-family: "Cormorant Garamond", serif; font-size: 34px; letter-spacing: .12em; }
.satire { color: #a0978c; }

.modal {
  position: fixed; inset: 0; z-index: 100; display: none; place-items: center;
  background: rgba(0,0,0,.82); backdrop-filter: blur(8px); padding: 20px;
}
.modal.open { display: grid; }
.modal-card {
  position: relative; max-width: 560px; padding: 50px; text-align: center;
  background: #0e0d0b; border: 1px solid var(--gold); box-shadow: 0 30px 100px rgba(0,0,0,.7);
}
.modal-card h2 { font-size: 44px; margin: 10px 0 18px; }
.modal-card p { color: var(--muted); }
.modal-close { position: absolute; top: 12px; right: 16px; border: 0; background: none; color: var(--cream); font-size: 26px; cursor: pointer; }
.modal-dismiss { margin-top: 12px; }
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 30px);
  padding: 14px 18px; background: var(--gold); color: #111; font-size: 13px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: .3s ease; z-index: 120;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }


.acronym-line {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin: -4px 0 16px;
  color: #d9d0e8;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 12px;
}
.acronym-line span { position: relative; padding-left: 14px; }
.acronym-line span::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--gold);
}
.acronym-line b {
  color: var(--gold-2);
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
}
.royal-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  margin: 58px 0 8px;
  color: var(--gold);
}
.royal-divider span {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--royal-blue-2), var(--gold));
}
.royal-divider span:last-child {
  background: linear-gradient(90deg, var(--gold), var(--royal-purple-2), transparent);
}
.royal-divider i {
  font-style: normal;
  font-size: 24px;
  text-shadow: 0 0 20px rgba(215,171,88,.35);
}
.values-grid article:nth-child(1),
.values-grid article:nth-child(3) {
  background: linear-gradient(180deg, rgba(24,58,143,.11), transparent);
}
.values-grid article:nth-child(2),
.values-grid article:nth-child(4) {
  background: linear-gradient(180deg, rgba(74,31,120,.12), transparent);
}
.pillar:nth-child(1),
.pillar:nth-child(3) {
  box-shadow: inset 0 2px 0 rgba(40,87,199,.32);
}
.pillar:nth-child(2),
.pillar:nth-child(4) {
  box-shadow: inset 0 2px 0 rgba(74,31,120,.4);
}
.charter {
  background:
    radial-gradient(circle at 15% 20%, rgba(40,87,199,.11), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(74,31,120,.14), transparent 32%);
}
.charter-card { box-shadow: 0 24px 90px rgba(24,10,48,.35); }
.application {
  box-shadow: inset 0 2px 0 rgba(40,87,199,.28), 0 30px 90px rgba(18,8,38,.28);
}
.royal-band {
  padding: 46px 7vw;
  text-align: center;
  border-top: 1px solid rgba(215,171,88,.24);
  border-bottom: 1px solid rgba(215,171,88,.18);
  background:
    linear-gradient(90deg, rgba(24,58,143,.46), rgba(36,16,63,.78) 50%, rgba(24,58,143,.46)),
    #0a0812;
}
.royal-band div { max-width: 900px; margin: 0 auto; }
.royal-band-kicker {
  display: block;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.royal-band strong {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 600;
  color: var(--cream);
}

@media (max-width: 1050px) {
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar.featured { grid-column: span 2; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid article:nth-child(2) { border-right: 0; }
  .values-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  footer { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .menu-toggle { display: block; }
  .nav {
    position: absolute; left: 5vw; right: 5vw; top: 68px; display: none; flex-direction: column;
    gap: 0; padding: 10px; background: #0c0b0a; border: 1px solid var(--line);
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px; }
  .brand-text { display: none; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .press-grid { grid-template-columns: 1fr; }
  .charter-card { grid-template-columns: 1fr; padding: 32px; }
  .seal { width: 90px; height: 90px; font-size: 50px; }
  .section { padding: 85px 6vw; }
}
@media (max-width: 560px) {
  .acronym-line { gap: 6px 12px; font-size: 10px; }
  .acronym-line span { padding-left: 10px; }
  .hero-actions { flex-direction: column; width: min(100%, 320px); }
  .btn { width: 100%; }
  .crest-ring { width: 150px; height: 150px; }
  .crest-monogram { font-size: 29px; }
  h1 { font-size: 50px; }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar.featured { grid-column: auto; }
  .values-grid { grid-template-columns: 1fr; }
  .values-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .values-grid article:last-child { border-bottom: 0; }
  .modal-card { padding: 38px 24px; }
  .modal-card h2 { font-size: 36px; }
}

.music-hall{background:radial-gradient(circle at 10% 20%,rgba(40,87,199,.16),transparent 30%),radial-gradient(circle at 90% 80%,rgba(74,31,120,.2),transparent 32%),#090711}
.sound-card{border:1px solid var(--line);padding:28px;background:linear-gradient(135deg,rgba(24,58,143,.22),rgba(74,31,120,.25))}
.sound-card span,.track-card small,.band-grid small,.episode-list small,.series-kicker{color:var(--gold);text-transform:uppercase;letter-spacing:.16em;font-size:9px}
.sound-card strong{display:block;font:600 54px "Cormorant Garamond",serif;margin:8px 0}
.track-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:50px}
.track-card{display:grid;grid-template-columns:100px 1fr auto;gap:18px;align-items:center;padding:18px;border:1px solid var(--line);background:rgba(255,255,255,.018)}
.track-card:hover{transform:translateY(-4px);border-color:rgba(243,211,140,.55)}
.track-art{width:100px;aspect-ratio:1;display:grid;place-items:center;text-align:center;padding:8px;border:1px solid rgba(255,255,255,.12);font:700 17px/1.05 "Cormorant Garamond",serif;letter-spacing:.07em}
.track-art.blue{background:radial-gradient(circle,#2857c7,#171128 72%)} .track-art.purple{background:linear-gradient(135deg,#4a1f78,#0c173d)}
.track-art.violet{background:radial-gradient(circle at 30% 20%,#672b9f,#181021 70%)} .track-art.gold{background:linear-gradient(145deg,#8e6a27,#16111d 65%)}
.track-art.silver{background:linear-gradient(145deg,#626a80,#181020 60%)} .track-art.banner{background:linear-gradient(135deg,#1a3f99,#4a1f78)}
.track-card h3{margin:4px 0;font-size:28px}.track-card p{margin:0;color:#9f96aa;font-size:13px}
.track-card button{border:1px solid rgba(215,171,88,.5);background:transparent;color:var(--gold-2);padding:10px 12px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;cursor:pointer}
.music-note{margin-top:28px;border-left:3px solid var(--royal-blue-2);padding:14px 18px;background:rgba(24,58,143,.08)}.music-note p{margin:5px 0 0;color:#a99fb4}.music-note code{color:var(--gold-2)}
.velvet-section{background:linear-gradient(135deg,#1d0d32,#0a0e22)}
.velvet-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;padding:42px;border:1px solid var(--line);background:radial-gradient(circle at 85% 30%,rgba(40,87,199,.24),transparent 34%),radial-gradient(circle at 10% 80%,rgba(74,31,120,.3),transparent 36%)}
.velvet-emblem{width:min(100%,320px);aspect-ratio:1;justify-self:center;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--gold);box-shadow:inset 0 0 0 10px #120d1e,inset 0 0 0 11px rgba(215,171,88,.35),0 0 80px rgba(40,87,199,.22)}
.velvet-emblem span{color:var(--gold);font-size:34px}.velvet-emblem strong{font:600 88px/1 "Cormorant Garamond",serif}.velvet-emblem small{color:var(--gold-2);letter-spacing:.2em}
.band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}.band-grid article{min-height:180px;padding:24px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(40,87,199,.08),rgba(74,31,120,.06))}
.band-grid h3{margin:42px 0 6px;font-size:28px}.band-grid p{margin:0;color:#9f96aa}
.episodes{margin-top:72px}.episode-list{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line)}.episode-list article{padding:24px;min-height:170px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.episode-list article:nth-child(2n){border-right:0}.episode-list article:nth-last-child(-n+2){border-bottom:0}.episode-list h3{margin:34px 0 6px;font-size:30px}.episode-list p{margin:0;color:#9f96aa}
@media(max-width:1050px){.track-grid{grid-template-columns:1fr}.band-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.velvet-hero{grid-template-columns:1fr;padding:30px}.track-card{grid-template-columns:82px 1fr}.track-art{width:82px}.track-card button{grid-column:2;width:100%}}
@media(max-width:560px){.track-card{grid-template-columns:68px 1fr}.track-art{width:68px;font-size:12px}.band-grid,.episode-list{grid-template-columns:1fr}.episode-list article{border-right:0}.episode-list article:nth-last-child(-n+2){border-bottom:1px solid var(--line)}.episode-list article:last-child{border-bottom:0}}
