/* ==========================================================================
   Concept 1 — The Quiet Hustle
   Desktop values are design px on the 1440 grid (see base.css, --u).
   ========================================================================== */

body.qh {
  background: var(--night);
  color: var(--bone);
  color-scheme: dark;
}
.qh {
  --hdr-fg: #e9e4da;
  --hdr-logo: #f6f0e5;
  --bar-bg: rgba(10, 12, 12, .94);
  --bar-fg: #efe9de;
  --bar-line: rgba(255, 255, 255, .08);
}

/* ---------------------------------------------------------------- hero */
.qh-hero { position: relative; isolation: isolate; background: #070909; }
.qh-hero__media { z-index: -2; object-position: 50% 0; }
.qh-hero__copy { position: relative; }
.qh-hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.062em;
  color: var(--bone);
}
.qh-hero__tagline {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--bone);
}
.qh-hero__sub {
  margin: 0;
  font-weight: 400;
  letter-spacing: .044em;
  text-transform: uppercase;
  color: var(--bone-2);
}
.qh-watch {
  display: flex;
  align-items: center;
  color: var(--bone-2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .092em;
  text-transform: uppercase;
}
.qh-watch__ring {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 max(1.5px, calc(2.2 * var(--u))) rgba(241, 234, 222, .95);
  transition: background-color .25s var(--ease);
}
.qh-watch:hover .qh-watch__ring { background: rgba(244, 234, 214, .14); }
.qh-watch__ring .icon { transform: translateX(8%); }
.qh-watch__dbl { display: block; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* Category strip set into the bottom of the hero */
.qh-cats { margin: 0; padding: 0; list-style: none; }
.qh-cats .cat::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #d9c7a4;
  pointer-events: none;
}
.qh-cats .cat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 42%);
}
.qh-cats .cat__text { position: absolute; }

/* ---------------------------------------------------------------- story */
.qh-story { position: relative; isolation: isolate; overflow: hidden; background: #06090a; }
.qh-story__media { z-index: -1; }
.qh-story__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.044em;
  text-transform: uppercase;
  color: var(--bone);
}
.qh-story__lede {
  margin: 0;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bone-2);
}

/* ---------------------------------------------------------------- featured */
.qh-featured { position: relative; background: var(--cream); color: var(--ink); }
.qh-featured .sec-head__title { letter-spacing: -.041em; }
.qh-featured__rule { position: relative; background: #b9b4aa; }
.qh-featured__rule::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid #8e897f;
  border-right: 1px solid #8e897f;
  transform: translateY(-50%) rotate(45deg);
}
.qh-carousel { position: relative; }
.qh-carousel__viewport { overflow: hidden; }
.qh-products {
  display: grid;
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}
.qh-products .product__media { background: #f0ebe3; }
.qh-carousel__btn {
  position: absolute;
  display: grid;
  place-items: center;
  color: #3b3935;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.qh-carousel__btn:hover { color: var(--ink); }
.qh-carousel__btn--prev:hover { transform: translate(-50%, -50%) translateX(-3px); }
.qh-carousel__btn--next:hover { transform: translate(-50%, -50%) translateX(3px); }
.qh-carousel__btn svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- next drop */
.qh-drop { position: relative; isolation: isolate; overflow: hidden; background: #071008; text-align: center; }
.qh-drop__media { z-index: -1; }
.qh-drop__copy { display: flex; flex-direction: column; align-items: center; }
.qh-drop__kicker {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .008em;
  font-variant-numeric: lining-nums;
  text-transform: uppercase;
  color: var(--bone);
}
.qh-drop__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.049em;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
}
.qh-drop__sub {
  margin: 0;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .1em;
  padding-left: .1em;
  text-transform: uppercase;
  color: var(--bone-2);
}

/* =================================================================== desktop */
@media (min-width: 901px) {
  .qh-hero { height: calc(1975 * var(--u)); }
  .qh-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(1.4 * var(--u));
    height: calc(3 * var(--u));
    background: rgba(198, 182, 152, .88);
  }

  .qh-hero__copy { position: absolute; left: calc(92.7 * var(--u)); top: calc(260.7 * var(--u)); }
  .qh-hero__title { margin-left: calc(-8.7 * var(--u)); font-size: calc(233.5 * var(--u)); }
  .qh-hero__tagline { margin: calc(21.9 * var(--u)) 0 0 calc(-3.5 * var(--u)); font-size: calc(107 * var(--u)); line-height: 1.0075; }
  .qh-hero__sub { margin: calc(44.2 * var(--u)) 0 0 calc(-2.4 * var(--u)); font-size: calc(31 * var(--u)); line-height: 1.25; }
  .qh-hero__btn { margin-top: calc(50.2 * var(--u)); width: calc(307.8 * var(--u)); }
  .qh-watch { margin-top: calc(64.5 * var(--u)); height: calc(46.3 * var(--u)); font-size: calc(20.4 * var(--u)); }
  .qh-watch__ring { width: calc(46.3 * var(--u)); height: calc(46.3 * var(--u)); }
  .qh-watch__ring .icon { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
  .qh-watch__label { margin-left: calc(19.2 * var(--u)); }
  .qh-watch__dbl { margin-left: calc(15 * var(--u)); width: calc(29.8 * var(--u)); height: calc(23.2 * var(--u)); stroke-width: 3.4; }

  .qh-cats {
    position: absolute;
    left: calc(28.1 * var(--u));
    right: calc(28.1 * var(--u));
    top: calc(1484.7 * var(--u));
    height: calc(486.3 * var(--u));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: calc(14.9 * var(--u));
  }
  .qh-cats .cat { height: 100%; }
  .qh-cats .cat::after { border-width: calc(3 * var(--u)); }
  .qh-cats .cat__text { left: calc(37.5 * var(--u)); bottom: calc(37.5 * var(--u)); }
  .qh-cats .cat__label { margin-bottom: calc(6.3 * var(--u)); font-size: calc(33 * var(--u)); }
  .qh-cats .cat__shop { font-size: calc(23 * var(--u)); gap: calc(16.2 * var(--u)); }
  .qh-cats .cat__shop .arrow { width: calc(23 * var(--u)); height: calc(15 * var(--u)); stroke-width: 1.7; }

  .qh-story { height: calc(777.5 * var(--u)); }
  .qh-story__copy { position: absolute; left: calc(129.1 * var(--u)); top: calc(207.5 * var(--u)); }
  .qh-story__title { margin-left: calc(-1.9 * var(--u)); font-size: calc(106.5 * var(--u)); line-height: .949; }
  .qh-story__lede { margin: calc(39.1 * var(--u)) 0 0 calc(.9 * var(--u)); font-size: calc(26 * var(--u)); }
  .qh-story__btn { margin-top: calc(45.8 * var(--u)); width: calc(274.8 * var(--u)); }

  .qh-featured { height: calc(678.6 * var(--u)); }
  .qh-featured__head { position: absolute; left: calc(87.5 * var(--u)); right: calc(76 * var(--u)); top: calc(50.6 * var(--u)); height: calc(47.5 * var(--u)); }
  .qh-featured .sec-head__title { font-size: calc(47.5 * var(--u)); }
  .qh-featured__rule { margin-left: calc(43.5 * var(--u)); top: calc(2.2 * var(--u)); }
  .qh-featured__rule::after { width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
  .qh-carousel { position: absolute; left: 0; right: 0; top: calc(134.1 * var(--u)); }
  .qh-carousel__viewport { margin-inline: calc(76 * var(--u)); }
  .qh-products { grid-auto-columns: calc(302.05 * var(--u)); gap: calc(26.5 * var(--u)); }
  .qh-products .product__media { height: calc(377.4 * var(--u)); }
  .qh-products .product__name { margin-top: calc(25.2 * var(--u)); padding-left: calc(26.3 * var(--u)); }
  .qh-products .product__price { margin-top: calc(10.2 * var(--u)); padding-left: calc(26.3 * var(--u)); }
  .qh-carousel__btn { top: calc(200.4 * var(--u)); width: calc(48 * var(--u)); height: calc(64 * var(--u)); transform: translate(-50%, -50%); }
  .qh-carousel__btn--prev { left: calc(38 * var(--u)); }
  .qh-carousel__btn--next { left: calc(1402 * var(--u)); }
  .qh-carousel__btn svg { width: calc(16.5 * var(--u)); height: calc(30 * var(--u)); stroke-width: 2.4; }

  .qh-drop { height: calc(537.9 * var(--u)); }
  .qh-drop__copy { position: absolute; left: 0; right: 0; top: calc(93.6 * var(--u)); }
  .qh-drop__kicker { font-size: calc(38.5 * var(--u)); }
  .qh-drop__title { margin-top: calc(.6 * var(--u)); font-size: calc(105 * var(--u)); }
  .qh-drop__sub { margin-top: calc(26.2 * var(--u)); font-size: calc(23.5 * var(--u)); }
  .qh-drop__btn { margin-top: calc(42.8 * var(--u)); width: calc(304.5 * var(--u)); }
}

/* ============================================================ mobile/tablet */
@media (max-width: 900px) {
  .qh-hero { padding-bottom: 16px; }
  .qh-hero__media { height: min(820px, 172vw); object-position: 64% 0; }
  .qh-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: min(820px, 172vw);
    z-index: -1;
    background:
      linear-gradient(to right, rgba(5, 7, 7, .72), rgba(5, 7, 7, .1) 70%),
      linear-gradient(to top, #070909 2%, rgba(7, 9, 9, 0) 30%);
  }
  .qh-hero__copy { padding: 104px max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px)); min-height: min(820px, 172vw); }
  .qh-hero__title { font-size: clamp(76px, 24vw, 132px); margin-left: -.035em; }
  .qh-hero__tagline { margin-top: 8px; font-size: clamp(34px, 10.4vw, 58px); line-height: 1; }
  .qh-hero__sub { margin-top: 18px; font-size: 13.5px; line-height: 1.5; }
  .qh-hero__btn { margin-top: 24px; min-width: 176px; }
  .qh-watch { margin-top: 22px; height: 34px; font-size: 12px; }
  .qh-watch__ring { width: 34px; height: 34px; }
  .qh-watch__ring .icon { width: 12px; height: 12px; }
  .qh-watch__label { margin-left: 12px; }
  .qh-watch__dbl { margin-left: 10px; width: 18px; height: 14px; stroke-width: 1.8; }

  .qh-cats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
    margin-top: -64px;
  }
  .qh-cats li { grid-column: span 2; }
  .qh-cats li:nth-last-child(-n + 2) { grid-column: span 3; }
  .qh-cats .cat { aspect-ratio: 7 / 10; }
  @media (max-width: 600px) {
    .qh-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qh-cats li, .qh-cats li:nth-last-child(-n + 2) { grid-column: auto; }
    .qh-cats li:last-child { grid-column: 1 / -1; }
    .qh-cats li:last-child .cat { aspect-ratio: 16 / 9; }
  }
  .qh-cats .cat__text { left: 14px; bottom: 14px; right: 10px; }
  .qh-cats .cat__label { font-size: 15px; letter-spacing: -.01em; margin-bottom: 4px; white-space: normal; }
  .qh-cats .cat__shop { font-size: 11.5px; gap: 8px; letter-spacing: .04em; }
  .qh-cats .cat__shop .arrow { width: 15px; height: 9px; stroke-width: 1.6; }

  .qh-story { min-height: 560px; border-top: 2px solid rgba(160, 147, 124, .55); }
  .qh-story__media { object-position: 66% 50%; }
  .qh-story::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(4, 6, 7, .88), rgba(4, 6, 7, .1) 62%);
  }
  .qh-story__copy { position: absolute; left: max(20px, env(safe-area-inset-left, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); bottom: 36px; }
  .qh-story__title { font-size: clamp(46px, 13vw, 76px); line-height: .95; }
  .qh-story__lede { margin-top: 16px; font-size: 13px; }
  .qh-story__btn { margin-top: 20px; }

  .qh-featured { padding: 40px 0 44px; }
  .qh-featured__head { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
  .qh-featured__rule::after { width: 6px; height: 6px; }
  .qh-carousel { margin-top: 22px; }
  .qh-carousel__btn { display: none; }
  .qh-carousel__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
    scrollbar-width: none;
  }
  .qh-carousel__viewport::-webkit-scrollbar { display: none; }
  .qh-products { grid-auto-columns: min(62%, 280px); gap: 12px; }
  @media (min-width: 600px) { .qh-products { grid-auto-columns: calc((100% - 36px) / 4); } }
  .qh-products .product { scroll-snap-align: start; }
  .qh-products .product__media { aspect-ratio: 4 / 5; }

  .qh-drop { min-height: 440px; display: grid; align-items: center; padding: 56px max(16px, env(safe-area-inset-right, 0px)) 56px max(16px, env(safe-area-inset-left, 0px)); }
  .qh-drop__media { object-position: 42% 50%; }
  .qh-drop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(3, 8, 4, .35); }
  .qh-drop__kicker { font-size: 18px; }
  .qh-drop__title { margin-top: 4px; font-size: clamp(38px, 11.5vw, 72px); white-space: normal; text-wrap: balance; }
  .qh-drop__sub { margin-top: 14px; font-size: 11.5px; line-height: 1.5; letter-spacing: .08em; }
  .qh-drop__btn { margin-top: 24px; min-width: 190px; }
}