* {
      box-sizing: border-box;
    }


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

@font-face {
  font-family: "Cicero";
  src: url("/fonts/HamletCicero12.otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Tertia";
  src: url("/fonts/HamletTertia18.otf");
  font-weight: normal;
  font-style: normal;
}




    body {
      margin: 0;
      min-height: 100vh;
      font-family: Georgia, "Times New Roman", serif;
      color: #f4ead6;
      background:black; /* MAKE IT STARRY*/
      padding: 36px 18px 60px;


        background:
        linear-gradient(to bottom, rgba(10,10,15,0.9) 60%, rgba(10,10,15,0.95) 90%, rgba(10,10,15,1) 100%),
        url("/images/background.webp");
        background-size: cover;
        background-repeat: no-repeat;
    }

    .page {
      width: min(1200px, 100%);
      margin: 0 auto;
      display: grid;
      gap: 36px;
    }

    .page-title {
      text-align: center;
      margin: 0;
      font-size: clamp(2.2rem, 4vw, 4rem);
      letter-spacing: 0.06em;
      color: #d7b56d;
      text-transform: uppercase;
    }

    .page-subtitle {
      text-align: center;
      max-width: 760px;
      margin: -14px auto 0;
      color: #d7c3a2;
      line-height: 1.7;
      font-size: 1rem;
    }

    .gallery {
      display: grid;
      gap: 30px;
    }

    .theme-card {
      position: relative;
      padding: 24px;
      border-radius: 24px;
      overflow: hidden;
    }

    .theme-name {
      margin: 0 0 18px;
      font-size: 1.35rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .form-wrap {
      position: relative;
      width: 100%;
      padding: 34px;
      overflow: hidden;
    }

    h2 {
      margin: 0 0 10px;
      font-size: clamp(2rem, 4vw, 3.2rem);
      line-height: 1;
      letter-spacing: 0.03em;
      text-align: center;
    }

    .intro {
      font-size: 1.08rem;
      line-height: 1.85;
      margin: 0 0 28px;
      margin-bottom: 50px;
      margin-left: 30px;
      text-align: justify;
    }

    .dropcap {
      display: block;
      line-height: 0.1;
      padding-right: 12px;
      margin-top:20px;
      padding:40px;
      margin-bottom: 20px;
    font-size: 3rem;
      font-weight: 600;
      font-family: "Cicero", Georgia, serif;
    }


    form {
      display: grid;
      gap: 20px;
      font-family: Tertia;
    }

    .field {
      display: grid;
      gap: 6px;
      margin-bottom: 20px;
    }

    label {
      display: block;
      font-size: 1rem;
      margin-bottom: 10px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }



label {
  display: inline-flex; /* not full width flex */
  align-items: center;
  gap: 0px; /* much tighter */
  font-size: 1rem;
  margin-bottom: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;

  text-transform: uppercase; /*change to none*/
}

.label-initial {
  width: 28px;
  height: 28px;
  flex: 0 0 15px;
  display: inline-grid;
  place-items: center;
  font-family: "Cicero", Georgia, serif;
  font-size: 1.5rem;
  line-height: 1;
  color: #8f1c1c;
  text-shadow: 1px 1px 0 rgba(255, 223, 145, 0.5);
}






    input,
    textarea {
      width: 100%;
      font: inherit;
      padding: 14px 16px;
      outline: none;
      transition: 0.2s ease;
    }

    textarea {
      min-height: 150px;
      resize: vertical;
    }

    button {
      justify-self: start;
      padding: 12px 24px;
      font: inherit;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }

    button:hover {
      transform: translateY(-2px);
      filter: brightness(1.04);
    }

    .seal {
      margin-top: 6px;
      font-size: 0.92rem;
      font-style: italic;
      opacity: 0.9;
    }



  
    /* Antique Parchment */
    .parchment {
      background: #e0c286;
      border: 1px solid rgba(188, 157, 106, 0.24);
      box-shadow: 0 18px 44px rgba(0,0,0,0.18);
    }

    .parchment .form-wrap {
      background:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,0.34), transparent 22%),
        radial-gradient(circle at 80% 70%, rgba(145, 97, 44, 0.08), transparent 26%),
        linear-gradient(180deg, #f5e9c9 0%, #ead6ad 100%);
      border: 2px solid #8a6a3f;
      border-radius: 14px;
      box-shadow: 0 14px 36px rgba(44, 29, 10, 0.18);
      color: #3b2a16;
    }

    .parchment .form-wrap::before {
      content: "";
      position: absolute;
      top: 14px;
      right: 18px;
      font-size: 28px;
      color: rgba(123, 77, 28, 0.3);
    }

    .parchment h2,
    .parchment label {
      color: #4d3419;
    }

    .parchment .intro,
    .parchment .seal {
      color: #5c4121;
    }

        .parchment .dropcap {
      font-size: 5.4rem;
      color: #9f1f1f;
      text-shadow: 1px 1px 0 #d3ae68, 0 0 14px rgba(159, 31, 31, 0.22);
    }


    .parchment input,
    .parchment textarea {
      color: #3c2917;
      background: rgba(255, 249, 236, 0.76);
      border: 1.5px solid #8a6a3f;
      border-radius: 8px;
    }

    .parchment input::placeholder,
    .parchment textarea::placeholder {
      color: #86684a;
    }

    .parchment input:focus,
    .parchment textarea:focus {
      border-color: #a84d23;
      box-shadow: 0 0 0 4px rgba(168, 77, 35, 0.12);
    }

    .parchment button {
      color: #f9edd7;
      text-shadow: 1px 1px 0 #d3ae68, 0 0 14px rgba(159, 31, 31, 0.22);
      background: #9f1f1f;;
      border: 1px solid #6e4f2d;
      border-radius: 999px;
      box-shadow: 0 10px 22px rgba(106, 51, 22, 0.2);
      
    }





        .ornate-heading {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 100px;
}



.dropcap-box {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  position: relative;
  font-family: "Cicero", Georgia, serif;
  font-size: 10rem;
  line-height: 1;
  color: #7f1414;
  background:
    linear-gradient(180deg, rgba(255, 240, 205, 0.55), rgba(214, 177, 104, 0.35)),
    linear-gradient(135deg, #f4d58d 0%, #c7963e 45%, #8f6725 100%);
  border: 2px solid #7a5827;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 237, 190, 0.35),
    inset 0 0 18px rgba(122, 49, 24, 0.18),
    0 8px 18px rgba(55, 29, 9, 0.16);
  text-shadow:
    1px 1px 0 rgba(255, 223, 145, 0.7),
    0 0 10px rgba(159, 31, 31, 0.18);
}





.dropcap-box::before,
.dropcap-box::after {
  content: "✦";
  position: absolute;
  font-size: 0.95rem;
  color: #7f1414;
  opacity: 0.8;
  filter: drop-shadow(0 0 3px rgba(127, 20, 20, 0.4));
}

.dropcap-box::before {
  top: 8px;
  left: 10px;
}

.dropcap-box::after {
  right: 10px;
  bottom: 8px;
}

.heading-text {
  min-width: 0;
  flex: 1;
}

.heading-text h2 {
  margin: 6px 0 10px;
  text-align: left;
  line-height: 1;
  
  color:#8f1c1c;
}

.heading-text .intro {
  margin: 0;
  text-align: left;
  line-height: 1.8;
  font-size: 1.02rem;
}






.bell-icon {
    position: absolute;
      top: 14px;
      right: 18px;
      font-size: 2rem;
      color: rgba(123, 77, 28, 0.3);
        transform: scale(2);
}














.dropcap-box {
  /*DELETE FOR BOX*/
  font-size: 10rem;
  color: #8f1c1c;
  margin-top: 40px;



}



.heading-text h2 {
  
/*
  background: url("/images/background.webp") center center / cover no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
   */
}

.heading-text h2 {
  margin: 60px 0 0;
  text-align: left;
  line-height: 1;
  font-family: "Cicero", Georgia, serif;
  font-size: clamp(2.8rem, 5vw, 4rem);

  background:
    linear-gradient(rgba(255,255,255,0.04), rgba(120,30,30,0.10)),
    url("/images/background.webp");
  background-size: 180% auto;
  background-position: 0% 50%;
  background-repeat: repeat;

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;

animation: titleDrift 28s ease-in-out infinite;
}


@keyframes titleDrift {
  0% {
    background-position: 0% 50%, 0% 50%;
  }
  50% {
    background-position: 100% 50%, 100% 50%;
  }
  100% {
    background-position: 0% 50%, 0% 50%;
  }
}


@media (prefers-reduced-motion: reduce) {
  .heading-text h2 {
    animation: none;
  }
}









    
    @media (max-width: 700px) {
      .theme-card,
      .form-wrap {
        padding: 20px;
      }

      .dropcap {
        font-size: 4.4rem !important;
        padding-right: 10px;
      }

      button {
        width: 100%;
        justify-self: stretch;
      }


    .ornate-heading {
    gap: 0px;
    margin-bottom: 40px;
    }

    .dropcap-box {
      margin-left: -20px;
    width: 90px;
    height: 90px;
    font-size: 5rem;
    margin-top: 0px;

    background: none;
    border: none;
    box-shadow: none;
    }

    .heading-text h2 {
    margin-top: 50px;
    font-size: 2.8 rem;
    width: 100vh;
    word-break: break-word;
    }


        .parchment {
      margin-left: -20px;
      margin-right: -20px;
      overflow-x:hidden;
      background: #15064125;
      border: 1px solid rgba(255, 255, 255, 0);
      box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    }


  }