/* Hallmark · check · built: the project · redesign: polish · genre: editorial · nav: contained pill, centred, four links · shared chrome for every page */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: E, the pill had no keyboard focus and no colour tokens; both added without moving a pixel */

/* ============================================================
   PILL NAV — one definition, loaded by every page that has one.

   This lived as a copy inside each page: an inline <style> block on
   index, about and cave, and a fifth copy inside weather-but-fun.css.
   They drifted, and the drift was visible — the weather page was still
   running a 14px blur under a 70%-opaque wash that turned scrolled
   content into a grey slab, with a fade tail less than a third as long
   as the one the other pages had been given.

   Every colour is a token on :root. theme.css redefines the same
   tokens (on :root, beside --lit) for the dark room, instead of
   re-declaring the rules, so this file stays the one place the nav is
   drawn.
   ============================================================ */

:root {
  --nav-veil: rgba(217, 214, 208, 0.4);
  --nav-veil-solid: #d9d6d0;
  --nav-pill: #dedad4;
  --nav-pill-edge: #c6c2bb;
  --nav-pill-shadow: 0 8px 16px rgba(24, 21, 18, 0.11);
  --nav-ink: #5f594f;
  --nav-active: #f3ede4;
  --nav-active-edge: #ccc7be;
  --nav-active-shadow: 0 4px 4px rgba(24, 21, 18, 0.10), inset 0 0 0 0.5px #b5b0a8;
  --nav-active-ink: #181512;
  --nav-contrast-edge: #4a4640;
  /* the ring every focusable element on the site falls back to; pages
     that run the room (theme.css) or the Cave define --ink, which wins */
  --focus-ring-day: #181512;
  --nav-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* a long, finely stepped fade so the frosted band dissolves instead
     of ending in a line */
  --nav-fade: linear-gradient(to bottom,
    black 0%, black 55%,
    rgba(0,0,0,0.94) 61%, rgba(0,0,0,0.82) 67%,
    rgba(0,0,0,0.66) 73%, rgba(0,0,0,0.48) 78%,
    rgba(0,0,0,0.32) 83%, rgba(0,0,0,0.19) 87%,
    rgba(0,0,0,0.09) 91%, rgba(0,0,0,0.03) 95%,
    transparent 100%);
}

/* Nothing on any page may scroll sideways. clip, never hidden: hidden
   makes body a scroll container and breaks position: sticky. */
html,
body {
  overflow-x: clip;
}

/* One keyboard ring for the whole site. Case studies never loaded the
   landing page's rule, so tabbing through them showed nothing at all.
   Instant: no transition ever touches outline. */
:focus-visible {
  outline: 2px solid var(--ink, var(--focus-ring-day));
  outline-offset: 4px;
}

.masthead,
.case-header {
  position: sticky;
  top: 12px;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 8px;
}
.masthead::before,
.case-header::before {
  content: "";
  position: absolute;
  /* -12px, not 0: .masthead itself sits at top:12px (sticky), so its own
     box already starts 12px below the real viewport edge. A blur covering
     only ITS box leaves that 12px strip of whatever is scrolling beneath
     fully exposed right above the pill. */
  top: -12px;
  /* a tall tail so the fade has real distance to dissolve over — a short
     fade still resolves as a faint horizontal line however many stops it has */
  bottom: -78px;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  /* Real glass, not a wash: a heavy tint over a weak blur turns anything
     scrolling under into a flat, hard-edged grey rectangle. */
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  background: var(--nav-veil);
  mask-image: var(--nav-fade);
  -webkit-mask-image: var(--nav-fade);
  pointer-events: none;
}
.pill-nav {
  width: 600px;
  height: 64px;
  border: 2px solid var(--nav-pill-edge);
  border-radius: 200px;
  padding: 7px 8px;
  background: var(--nav-pill);
  box-shadow: var(--nav-pill-shadow);
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-link {
  flex: 1;
  height: 48px;
  border-radius: 40px;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  /* clears 4.5:1 on the pill while staying quieter than active ink */
  color: var(--nav-ink);
  display: grid;
  place-items: center;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  /* the transparent border is load-bearing: .is-active adds a 2px one, and
     without a matching reserve here the active pill grows and the row goes
     uneven */
  border: 2px solid transparent;
  transform: scale(1);
  transition: background 150ms var(--ease, var(--nav-ease)),
    border-color 150ms var(--ease, var(--nav-ease)),
    color 150ms var(--ease, var(--nav-ease)),
    box-shadow 150ms var(--ease, var(--nav-ease)),
    transform 120ms var(--ease, var(--nav-ease));
}
.nav-link:hover:not(.is-active) {
  color: var(--nav-active-ink);
}
.nav-link:active {
  transform: scale(0.94);
  transition-duration: 80ms;
}
/* the ring sits inside the pill's own padding so the pill's edge never
   crops it */
.nav-link:focus-visible {
  outline: 2px solid var(--nav-active-ink);
  outline-offset: -4px;
}
.nav-link.is-active {
  background: var(--nav-active);
  border: 2px solid var(--nav-active-edge);
  box-shadow: var(--nav-active-shadow);
  color: var(--nav-active-ink);
  font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .nav-link { transition: none; }
  .nav-link:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .masthead::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--nav-veil-solid);
  }
}
@media (prefers-contrast: more) {
  .pill-nav { border-color: var(--nav-contrast-edge); }
  .nav-link.is-active { border-color: var(--nav-contrast-edge); }
}
@media (max-width: 960px) {
  .masthead, .case-header { top: 8px; padding-top: 12px; }
  .pill-nav {
    width: min(600px, calc(100% - 32px));
    height: 58px;
    padding: 6px;
    gap: 6px;
  }
  .nav-link {
    height: 44px;
    font-size: clamp(15px, 3.6vw, 20px);
  }
}