
:root{--bg:#050607;--text:#f4f4f1;--line:#5b6165;--accent:#35abe2}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.landing-page{min-height:100vh;display:flex;align-items:center;justify-content:center;overflow-x:hidden}.landing-shell{width:min(1120px,86vw);display:grid;grid-template-columns:minmax(260px,440px) 1px minmax(320px,500px);gap:64px;align-items:center}.brand-panel{display:flex;align-items:center;justify-content:flex-start}.landing-logo{width:min(100%,410px);height:auto;display:block}.landing-divider{width:1px;height:465px;background:rgba(255,255,255,.36)}.landing-links{display:flex;flex-direction:column;max-width:430px}.landing-link{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"kicker arrow" "title arrow";column-gap:22px;align-items:center;padding:10px 0}.landing-link+.landing-link{margin-top:16px}.landing-kicker{grid-area:kicker;color:var(--accent);font-size:14px;line-height:1;font-weight:900;letter-spacing:.08em;margin-bottom:10px}.landing-title{grid-area:title;color:var(--text);font-size:32px;line-height:1.05;font-weight:900;letter-spacing:-.025em;text-transform:uppercase}.landing-arrow{grid-area:arrow;align-self:end;color:var(--accent);font-size:42px;line-height:.8;font-weight:300;transition:transform .18s ease}.landing-link:hover .landing-arrow{transform:translateX(6px)}.landing-rule{width:100%;height:1px;background:rgba(255,255,255,.34);margin:28px 0 25px}.maps-link{margin-top:0!important}@media(max-width:820px){.landing-page{align-items:flex-start}.landing-shell{width:min(88vw,620px);grid-template-columns:1fr;gap:0;padding:76px 0 56px}.landing-logo{width:min(300px,80vw)}.landing-divider{width:90px;height:1px;margin:32px 0 28px}.landing-links{max-width:none}.landing-title{font-size:27px}.landing-kicker{font-size:12px}.landing-arrow{font-size:36px}}@media(max-width:460px){.landing-shell{width:86vw;padding-top:58px}.landing-logo{width:240px}.landing-title{font-size:23px}.landing-link{column-gap:14px}.landing-rule{margin:24px 0 21px}}

/* V9 approved compact landing scale */
.landing-logo{width:min(100%,230px)}
.landing-kicker{font-size:10px}
.landing-title{font-size:24px}

/* Grunge stays around the page edges; central UI remains clean. */
.grunge{position:fixed;pointer-events:none;z-index:0;background-repeat:no-repeat;background-size:contain;filter:grayscale(1)}
.landing-shell{position:relative;z-index:2}
.grunge-splatter{width:245px;height:245px;right:-25px;top:-20px;background-image:url("../assets/grunge-splatter-v9.png");opacity:.38}
.grunge-tag{width:250px;height:210px;left:-55px;bottom:75px;background-image:url("../assets/grunge-tag-v9.png");opacity:.28}
.grunge-anarchy{width:190px;height:190px;right:-20px;bottom:15px;background-image:url("../assets/grunge-anarchy-v9.png");opacity:.30}
.grunge-brush{width:330px;height:125px;right:8%;bottom:-55px;background-image:url("../assets/grunge-brush-v9.png");opacity:.28}
.grunge-cracks-left{width:230px;height:230px;left:-70px;top:25%;background-image:url("../assets/grunge-cracks-v9.png");opacity:.20}
.grunge-cracks-right{width:220px;height:220px;right:-70px;top:42%;background-image:url("../assets/grunge-cracks-v9.png");transform:rotate(180deg);opacity:.18}
@media(max-width:820px){
 .landing-logo{width:min(205px,64vw)}
 .landing-kicker{font-size:10px}
 .landing-title{font-size:24px}
 .grunge-tag{width:170px;left:-65px;bottom:20px}
 .grunge-anarchy{width:135px;right:-35px}
 .grunge-splatter{width:165px;height:165px}
 .grunge-brush{width:230px}
}


/* V10 — landing alignment refinement */
.landing-shell{
  gap:34px;
}
.brand-panel{
  justify-content:flex-end;
}
@media(max-width:820px){
  .brand-panel{
    justify-content:flex-start;
  }
}


/* V11 — force pure black canvas so transparent grunge art blends perfectly */
html,
body,
.landing-page{
  background:#000 !important;
}


/* V12 — Rubik Dirt is intentionally limited to the large landing titles. */
.landing-title{
  display:block;
  font-family:"Rubik Dirt", Arial, Helvetica, sans-serif;
  font-weight:400;
  letter-spacing:0;
}

/* V12 — arrow now sits beside the small blue kicker and stays animated. */
.landing-link{
  display:block;
}
.landing-kicker{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.landing-arrow{
  display:inline-block;
  color:var(--accent);
  font-size:10px;
  line-height:1;
  font-weight:900;
  transition:transform .18s ease;
}
.landing-link:hover .landing-arrow{
  transform:translateX(4px);
}
@media(max-width:820px){
  .landing-arrow{
    font-size:10px;
  }
}


/* V13 — landing typography refinements */
.landing-title{
  font-size:35px !important;
  line-height:1.02;
}
.landing-kicker{
  margin-bottom:0 !important;
}

#newestVideoTitle{
  white-space:pre-line;
}

/* V14 mobile landing refinement */
@media(max-width:820px){
  .landing-logo{width:102px !important;}
  .landing-divider{display:none !important;}
  .landing-shell{gap:14px !important;}
  .brand-panel{padding-bottom:0 !important;margin-bottom:0 !important;}
}


/* V16 — mobile viewport: eliminate unnecessary vertical page scroll */
@media(max-width:820px){
  html,
  body{
    min-height:100%;
    height:100%;
    overflow-x:hidden;
  }

  body.landing-page{
    min-height:100dvh !important;
    height:100dvh !important;
    overflow-y:hidden !important;
  }

  .landing-page .landing-wrap{
    min-height:100dvh !important;
    height:100dvh !important;
    box-sizing:border-box;
    overflow:hidden;
  }

  .landing-page .landing-shell{
    min-height:0 !important;
    max-height:100%;
    box-sizing:border-box;
  }
}

/* Safari fallback for browsers without dvh */
@supports not (height:100dvh){
  @media(max-width:820px){
    body.landing-page,
    .landing-page .landing-wrap{
      min-height:-webkit-fill-available !important;
      height:-webkit-fill-available !important;
    }
  }
}
