/* ════════════════════════════════════════════════════════════════════════
   site-nav.css — the one navigation for every Vigil page. (v4)

   Two ways through the house:
     · the bar — the flame mark, the well-worn doors, the way in
     · the doors — a full-screen map of every room, the same on a phone
       as on a wide desk. The burger and "all doors" both open it.

   Placeholder contract (unchanged): <div id="vigil-nav" data-active="…"
   data-cta="app|demo"></div>
   ════════════════════════════════════════════════════════════════════════ */
.vnav{
  --vn-night:#0c0f14; --vn-evening:#12161d; --vn-dawn:#ece4d6;
  --vn-candle:#e3b26a; --vn-candle-lit:#f2dcae; --vn-clay:#b6502e;
  --vn-muted:#b8bfc6; --vn-dim:#8b949e;
  --vn-hair:rgba(236,228,214,.16); --vn-hair-soft:rgba(236,228,214,.1);
  --vn-font:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  position:fixed; top:0; left:0; right:0; z-index:120;
  font-family:var(--vn-font);
  transition:background .5s ease, border-color .5s ease, box-shadow .5s ease;
  border-bottom:1px solid transparent;
  padding-top:var(--safe-top, env(safe-area-inset-top, 0px));
  background:rgba(12,15,20,.42);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.vnav.vnav-solid{
  background:rgba(12,15,20,.94);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--vn-hair);
  box-shadow:0 1px 30px -18px rgba(0,0,0,.6);
}
.vnav-in{
  max-width:1180px; margin:0 auto; padding:13px 22px;
  display:flex; align-items:center; gap:26px;
  transition:padding .4s ease;
}
.vnav.vnav-solid .vnav-in{ padding:10px 22px; }
@media(max-width:620px){ .vnav-in{ padding:11px 16px; gap:14px; } }

/* ── the one mark: the vigil flame + lowercase word ── */
.vnav-mark{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--vn-dawn); flex-shrink:0;
  transition:color .35s ease;
  -webkit-tap-highlight-color:transparent;
}
.vnav-mark:hover{ color:var(--vn-candle-lit); }
.vnav-flame{
  width:13px; height:18px; flex-shrink:0; display:block;
  filter:drop-shadow(0 0 6px rgba(227,178,106,.55));
  transform-origin:50% 92%; animation:vnFlick 3.4s ease-in-out infinite;
}
.vnav-mark:hover .vnav-flame{
  filter:drop-shadow(0 0 10px rgba(227,178,106,.8));
}
.vnav-word{
  font-size:19px; font-weight:700; letter-spacing:.05em;
  text-transform:lowercase; line-height:1; color:inherit;
}
.vnav-tag{
  font-size:10.5px; letter-spacing:.18em; text-transform:lowercase;
  color:var(--vn-dim); margin-left:2px; padding-left:12px;
  border-left:1px solid var(--vn-hair-soft);
}
@media(max-width:1080px){ .vnav-tag{ display:none; } }
@keyframes vnFlick{
  0%,100%{transform:scale(1) rotate(-1.2deg);}
  30%{transform:scale(1.06,.95) rotate(1.6deg);}
  62%{transform:scale(.95,1.05) rotate(-1.6deg);}
}
@media(prefers-reduced-motion:reduce){ .vnav-flame{animation:none;} }

/* ── the well-worn doors (desktop quick links) ── */
.vnav-links{ display:flex; align-items:center; gap:22px; margin-left:auto; }
.vnav-links a{
  font-size:14px; font-weight:500; text-decoration:none;
  color:rgba(236,228,214,.78); transition:color .3s ease; white-space:nowrap;
}
.vnav-links a:hover{ color:var(--vn-candle-lit); }
.vnav-links a.vnav-here{ color:var(--vn-candle); }
.vnav-links a.vnav-here::after{
  content:""; display:block; height:1.5px; margin-top:3px; border-radius:2px;
  background:currentColor; opacity:.55;
}

/* ── the way in ── */
.vnav-cta{
  font-size:14px; padding:10px 18px; border-radius:6px; cursor:pointer;
  border:1px solid rgba(227,178,106,.7); color:var(--vn-candle-lit);
  background:rgba(227,178,106,.08); font-family:var(--vn-font); font-weight:600;
  transition:background .3s ease, color .3s ease, box-shadow .3s ease;
  white-space:nowrap; min-height:42px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none;
}
.vnav-cta:hover{
  background:var(--vn-candle); color:var(--vn-night); border-color:var(--vn-candle);
  box-shadow:0 0 18px -2px rgba(227,178,106,.6);
}

/* ── "all doors" — the map button (desktop) ── */
.vnav-doorsbtn{
  display:inline-flex; align-items:center; gap:8px;
  min-height:42px; padding:9px 14px; border-radius:6px; cursor:pointer;
  background:transparent; border:1px solid var(--vn-hair-soft);
  color:var(--vn-muted); font-family:var(--vn-font); font-size:13px; font-weight:600;
  letter-spacing:.04em; transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.vnav-doorsbtn:hover{ border-color:rgba(227,178,106,.55); color:var(--vn-candle-lit); }
.vnav-doorsbtn svg{ width:15px; height:15px; display:block; }

/* ── burger (mobile) ── */
.vnav-burger{
  display:none; width:44px; height:44px; flex-shrink:0; margin-left:auto;
  align-items:center; justify-content:center;
  background:rgba(236,228,214,.06);
  border:1px solid rgba(236,228,214,.32); border-radius:6px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .25s ease, border-color .25s ease;
}
.vnav-burger:hover,.vnav-burger:focus-visible{
  background:rgba(236,228,214,.12); border-color:rgba(236,228,214,.55);
}
.vnav-burger span{
  position:relative; display:block; width:18px; height:2px; border-radius:2px;
  background:var(--vn-dawn); transition:background .25s ease;
}
.vnav-burger span::before,.vnav-burger span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; border-radius:2px;
  background:var(--vn-dawn); transition:transform .25s ease, top .25s ease, background .25s ease;
}
.vnav-burger span::before{ top:-7px; }
.vnav-burger span::after{ top:7px; }

@media(max-width:980px){
  .vnav-links{ display:none; }
  .vnav-doorsbtn{ display:none; }
  .vnav-burger{ display:inline-flex; }
  .vnav-in > .vnav-cta{ display:none; }
}
@media(min-width:981px){
  .vnav-burger{ display:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   the doors — full-screen map of the house
   ════════════════════════════════════════════════════════════════════════ */
.vdoors{
  position:fixed; inset:0; z-index:200; display:none;
  flex-direction:column; overflow-y:auto; overflow-x:hidden;
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(227,178,106,.12) 0%, transparent 55%),
    radial-gradient(90% 60% at 82% -8%, rgba(122,143,163,.14) 0%, transparent 60%),
    linear-gradient(180deg,#080a0e 0%, #0c0f14 40%, #12161d 100%);
  font-family:var(--vn-font);
  padding-top:var(--safe-top, env(safe-area-inset-top,0px));
}
.vdoors.open{ display:flex; }
/* drifting stars */
.vdoors::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(236,228,214,.7), transparent 60%),
    radial-gradient(1px 1px at 32% 8%, rgba(236,228,214,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 16%, rgba(242,220,174,.6), transparent 60%),
    radial-gradient(1px 1px at 76% 30%, rgba(236,228,214,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 10%, rgba(236,228,214,.55), transparent 60%),
    radial-gradient(1px 1px at 44% 30%, rgba(236,228,214,.4), transparent 60%),
    radial-gradient(1px 1px at 6% 44%, rgba(236,228,214,.35), transparent 60%);
}
.vdoors-top{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1180px; width:100%; margin:0 auto; padding:14px 22px;
  position:relative; z-index:2;
}
.vdoors-close{
  width:44px; height:44px; border-radius:6px; cursor:pointer;
  background:rgba(236,228,214,.06); border:1px solid rgba(236,228,214,.32);
  color:var(--vn-dawn); font-size:22px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .25s ease, background .25s ease;
}
.vdoors-close:hover{ border-color:rgba(227,178,106,.55); background:rgba(227,178,106,.1); color:var(--vn-candle-lit); }

.vdoors-head{
  max-width:1180px; width:100%; margin:0 auto; padding:26px 22px 8px;
  position:relative; z-index:2;
}
.vdoors-eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--vn-candle); font-weight:700; margin-bottom:10px;
}
.vdoors-title{
  font-size:clamp(1.9rem,5.4vw,2.9rem); font-weight:700; color:var(--vn-dawn);
  letter-spacing:-.02em; line-height:1.05; text-transform:lowercase;
}
.vdoors-sub{
  margin-top:10px; color:var(--vn-muted); font-size:15px; max-width:44ch;
  line-height:1.55; text-transform:lowercase;
}

.vdoors-grid{
  max-width:1180px; width:100%; margin:0 auto; position:relative; z-index:2;
  padding:26px 22px 20px;
  display:grid; gap:14px;
  grid-template-columns:repeat(4, 1fr);
}
@media(max-width:980px){ .vdoors-grid{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:520px){ .vdoors-grid{ grid-template-columns:1fr; gap:10px; } }

.vdoor{
  position:relative; display:flex; flex-direction:column; align-items:center;
  text-align:center; text-decoration:none; cursor:pointer;
  padding:26px 16px 20px;
  background:linear-gradient(180deg, rgba(26,31,40,.72), rgba(18,22,29,.9));
  border:1px solid var(--vn-hair-soft); border-radius:120px 120px 14px 14px;
  color:var(--vn-dawn);
  transition:transform .45s var(--vn-ease, cubic-bezier(.2,.7,.2,1)),
             border-color .35s ease, box-shadow .45s ease, background .35s ease;
  -webkit-tap-highlight-color:transparent;
  opacity:0; transform:translateY(18px);
}
.vdoors.open .vdoor{ animation:vdoorRise .7s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes vdoorRise{ to{ opacity:1; transform:none; } }
.vdoor:hover,.vdoor:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(227,178,106,.5);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.6), 0 0 26px -6px rgba(227,178,106,.35);
  background:linear-gradient(180deg, rgba(35,42,53,.85), rgba(18,22,29,.95));
}
.vdoor.vnav-here{ border-color:rgba(227,178,106,.65); }
.vdoor-glyph{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(227,178,106,.1); border:1px solid rgba(227,178,106,.28);
  color:var(--vn-candle-lit); margin-bottom:14px;
  transition:transform .4s ease, box-shadow .4s ease, background .3s ease;
}
.vdoor:hover .vdoor-glyph{
  transform:scale(1.08);
  background:rgba(227,178,106,.18);
  box-shadow:0 0 22px -4px rgba(227,178,106,.55);
}
.vdoor-glyph svg{ width:24px; height:24px; display:block; }
.vdoor-label{
  font-size:16.5px; font-weight:700; letter-spacing:.01em; text-transform:lowercase;
}
.vdoor.vnav-here .vdoor-label{ color:var(--vn-candle); }
.vdoor-note{
  margin-top:5px; font-size:13px; line-height:1.45; color:var(--vn-muted);
  text-transform:lowercase; max-width:24ch;
}
@media(max-width:520px){
  .vdoor{
    flex-direction:row; text-align:left; align-items:center; gap:16px;
    padding:16px 18px; border-radius:60px 14px 14px 60px;
  }
  .vdoor-glyph{ width:46px; height:46px; margin-bottom:0; flex-shrink:0; }
  .vdoor-note{ max-width:none; }
}

.vdoors-foot{
  max-width:1180px; width:100%; margin:auto auto 0; position:relative; z-index:2;
  padding:10px 22px calc(26px + var(--safe-bottom, env(safe-area-inset-bottom,0px)));
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
}
.vdoors-crisis{
  font-size:13.5px; color:var(--vn-muted); line-height:1.5; max-width:52ch;
}
.vdoors-crisis a{ color:var(--vn-clay-lit,#d4785c); color:#d4785c; font-weight:700; text-decoration:none; }
.vdoors-enter{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px; border-radius:6px; text-decoration:none;
  background:var(--vn-candle); color:var(--vn-night); font-weight:700; font-size:15px;
  border:1px solid var(--vn-candle); cursor:pointer;
  transition:box-shadow .3s ease, background .3s ease;
  box-shadow:0 0 24px -6px rgba(227,178,106,.6);
}
.vdoors-enter:hover{ background:var(--vn-candle-lit); box-shadow:0 0 32px -4px rgba(227,178,106,.8); }

body.vnav-locked{ overflow:hidden; }
@media(prefers-reduced-motion:reduce){
  .vdoors.open .vdoor{ animation:none; opacity:1; transform:none; }
}