/* Site navigation, shared by case study pages (/work/<slug>).
   Copied from index.html so the top navigation looks and behaves the same on every page.
   If you change the nav styles in index.html, change them here too. */
:root{
  --font-display:'Caveat',cursive;--font-body:'DM Sans',system-ui,sans-serif;--font-mono:'JetBrains Mono',monospace;
  --text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;
  --tracking-wide:0.06em;--tracking-wider:0.12em;
  --sp-1:0.25rem;--sp-2:0.5rem;--sp-3:0.75rem;--sp-4:1rem;--sp-6:1.5rem;--sp-8:2rem;
  --gutter:clamp(1.25rem,4vw,3rem);--page-max:2000px;--radius-sm:4px;
  --ease-out:cubic-bezier(0.22,1,0.36,1);--dur-fast:150ms;--dur-normal:300ms;
}
.theme-toggle{box-sizing:border-box;width:var(--nav-ctrl,32px);height:var(--nav-ctrl,32px);padding:0;background:none;border:1px solid var(--c-border);border-radius:var(--radius-sm);color:var(--c-text-secondary);cursor:pointer;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);display:inline-flex;align-items:center;justify-content:center}
.theme-toggle svg{width:17px;height:17px;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle:hover{color:var(--c-text-primary);border-color:var(--c-text-tertiary)}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:var(--sp-4) 0;background:var(--c-nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color var(--dur-normal) var(--ease-out)}
.nav.scrolled{border-bottom-color:var(--c-border-subtle)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter)}
.nav__logo{flex-shrink:0;font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);color:var(--c-text-primary);text-decoration:none;letter-spacing:0em}
.nav__logo:hover{color:var(--c-text-primary)}
.nav__links{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sp-8);list-style:none;margin-left:var(--sp-8)}
.nav__links li{flex-shrink:0}
.nav__actions{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0;margin-left:var(--sp-6)}
.nav__link{font-size:var(--text-sm);color:var(--c-text-secondary);text-decoration:none;letter-spacing:var(--tracking-wide);transition:color var(--dur-fast) var(--ease-out)}
.nav__link:hover{color:var(--c-text-primary)}
.nav__cta{white-space:nowrap;display:inline-block;padding:var(--sp-1) var(--sp-4);border:1px solid var(--c-accent);border-radius:var(--radius-sm);color:var(--c-accent)!important;font-weight:500;font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;transition:all var(--dur-fast) var(--ease-out)}
.nav__cta:hover{background:var(--c-accent);color:var(--c-text-inverse)!important}
/* ===== NAV MENU: hamburger + liquid morph panel (below 1280px) ===== */
.nav__actions{--nav-ctrl:32px}
.nav__menu-toggle{display:none;box-sizing:border-box;align-items:center;justify-content:center;width:var(--nav-ctrl);height:var(--nav-ctrl);padding:0;background:none;border:1px solid var(--c-border);border-radius:var(--radius-sm);color:var(--c-text-secondary);cursor:pointer;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.nav__menu-toggle:hover,.nav__menu-toggle[aria-expanded="true"]{color:var(--c-text-primary);border-color:var(--c-text-tertiary)}
.theme-toggle:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.nav__menu-toggle:focus-visible,.morph__item:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.menu-toggle{width:24px;height:24px;stroke-width:1.9;transition:transform 600ms var(--ease-out)}
.menu-toggle__morph{stroke-dasharray:12 63;transition:stroke-dasharray 600ms var(--ease-out),stroke-dashoffset 600ms var(--ease-out)}
.nav__menu-toggle[aria-expanded="true"] .menu-toggle{transform:rotate(-45deg)}
.nav__menu-toggle[aria-expanded="true"] .menu-toggle__morph{stroke-dasharray:20 300;stroke-dashoffset:-32.42px}

.morph{--morph-accent:#C9A84C;--morph-accent-edge:#A88A35;--morph-blob:#1A1A1A;--morph-text:#F2EDE6;--morph-text-muted:#B5AFA6;--morph-text-2:#C9A84C;--morph-ring:#2A2A2A;
  position:fixed;z-index:101;top:calc(var(--nav-h,72px) + 8px);right:max(20px,var(--gutter));width:min(320px,calc(100vw - 40px));
  border-radius:28px;overflow:hidden;visibility:hidden;pointer-events:none;
  box-shadow:0 0 0 1px var(--morph-ring),0 24px 60px rgba(0,0,0,.35);
  clip-path:inset(0 0 calc(100% - 48px) calc(100% - 150px) round 24px);
  opacity:0;transition:clip-path 800ms var(--ease-out),opacity 250ms ease 550ms,visibility 0s linear 800ms}
[data-theme="light"] .morph{--morph-accent:#C9A84C;--morph-accent-edge:#8A6C1E;--morph-blob:#1A1714;--morph-text:#F5F2ED;--morph-text-muted:#CFC8BD;--morph-text-2:#E2C46F;--morph-ring:rgba(26,23,20,.12)}
.morph.is-open{visibility:visible;pointer-events:auto;opacity:1;clip-path:inset(0 0 0 0 round 28px);transition:clip-path 800ms var(--ease-out),opacity 150ms ease,visibility 0s}
.morph__accent{position:absolute;inset:0;background:var(--morph-accent);border:1px solid var(--morph-accent-edge);border-radius:inherit}
.morph__blob{position:absolute;left:50%;width:220%;height:220%;border-radius:50%;background:var(--morph-blob);transform:translateX(-50%);bottom:-220%;transition:bottom 800ms var(--ease-out)}
.morph.is-open .morph__blob{bottom:-30%;transition-delay:100ms}
.morph__items{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);padding:var(--sp-8) var(--sp-6)}
.morph__item{display:block;color:var(--morph-text-muted);text-decoration:none;font-family:var(--font-body);font-weight:400;font-size:var(--text-lg);letter-spacing:var(--tracking-wide);line-height:1;padding:2px 0;opacity:0;transform:translateY(8px);transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out)}
.morph__item:hover,.morph__item:focus-visible,.morph__item.is-rolling{color:var(--morph-text)}
.morph__item--accent,.morph__item--accent:hover,.morph__item--accent:focus-visible,.morph__item--accent.is-rolling{color:var(--morph-text-2);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--tracking-wider);text-transform:uppercase;border:1px solid var(--morph-text-2);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-4);margin-top:var(--sp-2)}
.morph.is-open .morph__item{opacity:1;transform:none;transition-delay:calc(400ms + var(--i) * 80ms)}
.morph__word{display:flex;justify-content:center;white-space:pre;height:1em;overflow:hidden}
.morph__ch{display:inline-block;height:1em;overflow:hidden}
.morph__ch-in{display:flex;flex-direction:column;transform:translateY(0);transition:none}
.morph__ch-in>span{display:block;height:1em;line-height:1em}
.morph__item.is-rolling .morph__ch-in{transform:translateY(-50%);transition:transform 800ms var(--ease-out);transition-delay:calc(var(--c) * 30ms)}

@media(max-width:1279.98px){
  .nav__actions{--nav-ctrl:40px}
  .nav__links{display:none}
  .nav__menu-toggle{display:inline-flex}
  .nav__actions{margin-left:auto}
}
@media(min-width:1280px){ .morph{display:none} }
@media(prefers-reduced-motion:reduce){
  .morph,.morph.is-open{transition:visibility 0s}
  .morph__blob{transition:none}.morph__item{transition:none}
  .menu-toggle,.menu-toggle__morph{transition:none}
}

/* The home page nav also carries .container, whose media rules (later in index.html) win at
   these widths: max width from 1280px up, and 20px side padding up to 640px. Mirror them exactly. */
.nav{line-height:1.6}
@media(min-width:1280px){.nav__inner.container{max-width:min(1200px,100% - 60px)}}
@media(max-width:640px){.nav__inner.container{padding:0 20px}}