:root {
  --bg:#fcf7ef;
  --surface:#f1e7d8;
  --ink:#35252b;
  --muted:#6e565c;
  --line:#d5bf9d;
  --accent:#78293f;
  --on-accent:#ffffff;
  --radius:16px;
  --photo-bg:#f4eee5;
  --badge-bg:#78293f;
  --badge-ink:#ffffff;
  --utility-bg:#35252b;
  --utility-ink:#fcf7ef;
  --brass:#a47c36;
}
html[data-theme=dark] {
  --bg:#24191f;
  --surface:#36272d;
  --ink:#fcf4e7;
  --muted:#dbc5c3;
  --line:#745548;
  --accent:#e7afb9;
  --on-accent:#32151f;
  --radius:16px;
  --photo-bg:#f4eee5;
  --badge-bg:#e7afb9;
  --badge-ink:#32151f;
  --utility-bg:#fcf4e7;
  --utility-ink:#24191f;
  --brass:#c8a771;
}
.brand-name { font-family:Georgia,serif; font-size:43px; font-weight:400; letter-spacing:-.055em; }
.brand-mark { border-radius:50% 50% 8px 8px; font-family:Georgia,serif; font-weight:400; }
.brand small { letter-spacing:.12em; }
.hero { grid-template-columns:1.05fr 1fr; border:1px solid var(--line); background:var(--bg); }
.hero-copy h1,.collection-copy h2,.guide h2 { font-family:Georgia,serif; font-weight:400; }
.hero-copy h1 { letter-spacing:-.055em; }
.hero-copy h1 em { font-style:italic; color:var(--accent); }
.hero-art { margin:28px 28px 28px 0; border-radius:160px 160px 12px 12px; }
.hero-art:after { inset:10px; border:1px solid var(--brass); border-radius:150px 150px 7px 7px; }
.hero-meta { right:20px; bottom:20px; max-width:calc(100% - 40px); text-align:center; }
.hero-serial:before { width:26px; height:5px; border-radius:50%; background:var(--brass); }
.sector-note { border-color:var(--brass); }
.category { border-radius:12px; background:var(--surface); border-bottom:2px solid var(--brass); }
.category .icon { color:var(--accent); }
.product-picture { border-radius:12px; border:1px solid var(--line); }
.product-note { font-size:.8rem; letter-spacing:.02em; }
.collection { border-radius:18px; border-color:var(--brass); }
.collection-copy { background:var(--surface); }
.article h1,.article h2 { font-family:Georgia,serif; font-weight:400; }
@media(max-width:1050px) {
  .hero-art { margin:20px 20px 20px 0; border-radius:110px 110px 10px 10px; }
  .hero-art:after { border-radius:100px 100px 6px 6px; }
}
@media(max-width:760px) {
  .hero { grid-template-columns:minmax(0,1fr); }
  .hero-art { margin:0 18px 18px; border-radius:100px 100px 10px 10px; }
  .hero-art:after { border-radius:90px 90px 6px 6px; }
  .hero-copy h1 { font-size:clamp(2.4rem,9.8vw,3.6rem); }
  .brand-name { font-size:34px; }
}