/* ══════════════════════════════════════════════════════════════════════════
   THE MOBILE HEADER — one sheet, shared by every static page that wears .ghead
   (/approach, /academy, /membership-request, /tiers).

   WHY THIS FILE EXISTS. .ghead is snapshotted verbatim into each of those four
   documents, byte-identical, so a header fix written inline is the same edit made
   four times — which is precisely how the four drawers on this site drifted apart.
   One sheet, linked after each page's inline <style>, is the only version that
   cannot fall out of step with itself.

   WHAT IT FIXES. .ghead kept its desktop grid — brand | eyebrow | right — at every
   width. With the eyebrow hidden below 860 the two 1fr columns split the screen,
   so on a 375px phone the brand column was ~98px wide and
   "Salon Privé · Monte-Carlo" broke onto FOUR lines beside a crest, while the
   account pill and Menu fought over the other half. The apex's own phone header
   (.m-top) had already solved this: language left, wordmark centred on one line,
   Menu right. This brings the four static pages to that same arrangement, so the
   header reads the same everywhere.

   THE BREAKPOINT is the apex's own phone fork, not a width of this file's
   choosing — see the note above the query. (For the record, the sub-line's own
   wrap begins below ~534px: the brand column is (W − 40 padding − 20 gaps) / 2
   and the crest + gap + sub-line need ~237px. Forking at the apex's 820 is
   strictly earlier, so the wrap can never be reached.)

   Everything here is inside a max-width query. Desktop is untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* THE BREAKPOINT IS THE APEX'S OWN FORK, not a number of its own.
   This first shipped at 560 — the width where the sub-line actually starts to
   wrap. But the apex swaps to its phone header at 820 (and on any coarse-pointer
   device up to 1024), so between 561 and 820 the homepage showed its centred
   phone header while these pages still showed the wide-screen one, crest and all.
   The two only agree if they fork on the SAME condition, so this carries the
   house phone media list verbatim — the same string the apex stylesheet, the
   ambience loop, the hash-rescuer, the desktop router and the injected drawer
   all use. Four files, one definition of "a phone". */
@media (max-width:820px), (max-width:1024px) and (pointer:coarse){
  /* ── the row: language | wordmark | Menu, mirroring the apex .m-top ── */
  .ghead{ column-gap:8px; padding-left:16px; padding-right:16px }
  .ghead::after{ left:16px; right:16px }

  /* The wordmark moves to the centre column, which is `auto` — so it is sized by
     its own content instead of half the screen, and nothing has to wrap. */
  .g-brand{ grid-column:2; justify-self:center; gap:0 }
  .g-brand img{ display:none }        /* the apex phone header carries no crest */
  .g-wd{ text-align:center }
  .g-wd b{ font-size:16px; letter-spacing:.16em }
  .g-wd small{ margin-top:3px; font-size:7px; letter-spacing:.2em; white-space:nowrap }

  .g-right{ grid-column:3; justify-self:end }
  /* Member's Access already lives in the drawer — which is the same reasoning that
     hid this pill's LABEL at this width. The apex phone header carries no account
     control at all, and the lone icon it left behind was the third thing competing
     for a half-width column. */
  .g-access{ display:none }

  /* The language pill belongs in the header row, at the left, as it is on the apex
     — not centred underneath it. It is a SIBLING of .ghead rather than a child, so
     it cannot join the grid; fixed positioning puts it in the same band and keeps
     it there while the sticky header stays pinned. The offset is the header's own
     arithmetic: padding-top 12px + half of the 42px control row − half the pill. */
  .lang-top{ position:fixed; left:16px; top:calc(env(safe-area-inset-top,0px) + 21px);
             transform:none; z-index:61 }
  .lang-top button{ padding:5px 10px; font-size:9.5px }
}

/* Below 380 the three controls are genuinely tight — buy the wordmark room by
   trimming the pill and the Menu rather than letting anything wrap again. */
@media (max-width:380px){
  .ghead{ padding-left:12px; padding-right:12px }
  .ghead::after{ left:12px; right:12px }
  .lang-top{ left:12px }
  .lang-top button{ padding:5px 7px; font-size:9px; letter-spacing:.04em }
  .g-wd b{ font-size:15px }
  .g-wd small{ font-size:6.5px; letter-spacing:.16em }
}