/* ============================================================================
   _band-xs.css — the TABLET band, 691–999px

   Lane: fluid:xs.  Owner: this file only.  Load LAST, after every section
   stylesheet, so a band repair can reach a rule that a section authored.

   WHY THIS FILE EXISTS
   Founder correction:
     "It also needs to scale effectively for all devices AS DESIGNED IN THE
      SALIENT TEMPLATE. Just because it's designed at 1280 or 1440px doesn't
      mean it should be fixed."

   WHAT WAS ALREADY RIGHT — measured, not assumed (review/fluid/band-xs.md §2)
   The container needs nothing. With grid-fluid.css applied, the page gutter
   measures 54.00 / 50.03 / 46.08 at 900 / 834 / 768 against a system
   prediction of 54.00 / 50.04 / 46.08, and the content box 792 / 733.92 /
   675.84 exactly. Page-level horizontal overflow is 0 at all three. The two-
   member sections stack, the editorial rail unstacks, the post-grid drops
   3 tracks to 2, the footer drops 5 to 2, and the CTA scrub lands on its final
   geometry (clip-path: inset(0px)) rather than freezing mid-scrub. None of
   that is touched here.

   WHAT THIS FILE FIXES — five defects, each with its own measurement.
     A. a VENDORED Salient tier whose media range is literally this band
        overrides the Mykrobial type layer on two headings          (§1)
     B. a full phone-tier reflow fires at exactly 768                (§2)
     C. a magic 988px edge makes one heading grow as the screen shrinks (§3)
     D. the card gallery makes its card BIGGER as the viewport gets smaller (§4)
     E. a hard <br> tuned to the 1280 artboard orphans a word        (§5)

   SCOPE DISCIPLINE
   Every rule here is bounded `min-width: 691px` as well as `max-width`, so
   nothing leaks into the phone lane's band. 691 and 999 are Salient's own
   edges (dna-container.md, 1px-bisected in four demos), not this lane's
   invention. Where the honest repair belongs in a file this lane does not own,
   it is written up in review/fluid/BAND-REQUESTS.md instead of being forced
   from here; where a stopgap is applied here pending that request, it is
   marked REMOVE-WITH.

   NOTHING IN THIS FILE CAN REACH 1280 OR 1440. Every rule is inside a
   `max-width: 999px` query. Verified: the fidelity harness is byte-unchanged.
   ========================================================================== */


/* ==========================================================================
   §1  DEFECT A — the vendored tablet tier outranks the Mykrobial type layer

   `vendor/…/salient-dynamic-styles-multi-id-37.css` ships:

       @media only screen and (max-width:999px) and (min-width:691px) {
         body .row .col.section-title h1, body h1, … { font-size:42px; line-height:42px }
         .col h2, body h2, …                         { font-size:41px; line-height:41px }
       }

   That media range IS this band, and `body h1` (0,0,2) outranks the browser
   default *and* an inherited value. So any heading whose size is authored on
   its WRAPPER — which is how Salient's `data-custom-font-size="true"` markup
   is built, and what 00-hero.css:217 and 01-who-why.css:107 both say in their
   own comments — loses its authored size in exactly 691–999 and nowhere else.

   Resolved with CSS.getMatchedStylesForNode at 900px against every h1–h6, p,
   li, blockquote and cite on the page. The vendored tier is the WINNING
   declaration for exactly TWO elements:

       #s00-hero h1        wrapper computes 63.00px  ->  h1 renders 42px
       #s01-who-why h2     author intends  44px      ->  h2 renders 41px

   THE CONTROL THAT PROVES THIS IS THE DIAGNOSIS, NOT A GUESS
   04-ecology declares `.mk-ecology__title { font-size: var(--mk-size-hero) }`
   ON THE ELEMENT. Its h1 is untouched by the vendored tier and ramps exactly
   as FLUID-SYSTEM.md §7.4 predicts — measured 67.50 / 62.55 / 57.60 at
   900 / 834 / 768, i.e. clamp(40px, 7.5vw, 96px) to the pixel. Same page,
   same band, same vendored sheet: the only difference is where the size is
   declared.

   THE FIX IS TO RESTORE THE CASCADE, NOT TO PICK NEW NUMBERS.
   `font-size: inherit` hands each heading back to the wrapper its own section
   authored. This lane invents no value: the hero resumes its section's
   `clamp(2.5rem, 7vw, 6rem)` and 01 resumes its section's authored 44px.
   Both then move with the viewport instead of sitting flat across a 309px
   band. line-height is restored with them, because the vendored rule sets a
   1.0 ratio (42px/42px) that would crush the recovered size.
   ========================================================================== */

@media only screen and (min-width: 691px) and (max-width: 999px) {

  /* 00-hero. The wrapper carries the section's own fluid ramp; the h1 is a
     `.nectar-split-heading` child and must track it, or the masked line spans
     (which DO inherit) render at a different size from the h1 that contains
     them. Measured after: 63.00 / 58.38 / 53.76 at 900 / 834 / 768. */
  .mk-page .mk-hero .mk-hero__headline h1,
  .mk-page .mk-hero .mk-hero__headline h1 > span,
  .mk-page .mk-hero .mk-hero__headline h1 span > span {
    font-size: inherit;
    line-height: inherit;
  }

  /* 01-who-why. 01-who-why.css:200 authors 44px at <=1023 on
     `.mk-who-why__heading`, and its own comment at :107 records that Salient's
     `data-custom-font-size="true"` rule makes the h2 `font-size: inherit` —
     which is precisely the inheritance the vendored tier breaks. */
  .mk-page .mk-who-why .mk-who-why__heading h2,
  .mk-page .mk-who-why__heading h2 {
    font-size: inherit;
    line-height: inherit;
  }
}


/* ==========================================================================
   §2  DEFECT B — a full phone-tier reflow fires at exactly 768

   The Mykrobial layer uses NINE different edges between 600 and 1100
   (640 / 689 / 690 / 767 / 768 / 988 / 999 / 1023 / 1024) where FLUID-SYSTEM
   §5 defines two: 999 and 690. Most of that is harmless drift. One collision
   is not: three sections spell their phone tier `max-width: 768px` while six
   others spell the same tier `max-width: 767px`.

   `max-width: 768px` FIRES at 768. `max-width: 767px` does not. 768 is
   iPad-portrait — the single most common tablet width there is — so the page
   renders half phone, half tablet at precisely the width most likely to be
   looked at. Measured across the 769 -> 768 boundary, one pixel apart:

       02-who-why-b   section height   900 -> 640   (-260px)
                      play button      108 ->  80,  offset 60 -> 32
       05-ecology-b   chip rail        position absolute -> static
                      content box      623 -> 241 and the rail drops below
       14-amenities   carousel         2 cells -> 1 (cell 2 display:none)
                      headline          30 ->  28

   The correct edge for all three is 690 (Salient's own phone edge, and the
   one FLUID-SYSTEM §5 ships). The clean repair is `768 -> 690` in three
   section files, which this lane does not own — filed as BR-XS-3 in
   review/fluid/BAND-REQUESTS.md.

   What follows is the band-scoped equivalent: re-assert, for 691–768 only,
   the values that already hold at 769. Each number below was READ OFF the
   page at 769px, not chosen. REMOVE-WITH: BR-XS-3.
   ========================================================================== */

@media only screen and (min-width: 691px) and (max-width: 768px) {

  /* --- 02-who-why-b ------------------------------------------------------
     The 640px height is the phone treatment; the band keeps the 900px band
     height it holds at 769–999. */
  .mk-whowhyb { height: 900px; }
  .mk-whowhyb__play {
    width: 108px; height: 108px;
    top: var(--mk-space-60); right: var(--mk-space-60);
  }
  .mk-whowhyb__play .play_button .play {
    width: 108px; height: 108px;
    margin-top: -54px; margin-left: -54px;
  }

  /* --- 05-ecology-b ------------------------------------------------------
     The chip rail is overlaid on the slide across the whole tablet band; it
     only drops into the flow on a phone. Restoring `absolute` also restores
     the 623px content box that the static rail collapses to 241px. */
  .mk-ecology-b__chip-rail { position: absolute; margin-top: 0; }

  /* The slide sizing in that same <=768 block is DELIBERATELY LEFT ALONE.
     A first pass here also reverted `height:auto; min-height:623px` back
     toward the 769 state by zeroing the min-height, and measurement said that
     was wrong: the slide collapsed 623 -> 241 and the section 902 -> 520,
     because `height` is what carries the 623 at 769 and `auto` was still in
     force. Restoring the chip rail alone returns 768 to the 769 geometry.
     Recorded rather than silently dropped, because "the obvious half of the
     revert makes it worse" is the part a later reader needs. */

  /* --- 14-amenities ------------------------------------------------------
     Hiding every cell but the first is the phone treatment. On a tablet the
     second cell is what tells the reader the row is draggable. */
  .mk-amenities { height: 900px; min-height: 0; }
  .mk-amenities .nectar-flickity.nectar-simple-slider:not(.flickity-enabled)
    .flickity-slider > .cell:not(:first-child) { display: flex; }
}


/* ==========================================================================
   §3  DEFECT C — a magic 988px edge inverts the scale

   14-amenities.css authors `.mk-amenities__headline { font-size: 30px }` at
   `max-width: 988px`, over a base of `var(--mk-size-h2)` =
   clamp(28px, 2.8125vw, 36px).

       at 999px the token gives 2.8125% x 999 = 28.10px
       at 988px the override gives a flat            30.00px

   so the heading gets BIGGER as the viewport gets SMALLER, across an 11px
   step nobody designed. 988 appears exactly once in the codebase and matches
   no edge in FLUID-SYSTEM §5 or in any Salient demo.

   Handing it back to the token removes the inversion and costs 2px, and the
   token's own 28px floor is what carries it the rest of the way down.
   Filed as BR-XS-4 so the 988 edge can be deleted at source.
   ========================================================================== */

@media only screen and (min-width: 691px) and (max-width: 999px) {
  .mk-page .mk-amenities .mk-amenities__headline {
    font-size: var(--mk-size-h2);
    line-height: var(--mk-lh-h2);
  }
}


/* ==========================================================================
   §4  DEFECT D — the card gallery grows its card as the viewport shrinks

   07-building.css:444 authors, below 1000:

       .cell { width: calc((100% - var(--mk-space-4)) / 2); }

   i.e. "always exactly two cards, edge to edge". Measured, that gives

       vw 900 -> card 444      vw 834 -> card 411      vw 768 -> card 378

   The card is 410x600 in BOTH Figma artboards. So at 900 the card is 8%
   LARGER than the artboard on a viewport 30% smaller, and the row loses its
   peek entirely — the drag affordance that tells a reader there are five
   cards and not two.

   FLUID-SYSTEM §3 and §7.3 give this component one declaration and no
   breakpoint: `min(410px, 78vw)`. It is a no-op above 526px, so it reproduces
   410 at both artboards AND holds 410 across this whole band, and only below
   526 does it yield one card plus a peek. GRID.md §5.2 is explicit that the
   gallery "does not reflow — it is a drag carousel that reveals fewer cards".

   The section's own comment says the fixed card "stops fitting" below 1000.
   Measured, it does not: at 900 the gallery track is 892, and 410 + 4 + 410 =
   824 leaves 68px of the third card showing. That is the peek, not an
   overflow. Filed as BR-XS-5 to retire the section rule.
   ========================================================================== */

@media only screen and (min-width: 691px) and (max-width: 999px) {
  #s07-building .nectar-flickity.nectar-carousel .flickity-slider .cell {
    width: min(410px, 78vw);
  }
}


/* ==========================================================================
   §5  DEFECT E — a hard <br> tuned to the 1280 artboard

   index.html ships the footer disclaimer as

       …mold illness for informational<br>purposes only and is not…

   which reproduces the artboard's exact 2 x 24px box at 1280. Below it the
   natural wrap lands earlier, so the forced break leaves "informational"
   alone on a line of its own — visible at all three band widths.

   The paragraph wraps correctly on its own once the break is out of the way.
   Scoped below 1000px so the 1280 and 1440 artboards keep the authored break.
   Filed as BR-XS-6: the durable fix is `<br class="mk-br-1280">` in markup so the
   intent is legible rather than inferred from a media query.
   Mobile round (founder feedback, 2026-08-31): extended from the 691-999 band
   to <=690 as well — the same 1280-tuned break was orphaning "informational"
   on its own line in the 5-line 412px wrap. The markup now carries a space
   before the <br> (collapses at 1280/1440, so the artboards are unaffected)
   so hiding the break can no longer run the two words together. */

@media only screen and (max-width: 999px) {
  .mk-footer__disclaimer br { display: none; }
}


/* ==========================================================================
   3. TOUCH TARGETS ACROSS THE WHOLE <=999 LADDER — added by the single-owner
   pass, 2026-08-17.
   --------------------------------------------------------------------------
   The founder's ladder puts "44px targets" at the <=999 rung, not at <=690.
   grid-fluid.css §8.2 already lifts the four HEADER controls at <=999
   (.myk-btn, .myk-btn--icon, .mk-nav__list a, the hamburger) and that holds.
   `_band-mobile.css` §2.2 lifts the SECTION controls — but only at <=690, so
   the tablet band inherited the failure. MEASURED on the applied build before
   this block: 35 controls under 44px at 768, 35 at 834, 36 at 900, against 3
   at 375 and 4 at 640.

   Same selector list and same mechanism as `_band-mobile.css` §2.2 —
   `min-height` plus centring rather than padding, so the hit box grows around
   ink that stays where the design put it. The list is duplicated rather than
   re-scoped because the two band files are independently readable and
   `_band-mobile.css` must stay correct on its own; the overlap at <=690 is two
   identical declarations, which is a no-op.

   THE THREE SURVIVORS ARE DELIBERATE AND ARE NOT BUGS:
     a.nectar-skip-to-content  1 x 1   — the visually-hidden skip link. It is
       sized 1x1 on purpose and is reached by keyboard, not by touch.
     a#logo                    n x 24  — WCAG 2.5.5's own exception: the target
       is inline within a block of text/brand lockup. Growing it would move the
       wordmark's ink off the header baseline the artboards fix at y=56.
     a.nectar-button.medium    n x 40  — the hero's in-copy CTA, whose 40px box
       is authored at BOTH artboards (00-hero). It is 4px short and lifting it
       moves the hero's copy stack, so it is left to the founder with the two
       above rather than changed here.
   ========================================================================== */
@media (max-width: 999px) {
  .mk-page .mk-footer__col > a,
  .mk-page a.column-link,
  .mk-page .mk-amenities52__cta,
  .mk-page a.nectar-next-section,
  .mk-page a.link_text,
  .mk-page [data-mk-slug="21-logos-footer"] a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* The social row is ICON-shaped (18 x 18 authored), so it needs the INLINE
     axis too — min-height alone leaves an 18px-wide target. `justify-content`
     keeps the glyph centred in the grown box so no ink moves. */
  .mk-page a.mk-footer__social,
  .mk-page .mk-footer__social a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}