/* 0x13d::Research — the shared header bar, wordmark and footer strip.
 *
 * SOURCE OF TRUTH: _community/0x13d/brand/web/brand.css. Copied verbatim into every surface by
 * scripts/sync-brand.mjs; edit here, then sync. Markup comes from sites.mjs.
 *
 * Colour comes from the surface's own theme tokens (THEME.md): --header-bg, --header-ink,
 * --header-shadow and --footer-*, which every surface defines for both themes. Type does NOT come from
 * the surface: the bar is set in the brand faces below, so it is the same height and the same
 * wordmark on every site whatever the page under it is set in. The faces are self-hosted next to this
 * file, under their own family names so they never collide with a surface's own Plex. */

@font-face { font-family: "x13 Mono"; src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "x13 Mono"; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "x13 Sans"; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "x13 Serif"; src: url("fonts/IBMPlexSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --x13-mono: "x13 Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --x13-sans: "x13 Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --x13-serif: "x13 Serif", Georgia, "Times New Roman", serif;
  --x13-bar-h: 64px;
  --x13-max: 1440px;
  --x13-gutter: clamp(16px, 4.5vw, 64px);
  /* How much of the viewport top the bar holds. A surface's own sticky element sits at this offset. */
  --x13-sticky: var(--x13-bar-h);
}
/* ── the bar ──────────────────────────────────────────────────────────────────────────────────
   Full-bleed brand green with its shadow (THEME.md rule 6), one height everywhere. The contents sit on
   one shared measure so the wordmark lands in the same place as you move between sites. */
.x13-bar {
  position: sticky; top: 0; z-index: 30;
  background: var(--header-bg); color: var(--header-ink);
  box-shadow: var(--header-shadow);
}
/* On a phone the bar wraps to two rows; it scrolls away there rather than hold a quarter of the screen.
   This must come after the rule above: at equal specificity the later one wins, and until
   2026-10-18 it came first, so the bar stayed stuck on phones while --x13-sticky said 0. */
@media (max-width: 640px) {
  :root { --x13-sticky: 0px; }
  .x13-bar { position: relative; }
}
.x13-bar__in {
  box-sizing: border-box;
  max-width: var(--x13-max); margin: 0 auto;
  min-height: var(--x13-bar-h);
  padding: 10px var(--x13-gutter);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 24px;
}
.x13-bar__nav {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px clamp(14px, 2.2vw, 28px);
  margin: 0; padding: 0;
  font: 400 14px/1.2 var(--x13-sans);
}
.x13-bar .x13-bar__nav a, .x13-bar .x13-bar__nav a:hover { color: var(--header-ink); text-decoration: none; border: 0; }
.x13-bar .x13-bar__nav a:hover { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 0.25em; }
.x13-bar .x13-bar__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }

/* The theme toggle, drawn the same on every bar rather than in each surface's panel colours. */
.x13-bar .theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 10px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--header-ink) 35%, transparent);
  background: transparent; color: var(--header-ink);
  font: 400 12px/1 var(--x13-sans); cursor: pointer;
}
.x13-bar .theme-toggle:hover { border-color: var(--header-ink); }

/* ── the wordmark ─────────────────────────────────────────────────────────────────────────────
   0x13d::Research in the brand mono; a sub-site's own word (Podcast, Press, Claims) set in the serif
   italic, a size up, so the place you are reads before the family it belongs to. */
.x13-wm {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--header-ink); text-decoration: none; border: 0;
  white-space: nowrap; min-width: 0;
}
.x13-bar .x13-wm, .x13-bar .x13-wm:hover { color: var(--header-ink); text-decoration: none; }
.x13-wm:hover .x13-wm__word { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.x13-wm__inner { display: contents; } /* a host that wraps the inner markup (the reader) */
.x13-wm__marks { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.x13-wm__rule { width: 1px; height: 18px; background: currentColor; opacity: 0.35; }
.x13-icon { display: block; flex: none; }
.x13-wm__name { font: 600 16px/1 var(--x13-mono); letter-spacing: 0.01em; }
.x13-wm__sep { opacity: 0.55; font-weight: 400; }
.x13-wm__word {
  font-family: var(--x13-serif); font-style: italic; font-weight: 400;
  font-size: 1.28em; letter-spacing: 0; line-height: 0;
  margin-left: 0.04em;
}

/* Narrow screens: the family name gives way before the site's own word does. */
@media (max-width: 420px) {
  .x13-wm:has(.x13-wm__word) .x13-wm__name { font-size: 0; }
  .x13-wm:has(.x13-wm__word) .x13-wm__word { font-size: 21px; margin: 0; }
}

/* ── the family strip, in the footer ──────────────────────────────────────────────────────────
   The portfolio footer is constant across themes (--footer-*), so this is too. */
.x13-family {
  box-sizing: border-box;
  flex: 1 1 100%; width: 100%;
  margin: 28px 0 0; padding: 22px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--footer-ink, #faf7f1) 18%, transparent);
  color: var(--footer-ink, #faf7f1);
  font-family: var(--x13-sans);
}
.x13-family .x13-family__head {
  margin: 0 0 14px;
  font: 400 11px/1.2 var(--x13-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--footer-ink, #faf7f1) 70%, transparent);
}
.x13-family .x13-family__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px;
}
.x13-family .x13-family__site {
  display: flex; align-items: flex-start; gap: 12px; height: 100%; box-sizing: border-box;
  padding: 12px 14px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--footer-ink, #faf7f1) 16%, transparent);
  color: var(--footer-ink, #faf7f1); text-decoration: none;
}
.x13-family .x13-family__site:hover { border-color: var(--footer-accent, #cbb88f); color: var(--footer-ink, #faf7f1); }
.x13-family .x13-family__site:hover .x13-family__host { color: var(--footer-ink, #faf7f1); }
.x13-family .x13-family__site .x13-wm__marks { padding-top: 1px; }
.x13-family .x13-family__site .x13-icon { width: 20px; height: 20px; }
.x13-family .x13-family__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.x13-family .x13-family__name { font: 600 13px/1.2 var(--x13-mono); }
.x13-family .x13-family__name .x13-wm__word { font-size: 1.25em; line-height: 1; }
.x13-family .x13-family__host { font: 400 12px/1.2 var(--x13-mono); color: var(--footer-accent, #cbb88f); }
.x13-family .x13-family__role { font-size: 12.5px; line-height: 1.4; color: color-mix(in srgb, var(--footer-ink, #faf7f1) 72%, transparent); }