/* Page-wide rules that inline styles cannot express. Layout and color live inline in src/render.js. */
@font-face {
  font-family: "Sora";
  src: url("/fonts/Sora.ttf") format("truetype");
  font-weight: 100 800;
  font-display: swap;
}

html { background: #121110; scroll-behavior: smooth; }
body { margin: 0; background: #121110; color: #F4EEE6; font-family: "Sora", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; }
[id] { scroll-margin-top: 80px; }

/* Visually hidden but read by screen readers. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Bot trap: hidden from people and assistive technology. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The language menu draws its own arrow; FAQ items keep the native marker. */
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary { list-style: none; }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid #CDB36A; outline-offset: 2px; }
input::placeholder { color: #A89E92; }
.option:has(input:checked) { background: #322C1C !important; color: #D9C384; }
.option input { accent-color: #CDB36A; }