.intro {
  --cover-gold: #d9ad57;
  --cover-ivory: #f7f0df;
  --cover-green: #102b1a;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 34%, rgba(45, 83, 52, .34), transparent 39%),
    linear-gradient(145deg, #0d2818, #14351f 50%, #0d2818);
  min-height: 100svh;
  min-height: 100dvh;
}

.intro-grain {
  z-index: -4;
  opacity: .21;
  mix-blend-mode: soft-light;
}

.intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 11rem rgba(3, 15, 8, .48);
}

.intro-card {
  width: min(96vw, 58rem);
  min-height: 100svh;
  padding: clamp(1.3rem, 5.4vh, 3.2rem) 1.5rem clamp(1.25rem, 4vh, 2.4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cover-ganpati-stage {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: clamp(11.5rem, 17.2vw, 15.4rem);
  aspect-ratio: 1099 / 1431;
  margin: 0 auto clamp(.85rem, 1.9vh, 1.15rem);
  overflow: hidden;
  clip-path: ellipse(47.2% 48.6% at 50% 50%);
  filter: drop-shadow(0 .9rem 1.8rem rgba(0, 0, 0, .2));
  pointer-events: none;
}

.cover-ganpati {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.intro-card > .kicker {
  flex: 0 0 auto;
  margin: 0 0 clamp(.8rem, 1.7vh, 1.05rem);
  color: rgba(247, 240, 223, .95);
  font-size: clamp(.65rem, 1.15vw, .82rem);
  font-weight: 600;
  letter-spacing: .31em;
  text-shadow: 0 2px 16px rgba(5, 15, 9, .5);
}

.intro-card > .seal {
  position: relative;
  flex: 0 0 auto;
  width: clamp(5.8rem, 8.8vw, 7.4rem);
  height: clamp(5.8rem, 8.8vw, 7.4rem);
  margin: 0 auto clamp(1.05rem, 2.4vh, 1.55rem);
  border: 1px solid rgba(217, 173, 87, .96);
  color: var(--cover-ivory);
  font-size: clamp(1.45rem, 2.25vw, 1.9rem);
  animation: none;
  box-shadow: 0 0 0 1px rgba(217, 173, 87, .08) inset;
}

.intro-card > .seal::before,
.intro-card > .seal::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(4.25rem, 8.6vw, 7.2rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 173, 87, .92));
}

.intro-card > .seal::before {
  right: calc(100% + .85rem);
}

.intro-card > .seal::after {
  left: calc(100% + .85rem);
  transform: scaleX(-1);
}

.intro-card > .seal i {
  color: var(--cover-gold);
  font-size: .7rem;
}

.intro-card > h1 {
  z-index: 2;
  flex: 0 0 auto;
  margin: 0;
  color: var(--cover-ivory);
  font-size: clamp(5.2rem, 9.4vw, 8rem);
  line-height: .73;
  letter-spacing: -.028em;
  text-shadow: 0 4px 28px rgba(5, 15, 9, .36);
}

.intro-card > h1 > span {
  display: block;
}

.intro-card .name-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: .13em;
}

.intro-card .name-line em {
  margin-right: .18em;
  color: var(--cover-gold);
  font-family: Italiana, serif;
  font-size: .48em;
  font-style: normal;
}

.intro-card .name-line > span {
  display: inline-block;
}

.intro-card > p.cover-date {
  z-index: 2;
  flex: 0 0 auto;
  margin: clamp(1.15rem, 2.5vh, 1.6rem) 0 clamp(.95rem, 2vh, 1.25rem);
  color: rgba(247, 240, 223, .84);
  font-size: clamp(.68rem, 1.2vw, .83rem);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: none;
  text-shadow: 0 2px 14px rgba(5, 15, 9, .6);
}

.intro-card > p.cover-date i {
  padding-inline: .45rem;
  color: var(--cover-gold);
  font-style: normal;
}

.intro-card > .pill {
  z-index: 3;
  flex: 0 0 auto;
  min-width: min(100%, 20rem);
  padding: .9rem 1.5rem;
  border-color: rgba(217, 173, 87, .9);
  color: rgba(247, 240, 223, .97);
  background: rgba(9, 31, 17, .18);
  box-shadow: 0 .75rem 2rem rgba(4, 15, 9, .14);
  backdrop-filter: blur(2px);
  font-weight: 600;
  animation: invitation-pulse 1.8s ease-in-out infinite;
}

.intro-card > .pill span {
  display: inline-block;
  margin-left: clamp(2rem, 5vw, 3.6rem);
  font-size: 1.35rem;
  line-height: 0;
  vertical-align: -.08em;
  animation: invitation-arrow 1.25s ease-in-out infinite;
}

.intro-card > .pill:hover,
.intro-card > .pill:focus-visible {
  color: #102b1a;
  background: var(--cover-gold);
  outline: none;
}

@media (max-width: 760px) {
  .intro-card {
    width: 100%;
    height: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.1rem, env(safe-area-inset-bottom));
    justify-content: space-between;
    gap: clamp(1rem, 2.7vh, 1.8rem);
  }

  .cover-ganpati-stage {
    width: clamp(9.8rem, 40vw, 12.4rem);
    margin-bottom: clamp(.65rem, 1.5vh, .9rem);
  }

  .intro-card > .kicker {
    width: min(88vw, 28rem);
    margin-bottom: clamp(.65rem, 1.4vh, .85rem);
    font-size: clamp(.58rem, 2.6vw, .71rem);
    line-height: 1.5;
    letter-spacing: .2em;
  }

  .intro-card > .seal {
    width: clamp(4.8rem, 20vw, 5.8rem);
    height: clamp(4.8rem, 20vw, 5.8rem);
    margin-bottom: clamp(.85rem, 1.9vh, 1.1rem);
  }

  .intro-card > .seal::before,
  .intro-card > .seal::after {
    width: clamp(2.7rem, 13vw, 4rem);
  }

  .intro-card > .seal::before {
    right: calc(100% + .55rem);
  }

  .intro-card > .seal::after {
    left: calc(100% + .55rem);
  }

  .intro-card > h1 {
    font-size: clamp(4.25rem, 19vw, 6.2rem);
  }

  .intro-card > p.cover-date {
    max-width: 92vw;
    margin: clamp(.85rem, 1.9vh, 1.1rem) 0;
    font-size: clamp(.62rem, 2.8vw, .75rem);
    line-height: 1.5;
    letter-spacing: .1em;
  }

  .intro-card > .pill {
    width: min(88vw, 23rem);
    min-width: 0;
    padding: .95rem 1.25rem;
    font-size: .72rem;
    letter-spacing: .16em;
  }
}

@media (max-height: 720px) and (orientation: portrait) {
  .intro-card {
    justify-content: space-between;
    gap: .45rem;
    padding-top: max(.65rem, env(safe-area-inset-top));
    padding-bottom: max(.7rem, env(safe-area-inset-bottom));
  }

  .cover-ganpati-stage {
    width: clamp(7.7rem, 30vw, 9.2rem);
    margin-bottom: .45rem;
  }

  .intro-card > .kicker {
    margin-bottom: .45rem;
    font-size: .59rem;
  }

  .intro-card > .seal {
    width: 4.4rem;
    height: 4.4rem;
    margin-bottom: .65rem;
  }

  .intro-card > h1 {
    font-size: clamp(3.8rem, 17vw, 5rem);
  }

  .intro-card > p.cover-date {
    margin: .65rem 0;
  }

  .intro-card > .pill {
    padding-block: .7rem;
  }
}

/* Keep the complete cover visible in short, wide tablet viewports (for
   example, iPad landscape inside Safari or the ChatGPT site preview). */
@media (min-width: 761px) and (max-height: 900px) and (orientation: landscape) {
  .intro-card {
    width: min(96vw, 58rem);
    min-height: 100svh;
    min-height: 100dvh;
    padding: max(.75rem, env(safe-area-inset-top)) 1.5rem max(.9rem, env(safe-area-inset-bottom));
    justify-content: center;
  }

  .cover-ganpati-stage {
    width: clamp(8.5rem, 22vh, 11.5rem);
    margin-bottom: clamp(.35rem, 1vh, .6rem);
  }

  .intro-card > .kicker {
    margin-bottom: clamp(.35rem, 1vh, .6rem);
    font-size: clamp(.58rem, 1.35vh, .72rem);
  }

  .intro-card > .seal {
    width: clamp(4.35rem, 10.5vh, 5.35rem);
    height: clamp(4.35rem, 10.5vh, 5.35rem);
    margin-bottom: clamp(.55rem, 1.4vh, .85rem);
    font-size: clamp(1.15rem, 3.2vh, 1.5rem);
  }

  .intro-card > h1 {
    font-size: clamp(4.2rem, 11.5vh, 5.8rem);
  }

  .intro-card > p.cover-date {
    margin: clamp(.65rem, 1.7vh, .95rem) 0;
    font-size: clamp(.64rem, 1.45vh, .76rem);
  }

  .intro-card > .pill {
    padding: .72rem 1.4rem;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .intro-card {
    width: min(96vw, 68rem);
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(11rem, 20rem) minmax(23rem, 1fr);
    grid-template-areas:
      "ganpati tagline"
      "ganpati seal"
      "ganpati names"
      "ganpati date"
      "ganpati button";
    column-gap: clamp(1.5rem, 5vw, 4rem);
    align-content: center;
    padding-block: 1rem;
  }

  .cover-ganpati-stage {
    grid-area: ganpati;
    align-self: center;
    width: min(18rem, 31vw);
    margin: 0;
  }

  .intro-card > .kicker { grid-area: tagline; }
  .intro-card > .seal { grid-area: seal; justify-self: center; }
  .intro-card > h1 { grid-area: names; font-size: clamp(3.8rem, 16vh, 6rem); }
  .intro-card > p.cover-date { grid-area: date; }
  .intro-card > .pill { grid-area: button; justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-card > .pill,
  .intro-card > .pill span {
    animation: none;
    transition: none;
  }
}

@keyframes invitation-pulse {
  0%, 100% {
    border-color: rgba(217, 173, 87, .72);
    background: rgba(9, 31, 17, .18);
    box-shadow: 0 .75rem 2rem rgba(4, 15, 9, .14), 0 0 0 rgba(217, 173, 87, 0);
  }
  50% {
    border-color: rgba(231, 194, 117, 1);
    background: rgba(217, 173, 87, .13);
    box-shadow: 0 .75rem 2rem rgba(4, 15, 9, .18), 0 0 1.35rem rgba(217, 173, 87, .28);
  }
}

@keyframes invitation-arrow {
  0%, 100% { transform: translateX(0); opacity: .72; }
  50% { transform: translateX(.35rem); opacity: 1; }
}