/* =============================================
   SHE BY SHERLEY — Main Styles
   ============================================= */

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

:root {
  --rose: #EAD6DC;
  --brown: #4A2E2B;
  --ivory: #F8F6F4;
  --sage: #A3B18A;
  --brown-light: #7a4e4a;
  --rose-deep: #d4b8c0;
  --text-muted: #8a6e6b;
}

html { scroll-behavior: smooth; }
body { font-family: 'Montserrat', sans-serif; background: var(--ivory); color: var(--brown); overflow-x: hidden; }

/* When quiz overlay is open, lock scroll */
body.quiz-open { overflow: hidden; }

/* ── SHARED COMPONENTS ── */
.section-tag { font-size: 0.62rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--sage); margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.section-tag::before { content: ''; width: 24px; height: 1px; background: var(--sage); display: block; }
.section-title { font-family: 'Playfair Display', serif; font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 500; line-height: 1.15; color: var(--brown); letter-spacing: -0.5px; }

.btn-primary { background: var(--brown); color: var(--ivory); padding: 15px 34px; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: all 0.25s; border-radius: 2px; display: inline-block; }
.btn-primary:hover { background: var(--brown-light); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(74,46,43,0.2); }

.btn-light { background: var(--rose); color: var(--brown); padding: 15px 38px; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: all 0.25s; border-radius: 2px; display: inline-block; }
.btn-light:hover { background: var(--ivory); transform: translateY(-1px); }

.btn-ghost { font-size: 0.75rem; font-weight: 500; color: var(--brown); text-decoration: none; opacity: 0.7; display: flex; align-items: center; gap: 8px; transition: opacity 0.2s; }
.btn-ghost:hover { opacity: 1; }

/* fade-up: start hidden, JS adds .animate-ready to body to enable the animation */
.fade-up { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s ease; }
.animations-ready .fade-up { opacity: 0; transform: translateY(24px); }
.animations-ready .fade-up.visible { opacity: 1; transform: translateY(0); }