
*{box-sizing:border-box}html,body{margin:0;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}body{overflow-x:hidden}
button{font:inherit}header{position:relative;padding:54px 24px 22px;text-align:center;background:#000}
.logo{width:min(520px,82vw);height:auto;display:block;margin:0 auto 24px}
nav{display:flex;justify-content:center;align-items:center;gap:34px;font-size:12px;font-weight:700;letter-spacing:.18em}
nav a{color:#fff;text-decoration:none;opacity:.52}nav a:hover,nav a.active{opacity:1}
.langWrap{position:absolute;right:clamp(18px,4vw,64px);top:30px}
.langBtn{border:0;background:none;color:#aaa;font-size:11px;letter-spacing:.14em;cursor:pointer;padding:8px}
.langMenu{display:none;position:absolute;right:0;top:34px;min-width:120px;background:#090909;border:1px solid #242424;z-index:50;text-align:left}
.langMenu.open{display:block}.langMenu button{display:block;width:100%;border:0;background:none;color:#aaa;text-align:left;padding:11px 14px;cursor:pointer;font-size:11px}
.langMenu button:hover{color:#fff;background:#111}
.hero{width:min(1500px,calc(100% - 48px));margin:auto;padding:74px 0 46px;border-bottom:1px solid #181818}
.eyebrow{font-size:10px;letter-spacing:.30em;color:#777;margin-bottom:17px}
h1{font-size:clamp(58px,9vw,150px);line-height:.82;letter-spacing:-.07em;margin:0;font-weight:900}
.lead{max-width:760px;margin:26px 0 0;color:#888;font-size:14px;line-height:1.7}
.wall{width:min(1500px,calc(100% - 48px));margin:0 auto;padding:48px 0 110px;display:grid;grid-template-columns:repeat(12,1fr);gap:18px;perspective:1500px}
.tv{position:relative;min-height:230px;padding:10px;background:linear-gradient(145deg,#5a391f,#12100e 18%,#050505 58%,#392416);
border:1px solid rgba(216,147,77,.56);border-radius:11px;box-shadow:inset 0 0 0 2px #050505,inset 0 0 0 3px rgba(255,192,112,.10),0 18px 36px rgba(0,0,0,.65);cursor:pointer;overflow:hidden}
.tv::after{content:"";position:absolute;right:5px;bottom:5px;width:6px;height:6px;border-radius:50%;background:#9b491d;box-shadow:0 0 8px #c66024}
.screen{position:absolute;inset:10px;overflow:hidden;border-radius:5px;background:#000;box-shadow:inset 0 0 18px #000}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.08),transparent 25%,transparent 76%,rgba(255,255,255,.025))}
.screen img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.88) contrast(1.06) saturate(.95);transition:.25s}
.tv:hover img{transform:scale(1.018);filter:brightness(1.06) contrast(1.05)}
.tv:nth-child(6n+1){grid-column:span 7;min-height:410px}.tv:nth-child(6n+2){grid-column:span 5;min-height:410px}
.tv:nth-child(6n+3),.tv:nth-child(6n+4),.tv:nth-child(6n+5){grid-column:span 4}.tv:nth-child(6n+6){grid-column:span 12;min-height:500px}
.player{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:100;display:none;align-items:center;justify-content:center;padding:5vw}
.player.open{display:flex}.player iframe{width:min(1280px,100%);aspect-ratio:16/9;border:0}.close{position:absolute;right:28px;top:22px;border:0;background:none;color:#fff;font-size:30px;cursor:pointer}
.about{width:min(1500px,calc(100% - 48px));margin:auto;padding:48px 0 120px;display:grid;grid-template-columns:1fr 1fr;gap:9vw}
.about h2{font-size:clamp(32px,4vw,68px);line-height:.95;letter-spacing:-.05em;margin:0}.aboutText{border-top:1px solid #222;padding-top:24px}
.about p{color:#999;line-height:1.9;margin:0 0 24px;font-size:14px}
footer{padding:70px 24px;text-align:center;color:#555;font-size:10px;letter-spacing:.18em}
@media(max-width:760px){header{padding-top:44px}.logo{width:min(390px,86vw);margin-bottom:20px}nav{gap:16px;font-size:10px}.langWrap{right:8px;top:12px}.hero,.wall,.about{width:calc(100% - 28px)}.hero{padding:50px 0 34px}.wall{grid-template-columns:repeat(2,1fr);gap:10px;padding-top:22px}.tv:nth-child(n){grid-column:span 1!important;min-height:0!important;aspect-ratio:16/10}.tv:nth-child(6n+1),.tv:nth-child(6n+6){grid-column:1/-1!important;aspect-ratio:16/9}.about{grid-template-columns:1fr;gap:44px}}

/* v27 ABOUT FEATURE FILM */
.aboutFilm{
  width:min(1500px,calc(100% - 48px));
  margin:0 auto;
  padding:48px 0 28px;
}
.aboutFilmLabel{
  margin-bottom:14px;
  color:#666;
  font-size:10px;
  letter-spacing:.28em;
}
.aboutTv{
  width:100%;
  min-height:0!important;
  aspect-ratio:16/8.6;
  padding:12px;
  border-radius:14px;
  background:linear-gradient(145deg,#624023,#15110e 16%,#050505 58%,#422918);
  border:1px solid rgba(225,157,84,.64);
  box-shadow:inset 0 0 0 2px #050505,inset 0 0 0 4px rgba(255,196,116,.10),0 26px 58px rgba(0,0,0,.72);
}
.aboutTv .screen{inset:12px;border-radius:7px}
.aboutTv::after{width:8px;height:8px;right:7px;bottom:7px}
@media(max-width:760px){
  .aboutFilm{width:calc(100% - 28px);padding:26px 0 12px}
  .aboutTv{aspect-ratio:16/9;padding:8px}
  .aboutTv .screen{inset:8px}
}

/* v28 — image fidelity + restored HOME featured screen */
.screen{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}
.screen img{
  object-fit:contain!important;
  object-position:center!important;
}
.homeFeature{
  width:min(1500px,calc(100% - 48px));
  margin:0 auto;
  padding:48px 0 18px;
}
.homeFeatureLabel{
  margin-bottom:14px;
  color:#666;
  font-size:10px;
  letter-spacing:.28em;
}
.mainScreen{
  width:100%;
  aspect-ratio:16/9;
  background:#050505;
  border:1px solid #282828;
  box-shadow:0 30px 80px rgba(0,0,0,.75);
}
.mainScreen iframe{display:block;width:100%;height:100%;border:0}
.tv .screen iframe.hoverPreview{
  position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;background:#000;
}
@media(max-width:760px){
 .homeFeature{width:calc(100% - 28px);padding:26px 0 10px}
}

/* v29 SHOWS featured autoplay */
.showsFeature{padding-top:48px}
.soundHint{margin:12px 0 0;color:#555;font-size:9px;letter-spacing:.18em;text-align:right}
@media(max-width:760px){.soundHint{text-align:left;line-height:1.5}}

/* v30 VISUAL featured screen uses the same HOME/SHOWS mainScreen system */
.visualFeature{padding-top:48px}

/* v31 — every page's top featured video autoplays muted */
.aboutAutoPlayer{cursor:default}
.aboutAutoPlayer .screen iframe{width:100%;height:100%;border:0;display:block}

/* v32 ABOUT — clean editorial rebuild */
.aboutPage{background:#000}
.aboutIntro{
  width:min(1500px,calc(100% - 48px));
  margin:0 auto;
  padding:74px 0 38px;
}
.aboutHeroFilm{
  width:min(1500px,calc(100% - 48px));
  margin:0 auto;
  padding:0 0 76px;
}
.aboutHeroFrame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#050505;
  border:1px solid #242424;
  box-shadow:0 30px 80px rgba(0,0,0,.75);
  overflow:hidden;
}
.aboutHeroFrame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.aboutEditorial{
  width:min(1500px,calc(100% - 48px));
  margin:0 auto;
  padding:68px 0 130px;
  border-top:1px solid #1b1b1b;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  gap:10vw;
  align-items:start;
}
.aboutStatement{
  font-size:clamp(52px,7vw,116px);
  line-height:.86;
  letter-spacing:-.065em;
  font-weight:900;
}
.aboutCopy{padding-top:5px}
.aboutCopy p{
  margin:0 0 26px;
  max-width:680px;
  color:#929292;
  font-size:14px;
  line-height:1.9;
}
@media(max-width:760px){
 .aboutIntro,.aboutHeroFilm,.aboutEditorial{width:calc(100% - 28px)}
 .aboutIntro{padding:50px 0 28px}
 .aboutHeroFilm{padding-bottom:48px}
 .aboutEditorial{grid-template-columns:1fr;gap:44px;padding:48px 0 90px}
 .aboutStatement{font-size:clamp(48px,16vw,76px)}
}

/* V34 lower TVs feed the top player; old popup disabled */
.player{display:none!important}

/* V35 clean channel-player interaction */
.tv[data-id]{cursor:pointer}
.tv .screen iframe.hoverPreview{
  position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4;pointer-events:none;
}

/* V36 desktop + mobile tap behavior */
.tv[data-id]{
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(255,255,255,.08);
  user-select:none;
  -webkit-user-select:none;
}
.tv[data-id] img{
  pointer-events:none;
  -webkit-user-drag:none;
}
@media(hover:none){
  .tv .hoverPreview{display:none!important}
}
\n\n/* V37 — mobile thumbnail visibility hardening */
@media(max-width:760px){
  .tv .screen{display:block!important;background:#050505!important;}
  .tv .screen img{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
  }
  .tv .screen::after{z-index:2;}
}
