/* ============================================================
   SITE NAV — the bar at the top of every page
   Gets out of the way while you read and comes back the moment you
   scroll up, so it is always one gesture away without sitting on
   top of the work.

   The bar itself is transparent: the mark and the links each carry
   their own rounded ground instead. That is what lets the same
   header read over the dark mat at the top of the home page and
   over the white above a project's folder tabs — a solid band
   across the top would have cut a white stripe through the mat.

   The glass is light and the type is ink — #1C1815, the warm
   near-black the body copy already uses, rather than pure black,
   which appears nowhere else on this site.
   The type does NOT switch to white over dark backgrounds, because
   measured, it never needs to: cream glass lifts whatever is behind
   it far too much for white to win. Over the hero's mat the glass
   reads (153,181,168), where ink gives 8.0:1 and white only 2.2:1.
   Over the white of a project page it is 17.6:1 against 1.0:1.
   ============================================================ */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px var(--gutter);
  pointer-events: none;   /* only the two pills take the pointer */
  transition: transform var(--dur-medium) var(--ease-out);
}

.site-nav.is-hidden {
  transform: translateY(-115%);
}

/* ---------- The ground ---------- */
.site-nav__links {
  pointer-events: auto;
  /* Light glass: cream held at just under half, so the page really
     does show through rather than merely tinting an opaque bar.
     saturate() keeps what is behind from going grey the way a plain
     blur leaves it. */
  background: rgba(255, 254, 244, 0.46);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255, 254, 244, 0.55);
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(28, 24, 21, 0.18);
}

/* The mark, first in the row. It keeps a rule after it so the eye
   reads it as the thing that owns the bar rather than a fourth
   label of the same weight. */
.site-nav__brand {
  display: flex;
  align-items: center;
  padding: 0 16px 0 10px;
  margin-right: 4px;
  border-right: 1px solid rgba(28, 24, 21, 0.22);
  color: var(--color-ink);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .site-nav__brand:hover { opacity: 0.78; }
}

/* Both marks are set by their HEIGHT and let their width follow.
   Their files are cropped to the drawing, which is what makes that
   height mean something — before cropping, the wordmark sat in a
   160x160 frame that was half air, so any height came out tiny.
   Drawn black in the file, which is what a light pill wants. */
/* `display` is deliberately NOT set here. A rule on .site-nav__brand
   img outweighs one on .site-nav__wordmark or .site-nav__mark — an
   element plus a class beats a class alone — so a display here would
   quietly win over the ones below and both marks would show at once,
   which is exactly what happened the first time. */
.site-nav__brand img {
  width: auto;
}

.site-nav__wordmark {
  display: block;
  height: 38px;
}

/* The round mark stands in when the bar is short of room. It is
   nearly square, so it gets less height than the two-line wordmark
   or it would make the pill taller than the links beside it. */
.site-nav__mark {
  display: none;
  height: 32px;
}

@media (max-width: 720px) {
  .site-nav__wordmark { display: none; }
  .site-nav__mark { display: block; }
  .site-nav__brand { padding: 0 12px 0 6px; }
}

/* ---------- Narrow: the icons carry it alone ----------
   The words are taken off the screen, NOT out of the page. Hiding
   them with display:none would take them from screen readers too,
   and then three unlabelled shapes would be the whole navigation.
   Clipped like this they are still read, and each link carries an
   aria-label of its own besides.
   The links become squares rather than pills: 42px, which is about
   the smallest a finger can be asked to hit reliably. */
@media (max-width: 560px) {
  .site-nav__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .site-nav__link {
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    gap: 0;
  }

  .site-nav__links { gap: 2px; }
  .site-nav__mark { height: 30px; }
}

/* ---------- The links ---------- */
.site-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.2vw, 14px);
  padding: 8px 10px;
}

.site-nav__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  /* DM Sans, not the mono label face: the folder tabs are set in
     mono, and in a bar sitting right above them the two read as the
     same kind of thing. They are not — one is navigation, the other
     is the name of a folder in a pile. */
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1;
  /* Caps need air between the letters or they set as a block. */
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}

.site-nav__icon {
  flex: none;
  width: 17px;
  height: 17px;
}

@media (hover: hover) {
  .site-nav__link:hover { background: rgba(28, 24, 21, 0.09); }
}

.site-nav__link:focus-visible {
  background: rgba(28, 24, 21, 0.09);
  outline: 2px solid var(--color-ink);
  outline-offset: 1px;
}

/* The bar is fixed, so it takes up no space — the project pages need
   that space back at the top or their folder tabs hide under it. */
body {
  /* 12px of bar padding above a 54px pill, plus room to breathe —
     less than this and a project page's first folder tab slides in
     under the bar. */
  padding-top: 80px;
}

/* The home page is the exception: its cutting mat should run right to
   the top of the window with the header floating on it, so no gap is
   held open there. #projects is the tell — only the home has it. */
body:has(#projects) {
  padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav { transition: none; }
}

/* ---------- The language switch ----------
   Last in the pill, behind a rule like the one after the mark, so
   it reads as a control on the bar rather than a fourth section.
   Two letters each; the current language is set solid and is not
   a button any more (aria-pressed says so), the other is the way
   across. Same face and tracking as the links. */
.site-nav__lang {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid rgba(28, 24, 21, 0.22);
}

.site-nav__lang-btn {
  padding: 7px 8px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1;
  letter-spacing: 0.07em;
  color: var(--color-ink);
  opacity: 0.55;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.site-nav__lang-btn.is-current {
  opacity: 1;
  font-weight: 700;
  cursor: default;
}

@media (hover: hover) {
  .site-nav__lang-btn:not(.is-current):hover {
    opacity: 1;
    background: rgba(28, 24, 21, 0.08);
  }
}

@media (max-width: 560px) {
  .site-nav__lang { margin-left: 2px; padding-left: 4px; }
  .site-nav__lang-btn { padding: 12px 6px; }
}