/* ENVOY — responsive.css
   every media query on the site

   One part of a stylesheet split across files. The load order in
   index.html is part of the stylesheet — see css/base.css for the map.
   Loaded last, and that is load-bearing: these rules win over the ones in
   the files above by source order, not by specificity. If this stops being
   the final <link> in index.html, the mobile layout silently stops
   applying wherever a desktop rule matches at equal specificity. */

/* ---------------------------------------------------------------- mobile */

@media (max-width: 900px) {
  #tour-mv { width: 92vw; height: 46vh; top: 36vh; }

  /* Form first, datasheet under it. The order block is the one place on the
     page where the reader has a job to do, and on a phone the specs are
     reference material they have already scrolled past five cards of. */
  .order-body { grid-template-columns: minmax(0, 1fr); }
  .order-spec { order: 2; }
  .order-form,
  .order-done { order: 1; }

  /* The panel's own black masks are a fixed 24vh at either end, so on a short
     screen the generous desktop padding is nearly all of the section. Enough
     to clear the mask, not much more. */
  .order { padding: 20vh clamp(20px, 4vw, 64px) 10vh; }

  /* One column rather than two — three cards over two columns leaves an odd
     one on a line of its own, which is the untidiness the row was arranged to
     avoid in the first place.

     Capped and centred, because the cards are the full width of the column
     they are in: at 900px that is a monospace line about a hundred characters
     long, and the measure is the only thing holding this copy readable. */
  .light-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 540px;
    margin: 0 auto;
  }

  /* The top padding is the black run-up out of the tour, not spacing — see
     light.css. Shortened here but kept proportionally generous: a phone screen
     is tall and narrow, so the same fraction of a viewport is fewer pixels of
     picture given up and the beat still lands.

     The gutter has to match light.css's, not the old section gutter: it is
     what puts the drawn border near the screen edge, and a wider one here
     would quietly pull the frame back in below 900px only. */
  .light {
    padding: clamp(90px, 20vh, 220px) clamp(12px, 1.8vw, 36px) clamp(64px, 10vh, 115px);
  }

  /* Shorter than the desktop band, but only because the viewport is: a 2:1
     plate in a portrait column is already showing far more of its frame per
     pixel of height than a wide one is, so it takes less height here to see
     the same amount of picture.

     Set on the section, not on .gear-plate — the red ramps behind the plates
     are sized off the same variable, and overriding the height directly would
     slide them off the seam. */
  .gear { --plate-h: clamp(260px, 42vh, 470px); }

  .gear-panel {
    padding: clamp(44px, 6.5vh, 90px) clamp(20px, 4vw, 64px) clamp(56px, 8vh, 110px);
  }

  /* The extra inset was there to sit the copy inside the field on a wide
     panel. At this width the panel's own gutter is the whole margin there is
     to give, and doubling it leaves the measure too narrow to read. */
  .gear-copy { padding: 0; }

  .gear-rule { width: min(74%, 320px); }

  /* The slogan drops under the columns rather than squeezing beside them —
     side by side at this width leaves both too small to read. */
  .foot-top {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(28px, 6vh, 56px);
  }

  .foot-cols {
    flex-wrap: wrap;
    gap: clamp(24px, 8vw, 48px) clamp(28px, 10vw, 64px);
  }

  .foot-slogan { width: min(84vw, 420px); }

  /* The heading is indented by --f21 on a wide screen so the meter's rule
     reads as a scale running under it rather than as an underline. At this
     width there is no room to give away, and the lockup goes back to the
     section gutter. */
  .why-head { padding-left: var(--f8); }

  /* The 5 : 8 split comes apart here, and it has to. A golden section of a
     phone gives the copy about 130px — narrower than the measure needs by
     more than half — and leaves the rig a column too narrow to draw a
     three-piece signal chain in at all.

     So the two fields go back to being stacked, copy over rig, and the golden
     ratio moves from the layout to the type: t0, t1 and t3 are still three φ
     steps apart, and every gap on the screen is still a Fibonacci multiple of
     --u. The grid is intact; it is the field that changed shape. */
  .why-slide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    row-gap: var(--f5);
    padding-left: var(--f8);
    padding-right: var(--f5);
  }

  /* The column was the measure; with no column, the ch cap is again the only
     thing holding the line length, and the slide's padding is the margin. */
  .why-body { max-width: 62ch; }

  /* one slot along the bottom for every card */
  .tour-card,
  .tour-card[data-step="0"], .tour-card[data-step="1"],
  .tour-card[data-step="2"], .tour-card[data-step="3"],
  .tour-card[data-step="4"] {
    left: 4vw;
    right: 4vw;
    top: auto;
    bottom: 13vh;
    width: auto;
  }
}

@media (max-width: 620px) {
  :root { --nav-h: 60px; }

  .nav {
    height: auto;
    flex-direction: column;
    gap: 6px;
    padding: 10px 16px;
  }

  .menu { gap: 16px; }

  .sound, .scroll-cue { bottom: 16px; }

  /* Quantity and region side by side leaves the select too narrow to show
     "United Kingdom & EU" — the one field on the form whose values are long
     and cannot be shortened without losing which region is which. */
  .order-two { grid-template-columns: minmax(0, 1fr); }

  /* A spec row is a short label and a short value at this width, but a couple
     of the values wrap, and a wrapped value hanging right against a label on
     the left reads as two unrelated columns. */
  .spec-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25em;
  }

  .spec-row dd { text-align: left; }

  /* The second line is the wider of the two by design, and at 375px it is
     within a few pixels of the gutter — one notch narrower and it wraps,
     which drops CLOSER onto a line by itself and loses the whole lockup. So
     below the breakpoint it is sized off the viewport with a lower floor and
     tracked a little tighter, which holds it on one line to about 320px. */
  .gear-sub {
    font-size: clamp(21px, 5.6vw, 30px);
    letter-spacing: 0.03em;
  }
}

/* The loop is the whole point of the title card, so it keeps running; only
   the decorative nudge and the transition easing are dropped. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue { animation: none; opacity: 0.8; }
  /* The tour still turns — js/tour.js keeps it locked to the scroll position
     and only drops the panel stepping, so nothing moves on its own.

     The cards keep their fade. A card that crossfades where the reader put it
     is not the kind of motion this preference is protecting against, and
     killing the transition here is what made them snap in rather than arrive.
     Only the slide is dropped, since that is travel the reader did not ask
     for; the opacity ramp stays. */
  .tour-card { transform: none; transition: opacity 0.62s ease; }
  .tour-bar::before { transition: none; }

  /* Same call as the tour cards above, for the same reason: a rig that
     dissolves where the reader scrolled it is not motion they did not ask
     for, so the dissolve stays — and that now explicitly includes the blur.

     The blur is deliberately NOT dropped here. This preference is about
     movement — travel, parallax, zoom, spin, the things that provoke a
     vestibular response — and a piece going out of focus does not move at
     all: it does not translate, scale or rotate by a single pixel. Killing it
     was over-applying the rule, and it cost every reader with the preference
     set the entire character of the section for no accessibility gain.

     What does go is the stagger, which is the one genuinely time-driven thing
     here: a chain drawing itself piece by piece for a second and a half after
     the page has stopped is a sequence playing at the reader rather than for
     them. At 0ms the whole rig arrives together and the section is over when
     the scroll stops.

     The two leads stay. They are not decoration — they are what keeps the
     outgoing paragraph from sitting smeared on top of the incoming one, which
     is a legibility problem, and it gets worse under this preference rather
     than better. The bar needs no override at all: it never had a transition,
     and only ever moves as far as the reader scrolled it. */
  .why { --why-stagger: 0ms; }

  /* The card still lights, the ring just stops being drawn round it. Dropping
     the sweep leaves --lc-sweep at its resting full turn, so the whole ring
     crossfades in with the bloom — which is the same hover, minus the travel
     this preference is asking not to see. */
  .light-card::before { animation: none !important; }
}