/* masthead-lockup.css — SINGLE SOURCE OF TRUTH for the globe + wordmark lockup.
 *
 * Shared by index.html (homepage) and reader.html (reader). Both pages render
 * the same lockup markup — a #g-stacked globe + stacked wordmark when expanded,
 * a #g-single globe + single-line wordmark when condensed, inside [data-mast]
 * wrappers — so the sizing lives here once. Keeping it in two files is what let
 * the headers drift before (the condensed globe was scaled on one page but not
 * the other). Page-specific masthead chrome — the header element, its padding,
 * the right-side controls — stays in index.css / reader.css.
 *
 * The phone rules match on both pages via the bare [data-vp="phone"] ancestor
 * selector (the homepage sets data-vp on [data-stage]; the reader on #stage).
 */

/* Scale each generated globe SVG (authored at a fixed px) to fill its slot. */
#g-stacked svg, #g-single svg { width: 100%; height: 100%; }

/* ---- phone: expanded (stacked) lockup ---- */
/* 84px globe hard against the left edge; wordmark tightened and pulled in 5px so
   "Systems" clears the globe's outer ring. */
[data-vp="phone"] #g-stacked { width: 84px !important; height: 84px !important; margin-left: -8px !important; }
[data-vp="phone"] [data-mast="stacked"] > span:last-child { margin-left: 5px !important; }
[data-vp="phone"] [data-mast="stacked"] > span:last-child > span { font-size: 26px !important; line-height: 1.10 !important; }
[data-vp="phone"] [data-mast="stacked"] > span:last-child > span:nth-child(2) { font-size: 17.6px !important; line-height: 1.05 !important; }

/* ---- phone: condensed (single) lockup ---- */
/* 44px globe, tight 4px gap, 28px wordmark. */
[data-vp="phone"] #g-single { width: 44px !important; height: 44px !important; margin-left: -8px !important; }
[data-vp="phone"] [data-mast="single"] { gap: 4px !important; }
[data-vp="phone"] [data-mast="single"] > span:last-child { font-size: 28px !important; white-space: nowrap; }

/* Narrow phones (<=339px, e.g. iPhone SE): step the condensed lockup down a notch
   so the wordmark still clears the theme/menu controls. */
@media (max-width: 339px) {
  [data-vp="phone"] #g-single { width: 40px !important; height: 40px !important; }
  [data-vp="phone"] [data-mast="single"] > span:last-child { font-size: 24px !important; }
}