/* site/assets/css/reception.css */

/* The title band ghosts the dinner, not the sweetheart table: the sweetheart
   table is the full-colour banner directly below it, and no photograph should
   appear twice in one view. The dinner returns far down, under The Menu. */
.reception .page-head {
  --page-ghost: url('../img/pages/reception-dinner-800.jpg');
  --page-ghost-pos: center 40%;
}

/* The banner is a band across a wide photograph, so it is held high enough that
   both faces stay inside it. */
.reception .page-banner img { object-position: center 28%; }

.page-banner + .reception-opening { margin-top: clamp(44px, 5vw, 64px); }

.reception-opening { padding-bottom: 0; }

/* The courtyard pair closes the opening, and the first section follows it. */
.reception-courtyard { margin-top: clamp(40px, 5vw, 56px); }

.reception-courtyard img { object-position: center 46%; }

.reception-courtyard + .page-section { margin-top: clamp(64px, 8vw, 104px); }

.reception-after-quote { margin-top: 36px; }

/* The recording of the toasts: one vellum panel on the white page, with the
   page's rule motif over it. Never a box inside a box. */
.audio-slot {
  max-width: 640px;
  margin: clamp(36px, 4vw, 48px) auto 0;
  padding: clamp(34px, 4.4vw, 48px) clamp(26px, 4vw, 44px);
  text-align: center;
}

.audio-slot::before {
  content: '';
  display: block;
  width: 90px;
  height: 3px;
  margin: 0 auto 26px;
  background: var(--color-accent-rule);
}

.audio-slot p {
  margin: 0;
  font-weight: 300;
  font-style: normal;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.7;
  text-wrap: pretty;
}

/* The finished cake on its own, centred with even air above and below it. */
.reception .page-inset { margin: clamp(36px, 4vw, 48px) auto 0; }

/* Three cake photographs side by side from 700px, stacked below. */
@media (min-width: 700px) {
  .figures-three { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

/* The menu, set like the printed card: a narrow column of italic dish names,
   each with its dietary notes in small tracked capitals beneath, on a vellum
   panel with white all around it. The tint and hairline come from .vellum. */
.menu-card {
  max-width: 460px;
  margin: 48px auto 0;
  padding: clamp(36px, 6vw, 56px) clamp(22px, 5vw, 40px);
  background: rgba(253, 248, 240, 0.9);
  border: 1px solid rgba(44, 42, 32, 0.16);
  text-align: center;
}

.menu-list { margin: 0; padding: 0; list-style: none; }

.menu-dish { margin: 0 0 30px; }
.menu-dish:last-child { margin-bottom: 0; }

.menu-dish span { display: block; }

.menu-dish-name {
  font-weight: 500;
  font-style: italic;
  font-size: clamp(22px, 5vw, 27px);
  line-height: 1.25;
  text-wrap: balance;
}

.menu-dish-notes {
  margin-top: 6px;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-muted);
}

.menu-dish-text {
  margin-top: 6px;
  font-weight: 300;
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  text-wrap: balance;
}

/* The typeset card and the photograph of the printed card, side by side from
   900px and top aligned, the card first and the photograph under it below. */
.menu-pair {
  display: grid;
  gap: 32px;
  max-width: 1000px;
  margin: clamp(36px, 4vw, 48px) auto 0;
}

@media (min-width: 900px) {
  .menu-pair {
    grid-template-columns: minmax(0, 460px) minmax(0, 480px);
    justify-content: center;
    align-items: start;
    gap: 48px;
  }
}

/* The pair supplies the space above the card, so the card drops its own. The explicit
   width matters: a grid item with auto side margins and no width of its own shrinks
   to its content instead of filling its column. */
.menu-pair .menu-card { width: 100%; margin-top: 0; }

/* The two photographs stack in the right column, so it stands as tall as the
   typeset card beside it rather than leaving the page half empty. */
.menu-photos {
  display: grid;
  gap: clamp(24px, 3vw, 34px);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.menu-photo { margin: 0; }

.menu-photo img {
  width: 100%;
  height: auto;
  background: rgba(44, 42, 32, 0.08);
}

.menu-photo figcaption {
  margin-top: 10px;
  font-style: normal;
  font-size: 14px;
  color: var(--color-muted);
}

.menu-pair + .credit-line { margin-top: 32px; }

/* The keepsake link and its file size. */
.menu-download { margin: 20px 0 0; text-align: center; font-size: 17px; }
.menu-download-size { margin-left: 8px; font-size: 13px; letter-spacing: 0.08em; }

/* The Music: the shared ghosted band, carrying the photograph of the dancing. */
.reception-music .music-ghost-img { object-position: 50% 46%; }