:root {
  --paper: #f4efe6;
  --ink: #1e1914;
  --muted: #6a6157;
  --rule: rgba(30, 25, 20, 0.14);
  --accent: #5a3c2e;
  --flag: #7a3030;
  --serif: "Iowan Old Style", Palatino, Georgia, serif;
  --ui: "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
}
a { color: var(--accent); }
.wrap, .narrow { width: min(100% - 2rem, 68rem); margin: 2rem auto 4rem; }
.narrow { width: min(100% - 2rem, 36rem); }
.kicker {
  font-family: var(--ui);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.canon-nav { display: flex; gap: 1rem; font-family: var(--ui); font-size: 0.9rem; }
h1 { font-weight: 600; line-height: 1.2; margin: 0.3rem 0 0.8rem; }
.lede { color: var(--muted); }
label { display: block; margin: 1rem 0; font-family: var(--ui); font-size: 0.85rem; }
input[type=text], input[type=password], textarea {
  display: block; width: 100%; margin-top: 0.3rem;
  padding: 0.5rem 0.6rem; border: 1px solid var(--rule);
  background: #fffdf8; color: var(--ink); font: inherit;
}
textarea { min-height: 8rem; }
button, .btn {
  font-family: var(--ui); font-size: 0.9rem; font-weight: 600;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 0.4rem 0.9rem; border-radius: 999px; cursor: pointer;
  text-decoration: none; display: inline-block;
}
button[type=button], a.btn { background: transparent; color: var(--ink); }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.drafts { list-style: none; padding: 0; }
.drafts li { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); }
.meta, .muted { font-family: var(--ui); font-size: 0.85rem; color: var(--muted); }
.editor { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: 2rem; }
.aids { font-size: 0.98rem; border-left: 1px solid var(--rule); padding-left: 1.2rem; }
.section-block { border-top: 1px solid var(--rule); margin-top: 1.5rem; padding-top: 1rem; }
.flag, .flags li { color: var(--flag); }
.flags, .tactics { padding-left: 1.1rem; }
.check { display: flex; gap: 0.5rem; align-items: center; }
select {
  display: block; width: 100%; margin-top: 0.3rem;
  padding: 0.5rem 0.6rem; border: 1px solid var(--rule);
  background: #fffdf8; color: var(--ink); font: inherit;
}
.cmd { white-space: pre-wrap; font-size: 0.85rem; background: #fffdf8; padding: 0.6rem; border: 1px solid var(--rule); }
.quiet {
  width: min(100% - 2rem, 42rem); margin: 0 auto 2rem;
  font-family: var(--ui); font-size: 0.8rem; color: var(--muted);
}
.prose .md { max-width: 42rem; }
.hooks { margin-top: 2.5rem; }
@media (max-width: 900px) { .editor { grid-template-columns: 1fr; } .aids { border: 0; padding: 0; } }