:root {
  --bg:#f8f3ed;
  --surface:#efe8de;
  --ink:#35281e;
  --muted:#715b48;
  --line:#ddcebd;
  --accent:#98502c;
  --on-accent:#ffffff;
  --radius:6px;
  --photo-bg:#efeeeb;
  --badge-bg:#98502c;
  --badge-ink:#ffffff;
  --utility-bg:#35281e;
  --utility-ink:#f8f3ed;
}

html[data-theme=dark] {
  --bg:#191614;
  --surface:#2b231e;
  --ink:#f8eddf;
  --muted:#c9b6a5;
  --line:#4c3d33;
  --accent:#e8ac76;
  --on-accent:#291c13;
  --radius:6px;
  --photo-bg:#efeeeb;
  --badge-bg:#e8ac76;
  --badge-ink:#291c13;
  --utility-bg:#f8eddf;
  --utility-ink:#191614;
}

.brand-name,h1,h2 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
}

.brand-name {
  font-size:43px;
}

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

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

.hero-art {
  margin:18px;
  border-radius:220px 220px 6px 6px;
}

.hero-copy h1 {
  font-size:clamp(3.1rem,4.7vw,4.8rem);
}

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

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

.collection {
  grid-template-columns:1.15fr 1fr;
}

.guide {
  border-top:1px solid var(--line);
  padding-top:36px;
}

@media(max-width:760px) {
  .hero,.collection {
    grid-template-columns:1fr;
  }
  .hero-art {
    margin:0 18px 18px;
    border-radius:160px 160px 6px 6px;
  }
  .brand-name {
    font-size:34px;
  }
}