:root {
  --bg: #0c1014;
  --bg2: #151b21;
  --ink: #f3eee4;
  --muted: #b4aea3;
  --line: #2c343c;
  --accent: #e6c15f;
  --ok: #c5ddc0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  background: radial-gradient(1100px 480px at 8% -12%, #24303a 0%, var(--bg) 48%);
  color: var(--ink);
  line-height: 1.55;
}
.wrap { max-width: 44rem; margin: 0 auto; padding: 1.4rem 1.15rem 4.2rem; }
header.top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: .75rem; margin-bottom: 1.8rem;
}
.brand { letter-spacing: .14em; text-transform: uppercase; font-size: .76rem; color: var(--accent); text-decoration: none; }
nav a { color: var(--muted); text-decoration: none; margin-left: .85rem; font-size: .92rem; }
nav a:hover { color: var(--ink); }
h1 { font-weight: 400; font-size: clamp(1.55rem, 4vw, 2.15rem); line-height: 1.22; margin: 0 0 1rem; }
h2 { font-weight: 400; font-size: 1.15rem; margin: 1.8rem 0 .6rem; }
p, li { color: var(--ink); }
.muted, .sub { color: var(--muted); }
a { color: var(--accent); }
.card {
  background: var(--bg2);
  border: 1px solid var(--line);
  padding: 1.05rem 1.15rem;
  margin: 1.15rem 0;
}
label { display: block; margin-top: 1rem; font-size: .95rem; }
input, textarea {
  width: 100%; margin-top: .35rem; padding: .65rem .7rem;
  background: #0b0e11; color: var(--ink);
  border: 1px solid var(--line); font: inherit;
}
button, .btn {
  display: inline-block; margin-top: 1.15rem; padding: .7rem 1.1rem;
  background: var(--accent); color: #1a1408; border: 0; font: inherit;
  cursor: pointer; text-decoration: none;
}
footer { margin-top: 2.6rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.ok { color: var(--ok); }
code { font-family: ui-monospace, Consolas, monospace; font-size: .86em; color: var(--ok); }
ul.hooks { columns: 1; padding-left: 1.15rem; }
@media (min-width: 640px) { ul.hooks { columns: 2; } }