/*
 * nav, the page header: the dark wordmark small on paper, up to five items, one action.
 * Unforged house identity 3.0.0 Broadside, 2026-08-22. Owner: Andreas. Layer: 03 organisms.
 *
 * Composes the wordmark atom (.u-wordmark), the nav-item molecule (.u-nav-item) and the action atom
 * (.u-action); a page links their sheets before this one. This sheet is layout: where the three sit,
 * how the row folds, how wide the mark is here.
 *
 *   .u-nav            the header: paper, one hairline under it in the ground's rule. Full width on a
 *                     surface; lays out its own content column
 *   .u-nav__inner     the column: measure.document inside the two space.page margins, one space.row
 *                     of padding above and below, a wrapping flex row
 *   .u-nav__brand     the home link around the mark, two line boxes tall as a target (52px at 390,
 *                     56 at 1280). One element in the row carries the mark
 *   .u-nav__mark      the dark wordmark at space.plate wide: 130px at 390 and 320, 196px at 1280,
 *                     over the 120px floor of the dark version and under 240, where the light version
 *                     would take over (logo-usage.md section 4). The wordmark atom's --inline size
 *                     (203 to 218px) leaves no room for the action beside it on a 350px column, so
 *                     the nav sizes the mark itself
 *   .u-nav__list      the items, a list with no markers, the nav-item molecule in each. Five or fewer.
 *                     Pulled one space.row to the start so the first item's text sits on the column
 *                     edge (the molecule pads one row on every side)
 *   .u-nav__action    the action atom, pushed to the end of the row
 *
 * Two rows under 48rem without a script: brand and action on the first row, the list on the
 * second, by flex order and a 100 percent basis. At 320 the mark (130px) and the action (158px) do
 * not share the 280px column, so the action takes its own row at the end and the list follows:
 * three rows, measured. From 48rem one row: the brand at the start, the list and the action at the
 * end (the row justifies to the end and the brand pushes off with an auto end margin), so when the
 * row is too short for everything the action alone folds to a second row and stays at the end: five
 * items hold one row from about 960px, three items from 768. 48rem is the breakpoint the flush
 * device and identity.html use (00_SHARED/README.md, Open 4).
 */
.u-nav {
  display: block;
  /* The containing block of the skip link (base.css .u-skip, absolute, top 0): on focus it sits
     over the header's top start corner, not the page's, so it also renders where a demo puts the
     nav mid page. */
  position: relative;
  background-color: var(--u-color-ground-paper);
  border-block-end: var(--u-line-hairline) solid var(--u-ground-rule);
}
.u-nav__inner {
  box-sizing: content-box;
  max-width: var(--u-measure-document);
  margin-inline: auto;
  padding-inline: var(--u-space-page);
  padding-block: var(--u-space-row);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--u-space-para);
}
.u-nav__brand {
  order: 1;
  display: inline-flex;
  align-items: center;
  min-height: calc(2 * var(--u-space-para));
}
.u-nav__mark { width: var(--u-space-plate); }
.u-nav__action {
  order: 2;
  margin-inline-start: auto;
}
/* Before a plate (.u-plate--under-nav): the nav keeps the mark and the items and the plate keeps
   the action in its foot, so the first viewport carries one mark (the nav's dark version) and one
   action (the plate's), per logo-usage.md rule 9 and tokens action._note. Without the pair the
   composition showed two marks and, on a viewport 1000px or taller at 1280, two actions (craft
   review 2026-08-22). Omit the action in the markup; this rule is the guard. */
.u-nav--before-plate .u-nav__action { display: none; }
.u-nav__list {
  order: 3;
  flex-basis: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-inline-start: calc(-1 * var(--u-space-row));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media (min-width: 48rem) {
  .u-nav__inner { justify-content: flex-end; }
  .u-nav__brand { margin-inline-end: auto; }
  .u-nav__list { order: 2; flex-basis: auto; margin-inline-start: 0; }
  .u-nav__action { order: 3; margin-inline-start: 0; }
}