:root {
  --burnt-orange: #a95312;
  --amber: #df8328;
  --burgundy: #750417;
  --peach: #f6d9b8;
  --sand: #e9c69b;
  --backdrop: #2b1409;

  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-script: "Mrs Saint Delafield", "Snell Roundhand", cursive;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--backdrop);
  -webkit-font-smoothing: antialiased;
}

.program {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
}

/* ---------- Shared page frame ----------
   Everything inside a sheet is sized in cqw (1cqw = 1% of the page width),
   so each page scales as one piece, like a printed page. */

.sheet {
  container-type: inline-size;
  position: relative;
  display: grid;
  width: min(100%, 780px);
  aspect-ratio: 1414 / 2000;
  overflow: hidden;
  background: var(--burnt-orange);
}

/* ---------- Cover ---------- */

.cover {
  grid-template-columns: 54.3fr 5.7fr 40fr;
}

.cover__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding-top: 5.5cqw;
  background: var(--burnt-orange);
  color: var(--peach);
  text-align: center;
}

.celebrating {
  margin: 0;
  font-family: var(--font-script);
  font-size: 12cqw;
  line-height: 1;
  color: var(--peach);
}

.names {
  margin: 4.5cqw 0 0;
  font-family: var(--font-serif);
  font-size: 8.6cqw;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--peach);
}

.names span {
  display: block;
  white-space: nowrap;
}

.divider {
  width: 41cqw;
  height: auto;
  margin-top: 6cqw;
}

.date {
  margin: 4.5cqw 0 0;
  font-family: var(--font-serif);
  font-size: 5.2cqw;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.14em;
  color: var(--sand);
}

/* lighter orange leaf, cropped by the bottom of the page */
.leaf {
  position: absolute;
  left: 11cqw;
  bottom: -6cqw;
  width: 27cqw;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.cover__stripe {
  background: var(--amber);
}

.cover__photo {
  position: relative;
  overflow: hidden;
}

.cover__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% top;
}

/* warm wash so the photo sits in the orange palette */
.cover__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--burnt-orange);
  mix-blend-mode: soft-light;
  opacity: 0.25;
  pointer-events: none;
}

/* ---------- Order of service ---------- */

.order {
  grid-template-columns: 84.5fr 15.5fr;
}

.order__panel {
  padding: 6.5cqw 0 0 7.5cqw;
  color: var(--peach);
}

.order__title {
  margin: 0;
  font-family: var(--font-script);
  font-size: 9cqw;
  line-height: 1;
  color: var(--sand);
  padding-right: 7.5cqw;
}

.order__rule {
  display: block;
  width: 60cqw;
  height: auto;
  margin: 3cqw 0 5cqw;
}

.order__list {
  margin: 0;
  padding-right: 8cqw;
  font-family: var(--font-serif);
  font-size: 4.3cqw;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: 1.35;
}

.order__list p {
  margin: 0 0 3.2cqw;
}

/* ---------- Shared leaf stripe (order + photos pages) ---------- */

.side-stripe {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 5cqw;
  padding: 6.5cqw 0;
  background: var(--amber);
}

.side-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62%;
  flex: 1 1 0;
}

.side-box img {
  width: 100%;
  height: auto;
}

/* ---------- Shared "photo behind text" panel (photos + reception pages) ---------- */

.photos,
.reception,
.thanks {
  grid-template-columns: 84.5fr 15.5fr;
}

.page__panel {
  position: relative;
  overflow: hidden;
  padding: 6cqw 7cqw 6cqw 7.5cqw;
  color: var(--peach);
}

.page__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photos .page__bg {
  object-position: 78% 22%;
}

.reception .page__bg {
  object-position: 50% 22%;
}

.thanks .page__bg {
  object-position: 50% 30%;
}

/* nearly opaque: this page reads as a flat panel, the photo just breaks up the color */
.thanks .page__wash {
  opacity: 0.80;
}

.page__wash {
  position: absolute;
  inset: 0;
  background: var(--burnt-orange);
  opacity: 0.80;
}

.page__content {
  position: relative;
}

.page__title {
  margin: 0;
  font-family: var(--font-script);
  font-size: 7.4cqw;
  line-height: 1;
  color: var(--sand);
}

.page__rule {
  display: block;
  width: 55cqw;
  height: auto;
  margin: 2.4cqw 0 3.6cqw;
}

.page__list {
  margin: 0;
  padding: 0;
  font-family: var(--font-serif);
  font-size: 2.85cqw;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: 1.25;
}

.page__list p {
  margin: 0 0 1.5cqw;
}

/* ---------- Thank you ---------- */

.thanks .page__title {
  font-size: 10cqw;
}

.thanks__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* plain hand-drawn rule, unlike the wavy divider used elsewhere */
.thanks__rule {
  display: block;
  width: 40cqw;
  height: auto;
  margin: 3.4cqw 0 4cqw;
}

.thanks .page__list {
  font-size: 3.4cqw;
  line-height: 1.4;
}

.thanks .page__list p {
  margin: 0 0 1.6cqw;
}

.thanks__signature {
  margin: auto 0 7cqw;
  font-family: var(--font-script);
  font-size: 6cqw;
  color: var(--sand);
}

/* bulleted variant used by the reception page */
.page__list--bullets {
  padding-left: 1.15em;
  font-size: 4.1cqw;
  line-height: 1.3;
}

.page__list--bullets li {
  margin: 0 0 2.6cqw;
  padding-left: 0.3em;
}

.page__list--bullets li::marker {
  color: var(--sand);
}

/* ---------- Scroll reveal ----------
   Each page fades/slides up as it scrolls into view; list rows inside it
   stagger in afterwards, timed by the --i index set in the script below. */

.sheet {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.sheet.is-visible {
  opacity: 1;
  transform: none;
}

.order__list > *,
.page__list > *,
.thanks__signature {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}

.sheet.is-visible .order__list > *,
.sheet.is-visible .page__list > *,
.sheet.is-visible .thanks__signature {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .sheet,
  .order__list > *,
  .page__list > *,
  .thanks__signature {
    opacity: 1;
    transform: none;
    transition: none;
  }
}