:root {
  --bg:#f5f8f1;
  --surface:#eaf0e3;
  --ink:#293b30;
  --muted:#5a6b5e;
  --line:#d1ddca;
  --accent:#3b6248;
  --on-accent:#ffffff;
  --radius:22px;
  --photo-bg:#efeeeb;
  --badge-bg:#3b6248;
  --badge-ink:#ffffff;
  --utility-bg:#293b30;
  --utility-ink:#f5f8f1;
}

html[data-theme=dark] {
  --bg:#17251c;
  --surface:#26392c;
  --ink:#f1f6e9;
  --muted:#b9cdbb;
  --line:#435e47;
  --accent:#b5d3a9;
  --on-accent:#253b2c;
  --radius:22px;
  --photo-bg:#efeeeb;
  --badge-bg:#b5d3a9;
  --badge-ink:#253b2c;
  --utility-bg:#f1f6e9;
  --utility-ink:#17251c;
}

.brand-name,h1,h2 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
}

.brand-name {
  font-size:46px;
  letter-spacing:-.065em;
}

.brand-mark {
  display:none;
}

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

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

.hero-copy h1 {
  font-size:clamp(3.2rem,4.9vw,5rem);
}

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

.category {
  border:0;
  border-bottom:2px solid var(--line);
  background:transparent;
}

.category .icon {
  width:34px;
  height:34px;
}

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

.collection {
  border:0;
  border-radius:120px 22px 22px 22px;
}

.guide {
  border-top:1px solid var(--line);
  padding-top:34px;
}

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