:root  {
  --bg:#f4f7f9;
  --surface:#e8eef2;
  --ink:#21343f;
  --muted:#526775;
  --line:#d1dce3;
  --accent:#205b79;
  --on-accent:#ffffff;
  --radius:6px;
  --photo-bg:#efeeeb;
  --badge-bg:#205b79;
  --badge-ink:#ffffff;
  --utility-bg:#21343f;
  --utility-ink:#f4f7f9;
}

html[data-theme=dark]  {
  --bg:#18232b;
  --surface:#23343f;
  --ink:#edf5fa;
  --muted:#b5c8d5;
  --line:#3d5360;
  --accent:#8cc7e4;
  --on-accent:#143144;
  --radius:6px;
  --photo-bg:#efeeeb;
  --badge-bg:#8cc7e4;
  --badge-ink:#143144;
  --utility-bg:#edf5fa;
  --utility-ink:#18232b;
}

.brand-name  {
  font-size:38px;
  font-weight:800;
  letter-spacing:-.065em
}

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

.hero  {
  grid-template-columns:1.05fr 1fr;
  border:1px solid var(--line);
  background:var(--bg)
}

.hero-copy  {
  border-right:1px solid var(--line)
}

.hero-copy h1  {
  font-weight:650;
  letter-spacing:-.065em
}

.hero-art  {
  margin:18px;
  background:var(--surface)
}

.hero-art:after  {
  border-width:1px;
  border-color:var(--line)
}

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

.category  {
  border-radius:4px;
  border-left:3px solid var(--accent);
  background:var(--surface)
}

.product-picture  {
  border:1px solid var(--line);
  border-radius:6px
}

.collection  {
  border-radius:6px
}

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

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