/* ---------- tablets and phones ----------
   Loaded last so it settles ties with the inline styles. */

/* Tall or narrow screens: let the hero size to its content instead of the viewport */
@media (max-width:1100px), (orientation:portrait){
  .hero{min-height:auto;padding-bottom:40px}
  .intro{margin-top:clamp(64px,10vw,104px)}
  .disc{margin-top:52px}
}

/* iPad and small laptops */
@media (min-width:641px) and (max-width:1100px){
  .title{margin-top:32px}
  .title h1{font-size:17vw}
  .year{margin-top:3vw}
  .year span{font-size:12vw}
  .year .gap{width:24vw}
  .hero-img{width:25vw;border-radius:22px}
  .disc{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;justify-content:stretch}
  .disc a{padding:12px 0;border-bottom:1px solid rgba(23,20,43,.14)}
  .grid{columns:3 200px}
}

/* Desk on iPad portrait and phones: a swipeable row of evenly sized cards */
@media (max-width:900px){
  .desk.ws .card{width:auto;flex:0 0 min(64%,280px)}
  .vp-bar{justify-content:flex-start}
  .vp-stat{display:none}
  .hint{display:none}
}

/* Phones */
@media (max-width:640px){
  body{padding-bottom:84px}
  .top{padding:18px 0}
  .title{margin-top:36px}
  .title h1{font-size:22vw;line-height:.9}
  .year{margin-top:30px;padding:6px 16px}
  .year span{font-size:16vw}
  .year .gap{width:30vw}
  .hero-img{width:31vw;border-radius:18px}
  .intro{margin-top:76px;font-size:17px;max-width:30ch}
  .disc{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:44px;font-size:11.5px;letter-spacing:.04em}
  .disc a{padding:12px 0;border-bottom:1px solid rgba(23,20,43,.14)}

  .head{gap:12px;margin-bottom:22px}
  .head h2{font-size:40px}
  .head p{font-size:16px}
  .ui,.work,.motion,.ar{padding-top:64px;padding-bottom:40px}
  .bench{padding:56px 0 48px}

  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 20px;padding:0 16px}
  .chips::-webkit-scrollbar{display:none}
  .chips button{flex:none}
  .grid{columns:2;column-gap:10px}
  .grid figure{margin-bottom:10px;border-radius:10px}
  .grid figcaption{font-size:12.5px;padding:7px 9px}

  .reels{grid-template-columns:1fr 1fr;gap:10px}
  .reels figcaption,.lenses figcaption{font-size:12.5px}
  .lenses{grid-template-columns:1fr 1fr;gap:10px}
  .phones{gap:8px}

  .case{border-radius:20px;padding:20px}
  .case h3{font-size:28px}
  .strip img,.strip.tall img{height:300px;border-radius:14px}

  .about{padding-top:64px}
  .mail{font-size:18px}
  .foot{margin-top:48px}
}