/* A royal Indian ceremony: live reading layers, floral scenery and opening wings. */
.amethyst-hero{--chapter-fade:clamp(96px,14svh,150px);min-height:660px;background:#21152f}
.hero-scene{inset:0;width:100%;background:#21152f url('assets/ring-ceremony.webp') center/cover no-repeat}
.hero-world,.hero-scene>.scene-film{object-fit:cover;object-position:center center}
.amethyst-hero::after{background:linear-gradient(180deg,#21152f35,transparent 40%,transparent 84%,#21152fa3)}
/* Blend the film into the next chapter's lilac paper without adding a spacer. */
.amethyst-hero::before{content:'';position:absolute;z-index:8;inset:auto 0 0;height:var(--chapter-fade);background:linear-gradient(180deg,#eee3f100 0%,#eee3f11a 18%,#eee3f170 46%,#eee3f1d9 76%,#eee3f1 98%);pointer-events:none}
.amethyst-hero>.hero-next{bottom:calc(var(--chapter-fade) + 14px)}
.hero-copy{position:relative;inset:auto;width:auto;display:block;padding:clamp(35px,5.5svh,60px) 29px 0;text-shadow:0 2px 12px #160b24a8}
.hero-preface{font-size:12px;line-height:1.7;margin-bottom:16px;color:#edd5df}
#hero-title{font-size:clamp(46px,12.2vw,65px);line-height:1.03;letter-spacing:-.025em}
#hero-title em{font-size:23px;line-height:1.1;margin:4px 0;color:#eac99c}
.hero-date{font-size:17px;margin-top:19px;color:#f1d6b1}
.hero-venue{font-size:12px;line-height:1.7;max-width:27em;margin:7px auto 0;color:#f9e6ee}
.hero-next{width:100%;bottom:max(27px,env(safe-area-inset-bottom));font-size:12px}

/* Each chapter gives its artwork a clear, intentional place beside the words. */
.chapter-heading{position:relative;isolation:isolate;background:none}
.note-heading{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:5px;padding:58px 12px 43px;max-width:720px}
.note-heading-copy{grid-column:2;grid-row:1;min-width:0}
.note-heading-copy>p{font-size:11px;line-height:1.65;color:#795595;margin:0 0 15px}
.note-heading h2{font-size:clamp(28px,7.8vw,38px);line-height:1.25;letter-spacing:-.035em}
.ceremony-visual>.celebration-heading{grid-area:1/1;z-index:9;display:flex;align-items:center;justify-content:center;min-height:190px;margin:0 0 0 calc(var(--attendant-size)*.72);padding:38px 18px 18px 12px;max-width:none;text-align:center}
.celebration-heading-copy{min-width:0}
.celebration-heading-copy>p:first-child{font-size:12px;line-height:1.6;color:#795595;margin:0 0 12px}
.celebration-heading-copy h2{font-size:clamp(27px,7.2vw,34px);line-height:1.22;letter-spacing:-.025em}
.celebration-heading-copy .heading-note{font-size:14px;line-height:1.6;margin:14px 0 0}
.chapter-motif{position:relative;z-index:3;pointer-events:none;line-height:0}
.chapter-motif img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 3px 4px #28142d15)}
.note-heading>.chapter-motif{grid-row:1;width:100%;height:105px;align-self:center}
.note-heading>.motif-left{grid-column:1}.note-heading>.motif-right{grid-column:3}
.motif-right img{transform:scaleX(-1)}
.event-title-composition{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;gap:7px;align-items:center;width:100%;min-width:0}
.event-title-composition h3{grid-column:2;grid-row:1;min-width:0}
.event-title-composition>.motif-left{grid-column:1;grid-row:1}.event-title-composition>.motif-right{grid-column:3;grid-row:1}
.event-title-composition>.chapter-motif{width:100%;height:53px;align-self:center}
.event-title-composition.title-hanging-diyas>.chapter-motif{height:95px;align-self:start;margin-top:8px}
.event-title-composition.title-brass-bowl>.chapter-motif{height:42px}
.event-title-composition.title-champa>.chapter-motif{position:relative;top:auto;left:auto;width:100%;height:48px}
.event-title-composition.title-champa h3{font-size:clamp(28px,7.6vw,43px)}
.motif-champa{position:absolute;top:24px;left:calc(50% - 25px);width:50px;height:42px}

/* Generated silk poses gather from the centre on a shared, timed canvas. */
.book-theatre{position:relative;max-width:570px;margin:auto;overflow:clip;isolation:isolate;padding-top:0}
.ceremony-art.is-reveal-armed:has([data-curtain-sequence])::after{content:'';position:absolute;inset:0;z-index:5;background:#e6d8ee url('assets/curtain-frame-00.webp') center/100% 100% no-repeat;pointer-events:none}
.curtain-sequence{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.curtain-sequence canvas{display:block;width:100%;height:100%;filter:drop-shadow(0 7px 8px #5f3d692b)}
/* A soft lilac recess shades the silk without exposing a hard rail. */
.ceremony-art:has([data-curtain-sequence])::before{content:'';position:absolute;z-index:7;left:-12px;right:-12px;top:-7px;height:43px;background:linear-gradient(180deg,#785a8066,#8060892e 45%,transparent);filter:blur(5px);pointer-events:none}
.curtain-sequence::after{content:'';position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,var(--event-paper,#f5eef9),transparent 15%),linear-gradient(0deg,var(--event-paper,#f5eef9),transparent 15%);box-shadow:inset 0 20px 22px -20px #694d7699,inset 0 -20px 24px -22px #694d7666;pointer-events:none}
.book-theatre .heart-book{z-index:1}
.heart-chapter{padding-bottom:56px;background:#eee3f1}

/* The entire attendant canvas is above the photo, with its feet crossing the seam. */
.ceremony-art{isolation:isolate}
.ceremony-art[data-event-art="cutout"],.ceremony-visual>.ceremony-art[data-event-art="cutout"]{width:100%;height:auto;min-height:0;aspect-ratio:3/2;background:transparent;align-self:center}
.ceremony-art[data-event-art="cutout"]>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.ceremony-copy{z-index:8}
.ceremony-visual{--attendant-size:180px;position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding:0;min-width:0;isolation:isolate}.ceremony-visual>.ceremony-art{grid-area:2/1}
.flower-attendant-stage,.album-attendant-stage{position:absolute;z-index:7;top:0;width:var(--attendant-size);aspect-ratio:1;pointer-events:none;opacity:1}
.flower-attendant-stage{position:relative;grid-area:1/1;align-self:end;left:calc(var(--attendant-size)*-.234375);top:auto;margin-bottom:-8px}
/* Edge figures share the preceding footer's free space on narrow screens. */
.ceremony{pointer-events:none}.ceremony-copy{pointer-events:auto}
.ceremony-visual{pointer-events:none}
.ceremony+.ceremony>.ceremony-visual{margin-top:-84px}
.ceremony-visual[data-petal-side="right"]>.flower-attendant-stage{justify-self:end;left:auto;right:calc(var(--attendant-size)*-.234375)}
.flower-attendant-stage[data-petal-side="right"]>img{transform:scaleX(-1)}
.flower-attendant-stage img,.album-attendant-stage img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;opacity:1;filter:drop-shadow(0 4px 4px #2d173225)}
.attendant-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8}
[data-petal-attendant].is-playing>img{visibility:hidden}
.our-story{--story-gutter:26px;overflow:hidden;background:radial-gradient(ellipse at 10% 5%,#f7eef6 0,transparent 65%),#e5d4e7}
.story-art-group{width:100%;max-width:410px;margin:auto}
.story-ornament-space{position:relative;z-index:3;display:flex;justify-content:flex-start;align-items:flex-end;height:120px;min-height:0;margin-left:calc(-1 * var(--story-gutter));padding:0}
.story-ornament-space>.motif-rose-ribbon{width:93px;height:128px;transform:translate(-4.9724%,calc(2.8398% + 8px))}
.story-copy{position:relative}
.memory-chapter{background:radial-gradient(ellipse at 85% 8%,#4b2f55 0,transparent 65%),#33213f}
.memory-chapter>.chapter-heading{padding-bottom:24px}
.album-art-region{--attendant-size:172px;position:relative;padding-top:calc(var(--attendant-size) - 30px);isolation:isolate}
.album-attendant-stage{left:calc(var(--attendant-size)*-.1979167);top:5px}
.gallery-controls{gap:18px;flex-wrap:wrap}
#gallery-list{overflow-x:auto;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom}
#gallery-list::-webkit-scrollbar{display:none;width:0;height:0}
#gallery-list .memory{cursor:grab;user-select:none}
#gallery-list img{-webkit-user-drag:none;user-select:none}
#gallery-list.is-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
#gallery-list.is-dragging .memory{cursor:grabbing}
.guest-chapter{background:radial-gradient(ellipse at 15% 25%,#fcf7fa 0,transparent 58%),#eee3ef}
.guest-chapter>.chapter-heading{overflow:hidden;padding-inline:38px}
.guest-chapter>.chapter-heading::before,.guest-chapter>.chapter-heading::after{content:'';position:absolute;z-index:-1;top:30px;width:110px;height:170px;background:url('assets/decor-orchid-branch.webp') center/contain no-repeat;opacity:.22;pointer-events:none}
.guest-chapter>.chapter-heading::before{left:-40px;transform:rotate(20deg)}
.guest-chapter>.chapter-heading::after{right:-40px;transform:scaleX(-1) rotate(20deg)}
.guest-chapter .heading-note::after{content:'';display:block;width:68px;height:1px;margin:23px auto 0;background:linear-gradient(90deg,transparent,#bea17e,transparent)}
.guest-chapter .arrival-art{width:calc(100% - 36px);padding:7px;border:1px solid #cbb6cf;background:#fbf6fa;box-shadow:0 14px 35px #68487617}
.arrival-art>.amethyst-butterfly-field{inset:7px}
.arrival-art .amethyst-butterfly{opacity:1}
.date-chapter{padding:34px 22px 28px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 50%,#fff9f5 0,#f0e3ec 48%,#e7d9eb 100%);color:#50375d}
.countdown-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;min-height:0;max-width:430px;margin:auto;text-shadow:none}
.countdown-copy>.chapter-note{margin-bottom:10px;color:#78546f}
.countdown-copy>h2{max-width:100%;font-size:clamp(28px,7.5vw,39px);color:#543663}
.countdown-copy>.countdown-grid{width:100%;margin:19px auto 10px;flex-shrink:0}
.countdown-copy .countdown-grid strong{font-size:clamp(29px,8vw,38px);color:#674575}
.countdown-copy .countdown-grid span{font-size:11px;color:#775d7d}
.countdown-copy>p[data-date]{margin-top:4px;font-size:14px;line-height:1.7;color:#62466d}
.countdown-copy>.calendar-actions{margin-top:3px;gap:20px;color:#62466d}
.miniature-stage{position:relative;z-index:1;left:auto;bottom:auto;width:min(66vw,250px);height:auto;aspect-ratio:1;flex-shrink:0;transform:none;margin:0 auto 6px;opacity:1;pointer-events:none}
.miniature-stage img{width:100%;height:100%;object-fit:contain;object-position:bottom;opacity:1;filter:drop-shadow(0 5px 6px #67467424)}
.closing-chapter{overflow:hidden;isolation:isolate;padding-top:95px}
.closing-chapter>p,.closing-chapter>h2,.closing-chapter>button,.closing-chapter>footer{position:relative;z-index:2}
.cinema-petal-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:7}
.cinema-petal{position:absolute;display:block;background-repeat:no-repeat;pointer-events:none;will-change:transform,opacity}

/* A short portrait screen must contain the full cover animation above controls. */
@media(max-width:699px) and (orientation:portrait){
  .heart-book{--book-width:min(90vw,440px,calc((100svh - 96px)*.5625))}
}
@media(min-width:900px),(min-width:700px) and (orientation:landscape){
  .ceremony-visual{align-content:end}.ceremony:nth-child(even)>.ceremony-visual{order:2}.ceremony+.ceremony>.ceremony-visual{margin-top:0}
  .amethyst-hero{min-height:720px;height:100svh;height:100dvh}
  .hero-scene{inset:0;width:100%;background-size:cover;background-position:center 58%}
  /* Fill wide screens, keeping the ring beneath the title as the lower frame crops. */
  .hero-world,.hero-scene>.scene-film{inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none;object-fit:cover;object-position:center 58%}
  .amethyst-hero::after{background:linear-gradient(180deg,#21152f20,transparent 50%,transparent 83%,#21152f80)}
  .hero-copy{position:relative;inset:auto;width:min(100%,580px);margin:auto;padding:38px 35px 0;text-shadow:0 2px 12px #160b24a8}
  .hero-preface{font-size:13px;margin-bottom:14px}#hero-title{font-size:56px}#hero-title em{font-size:24px;margin:4px 0}
  .hero-date{font-size:18px;margin-top:18px}.hero-venue{font-size:13px;margin-top:8px}.hero-next{width:100%;bottom:29px}
  .note-heading{grid-template-columns:90px minmax(0,1fr) 90px;gap:18px;padding:78px 24px 52px}.note-heading h2{font-size:43px}.note-heading-copy>p{font-size:12px}.note-heading>.chapter-motif{height:145px}
  .ceremony-visual>.celebration-heading{min-height:210px;padding:24px 25px 24px 18px}
  .celebration-heading-copy h2{font-size:43px}
  .celebration-heading-copy>p:first-child{font-size:13px}
  .celebration-heading-copy .heading-note{font-size:15px}
  .book-theatre{max-width:610px}
  .ceremony-visual{--attendant-size:210px}.ceremony-visual .ceremony-art{height:100%;min-height:590px}.ceremony:first-child{align-items:end}.ceremony:first-child>.ceremony-copy{min-height:590px}.event-title-composition{grid-template-columns:48px minmax(0,1fr) 48px;gap:12px}.event-title-composition>.chapter-motif{height:68px}.event-title-composition.title-hanging-diyas>.chapter-motif{height:119px}.event-title-composition.title-brass-bowl>.chapter-motif{height:52px}
  .our-story{--story-gutter:0px}.story-art-group{max-width:none}.story-ornament-space{height:136px}.story-ornament-space>.motif-rose-ribbon{width:104px;height:144px}.album-art-region{--attendant-size:200px}
  .date-chapter{padding:38px 30px 30px}.miniature-stage{width:260px}
  .guest-chapter .arrival-art{width:100%}.guest-chapter>.chapter-heading::before{left:calc(50% - 350px)}.guest-chapter>.chapter-heading::after{right:calc(50% - 350px)}
}
@media(max-width:359px){
  .hero-copy{padding:35px 23px 0}.hero-preface{font-size:11px;margin-bottom:14px}#hero-title{font-size:45px}.hero-date{font-size:16px;margin-top:16px}.hero-venue{font-size:11px}
  .note-heading{grid-template-columns:38px minmax(0,1fr) 38px;padding-inline:10px;gap:4px}.note-heading h2{font-size:27px}.note-heading-copy>p{font-size:10px}.note-heading>.chapter-motif{height:90px}.ceremony-visual{--attendant-size:160px}.album-art-region{--attendant-size:155px}.event-title-composition{grid-template-columns:30px minmax(0,1fr) 30px;gap:5px}.event-title-composition.title-hanging-diyas>.chapter-motif{height:84px}.event-title-composition h3{font-size:28px}
  .celebration-heading-copy>p:first-child{font-size:11px}
  .celebration-heading-copy .heading-note{font-size:13px}
  .our-story{--story-gutter:25px}.ceremony-visual>.celebration-heading{min-height:185px;padding-right:14px;padding-left:8px}.celebration-heading-copy h2{font-size:27px}
}
@media(prefers-reduced-motion:reduce){.curtain-sequence,.ceremony-art.is-reveal-armed:has([data-curtain-sequence])::after,.cinema-petal-field{display:none}}