/* Readable navigation and comfortable touch targets. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:650px){
  html{scroll-padding-top:144px}
  body{font-size:16px;line-height:1.65}
  .header{height:auto;min-height:126px;padding:10px 0 8px;gap:4px;grid-template-rows:48px minmax(48px,auto)}
  .header .brand{animation:none!important;transform:none;font-size:34px;min-height:44px;display:inline-flex;align-items:center}
  .header>nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;font-size:16px;line-height:1.25;width:100%;font-weight:700}
  .header>nav a{min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px 1px;white-space:normal;overflow-wrap:normal}
  .header nav a::after{bottom:2px;height:2px}
  .languages{font-size:16px;gap:0}
  .languages button{font-size:16px;min-width:44px;min-height:44px;padding:8px}
  .languages button[aria-pressed=false]{color:#555}
  .languages>span{font-size:15px;color:#777;padding:0 3px}
  .hero-bottom p,.section-heading p,.project-link>p,.project>p,.studio-copy p,.studio-copy p+p,.principles p,.contact-copy p,.catalog-lead,.game-entry p,.catalog-empty p{font-size:16px;line-height:1.75;color:#444}
  .button{font-size:16px;min-height:52px;padding:16px 20px;gap:28px}
  .text-link,.catalog-link,.copy-email{font-size:16px;line-height:1.5;min-height:48px;align-items:center;padding-top:12px;padding-bottom:12px}
  .copy-email{gap:12px}
  .eyebrow,.status,.project-meta,.hero-foot{font-size:12px;line-height:1.5;letter-spacing:.7px}
  .status{padding:9px 12px}
  .section-top{flex-wrap:wrap;gap:12px;align-items:center}
  .project-meta{gap:12px;flex-wrap:wrap}
  .concept-note{font-size:14px;line-height:1.7;color:#555}
  .principles span{font-size:14px;color:#555}
  .principles h3{font-size:19px;line-height:1.4}
  .catalog-tabs{gap:8px;flex-wrap:wrap;margin-top:25px}
  .catalog-tabs a{font-size:16px;color:#555;min-height:48px;padding:12px 6px;line-height:1.5}
  .catalog-tabs a[aria-current=page]{color:#111}
  .game-entry h2{font-size:30px;line-height:1.2}
  .catalog-empty{padding:30px 22px}.catalog-empty h2{font-size:30px;line-height:1.25}
  .email{font-size:19px;line-height:1.5;overflow-wrap:anywhere}.email span{flex-shrink:0}
  #copy-status{font-size:15px;line-height:1.5;min-height:24px}
  footer{font-size:13px;line-height:1.6;flex-wrap:wrap;padding-bottom:76px;gap:14px}
  footer .brand{font-size:30px}.back-top{font-size:15px;min-height:44px;display:flex;align-items:center}
  .motion-toggle{font-size:13px;min-height:44px;padding:10px 14px;right:12px;bottom:12px;border-color:#777;background:#fff}.motion-toggle span{max-width:none}
  .orbit-intro,.orbit-about p,.feature-grid p,.orbit-how li,.orbit-faq details p,.orbit-end>p{font-size:16px;line-height:1.75;color:#444}
  .feature-grid h3{font-size:21px;line-height:1.35}.feature-grid>.eyebrow{font-size:13px}
  .release-status{font-size:15px;line-height:1.5;padding:14px 16px}
  .gallery-heading>p{font-size:16px;line-height:1.7}
  .screenshot-gallery figcaption{font-size:14px;line-height:1.6}
  .screenshot-gallery figcaption>.eyebrow{font-size:13px}
  .zoom-marker{width:44px;height:44px;font-size:23px}
  .showcase-label{font-size:11px;line-height:1.4;letter-spacing:.8px}
  .orbit-faq summary{font-size:17px;line-height:1.5;min-height:48px;padding-top:10px;padding-bottom:10px;display:flex;align-items:center}
  .orbit-faq summary::after{top:10px;font-size:24px}
  .viewer-toolbar button,.viewer-body button{width:44px;height:44px;font-size:24px}.viewer-body img{max-width:calc(100% - 104px)}
  .screenshot-dialog>p,.viewer-toolbar{font-size:14px;line-height:1.5}
  .secret-dialog p,.secret-hint{font-size:16px;line-height:1.6}.secret-head,.secret-progress{font-size:13px;line-height:1.5}
  .secret-close{width:44px;height:44px;font-size:26px}.secret-action{font-size:16px;min-height:48px;padding:12px 18px}
}
@media(max-width:350px){
  html{scroll-padding-top:190px}
  .header>nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px;font-size:17px}
  .header{min-height:176px}
  .hero h1{font-size:34px}
  .catalog-tabs{gap:4px}.catalog-tabs a{font-size:15px}
}