@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}
@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}



/* =========================================================
   WATCH / CULK OVERLAP TEST 12
   One vertical column. Each image is 10% larger than TEST 11.
   01 stays fixed; 02, 03, 04, 05, 06 successively slide upward
   over the previous tile when scrolling.
   ========================================================= */
html:has(body.watch-page),body.watch-page{height:100%;overflow:hidden;background:linear-gradient(rgba(0,0,0,.70),rgba(0,0,0,.70)),url('images/backgrounds/videos-industrial-70-30.jpg') center/cover fixed no-repeat}
.watch-page .site-header{position:fixed;top:0;left:0;right:0;height:105px;z-index:50}
.watch-page .site-header .brand{position:absolute;left:5%;top:16px;width:76px;height:76px;display:block}.watch-page .site-header .brand img{display:block;width:100%;height:100%;object-fit:contain}
.watch-page .watch-main{position:fixed;inset:105px 0 0;display:grid;grid-template-columns:38% 62%;overflow:hidden}
.watch-page .watch-intro{position:relative;z-index:10;padding:34px 0 0 5vw}
.watch-page .watch-kicker{font-size:14px;font-weight:700;letter-spacing:4px;color:#858585;margin-bottom:30px}.watch-page .watch-intro h1{margin:0;font-size:clamp(64px,7.2vw,112px);line-height:.88;letter-spacing:-6px;font-weight:800;color:#f2f2f2}.watch-page .watch-intro p{margin:34px 0 0;color:#777;font-size:14px;font-weight:700;letter-spacing:4px}
.watch-page .watch-stage{display:flex;align-items:center;justify-content:flex-start;overflow:hidden;padding:0 5vw 0 0}
.watch-page .watch-viewport{position:relative;width:min(874px,100%);height:610px;overflow:hidden;background:transparent}
.watch-page .watch-row{position:absolute;left:0;width:100%;height:230px;display:block;will-change:transform;z-index:2}
.watch-page .watch-row-1{z-index:2}.watch-page .watch-row-2{z-index:3}.watch-page .watch-row-3{z-index:4}.watch-page .watch-row-4{z-index:5}.watch-page .watch-row-5{z-index:6}.watch-page .watch-row-6{z-index:7}
.watch-page .watch-card{position:relative;width:calc((100% - 18px) * .95);height:auto;aspect-ratio:16 / 9;margin:10px auto 0;overflow:visible;background:transparent}
.watch-page .watch-card a{display:block;width:100%;height:100%;position:relative;color:#fff;text-decoration:none;pointer-events:auto;overflow:hidden;background:#111}
.watch-page .watch-card img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.94;transition:filter .35s ease,opacity .35s ease}.watch-page .watch-card:hover img{filter:grayscale(.15);opacity:1}
.watch-page .watch-play{position:absolute;left:50%;top:50%;width:42px;height:42px;border:1px solid rgba(255,255,255,.72);border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);font-size:12px;padding-left:2px;background:rgba(0,0,0,.18)}
.watch-page .watch-title{position:absolute;left:16px;bottom:14px;z-index:3;display:block;margin:0;font-size:10px;line-height:1.2;letter-spacing:1.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 32px);text-shadow:0 1px 8px rgba(0,0,0,.9)}
.watch-page .watch-scroll{position:fixed;right:2.4%;bottom:9%;z-index:60;color:rgba(255,255,255,.8);font-size:11px;font-weight:500;letter-spacing:4px;writing-mode:vertical-rl;text-orientation:mixed;pointer-events:none}
@media(max-width:900px){.watch-page .watch-main{inset:82px 0 0;display:block}.watch-page .watch-intro{height:35vh;padding:30px 5vw 0}.watch-page .watch-stage{height:65vh;padding:0 5vw 30px}.watch-page .watch-viewport{width:100%;height:min(610px,100%)}.watch-page .watch-row{height:230px}.watch-page .watch-card{height:auto;aspect-ratio:16 / 9;width:calc((100% - 18px) * .95);margin:10px auto 0}.watch-page .watch-card a{height:100%}}
@media(max-width:560px){.watch-page .site-header{height:82px}.watch-page .site-header .brand{left:5%;top:10px;width:62px;height:62px}.watch-page .watch-main{inset:82px 0 0}.watch-page .watch-intro{height:34vh}.watch-page .watch-stage{height:66vh}.watch-page .watch-row{height:178px}.watch-page .watch-card{width:calc((100% - 28px) * .95);height:auto;aspect-ratio:16 / 9;margin:10px auto 0}.watch-page .watch-card a{height:100%}.watch-page .watch-scroll{display:none}}


/* =========================================================
   WATCH / TILE APPEARANCE TEST 16
   Match the supplied 3x2 reference tile design.
   Overlap / scroll JS remains unchanged.
   ========================================================= */
.watch-page .watch-card{
  width:calc((100% - 18px) * .95);
  height:auto;
  aspect-ratio:auto;
  margin:10px auto 0;
  overflow:hidden;
  background:#080808;
  border:1px solid #303030;
}
.watch-page .watch-card a{
  display:block;
  width:100%;
  height:auto;
  position:relative;
  color:#fff;
  text-decoration:none;
  overflow:hidden;
  background:#080808;
}
.watch-page .watch-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  filter:none;
  opacity:1;
  transition:none;
}
.watch-page .watch-card:hover img{filter:none;opacity:1}
.watch-page .watch-title{
  position:relative;
  left:auto;
  bottom:auto;
  z-index:3;
  display:flex;
  align-items:center;
  min-height:62px;
  padding:0 22px;
  margin:0;
  box-sizing:border-box;
  font-size:14px;
  line-height:1.35;
  letter-spacing:2.5px;
  font-weight:500;
  color:#aaa;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  max-width:none;
  text-shadow:none;
  background:#0a0a0a;
}
.watch-page .watch-play{
  width:74px;
  height:74px;
  border:1px solid rgba(255,255,255,.78);
  font-size:18px;
  padding-left:4px;
  background:rgba(0,0,0,.20);
}
@media(max-width:900px){
  .watch-page .watch-card{width:calc((100% - 18px) * .95);height:auto;aspect-ratio:auto}
  .watch-page .watch-card a{height:auto}
}
@media(max-width:560px){
  .watch-page .watch-card{width:calc((100% - 28px) * .95);height:auto;aspect-ratio:auto}
  .watch-page .watch-card a{height:auto}
  .watch-page .watch-title{min-height:54px;padding:0 14px;font-size:11px;letter-spacing:1.8px}
  .watch-page .watch-play{width:58px;height:58px;font-size:14px}
}

/* SEQUENTIAL OVERLAP-TRIGGERED COLOR REVEAL */
.watch-page .watch-card img { transition: none !important; }
.watch-page .watch-card img.overlap-color { filter: grayscale(0) !important; opacity: 1 !important; }

/* TEST 20 — REAL B/W SOURCE + HARD COLOR REVEAL ON COMPLETED OVERLAP */
.watch-page .watch-card a{position:relative;}
.watch-page .watch-card img.thumb-bw{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
}
.watch-page .watch-card img.thumb-color{
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  display:block;
  opacity:0;
  pointer-events:none;
}
.watch-page .watch-card.overlap-color img.thumb-color{opacity:1;}
.watch-page .watch-card .watch-play,
.watch-page .watch-card .watch-title{z-index:3;}