:root  {
  --bg:#faf8ef;
  --surface:#eeefdf;
  --ink:#303b29;
  --muted:#5a6550;
  --line:#d8dcc7;
  --accent:#4e6734;
  --on-accent:#ffffff;
  --radius:14px;
  --photo-bg:#efeeeb;
  --badge-bg:#4e6734;
  --badge-ink:#ffffff;
  --utility-bg:#303b29;
  --utility-ink:#faf8ef;
}

html[data-theme=dark]  {
  --bg:#1c251c;
  --surface:#293528;
  --ink:#f6f5e8;
  --muted:#c3ceb9;
  --line:#43533e;
  --accent:#b5cf8b;
  --on-accent:#25351c;
  --radius:14px;
  --photo-bg:#efeeeb;
  --badge-bg:#b5cf8b;
  --badge-ink:#25351c;
  --utility-bg:#f6f5e8;
  --utility-ink:#1c251c;
}

.brand-name  {
  font-family:Georgia,serif;
  font-size:41px;
  letter-spacing:-.07em
}

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

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

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

.hero-copy h1  {
  letter-spacing:-.05em
}

.hero-art  {
  border-radius:140px 0 0 0
}

.hero-serial:before  {
  height:8px;
  width:8px;
  border-radius:50%
}

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

.category .icon  {
  color:var(--accent);
  width:32px;
  height:32px
}

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

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

.collection  {
  border:0
}

.product-note  {
  font-family:Consolas,monospace
}

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