:root {
  color-scheme: dark;
  --color-bg: #100f0d;
  --color-panel: #191712;
  --color-text: #e8dfcf;
  --color-muted: #b6ab99;
  --color-gold: #c9bca4;
  --color-border: #b8a27f36;
  --font-body: "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-display: Bahnschrift, "Segoe UI", sans-serif;
  --font-editorial: Constantia, Georgia, serif;
  background: var(--color-bg);
  color: var(--color-text);
  font: 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; }
body { min-height: 100svh; }
a { color: var(--color-gold); text-underline-offset: 4px; }
a:hover { color: #f3eadb; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid #e8d4a7;
  outline-offset: 5px;
}
.page-shell { max-width: 1320px; margin: auto; padding: 40px clamp(24px, 6vw, 80px) 28px; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--color-text); font: 600 24px/1.2 var(--font-display); letter-spacing: -.025em; text-decoration: none; border-radius: 4px; }
.brand img { display: block; width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px; }
.site-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.site-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 8px 0; color: var(--color-muted); font-size: 14px; font-weight: 500; text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.site-nav img { display: block; width: 24px; height: 24px; object-fit: contain; flex: 0 0 24px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-text); border-color: var(--color-gold); }
.hero-title { margin: 0 0 24px; font: 600 clamp(60px, 7.5vw, 108px)/1.03 var(--font-display); letter-spacing: -.04em; }
.tagline { margin: 0; color: var(--color-muted); font: clamp(24px, 2.4vw, 34px)/1.35 var(--font-editorial); letter-spacing: -.015em; }
.button, button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 14px 22px; border: 1px solid #f6edd74f; border-radius: 4px; background: #e6dcc8; color: #201c17; font: 600 15px/1.5 var(--font-body); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.button:hover, button:hover { background: #f8efdc; color: #201c17; }
.button:active, button:active { background: #cbbda4; }
.button img { width: 24px; height: 24px; object-fit: contain; filter: brightness(0); }
button.secondary, .button.secondary { background: transparent; color: var(--color-text); border-color: var(--color-border); }
button.secondary:hover, .button.secondary:hover { background: #242018; border-color: var(--color-gold); }
.muted, small { color: var(--color-muted); }
@media (max-width: 760px) {
  .page-shell { padding: 24px; }
  .masthead { gap: 12px; }
  .brand { font-size: 22px; }
  .brand img { width: 40px; height: 40px; flex-basis: 40px; }
  .site-nav { gap: 18px; }
  .hero-title { font-size: clamp(48px, 11.5vw, 76px); margin-bottom: 16px; }
  .tagline { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .site-nav a, .button, button { transition: none; } }