/* ================================
   BASE
================================ */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: #efeee9;
  color: #111;

  font-family: "DM Sans", sans-serif;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}


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

.page {
  width: min(100%, 560px);

  margin: 0 auto;

  padding:
    24px
    18px
    40px;
}


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

.brand {
  padding-top: 6px;
}

.brand-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 25px;

  font-weight: 600;

  letter-spacing: -1.4px;
}

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

  gap: 7px;

  font-size: 9px;

  letter-spacing: 1.3px;
}

.status-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #111;
}


/* ================================
   HERO
================================ */

.hero-copy {
  margin-top: 64px;
}

.hero-copy h1 {
  margin: 0;

  font-size: clamp(
    58px,
    16vw,
    90px
  );

  line-height: 0.86;

  font-weight: 500;

  letter-spacing: -5px;
}

.hero-copy p {
  width: 82%;

  max-width: 390px;

  margin:
    30px
    0
    0;

  font-size: 14px;

  line-height: 1.55;

  color: #62625e;
}


/* ================================
   LINKS
================================ */

.links {
  margin-top: 56px;
}

.link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 74px;

  border-top: 1px solid #bbbcb6;

  text-decoration: none;

  transition:
    padding 0.2s ease,
    opacity 0.2s ease;
}

.link-card:last-child {
  border-bottom:
    1px solid #bbbcb6;
}

.link-card > div {
  display: flex;

  align-items: center;

  gap: 22px;
}

.link-number {
  font-size: 9px;

  color: #878782;
}

.link-title {
  font-size: 17px;

  letter-spacing: -0.3px;
}

.arrow {
  font-size: 22px;

  transition:
    transform 0.2s ease;
}

.link-card:hover {
  padding-left: 8px;
}

.link-card:hover .arrow {
  transform:
    translate(
      3px,
      -3px
    );
}


/* ================================
   FEATURED
================================ */

.featured {
  margin-top: 72px;
}

.featured-label {
  display: flex;

  justify-content: space-between;

  margin-bottom: 11px;

  font-size: 8px;

  letter-spacing: 1.2px;
}


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

.product-visual {
  position: relative;

  display: block;

  height: 420px;

  overflow: hidden;

  text-decoration: none;

  border-radius: 5px;

  background:
    radial-gradient(
      circle at 50% 40%,
      #f4f3ee 0%,
      #deddd8 60%,
      #cecdc7 100%
    );
}


/* subtle grid */

.visual-grid {
  position: absolute;

  inset: 0;

  opacity: 0.2;

  background-image:
    linear-gradient(
      rgba(0,0,0,.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.08) 1px,
      transparent 1px
    );

  background-size:
    32px 32px;
}


/* ================================
   ABSTRACT 3D OBJECT
================================ */

.product-object {
  position: absolute;

  width: 240px;
  height: 210px;

  top: 51%;
  left: 50%;

  transform:
    translate(
      -50%,
      -50%
    )
    rotate(-7deg);
}

.object-box {
  position: absolute;

  width: 165px;
  height: 150px;

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      #2d2d2c,
      #080808
    );

  box-shadow:
    0 28px 45px
      rgba(0,0,0,.22),

    inset
      0 1px
      1px
      rgba(255,255,255,.12);
}


/* back box */

.box-back {
  top: 8px;
  left: 60px;

  opacity: 0.83;

  transform:
    rotate(7deg);
}


/* front box */

.box-front {
  top: 35px;
  left: 4px;

  z-index: 2;
}


/* opening */

.box-opening {
  position: absolute;

  width: 100px;
  height: 18px;

  bottom: 15px;
  left: 32px;

  border-radius:
    20px
    20px
    5px
    5px;

  background: #e9e8e3;
}


/* lid */

.object-lid {
  position: absolute;

  width: 170px;
  height: 25px;

  left: 12px;
  top: 0;

  border-radius: 13px;

  background:
    linear-gradient(
      to bottom,
      #333,
      #0b0b0b
    );

  transform:
    rotate(-13deg)
    translateY(-24px);

  box-shadow:
    0 15px
    24px
    rgba(0,0,0,.2);
}


/* ================================
   VISUAL DETAILS
================================ */

.visual-text {
  position: absolute;

  bottom: 14px;
  left: 15px;

  font-size: 8px;

  letter-spacing: 1.2px;
}


/* labels */

.floating-label {
  position: absolute;

  padding:
    7px
    11px;

  border:
    1px solid
    rgba(0,0,0,.1);

  border-radius: 100px;

  background:
    rgba(
      255,
      255,
      255,
      .5
    );

  backdrop-filter:
    blur(10px);

  font-size: 8px;

  letter-spacing: 1.1px;
}

.label-one {
  top: 22px;
  right: 20px;
}

.label-two {
  bottom: 50px;
  right: 20px;
}


/* arrow inside visual */

.visual-arrow {
  position: absolute;

  top: 14px;
  left: 14px;

  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    rgba(
      255,
      255,
      255,
      .55
    );

  backdrop-filter:
    blur(10px);

  font-size: 16px;

  opacity: 0;

  transform:
    scale(.8);

  transition:
    opacity .2s ease,
    transform .2s ease;
}

.product-visual:hover .visual-arrow {
  opacity: 1;

  transform:
    scale(1);
}


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

.featured-info {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin-top: 21px;
}

.object-category {
  font-size: 8px;

  letter-spacing: 1.25px;

  color: #85857f;
}

.featured-info h2 {
  margin:
    7px
    0
    9px;

  font-size: 29px;

  font-weight: 500;

  letter-spacing: -1.4px;
}

.featured-info p {
  max-width: 340px;

  margin: 0;

  color: #666661;

  font-size: 13px;

  line-height: 1.55;
}


/* ================================
   CIRCLE BUTTON
================================ */

.circle-button {
  flex-shrink: 0;

  width: 48px;
  height: 48px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #111;

  color: #fff;

  text-decoration: none;

  font-size: 20px;

  transition:
    transform .25s ease;
}

.circle-button:hover {
  transform:
    rotate(45deg);
}


/* ================================
   STUDIO NOTE
================================ */

.studio-note {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  margin-top: 82px;

  padding:
    30px
    0;

  border-top:
    1px solid #bbbcb6;

  border-bottom:
    1px solid #bbbcb6;
}

.studio-symbol {
  font-size: 23px;
}

.studio-note p {
  width: 70%;

  margin: 0;

  font-size: 31px;

  line-height: 1.04;

  letter-spacing: -1.6px;
}


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

footer {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin-top: 30px;

  color: #777771;

  font-size: 8px;

  letter-spacing: 1.1px;
}


/* ================================
   RESPONSIVE
================================ */

@media (max-width: 420px) {

  .page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-copy {
    margin-top: 58px;
  }

  .hero-copy h1 {
    letter-spacing: -4px;
  }

  .hero-copy p {
    width: 92%;
  }

  .product-visual {
    height: 380px;
  }

  .product-object {
    transform:
      translate(
        -50%,
        -50%
      )
      rotate(-7deg)
      scale(.9);
  }

  .studio-note p {
    font-size: 27px;
  }

}


/* ================================
   VERY SMALL PHONES
================================ */

@media (max-width: 340px) {

  .hero-copy h1 {
    font-size: 52px;

    letter-spacing: -3px;
  }

  .product-visual {
    height: 340px;
  }

  .featured-info h2 {
    font-size: 25px;
  }

}