:root {
  --anthracite: #1a1918;
  --anthracite-mid: #252320;
  --cream: #f2ebe0;
  --cream-deep: #e8ddd0;
  --gold: #c9a84c;
  --gold-light: #e8d5a3;
  --gold-dark: #8c6f2a;
  --navy: #12151e;
  --text-light: #f2ebe0;
  --text-muted: rgba(242,235,224,0.55);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Montserrat', sans-serif;
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
  :root { font-size: 15px; }
}
@media (max-width: 768px) {
  :root { font-size: 14px; }
}
@media (max-width: 480px) {
  :root { font-size: 13px; }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { 
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}
body {
  background: var(--anthracite);
  color: var(--text-light);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}
::selection { background: var(--gold); color: var(--anthracite); }

/* Gold ornament line */
.gold-rule {
  display: flex; align-items: center; gap: 16px;
  margin: 0 auto;
}
.gold-rule::before, .gold-rule::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.gold-rule span {
  color: var(--gold); font-size: 18px; line-height: 1;
}

/* Section label */
.section-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--anthracite); }
::-webkit-scrollbar-thumb { background: var(--gold-dark); }

/* Keyframes */
@keyframes scrollPulse { 0%,100%{opacity:0.4;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(0.7)} }
@keyframes fadeInDetail { from {opacity:0} to {opacity:1} }
@keyframes slideUpDetail { from {opacity:0; transform:translateY(24px)} to {opacity:1; transform:translateY(0)} }

/* Mobile utility classes */
.mobile-hide { display: block; }
.mobile-show { display: none !important; }
@media (max-width: 768px) {
  .mobile-hide { display: none !important; }
  .mobile-show { display: flex !important; }
  
  /* Prevent horizontal scroll on mobile */
  body, html {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  section {
    overflow-x: hidden;
    max-width: 100vw;
  }
}