/* The one Scriben site header. Every token it needs is declared here: three of
   the five sites have no design tokens at all, and the two that do disagree
   (paper #fafaf7 vs #f3f0e9, brass #aa7622 vs #b8833c). Nothing below reads a
   variable from the host page. */
/* THE TOKENS ARE ON ALL FOUR, AND THAT IS NOT TIDINESS.
   They used to be declared on .sbn-header alone. Custom properties inherit to
   DESCENDANTS, and .sbn-subnav is a SIBLING of the header, not a child — so every
   var() in the subnav resolved to nothing: `width` fell back to auto and it went
   full-bleed against the left edge, `top` fell back to auto so `position:sticky`
   did nothing at all, and its background went transparent, which on mcp's dark
   hero left the page links as dark text on a dark field. It read as a broken gap
   under the header on both docs and mcp.
   THREE ELEMENTS SIT OUTSIDE THE HEADER, not one. `.sbn-skip` precedes it and
   `.sbn-mobile` is a deliberate sibling — it is `position:fixed` and had to escape
   the header's sticky containing block. Both were reading tokens they could not
   see, which meant the skip link and the ENTIRE MOBILE MENU were rendering
   unstyled on all five sites. Nothing failed anywhere: an undefined custom
   property is not an error, it is a dropped declaration, and it is silent. */
.sbn-header, .sbn-subnav, .sbn-skip, .sbn-mobile {
  --sbn-paper: #fbfbf8;
  --sbn-ink: #171611;
  --sbn-brass: #aa7622;
  --sbn-line: rgba(23, 22, 17, 0.18);
  --sbn-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sbn-serif: "Newsreader", Georgia, serif;
  --sbn-shell: min(1440px, calc(100vw - 80px));
  --sbn-h: 82px;
}
.sbn-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--sbn-h);
  border-bottom: 1px solid var(--sbn-line);
  background: var(--sbn-paper);
  isolation: isolate; transform: translateZ(0); backface-visibility: hidden;
  font-family: var(--sbn-sans);
  transition: height 220ms ease;
}
.sbn-header.is-compact { height: 68px; }
.sbn-header-inner { width: var(--sbn-shell); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }

.sbn-skip { position: absolute; left: -9999px; }
.sbn-skip:focus { left: 12px; top: 12px; z-index: 200; padding: 10px 14px; background: var(--sbn-ink); color: #fff; }

.sbn-brand { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; text-decoration: none; }
.sbn-brand img { width: 126px; height: auto; display: block; }
/* The lockup names the surface you are on, so it is never the same word twice
   across the sites. Indented to sit under the wordmark's stem, not its edge. */
.sbn-brand span { margin: 3px 0 0 49px; color: var(--sbn-brass); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 7px; font-weight: 700; line-height: 1; letter-spacing: .2em; text-transform: uppercase; }

.sbn-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; margin-right: 34px; }
.sbn-nav > a, .sbn-menu > button {
  position: relative; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--sbn-ink); font-family: var(--sbn-sans); font-size: 15px; line-height: 1; text-decoration: none;
}
.sbn-nav > a::after, .sbn-menu > button::after {
  content: ""; position: absolute; right: 0; bottom: -6px; left: 0; height: 1px;
  background: var(--sbn-ink); transform: scaleX(0); transform-origin: right;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}
.sbn-nav > a:hover::after, .sbn-menu > button:hover::after,
.sbn-nav > a[aria-current]::after, .sbn-menu > button[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.sbn-menu { position: relative; }
.sbn-menu > button i { margin-left: 5px; color: var(--sbn-brass); font-style: normal; }

.sbn-pop {
  position: absolute; top: calc(100% + 18px); left: -18px; z-index: 10; width: 250px; padding: 8px 0;
  border: 1px solid var(--sbn-line); background: var(--sbn-paper);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
}
.sbn-menu:hover .sbn-pop, .sbn-menu:focus-within .sbn-pop, .sbn-menu.is-open .sbn-pop { opacity: 1; visibility: visible; transform: none; }
.sbn-pop a { display: block; padding: 9px 18px; color: var(--sbn-ink); font-size: 14px; text-decoration: none; }
.sbn-pop a:hover { background: rgba(23, 22, 17, .05); }

.sbn-actions { display: flex; align-items: center; gap: 16px; }
.sbn-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px;
  border: 1px solid var(--sbn-ink); background: var(--sbn-ink); color: var(--sbn-paper);
  font-family: var(--sbn-sans); font-size: 14px; text-decoration: none;
  transition: background 220ms ease, color 220ms ease;
}
.sbn-cta:hover { background: var(--sbn-brass); border-color: var(--sbn-brass); color: #fff; }
.sbn-toggle, .sbn-mobile { display: none; }

@media (max-width: 1180px) { .sbn-nav { gap: 22px; margin-right: 26px; } }

@media (max-width: 900px) {
  .sbn-header, .sbn-subnav, .sbn-skip, .sbn-mobile { --sbn-shell: calc(100vw - 40px); --sbn-h: 70px; }
  .sbn-header.is-compact { height: var(--sbn-h); }
  .sbn-nav, .sbn-actions .sbn-cta { display: none; }
  .sbn-toggle { width: 42px; height: 42px; padding: 0; border: 1px solid var(--sbn-ink); background: transparent; display: grid; place-content: center; gap: 6px; cursor: pointer; }
  .sbn-toggle span { width: 18px; height: 1px; background: var(--sbn-ink); transition: transform 180ms ease; }
  .sbn-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .sbn-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .sbn-mobile { position: fixed; top: 70px; right: 0; bottom: 0; left: 0; z-index: 90; padding: 22px 20px max(40px, env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; background: var(--sbn-paper, #fbfbf8); font-family: Inter, ui-sans-serif, sans-serif; }
  .sbn-mobile.is-open { display: flex; flex-direction: column; }
  .sbn-mobile a { padding: 14px 0; border-bottom: 1px solid rgba(23,22,17,.18); color: #171611; font-family: "Newsreader", Georgia, serif; font-size: 28px; line-height: 1; text-decoration: none; }
  .sbn-mobile p { margin: 22px 0 2px; color: #847d70; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
  .sbn-mobile .sbn-cta-wide { display: flex; margin-top: 26px; border: 1px solid #171611; font-family: Inter, sans-serif; font-size: 15px; }
  body.sbn-menu-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .sbn-header, .sbn-pop, .sbn-nav > a::after, .sbn-menu > button::after, .sbn-toggle span, .sbn-cta { transition: none !important; }
  .sbn-pop { transform: none !important; }
}

/* The page's own links, under the site nav. Deliberately quieter than the header
   above it: this is "where am I in this page", not "where can I go on the site". */
/* FULL-BLEED NAV, CENTRED INNER — and no pseudo-element.
   This used to be one element: `width: var(--sbn-shell)` with a `position:fixed`
   ::before behind it to paint the background edge to edge. Fixed, because the nav
   sets `overflow-x:auto` for its own scrolling and that clips an absolutely
   positioned child. But a fixed element is positioned against the VIEWPORT, so it
   cannot follow a parent that scrolls — and on mcp the parent does scroll, because
   `.dark{overflow:hidden}` makes itself the sticky container and the header inside
   it never sticks at all. The result was a white 46px stripe pinned across the
   middle of the dark hero, unrelated to where the nav actually was.
   A block-level nav paints its own background full width with no trick, and the
   inner div takes the shell width and the scrolling. */
.sbn-subnav {
  position: sticky; top: var(--sbn-h); z-index: 99;
  border-bottom: 1px solid var(--sbn-line); background: var(--sbn-paper);
  font-family: var(--sbn-sans); font-size: 13.5px; white-space: nowrap;
}
.sbn-subnav-inner {
  display: flex; gap: 26px; align-items: center;
  width: var(--sbn-shell); height: 46px; margin-inline: auto;
  overflow-x: auto; scrollbar-width: none;
}
.sbn-subnav-inner::-webkit-scrollbar { display: none; }
.sbn-subnav a { color: #6f695d; text-decoration: none; }
.sbn-subnav a:hover { color: var(--sbn-ink); }
@media (max-width: 900px) {
  .sbn-subnav-inner { width: calc(100vw - 32px); gap: 20px; }
}