:root {
  --bg:#f6f7f9;
  --surface:#fff;
  --ink:#20242b;
  --muted:#586171;
  --line:#dbe0e7;
  --accent:#c74916;
  --on-accent:#fff;
  --radius:5px;
  --photo-bg:#e9e9e9;
  --badge-bg:#20242b;
  --badge-ink:#fff;
  --utility-bg:#20242b;
  --utility-ink:#e9ebef
}

html[data-theme=dark] {
  --bg:#12161b;
  --surface:#1b2129;
  --ink:#f4f5f7;
  --muted:#aeb8c6;
  --line:#303946;
  --accent:#ff8c46;
  --on-accent:#181b20;
  --badge-bg:#fff;
  --badge-ink:#20242b;
  --utility-bg:#090c10;
  --utility-ink:#c7cdd5
}

.brand-name {
  font-style:italic;
  letter-spacing:-.06em
}

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

.main-nav .nav-category {
  padding:15px 23px;
  background:var(--accent);
  color:var(--on-accent);
  border-radius:var(--radius)
}

.main-nav {
  padding-bottom:10px
}

.hero {
  margin-top:26px;
  height:540px;
  border-radius:var(--radius);
  background:#151819;
  color:#fff
}

.hero-image {
  object-position:72% center
}

.hero:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#101317f0 0%,#101317a0 45%,transparent 72%)
}

.hero-copy {
  padding:55px;
  z-index:2
}

.hero-copy h1 {
  font-size:clamp(3rem,5.3vw,5.2rem);
  max-width:11ch;
  text-transform:uppercase
}

.hero-copy .eyebrow,.hero-copy h1 em {
  color:#ff924e
}

.hero-copy p {
  color:#bfc6ce;
  max-width:34ch
}

.hero-copy .button {
  background:#ff8c46;
  color:#14171b
}

.hero-meta {
  color:#d9dde4
}

.category {
  border-left:3px solid var(--accent)
}

.collection-copy .eyebrow {
  color:var(--accent)
}

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

.product-picture {
  border:1px solid var(--line)
}

.section-head h2 {
  font-weight:800
}

.guide {
  border-top:1px solid var(--line);
  padding-top:40px
}

.footer .brand-mark {
  font-style:italic
}

@media(max-width:760px) {
  .main-nav .nav-category {
    background:transparent;
    color:var(--ink);
    padding:12px 14px
  }
  .main-nav {
    padding-bottom:8px
  }
  .hero {
    height:620px;
    margin-top:16px
  }
  .hero-image {
    object-position:78% center;
    height:60%;
    top:auto;
    bottom:0
  }
  .hero:after {
    background:linear-gradient(180deg,#101317 0%,#101317 37%,#10131766 75%,#10131722 100%)
  }
  .hero-copy {
    padding:30px 24px
  }
  .hero-copy h1 {
    font-size:2.7rem;
    max-width:12ch;
    margin-block:16px
  }
  .hero-copy p {
    font-size:.85rem;
    max-width:34ch;
    margin-bottom:20px
  }
  .hero-copy .eyebrow {
    font-size:.6rem
  }
  .hero-meta {
    font-size:.65rem
  }
  .collection-image {
    min-height:280px
  }
}

.hero-copy h1 {
  width:55%;
  max-width:620px;
  font-size:clamp(3rem,4.7vw,4.6rem)
}

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

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

@media(max-width:380px) {
  .hero-copy h1 {
    font-size:1.95rem
  }
}