/* Shared rules on top of the canvas pages' own styles. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, video { max-width: 100%; }
a:focus-visible { outline: 2px solid #B7791F; outline-offset: 3px; }

/* Floating header: hidden until site.js shows it. */
[data-pill] { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
[data-pill].is-shown { opacity: 1; visibility: visible; }
[data-pill] header { z-index: 60 !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  [data-pill] { transition: none; }
}

/* ---------------------------------------------------------------- phones and small tablets */
@media (max-width: 820px) {
  [data-about-fig] { flex: 1 1 100% !important; margin: 0 !important; }
  /* narrower side gutters */
  [style*="calc(100% - 96px)"] { width: calc(100% - 40px) !important; }
  [style*="padding: 22px 6%"] { padding: 16px 20px !important; }

  /* every multi-column grid becomes a single column */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-column"] { grid-column: auto !important; }

  /* headings and display type scale with the screen */
  h1[style] { font-size: clamp(40px, 12vw, 64px) !important; letter-spacing: 0 !important; padding-left: 0 !important; }
  [style*="font-size: 72px"], [style*="font-size: 76px"] { font-size: clamp(36px, 11vw, 60px) !important; letter-spacing: 0.04em !important; }
  [style*="font-size: 56px"], [style*="font-size: 52px"], [style*="font-size: 48px"] { font-size: clamp(30px, 9vw, 44px) !important; }

  #home-name { padding: 72px 20px 0 !important; }
  #home-intro { top: -180px !important; padding-top: 0 !important; min-height: 820px !important; }

  /* menus */
  nav[aria-label] { gap: 8px 18px !important; font-size: 16px !important; }
  [data-pill] header { top: 10px !important; width: calc(100% - 24px) !important; padding: 10px 18px !important; border-radius: 22px !important; gap: 4px 16px !important; }
  [data-pill] header > a { font-size: 19px !important; }

  /* large vertical spacing is halved */
  [style*="padding: 200px"], [style*="padding: 240px"], [style*="padding: 260px"] { padding-top: 110px !important; }
  [style*="padding: 180px"], [style*="padding: 160px"] { padding-top: 96px !important; }
  [style*="padding: 56px;"], [style*="padding: 64px 56px"], [style*="padding: 48px 56px"] { padding: 32px 22px !important; }

  /* Home: the four-tile mosaic becomes a stack */
  [data-mosaic] { aspect-ratio: auto !important; display: flex; flex-direction: column; gap: 12px; }
  [data-mosaic] > a { position: relative !important; inset: auto !important; clip-path: none !important; display: block; height: 240px; }
  [data-mosaic] > a > img { position: absolute !important; inset: 0 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
  [data-mosaic] > a > span { top: auto !important; bottom: 18px !important; left: 20px !important; right: 20px; width: auto !important; font-size: 30px !important; }

  /* Work page: scrolls normally; the hover preview is a desktop feature */
  div[style*="height: 100vh"] { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  [data-hub-pane] { display: none !important; }

  /* Drone: the arrows between the five stages point down */
  span[aria-hidden][style*="right: -38px"] { right: auto !important; left: 50% !important; top: auto !important; bottom: -40px !important; transform: translateX(-50%) rotate(90deg) !important; }

  /* Saxophone: the stage photo and title stack */
  section[style*="height: 860px"] { height: auto !important; padding: 64px 20px 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
  section[style*="height: 860px"] > img { position: relative !important; inset: auto !important; left: auto !important; top: auto !important; width: 72% !important; height: auto !important; aspect-ratio: 3 / 4; }
  section[style*="height: 860px"] > p, section[style*="height: 860px"] > h1 { position: relative !important; right: auto !important; top: auto !important; bottom: auto !important; }

  /* fixed-height banners grow with their text */
  [style*="height: 620px"], [style*="height: 520px"] { height: auto !important; min-height: 360px; padding: 80px 20px !important; }
  [style*="min-height: 640px"] { min-height: 360px !important; }
  [style*="flex: 1 1 560px"] { flex-basis: 100% !important; padding-left: 20px !important; padding-right: 20px !important; }
  [style*="flex: 1 1 460px"][style*="min-height"] { flex-basis: 100% !important; }
  [style*="margin-left: 12%"], [style*="margin-left: 4%"] { margin-left: 0 !important; width: 100% !important; }
  [style*="padding-left: 8%"], [style*="padding-right: 8%"] { padding-left: 0 !important; padding-right: 0 !important; }
  [style*="margin: 0 8% 0 0"] { margin: 0 auto !important; }
  [style*="margin-bottom: -96px"] { margin-bottom: 0 !important; }
  [style*="border-left: 1px solid"][style*="padding-left: 32px"], [style*="border-left: 1px solid"][style*="padding: 0 0 48px 40px"] { border-left: 0 !important; padding-left: 0 !important; }
  [style*="padding: 0 40px 48px 0"] { padding-right: 0 !important; }
}