/* =====================================================
   39 NORTH - SHARED STYLES
   Used by BOTH index.html and press-kit.html
   Page-specific styles live in index.css / press-kit.css
   ===================================================== */
:root{
  --bg:#0c0b0a;
  --bg-alt:#161311;
  --bg-alt2:#1e1a17;
  --red:#c41e3a;
  --red-bright:#e0293f;
  --red-deep:#5c0f1c;
  --paper:#f3ede4;
  --paper-dim:#cfc6ba;
  --muted:#9a8f86;
  --line:#332b27;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:84px;}
body{
  background:var(--bg);
  color:var(--paper);
  font-family:'Barlow',sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* ===== ACCESSIBILITY ===== */
.skip{position:absolute;left:-9999px;top:8px;z-index:400;background:var(--red);color:#fff;padding:12px 18px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.skip:focus{left:8px;}
:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

.eyebrow{
  font-family:'Space Mono',monospace;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red-bright);
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--red-bright);display:inline-block;}
h1,h2,h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;}
.section{padding:100px 0;position:relative;}
.section-head{max-width:640px;margin-bottom:56px;}
.section-head h2{font-size:clamp(34px,5vw,52px);line-height:1.02;}
.section-head p{color:var(--muted);font-size:17px;margin-top:14px;max-width:520px;}

/* ===== NAV ===== */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:20px 0;
  transition:background .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{background:rgba(12,11,10,.92);backdrop-filter:blur(8px);padding:13px 0;border-color:var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;}
.brand{font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.03em;display:flex;align-items:baseline;gap:8px;}
.brand-logo{height:34px;width:auto;display:block;transition:height .3s ease;}
header.scrolled .brand-logo{height:28px;}
.navlinks{display:flex;gap:34px;align-items:center;}
.navlinks a{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;font-size:15px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--paper-dim);
  position:relative;padding:4px 0;
  transition:color .2s;
}
.navlinks a:hover,.navlinks a.current{color:var(--paper);}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--red-bright);transition:width .25s;}
.navlinks a:hover::after,.navlinks a.current::after{width:100%;}
.nav-cta{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--red);color:#fff;padding:10px 20px;border-radius:2px;
  transition:background .2s;
}
.nav-cta:hover{background:var(--red-bright);}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:12px;margin:-12px;width:44px;height:44px;align-items:center;justify-content:center;}
.hamburger span{width:24px;height:2px;background:var(--paper);}
.mobile-menu{
  display:none;position:fixed;inset:0;background:var(--bg);z-index:200;
  flex-direction:column;align-items:center;justify-content:center;gap:30px;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-family:'Anton',sans-serif;font-size:28px;text-transform:uppercase;color:var(--paper);}
.mobile-close{position:absolute;top:24px;right:28px;font-size:30px;background:none;border:none;color:var(--paper);cursor:pointer;width:44px;height:44px;}

/* ===== BUTTONS ===== */
.btn{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 28px;border-radius:2px;display:inline-flex;align-items:center;gap:10px;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
  cursor:pointer;
}
.btn-primary{background:var(--red);color:#fff;border:1px solid var(--red);}
.btn-primary:hover{background:var(--red-bright);border-color:var(--red-bright);transform:translateY(-2px);}
.btn-outline{border:1px solid var(--muted);color:var(--paper);}
.btn-outline:hover{border-color:var(--paper);transform:translateY(-2px);}

/* ===== BAND MEMBER / PHOTO CARD (shared visual treatment) ===== */
.member{position:relative;border-radius:2px;overflow:hidden;aspect-ratio:3/4;background:var(--bg-alt);}
.member img{width:100%;height:100%;object-fit:cover;filter:grayscale(45%) contrast(1.05);transition:filter .3s;}
.member:hover img{filter:grayscale(0%) contrast(1.05);}
.member-tag{
  position:absolute;left:0;right:0;bottom:0;padding:16px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.88) 70%);
}
.member-tag b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;letter-spacing:.02em;text-transform:uppercase;display:block;}
.member-tag span{font-family:'Space Mono',monospace;font-size:11px;color:var(--red-bright);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;display:block;}
/* long role labels (e.g. "Rhythm Guitar / Lead Vocals") shrink with the card so they stay on one line */
@supports (container-type:inline-size){
  .member{container-type:inline-size;}
  .member-tag span{font-size:clamp(8px, calc((100cqw - 34px) / 18), 11px);}
}
.members{display:grid;grid-template-columns:1fr 1fr;gap:18px;}

/* ===== WATCH (video grid, shared by both pages) =====
   First video is featured full-width. The rest wrap 3 across. */
.video-grid{display:flex;flex-wrap:wrap;gap:20px;}
.video-frame{
  position:relative;aspect-ratio:16/9;background:var(--bg-alt2);border-radius:2px;overflow:hidden;border:1px solid var(--line);
  flex:1 1 calc((100% - 40px) / 3 - .5px);
}
.video-frame.video-featured{flex:0 0 100%;}
.video-frame iframe{width:100%;height:100%;border:0;display:block;}
.video-facade{
  position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:var(--bg-alt2);color:#fff;display:block;
}
.video-facade img{width:100%;height:100%;object-fit:cover;filter:brightness(.78);transition:filter .25s, transform .4s;}
.video-facade:hover img{filter:brightness(.95);transform:scale(1.02);}
.video-play{
  position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;
  background:var(--red);display:flex;align-items:center;justify-content:center;transition:transform .2s, background .2s;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.video-play svg{margin-left:3px;}
.video-facade:hover .video-play{background:var(--red-bright);transform:scale(1.08);}
.video-featured .video-play{width:84px;height:84px;margin:-42px 0 0 -42px;}
.video-featured .video-play svg{width:38px;height:38px;}
.video-title{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;text-align:left;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.85));
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;letter-spacing:.03em;text-transform:uppercase;
}
.video-featured .video-title{font-size:22px;padding:48px 22px 20px;}

/* ===== PROOF / TESTIMONIALS (hidden until TESTIMONIALS has entries) ===== */
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}
.quote{background:var(--bg-alt);border:1px solid var(--line);border-left:3px solid var(--red);padding:28px;}
.quote blockquote{font-size:19px;line-height:1.5;color:var(--paper);font-weight:500;}
.quote figcaption{margin-top:16px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.quote figcaption b{display:block;color:var(--red-bright);font-weight:700;}
.quote figcaption span{display:block;margin-top:2px;}

/* ===== BOOKING CTA (identical block/panel on both pages) ===== */
.book-section{
  background:linear-gradient(160deg, var(--red-deep) 0%, var(--bg) 55%);
  position:relative;
}
.book-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:start;}
.book-text h2{font-size:clamp(36px,5vw,58px);line-height:.98;}
.book-text p{color:var(--paper-dim);font-size:18px;margin-top:18px;max-width:480px;}
.book-contacts{margin-top:34px;display:flex;flex-direction:column;gap:14px;}
.book-contacts a{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:12px;
}
.book-contacts a:hover{color:var(--red-bright);}
.book-panel{
  background:rgba(12,11,10,.55);border:1px solid var(--line);border-radius:2px;padding:32px;
  backdrop-filter:blur(6px);
}
.book-panel h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;}
.epk-list{display:flex;flex-direction:column;gap:14px;margin-bottom:26px;}
.epk-list li{list-style:none;display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding-bottom:14px;font-size:15px;color:var(--paper-dim);}
.epk-list b{color:var(--paper);font-weight:500;text-align:right;}
.social-row{display:flex;gap:12px;}
.social-row a{
  width:44px;height:44px;border:1px solid var(--line);border-radius:100px;display:flex;align-items:center;justify-content:center;
  transition:all .2s;color:var(--paper-dim);
}
.social-row a svg{width:20px;height:20px;}
.social-row a:hover{border-color:var(--red-bright);color:var(--red-bright);}

/* quote-request form (collapsed by default, emails the booking inbox via Web3Forms, see js/site.js) */
.book-form{margin-top:34px;max-width:520px;border:1px solid var(--line);background:rgba(12,11,10,.45);}
.book-form summary{
  cursor:pointer;list-style:none;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;letter-spacing:.07em;text-transform:uppercase;
}
.book-form summary::-webkit-details-marker{display:none;}
.book-form summary::after{content:"+";font-family:'Space Mono',monospace;font-size:20px;color:var(--red-bright);}
.book-form[open] summary::after{content:"\2212";}
.book-form form{padding:4px 22px 24px;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.book-form .full{grid-column:1/-1;}
.book-form label{display:flex;flex-direction:column;gap:6px;font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.book-form input,.book-form select,.book-form textarea{
  font:inherit;font-family:'Barlow',sans-serif;font-size:16px;letter-spacing:0;text-transform:none;
  background:var(--bg);color:var(--paper);border:1px solid var(--line);border-radius:2px;padding:11px 12px;width:100%;
}
.book-form textarea{min-height:92px;resize:vertical;}
.book-form input:focus,.book-form select:focus,.book-form textarea:focus{outline:none;border-color:var(--red-bright);}
.book-form button{justify-self:start;}
.book-form button[disabled]{opacity:.6;cursor:progress;transform:none;}
.book-text .book-form .form-note{font-size:14px;color:var(--muted);margin-top:0;max-width:none;line-height:1.5;}
.book-text .book-form .form-note.ok{color:var(--paper);border-left:3px solid #3ba55d;padding-left:12px;}
.book-text .book-form .form-note.err{color:var(--paper-dim);border-left:3px solid var(--red-bright);padding-left:12px;}
.form-note a,.form-note .linklike{color:var(--paper);border-bottom:1px solid var(--red-bright);}
.form-note .linklike{background:none;border-top:0;border-left:0;border-right:0;font:inherit;cursor:pointer;padding:0;}
.form-note a:hover,.form-note .linklike:hover{color:var(--red-bright);}
/* spam trap: invisible to people, bots fill it in */
.book-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ===== FOOTER ===== */
footer{padding:36px 0;border-top:1px solid var(--line);}
footer .wrap{display:flex;justify-content:flex-end;text-align:right;}
.foot-meta{font-family:'Space Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:.04em;}

/* ===== reveal on scroll (only hides content when JS is running) ===== */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.js .reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  .video-facade img,.btn,.video-play{transition:none;}
}

/* ===== SHARED RESPONSIVE BREAKPOINTS ===== */
@media (max-width:900px){
  .navlinks,.nav-cta{display:none;}
  .hamburger{display:flex;}
  .video-frame{flex-basis:calc((100% - 20px) / 2 - .5px);}
  .video-frame.video-featured{flex-basis:100%;}
  .book-grid{grid-template-columns:1fr;gap:44px;}
  .section{padding:72px 0;}
}
@media (max-width:560px){
  .video-frame{flex-basis:100%;}
  .book-panel{padding:24px 20px;}
  .epk-list li{font-size:14px;}
  .book-form form{grid-template-columns:1fr;}
  .video-play{width:54px;height:54px;margin:-27px 0 0 -27px;}
  .video-featured .video-play{width:68px;height:68px;margin:-34px 0 0 -34px;}
}
@media (max-width:480px){
  .members{grid-template-columns:1fr;max-width:340px;}
  .wrap{padding:0 20px;}
  .section{padding:56px 0;}
  .book-contacts a{font-size:19px;}
}