/* =========================================================
   FOLIO & KEY
   COMING SOON V1
   ========================================================= */

* {
  box-sizing:
    border-box;
}


html,
body {
  margin:
    0;

  min-height:
    100%;
}


body {
  min-height:
    100vh;

  overflow-x:
    hidden;

  background:
    radial-gradient(
      circle at 50% -5%,
      rgba(76,105,78,.30),
      transparent 34rem
    ),
    radial-gradient(
      circle at 80% 95%,
      rgba(123,87,42,.14),
      transparent 28rem
    ),
    linear-gradient(
      180deg,
      #07130d 0%,
      #0a1a12 55%,
      #050b08 100%
    );

  color:
    #eee7da;

  font-family:
    "Noto Naskh Arabic",
    Tahoma,
    Arial,
    sans-serif;
}


.coming-soon-shell {
  min-height:
    100vh;

  display:
    grid;

  place-items:
    center;

  padding:
    30px 20px;
}


.coming-soon-card {
  position:
    relative;

  width:
    min(620px,100%);

  padding:
    clamp(44px,8vw,72px)
    clamp(26px,7vw,58px);

  text-align:
    center;

  border:
    1px solid
    rgba(205,174,105,.26);

  border-radius:
    28px;

  background:
    rgba(7,22,15,.78);

  box-shadow:
    0 36px 100px
    rgba(0,0,0,.38);

  backdrop-filter:
    blur(12px);
}


.coming-soon-logo {
  display:
    block;

  width:
    min(280px,75%);

  max-height:
    92px;

  object-fit:
    contain;

  margin:
    0 auto;
}


.coming-soon-rule {
  width:
    52px;

  height:
    1px;

  margin:
    32px auto;

  background:
    rgba(210,179,109,.52);
}


.coming-soon-eyebrow,
.coming-soon-english-label {
  margin:
    0;

  color:
    #d2b36d;

  font-size:
    13px;

  font-weight:
    700;

  letter-spacing:
    .14em;
}


.coming-soon-card h1 {
  margin:
    14px 0 0;

  color:
    #f4ede1;

  font-family:
    "Amiri",
    "Noto Naskh Arabic",
    serif;

  font-size:
    clamp(38px,8vw,58px);

  font-weight:
    400;

  line-height:
    1.5;
}


.coming-soon-arabic {
  max-width:
    450px;

  margin:
    15px auto 0;

  color:
    rgba(238,231,218,.74);

  font-size:
    clamp(17px,3.5vw,20px);

  line-height:
    1.9;
}


.coming-soon-divider {
  width:
    70%;

  max-width:
    310px;

  height:
    1px;

  margin:
    36px auto;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(210,179,109,.28),
      transparent
    );
}


.coming-soon-english-label {
  font-family:
    Arial,
    sans-serif;

  font-size:
    11px;

  letter-spacing:
    .20em;
}


.coming-soon-card h2 {
  margin:
    13px auto 0;

  color:
    #f1eadd;

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

  font-size:
    clamp(28px,5vw,40px);

  font-weight:
    400;

  line-height:
    1.25;
}


.coming-soon-english {
  max-width:
    430px;

  margin:
    16px auto 0;

  color:
    rgba(238,231,218,.66);

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

  font-size:
    15px;

  line-height:
    1.7;
}


.coming-soon-monogram {
  width:
    54px;

  height:
    54px;

  margin:
    36px auto 0;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(210,179,109,.42);

  border-radius:
    50%;

  color:
    #d2b36d;

  font-family:
    Georgia,
    serif;

  font-size:
    12px;

  letter-spacing:
    .12em;
}


@media (max-width: 600px) {

  .coming-soon-shell {
    padding:
      18px 14px;
  }


  .coming-soon-card {
    padding:
      40px 22px;

    border-radius:
      22px;
  }


  .coming-soon-logo {
    width:
      min(245px,78%);
  }


  .coming-soon-divider {
    margin:
      30px auto;
  }

}