/* Site layout helpers and menu behaviour.
 *
 * These rules were previously inlined in a <style> block in the <head> of every
 * page. They are consolidated here so no page ships inline CSS. The file is a
 * superset: the homepage uses the section-layout classes (sound cards, collage
 * and rhythm phones, hero ordering); the other pages only use the "chrome" set
 * (footer span, ml-*, align-middle, duration, mobile menu). Unused rules on a
 * given page are harmless. */

/* Footer brand cell: spans both mobile columns, then falls back to one of
   the three desktop columns. */
@media (max-width: 1023px) {
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
}
.ml-12 {
  margin-left: 3rem;
}
.ml-44 {
  margin-left: 11rem;
}
.align-middle {
  vertical-align: middle;
}
.order-last {
  order: 9999;
}
/* The voice screenshot is 1054px wide vs 980px for the other phones, so it
   needs a proportionally wider box to render its phone at the same scale. */
.w-\[188px\] {
  width: 188px;
  max-width: none;
}
/* Sound cards: a fixed 2x2 block that stays two-up at every width. */
.w-\[165px\] {
  width: 165px;
}
.h-\[165px\] {
  height: 165px;
}
.max-w-\[342px\] {
  max-width: 342px;
}
/* "Knows their rhythm" section phone: ~0.6x its previous display size
   (was full container width on mobile and 540px on desktop). */
.rhythm-phone {
  max-width: 60%;
}
/* Centre the predictions phone within its full-width wrapper on mobile
   (desktop keeps its column layout). */
@media (max-width: 1023px) {
  .rhythm-phone {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1024px) {
  .rhythm-phone {
    max-width: 324px;
  }
  .collage-phone {
    width: 237px !important;
  }
  .lg\:gap-4 {
    gap: 1rem;
  }
  .lg\:max-w-\[352px\] {
    max-width: 352px;
  }
  /* Re-asserted here so they win over the .w-\[165px\] rule above. */
  .lg\:w-\[168px\] {
    width: 168px;
  }
  .lg\:h-\[168px\] {
    height: 168px;
  }
  .collage-phone-wide {
    width: 255px !important;
    max-width: none;
  }
  .lg\:justify-start {
    justify-content: flex-start;
  }
  /* Hero: videos take the left column on desktop, text the right. Mobile
     keeps .order-last so the text still comes first. */
  .lg\:order-first {
    order: -9999;
  }
  .lg\:justify-end {
    justify-content: flex-end;
  }
  .lg\:w-\[480px\] {
    width: 480px;
  }
}
/* Sound cards go three-up here: 3x168px + 2x16px gap = 536px, which is the
   first breakpoint where the right-hand column (half of the 1280px
   container, less its 64px left padding) has room for it. */
@media (min-width: 1280px) {
  .xl\:grid {
    display: grid;
  }
  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xl\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  /* Column-major so the pairs stack down each column: white noise/fire,
     rain/fan, then ocean/and-many-more in the third. */
  .xl\:grid-flow-col {
    grid-auto-flow: column;
  }
  .xl\:max-w-\[536px\] {
    max-width: 536px;
  }
}
/* Authored in the markup but pruned out of the Tailwind build. */
.duration-\[250ms\] {
  transition-duration: 250ms;
}
/* Mobile menu. The static export ships no JS, so the drawer is driven by a
   hidden checkbox that the hamburger label toggles. */
.mobile-menu-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
#mobile-menu-toggle:checked ~ .mobile-menu {
  pointer-events: auto;
}
#mobile-menu-toggle:checked ~ .mobile-menu .mobile-menu-backdrop,
#mobile-menu-toggle:checked ~ .mobile-menu .mobile-menu-panel {
  opacity: 1;
}
/* The backdrop only swallows clicks once the drawer is open; tapping it closes. */
#mobile-menu-toggle:checked ~ .mobile-menu .mobile-menu-backdrop {
  pointer-events: auto;
}
/* Hamburger folds into an X. justify-around puts the outer bars 6px off centre. */
#mobile-menu-toggle:checked ~ .mobile-menu-button .mobile-menu-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
#mobile-menu-toggle:checked ~ .mobile-menu-button .mobile-menu-bar:nth-child(2) {
  opacity: 0;
}
#mobile-menu-toggle:checked ~ .mobile-menu-button .mobile-menu-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
/* The checkbox is the focusable element, so its ring has to show on the label. */
#mobile-menu-toggle:focus-visible ~ .mobile-menu-button {
  outline: 2px solid #F7F0E8;
  outline-offset: 2px;
}

/* Homepage footer spacing. .footer-cols replaces the row's mb-[112px] so the gap
   below the columns can be tightened on desktop; .footer-lang-desktop adds room
   above the desktop language picker. Both are desktop-only tweaks. */
.footer-cols {
  margin-bottom: 112px;
}
@media (min-width: 1024px) {
  .footer-cols {
    margin-bottom: 56px;
  }
  .footer-lang-desktop {
    margin-top: 3rem;
  }
}
