/* Maharashtra Wada — sections added to the original design.
   Measured against the same capped column as the rest of the page (--mw), set in
   Gafiya on the wada's brown paper (which the body already carries), in the design's
   cream ink and marigold gold, with golden-divider / white-divider as rules. Countdown
   units are cut to the exact arch the Beautiful Memories photographs use. */

.wiy-mw {
  --mw: min(100vw, 1500px);
  --ts: 1;
  --ink: #fdf1e2;
  --gold: #f0c179;
  --frame: #ded4c4;
  --wiy-rise: calc(var(--mw) * 0.02);
  --wiy-rise-d: 1.1s;
  --wiy-ease: cubic-bezier(0.22, 0.61, 0.24, 1);
  position: relative;
  z-index: 2;
  padding: calc(var(--mw) * 0.09) 0 calc(var(--mw) * 0.08);
  text-align: center;
  color: var(--ink);
  background-color: transparent;
}
@media (max-width: 1100px) { .wiy-mw { --ts: 1.06; } }
@media (max-width: 700px) { .wiy-mw { --ts: 1.4; } }

.wiy-mw__wrap {
  width: min(var(--mw), 92vw);
  margin: 0 auto;
}
.wiy-mw__title {
  margin: 0;
  font-family: "Gafiya", "Iowan Old Style", Palatino, Georgia, serif;
  font-weight: 400;
  font-size: max(30px, calc(var(--mw) * 0.058 * var(--ts)));
  line-height: 1.05;
  letter-spacing: 0.015em;
  color: var(--ink);
}
.wiy-mw__rule {
  display: block;
  width: max(150px, calc(var(--mw) * 0.2));
  height: auto;
  margin: calc(var(--mw) * 0.03) auto;
}
.wiy-mw__date {
  margin: 0;
  font-size: max(15px, calc(var(--mw) * 0.022 * var(--ts)));
  font-weight: 700;
  letter-spacing: 0.01em;
}

.wiy-mw__units {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: max(12px, calc(var(--mw) * 0.03));
  margin-top: calc(var(--mw) * 0.045);
}
.wiy-mw__unit {
  --unit-w: max(74px, calc(var(--mw) * 0.115));
  width: var(--unit-w);
  aspect-ratio: 457 / 588;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Clears the domed top of the arch so the number and label sit centred in its body.
     Written against the unit's own width: a percentage here resolves against the whole
     ROW's width (140px on a 237px arch at 1500), which pushed them to the bottom. */
  padding-top: calc(var(--unit-w) * 0.30);
  box-sizing: border-box;
  background: var(--frame);
  color: #5a2a10;
  clip-path: polygon(
    0.00% 30.02%, 2.50% 26.53%, 5.00% 25.09%, 7.50% 24.06%, 10.00% 19.47%,
    12.50% 17.26%, 15.00% 15.90%, 17.50% 14.88%, 20.00% 14.54%,
    22.50% 13.44%, 25.00% 11.22%, 27.50% 9.52%, 30.00% 8.08%, 32.50% 6.89%,
    35.00% 6.04%, 37.50% 5.36%, 40.00% 4.76%, 42.50% 4.00%, 45.00% 3.06%,
    47.50% 1.79%, 50.00% 2.04%, 52.50% 1.79%, 55.00% 3.06%, 57.50% 4.00%,
    60.00% 4.76%, 62.50% 5.36%, 65.00% 6.04%, 67.50% 6.89%, 70.00% 8.08%,
    72.50% 9.52%, 75.00% 11.22%, 77.50% 13.44%, 80.00% 14.54%, 82.50% 14.88%,
    85.00% 15.90%, 87.50% 17.26%, 90.00% 19.47%, 92.50% 24.06%,
    95.00% 25.09%, 97.50% 26.53%, 100.00% 30.02%, 100% 100%, 0% 100%);
}
.wiy-mw__num {
  font-family: "Gafiya", Georgia, serif;
  font-size: max(26px, calc(var(--mw) * 0.045 * var(--ts)));
  line-height: 1;
}
.wiy-mw__unit-label {
  margin-top: 0.45em;
  font-size: max(9px, calc(var(--mw) * 0.0105 * var(--ts)));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- footer ---- */
.wiy-mw--footer {
  padding-top: calc(var(--mw) * 0.05);
  padding-bottom: calc(var(--mw) * 0.07);
}
.wiy-mw__closing {
  max-width: calc(var(--mw) * 0.62);
  margin: 0 auto;
  font-family: "Gafiya", "Iowan Old Style", Palatino, Georgia, serif;
  font-size: max(24px, calc(var(--mw) * 0.042 * var(--ts)));
  line-height: 1.12;
}
.wiy-mw__names {
  margin: calc(var(--mw) * 0.02) 0 0;
  font-size: max(13px, calc(var(--mw) * 0.016 * var(--ts)));
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.wiy-mw__tag {
  margin: calc(var(--mw) * 0.01) 0 0;
  font-size: max(13px, calc(var(--mw) * 0.016 * var(--ts)));
  opacity: 0.85;
}

/* ---- the events, scroll-stacked (themes/event-stack.js) ----
   The discs, placards, rails and palms are the design's own. Stacked, the couple
   stay at the top and each disc is brought up over the one before. A disc is sized to
   the screen as well as to the page, so the couple and a whole disc are always on
   screen together; its words are in cqw of the disc, so they scale with it. */
.story-wrap.is-evstack .story-event,
.story-wrap.is-evstack .story-event:first-of-type,
.story-wrap.is-evstack .story-event + .story-event {
  width: min(calc(var(--sw) * 0.46), calc(100svh - 19rem));
  margin: calc(var(--sw) * 0.06) auto 0;
}
/* On a computer the disc above is held to the screen's height, but the couple stayed
   at their full-page size — three times the disc's width instead of the design's
   1.57, so huge feet stood over small discs. Stacked, the couple are sized from the
   disc at the design's own ratio (.7229 : .46), keep their place over its centre
   (their image is drawn .3919 of its width left of the couple's middle), and the gap
   to the first disc shrinks with them. At full size every value is the original. */
@media (min-width: 861px) {
  .story-wrap.is-evstack {
    --disc-w: min(calc(var(--sw) * 0.46), calc(100svh - 19rem));
    --feet-w: min(calc(var(--sw) * 0.7229), calc(var(--disc-w) * 1.5715));
  }
  .story-wrap.is-evstack .story-feet {
    width: var(--feet-w);
    margin-left: calc(50% - var(--feet-w) * 0.3919);
  }
  .story-wrap.is-evstack .story-event:first-of-type {
    margin-top: min(calc(var(--sw) * 0.06), calc(var(--disc-w) * 0.1304));
  }
}
@media (max-width: 860px) {
  .story-wrap.is-evstack .story-event,
  .story-wrap.is-evstack .story-event:first-of-type,
  .story-wrap.is-evstack .story-event + .story-event {
    width: min(calc(var(--sw) * 0.64), calc(100svh - 17rem));
  }
}
@media (max-width: 560px) {
  .story-wrap.is-evstack .story-event,
  .story-wrap.is-evstack .story-event:first-of-type,
  .story-wrap.is-evstack .story-event + .story-event {
    width: min(calc(var(--sw) * 0.74), calc(100svh - 15rem));
  }
}