/* Site header with dropdown nav. Shared by every page that carries the main nav, so the
   header is self-contained: it reads its own --nav-* variables and none of the page's.
   Light (paper) is the default; add class "dark" to .site-header on a dark-skin page.
   Dropdowns are <details>, so they open by click, Enter/Space and tap with no script.
   site-nav.js adds Escape, click-outside, one-open-at-a-time and the mobile menu button. */
.site-header{
  --nav-bg:rgba(251,250,246,.92);--nav-solid:#fbfaf6;--nav-panel:#fff;--nav-border:#e1e7ea;
  --nav-text:#2b3a44;--nav-strong:#0e1a20;--nav-muted:#44545e;--nav-hover:#f1f6f7;
  --nav-accent:#234e5c;--nav-focus:#2C5F6F;--nav-cta:#F39C12;--nav-cta-hover:#fbb142;--nav-cta-fg:#1a1208;
  position:sticky;top:0;z-index:50;background:var(--nav-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--nav-border);
  font-family:"DM Sans","Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
.site-header.dark{
  --nav-bg:rgba(20,20,20,.86);--nav-solid:#141414;--nav-panel:#1C1C1C;--nav-border:#2A2A2A;
  --nav-text:#A8A299;--nav-strong:#EFEBE3;--nav-muted:#8C857A;--nav-hover:#242424;
  --nav-accent:#EFEBE3;--nav-focus:#F7941D;--nav-cta:#F7941D;--nav-cta-hover:#C2730F;--nav-cta-fg:#141414;
}
.site-header *{box-sizing:border-box}
.site-header .nav-wrap{position:relative;max-width:1180px;margin:0 auto;padding:0 24px;min-height:64px;display:flex;align-items:center;gap:20px}
.site-header .brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;flex:none;margin-right:auto}
.site-header .lockup{display:block;height:30px;width:161px}
.site-header .brand img{display:block;border-radius:9px}
.site-header .brand-text{font-family:"Source Serif 4",Georgia,serif;font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--nav-strong);white-space:nowrap}
.site-header :focus-visible{outline:2px solid var(--nav-focus);outline-offset:3px;border-radius:4px}

.site-nav{display:flex;align-items:center;gap:22px}
.site-nav summary,.site-nav .navlink{display:inline-flex;align-items:center;gap:5px;min-height:44px;font-size:14px;font-weight:500;line-height:1.2;color:var(--nav-text);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .15s}
.site-nav summary{list-style:none;-webkit-user-select:none;user-select:none}
.site-nav summary::-webkit-details-marker{display:none}
.site-nav summary:hover,.site-nav .navlink:hover,.site-nav details[open] > summary{color:var(--nav-accent)}
.site-nav summary svg{width:14px;height:14px;flex:none;transition:transform .15s}
.site-nav details[open] > summary svg{transform:rotate(180deg)}
.site-nav details{position:relative}
.site-nav details ul{position:absolute;top:calc(100% + 6px);left:-14px;z-index:60;min-width:250px;margin:0;padding:8px;list-style:none;background:var(--nav-panel);border:1px solid var(--nav-border);border-radius:10px;box-shadow:0 8px 24px rgba(15,42,50,.12)}
.site-nav details:last-of-type ul{left:auto;right:-14px}
.site-nav details a{display:block;padding:10px 12px;border-radius:6px;font-size:14.5px;font-weight:500;line-height:1.3;color:var(--nav-strong);text-decoration:none}
.site-nav details a:hover{background:var(--nav-hover)}
.site-nav details a small{display:block;margin-top:3px;font-size:12.5px;font-weight:400;color:var(--nav-muted)}

.site-header .nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 18px;font-size:14px;font-weight:600;border-radius:8px;text-decoration:none;white-space:nowrap;background:var(--nav-cta);color:var(--nav-cta-fg);transition:background .15s;flex:none}
.site-header .nav-cta:hover{background:var(--nav-cta-hover)}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;border:1px solid var(--nav-border);border-radius:8px;color:var(--nav-strong);cursor:pointer;flex:none}
.nav-toggle svg{width:20px;height:20px}

@media (prefers-reduced-motion:reduce){.site-nav summary,.site-nav summary svg,.site-header .nav-cta{transition:none}}

/* Below 960px the row cannot hold six items. With script (site-nav.js adds .nav-js) the nav
   becomes a panel under the header, opened by the menu button, and each dropdown opens in
   place. Without script there is no working button, so the nav stays in the flow and wraps. */
@media (max-width:960px){
  .site-header .nav-wrap{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .site-nav{order:4;flex:1 0 100%;flex-wrap:wrap;gap:0 22px}
  .site-header.nav-js .nav-wrap{flex-wrap:nowrap;padding-top:0;padding-bottom:0}
  .site-header.nav-js .nav-toggle{display:inline-flex;order:3}
  .site-header.nav-js .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:8px 24px 20px;background:var(--nav-solid);border-bottom:1px solid var(--nav-border);max-height:calc(100vh - 64px);overflow-y:auto}
  .site-header.nav-js .site-nav.open{display:flex}
  .site-header.nav-js .site-nav summary,.site-header.nav-js .site-nav .navlink{display:flex;justify-content:space-between;font-size:16px;min-height:48px;border-bottom:1px solid var(--nav-border)}
  .site-header.nav-js .site-nav details ul{position:static;min-width:0;padding:6px 0 10px;border:0;border-radius:0;box-shadow:none;background:transparent}
}
@media (max-width:560px){.site-header .brand-text{display:none}}
@media (max-width:480px){
  .site-header .nav-wrap{padding-left:16px;padding-right:16px;gap:10px}
  .site-header .nav-cta{padding:9px 12px;font-size:13px}
  .site-header .lockup{height:26px;width:140px}
  .site-header.nav-js .site-nav{padding-left:16px;padding-right:16px}
}