:root {
  --bg:#faf8f4;
  --surface:#f0ebe3;
  --ink:#2a2925;
  --muted:#70695f;
  --line:#ddd6ca;
  --accent:#98553b;
  --on-accent:#fff;
  --radius:2px;
  --photo-bg:#f0ede7;
  --badge-bg:#faf8f4;
  --badge-ink:#67422f;
  --utility-bg:#ddd7ca;
  --utility-ink:#4b443b
}

html[data-theme=dark] {
  --bg:#1c211e;
  --surface:#29302a;
  --ink:#f2efe7;
  --muted:#c0bbae;
  --line:#444c43;
  --accent:#e2ac82;
  --on-accent:#232820;
  --badge-bg:#e6ddd1;
  --badge-ink:#3d352d;
  --utility-bg:#121713;
  --utility-ink:#cdc9bc
}

.brand-mark {
  display:none
}

.brand-name {
  font-family:Georgia,'Times New Roman',serif;
  font-size:45px;
  font-weight:400;
  letter-spacing:-.065em
}

.brand small {
  font-size:7px;
  letter-spacing:.13em
}

.header-main {
  min-height:104px
}

.search {
  max-width:330px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  border-radius:0;
  padding-left:0
}

.search button {
  background:transparent;
  color:var(--ink)
}

.main-nav {
  justify-content:center;
  gap:38px
}

.main-nav .nav-category {
  margin:0
}

.main-nav .nav-category .icon {
  display:none
}

.main-nav .last-link {
  margin:0
}

.hero {
  height:620px;
  margin-top:24px;
  background:var(--surface)
}

.hero-image {
  width:65%;
  left:auto;
  right:0;
  object-position:57% center
}

.hero:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--surface) 0%,var(--surface) 33%,transparent 67%)
}

.hero-copy {
  padding:70px 55px
}

.hero-copy h1 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-.055em;
  max-width:8.8ch;
  font-size:clamp(3.3rem,6vw,6rem);
  margin-block:28px
}

.hero-copy h1 em {
  font-style:italic;
  color:var(--ink)
}

.hero-copy p {
  max-width:30ch
}

.hero-copy .eyebrow {
  font-size:.63rem
}

.hero-meta {
  color:#302d26;
  background:#faf8f4d9;
  padding:8px 14px
}

.benefits {
  padding-block:32px
}

.benefit .icon {
  color:var(--ink)
}

h2 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-.04em
}

.categories {
  gap:0;
  border-block:1px solid var(--line)
}

.category {
  border:0;
  background:transparent;
  flex-direction:column;
  text-align:center;
  padding:28px
}

.category+.category {
  border-left:1px solid var(--line)
}

.category strong {
  font-weight:400;
  font-size:.95rem
}

.category .icon {
  width:40px;
  height:40px;
  color:var(--ink)
}

.product-picture {
  border-radius:2px
}

.product-info h3 {
  font-weight:400;
  font-size:1rem
}

.product-bottom .price {
  font-weight:500
}

.add-button {
  border-radius:50%;
  background:transparent
}

.section {
  padding-block:58px
}

.collection {
  grid-template-columns:1.3fr 1fr
}

.collection-image {
  min-height:480px
}

.collection-image>img {
  object-position:60% center
}

.collection-copy h2 {
  font-size:3rem
}

.guide h2 {
  font-size:2.6rem
}

.detail-copy h1,.page-heading h1,.article h1 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400
}

.detail-copy dl {
  font-family:Arial,Helvetica,sans-serif
}

.footer {
  background:var(--surface)
}

@media(max-width:760px) {
  .brand-name {
    font-size:36px
  }
  .header-main {
    min-height:80px
  }
  .search {
    max-width:none;
    border:1px solid var(--line);
    padding-left:12px
  }
  .hero {
    height:710px;
    margin-top:16px
  }
  .hero-image {
    width:100%;
    height:52%;
    top:auto;
    bottom:0;
    object-position:60% center
  }
  .hero:after {
    background:linear-gradient(180deg,var(--surface) 0%,var(--surface) 46%,transparent 64%)
  }
  .hero-copy {
    padding:34px 26px
  }
  .hero-copy h1 {
    font-size:3.6rem;
    max-width:9ch;
    margin-block:20px
  }
  .hero-copy p {
    font-size:.85rem;
    margin-bottom:20px;
    max-width:33ch
  }
  .hero-meta {
    font-size:.64rem;
    bottom:15px;
    right:15px
  }
  .categories {
    gap:0
  }
  .category {
    padding:22px 8px
  }
  .category strong {
    font-size:.83rem
  }
  .category:nth-child(3) {
    border-left:0
  }
  .category:nth-child(n+3) {
    border-top:1px solid var(--line)
  }
  .collection {
    grid-template-columns:1fr
  }
  .collection-image {
    min-height:300px
  }
  .collection-copy h2 {
    font-size:2.5rem
  }
  .guide h2 {
    font-size:2.2rem
  }
}

.hero-copy h1 {
  width:55%;
  max-width:620px
}

.hero-copy .eyebrow {
  max-width:none
}

@media(max-width:760px) {
  .hero-copy h1 {
    width:100%;
    max-width:none;
    font-size:clamp(2.4rem,10vw,3.5rem)
  }
}