:root {
  --color-bg: #F2EDE8;
  --color-cream: #F7F4EF;
  --color-warm: #EAE3DB;
  --color-warm-deep: #DED5CB;
  --color-brown-dark: #7A6A62;
  --color-brown-mid: #A0928A;
  --color-sage: #AEB7A2;
  --color-border: rgba(186,172,160,0.4);
  --color-glass-bg: rgba(247,244,239,0.84);
  --color-glass-bg-strong: rgba(247,244,239,0.94);
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Montserrat', sans-serif;
  --radius-card: 4px;
  --nav-height: 88px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-brown-dark);
}

img { display: block; max-width: 100%; }

a { text-decoration: none; }

/* Shared patterns */
.eyebrow {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-sage);
  font-weight: 400;
}

.section-heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--color-brown-dark);
}

.section-heading--light {
  color: var(--color-brown-dark);
}

.frosted-card {
  background: var(--color-glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-card);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 2rem;
  border: 1.5px solid var(--color-brown-mid);
  border-radius: 2px;
  color: var(--color-brown-mid);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.btn:hover {
  background: var(--color-brown-mid);
  color: var(--color-cream);
}

.btn--light {
  border-color: var(--color-brown-mid);
  color: var(--color-brown-dark);
}

.btn--light:hover {
  background: var(--color-brown-mid);
  border-color: var(--color-brown-mid);
  color: var(--color-cream);
}

.btn--filled {
  background: var(--color-brown-mid);
  color: var(--color-cream);
  border-color: var(--color-brown-mid);
}

.btn--filled:hover {
  background: var(--color-brown-dark);
  border-color: var(--color-brown-dark);
}

/* Frame ornament pattern */
.ornament-frame {
  position: relative;
  width: 100%;
  padding: 18px;
}

.ornament-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(140,123,117,0.6);
  border-radius: var(--radius-card);
  pointer-events: none;
}

.frame-corner {
  position: absolute;
  width: 80px;
  height: 80px;
  z-index: 3;
}
.frame-corner.tl { top: -1px; left: -1px; }
.frame-corner.tr { top: -1px; right: -1px; }
.frame-corner.bl { bottom: -1px; left: -1px; }
.frame-corner.br { bottom: -1px; right: -1px; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 960px) {
  :root { --nav-height: auto; }
  .frame-corner { width: 60px; height: 60px; }
}

@media (max-width: 720px) {
  .frame-corner { width: 56px; height: 56px; }
}