/* Homepage-only polish. Existing identity, skins, navigation and data logic remain authoritative. */
.hero-inner{padding-top:52px;padding-bottom:52px}
.hero-copy{max-width:490px}
.hero-kicker{color:#c9a84c;letter-spacing:.24em}
.hero-title{font-size:clamp(3rem,5.3vw,4.6rem);line-height:.96;margin-bottom:18px}
.hero-sub{font-size:1rem;line-height:1.7;font-weight:400;color:#c9c5bd;max-width:440px}
.hero-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;letter-spacing:.08em}
.access-start{max-width:1360px;margin:0 auto;padding:24px 28px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.access-start a{display:flex;flex-direction:column;gap:9px;padding:22px 24px;text-decoration:none;border:1px solid #302b21;border-radius:10px;background:linear-gradient(130deg,#1b1811,#111);transition:border-color .2s,background .2s;min-width:0}
.access-start a:hover{border-color:#c9a84c;background:#211d13}
.access-start-num{font:700 .62rem/1.5 'Space Mono',monospace;letter-spacing:.13em;color:#c9a84c}
.access-start strong{font-size:1rem;line-height:1.45;font-weight:600}
.access-start a>span:last-child{font-size:.78rem;line-height:1.55;color:#b1aca2}
.access-start b{float:right;color:#c9a84c;font-weight:400}
.dash-wrap{padding-top:24px;gap:24px}
.dash-wrap .panel{border-radius:12px;padding:24px;border-color:#2c2b27;background:linear-gradient(155deg,#191918,#131313)}
.dash-wrap .panel-head{flex-wrap:wrap;row-gap:12px}
.dash-wrap .panel-title{font-size:.73rem;letter-spacing:.13em;line-height:1.5;font-weight:700}
.dash-wrap .panel-view-all{font-size:.65rem;letter-spacing:.06em;color:#b9b4a8;min-height:32px;display:inline-flex;align-items:center}
.dash-wrap .panel-view-all:hover{color:#e8c96e}
.newvid-panel .sbc-title{font-size:.9rem;line-height:1.45}
.newvid-panel .sbc-body{gap:10px}
.newvid-panel .sbc-card{border-radius:8px}
.newvid-foot .sbc-btn{min-height:44px;border-radius:6px}
.dm-sub,.access-section-intro{color:#aaa69d;font-size:.85rem;line-height:1.65}
.access-section-intro{margin:-4px 0 14px}
.access-home-activity{margin-top:24px}
.access-home-activity .act-item{padding:16px 0;gap:14px}
.access-home-activity .act-item:nth-child(n+7){display:none}
.access-home-activity .act-item:nth-child(6){border-bottom:0}
.access-home-activity .act-name{font-size:.88rem}
.access-home-activity .act-copy{font-size:.85rem}
.access-home-activity .act-time{color:#a19c93;line-height:1.5;margin-top:3px}
.access-home-activity .act-empty{color:#aaa69d}
.access-home-activity .act-link{display:inline-block;padding:3px 0}
.dm-panel{margin-top:24px}
.dash-aside{gap:24px}
.dash-aside .newacc-card{border-radius:8px}
.dash-aside .status-card{border-radius:10px}
.access-start a:focus-visible,.hero-btn:focus-visible,.dash-wrap a:focus-visible,.dash-wrap button:focus-visible{outline:2px solid #e8c96e;outline-offset:4px}
#home-videos,#home-activity-panel{scroll-margin-top:110px}
@media(min-width:701px) and (max-width:1050px){.hero-copy{max-width:46%}.hero-title{font-size:3rem}.hero-sub{font-size:.9rem}.access-start a{padding:18px}.access-start strong{font-size:.9rem}}
@media(max-width:700px){
 .hero{min-height:440px;align-items:flex-end}.hero-inner{padding:110px 22px 26px}.hero-copy{max-width:100%}.hero-title{font-size:clamp(2.8rem,12vw,4rem);max-width:330px}.hero-kicker{font-size:.62rem}.hero-sub{font-size:.9rem;line-height:1.6;max-width:390px;margin-bottom:20px}.hero-scrim{background:linear-gradient(0deg,#0a0a0a 0%,rgba(10,10,10,.94) 36%,rgba(10,10,10,.46) 76%,rgba(10,10,10,.08))}.hero-bg img{object-position:80% 8%}.hero-features{display:none}.hero-btn{font-size:.65rem;padding:12px 16px}.hero-ctas{gap:10px}
 .access-start{padding:18px 16px 0;gap:0;grid-template-columns:1fr;border:0}.access-start a{padding:16px 18px;border-radius:0;border-bottom:0;gap:5px}.access-start a:first-child{border-radius:10px 10px 0 0}.access-start a:last-child{border-radius:0 0 10px 10px;border-bottom:1px solid #302b21}.access-start strong{font-size:.95rem}
 .dash-wrap{padding:18px 16px 10px;gap:20px}.dash-wrap .panel{padding:18px}.dash-wrap .panel-title{font-size:.69rem;letter-spacing:.08em}.dash-wrap .panel-view-all{font-size:.6rem}.newvid-panel .sbc-grid{gap:10px}.newvid-panel .sbc-body{padding:12px 9px}.newvid-panel .sbc-title{font-size:.84rem}.access-home-activity,.dm-panel{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero .fade-in{animation:none}.access-start a,.hero-btn{transition:none}}

/* Preserve the newer build's narrow-screen safety and reserve feed space. */
#home-activity{min-height:280px}
@media(max-width:320px){
 .dash-wrap{padding-left:8px;padding-right:8px}
 .dash-wrap .panel{padding-left:12px;padding-right:12px}
 .hero-inner{padding-left:16px;padding-right:16px}
 .hero-title{font-size:clamp(2rem,12vw,2.8rem);overflow-wrap:anywhere}
 .hero-btn{white-space:normal;overflow-wrap:anywhere}
 .newvid-panel .sbc-grid,.dm-grid{grid-template-columns:1fr}
}

/* Landscape carousel occupies the actual gap between More and account actions. */
@media (orientation:landscape) and (min-width:761px) and (max-width:1040px){
  .access-global-nav-inner{min-height:72px;padding-bottom:0;column-gap:10px}
  .access-global-spacer{display:none}
  .access-home-carousel-slot{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    flex:1 1 160px;
    min-width:44px;
    max-width:180px;
    width:auto!important;
    height:48px!important;
    container-type:inline-size;
  }
  .access-home-carousel-live .hcl-stage{width:28%!important}
  .access-home-carousel-live .hcl-ui{
    inset:0 0 0 28%!important;padding:4px!important;
    grid-template-columns:minmax(0,1fr) 28px!important;
    grid-template-rows:1fr!important;column-gap:4px!important;
  }
  .access-home-carousel-live .hcl-title,
  .access-home-carousel-live .hcl-live{display:none!important}
  .access-home-carousel-live .hcl-play{
    grid-column:2!important;grid-row:1!important;
    width:28px!important;height:28px!important;
  }
  .access-home-carousel-live .hcl-play svg{width:12px!important;height:12px!important}
  .access-home-carousel-live .hcl-now{grid-column:1!important;grid-row:1!important;row-gap:3px!important}
  .access-home-carousel-live .hcl-status{font-size:6px!important;line-height:1.1!important}
  .access-home-carousel-live .hcl-song{font-size:8px!important;line-height:1.15!important}
  .access-home-carousel-live .hcl-artist{font-size:7px!important;line-height:1.1!important}
  @container (max-width:100px){
    .access-home-carousel-live .hcl-stage,
    .access-home-carousel-live .hcl-now{display:none!important}
    .access-home-carousel-live .hcl-ui{inset:0!important;grid-template-columns:1fr!important;justify-items:center!important}
    .access-home-carousel-live .hcl-play{grid-column:1!important;width:40px!important;height:40px!important}
  }
}

/* Mobile portrait: wider framing like the original, retaining studio effects. */
@media(max-width:700px){
  .hero-bg{inset:0;width:100%;overflow:hidden}
  .hero-bg picture{display:block;width:100%;height:100%}
  .hero-bg img{
    position:absolute;
    top:0;right:0;
    width:76%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:100% 0%!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 22%);
  }
}

/* LANDSCAPE HERO BOTTOM SPACING
   Bring the section boundary closer to the buttons. The artwork keeps
   its existing bottom anchor, scale, and shoulder-fade treatment. */
@media (orientation:landscape) and (min-width:701px) and (max-width:1040px){
  .hero{min-height:0}
  .hero-inner{padding-bottom:10px}
}

/* PROTECTED PORTRAIT BACKGROUND FADE
   The image is the unmodified pre-fade asset. The overlay is transparent
   through the hat/person region and below the upper background band.
   Bind the overlay to the rendered artwork, not the whole hero section. */
@media (orientation:landscape) and (min-width:701px) and (max-width:1040px){
  .hero-bg picture{
    position:absolute;
    right:0;bottom:0;
    display:block;
    width:100%;
    aspect-ratio:1489 / 1056;
  }
  .hero-bg picture::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,#0a0a0a 0%,#0a0a0a 11%,rgba(10,10,10,.88) 14%,rgba(10,10,10,.40) 20%,transparent 27%);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 16%,transparent 20%,transparent 56%,#000 60%,#000 100%);
    mask-image:linear-gradient(90deg,#000 0%,#000 16%,transparent 20%,transparent 56%,#000 60%,#000 100%);
  }
}

/* LANDSCAPE FOUR-FEATURE ROW
   Let the feature strip use the space beside the narrower paragraph
   instead of wrapping Discover beneath Upload. */
@media (orientation:landscape) and (min-width:701px) and (max-width:1040px){
  .hero-features{
    flex-wrap:nowrap;
    width:max-content;
    max-width:calc(100vw - 48px);
    gap:12px;
  }
  .hero-feature{flex:0 0 auto}
}

/* =========================================================
   DESKTOP HERO + MOBILE LANDSCAPE NAV REPAIR — 2026-09-09
   Desktop now uses the same protected high-resolution hero artwork that was
   already approved for landscape. The original image bytes are untouched.
   Landscape navigation remains full-width but its labels are forced into
   one centered line so Network / More / account tabs no longer stack.
   ========================================================= */

/* Desktop: route and present the high-resolution landscape hero without
   cropping the hat/person or reintroducing the legacy dark desktop branch. */
@media (min-width:1041px){
  .hero{min-height:0}
  .hero-inner{padding-bottom:10px}
  .hero-title{overflow-wrap:anywhere}
  .hero-btn{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center}

  .hero-bg{
    right:max(0px,calc((100% - 1360px) / 2));
    width:58%!important;
    max-width:788.8px;
    container-type:size;
    overflow:visible!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .hero-bg picture{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
  }
  .hero-bg img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:100% 100%!important;
  }
  .hero-bg::after{content:none!important}

  @supports (width:1cqh){
    .hero-bg picture{
      inset:auto 0 0 auto;
      width:min(100cqw,141.00378cqh);
      height:auto;
      aspect-ratio:1489 / 1056;
      -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 7%,rgba(0,0,0,.42) 14%,rgba(0,0,0,.78) 23%,#000 34%);
      mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 7%,rgba(0,0,0,.42) 14%,rgba(0,0,0,.78) 23%,#000 34%);
    }
    .hero-bg picture::after{
      content:"";
      position:absolute;
      inset:0;
      z-index:2;
      pointer-events:none;
      background:linear-gradient(180deg,#0a0a0a 0%,#0a0a0a 11%,rgba(10,10,10,.88) 14%,rgba(10,10,10,.40) 20%,transparent 27%);
      -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 10%,transparent 14%,transparent 58%,#000 62%,#000 100%);
      mask-image:linear-gradient(90deg,#000 0%,#000 10%,transparent 14%,transparent 58%,#000 62%,#000 100%);
    }
  }

  .hero-scrim{
    max-width:1360px;
    margin-left:auto;
    margin-right:auto;
    background:
      linear-gradient(90deg,var(--black) 0%,var(--black) 38%,rgba(10,10,10,.90) 43%,rgba(10,10,10,.62) 49%,rgba(10,10,10,.28) 56%,rgba(10,10,10,.08) 63%,rgba(10,10,10,0) 70%),
      linear-gradient(180deg,rgba(10,10,10,.32) 0%,rgba(10,10,10,0) 14%),
      linear-gradient(0deg,rgba(10,10,10,.32) 0%,rgba(10,10,10,0) 14%)!important;
  }
}

/* iPhone/mobile landscape: keep the desktop-style header, but make every
   navigation/account control a single, equal-height row. This is homepage-
   scoped through access-home-polish.css, so portrait and other pages stay
   untouched. */
@media (orientation:landscape) and (min-width:761px) and (max-width:1040px){
  .access-global-nav-inner{
    width:calc(100% - 16px);
    min-height:64px;
    gap:6px;
    column-gap:6px;
  }
  .access-global-brand{font-size:23px}
  .access-global-links{
    margin-left:0;
    gap:0;
    min-width:0;
    flex:0 1 auto;
    align-self:stretch;
  }
  .access-global-link,
  .access-global-more{
    height:44px;
    min-height:44px;
    padding:0 6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:8px;
    line-height:1;
    letter-spacing:.05em;
    white-space:nowrap;
    flex:0 0 auto;
  }
  .access-global-link.active:after{left:6px;right:6px;bottom:4px}
  .access-global-member{
    align-items:center;
    gap:4px;
    flex:0 0 auto;
    white-space:nowrap;
  }
  .access-global-member-cta,
  .access-global-signout-desktop{
    box-sizing:border-box;
    height:44px;
    min-height:44px;
    padding:0 7px!important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:7.5px!important;
    line-height:1!important;
    letter-spacing:.04em;
    white-space:nowrap;
  }
  .access-home-carousel-slot{
    flex:1 1 120px;
    min-width:72px;
    max-width:160px;
    height:44px!important;
  }
}