:root {
  --bg:#faf7ee;
  --surface:#f2ecdc;
  --ink:#333a45;
  --muted:#646c75;
  --line:#ded8cb;
  --accent:#b7433d;
  --on-accent:#ffffff;
  --radius:12px;
  --photo-bg:#f3eee6;
  --badge-bg:#b7433d;
  --badge-ink:#ffffff;
  --utility-bg:#333a45;
  --utility-ink:#faf7ee;
}
html[data-theme=dark] {
  --bg:#222a32;
  --surface:#313c48;
  --ink:#f7f4ea;
  --muted:#c4cbd3;
  --line:#4d5865;
  --accent:#f4aca4;
  --on-accent:#33231f;
  --radius:12px;
  --photo-bg:#f3eee6;
  --badge-bg:#f4aca4;
  --badge-ink:#33231f;
  --utility-bg:#f7f4ea;
  --utility-ink:#222a32;
}
.brand-name {font-family:Georgia,serif;font-size:42px;font-weight:400;letter-spacing:-.055em}
.brand-mark {border-radius:4px;font-family:Georgia,serif;font-weight:400}
.hero {grid-template-columns:1.03fr 1fr;border:1px solid var(--line);background:var(--surface)}
.hero-copy h1 em {font-family:Georgia,serif;font-weight:400}
.hero-art {margin:22px 22px 22px 0;border-radius:6px;box-shadow:7px 7px 0 var(--line)}
.hero-serial {font-family:Consolas,monospace}
.category {border-radius:6px;border-bottom:3px solid var(--line)}
.product-picture {border-radius:6px}
.collection-copy h2 {font-family:Georgia,serif;font-weight:400}
@media(max-width:760px) {
  .hero {grid-template-columns:minmax(0,1fr)}
  .hero-art {margin:0 16px 20px;box-shadow:5px 5px 0 var(--line)}
  .brand-name {font-size:33px}
}