:root {
  --bg:#fff9f2;
  --surface:#f5eae1;
  --ink:#3e324e;
  --muted:#6f5c75;
  --line:#ded1e2;
  --accent:#ab3f45;
  --on-accent:#ffffff;
  --radius:22px;
  --photo-bg:#f6f0e8;
  --badge-bg:#ab3f45;
  --badge-ink:#ffffff;
  --utility-bg:#3e324e;
  --utility-ink:#fff9f2;
  --lavender:#d9d0ee;
}
html[data-theme=dark] {
  --bg:#241e32;
  --surface:#362c45;
  --ink:#fbf4eb;
  --muted:#d7c5de;
  --line:#665575;
  --accent:#f6afa3;
  --on-accent:#3d2130;
  --radius:22px;
  --photo-bg:#f6f0e8;
  --badge-bg:#f6afa3;
  --badge-ink:#3d2130;
  --utility-bg:#fbf4eb;
  --utility-ink:#241e32;
  --lavender:#b5a0de;
}
.brand-name { font-family:Georgia,serif; font-size:43px; font-weight:400; letter-spacing:-.055em; }
.brand-mark { border-radius:50% 50% 50% 8px; font-family:Georgia,serif; transform:rotate(-7deg); }
.hero { grid-template-columns:1fr 1.03fr; border:0; background:var(--surface); border-radius:26px; }
.hero-copy h1 { font-family:Georgia,serif; font-weight:400; letter-spacing:-.06em; }
.hero-copy h1 em { color:var(--accent); font-style:normal; }
.hero-art { margin:24px 24px 24px 0; border-radius:90px 14px 90px 14px; box-shadow:8px 8px 0 var(--lavender); }
.hero-art:after { border:0; }
.hero-meta { right:18px; bottom:18px; border:0; border-radius:999px; max-width:calc(100% - 36px); }
.hero-serial:before { width:13px; height:13px; border-radius:3px; transform:rotate(45deg); background:var(--accent); }
.hero-copy .button { border-radius:999px; }
.category { border:1px solid var(--line); border-radius:20px 8px 20px 8px; background:var(--bg); }
.category .icon { color:var(--accent); }
.product-picture { border-radius:18px; border:1px solid var(--line); }
.product-card .badge { border-radius:999px; }
.collection { border:0; border-radius:26px; background:var(--surface); }
.collection-copy h2,.guide h2,.article h1,.article h2 { font-family:Georgia,serif; font-weight:400; }
.guide { border:1px solid var(--line); border-radius:20px; }
@media(max-width:1050px) {
  .hero-art { margin:20px 20px 20px 0; border-radius:65px 12px 65px 12px; box-shadow:6px 6px 0 var(--lavender); }
}
@media(max-width:760px) {
  .hero { grid-template-columns:minmax(0,1fr); border-radius:20px; }
  .hero-art { margin:0 22px 24px 16px; border-radius:60px 12px 60px 12px; }
  .hero-copy h1 { font-size:clamp(2.4rem,9.8vw,3.6rem); }
  .brand-name { font-size:34px; }
}