/* South Indian — sections added to the original design.
   Everything here is drawn with the scroll's own vocabulary: invitation folds on the
   paper, Wish Shore headings in the design's crimson and plum, Montserrat body copy in
   charcoal, the Group-of-3 flourishes, and the brass-bell gold (#d4af37 / #fdf6c7)
   for rules and the seal-like button. Motion matches the fold entrance in script.js:
   40px, 1.2s, power2.out. */

.wiy-si {
  --wiy-rise: 40px;
  --wiy-rise-d: 1.2s;
  --wiy-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --si-gold: #d4af37;
  --si-gold-light: #fdf6c7;
  --si-maroon: #832014;
}

.wiy-si .fold-content {
  width: min(92vw, 1000px);
  text-align: center;
}

.wiy-si__prose p,
.wiy-si__lede {
  max-width: 44rem;
  margin: 0 auto 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.75;
  color: #111;
}
.wiy-si__prose p:last-child { margin-bottom: 0; }

.wiy-si__label {
  margin: 0 0 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(0.78rem, 0.95vw, 0.92rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--si-maroon);
}

.wiy-si__date {
  margin: 0 0 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  color: #111;
}

.wiy-si__symbol {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  letter-spacing: 0.15em;
  color: var(--si-gold);
  white-space: nowrap;
}

/* ---- story ---- */
.wiy-si__story {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  width: min(92vw, 1000px);
  margin: 10px auto 0;
  text-align: left;
}
.wiy-si__story:not(:has(.wiy-si__portrait)) {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
}
.wiy-si__story:not(:has(.wiy-si__portrait)) .wiy-si__story-art { display: none; }
.wiy-si__story .wiy-si__prose p { margin-left: 0; }
.wiy-si__story:not(:has(.wiy-si__portrait)) .wiy-si__prose p { margin-left: auto; }

.wiy-si__portrait {
  margin: 0;
  padding: 12px;
  background: #fffaf0;
  border: 1px solid var(--si-gold);
  border-radius: 999px 999px 10px 10px;
  box-shadow: 0 0 0 6px #fffaf0, 0 0 0 7px rgba(212, 175, 55, 0.45), 0 22px 40px -16px rgba(131, 32, 20, 0.3);
}
.wiy-si .wiy-si__portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px 6px 6px;
}

.wiy-si__milestones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
  width: min(92vw, 900px);
  margin: 26px auto 0;
  padding: 0;
  list-style: none;
}
.wiy-si__milestones:not(:has(li)) { display: none; }
.wiy-si__milestone { display: flex; flex-direction: column; align-items: center; max-width: 220px; }
.wiy-si__when { font-family: 'Wish Shore', serif; font-size: clamp(1.8rem, 2.4vw, 2.4rem); line-height: 1.1; color: var(--crimson-accent, #ca3929); }
.wiy-si__what { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1rem; color: #111; }
.wiy-si__detail { font-family: 'Montserrat', sans-serif; font-size: 0.92rem; line-height: 1.5; color: #333; }

/* ---- family ---- */
.wiy-si__families {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
  width: min(92vw, 900px);
  margin: 14px auto 0;
}
.wiy-si__names {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.5;
  color: #111;
}
.wiy-si__members {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin: 22px 0 6px;
  padding: 0;
  list-style: none;
}
.wiy-si__members:not(:has(li)) { display: none; }
.wiy-si__member { font-family: 'Montserrat', sans-serif; font-weight: 600; color: #111; }
.wiy-si__relation { display: block; font-family: 'Montserrat', sans-serif; font-size: 0.9rem; font-style: italic; color: var(--si-maroon); }
@media (max-width: 700px) {
  .wiy-si__families { grid-template-columns: 1fr; gap: 10px; }
}

/* ---- gallery: cream-mounted prints laid on the scroll ---- */
.wiy-si__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3.2vw, 46px);
  width: min(92vw, 1080px);
  margin: clamp(8px, 1.6vw, 20px) auto 0;
}
.wiy-si__print {
  margin: 0;
  padding: clamp(8px, 1vw, 12px) clamp(8px, 1vw, 12px) clamp(12px, 1.4vw, 18px);
  background: #fffaf0;
  border: 1px solid rgba(212, 175, 55, 0.8);
  box-shadow: 0 0 0 5px #fffaf0, 0 0 0 6px rgba(212, 175, 55, 0.45), 0 20px 38px -14px rgba(131, 32, 20, 0.3);
  rotate: var(--tilt, 0deg);
}
.wiy-si__print:nth-child(3n + 1) { --tilt: -1.4deg; }
.wiy-si__print:nth-child(3n + 2) { --tilt: 0.9deg; }
.wiy-si__print:nth-child(3n) { --tilt: -0.5deg; }
.wiy-si__print img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.wiy-si__print figcaption {
  margin-top: 8px;
  font-family: 'Wish Shore', serif;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  line-height: 1.1;
  text-align: center;
  color: var(--crimson-accent, #ca3929);
}
@media (max-width: 850px) {
  .wiy-si__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- countdown: each unit under a small temple arch ---- */
.wiy-si__units {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 2.6vw, 34px);
  margin-top: 18px;
}
.wiy-si__unit {
  min-width: clamp(74px, 9vw, 118px);
  padding: clamp(18px, 2.2vw, 28px) 8px clamp(12px, 1.4vw, 18px);
  border: 1px solid rgba(212, 175, 55, 0.85);
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(180deg, rgba(253, 246, 199, 0.6), rgba(255, 250, 240, 0.3));
  box-shadow: inset 0 0 0 4px rgba(255, 250, 240, 0.75), inset 0 0 0 5px rgba(212, 175, 55, 0.35);
}
.wiy-si__num {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
  color: var(--crimson-accent, #ca3929);
}
.wiy-si__unit-label {
  display: block;
  margin-top: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(0.62rem, 0.8vw, 0.75rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--si-maroon);
}

/* ---- RSVP: a reply slip on the scroll ---- */
.wiy-si__slip {
  width: min(92vw, 680px);
  margin: 4px auto 0;
  padding: clamp(22px, 3vw, 40px);
  background: rgba(255, 250, 240, 0.72);
  border: 1px solid rgba(212, 175, 55, 0.75);
  box-shadow: inset 0 0 0 6px rgba(255, 250, 240, 0.85), inset 0 0 0 7px rgba(212, 175, 55, 0.35);
}
.wiy-si__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px 26px;
  margin-bottom: 18px;
}
.wiy-si__field { display: block; text-align: left; }
.wiy-si__field--wide { margin-bottom: 6px; }
.wiy-si__input {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid rgba(131, 32, 20, 0.45);
  border-radius: 0;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  color: #111;
  outline: none;
  transition: border-color 0.3s ease;
}
.wiy-si__input:focus { border-bottom-color: var(--si-gold); }
.wiy-si__select { appearance: none; cursor: pointer; background: transparent linear-gradient(45deg, transparent 50%, var(--si-maroon) 50%) no-repeat right 6px center / 7px 7px; }
.wiy-si__textarea { min-height: 5.5em; resize: vertical; border: 1px solid rgba(131, 32, 20, 0.3); padding: 10px; }
.wiy-si__submit {
  display: block;
  margin: 26px auto 0;
  padding: 14px 44px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #aa7c11 0%, #d4af37 30%, #fdf6c7 55%, #d4af37 75%, #8a640f 100%);
  box-shadow: 0 8px 20px rgba(138, 100, 15, 0.35);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4a1208;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wiy-si__submit:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(138, 100, 15, 0.42); }
.wiy-si__status { margin: 14px 0 0; text-align: center; font-family: 'Montserrat', sans-serif; color: var(--si-maroon); }
.wiy-si__status[data-state="error"] { color: #ca3929; }
.wiy-si__done { text-align: center; }
.wiy-si__done-title { margin: 0; font-family: 'Wish Shore', serif; font-size: clamp(2.2rem, 3.2vw, 3.2rem); color: var(--magenta-accent, #a82654); }
.wiy-si__done-text { margin: 8px 0 0; font-family: 'Montserrat', sans-serif; color: #111; }

/* ==========================================================================
   Responsive fixes for small screens
   ========================================================================== */

/* The design sizes its gold flourishes with `.fold-content img { width: ... !important }`
   on phones. The story portrait is an image inside a fold too, and was being shrunk to
   the size of an ornament inside a frame three times wider. A photograph fills its frame. */
.wiy-si .fold-content .wiy-si__portrait img {
  width: 100% !important;
  max-width: none;
}

/* A date and a time each stay whole; only the pair is allowed to wrap. */
.wiy-si__when-part { white-space: nowrap; }

@media (max-width: 850px) {
  /* Our Story: the portrait over the words rather than beside them, the portrait at a
     size a phone can show, and the words at the full width of the fold. */
  .wiy-si__story {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    text-align: center;
    width: min(100%, 560px);
  }
  .wiy-si__story .wiy-si__story-art {
    width: min(78vw, 320px);
    margin: 0 auto;
  }
  .wiy-si__story .wiy-si__prose p { margin-left: auto; margin-right: auto; }
  .wiy-si .fold-content { width: min(100%, 92vw); }

  /* Events: on a phone the date and the time are two lines, not a line broken at "Time:" */
  .event-date-time .bullet { display: none; }
  .event-date-time .wiy-si__when-part { display: block; }
  .event-date-time .wiy-si__when-part + .wiy-si__when-part { margin-top: 2px; }

  /* Venue: the red carpet is a triangle, narrow at the top. Centred, the names rose into
     the narrow part and ran off the red onto the paper, where white text cannot be read.
     They are set against the wide foot of the carpet instead, and a little smaller. */
  .fold7 .carpet-content {
    justify-content: flex-end !important;
    padding: 0 16% 5% !important;
  }
  .fold7 .carpet-names { margin-bottom: 6px !important; gap: 0 !important; }
  .fold7 .carpet-names .carpet-name {
    font-size: clamp(19px, 5.6vw, 32px) !important;
    line-height: 1.15 !important;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .fold7 .carpet-names .carpet-symbol { font-size: clamp(11px, 3.2vw, 16px) !important; margin: 0 !important; }
  .fold7 .venue-label { font-size: clamp(9px, 2.6vw, 13px) !important; margin-bottom: 2px !important; }
  .fold7 .venue-name { font-size: clamp(11px, 3.3vw, 15px) !important; line-height: 1.25 !important; }
  .fold7 .venue-address { font-size: clamp(10px, 3vw, 14px) !important; margin-top: 2px !important; }
}

/* the narrowest phones: the carpet is short as well as narrow, so everything on it is a
   size smaller and sits closer together, keeping the first name inside the red */
@media (max-width: 400px) {
  .fold7 .carpet-content { padding: 0 14% 4% !important; }
  .fold7 .carpet-names { margin-bottom: 3px !important; }
  .fold7 .carpet-names .carpet-name { font-size: clamp(15px, 4.9vw, 20px) !important; line-height: 1.1 !important; }
  .fold7 .carpet-names .carpet-symbol { font-size: 10px !important; }
  .fold7 .venue-label { font-size: 8.5px !important; margin-bottom: 1px !important; }
  .fold7 .venue-name { font-size: clamp(10px, 3vw, 12px) !important; }
  .fold7 .venue-address { font-size: clamp(9.5px, 2.8vw, 11px) !important; margin-top: 1px !important; }
}