:root {
  --bg:#f5f4ef;
  --surface:#e8e7e1;
  --ink:#252c33;
  --muted:#5f646b;
  --line:#d0d2ce;
  --accent:#b64209;
  --on-accent:#ffffff;
  --radius:4px;
  --photo-bg:#eeece7;
  --badge-bg:#b64209;
  --badge-ink:#ffffff;
  --utility-bg:#252c33;
  --utility-ink:#f5f4ef;
}
html[data-theme=dark] {
  --bg:#20262c;
  --surface:#303941;
  --ink:#f5f4ef;
  --muted:#c4cbd0;
  --line:#4b565d;
  --accent:#ffb17b;
  --on-accent:#3b240f;
  --radius:4px;
  --photo-bg:#eeece7;
  --badge-bg:#ffb17b;
  --badge-ink:#3b240f;
  --utility-bg:#11171c;
  --utility-ink:#f5f4ef;
}
.brand-name {font-weight:850;letter-spacing:-.055em}
.brand-mark {border-radius:3px}
.hero {border-top:5px solid var(--accent);grid-template-columns:1fr 1.12fr}
.hero-art {margin:20px 20px 20px 0;border-radius:2px}
.hero-copy h1 {font-weight:850;letter-spacing:-.045em}
.hero-copy h1 em {font-style:normal}
.hero-serial {font-family:Consolas,monospace}
.category {border-left:4px solid var(--accent)}
.product-picture {border-radius:3px}
.collection {border-top:4px solid var(--accent)}
@media(max-width:760px) {
  .hero {grid-template-columns:minmax(0,1fr)}
  .hero-art {margin:0 16px 20px}
}