/* ============================================================
   SAFFRON SHARED MOBILE NAV — 2026-08-10
   Self-contained header + fullscreen menu for pages that ship
   without one (/work, /contact, /audit, /7-day, /blog.html) and
   hamburger-only augmentation for pages that already have a
   desktop nav but no mobile affordance (/omnisphere).

   Everything is namespaced `sfnav-` so it can never collide with
   the homepage's native .nav / .menu / .menu-btn implementation.
   ============================================================ */

:root {
  /* Declared on :root, not on a .sfnav wrapper — the component's parts are
     siblings (header / button / panel), so there is no shared ancestor to
     inherit from. Tokens fall back to hard-coded brand values so the
     component still renders correctly on pages that define no custom
     properties at all (e.g. blog.html). */
  --sfn-panel:   var(--bg-alt,      #1C1512);
  --sfn-text:    var(--text,        #F7F2E9);
  --sfn-muted:   var(--muted,       #9C8C79);
  --sfn-faint:   var(--faint,       rgba(247,242,233,.55));
  --sfn-line:    var(--line,        rgba(247,242,233,.10));
  --sfn-line-2:  var(--line-2,      rgba(247,242,233,.18));
  --sfn-accent:  var(--saffron-lit, #E8842A);
  --sfn-gold:    var(--gold,        #C9A24B);
  --sfn-display: var(--f-display,   'Cormorant Garamond', 'Times New Roman', Georgia, serif);
  --sfn-body:    var(--f-body,      'Jost', -apple-system, BlinkMacSystemFont, sans-serif);
  --sfn-pad:     var(--pad-x,       clamp(1.25rem, 5vw, 6rem));
  --sfn-ease:    var(--ease,        cubic-bezier(.16,1,.3,1));
  --sfn-ease-2:  var(--ease-2,      cubic-bezier(.76,0,.24,1));
  --sfn-tap: 44px;
  /* clip-path origin — recomputed from the real button position by the JS */
  --sfn-ox: calc(100% - 3.5rem);
  --sfn-oy: 2.6rem;
}

/* ---------- 1 · Injected header (pages that had none) ---------- */
header.sfnav-header {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 8000;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(.85rem, 2vw, 1.75rem) max(var(--sfn-pad), env(safe-area-inset-right))
           clamp(.85rem, 2vw, 1.75rem) max(var(--sfn-pad), env(safe-area-inset-left));
  transition: transform .45s var(--sfn-ease);
  will-change: transform;
}
/* app-like: retract on scroll-down, return on scroll-up */
html.sfnav-hide header.sfnav-header { transform: translateY(-102%); }
html.sfnav-open header.sfnav-header { transform: none; }

/* scrim so the chrome never collides with the content underneath */
header.sfnav-header::before {
  content: ""; position: absolute; inset: 0 0 -20px; z-index: -1;
  pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, rgba(11,8,7,.94), rgba(11,8,7,.66) 58%, rgba(11,8,7,0) 96%);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
          backdrop-filter: blur(10px) saturate(1.05);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
          mask-image: linear-gradient(to bottom, #000 62%, transparent);
  transition: opacity .38s var(--sfn-ease);
}
html.sfnav-scrolled header.sfnav-header::before { opacity: 1; }
html.sfnav-open     header.sfnav-header::before { opacity: 0; }

.sfnav-wordmark {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: var(--sfn-tap);
  font-family: var(--sfn-display);
  font-size: clamp(1.15rem, 4.6vw, 1.5rem);
  letter-spacing: -.01em; line-height: 1;
  color: var(--sfn-text); text-decoration: none;
  position: relative; z-index: 2;
}
.sfnav-wordmark__dim { color: var(--sfn-muted); }
.sfnav-wordmark__icon { flex: none; width: 22px; height: 26px; display: block; }

/* ---------- 2 · The hamburger ---------- */
.sfnav-btn {
  position: relative; z-index: 8600; flex: none;
  width: var(--sfn-tap); height: var(--sfn-tap);
  min-width: var(--sfn-tap); min-height: var(--sfn-tap);
  padding: 0; margin: 0;
  display: none;                       /* revealed by the breakpoint below */
  place-items: center;
  border: 1px solid var(--sfn-line-2);
  border-radius: 50%;
  background: rgba(12,11,10,.42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .3s var(--sfn-ease), background .3s var(--sfn-ease),
              transform .2s var(--sfn-ease);
}
.sfnav-btn:active { transform: scale(.93); }
.sfnav-btn:focus-visible { outline: 2px solid var(--sfn-accent); outline-offset: 3px; }

.sfnav-btn__bar {
  position: absolute; left: 12px; right: 12px; height: 1.5px;
  background: var(--sfn-text); border-radius: 2px;
  transition: transform .4s var(--sfn-ease), opacity .25s var(--sfn-ease);
}
.sfnav-btn__bar:nth-child(1) { top: 18px; }
.sfnav-btn__bar:nth-child(2) { bottom: 18px; }

html.sfnav-open .sfnav-btn { border-color: rgba(232,132,42,.55); background: rgba(12,11,10,.6); }
html.sfnav-open .sfnav-btn__bar:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
html.sfnav-open .sfnav-btn__bar:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

/* Show the hamburger — and stand the page's own desktop nav down — only where
   a 7-item horizontal nav cannot fit. Above this, pages keep their own chrome. */
@media (max-width: 900px) {
  .sfnav-btn { display: grid; }
  html.sfnav-takeover header .nav { display: none !important; }
}

/* ---------- 3 · Fullscreen panel ---------- */
.sfnav-panel {
  position: fixed; inset: 0; z-index: 8400;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--sfn-panel);
  clip-path: circle(0% at var(--sfn-ox) var(--sfn-oy));
  visibility: hidden; pointer-events: none;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top) + 5.5rem)
           max(var(--sfn-pad), env(safe-area-inset-right))
           calc(env(safe-area-inset-bottom) + 2rem)
           max(var(--sfn-pad), env(safe-area-inset-left));
  transition: clip-path .8s var(--sfn-ease-2), visibility 0s linear .8s;
}
html.sfnav-open .sfnav-panel {
  clip-path: circle(150% at var(--sfn-ox) var(--sfn-oy));
  visibility: visible; pointer-events: auto;
  transition: clip-path .8s var(--sfn-ease-2), visibility 0s linear 0s;
}
/* warm wash so the panel reads as a place, not a flat sheet */
.sfnav-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 42% at 88% 6%,  rgba(232,132,42,.13), transparent 62%),
    radial-gradient(52% 40% at 4%  96%, rgba(201,162,75,.08), transparent 66%);
}
.sfnav-list {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(.1rem, .6vh, .35rem);
  margin-block: auto;
}

.sfnav-link {
  position: relative;
  display: flex; align-items: baseline; gap: .85rem;
  min-height: var(--sfn-tap);
  padding-block: clamp(.15rem, .8vh, .5rem);
  font-family: var(--sfn-display);
  /* sized so all 9 items clear a 664px-tall phone without scrolling;
     the panel still scrolls as a safety net on shorter devices */
  font-size: clamp(1.6rem, min(9vw, 5.2vh), 3.4rem);
  line-height: 1.04; letter-spacing: -.02em;
  color: var(--sfn-text); text-decoration: none;
  transform: translateY(115%); opacity: 0;
  transition: transform .7s var(--sfn-ease), opacity .7s var(--sfn-ease),
              color .3s var(--sfn-ease);
  -webkit-tap-highlight-color: transparent;
}
.sfnav-link__num {
  flex: none; font-family: var(--sfn-body);
  font-size: .8rem; font-weight: 400; letter-spacing: .12em;
  color: var(--sfn-accent); font-variant-numeric: tabular-nums;
}
/* hairline that draws under each item as it lands */
.sfnav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .1em;
  height: 1px; background: var(--sfn-line);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--sfn-ease), background .3s var(--sfn-ease);
}
.sfnav-link[aria-current="page"] { color: var(--sfn-gold); }
.sfnav-link[aria-current="page"] .sfnav-link__num { color: var(--sfn-gold); }
.sfnav-link:active { color: var(--sfn-accent); }
.sfnav-link:focus-visible { outline: 2px solid var(--sfn-accent); outline-offset: 4px; border-radius: 4px; }

html.sfnav-open .sfnav-link { transform: translateY(0); opacity: 1; }
html.sfnav-open .sfnav-link::after { transform: scaleX(1); }

/* staggered entrance — every item gets a delay, none arrive at 0s */
html.sfnav-open .sfnav-item:nth-child(1) .sfnav-link { transition-delay: .16s; }
html.sfnav-open .sfnav-item:nth-child(2) .sfnav-link { transition-delay: .23s; }
html.sfnav-open .sfnav-item:nth-child(3) .sfnav-link { transition-delay: .30s; }
html.sfnav-open .sfnav-item:nth-child(4) .sfnav-link { transition-delay: .37s; }
html.sfnav-open .sfnav-item:nth-child(5) .sfnav-link { transition-delay: .44s; }
html.sfnav-open .sfnav-item:nth-child(6) .sfnav-link { transition-delay: .51s; }
html.sfnav-open .sfnav-item:nth-child(7) .sfnav-link { transition-delay: .58s; }
html.sfnav-open .sfnav-item:nth-child(8) .sfnav-link { transition-delay: .65s; }
html.sfnav-open .sfnav-item:nth-child(9) .sfnav-link { transition-delay: .72s; }
html.sfnav-open .sfnav-item:nth-child(10) .sfnav-link { transition-delay: .79s; }
html.sfnav-open .sfnav-item .sfnav-link::after { transition-delay: .30s; }

/* ---------- 4 · Panel footer ---------- */
.sfnav-foot {
  position: relative; z-index: 1;
  margin-top: clamp(1.5rem, 5vh, 3rem);
  padding-top: clamp(1rem, 3vh, 1.6rem);
  border-top: 1px solid var(--sfn-line);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .35rem 1.75rem;
  font-family: var(--sfn-body);
  font-size: .95rem; color: var(--sfn-muted);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--sfn-ease), transform .5s var(--sfn-ease);
}
html.sfnav-open .sfnav-foot { opacity: 1; transform: none; transition-delay: .62s; }
.sfnav-foot a {
  display: inline-flex; align-items: center; min-height: var(--sfn-tap);
  color: var(--sfn-gold); text-decoration: none;
  border-bottom: 1px solid rgba(201,162,75,.32);
}
.sfnav-foot a:active { color: var(--sfn-accent); }
.sfnav-foot__place { color: var(--sfn-faint); }

/* ---------- 5 · Scroll lock ----------
   position:fixed on <body> rather than overflow:hidden, because iOS Safari
   happily scrolls the page behind an overflow-hidden body. The JS stores and
   restores scrollY around it. */
html.sfnav-open, html.sfnav-open body { overscroll-behavior: none; }
body.sfnav-locked {
  position: fixed !important;
  top: var(--sfnav-lock-top, 0);
  left: 0; right: 0; width: 100%;
  overflow: hidden !important;
}

/* ---------- 6 · Desktop stand-down ---------- */
@media (min-width: 901px) {
  .sfnav-panel { display: none !important; }
  header.sfnav-header { position: absolute; }
}

/* ---------- 7 · Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sfnav-panel { clip-path: none; opacity: 0; transition: opacity .01s linear, visibility .01s linear; }
  html.sfnav-open .sfnav-panel { clip-path: none; opacity: 1; transition: opacity .15s linear; }
  .sfnav-link, .sfnav-link::after, .sfnav-foot,
  header.sfnav-header, header.sfnav-header::before, .sfnav-btn, .sfnav-btn__bar {
    transition-duration: .01s !important; transition-delay: 0s !important;
  }
  .sfnav-link { transform: none; opacity: 1; }
}

/* ---------- 8 · Print ---------- */
@media print { header.sfnav-header, .sfnav-panel { display: none !important; } }