/* Shiv Parvati — sections added to the original design.
   Built from the design's own parts: the events parchment (bg.png, multiplied), its
   header (trishul crest, Montserrat eyebrow, Roaster Brush title, divider-2 rule), the
   story timeline's carved arch frame for photographs, the bells, Cinzel for numerals,
   and the tokens in tokens.css. Motion uses --ease-settle, the design's reveal curve. */

.wiy-sp {
  --events-paper: #f8f0dd;
  --events-navy: #17406e;
  --events-body: #6b3a2a;
  --events-measure: min(92vw, 68rem);
  --story-body: #6b3a2a;
  --story-ease: cubic-bezier(0.33, 0, 0.1, 1);
  --wiy-rise: 24px;
  --wiy-rise-d: 1.1s;
  --wiy-ease: var(--ease-settle, cubic-bezier(0.22, 0.61, 0.24, 1));
  position: relative;
  display: block;
}
.wiy-sp .events__parchment {
  overflow: hidden;
}

/* ---- gallery ---- */
.wiy-sp__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.6rem) clamp(1rem, 2.4vw, 2rem);
  width: var(--events-measure);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.wiy-sp__photo {
  text-align: center;
}
.wiy-sp__photo .story__caption {
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.4;
}
@media (max-width: 900px) {
  .wiy-sp__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .wiy-sp__gallery { grid-template-columns: minmax(0, 1fr); }
}

/* ---- countdown ---- */
.wiy-sp__date {
  margin: 0 0 clamp(1.2rem, 2.6vw, 2rem);
  font-family: 'Cinzel', 'Iowan Old Style', Georgia, serif;
  font-weight: 600;
  font-size: clamp(14px, 1.4vw, 20px);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--events-body);
}
.wiy-sp__units {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 2.6vw, 2.4rem);
}
.wiy-sp__unit {
  min-width: clamp(78px, 9vw, 120px);
  padding: clamp(1rem, 1.8vw, 1.5rem) 0.6rem clamp(0.7rem, 1.2vw, 1rem);
  border: 1px solid var(--gold-faint, rgba(189, 151, 54, 0.34));
  border-radius: 999px 999px 6px 6px;
  background: rgba(255, 245, 221, 0.6);
  box-shadow: inset 0 0 0 4px rgba(255, 245, 221, 0.7), inset 0 0 0 5px var(--gold-ghost, rgba(189, 151, 54, 0.16));
  text-align: center;
}
.wiy-sp__num {
  display: block;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1;
  color: var(--ink-navy, #17395c);
}
.wiy-sp__unit-label {
  display: block;
  margin-top: 0.45rem;
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(9px, 0.8vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--events-body);
}

/* the bells hang from the top edge, as they do above the events */
.wiy-sp__bell {
  position: absolute;
  top: 0;
  z-index: 1;
  width: clamp(26px, 3.4vw, 50px);
  height: auto;
  transform-origin: 50% 0;
  animation: wiy-sp-sway 5.6s ease-in-out infinite;
}
.wiy-sp__bell--l { left: clamp(10px, 7vw, 110px); }
.wiy-sp__bell--r { right: clamp(10px, 7vw, 110px); animation-delay: -2.1s; }
@keyframes wiy-sp-sway {
  0%, 100% { transform: rotate(2.5deg); }
  50% { transform: rotate(-2.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wiy-sp__bell { animation: none; }
}

/* ---- footer ---- */
.wiy-sp--footer .events__header {
  margin-bottom: 0;
}
.wiy-sp__closing {
  max-width: min(88vw, 44rem);
  margin: 0 auto;
  font-family: 'Roaster Brush', 'Brush Script MT', cursive;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.2;
  color: var(--events-navy);
}
.wiy-sp__names {
  margin: clamp(0.7rem, 1.4vw, 1rem) 0 0.3rem;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: clamp(13px, 1.3vw, 18px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-maroon, #6e3323);
}

/* ============================================================
   SACRED EVENTS, SCROLL-STACKED (themes/event-stack.js)
   ------------------------------------------------------------
   The design is unchanged: the same deckled card, bells, crest
   and dots. Only what stacking needs is here — the viewport no
   longer crops the card sliding up from below, and the slider's
   own dimming of the cards it is not showing is switched off,
   because now the scroll decides which card is on top.
   ============================================================ */
/* The scroll moves from one event to the next now, so the slider's arrows and dots have
   nothing left to do. They stay in the page for a visitor who asked for less motion,
   who still gets the slider. */
.events__parchment.is-evstack .events__nav,
.events__parchment.is-evstack .events__dots {
  display: none;
}
.events__parchment.is-evstack .events__slider-wrap {
  z-index: 5;
}
.events__parchment.is-evstack .events__viewport {
  overflow: visible;
}
/* an event without a photograph gives its words the whole card, rather than half a card
   beside an empty column */
.events__parchment.is-evstack .events__card-body:not(:has(.events__card-media)) {
  grid-template-columns: minmax(0, 1fr);
}
.events__parchment.is-evstack .events__slide {
  opacity: 1;
  padding: 0;
}
/* the deckled edge of the card underneath shows round the one on top */
.events__parchment.is-evstack .events__slide:not(.is-active) .events__card {
  filter: drop-shadow(0 8px 24px rgba(110, 51, 35, 0.14));
}

/* A short phone cannot hold the heading, a square photograph and the words at once.
   The photograph goes landscape so the whole card still fits while it is held. */
@media (max-width: 680px) and (max-height: 760px) {
  .events__parchment.is-evstack .events__card-media {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}
@media (max-width: 680px) {
  .events__parchment.is-evstack .events__card {
    padding: 24px 16px 26px;
  }
}