:root {
  color-scheme: dark;
  --oxblood: #4a0c13;
  --leather: #7a2d25;
  --cream: #fff2dc;
  --muted: #d7bda4;
  --line: rgba(255, 226, 194, 0.28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(circle at 20% 0%, #9a4138 0, var(--oxblood) 48%, #25050a 100%);
  color: var(--cream);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

main {
  width: min(760px, calc(100% - 32px));
  margin: 32px auto;
  padding: clamp(24px, 6vw, 56px);
  border: 1px solid var(--line);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(122, 45, 37, 0.88), rgba(55, 9, 15, 0.94));
  box-shadow: 0 28px 70px rgba(10, 0, 2, 0.45), inset 0 1px 0 rgba(255, 240, 220, 0.28);
}

nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 42px; }
a { color: var(--cream); text-underline-offset: 4px; }
h1 { font-size: clamp(2.4rem, 8vw, 4.8rem); line-height: 0.95; letter-spacing: -0.04em; margin: 0 0 24px; }
h2 { margin-top: 40px; line-height: 1.2; }
p, li { color: var(--muted); }
strong { color: var(--cream); }
.eyebrow { color: var(--cream); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.contact { margin: 32px 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 20px; background: rgba(39, 4, 9, 0.45); }
.meta { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.9rem; }

@media (max-width: 520px) {
  main { margin: 16px auto; border-radius: 24px; }
}