Fix CSS cascade layer issue preventing Tailwind utilities from working

Wrap custom styles in @layer base and @layer components so Tailwind
utility classes (mx-auto, text-center, mb-6, etc.) can properly
override them per the CSS Cascade Layers spec.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/globals.css

@@ -33,7 +33,9 @@
   font-display: swap;
 }
 
-:root {
+/* Base reset & defaults — in @layer base so Tailwind utilities can override */
+@layer base {
+  :root {
     --bg-cream: #faf8f5;
     --bg-dark: #1a1a1a;
     --bg-darker: #0f0f0f;
@@ -45,38 +47,40 @@
     --accent-pink: #e8c4d4;
     --accent-mint: #c4e8d4;
     --accent-rose: #e8d4c4;
-}
+  }
 
-* {
+  * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-}
+  }
 
-html {
+  html {
     scroll-behavior: smooth;
-}
+  }
 
-body {
+  body {
     background: var(--bg-cream);
     color: var(--text-dark);
     font-family: var(--font-cormorant), 'Cormorant Garamond', Georgia, serif;
     line-height: 1.8;
-}
+  }
 
-/* Typography */
+  h1, h2, h3, h4 {
-h1, h2, h3, h4 {
     font-family: var(--font-cormorant), 'Cormorant Garamond', Georgia, serif;
     font-weight: 300;
     letter-spacing: 0.05em;
+  }
 }
 
-.font-sans-alt {
+/* Component styles — in @layer components so Tailwind utilities can override */
+@layer components {
+  .font-sans-alt {
     font-family: var(--font-montserrat), 'Montserrat', sans-serif;
-}
+  }
 
-/* Navigation */
+  /* Navigation */
-.nav-link {
+  .nav-link {
     font-family: var(--font-montserrat), 'Montserrat', sans-serif;
     font-size: 0.75rem;
     letter-spacing: 0.15em;
@@ -85,14 +89,14 @@ h1, h2, h3, h4 {
     color: var(--text-dark);
     transition: color 0.3s ease;
     padding: 0.5rem 1rem;
-}
+  }
 
-.nav-link:hover {
+  .nav-link:hover {
     color: var(--accent-gold);
-}
+  }
 
-/* Elegant button styles */
+  /* Elegant button styles */
-.btn-outline {
+  .btn-outline {
     display: inline-block;
     padding: 0.875rem 2rem;
     border: 1px solid var(--text-dark);
@@ -106,24 +110,24 @@ h1, h2, h3, h4 {
     transition: all 0.3s ease;
     background: transparent;
     cursor: pointer;
-}
+  }
 
-.btn-outline:hover {
+  .btn-outline:hover {
     background: var(--text-dark);
     color: var(--bg-cream);
-}
+  }
 
-.btn-outline-light {
+  .btn-outline-light {
     border-color: var(--text-light);
     color: var(--text-light);
-}
+  }
 
-.btn-outline-light:hover {
+  .btn-outline-light:hover {
     background: var(--text-light);
     color: var(--bg-dark);
-}
+  }
 
-.btn-filled {
+  .btn-filled {
     display: inline-block;
     padding: 0.875rem 2rem;
     background: var(--text-dark);
@@ -137,57 +141,57 @@ h1, h2, h3, h4 {
     color: var(--bg-cream);
     transition: all 0.3s ease;
     cursor: pointer;
-}
+  }
 
-.btn-filled:hover {
+  .btn-filled:hover {
     background: transparent;
     color: var(--text-dark);
-}
+  }
 
-/* Service cards */
+  /* Service cards */
-.service-card {
+  .service-card {
     padding: 3rem 2rem;
     border-radius: 1rem;
     text-align: center;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     background: white;
-}
+  }
 
-.service-card:hover {
+  .service-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
-}
+  }
 
-.service-card.lavender { background: var(--accent-lavender); }
+  .service-card.lavender { background: var(--accent-lavender); }
-.service-card.pink { background: var(--accent-pink); }
+  .service-card.pink { background: var(--accent-pink); }
-.service-card.mint { background: var(--accent-mint); }
+  .service-card.mint { background: var(--accent-mint); }
-.service-card.rose { background: var(--accent-rose); }
+  .service-card.rose { background: var(--accent-rose); }
 
-/* Section spacing */
+  /* Section spacing */
-.section {
+  .section {
     padding: 6rem 2rem;
-}
+  }
 
-@media (min-width: 768px) {
+  @media (min-width: 768px) {
     .section {
       padding: 8rem 4rem;
     }
-}
+  }
 
-/* Decorative elements */
+  /* Decorative elements */
-.divider {
+  .divider {
     width: 60px;
     height: 1px;
     background: var(--accent-gold);
     margin: 2rem auto;
-}
+  }
 
-.divider-wide {
+  .divider-wide {
     width: 120px;
-}
+  }
 
-/* Image placeholder */
+  /* Image placeholder */
-.img-placeholder {
+  .img-placeholder {
     background: linear-gradient(135deg, var(--accent-lavender) 0%, var(--accent-pink) 100%);
     display: flex;
     align-items: center;
@@ -196,27 +200,27 @@ h1, h2, h3, h4 {
     font-size: 0.75rem;
     letter-spacing: 0.1em;
     text-transform: uppercase;
-}
+  }
 
-/* Testimonial */
+  /* Testimonial */
-.testimonial {
+  .testimonial {
     font-style: italic;
     font-size: 1.125rem;
     max-width: 600px;
     margin: 0 auto;
     text-align: center;
-}
+  }
 
-.testimonial-card {
+  .testimonial-card {
     background: white;
     padding: 2.5rem;
     border-radius: 1rem;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
     text-align: center;
-}
+  }
 
-/* Footer */
+  /* Footer */
-.footer-link {
+  .footer-link {
     font-family: var(--font-montserrat), 'Montserrat', sans-serif;
     font-size: 0.75rem;
     letter-spacing: 0.1em;
@@ -224,34 +228,80 @@ h1, h2, h3, h4 {
     text-decoration: none;
     opacity: 0.7;
     transition: opacity 0.3s;
-}
+  }
 
-.footer-link:hover {
+  .footer-link:hover {
     opacity: 1;
-}
+  }
 
-/* Hero section */
+  /* Hero section */
-.hero-gradient {
+  .hero-gradient {
     background: linear-gradient(
       180deg,
       var(--bg-cream) 0%,
       rgba(212, 196, 232, 0.2) 50%,
       var(--bg-cream) 100%
     );
-}
+  }
 
-/* Dark sections */
+  /* Dark sections */
-.dark-section {
+  .dark-section {
     background: var(--bg-dark);
     color: var(--text-light);
-}
+  }
 
-.darker-section {
+  .darker-section {
     background: var(--bg-darker);
     color: var(--text-light);
+  }
+
+  /* Quote styling */
+  .quote-mark {
+    font-size: 4rem;
+    line-height: 1;
+    color: var(--accent-gold);
+    opacity: 0.5;
+  }
+
+  /* Glassmorphism effect */
+  .glass {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+  }
+
+  /* Mobile menu */
+  .mobile-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--bg-cream);
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+  }
+
+  /* Event cards */
+  .event-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 1rem;
+    padding: 2rem;
+    transition: all 0.3s ease;
+  }
+
+  .event-card:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: var(--accent-gold);
+  }
 }
 
-/* Animations */
+/* Animations — keep unlayered so they always apply */
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(20px); }
   to { opacity: 1; transform: translateY(0); }
@@ -275,48 +325,3 @@ h1, h2, h3, h4 {
 .stagger-2 { animation-delay: 0.2s; }
 .stagger-3 { animation-delay: 0.3s; }
 .stagger-4 { animation-delay: 0.4s; }
-
-/* Quote styling */
-.quote-mark {
-  font-size: 4rem;
-  line-height: 1;
-  color: var(--accent-gold);
-  opacity: 0.5;
-}
-
-/* Glassmorphism effect */
-.glass {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-/* Mobile menu */
-.mobile-menu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--bg-cream);
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 2rem;
-}
-
-/* Event cards */
-.event-card {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 1rem;
-  padding: 2rem;
-  transition: all 0.3s ease;
-}
-
-.event-card:hover {
-  background: rgba(255, 255, 255, 0.08);
-  border-color: var(--accent-gold);
-}