/* THE HEADER EVERY PAGE SHARES. The home page's header is the source (tools/header.mjs copies its
   markup to every page); these rules carry its look on pages whose own colours differ. Its colours
   are its own, so a page's tokens never change it, and it follows the same theme switch as the page. */
.nav{--h-paper:#F6F5F0;--h-paper-2:#ECEAE1;--h-ink:#14202B;--h-ink-2:#33404B;--h-muted:#5C6873;--h-line:#D8D4C8;
  --h-accent:#1E6B4E;--h-accent-strong:#0F4D36;--h-accent-ink:#F6F5F0;--h-tint:#DCEAE1;--h-btn:#1E6B4E;--h-btn-ink:#F6F5F0;--h-btn-hover:#0F4D36;
  --h-shadow:0 1px 0 rgba(20,32,43,.06),0 12px 32px -18px rgba(20,32,43,.35);
  --h-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;--h-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--h-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nav{--h-paper:#0F1519;--h-paper-2:#161F27;--h-ink:#E8E6DF;--h-ink-2:#C7CAC3;--h-muted:#97A1AA;--h-line:#28333C;
  --h-accent:#56C094;--h-accent-strong:#8BD9B7;--h-accent-ink:#0B1512;--h-tint:#17312A;--h-btn:#56C094;--h-btn-ink:#0B1512;--h-btn-hover:#8BD9B7;--h-shadow:0 1px 0 rgba(0,0,0,.4),0 12px 32px -18px rgba(0,0,0,.8)} }
:root[data-theme="dark"] .nav{--h-paper:#0F1519;--h-paper-2:#161F27;--h-ink:#E8E6DF;--h-ink-2:#C7CAC3;--h-muted:#97A1AA;--h-line:#28333C;
  --h-accent:#56C094;--h-accent-strong:#8BD9B7;--h-accent-ink:#0B1512;--h-tint:#17312A;--h-btn:#56C094;--h-btn-ink:#0B1512;--h-btn-hover:#8BD9B7;--h-shadow:0 1px 0 rgba(0,0,0,.4),0 12px 32px -18px rgba(0,0,0,.8)}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--h-paper) 88%,transparent);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--h-line);font:400 1.0625rem/1.55 var(--h-body)}
.nav *{box-sizing:border-box}
.nav .wrap{max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px;flex-wrap:wrap;row-gap:.4rem;padding-block:.5rem}
.nav .brand{display:inline-flex;align-items:center;gap:.6rem;font:700 1.25rem/1 var(--h-display);letter-spacing:-.02em;color:var(--h-ink);text-decoration:none}
.nav .brand .mark{width:28px;height:28px;border-radius:7px;background:var(--h-accent);display:inline-grid;place-items:center;flex:none}
.nav .brand .mark svg{width:18px;height:18px}
.nav .brand .mark svg circle:first-child{stroke:var(--h-accent-ink)}
.nav .brand .mark svg circle:last-child{fill:var(--h-accent-ink)}
.nav .brand .ai{color:var(--h-accent-strong)}
.nav nav{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;row-gap:.4rem}
.nav nav a.link{font-size:.95rem;color:var(--h-ink-2);text-decoration:none;white-space:nowrap}
.nav nav a.link:hover,.nav nav a.link[aria-current="page"]{color:var(--h-ink)}
.nav nav a.link[aria-current="page"]{text-decoration:underline;text-underline-offset:.3em;text-decoration-color:var(--h-accent)}
.nav .btn.cta{display:inline-flex;align-items:center;gap:.5rem;font:600 .98rem/1 var(--h-body);padding:.85rem 1.2rem;border-radius:7px;border:1px solid var(--h-btn);background:var(--h-btn);color:var(--h-btn-ink);text-decoration:none;margin-left:.4rem}
.nav .btn.cta:hover{background:var(--h-btn-hover);border-color:var(--h-btn-hover)}
.nav .menu-btn{display:none;font:600 .95rem/1 var(--h-body);color:var(--h-ink);background:transparent;border:1px solid var(--h-line);border-radius:999px;padding:.55rem .9rem;cursor:pointer;min-height:2.4rem}
.nav .menu-btn[aria-expanded="true"]{border-color:var(--h-accent);color:var(--h-accent-strong)}
.nav .disp{position:relative;margin-left:.2rem}
.nav .disp-btn{font:700 1rem/1 var(--h-body);color:var(--h-ink);background:transparent;border:1px solid var(--h-line);border-radius:999px;padding:.5rem .8rem;cursor:pointer;display:inline-flex;align-items:baseline;gap:.05rem;min-height:2.4rem}
.nav .disp-btn .a1{font-size:.8rem}.nav .disp-btn .a2{font-size:1.1rem}
.nav .disp-btn:hover,.nav .disp-btn[aria-expanded="true"]{border-color:var(--h-accent);color:var(--h-accent-strong)}
.nav .disp-panel{position:absolute;right:0;top:calc(100% + .6rem);z-index:60;width:min(16.5rem,calc(100vw - 2rem));background:var(--h-paper);border:1px solid var(--h-line);border-radius:.8rem;padding:.9rem 1rem .8rem;box-shadow:var(--h-shadow);display:none;color:var(--h-ink)}
.nav .disp-panel.open{display:block}
.nav .disp-panel .dph{font:500 .66rem/1.3 var(--h-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--h-muted);margin:0 0 .5rem}
.nav .disp-panel .dph.mt{margin-top:.9rem}
.nav .disp-row,.nav .disp-sizes{display:flex;gap:.35rem}
.nav .disp-row button,.nav .disp-sizes button{flex:1;background:var(--h-paper-2);border:1px solid var(--h-line);border-radius:.5rem;color:var(--h-ink-2);font:600 .8rem/1 var(--h-body);cursor:pointer;padding:.55rem 0}
.nav .disp-sizes button{font-family:var(--h-display);font-weight:700;padding:.5rem 0 .4rem}
.nav .disp-sizes button:nth-child(1){font-size:.8rem}.nav .disp-sizes button:nth-child(2){font-size:1rem}.nav .disp-sizes button:nth-child(3){font-size:1.2rem}.nav .disp-sizes button:nth-child(4){font-size:1.45rem}
.nav .disp-row button:hover,.nav .disp-sizes button:hover{color:var(--h-ink);border-color:var(--h-accent)}
.nav .disp-row button[aria-pressed="true"],.nav .disp-sizes button[aria-pressed="true"]{border-color:var(--h-accent);color:var(--h-accent-strong);background:var(--h-tint)}
.nav .disp-note{font-size:.7rem;color:var(--h-muted);margin:.7rem 0 0}
@media (max-width:860px){
  .nav nav a.link{display:none}
  .nav .menu-btn{display:inline-flex;align-items:center}
  .nav nav.open a.link{display:block;flex:1 0 100%;order:9;padding:.55rem .2rem;border-top:1px solid var(--h-line);font-size:1rem}
  .nav nav.open .menu-btn{order:8}
}
@media print{ .nav .disp,.nav .cta{display:none!important} }
/* A page's own rules for a bare `header` or `.wrap` must not reshape this one. */
header.nav{padding:0;margin:0}
/* The back link on reading pages. */
p.back{margin:0 0 1rem;font-size:.95rem}
p.back a{text-decoration:none}
p.back a:hover{text-decoration:underline}