/* DW Invitation Studio — invitation runtime. Palette arrives as CSS vars on <body>. */
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-var.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-var-italic.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-var.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-var.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }

:root { --ease: cubic-bezier(.22,.61,.36,1); --serif: "Cormorant", "Bodoni 72", Didot, Georgia, "Noto Serif Devanagari", serif; --sans: "Jost", "Avenir Next", system-ui, "Noto Sans Devanagari", sans-serif; --caps: "Cinzel", var(--serif); }
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { --a: #c19a4b; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; height: 100svh; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
img { max-width: 100%; display: block; }

/* ---------- controls ---------- */
.ctl { position: fixed; z-index: 60; top: 14px; right: 14px; display: flex; gap: 8px; }
.ctl button { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--paper) 82%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--a) 60%, transparent); backdrop-filter: blur(8px); font: 500 11px var(--sans); letter-spacing: .08em; display: grid; place-items: center; transition: transform .4s var(--ease); }
.ctl button:hover { transform: scale(1.08); }
.ctl .bars { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.ctl .bars i { width: 2px; height: 4px; background: currentColor; }
.ctl .on .bars i { animation: bar 1s ease-in-out infinite; animation-delay: calc(var(--i) * -.23s); }
@keyframes bar { 0%,100% { height: 3px; } 50% { height: 14px; } }

/* ---------- cover (shared) ---------- */
#cover { position: fixed; inset: 0; z-index: 50; background: radial-gradient(circle at 50% 25%, var(--bg), var(--bg2)); color: var(--onbg); display: grid; place-items: center; overflow: hidden; transition: opacity 1.2s var(--ease) 1.5s, visibility 0s linear 2.8s; perspective: 1600px; }
#cover.open { opacity: 0; visibility: hidden; pointer-events: none; }
.cover-copy { position: relative; z-index: 8; text-align: center; padding: 24px; transition: opacity .6s var(--ease); }
#cover.open .cover-copy { opacity: 0; }
.cover-copy .mono { font: 500 clamp(44px, 12vw, 84px)/1 var(--serif); font-style: italic; letter-spacing: .02em; }
.cover-copy .mono b { font-weight: 400; font-style: normal; font-size: .5em; vertical-align: .35em; margin: 0 .2em; color: var(--a); }
.cover-copy .eyebrow { font: 500 11px var(--caps); letter-spacing: .34em; text-transform: uppercase; opacity: .85; margin-bottom: 18px; }
.tap { margin-top: 30px; display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border: 1px solid var(--a); border-radius: 40px; font: 500 11px var(--sans); letter-spacing: .28em; text-transform: uppercase; color: inherit; position: relative; overflow: hidden; background: rgba(0,0,0,.12); }
.tap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); animation: sweep 3.6s ease-in-out infinite; }
@keyframes sweep { 0%,55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.tap .ring { width: 8px; height: 8px; border-radius: 50%; background: var(--a); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--a) 70%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }

/* ---------- opener: envelope (Lifafa) — ivory paper, maroon liner, DW crest in wax ---------- */
#cover.o-envelope { background: var(--bg2); transition: opacity 1.1s var(--ease) 3.3s, visibility 0s linear 4.5s; }
.env { position: absolute; inset: 0; perspective: 1500px; overflow: hidden; }
.env-liner { position: absolute; inset: 0; background: var(--liner), radial-gradient(circle at 50% 8%, var(--bg), var(--bg2)); }
.env-card { position: absolute; inset: 10% 7% 5%; border-radius: 5px; overflow: hidden; background: var(--bg2); box-shadow: 0 14px 34px rgba(0,0,0,.45); transform: translateY(16%); transition: transform 1.3s var(--ease) 1.25s, inset 1.15s var(--ease) 2.35s, border-radius 1.15s var(--ease) 2.35s; }
.env-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.env-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(63,18,32,.5), rgba(63,18,32,.72) 50%, rgba(63,18,32,.94)); }
.env-card-copy { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; text-align: center; color: #fff; padding: 20px; gap: 12px; }
.env-card-copy .together { font: italic 400 clamp(13px, 3.4vw, 16px) var(--serif); }
.env-names { font: 400 clamp(38px, 11vw, 72px)/1 var(--serif); } .env-names i { display: block; font-size: .42em; color: var(--onbg); margin: .2em 0; }
.env-card-copy .when { font: 500 clamp(10px, 2.6vw, 12px) var(--caps); letter-spacing: .28em; text-transform: uppercase; color: var(--onbg); }
#cover.open .env-card { transform: none; inset: 0; border-radius: 0; }

.env-front { position: absolute; inset: 0; transition: transform 1.35s var(--ease) 2.2s; filter: drop-shadow(0 -8px 16px rgba(40,20,10,.28)); }
#cover.open .env-front { transform: translateY(103%); }
.env-pocket, .env-bottom, .env-flap { position: absolute; inset: 0; }
.env-pocket { clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%); background: var(--emboss), linear-gradient(100deg, #efe3cc, #faf5ec 30%, #faf5ec 70%, #ede0c8); }
.env-bottom-wrap { position: absolute; inset: 0; filter: drop-shadow(0 -4px 9px rgba(60,35,10,.2)); }
.env-bottom { clip-path: polygon(0 100%, 50% 42%, 100% 100%); background: var(--emboss), linear-gradient(180deg, #fdf9f1, #f3ead9); }
.env-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.env-flap-wrap { position: absolute; inset: 0; transform-origin: 50% 0; transition: transform 1.5s var(--ease) .6s; filter: drop-shadow(0 10px 16px rgba(40,20,10,.34)); z-index: 3; }
.env-flap { clip-path: polygon(0 0, 100% 0, 50% 54%); background: var(--emboss), linear-gradient(180deg, #f1e6d0, #fbf7ee 75%); }
#cover.open .env-flap-wrap { transform: rotateX(176deg); }

.seal { position: absolute; z-index: 6; left: 50%; top: 54%; width: clamp(124px, 35vw, 176px); aspect-ratio: 1; translate: -50% -50%; padding: 0; border-radius: 50%; filter: drop-shadow(0 10px 16px rgba(21,10,14,.42)); animation: sealbreathe 4.5s ease-in-out infinite alternate; transition: transform .8s var(--ease), opacity .6s var(--ease) .15s; -webkit-tap-highlight-color: transparent; }
.seal svg { width: 100%; height: 100%; display: block; }
.seal-mark { filter: brightness(1.22) saturate(1.05) drop-shadow(0 1.6px 1.2px rgba(20,4,9,.6)); }
@keyframes sealbreathe { to { transform: scale(1.035); } }
.seal:active { transform: scale(.95); }
#cover.open .seal { animation: none; transform: translateY(-34px) rotate(-12deg) scale(.86); opacity: 0; }
.env-to, .env-hint { position: absolute; left: 0; right: 0; z-index: 5; text-align: center; transition: opacity .5s var(--ease); pointer-events: none; }
.env-to { top: 72%; font: italic 400 clamp(19px, 5vw, 25px) var(--serif); color: #8a6d2e; }
.env-hint { top: calc(72% + 46px); font: 500 10px var(--caps); letter-spacing: .34em; text-transform: uppercase; color: #8a6d2e; animation: hint 2.6s ease-in-out infinite; }
@keyframes hint { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
#cover.open .env-to, #cover.open .env-hint { opacity: 0; animation: none; }
body.op-envelope .ch { transition-delay: calc(3.5s + var(--i) * 55ms); }
body.op-envelope .hero .rv { transition-delay: 3.9s; }

.h-lifafa { color: #fff; } .h-lifafa::before { display: none; }
.h-lifafa .bgimg { position: absolute; inset: 0; }
.h-lifafa::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(63,18,32,.5), rgba(63,18,32,.72) 50%, rgba(63,18,32,.94)); }
.h-lifafa h1 .amp, .h-lifafa .when { color: var(--onbg); }

/* ---------- opener: jharokha (doors) ---------- */
.o-jharokha .door { position: absolute; top: 0; bottom: 0; width: 50.2%; transition: transform 2.2s var(--ease) .15s; z-index: 5; box-shadow: 0 0 60px rgba(0,0,0,.5); }
.o-jharokha .door svg { width: 100%; height: 100%; }
.o-jharokha .door.l { left: 0; transform-origin: left center; }
.o-jharokha .door.r { right: 0; transform-origin: right center; }
.o-jharokha.open .door.l { transform: rotateY(-104deg); }
.o-jharokha.open .door.r { transform: rotateY(104deg); }
.o-jharokha .cover-copy { background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); padding: 50px 40px; }

/* ---------- opener: toran (garlands) ---------- */
.o-toran .strings { position: absolute; inset: 0 0 auto 0; display: flex; justify-content: space-between; padding: 0 2vw; z-index: 5; }
.o-toran .str { transform-origin: top center; animation: sway 4.5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.6s); transition: transform 1.5s var(--ease); transition-delay: calc(var(--i) * 70ms); }
.o-toran .str svg { height: calc(var(--len) * 1svh); width: auto; }
@keyframes sway { from { rotate: -2.2deg; } to { rotate: 2.2deg; } }
.o-toran.open .str { transform: translateY(-112%); }
.o-toran .art-sun { position: absolute; width: min(120vw, 760px); left: 50%; top: 50%; translate: -50% -50%; z-index: 1; }
.spin { animation: spin 80s linear infinite; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.o-toran .cover-copy { margin-top: 8svh; }

/* ---------- opener: diya ---------- */
.o-diya .art-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.tw { animation: tw 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
@keyframes tw { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.o-diya .lamps { position: absolute; left: 0; right: 0; bottom: 12svh; display: flex; justify-content: center; gap: clamp(6px, 3vw, 28px); z-index: 9; }
.o-diya .diya { width: clamp(54px, 15vw, 92px); cursor: pointer; transition: transform .4s var(--ease); }
.o-diya .diya:hover { transform: translateY(-4px); }
.diya .flame { opacity: 0; transform: scale(.2); transform-origin: 0 -6px; transition: opacity .5s, transform .7s var(--ease); }
.diya.lit .flame { opacity: 1; transform: none; animation: flick 1.6s ease-in-out infinite alternate; }
@keyframes flick { from { transform: scale(1) skewX(-2deg); } to { transform: scale(1.07, 1.12) skewX(3deg); } }
.o-diya .cover-copy { margin-top: -14svh; }
.o-diya .cover-copy .mono { opacity: .12; transition: opacity 1s; }
.o-diya[data-lit="1"] .mono { opacity: .3; } .o-diya[data-lit="2"] .mono { opacity: .5; } .o-diya[data-lit="3"] .mono { opacity: .7; } .o-diya[data-lit="4"] .mono { opacity: .85; } .o-diya[data-lit="5"] .mono { opacity: 1; }
.o-diya .tap { display: none; }
.o-diya .hint { margin-top: 22px; font: 400 11px var(--sans); letter-spacing: .3em; text-transform: uppercase; opacity: .8; }

/* ---------- opener: lotus ---------- */
.o-lotus .bloom { position: absolute; left: 50%; bottom: 8svh; width: min(150vw, 900px); translate: -50% 0; z-index: 5; transition: transform 2.4s var(--ease), opacity 1.2s var(--ease) 1.2s; transform-origin: 50% 85%; }
.petal { transform-box: fill-box; transform-origin: 50% 100%; rotate: calc(var(--ang) * .12); transition: rotate 2s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.o-lotus .petal { animation: breathe 5s ease-in-out infinite alternate; }
@keyframes breathe { to { rotate: calc(var(--ang) * .2); } }
.o-lotus.open .petal, .hero .petal { rotate: var(--ang); animation: none; }
.o-lotus.open .bloom { transform: scale(2.6) translateY(10%); opacity: 0; }
.o-lotus .cover-copy { margin-top: -22svh; }
.o-lotus .art-ripples { position: absolute; bottom: 2svh; left: 50%; translate: -50% 0; width: min(140vw, 900px); }
.rip { animation: rip 5s ease-out infinite; animation-delay: calc(var(--i) * -1.25s); transform-origin: center; transform-box: fill-box; }
@keyframes rip { from { opacity: .9; scale: .4; } to { opacity: 0; scale: 1.25; } }

/* ---------- opener: window (aircraft) ---------- */
.o-window { background: linear-gradient(160deg, #e9e6df, #c9c5bb) !important; color: #2a2f3d !important; }
.o-window .pane { position: relative; width: min(64vw, 300px); aspect-ratio: 3/4.1; border-radius: 46% / 36%; background: #d9d6ce; box-shadow: inset 0 0 0 10px #f3f1ea, inset 0 0 0 12px #b9b5aa, 0 30px 60px rgba(0,0,0,.25); overflow: hidden; z-index: 5; transition: transform 1.9s var(--ease) .9s; }
.o-window .sky { position: absolute; inset: 12px; border-radius: inherit; background: linear-gradient(180deg, #27406f 0%, #e98a5a 58%, #f6cf8a 78%, #f9e7c0 100%); overflow: hidden; }
.o-window .sunb { position: absolute; left: 50%; top: 58%; width: 38%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(#fff3c9, #f9b44f); }
.o-window .cloud { position: absolute; height: 9%; width: 60%; border-radius: 40px; background: rgba(255,255,255,.75); filter: blur(3px); animation: drift 16s linear infinite; }
.o-window .cloud.c2 { top: 74%; width: 80%; animation-duration: 24s; opacity: .7; } .o-window .cloud.c1 { top: 64%; }
@keyframes drift { from { transform: translateX(120%); } to { transform: translateX(-160%); } }
.o-window .wing { position: absolute; right: -6%; bottom: 6%; width: 78%; height: 16%; background: linear-gradient(#f4f4f4, #aeb4bf); clip-path: polygon(0 60%, 100% 0, 100% 100%, 12% 100%); }
.o-window .shade { position: absolute; inset: 12px; border-radius: inherit; background: repeating-linear-gradient(180deg, #ebe8e0 0 10px, #dedad0 10px 11px); transition: transform 1.3s var(--ease); display: grid; align-content: end; justify-items: center; padding-bottom: 14px; }
.o-window .shade::after { content: ""; width: 34%; height: 8px; border-radius: 6px; background: #bdb8ab; box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.o-window.open .shade { transform: translateY(-96%); }
.o-window.open .pane { transform: scale(7); }
.o-window .cover-copy { position: absolute; bottom: 5svh; left: 0; right: 0; }
.o-window .cover-copy .mono { font-size: clamp(30px, 8vw, 46px); color: #1d2a4d; }
.o-window .cover-copy .eyebrow { color: #1d2a4d; margin-bottom: 8px; }
.o-window .tap { margin-top: 14px; background: #1d2a4d; color: #f3ead2; border-color: #1d2a4d; }
.o-window .seat { position: absolute; top: 5svh; left: 0; right: 0; text-align: center; font: 500 11px var(--caps); letter-spacing: .4em; color: #1d2a4d; opacity: .7; }

/* ---------- invitation body ---------- */
main { opacity: 0; transition: opacity 1.4s var(--ease) 1.2s; }
body.opened main { opacity: 1; }
section { position: relative; padding: clamp(64px, 11vw, 120px) 22px; text-align: center; }
.wrap { max-width: 720px; margin: 0 auto; position: relative; z-index: 2; }
.eyebrow { font: 500 11px var(--caps); letter-spacing: .32em; text-transform: uppercase; color: color-mix(in srgb, var(--a) 78%, var(--ink)); }
h2 { font: 400 clamp(34px, 7vw, 54px)/1.08 var(--serif); margin: 12px 0 0; }
.rule { width: 72px; height: 1px; background: var(--a); margin: 22px auto 0; transform: scaleX(0); transition: transform 1.2s var(--ease) .2s; }
.in .rule, .rule.in { transform: scaleX(1); }
.rv { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.rv.in { opacity: 1; transform: none; }

.hero { min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding-top: 90px; padding-bottom: 90px; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: var(--pattern); opacity: .13; }
.hero .together { font: 400 clamp(14px, 3.6vw, 17px) var(--serif); font-style: italic; letter-spacing: .04em; }
.hero h1 { font: 400 clamp(52px, 15vw, 118px)/.95 var(--serif); margin: 18px 0; }
.hero h1 > span { display: block; }
.hero h1 .amp { font-style: italic; font-size: .42em; color: var(--a); margin: .18em 0; }
.hero .when { font: 500 clamp(12px, 3vw, 14px) var(--caps); letter-spacing: .3em; text-transform: uppercase; margin-top: 22px; }
.hero .where { font: 400 clamp(17px, 4vw, 21px) var(--serif); font-style: italic; margin-top: 8px; opacity: .85; }
.hero .invite-line { max-width: 30ch; margin: 14px auto 0; font-size: 15px; opacity: .8; }
.ch { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(1.6s + var(--i) * 55ms); }
body.opened .ch { opacity: 1; transform: none; }
.scrollcue { position: absolute; bottom: 22px; left: 50%; width: 1px; height: 46px; background: linear-gradient(var(--a), transparent); animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* hero variants */
.h-jharokha .art-arch { position: absolute; inset: 4svh 50% 0 auto; translate: 50% 0; height: 94svh; width: min(94vw, 560px); z-index: 1; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3.2s var(--ease) 1.4s; } .draw.d2 { transition-delay: 1.9s; }
body.opened .draw { stroke-dashoffset: 0; }
.h-jharokha .art-skyline, .h-deepmala .art-skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 22svh; color: color-mix(in srgb, var(--a) 26%, transparent); }
.h-jharokha .wrap { padding-top: 12svh; }

.h-genda { background: linear-gradient(180deg, #fff1c4, var(--paper) 60%); }
.h-genda .art-sun { position: absolute; width: min(130vw, 820px); left: 50%; top: 46%; translate: -50% -50%; }
.h-genda .swag { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-around; }
.h-genda .swag svg { height: calc(var(--len) * .9svh); width: auto; transform-origin: top; animation: sway 5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.7s); }

.h-deepmala { background: radial-gradient(circle at 50% 20%, var(--bg), var(--bg2)); color: var(--onbg); }
.h-deepmala::before { display: none; }
.h-deepmala .art-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-deepmala .art-skyline { bottom: 13svh; height: 20svh; color: #05060f; }
.h-deepmala .water { position: absolute; left: 0; right: 0; bottom: 0; height: 13svh; background: linear-gradient(#0a0e26, #05060f); overflow: hidden; }
.h-deepmala .float { position: absolute; bottom: 20%; width: 46px; animation: bob 5s ease-in-out infinite alternate, floatx 38s linear infinite; animation-delay: calc(var(--i) * -1.3s), calc(var(--i) * -7s); }
.h-deepmala .float .flame { opacity: 1; transform: none; animation: flick 1.6s ease-in-out infinite alternate; }
@keyframes bob { to { translate: 0 -7px; } } @keyframes floatx { from { left: -10%; } to { left: 110%; } }
.h-deepmala .eyebrow, .h-deepmala .hero .when { color: var(--a); }

.h-kamal { background: linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--bg) 70%, var(--paper))); }
.h-kamal .art-lotus { position: absolute; left: 50%; bottom: 6svh; translate: -50% 0; width: min(120vw, 640px); opacity: .95; }
.h-kamal .art-ripples { position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: min(150vw, 900px); }
.h-kamal .wrap { padding-bottom: 26svh; }

.h-passport .art-route { width: min(92vw, 560px); margin: 0 auto 8px; display: block; }
.iata { font: 600 15px var(--caps); letter-spacing: .2em; fill: var(--ink); }
.h-passport .pass { margin: 30px auto 0; max-width: 460px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px dashed var(--a); border-radius: 14px; background: #fff; }
.h-passport .pass div { padding: 14px 8px; border-right: 1px dashed color-mix(in srgb, var(--a) 60%, transparent); } .h-passport .pass div:last-child { border: 0; }
.h-passport .pass small { display: block; font: 500 9px var(--caps); letter-spacing: .24em; opacity: .6; text-transform: uppercase; } .h-passport .pass b { font: 500 17px var(--serif); }

/* countdown */
.count { background: radial-gradient(circle at 50% 0%, var(--bg), var(--bg2)); color: var(--onbg); }
.count .eyebrow { color: var(--a); }
.cd { display: flex; justify-content: center; gap: clamp(10px, 4vw, 34px); margin-top: 34px; }
.cd div { min-width: 64px; }
.cd b { display: block; font: 400 clamp(40px, 11vw, 78px)/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.cd span { font: 500 10px var(--caps); letter-spacing: .26em; text-transform: uppercase; opacity: .8; }

/* events */
.events .list { margin-top: 46px; display: grid; gap: 0; position: relative; text-align: left; }
.events .list::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 1px; background: color-mix(in srgb, var(--a) 55%, transparent); }
.ev { display: grid; grid-template-columns: 40px 1fr auto; gap: 18px; align-items: baseline; padding: 20px 0; }
.ev .dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--a); background: var(--paper); margin: 8px 0 0 14px; position: relative; z-index: 1; transition: background .6s; }
.ev.in .dot { background: var(--a); }
.ev h3 { font: 400 clamp(24px, 5.4vw, 32px)/1.1 var(--serif); }
.ev p { font-size: 14px; opacity: .75; margin-top: 3px; }
.ev time { font: 500 11px var(--caps); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--a) 78%, var(--ink)); text-align: right; white-space: nowrap; }

/* venue + gallery */
.venue { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.venue .frame { margin-top: 42px; height: min(78svh, 640px); position: relative; overflow: hidden; }
.kb img { width: 100%; height: 100%; object-fit: cover; animation: kb 20s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
.venue .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--bg2) 88%, transparent)); }
.venue .cap { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; color: #fff; padding: 0 22px; }
.venue .cap h3 { font: 400 clamp(30px, 7vw, 46px) var(--serif); }
.venue .cap a { display: inline-block; margin-top: 16px; padding: 12px 24px; border: 1px solid rgba(255,255,255,.7); border-radius: 40px; color: #fff; text-decoration: none; font: 500 11px var(--sans); letter-spacing: .24em; text-transform: uppercase; transition: background .4s, color .4s; }
.venue .cap a:hover { background: #fff; color: #222; }
.gallery .grid { margin-top: 40px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; }
.gallery figure { overflow: hidden; border-radius: 3px; aspect-ratio: 3/4; }
.gallery figure:first-child { grid-row: span 2; aspect-ratio: auto; }
.gallery figure:not(:first-child) { aspect-ratio: 4/3; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.gallery figure:hover img { transform: scale(1.06); }
.credit { margin-top: 16px; font-size: 12px; letter-spacing: .06em; opacity: .65; }

/* rsvp */
.rsvp { background: color-mix(in srgb, var(--bg) 9%, var(--paper)); }
.rsvp form { margin: 36px auto 0; max-width: 440px; display: grid; gap: 14px; text-align: left; }
.rsvp label { font: 500 10px var(--caps); letter-spacing: .24em; text-transform: uppercase; opacity: .75; }
.rsvp input, .rsvp select { width: 100%; margin-top: 6px; padding: 14px 2px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--a) 70%, transparent); background: transparent; font: 400 19px var(--serif); color: var(--ink); outline: none; border-radius: 0; }
.rsvp input:focus { border-bottom-color: var(--ink); }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice button { padding: 15px 8px; border: 1px solid color-mix(in srgb, var(--a) 70%, transparent); border-radius: 3px; font: 400 16px var(--serif); font-style: italic; transition: all .4s var(--ease); }
.choice button.sel { background: var(--bg); color: var(--onbg); border-color: var(--bg); }
.send { margin-top: 8px; padding: 17px; background: var(--ink); color: var(--paper); font: 500 11px var(--sans); letter-spacing: .3em; text-transform: uppercase; border-radius: 3px; position: relative; overflow: hidden; }
.thanks { display: none; margin-top: 36px; } .done form { display: none; } .done .thanks { display: block; animation: up 1s var(--ease); }
.thanks h3 { font: 400 34px var(--serif); font-style: italic; } .thanks p { font-size: 13px; opacity: .7; margin-top: 8px; }
@keyframes up { from { opacity: 0; transform: translateY(18px); } }

footer { padding: 70px 22px 90px; text-align: center; background: radial-gradient(circle at 50% 22%, #5a1b2e, #3f1220); color: #ead9b5; }
footer img { width: 120px; margin: 0 auto; filter: drop-shadow(0 6px 16px rgba(21,10,14,.35)); }
footer p { margin-top: 14px; font: 500 10px var(--caps); letter-spacing: .3em; text-transform: uppercase; }
footer a { display: inline-block; margin-top: 22px; padding: 13px 26px; border: 1px solid #c19a4b; border-radius: 40px; color: #ead9b5; text-decoration: none; font: 500 11px var(--sans); letter-spacing: .24em; text-transform: uppercase; }

/* particles */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 40; }

body.embed .ctl { top: 40px; } body.embed footer a { display: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; } .rv, .ch { opacity: 1; transform: none; } }

/* ---------- painted covers + scene panels (designs that carry studio plates) ---------- */
.env-card.on-light::after, .h-lifafa.on-light::after { background: linear-gradient(180deg, rgba(250,245,236,.0) 0%, rgba(250,245,236,.0) 100%); }
.env-card.on-light .env-card-copy, .h-lifafa.on-light { color: var(--bg); }
.env-card.on-light .env-card-copy { place-content: start center; padding-top: 16%; } .env-card.on-light .env-names i, .env-card.on-light .when { color: color-mix(in srgb, var(--a) 70%, var(--bg)); }
.env-card.on-light img, .h-lifafa.on-light .bgimg img { object-position: 50% 100%; }
.h-lifafa.on-light { place-items: start center; padding-top: 15svh; }
.h-lifafa.on-light h1 .amp, .h-lifafa.on-light .when { color: color-mix(in srgb, var(--a) 70%, var(--bg)); }
.h-lifafa.on-light .bgimg img { animation: kbsoft 24s ease-in-out infinite alternate; transform-origin: 50% 100%; } @keyframes kbsoft { to { transform: scale(1.07); } }
.events:has(+ *) .wrap { } .scenes { display: grid; gap: 0; margin-top: 46px; }
.events:has(.scenes) { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.scene { position: relative; aspect-ratio: 9/14; max-height: 120svh; width: 100%; overflow: hidden; display: grid; justify-items: center; align-items: start; opacity: 1 !important; transform: none !important; }
.scene-bg { position: absolute; inset: 0; } .scene-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transform: scale(1.12); transition: transform 7s var(--ease); }
.scene.in .scene-bg img { transform: scale(1); }
.scene-copy { position: relative; z-index: 2; padding: 12% 8% 0; text-align: center; opacity: 0; transform: translateY(26px); transition: opacity 1.2s var(--ease) .35s, transform 1.2s var(--ease) .35s; }
.scene.in .scene-copy { opacity: 1; transform: none; }
.scene.dark { color: var(--bg); } .scene.light { color: #fff; }
.scene-line { font: italic 400 clamp(16px, 4.4vw, 21px)/1.35 var(--serif); max-width: 24ch; margin: 0 auto; }
.scene h3 { font: 500 clamp(40px, 12vw, 70px)/1 var(--serif); letter-spacing: .06em; text-transform: uppercase; margin: 10px 0 14px; }
:lang(hi) .scene h3 { letter-spacing: 0; }
.scene-when { font: 500 clamp(11px, 3vw, 13px) var(--caps); letter-spacing: .26em; text-transform: uppercase; display: inline-flex; gap: 14px; align-items: center; padding: 10px 0; border-block: 1px solid currentColor; }
.scene-when b { font-weight: 500; }
.twinkle { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle, #fff 0 1px, transparent 1.6px) 0 0/70px 90px, radial-gradient(circle, #fff 0 1.2px, transparent 1.8px) 35px 50px/110px 130px; animation: twk 3.4s ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes twk { from { opacity: .15; } to { opacity: .75; } }
@media (min-width: 760px) { .scenes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }

.scene.low .scene-copy { padding-top: 62%; }

/* ---------- painted plate hero: one 9:16 painting, copy placed in its clear zone, all in cqw ---------- */
.ph-hero { padding: 0 !important; min-height: 0; display: block; background: var(--phbg); }
.ph-hero::before { display: none; }
.ph { position: relative; margin: 0 auto; height: 100svh; aspect-ratio: 9/16; max-width: 100vw; container-type: size; background: var(--plate) center/100% 100% no-repeat; overflow: hidden; }
@media (max-aspect-ratio: 9/16) { .ph { width: 100vw; aspect-ratio: auto; height: min(100svh, calc(100vw * 1.94)); } }
.ph-box { position: absolute; left: calc(var(--bl) * 1%); top: calc(var(--bt) * 1%); right: calc((100 - var(--br)) * 1%); bottom: calc((100 - var(--bb)) * 1%); display: grid; align-content: center; justify-items: center; text-align: center; }
.ph-box .together { font-size: 3.5cqw; } .ph-box h1 { font-size: 14cqw; margin: 2.4cqw 0; } .ph-box .invite-line { font-size: 3.3cqw; margin-top: 1.4cqw; max-width: 28ch; opacity: .9; }
.ph-box .when { font-size: 2.7cqw; margin-top: 3.6cqw; color: var(--a); } .ph-box .where { font-size: 4cqw; margin-top: 1.2cqw; }
.ph.small .ph-box h1 { font-size: 11.5cqw; margin: 1.6cqw 0; } .ph.small .ph-box .invite-line { display: none; } .ph.small .ph-box .when { margin-top: 2.4cqw; }
:lang(hi) .ph-box h1 { font-size: 12cqw; } :lang(hi) .ph.small .ph-box h1 { font-size: 10cqw; }

/* function panel inside a painted frame (text sits in the frame's clear paper) */
.scene.frame { aspect-ratio: 9/16; max-height: none; container-type: size; }
.scene.frame .scene-bg img { object-fit: fill; transform: none !important; }
.scene.frame .scene-copy { position: absolute; left: calc(var(--bl) * 1%); top: calc(var(--bt) * 1%); right: calc((100 - var(--br)) * 1%); bottom: calc((100 - var(--bb)) * 1%); padding: 0; display: grid; align-content: center; justify-items: center; }
.scene.frame .scene-line { font-size: 3.8cqw; } .scene.frame h3 { font-size: 10cqw; margin: 2.4cqw 0 3cqw; } .scene.frame .scene-when { font-size: 2.5cqw; gap: 2.6cqw; padding: 2cqw 0; color: var(--a); }
/* function panel as a painted vignette on paper */
.scene.vig { aspect-ratio: auto; max-height: none; padding: 64px 22px 70px; background: var(--paper); color: var(--ink); display: block; text-align: center; border-top: 1px solid color-mix(in srgb, var(--a) 35%, transparent); }
.scene.vig::before { content: ""; position: absolute; inset: 14px; border: 1px solid color-mix(in srgb, var(--a) 55%, transparent); outline: 1px solid color-mix(in srgb, var(--a) 25%, transparent); outline-offset: 4px; pointer-events: none; }
.vig-art { width: min(78%, 360px); margin: 0 auto; display: block; opacity: 0; transform: translateY(30px) scale(.94); transition: opacity 1.3s var(--ease), transform 1.5s var(--ease); filter: drop-shadow(0 18px 22px rgba(60,35,10,.16)); }
.scene.vig.in .vig-art { opacity: 1; transform: none; }
.scene.vig .scene-copy { padding: 26px 0 0; } .scene.vig h3 { color: var(--a); }
@media (min-width: 760px) { .scene.frame, .ph { max-width: calc(100svh * 9 / 16); margin-inline: auto; } .scenes:has(.frame) { grid-template-columns: repeat(auto-fit, minmax(280px, 420px)); justify-content: center; } }

/* =================== painted openers =================== */
#cover.painted { background: var(--phbg); display: block; }
#cover.painted .pc { position: absolute; left: 50%; top: 0; translate: -50% 0; }
#cover.painted .pc-copy { z-index: 8; transition: opacity .7s var(--ease); } #cover.painted.open .pc-copy { opacity: 0; }
.pc-copy .eyebrow { font-size: 2.7cqw; letter-spacing: .34em; color: inherit; opacity: .85; margin-bottom: 3cqw; }
.pc-copy .mono { font: italic 500 17cqw/1 var(--serif); } .pc-copy .mono b { font-weight: 400; font-style: normal; font-size: .5em; vertical-align: .35em; margin: 0 .2em; color: var(--a); }
:lang(hi) .pc-copy .mono { font-size: 10cqw; font-style: normal; }
.pc-copy .tap { margin-top: 6cqw; padding: 3cqw 6cqw; font-size: 2.6cqw; border-color: currentColor; background: color-mix(in srgb, var(--phbg) 55%, transparent); backdrop-filter: blur(4px); }
.pc-copy .hint { margin-top: 5cqw; font: 500 2.6cqw var(--caps); letter-spacing: .3em; text-transform: uppercase; animation: hintp 2.4s ease-in-out infinite; } @keyframes hintp { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* Deepmala: the painting starts in darkness; its own lights are the lamps */
.o-diya.painted .night { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, #050a1e, #010208); opacity: calc(.93 - var(--lit, 0) * .186); transition: opacity 1.3s var(--ease); z-index: 2; }
.o-diya.painted .lamps.painted { position: absolute; inset: 0; display: block; bottom: auto; z-index: 9; }
.lamps.painted .lan { position: absolute; width: 17cqw; height: 17cqw; translate: -50% -50%; border-radius: 50%; }
.lamps.painted .lan::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 1px dashed rgba(246,230,196,.85); animation: hintp 2s ease-in-out infinite; }
.lamps.painted .lan.lit::before { display: none; }
.lamps.painted .g { position: absolute; left: 50%; top: 50%; width: 46cqw; height: 46cqw; translate: -50% -50%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0; scale: .3; transition: opacity .9s var(--ease), scale 1.2s var(--ease); background: radial-gradient(circle, rgba(255,232,170,1), rgba(255,178,80,.55) 24%, rgba(255,150,50,.16) 50%, transparent 70%); }
.lamps.painted .lan.lit .g { opacity: 1; scale: 1; animation: flick 2.2s ease-in-out .9s infinite alternate; }
.o-diya.painted .pc-copy { margin: 0; z-index: 8; } .o-diya.painted .pc-copy .mono { opacity: calc(.14 + var(--lit, 0) * .172); transition: opacity 1s; }

/* Jharokha: one painted pair of doors, split on the seam, swinging open onto the palace */
.pc { perspective: 240cqw; }
.pdoor { position: absolute; top: 0; bottom: 0; width: 50.15%; z-index: 5; background: var(--art) 0 0/200% 100% no-repeat; transition: transform 2.4s var(--ease) .15s, filter 2.4s var(--ease) .15s; backface-visibility: hidden; box-shadow: 0 0 8cqw rgba(30,8,4,.45); }
.pdoor.l { left: 0; transform-origin: 0 50%; } .pdoor.r { right: 0; transform-origin: 100% 50%; background-position: 100% 0; }
#cover.open .pdoor.l { transform: rotateY(-102deg); filter: brightness(.55); } #cover.open .pdoor.r { transform: rotateY(102deg); filter: brightness(.55); }
.o-jharokha.painted .pc-copy { color: #f8e7c0; --a: #f0cf86; text-shadow: 0 .4cqw 2cqw rgba(40,8,4,.75); }
.o-jharokha.painted .pc-copy::before, .o-toran.painted .pc-copy::before { content: ""; position: absolute; inset: 8% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(60,14,8,.62), transparent); }

/* Genda Phool: nine painted marigold strings, each its own strip so they sway apart and lift in a wave */
.pgar { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pgar i { position: absolute; top: -1%; height: 100%; background-repeat: no-repeat; transform-origin: 50% 0; animation: gsway 4.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.55s); transition: translate 1.5s var(--ease); transition-delay: calc(var(--i) * 75ms); filter: drop-shadow(0 1cqw 1.2cqw rgba(90,50,0,.22)); }
@keyframes gsway { from { rotate: -1.5deg; } to { rotate: 1.5deg; } }
#cover.open .pgar i { translate: 0 -104%; }
.o-toran.painted .pc-copy::before { background: radial-gradient(closest-side, rgba(255,249,236,.94), rgba(255,249,236,.7) 60%, transparent); inset: 2% -10%; }

/* Kamal: the bloom, built from one painted petal */
.pbloom { position: absolute; left: 50%; bottom: 9%; width: 0; height: 0; z-index: 5; transition: scale 2.5s var(--ease), opacity 1.2s var(--ease) 1.3s; transform-origin: 50% 100%; }
.ppetal { position: absolute; left: 0; bottom: 0; width: calc(19cqw * var(--sc)); translate: -50% 0; transform-origin: 50% 100%; rotate: calc(var(--ang) * .1); transition: rotate 2.1s var(--ease); transition-delay: calc(var(--i) * 70ms); filter: drop-shadow(0 .6cqw 1cqw rgba(120,50,70,.25)); animation: pbreathe 5s ease-in-out infinite alternate; }
.ppetal.b { filter: saturate(1.15) brightness(.93) drop-shadow(0 .6cqw 1cqw rgba(120,50,70,.25)); }
@keyframes pbreathe { to { rotate: calc(var(--ang) * .2); } }
#cover.open .ppetal { rotate: var(--ang); animation: none; } #cover.open .pbloom { scale: 2.7; opacity: 0; }
.o-lotus.painted .pc-copy { bottom: 42%; }

/* Passport to Pheras: painted cabin wall, the Amalfi plate is the view; shade lifts, then we fly through the glass */
.pwall { position: absolute; inset: 0; z-index: 5; transform-origin: var(--ox) var(--oy); transition: transform 2s var(--ease) 1s, opacity .9s var(--ease) 2.1s; cursor: pointer; }
.pwall img { position: absolute; inset: 0; width: 100%; height: 100%; }
.phole { position: absolute; overflow: hidden; border-radius: 34% / 26%; }
.pshade { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, #ece7dc 0 2.2cqw, #ddd6c8 2.2cqw 2.45cqw); transition: transform 1.3s var(--ease); display: grid; align-content: end; justify-items: center; padding-bottom: 2.4cqw; box-shadow: inset 0 0 3cqw rgba(60,50,30,.25); }
.pshade::after { content: ""; width: 34%; height: 1.5cqw; border-radius: 1cqw; background: #bdb6a6; box-shadow: inset 0 .2cqw .4cqw rgba(0,0,0,.3); }
#cover.open .pshade { transform: translateY(-97%); } #cover.open .pwall { transform: scale(7.5); opacity: 0; }
.pseat { position: absolute; z-index: 8; top: 6%; left: 0; right: 0; text-align: center; font: 500 2.6cqw var(--caps); letter-spacing: .4em; text-transform: uppercase; color: #24406b; opacity: .75; transition: opacity .6s; } #cover.open .pseat { opacity: 0; }
.o-window.painted .pc-copy { top: 72%; bottom: 5%; } .o-window.painted .pc-copy .mono { font-size: 10cqw; } .o-window.painted .pc-copy .eyebrow { margin-bottom: 1.6cqw; } .o-window.painted .pc-copy .tap { margin-top: 3cqw; }
#cover.painted.o-window { background: var(--phbg) !important; }

/* tall phones: the 9:16 painting is centred, and the same painting, blurred, fills what is left — cover and hero line up exactly */
.ph-hero { min-height: 100svh; display: grid !important; place-items: center; position: relative; overflow: hidden; }
.ph-hero::before, #cover.painted::before { content: ""; display: block !important; position: absolute; inset: -8%; opacity: 1; background: var(--plate) center/cover no-repeat; filter: blur(26px) saturate(1.05); transform: scale(1.1); }
.ph-hero .ph { z-index: 1; }
#cover.painted .pc { top: 50%; translate: -50% -50%; }
.ppetal { max-width: none; }
.o-window.painted .pc-copy .tap { background: #24406b; color: #f6efe0; border-color: #24406b; backdrop-filter: none; }
.o-diya.painted::before { filter: blur(26px) brightness(.18); }

/* panel copy positions for paintings whose clear area is not at the very top */
.scene.upper .scene-copy { padding-top: 27%; }
.scene.foot .scene-bg img { object-position: 50% 0; } .scene.foot .scene-copy { padding-top: 92%; }
/* vignette on a night ground */
.scene.vig.night { background: radial-gradient(circle at 50% 18%, var(--bg), var(--bg2)); color: var(--onbg); border-top: 0; }
.scene.vig.night::before { border-color: color-mix(in srgb, var(--a) 60%, transparent); outline-color: color-mix(in srgb, var(--a) 28%, transparent); }
.scene.vig.night .vig-art { position: relative; z-index: 2; width: min(88%, 420px); filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)); }
.scene.vig.night .scene-copy { z-index: 2; position: relative; }

/* ---------- Lifafa, painted: real watercolour-paper grain, a painted gold-inlay liner, a wildflower band, grain on the wax ---------- */
.env-liner { background: url("../plates/env_liner.webp") 50% 0 / min(64vw, 420px) auto repeat; }
.env-liner::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(40,8,16,.55) 100%), linear-gradient(180deg, rgba(40,8,16,.35), transparent 30%); }
.env-pocket { background: linear-gradient(100deg, rgba(190,160,110,.28), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(190,160,110,.3)), url("../plates/env_paper.webp") center/cover; }
.env-bottom { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(205,180,135,.18)), url("../plates/env_paper.webp") center/cover; }
.env-flap { background: linear-gradient(180deg, rgba(200,172,125,.26), rgba(255,255,255,.18) 75%), url("../plates/env_paper.webp") center/cover; }
.env-flowers { position: absolute; z-index: 2; left: 50%; bottom: -1.5%; width: min(116%, 780px); max-width: none; translate: -50% 0; transform-origin: 50% 100%; animation: meadow 6s ease-in-out infinite alternate; filter: drop-shadow(0 -6px 14px rgba(60,40,20,.14)); pointer-events: none; }
@keyframes meadow { from { transform: skewX(-1.2deg); } to { transform: skewX(1.2deg); } }
.seal::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; background: url("../plates/env_paper.webp") center/180%; mix-blend-mode: multiply; opacity: .34; pointer-events: none; }
.env-to { top: 65.5%; } .env-hint { top: calc(65.5% + 42px); }

/* Lifafa hero: keep every line of copy in the sky, above the mandap's flower canopy */
.h-lifafa.on-light { padding-top: 8svh; } .h-lifafa.on-light .invite-line { display: none; }
.h-lifafa.on-light h1 { font-size: clamp(46px, 13vw, 104px); margin: 10px 0; } .h-lifafa.on-light .when { margin-top: 12px; }
.env-card.on-light .env-card-copy { padding-top: 11%; }

/* painted opener "part": one painting split on its centre line; the halves slide away to the sides */
.ppart { position: absolute; top: 0; bottom: 0; width: 50.2%; z-index: 5; background: var(--art) 0 0/200% 100% no-repeat; transition: transform 2.1s var(--ease) .15s, box-shadow .5s ease; }
#cover.open .ppart { box-shadow: 0 0 6cqw rgba(40,25,10,.3); }
.ppart.l { left: 0; } .ppart.r { right: 0; background-position: 100% 0; }
#cover.open .ppart.l { transform: translateX(-103%); } #cover.open .ppart.r { transform: translateX(103%); }
.o-part.painted .pc-copy::before { content: ""; position: absolute; inset: 4% -8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--phbg) 92%, transparent), color-mix(in srgb, var(--phbg) 60%, transparent) 62%, transparent); }

/* tall layered plates (garland at the top, scene on the ground): show the whole 9:16 painting, copy sits under the garland */
.scene.full { aspect-ratio: 9/16; max-height: none; } .scene.full .scene-bg img { object-fit: fill; transform: none !important; }
.scene.full .scene-copy { padding-top: 34%; }
.ph.small .ph-box .when { letter-spacing: .18em; font-size: 2.45cqw; }

/* full-height painted panels: copy high in an open sky, or deep under a hanging object */
.scene.full.top .scene-copy { padding-top: 15%; }
.scene.full.deep .scene-copy { padding-top: 86%; }