/* ===================== v10: phones first ===================== */

/* soft edges: any photo with an off-white backdrop melts into its frame instead of reading as a box */
.card .ph img,.frame img,.mini .im img,.qvb .im img,.mainimg img{
  -webkit-mask-image:radial-gradient(120% 100% at 50% 45%,#000 62%,transparent 100%);
          mask-image:radial-gradient(120% 100% at 50% 45%,#000 62%,transparent 100%)}

/* the menu on phones: full-width film strips that slide in */
@media (max-width:860px){
  .m-panels{align-items:stretch;justify-content:flex-start;gap:10px}
  .menu a.mp{width:100%;flex:0 0 auto;height:clamp(84px,11.5vh,112px);border-radius:18px}
  .menu a.mp::before{border-radius:12px;inset:8px}
  .mp .mp-tx{position:absolute;inset:0;flex-direction:row;align-items:center;justify-content:space-between;padding:0 22px}
  .mp-t{font-size:30px}
  .mp-n{order:2}
  .mp::after{background:linear-gradient(90deg,rgba(28,52,69,.78),rgba(28,52,69,.15) 70%)}
  .menu{padding-top:calc(var(--head) + 12px)}
  .m-bottom nav{gap:14px 20px}
  .m-bottom nav a{font-size:20px}
  .m-bottom .soc2{gap:16px;flex-wrap:wrap}
}

@media (max-width:767px){
  /* overlaps found on phones */
  .sec-head .arch-line{display:none}
  .pf-cue,.ab-hero .pf-cue{display:none}
  .pf-hero{min-height:auto}
  .pf-hero .pf-in{padding-bottom:40px}
  .pf-arch{max-width:300px}
  .feat .ph.frame img{padding:10% 6% 3%}
}

/* touch devices: keep motion, drop the always-running full-screen effects that cost frames */
@media (hover:none),(pointer:coarse){
  .grain{animation:none;opacity:.035}
  #dust,#perfDust,#pfDust{display:none}
  .hdr.solid{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(244,237,227,.98)}
  .card .ph img,.feat .ph.frame img,.frame img,.mini .im img,.pframe img{filter:none}
  .card .ph img.b{display:none}
  .rv{transition-duration:.6s}
  .zoom>img,.zoom>video{transition-duration:1.1s}
  .mini,.cst .mini{backdrop-filter:none;-webkit-backdrop-filter:none;background:#F4ECE1}
  .announce .track{animation-duration:48s}
  .foot::before,.foot .mark::after{animation:none}
  .card:hover{transform:none}
}

/* calmer marquees: read at a glance, never rushing */
.announce .track{animation-duration:90s!important}
.trust .track{animation-duration:110s!important}
.marq .track{animation-duration:80s!important}
@media (max-width:767px){.announce .track{animation-duration:70s!important}.trust .track{animation-duration:85s!important}}