/* css/nav.css · 2026-10-14 — the "our work" menu + the mobile burger panel (Nav Options.html:
   desktop A, mobile M3 with trace details). Linked right AFTER wash-theme.css on every page: it
   defines no :root, so wash-theme still owns the tokens; it sits later only to win the
   !important ties against each page's own .nav-links rules. Markup: js/nav-work.js. */
.wk-t{font:inherit;font-size:0.88rem;color:var(--ink-mid);letter-spacing:0.02em;font-weight:400;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap;transition:color 0.2s}
.wk-t:hover,.wk[data-open] .wk-t{color:var(--ink)}
.wk-cr{font-size:0.62rem;display:inline-block;transition:transform 0.25s}
.wk[data-open] .wk-cr{transform:rotate(180deg)}
.wk-i{text-decoration:none}
.wk-i b{font-weight:400}
@media (min-width:761px){
  .wk{position:relative;display:flex}
  .wk-dd{position:absolute;top:calc(100% + 22px);left:-22px;width:300px;background:var(--bg);border-top:4px solid var(--ink);box-shadow:0 18px 40px rgba(12,1,21,0.12);padding:8px 0 12px;z-index:120;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 0.22s,transform 0.22s,visibility 0s 0.22s}
  .wk[data-open] .wk-dd{opacity:1;visibility:visible;transform:none;transition:opacity 0.22s,transform 0.22s}
  .nav-links .wk-i{display:grid!important;grid-template-columns:34px minmax(0,1fr);column-gap:14px;align-items:center;padding:11px 22px;color:var(--ink)!important;font-size:0.98rem!important;letter-spacing:0!important;transition:background 0.2s}
  .wk-i:hover,.wk-i:focus-visible{background:var(--bg-warm);outline:none}
  .wk-i i{display:block;width:34px;height:34px;padding:5px;background:var(--w);grid-row:span 2}.wk-i i svg{display:block;width:100%;height:100%}
  .wk-i b{font-size:0.98rem}
  .wk-i small{grid-column:2;grid-row:2;font-size:0.78rem;font-weight:300;color:var(--ink-mid);line-height:1.4;margin-top:1px}
  .wk-i em{display:none}
  .nav-links .wk-ct{display:none!important}
}
@media (max-width:760px){
  .site-nav:has(.nav-links.open) img.wordmark{filter:invert(1)}
  .nav-links > *{flex-shrink:0}
  .nav-links{background:#0C0115!important;justify-content:flex-start!important;align-items:stretch!important;gap:0!important;padding:92px 26px 28px!important;overflow-y:auto;box-shadow:none!important}
  .nav-links > a:not(.nav-pill),.nav-links .wk-t{font-family:var(--ff-serif,'Libre Baskerville',Georgia,serif)!important;font-style:italic!important;font-weight:400!important;font-size:1.75rem!important;letter-spacing:-0.025em!important;color:#fff!important;display:flex!important;align-items:center;justify-content:space-between;width:100%;min-height:54px;padding:4px 0!important;border-bottom:1px solid rgba(239,231,164,0.35);text-align:left}
  .nav-links > a:first-child{border-top:1px solid rgba(239,231,164,0.35)}
  .nav-links > a:not(.nav-pill):hover,.nav-links .wk[data-open] .wk-t{color:var(--trace)!important}
  .wk{display:block;width:100%}
  .wk-cr{font-family:var(--ff-sans,system-ui,sans-serif);font-style:normal;font-size:0.8rem}
  .wk-dd{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows 0.35s,visibility 0s 0.35s}
  .wk[data-open] .wk-dd{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows 0.35s}
  .wk-in{overflow:hidden;min-height:0}
  .nav-links .wk-i{display:flex!important;justify-content:space-between;align-items:center;min-height:50px;padding:0 14px!important;background:var(--w);color:var(--ink)!important;font-size:0.98rem!important;font-family:var(--ff-sans,system-ui,sans-serif)}
  .wk-i i,.wk-i small{display:none}
  .wk-i em{font-family:var(--ff-serif,'Libre Baskerville',Georgia,serif);font-size:0.86rem}
  .nav-links > a.nav-pill{margin-top:24px!important;align-self:flex-start!important;background:var(--trace)!important;color:#0C0115!important;padding:2px 6px!important;font-size:1rem!important;font-family:var(--ff-sans,system-ui,sans-serif)!important;font-style:normal!important;min-height:0!important;display:inline!important}
  .nav-links .wk-ct{order:2;margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:2px}
  .nav-links .wk-ct a{color:var(--trace)!important;font-size:0.84rem!important;font-weight:300;min-height:36px;display:flex!important;align-items:center;font-family:var(--ff-sans,system-ui,sans-serif)}
}