/* Shared foundation for every page in every language.
 *
 * Only things that are genuinely common live here: the design tokens, the
 * reset, and the language switcher. The landing page and the legal pages are
 * two different designs that happen to reuse class names -- both define .nav
 * and .topbar with incompatible rules -- so their layout stays apart in
 * home.css and legal.css. Merging them into one sheet would turn the legal
 * pages' plain row of links into the landing page's sticky bar.
 */

:root{
  --gold:#E0B63A;--gold-bright:#EFCB52;--gold-deep:#96812F;
  --ink:#1A1C18;--ink-soft:#2A2D28;
  --olive:#474B36;--olive-soft:#5A5E47;--olive-deep:#363927;
  --base:#ECEEE8;--paper:#F4F5F0;--card:#FFFFFF;
  --sage:#C2C6BC;--sage-soft:#D6DACE;--muted:#62665E;--muted-soft:#8A8E84;
  --line:rgba(26,28,24,.10);--ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
::selection{background:var(--gold);color:var(--ink)}

/* ---- language switcher -------------------------------------------------
 * A globe button that opens a short list of the other languages. The list
 * holds plain links, so it navigates with JavaScript switched off and a
 * crawler can follow it to the translation; script.js only opens and closes
 * the panel and carries the reader's current section across.
 *
 * The button appears in two places with opposite backgrounds -- the landing
 * page's bar, which starts dark and turns light on scroll, and the legal
 * pages' light header. It takes its colours from the four --sw-* variables
 * so each context can recolour it without restyling the component.
 */
.langsw{position:relative;display:inline-flex}
.langsw-btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:transparent;border:1px solid var(--sw-border,var(--sage));
  border-radius:8px;padding:8px 10px;line-height:0;
  color:var(--sw-fg,var(--muted));font:inherit;
  transition:color .2s,border-color .2s,background .2s;
}
.langsw-btn:hover{color:var(--sw-fg-hover,var(--ink));border-color:var(--sw-border-hover,var(--ink))}
.langsw-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.langsw-btn .globe{width:18px;height:18px;display:block;flex:none}
.langsw-btn .caret{width:10px;height:7px;display:block;flex:none;transition:transform .25s var(--ease)}
.langsw-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}

.langsw-menu{
  position:absolute;top:calc(100% + 9px);right:0;min-width:158px;
  list-style:none;padding:6px;z-index:1000;
  background:var(--card);border:1px solid var(--sage);border-radius:10px;
  box-shadow:0 20px 44px -20px rgba(26,28,24,.55);
}
.langsw-menu[hidden]{display:none}
.langsw-menu a{
  display:flex;align-items:baseline;gap:9px;padding:9px 11px;border-radius:6px;
  font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:500;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:background .15s,color .15s;
}
.langsw-menu a:hover{background:rgba(224,182,58,.16);color:var(--ink)}
.langsw-menu a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.langsw-menu .code{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);
}

@media (prefers-reduced-motion:reduce){
  .langsw-btn,.langsw-btn .caret{transition:none!important}
}