/* A warmer, literary voice than the fashion and studio demos. */
body { font-family: Candara, "Gill Sans", "Trebuchet MS", sans-serif; }
.vow-brand,
.enquire-link,
.hero-content h1,
.section-title h2,
.story-sticky h2,
.places h2,
.enquiry h2,
.opening blockquote,
.proof-letter blockquote,
.ceremony-row h3,
.text-link,
.story-scenes figcaption span,
.enquiry-note dd {
  font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
}

.section-title h2 { grid-column: 2; margin-top: 0; }
.ceremony-row h3,
.story-sticky h2,
.places-content h2,
.enquiry h2 { margin-top: 0; }

/* Keep each story caption in its own readable row. The image parallax used to
   paint over this row as the page moved, which made the copy appear clipped. */
.story-scenes figure {
  display: grid;
  grid-template-rows: auto minmax(64px, auto);
  isolation: isolate;
  overflow: hidden;
}

.story-scenes {
  gap: 72px;
}

/* Reveal the photograph, not the figure. This keeps the caption available
   throughout the entrance instead of clipping the complete figure box. */
.js .story-scenes figure[data-reveal="image"] {
  opacity: 1;
  clip-path: none;
  transform: none;
  transition: none;
}

.js .story-scenes figure[data-reveal="image"] img[data-parallax] {
  position: relative;
  z-index: 0;
  opacity: 0;
  clip-path: inset(9% 0);
  transform: scale(1.025) !important;
  transition: opacity .72s ease, clip-path .9s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1);
}

.js .story-scenes figure[data-reveal="image"].is-visible img[data-parallax] {
  opacity: 1;
  clip-path: inset(0);
  transform: none !important;
}

.story-scenes figcaption {
  position: relative;
  z-index: 2;
  align-items: center;
  min-height: 64px;
  padding: 16px 0;
  background: #263631;
}

@media (max-width: 980px) {
  .section-title h2 { grid-column: 1; }

  .hero-bottom a,
  .text-link,
  .vow-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 660px) {
  .story-scenes {
    gap: 52px;
  }

  .story-scenes figure:nth-child(2) {
    width: 100%;
  }

}