:root {
  --bg:#f8f6f0;
  --surface:#e9eeeb;
  --ink:#263b3e;
  --muted:#586b6d;
  --line:#ccd6d0;
  --accent:#286466;
  --on-accent:#ffffff;
  --radius:24px;
  --photo-bg:#f3efe6;
  --badge-bg:#286466;
  --badge-ink:#ffffff;
  --utility-bg:#263b3e;
  --utility-ink:#f8f6f0;
}
html[data-theme=dark] {
  --bg:#162f32;
  --surface:#244449;
  --ink:#f8f6f0;
  --muted:#bed0cd;
  --line:#476b6d;
  --accent:#93d4c7;
  --on-accent:#173c38;
  --radius:24px;
  --photo-bg:#f3efe6;
  --badge-bg:#93d4c7;
  --badge-ink:#173c38;
  --utility-bg:#102527;
  --utility-ink:#f8f6f0;
}
.brand-name {font-family:Georgia,serif;font-size:42px;font-weight:400;letter-spacing:-.05em}
.brand-mark {border-radius:50%;font-family:Georgia,serif;font-weight:400}
.hero {background:var(--bg);border:0;grid-template-columns:1fr 1.06fr}
.hero-art {margin:24px 18px;border-radius:48% 48% 20px 20px}
.hero-copy h1 em {font-family:Georgia,serif;font-weight:400}
.hero-serial:before {width:20px;height:20px;border:1px solid var(--accent);background:transparent;border-radius:50%}
.category {border-radius:14px}
.product-picture {border-radius:20px}
.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;border-radius:42% 42% 16px 16px}
  .brand-name {font-size:34px}
}