/* The homepage bar in the same place as the site's (Jeanne, 15 Sep).
 *
 * Her Photoshop puts the logo at the far left of the window and the button at
 * the far right, flanking the page, with the menu centred between them — and
 * "position must stay fixed throughout all the pages, including the landing
 * page". The site's Navbar.tsx draws exactly this; these rules move her
 * exported homepage bar (a 1200px centred frame) onto the same geometry:
 * one gutter, clamp(20px, 5vw, 80px), and a 1fr / auto / 1fr grid.
 *
 * Desktop only — the phone keeps her burger menu (home-mobile.css).
 * !important because her runtime re-applies the inline styles on scroll.
 */
@media (min-width: 768px) {
  nav[data-kin-id="kin-6"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  nav[data-kin-id="kin-6"] > div {
    max-width: none !important;
    /* Middle column = the site's Experiences panel (736px), tabs spread
       across it, bell last (home-links.js) — Jeanne, 15 Sep. */
    /* Tabs grouped at their natural width since 15 Sep evening; a fixed
       736px middle squeezed the logo at narrower windows. */
    grid-template-columns: 1fr auto 1fr !important;
    padding-left: clamp(20px, 5vw, 80px) !important;
    padding-right: clamp(20px, 5vw, 80px) !important;
  }
  /* Same optical middle line as the site (Navbar.tsx): measured 15 Sep, her
     bar draws everything 4px lower than the site's, so the logo rides up
     10px (site: 6px) and the menu and button come down 2px (site: 6px) —
     landing on identical pixels on both. */
  [data-kin-id="kin-8"] { justify-self: start !important; transform: translateY(-10px); }
  /* Tabs grouped in the middle, 40px apart, 0.02em tracking (Jeanne, 15 Sep). */
  [data-kin-id="kin-10"] { justify-self: center !important; justify-content: flex-start !important; gap: 40px !important; letter-spacing: 0.02em; margin-right: 0 !important; transform: translateY(2px); }
  [data-kin-id="kin-19"] { justify-self: end !important; transform: translateY(2px); }
}