:root { color-scheme: light; --ink: #3e2818; --gold: #9e680e; }
* { box-sizing: border-box; }
body { margin: 0; background: #171912; color: #f4ead7; font-family: system-ui, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.toolbar { max-width: 790px; margin: 0 auto; padding: 22px 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.signature { font: 600 17px 'Cinzel', Georgia, serif; letter-spacing: .08em; color: #ead5a8; }
.signature small { display: block; margin-top: 5px; font: 10px system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #bbb79e; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.languages { border: 1px solid #5a5740; border-radius: 30px; padding: 3px; display: flex; }
button { border: 1px solid #5a5740; background: transparent; color: #ddd7c4; border-radius: 24px; padding: 10px 14px; font-size: 12px; cursor: pointer; }
.languages button { border: 0; padding: 7px 12px; min-height: 32px; }
.languages button[aria-pressed='true'] { background: #ebd9af; color: #392715; }
button:hover { border-color: #e4ca8f; background: #353629; }
button:focus-visible, a:focus-visible { outline: 2px solid #e8c671; outline-offset: 4px; }
.languages button:first-child { font-family: 'Noto Sans Devanagari', sans-serif; }
main { padding: 0 14px; }
.card { container-type: inline-size; position: relative; width: min(100%, 760px); aspect-ratio: 3 / 4; margin: 0 auto; color: var(--ink); background: #f2e4c6; border-radius: 2.8%; overflow: hidden; box-shadow: 0 22px 65px #0008; isolation: isolate; }
.artwork { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; pointer-events: none; z-index: -1; }
.copy { position: absolute; inset: 0; font-family: 'Noto Sans Devanagari', 'Mangal', sans-serif; font-weight: 700; text-align: center; }
.copy[hidden] { display: none; }
.copy p, .copy h1, .copy h2 { margin: 0; }
.position { position: absolute; }
.prayer { top: 15.1%; left: 30%; width: 42%; font-size: 1.98cqw; line-height: 1.5; }
.name { left: 29%; width: 44%; display: flex; justify-content: center; align-items: baseline; gap: 1cqw; white-space: nowrap; }
.name .prefix { font-family: 'Yatra One', 'Mangal', serif; color: #714713; font-size: 2.9cqw; font-weight: 400; }
.name h2 { font-family: 'Yatra One', 'Mangal', serif; font-size: 7.25cqw; font-weight: 400; line-height: 1.15; color: #8e5b08; text-shadow: 0 .11cqw 0 #ffefb6; }
.bride { top: 18.7%; }
.groom { top: 40.7%; }
.family { left: 28%; width: 47%; font-size: 1.94cqw; line-height: 1.27; }
.bride-family { top: 26.1%; }
.groom-family { top: 47.2%; }
.connector { top: 53.65%; left: 20%; width: 60%; font-size: 1.65cqw; line-height: 1.5; }
.ceremony { top: 55.6%; left: 11%; width: 78%; font-family: 'Yatra One', 'Mangal', serif; font-size: 6.25cqw; font-weight: 400; white-space: nowrap; line-height: 1.12; color: #a26b10; background: linear-gradient(180deg,#7c4206 9%,#ba7b10 29%,#ffe08c 42%,#9d5c06 53%,#b77e19 65%,#734207 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 .12cqw 0 #fff3c0) drop-shadow(.12cqw .3cqw .12cqw #5e370d88); }
.date { top: 61.35%; left: 16%; width: 68%; font-size: 1.77cqw; line-height: 1.12; }
.invitation { top: 63.45%; left: 13%; width: 74%; font-size: 1.62cqw; line-height: 1.15; font-weight: 600; }
.venue-label { top: 67.4%; left: 26%; width: 44%; font-size: 2.05cqw; }
.venue-name { top: 70.5%; left: 25%; width: 46%; font-size: 2.15cqw; }
.address { top: 72.7%; left: 20%; width: 54%; font-size: 1.87cqw; line-height: 1.32; font-weight: 600; }
.host-label { top: 81.2%; left: 29%; width: 37%; font-size: 2.07cqw; }
.host { top: 84.2%; left: 24%; width: 47%; font-size: 2.68cqw; font-weight: 700; }
.copy[lang='en'] { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; }
.copy[lang='en'] .prayer { font-size: 2.18cqw; }
.copy[lang='en'] .name { flex-direction: column; align-items: center; gap: 0; }
.copy[lang='en'] .name .prefix { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2cqw; line-height: 1.2; }
.copy[lang='en'] .name h2 { font-family: 'Cinzel', Georgia, serif; font-size: 6.8cqw; font-weight: 700; line-height: 1.06; }
.copy[lang='en'] .bride { top: 19%; }
.copy[lang='en'] .groom { top: 40.3%; }
.copy[lang='en'] .family { left: 26%; width: 50%; font-size: 1.9cqw; line-height: 1.13; }
.copy[lang='en'] .bride-family { top: 26.3%; }
.copy[lang='en'] .groom-family { top: 47.6%; }
.copy[lang='en'] .connector { font-size: 1.9cqw; }
.copy[lang='en'] .ceremony { top: 56.2%; left: 11%; width: 78%; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 4.9cqw; line-height: 1.2; }
.copy[lang='en'] .date { font-size: 2.15cqw; }
.copy[lang='en'] .invitation { left: 16%; width: 66%; font-size: 1.8cqw; }
.copy[lang='en'] .venue-label { font-variant: small-caps; font-size: 2.5cqw; letter-spacing: .12em; }
.copy[lang='en'] .venue-name { font-size: 2.6cqw; }
.copy[lang='en'] .address { font-size: 2.12cqw; line-height: 1.2; }
.copy[lang='en'] .host-label { font-size: 2.15cqw; font-style: italic; }
.copy[lang='en'] .host { font: 700 2.4cqw 'Cinzel', Georgia, serif; }
.sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sparkle { position: absolute; left: var(--x); top: var(--y); width: var(--size); aspect-ratio: 1; background: #fff9da; clip-path: polygon(50% 0,60% 39%,100% 50%,60% 61%,50% 100%,40% 61%,0 50%,40% 39%); opacity: 0; }
.ring-glint { position: absolute; left: 46.1%; top: 33.1%; width: 2cqw; aspect-ratio: 1; pointer-events: none; background: #fffbea; clip-path: polygon(50% 0,58% 41%,100% 50%,58% 59%,50% 100%,42% 59%,0 50%,42% 41%); opacity: 0; }
.animated:not(.is-paused) .card { animation: arrive 1.8s ease-out both; }
.animated:not(.is-paused) .copy:not([hidden]) .reveal { animation: reveal 1.1s cubic-bezier(.22,.61,.36,1) both; animation-delay: var(--delay, .3s); }
.animated:not(.is-paused) .sparkle { animation: twinkle var(--duration, 4s) ease-in-out infinite; animation-delay: var(--delay,0s); }
.animated:not(.is-paused) .ring-glint { animation: diamond 5s ease-in-out infinite 1.7s; }
.is-paused .sparkle, .is-paused .ring-glint { opacity: 0; }
@keyframes arrive { from { opacity: 0; transform: translateY(10px) scale(.986); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes twinkle { 0%, 20%, 75%, 100% { opacity: 0; transform: scale(.35) rotate(0deg); } 42% { opacity: .9; transform: scale(1) rotate(35deg); } 60% { opacity: .15; } }
@keyframes diamond { 0%, 22%, 45%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 32% { opacity: .95; transform: scale(1.2) rotate(40deg); } }
footer { text-align: center; padding: 22px 16px 30px; font-size: 11px; color: #c1bda6; letter-spacing: .02em; }
footer a { color: #e6d2a4; text-underline-offset: 4px; }
.noscript-note { text-align: center; font-size: 12px; padding: 10px; color: #f4dfb6; }
/* Laravel collection: separate text layers, local fonts and a full portrait export. */
[hidden] { display: none !important; }
.signature { font-size: 12px; max-width: 260px; }
.name h2 { min-width: 0; max-width: 83%; }
.copy[lang='en'] .name h2 { max-width: 100%; }
.family, .address { white-space: pre-line; overflow-wrap: anywhere; }
.family { height: 7.8cqw; }
.copy[lang='en'] .family { height: 7.4cqw; }
.address { height: 8.1cqw; }
.ceremony { height: 8cqw; }
.date { height: 2.7cqw; white-space: nowrap; }
.invitation { height: 2.25cqw; white-space: nowrap; }
.venue-name, .host { height: 3.8cqw; white-space: nowrap; }
.ornamental-rule { position: absolute; left: 31%; width: 38%; height: .16cqw; background: linear-gradient(90deg,#8c5709,#f2d897,#8c5709); box-shadow: 0 .15cqw .22cqw #81562355; }
.ornamental-rule::before,.ornamental-rule::after { content: ''; position: absolute; width: .75cqw; height: .75cqw; background: #b38b49; border: .15cqw solid #f3d699; transform: translateY(-.3cqw) rotate(45deg); }
.ornamental-rule::after { right: 0; }
.rule-one { top: 52.8%; }.rule-two { top: 65.9%; }.rule-three { top: 79.6%; left: 35%; width: 30%; }
.theme-ruby { background: #260d13; }
.theme-ruby .name h2 { color: #8e2633; }
.theme-blush { background: #412f30; }
.theme-blush .name h2 { color: #9a5d4a; }
.theme-emerald { background: #0e2723; }
.theme-emerald .name h2 { color: #195346; }
.theme-emerald .bride-family { top: 25.3%; font-size: 1.75cqw; line-height: 1.15; height: 5.9cqw; }
.theme-emerald .copy[lang='en'] .bride-family { top: 25.3%; font-size: 1.75cqw; height: 5.9cqw; }
.theme-blush .prayer { top: 19.1%; font-size: 1.65cqw; }
.theme-blush .bride { top: 21%; }
.theme-blush .bride h2 { font-size: 5.7cqw; line-height: 1.05; }
.theme-blush .bride-family { top: 25.65%; font-size: 1.55cqw; line-height: 1.1; height: 5.1cqw; }
.theme-blush .copy[lang='en'] .prayer { font-size: 1.8cqw; }
.theme-blush .copy[lang='en'] .bride { top: 20.7%; }
.theme-blush .copy[lang='en'] .bride .prefix { font-size: 1.5cqw; }
.theme-blush .copy[lang='en'] .bride h2 { font-size: 5.3cqw; line-height: 1; }
.theme-blush .copy[lang='en'] .bride-family { top: 25.5%; font-size: 1.6cqw; height: 5.3cqw; }
.theme-blush .host { left: 33%; width: 34%; font-size: 2.3cqw; }
.theme-blush .copy[lang='en'] .host { font-size: 2.1cqw; }
.animated:not(.is-paused) .card { animation: none; }
.card-export,.card-export body { width: 1080px !important; height: 1440px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
.card-export .toolbar { display: none !important; }
.published main { padding-top: 22px; padding-bottom: 22px; }
.music-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 19px; line-height: 1; background: #171912d9; color: #ead5a8; border: 1px solid #8a7a4d; box-shadow: 0 6px 18px #0006; }
.music-toggle[aria-pressed='true'] { background: #ebd9af; color: #392715; }
.card-export .music-toggle { display: none !important; }
@media (max-width: 600px) { .published main { padding-top: 10px; padding-bottom: 10px; } }
.card-export main { padding: 0 !important; }
.card-export .card { width: 1080px !important; height: 1440px !important; max-width: none !important; margin: 0 !important; border-radius: 0; box-shadow: none; }
.export-still * { animation: none !important; transition: none !important; }
.export-still .sparkles,.export-still .ring-glint { display: none !important; }
.theme-sapphire { background: #131e32; }
.theme-sapphire .prayer { top: 16.2%; }
.theme-sapphire .bride-family { font-size: 1.72cqw; line-height: 1.15; height: 6cqw; }
.theme-sapphire .copy[lang='en'] .bride-family { font-size: 1.72cqw; height: 6cqw; }
.theme-marigold { background: #53191a; }
.theme-ivory { background: #2f291f; }
.theme-rose { background: #2b362d; }
.layout-wedding .prayer { top: 17.8%; }
.layout-wedding .connector { display: none; }
.layout-wedding .ceremony { top: 21.3%; left: 20%; width: 60%; font-size: 5.1cqw; }
.layout-wedding .copy[lang='en'] .ceremony { top: 21.7%; left: 20%; width: 60%; font-size: 4.1cqw; }
.layout-wedding .date { top: 26.5%; }
.layout-wedding .bride,.layout-wedding .copy[lang='en'] .bride { top: 42.5%; }
.layout-wedding .name h2 { font-size: 6cqw; line-height: 1.08; }
.layout-wedding .copy[lang='en'] .name .prefix { font-size: 1.6cqw; }
.layout-wedding .copy[lang='en'] .name h2 { font-size: 5.2cqw; line-height: 1; }
.layout-wedding .bride-family,.layout-wedding .copy[lang='en'] .bride-family { top: 48.2%; font-size: 1.7cqw; line-height: 1.15; height: 6cqw; }
.layout-wedding .groom,.layout-wedding .copy[lang='en'] .groom { top: 54%; }
.layout-wedding .groom-family,.layout-wedding .copy[lang='en'] .groom-family { top: 59.8%; font-size: 1.7cqw; line-height: 1.15; height: 6cqw; }
.layout-wedding .invitation { top: 66.6%; }
.layout-wedding .venue-label { top: 69.6%; }
.layout-wedding .venue-name { top: 72.5%; }
.layout-wedding .address { top: 75%; }
.layout-wedding .host-label { top: 83.2%; }
.layout-wedding .host { top: 86%; }
.layout-wedding .rule-one { top: 65.4%; }
.layout-wedding .rule-two { top: 81.8%; }
.layout-wedding .rule-three { display: none; }
@media (max-width: 600px) {
  .toolbar { padding: 15px 12px 13px; gap: 8px; flex-wrap: wrap; }
  .signature { font-size: 14px; }
  .signature small { font-size: 8px; letter-spacing: .12em; }
  .controls { gap: 5px; }
  button { padding: 9px 11px; font-size: 11px; }
  .languages button { padding: 7px 10px; }
  .motion-button { font-size: 10px; }
  main { padding: 0 5px; }
  footer { padding-top: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .animated:not(.motion-enabled) *, .animated:not(.motion-enabled) *::before { animation: none !important; }
}
@page { size: A4 portrait; margin: 10mm; }
@media print {
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .toolbar, footer, .noscript-note { display: none !important; }
  main { padding: 0; }
  .card { width: 190mm; max-width: 100%; margin: 0 auto; box-shadow: none; break-inside: avoid; }
  * { animation: none !important; transition: none !important; }
  .sparkles, .ring-glint { display: none; }
  .ceremony { -webkit-text-fill-color: #9a630c; background: none; filter: none; text-shadow: 0 1px 0 #ffefba; }
}