/* A peacock's visit, a feather left behind, and one continuous garden. */
:root { --garden-ink:#183f66; --garden-light:#fbf4e6; }
main { max-width:none; width:100%; box-shadow:none; }
body::before { content:none; }
.hero-art picture { display:block; position:absolute; inset:0; }
.hero-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.neelangan-hero { position:relative; min-height:0; height:calc(100 * var(--neel-scene-vh,1svh)); max-height:none; overflow:hidden; isolation:isolate; text-align:center; }
.hero-art { position:absolute; inset:0; z-index:-1; overflow:hidden; background:var(--paper); }
.hero-art::before { content:''; position:absolute; z-index:1; inset:0; pointer-events:none; background:radial-gradient(ellipse 57% 37% at 50% 43%,#faf4e8ed 8%,#faf4e8c9 49%,#faf4e800 100%); }
.hero-garden-layer { position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero-art::after { content:''; position:absolute; z-index:1; inset:auto 0 0; height:24%; background:linear-gradient(transparent,var(--paper)); pointer-events:none; }
.hero-copy { position:absolute; z-index:3; top:25%; left:50%; width:90%; max-width:530px; transform:translateX(-50%); padding:0 22px; margin:0; color:var(--garden-ink); text-shadow:0 1px 10px #fff9ee; }
.hero-blessing { margin:0 0 9px; font-family:var(--font-body); font-size:clamp(16px,calc(2.4 * var(--neel-scene-vh,1svh)),21px); font-style:italic; color:#31546f; }
#hero-title { font-family:var(--font-script); font-size:clamp(56px,min(20vw,calc(11 * var(--neel-scene-vh,1svh))),105px); font-weight:400; font-style:normal; line-height:.99; letter-spacing:0; color:#163f68; margin:0; }
#hero-title>span { display:block; white-space:nowrap; }
#hero-title em { display:block; font-family:var(--font-display); font-size:.38em; font-weight:400; line-height:1.15; color:#967035; margin:3px 0; }
.name-divider { position:relative; display:block; height:1px; width:85px; margin:17px auto 14px; background:linear-gradient(90deg,transparent,#ab833d,transparent); }
.name-divider::after { content:''; position:absolute; width:5px; height:5px; top:-2px; left:calc(50% - 2px); background:#ab833d; transform:rotate(45deg); }
.hero-date,.hero-venue { color:#1a466b; font-family:var(--font-body); font-size:clamp(17px,calc(2.6 * var(--neel-scene-vh,1svh)),23px); line-height:1.25; margin:0; }
.hero-date { font-weight:500; }
.hero-venue { font-style:italic; max-width:280px; margin:7px auto 0; }
.hero-next { position:absolute; z-index:5; bottom:max(22px,calc(3 * var(--neel-scene-vh,1svh))); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:140px; min-height:60px; padding:9px 18px 4px; border:0; border-radius:50%; color:#163f68; background:radial-gradient(ellipse,#faf4e8f5 0%,#faf4e8bf 45%,#faf4e800 75%); text-decoration:none; line-height:1; }
.discover-label { font-size:16px; font-style:italic; font-family:var(--font-body); }
/* Keep the original cue visible while the toolbar covers the large viewport. */
@supports(height:100lvh){.hero-next{bottom:max(22px,calc(3 * var(--neel-scene-vh,1svh)),calc(100lvh - 100svh + 22px));}}
.hero-next>span:last-child { font-family:Georgia,serif; font-size:28px; }
.garden-active .hero-next>span:last-child { animation:neel-discover 2400ms ease-in-out infinite; }
.invitation-chapter { padding-top:12px; }
/* Keep the last line of each invitation above the painted flowers. */
.ceremony-copy { padding-bottom:clamp(120px,38cqw,140px); }
@keyframes neel-discover { 0%,100% { transform:translateY(-2px); } 50% { transform:translateY(2px); } }
@media(min-aspect-ratio:4/3) {
  /* Keep the bird whole while a matching landscape garden fills the page. */
  .hero-copy { top:20%; }
  .hero-art::before { background:radial-gradient(ellipse 28% 48% at 50% 44%,#faf4e8eb 10%,#faf4e8a8 54%,#faf4e800 100%); }
}
@media(min-width:800px) {
  #events-list { display:grid; grid-template-columns:repeat(2,350px); justify-content:center; align-items:start; column-gap:clamp(40px,7vw,120px); row-gap:54px; padding-inline:24px; }
  .ceremony { width:350px; }
  .chapter-heading { padding-block:50px 36px; }
  .family-folio,.story-folio { max-width:440px; }.album-stage { max-width:430px; }
  #guest-guide { max-width:680px; gap:24px; }.venue-note { max-width:760px; }.venue-art img { max-height:470px; }
  .palace-panorama img { height:min(44vw,620px); object-fit:cover; }
}
@media(max-width:359px) {
  .hero-copy { width:94%; padding-inline:18px; } #hero-title { font-size:18.5vw; }
  .hero-blessing { font-size:15px; } .hero-date,.hero-venue { font-size:16px; }
}
@media(max-height:680px) and (orientation:portrait) {
  .hero-copy { top:23%; } #hero-title { font-size:calc(10.5 * var(--neel-scene-vh,1svh)); }.name-divider { margin-block:12px 9px; }.hero-blessing { margin-bottom:5px; }
}
@media(max-height:600px) and (orientation:landscape) {
  .hero-copy { top:22%; width:90%; max-width:none; } #hero-title { font-size:clamp(40px,calc(13 * var(--neel-scene-vh,1svh)),66px); }
  #hero-title>span { display:inline; } #hero-title em { display:inline; margin-inline:10px; font-size:.6em; }
  .hero-blessing { font-size:16px; }.hero-date,.hero-venue { font-size:17px; }.name-divider { margin-block:14px 10px; }
  .hero-next { bottom:9px; min-height:48px; }.discover-label { font-size:14px; }
}
@media(max-width:599px) {
  #hero-title { font-size:clamp(40px,11.5vw,48px); }
  .hero-blessing { font-size:12px; line-height:1.2; margin-bottom:5px; }
  #hero-title em { margin-block:2px; }
  .name-divider { width:50px; margin:10px auto 8px; }
  .hero-date,.hero-venue { font-size:13px; }
  .hero-venue { margin-top:4px; }
  .discover-label { font-size:12px; }
  .hero-next>span:last-child { font-size:20px; }
  /* Smaller brass faces retain their full finger-sized button area. */
  .controls { gap:0; }
  .controls button { background:none; border:0; box-shadow:none; }
  .controls button::before { inset:7px; border:1px solid #987334; border-radius:50%; background:radial-gradient(circle at 32% 26%,#d8bd7a,#bc964e 62%,#a17c3e); font-size:17px; box-shadow:0 2px 5px #73532026; }
  .controls button::after { inset:10px; }
  #menu-button::before { font-size:18px; }
  #menu-button[aria-expanded="true"]::before { font-size:21px; }
}
@media(prefers-reduced-motion:reduce) { .garden-active .hero-next>span:last-child { animation:none!important; transition:none!important; } }