:root  {
  --bg:#fcf7f5;
  --surface:#f3e9e6;
  --ink:#382b33;
  --muted:#716068;
  --line:#e5d4d8;
  --accent:#914c62;
  --on-accent:#ffffff;
  --radius:26px;
  --photo-bg:#efeeeb;
  --badge-bg:#914c62;
  --badge-ink:#ffffff;
  --utility-bg:#382b33;
  --utility-ink:#fcf7f5;
}

html[data-theme=dark]  {
  --bg:#231c24;
  --surface:#342833;
  --ink:#faf2f6;
  --muted:#cabac5;
  --line:#52414d;
  --accent:#edb7cb;
  --on-accent:#34212c;
  --radius:26px;
  --photo-bg:#efeeeb;
  --badge-bg:#edb7cb;
  --badge-ink:#34212c;
  --utility-bg:#faf2f6;
  --utility-ink:#231c24;
}

.brand-name  {
  font-family:Georgia,serif;
  font-size:42px;
  font-weight:400;
  letter-spacing:-.06em
}

.brand-mark  {
  border-radius:50%;
  font-family:Georgia,serif;
  font-weight:400
}

.hero  {
  grid-template-columns:1.05fr 1fr;
  border:0;
  background:var(--surface)
}

.hero-copy h1,.section-head h2,.guide h2  {
  font-family:Georgia,serif;
  font-weight:400;
  letter-spacing:-.045em
}

.hero-copy h1 em  {
  font-style:italic
}

.hero-art  {
  border-radius:180px 180px 26px 26px;
  margin:24px 24px 24px 0
}

.hero-copy .button,.category  {
  border-radius:999px
}

.product-picture  {
  border-radius:140px 140px 20px 20px
}

.collection-copy h2  {
  font-family:Georgia,serif;
  font-weight:400
}

.section-head .eyebrow  {
  letter-spacing:.2em
}

@media(max-width:760px)  {
  .hero  {
    grid-template-columns:1fr
  }
  .hero-art  {
    margin:0 18px 18px;
    border-radius:140px 140px 22px 22px
  }
  .brand-name  {
    font-size:33px
  }
  .category  {
    border-radius:18px
  }
  .product-picture  {
    border-radius:80px 80px 14px 14px
  }
}