@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fraunces:wght@600;700&family=Playfair+Display:ital,wght@1,500&family=Gochi+Hand&display=swap');

:root {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f8dc7a'/%3E%3Cstop offset='1' stop-color='%23d9a21b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 1L12.6 7.3L19.4 7.6L14.1 11.9L15.9 18.5L10 14.8L4.1 18.5L5.9 11.9L0.6 7.6L7.4 7.3Z' fill='url(%23g)' stroke='%23c48a14' stroke-width='0.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body, p, li, input, textarea {
  font-family: 'DM Sans', sans-serif;
}

/* Nav */
#nav a {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  color: #6b6b7b;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
}

#nav a:hover {
  color: #245283;
  border-bottom-color: #245283;
}

/* Hero background: cream / sky / sage stripes + gold stars */
#banner {
  background:
    var(--star) 5% 10% / 40px no-repeat,
    var(--star) 8% 52% / 28px no-repeat,
    var(--star) 4% 88% / 34px no-repeat,
    var(--star) 20% 94% / 22px no-repeat,
    var(--star) 33% 6% / 24px no-repeat,
    var(--star) 47% 30% / 30px no-repeat,
    var(--star) 49% 82% / 36px no-repeat,
    var(--star) 58% 6% / 22px no-repeat,
    var(--star) 66% 92% / 28px no-repeat,
    var(--star) 80% 4% / 24px no-repeat,
    var(--star) 96% 9% / 42px no-repeat,
    var(--star) 98% 48% / 28px no-repeat,
    var(--star) 93% 74% / 34px no-repeat,
    var(--star) 75% 95% / 22px no-repeat,
    repeating-linear-gradient(
      180deg,
      #fbf6ea 0px, #fbf6ea 40px,
      #e3eef7 40px, #e3eef7 80px,
      #e3ebdf 80px, #e3ebdf 120px
    );
}

/* Photo (same picture, thin navy border, lower and a bit right) */
#banner img {
  position: relative;
  top: 130px;
  left: 30px;
  border: 3px solid #245283;
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(36, 82, 131, 0.2);
}

/* Headline: both lines the same size */
#banner p {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 3.6em;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #3f5a45;
  margin-bottom: 0.5em;
}

#banner p .script {
  display: block;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1em;
  letter-spacing: 0;
  color: #245283;
  margin-bottom: 0.1em;
}

/* Paragraph as a taped paper note */
#banner h2 {
  position: relative;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 1.05em;
  line-height: 1.85;
  letter-spacing: 0;
  text-transform: none;
  color: #4a4a5a;
  background: #fffaf0;
  border-radius: 6px;
  padding: 1.6em 1.8em;
  max-width: 34em;
  transform: rotate(-1deg);
  box-shadow: 0 10px 24px rgba(36, 82, 131, 0.15);
  margin-bottom: 2.2em;
}

/* pink tape on the paragraph */
#banner h2::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 90px;
  height: 28px;
  margin-left: -45px;
  background: rgba(192, 105, 125, 0.5);
  transform: rotate(3deg);
}

/* Join Us! as a notebook-paper note with gingham tape */
#banner .button-large {
  position: relative;
  display: inline-block;
  height: auto;
  min-width: 10em;
  background:
    radial-gradient(circle at 14px 32%, #cfe0ef 5px, transparent 6px),
    radial-gradient(circle at 14px 72%, #cfe0ef 5px, transparent 6px),
    linear-gradient(90deg, transparent 38px, #7fa3c9 38px, #7fa3c9 40px, transparent 40px),
    repeating-linear-gradient(180deg, transparent 0px, transparent 25px, #cdd9ea 25px, #cdd9ea 26px),
    #fffaf0;
  color: #245283;
  border: 0;
  border-radius: 4px 10px 6px 12px;
  padding: 36px 2.2em 20px 3.4em;
  text-align: left;
  text-shadow: none;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.7em;
  line-height: 26px;
  letter-spacing: 0.01em;
  transform: rotate(-2deg);
  box-shadow: 0 10px 22px rgba(36, 82, 131, 0.22);
  transition: transform 0.2s, box-shadow 0.2s;
}

/* sage gingham tape strip */
#banner .button-large::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  width: 110px;
  height: 30px;
  margin-left: -55px;
  transform: rotate(-4deg);
  background:
    repeating-linear-gradient(0deg, rgba(63, 90, 69, 0.4) 0px, rgba(63, 90, 69, 0.4) 8px, transparent 8px, transparent 16px),
    repeating-linear-gradient(90deg, rgba(63, 90, 69, 0.4) 0px, rgba(63, 90, 69, 0.4) 8px, transparent 8px, transparent 16px),
    #eef3ea;
  clip-path: polygon(0 0, 4% 15%, 0 30%, 4% 45%, 0 60%, 4% 75%, 0 100%, 100% 100%, 96% 85%, 100% 70%, 96% 55%, 100% 40%, 96% 25%, 100% 0);
}

/* gold star sticker */
#banner .button-large::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 46px;
  height: 46px;
  background: var(--star) no-repeat center / contain;
  transform: rotate(12deg);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.2));
}

#banner .button-large:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 16px 28px rgba(36, 82, 131, 0.28);
}

/* Black ink arrow + "click here!" pointing at the button */
#banner .join-arrow {
  display: inline-block;
  position: relative;
  margin-left: 100px;
  vertical-align: middle;
  white-space: nowrap;
  font-family: 'Gochi Hand', cursive;
  font-size: 1.6em;
  color: #1a1a1a;
  transform: rotate(-4deg);
}

#banner .join-arrow::before {
  content: "";
  position: absolute;
  left: -72px;
  top: 50%;
  width: 62px;
  height: 42px;
  margin-top: -24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath d='M58 12 C42 2 20 8 6 23' fill='none' stroke='%231a1a1a' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M17 20 L6 23 L9 11' fill='none' stroke='%231a1a1a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Team page: Meet the Team intro ---------- */
.team-intro {
  background: #fffaf0;
  border: 1px solid #efe3c8;
  border-radius: 14px;
  padding: 2.2em 2.6em 2em;
  box-shadow: 0 10px 24px rgba(36, 82, 131, 0.12);
}

.team-intro .team-title {
  font-family: 'Gochi Hand', cursive;
  font-weight: 400;
  font-size: 3.4em;
  line-height: 1.1;
  letter-spacing: 0;
  color: #3f5a45;
  margin: 0 0 0.3em;
}

.team-intro p {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2em;
  line-height: 1.9;
  color: #4a4a5a;
  margin: 0;
}

/* gold star divider */
.team-intro .star-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 1.6em;
}

.team-intro .star-divider span {
  display: block;
  width: 26px;
  height: 26px;
  background: var(--star) no-repeat center / contain;
}

.team-intro .star-divider span:nth-child(2) {
  width: 38px;
  height: 38px;
  transform: rotate(8deg);
}