/* =========================================================
   MALEA · 11 · Portrait tablets refine — iPad / Air / Pro 11"
   ---------------------------------------------------------
   Range: portrait, 761–959px (iPad 10.2 @810, iPad Air @820,
   iPad Pro 11" @834). This middle band kept the LOOSE 08 rhythm
   (130px section padding → 260px gaps, 94px heading→content) and
   full-height "statement" screens (Philosophy / quotes) that left
   huge voids on a tall portrait canvas.

   NOT covered here on purpose:
     · iPad mini (744) → already tightened by the mobile layer 09.
     · iPad Pro 12.9" portrait (≥960) → layer 10.
     · Phones (≤760) → layer 09.

   Loaded LAST. ►  TO ROLL BACK: remove this file's <link>.

   Applies (from the audit):
     A · Tighter, even vertical rhythm (section gaps & heading gaps)
     B · Philosophy + pull-quotes → normal flow (kills the voids)
     C · Centre the horizontal musician cards (no dead space right)
   ========================================================= */

@media (orientation: portrait) and (min-width: 761px) and (max-width: 959px) {

  /* ---------- A · Vertical rhythm ----------
     Was: --vr-standard 11vh→130 (260px between sections),
          --vr-dense 8vh→94 (heading→content),
          reviews on --vr-generous (153, out of step).
     Now: one tighter, consistent scale. */
  :root {
    --vr-standard: clamp(56px, 7vh, 84px);   /* section padding → ~80; gap 260 → ~160 */
    --vr-dense:    clamp(36px, 4.5vh, 56px);  /* heading → content → ~53 (was 94) */
    --vr-generous: clamp(56px, 7vh, 84px);    /* reviews onto the same rhythm */
  }

  /* ---------- B · Kill the full-height voids ----------
     On a tall portrait the 100svh statement / 70svh quote screens
     floated a tiny block in ~700px of emptiness. Make them flow. */
  #philosophy {
    display: block;
    min-height: 0;
    padding-block: var(--vr-standard);
  }
  #philosophy .philo__inner { padding-block: 0; }
  .quote-screen { min-height: 0; padding-block: clamp(48px, 6vh, 76px); }

  /* ---------- C · Centre the horizontal musician cards ----------
     The single-column horizontal cards left ~175px of dead space on
     the right. Tighten the column to the content width and centre it
     (08 already sets margin-inline:auto), and centre the card content. */
  .mus__grid { max-width: 660px; }
  .mus__card { justify-content: center; }

  /* ---------- E · Identity — match text height to the photo ----------
     Photo (aspect 4/5 in the 44% column) is ~370px tall; the
     title + sub + 4-item list ran ~506px, so the centred photo
     floated short beside a much taller text block. Keep the photo as
     is and COMPRESS the text vertically: tighten the gap under the
     subtitle and the per-row padding of the credentials list so the
     text column ≈ the photo height (both then centre cleanly). */
  #identity .identity__sub { margin-bottom: clamp(16px, 2.2vh, 22px); }
  #identity .identity__list li { padding-block: clamp(9px, 1.4vh, 11px); }

  /* ---------- F · Pull-quotes · Direction A (editorial accent) ----------
     Same treatment as the phone layer, scaled for the wider portrait canvas:
     a touch more size for presence, a tight byline that belongs to the quote,
     and a short gold rule above as an anchor. Larger portrait iPads inherit
     the same tablet quote principle from 08-tablet-portrait. */
  .bigquote__text { font-size: clamp(30px, 4vw, 34px); line-height: 1.24; font-weight: 300; letter-spacing: .015em; }
  .bigquote__attr { margin-top: clamp(16px, 2vh, 22px); letter-spacing: .2em; }
  .bigquote::before {
    content: "";
    display: block;
    width: 48px; height: 1px;
    margin: 0 auto clamp(24px, 3vh, 32px);
    background: var(--gold-soft);
  }
  /* Last quote (--wide): Portfolio above supplies its own padding-bottom while
     the image-led Final below has padding-top:0 → symmetric quote padding read
     as "pressed to the photo". Asymmetric padding (small top, larger bottom)
     evens the content-to-content air before/after. */
  .quote-screen--wide { margin-block: 0; padding-top: clamp(2px, 0.5vh, 10px); padding-bottom: clamp(76px, 9vh, 110px); }
}