:root  {
  --bg:#f3f6ff;
  --surface:#e8eefb;
  --ink:#182b4e;
  --muted:#506180;
  --line:#ced8ed;
  --accent:#235be0;
  --on-accent:#ffffff;
  --radius:10px;
  --photo-bg:#efeeeb;
  --badge-bg:#235be0;
  --badge-ink:#ffffff;
  --utility-bg:#182b4e;
  --utility-ink:#f3f6ff;
}

html[data-theme=dark]  {
  --bg:#111c34;
  --surface:#1d2b46;
  --ink:#f0f5ff;
  --muted:#b5c5df;
  --line:#374b6c;
  --accent:#8faeff;
  --on-accent:#132547;
  --radius:10px;
  --photo-bg:#efeeeb;
  --badge-bg:#8faeff;
  --badge-ink:#132547;
  --utility-bg:#f0f5ff;
  --utility-ink:#111c34;
}

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

.brand-mark  {
  border-radius:12px
}

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

.hero-copy h1  {
  font-weight:900;
  letter-spacing:-.07em;
  line-height:1
}

.hero-art  {
  border-radius:90px 0 0 0
}

.hero-art:after  {
  border-width:0 0 12px 0;
  border-color:#ffa66b
}

.hero-copy h1 em  {
  color:var(--accent)
}

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

.category  {
  border:0;
  border-bottom:3px solid var(--accent);
  background:var(--surface)
}

.collection-copy h2  {
  font-weight:900
}

.product-picture  {
  border-radius:10px
}

.main-nav .nav-category  {
  padding:14px 20px;
  background:var(--accent);
  color:var(--on-accent);
  border-radius:8px
}

@media(max-width:760px)  {
  .hero  {
    grid-template-columns:1fr
  }
  .hero-art  {
    border-radius:45px 0 0 0
  }
  .brand-name  {
    font-size:34px
  }
}