:root {
  --bg:#f5f7ef;
  --surface:#ffffff;
  --ink:#18291f;
  --muted:#56634e;
  --line:#d9e0cc;
  --accent:#426218;
  --on-accent:#ffffff;
  --radius:12px;
  --photo-bg:#efeeeb;
  --badge-bg:#426218;
  --badge-ink:#ffffff;
  --utility-bg:#18291f;
  --utility-ink:#f5f7ef;
}

html[data-theme=dark] {
  --bg:#111d16;
  --surface:#1c2c22;
  --ink:#f3f7ec;
  --muted:#b9cabb;
  --line:#364c3c;
  --accent:#c4ef64;
  --on-accent:#1b2715;
  --radius:12px;
  --photo-bg:#efeeeb;
  --badge-bg:#c4ef64;
  --badge-ink:#1b2715;
  --utility-bg:#f3f7ec;
  --utility-ink:#111d16;
}

.brand-name {
  font-style:italic;
  font-weight:900;
  font-size:38px;
}

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

.hero {
  grid-template-columns:1.04fr 1fr;
}

.hero-copy h1 {
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.065em;
}

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

.hero-serial {
  color:var(--accent);
}

.category {
  border:0;
  border-bottom:3px solid var(--accent);
}

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

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

.section-head h2 {
  font-weight:900;
}

@media(max-width:760px) {
  .hero {
    grid-template-columns:1fr;
  }
  .hero-art {
    border-radius:55px 0 0 0;
  }
}