/* 11DB design tokens — source of truth: design.md §2–§4 */
@font-face { font-family: "Bodoni Moda"; src: url("/static/fonts/bodoni-moda-var.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  /* palette */
  --lacquer: #0F0E0C;
  --onyx: #181613;
  --onyx-2: #211E1A;
  --graphite: #332E27;
  --bullion: #C9A24A;
  --gilt: #E6CF98;
  --bullion-deep: #7A6230;
  --parchment: #ECE6DA;
  --ash: #A39B8E;
  --verdigris: #76AE93;
  --cinnabar: #DB6E54;
  --amber: #D9A441;
  --slate: #8FA3B8;
  --focus-halo: rgba(201, 162, 74, .28);

  /* type */
  --font-display: "Bodoni Moda", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --font-body: "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-code: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --fs-display: 56px;
  --fs-h1: 40px;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;

  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --gutter: 32px;
  --content: 1200px;

  /* shape */
  --r-crisp: 2px;
  --r-panel: 6px;
  --r-seal: 10px;
  --shadow-float: 0 16px 40px rgba(0, 0, 0, .55);

  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 639px) {
  :root { --fs-display: 36px; --fs-h1: 30px; --fs-h2: 24px; --gutter: 16px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--lacquer);
  color: var(--parchment);
  font: 400 var(--fs-body)/1.7 var(--font-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; margin: 0; color: var(--parchment); }
h1 { font-size: var(--fs-h1); line-height: 1.15; }
h2 { font-size: var(--fs-h2); line-height: 1.25; }
h3 { font-size: var(--fs-h3); line-height: 1.35; }
p { margin: 0 0 var(--s-4); max-width: 68ch; }
a { color: var(--gilt); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, kbd, pre { font-family: var(--font-code); font-size: 13px; }
img, svg { max-width: 100%; }
::selection { background: var(--bullion); color: var(--lacquer); }
:focus-visible { outline: 2px solid var(--bullion); outline-offset: 2px; }

.muted { color: var(--ash); }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}