* {
  box-sizing: border-box;
}

:root {
  --black: #111111;
  --grey: #777777;
  --line: #e8e8e8;
  --white: #ffffff;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: "DM Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}


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

.header {
  width: 100%;

  padding: 42px 30px 0;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  font-family: "Ballet", cursive;

  font-size: clamp(4rem, 6vw, 6rem);

  line-height: 0.7;

  color: var(--black);

  text-decoration: none;

  transform: translateY(-6px);
}


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

.navigation {
  display: flex;

  gap: 30px;

  margin-top: 28px;

  font-size: 11px;

  letter-spacing: 0.08em;

  text-transform: lowercase;
}

.navigation a {
  position: relative;

  color: var(--black);

  text-decoration: none;

  padding-bottom: 5px;
}

.navigation a::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 1px;

  background: var(--black);

  transform: scaleX(0);

  transform-origin: right;

  transition:
    transform 0.25s ease;
}

.navigation a:hover::after,
.navigation a.active::after {
  transform: scaleX(1);

  transform-origin: left;
}


/* =========================
   SHOP
========================= */

.shop {
  width: 86vw;

  max-width: 1280px;

  margin: 0 auto;

  padding: 90px 0 130px;
}


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

.products {
  display: grid;

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

  gap:
    85px
    45px;
}


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

.product {
  min-width: 0;
}


/* =========================
   ARTWORK
========================= */

.artwork {
  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  isolation: isolate;
}


/* =========================
   TEMPORARY ARTWORK
========================= */

.artwork-one {
  background: #f4eadf;
}

.artwork-two {
  background: #f0dce8;
}

.artwork-three {
  background: #ddd9f2;
}


/* =========================
   ARTWORK SHAPES
========================= */

.shape {
  position: absolute;

  display: block;
}


/* AFTER HOURS */

.shape-one {
  width: 62%;
  height: 62%;

  left: 12%;
  top: 17%;

  border-radius:
    52% 48% 61% 39%
    /
    42% 57% 43% 58%;

  background: #244bd7;

  transform: rotate(-18deg);
}

.shape-two {
  width: 28%;
  height: 28%;

  right: 13%;
  bottom: 13%;

  border-radius: 50%;

  background: #ef704d;
}

.shape-three {
  width: 18%;
  height: 18%;

  right: 23%;
  top: 13%;

  background: #e8bf3d;

  transform: rotate(45deg);
}


/* VELVET */

.shape-four {
  width: 67%;
  height: 67%;

  left: 17%;
  top: 18%;

  border-radius:
    48% 52% 35% 65%
    /
    58% 39% 61% 42%;

  background: #b72865;

  transform: rotate(24deg);
}

.shape-five {
  width: 24%;
  height: 24%;

  left: 11%;
  bottom: 13%;

  border-radius: 50%;

  background: #e6b43f;
}


/* NOCTURNE */

.shape-six {
  width: 57%;
  height: 57%;

  left: 22%;
  top: 20%;

  border-radius: 50%;

  background: #4331ad;
}

.shape-seven {
  width: 30%;
  height: 30%;

  right: 11%;
  bottom: 11%;

  border-radius:
    50% 50% 42% 58%;

  background: #f0b63b;

  transform: rotate(-25deg);
}


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

.product-info {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

  padding-top: 15px;
}

.product h1 {
  margin: 0 0 9px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 18px;

  font-weight: 400;

  letter-spacing: -0.02em;

  text-transform: lowercase;
}


/* =========================
   LISTEN BUTTON
========================= */

.listen,
.buy {
  border: 0;

  padding: 0;

  background: transparent;

  cursor: pointer;

  color: var(--grey);

  font-size: 10px;

  letter-spacing: 0.07em;

  text-transform: lowercase;
}

.listen span {
  display: inline-block;

  margin-left: 4px;

  font-size: 7px;

  transition:
    transform 0.2s ease;
}

.listen:hover,
.buy:hover {
  color: var(--black);
}

.listen:hover span {
  transform:
    translateX(2px);
}


/* =========================
   PRICE + BUY
========================= */

.purchase {
  display: flex;

  align-items: center;

  gap: 17px;

  padding-top: 3px;
}

.price {
  font-size: 11px;
}

.buy {
  color: var(--black);

  border-bottom:
    1px solid var(--black);

  padding-bottom: 3px;
}


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

.footer {
  border-top:
    1px solid var(--line);

  margin:
    0 5vw;

  padding:
    24px 0 28px;

  display: flex;

  justify-content: space-between;

  color: var(--grey);

  font-size: 9px;

  letter-spacing: 0.05em;

  text-transform: lowercase;
}

.footer a {
  color: inherit;

  text-decoration: none;
}

.footer a:hover {
  color: var(--black);
}


/* =========================
   TERMS PAGE
========================= */

.terms-page {
  width: 100%;

  padding:
    100px 20px 130px;
}

.terms-copy {
  width: min(620px, 90vw);

  margin:
    0 auto;
}

.terms-copy .eyebrow {
  margin:
    0 0 15px;

  text-align: center;

  color: var(--grey);

  font-size: 9px;

  letter-spacing: 0.1em;

  text-transform: lowercase;
}

.terms-copy > h1 {
  margin:
    0 0 75px;

  text-align: center;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(34px, 5vw, 55px);

  font-weight: 400;

  letter-spacing: -0.04em;
}


/* =========================
   TERMS SECTIONS
========================= */

.terms-copy section {
  padding:
    28px 0;

  border-top:
    1px solid var(--line);

  text-align: center;
}

.terms-copy h2 {
  margin:
    0 0 15px;

  font-size: 10px;

  font-weight: 500;

  letter-spacing: 0.08em;

  text-transform: lowercase;
}

.terms-copy section p {
  margin: 0 auto;

  max-width: 560px;

  color: #444444;

  font-size: 13px;

  line-height: 1.9;
}


/* =========================
   BACK TO SHOP
========================= */

.back {
  margin:
    55px 0 0;

  text-align: center;

  font-size: 10px;
}

.back a {
  color: var(--black);

  text-decoration: none;

  border-bottom:
    1px solid var(--black);

  padding-bottom: 4px;
}


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

@media (max-width: 950px) {

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

    gap:
      70px
      35px;
  }

}


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

@media (max-width: 620px) {

  .header {
    padding:
      35px 20px 0;
  }

  .logo {
    font-size: 4rem;
  }

  .navigation {
    margin-top: 25px;

    gap: 22px;
  }

  .shop {
    width: 86vw;

    padding:
      70px 0 90px;
  }

  .products {
    grid-template-columns: 1fr;

    gap: 65px;
  }

  .product-info {
    padding-top: 14px;
  }

  .footer {
    margin:
      0 7vw;
  }

  .terms-page {
    padding:
      70px 20px 90px;
  }

  .terms-copy {
    width: 100%;
  }

  .terms-copy > h1 {
    margin-bottom: 55px;
  }

}

.single-product {
  width: 100%;
  display: flex;
  justify-content: center;
}

.single-product .product {
  width: min(620px, 100%);
}

.nocturnal-artwork {
  background: #f4eadf;
}

.nocturnal-artwork img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (max-width: 620px) {

  .single-product .product {
    width: 100%;
  }

}