/* ============================================================
   Main menu — the site's primary navigation
   A self-contained component: put ONE class on a <nav> and drop
   the links inside. No .grid / .col-* utilities needed on the
   markup — the component lays its own children out on the DLS
   4-column grid internally, so every page uses it the same way.

     <nav class="site-nav" aria-label="Primary">
       <a class="brand" href="index.html">vanStelko</a>
       <a href="essays.html" aria-current="page">Essays</a>
       <a href="work.html">Work</a>
       <a href="about.html">About</a>
     </nav>

   Layout — two treatments, one breakpoint (640px):
     • Large screen — each item occupies one grid column and sits
       LEFT-ALIGNED within it (24px edge margins, 8px gutters, 4
       fluid columns). The items line up on the grid, with trailing
       space after the last one.
     • Small screen — the grid is dropped. Each item HUGS its own
       label and the leftover space is divided EVENLY between them
       (space-between): the brand hugs the left margin, About hugs
       the right, equal gaps in between. This matches the Figma
       "Article Mobile" frame.

   Hierarchy — the brand and the current section are SemiBold; the
   current section is full-strength (--fg), every other link is
   --muted until hovered. All colour, type and spacing come from
   the DLS tokens; nothing here is hard-coded.

   Behaviour — the bar is STICKY: it pins to the top of the viewport
   and the page scrolls beneath it. It stands exactly one Table row
   tall (styles/table.css) — the same 16px cell padding over the 24px
   "Small" line-height — so the primary chrome and the densest content
   row share one height.

   On SMALL screens it also AUTO-HIDES: the bar tucks up out of view
   while you scroll down and returns the instant you scroll up (or
   reach the top of the page), so a phone spends none of its height
   on chrome you aren't using.
   ============================================================ */

/* The bar's own height, derived from the very tokens it's built from
   (below): 16px padding top + bottom, one 24px "Small" line, plus its
   1px hairline = 57px. Sticky content on any page offsets by this so it
   pins BELOW the bar, never under it. Published here — from the nav's
   canonical home — so pages reference it instead of re-deriving it. */
:root { --nav-height: calc(var(--space-16) * 2 + var(--lh-sm) + 1px); }  /* 57px */

/* The <site-nav> web component (scripts/site-nav.js) renders the bar
   as light DOM. `display: contents` makes its host box vanish so the
   inner <nav> behaves as a direct child of <body> — layout identical
   to hand-written markup. */
site-nav { display: contents; }

.site-nav {
  /* Sticky: the bar stays pinned to the top of the viewport as the
     page scrolls. It needs an opaque background so content can't show
     through beneath it; its hairline (below) reads as the bar's bottom
     edge — but only once the page is scrolled. */
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);

  /* The component owns its grid, mirroring styles/grid.css so the
     markup never needs the .grid + .col-1 utilities. */
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);

  padding-block: var(--space-16);        /* 16px — one Table cell's padding (row-height parity) */
  align-items: end;                      /* labels sit on a shared baseline (items-end)  */

  /* The hairline under the bar. It's always 1px in layout — so
     --nav-height stays 57px and nothing reflows — but stays TRANSPARENT
     while the page is at the top, letting the bar sit flush and clean.
     Once scrolled, JS adds .is-stuck and the line fades in, separating
     the floating bar from the content sliding under it. */
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.site-nav.is-stuck { border-bottom-color: var(--line); }

.site-nav a {
  min-width: 0;                          /* let a label shrink inside its column, never overflow */
  font-size: var(--text-sm);
  line-height: var(--lh-sm);             /* 24px — matches a Table cell, so the bar stands one row tall */
  letter-spacing: var(--tracking-normal);/* sm sits at normal tracking */
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-nav a:hover { color: var(--fg); }

/* The brand always reads as SemiBold, current or not. */
.site-nav .brand { font-weight: var(--weight-semibold); }

/* The section you're on: SemiBold + full-strength. */
.site-nav a[aria-current="page"] {
  font-weight: var(--weight-semibold);
  color: var(--fg);
}

.site-nav a:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: var(--space-4);
  border-radius: 2px;
}

/* --- Small screens --------------------------------------------
   Drop the column grid. The row becomes a flex line where each
   link hugs its label and the space between them is shared out
   evenly (space-between) — brand pinned to the left margin, About
   to the right, equal gaps between. The 24px edge margins and the
   items-end baseline carry over from the base rule.
   640px matches the breakpoint the DLS pager already uses. */
@media (max-width: 640px) {
  .site-nav {
    display: flex;
    justify-content: space-between;
    column-gap: var(--space-8);   /* a floor so labels never touch when space runs out */
  }
  .site-nav a {
    flex: 0 0 auto;               /* hug the label — never stretch or shrink */
  }

  /* Auto-hide. Screen space is scarce here, so the bar gets out of the
     way: it rides up out of view while you scroll DOWN, and drops back
     the moment you scroll UP — the menu is one flick away without ever
     costing a row of reading. It also returns whenever the page is back
     at the top. JS owns only the .is-tucked toggle (scripts/site-nav.js);
     the look and the timing live here.

     It stays STICKY and keeps its 1px in layout, so --nav-height is
     unchanged and nothing on the page reflows as the bar comes and goes. */
  .site-nav {
    transition: border-color 0.15s ease, transform 0.25s ease;
  }
  .site-nav.is-tucked { transform: translateY(-100%); }

  /* Motion off: the bar still hides and returns, it just cuts instead
     of sliding — same behaviour, no travel. */
  @media (prefers-reduced-motion: reduce) {
    .site-nav { transition: border-color 0.15s ease; }
  }
}