/* Header -----------------------------------------------------------------------
   The site's one piece of chrome, laid out in three columns on the paper
   ground: the menu and search glyphs on the left, the logo dead centre, and
   one dark call-to-action on the right. Nothing else — the navigation itself
   lives in the full-screen menu the hamburger opens, on every screen size,
   and the logo is the primary lockup from the logo pack (assets/logo/), the
   ink version on paper (header and menu alike) and the white one on charcoal.

   The bar is fixed and always drawn on paper. Two states, set by site.js:
     .is-scrolled  a hairline under the bar, once the page has moved
     .is-hidden    slid away while the reader scrolls down; back on the first
                   scroll up
   -------------------------------------------------------------------------- */
:root {
  --header-h: clamp(72px, 10vh, 100px);
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  padding: 0 var(--pad);
  display: grid;
  /* Equal side columns keep the logo centred on the screen, not between the
     glyphs and the button. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  color: var(--ink);
  background-color: var(--paper);
  /* The hairline is a shadow rather than a border so the height never changes
     by a pixel. It only shows once there is page underneath the bar. */
  box-shadow: 0 1px 0 rgba(var(--ink-rgb), 0);
  transition: transform .55s var(--ease), box-shadow .4s ease;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }

.site-header-side { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); }
.site-header-side:last-child { justify-content: flex-end; }

/* The lockup holds its full weight under the pointer; it is the mark, not a
   button, and the browser's own ring marks keyboard focus. */
.site-brand {
  display: block;
  line-height: 0;
}
/* The lockup is sized by height so the bar's proportions hold; its width
   follows from the image's own ratio (about 3:1). */
.site-brand img { display: block; height: clamp(32px, 3vw, 44px); width: auto; }

/* Glyph buttons: the hamburger and the search. Square hit areas that bleed
   past the glyph, so the first one still sits on the page's left line. */
.site-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 -8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: opacity .3s ease;
}
.site-glyph:hover, .site-glyph:focus-visible { opacity: .6; }
.site-glyph svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* The hamburger: three hairlines that fold into a cross while the menu is
   open. */
.site-burger { position: relative; display: block; width: 26px; height: 16px; }
.site-burger i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform .45s var(--ease), opacity .3s ease;
}
.site-burger i:nth-child(1) { top: 0; }
.site-burger i:nth-child(2) { top: 50%; margin-top: -.75px; }
.site-burger i:nth-child(3) { bottom: 0; }
[aria-expanded="true"] .site-burger i:nth-child(1) { transform: translateY(7.25px) rotate(45deg); }
[aria-expanded="true"] .site-burger i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .site-burger i:nth-child(3) { transform: translateY(-7.25px) rotate(-45deg); }

/* The call-to-action: a charcoal block with the tracked label on it. */
.site-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 clamp(26px, 2.4vw, 40px);
  background: var(--charcoal);
  color: var(--paper);
  font-size: 13px;
  letter-spacing: .08em;
  line-height: 1;
  white-space: nowrap;
  transition: background .3s ease, color .3s ease;
}
.site-cta:hover, .site-cta:focus-visible { background: var(--ink); color: var(--milk); }

/* Full-screen menu ----------------------------------------------------------
   The header's paper ground carried over the whole screen, with the links set
   in the display face at the size of a section title. Its own bar repeats the
   header's layout, so the logo and the cross sit exactly where the logo and
   the hamburger were. Stacked entrances, kept short.
   -------------------------------------------------------------------------- */
.site-menu {
  position: fixed;
  z-index: 110;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--header-h) var(--pad) calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.site-menu.is-open { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.site-menu[hidden] { display: none; }

.site-menu-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.site-menu-bar .site-glyph { justify-self: start; }

.site-menu nav { margin: auto 0; display: grid; gap: clamp(6px, 1.5vh, 16px); }
.site-menu nav a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: clamp(30px, 4.2vw, 48px);
  letter-spacing: var(--track-display);
  line-height: 1.05;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease var(--m-d, 0ms), transform .8s var(--ease) var(--m-d, 0ms), color .3s ease;
}
.site-menu.is-open nav a { opacity: 1; transform: none; }
.site-menu nav a:nth-child(1) { --m-d: 120ms; }
.site-menu nav a:nth-child(2) { --m-d: 200ms; }
.site-menu nav a:nth-child(3) { --m-d: 280ms; }
.site-menu nav a:nth-child(4) { --m-d: 360ms; }
.site-menu nav a[aria-current="page"] { color: var(--ink-3); }
.site-menu nav a:hover, .site-menu nav a:focus-visible { color: var(--ink-2); }

.site-menu-foot { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }

body.menu-open { overflow: hidden; }

/* Search ----------------------------------------------------------------------
   A panel that drops from under the header: one field, and the site's pages
   listed beneath it, narrowed as the visitor types. There is no index to
   query — the site is a handful of pages — so the list is the whole result.
   -------------------------------------------------------------------------- */
.site-search {
  position: fixed;
  /* Under the header, so its buttons stay live over the panel. */
  z-index: 99;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(var(--header-h) + clamp(28px, 4vh, 48px)) var(--pad) clamp(32px, 4vh, 52px);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .4s ease, transform .5s var(--ease), visibility 0s linear .4s;
}
.site-search.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease, transform .5s var(--ease); }
.site-search[hidden] { display: none; }

.site-search form { position: relative; max-width: 720px; }
.site-search input {
  width: 100%;
  padding: 12px 40px 12px 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: clamp(26px, 2.6vw, 40px);
  letter-spacing: var(--track-title);
  line-height: 1.1;
  outline: 0;
}
.site-search input::placeholder { color: var(--ink-3); }
.site-search input::-webkit-search-decoration, .site-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.site-search form .site-glyph { position: absolute; right: -8px; top: 50%; margin: -22px 0 0; }

.site-search-results { margin: clamp(22px, 3vh, 34px) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 12px 36px; }
.site-search-results a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 11px;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  line-height: 1;
}
.site-search-results a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.site-search-results a:hover::after, .site-search-results a:focus-visible::after { transform: scaleX(1); }
.site-search-results li[hidden] { display: none; }
.site-search-empty { margin: clamp(22px, 3vh, 34px) 0 0; font-size: 14px; color: var(--ink-3); }
.site-search-empty[hidden] { display: none; }

/* A wash over the page while the search is open. */
.site-search-shade {
  position: fixed;
  z-index: 98;
  inset: 0;
  background: rgba(var(--charcoal-rgb), .3);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.site-search-shade.is-open { opacity: 1; visibility: visible; transition: opacity .4s ease; }

body.search-open { overflow: hidden; }

/* Header choreography: it arrives with the hero sequence rather than sitting
   over the curtain. Opacity only, so the hide/show transform stays free. */
.m-js:not(.m-still) .site-header { opacity: 0; }
.m-js:not(.m-still) .hero-in .site-header { opacity: 1; transition: opacity .9s ease 560ms, transform .55s var(--ease), box-shadow .4s ease; }

@media (max-width: 860px) {
  .site-cta { min-height: 36px; padding: 0 18px; font-size: 11px; }
}

@media (max-width: 680px) {
  .site-header, .site-menu-bar { gap: 12px; }
  .site-header-side { gap: 8px; }
  /* A step down so the lockup still fits between the glyphs and the button. */
  .site-brand img { height: 30px; }
  .site-glyph { width: 40px; height: 40px; }
  .site-burger { width: 22px; height: 14px; }
  [aria-expanded="true"] .site-burger i:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
  [aria-expanded="true"] .site-burger i:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }
  .site-cta { min-height: 32px; padding: 0 14px; font-size: 10px; }
}

/* On a phone held upright the bar carries only the hamburger and the button:
   the search glyph goes, and with it the search panel, which has no other way
   in. The equal side columns keep the lockup centred without it. */
@media (max-width: 680px) and (orientation: portrait) {
  .site-header [data-search-toggle] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .site-menu, .site-menu nav a, .site-search, .site-search-shade, .site-burger i, .site-search-results a::after { transition: none; }
}