/* site/assets/css/ceremony.css */

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

/* The banner is a wide interior, so the band keeps the aisle and the bride low in
   the frame rather than the dark roof above them. */
.ceremony .page-banner img { object-position: center 60%; }

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

/* The first white section supplies the air below the opening paragraph. */
.ceremony-opening { padding-bottom: 0; }

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

/* A Reading ---------------------------------------------------------------
   The passage is long, so the altar stands in a narrow column beside it and
   stays there while the words scroll past. Below 900px the photograph becomes
   a wide crop above the text, so a phone reads the picture first. */
.reading-pair {
  display: grid;
  gap: 32px;
  max-width: 1040px;
  margin: clamp(36px, 4vw, 48px) auto 0;
}

@media (min-width: 900px) {
  .reading-pair {
    grid-template-columns: minmax(240px, 300px) minmax(0, 620px);
    justify-content: center;
    align-items: start;
    gap: 56px;
  }
}

/* The column holds two pictures: the poet, then the altar. On a phone they sit
   side by side above the passage, cropped to one shape so the pair lines up. */
.reading-aside {
  display: grid;
  align-items: start;
  gap: 20px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.reading-aside figure { margin: 0; }

.reading-aside img {
  width: 100%;
  height: auto;
  object-fit: cover;
  background: rgba(44, 42, 32, 0.08);
}

.reading-photo img { object-position: center 42%; }

/* The portrait is a small file, so it is never drawn larger than it really is
   and it takes a light touch to sit with the softened photographs around it. */
.reading-portrait img { filter: saturate(0.9) contrast(0.92) brightness(1.08); }

.reading-aside figcaption {
  margin-top: 10px;
  font-weight: 300;
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-muted);
  text-wrap: pretty;
}

/* Below the two column layout the pair is cropped to one portrait shape, so
   neither picture runs the height of the screen before the reading begins. */
@media (max-width: 899.98px) {
  .reading-aside {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 520px;
  }

  .reading-aside img { aspect-ratio: 3 / 4; }
}

/* Beside the text the column keeps each picture's own shape and stays put as
   the passage scrolls past it. */
@media (min-width: 900px) {
  .reading-aside {
    position: sticky;
    top: 96px;
    max-width: none;
    gap: 26px;
  }

  /* The portrait file is only 375px wide, so it is never asked to fill more. */
  .reading-portrait { max-width: 375px; }
}

/* Rilke's passage is set left-aligned for reading, in a 620px column. */
.reading {
  max-width: 620px;
  margin: 40px auto 0;
}

.reading-pair .reading { margin-top: 0; }

.reading blockquote { margin: 0; }

.reading blockquote p {
  margin: 0;
  font-size: 19px;
  line-height: 1.85;
  text-wrap: pretty;
}

/* The attribution takes a quotation's voice: FM Medium capitals under a short
   rule, left aligned with the column it belongs to. */
.reading figcaption {
  margin-top: 28px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  line-height: 1.6;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-muted);
}

.reading figcaption::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  margin-bottom: 14px;
  background: currentColor;
}

.ceremony-lead { margin-top: 24px; }

/* A Poem from Kal ---------------------------------------------------------
   The words on the left and the photographed page beside them on the right, so
   the poem is met once rather than read twice. Everything in the section is
   left aligned against the page's khaki rule; on a phone the words come first
   and the page follows at a modest size. */
.poem-pair {
  display: grid;
  gap: 36px;
  max-width: 1000px;
  margin: clamp(36px, 4vw, 48px) auto 0;
}

@media (min-width: 800px) {
  .poem-pair {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    justify-content: center;
    align-items: start;
    gap: 56px;
  }
}

.poem {
  max-width: 520px;
  margin: 0;
  padding-left: clamp(22px, 3vw, 34px);
  border-left: 2px solid var(--color-accent-rule);
  text-align: left;
}

.poem blockquote { margin: 0; }

.poem-title {
  margin: 0 0 22px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Upright FM Light: the section heading already carries the italic voice. */
.poem-lines {
  margin: 0;
  font-weight: 300;
  font-style: normal;
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.7;
  text-wrap: pretty;
}

.poem figcaption {
  margin-top: 22px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.poem figcaption::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  margin-bottom: 14px;
  background: currentColor;
}

/* The photographed page, smaller than before and sitting in its own column. */
.poem-page {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.poem-page img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(44, 42, 32, 0.14);
}

.poem-page figcaption {
  margin-top: 10px;
  font-style: normal;
  font-size: 14px;
  text-align: left;
  color: var(--color-muted);
}

/* Our Vows -------------------------------------------------------------
   Rev. Lee's script runs to about 1,900 words, so it is set as one narrow
   reading column (660px, 17px, generous leading) rather than in the centred
   19px voice the short passages elsewhere use. The two vows follow it side
   by side in vellum panels. */
.ceremony-script {
  max-width: 660px;
  margin: 40px auto 0;
  font-size: 17px;
  line-height: 1.9;
  text-align: left;
}

.ceremony-script > p { margin: 0 0 1.3em; text-wrap: pretty; }

/* The part names Rev. Lee gave his own script: small tracked capitals with the
   page's short hairline above them, so each part opens the way a label does. */
.script-part {
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.26em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.script-part::before {
  content: '';
  display: block;
  width: 1px;
  height: 44px;
  margin: 0 auto 22px;
  background: currentColor;
  opacity: 0.55;
}

/* The first part sits right under the label's own long rule, so it needs no second one. */
.ceremony-script .script-part:first-of-type::before { display: none; }

.ceremony-script > * + .script-part { margin-top: 52px; }

.script-part + p { margin-top: 30px; }

/* The pointer to the Rilke passage printed above. */
.ceremony-script .script-aside {
  font-weight: 300;
  font-style: italic;
  text-align: center;
  color: var(--color-muted);
}

/* Vonnegut's line, in the page's one quotation voice: upright, against khaki. */
.ceremony-script .script-quote {
  margin-block: 1.3em;
  padding-left: 24px;
  border-left: 2px solid var(--color-accent-rule);
  font-weight: 300;
  font-style: normal;
  font-size: 19px;
  line-height: 1.7;
}

/* A photograph inside the reading column, the width of the column itself. */
.script-photo {
  margin: 34px 0;
}

.script-photo img {
  width: 100%;
  height: auto;
  background: rgba(44, 42, 32, 0.08);
  filter: saturate(0.86) contrast(0.94) brightness(1.06);
}

.script-photo-tall { max-width: 420px; margin-left: auto; margin-right: auto; }

.script-photo figcaption {
  margin-top: 10px;
  font-weight: 300;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Who speaks, and to whom: the script's own stage directions, kept quiet. */
.script-cue {
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* The Apache blessing, set as the lines it is. */
.ceremony-script .script-verse {
  margin: 30px 0 0;
  font-weight: 300;
  font-style: normal;
  font-size: 19px;
  line-height: 1.75;
  text-align: center;
}

.ceremony-script .script-attrib {
  margin: 22px 0 0;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* The two vows: one column on a phone, two from 760px. */
.vows-head { margin-top: clamp(56px, 7vw, 88px); }

.ceremony-vows {
  display: grid;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 760px) {
  .ceremony-vows { grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
}

/* The vellum tint and its hairline come from .vellum in style.css. */
.ceremony-vow {
  padding: clamp(28px, 4vw, 40px) clamp(20px, 3.4vw, 34px);
  text-align: center;
}

.ceremony-vow .panel-label { font-size: 13px; letter-spacing: 0.26em; }

/* A hairline under the sub-label, in place of the old long vertical rule. */
.ceremony-vow .panel-label::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  margin: 16px auto 0;
  background: rgba(44, 42, 32, 0.32);
}

.vow-note {
  margin: 14px 0 0;
  font-weight: 300;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.vow-text {
  margin: 24px 0 0;
  font-size: 19px;
  line-height: 1.85;
  text-wrap: pretty;
}

/* Rings: two squares, then the hand and the bench, then the render across the full width.
   Six columns so the hand (four) and the portrait bench photo (two) come out the same height.
   Below 700px the photographs simply stack. */
@media (min-width: 700px) {
  .figures-rings { grid-template-columns: repeat(6, 1fr); align-items: start; }
  .figures-rings figure { grid-column: span 3; }
  .figures-rings figure:nth-child(3) { grid-column: span 4; }
  .figures-rings figure:nth-child(4) { grid-column: span 2; }
  .figures-rings figure:nth-child(5) { grid-column: span 6; }
}

/* Details: the tall bodice photograph on the left, bouquet and crown stacked beside it. */
@media (min-width: 700px) {
  .figures-details { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .figures-details .figure-tall { grid-column: 1; grid-row: 1 / span 2; }
}

.figures + .credit-line { margin-top: 36px; }

/* The Music: the shared ghosted band, set to Daniel with the kora, with the
   aisle Rena walked down under it. */
.ceremony .music-band { --music-ghost: url('../img/pages/ceremony-kora.jpg'); }

.music-band + .music-aisle { margin-top: clamp(28px, 3.4vw, 44px); }

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

/* The lead photograph of The Details, above Rena's own pictures. */
.details-dress { margin-top: clamp(30px, 3.4vw, 42px); }

.details-dress + .figures { margin-top: clamp(28px, 3vw, 36px); }

/* The commissioned anniversary drawing: one wide sheet, then two details side by side. */
.drawing-wide,
.drawing-pair {
  max-width: 900px;
  margin: clamp(36px, 4vw, 48px) auto 0;
}

.drawing-wide img,
.drawing-pair img {
  display: block;
  width: 100%;
  height: auto;
  background: rgba(44, 42, 32, 0.06);
}

.drawing-pair {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

/* Without this the two details keep a figure's default side margins and come
   out narrower than the wide sheet above them. */
.drawing-pair figure { margin: 0; }

@media (min-width: 700px) {
  .drawing-pair { grid-template-columns: 1fr 1fr; }
}

.drawing-pair + .credit-line { margin-top: 28px; }