:root  {
  --bg:#f9f6ff;
  --surface:#f0eafa;
  --ink:#352448;
  --muted:#6a5b7b;
  --line:#dbd2e9;
  --accent:#6840a2;
  --on-accent:#ffffff;
  --radius:32px;
  --photo-bg:#efeeeb;
  --badge-bg:#6840a2;
  --badge-ink:#ffffff;
  --utility-bg:#352448;
  --utility-ink:#f9f6ff;
}

html[data-theme=dark]  {
  --bg:#21182e;
  --surface:#312340;
  --ink:#faf4ff;
  --muted:#cabcdb;
  --line:#514267;
  --accent:#c6adf2;
  --on-accent:#2a1745;
  --radius:32px;
  --photo-bg:#efeeeb;
  --badge-bg:#c6adf2;
  --badge-ink:#2a1745;
  --utility-bg:#faf4ff;
  --utility-ink:#21182e;
}

.brand-name  {
  font-size:44px;
  font-weight:800;
  letter-spacing:-.09em
}

.brand-mark  {
  border-radius:50%
}

.hero  {
  border:0;
  grid-template-columns:1fr 1.08fr
}

.hero-copy h1  {
  font-weight:700;
  letter-spacing:-.075em
}

.hero-art  {
  margin:20px 20px 20px 0;
  border-radius:120px 32px 32px 32px
}

.hero-meta  {
  border-radius:999px
}

.hero-copy .button,.summary  {
  border-radius:24px
}

.category  {
  border:0;
  background:var(--surface);
  border-radius:24px
}

.category .icon  {
  width:40px;
  height:40px;
  padding:7px;
  background:var(--bg);
  border-radius:14px
}

.product-picture  {
  border-radius:28px
}

.collection  {
  border:0;
  border-radius:40px
}

@media(max-width:760px)  {
  .hero  {
    grid-template-columns:1fr
  }
  .hero-art  {
    margin:0 16px 16px;
    border-radius:80px 24px 24px 24px
  }
  .brand-name  {
    font-size:34px
  }
  .collection  {
    border-radius:24px
  }
}