:root {
  --bg: #faf6ee; --card: #ffffff; --ink: #2b2118; --muted: #7a6a58;
  --accent: #c47a12; --accent-ink: #ffffff; --line: #eadfcd; --row-hover: #f6efe2;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1a1511; --card: #241d17; --ink: #f1e8db; --muted: #b3a28c;
    --accent: #e3a03a; --accent-ink: #1a1511; --line: #3a3027; --row-hover: #2e261f; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 Inter, system-ui, sans-serif; }
h1, h2 { font-family: Fraunces, Georgia, serif; font-weight: 600; }

/* Photo header shared by every page; pages set --hero to their image. */
header.hero {
  min-height: 34vh; display: flex; flex-direction: column; padding: 16px;
  background: linear-gradient(to top, rgba(20,14,8,.78), rgba(20,14,8,.1) 60%), var(--hero) center/cover;
  color: #fff;
}
header.hero.tall { min-height: 52vh; }
header.hero .wrap { width: 100%; max-width: 720px; margin: auto auto 16px; }
header.hero h1 { font-size: clamp(2.4rem, 8vw, 4rem); line-height: 1; margin: 0 0 8px; }
header.hero p { margin: 0; opacity: .9; }

nav { width: 100%; max-width: 720px; margin: 0 auto; display: flex; gap: 6px; align-items: center; }
nav .home { color: #fff; text-decoration: none; font-family: Fraunces, Georgia, serif; font-weight: 600; margin-right: auto; }
nav a.tab { color: #fff; text-decoration: none; font-weight: 500; padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.28); }
nav a.tab[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }

main { max-width: 720px; margin: -28px auto 48px; padding: 0 16px; position: relative; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 0 16px 32px; }