/* =========================
   XOXO, WOO — Drop Styles
   Rhode / Glossier energy
========================= */

:root {
  --xoxo-cream: #FBF6F1;
  --xoxo-ivory: #FFFDF9;
  --xoxo-red: #B5151B;
  --xoxo-deep: #7E0F14;
  --xoxo-ink: #151515;
}

/* HERO SECTION */
.xoxo-hero {
  background: radial-gradient(
    circle at top,
    var(--xoxo-ivory),
    var(--xoxo-cream)
  );
  padding: 120px 20px;
  text-align: center;
}

/* HEADLINE */
.xoxo-title {
  font-family: inherit;
  font-size: clamp(42px, 6vw, 72px);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--xoxo-red);
}

/* SUBCOPY */
.xoxo-sub {
  font-size: 16px;
  color: rgba(21,21,21,0.65);
  max-width: 520px;
  margin: 0 auto 32px;
  line-height: 1.5;
}

/* PRODUCT IMAGE */
.xoxo-product img {
  max-width: 380px;
  margin: 0 auto;
  display: block;
}

/* BUTTON */
.xoxo-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--xoxo-red);
  color: white;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.25s ease;
}

.xoxo-btn:hover {
  background: var(--xoxo-deep);
  transform: translateY(-1px);
}

/* NOTE / TEASER */
.xoxo-note {
  margin-top: 28px;
  font-size: 13px;
  color: rgba(21,21,21,0.6);
}