/* -------------------------------
   COLOURS
-------------------------------- */

:root {
  --lavender: #eee7f7;
  --lavender-dark: #d6c2eb;
  --pink: #f4dbe8;
  --pink-dark: #dfa9c5;

  --plum: #2d1b31;
  --soft-plum: #58405d;

  --blood: #8f1931;
  --blood-dark: #651020;

  --cream: #fffafd;
}


/* -------------------------------
   BASIC PAGE
-------------------------------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;

  background:
    radial-gradient(
      circle at top,
      #f8e8f2 0%,
      var(--lavender) 45%,
      #ddd0ea 100%
    );

  color: var(--plum);

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

  min-height: 100vh;
}


/* -------------------------------
   MAIN CONTAINER
-------------------------------- */

.page {
  width: min(90%, 760px);

  margin: 60px auto;

  padding: 45px;

  background: rgba(255, 250, 253, 0.88);

  border: 1px solid var(--pink-dark);

  box-shadow:
    0 0 0 6px rgba(255,255,255,0.25),
    0 16px 50px rgba(53, 28, 60, 0.15);

  border-radius: 18px;
}


/* -------------------------------
   HERO
-------------------------------- */

.hero {
  text-align: center;

  padding:
    20px
    10px
    35px;
}

.moon {
  color: var(--blood);

  font-size: 32px;

  margin-bottom: 8px;
}

.eyebrow {
  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 3px;

  color: var(--soft-plum);
}

h1 {
  margin:
    5px
    0
    10px;

  font-size: clamp(
    55px,
    11vw,
    90px
  );

  line-height: 1;

  font-weight: normal;

  letter-spacing: -2px;
}

.tagline {
  color: var(--soft-plum);

  font-style: italic;

  font-size: 17px;

  line-height: 1.6;
}

.tagline span {
  display: block;

  color: var(--blood);
}

.tiny-divider {
  margin-top: 22px;

  letter-spacing: 8px;

  color: var(--blood);
}


/* -------------------------------
   CARDS
-------------------------------- */

.card {
  margin: 24px 0;

  padding: 27px;

  background: linear-gradient(
    145deg,
    rgba(244,219,232,0.58),
    rgba(238,231,247,0.5)
  );

  border:
    1px solid
    var(--lavender-dark);

  border-radius: 14px;
}

.card h2 {
  margin-top: 0;

  color: var(--blood);

  font-size: 24px;

  font-weight: normal;

  font-style: italic;
}

.card p {
  line-height: 1.8;

  font-size: 16px;
}


/* -------------------------------
   CURRENTLY
-------------------------------- */

.current-grid {
  display: grid;

  gap: 12px;
}

.current-item {
  display: grid;

  grid-template-columns:
    140px
    1fr;

  gap: 15px;

  padding-bottom: 10px;

  border-bottom:
    1px dotted
    var(--pink-dark);
}

.label {
  color: var(--blood);

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 1px;
}

.answer {
  color: var(--soft-plum);
}

.blood {
  color: var(--blood);

  font-style: italic;
}


/* -------------------------------
   NAVIGATION
-------------------------------- */

.link-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 14px;

  margin-top: 20px;
}

.site-link {
  display: flex;

  align-items: center;

  gap: 10px;

  padding: 18px;

  color: var(--plum);

  text-decoration: none;

  background: rgba(
    255,
    250,
    253,
    0.8
  );

  border:
    1px solid
    var(--pink-dark);

  border-radius: 10px;

  transition:
    0.2s ease;
}

.site-link:hover {
  color: white;

  background: var(--blood);

  transform:
    translateY(-3px);

  box-shadow:
    0 6px 15px
    rgba(101,16,32,0.2);
}

.icon {
  font-size: 20px;
}

.coming-soon {
  margin-bottom: 0;

  text-align: center;

  font-size: 13px !important;

  font-style: italic;

  color: var(--soft-plum);
}


/* -------------------------------
   QUOTE
-------------------------------- */

.quote {
  padding: 55px 10px;

  text-align: center;
}

.quote p {
  margin:
    15px
    0;

  font-size: 26px;

  font-style: italic;
}

.ornament {
  color: var(--blood);

  letter-spacing: 5px;
}


/* -------------------------------
   FOOTER
-------------------------------- */

footer {
  margin-top: 25px;

  text-align: center;

  color: var(--soft-plum);

  font-size: 12px;

  line-height: 1.8;
}

.footer-symbols {
  color: var(--blood);

  letter-spacing: 5px;

  font-size: 15px;
}


/* -------------------------------
   MOBILE
-------------------------------- */

@media (max-width: 600px) {

  .page {
    width: 94%;

    margin:
      20px
      auto;

    padding:
      30px
      20px;
  }

  .link-grid {
    grid-template-columns: 1fr;
  }

  .current-item {
    grid-template-columns: 1fr;

    gap: 4px;
  }

}
}