:root {
  --ink: #161310;
  --paper: #f7f4ee;
  --bone: #fbfaf7;
  --wine: #4a171d;
  --gold: #a98b61;
  --line: rgba(22, 19, 16, .14);
}

body {
  background: var(--paper);
  letter-spacing: -.01em;
}

.topline {
  height: 32px;
  background: #171411;
  gap: 7vw;
  font-size: 7px;
  letter-spacing: .24em;
}

.nav {
  top: 32px;
  height: 92px;
  padding: 0 4.7vw;
  border-color: rgba(255,255,255,.18);
}

.logo {
  font-size: 31px;
  letter-spacing: .3em;
}

.logo small { opacity: .68; }
.nav nav { gap: 40px; }
.nav nav a, .plain, .bag-button { font-size: 8px; }

.hero {
  min-height: 760px;
}

.hero-wash {
  background:
    linear-gradient(90deg, rgba(11,8,7,.76), rgba(11,8,7,.22) 48%, rgba(11,8,7,.04) 73%),
    linear-gradient(0deg, rgba(8,6,5,.48), transparent 48%);
}

.hero-content {
  left: 8vw;
  top: 55%;
  max-width: 720px;
}

.drop-label {
  margin-bottom: 30px;
  color: rgba(255,255,255,.74);
}

.hero h1 {
  max-width: 700px;
  font-size: clamp(72px, 8.2vw, 124px);
  line-height: .91;
  letter-spacing: -.045em;
}

.hero h1 em {
  color: #e2cdb4;
  font-style: italic;
}

.hero-content > p {
  max-width: 470px;
  margin: 31px 0 34px;
  color: rgba(255,255,255,.84);
  font-size: 14px;
  font-weight: 300;
}

.cta {
  height: 54px;
  min-width: 210px;
  padding: 0 23px;
  border-radius: 0;
  font-size: 8px;
  letter-spacing: .2em;
  transition: background .3s, color .3s, border-color .3s;
}

.primary, .quick-add {
  background: #f4eee5;
  color: #181411;
}

.primary:hover { background: #fff; }
.ghost { background: rgba(12,9,8,.18); }
.ghost:hover { background: rgba(255,255,255,.12); }

.hero-rail { display: none; }

.hero-product {
  right: 4.7vw;
  bottom: 46px;
  opacity: .82;
}

.hero-product strong { font-size: 30px; }
.scroll { left: 4.7vw; bottom: 52px; opacity: .7; }

.ticker {
  height: 56px;
  background: #e8dfd3;
  border-bottom: 1px solid var(--line);
}

.ticker div {
  color: #3c332b;
  font: 500 8px var(--sans);
  letter-spacing: .27em;
}

.ticker i { font-size: 8px; }

.manifesto {
  min-height: 820px;
  padding: 170px 9vw 130px;
  background: var(--paper);
}

.manifesto h2 {
  max-width: 1120px;
  margin: 78px 0 65px;
  font-size: clamp(58px, 7.2vw, 104px);
}

.manifesto h2 em, .look-copy h2 em { color: var(--gold); }

.manifesto-copy {
  max-width: 520px;
  font-size: 16px;
  font-weight: 300;
}

.object-stage {
  min-height: 900px;
  grid-template-columns: .8fr 1.2fr;
  background: #2a2420;
  color: #f8f4ed;
}

.object-copy {
  padding: 11vw 7vw;
}

.object-copy h2 {
  font-size: clamp(58px, 6vw, 92px);
}

.object-copy h2 em { color: #ccb18d; }
.object-copy > p:not(.kicker) { color: rgba(255,255,255,.65); }
.object-copy .ink { background: #f4eee5; color: #181411; }

.object-scene {
  min-height: 900px;
  background: radial-gradient(circle at 48% 42%, #e8ded1 0 11%, #b8aa9b 42%, #564a41 100%);
}

.object-card {
  width: min(38vw, 500px);
  box-shadow: 0 60px 120px rgba(0,0,0,.34);
}

.object-card span { background: #f4eee5; }
.orbit { border-color: rgba(255,255,255,.26); }
.scene-chip { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.25); }

.shop {
  padding: 160px 5vw;
}

.section-head {
  margin-bottom: 85px;
}

.section-head h2 {
  font-size: clamp(58px, 7vw, 94px);
}

.section-head > p {
  color: #6d645c;
  font-weight: 300;
}

.filter-row { margin-bottom: 42px; }

.product-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 90px 18px;
}

.product-image {
  aspect-ratio: 4 / 5;
  background: #ede8df;
}

.product-card:nth-child(3n+2) .product-image {
  margin-top: 70px;
}

.product-card:hover img { transform: scale(1.025); }

.product-index {
  top: 16px;
  left: 16px;
  background: rgba(250,248,244,.88);
  backdrop-filter: blur(8px);
}

.quick-add {
  left: 14px;
  right: 14px;
  bottom: 14px;
}

.product-info { margin-top: 18px; }
.product-info h3 { font-size: 22px; }
.product-info p { color: #8a8178; }

.look-builder {
  min-height: 980px;
  grid-template-columns: .9fr 1.1fr;
}

.look-copy {
  padding: 130px 8vw;
  background: #ddd3c6;
}

.look-copy h2 {
  font-size: clamp(58px, 6vw, 88px);
}

.look-copy > p { font-weight: 300; }

.stack { margin-top: 46px; }
.stack > div { min-height: 70px; }
.look-copy .ink { background: var(--wine); }

.look-float {
  right: 7%;
  bottom: 7%;
  width: 28%;
  padding: 10px;
  box-shadow: 0 25px 65px rgba(0,0,0,.25);
}

.proof {
  padding: 155px 7vw;
  background: #171411;
}

.proof-grid article {
  padding: 42px 30px 90px 0;
}

.proof-grid h3 {
  margin-top: 70px;
  font-size: 29px;
}

.proof-grid p {
  color: rgba(255,255,255,.56);
  font-weight: 300;
}

.proof-grid span { color: #c3a77f; }

.editorial {
  min-height: 880px;
  grid-template-columns: 1.2fr .8fr;
  background: #f2ede5;
}

.editorial-copy { padding: 8vw; }

.editorial blockquote {
  font-size: clamp(44px, 5vw, 70px);
}

.close {
  min-height: 640px;
  background: #4a171d;
}

.close h2 { margin-bottom: 52px; }

footer {
  padding: 100px 6vw 32px;
  background: #15120f;
}

.drawer {
  width: min(490px,100%);
  padding: 34px;
  box-shadow: -40px 0 100px rgba(0,0,0,.2);
}

.spotlight {
  background: #e7dfd4;
  grid-template-columns: 1.12fr .88fr;
}

.spotlight-copy {
  padding: 7vw 6vw 5vw;
}

.spotlight-copy h2 {
  font-size: clamp(62px, 7vw, 100px);
}

.spotlight-copy .primary {
  background: var(--wine);
  color: #fff;
}

@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .product-card:nth-child(3n+2) .product-image { margin-top: 0; }
  .product-card:nth-child(even) .product-image { margin-top: 45px; }
}

@media (max-width: 600px) {
  body { overflow-x: hidden; }
  .topline { height: 29px; }
  .nav { top: 29px; height: 72px; padding: 0 19px; }
  .logo { font-size: 26px; }
  .hero { min-height: 720px; }
  .hero-content {
    left: 24px;
    right: 24px;
    top: auto;
    bottom: 85px;
    transform: none;
  }
  .drop-label { margin-bottom: 22px; }
  .hero h1 { font-size: 61px; line-height: .93; }
  .hero-content > p { width: 100%; margin: 24px 0; font-size: 13px; }
  .hero-ctas, .hero-ctas .cta { width: 100%; max-width: 100%; }
  .hero-ctas .cta { height: 50px; min-width: 0; }
  .hero-product { display: none; }
  .ticker { height: 46px; }
  .manifesto { padding: 100px 24px; min-height: 650px; }
  .manifesto h2 { font-size: 48px; margin: 52px 0; }
  .object-copy { padding: 90px 24px; }
  .object-scene { min-height: 600px; }
  .shop { padding: 100px 14px; }
  .section-head { margin-bottom: 45px; }
  .product-grid { gap: 55px 8px; }
  .product-card:nth-child(even) .product-image { margin-top: 28px; }
  .quick-add { left: 7px; right: 7px; bottom: 7px; }
  .product-info h3 { font-size: 17px; }
  .look-copy { padding: 95px 24px; }
  .proof { padding: 100px 24px; }
  .editorial-copy { padding: 85px 24px; }
  .close { min-height: 520px; }
}