/* Darwin — shared site nav (top bar + drawer + live cart)
   Served by the darwin-assets Worker at /nav.css
   Content (links, cta, cart) comes from window.NAV (header injection).
   Self-contained: declares its own palette + Yapari @font-face so it also
   works on store pages that don't load an engine stylesheet. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');
@font-face{font-family:'Yapari Ultra';src:url('https://static1.squarespace.com/static/5ea9a82580530c7a6069f5c3/t/6a587a0f23c865764839cf2f/1784183311987/Yapari-Ultra.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Yapari';src:url('https://static1.squarespace.com/static/5ea9a82580530c7a6069f5c3/t/6a587a0faee87773cba8c418/1784183312114/Yapari-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Yapari';src:url('https://static1.squarespace.com/static/5ea9a82580530c7a6069f5c3/t/6a587a0f746cb4216c09f11c/1784183312111/Yapari-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Yapari';src:url('https://static1.squarespace.com/static/5ea9a82580530c7a6069f5c3/t/6a587a0fe3c0af1c1d1e0622/1784183312110/Yapari-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
#dwnav{
  --black:#0B0B0A;--offwhite:#F2F0E8;--gray-1:#8C8C86;--gray-2:#5B5B56;--moss:#4A4F45;
  --font-display:'Yapari','Helvetica Neue',Arial,sans-serif;
  --font-ultra:'Yapari Ultra','Yapari','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono','Courier New',monospace;
}
#dwnav *{box-sizing:border-box}
/* the shared nav is the ONLY nav — hide the storyboard engine's built-in bar */
#sb > nav{display:none !important}

/* ---- dot trigger (desktop, sits on the weld-seam line) ---- */
#dwnav .dwn-trig{position:fixed;top:100px;left:24px;z-index:60;width:14px;height:14px;margin-left:-7px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;padding:0;
  appearance:none;-webkit-appearance:none;outline:none;-webkit-tap-highlight-color:transparent}
#dwnav .dwn-trig::before{content:'';position:absolute;top:50%;left:50%;width:14px;height:14px;
  transform:translate(-50%,-50%) scale(1);border-radius:50%;
  background:radial-gradient(circle,rgba(224,169,104,.95) 0%,rgba(224,169,104,0) 75%);
  animation:dwn-glow 2.6s ease-in-out infinite;pointer-events:none}
#dwnav .dwn-trig.open::before{animation:none;opacity:0}
@keyframes dwn-glow{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.95}45%{transform:translate(-50%,-50%) scale(2.2);opacity:0}}
@media(prefers-reduced-motion:reduce){#dwnav .dwn-trig::before{animation:none}}
#dwnav .dwn-dot{width:14px;height:14px;border-radius:50%;background:var(--black);border:1.5px solid var(--gray-1);
  transition:border-color .3s,background .3s,box-shadow .3s;box-shadow:0 0 5px 1.5px rgba(224,169,104,.65)}
#dwnav .dwn-trig:hover .dwn-dot{border-color:var(--offwhite)}
#dwnav .dwn-trig.open .dwn-dot{border-color:var(--moss);background:var(--moss);box-shadow:0 0 6px rgba(74,79,69,.6)}

/* ---- mobile trigger ---- */
#dwnav .dwn-trig-m{display:none;position:fixed;top:20px;left:24px;z-index:60;
  box-sizing:border-box;width:32px;height:32px;
  align-items:center;justify-content:center;background:none;border:1px solid rgba(242,240,232,.35);padding:0;
  cursor:pointer;appearance:none;-webkit-appearance:none;outline:none}
#dwnav .dwn-trig-m .dwn-dot{width:8px;height:8px;box-shadow:0 0 4px 1px rgba(224,169,104,.6)}
#dwnav .dwn-trig-m.open .dwn-dot{background:var(--moss);border-color:var(--moss);box-shadow:0 0 6px rgba(74,79,69,.6)}
@media(max-width:780px){#dwnav .dwn-trig-m{display:flex}#dwnav .dwn-trig{display:none}}

/* ---- drawer ---- */
#dwnav .dwn-drawer{position:fixed;top:0;left:0;height:100%;width:260px;background:var(--black);
  border-right:1px solid rgba(242,240,232,.12);z-index:55;transform:translateX(-100%);transition:transform .45s ease;
  display:flex;flex-direction:column;padding:40px 32px}
#dwnav .dwn-drawer.open{transform:translateX(0)}
#dwnav .dwn-word{font-family:var(--font-ultra);font-weight:900;font-size:17px;letter-spacing:.12em;color:var(--offwhite);margin-bottom:60px}
#dwnav .dwn-links{display:flex;flex-direction:column;gap:26px}
#dwnav .dwn-links a{font-family:var(--font-display);font-weight:300;font-size:19px;color:var(--gray-1);
  text-decoration:none;position:relative;transition:color .25s,font-weight .15s;width:fit-content}
#dwnav .dwn-links a::after{content:'';position:absolute;left:0;top:50%;width:0;height:1px;background:var(--offwhite);transition:width .25s;transform:translateY(-50%)}
#dwnav .dwn-links a:hover{color:var(--offwhite);font-weight:700}
#dwnav .dwn-links a:hover::after{width:100%}
/* touch has no reliable hover and navigation cuts the transition off
   mid-draw (looked random) — on touch, JS adds .dwn-striking and we let
   the line complete before navigating, so it's identical every time */
@media(hover:none){
  #dwnav .dwn-links a:hover::after{width:0}
  #dwnav .dwn-links a.dwn-striking::after{width:100%}
  #dwnav .dwn-links a.dwn-striking{color:var(--offwhite)}
}
#dwnav .dwn-meta{margin-top:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--gray-2);text-transform:uppercase}
#dwnav .dwn-scrim{position:fixed;inset:0;background:rgba(11,11,10,.5);z-index:54;opacity:0;pointer-events:none;transition:opacity .4s}
#dwnav .dwn-scrim.open{opacity:1;pointer-events:auto}
@media(max-width:780px){#dwnav .dwn-drawer{width:220px;padding:90px 28px 40px}}

/* ---- top bar ---- */
#dwnav .dwn-bar{position:fixed;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:28px 44px;z-index:50;mix-blend-mode:difference;pointer-events:none}
#dwnav .dwn-bar a,#dwnav .dwn-bar .dwn-topmeta{pointer-events:auto}
#dwnav .dwn-brand{font-family:var(--font-ultra);font-weight:900;font-size:20px;letter-spacing:.14em;color:var(--offwhite);text-decoration:none;
  display:inline-flex;align-items:center;line-height:1}
#dwnav .dwn-right{display:flex;align-items:center;gap:22px}
#dwnav .dwn-topmeta{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--gray-1);text-transform:uppercase}
#dwnav .dwn-cta{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--offwhite);text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid rgba(242,240,232,.5);padding-bottom:2px;transition:border-color .25s,opacity .25s}
#dwnav .dwn-cta:hover{border-color:var(--moss);opacity:.8}
#dwnav .dwn-cart{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;
  color:var(--offwhite);text-transform:uppercase;text-decoration:none;border:1px solid rgba(242,240,232,.4);
  box-sizing:border-box;height:32px;
  border-radius:2px;padding:0 11px;transition:border-color .25s,opacity .25s}
#dwnav .dwn-cart:hover{border-color:var(--moss);opacity:.85}
#dwnav .dwn-cart svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
#dwnav .dwn-cart-n{font-weight:500;min-width:1ch;text-align:center}
#dwnav .dwn-cart.empty .dwn-cart-n{opacity:.55}
@media(max-width:780px){
  #dwnav .dwn-bar{padding:20px 20px 20px 68px}
  #dwnav .dwn-topmeta,#dwnav .dwn-cta{display:none}
}