:root  {
  --bg:#f3f8f0;
  --surface:#e4efdf;
  --ink:#223e30;
  --muted:#506c5a;
  --line:#cadcc7;
  --accent:#1f634a;
  --on-accent:#ffffff;
  --radius:20px;
  --photo-bg:#efeeeb;
  --badge-bg:#1f634a;
  --badge-ink:#ffffff;
  --utility-bg:#223e30;
  --utility-ink:#f3f8f0;
}

html[data-theme=dark]  {
  --bg:#14271e;
  --surface:#203b2b;
  --ink:#f1f9e9;
  --muted:#b9d0bc;
  --line:#3d5e47;
  --accent:#99d5a4;
  --on-accent:#163624;
  --radius:20px;
  --photo-bg:#efeeeb;
  --badge-bg:#99d5a4;
  --badge-ink:#163624;
  --utility-bg:#f1f9e9;
  --utility-ink:#14271e;
}

.brand-name  {
  font-size:42px;
  font-weight:750;
  letter-spacing:-.07em
}

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

.hero  {
  grid-template-columns:1.08fr 1fr;
  border:0;
  overflow:hidden
}

.hero-art  {
  order:-1
}

/* The outer hero clips the photo and copy to one continuous rounded frame. */
html[data-shop=iriso] .hero-art {
  border-radius:0
}

.hero-copy h1  {
  font-size:clamp(2.6rem,4.2vw,4.5rem);
  letter-spacing:-.06em
}

.hero-copy h1 em  {
  font-family:Georgia,serif;
  font-weight:400
}

.hero-copy .button  {
  border-radius:999px
}

.category  {
  border:0;
  background:var(--surface);
  border-radius:6px 28px 6px 28px
}

.category .icon  {
  width:32px;
  height:32px
}

.collection  {
  border:0;
  border-radius:24px
}

.guide h2  {
  font-family:Georgia,serif;
  font-weight:400
}

.sector-note  {
  color:var(--accent)
}

@media(max-width:760px)  {
  .hero  {
    grid-template-columns:1fr
  }
  .hero-art  {
    order:0
  }
  .hero-copy h1  {
    font-size:clamp(2.55rem,9.8vw,3.8rem)
  }
  .brand-name  {
    font-size:33px
  }
}