@media (min-width: 1600px) {
  :root { --gutter: max(96px, calc((100vw - 1440px) / 2)); }
}

@media (max-width: 700px) {
  :root { --status-height: 152px; --gutter: 24px; }
  .start-control { flex-basis: 80px; width: 80px; padding: 0 10px; font-size: 12px; }
  .brand { padding: 0 6px; }
  .brand-wordmark { font-size: clamp(8px, 2.7vw, 10px); }
  .menu-topbar-label { padding: 0 6px; }
  .header-version { flex-basis: 76px; padding: 0 6px; font-size: 9px; }
  .hero { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 24px; padding-bottom: 48px; }
  .hero-clock { right: var(--gutter); bottom: 12px; gap: 2px; }
  .hero-clock-time { font-size: clamp(34px, 11vw, 46px); }
}

@media (max-width: 380px) {
  :root { --gutter: 20px; }
  .menu-item { padding-right: 36px; padding-left: 12px; }
  .menu-number { left: 12px; }
  .menu-arrow { right: 12px; }
}

@media (max-height: 620px) {
  :root { --status-height: 120px; }
  .hero { align-items: start; padding-top: 20px; padding-bottom: 20px; }
  .hero-clock { bottom: 12px; }
  .hero-clock-time { font-size: clamp(32px, 7vh, 42px); }
  .menu-item { padding-top: 30px; padding-bottom: 8px; }
  .menu-description { display: none; }
  .menu-number { top: 9px; }
  .menu-arrow { top: 4px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  :root { --status-height: 104px; --gutter: 24px; }
  .hero { align-items: center; }
  .menu-item { padding-top: 24px; padding-bottom: 6px; }
  .menu-title { font-size: 15px; }
  .menu-number { top: 6px; }
  .menu-arrow { top: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .hero-clock-time.is-ticking { animation: none; }
  .menu-tiles,
  .site-menu::backdrop { transition: none; }
  .site-menu[open] .menu-tiles { opacity: 1; transform: translateX(0); }
}