/* ==========================================================================
   THE PAGE CHROME: MASTHEAD AND NAV ROW. ONE COMPONENT, FIVE PAGES.
   --------------------------------------------------------------------------
   Eames, lines 02518e7a then 90eaf7af. Loaded by index.html, work.html,
   library.html and primes/dossier-claims.html.

   *** RENAMED FROM site-nav.css ONE COMMIT AFTER IT WAS WRITTEN, because the
   masthead joined it and a file called site-nav holding a masthead is the kind
   of name that misleads the next reader. *** They belong in one file for a
   concrete reason rather than tidiness: Reg's fault was that the nav JUMPS
   between pages, and it jumps in both axes - vertically because some pages had a
   masthead pushing the nav down and some did not, horizontally because the nav
   was indented under the wordmark on one page and hard left on another. Those
   two elements have to share a gutter, so they have to share a file.

   *** THE MASTHEAD NOW APPEARS ON ALL FIVE PAGES. THIS REVERSES THE RULING OF A
   FEW HOURS EARLIER *** ("masthead on Round Table ONLY, does not carry over"),
   and Eames named her own reason for the reversal: "I argued the split on
   aesthetic grounds - front door versus working surface - and missed a concrete
   usability fault." The absence of the masthead IS the vertical jump.

   *** WHY ONE FILE AND NOT FOUR TIDY COPIES: THEY DRIFTED BECAUSE THEY WERE
   NEVER ONE COMPONENT. *** Eames: "the nav bar is the only element on every
   page, so a difference there reads as a change of PLACE rather than a change of
   screen. It is the seam you actually cross." There were THREE implementations,
   not the two the line described:

     index.html          Cormorant SC 12px, letter-spacing 1.5px, no uppercase,
                         active underlined, arrow on outbound links
     work + library      Cormorant SC 14px, letter-spacing .7px, UPPERCASE, no arrows
     dossier-claims      Cormorant GARAMOND 14px, letter-spacing .06em, UPPERCASE

   A shared stylesheet is the only version of "identical" that stays true.

   ---- THE ONE DEVIATION FROM "ROUND TABLE IS THE REFERENCE", AND IT IS NOT MINE ----
   *** THE SIZE IS 14px, NOT ROUND TABLE'S 12px, AND THAT QUESTION WAS ALREADY
   RULED ON. *** work.html's own comment, written when the nav was last touched:
   "14px, NOT 12. work.html holds a 14px floor and this was the first thing on the
   page to break it - caught by board_hierarchy_test... THE FLOOR IS THE POINT OF
   THE FLOOR: a menu is an affordance, and shrinking it to look calm is the same
   move as fading it, which the same rule forbids."
   Adopting 12px everywhere would import a floor violation into three pages to
   match a fourth that has no floor - index.html carries 67 declarations below
   14px and work/library carry none. So Round Table's nav moves up 2px and every
   other property is its own.

   ---- UPPERCASE IS DROPPED, AND THAT IS ADOPTING THE REFERENCE ----
   *** Cormorant SC IS A SMALL-CAPS FACE. *** work, library and dossier-claims
   set text-transform:uppercase ON TOP of it, which replaces the small caps with
   full caps - the opposite of the treatment. index.html never did. Eames asked
   for "same small-caps"; removing the transform is what delivers it.

   ---- WHAT EACH PAGE STILL OWNS ----
   Outer geometry only: index is a full-bleed bar, work and library sit in the
   page column, dossier-claims is centred at 860px. "Identical" is the row's
   treatment - face, size, spacing, weight, the active underline, the arrow
   convention - not the width of the page it sits across.

   ---- THE MASTHEAD IS NOT HERE, DELIBERATELY ----
   Wordmark, "Navigator", Updated timestamp and Refresh stay on index.html alone.
   Reg's ruling, and Eames's reason: it makes Round Table's distinction the front
   door rather than accidental drift, and keeps a full letterhead off surfaces
   that are already dense.
   ========================================================================== */

/* *** ONE GUTTER, AND IT IS WHY THE HORIZONTAL JUMP STOPS. *** Reg: "shift the menu screen left."
   Round Table's nav was indented to sit under the wordmark at 40px; Library's sat at its own column
   edge, which is a different distance on every viewport width because the column is centred. The chrome
   is now full-bleed with ONE gutter on all five pages, independent of the content column beneath it -
   960px on Work, 860px on the Dossier, 760px on Library, full width on Round Table. Nothing in the
   chrome moves in either axis as he crosses pages, which was the whole complaint. */
:root { --chrome-gutter: 40px; }

/* THE MASTHEAD. Wordmark, "Navigator", the updated stamp and Refresh - on every page now.
   *** ITS SMALL TYPE CAME UP TO THE 14px FLOOR, THE SAME WAY THE NAV DID. *** Round Table had the
   sub-title at 13px and the stamp and button at 12-13px. Those were unchallenged while the masthead
   lived only on a page with no floor; putting it on Work and Library moves them onto pages that hold
   one, and leaving them small in a SHARED file would slip sub-floor values past the guard that scans
   the page - evading a rule by moving house, which is the same objection as the arrow's.
   Eames settled the principle when she clarified the previous line: "Round Table is the reference
   governs TREATMENT - typeface, small-caps, spacing, active underline, arrow convention - NOT SIZE.
   The 14px floor wins over Round Table's 12px wherever they conflict." */
header.site {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 28px var(--chrome-gutter) 20px;
  border-bottom: 1px solid var(--rule);
}
header.site .site-left { display: flex; align-items: baseline; gap: 20px; }
header.site .site-right { display: flex; align-items: center; gap: 16px; }
header.site h1 {
  font: 500 20px/1 'Cormorant SC', Georgia, serif;
  letter-spacing: 2px;
  color: var(--ink);
  margin: 0;
}
header.site .site-sub { font-size: 14px; color: var(--ink-muted); font-style: italic; }
header.site .site-stamp { font-size: 14px; color: var(--ink-muted); font-style: italic; }
header.site .site-refresh {
  font: 14px/1 var(--font-serif);
  color: var(--ink-muted);
  background: none;
  border: 1px solid var(--rule);
  padding: 6px 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
header.site .site-refresh:hover,
header.site .site-refresh:focus-visible { color: var(--ink); background: var(--rule-soft); }

.sitenav {
  padding: 0 var(--chrome-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 28px;
  border-bottom: 1px solid var(--rule);
}

/* Buttons AND links: index's Round Table and Tiles are in-page tabs, everywhere
   else the same destinations are links. One rule so a tab and a link to the same
   place cannot look different. */
.sitenav a,
.sitenav button {
  font: 600 14px/1 'Cormorant SC', Georgia, serif;
  letter-spacing: 1.5px;
  color: var(--ink-muted);
  background: none;
  border: 0;
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;          /* the underline sits ON the row's own border */
  padding: 14px 2px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: color .15s, border-color .15s;
}

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

/* WHERE YOU ARE. .here for a page, .active for an in-page tab - two names because
   the markup genuinely differs, one treatment because the meaning does not. */
.sitenav a.here,
.sitenav button.active { color: var(--ink); border-bottom-color: var(--ink); }

/* *** THE ARROW MARKS LEAVING, AND IT IS DERIVED RATHER THAN CLASSED. *** Round
   Table's convention was a hand-applied .away class, which is a register: add a
   sixth destination and the arrow is one more thing to remember. Any link that is
   not the current page leaves it; a button never does. So the rule reads the state
   that is already there.
   SIZED IN em, NOT px: an absolute 11px here would slip a sub-floor value into a
   file the page's own floor guard does not scan - evading a rule by moving house. */
.sitenav a:not(.here)::after { content: ' \2197'; font-size: .8em; opacity: .75; }