/* Field Manual theme */
:root {
  --canvas: #0D1713;
  --paper: #E9DFC6;
  --paperTop: #F2E8D5;
  --paperBottom: #E9DFC6;
  --ink: #1B201B;
  --inkSecondary: #6B7E7A;
  --brass: #C1A36A;
  --hairlineDark: rgba(0,0,0,0.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--canvas); color: var(--ink); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.site-header { display: flex; align-items: center; gap: 16px; padding: 20px 16px; border-bottom: 1px solid var(--hairlineDark); }
.logo { width: 64px; height: 64px; background: var(--paperTop); border-radius: 12px; padding: 8px; }
.titles h1 { margin: 0; color: var(--paper); font-weight: 800; }
.subtitle { margin: 4px 0 0; color: var(--inkSecondary); }

.nav { display: flex; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--hairlineDark); }
.nav a { color: var(--paper); text-decoration: none; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--hairlineDark); background: linear-gradient(180deg, var(--paperTop), var(--paperBottom)); color: var(--ink); font-weight: 600; }
.nav a.active { outline: 2px solid var(--brass); }

.content { padding: 16px; display: grid; gap: 16px; max-width: 880px; margin: 0 auto; }
.card { background: linear-gradient(180deg, var(--paperTop), var(--paperBottom)); border: 1px solid var(--hairlineDark); border-radius: 16px; padding: 16px; }
.card h2 { margin-top: 0; font-weight: 800; }
.card p { color: var(--inkSecondary); }

.footer { padding: 16px; border-top: 1px solid var(--hairlineDark); text-align: center; color: var(--inkSecondary); }