:root {
  --ink: #1F2A44;
  --ink-soft: #4E5873;
  --gold: #A87A22;
  --gold-soft: #E9DCC0;
  --paper: #FBFAF7;
  --panel: #F1EEE6;
  --band: #1F2A44;
  --band-fg: #F3F0E8;
  --band-gold: #D8B062;
  --rule: #DAD5C8;
  --f-display: "IM Fell DW Pica", "Iowan Old Style", Georgia, serif;
  --f-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-scripture: "Lora", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ECE8DE; --ink-soft: #B3B8C6; --gold: #D8B062; --gold-soft: #3A3423;
    --paper: #151B2B; --panel: #1E2538; --band: #0E1320; --band-fg: #ECE8DE; --band-gold: #D8B062;
    --rule: #2E3650; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #ECE8DE; --ink-soft: #B3B8C6; --gold: #D8B062; --gold-soft: #3A3423;
  --paper: #151B2B; --panel: #1E2538; --band: #0E1320; --band-fg: #ECE8DE; --band-gold: #D8B062;
  --rule: #2E3650; color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.7; }
.wrap { max-width: 720px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
header .wrap, footer .wrap { max-width: 1040px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-block: 22px; }
.mark { font-family: var(--f-display); font-size: 1.35rem; text-decoration: none; color: var(--ink); display: flex; align-items: baseline; gap: 10px; }
.mark small { font-family: var(--f-body); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
main { padding-block: 40px 72px; }
h1, h2 { font-family: var(--f-display); font-weight: 400; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); margin: 0 0 8px; }
h2 { font-size: 1.6rem; margin: 36px 0 8px; }
p, li { color: var(--ink-soft); }
.meta { font-size: .85rem; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; }
.btn { display: inline-flex; padding: 13px 22px; border-radius: 4px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 600; }
blockquote { margin: 28px 0; font-family: var(--f-display); font-style: italic; font-size: 1.4rem; color: var(--ink); }
blockquote span { display: block; font-family: var(--f-body); font-style: normal; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-top: 6px; }
footer { border-top: 1px solid var(--rule); font-size: .85rem; color: var(--ink-soft); }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }