/* ---- SITE NAV ----
   A persistent index, top-left, balancing .lang-toggle top-right.

   WHY THIS EXISTS
   ---------------
   The owner — the man the site is about, and an older reader — said he loved it
   but could not get around it. He was right, and the measurement was blunt:
   thirteen of the twenty-six English pages had ZERO links to any other page.
   Land on /pool or /leslie or /stair and the only way out was back to a
   thirty-three-screen homepage. Half the site was a cul-de-sac.

   DESIGN CONSTRAINTS, inherited from .lang-toggle which this is a sibling to:
   - Must look like the monograph, not like a plugin. Same DM Mono, same
     uppercase, same letter-spacing, same gutter offsets.
   - Must not collide with .lang-toggle (top-right), .adc-corner (bottom-right)
     or .rail (left-centre, and hidden below 601px anyway).
   - Real <a> links. No JavaScript required to navigate.

   NO DROPDOWNS, deliberately. A hover menu is the wrong instrument for the
   reader who asked for this: it hides the destinations, needs a steady hand,
   and behaves badly on touch. Every destination here is visible and one tap
   away, and the full index lives in the footer of every page for the rest.

   THE SCRIM. The bar is transparent over the hero so the photograph still
   bleeds to the top edge, and turns solid paper once you scroll past it. That
   keeps the drama of the opening frame without asking an older reader to pick
   mono type off a photograph for the whole page. sitenav.js adds .is-solid;
   if the script never runs the bar simply stays transparent and legible,
   because the heroes all carry a scrim already.

   z-index 30 — level with .lang-toggle. Both are navigation and both must stay
   reachable above .adc-corner (20) and .rail (18). */

/* Published height of the bar, so anything that sticks to the top of the
   viewport can clear it instead of hiding underneath. Measured in Chrome:
   101px at 1512 wide, 55px at 390. The spine's .arc__rail is the consumer —
   its date caption sticks at top:0 and the bar landed straight on top of it
   the moment the bar was added to the homepage. */
:root{ --sitenav-h: 6.35rem }

.sitenav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 29;                       /* just under .lang-toggle so they never fight */
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 1.6vw, 1.25rem);
  padding: clamp(.75rem, 2vw, 1.5rem);
  padding-right: clamp(9rem, 24vw, 15rem);   /* clear the language toggle */
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  background: transparent;
  transition: background var(--dur-fast, 150ms) linear,
              box-shadow var(--dur-fast, 150ms) linear;
}

/* Scrolled past the hero: become paper so the type is never fighting a photo. */
.sitenav.is-solid {
  background: var(--paper);
  box-shadow: 0 1px 0 var(--rule);
}

.sitenav a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  /* 44px minimum touch target, per the accessibility floor this site now holds.
     The padding does the work rather than a min-height, so the bar stays slim
     while the hit area does not. */
  padding: .75rem .15rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color var(--dur-fast, 150ms) linear,
              border-color var(--dur-fast, 150ms) linear;
}

.sitenav a:hover,
.sitenav a:focus-visible {
  color: var(--copper-ink);
  border-bottom-color: var(--copper-ink);
}

/* The wordmark reads slightly heavier than its neighbours — it is the way home,
   and on a site where every other page was a dead end that link matters most. */
.sitenav__home {
  font-weight: 500;
  letter-spacing: .16em;
}

.sitenav__sep {
  color: var(--paper-3);
  user-select: none;
}

/* Phones: the wordmark plus the three destinations do not fit beside the
   language controls on one line at 390px without shrinking the type below the
   floor. The spine has a complete Contents control, so its duplicate links can
   disappear. Interior element pages have no Contents control; their three
   destinations move to a deliberate second row instead. */
@media (max-width: 40rem) {
  :root{ --sitenav-h: 3.45rem }
  .sitenav {
    /* THE GAP, not the padding, is the lever here.
       padding-right cannot hold these links back: they are white-space:nowrap
       flex items, so when they do not fit they overflow the padding box rather
       than wrap or shrink. Raising padding-right to 8rem changed nothing —
       measured, Spanish still ended at 282px against a toggle starting at 277.

       Spanish is the binding case and was never measured when this bar shipped:
       LESLIE HOUSE / OBRA / PERSONAS / PÁGINAS ran 5px INTO the language toggle
       at 390px, on every Spanish page in the site, not just the two added here.
       Three gaps at .85rem cost 41px; clamping them to 2vw returns ~17px and
       lands the last link near 265px, clear of 277 with room to spare.
       English keeps more slack than it had. */
    gap: clamp(.5rem, 2vw, .85rem);
    padding: .35rem clamp(.75rem, 3vw, 1rem);
    padding-right: 9.5rem;
    font-size: max(.75rem, var(--text-label));
    letter-spacing: .06em;
  }
  .sitenav__sep  { display: none }
  /* "The build" -> "build", "Every page" -> "pages". Measured: the full labels
     ran to 353px at 390px wide and collided with the language toggle, which
     begins at 277px. */
  .sitenav__drop { display: none }
  /* Contents carries the complete chapter map on the two spine pages. Keeping
     only the wordmark there gives EN, ES and Instagram honest 44px targets
     without duplicating two navigation systems. */
  .sitenav a:not(.sitenav__home) { display: none }
  /* Element pages do not have Contents. Give their primary links a second row
     that uses the full viewport width, while the wordmark and language controls
     retain the first row. The nav remains visible, literal and keyboard-safe. */
  body:has(.el-hero):not(:has(.rail)) .sitenav {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: start;
    column-gap: clamp(1rem, 5vw, 1.5rem);
    row-gap: 0;
    padding-right: clamp(.75rem, 3vw, 1rem);
  }
  body:has(.el-hero):not(:has(.rail)) .sitenav__home {
    grid-column: 1 / -1;
    max-width: calc(100vw - 9.5rem);
  }
  body:has(.el-hero):not(:has(.rail)) .sitenav a:not(.sitenav__home) {
    display: flex;
    justify-content: center;
    min-width: 44px;
  }
  /* 44px minimum, not 40. The first pass used .7rem padding on --text-label
     type and measured 40px — under the floor, and this bar exists for a reader
     who needs the target to be generous. */
  .sitenav a { padding: .8rem .1rem }
}

/* The fixed bar sits over the top of every page. Heroes are full-bleed and
   already carry their own scrim, so they need no offset — but the pages that
   open on flat paper would otherwise start underneath it. */
body:not(:has(.el-hero)):not(:has(.hero)) .sitenav ~ main { padding-top: 3.5rem }

/* Anchor jumps must clear the fixed bar. Without this, clicking "The build"
   lands the target section UNDER the nav — the reader taps a link, the page
   moves, and the heading they were sent to is hidden. scroll-margin on the
   targets rather than scroll-padding on the root, so it applies to real jumps
   and costs nothing elsewhere.

   Derived from --sitenav-h, not a hand-tuned number. This was a flat 5rem (80px)
   while the bar measures 101px at desktop — every anchor landed 21px short, and
   it only LOOKED right because the sections that were tested happen to carry an
   overline above the heading, which absorbed the difference. Any target without
   that buffer landed under the bar. Tying it to the bar's own published height
   means the two can no longer drift apart, and the extra 1rem is breathing room
   so the heading arrives clear rather than flush against the chrome. */
:target,
[id] { scroll-margin-top: calc(var(--sitenav-h, 5rem) + 1rem) }