/* Shared narrow-screen layout. Keep browser zoom available. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:820px){
  h1,h2,h3,p,a,summary,li,figcaption{overflow-wrap:anywhere}
  img,video,iframe,svg{max-width:100%}
  .wrap>*,.intro>*,.split>*,.choices>*,.facts>*,.location>*,.about-grid>*,.product-intro>*,.book-detail>*,.hero-heading>*,.cost-row>*{min-width:0}
  .product-main{width:100%;padding-left:20px;padding-right:20px}
  .product-actions>*{max-width:100%;white-space:normal}
  .product-price select{width:100%;min-width:0}
}
@media(max-width:760px){
  html{scroll-padding-top:170px}
  .wrap{width:calc(100% - 32px)}
  header .nav{height:auto;min-height:0;flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:12px}
  header .brand{max-width:100%;font-size:14px;gap:10px}
  header .brand img{width:48px;height:50px}
  header .brand small{font-size:10px}
  header .navlinks{width:100%;flex-wrap:wrap;gap:6px 18px;font-size:13px;line-height:1.5}
  header .navlinks a{padding:4px 0}
  header .navlinks a:nth-child(2),header .navlinks a:nth-child(3){display:inline-block}
  .mpu-global{gap:6px 16px;padding:10px 16px;font-size:13px}
  .hero h1{font-size:clamp(2rem,8.5vw,2.8rem)}
  .fame-copy h2{font-size:clamp(1.75rem,7.5vw,2.3rem)}
  .product-intro h1{font-size:clamp(1.8rem,7.5vw,2.5rem)}
  .detail,.location{padding:22px}
  .footlinks{flex-wrap:wrap;gap:12px 20px}
}
@media(max-width:600px){
  .hero-heading{flex-direction:column;align-items:flex-start;gap:20px}
  .hero-heading .hero-logo{width:110px;flex:0 0 auto}
  .hero-heading h1{font-size:clamp(1.8rem,8vw,2.4rem)}
  .hero-note{flex-wrap:wrap}
  header .links{width:100%;flex-wrap:wrap;gap:12px;padding-bottom:12px}
  header .nav:has(.menu){height:auto;flex-direction:column-reverse;align-items:flex-end}
  .panel,.card{padding:22px}
  input,select,textarea{max-width:100%;min-width:0;font-size:16px}
}