/* =========================================================================
   song-vault.html — page-specific styles (the open Song Vault)
   Load AFTER css/site.css (the overrides below rely on source order).
   Header, mobile menu, footer and the song cards (.sc) all come from site.css.
   ========================================================================= */

body{overflow-x:hidden}

/* main column: slightly narrower hero text than the rest of the site */
.vault-hero .wrap{max-width:1100px}

/* hero (site.css has a different, two-column .hero for the home page) */
.vault-hero{position:relative;z-index:2;padding:90px 0 40px;text-align:center}
.eyebrow{display:inline-block;font:11px ui-monospace,monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-soft);border:1px solid var(--line-strong);padding:7px 14px;border-radius:9999px;margin-bottom:26px}
.vault-hero h1{font-size:clamp(40px,7vw,74px);line-height:1.04;max-width:860px;margin:0 auto}
.vault-hero h1 em{font-style:italic;font-weight:300;color:var(--gold-soft)}
.sub{max-width:580px;margin:22px auto 0;color:var(--muted);font-size:17px;line-height:1.65}

/* the vault door — now open: click it to jump to the songs */
.vault-wrap{position:relative;display:block;width:min(240px,50vw);aspect-ratio:1;margin:48px auto 8px;cursor:pointer}
.vault-ring{position:absolute;inset:0;border-radius:50%}
.vault-ring svg{width:100%;height:100%;display:block}
.vault-ticks{transform-origin:50% 50%;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.vault-core{position:absolute;inset:14%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#241a10,#0d0906 70%);
  box-shadow:0 0 0 1px var(--line-strong),0 30px 70px -20px rgba(0,0,0,.7),inset 0 0 40px rgba(0,0,0,.6);transition:transform .35s ease}
.vault-wrap:hover .vault-core,.vault-wrap:focus-visible .vault-core{transform:scale(1.04)}
.vault-core svg{width:34%;height:34%;color:var(--gold);filter:drop-shadow(0 0 10px rgba(227,161,61,.5))}
.vault-glow{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,rgba(227,161,61,.22),transparent 65%);animation:pulseglow 3.4s ease-in-out infinite}
@keyframes pulseglow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.07)}}
.vault-hint{margin-top:14px;font-size:12.5px;color:var(--muted);letter-spacing:.3px}

/* song library */
.vault-library{position:relative;z-index:2;padding:40px 0 70px;scroll-margin-top:90px}
.vault-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:980px;margin:0 auto}
.vault-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:9999px;
  border:1px solid var(--line-strong);background:rgba(243,236,222,.02);
  color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .25s ease}
.vault-pill small{font-size:11.5px;font-weight:500;opacity:.75}
.vault-pill:hover{color:var(--cream);border-color:var(--gold-soft)}
.vault-pill.active{color:#1B1206;background:linear-gradient(90deg,var(--gold),var(--rust));border-color:transparent;box-shadow:0 0 18px rgba(227,161,61,.35)}
.vault-count{margin:18px 0 34px;text-align:center;font-size:13.5px;color:var(--muted)}
.samples-grid .sc[hidden]{display:none}

/* "More about …" link under each song's order button */
.sc-more{align-self:flex-start;margin-top:-4px;font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.sc-more:hover{color:rgb(var(--m1))}

/* order + new-songs band */
.vault-cta{position:relative;z-index:2;padding:10px 0 90px;text-align:center}
.vault-cta-box{max-width:720px;margin:0 auto;padding:44px 28px;border-radius:20px;border:1px solid var(--line-strong);
  background:radial-gradient(circle at 50% 0%,rgba(227,161,61,.12),transparent 70%),var(--bg-panel)}
.vault-cta h2{font-size:clamp(26px,4vw,36px)}
.vault-cta h2 em{font-style:italic;font-weight:300;color:var(--gold-soft)}
.vault-cta-box > p{margin:12px auto 26px;max-width:520px;color:var(--muted);font-size:15.5px}

/* optional "new songs" email list */
.notify{max-width:460px;margin:34px auto 0;padding-top:30px;border-top:1px solid var(--line)}
.notify-label{margin-bottom:12px;font-size:14px;color:var(--cream)}
.notify form{display:flex;gap:10px;background:var(--bg);border:1px solid var(--line-strong);border-radius:9999px;padding:6px;transition:border-color .25s ease}
.notify form:focus-within{border-color:var(--gold)}
.notify input{flex:1;min-width:0;background:transparent;border:0;color:var(--cream);font:inherit;font-size:15px;padding:12px 16px}
.notify input:focus{outline:none}
.notify input::placeholder{color:var(--muted)}
.notify button{flex:none;padding:12px 22px;border-radius:9999px;border:1px solid var(--line-strong);background:transparent;
  font:inherit;font-size:14px;font-weight:700;color:var(--cream);cursor:pointer;transition:all .25s ease}
.notify button:hover{border-color:var(--gold);color:var(--gold-soft)}
.notify button:disabled{opacity:.6;cursor:wait}
.notify small{display:block;margin-top:10px;color:var(--muted);font-size:12.5px}
.notify-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.notify-success{display:none;padding:10px 0;font-family:var(--display);font-size:18px;color:var(--gold-soft)}
.notify.done form,.notify.done small,.notify.done .notify-label{display:none}
.notify.done .notify-success{display:block}

@media (max-width:760px){
  .vault-filters{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -22px;padding:0 22px 6px}
  .vault-filters::-webkit-scrollbar{display:none}
  .vault-pill{padding:9px 14px;font-size:12.5px;flex:none}
}
@media (max-width:520px){.notify form{flex-direction:column;border-radius:20px}.notify button{width:100%}}
@media (prefers-reduced-motion:reduce){.vault-ticks,.vault-glow{animation:none!important}}