/* CRUDO / Mobile editorial motion layer — 2026-09-09
   Loaded last. No scroll-snap, no pinned sections, no gesture capture. */

@media (max-width:850px){
  :root{
    --editorial-red:#9f3029;
    --editorial-ink:#111113;
    --editorial-muted:#87878d;
    --editorial-line:rgba(17,17,19,.16);
  }

  /* Navigation: quieter, more magazine-like. */
  .site-nav{
    background:rgba(245,245,247,.88)!important;
    border-bottom-color:rgba(17,17,19,.07)!important;
    backdrop-filter:saturate(135%) blur(18px)!important;
    -webkit-backdrop-filter:saturate(135%) blur(18px)!important;
  }
  .nav-brand{transform-origin:left center;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s ease}
  .site-nav.nav-scrolled .nav-brand{transform:scale(.92);opacity:.9}
  .nav-menu{width:40px;height:40px;display:grid!important;place-content:center;gap:6px;padding:0!important;border-radius:50%!important;transition:background .24s ease,transform .2s ease}
  .nav-menu:active{transform:scale(.94);background:rgba(17,17,19,.06)}
  .nav-menu span{width:24px!important;margin:0!important}

  .mobile-menu{
    gap:0!important;
    padding-top:12px!important;
    padding-bottom:max(26px,calc(18px + env(safe-area-inset-bottom)))!important;
    border-bottom:1px solid var(--editorial-line)!important;
    background:rgba(245,245,247,.96)!important;
    box-shadow:0 30px 70px rgba(0,0,0,.12);
  }
  .mobile-menu>a{
    position:relative;
    display:flex;
    min-height:58px;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(17,17,19,.095);
    font-size:clamp(25px,7vw,30px);
    line-height:1;
    transform:translateY(-8px);
    opacity:0;
    transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .3s ease,color .2s ease;
  }
  .mobile-menu.open>a{transform:none;opacity:1}
  .mobile-menu.open>a:nth-child(1){transition-delay:.03s}
  .mobile-menu.open>a:nth-child(2){transition-delay:.06s}
  .mobile-menu.open>a:nth-child(3){transition-delay:.09s}
  .mobile-menu.open>a:nth-child(4){transition-delay:.12s}
  .mobile-menu.open>a:nth-child(5){transition-delay:.15s}
  .mobile-menu .mobile-menu-cta{
    margin-top:10px!important;
    padding-top:0!important;
    border-top:0!important;
    border-bottom:0!important;
    color:var(--editorial-red)!important;
    font-size:clamp(21px,6vw,25px)!important;
  }

  /* FRONT VIEW / editorial cover composition */
  .hero{
    position:relative;
    gap:0!important;
    padding-top:max(82px,calc(64px + env(safe-area-inset-top)))!important;
    padding-right:16px!important;
    padding-bottom:52px!important;
    padding-left:16px!important;
    background:#ededee!important;
  }
  .hero-copy{
    order:1!important;
    padding:0 4px 30px!important;
  }
  .hero-copy::before{
    display:block;
    width:100%;
    margin-bottom:14px;
    padding-top:9px;
    border-top:1px solid var(--editorial-line);
    color:#6d6d72;
    content:"01 / FRONT VIEW";
    font-family:var(--sans);
    font-size:7px;
    font-weight:800;
    letter-spacing:.09em;
  }
  .hero .eyebrow{
    display:flex;
    justify-content:space-between;
    margin-bottom:24px!important;
    color:#5f5f65!important;
    font-size:7px!important;
    letter-spacing:.08em;
  }
  .hero h1{
    font-size:clamp(51px,15.9vw,70px)!important;
    line-height:.79!important;
    letter-spacing:-.105em!important;
  }
  .hero h1>span{position:relative;display:block;clip-path:inset(-12% -12% -18% -12%)}
  .hero h1 em{color:#8c8c91!important}
  .hero-intro{
    position:relative;
    max-width:260px!important;
    margin-top:30px!important;
    padding-left:18px;
    color:#4a4a4f!important;
    font-size:clamp(15px,4.2vw,18px)!important;
    line-height:1.22!important;
    letter-spacing:-.03em;
  }
  .hero-intro::before{
    position:absolute;
    top:.2em;bottom:.18em;left:0;width:2px;
    border-radius:2px;background:var(--editorial-red);content:"";
  }
  .hero .primary-link{
    margin-top:26px!important;
    padding:11px 12px 11px 16px!important;
    gap:32px!important;
    border:1px solid rgba(17,17,19,.08);
    background:#171719!important;
    box-shadow:0 10px 26px rgba(0,0,0,.09);
  }
  .hero .primary-link b{background:var(--editorial-red)!important;color:#fff!important}
  .hero .primary-link:active{transform:scale(.97)!important}

  .hero-reel{
    order:2!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4 / 5!important;
    margin:0!important;
    border-radius:16px!important;
    box-shadow:0 24px 52px rgba(0,0,0,.16)!important;
    clip-path:inset(0 round 16px);
    transform-origin:center 14%;
  }
  .hero-reel::before{
    border-color:rgba(255,255,255,.34)!important;
    border-radius:inherit!important;
  }
  .hero-reel::after{
    position:absolute;z-index:6;top:0;left:0;width:100%;height:3px;
    background:linear-gradient(90deg,var(--editorial-red) 0 24%,rgba(255,255,255,.18) 24% 100%);
    content:"";pointer-events:none;
  }
  .hero-slide img{transform:scale(1.035)!important;transition:transform 6s cubic-bezier(.16,1,.3,1),filter .6s ease!important}
  .hero-slide.is-active img{transform:scale(1)!important}
  .hero-wordmark{width:68px!important;opacity:.8!important}
  .hero-controls{gap:5px!important}
  .hero-controls button{
    width:26px!important;height:26px!important;
    border-color:rgba(255,255,255,.48)!important;
    background:rgba(10,10,10,.1);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    transition:transform .28s cubic-bezier(.16,1,.3,1),background .25s ease,color .25s ease!important;
  }
  .hero-controls button.is-active{transform:scale(1.08)!important}
  .hero-overlay{padding-top:9px;border-top:1px solid rgba(255,255,255,.36)}
  .hero-overlay span:last-child{color:#d78278!important}
  .hero-glow{opacity:.32!important}

  .hero-meta{
    order:3!important;
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    margin:18px 4px 0!important;
    padding-top:10px!important;
    border-top:1px solid var(--editorial-line);
    color:#707075!important;
    font-size:7px!important;
    letter-spacing:.06em;
  }
  .hero-meta span:first-child{display:block!important}
  .hero-meta span:last-child{opacity:.72}

  /* Editorial section rhythm */
  .studio,.work,footer{position:relative}
  .studio::before,.work::before,footer::before{
    position:absolute;top:56px;right:20px;left:20px;height:1px;
    background:rgba(17,17,19,.12);content:"";
  }
  .section-index{letter-spacing:.09em!important}
  .studio-copy h2,.work-header h2{letter-spacing:-.095em!important}

  .work-grid{gap:22px!important}
  .work-card figure{overflow:hidden!important;border-radius:16px!important;box-shadow:0 16px 36px rgba(0,0,0,.08)}
  .work-card figure>figcaption{
    border-radius:12px!important;
    background:rgba(15,15,16,.72)!important;
    backdrop-filter:blur(13px) saturate(110%);
    -webkit-backdrop-filter:blur(13px) saturate(110%);
  }
  .work-number{top:13px!important;left:13px!important;display:grid!important;width:28px;height:28px;place-items:center;border-radius:50%;background:rgba(0,0,0,.34);color:#fff!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

  /* Entrances are finite effects over visible HTML; shared reveals own sections. */

  /* Touch feedback without interfering with vertical pan. */
  .work-card,.brand-letter,.primary-link,.footer-link,.mobile-menu a{touch-action:pan-y}
  .work-card:active{transform:scale(.992)}
  .brand-letter:active{transform:scale(.97)}

  /* Very small screens */
  @media (max-width:390px){
    .hero{padding-right:12px!important;padding-left:12px!important}
    .hero h1{font-size:clamp(48px,15.5vw,60px)!important}
    .hero-intro{max-width:235px!important}
    .hero-reel{aspect-ratio:3 / 4!important}
    .hero-meta span:last-child{display:none!important}
  }
}

@media (prefers-reduced-motion:reduce){
  html.editorial-motion .hero-copy::before,
  html.editorial-motion .hero .eyebrow,
  html.editorial-motion .hero h1>span,
  html.editorial-motion .hero-intro,
  html.editorial-motion .hero .primary-link,
  html.editorial-motion .hero-reel,
  html.editorial-motion .hero-controls button,
  html.editorial-motion .hero-meta,
  .editorial-watch{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}