:root{--fg:#f4f4f4;--mute:#9a9a9a;--line:#2a2a2a;--serif:"Bodoni Moda","Didot",Georgia,serif;--sans:"Jost","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:#000;color:var(--fg);font:300 1.0625rem/1.75 var(--sans)}
a{color:inherit;text-underline-offset:4px}
a:hover{color:#fff}
:focus-visible{outline:2px solid #fff;outline-offset:4px}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;margin:0}
h1{font-size:clamp(2.6rem,8vw,6rem)}
h2{font-size:clamp(1.9rem,4.5vw,3rem);margin:0 0 1.5rem}
h3{font-size:1.5rem}
p{margin:0 0 .9rem}
small{color:var(--mute)}
.mute{color:var(--mute)}
.kick{font-size:.95rem;letter-spacing:.06em;color:var(--mute);margin-bottom:.4rem}

header{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 2rem;padding:.9rem clamp(1rem,4vw,3rem);background:#000;border-bottom:1px solid var(--line)}
.mark{font:400 1.3rem var(--serif);letter-spacing:.1em;text-decoration:none}
.mark img{height:34px;width:auto}
nav{display:flex;flex-wrap:wrap;gap:.3rem 1.6rem;font-size:.95rem}
nav a{text-decoration:none;color:#cfcfcf}
nav a:hover{color:#fff;text-decoration:underline}

main{min-height:70vh}
section,.page{padding:clamp(3rem,8vw,6.5rem) clamp(1rem,4vw,3rem);max-width:1240px;margin:0 auto}
.hero{padding-top:clamp(4rem,12vw,9rem);padding-bottom:clamp(3rem,8vw,6rem)}
.hero h1{max-width:12ch}
.hero em{display:block;font:italic 400 clamp(1.3rem,3vw,2rem) var(--serif);color:#ddd;margin:1.2rem 0 1.6rem}
.hero p.lede{max-width:46ch;color:#cfcfcf}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.btn{display:inline-block;border:1px solid #fff;padding:.75rem 1.7rem;text-decoration:none;font:400 1rem var(--sans);letter-spacing:.04em;color:#fff;background:none;cursor:pointer}
.btn:hover{background:#fff;color:#000}
.btn.solid{background:#fff;color:#000}.btn.solid:hover{background:#000;color:#fff}
.btn:disabled{opacity:.5;cursor:wait}

.ph{position:relative;aspect-ratio:4/5;background:#111;display:grid;place-items:center;text-align:center;padding:1rem;color:#555;font:italic 1.3rem var(--serif);overflow:hidden}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph.sq{aspect-ratio:1}
.ph.flyer{aspect-ratio:auto;min-height:260px}
.ph.flyer img{position:static;height:auto}

.roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.acard{text-decoration:none;display:block}
.acard .ph{margin-bottom:1rem}
.acard:hover h3{text-decoration:underline;text-underline-offset:6px}
.rels{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;max-width:760px}
.rel h3{margin:1rem 0 .3rem}
.vid{position:relative;aspect-ratio:16/9;background:#111;margin-bottom:1rem}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.event{display:grid;grid-template-columns:minmax(200px,340px) 1fr;gap:2rem;padding:2rem 0;border-top:1px solid var(--line)}
.event h3{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.4rem}
@media(max-width:720px){.event{grid-template-columns:1fr}}
.apage{display:grid;grid-template-columns:minmax(220px,420px) 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:start;margin-bottom:3rem}
@media(max-width:720px){.apage{grid-template-columns:1fr}}
.bio{max-width:52ch;margin-top:1.2rem}
.links{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;margin-top:1.2rem}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.page h2:not(:first-child){margin-top:3.5rem}
.prose{max-width:52ch}

form{display:grid;gap:1.1rem;max-width:600px}
label{display:grid;gap:.4rem;color:#d4d4d4}
input,select,textarea{font:inherit;color:#fff;background:#000;border:0;border-bottom:1px solid #777;padding:.7rem 0;border-radius:0;width:100%}
select{padding:.7rem 0}
input:focus,select:focus,textarea:focus{outline:0;border-color:#fff}
textarea{min-height:140px}
.hp{position:absolute;left:-9999px}
#st{min-height:1.6rem;margin:0}

footer{border-top:1px solid var(--line);padding:2rem clamp(1rem,4vw,3rem);color:var(--mute);font-size:.95rem;display:flex;flex-wrap:wrap;gap:1rem 3rem;justify-content:space-between}
footer p{margin:0 0 .3rem}
footer a{color:#fff;margin-right:1.2rem}

/* NFVR editorial branding and curated release experience */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hero{display:flex;flex-direction:column;align-items:flex-start;min-height:66vh;justify-content:center}
.hero-brand{width:min(74vw,720px);max-height:280px;object-fit:contain;object-position:left center;margin:0 0 1rem;animation:brand-in .8s ease both}
@keyframes brand-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-brand{animation:none}}
.rels{max-width:none;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:1.6rem}
.rel h3{font-size:1.24rem}.rel .mute{font-size:.88rem}
.listen-link{display:inline-block;text-decoration:none;border-bottom:1px solid #777;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase}
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:2.2rem}
.video-grid .vid{margin-bottom:.6rem}
.video-grid .mute{font-size:.87rem}
.listen-page{max-width:540px;margin:0 auto;text-align:center;padding:clamp(3rem,7vw,6rem) 1.5rem}
.listen-page .listen-art{width:min(100%,350px);height:auto;aspect-ratio:1;object-fit:cover;margin:0 auto 2rem}
.listen-page h1{font-size:clamp(2.8rem,7vw,4.5rem);margin:.3rem 0 .7rem}
.listen-page .mute{margin-bottom:2rem}
.platforms{display:grid;gap:.75rem;margin:2rem 0 2.5rem}
.platforms a{border:1px solid #555;text-align:left;padding:.85rem 1.25rem;display:flex;align-items:center;justify-content:space-between;text-decoration:none;transition:background .15s}
.platforms a:hover{background:#171717}
@media(max-width:720px){.hero-brand{width:92vw}.hero{min-height:55vh}}

/* Homepage hero: centered NFVR brand treatment */
.hero{align-items:center;text-align:center}
.hero-brand{margin:0 auto 1rem;object-position:center center;width:min(74vw,720px)}
.hero p.lede{margin-left:auto;margin-right:auto}
.hero h1{max-width:none}
@media(max-width:720px){.hero-brand{width:min(92vw,720px)}}


/* Actual NFVR Halloween Fest photos as a quiet atmospheric homepage background. */
.homepage-photo-bg{background:#000;isolation:isolate}
.homepage-photo-bg::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.64) 46%,rgba(0,0,0,.78)),linear-gradient(to bottom,rgba(0,0,0,.57),rgba(0,0,0,.26) 45%,rgba(0,0,0,.70)),url('/images/nfvr-authentic-performance-atmosphere.webp') center center/cover no-repeat;opacity:.70}
.homepage-photo-bg main,.homepage-photo-bg main section{background:transparent}
.homepage-photo-bg .hero-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;margin-top:1.45rem}
.homepage-photo-bg .hero-actions .btn{min-width:155px;text-align:center}
.homepage-photo-bg .hero{align-items:center;text-align:center}
.homepage-photo-bg .hero-brand{margin:0 auto 1rem;object-position:center center;width:min(74vw,720px)}
.homepage-photo-bg .hero p.lede{margin-left:auto;margin-right:auto}
.homepage-photo-bg .hero h1{max-width:none}
@media(max-width:720px){.homepage-photo-bg .hero-brand{width:min(92vw,720px)}.homepage-photo-bg::before{background-position:52% center;opacity:.5}}

/* Mobile refinement — 2026-10-27. Keeps desktop design and Netlify form intact. */
@media (max-width: 767px) {
  html { scroll-padding-top: 126px; }
  body { font-size: 1rem; line-height: 1.6; overflow-wrap: break-word; }
  header { padding: .8rem 1rem .7rem; gap: .6rem; justify-content: center; }
  header .mark { width: 100%; display: flex; justify-content: center; }
  header .mark img { height: 27px; max-width: 120px; object-fit: contain; }
  header nav { width: 100%; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 0; align-items: center; }
  header nav a { font-size: clamp(.65rem, 2.35vw, .86rem); line-height: 1.25; text-align:center; min-height: 40px; display:flex; align-items:center; justify-content:center; padding:.3rem .1rem; }
  section, .page { padding: 2.8rem 1.1rem; }
  h1 { font-size: clamp(2.7rem, 12vw, 4rem); overflow-wrap:anywhere; }
  h2 { font-size: clamp(2.15rem, 9vw, 3rem); margin-bottom:1.25rem; }
  h3 { font-size: 1.28rem; }
  .hero, .homepage-photo-bg .hero { min-height: 0; padding: 4rem 1.1rem 3.5rem; }
  .hero-brand, .homepage-photo-bg .hero-brand { width:min(89vw, 490px); max-height: 180px; margin-bottom: .7rem; }
  .hero em { font-size: clamp(1.28rem,5vw,1.6rem); margin: .5rem 0 1rem; }
  .hero p.lede { max-width: 34ch; font-size: .99rem; line-height: 1.65; }
  .homepage-photo-bg .hero-actions { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: min(100%, 370px); gap: .9rem; margin-top: 1.4rem; }
  .homepage-photo-bg .hero-actions .btn { min-width:0; width:100%; padding:.75rem .35rem; display:flex; align-items:center; justify-content:center; white-space:nowrap; }
  .btn { min-height: 44px; }
  .roster { grid-template-columns: repeat(2,minmax(0,1fr)); gap:1.5rem .9rem; }
  .acard .ph { margin-bottom:.65rem; }
  .acard h3 { font-size:1.13rem; line-height:1.17; }
  .acard .mute { font-size:.86rem; line-height:1.4; margin-top:.4rem; }
  .rels { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1rem; }
  .rel h3 { font-size:1.07rem; line-height:1.2; margin:.7rem 0 .3rem; }
  .rel .mute { font-size:.81rem; line-height:1.45; }
  .listen-link { padding:.35rem 0; font-size:.83rem; }
  .video-grid { grid-template-columns:1fr; gap:1.6rem; }
  .event { grid-template-columns:1fr; gap:1rem; padding:1.5rem 0; }
  .event .ph.flyer { width: min(100%,420px); min-height:0; }
  .event h3 { font-size:2rem; }
  .event .btn { max-width:100%; text-align:center; }
  .apage { grid-template-columns:1fr; gap:1.4rem; }
  .apage > div:first-child { max-width:430px; width:100%; margin:0 auto; }
  .gal { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
  .page h2:not(:first-child) { margin-top:2.6rem; }
  .listen-page { padding:3rem 1.1rem; }
  .listen-page .listen-art { width:min(100%,310px); margin-bottom:1.35rem; }
  .listen-page h1 { font-size:clamp(2.6rem,11vw,3.8rem); }
  .platforms a { min-height:52px; }
  form { gap:1.25rem; }
  input, select, textarea { font-size:16px; min-height:45px; }
  textarea { min-height:160px; }
  form button { width:100%; }
  footer { padding:2rem 1.1rem; display:block; }
  footer > * + * { margin-top:1rem; }
  footer a { display:inline-block; margin:0 1rem .35rem 0; }
  .homepage-photo-bg::before { background-position:center center; opacity:.42; }
}
@media (max-width: 360px) {
  header nav a { font-size:.64rem; }
  .hero, .homepage-photo-bg .hero { padding-top:3rem; }
  .roster, .rels { gap:1.3rem .65rem; }
  .homepage-photo-bg .hero-actions { gap:.6rem; }
  .homepage-photo-bg .hero-actions .btn { font-size:.88rem; }
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}