/* Sculpted materials stay native and sharp at any screen resolution. */
.cinematic-invitation{--material-metal:#c09a53;--material-metal-light:#ffe7ac;--material-metal-dark:#8b642e;--material-metal-ink:#997033;--material-light:color-mix(in srgb,var(--story-paper) 40%,white);--material-shadow:color-mix(in srgb,var(--story-ink) 26%,var(--story-wash))}
.story-dark,.cinematic-invitation:has(.story-dark){--material-light:color-mix(in srgb,var(--story-paper) 76%,#ffffff);--material-shadow:#020408;--material-metal-ink:#eed69b;--material-metal-light:#fff0c3;--material-metal-dark:#ae823e}
.card.material-story{background-image:radial-gradient(ellipse at 24% 10%,color-mix(in srgb,var(--material-light) 60%,transparent),transparent 56%),linear-gradient(128deg,var(--story-paper),color-mix(in srgb,var(--story-paper) 81%,var(--story-wash)) 62%,var(--story-paper))}
.material-story:before{background:url('/materials/cotton-paper.png') repeat;background-size:256px;opacity:.8}
.material-story:after{display:none}
.material-art,.material-paper-grain{position:absolute;inset:0;display:block;pointer-events:none;overflow:hidden}
.material-paper-grain{background:url('/materials/cotton-paper.png') repeat;background-size:256px;opacity:.72}
.material-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.material-story .story-native,.material-story .premium-scene-lines,.material-story .luxury-trace,.material-story .luxury-halo{display:none}
.material-story .story-reading-veil{background:linear-gradient(90deg,transparent 0 15%,color-mix(in srgb,var(--story-paper) 48%,transparent) 31%,color-mix(in srgb,var(--story-paper) 68%,transparent) 42% 58%,color-mix(in srgb,var(--story-paper) 48%,transparent) 69%,transparent 85%)!important;opacity:1!important}
.material-story>.hero .story-reading-veil{background:linear-gradient(90deg,transparent 0 17%,color-mix(in srgb,var(--story-paper) 30%,transparent) 32%,color-mix(in srgb,var(--story-paper) 50%,transparent) 45% 55%,color-mix(in srgb,var(--story-paper) 30%,transparent) 68%,transparent 83%)!important}
.material-story .story-bouquet{opacity:1}
.material-story>.hero .story-bouquet-b{top:-70px}
.material-story .story-bouquet img{image-rendering:auto}
.material-story .premium-foil{opacity:.1}
.material-story .luxury-beam{opacity:.09}
.material-chapter .material-frame{opacity:.56}
.material-chapter .material-trace{display:none}
.material-chapter .material-leaf-impression{opacity:.045}
.material-trace{stroke-dasharray:1;stroke-dashoffset:1;opacity:.64}
.cinema-entered .material-full .material-trace{animation:material-foil-arrive 2.8s cubic-bezier(.22,1,.36,1) both}
.material-silk{position:absolute;inset:0;width:100%;height:100%;opacity:.88;animation:material-silk-breathe 18s ease-in-out infinite alternate;animation-play-state:paused;pointer-events:none}
.material-silk-bottom{rotate:180deg;animation-delay:-9s;animation-direction:alternate-reverse}
.material-fold-shadow{fill:var(--material-shadow);opacity:.13;transform:translateY(5px)}
.material-family-silk .material-silk{opacity:1;animation-duration:14s}
.material-family-deco .material-filigree,.material-family-brocade .material-filigree{stroke-width:1.15}
.material-family-trellis .material-leaf-impression{opacity:.12}
.material-glint{position:absolute;width:22px;height:22px;left:7%;top:28%;border-radius:50%;background:radial-gradient(ellipse,#fff9df 0 5%,#ffedb6b3 10%,#f4cf7b35 24%,transparent 68%);opacity:0;animation:material-gold-glint 9s ease-in-out infinite;animation-play-state:paused;pointer-events:none}
.material-glint:before,.material-glint:after{content:"";position:absolute;background:linear-gradient(transparent,#fff9dc,transparent);width:1px;height:24px;left:10px;top:-1px}
.material-glint:after{rotate:90deg;height:14px;top:4px}
.material-glint-b{left:auto;right:7%;top:74%;animation-delay:-4.5s}
.cinema-visible .material-silk,.cinema-visible .material-glint{animation-play-state:running}
.cinema-scene:not(.cinema-visible) .material-trace{animation-play-state:paused}
.guest-sheet-open .material-silk,.guest-sheet-open .material-glint,.animation-paused .material-art *{animation-play-state:paused!important}
.material-family-celestial .material-glint{animation-duration:6s}
.material-family-brocade .material-silk{opacity:.65}

/* A cast medallion, with a real rim, inset engraving and a quiet paper centre. */
.material-story .hero-initials{width:124px;height:124px;margin-bottom:29px;gap:6px;border:2px solid transparent;border-radius:50%;background:linear-gradient(145deg,var(--material-light),var(--story-paper) 58%,color-mix(in srgb,var(--story-paper) 86%,var(--story-wash))) padding-box,linear-gradient(135deg,var(--material-metal-light),var(--material-metal-dark) 37%,var(--material-metal-light) 70%,var(--material-metal)) border-box;box-shadow:inset 0 2px 2px #ffffff85,inset 0 -2px 3px #0000000a,0 9px 17px #0000001d,0 2px 4px #00000016;font-size:35px;color:var(--story-ink)}
.material-story .hero-initials:before{inset:-5px;border:1px solid color-mix(in srgb,var(--material-light) 78%,var(--material-metal));box-shadow:0 0 0 1px color-mix(in srgb,var(--material-metal) 65%,transparent)}
.material-story .hero-initials:after{inset:7px;border:1px solid color-mix(in srgb,var(--material-metal) 55%,var(--story-paper));box-shadow:inset 0 1px 1px #0000000b,0 1px 0 #ffffff70}
.material-story .hero-initials>span,.material-story .hero-initials>i{position:relative;z-index:1}
.material-story .hero-initials i{color:var(--material-metal-ink);font:italic 18px Georgia,serif}
.material-story .hero-name{display:block;max-width:100%;color:var(--story-ink);text-shadow:0 1px 0 color-mix(in srgb,var(--material-light) 72%,transparent),0 2px 2px color-mix(in srgb,var(--story-ink) 13%,transparent)}
.material-story .hero .names .amp{position:relative;width:160px;max-width:65%;margin:15px auto;color:var(--material-metal-ink);font-size:.6em;font-weight:400;text-shadow:0 1px 0 var(--material-light)}
.material-story .hero .names .amp:before,.material-story .hero .names .amp:after{content:"";position:absolute;width:39%;height:1px;top:55%;background:linear-gradient(90deg,transparent,var(--material-metal));left:0;opacity:.8}
.material-story .hero .names .amp:after{left:auto;right:0;rotate:180deg}
.material-story .hero-names-only>.eyebrow{font-size:12px;letter-spacing:.3em;margin-bottom:27px!important;color:var(--story-ink)}
.material-story .hero-names-only .hero-date{font:500 15px/1.5 var(--font-display);letter-spacing:.26em;color:var(--story-ink)}
.material-story .hero-names-only .hero-date:before{content:"";display:block;width:110px;height:1px;margin:0 auto 21px;background:linear-gradient(90deg,transparent,var(--material-metal),transparent)}
.material-story .hero-names-only .hero-venue{font:400 11px/1.5 var(--font-display);letter-spacing:.17em;color:var(--story-ink);margin-top:17px}
.material-story .hero-photo .frame{border-color:color-mix(in srgb,var(--material-metal) 65%,var(--story-paper));background:linear-gradient(135deg,var(--material-light),var(--story-paper));box-shadow:inset 0 1px 0 var(--material-light),0 12px 28px #0000001a,0 0 0 1px color-mix(in srgb,var(--material-metal) 25%,transparent)}
.material-story .rsvp-paper,.material-story .sched{background:linear-gradient(135deg,color-mix(in srgb,var(--material-light) 65%,var(--story-paper)),var(--story-paper));border-color:color-mix(in srgb,var(--material-metal) 40%,var(--story-paper));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--material-light) 80%,transparent),0 9px 24px #0000000b}
.material-story .live-date .count>div{box-shadow:inset 0 2px 1px var(--material-light),inset 0 -1px 1px #00000008,0 7px 15px #00000010;border-color:color-mix(in srgb,var(--material-metal) 55%,var(--story-paper))}

/* An opaque glass finish avoids a continuously blurred scrolling surface. */
body.cinematic-invitation .dock,body.cinematic-invitation.theme-royal .dock{width:min(calc(100% - 24px),456px);max-width:456px;bottom:max(12px,env(safe-area-inset-bottom));padding:7px 6px;border:1px solid color-mix(in srgb,var(--material-metal) 72%,var(--story-paper));border-radius:25px;background:linear-gradient(140deg,var(--material-light),var(--story-paper) 64%,color-mix(in srgb,var(--story-paper) 85%,var(--story-wash)));box-shadow:inset 0 2px 0 #ffffffad,inset 0 -2px 0 color-mix(in srgb,var(--material-metal) 18%,transparent),0 8px 23px #00000024,0 0 0 3px color-mix(in srgb,var(--story-paper) 80%,transparent);backdrop-filter:none}
body.cinematic-invitation .dock button{position:relative;min-height:50px;border-radius:17px;gap:6px;font-size:10px;color:var(--story-ink)}
body.cinematic-invitation .dock button+button:before{content:"";position:absolute;left:-1px;top:15%;height:70%;width:1px;background:linear-gradient(transparent,color-mix(in srgb,var(--material-metal) 40%,transparent),transparent)}
body.cinematic-invitation .dock button svg{width:21px;height:21px;stroke-width:1.55}
.cinematic-invitation .invitation-sheet{border-color:color-mix(in srgb,var(--material-metal) 48%,var(--story-paper));box-shadow:0 -10px 45px #0000002a}
.front-paper:after,.fold-foundation:before{content:"";position:absolute;inset:0;background:url('/materials/cotton-paper.png') repeat;background-size:256px;opacity:.65;pointer-events:none}
@keyframes material-foil-arrive{from{stroke-dashoffset:1;opacity:0}to{stroke-dashoffset:0;opacity:.52}}
@keyframes material-silk-breathe{from{translate:-3px -2px}to{translate:3px 5px}}
@keyframes material-gold-glint{0%,22%,62%,100%{opacity:0;transform:translate3d(0,0,0) scale(.6)}35%,43%{opacity:.95;transform:translate3d(0,5px,0) scale(1)}53%{opacity:0;transform:translate3d(0,10px,0) scale(.7)}}
@media(max-width:380px){.material-story .hero-initials{width:109px;height:109px;font-size:31px}.material-story .hero-names-only .hero-date{font-size:13px}body.cinematic-invitation .dock{width:calc(100% - 18px);border-radius:23px}body.cinematic-invitation .dock button{font-size:9px}}
@media(max-height:620px){.material-story .hero-initials{width:88px;height:88px;margin-bottom:23px;font-size:28px}.material-story .hero-names-only>.eyebrow{margin-bottom:22px!important}.material-story .hero-names-only .hero-date:before{margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){.material-art *{animation:none!important;transition:none!important}.material-trace{stroke-dashoffset:0;opacity:.45}.material-glint{display:none}}

.material-story .hero-initials:after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2022%22%20fill%3D%22none%22%20stroke%3D%22%23bc964f%22%20stroke-width%3D%22.7%22%3E%3Cpath%20d%3D%22M8%2019Q31%2020%2053%204%22%2F%3E%3Cpath%20d%3D%22M19%2018Q9%207%2010%2012Q11%2017%2019%2018ZM28%2015Q17%203%2019%209Q21%2014%2028%2015ZM36%2011Q31%201%2029%205Q28%2010%2036%2011ZM24%2017Q30%2020%2034%2014Q28%2012%2024%2017ZM37%2011Q45%2014%2046%207Q40%207%2037%2011ZM46%206Q47%200%2052%201Q54%204%2046%206Z%22%20fill%3D%22%23bc964f%22%20fill-opacity%3D%22.24%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center calc(100% - 10px);background-size:49px 18px}
