/* About page: phone-only layout. Desktop and animation timelines stay intact. */
@media (max-width:767px){
  .about-palette{overflow-x:clip}
  .about-palette .hero-section{height:100svh;min-height:640px;background:#101010}
  .about-palette .hero-section #webgl-container{opacity:1}
  .about-mobile-intro{padding:100px 24px max(40px,env(safe-area-inset-bottom));background:linear-gradient(180deg,#10101010 15%,#10101099 48%,#101010f5 100%)}
  .about-mobile-intro h1{font-size:clamp(42px,12.5vw,68px);line-height:1.04;margin:18px 0}
  .about-mobile-intro p{font-size:16px;line-height:1.65}
  .about-mobile-intro a{min-height:48px;font-size:15px}
  .about-palette .mobile-cube-section{padding:100px 20px 36px;min-height:600px;box-sizing:border-box}
  .about-palette .mcube-bg{opacity:.2}
  .about-palette .mcube-title{top:36px;padding:0 20px;box-sizing:border-box}
  .about-palette .mcube-eye{font-size:11px;color:#d8c98c;line-height:1.5}
  .about-palette .mcube-line{font-size:clamp(32px,9vw,48px);line-height:1.1}
  .about-palette .mcube-copy{font-size:16px;line-height:1.7;color:#e2e0d9;padding:120px 4px 0;max-width:36ch}
  .about-palette .fo-name{font-size:clamp(28px,8vw,40px);line-height:1.12;overflow-wrap:normal}
  .about-palette .fo-say{font-size:15px;line-height:1.65}
  .about-palette .fo-in{padding-inline:22px}
  .about-palette .fo-over{padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .about-palette .cf-lede,.about-palette .ow-sub,.about-palette .ow-body{font-size:15px;line-height:1.65}
  .about-palette .ow-name{font-size:24px;line-height:1.2}
  .about-palette .fo-wrap a{display:inline-flex;align-items:center;min-height:44px;line-height:1.5}
}
@media(max-width:360px){
  .about-mobile-intro{padding-inline:20px}
  .about-mobile-intro h1{font-size:42px}
  .about-palette .mcube-copy{font-size:15px}
}
@media(max-width:767px) and (max-height:600px){
  .about-palette .hero-section{height:auto;min-height:650px}
}
/* A landscape photo keeps both people visible on narrow phone screens. */
@media(max-width:767px){
 .about-palette .hero-section{height:auto;min-height:0;padding-top:78px;width:100%;background:#101010}
 .about-palette .hero-section #webgl-container{visibility:hidden}
 .about-palette .about-mobile-intro{position:relative;inset:auto;padding:0 24px 40px;background:#101010;justify-content:flex-start}
 .about-mobile-photo{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center;border-radius:14px;margin:0 0 26px;border:1px solid #ffffff20}
 .about-mobile-intro .eyebrow{font-size:10px;letter-spacing:.12em;line-height:1.6}
 .about-palette .about-mobile-intro h1{font-size:clamp(38px,10.8vw,64px);line-height:1.04;margin:16px 0;letter-spacing:-.045em}
 .about-mobile-intro p{margin:0;max-width:34ch;color:#c9c8c2;font-size:15px;line-height:1.65}
 .about-mobile-intro a{margin-top:22px;padding:12px 24px}
}