/* ═══════════════════════════════════════════════════════════════════════════
   NAV — the single source of truth for the header, on every page.

   WHY THIS FILE EXISTS
   The header used to be defined five separate times: site.css (homepage),
   service.css (AI SEO), blog/blog.css, and inline <style> blocks in work.html,
   team.html and practice.html. Four of those five used a centred three-column
   grid, `grid-template-columns: 1fr auto 1fr`, which centres the link cluster
   in the VIEWPORT rather than in the space left over after the wordmark. Once
   the wordmark grew past its 1fr column the gap collapsed to zero and the links
   slid underneath it. On work.html at 1280px the words "AI SEO" printed
   directly on top of "The Storytelling Collab".

   THE RULE NOW
   The header is a flex row: wordmark on the left, everything else pushed hard
   to the right. The link cluster and the CTA are one right-aligned group, so
   the gap after the wordmark is whatever space is left over and can never go
   negative. Load this file LAST on every page so it wins the cascade over the
   legacy rules it replaces.

   The wordmark scales with the viewport because it has to: at full size the
   wordmark, five links and the CTA simply do not fit on one line below about
   1350px. Rather than let them collide, the wordmark steps down and the header
   goes compact. Below 980px the links wrap to a second row instead of being
   hidden — they used to disappear entirely, which left tablet visitors with no
   navigation at all.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the row ──────────────────────────────────────────────────────────────*/
nav#nav,
.kit-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.9rem;
  column-gap: var(--nav-sep, 3rem);
  padding: var(--nav-pad-y, 1.6rem) var(--nav-pad-x, 3.5rem);
}
nav#nav.scrolled,
.kit-nav.scrolled {
  padding: var(--nav-pad-y-s, 1rem) var(--nav-pad-x, 3.5rem);
}

/* Wordmark holds its line and never shrinks below legibility. */
nav#nav .nav-logo,
.kit-nav .nav-logo {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: var(--nav-mark, clamp(1.5rem, 2.6vw, 3.1rem));
  gap: 0.55rem;
}
nav#nav.scrolled .nav-logo,
.kit-nav.scrolled .nav-logo {
  font-size: var(--nav-mark-s, clamp(1.4rem, 2.3vw, 2.5rem));
}
nav#nav .nav-logo-mark,
.kit-nav .nav-logo-mark {
  height: var(--nav-mark-img, 3.1rem);
  width: auto;
  object-fit: contain;
  flex: none;
}
nav#nav.scrolled .nav-logo-mark,
.kit-nav.scrolled .nav-logo-mark { height: var(--nav-mark-img-s, 2.5rem); }

/* THE FIX: margin-left:auto pushes the whole link cluster to the right edge,
   so the separation from the wordmark is the leftover space, not a fixed
   centre position that the wordmark can grow into. */
nav#nav .nav-center,
nav#nav .nav-mid,
.kit-nav .nav-mid {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--nav-gap, 1.9rem);
  justify-content: flex-end;
  flex-wrap: wrap;
  row-gap: 0.6rem;
}

/* Interior pages: the CTA is its own group, sitting after the links.
   Homepage: .nav-right already holds links AND the CTA together. */
nav#nav > .nav-cta { margin-left: var(--nav-gap, 1.9rem); }
nav#nav .nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: var(--nav-gap, 1.9rem);
  flex: 0 0 auto;
}
.kit-nav .nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--nav-gap, 1.9rem);
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 0.6rem;
}

nav#nav .nav-center a,
nav#nav .nav-mid a,
.kit-nav .nav-right-link,
.kit-nav .nav-mid a {
  font-size: var(--nav-link, 0.78rem);
  letter-spacing: var(--nav-track, 0.02em);
  white-space: nowrap;
}

nav#nav .nav-cta,
.kit-nav .nav-cta {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: var(--nav-cta-pad, 0.65rem 1.4rem);
  font-size: var(--nav-link, 0.78rem);
}

/* ── step-downs ───────────────────────────────────────────────────────────
   Each step buys back the width the previous one ran out of. The numbers are
   not taste: at every breakpoint below, the wordmark plus the link cluster
   plus the CTA measure at least 40px apart. Verified by rendering, not by eye.
   ─────────────────────────────────────────────────────────────────────────*/

@media (max-width: 1400px) {
  nav#nav, .kit-nav {
    --nav-pad-x: 2.6rem;
    --nav-mark: clamp(1.45rem, 2.3vw, 2.5rem);
    --nav-mark-s: clamp(1.35rem, 2.05vw, 2.2rem);
    --nav-mark-img: 2.7rem;
    --nav-mark-img-s: 2.25rem;
    --nav-gap: 1.6rem;
  }
}

@media (max-width: 1240px) {
  nav#nav, .kit-nav {
    --nav-pad-x: 2rem;
    --nav-mark: clamp(1.35rem, 2.05vw, 2rem);
    --nav-mark-s: clamp(1.3rem, 1.9vw, 1.85rem);
    --nav-mark-img: 2.35rem;
    --nav-mark-img-s: 2.05rem;
    --nav-gap: 1.35rem;
    --nav-link: 0.75rem;
    --nav-sep: 2rem;
  }
}

/* Compact header. The wordmark drops to reading size and stops competing
   with the links for the same 400px. */
@media (max-width: 1100px) {
  nav#nav, .kit-nav {
    --nav-pad-x: 1.75rem;
    --nav-pad-y: 1.15rem;
    --nav-pad-y-s: 0.85rem;
    --nav-mark: 1.3rem;
    --nav-mark-s: 1.25rem;
    --nav-mark-img: 1.9rem;
    --nav-mark-img-s: 1.75rem;
    --nav-gap: 1.15rem;
    --nav-link: 0.73rem;
    --nav-sep: 1.5rem;
    --nav-cta-pad: 0.55rem 1.1rem;
  }
}

/* Second row. Previously the links were set to display:none here, which meant
   every tablet visitor got a header with no navigation in it. They wrap now. */
@media (max-width: 980px) {
  nav#nav, .kit-nav {
    --nav-pad-x: 1.5rem;
    --nav-pad-y: 0.95rem;
    --nav-pad-y-s: 0.8rem;
    --nav-mark: 1.25rem;
    --nav-mark-s: 1.2rem;
    --nav-gap: 1.05rem;
  }
  nav#nav .nav-center,
  nav#nav .nav-mid,
  .kit-nav .nav-mid {
    display: flex !important;      /* legacy rules hid this entirely */
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  nav#nav .nav-right { margin-left: auto; }
  .kit-nav .nav-right { margin-left: auto; }
}

/* Phone. Sized so the five links fit on ONE row down to a 360px screen, which
   keeps the header at two rows instead of three. Measured, not guessed: the
   link cluster is 319px at 360px viewport against 325px of available width. */
@media (max-width: 620px) {
  nav#nav, .kit-nav {
    --nav-pad-x: 1.1rem;
    --nav-mark: 1.12rem;
    --nav-mark-s: 1.1rem;
    --nav-mark-img: 1.6rem;
    --nav-mark-img-s: 1.5rem;
    --nav-gap: 0.55rem;
    --nav-link: 0.66rem;
    --nav-sep: 0.9rem;
    --nav-cta-pad: 0.5rem 0.9rem;
  }
  nav#nav .nav-center, nav#nav .nav-mid, .kit-nav .nav-mid { row-gap: 0.4rem; }
}

/* Uppercase tracked links on work/team/practice measured ~40% wider than the
   sentence-case links everywhere else, for the same five words. Normalising
   them is most of the width problem on those three pages, and it makes the
   header read the same on every page. */
nav#nav .nav-center a,
nav#nav .nav-mid a {
  text-transform: none;
  font-family: var(--sans-body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 500;
}

/* Keyboard focus. The header had no visible focus ring anywhere. */
nav#nav a:focus-visible,
.kit-nav a:focus-visible,
.kit-nav button:focus-visible {
  outline: 2px solid var(--gold, #C8985C);
  outline-offset: 3px;
}

/* team.html shipped `.nav-center a::after { transform: scaleX(1) }` with no
   hover state, so every link in the header carried a permanent gold underline
   and the current page was indistinguishable from the other four. The rule
   below restores the intent: hidden by default, drawn on hover or for the page
   you are on. Colour is deliberately NOT set here — work.html and team.html
   read paper over their dark heroes and ink once scrolled, and those pages
   already own that. */
nav#nav .nav-center a::after,
nav#nav .nav-mid a::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
nav#nav .nav-center a:hover::after,
nav#nav .nav-mid a:hover::after,
nav#nav .nav-center a[aria-current]::after,
nav#nav .nav-mid a[aria-current]::after { transform: scaleX(1); }

/* Homepage below the wrap point: the wordmark keeps row one to itself and the
   whole link cluster drops to row two. Without this the five links and the CTA
   stay on one line inside .nav-right and the CTA runs off the right edge of a
   phone screen. */
@media (max-width: 980px) {
  .kit-nav .nav-right { margin-left: 0; flex: 0 0 auto; }
}


/* ── clearance under the wrapped header ───────────────────────────────────
   Below 980px the header is two rows, roughly 100px instead of the ~76px the
   pages were padded for. Three pages ended up with their first line of type
   almost touching the header (work.html measured 12px at 768px). These give
   that space back. Desktop is untouched — every rule is inside the media
   query, and the values were set by measuring, then re-measuring.
   ─────────────────────────────────────────────────────────────────────────*/
/* Desktop: work.html sat 28px under the header at 1440px, the tightest page on
   the site. Everything else clears 49px or more. */
@media (min-width: 981px) {
  .work-intro { padding-top: 9.5rem; }          /* was 8rem */
}
@media (max-width: 980px) {
  .work-intro { padding-top: 9.5rem; }          /* was 8rem  */
  .hero#home  { padding-top: 9.5rem; }          /* practice  */
  .post       { padding-top: 9.5rem; }          /* was 8rem  */
  .masthead   { padding-top: 9.5rem; }        /* was 11rem, but the header
                                                 grew, so hold it at 9.5 and
                                                 let the rule below add back */
}

/* site.css hid the homepage links outright below 380px (`.nav-right-link
   { display:none }`), so the narrowest phones got a header with nothing in it
   but the wordmark and the button. Higher specificity puts them back; the
   phone sizing above is what makes them fit. */
.kit-nav .nav-mid .nav-right-link { display: inline-flex; }