/* Shared layout rules for the static site (loaded after each page's own styles). */
html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #7f9bff; outline-offset: 3px; }

/* Keep content centred on very wide screens */
header, section, footer {
  padding-left: max(80px, calc((100% - 1280px) / 2)) !important;
  padding-right: max(80px, calc((100% - 1280px) / 2)) !important;
}

/* Tablet */
@media (max-width: 1100px) {
  header, section, footer { padding-left: 40px !important; padding-right: 40px !important; }
  [style*="repeat(3, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="gap: 80px; align-items: flex-start"],
  [style*="gap: 96px"] { flex-direction: column !important; align-items: stretch !important; gap: 48px !important; }
  [style*="width: 440px"], [style*="width: 400px"], [style*="width: 460px"] { width: 100% !important; }
  img[style*="object-fit"] { height: auto !important; aspect-ratio: 16 / 10; }
  img[alt^="Portrait"] { max-width: 460px; aspect-ratio: 460 / 560; align-self: center; }
  [style*="justify-content: space-between; gap: 40px"] { flex-direction: column !important; align-items: flex-start !important; }
}

/* Phone */
@media (max-width: 720px) {
  header, section, footer { padding-left: 20px !important; padding-right: 20px !important; }
  header { height: auto !important; flex-direction: column; gap: 10px; padding-top: 16px !important; padding-bottom: 10px !important; }
  header nav { gap: 18px !important; flex-wrap: wrap; justify-content: center; }
  section { padding-top: 56px !important; padding-bottom: 64px !important; gap: 36px !important; }
  section:has(#sphere) { height: 560px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 40px !important; }
  h1 { font-size: 38px !important; }
  section:has(#sphere) h1 { font-size: 44px !important; }
  [style*="font-size: 52px"], [style*="font-size: 48px"] { font-size: 34px !important; }
  [style*="font-size: 40px"], [style*="font-size: 38px"] { font-size: 28px !important; }
  [style*="font-size: 30px"], [style*="font-size: 28px"] { font-size: 24px !important; }
  [style*="padding: 48px"], [style*="padding: 40px"] { padding: 24px !important; }
  footer { padding-top: 36px !important; padding-bottom: 36px !important; }
  [style*="gap: 16px"], [style*="gap: 12px"], [role="tablist"] { flex-wrap: wrap; justify-content: center; }
  .faq summary { font-size: 18px !important; }
}