/* =========================================
   FONTS
   ========================================= */

@import url('https://fonts.cdnfonts.com/css/italiana');
@import url('https://fonts.cdnfonts.com/css/sf-pro-display');


/* =========================================
   ROOT
   ========================================= */

:root {
  --paper: #FAF5F5;
  --ink: #2f1d1d;
  --muted: #77716f;

  --serif: "Italiana", Georgia, serif;

  --sans:
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;
}


/* =========================================
   RESET
   ========================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: var(--paper);
  color: var(--ink);

  font-family: var(--sans);
  font-weight: 300;

  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}


/* =========================================
   NAVBAR
   ========================================= */

.site-header {
  position: fixed;

  z-index: 50;

  top: 0;
  left: 0;

  width: 100%;
  height: 78px;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  padding: 0 34px;

  color: var(--ink);

  transform: translateY(0);
  opacity: 1;

  transition:
    transform .7s cubic-bezier(.16,1,.3,1),
    opacity .55s ease;

  pointer-events: auto;

  isolation: isolate;
}


/* Navbar hide */

.site-header.nav-hidden {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}


/* Subtle navbar shadow */

.site-header::before {
  content: "";

  position: absolute;

  z-index: -1;

  top: 0;
  left: 0;

  width: 100%;
  height: 115px;

  background:
    linear-gradient(
      to bottom,
      rgba(47,29,29,.11),
      rgba(47,29,29,.045) 50%,
      transparent
    );

  pointer-events: none;
}


/* =========================================
   BRAND
   ========================================= */

.brand {
  display: flex;
  align-items: center;

  width: max-content;

  transition:
    opacity .35s ease;
}

.brand:hover {
  opacity: .62;
}

.brand img {
  width: 132px;
  height: auto;

  display: block;

  /* Collection page uses dark logo */
  filter: none;
}

.brand-fallback {
  display: none;

  font-size: 14px;

  letter-spacing: -.05em;
}

.brand-fallback span {
  font-family: var(--serif);
  font-style: italic;
}


/* =========================================
   NAVIGATION
   ========================================= */

.main-nav {
  display: flex;

  gap: 25px;

  align-items: center;
}

.main-nav a {
  position: relative;

  padding: 8px 0;

  font-size: 13px;

  letter-spacing: -.03em;
}

.main-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 3px;

  width: 100%;
  height: 1px;

  background: currentColor;

  transform: scaleX(0);

  transform-origin: right;

  transition:
    transform .5s cubic-bezier(.16,1,.3,1);
}

.main-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* =========================================
   HEADER ACTIONS
   ========================================= */

.header-actions {
  justify-self: end;

  display: flex;

  gap: 8px;
}

.icon-btn {
  width: 28px;
  height: 28px;

  border: 0;

  background: transparent;

  padding: 3px;

  cursor: pointer;

  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    opacity .3s;
}

.icon-btn svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.15;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn:hover {
  transform:
    translateY(-2px)
    scale(1.06);

  opacity: .7;
}


/* =========================================
   COLLECTION PAGE
   ========================================= */

.collection-page {
  background: var(--paper);
}


/* =========================================
   COLLECTION
   ========================================= */

.engagement-collection {
  width: 100%;

  padding:
    155px
    81px
    130px;
}


/* =========================================
   INTRO
   ========================================= */

.collection-intro {
  width: 100%;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 60px;

  margin-bottom: 82px;
}

.collection-intro-left {
  flex-shrink: 0;
}

.collection-eyebrow {
  display: block;

  margin-bottom: 20px;

  font-family: var(--sans);

  font-size: 10px;

  font-weight: 500;

  letter-spacing: .20em;

  color: #7b7371;
}

.collection-intro h1 {
  margin: 0;

  font-family: var(--serif);

  font-size:
    clamp(
      58px,
      7vw,
      108px
    );

  font-weight: 400;

  line-height: .88;

  letter-spacing: -.055em;
}

.collection-description {
  max-width: 340px;

  margin: 0 0 3px;

  font-family: var(--sans);

  font-size: 14px;

  font-weight: 300;

  line-height: 1.5;

  letter-spacing: -.01em;

  color: #665e5d;
}


/* =========================================
   PRODUCT GRID
   ========================================= */

.engagement-grid {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  column-gap: 23px;

  row-gap: 70px;
}


/* =========================================
   PRODUCT
   ========================================= */

.engagement-product {
  display: block;

  min-width: 0;

  color: var(--ink);

  text-decoration: none;
}


/* =========================================
   PRODUCT IMAGE
   ========================================= */

.engagement-product-image {
  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #ebe6e5;
}

.engagement-product-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform: scale(1);

  transition:
    transform
    .9s
    cubic-bezier(.16,1,.3,1);
}


/* Image hover */

.engagement-product:hover
.engagement-product-image img {
  transform: scale(1.055);
}


/* =========================================
   PRODUCT DETAILS
   ========================================= */

.product-details {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding-top: 20px;
}

.product-details h2 {
  margin: 0;

  font-family: var(--sans);

  font-size: 17px;

  font-weight: 600;

  line-height: 1;

  letter-spacing: -.035em;
}

.product-details span {
  flex-shrink: 0;

  font-family: var(--sans);

  font-size: 9px;

  font-weight: 500;

  letter-spacing: .12em;

  color: #857c7a;

  opacity: 0;

  transform: translateX(-5px);

  transition:
    opacity .4s ease,
    transform .5s cubic-bezier(.16,1,.3,1);
}

.engagement-product:hover
.product-details span {
  opacity: 1;

  transform: translateX(0);
}


/* =========================================
   FOOTER
   ========================================= */

footer {
  background: #FAF5F5;

  color: #2f1d1d;

  padding:
    100px
    4vw
    30px;
}

.footer-brand {
  font-family: var(--sans);

  font-size:
    clamp(
      60px,
      12vw,
      180px
    );

  letter-spacing: -.075em;

  line-height: .8;
}

.footer-brand span {
  font-family: var(--serif);

  font-style: italic;
}

.footer-bottom {
  margin-top: 100px;

  border-top:
    1px solid #2f1d1d;

  padding-top: 13px;

  display: flex;

  justify-content: space-between;

  font-size: 8px;

  letter-spacing: .16em;

  color: #2f1d1d;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1100px) {

  .engagement-collection {
    padding-left: 40px;
    padding-right: 40px;
  }

  .engagement-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    row-gap: 55px;
  }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 800px) {

  .site-header {
    height: 68px;

    padding: 0 18px;

    grid-template-columns:
      1fr
      auto;
  }

  .main-nav {
    display: none;
  }

  .brand img {
    width: 120px;
  }


  .engagement-collection {
    padding:
      120px
      18px
      80px;
  }


  .collection-intro {
    display: block;

    margin-bottom: 50px;
  }

  .collection-eyebrow {
    margin-bottom: 15px;

    font-size: 9px;
  }

  .collection-intro h1 {
    font-size: 54px;

    line-height: .9;
  }

  .collection-description {
    max-width: 310px;

    margin-top: 25px;

    font-size: 13px;
  }


  .engagement-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    column-gap: 12px;

    row-gap: 42px;
  }


  .product-details {
    display: block;

    padding-top: 15px;
  }

  .product-details h2 {
    font-size: 13px;

    line-height: 1.05;
  }

  .product-details span {
    display: none;
  }


  footer {
    padding:
      80px
      18px
      25px;
  }

  .footer-brand {
    font-size: 19vw;
  }

  .footer-bottom {
    margin-top: 70px;

    flex-direction: column;

    gap: 12px;
  }

}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
  }

}