/* --- zn nav peek ---------------------------------------------------------------
   The work peek under the nav (pattern audit 13, 2026-09-13). Hover or focus on
   WORK drops one row of the four lead tiles and an "All work" link, as a surface
   under the nav bar. Built by /sqs/zn-nav.js from its own data list, so a page
   only links the two files: no markup edits, no change to the nav's own rules
   (its scroll state and its tagline stay untouched). Paper-2 surface, one soft
   shadow, no outline. Tokens only. Fine pointers and keyboards; below 901px the
   nav tightens and there is no hover, so the peek is never shown there.
   ---------------------------------------------------------------------------- */
.zn-navpeek{
  position:absolute;left:0;right:0;top:100%;z-index:49;
  background:var(--v4-paper-2);color:var(--v4-ink);
  box-shadow:0 34px 64px -34px color-mix(in srgb,var(--v4-ink) 48%,transparent);
  padding:28px 40px 30px;
  font-family:var(--sans);font-size:16px;line-height:1.4;letter-spacing:0;text-transform:none;
  box-sizing:border-box;
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .22s var(--ease-soft,cubic-bezier(.22,.61,.36,1)),
             transform .22s var(--ease-soft,cubic-bezier(.22,.61,.36,1)),
             visibility 0s linear .22s;
}
.zn-navpeek *{box-sizing:border-box;margin:0}
.zn-navpeek.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
/* the script measures the panel once to decide where it hangs; no transition during that */
.zn-navpeek.is-measuring{transition:none !important;transform:none !important}
/* the shell pages pin their nav static, so the script hangs the panel from the body
   instead, at the nav's foot (top is written inline, in page px) */
.zn-navpeek.is-body{top:auto}
.zn-navpeek-inner{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:22px 20px;align-items:start;
  max-width:1400px;margin:0 auto;
}
.zn-navpeek-tile{
  display:flex;flex-direction:column;gap:9px;min-width:0;
  color:inherit;text-decoration:none;background:none;
}
.zn-navpeek-tile:hover{text-decoration:none;background:none}
.zn-navpeek-art{
  display:block;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:4px;
  background:var(--v4-paper-3);
}
.zn-navpeek-art img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease-soft,cubic-bezier(.22,.61,.36,1));
}
.zn-navpeek-tile:hover .zn-navpeek-art img,.zn-navpeek-tile:focus-visible .zn-navpeek-art img{transform:scale(1.045)}
.zn-navpeek-name{
  display:block;margin-top:2px;
  font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.1;letter-spacing:-.012em;
  color:var(--v4-ink);font-variation-settings:"opsz" 32;
  transition:color .25s ease;
}
.zn-navpeek-tile:hover .zn-navpeek-name,.zn-navpeek-tile:focus-visible .zn-navpeek-name{color:var(--v4-accent)}
.zn-navpeek-cat{
  display:block;
  font-family:var(--mono);font-size:var(--zn-label,12px);letter-spacing:var(--zn-label-track,.08em);text-transform:uppercase;
  color:var(--v4-mute);line-height:1.35;
}
.zn-navpeek-all{
  align-self:end;justify-self:end;
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 0 7px;white-space:nowrap;position:relative;
  font-family:var(--mono);font-size:var(--zn-label,12px);letter-spacing:var(--zn-label-track,.08em);text-transform:uppercase;
  color:var(--v4-ink-2);text-decoration:none;background:none;
}
.zn-navpeek-all:hover{text-decoration:none;background:none;color:var(--v4-accent)}
.zn-navpeek-all::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-soft,cubic-bezier(.22,.61,.36,1));
}
.zn-navpeek-all:hover::after,.zn-navpeek-all:focus-visible::after{transform:scaleX(1)}
.zn-navpeek-all-arr{font-family:var(--serif);transition:transform .35s var(--ease-soft,cubic-bezier(.22,.61,.36,1))}
.zn-navpeek-all:hover .zn-navpeek-all-arr{transform:translateX(3px)}
.zn-navpeek-tile:focus,.zn-navpeek-all:focus{outline:none}
.zn-navpeek-tile:focus-visible,.zn-navpeek-all:focus-visible{outline:2px solid var(--v4-accent);outline-offset:4px;border-radius:4px}
@media (max-width:1100px){
  .zn-navpeek{padding:24px 40px 26px}
  .zn-navpeek-inner{gap:18px 16px}
  .zn-navpeek-name{font-size:19px}
}
@media (max-width:900px){ .zn-navpeek{display:none} }
@media (prefers-reduced-motion:reduce){
  .zn-navpeek{transition:none;transform:none}
  .zn-navpeek-art img,.zn-navpeek-name,.zn-navpeek-all::after,.zn-navpeek-all-arr{transition:none}
  .zn-navpeek-tile:hover .zn-navpeek-art img{transform:none}
}
/* --- end zn nav peek --- */