/* Theme v3 "Lace": the owner's lace artwork on ivory with dark maroon panels. Loads after style.css and reuses its base, form, bar and butterfly rules. */
body.v3{--burgundy:#4a1a28;--wine:#4a1a28;--ink:#5c464a;--gold:#b0957c;--line:#d9c7be;--paper:#f5f0ed;--bar:#fbf7f4;--col:min(100vw,480px);background:#e6dbd5;color:var(--ink)}
.v3 .phone{background:var(--paper);box-shadow:0 0 70px #4a1a2826;overflow-x:clip}
.v3 .atmosphere{z-index:6;height:100vh;height:100lvh}
.v3 .amp{font-family:Italianno,cursive;color:var(--gold)}

/* Entrance: four separate lace flaps hinged on the screen edges, each with a soft shadow on the layer below; they unfold toward the viewer like folded paper. The seal is fixed to the tip of the top flap and turns with it. */
.wrap{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);z-index:60;perspective:1200px;overflow:hidden;touch-action:none;--fh:calc(50svh + 14px);--sh:64svh}
.wrap.gone{display:none}
.wrap.simple-out{opacity:0;transition:opacity .5s}
.flap,.flap-shadow{position:absolute;display:block;max-width:none;will-change:transform}
.flap-t,.shadow-t{top:0;left:50%;height:var(--fh);width:calc(var(--fh)*1.112);margin-left:calc(var(--fh)*-.556);transform-origin:50% 0}
.flap-t>img{display:block;width:100%;height:100%}
.flap-b,.shadow-b{bottom:0;left:50%;height:var(--fh);width:calc(var(--fh)*1.112);margin-left:calc(var(--fh)*-.556);transform-origin:50% 100%}
.flap-l,.shadow-l{top:calc(50% - var(--sh)/2);height:var(--sh);width:calc(var(--sh)*.6667);left:calc(50% - var(--sh)*.505);transform-origin:0 50%}
.flap-r,.shadow-r{top:calc(50% - var(--sh)/2);height:var(--sh);width:calc(var(--sh)*.6667);right:calc(50% - var(--sh)*.505);transform-origin:100% 50%}
.flap-shadow{filter:brightness(0) blur(16px);opacity:.13;translate:0 12px}
.shadow-b{translate:0 -12px}
.flap-l,.shadow-l{transform-origin:0 50%}
.flap-shadow{z-index:0}
.flap{z-index:1}
.flap-b{z-index:2}
.flap-t{z-index:3}
.wrap-seal{position:absolute;left:50%;bottom:0;width:calc(var(--col)*.27);translate:-50% 46%;border:0;background:none;padding:0;min-height:0;border-radius:50%;overflow:visible}
.wrap-seal>img{position:relative;display:block;width:100%;height:auto;animation:seal-lift 3.2s ease-in-out infinite}
.seal-shadow{position:absolute;inset:8% 4% -4%;border-radius:50%;background:#3a2218;filter:blur(9px);opacity:.42}
.seal-glint{position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 40%,#ffffffc0 50%,transparent 60%) 220% 0/260% 100% no-repeat;-webkit-mask:url('/assets/v3/seal.webp') center/100% 100% no-repeat;mask:url('/assets/v3/seal.webp') center/100% 100% no-repeat;animation:seal-glint 4.5s ease-in-out infinite;pointer-events:none}
.wrap-hint{position:absolute;left:0;right:0;top:calc(50% + var(--col)*.2 + 18px);z-index:4;text-align:center;font:10px/1.6 Poppins,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--burgundy);text-shadow:0 0 8px #fff,0 0 3px #fff,0 0 14px #fff;animation:hint-pulse 2.6s ease-in-out infinite}
.wrap-hint small{display:block;font-size:9px;letter-spacing:.1em;text-transform:none;color:#6d564e;margin-top:2px}
.wrap.opening .wrap-hint,.wrap.opening .wrap-seal>img,.wrap.opening .seal-glint{animation:none}
.wrap.opening .seal-glint{opacity:0}
.sealed .v-cover-inner{visibility:hidden}
@keyframes seal-glint{0%,55%{background-position:220% 0}85%,100%{background-position:-120% 0}}

/* Welcome frame: two halves of one lace frame that part to the left and right as the guest scrolls on; small lace sprigs wave over it. */
.v-cover{position:relative;height:min(100svh,calc(var(--col)*1.9));min-height:580px;overflow:hidden}
.w-half{position:absolute;top:0;bottom:0;width:50%;background:url('/assets/v3/frame.webp') no-repeat;background-size:var(--col) 100%;will-change:transform;z-index:1}
.w-left{left:0;background-position:0 0}
.w-right{right:0;background-position:100% 0}
.sprig{position:absolute;width:calc(var(--col)*.2);height:auto;filter:drop-shadow(0 2px 3px #6b54463d);will-change:transform}
.s-tl{left:-4%;top:1%;transform-origin:15% 15%}.s-ml{left:-10%;top:43%;transform-origin:0 50%;width:calc(var(--col)*.17)}.s-bl{left:-3%;bottom:1%;transform-origin:15% 85%;width:calc(var(--col)*.17)}
.s-tr{right:-4%;top:1%;transform-origin:85% 15%;scale:-1 1}.s-mr{right:-9%;top:40%;transform-origin:100% 50%;width:calc(var(--col)*.15)}.s-br{right:-3%;bottom:1%;transform-origin:85% 85%;scale:-1 1;width:calc(var(--col)*.18)}
.v-cover-inner{position:absolute;left:20%;right:20%;top:17%;bottom:19%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.v-kicker{font:11px/1.6 Amiri,serif;letter-spacing:.24em;text-transform:uppercase;color:#8d7770}
.v-names{font:clamp(48px,15vw,72px)/1.02 LoveLight,cursive;color:var(--burgundy);font-weight:400;margin:14px 0 10px}
.v-names span{display:block}
.v-names span{position:relative}
/* The script capitals have long swashes; the ampersand gets its own clear line above them. */
.v-names .amp{font-size:.42em;line-height:1;margin:.5em 0 .28em;z-index:2}
.v-date{font:15px/1.6 Amiri,serif;letter-spacing:.2em;color:#7b6259}
.v-venue{font:21px/1.3 Amiri,serif;color:var(--burgundy);margin-top:22px}
.v-place{font:9px/1.8 Poppins,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#8d7770}

/* Plain sections. */
.v-sec{position:relative;text-align:center;padding:56px 34px;scroll-margin-top:16px}
.v-sec>*,.v-dark>*{position:relative;z-index:1}
.v-art{display:block;height:auto;margin-left:auto;margin-right:auto}
.v-swans{width:150px;margin-bottom:22px}
.v-table{width:100%;margin-top:44px}
.v-title{font:400 36px/1.15 Amiri,serif;color:var(--burgundy);margin-bottom:14px}
.v-title-s{font-size:26px;margin-bottom:6px}
.v-lead{font:20px/1.55 Amiri,serif;color:var(--burgundy);white-space:pre-line}
.v-copy{font-size:12px;line-height:2;white-space:pre-line}
.v-big{font:27px/1.4 Amiri,serif;letter-spacing:.06em;color:var(--burgundy)}
.v-sub{font-size:12px}
.v-script{font:44px/1.2 MeaCulpa,cursive;color:var(--burgundy)}
.v-rule{width:34px;height:1px;background:var(--line);margin:22px auto}
.v-hosts{font:22px/1.5 Amiri,serif;color:var(--burgundy);margin:26px 0 18px}
.v-hosts .amp,.v-couple .amp{display:block;font-size:24px;line-height:1.2}
.v-couple{font:23px/1.3 Amiri,serif;color:var(--burgundy);margin-top:26px;text-wrap:balance}
.v3 .bismillah{width:215px;margin:0 auto 24px}
.v-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 26px;margin-top:20px;border:1px solid #b79c95;border-radius:999px;background:none;color:var(--burgundy);font:10px/1 Poppins,sans-serif;letter-spacing:.24em;text-transform:uppercase}

/* Atur cara: pearl garland on top, a lace icon beside each time. */
.v-day{padding-top:calc(var(--col)*.06);padding-bottom:20px}
.v-garland{width:calc(100% + 68px);max-width:none;margin:0 -34px 18px;height:auto}
.v3 .timeline{margin-top:30px}
.v3 .timeline li{margin-left:132px;padding-bottom:38px;min-height:74px}
.v3 .timeline time{left:-74px;width:60px;font:15px/1.5 Amiri,serif;color:var(--burgundy)}
.v3 .timeline span{font:19px/1.5 Amiri,serif}
.v3 .timeline li:after{content:'';position:absolute;left:-132px;top:-8px;width:50px;height:54px;background:center/contain no-repeat;opacity:.95}
.v3 .timeline li:nth-child(4n+1):after{background-image:url('/assets/v3/icon1.webp')}
.v3 .timeline li:nth-child(4n+2):after{background-image:url('/assets/v3/icon2.webp')}
.v3 .timeline li:nth-child(4n+3):after{background-image:url('/assets/v3/icon3.webp')}
.v3 .timeline li:nth-child(4n+4):after{background-image:url('/assets/v3/icon4.webp')}

/* Dress code: the lace frame holds any wording; pearls are scattered outside it and the couple walk in place. */
.v-dress{padding:30px 30px 60px}
.v-arch{position:relative;aspect-ratio:896/1489;background:url('/assets/v3/dress-frame.webp') center/100% 100% no-repeat;padding:26% 20% 24%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.v-walk{width:58%;margin:2px 0 10px}
/* The clip's background is baked to the page colour; a soft edge mask hides any slight colour difference a phone's video decoder introduces. */
.v-walk video{display:block;width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 78%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 78%,transparent 100%)}
.v-arch .v-copy{font-size:11px;line-height:1.9}
.v-pearls{position:absolute!important;inset:0;z-index:0!important;pointer-events:none}
.v-pearls i{position:absolute;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0,#f4ece4 34%,#cbb9aa 78%,#a8968a 100%);box-shadow:0 2px 3px #6b544640}

/* Mesh lace band (holds the bride and groom portraits). The lace borders at top and bottom keep their size; the grid mesh between them repeats, so the band grows to any height without stretching. */
.v-band{position:relative;border:0 solid transparent;border-width:calc(var(--col)*.2) 0;border-image:url('/assets/v3/gift-band.webp') 300 0 300 0 fill/calc(var(--col)*.1953) 0 stretch round}
.v3 .couple-section.v-band{padding:6px 26px 10px;margin:30px 0}
/* Dark maroon panels. The lace trim along each edge is a transparent cut-out, so the maroon shows through its gaps on one side and the ivory page on the other. */
.v-dark{--burgundy:#fff7f0;--ink:#eedfd9;position:relative;margin:calc(var(--col)*.16) 0;padding:calc(var(--col)*.24) 34px;background:var(--wine);color:var(--ink);text-align:center;scroll-margin-top:16px}
.v-dark:before,.v-dark:after{content:'';position:absolute;left:0;width:100%;aspect-ratio:1500/422;background:url('/assets/v3/edge.webp') center/100% 100% no-repeat;pointer-events:none;z-index:0}
.v-dark:before{top:0;translate:0 -52%;scale:1 -1}
.v-dark:after{bottom:0;translate:0 52%}
.v3 .rsvp.v-dark{border:0}
.v-dark .v-kicker,.v-dark .muted{color:#dcc5bd}
.v-locket{width:150px;margin-bottom:20px;filter:brightness(0) invert(1);opacity:.92}
/* Countdown: its own maroon panel framed by the lace trim on both edges. */
.v-count{padding-top:calc(var(--col)*.3);padding-bottom:calc(var(--col)*.3)}
.v3 .count-grid{gap:0;max-width:310px}
.v3 .count-grid>div+div{border-left:1px solid #ffffff40}
.v3 .count-grid b{font-family:Amiri,serif;font-size:40px;color:#fff7f0}
.v3 .count-grid span{color:#e6d2cb}
.v3 .count-note{color:#fff7f0}
/* Date, time and venue as one block: three facts divided by hairlines. */
.v-event{padding-bottom:30px}
.v-facts{max-width:320px;margin:10px auto 0}
.v-facts>div{padding:22px 0;scroll-margin-top:16px}
.v-facts>div+div{border-top:1px solid var(--line)}
.v-label{font:10px/1.6 Poppins,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#8d7770;margin-bottom:6px}
.v-time{font-size:21px;letter-spacing:.02em}
.v-facts .v-script{font-size:40px;line-height:1.15}
.v-event .map-links{margin-top:8px}
.v-event .map-links .v-button{margin-top:10px}
.v-dark input:not([type=radio]),.v-dark select,.v-dark textarea{background:#ffffff0f;border-color:#ffffff40;color:#fff7f0}
.v-dark input::placeholder,.v-dark textarea::placeholder{color:#ffffff70}
.v-dark select option{color:#4b4347}
.v-dark .outline-button,.v-dark .attendance-options label{border-color:#ffffff59;color:#fff7f0}
.v-dark .attendance-options label:has(:checked){background:#ffffff1f;border-color:#fff}
.v-dark .primary-button,.v-dark #wish-more{background:none;border:1px solid #ffffff80;border-radius:999px;color:#fff7f0;letter-spacing:.24em;text-transform:uppercase;font-size:10px;width:auto;margin-left:auto;margin-right:auto;padding:14px 34px}
.v-dark .form-status.error{color:#ffd0d0}
.v-dark .form-status.success{color:#dcf3d2}
.v3 .wishes-title,.v3 #wish-list p{font-family:Amiri,serif}
.v-contact{margin-top:54px;scroll-margin-top:16px}
.v-contact a{border-radius:999px}
.v-rsvp{margin-bottom:0}

/* Ending note: the last thing on the page. */
.v-footer{padding-top:calc(var(--col)*.2);padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.v-rings{width:92px;margin-bottom:22px}
.v-with{font-size:11px;margin-top:26px;color:#8d7770}
.v-footer-names{font:36px/1.3 Amiri,serif;color:var(--burgundy);margin-top:4px}
.v-footer-names .amp{font-size:.8em}
.v-made{margin-top:38px;font-size:10px;letter-spacing:.06em;color:#9a8a86}

/* Bottom bar in the theme's ivory, with a soft shadow that reads as a border. */
.v3 .bottom-nav{background:var(--bar);color:var(--burgundy);border-top:1px solid #e3d3ca;box-shadow:0 -1px 0 #fff inset,0 -10px 26px #4a1a2824,0 -1px 3px #4a1a2826}
.v3 .music-fab{background:var(--bar);color:var(--burgundy);box-shadow:0 0 0 1px #e3d3ca,0 5px 16px #4a1a2833}
.v3 .music-fab:after{background:var(--burgundy);box-shadow:0 0 0 1px var(--bar)}
.v3 .wing,.v3 .butterfly .body{background-image:url('/assets/v3/butterfly-crystal.webp')}
.v3 .butterfly{filter:drop-shadow(0 0 5px #b9d6ffcc) drop-shadow(0 0 1px #5a6f9acc) drop-shadow(0 2px 3px #2a101840)}
@media(max-width:350px){.v-sec{padding-left:24px;padding-right:24px}.v-title{font-size:31px}.v-garland{width:calc(100% + 48px);margin-left:-24px;margin-right:-24px}.v3 .timeline li{margin-left:118px}.v3 .timeline li:after{left:-118px;width:42px}.v-dress{padding-left:16px;padding-right:16px}.v-dark{padding-left:24px;padding-right:24px}}
.v-table,.v-garland-wrap,.v-swans-wrap{position:relative}
.v-table{margin-top:44px}.v-table img{width:100%}
.v-garland-wrap{margin:0 -34px 18px}.v-garland-wrap .v-garland{width:100%;margin:0}
.v-swans-wrap{width:150px;margin:0 auto 22px}.v-swans-wrap .v-swans{width:100%;margin:0}
@media(max-width:350px){.v-garland-wrap{margin-left:-24px;margin-right:-24px}}
/* Bride and groom portraits, laid out as on v1; the gold frame is toned down to champagne to sit with the lace. */
/* Oval lace frames: the photo is clipped to the oval opening, upright (no tilt). */
.v3 .portrait,.v3 .portrait-groom{aspect-ratio:560/702;transform:none;filter:drop-shadow(0 6px 10px #6b54462e)}
.v3 .couple-photo,.v3 .photo-placeholder{left:16%;right:16%;top:13.5%;bottom:13.8%;width:68%;height:72.7%;border-radius:50%}
.v3 .gold-frame{filter:none}
.v3 .couple-name h2{font-family:Amiri,serif;font-size:26px;font-style:italic}
.v3 .couple-join{font-family:Italianno,cursive;color:var(--gold)}
.v-top{display:inline-block;margin-top:30px;padding:12px 22px;min-height:44px;border:1px solid #b79c95;border-radius:999px;font:10px/1.9 Poppins,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--burgundy)}
.v-made{margin-top:26px}
.v3 .timeline time{white-space:nowrap}
.v3 .timeline li{margin-left:142px}
.v3 .timeline li:after{left:-142px}
.v3 .timeline time{left:-84px;width:70px}
@media(max-width:350px){.v3 .timeline li{margin-left:124px}.v3 .timeline li:after{left:-124px;width:38px}.v3 .timeline time{font-size:13px}}
.v-tagline{margin-top:34px;font:italic 19px/1.5 Amiri,serif;color:var(--burgundy)}
.v-day .v-kicker{font-size:14px;letter-spacing:.2em;text-transform:none;color:var(--burgundy)}
.v-day .v-title{font-size:30px;letter-spacing:.06em}
@media(max-width:350px){.v-day .v-title{font-size:24px;letter-spacing:.03em;white-space:nowrap}}
.v-hosts{font-size:19px;letter-spacing:.04em;line-height:1.45}
.v-serta{display:block;margin:10px 0 8px;font:italic 15px/1.4 Amiri,serif;letter-spacing:.06em;color:#8d7770}
.v-arch .v-copy{font:17px/1.5 Amiri,serif;color:var(--burgundy)}
.v-prayer .v-lead{font-size:18px}
.v-hashtag{margin-top:14px;font:15px/1.6 Amiri,serif;letter-spacing:.1em;color:var(--gold)}
.v-contact #contact-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.v-contact #contact-links a{margin:0;min-width:120px}
.v-facts .v-place{font:12px/1.7 Poppins,sans-serif;letter-spacing:.02em;text-transform:none;color:var(--ink);margin-top:6px}
/* Salam in the Amiri face, so it reads differently from the parents' names in Instrument Serif. */
#greeting>.v-lead{font:19px/1.75 Amiri,serif;letter-spacing:.01em;color:var(--ink)}
.v-cover .v-venue{font-size:19px}
.v-facts .v-script{font-size:36px}
/* Typefaces follow v1: Tangerine script for section headings, Amiri for serif text, Mea Culpa for the couple's names, Italianno for ampersands, Poppins for small text. */
.v-title{font:400 46px/1.15 Tangerine,cursive;letter-spacing:0;margin-bottom:16px}
.v-title-s{font-size:38px}
.v-day .v-title{font:400 27px/1.3 Amiri,serif;letter-spacing:.1em} /* this heading is set in capitals, which a script face cannot carry */
.v-kicker{font:11px/1.6 Amiri,serif}
.v-day .v-kicker{font-size:15px}
.v-lead{font-size:18px;line-height:1.7}
#greeting>.v-lead{font-size:18px}
.v-hosts{font-size:17px}
.v3 .couple-name h2{font-size:23px;line-height:1.4}
.v-big{font-size:24px}
.v-time{font-size:19px}
.v3 .count-grid b{font-size:36px}
.v3 .timeline span{font-size:17px}
.v3 .timeline time{font-size:13px}
.v-footer-names{font-size:32px}
.v-arch .v-title{font-size:42px;margin-bottom:6px}
.v-arch .v-copy{font-size:15px}
.v-tagline{font-size:16px}
@media(max-width:350px){.v-title{font-size:40px}.v-day .v-title{font-size:22px;letter-spacing:.06em}.v3 .couple-name h2{font-size:20px}.v3 .timeline span{font-size:15px}}
.v-footer-names .amp{margin:0 .12em}
.v-event .v-kicker{margin-bottom:4px}
.v-facts .v-label{font:700 14px/1.6 Poppins,sans-serif;letter-spacing:.24em;color:var(--burgundy);margin-bottom:8px}
/* One lace icon per programme item, in order. */
.v3 .timeline li:after{background-image:none}
.v3 .timeline li:nth-child(1):after{background-image:url('/assets/v3/prog1.webp')}
.v3 .timeline li:nth-child(2):after{background-image:url('/assets/v3/prog2.webp')}
.v3 .timeline li:nth-child(3):after{background-image:url('/assets/v3/prog3.webp')}
.v3 .timeline li:nth-child(4):after{background-image:url('/assets/v3/prog4.webp')}
.v3 .timeline li:nth-child(5):after{background-image:url('/assets/v3/prog5.webp')}
.v3 .timeline li:nth-child(6):after{background-image:url('/assets/v3/prog6.webp')}
.v3 .timeline li:nth-child(7):after{background-image:url('/assets/v3/prog7.webp')}
.v3 .timeline li:nth-child(8):after{background-image:url('/assets/v3/prog8.webp')}
.v-cover .v-date{margin-top:14px;font-weight:700}
/* Moments (guest upload) page and its teaser on the invitation. */
.m-page{position:relative;min-height:100svh;padding:calc(var(--col)*.26) 30px 60px;text-align:center;overflow:hidden}
.m-lace{position:absolute;top:0;left:0;width:100%;height:auto;transform:translateY(-46%) scaleY(-1);pointer-events:none}
.m-back{position:relative;display:inline-block;font-size:11px;letter-spacing:.08em;color:#8d7770;padding:10px;margin-bottom:6px}
.m-rings{width:84px;margin-bottom:14px}
.m-page .v-title{font-size:40px}
.m-label{display:block;text-align:left;font-size:11px;margin:26px 0 5px;color:var(--burgundy)}
.m-pick{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;margin-top:16px;border-radius:999px;background:var(--burgundy);color:#fff7f0;font:12px/1 Poppins,sans-serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 20px #4a1a2840}
.m-pick svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.m-note{font-size:10px;line-height:1.8;color:#8d7770;margin-top:12px}
.m-status{margin-top:26px;padding:16px;border:1px solid var(--line);border-radius:12px;font-size:12px}
.m-list{list-style:none;margin:26px 0 0;padding:0;text-align:left}
.m-list li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.m-list b{font:500 12px/1.4 Poppins,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-list span{font-size:10px;color:#8d7770;grid-column:1}
.m-list progress{grid-column:1/-1;width:100%;height:6px;accent-color:var(--burgundy)}
.m-list button{grid-row:1;grid-column:2;min-height:36px;padding:4px 12px;border:1px solid #b79c95;border-radius:999px;background:none;font-size:10px;color:var(--burgundy)}
.m-list li.done span{color:#2e6b3a}.m-list li.failed span{color:#b3261e}
.m-summary{margin-top:18px;font:17px/1.6 Amiri,serif;color:var(--burgundy)}
.m-page .v-footer-names{margin-top:40px}
.v-moments{padding-top:20px}
.v-moments .v-art{width:74px;margin-bottom:14px}
.m-list li.pending span{color:#a0660a}
/* Countdown on the owner's artwork (maroon panel, rose lace top and bottom, ribbon bows); the title and numbers sit between the two ribbons. */
.v-count-art{position:relative;aspect-ratio:1024/1536;margin:10px 0;padding:0 16%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:url('/assets/v3/countdown-dark.webp') center/100% 100% no-repeat;--burgundy:#fff7f0}
.v-count-art>*{position:relative;z-index:1}
.v-count-art .v-title{color:#fff7f0;margin-bottom:12px}
.v-count-art .count-grid{width:100%}
.v-count-art{padding:0 25%}
.v-count-art .v-title{font-size:33px;line-height:1.05;margin-bottom:8px}
.v3 .v-count-art .count-grid b{font-size:26px}
.v3 .v-count-art .count-grid span{font-size:7px;letter-spacing:.12em}
@media(max-width:350px){.v-count-art .v-title{font-size:28px}.v3 .v-count-art .count-grid b{font-size:21px}.v3 .v-count-art .count-grid span{font-size:6px}}
/* Event facts: italic labels, bold values. */
.v-facts .v-label{font-style:italic;font-weight:400}
.v-facts .v-big{font-weight:700}
/* Venue facility note under the address, e.g. the surau. */
.v-facts .v-amenity{font:italic 13px/1.6 Amiri,serif;color:var(--burgundy);margin-top:12px}