/* Joy's Box V80 — clean header, refined mobile footer. */

/* The V78 mobile dark-gradient header plate read like a shadow over imagery.
   Keep the authored navigation itself, but let the scene remain completely open. */
@media (max-width:900px){
  .site-header.header-v14,
  .site-header.header-v14:not(.is-light),
  .site-header.header-v14.is-light,
  .site-header.header-v14.is-scrolled{
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .site-header.header-v14 .header-v14__inner{
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  /* Mobile footer — editorial, compact and easy to scan. */
  .footer-v17{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    padding:22px 0 max(18px,env(safe-area-inset-bottom))!important;
    margin-top:4px!important;
    border-top:1px solid rgba(255,255,255,.14)!important;
  }
  .footer-v17 nav{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:0 22px!important;
    width:100%!important;
    font-size:7px!important;
  }
  .footer-v17 nav a{
    display:flex!important;
    align-items:center!important;
    min-height:38px!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    color:rgba(255,255,255,.72)!important;
  }
  .footer-v17__right{
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    width:100%!important;
    gap:18px!important;
    padding:16px 0 14px!important;
    color:#ded9cf!important;
  }
  .footer-v17__meta{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    width:100%!important;
    padding-top:13px!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    color:#716e68!important;
  }
  .footer-v17__meta span{
    display:block!important;
    justify-self:start!important;
    font-size:6px!important;
    line-height:1.5!important;
  }
  .footer-v17__meta span:nth-child(2){
    display:block!important;
    color:#56534e!important;
    max-width:34ch!important;
  }
}

@media (max-width:430px){
  .footer-v17 nav{grid-template-columns:1fr 1fr!important;gap:0 16px!important}
  .footer-v17__right{font-size:6.5px!important}
}

/* ================================================================
   V80.3 — LIVE MOBILE HERO
   Mobile keeps the real WebGL hero alive after the entrance.
   These rules defensively neutralize the old V80.2 freeze handoff.
   ================================================================ */
@media (max-width:900px){
  .hero-v78-freeze{display:none!important}
  .hero-v11__media.v78-freeze-ready .hero-v15__webgl,
  .hero-v11__media.v78-static-ready .hero-v15__webgl{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .hero-v11__media.v78-freeze-ready > img,
  .hero-v11__media.v78-static-ready > img{
    opacity:0!important;
    visibility:hidden!important;
  }
}


/* V81.1 PROJECT ARCHIVE MEDIA */
.archive-card__media{position:absolute;z-index:0;inset:0;overflow:hidden;background:#111}
.archive-card__media>img,.archive-card__media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:opacity .45s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.archive-card__media>video{opacity:0;background:#0b0b0a}
.archive-card__shade{z-index:1!important;pointer-events:none}
.archive-card__top,.archive-card__bottom{z-index:3!important}

/* Image only */
.archive-card[data-media-type="image"] .archive-card__media>img{opacity:1}
.archive-card[data-media-type="image"] .archive-card__media>video{opacity:0;pointer-events:none}

/* Video only */
.archive-card[data-media-type="video"] .archive-card__media>img{opacity:0;pointer-events:none}
.archive-card[data-media-type="video"] .archive-card__media>video{opacity:1}

/* Image first, then switch to video after the visitor presses play. */
.archive-card[data-media-type="image-video"] .archive-card__media>img{opacity:1}
.archive-card[data-media-type="image-video"] .archive-card__media>video{opacity:0;pointer-events:none}
.archive-card[data-media-type="image-video"].has-video-started .archive-card__media>img{opacity:0;pointer-events:none}
.archive-card[data-media-type="image-video"].has-video-started .archive-card__media>video{opacity:1;pointer-events:auto}

.archive-card.video-unavailable .archive-card__media>img{opacity:1!important;pointer-events:auto!important}
.archive-card.video-unavailable .archive-card__media>video{opacity:0!important;pointer-events:none!important}

.archive-card__play{position:absolute;z-index:5;left:50%;top:50%;width:74px;height:74px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(8,8,8,.32);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:none;place-items:center;cursor:pointer;transition:transform .28s ease,background .28s ease,opacity .25s ease}
.archive-card__play span{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid #fff;margin-left:4px}
.archive-card[data-media-type="video"][data-video-mode="click"] .archive-card__play,
.archive-card[data-media-type="image-video"] .archive-card__play{display:grid}
.archive-card.is-video-playing .archive-card__play{opacity:0;pointer-events:none}
.archive-card.video-unavailable .archive-card__play{display:none!important}
.archive-card[data-media-type="video"][data-video-mode="click"] .archive-card__media:hover .archive-card__play,
.archive-card[data-media-type="image-video"] .archive-card__media:hover .archive-card__play{transform:translate(-50%,-50%) scale(1.06);background:rgba(8,8,8,.48)}
@media(max-width:767px){.archive-card__play{width:58px;height:58px}.archive-card__play span{border-top-width:7px;border-bottom-width:7px;border-left-width:10px}}