:root {
  --bg:#fffaf2;
  --surface:#fff1db;
  --ink:#29294b;
  --muted:#655873;
  --line:#e5d9ce;
  --accent:#af384b;
  --on-accent:#ffffff;
  --radius:26px;
  --photo-bg:#efeeeb;
  --badge-bg:#af384b;
  --badge-ink:#ffffff;
  --utility-bg:#29294b;
  --utility-ink:#fffaf2;
}

html[data-theme=dark] {
  --bg:#201f32;
  --surface:#302d43;
  --ink:#fff6e7;
  --muted:#d0bfdb;
  --line:#51455c;
  --accent:#ffb1aa;
  --on-accent:#302339;
  --radius:26px;
  --photo-bg:#efeeeb;
  --badge-bg:#ffb1aa;
  --badge-ink:#302339;
  --utility-bg:#fff6e7;
  --utility-ink:#201f32;
}

.brand-name {
  font-size:42px;
  letter-spacing:-.08em;
}

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

.hero {
  border:2px solid var(--line);
}

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

.hero-art {
  border-radius:100px 0 0 100px;
  margin:25px 0 25px 10px;
}

.hero-serial {
  border:1px dashed var(--accent);
  padding:9px 14px;
  border-radius:999px;
}

.hero-serial:before {
  display:none;
}

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

.category {
  border-width:2px;
  border-bottom-width:5px;
  border-bottom-color:var(--accent);
}

.category:nth-child(even) {
  border-radius:12px 30px 12px 30px;
}

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

.collection-copy h2 {
  font-weight:800;
}

@media(max-width:760px) {
  .hero-art {
    margin:0 15px 15px;
    border-radius:60px 60px 20px 20px;
  }
  .brand-name {
    font-size:34px;
  }
}