/* Wedding stories: the cards (one column on phones, an asymmetric 12-column layout on desktop) and the
   full-screen chapter: a cover, spreads (wide = full-bleed, pair = two columns, single = offset frame)
   with small-caps frame captions, then the next story. Photos keep their own proportions everywhere. */

/* ---------- cards ---------- */
.story-list {
  display: grid;
  gap: clamp(var(--space-7), 8vw, var(--space-9));
}
.story-card { min-width: 0; }
.story-card__open {
  position: relative;
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.story-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 3 / 2);
  margin-bottom: var(--space-3);
  overflow: hidden;
  background: var(--paper-2);
}
.story-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.story-card__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-style: italic;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
@media (hover: hover) and (pointer: fine) {
  .story-card__open:hover .story-card__title { text-decoration-line: underline; }
  html[data-motion="on"] .story-card__open:hover .story-card__img { transform: scale(1.02); }
}

@media (min-width: 600px) and (max-width: 899px) {
  .story-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .story-card:nth-child(3n + 1) { grid-column: 1 / -1; }
  .story-card:nth-child(3n + 3) { margin-top: var(--space-8); }
}
@media (min-width: 900px) {
  .story-list {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: clamp(var(--space-7), 7vw, var(--space-9));
    align-items: start;
  }
  /* one large card, then two smaller ones set off down and in, like a magazine spread */
  .story-card:nth-child(3n + 1) { grid-column: 1 / span 7; }
  .story-card:nth-child(3n + 2) { grid-column: 9 / span 4; margin-top: var(--space-9); }
  .story-card:nth-child(3n + 3) { grid-column: 3 / span 5; }
}

/* ---------- chapter ---------- */
.chapter {
  --chapter-gutter: 16px;
  position: fixed;
  inset: 0;
  z-index: 40;
  color: var(--ink);
}
@media (min-width: 900px) {
  .chapter { --chapter-gutter: clamp(24px, 4vw, 56px); }
}
/* paints the status-bar area so photos never scroll under the phone's clock */
.chapter::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 2;
  height: env(safe-area-inset-top, 0px);
  background: var(--paper);
}
.chapter__backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--paper);
}
.chapter__scroller {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
/* while the cover flies in, the page shows through and the backdrop fades up behind it */
.chapter.is-entering .chapter__scroller { background: transparent; }
.chapter__scroller:focus { outline: none; }
.chapter__scroller:focus-visible { outline: 2px solid var(--bluehour); outline-offset: -4px; }

.chapter__progress {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 3;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

.chapter__close {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-3));
  right: calc(env(safe-area-inset-right, 0px) + var(--space-3));
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .chapter__close:hover { background: var(--ink); color: var(--paper); }
}
@media (min-width: 900px) {
  .chapter__close {
    top: calc(env(safe-area-inset-top, 0px) + var(--space-5));
    right: calc(env(safe-area-inset-right, 0px) + var(--chapter-gutter));
  }
}

.chapter__wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--chapter-gutter);
}

/* opening: kicker, title, cover */
.chapter__head {
  display: grid;
  gap: var(--space-5);
  padding-top: calc(var(--space-8) + var(--space-3)); /* clears the Close button */
  margin-bottom: clamp(var(--space-7), 8vw, var(--space-9));
}
.chapter__heading { display: grid; gap: var(--space-3); align-content: end; }
.chapter__title { font-size: var(--step-4); font-style: italic; line-height: 1.02; }
.chapter__cover {
  position: relative;
  z-index: 1; /* the flying cover passes over the text */
  margin: 0 calc(-1 * var(--chapter-gutter));
}
.chapter__cover .spread__caption { padding-inline: var(--chapter-gutter); }
@media (min-width: 900px) {
  .chapter__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
    padding-top: calc(var(--space-9) + var(--space-4));
  }
  .chapter__heading { grid-column: 1 / span 4; padding-bottom: var(--space-6); }
  .chapter__cover {
    grid-column: 5 / -1;
    justify-self: end;
    margin: 0;
    /* the whole cover fits on screen below the Close button */
    width: min(100%, calc((100vh - 13rem) * var(--ar)));
    width: min(100%, calc((100svh - 13rem) * var(--ar)));
  }
  .chapter__cover .spread__caption { padding-inline: 0; }
}

/* every photo: a box in the photo's own proportions, the image filling it */
.chapter__frame { position: relative; aspect-ratio: var(--ar, 3 / 2); }
.chapter__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@supports not (aspect-ratio: 1 / 1) {
  .chapter__img, .story-card__img { position: static; height: auto; }
}
.spread__caption {
  margin-top: var(--space-3);
  color: var(--ink-2);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* the couple's lines, or the owner note while the copy is in review */
.chapter__intro { margin-bottom: clamp(var(--space-7), 8vw, var(--space-9)); }
.chapter__intro .owner-note { margin-top: 0; }
.chapter__text { max-width: 46ch; font-size: var(--step-1); font-weight: 300; line-height: 1.55; }
@media (min-width: 900px) {
  .chapter__intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .chapter__intro > * { grid-column: 5 / span 6; }
}

/* spreads */
.spread { margin: 0 0 clamp(var(--space-7), 9vw, var(--space-9)); }
.spread__photo { min-width: 0; margin: 0; }
.spread--wide .spread__caption {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--chapter-gutter);
}
/* portraits never grow taller than the screen */
.spread--pair .spread__photo,
.spread--single .spread__photo {
  --w: 100%;
  width: min(var(--w), calc((100vh - 7rem) * var(--ar)));
  width: min(var(--w), calc((100svh - 7rem) * var(--ar)));
}
.spread--single .spread__photo { --w: 84%; }
.spread--right .spread__photo { margin-left: auto; }
.spread--pair { display: grid; gap: var(--space-7); }
@media (min-width: 560px) {
  .spread--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .spread--pair .spread__photo:first-child { justify-self: end; }
  .spread--pair .spread__photo:last-child { margin-top: var(--space-8); }
}
@media (min-width: 900px) {
  .spread--single { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .spread--single .spread__photo { --w: 100%; margin: 0; }
  .spread--right .spread__photo { grid-column: 5 / span 7; }
  .spread--left .spread__photo { grid-column: 2 / span 7; }
}

/* end: ask about a date, or read the next story */
.chapter__end {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
  padding-bottom: clamp(var(--space-8), 10vw, var(--space-9));
}
.chapter__end::before {
  content: "";
  justify-self: stretch;
  height: 1px;
  background: var(--rule);
}
.chapter__next {
  position: relative;
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  min-height: 44px;
  margin: 0;
  padding: var(--space-2) 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chapter__next-title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-style: italic;
  line-height: 1.1;
  text-wrap: balance;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
@media (hover: hover) and (pointer: fine) {
  .chapter__next:hover .chapter__next-title { text-decoration-line: underline; }
}
@media (min-width: 900px) {
  .chapter__end {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: var(--space-7);
    align-items: end;
  }
  .chapter__end::before { grid-column: 1 / -1; }
  .chapter__ask { grid-column: 1 / span 5; grid-row: 2; }
  .chapter__next { grid-column: 7 / -1; grid-row: 2; justify-self: end; justify-items: end; text-align: right; }
}

/* ---------- veil: paper over the page during a story switch, and the cover's flight back ---------- */
.chapter-veil {
  position: fixed;
  inset: 0;
  z-index: 39;
  pointer-events: none;
}
.chapter-veil__paper {
  position: absolute;
  inset: 0;
  background: var(--paper);
}
.chapter-veil__img {
  position: fixed;
  display: block;
  max-width: none;
  margin: 0;
  object-fit: cover;
  transform-origin: 0 0;
}