/* futarijo — mobile nav + motion */
@media (max-width:768px){
  .br-drawer{
    display:flex!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(12%);
    background:
      linear-gradient(160deg,rgba(110,21,32,.28) 0%,transparent 42%),
      rgba(8,8,8,.985);
    padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 1.25rem);
    padding-bottom:calc(var(--pad) + env(safe-area-inset-bottom,0px));
    padding-left:max(var(--pad),env(safe-area-inset-left,0px));
    padding-right:max(var(--pad),env(safe-area-inset-right,0px));
    transition:opacity .42s var(--ease),visibility .42s,transform .48s var(--ease);
  }
  .br-drawer[hidden]{display:flex!important}
  .br-drawer.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .br-drawer a{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .5s var(--ease),transform .5s var(--ease),letter-spacing .35s,color .25s;
  }
  .br-drawer.is-open a{opacity:1;transform:none}
  .br-drawer.is-open a:nth-child(1){transition-delay:.08s}
  .br-drawer.is-open a:nth-child(2){transition-delay:.14s}
  .br-drawer.is-open a:nth-child(3){transition-delay:.2s}
  .br-drawer.is-open a:nth-child(4){transition-delay:.26s}
  .br-drawer.is-open a:nth-child(5){transition-delay:.32s}
  .br-drawer.is-open a:nth-child(6){transition-delay:.38s}
  .br-drawer a[aria-current="page"],
  .br-drawer a.is-on{color:var(--br-gold)}
  .br-drawer__cta{
    color:var(--br-ink)!important;
    background:var(--br-gold);
    border-bottom:0;
    margin-top:.85rem;
    justify-content:center;
    padding:.9rem 1rem;
    letter-spacing:.18em;
    font-family:var(--font-ui);
    font-size:.85rem;
    font-weight:700;
    text-transform:uppercase;
  }
  .br-drawer__meta{
    margin-top:1.6rem;
    opacity:0;
    transform:translateY(12px);
    transition:opacity .45s var(--ease) .42s,transform .45s var(--ease) .42s;
  }
  .br-drawer.is-open .br-drawer__meta{
    opacity:.7;
    transform:none;
  }

  .br-nav{
    padding-top:calc(.75rem + env(safe-area-inset-top,0px));
    z-index:90;
  }
  .br-burger{
    border:1px solid var(--br-line-gold);
    border-radius:0;
    background:rgba(8,8,8,.35);
  }
  body.is-nav-open .br-burger{
    border-color:var(--br-gold);
  }

  .js [data-br] img,
  .js [data-br-clip] img{
    transform:scale(1.08);
    filter:saturate(.88);
    transition:transform 1.2s var(--ease),filter .9s ease;
  }
  .js [data-br].in img,
  .js [data-br-clip].in img{
    transform:scale(1);
    filter:none;
  }

  .br-hero__center .br-hero__brand,
  .br-hero__center h1,
  .br-hero__center .br-hero__lead,
  .br-hero__center .br-hero__actions{
    animation:brRise .9s var(--ease) both;
  }
  .br-hero__center h1{animation-delay:.1s}
  .br-hero__center .br-hero__lead{animation-delay:.18s}
  .br-hero__center .br-hero__actions{animation-delay:.28s}
  .br-hero__copy h2,
  .br-hero__copy p,
  .br-hero__copy .br-btn{
    animation:brRise .85s var(--ease) both;
  }
  .br-hero__copy p{animation-delay:.12s}
  .br-hero__copy .br-btn{animation-delay:.22s}

  .br-btn:active,.br-link:active{transform:scale(.97)}
  .br-hero .br-btn,.br-cta .br-btn,.br-store .br-btn{width:100%}

  /* Prevent collapsed / blank image boxes */
  .br-hero__pane,
  .br-intro__media,
  .br-style__media,
  .br-spot__media,
  .br-spot__thumb,
  .br-dual__pane,
  .br-mosaic__cell,
  .br-film__frame,
  .br-card__media,
  .br-crop,
  .br-note__media,
  .br-faq__media,
  .br-season__media,
  .br-store,
  .br-cta{
    background:var(--br-ink-lift);
  }
  .br-store,.br-cta{min-height:62svh}
  .br-intro__media,.br-style__media,.br-spot__media,.br-faq__media{
    aspect-ratio:4/3;
    min-height:0;
    max-height:none;
  }
}

@media (max-width:480px){
  .br-hero__pane{
    aspect-ratio:3/4;
    min-height:0;
    max-height:none;
  }
  .br-hero__center{
    padding-top:1.25rem;
    padding-bottom:1.4rem;
  }
  .br-hero__brand{letter-spacing:.14em}
  .br-drawer a{font-size:clamp(1.65rem,8vw,2.4rem)}
  .br-intro__media,.br-style__media,.br-spot__media,.br-dual__pane,.br-mosaic__cell,.br-faq__media{
    aspect-ratio:4/3;
    min-height:0;
    max-height:none;
  }
}

@keyframes brRise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .br-drawer,.br-drawer a,.br-drawer__meta,.js [data-br] img,
  .br-hero__center .br-hero__brand,.br-hero__center h1,.br-hero__center .br-hero__lead,.br-hero__center .br-hero__actions,
  .br-hero__copy h2,.br-hero__copy p,.br-hero__copy .br-btn{
    animation:none!important;transition:none!important;opacity:1!important;transform:none!important;filter:none!important;visibility:visible!important
  }
}
