/* =============================================================================
   responsive.css — every breakpoint and preference override

   This file loads last and keeps the reference's block order, because a later
   block is allowed to override an earlier one for the same element (the three
   "(width<=760px) or portrait" blocks in particular build on each other).
   When editing, add new rules inside the block they belong to rather than
   appending a new one at the end.

   Breakpoints, in the order they appear:
     small screens or a coarse pointer   →  desktop navigation → hamburger
     prefers-reduced-motion              →  no transitions
     narrow or portrait                  →  story copy stacks
     portrait phone                      →  a few larger type sizes
     ≤480px                              →  tighter hero, bigger touch targets
     short landscape                     →  static story, taller menu

   The reference stylesheet also carried the /docs sub-site's breakpoints;
   this replica ships the homepage only, so those are left out.
   ============================================================================= */

/* --- small screens / touch: swap the desktop nav for the hamburger ------- */

@media (width <= 1080px), (hover: none) and (pointer: coarse) {
  .nav__links,
  .nav__tools {
    display: none;
  }

  .nav__menu-btn {
    display: flex;
  }
}

/* --- no transitions when the visitor asked for less motion --------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .nav__inner,
  .nav__mark,
  .btn,
  .nav__tools *,
  .sw__menu {
    transition: none;
  }
}

/* --- narrow, or a portrait tablet --------------------------------------- */

@media (width <= 760px), (width <= 1080px) and (orientation: portrait) {
  /* story.js overwrites this inline; it is the no-JS fallback */
  .stage-scroll {
    height: 10000px;
  }

  .hero-copy {
    top: clamp(130px, 30svh, 290px);
    right: 5.5vw;
    left: 5.5vw;
    max-width: none;
  }

  .hero-eyebrow {
    font-size: 13px;
    letter-spacing: .1em;
  }

  .hero-title__text {
    font-size: clamp(46px, 14vw, 80px);
  }

  .hero-rule {
    margin: 3.4vh 0 2vh;
  }

  .hero-actions .btn {
    padding: 13px 24px;
    font-size: 14.5px;
  }

  /* all three headings sit in the same slot, horizontally centred */
  .phase-heading--side,
  .phase-heading--center,
  .phase-heading--top {
    top: max(82px, 11svh);
    right: 5.5vw;
    left: 5.5vw;
    transform: none;
  }

  .phase-heading--center {
    text-align: center;
  }

  .phase-heading--center .phase-heading__title,
  .phase-heading__title {
    font-size: clamp(38px, 10.5vw, 60px);
  }

  .phase-heading__row {
    gap: 4vw;
  }

  .phase-heading__index {
    font-size: 13px;
  }

  .phase-heading__note {
    font-size: 14.5px;
  }

  /* the closing screen: the same column, smaller — the download button is
     already down with the other desktop-only pieces at the bottom of this file */
  .outro {
    padding: 16svh 5.5vw 20svh;
  }

  .outro__mark {
    width: clamp(72px, 11vh, 104px);
    margin-bottom: 2.6vh;
  }

  .outro__title {
    font-size: clamp(30px, 8.5vw, 54px);
  }

  .static-story__chapter {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* --- narrow: footer and the pre-release link ----------------------------- */

@media (width <= 760px), (width <= 1080px) and (orientation: portrait) {
  /* the closing band: without this the short side of the viewport would be
     mostly band, because the wordmark is measured against the long side */
  :root {
    --reveal-h: clamp(190px, 30svh, 300px);
  }

  .footer__links {
    flex-wrap: wrap;
    row-gap: 14px;
  }

  .download-links {
    line-height: 2;
  }
}

/* --- narrow: vignettes move under the copy ------------------------------ */

@media (width <= 760px), (width <= 1080px) and (orientation: portrait) {
  .stage-vignette {
    top: auto;
    left: 5.5vw;
    width: 89vw;
  }

  .stage-vignette--query {
    bottom: 2vh;
  }

  .stage-vignette--parcel {
    bottom: .5vh;
    left: 3vw;
  }

  .phase-heading--side {
    top: max(76px, 9svh);
  }
}

/* --- portrait tablet ----------------------------------------------------- */

@media (width <= 1080px) and (orientation: portrait) {
  .hero-title__text {
    font-size: clamp(46px, 10vw, 96px);
  }

  .phase-heading__title,
  .phase-heading--center .phase-heading__title {
    font-size: clamp(38px, 6.4vw, 64px);
  }

  .stage-vignette {
    width: min(89vw, 640px);
  }
}

/* --- ≤480px ------------------------------------------------------------- */

@media (width <= 480px) {
  .hero-eyebrow,
  .hero-sub,
  .hero-actions {
    padding-left: 0;
  }

  /* the closing screen's title stops being one line before it would overflow */
  .outro__title {
    white-space: normal;
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-actions .btn {
    min-height: 44px;
    padding: 12px 18px;
    font-size: 14px;
  }

  .hero-title__text {
    font-size: clamp(44px, 14vw, 66px);
  }

  .footer__inner {
    padding: 20px;
  }

  .footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* --- short landscape: the stacked story and a roomier menu --------------- */

@media (width <= 1080px) and (height <= 600px) and (orientation: landscape) {
  .static-story__chapter {
    grid-template-columns: 1fr;
  }

  .static-story {
    gap: 72px;
    padding-top: 104px;
  }

  .static-hero {
    padding-top: 0;
  }

  .nav-overlay {
    padding-top: 78px;
  }

  .nav-overlay__link {
    padding-block: 7px;
    font-size: 24px;
    line-height: 1.4;
  }
}

/* --- desktop-only pieces are dropped on small screens / touch ----------- */

@media (width <= 1080px), (hover: none) and (pointer: coarse) {
  .desktop-download {
    display: none !important;
  }
}

/* --- portrait tablet: the third heading needs its own size --------------- */

@media (width <= 1080px) and (orientation: portrait) {
  .phase-heading--top .phase-heading__title {
    font-size: clamp(38px, 6.4vw, 64px);
  }
}