/* Site header (2026-10-11). One header for the whole site, stamped into every
   page by tools/sync-header.py; the markup lives in that script and nowhere
   else. Three kinds: content (reading pages, fixed to the top), tool
   (generator, editor, 3D preview: compact, part of the work area) and auth
   (sign-in pages: logo and Help only).

   Pages still carry their old header rules (header, nav, nav a, .sitebar,
   #topbar). The new header uses its own class names, and every selector here
   starts with header.kh[data-kh] (two classes and a tag), so no leftover page
   rule wins over it. Two classes alone were not enough: pricing.html hid its
   links on phones with "nav a:not(.navCta):not(.on)", and each :not(.x)
   weighs as much as a class. */

header.kh[data-kh]{box-sizing:border-box;position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;
  width:auto;max-width:none;height:64px;margin:0;padding:0 clamp(16px,4vw,56px);
  background:rgba(217,222,210,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:0;border-bottom:1px solid rgba(27,42,33,.15);box-shadow:none;
  font:14px/1.4 "Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:#1B2A21;text-align:left}
header.kh[data-kh]::before,header.kh[data-kh]::after{content:none;display:none}
/* Tool pages are a fixed work area: the header takes the first grid row
   (editor) and does not float over the canvas. */
header.kh[data-kh="tool"]{position:relative;grid-column:1/-1;grid-row:1;height:52px;padding:0 clamp(12px,2vw,22px);
  background:#D9DED2;-webkit-backdrop-filter:none;backdrop-filter:none;z-index:20}
header.kh[data-kh="auth"]{position:relative}
/* Inside the editor the 3D preview is a floating panel with its own close button. */
.kerf-embed header.kh[data-kh]{display:none!important}

header.kh[data-kh] .kh-brand{display:flex;align-items:center;gap:10px;flex:none;margin:0;padding:0;color:#1B2A21;text-decoration:none;
  --lg-ink:#2E4A38;--lg-hole:#D9DED2;--lg-kerf:#B33A26}
header.kh[data-kh] .kh-logo{display:block;flex:none;width:28px;height:28px}
header.kh[data-kh] .kh-word{display:block;font-weight:700;font-size:14px;letter-spacing:.09em;line-height:1.08;text-transform:uppercase}
header.kh[data-kh] .kh-word span{display:block}
header.kh[data-kh="tool"] .kh-logo{width:24px;height:24px}
header.kh[data-kh="tool"] .kh-word{font-size:11px}

header.kh[data-kh] .kh-nav{display:flex;align-items:center;gap:22px;flex:0 1 auto;margin:0 0 0 auto;padding:0;
  position:static;width:auto;height:auto;background:none;border:0;font-size:14px;white-space:nowrap}
header.kh[data-kh="tool"] .kh-nav{gap:18px;font-size:13px}
header.kh[data-kh] .kh-nav a{display:inline-flex;align-items:center;margin:0;padding:0;border:0;background:none;
  color:#5C6B60;font-weight:500;text-decoration:none;white-space:nowrap}
header.kh[data-kh] .kh-nav a:hover{color:#1B2A21}
/* The page you are on reads darker and bolder. */
header.kh[data-kh] .kh-nav a[aria-current="page"]{color:#1B2A21;font-weight:700}
header.kh[data-kh] .kh-nav .kh-cta{padding:8px 16px;border-radius:999px;background:#2E4A38;color:#fff;font-weight:600}
header.kh[data-kh] .kh-nav .kh-cta:hover{background:#1B2A21;color:#fff}
/* Signed in already means started: a Pro member does not need "Start free". */
.kerf-signed-in header.kh[data-kh] .kh-nav .kh-cta{display:none}
header.kh[data-kh] .kh-short{display:none}
/* A brick-red NEW tag at the top right of a nav link (Lace, 10-21), raised like a superscript.
   It still takes its own width, so it never sits on top of the next link. */
header.kh[data-kh] .kh-nav .kh-new{display:inline-block;position:relative;top:-8px;margin-left:2px;padding:2px 3px;border-radius:3px;
  background:#B33A26;color:#fff;font-size:8px;font-weight:700;letter-spacing:.06em;line-height:1}

/* Tools (10-28): the link goes to /tools.html; with a mouse, hovering opens the
   menu of tool pages. A touch screen has no hover, so a tap simply follows the
   link. The ::before strip keeps the menu open while the pointer crosses the gap
   between the link and the menu. */
header.kh[data-kh] .kh-nav .kh-tools{position:relative;display:inline-flex;align-items:center}
header.kh[data-kh] .kh-nav .kh-tools-btn::after{content:'';display:inline-block;width:5px;height:5px;margin:-4px 0 0 7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
header.kh[data-kh] .kh-nav .kh-menu{display:none;position:absolute;top:calc(100% + 16px);left:-14px;z-index:60;flex-direction:column;
  width:260px;margin:0;padding:6px;background:#EFF1E9;border:1px solid rgba(27,42,33,.15);border-radius:8px;
  box-shadow:0 12px 32px rgba(27,42,33,.16);font-size:14px;white-space:nowrap}
header.kh[data-kh] .kh-nav .kh-menu::before{content:'';position:absolute;left:0;right:0;top:-18px;height:18px}
@media (hover:hover){
  header.kh[data-kh] .kh-nav .kh-tools:hover .kh-menu{display:flex}
  header.kh[data-kh] .kh-nav .kh-tools:hover .kh-tools-btn{color:#1B2A21}
}
header.kh[data-kh] .kh-nav .kh-tools:focus-within .kh-menu{display:flex}
header.kh[data-kh] .kh-nav .kh-menu a{display:flex;align-items:center;height:36px;padding:0 12px;border-radius:5px;color:#1B2A21;font-weight:500}
header.kh[data-kh] .kh-nav .kh-menu a:hover{background:#D9DED2;color:#1B2A21}
header.kh[data-kh] .kh-nav .kh-menu .kh-all{margin-top:6px;border-top:1px solid rgba(27,42,33,.12);border-radius:0 0 5px 5px;color:#2E4A38;font-weight:600}
header.kh[data-kh] .kh-nav .kh-menu .kh-new{top:0;margin-left:8px}

/* Phones: Generate, Editor, Templates and the account stay; Tools, Help and
   Pricing are in every footer. */
@media (max-width:760px){
  header.kh[data-kh]{gap:14px}
  header.kh[data-kh] .kh-nav{gap:16px}
  header.kh[data-kh] .kh-nav .kh-wide,header.kh[data-kh] .kh-nav .kh-cta{display:none}
  header.kh[data-kh] .kh-long{display:none}
  header.kh[data-kh] .kh-short{display:inline}
}
@media (max-width:420px){
  header.kh[data-kh] .kh-word{display:none}
  header.kh[data-kh] .kh-nav{gap:14px;font-size:13px}
}