/* ═══════════════════════════════════════════════════════════════════════════
   Site chrome — the header every page shares.

   This is the one component that is genuinely identical on all 406 pages, so
   it lives in its own file rather than in horizon.css (the homepage) or
   redesign.css (everything else). Both link it; neither owns it. Change the
   header here and it changes everywhere, which is the whole point — the two
   templates having their own header is what made the site read as two sites.

   Self-contained on purpose: it declares the tokens it needs on .chrome
   instead of reading horizon.css's or redesign.css's, because those two use
   different names for the same values. The accent is the deliberate exception
   — it follows --accent when the homepage's renderer is animating it through
   the chapters, then --acc on the interior pages, then a literal.

   Markup is generated: scripts/build-chrome.js writes it into the interior
   pages, scripts/build-homepage.js into / and /en/. Do not hand-edit a header.
   ═══════════════════════════════════════════════════════════════════════════ */

.chrome {
  /* Local token set — see the note above. */
  --ch-fg: #f4f1ee;
  --ch-dim: rgba(244, 241, 238, 0.74);
  --ch-dimmer: rgba(244, 241, 238, 0.5);
  --ch-hair: rgba(244, 241, 238, 0.14);
  --ch-accent: var(--accent, var(--acc, #ff7a2f));
  --ch-pad: clamp(20px, 4.4vw, 64px);
  --ch-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ch-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  position: fixed;
  top: 0; left: 0; right: 0;
  /* Above the page and the homepage canvas, below the consent panel (500) and
     the boot screen (300). The interior pages' scroll-progress hairline sits
     at 220 and stays on top of the scrim, which is where it belongs. */
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 2.6vw, 32px) var(--ch-pad);
  font-family: var(--ch-mono);
  font-size: 10.5px;
  /* Stated, not inherited. On the interior pages this sits inside a wrapper
     with line-height 1.65, which made the header three pixels taller there
     than on the homepage — the one measurable difference left between the two. */
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* The header floats over both the canvas and the page. Without a scrim of its
   own, page content scrolls straight through the navigation. */
.chrome::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: calc(100% + 42px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.99) 58%,
    rgba(0,0,0,0.62) 80%,
    rgba(0,0,0,0) 100%);
}

.chrome a { color: inherit; text-decoration: none; }

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ch-fg); }
.brand-mark {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 1.5px var(--ch-accent), 0 0 14px 1px var(--ch-accent);
  transition: box-shadow 0.7s var(--ch-ease);
  flex: none;
}
.brand-name { letter-spacing: 0.22em; }

.chrome-nav { display: flex; align-items: center; gap: 4px; }
.chrome-nav a {
  padding: 8px 10px;
  color: var(--ch-dim);
  white-space: nowrap;
  transition: color 0.35s var(--ch-ease);
}
.chrome-nav a:hover { color: var(--ch-fg); }
/* The page you are on. The homepage has no current item — it is the brand. */
.chrome-nav a[aria-current] { color: var(--ch-accent); }
.chrome-nav a.is-cta {
  margin-left: 8px;
  padding: 9px 16px;
  border: 1px solid var(--ch-hair);
  border-radius: 100px;
  color: var(--ch-fg);
  transition: border-color 0.35s var(--ch-ease), color 0.35s var(--ch-ease);
}
.chrome-nav a.is-cta:hover { border-color: var(--ch-accent); color: var(--ch-accent); }

.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 10px;
  padding: 3px;
  border: 1px solid var(--ch-hair);
  border-radius: 100px;
}
.lang a {
  padding: 5px 10px;
  border-radius: 100px;
  color: var(--ch-dimmer);
  white-space: nowrap;
}
.lang a[aria-current] { background: var(--ch-fg); color: #000; }

/* Mobile navigation without a line of JavaScript: <details> is keyboard
   accessible, survives a failed script and needs no ARIA plumbing. It replaced
   a button plus a hidden panel plus ~60 lines of focus-trap wiring in
   assets/js/site.js, which is now inert on every page. */
.menu { display: none; }
.menu > summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 14px;
  border: 1px solid var(--ch-hair);
  border-radius: 100px;
  color: var(--ch-fg);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: "Menu"; }
.menu[open] > summary::after { content: "Sluit"; }
html[lang^="en"] .menu[open] > summary::after { content: "Close"; }
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: -1;
  padding: 96px var(--ch-pad) var(--ch-pad);
  background: #000;
  display: grid;
  align-content: start;
  gap: 2px;
  overflow-y: auto;
}
.menu-panel a {
  padding: 14px 0;
  border-bottom: 1px solid var(--ch-hair);
  color: var(--ch-dim);
  font-size: 12px;
  letter-spacing: 0.2em;
}
.menu-panel a[aria-current] { color: var(--ch-accent); }
.menu-panel a.is-cta { color: var(--ch-accent); }
.menu-panel .lang { margin: 24px 0 0; justify-self: start; }
/* .menu-panel a outranks .lang a, so the pills need their own reset or they
   inherit the full-width row padding and collapse into each other — and the
   active language would be drawn in the accent instead of knocked out. */
.menu-panel .lang a { padding: 6px 13px; border-bottom: 0; font-size: 10.5px; }
.menu-panel .lang a[aria-current] { color: #000; }

/* Availability line. Only the homepage carries one; the interior pages spend
   that width on navigation. */
.chrome-meta { display: inline-flex; align-items: center; gap: 10px; color: var(--ch-dim); }
.dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ch-accent);
  animation: pulse 2.6s var(--ch-ease) infinite;
  flex: none;
  display: inline-block;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.chrome :focus-visible, .menu-panel :focus-visible {
  outline: 2px solid var(--ch-accent);
  outline-offset: 3px;
}

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .chrome-nav .is-secondary { display: none; }
}

@media (max-width: 900px) {
  .chrome-nav { display: none; }
  .menu { display: block; }
  .chrome-meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
}