:root {
  --bg:#f7f8f2;
  --surface:#edf1e7;
  --ink:#29362e;
  --muted:#5a685c;
  --line:#d6dfd2;
  --accent:#416651;
  --on-accent:#ffffff;
  --radius:18px;
  --photo-bg:#efeeeb;
  --badge-bg:#416651;
  --badge-ink:#ffffff;
  --utility-bg:#29362e;
  --utility-ink:#f7f8f2;
}

html[data-theme=dark] {
  --bg:#18241d;
  --surface:#24342a;
  --ink:#f1f6ec;
  --muted:#b9cbbc;
  --line:#405646;
  --accent:#acccb1;
  --on-accent:#253529;
  --radius:18px;
  --photo-bg:#efeeeb;
  --badge-bg:#acccb1;
  --badge-ink:#253529;
  --utility-bg:#f1f6ec;
  --utility-ink:#18241d;
}

.brand-name {
  font-size:42px;
  font-weight:800;
}

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

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

.hero-art {
  border-radius:80px 0 0 0;
}

.hero-copy h1 {
  letter-spacing:-.055em;
}

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

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

.category .icon {
  padding:6px;
  width:42px;
  height:42px;
  background:var(--bg);
  border-radius:50%;
}

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

.collection {
  border:0;
}

.summary {
  border-radius:20px;
}

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