/* TriSplit support site. Brick Lab tokens (design/brick-lab/tokens.json), no Brick Lab branding. */
@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/BricolageGrotesque-Variable.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(fonts/InstrumentSans-Variable.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/IBMPlexMono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/IBMPlexMono-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --surface: #f5f2eb; --surface-raised: #ffffff; --surface-sunken: #ece8df; --surface-inverse: #16161a;
  --line: #ddd7cb; --line-strong: #8a8478; --ink: #16161a; --ink-muted: #5c574e; --ink-inverse: #f5f2eb;
  --pool: #2a55e0; --pool-ink: #1e46c8; --brick: #e5502a; --volt: #c6ef3a;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #121214; --surface-raised: #1d1d21; --surface-sunken: #0b0b0c; --surface-inverse: #f5f2eb;
    --line: #2e2e33; --line-strong: #6b6b73; --ink: #f5f2eb; --ink-muted: #a8a39a; --ink-inverse: #16161a;
    --pool: #7a96ff; --pool-ink: #9db4ff; --brick: #ff6a3d; --volt: #c6ef3a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font: 400 17px/1.55 "Instrument Sans", system-ui, sans-serif;
}
.bond { display: flex; height: 8px; }
.bond span { flex: 1; } .bond .s { background: var(--pool); } .bond .b { background: var(--brick); } .bond .r { background: var(--volt); }
header { background: var(--surface-inverse); color: var(--ink-inverse); }
header .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.wrap { max-width: 720px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.name { font: 800 24px/1 "Bricolage Grotesque", system-ui, sans-serif; color: inherit; text-decoration: none; letter-spacing: -0.01em; }
nav { display: flex; gap: 20px; font-weight: 600; font-size: 15px; }
nav a { color: inherit; text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
nav a[aria-current="page"] { border-bottom-color: var(--volt); }
main { padding-top: 40px; padding-bottom: 64px; }
h1 { font: 700 clamp(32px, 7vw, 48px)/1.05 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: -0.02em; margin: 0 0 12px; }
h2 { font: 700 24px/1.2 "Bricolage Grotesque", system-ui, sans-serif; margin: 40px 0 8px; }
h3 { font: 600 18px/1.3 "Instrument Sans", system-ui, sans-serif; margin: 24px 0 4px; }
p, li { max-width: 64ch; }
a { color: var(--pool-ink); text-underline-offset: 3px; }
.eyebrow { font: 600 13px/1 "IBM Plex Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin: 0 0 12px; }
.data { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.lede { font-size: 19px; color: var(--ink-muted); margin: 0 0 8px; }
.placeholder {
  border: 2px dashed var(--line-strong); border-radius: 8px; padding: 16px; margin: 24px 0;
  background: var(--surface-sunken); color: var(--ink-muted); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 14px;
}
footer { border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 14px; }
footer .wrap { padding-top: 20px; padding-bottom: 32px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: inherit; }