/* Rooks typography: the same self-hosted Geist / Bricolage / Geist Mono
   families used by rooks.ai. The remaining subset files travel with the
   bundle so the page can be expanded without introducing a network font. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/geist-700-5.7d2f9c.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("fonts/geist-700-5.7d2f9c.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-700-3.7d2f9c.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/geist-mono-600-6.7d2f9c.woff2") format("woff2");
}

/* Palette and chrome follow rooks.ai; the page body follows the rooks.ai
   legal-page treatment — brand furniture around plain running text. */
:root {
  color-scheme: light;

  --red-500: #ff544e;
  --red-600: #e84c47;
  --red-700: #b53c37;

  --grey-400: #717070;
  --grey-500: #4d4c4c;
  --grey-700: #373636;
  --grey-900: #202020;

  --white-50:  #fffdfc;
  --white-400: #fff1ea;
  --white-600: #e8d8d0;
  --white-900: #6b6460;

  --blue-600: #0072dc;

  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bricolage Grotesque", "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius-xs: 3px;
  --radius-sm: 8px;

  --maxw: 1180px;
  --docw: 760px;
  --pad: clamp(20px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
html { background: var(--white-50); }

body {
  color: var(--grey-900);
  background: var(--white-50);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { color: var(--grey-900); background: #ffb0ae; }
:focus-visible { outline: 2px solid var(--red-500); outline-offset: 2px; border-radius: 4px; }

p, li { text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

.skip-link {
  position: absolute; top: 0; left: -9999px; z-index: 900;
  padding: 10px 16px; color: #ffede5; background: var(--grey-900);
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 12px; left: 12px; text-decoration: none; }

/* ── Brand chrome ── */
.nav { border-bottom: 1px solid color-mix(in srgb, var(--grey-900) 10%, transparent); }
.nav-inner { display: flex; height: 72px; align-items: center; justify-content: space-between; gap: 24px; }
.nav-right { color: var(--grey-900); font-size: 15px; font-weight: 500; }
.nav-right:hover { color: var(--red-600); text-decoration: none; }
.brand-lock { display: inline-flex; align-items: center; color: var(--grey-900); text-decoration: none; }
.brand-lock:hover { text-decoration: none; }
.brand-logo { width: 124px; height: auto; }
.footer .brand-logo { width: 116px; }

/* ── Document ── */
.doc { padding: clamp(40px, 6vw, 64px) 0 clamp(64px, 9vw, 96px); }
.doc .wrap { max-width: var(--docw); }
.doc-head { margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--white-600); }
.doc-kicker {
  margin-bottom: 14px; color: var(--red-600); font-family: var(--font-mono);
  font-size: 13px; font-weight: 500; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase;
}
.doc-head h1 {
  color: var(--grey-900); font-family: var(--font-display); font-size: clamp(32px, 5vw, 46px);
  font-weight: 500; letter-spacing: -0.018em; line-height: 1.04;
}
.doc-head .lead { margin-top: 16px; color: var(--grey-500); font-size: 18px; line-height: 1.6; }

.doc-body h2 {
  margin: 38px 0 12px; color: var(--grey-900); font-family: var(--font-sans);
  font-size: 20px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3;
}
.doc-body p, .doc-body li { color: var(--grey-700); font-size: 16px; line-height: 1.7; }
.doc-body p { margin: 0 0 14px; }
.doc-body ul { margin: 0 0 18px; padding-left: 22px; }
.doc-body li { margin-bottom: 7px; }
.doc-body strong { color: var(--grey-900); font-weight: 600; }
.doc-body hr { height: 1px; margin: 34px 0; background: var(--white-600); border: 0; }
code {
  padding: 2px 5px; color: var(--grey-900); background: var(--white-400);
  border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 14px;
}

/* ── Footer ── */
.footer { border-top: 1px solid color-mix(in srgb, var(--grey-900) 14%, transparent); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 28px; padding-top: clamp(32px, 4vw, 48px); padding-bottom: clamp(32px, 4vw, 48px); }
.footer-copy { max-width: 42ch; margin-top: 14px; color: var(--grey-500); font-size: 13px; line-height: 1.55; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 24px; }
.footer-links a { color: var(--grey-700); font-size: 14px; }
.footer-links a:hover { color: var(--red-600); text-decoration: none; }

@media (max-width: 700px) {
  :root { --pad: 24px; }
  .nav-inner { height: 64px; gap: 14px; }
  .doc-head { margin-bottom: 32px; padding-bottom: 24px; }
  .doc-head .lead { font-size: 17px; }
  .doc-body h2 { margin-top: 32px; }
  .footer-inner { display: grid; grid-template-columns: 1fr; gap: 24px; padding-bottom: max(36px, env(safe-area-inset-bottom)); }
  .footer-links { justify-content: flex-start; }
}

@media (max-width: 430px) {
  :root { --pad: 22px; }
  .brand-logo, .footer .brand-logo { width: 108px; }
  .footer-copy { max-width: 30ch; }
}