/* Neelangan: a continuous ivory invitation, with cobalt-painted hanging cards. */
:root{
  --paper:#faf4e8;--paper-deep:#f1e6d0;--ink:#174a82;--accent:#976d30;
  --gold:#bc964e;--pink:#ce7890;--line:#ccaf73;
  --font-display:"Cormorant Garamond",Georgia,serif;--font-body:"EB Garamond",Georgia,serif;
  --font-script:"Pinyon Script","Cormorant Garamond",serif;
  --control-bg:#bc964e;--control-ink:#faf4e8;--control-line:#a17a39;
  --menu-bg:#faf4e8;--menu-ink:#174a82;--dialog-bg:#faf4e8;--dialog-ink:#174a82;--field-bg:#f6eddd;
  --memory-gap:0px;--memory-inset:0px;--memory-width:100%;
}
html,body{background:var(--paper)}
body{font-size:17px;line-height:1.55}
main{width:100%;max-width:600px;margin-inline:auto;overflow:hidden}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.1}
h2{font-size:36px;margin-bottom:18px}
p{line-height:1.55}
button,a{touch-action:manipulation}
button:focus-visible,a:focus-visible{outline-color:var(--ink)}
.noscript-note{position:fixed;inset:0;z-index:200;display:grid;place-content:center;padding:2rem;background:var(--paper);text-align:center}
#load-message:not([hidden]):not(.load-error){position:fixed;z-index:111;left:0;right:0;bottom:84px;font-size:15px;text-align:center;pointer-events:none}
.chapter-heading{text-align:center;padding:35px 25px 25px;max-width:420px;margin-inline:auto}
.chapter-heading h2{margin:0}
.chapter-heading>p{font-size:16px;line-height:1.5;margin:12px auto 0;max-width:290px}
.quiet-link{border:0;background:transparent;min-height:44px;padding:9px 5px;font-size:14px;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px}

/* The frame is sliced, preserving its ornament while edited copy grows. */
.invitation-chapter{padding:29px 15px 22px}
.family-folio{position:relative;isolation:isolate;container-type:inline-size;width:100%;max-width:390px;margin-inline:auto}
.family-folio::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:1px solid transparent;border-image:url("assets/family-frame-v2.webp") 210 150 260 fill / 20.508cqw 14.648cqw 25.391cqw / 0 stretch}
.family-letter{text-align:center;padding:33cqw 17% 30cqw;min-height:605px}
.letter-blessing{font-size:16px;line-height:1.5;margin:0 0 14px;overflow-wrap:anywhere}
.letter-request{font-size:16px;line-height:1.5;margin:0 0 20px}
.letter-name{font-size:43px;font-style:italic;line-height:1.03;margin:0 0 8px;overflow-wrap:anywhere}
.letter-parents{margin:0 auto;max-width:245px;font-size:15px}
.letter-parents>span{display:block;font-size:13px;font-style:italic;line-height:1.3;margin-bottom:4px}
.letter-parents p{font-size:15px;line-height:1.4;margin:0;overflow-wrap:anywhere}
.letter-ampersand{font-family:var(--font-script);font-size:33px;color:var(--gold);line-height:1.2;margin:13px 0 12px}
.letter-date{font-size:19px;line-height:1.3;margin:24px 0 9px}
.letter-venue{font-size:17px;font-style:italic;line-height:1.35;margin:0 auto;max-width:220px}

/* Every celebration hangs within the same bordered card, never beside it. */
.celebration-heading{padding-top:24px;padding-bottom:29px}
.celebration-heading h2{font-size:35px}
#events-list{display:flex;flex-direction:column;align-items:center;gap:58px;padding:0 0 29px;overflow:visible}
.ceremony{position:relative;isolation:isolate;container-type:inline-size;width:min(300px,calc(100% - 44px));margin:0;padding:0 0 40px;transform-origin:50% 0;overflow:visible}
.event-card-frame{position:absolute;inset:0;z-index:-1;pointer-events:none;border:1px solid transparent;border-image:url("assets/event-frame-v2.webp") 180 120 360 fill / 17.578cqw 11.719cqw 35.156cqw / 0 stretch}
/* The generated frame includes its pearl fringe; this hook is available for motion. */
.event-card-tassels{position:absolute;inset:auto 0 0;height:40px;pointer-events:none}
.ceremony-copy{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:438px;width:100%;padding:29px 39px 77px}
.ceremony-art{position:relative;flex:none;width:70px;height:70px;aspect-ratio:1;margin:0 auto 6px;background:transparent;overflow:visible}
.ceremony-art>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;mask-image:none}
.ceremony-copy h3{font-family:var(--font-script);font-size:43px;font-weight:400;line-height:1.13;letter-spacing:0;max-width:100%;margin:0 0 11px;overflow-wrap:anywhere}
.ceremony[data-scene="vows"] .ceremony-copy h3{font-size:39px}
.ceremony-date{font-size:15px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;margin:0 0 5px}
.ceremony-time{font-size:15px;line-height:1.3;letter-spacing:.08em;color:#b65873;margin:0 0 14px}
.ceremony-venue{font-size:18px;font-style:italic;line-height:1.3;margin:0 auto 10px;max-width:220px}
.ceremony-description{font-size:15px;line-height:1.45;margin:0 0 13px;max-width:225px}
.ceremony:has(.ceremony-description) .event-card-frame{border-image-slice:180 320 830 fill;border-image-width:17.578cqw 31.25cqw 81.055cqw}
.ceremony:has(.ceremony-description) .ceremony-copy{padding-bottom:130px}
.ceremony:has(.ceremony-description) .ceremony-description{max-width:180px}
.ceremony-attire{font-size:14px;line-height:1.4;margin:0 0 4px;max-width:220px}
.ceremony-attire .label{display:none}
.ceremony-map{display:inline-flex;justify-content:center;align-items:center;min-height:44px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8b602c;text-decoration-color:var(--gold);text-underline-offset:4px;max-width:100%;overflow-wrap:anywhere}
.card-entering{animation:card-arrive 2400ms cubic-bezier(.2,.65,.25,1) both}
@keyframes card-arrive{0%{transform:translateY(-12px) rotate(-.65deg)}45%{transform:translateY(0) rotate(.35deg)}75%{transform:rotate(-.15deg)}100%{transform:none}}

.story-chapter{padding:39px 18px 20px}
.story-folio{position:relative;isolation:isolate;container-type:inline-size;max-width:385px;margin-inline:auto}
.story-folio::before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid transparent;border-image:url("assets/story-frame-v2.webp") 200 145 220 fill / 19.531cqw 14.16cqw 21.484cqw / 0 stretch;pointer-events:none}
.story-copy{text-align:center;padding:27cqw 18% 25cqw;min-height:440px}
.story-copy h2{font-size:34px;line-height:1.1;margin:0 0 21px}
.story-copy>p[data-bind="story.text"]{font-size:16px;line-height:1.65;margin:0 0 19px}
.story-art{width:100%;margin:0 0 20px}
.story-art img{width:100%;height:auto;max-height:310px;object-fit:contain}
#story-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 13px;margin:18px 0;font-size:14px;font-style:italic}
#story-tags>span{max-width:100%;overflow-wrap:anywhere}
.story-signature{font-family:var(--font-display);font-size:28px;font-style:italic;line-height:1.2;margin:19px 0 10px}
.story-signature em{font-size:.8em;color:var(--gold)}
.story-hashtag{font-size:14px;line-height:1.4;margin:0;overflow-wrap:anywhere}

.memory-chapter{padding:18px 0 20px}
.memory-chapter .chapter-heading{padding:25px 20px 16px}
.album-stage{width:calc(100% - 38px);max-width:385px;margin-inline:auto;overflow:hidden}
#gallery-list{display:flex;gap:0;padding:0;scroll-padding:0;scrollbar-width:none}
#gallery-list::-webkit-scrollbar{display:none}
.memory{flex:0 0 100%;position:relative;isolation:isolate;min-width:0;padding:50px 33px 18px;background:transparent}
.memory::before{content:"";position:absolute;inset:0 0 43px;z-index:1;pointer-events:none;border:1px solid transparent;border-image:url("assets/gallery-frame-v2.webp") 200 130 180 / 58px 38px 52px / 0 stretch}
.memory img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border:0;border-radius:0;box-shadow:none}
.memory-caption{display:block;font-size:16px;font-style:italic;text-align:center;line-height:1.3;margin:13px 0 0;padding:0 5px;overflow-wrap:anywhere}
.memory:focus-visible{outline-offset:-4px}
.gallery-controls{display:flex;gap:14px;margin:0 auto;max-width:340px;align-items:center;justify-content:center}
.gallery-controls button{min-width:44px;min-height:44px;border:0;padding:3px 9px;background:transparent;font-size:30px;line-height:1}
.gallery-controls #gallery-autoplay{font-family:var(--font-body);font-size:13px;line-height:1.3;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
#gallery-count{font-size:14px;min-width:28px;text-align:center}
.gallery-thumbnails{display:flex;justify-content:flex-start;gap:9px;width:max-content;max-width:calc(100% - 80px);margin:4px auto 11px;padding:3px;overflow-x:auto;scrollbar-width:none}
.gallery-thumbnails::-webkit-scrollbar{display:none}
.gallery-thumbnail{flex:0 0 46px;width:46px;height:56px;padding:2px;border:1px solid transparent;background:transparent;opacity:.65}
.gallery-thumbnail img{display:block;width:40px;height:50px;object-fit:cover}
.gallery-thumbnail[aria-current="true"]{border-color:var(--gold);opacity:1}

.travel-chapter{padding:12px 16px 20px}
.travel-chapter>.chapter-heading{padding:29px 12px 24px}
#guest-guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 11px;max-width:445px;margin:0 auto}
.guest-note{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;min-height:222px;padding:25px 19px 27px;text-align:center}
.guest-note::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:1px solid transparent;border-image:url("assets/guest-frame-v2.webp") 170 fill / 28px / 0 stretch}
.guest-note-number{position:relative;display:block;font-size:0;width:31px;height:32px;margin:0 0 10px;color:var(--gold);line-height:1}
.guest-note-number::before{content:"✿";font-family:Georgia,serif;font-size:27px;position:absolute;inset:0}
.guest-note:nth-child(2) .guest-note-number::before{content:"⌂";font-size:30px}
.guest-note:nth-child(3) .guest-note-number::before{content:"❦"}
.guest-note:nth-child(4) .guest-note-number::before{content:"#";font-size:28px}
.guest-note-copy{min-width:0}
.guest-note-copy h3{font-family:var(--font-display);font-size:23px;line-height:1.15;margin:0 0 9px;overflow-wrap:anywhere}
.guest-note-copy p{font-size:14px;line-height:1.45;margin:0;overflow-wrap:anywhere}
.venue-note{max-width:345px;margin:27px auto 0;text-align:center}
.venue-note h3{font-size:24px;line-height:1.2;margin:0 0 8px}
.venue-note p{font-size:15px;line-height:1.4;margin:0 0 3px}
.venue-note a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-size:14px;text-decoration-color:var(--gold);text-underline-offset:4px}

.reply-chapter{text-align:center;padding:32px 32px 26px}
.reply-copy{max-width:330px;margin-inline:auto}
.reply-copy h2{font-family:var(--font-script);font-size:48px;line-height:1.12;margin:0 0 19px}
.reply-copy>p[data-bind]{font-size:17px;line-height:1.55;margin:0 auto 22px}
.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;max-width:100%;padding:9px 25px;border:1px solid var(--gold);border-radius:3px;background:#eddfc1;color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.3;box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px rgb(188 150 78 / .4)}
#rsvp-note{font-size:13px;line-height:1.45;margin:14px auto 0;max-width:290px}
.calendar-actions{gap:10px 24px;margin:22px auto 0;font-size:14px}
.calendar-actions a{display:inline-flex;align-items:center;min-height:44px;text-decoration-color:var(--gold);text-underline-offset:4px}
.date-chapter{text-align:center;padding:22px 0 0}
.date-chapter h2{font-size:34px;margin:0 20px 25px}
.countdown-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0 auto 21px;width:calc(100% - 64px);max-width:350px}
.countdown-grid>div{min-width:0}
.countdown-grid strong{display:block;font-family:var(--font-display);font-size:42px;font-weight:400;line-height:1.05;font-variant-numeric:lining-nums tabular-nums}
.countdown-grid span{display:block;font-size:13px;line-height:1.4;margin-top:5px}
.save-date{font-size:17px;margin:0 20px 19px}
.palace-panorama{width:100%;margin:0;overflow:hidden}
.palace-panorama img{width:100%;height:auto;display:block;mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent)}
.closing-chapter{text-align:center;padding:20px 31px 96px}
.closing-chapter h2{font-size:36px;font-style:italic;line-height:1.2;margin:0 0 13px;overflow-wrap:anywhere}
.closing-chapter h2 em{color:var(--gold);font-size:.8em;font-weight:400}
.closing-chapter>p{font-size:15px;line-height:1.5;max-width:320px;margin:0 auto 12px}
.closing-chapter>p[data-date]{font-style:italic;margin-bottom:6px}
.closing-chapter footer{font-size:12px;margin-top:17px}
.closing-chapter footer a{text-decoration:none}

/* Small brass controls remain reachable without covering the invitation copy. */
.controls{left:auto;right:max(13px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:9px;pointer-events:none}
.controls button{position:relative;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #987334;border-radius:50%;background:radial-gradient(circle at 32% 26%,#d8bd7a,#bc964e 62%,#a17c3e);color:#fff8e5;font-size:0;line-height:1;pointer-events:auto;box-shadow:0 2px 5px rgb(115 83 32 / .15)}
.controls button::before{position:absolute;inset:0;display:grid;place-items:center;font-family:Georgia,serif;font-size:24px;font-weight:400;line-height:1}
.controls button::after{content:"";position:absolute;inset:4px;border:1px solid rgb(255 246 215 / .55);border-radius:50%;pointer-events:none}
#music-button::before{content:"♪"}
#music-button[aria-pressed="false"]::before{opacity:.65}
#menu-button::before{content:"✥";font-size:25px}
#menu-button[aria-expanded="true"]::before{content:"×";font-size:28px}
.nav-menu{right:max(13px,env(safe-area-inset-right));bottom:127px;max-height:calc(100dvh - 160px);width:min(300px,calc(100vw - 26px));padding:24px;border:1px solid var(--gold);border-radius:8px;background:var(--paper);box-shadow:0 8px 27px rgb(109 85 43 / .12)}
.nav-heading{font-family:var(--font-display);font-size:27px;line-height:1.2;text-transform:none;letter-spacing:0;margin:0 0 14px}
.nav-menu a{min-height:44px;font-size:17px;line-height:1.3;gap:12px;padding-block:10px;border-color:rgb(188 150 78 / .35)}
.nav-number{font-size:12px;color:var(--gold);opacity:1}
.guest-dialog{border-color:var(--gold);border-radius:6px;background:var(--paper);font-family:var(--font-body)}
.guest-dialog h2{font-family:var(--font-script);font-size:42px;line-height:1.1}
.guest-dialog::backdrop{background:rgb(40 54 66 / .65)}
.form-field,.event-choice{font-size:16px}
.form-status{font-size:15px}
.dialog-head button{font-size:15px}
.photo-dialog{padding:18px}
.photo-controls button{font-size:15px;border-color:var(--gold)}
#photo-caption{font-size:19px;font-style:italic}

@media(max-width:359px){
  .hero-copy{padding-inline:24px;padding-top:48px}
  #hero-title{font-size:58px}
  .hero-date,.hero-venue{font-size:17px}
  .name-divider{margin-block:18px 14px}
  .family-letter{padding-inline:17%;min-height:590px}
  .letter-name{font-size:39px}
  .letter-blessing,.letter-request{font-size:15px}
  .letter-parents p{font-size:14px}
  .celebration-heading h2{font-size:31px}
  .ceremony-copy{padding-inline:37px;min-height:431px}
  .ceremony-copy h3{font-size:39px}
  .ceremony[data-scene="vows"] .ceremony-copy h3{font-size:35px}
  .ceremony-venue{font-size:17px}
  .story-copy{padding-inline:18%}
  .story-copy h2{font-size:31px}
  .story-copy>p[data-bind="story.text"]{font-size:15px}
  .memory{padding-inline:29px;padding-top:47px}
  .memory::before{border-image-width:55px 34px 49px}
  #guest-guide{gap:12px 8px}
  .guest-note{padding-inline:15px;min-height:230px}
  .guest-note-copy h3{font-size:21px}
  .guest-note-copy p{font-size:13px}
  .reply-chapter{padding-inline:27px}
  .reply-copy h2{font-size:44px}
  .countdown-grid{width:calc(100% - 52px)}
  .countdown-grid strong{font-size:37px}
  .countdown-grid span{font-size:12px}
}
@media(min-width:600px){
  .hero-copy{padding-top:8svh}
  .neelangan-hero{min-height:800px}
  .family-folio{max-width:410px}
  .family-letter{min-height:650px;padding-inline:17%}
  .letter-name{font-size:48px}
  .letter-blessing,.letter-request{font-size:17px}
  .letter-parents p{font-size:16px}
  .letter-date{font-size:21px}
  .letter-venue{font-size:18px}
  .celebration-heading{padding-top:34px;padding-bottom:33px}
  .ceremony{width:340px}
  .ceremony-copy{min-height:453px;padding-inline:44px;padding-bottom:86px}
  .ceremony-copy h3{font-size:46px}
  .ceremony-art{width:76px;height:76px}
  .ceremony-date{font-size:16px}
  #events-list{gap:62px}
  .story-folio{max-width:410px}
  .story-copy{min-height:455px}
  .story-copy h2{font-size:36px}
  .album-stage{max-width:400px}
  .travel-chapter{padding-inline:31px}
  .guest-note{min-height:225px;padding:29px 25px}
  .guest-note-copy p{font-size:15px}
  .guest-note-copy h3{font-size:25px}
  .reply-chapter{padding-top:44px}
  .reply-copy h2{font-size:52px}
  .countdown-grid strong{font-size:47px}
  .closing-chapter{padding-top:30px}
  .closing-chapter h2{font-size:43px}
  .controls{right:22px;bottom:22px}
}
@media(prefers-reduced-motion:reduce){
  .gate-touch{display:none}
  #hero-film{display:none}
  #gate.is-leaving{transition:none}
  .card-entering{animation:none;transform:none}
}