/* The reform site header, for pages still on assets/style.css.
   ---------------------------------------------------------------------------
   reform.css cannot simply be loaded alongside style.css: its :root tokens and
   bare element rules reshape the page body (tried on about.html — h1 went from
   57.6px to 108px and the page grew 1446px). So the header rules are mirrored
   here, scoped under .reform-chrome. The scope does two jobs: it keeps every
   rule off the rest of the page, and it outranks style.css's own .site-bar /
   .site-nav / .brand / .lang rules, which use the same class names.
   Tokens are local for the same reason — :root belongs to the host page.

   KEEP IN SYNC with the .site-header block in assets/reform.css. */

.reform-chrome {
  --chrome-paper: #fffdf8;
  --chrome-ink: #1b2136;
  --chrome-muted: #626778;
  --chrome-line: rgba(16, 21, 38, .13);
  --chrome-midnight: #101526;
  --chrome-orange: #f5a623;
  --chrome-violet: #7565dd;
  --chrome-shadow: 0 24px 70px rgba(33, 30, 44, .12);

  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--chrome-paper) 88%, transparent);
  border-bottom: 1px solid rgba(16, 21, 38, .08);
  backdrop-filter: blur(18px);
}

.reform-chrome .shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.reform-chrome .site-bar { min-height: 76px; display: flex; align-items: center; gap: 30px; padding: 0; }
.reform-chrome .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--chrome-ink); text-decoration: none; font-weight: 750; letter-spacing: -.025em; font-size: 1.15rem; }
.reform-chrome .brand img { width: 34px; height: 34px; }
.reform-chrome .brand small { display: block; color: var(--chrome-muted); font-size: .66rem; font-weight: 550; letter-spacing: .1em; text-transform: uppercase; line-height: 1; margin-top: 3px; }
.reform-chrome .site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.reform-chrome .site-nav a { color: #3d4459; text-decoration: none; font-weight: 520; font-size: .91rem; padding: 9px 12px; border-radius: 99px; }
.reform-chrome .site-nav a:hover,
.reform-chrome .site-nav a[aria-current="page"] { color: var(--chrome-ink); background: #fff; box-shadow: 0 4px 20px rgba(16, 21, 38, .07); }
.reform-chrome .site-nav a[aria-current="page"] { font-weight: 650; }
.reform-chrome .site-nav .join { background: var(--chrome-orange); color: #382300; font-weight: 680; margin-left: 6px; box-shadow: 0 7px 18px rgba(245,166,35,.2); }
.reform-chrome .site-nav .join:hover { background: #efa01f; color: #2f1e00; box-shadow: 0 9px 22px rgba(245,166,35,.28); }
.reform-chrome .lang { border: 1px solid var(--chrome-line); border-radius: 99px; background: rgba(255,255,255,.4); padding: 8px 10px; color: #3d4459; font: inherit; font-size: .91rem; font-weight: 450; margin-left: 6px; max-width: 92px; }
.reform-chrome .menu-toggle { display: none; margin-left: auto; border: 1px solid var(--chrome-line); background: #fff; border-radius: 99px; padding: 8px 14px; color: var(--chrome-ink); font: inherit; font-weight: 650; cursor: pointer; }

@media (max-width: 920px) {
  .reform-chrome .menu-toggle { display: block; }
  .reform-chrome .site-nav { display: none; position: absolute; top: 69px; left: 20px; right: 20px; padding: 14px; background: #fff; border: 1px solid var(--chrome-line); border-radius: 22px; box-shadow: var(--chrome-shadow); flex-direction: column; align-items: stretch; }
  .reform-chrome .site-nav.open { display: flex; }
  .reform-chrome .site-nav a { padding: 11px 13px; }
  .reform-chrome .site-nav .join { margin-left: 0; text-align: center; }
  .reform-chrome .lang { margin: 7px 0 0; max-width: none; }
}

@media (max-width: 600px) {
  .reform-chrome .brand small { display: none; }
}