/* Design tokens carried over from the previous site: a near-black warm background, off-white
   text, a muted gold accent, Cormorant Garamond for headings and Source Sans for body copy. */
:root {
  --background: hsl(26 13% 10%);
  --foreground: hsl(0 0% 96%);
  --primary: hsl(41 26% 54%);
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  line-height: 1.5;
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; }
a { color: var(--primary); }

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 2rem;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url(/assets/hero-bg.jpg) center / cover no-repeat;
}
.hero-shade {
  position: absolute; inset: 0;
  background: hsl(26 13% 10% / 0.55);
}
.hero-text { position: relative; }
.hero h1 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 4.5rem);
  letter-spacing: 0.025em;
  animation: rise 1.2s ease-out both;
}
.tagline {
  margin: 2rem 0 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.125rem, 2.5vw, 1.25rem);
  color: var(--primary);
  animation: rise 1.2s ease-out 0.4s both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1, .tagline { animation: none; }
}

/* Content pages (support, privacy): a readable column on the same dark ground. */
.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}
.page header { margin-bottom: 2rem; }
.page header h1 { font-size: clamp(2.25rem, 6vw, 3rem); margin: 0 0 0.25rem; }
.page header .meta { color: var(--primary); font-family: var(--font-heading); font-style: italic; margin: 0; }
.page h2 { font-size: 1.75rem; margin: 2.25rem 0 0.5rem; }
.page h3 { font-size: 1.25rem; margin: 1.5rem 0 0.25rem; }
.page p, .page li { font-size: 1.0625rem; }
.page ul, .page ol { padding-left: 1.25rem; }
.page li { margin: 0.35rem 0; }
.page code { font-family: ui-monospace, Menlo, monospace; font-size: 0.95em; color: var(--primary); }
.page a { text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.page .aside { border-left: 2px solid var(--primary); padding: 0.25rem 0 0.25rem 1rem; color: hsl(0 0% 80%); }
.brand { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; color: var(--foreground); text-decoration: none; }
.topnav { display: flex; gap: 1.5rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 2.5rem; }
.topnav a { color: hsl(0 0% 80%); text-decoration: none; }
.topnav a:hover, .topnav a[aria-current] { color: var(--primary); }
.site-footer {
  position: relative;
  display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center;
  padding: 1.5rem;
  font-size: 0.9375rem;
  color: hsl(0 0% 70%);
  background: var(--background);
}
.site-footer a { color: hsl(0 0% 80%); text-decoration: none; }
.site-footer a:hover { color: var(--primary); }