/* ============================================================================
   Red Line Digital: shared site header. One source of truth.
   Link this on every page and delete the page's inline header CSS. The header is
   a centered column on EVERY page, so the wordmark sits at the same x-position
   site-wide (no full-bleed-vs-centered jump). The header must be a direct child
   of the body/app shell, NOT nested inside a page's content wrapper.
   Retune the whole site's header width by changing the one max-width below.
   ============================================================================ */
header {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 18px;
  width: 100%; max-width: 1080px; margin: 0 auto; box-sizing: border-box;
  padding: 20px 34px 18px;
}
.brand { font-family: var(--mono); font-weight: 700; letter-spacing: -0.4px; font-size: 16px; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0; }
.brand .slash { color: var(--red); font-size: 19px; margin-right: -2px; }
.crumbs { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); display: inline-flex; align-items: center; gap: 13px; white-space: nowrap; }
.crumbs .cmd { color: var(--ink-dim); text-decoration: none; transition: color 0.2s; }
.crumbs .cmd .slash { color: var(--gold); margin-right: 1px; }
html[data-theme="light"] .crumbs .cmd .slash { color: #8a5a18; }
.crumbs a.cmd:hover { color: var(--ink); }
.crumbs .cmd[aria-current] { color: var(--ink); }
.h-spacer { flex: 1; }
.f-social { display: inline-flex; align-items: center; gap: 22px; }
.f-nav { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
/* Map/Walkthrough/Text toggle: a segmented control on the guide pages; harmless elsewhere.
   Three renderings of one guide (interactive map, stepped walkthrough, plain text), so it
   reads as one control with three seats, not three loose buttons. */
.vswitch { display: inline-flex; gap: 2px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px; padding: 3px; backdrop-filter: blur(10px); }
.vswitch button { position: relative; border: none; background: none; font-family: var(--body); font-size: 12.5px; font-weight: 600; color: var(--ink-dim); padding: 6px 15px; border-radius: 999px; cursor: pointer; letter-spacing: 0.2px; white-space: nowrap; transition: color 0.2s, background 0.2s; }
.vswitch button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.vswitch button.on { background: var(--ink); color: var(--bg); box-shadow: 0 1px 5px -2px color-mix(in srgb, var(--ink) 60%, transparent); }
.vswitch button.on:hover { background: var(--ink); color: var(--bg); }
.vswitch button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--glass-border); background: var(--glass); border-radius: 50%; margin-left: auto; cursor: pointer; color: var(--ink-dim); transition: all 0.25s; backdrop-filter: blur(10px); }
.icon-btn:hover { color: var(--ink); border-color: var(--line-2); }
.icon-btn svg { width: 17px; height: 17px; }
@media (max-width: 760px) { .crumbs { display: none; } }
@media (max-width: 620px) { header { padding: 14px 18px; gap: 10px; flex-wrap: wrap; } .icon-btn { width: 44px; height: 44px; } }