@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");
*{box-sizing:border-box}html,body{margin:0;background:#080808;color:#f2f2f2;font-family:Arial,Helvetica,sans-serif}body{min-height:100vh}.site-header{height:105px;border-bottom:1px solid #222;display:flex;align-items:center;justify-content:flex-end;padding:0 5%;position:sticky;top:0;background:rgba(8,8,8,.97);z-index:10}.site-header nav{display:flex;gap:48px}.site-header a{color:#777;text-decoration:none;font-size:15px;font-weight:700;letter-spacing:2.3px}.site-header a:hover,.site-header a.active{color:#fff}.music-hero{max-width:1400px;margin:auto;padding:34px 5% 28px;border-bottom:1px solid #252525;display:grid;grid-template-columns:42% 58%;align-items:center}.cover-wrap{padding-right:8%}.cover-wrap img{display:block;width:min(100%,520px);margin:auto}.hero-copy{padding-left:3%}.section-label{font-size:14px;font-weight:700;letter-spacing:4px;color:#858585}.hero-copy h1{margin:36px 0 32px;font-size:clamp(48px,5.4vw,86px);line-height:.99;letter-spacing:-4px;font-weight:800}.hero-copy p{margin:0;color:#c9c9c9;font-size:21px;line-height:1.55}.track-list{max-width:1400px;margin:auto;padding:0 5%;display:grid;grid-template-columns:1fr 1fr}.track{min-height:72px;padding:0 24px;border-bottom:1px solid #252525;color:#eee;display:grid;grid-template-columns:48px 1fr 72px 48px;align-items:center;transition:background .2s}.track:nth-child(odd){border-right:1px solid #252525}.track:hover{background:#111}.track.active{background:#090909}.num{color:#686868;font-size:14px}.track-title{font-size:16px;font-weight:700;letter-spacing:1.4px;line-height:1.2}.track-duration{color:#858585;text-align:right;font-size:14px}.play-btn{width:38px;height:38px;border:1px solid #bbb;border-radius:50%;background:transparent;color:#eee;font-size:14px;cursor:pointer;justify-self:end}.play-btn:hover{border-color:#fff}.inline-player{grid-column:2/5;display:flex;align-items:center;gap:14px;padding:0 0 16px;color:#999;font-size:12px}.inline-player input{flex:1;accent-color:#eee}.volume{background:none;border:0;color:#aaa;cursor:pointer}.track.active{grid-template-rows:72px auto}.lyrics-page{max-width:900px;margin:auto;padding:72px 5% 120px}.lyrics-page h1{font-size:clamp(44px,5.5vw,76px);line-height:.95;letter-spacing:-3px;margin:36px 0 78px;text-align:center}.lyrics-text{max-width:720px;margin:auto;text-align:center;font-size:22px;line-height:1.55;color:#d2d2d2}.lyrics-text p{margin:0 0 42px}/* =========================================================
   HOME — original TF°GODHEAD hero with HTML controls
   The supplied hero.png is background artwork only.
   Navigation and controls are rendered once here — never twice.
   ========================================================= */
.home-page { background:#000; overflow:hidden; }
.home { position:relative; width:100vw; height:100vh; min-height:560px; overflow:hidden; }
.home-image { width:100%; height:100%; object-fit:cover; object-position:center center; display:block; }

.home-nav {
  position:absolute;
  top:0;
  right:0;
  z-index:10;
  display:flex;
  align-items:center;
  gap:38px;
  padding:3.5vh 4.2vw;
}
.home-nav a {
  color:#f4f4f4;
  text-decoration:none;
  font-size:14px;
  line-height:1;
  font-weight:700;
  letter-spacing:2.2px;
  white-space:nowrap;
  transition:opacity .2s ease;
}
.home-nav a:hover { opacity:.62; }

.home-enter {
  position:absolute;
  left:50%;
  bottom:7.2%;
  transform:translateX(-50%);
  z-index:10;
  min-width:145px;
  padding:16px 34px;
  border:1px solid rgba(255,255,255,.75);
  color:#fff;
  text-decoration:none;
  text-align:center;
  font-size:12px;
  font-weight:500;
  letter-spacing:4px;
  line-height:1;
  background:rgba(0,0,0,.08);
  transition:background .2s ease, border-color .2s ease;
}
.home-enter:hover { background:rgba(255,255,255,.1); border-color:#fff; }

.home-social {
  position:absolute;
  left:7.1%;
  bottom:7.9%;
  z-index:10;
  display:flex;
  align-items:center;
  gap:22px;
}
.home-social a {
  display:flex;
  width:28px;
  height:22px;
  align-items:center;
  justify-content:center;
  color:#fff;
  opacity:.95;
  transition:opacity .2s ease, transform .2s ease;
}
.home-social a:hover { opacity:.65; transform:translateY(-1px); }
.home-social svg { width:100%; height:100%; fill:currentColor; display:block; }
.youtube-link svg { width:25px; height:19px; }
.soundcloud-link svg { width:29px; height:18px; }

.home-scroll {
  position:absolute;
  right:2.4%;
  bottom:9%;
  z-index:10;
  color:rgba(255,255,255,.8);
  font-size:11px;
  font-weight:500;
  letter-spacing:4px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
}

@media (max-width:900px) {
  .home { min-height:500px; }
  .home-nav { gap:18px; padding:22px 4%; flex-wrap:wrap; justify-content:flex-end; max-width:100%; }
  .home-nav a { font-size:10px; letter-spacing:1.5px; }
  .home-enter { bottom:8%; min-width:120px; padding:14px 25px; font-size:10px; letter-spacing:3px; }
  .home-social { left:6%; bottom:8.5%; gap:15px; }
  .home-scroll { right:3%; bottom:10%; font-size:9px; letter-spacing:3px; }
}

@media (max-width:600px) {
  .home-nav { gap:12px; padding:18px 5%; }
  .home-nav a { font-size:8.5px; letter-spacing:1px; }
  .home-social { left:5%; bottom:6%; }
  .home-enter { bottom:6%; }
  .home-scroll { display:none; }
}

/* MUSIC: only the active track expands its inline player. */
.track:not(.active) .inline-player{display:none}

/* =========================================================
   LIVE / BAND / CONTACT — approved reference layout
   ========================================================= */
.live-section,
.band-section,
.contact-section{min-height:80vh;padding:130px 7vw;border-top:1px solid #ffffff2e;background:#000;color:#fff}
.live-section>label,
.band-section>label,
.contact-section>label{display:block;font-size:10px;letter-spacing:.3em;color:#888;margin-bottom:70px}
.live-section>label{font-size:14px;letter-spacing:4px}
.live-final{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:6vw}
.live-visual{overflow:hidden;border:1px solid #ffffff2e;background:#000}
.live-visual img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1);transition:transform .6s ease}
.live-visual:hover img{transform:scale(1.02)}
.live-copy{align-self:center}
.live-copy em,
.band-copy em,
.wanted em,
.contact-section>em{font-size:10px;letter-spacing:.35em;color:#888;font-style:normal}
.live-copy h2,
.band-copy h2,
.contact-section h2{margin:20px 0 0;font-family:"Archivo Black",sans-serif;font-size:clamp(55px,8vw,125px);line-height:.86;letter-spacing:-.055em}
.live-copy h2{font-size:clamp(55px,7.4vw,112px)}
.live-copy h2 span{color:#fff}
.live-note{margin-top:42px;border-left:2px solid #fff;padding-left:28px;max-width:440px}
.live-note p{font-size:clamp(18px,2vw,28px);line-height:1.3;margin:0 0 28px}
.live-note p:last-child{margin-bottom:0}

.band-section{padding-top:130px;padding-bottom:130px}
.band-visual{width:90%;margin-left:auto;margin-right:auto;margin-bottom:80px;overflow:hidden;border:1px solid #ffffff2e;background:#000}
.band-visual img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1)}
.band-copy{max-width:950px}
.band-copy h2{margin-top:38px;font-size:clamp(55px,8vw,125px)}
.band-copy h2 span{color:#fff}
.band-lead{font-size:clamp(24px,3vw,44px);line-height:1.15;letter-spacing:-.025em;margin-top:60px}
.wanted{display:grid;grid-template-columns:280px 1fr;gap:55px;align-items:center;margin-top:85px;padding:42px 0;border-top:1px solid #ffffff2e;border-bottom:1px solid #ffffff2e}
.wanted-image{width:280px;overflow:hidden;border:1px solid #ffffff2e;background:#000}
.wanted-image img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(1)}
.wanted-copy{min-width:0}
.wanted h3{margin:20px 0 18px;font-family:"Archivo Black",sans-serif;font-size:clamp(34px,5vw,78px);line-height:.9;letter-spacing:-.045em}
.wanted h3 span{color:#777}
.wanted p{font-size:12px;letter-spacing:.22em;font-weight:700}

.contact-section{min-height:75vh;padding-top:130px;padding-bottom:150px}
.contact-section>em{display:block;margin-top:98px}
.contact-section h2{margin-top:36px;font-size:clamp(64px,8.4vw,132px)}
.contact-section h2 span{color:#fff}
.contact-section .email{display:inline-block;margin-top:55px;font-size:clamp(18px,2vw,30px);border-bottom:1px solid #fff;padding-bottom:8px;color:#fff;text-decoration:none}
.contact-section .social{display:flex;gap:28px;margin-top:70px;font-size:10px;letter-spacing:.2em}
.contact-section .social a{color:#fff;text-decoration:none}
.contact-section .social a:hover{text-decoration:line-through}

@media(max-width:760px){
  .live-section,.band-section,.contact-section{padding:100px 6vw}
  .live-final{grid-template-columns:1fr;gap:45px}
  .band-visual{width:100%;margin-bottom:55px}
  .band-copy h2,.contact-section h2,.live-copy h2{font-size:42px;line-height:.9;letter-spacing:-.045em}
  .band-lead{font-size:22px;line-height:1.18}
  .live-note p{font-size:20px}
  .wanted{grid-template-columns:1fr;gap:30px}
  .wanted-image{width:min(280px,100%)}
  .contact-section>em{margin-top:65px}
}

/* CONTACT LABEL SIZE: match 01 / MUSIC, 02 / VIDEOS, 03 / LYRICS, 04 / BAND, 05 / LIVE */
.contact-section>label{font-size:14px;letter-spacing:4px}


/* LYRICS SONG TITLE — MATCH REFERENCE */
.lyrics-song-page .song-page{max-width:none;margin:0;padding:0 5% 120px;text-align:center}
.lyrics-song-page .song-meta{margin:0;padding-top:calc(50vh - 253px);text-align:center}
.lyrics-song-page .song-meta .eyebrow{display:none}
.lyrics-song-page .song-meta h1{margin:0;font-family:Arial,Helvetica,sans-serif;font-size:52px;line-height:1;letter-spacing:6.5px;font-weight:800;text-align:center;color:#f2f2f2}
.lyrics-song-page .song-meta .title-star{display:block;margin:29px auto 0;font-family:Arial,Helvetica,sans-serif;font-size:22px;line-height:22px;font-weight:400;color:#f2f2f2}
.lyrics-song-page .lyrics-scroll{position:fixed;right:2.4%;bottom:9%;z-index:10;color:rgba(255,255,255,.8);font-size:11px;font-weight:500;letter-spacing:4px;writing-mode:vertical-rl;text-orientation:mixed}
.lyrics-song-page .lyrics-text{max-width:720px;margin:19px auto 0;text-align:center;font-size:22px;line-height:1.55;color:#d2d2d2}
.lyrics-song-page .lyrics-text p{margin:0 0 42px}
@media(max-width:760px){
  .lyrics-song-page .song-meta{padding-top:calc(50vh - 132px)}
  .lyrics-song-page .song-meta h1{font-size:34px;letter-spacing:4px}
  .lyrics-song-page .song-meta .title-star{margin-top:22px;font-size:20px;line-height:20px}
  .lyrics-song-page .lyrics-text{margin-top:45px;font-size:18px}
}