/*
 * The masthead, defined once for every page.
 *
 * Only the two rules that differ from the old per-page copies live here; the
 * rest of the header chrome is still inline in the nine older pages. That is
 * deliberate: several of those rules sit inside @media blocks, and lifting a
 * media-scoped rule to the top level once already hid the entire navigation on
 * desktop. Extracting the remainder is its own job with its own verification.
 *
 * Loaded AFTER tokens.css and nav.css, and the matching rules have been
 * deleted from every page's inline <style>, so there is exactly one definition
 * of each and no cascade race.
 */

/* Wider gutter. At 24px the logo sat hard against the edge of the window on
   any viewport narrower than the 1200px max-width.
   
   LONGHAND, not `padding:0 40px`. The shorthand also sets padding-bottom to
   zero, and <main> carries class="wrap", so the shorthand silently wiped the
   page's bottom padding and put the last table back against the footer. */
.wrap{max-width:1200px;margin:0 auto;padding-left:40px;padding-right:40px}

/* "Analytics" is set in the brand display face at the logo's own height, in
   Green Onions, so it reads as part of the wordmark rather than as a caption
   bolted onto it. .brand centres its children so the mark and the cap-height
   line up however the face is scaled. */
/* Vertical padding only, in LONGHAND. The old rule was
   `padding:<top> 0 <bottom>`, whose middle value sets left and right to zero,
   so it cancelled .wrap's gutter and put the logo hard against the edge of the
   container. .header and .wrap are both single-class selectors, so whichever
   loads last wins, and .header did. */
.header{display:flex;align-items:center;gap:16px;
  padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:20px}

/* align-items CENTER, not baseline. With an <img> in the flex row, baseline
   alignment sits the image's BOTTOM EDGE on the text baseline, so the logo
   dropped below ANALYTICS's cap height and the two read as misaligned.
   Centring makes the 26px mark and the 26px cap-height sit on one line. */
.brand{display:flex;align-items:center;gap:12px;min-width:0;margin-right:auto}
.brand img{height:26px;width:auto;display:block}

.brand .sub{font-family:'Staatliches',sans-serif;font-size:26px;font-weight:400;
  line-height:1;letter-spacing:.01em;color:var(--primary)}

@media (max-width:600px){
  .wrap{padding-left:20px;padding-right:20px}
}