/* GhostHeart LOUD concept — shared styles for music.html and live.html. DRAFT, not approved. */
:root{color-scheme:dark;
  --void:#050505; --blood:#e8001c; --hot:#ff1f3d; --ember:#7a000f;
  --bone:#f4f1ea; --ash:#8d8a86; --glitch:#00e5ff;
  --ref:url("/assets/loud/ghostheart-ref.jpg");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--void);color:var(--bone);font-family:"Space Grotesk",system-ui,sans-serif;overflow-x:clip;cursor:crosshair}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.display{font-family:Anton,Impact,"Arial Narrow",sans-serif;text-transform:uppercase;line-height:.84;letter-spacing:-.01em;font-weight:400}
.mark{font-family:"Permanent Marker",cursive}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.07;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+")}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:91;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}

.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(16px,4vw,48px);background:linear-gradient(rgba(5,5,5,.9),transparent)}
.logo{font-family:Anton,Impact,sans-serif;font-size:28px;letter-spacing:.02em}
.logo b{color:var(--blood);font-weight:400}
.nav ul{display:flex;gap:28px;list-style:none;font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--hot)}
.onair{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.2em;font-weight:700}
.onair i{width:10px;height:10px;border-radius:50%;background:var(--blood);box-shadow:0 0 12px var(--blood);animation:beat 1.1s infinite}
@media(max-width:820px){.nav ul{display:none}}

.kicker{display:inline-flex;gap:10px;align-items:center;background:var(--blood);color:var(--void);font-weight:700;font-size:12px;letter-spacing:.25em;padding:8px 12px;text-transform:uppercase;transform:rotate(-2deg)}
.kicker.bone{background:var(--bone)}
.tag{font-size:clamp(18px,2.2vw,26px);max-width:640px;margin:20px 0 28px;font-weight:500}
.btn{display:inline-flex;align-items:center;gap:12px;font-family:Anton,Impact,sans-serif;font-size:22px;letter-spacing:.04em;text-transform:uppercase;padding:18px 28px;border:3px solid var(--bone);transition:.15s}
.btn.red{background:var(--blood);border-color:var(--blood);color:var(--void);box-shadow:8px 8px 0 var(--bone)}
.btn.red:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--bone)}
.btn.ghost{background:rgba(5,5,5,.5)}
.btn.ghost:hover{background:var(--bone);color:var(--void)}
.btn.dark{background:var(--void);border-color:var(--void);color:var(--bone);box-shadow:8px 8px 0 var(--bone)}
.btn.dark:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--bone)}
.ctas{display:flex;flex-wrap:wrap;gap:14px}

.tape{background:var(--blood);color:var(--void);transform:rotate(-2.2deg) scale(1.05);margin:-30px 0 0;position:relative;z-index:5;overflow:hidden;border-block:4px solid var(--void)}
.tape.alt{background:var(--bone);transform:rotate(1.6deg) scale(1.05);margin:-20px 0 -20px}
.tape div{display:flex;width:max-content;animation:slide 18s linear infinite;font-family:Anton,Impact,sans-serif;font-size:clamp(28px,4vw,54px);padding:10px 0;white-space:nowrap}
.tape.alt div{animation-direction:reverse}
.tape span{padding:0 28px}
.tape span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px var(--void)}

section{position:relative;padding:clamp(90px,12vw,160px) clamp(16px,4vw,48px)}
.label{display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px solid currentColor;padding-bottom:12px;margin-bottom:clamp(30px,5vw,60px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:13px;gap:16px}
.label .num{font-family:Anton,Impact,sans-serif;font-size:clamp(48px,7vw,90px);letter-spacing:0;line-height:.8}

/* page hero (shared) */
.phero{position:relative;min-height:92svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding:120px clamp(16px,4vw,48px) clamp(60px,10vh,110px)}
.phero .giant{position:absolute;z-index:-3;left:0;bottom:-3vw;font-size:30vw;color:transparent;-webkit-text-stroke:2px rgba(232,0,28,.35);white-space:nowrap;animation:slide 40s linear infinite}
.phero .figure{position:absolute;z-index:-2;right:2vw;bottom:0;height:min(92svh,980px);background-image:var(--ref);background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 25%),linear-gradient(to bottom,transparent,#000 15%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 25%),linear-gradient(to bottom,transparent,#000 15%);mask-composite:intersect;filter:contrast(1.2) saturate(1.2)}
@media(max-width:700px){.phero .figure{right:-25vw;opacity:.45}}
.phero h1{font-size:clamp(66px,12vw,200px);margin-top:18px}
.phero h1 .o{color:transparent;-webkit-text-stroke:2px var(--bone)}
.phero h1 .r{color:var(--blood);display:inline-block;text-shadow:3px 0 var(--glitch),-3px 0 var(--hot);animation:glitch 3.2s infinite steps(1)}
.phero .copy{max-width:1100px}

/* doors */
.door-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:4px solid currentColor;border-left:4px solid currentColor}
@media(max-width:900px){.door-grid{grid-template-columns:1fr}}
.door{display:flex;flex-direction:column;justify-content:space-between;min-height:280px;padding:28px;border-right:4px solid currentColor;border-bottom:4px solid currentColor;transition:.12s}
.door .n{font-family:Anton,Impact,sans-serif;font-size:90px;line-height:.8}
.door h3{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(40px,4.6vw,72px);line-height:.88;text-transform:uppercase}
.door p{font-weight:700;letter-spacing:.15em;text-transform:uppercase;font-size:13px;margin-top:10px}
.door:hover{background:var(--blood);color:var(--void)}

footer{padding:40px clamp(16px,4vw,48px) 120px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;border-top:2px solid #222;color:var(--ash);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.draft{position:fixed;left:12px;top:64px;z-index:95;background:var(--bone);color:var(--void);font-weight:700;font-size:11px;letter-spacing:.15em;padding:6px 10px;text-transform:uppercase}

.rv{opacity:0;transform:translateY(60px) skewY(3deg);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes heart{0%,100%{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(1)}45%{transform:scale(1.08)}}
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes glitch{0%,88%,100%{transform:none;clip-path:none}90%{transform:translate(-6px,2px);clip-path:inset(10% 0 55% 0)}93%{transform:translate(5px,-3px);clip-path:inset(60% 0 8% 0)}96%{transform:translate(-2px,0)}}
@keyframes eq{from{height:12%}to{height:100%}}
@keyframes static{to{background-position:6px 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
@media(max-width:1180px){.onair{display:none}.nav ul{gap:18px}}

/* Approved site header (shared navigation) in the LOUD style */
header.ghx-header{position:fixed;top:0;left:0;right:0;z-index:80;display:block;padding:0;background:linear-gradient(rgba(5,5,5,.94),rgba(5,5,5,.78));border-bottom:2px solid rgba(232,0,28,.5)}
header.ghx-header .ghx-bar{display:flex;align-items:center;gap:clamp(12px,2.4vw,30px);padding:12px max(16px,4vw);flex-wrap:wrap}
header.ghx-header .ghx-brand{font-family:Anton,Impact,sans-serif;font-size:28px;letter-spacing:.02em;color:var(--bone);margin-right:auto}
header.ghx-header .ghx-brand span{color:var(--blood)}
header.ghx-header .ghx-primary{display:flex;gap:clamp(14px,2vw,26px);flex-wrap:wrap}
header.ghx-header .ghx-primary a{font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
header.ghx-header .ghx-primary a:hover,header.ghx-header .ghx-primary a[aria-current]{color:var(--hot)}
header.ghx-header .ghx-menu-toggle{font-family:Anton,Impact,sans-serif;font-size:18px;text-transform:uppercase;letter-spacing:.04em;color:var(--bone);border:2px solid var(--bone);padding:8px 14px;min-height:44px}
header.ghx-header .ghx-menu-toggle[aria-expanded=true]{background:var(--blood);border-color:var(--blood);color:var(--void)}
header.ghx-header .ghx-help-link{font-family:Anton,Impact,sans-serif;font-size:18px;text-transform:uppercase;background:var(--bone);color:var(--void);padding:10px 14px;min-height:44px;display:inline-flex;align-items:center}
header.ghx-header .ghx-menu{background:var(--void);border-top:4px solid var(--blood);padding:20px max(16px,4vw) 28px}
header.ghx-header .ghx-menu[hidden]{display:none}
header.ghx-header .ghx-menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
header.ghx-header .ghx-menu h2{font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);margin-bottom:10px}
header.ghx-header .ghx-menu a{display:block;font-family:Anton,Impact,sans-serif;font-size:clamp(26px,2.6vw,36px);text-transform:uppercase;line-height:1.1;color:var(--bone);padding:4px 0}
header.ghx-header .ghx-menu a:hover,header.ghx-header .ghx-menu a[aria-current]{color:var(--blood)}
header.ghx-header a:focus-visible,header.ghx-header button:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
@media(max-width:820px){header.ghx-header .ghx-bar{gap:8px 10px;padding:8px 16px}header.ghx-header .ghx-primary{order:3;width:100%;gap:18px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}header.ghx-header .ghx-primary a{white-space:nowrap;font-size:12px}header.ghx-header .ghx-brand{font-size:22px}header.ghx-header .ghx-menu-toggle,header.ghx-header .ghx-help-link{font-size:15px;padding:8px 10px}}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
html{scroll-padding-top:var(--hdr,110px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.g-honeypot{position:absolute!important;left:-5000px!important;width:1px;height:1px;overflow:hidden}

/* COMPACT PASS 2026-10-18 — same LOUD look, less scrolling */
section{padding:clamp(48px,6vw,88px) clamp(16px,4vw,48px)}
.label{margin-bottom:clamp(20px,3vw,36px)}
.label .num{font-size:clamp(36px,4.5vw,60px)}
.hero{min-height:auto}
.hero-copy{padding:96px clamp(16px,4vw,48px) clamp(36px,6vh,64px)}
.hero .figure{height:min(86svh,820px)}
h1{font-size:clamp(54px,8.5vw,136px)}
.tag{margin:14px 0 20px}
.btn,#home .ghx-actions a{font-size:19px;padding:12px 22px;min-height:48px}
.music h2{font-size:clamp(46px,5.5vw,84px)}
.music .line{font-size:clamp(19px,2vw,26px);margin:10px 0 18px}
.tracks{margin-top:28px}
.tracks li a{padding:10px 0;font-size:clamp(22px,2.8vw,38px)}
.man h2{font-size:clamp(50px,7vw,116px)}
.scars{margin-top:28px;max-width:1100px}
.scar .img{aspect-ratio:4/5}
.creed{margin-top:28px;font-size:clamp(28px,3.4vw,50px)}
#mission-board{padding:clamp(48px,6vw,88px) max(16px,4vw)}
#mission-board h2{font-size:clamp(42px,5.8vw,92px);max-width:18ch}
#mission-board .mission-board-grid{margin-top:26px}
#mission-board article{padding:18px}
#mission-board h3{font-size:clamp(26px,2.4vw,36px)}
.heart-not-done{font-size:clamp(50px,8vw,132px);padding:clamp(40px,6vw,72px) max(16px,4vw) 0}
#join-the-signal{padding:28px max(16px,4vw) clamp(48px,6vw,88px)}
#join-the-signal h2{font-size:clamp(38px,4.6vw,72px)}
.vault-h2{font-size:clamp(46px,6vw,96px);margin-bottom:14px}
.dq{margin-bottom:22px}
.door{min-height:180px;padding:20px}
.door .n{font-size:56px}
.door h3{font-size:clamp(32px,3.6vw,56px)}
.manifesto blockquote{font-size:clamp(36px,5.4vw,86px);max-width:20ch}
.manifesto .sig{margin-top:18px}
.phero{min-height:auto;padding:110px clamp(16px,4vw,48px) clamp(36px,6vh,64px)}
.phero h1{font-size:clamp(54px,8.5vw,136px)}
.phero .figure{height:min(86svh,820px)}
.signal h2{font-size:clamp(56px,9vw,150px)}
.live h2{font-size:clamp(56px,8vw,130px)}
.sitefoot{padding:36px max(16px,4vw) 72px}
@media(max-width:700px){
  section,#mission-board{padding:44px 16px}
  h1,.phero h1{font-size:clamp(46px,13vw,64px)}
  .door{min-height:140px}
  .scars{gap:10px}
}