/* Canonical stitchu header. ONE source of truth for every page (index, create,
   closet, benchmark, api, patches, privacy) and the generated style pages.
   Self-contained, prefixed .sh-* class names so no page style can shift it.
   Fixed height, padding, font size here and NOWHERE else: not one pixel drifts
   from page to page. Active page marks its own link with .sh-active. */
:root { --sh-navy:#1f3a5f; --sh-deep:#3f74a8; }

/* Kill the browser-default purple/violet visited-link colour sitewide. This
   file is loaded on every page, so a visited link always inherits its own
   unvisited colour instead of falling through to the UA purple. */
a:visited { color: inherit; }
/* The brandpatch is white-on-navy; "inherit" above resolves the visited state
   against the parent (navy on navy = invisible logo). Pin the patch to white. */
.brandpatch:visited { color: #fff; }

/* Flow fixes — mirrored from theme-transitions.css so the ~24 style-library
   pages (which load THIS file but not theme-transitions.css) get them too.
   Both files carry the identical rules; double-loading on main pages is inert.
   #1 reserve the scrollbar gutter so the header never shifts left when a long
   page grows a scrollbar and a short one doesn't. #2 name the header/footer so a
   cross-document view transition pins them in place instead of redrawing them. */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
.sh-header, body > header { view-transition-name: site-header; }
body > footer { view-transition-name: site-footer; }

.sh-header{
  display:flex; justify-content:space-between; align-items:center;
  box-sizing:border-box; width:100%;
  height:74px; padding:0 40px;
  position:relative; z-index:6;
  font-family:Helvetica,Arial,sans-serif;
  border-bottom:0; background:transparent;
}
.sh-mark{
  font-family:'Didot','Bodoni 72',Georgia,serif;
  font-weight:400; font-size:26px; letter-spacing:.5px;
  color:var(--sh-navy); text-decoration:none; line-height:1;
  white-space:nowrap;
}
/* Canonical brand patch: the wordmark wearing the exact button signature
   (shared-button.css .sb-primary) — filled navy, inner 1.5px dashed white frame
   inset 4px, 2px radius, same hover. A sewn fabric label. Byte-identical on
   every page + the styles generator. Didot inside instead of the button's
   Helvetica; height tuned to the wordmark so the header never shifts. */
.brandpatch{
  position:relative; display:inline-block; box-sizing:border-box;
  padding:4px 12px; background:#1f3a5f; border:1px solid #1f3a5f; border-radius:2px;
  font-family:'Didot','Bodoni 72',Georgia,serif;
  font-weight:400; font-size:22px; letter-spacing:.5px; line-height:1;
  color:#fff; text-decoration:none; white-space:nowrap; vertical-align:middle;
  transition:background .18s;
}
.brandpatch::after{
  content:""; position:absolute; inset:4px;
  border:1.5px dashed rgba(255,255,255,.85); border-radius:2px;
  opacity:.9; pointer-events:none; transition:inset .18s;
}
.brandpatch:hover{ background:#2b4f7a; }
.brandpatch:hover::after{ inset:5px; }
.sh-nav{
  display:flex; align-items:center; gap:18px;
  font-size:13px; letter-spacing:.5px;
}
.sh-nav a{
  color:var(--sh-navy); text-decoration:none; opacity:.82;
  border-bottom:1px dashed transparent; padding-bottom:1px; line-height:1;
}
.sh-nav a:hover{ opacity:1; border-bottom-color:var(--sh-deep); }
.sh-nav a.sh-active{ opacity:1; border-bottom-color:var(--sh-deep); }
.sh-lang{ display:inline-flex; align-items:center; gap:6px; }
.sh-lang button{
  background:none; border:none; color:var(--sh-navy); opacity:.55;
  cursor:pointer; font-size:13px; letter-spacing:1px; padding:2px 4px;
  font-family:Helvetica,Arial,sans-serif; line-height:1;
}
.sh-lang button.sh-langon,
.sh-lang button.active{ opacity:1; border-bottom:1.5px solid var(--sh-navy); }
.sh-lang span{ opacity:.4; }

@media (max-width:640px){
  .sh-header{ height:auto; padding:16px 20px; flex-wrap:wrap; gap:10px; }
  .sh-nav{ gap:14px; flex-wrap:wrap; }
}