:root {
  --bg:#fafafa;
  --surface:#efefef;
  --ink:#202024;
  --muted:#606068;
  --line:#d7d7dc;
  --accent:#27272b;
  --on-accent:#ffffff;
  --radius:3px;
  --photo-bg:#efeeeb;
  --badge-bg:#27272b;
  --badge-ink:#ffffff;
  --utility-bg:#202024;
  --utility-ink:#fafafa;
}

html[data-theme=dark] {
  --bg:#171719;
  --surface:#27272a;
  --ink:#f4f4f6;
  --muted:#bfc0c5;
  --line:#444449;
  --accent:#f3b56b;
  --on-accent:#252119;
  --radius:3px;
  --photo-bg:#efeeeb;
  --badge-bg:#f3b56b;
  --badge-ink:#252119;
  --utility-bg:#f4f4f6;
  --utility-ink:#171719;
}

.brand-name {
  font-size:36px;
  font-weight:900;
  letter-spacing:-.08em;
}

.brand-mark {
  border-radius:0;
}

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

.hero-copy h1 {
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:-.075em;
  line-height:1;
}

.hero-serial {
  font-family:Consolas,monospace;
  font-size:.7rem;
}

.hero-art:after {
  border-width:0 0 14px 0;
  border-color:var(--accent);
}

.hero-copy .button {
  text-transform:uppercase;
  font-size:.73rem;
  letter-spacing:.07em;
}

.categories {
  gap:0;
}

.category {
  border-radius:0;
  border-right:0;
  background:transparent;
}

.category:last-child {
  border-right:1px solid var(--line);
}

.product-picture {
  border-radius:0;
}

.product-info h3 {
  font-weight:800;
}

.collection {
  border:0;
}

@media(max-width:760px) {
  .hero {
    grid-template-columns:1fr;
  }
  .category {
    border-right:1px solid var(--line);
  }
  .brand-name {
    font-size:29px;
  }
}