:root {
  color-scheme: dark;
  --bg: #060606;
  --panel: #0f0d0b;
  --panel-2: #17120f;
  --text: #f7efe9;
  --muted: #b8b0aa;
  --accent: #c9a961;
  --accent-rgb: 201, 169, 97;
  --border: rgba(255, 255, 255, 0.14);
  --shadow: 0 18px 55px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: linear-gradient(180deg, #080808 0%, #050505 100%);
  color: var(--text);
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main {
  overflow-x: hidden;
}

.panel-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.025) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.eyebrow {
  display: inline-block;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.42);
}

/* Brand accent. Reserved for the mark itself — never for prose. */
.accent {
  color: var(--accent);
}

/* The wordmark. Cormorant Garamond 400 / 0.16em is the logo's own spec, per
   the brief — this renders the mark in type rather than approximating it in
   Playfair, whose ampersand is a heavy calligraphic swash. */
.wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.16em;
}

/* Section labels: the accent's structural home. Muted so it whispers rather
   than shouts, and recurs down the page so it reads as a system. */
.label {
  color: rgba(var(--accent-rgb), 0.88);
  font-weight: 600;
}

/* Primary CTA. The accent as a functional fill — colour means "this is the
   action", not decoration. Near-black text holds 9.3:1 against the accent. */
.btn-accent {
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.btn-accent:hover {
  background: #d8bb78;
}

.info-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 0.45rem 0.8rem;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.04);
}

img,
svg,
video,
canvas,
iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

.hero-media {
  object-position: center 30%;
  transform: scale(1.03);
  filter: saturate(0.9) contrast(1.05);
}

a,
button,
input,
select,
textarea {
  max-width: 100%;
}

h1,
h2,
h3,
p,
li,
span,
a,
button {
  overflow-wrap: anywhere;
  word-break: break-word;
}

h1,
h2,
h3 {
  line-height: 1.1;
}

p,
.sans {
  line-height: 1.8;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -0.01em;
}

p,
.sans {
  font-family: 'Inter', system-ui, sans-serif;
}

input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

button {
  cursor: pointer;
}

.logo-adjust {
  filter: brightness(1.2) saturate(0) invert(1) hue-rotate(180deg);
  mix-blend-mode: lighten;
}

header .logo-adjust {
  filter: brightness(1.15) contrast(1.1) saturate(0.8);
}


@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  h1 {
    line-height: 1.02;
  }

  h2 {
    line-height: 1.15;
  }
}

::selection {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}