/* ── shared header + nav ──────────────────────────────────────────────────
   Loaded by BOTH the homepage and /index/. The two pages have different DOM
   (the homepage header is Tailwind-classed and React-rendered, the archive's
   is hand-written), so every rule carries both selector forms. Keeping them in
   one file is the point: this is what stopped the two navs drifting apart.

   Type, size, tracking, gap and vertical position are all pinned to the same
   values here, so navigating between the pages does not move the nav. */

@font-face{
  font-family:'Geist';
  src:url(/fonts/geist-sans-var.woff2) format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src:url(/fonts/geist-mono-var.woff2) format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ── the bar ─────────────────────────────────────────────────────────────
   Transparent and fixed on both. The archive used to have a blurred, bordered,
   sticky bar — that is the single biggest reason the two pages felt like
   different sites. */
.nm-hdr{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  /* px, NOT rem: the homepage sets a 10px root and the archive uses the
     16px default, so a rem clamp resolved to 23.2px on one page and 27.9px
     on the other -- the bar visibly jumped on navigation. These are the
     px equivalents of the build's own grid-margin curve at a 10px root. */
  padding:clamp(12px, 7.8px + 1.07vw, 24px);
  background:transparent; border-bottom:0;
  color:#fff;
}
/* ── the wordmark, in a capsule ──────────────────────────────────────────
   A racetrack outline around the name. Drawn in CSS on the link rather than
   added to the SVG, because the homepage's wordmark is React-rendered and any
   markup change there gets reconciled away -- a border on the anchor survives
   every re-render, and the same rule dresses the archive's hand-written one.

   content-box so the declared width still describes the WORDMARK, not the
   capsule; the padding then grows the outline around it rather than squeezing
   the name. currentColor so it tracks the header's colour rather than being
   pinned to white. */
header[class*="z-50"] > a[href="/"],
.nm-hdr .wordmark{
  display:block; color:#fff;
  box-sizing:content-box;
  width:clamp(126px, 12.5vw, 180px);
  padding:clamp(7px, .7vw, 10px) clamp(14px, 1.5vw, 22px);
  border:2px solid currentColor;
  border-radius:999px;
  transition:background-color .24s ease, color .24s ease;
}
header[class*="z-50"] > a[href="/"] svg,
.nm-hdr .wordmark svg{ display:block; width:100%; height:auto; }
.nm-hdr .wordmark svg text{ font-family:'Geist', system-ui, sans-serif; }
/* fills on hover, the way a badge does */
@media (hover:hover){
  header[class*="z-50"] > a[href="/"]:hover,
  .nm-hdr .wordmark:hover{ background:#fff; color:#0a0a0a; }
}

/* ── the nav rail ────────────────────────────────────────────────────────
   Dead centre of the viewport on both pages, so the items land on the same
   pixels either side of a navigation. */
/* Pinned vertically as well as horizontally. The homepage wraps its list in a
   <nav> and the archive does not, so the two absolute boxes have different
   intrinsic heights and their static top positions differ by 2px -- enough that
   the nav nudges when you move between pages. Centring on both axes makes the
   intrinsic height irrelevant. */
header[class*="z-50"] nav,
.nm-hdr .nm-nav{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}
header[class*="z-50"] nav ul,
.nm-hdr .nm-nav{
  display:flex; align-items:center; gap:46px;
  list-style:none; margin:0; padding:0;
}
/* flex + fixed height, so the item's position inside the row is not decided by
   baseline alignment -- that was putting the two pages' labels 2px apart even
   once the outer boxes matched */
header[class*="z-50"] nav ul li,
.nm-hdr .nm-nav li{
  position:relative; z-index:1; list-style:none;
  display:flex; align-items:center; height:16px; line-height:15px;
}
/* Explicit, because the archive's list inherited `normal` and the homepage's
   inherited 15px: a 20.5px line box against a 16px one, which is exactly the
   offset that made the nav jump between pages. */
/* An explicit height, not just a line-height. The homepage nests its list in a
   <nav> and the archive does not, so the two absolute boxes still resolved to
   16px and 15px and the items landed 2px apart. Fixing the height makes the
   nesting irrelevant: both boxes are 16px, both centre on the same pixel. */
header[class*="z-50"] nav ul,
.nm-hdr .nm-nav{ line-height:15px; height:16px; }

header[class*="z-50"] nav ul li > *,
.nm-hdr .nm-nav li > a{
  position:relative; display:inline-block; isolation:isolate;
  font-family:'Geist', system-ui, sans-serif;
  font-weight:700; font-size:14px; line-height:14px;
  letter-spacing:-.42px; text-transform:uppercase;
  color:#fff; text-decoration:none; white-space:nowrap;
  background:none; border:0; padding:0; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  height:14px;
}
/* The homepage's nav labels are wrapped in spans by the build's text-splitter,
   which sets font-kerning:none and text-rendering:optimizeSpeed on each one.
   Unkerned text is wider -- "contact" came out 66px there against 64px on the
   archive -- so the rail was a couple of pixels off. Kerning is restored here
   so both pages measure the same string the same way. */
header[class*="z-50"] nav ul li > * span{
  font-kerning:normal !important;
  font-variant-ligatures:normal !important;
  text-rendering:auto !important;
}

/* "work" is gone from both: the archive IS the work. */
header[class*="z-50"] nav ul li:first-child{ display:none !important; }

@media (max-width:767.98px){
}
@media (max-width:560px){
  .nm-hdr .nm-nav{ position:static; transform:none; gap:22px; }
  .nm-hdr{ flex-wrap:wrap; gap:12px; }
}

/* ── mobile: one hamburger, both pages ───────────────────────────────────
   Below 768px the rail is replaced by a burger and a full-screen panel. The
   homepage shipped a text "Menu" button and the archive simply wrapped its
   links onto a second row -- two different mobile menus for the same three
   destinations. Both are suppressed here in favour of one control. */
.nm-burger{
  display:none; position:relative; z-index:60;
  width:26px; height:16px; margin-left:auto; flex:none;
  background:none; border:0; padding:0; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
/* The bars are 26x16; the tappable box has to be 44x44. A pseudo-element does
   it without changing the mark or disturbing the header's flex layout. */
.nm-burger::after{
  content:""; position:absolute; left:50%; top:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
.nm-burger span{
  position:absolute; left:0; width:100%; height:1.5px; background:#fff;
  transition:transform .34s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.nm-burger span:nth-child(1){ top:2px; }
.nm-burger span:nth-child(2){ top:50%; margin-top:-.75px; }
.nm-burger span:nth-child(3){ bottom:2px; }
.nm-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.25px) rotate(45deg); }
.nm-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nm-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.25px) rotate(-45deg); }

.nm-burger-panel{
  position:fixed; inset:0; z-index:55; background:#0a0a0a;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(12px, 7.8px + 1.07vw, 24px);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .26s ease, transform .34s cubic-bezier(.22,1,.36,1),
             visibility 0s linear .34s;
}
.nm-burger-panel.is-open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .26s ease, transform .34s cubic-bezier(.22,1,.36,1),
             visibility 0s linear 0s;
}
.nm-burger-panel a{
  display:block; font-family:'Geist', system-ui, sans-serif;
  /* px, not rem: the archive sets html{font-size:62.5%} and the homepage does
     not, so the same rem value rendered the shared menu 27-60% larger on one
     page than the other. */
  font-size:clamp(30px, 13vw, 52px); font-weight:700;
  letter-spacing:-.03em; line-height:1.12; text-transform:uppercase;
  color:#fff; text-decoration:none; padding:10px 0;
}
.nm-burger-panel a + a{ border-top:1px solid rgba(255,255,255,.13); }
.nm-burger-panel a:active{ color:rgba(255,255,255,.55); }
/* the panel is open: stop the page behind it scrolling */
html.nm-menu-open, html.nm-menu-open body{ overflow:hidden !important; }
/* The burger lives inside a position:fixed header with z-index:50, which makes
   that header a stacking context -- so the burger's own z-index:60 is scoped
   INSIDE the z-50 layer and can never escape it. The panel is appended to
   <body> at z-index:55, root level, opaque. 55 > 50, so the panel painted over
   the header and over the burger: the X animation played behind an opaque
   surface, and a tap where the X should be hit the panel, which has no handler.
   There was no way out of the menu on a phone except following a link.
   Both headers are background:transparent, so lifting the whole header above
   the panel costs nothing visually -- only the wordmark and the X ride above. */
html.nm-menu-open header[class*="z-50"],
html.nm-menu-open .nm-hdr{ z-index:60; }

@media (max-width:767.98px){
  .nm-burger{ display:block; }
  header[class*="z-50"] nav,
  .nm-hdr .nm-nav{ display:none !important; }
  /* the build's own text "Menu" control */
  header[class*="z-50"] button[class*="text-menu"]{ display:none !important; }
}
@media (min-width:768px){
  .nm-burger, .nm-burger-panel{ display:none !important; }
}
@media (prefers-reduced-motion:reduce){
  .nm-burger span, .nm-burger-panel{ transition:none; }
}

/* The original build's mobile menu is still in the DOM and still focusable --
   it was the first three tab stops on every phone, leading nowhere. It is
   replaced by .nm-burger-panel. */
#mobile-menu{ display:none !important; }


/* ── header backdrop (BOTH pages) ─────────────────────────────────────────
   Lifted out of the homepage's inline <style> so the archive gets it too. It
   had been keyed on header[class*="z-50"] only, which .nm-hdr cannot match --
   and /index/ never loads that block at all.

   That mattered because the archive grid is full-bleed, so all 176 thumbnails
   scroll directly under the fixed bar, and eleven of them are flat 255 white.
   The white wordmark, its 2px capsule, the nav and the burger bars were
   sitting on pure white with no contrast floor, over a large part of an
   18,500-38,600px scroll -- and below 768px the burger is the ONLY navigation
   on that page.

   The blur lives on pseudo-elements BEHIND the content, so the type stays
   fully opaque, and it is tiered: a light blur over the full height plus a
   heavier one that fades out sooner. Two overlapping ramps approximate a
   progressive blur, which is what stops the bottom edge reading as a band. */
header[class*="z-50"],
.nm-hdr{
  background:transparent !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  -webkit-mask-image:none; mask-image:none;
  isolation:isolate;
}
header[class*="z-50"]::before, header[class*="z-50"]::after,
.nm-hdr::before, .nm-hdr::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
}
/* wide, light layer -- carries the tint and most of the height */
header[class*="z-50"]::before,
.nm-hdr::before{
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  background:linear-gradient(to bottom,
    rgba(10,10,10,.72) 0%, rgba(10,10,10,.42) 58%, rgba(10,10,10,0) 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);
}
/* tighter, heavier layer -- dies out well before the first one does */
header[class*="z-50"]::after,
.nm-hdr::after{
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%);
          mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%);
}