/* ── Reset & Variables ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:      #FDF6EE;
  --blush:      #EDD5CC;
  --rose:       #C9847A;
  --deep-rose:  #A8635A;
  --brown:      #3D2B1F;
  --warm-brown: #6B4535;
  --gold:       #C49A6C;
  --sage:       #90A89A;
  --nav-h:      72px;
}

html, body {
  height: 100%;
  font-family: 'Jost', sans-serif;
  background: var(--cream);
  color: var(--brown);
  overflow-x: hidden;
}

/* ── Background ────────────────────────────────────────── */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 15% 5%,  rgba(229, 188, 180, 0.45) 0%, transparent 65%),
    radial-gradient(ellipse 55% 70% at 88% 92%, rgba(196, 154, 108, 0.25) 0%, transparent 65%),
    radial-gradient(ellipse 90% 90% at 50% 50%, var(--cream) 0%, #F3E4D4 100%);
}

.corner {
  position: absolute;
  opacity: 0.17;
}
.corner-tl { top: 0; left: 0; }
.corner-br { bottom: 0; right: 0; transform: rotate(180deg); }

#particles { position: absolute; inset: 0; }

.particle {
  position: absolute;
  top: -30px;
  pointer-events: none;
  animation: drift linear infinite;
  opacity: 0;
}

@keyframes drift {
  0%   { opacity: 0;   transform: translateY(0)     rotate(0deg)   translateX(0); }
  8%   { opacity: 1; }
  88%  { opacity: 0.5; }
  100% { opacity: 0;   transform: translateY(105vh) rotate(540deg) translateX(30px); }
}