#hero {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 43%, rgba(255,255,255,.96) 0 18%, rgba(255,255,255,.38) 48%, transparent 72%),
    linear-gradient(145deg, #f8f3eb 0%, #fdfbf7 48%, #eee1cb 100%);
  text-align: center;
}

/* Fine paper grain, built in CSS so the cover remains fast and self-contained. */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .18;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(80,65,45,.13) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 80% 70%, rgba(80,65,45,.08) 0 1px, transparent 1px 5px);
  background-size: 17px 19px, 23px 29px;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Botanical engravings are real SVG elements for consistent rendering across browsers. */
.hero-botanical {
  position: absolute;
  z-index: 1;
  width: min(48vw, 235px);
  overflow: visible;
  opacity: .58;
  fill: rgba(138, 158, 133, .62);
  pointer-events: none;
}

.hero-botanical .botanical-stem,
.hero-botanical .botanical-branch {
  fill: none;
  stroke: var(--c-sage-dark);
  stroke-linecap: round;
}

.hero-botanical .botanical-stem { stroke-width: 1.8; }
.hero-botanical .botanical-branch { stroke-width: 1.2; }

.hero-botanical-top {
  top: -4.5rem;
  left: -4rem;
  transform: rotate(92deg) scale(.82);
  transform-origin: center;
  opacity: .4;
}

.hero-botanical-bottom {
  right: -2.5rem;
  bottom: -1.75rem;
  transform: rotate(-8deg);
}

.hero-arch {
  position: absolute;
  z-index: 1;
  top: clamp(1rem, 3vh, 2rem);
  bottom: clamp(1rem, 3vh, 2rem);
  left: 50%;
  width: min(calc(100% - 2rem), 520px);
  border: 1px solid rgba(170, 137, 78, .48);
  border-bottom: 0;
  border-radius: 48% 48% 12px 12px / 18% 18% 12px 12px;
  background:
    linear-gradient(rgba(170, 137, 78, .48), rgba(170, 137, 78, .48)) bottom left / calc(50% - 56px) 1px no-repeat,
    linear-gradient(rgba(170, 137, 78, .48), rgba(170, 137, 78, .48)) bottom right / calc(50% - 56px) 1px no-repeat;
  transform: translateX(-50%);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.24);
}

.hero-arch::before,
.hero-arch::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid var(--c-gold);
  background: var(--c-cream);
  transform: rotate(45deg);
}

.hero-arch::before { left: -4px; top: 42%; }
.hero-arch::after { right: -4px; top: 42%; }

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 470px);
  padding: clamp(1rem, 4vh, 3rem) 1.15rem 2.75rem;
  z-index: 2;
}

.hero-kicker {
  margin-bottom: clamp(1.5rem, 4vh, 2.4rem);
  font-family: var(--f-serif);
  font-size: clamp(.9rem, 3.8vw, 1.15rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-gold);
  animation: hero-fade .8s .05s ease both;
}

.hero-pre {
  max-width: 22rem;
  font-family: var(--f-serif);
  font-size: clamp(.86rem, 3.3vw, 1.02rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--c-dark-soft);
  animation: hero-fade .8s .2s ease both;
}

.hero-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: clamp(1.4rem, 4vh, 2.4rem) 0 clamp(1.2rem, 3.5vh, 2rem);
  font-family: var(--f-serif);
  font-size: clamp(2.8rem, 11.8vw, 6.2rem);
  font-weight: 400;
  line-height: .76;
  letter-spacing: -.055em;
  color: #273027;
  animation: hero-names-in 1s .38s cubic-bezier(.2,.8,.2,1) both;
}

#hero-heading:focus {
  outline: none;
}

.hero-names > span:first-child { transform: translateX(-.08em); }
.hero-names > span:last-child { transform: translateX(.02em); }

.hero-names .amp {
  position: relative;
  z-index: 1;
  margin: .22em 0 .09em;
  font-size: .48em;
  line-height: .8;
  font-style: italic;
  letter-spacing: 0;
  color: var(--c-gold);
  transform: none;
}

.hero-names .amp::before,
.hero-names .amp::after {
  content: '';
  position: absolute;
  top: 55%;
  width: clamp(2rem, 11vw, 4.5rem);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,169,110,.85));
}

.hero-names .amp::before { right: calc(100% + .55rem); }
.hero-names .amp::after { left: calc(100% + .55rem); transform: scaleX(-1); }

.hero-rule {
  display: flex;
  align-items: center;
  width: min(13rem, 58vw);
  gap: .7rem;
  color: var(--c-gold);
  font-size: .5rem;
  animation: hero-fade .8s .68s ease both;
}

.hero-rule::before,
.hero-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(201,169,110,.72);
}

.hero-date {
  margin-top: .95rem;
  animation: hero-fade .8s .78s ease both;
}

.hero-date time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  font-family: var(--f-serif);
  color: var(--c-dark);
}

.hero-date strong {
  min-width: 2.5rem;
  font-size: clamp(1.15rem, 4.5vw, 1.45rem);
  font-weight: 400;
}

.hero-date span {
  padding: 0 .8rem;
  border-left: 1px solid rgba(201,169,110,.62);
  border-right: 1px solid rgba(201,169,110,.62);
  font-size: .75rem;
  font-style: italic;
  letter-spacing: .08em;
}

.hero-location {
  margin-top: .5rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .23em;
  text-transform: uppercase;
  color: var(--c-sage-dark);
  animation: hero-fade .8s .88s ease both;
}

.hero-scroll {
  position: absolute;
  bottom: max(1.55rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  color: var(--c-gold);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  animation: hero-bounce 2.2s 1.4s ease infinite;
  z-index: 3;
}

.hero-scroll svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes hero-fade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-names-in {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hero-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

@media (max-height: 690px) {
  .hero-content { padding-top: .5rem; padding-bottom: 2rem; }
  .hero-kicker { margin-bottom: .85rem; }
  .hero-names { margin: .9rem 0; font-size: clamp(2.8rem, 12.5vh, 4.25rem); }
  .hero-date { margin-top: .65rem; }
  .hero-scroll { bottom: .8rem; }
}

@media (min-width: 768px) {
  .hero-arch { width: min(calc(100% - 4rem), 630px); }
  .hero-names { font-size: clamp(5.5rem, 8vw, 7rem); }
  .hero-botanical { width: 285px; }
  .hero-botanical-top { left: calc(50% - 390px); }
  .hero-botanical-bottom { right: calc(50% - 390px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-kicker,
  .hero-pre,
  .hero-names,
  .hero-rule,
  .hero-date,
  .hero-location,
  .hero-scroll { animation: none; }
}