/* ========== FEATURE: Design Tokens / CSS Variables ========== */
/* Description: Core color palette, typography, spacing, shadow and radius tokens used across every page */
:root {
  --white: #FFFFFF;
  --accent: #D9C7B8;          /* Beige — primary brand accent */
  --charcoal: #111111;        /* Near-black — text on light bg */
  --bg: #FFFFFF;              /* White — main page background */
  --bg-alt: #EDE3DA;          /* Light beige — alternate section background */
  --nav-bg: rgba(255,255,255,.97); /* Semi-transparent nav on scroll */
  --heading: 'Playfair Display', serif;
  --body: 'Montserrat', sans-serif;
  --r: 12px;                  /* Default border-radius */
  --shadow: 0 4px 24px rgba(0,0,0,.06);
}

/* ========== FEATURE: CSS Reset ========== */
/* Description: Normalizes box model, margins, padding, and base element behaviour */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--body);
  color: #111111;
  background: var(--bg);
  overflow-x: hidden;
  touch-action: pan-y;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
a:not(.btn):hover, a:not(.btn):focus { color: inherit !important; text-decoration: none !important; }
.mob-menu a.btn { color: #FFFFFF !important; }



/* ========== FEATURE: Layout Utilities ========== */
/* Description: Shared section padding, alternate background sections, and centered container */
.section { padding: 96px 0; }
.section-alt { background: var(--bg-alt); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ========== FEATURE: Scroll Reveal Animations ========== */
/* Description: Elements start hidden and translate in from left, right, or below when scrolled into view */
.reveal { opacity: 0; transition: opacity .7s ease-out, transform .7s ease-out; }
.reveal-left  { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px);  }
.reveal-up    { transform: translateY(40px);  }
.reveal.visible { opacity: 1; transform: translate(0); }

/* Staggered reveal delays */
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }

/* ========== FEATURE: Animated Gold Decorative Line ========== */
/* Description: Thin rose-gold horizontal rule that animates its width to 60px when scrolled into view */
.gold-line   { height: 3px; background: var(--accent); border-radius: 2px; width: 0; transition: width 1s ease-out; }
.gold-line-c { margin-left: auto; margin-right: auto; }
.gold-line.visible { width: 60px; }

/* ========== FEATURE: Glassmorphism Card Utilities ========== */
/* Description: Two reusable glass-effect card base styles used across inner pages */
.glass {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
}
.glass-dark {
  background: #EDE3DA;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(217,199,184,.4);
  border-radius: 16px;
}

/* ========== FEATURE: Responsive Base Breakpoints ========== */
/* Description: Reduces section padding on smaller screens */
@media (max-width: 768px) {
  .section { padding: 64px 0; }
}

/* ========== FEATURE: Reduced Motion Accessibility ========== */
/* Description: Disables all animations and transitions for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .gold-line { width: 60px !important; }
  body { animation: none !important; }
  body.page-leaving { animation: none !important; }
  /* Skip loading curtain entirely for reduced-motion users (matches original source) */
  .v4-loading { display: none !important; }
}