/* css/global.css */
:root {
  --crimson:    #91001c;
  --crimson-dk: #6e0015;
  --gold:       #eabd54;
  --gold-dk:    #895500;
  --gold-pale:  #fff8e6;
  --near-black: #232323;
  --off-white:  #faf8f4;
  --white:      #ffffff;
  --green-wa:   #25D366;

  --font-heading: 'Playfair Display', serif;
  --font-body:    'Inter', sans-serif;

  --max-w: 1200px;
  --section-py: 5rem;
  --radius: 8px;
  --transition: 0.3s ease;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--near-black);
  background: var(--white);
}

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

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

ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

/* Skip to content */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--crimson);
  color: var(--white);
  padding: 0.5rem 1rem;
  z-index: 9999;
  font-weight: 600;
}
.skip-link:focus { top: 0; }

/* Container */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Section heading */
.section-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.75rem;
}
.section-subheading {
  text-align: center;
  color: rgba(35,35,35,0.65);
  max-width: 560px;
  margin: 0 auto 3rem;
}

/* Scroll fade-in (JS adds .visible) */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* Utility */
.text-crimson { color: var(--crimson); }
.text-gold    { color: var(--gold); }
.text-white   { color: var(--white); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* Responsive breakpoints used site-wide */
/* Mobile-first — breakpoints: 640px (sm), 768px (md), 1024px (lg) */