/* ==========================================================================
   Air Market - v11 mobile density, THE TYPE AND RHYTHM RAMP
   V11-MOBILE-DENSITY-SPEC.md section 4.5, AC3.

   Measured (2026-08-15, 375x812): the listing h1 is 26px at every width
   (store.css:740), every section heading is 21px (store.css:407), the page
   title is 34px (store-v2.css:75) and the Discover headline is
   clamp(30px, 3.6vw, 52px), so 30px on a phone (store-v2.css:124). Apple's
   whole mobile page, measured the same day at the same viewport, sets its
   banner title at about 22px and EVERY section heading at 17px.

   That difference is most of the "text amount versus screen area" complaint.
   A 375px column has room for roughly 40 characters at 17px and roughly 30 at
   26px; the loud heading does not just cost its own extra height, it costs a
   wrap on every line under it. The ramp is the cheapest density in the layer:
   no layout changes, no markup, no risk to any of v9's acceptance criteria.

   BODY TEXT IS NOT IN HERE, deliberately. V9-MOBILE-SPEC.md section 7,
   deviation 5 recorded that a blanket body-text change at 320px is a direct
   risk to AC1 (overflow) and AC4 (clipped text) and left it undone; nothing
   in v11 makes that safer, and the complaint is about headings, not prose.
   The one prose size that does change is the detail lede, which is a hero
   element sized against the h1 it sits under (store-v4.css:67 says so) and
   has to come down with it or it ends up louder than the name.

   LOAD ORDER: this sheet is LAST in the v11 block. It is the only one setting
   bare font sizes on surfaces the other three also touch, so it has to be
   able to win a tie against them. Where it must NOT win - the row name and
   tagline in store-v11-rows.css section 3, which are sized for a row rather
   than for a page - it simply does not name those selectors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HEADINGS.

   Each selector matches the specificity of the rule it overrides, which
   differs per surface: .detail-head h1 and .section-head h2 are unscoped in
   store.css so they stay unscoped here and win on source order, while
   .page-title and .v2-hero-copy h1 carry store-v2.css's five-version prefix
   and it is repeated verbatim.

   The hero headline keeps a clamp rather than a flat size so it still tracks
   the viewport between 480 and 720px, where there genuinely is more room:
   clamp(24px, 6.4vw, 26px) puts 375px at 24px and 406px and up at the 26px
   cap. Its authored <br> is already suppressed under 1180px
   (store-v2.css:140), so nothing here can reintroduce the "boringhalf" defect
   v9 fixed - the space is in app.js now and the break is gone at this width
   either way. */
@media (max-width: 720px) {
  .detail-head h1 {
    font-size: var(--v11-t-detail-h1);
    line-height: 1.2;
  }
  .section-head h2 {
    font-size: var(--v11-t-section-h2);
  }
  /* `.section-head .see-all` is NOT in this ramp, and the omission is
     load-bearing. store-v9-taps.css:446 builds its 44px hit box out of
     `padding: 13px 10px` plus exactly one 18px line, and says so in its own
     comment. Taking the font from 14px to 13px shortens that line, and the
     measured box drops under the touch floor: a probe of Discover at 390px
     read four new sub-44px controls, all of them `a.see-all`, from that one
     declaration. One pixel of heading polish is not worth a tap target, and
     any future rule that touches this element has to reckon with the same
     arithmetic. */
  :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .page-title {
    font-size: 25px;
    letter-spacing: -0.3px;
    margin-bottom: 14px;
  }
  :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-hero-copy h1 {
    font-size: clamp(var(--v11-t-hero-h1-sm), 6.4vw, var(--v11-t-hero-h1));
    letter-spacing: -0.8px;
    line-height: 1.1;
  }
  :root[data-v6="on"] .v6-rec-h {
    font-size: var(--v11-t-section-h2);
  }
}

/* --------------------------------------------------------------------------
   2. THE DETAIL LEDE.

   17px (store-v4.css:67) was chosen to sit "between the 26px h1 and 13px body
   copy" - that sheet's own words. With the h1 at 20px, 17px is no longer
   between anything; 15px restores the interval the original rule was after,
   and it is the difference between a four-line lede and a three-line one at
   this width, which is the line store-v11-detail.css section 2 clamps away.
   Both changes are needed: the clamp alone would hide a line that this size
   makes fit. */
@media (max-width: 720px) {
  :root:is([data-ui="v4"],[data-ui="v5"]) .v4-lede {
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   3. VERTICAL RHYTHM.

   .section is `margin-top: 44px` under v2 (store-v2.css:101) over a 34px base
   (store.css:399). Fourteen sections down a Discover page that is 616px of
   gap, about two and a half phone screens of nothing. 26px is the same
   proportion of a 375px column that 44px is of a 1100px page.

   The section head's own rule (its top border and padding) is left alone: it
   is a hairline that separates sections, and shrinking the gap makes it more
   load-bearing, not less. */
@media (max-width: 720px) {
  :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .section {
    margin-top: var(--v11-section-gap);
  }
}

/* --------------------------------------------------------------------------
   4. THE 480px STEP.

   One step, and only where 375px is already tight. The hero headline's clamp
   handles itself (its floor IS the 480px value), so what is left is the page
   title, which at 25px still wraps to three lines on the longest route names
   at 320px. Everything else in this sheet was sized against a 375px
   measurement and does not need a second pass. */
@media (max-width: 480px) {
  :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .page-title {
    font-size: 23px;
  }
}