/* Neelangan: lapis stationery, an ivory-light entrance, living painted margins. */
html { scrollbar-width:none; }
html::-webkit-scrollbar { display:none; }
body {
  background-color:var(--paper);
  background-image:linear-gradient(#faf4e8ed,#faf4e8ed),url('assets/paper-texture.webp');
  background-size:auto,520px;
}
main { isolation:isolate; }
main>section { position:relative; }

/* Permanent heading detail ties every chapter to the same stationery. */
.chapter-heading { padding:40px 25px 30px; max-width:460px; }
.chapter-heading h2 { color:#123a68; font-size:clamp(31px,7.8vw,40px); text-wrap:balance; }
.chapter-heading::after {
  content:''; display:block; width:126px; height:9px; margin:18px auto 0;
  background:linear-gradient(90deg,transparent,#bc964e 35%,#bc964e 44%,transparent 44%,transparent 56%,#bc964e 56%,#bc964e 65%,transparent) center/100% 1px no-repeat,
    linear-gradient(45deg,transparent 25%,#bc964e 25% 75%,transparent 75%) center/6px 6px no-repeat;
}
.chapter-heading>p { color:#315576; font-size:18px; max-width:315px; }
.invitation-chapter { padding-top:24px; padding-bottom:36px; }
.family-folio,.story-folio { filter:drop-shadow(0 9px 15px #5146260c); }
.letter-blessing,.letter-request { font-size:17px; }
.letter-parents p { font-size:16px; line-height:1.5; color:#294d71; }
.letter-name { color:#123a68; }
.letter-venue { color:#365c7c; }

/* Entire art-and-copy cards hinge together; their interior never shifts. */
.ceremony {
  width:min(330px,calc(100% - 64px)); transform-origin:0 48%;
  transition:transform 1300ms cubic-bezier(.16,1,.3,1),opacity 1050ms ease;
  backface-visibility:hidden; filter:drop-shadow(0 10px 16px #6d53230c);
}
.ceremony:nth-child(even) { transform-origin:100% 48%; --neel-card-angle:42deg; }
.ceremony.card-entering { animation:none; }
.ceremony.card-folded { transform:perspective(1100px) rotateY(var(--neel-card-angle,-42deg)) scale(.97); opacity:.35; transition-duration:1000ms; }
.ceremony.card-settled,.ceremony.card-entering { transform:none; opacity:1; }
.ceremony:focus-within { transform:none; opacity:1; transition-duration:180ms; }
#events-list { gap:64px; padding-bottom:38px; }
.ceremony-copy { padding:34px 40px 86px; min-height:470px; }
.ceremony-art { width:94px; height:94px; margin-bottom:11px; }
.ceremony-art>img { object-fit:contain; }
.ceremony-art { transition:transform 850ms cubic-bezier(.2,.7,.2,1); transform-origin:50% 75%; }
.ceremony:hover .ceremony-art,.ceremony:focus-within .ceremony-art { transform:translateY(-3px) scale(1.035); }
.ceremony-copy h3 { color:#174a82; font-size:46px; margin-bottom:15px; }
.ceremony-date,.ceremony-time { font-size:16px; letter-spacing:.045em; }
.ceremony-time { color:#a74060; }
.ceremony-venue { font-size:20px; color:#274d74; }
.ceremony-description,.ceremony-attire { font-size:16px; line-height:1.5; color:#365771; }
.ceremony-map { font-size:12px; color:#805824; }
.ceremony[data-custom-art='true'] .ceremony-art { width:100%; height:auto; aspect-ratio:3/2; overflow:hidden; border:1px solid #bc964e66; }
.ceremony[data-custom-art='true'] .ceremony-art>img { width:100%; height:100%; object-fit:cover; }
.neel-reveal-ready {
  transform-origin:50% 75%; transition:transform 1350ms cubic-bezier(.16,1,.3,1),opacity 1050ms ease;
}
.neel-reveal-ready[data-neel-reveal='closed'] { transform:perspective(1200px) rotateX(8deg) translateY(22px) scale(.97); opacity:.45; transition-duration:1000ms; }
.neel-reveal-ready[data-neel-reveal='open'],.neel-reveal-ready:focus-within { transform:none; opacity:1; }
.story-chapter { padding-block:44px 30px; }
.story-copy>p[data-bind='story.text'] { font-size:18px; line-height:1.65; color:#2b4b6c; }
.story-copy h2 { color:#123a68; }
#story-tags { font-size:16px; color:#805824; }
.story-signature { font-size:31px; }
.story-art { overflow:hidden; }
.story-art img { transition:transform 1500ms cubic-bezier(.2,.7,.2,1); }
.story-folio:hover .story-art img,.story-folio:focus-within .story-art img { transform:scale(1.035); }
.memory-caption { color:#234d79; font-size:17px; }
.memory img { transition:filter 500ms ease; }
.memory:hover img,.memory:focus-visible img { filter:brightness(1.04); }

/* Guest information gets the same breathing room as the invitation. */
.travel-chapter { padding-block:22px 30px; }
#guest-guide { gap:18px; }
.guest-note { padding:31px 24px; justify-content:center; }
.guest-note-copy p { font-size:16px; line-height:1.55; color:#31536e; }
.guest-note-copy h3 { font-size:26px; color:#174a82; }
.guest-note-number { display:none; }
.venue-note { max-width:440px; margin-top:38px; }
.venue-art { margin:0 0 24px; overflow:hidden; border:1px solid #cbb27e; border-radius:48% 48% 2px 2px / 10% 10% 2px 2px; box-shadow:0 9px 21px #76592710; }
.venue-art img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; transition:transform 2200ms cubic-bezier(.2,.7,.2,1); }
.venue-note[data-neel-reveal='closed'] .venue-art img { transform:scale(1.055); }
.venue-note:hover .venue-art img { transform:scale(1.025); }
.venue-note h3 { font-size:29px; }
.venue-note p { font-size:17px; }
.venue-note a { font-size:16px; }
.reply-chapter { padding-block:40px 28px; }
.reply-copy>p[data-bind] { font-size:18px; color:#2b4b6c; }
.button { padding:12px 28px; background:#f4e7c8; transition:background 250ms ease,box-shadow 250ms ease; }
.button:hover { background:#ecd9ae; box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px #bc964e80,0 5px 14px #75541e12; }
.date-chapter { padding-top:22px; }
.date-chapter h2 { font-size:31px; margin-bottom:20px; }
.countdown-grid strong { font-size:40px; }
.closing-chapter { padding-top:28px; }
.closing-chapter>p { font-size:17px; }

@media(min-width:760px) {
  main { box-shadow:0 0 110px #69809109; }
  .ceremony { width:350px; }
  .ceremony-copy { padding-inline:46px; }
  .ceremony-art { width:102px; height:102px; }
}
@media(max-width:559px) {
  #guest-guide { grid-template-columns:1fr; max-width:310px; gap:18px; }
  .guest-note { min-height:180px; padding:27px 34px 31px; }
  .guest-note-number { margin-bottom:6px; }
  .guest-note-copy h3 { font-size:28px; }
  .guest-note-copy p { font-size:17px; }
  .venue-note { max-width:340px; margin-inline:auto; }
  .ceremony-copy { padding-inline:36px; }
  .ceremony-copy h3 { font-size:43px; }
  .ceremony[data-scene='vows'] .ceremony-copy h3 { font-size:39px; }
}
@media(max-width:359px) {
  .ceremony { width:calc(100% - 50px); }
  .ceremony-copy { padding-inline:33px; }
  .ceremony-copy h3 { font-size:39px; }
  .ceremony-art { width:86px; height:86px; }
  .ceremony-venue { font-size:18px; }
  .ceremony-description,.ceremony-attire { font-size:15px; }
  .letter-blessing,.letter-request { font-size:16px; }
  .letter-parents p { font-size:15px; }
  .story-copy>p[data-bind='story.text'] { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) {
  .ceremony,.ceremony-art,.neel-reveal-ready,.story-art img,.venue-art img,.memory img,.button { transition:none; }
  .ceremony:hover .ceremony-art,.ceremony:focus-within .ceremony-art { transform:none; }
  .ceremony.card-folded,.neel-reveal-ready[data-neel-reveal='closed'] { opacity:1;transform:none; }
}