/* ─── GLOBAL RESET & BASE ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

/* ─── NAV SCROLL SHADOW ───────────────────────────────────────── */
#nav.scrolled {
  box-shadow: 0 1px 20px rgba(106, 29, 56, 0.08);
}

/* ─── MOBILE MENU ─────────────────────────────────────────────── */
#mobileMenu {
  animation: slideDown 0.2s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── SCROLL REVEAL (progressive enhancement) ─────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── FOCUS STYLES ────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #d4405e;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── SELECTION ───────────────────────────────────────────────── */
::selection {
  background: #d4405e;
  color: #FDF8F5;
}

/* ─── SUBTLE SCROLLBAR ────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FDF8F5; }
::-webkit-scrollbar-thumb { background: #f9d0d9; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #e9708e; }