/* Wx tokens v0.2 (canvas stap 4, poort D2): skin wx + endorsed skins. Fonts zelf gehost (geen externe verzoeken). */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #ffffff; --surface: #f4f1f7; --ink: #2b1745; --muted: #5e4f70; --line: #ebe6f0;
  --accent: #2b1745; --accent-text: #2b1745;
  --display-stretch: 115%; --display-weight: 800;
  --radius-hero: 32px; --radius-button: 999px;
  --focus: #2b1745;
}
/* Dimensies (core, vast) */
[data-dim="work"] { --accent: #1790d6; --accent-text: #0f5f91; }
[data-dim="relationships"] { --accent: #c2427e; --accent-text: #9b2f62; }
[data-dim="money"] { --accent: #1a7a46; --accent-text: #14603a; }
[data-dim="community"] { --accent: #f2c230; --accent-text: #7a5f00; }
/* Endorsed skins */
[data-skin="capital"] { --bg: #0f1c2e; --surface: #16263d; --ink: #ffffff; --muted: #b8c2d1; --line: #24344c; --accent: #6adba8; --accent-text: #6adba8; --display-stretch: 70%; --display-weight: 700; --radius-hero: 4px; --radius-button: 4px; --focus: #ffffff; }
[data-skin="show"] { --bg: #2b1745; --surface: #3a2458; --ink: #ffffff; --muted: #e6def0; --line: #5a4672; --accent: #f2c230; --accent-text: #f2c230; --focus: #ffffff; }
[data-skin="events"] { --bg: #dcebff; --surface: #ffffff; --ink: #1b2a6b; --muted: #4a5a8f; --line: #b9cbe8; --accent: #ff7a3d; --accent-text: #1b2a6b; --display-stretch: 100%; --radius-hero: 18px; --focus: #1b2a6b; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 17px/1.55 "Atkinson Hyperlegible Next", system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
header { border-bottom: 1px solid var(--line); }
header .wrap { display: flex; align-items: baseline; gap: 12px; padding-top: 20px; padding-bottom: 20px; }
.mark { font-family: Archivo, sans-serif; font-weight: 800; font-stretch: 125%; font-size: 26px; text-decoration: none; }
.mark sup { font-size: 14px; }
.brand { font-family: Archivo, sans-serif; font-weight: 700; font-size: 17px; text-decoration: none; }
main { flex: 1; padding: 48px 0 64px; }
.hero { background: var(--surface); border-radius: var(--radius-hero); padding: 56px 48px; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 10px; background: var(--accent); }
.label { display: inline-block; font-weight: 700; font-size: 14px; color: var(--accent-text); letter-spacing: .02em; margin: 0 0 16px; }
h1 { margin: 0 0 20px; font-family: Archivo, sans-serif; font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-size: clamp(36px, 7vw, 76px); line-height: .98; letter-spacing: -0.015em; max-width: 14ch; }
.tagline { margin: 0 0 32px; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45; color: var(--muted); max-width: 40ch; }
.button { display: inline-block; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 700; padding: 14px 24px; border-radius: var(--radius-button); min-height: 48px; }
.button:hover { opacity: .92; text-decoration: underline; }
footer { border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
footer .wrap { padding-top: 24px; padding-bottom: 32px; }
@media (max-width: 639px) { .hero { padding: 40px 24px; } main { padding-top: 24px; } }