/* hush — landing page
 *
 * Document, not deck. One narrow column, normal type sizes, no card chrome,
 * no all-caps kickers. The page reads like a small README rendered with care.
 */

:root {
  --bg:    #0a0a0a;
  --code:  #111111;
  --line:  #222222;
  --line-soft: #1a1a1a;
  --fg:    #e9e9e3;
  --fg-mid: #b9b9b3;
  --fg-mute: #8a8a86;
  --fg-soft: #5e5e5b;
  --fg-faint: #3a3a37;
  --add:    #88e69e;
  --rm:     #f1a3a3;
  --acc:    #e9d28b;

  --col: 660px;

  --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --f-serif: 'Instrument Serif', 'Times New Roman', serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-feature-settings: "ss01", "cv11";
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--fg-faint);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 120ms ease;
}
a:hover { text-decoration-color: var(--fg); }

::selection { background: rgba(233, 210, 139, 0.25); }

/* ─── document container ─────────────────────────────────────── */

.doc {
  max-width: var(--col);
  margin: 0 auto;
  padding: 96px 28px 96px;
}

/* ─── masthead ───────────────────────────────────────────────── */

.doc-head { margin-bottom: 56px; }

.masthead {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 28px;
  font-size: 14px;
  color: var(--fg-mute);
}
.wordmark {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.04em;
  color: var(--fg);
  text-decoration: none;
}
.wordmark .dot { color: var(--fg-soft); }
.masthead-meta {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--fg-soft);
  letter-spacing: 0;
}

.doc-head h1 {
  margin: 0 0 16px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: -0.024em;
  color: var(--fg);
}
.doc-head h1 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05em;
  letter-spacing: -0.005em;
  color: var(--fg);
}

.dek {
  margin: 0 0 24px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--fg-mid);
}

.links {
  margin: 0;
  font-size: 14px;
  color: var(--fg-mute);
}
.links a { color: var(--fg-mid); text-decoration-color: var(--fg-faint); }
.links a:hover { color: var(--fg); }
.links .sep,
.doc-foot .sep { color: var(--fg-faint); margin: 0 6px; }

/* ─── body sections ──────────────────────────────────────────── */

section { margin-top: 48px; }
section + section { border-top: 1px solid var(--line-soft); padding-top: 48px; }

h2 {
  margin: 0 0 18px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.012em;
  color: var(--fg);
}
h3 {
  margin: 24px 0 8px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--fg);
}

p {
  margin: 0 0 18px;
  color: var(--fg-mid);
  font-size: 16px;
}
p strong { color: var(--fg); font-weight: 600; }
p em { font-style: italic; color: var(--fg); }

p code,
li code {
  font-family: var(--f-mono);
  font-size: 13.5px;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-soft);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0;
  white-space: nowrap;
}

p.muted {
  font-size: 14px;
  color: var(--fg-soft);
}

ul, ol {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--fg-mid);
}
li { margin-bottom: 6px; }

/* ─── code blocks ────────────────────────────────────────────── */

pre {
  margin: 0 0 24px;
  padding: 18px 22px;
  background: var(--code);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg);
  overflow-x: auto;
  white-space: pre;
  font-feature-settings: "calt" 0;
}
pre code { white-space: pre; }
pre .kw  { color: #d8d8d2; font-weight: 500; }
pre .s   { color: var(--acc); }
pre .cmt { color: var(--fg-soft); font-style: italic; }
pre .rm  { background: rgba(241, 163, 163, 0.10); color: var(--fg); display: inline-block; }
pre .add { background: rgba(136, 230, 158, 0.10); color: var(--fg); display: inline-block; }

/* ─── figure ─────────────────────────────────────────────────── */

figure {
  margin: 8px 0 24px;
  padding: 0;
  text-align: center;
}
figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ─── footer ─────────────────────────────────────────────────── */

.doc-foot {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid var(--line-soft);
}
.doc-foot p {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--fg-mute);
}
.doc-foot p.fine {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--fg-faint);
  margin-top: 16px;
  letter-spacing: 0;
}
.doc-foot a { color: var(--fg-mid); }
.doc-foot a:hover { color: var(--fg); }

/* ─── small screens ──────────────────────────────────────────── */

@media (max-width: 540px) {
  .doc { padding: 64px 22px 80px; }
  .doc-head h1 { font-size: 32px; }
  pre { padding: 14px 16px; font-size: 12.5px; }
  .masthead { flex-wrap: wrap; gap: 6px 14px; }
}