/* ===== Illustrated edition (events with an art set) ===== */
.card.has-art{aspect-ratio:2/3}
.stage:has(.has-art){width:min(340px, 84vw)}
.card.has-art .inside.art{background-size:cover;background-position:center;background-color:var(--paper);padding:0;container-type:size;box-shadow:0 34px 60px -22px rgba(0,0,0,.7)}
.card.has-art .card-panel{position:absolute;left:17%;right:17%;top:13%;bottom:13%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.4cqh}
.card.has-art .request{font-size:clamp(9px,3.1cqw,11px);max-width:24ch}
.card.has-art .names{font-size:clamp(38px,15cqw,58px);margin:0}
.card.has-art .amp{font-size:clamp(18px,6cqw,24px);margin:-1cqh 0}
.card.has-art .date{font-size:clamp(11px,3.7cqw,13px);margin-top:2cqh}
.card.has-art .place{font-size:clamp(13px,4.2cqw,15px)}
.card.has-art .card-panel > *{opacity:0;transform:translateY(8px);transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1)}
.card.has-art.open .card-panel > *{opacity:1;transform:none}
.card.has-art.open .card-panel > :nth-child(1){transition-delay:.9s}
.card.has-art.open .card-panel > :nth-child(2){transition-delay:1.25s}
.card.has-art.open .card-panel > :nth-child(3){transition-delay:1.45s}
.card.has-art.open .card-panel > :nth-child(4){transition-delay:1.6s}
.card.has-art.open .card-panel > :nth-child(5){transition-delay:1.95s}
.card.has-art.open .card-panel > :nth-child(6){transition-delay:2.2s}
.card.has-art .face.front{background-size:200% 100%;background-repeat:no-repeat;background-color:var(--paper-2);box-shadow:none}
.card.has-art .face.back{background:#E6DFD2}
.card.has-art .door.l .face.front{border-radius:3px 0 0 3px}
.card.has-art .door.r .face.front{border-radius:0 3px 3px 0}
.card.has-art .door{transition:transform 1.8s cubic-bezier(.6,.02,.2,1)}
.seal.art{width:30%;height:auto;aspect-ratio:1;margin:0;left:35%;top:40%;background:transparent;box-shadow:none;border-radius:50%}
.seal.art::before{display:none}
.seal.art:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px}
.card.has-art:not(.open) .seal.art{animation:sealPulse 2.6s ease-in-out infinite}
@keyframes sealPulse{0%,100%{box-shadow:0 0 0 0 rgba(216,187,126,0)}50%{box-shadow:0 0 0 10px rgba(216,187,126,.18)}}
.card.has-art:not(.loaded) .face.front{background-image:none!important}

/* sheet artwork, multiplied into the paper */
.illustrated img{display:block;max-width:100%;height:auto;mix-blend-mode:multiply}
.illustrated .sec{position:relative}
.illustrated .sec.note{padding-bottom:130px;align-items:center;text-align:center}
.illustrated .sec.note .lede{max-width:34ch}
.art-note{width:82%;margin:-6px auto 4px}
.art-venue{width:100%;margin:0 auto 6px}
.art-attire{width:66%;margin:0 auto 4px}
.illustrated .sec.venue,.illustrated .sec.attire{align-items:center;text-align:center}
.illustrated .sec.venue .btns{justify-content:center}
.illustrated .dress{text-align:left;width:100%}
.art-flower{position:absolute;width:170px;pointer-events:none}
.art-flower.fr{right:-34px;bottom:-26px;transform:rotate(-24deg)}
.art-flower.fl{left:-44px;bottom:-30px;transform:scaleX(-1) rotate(-18deg);width:150px}
.illustrated .sec.rsvp{padding-bottom:150px}
.illustrated .sec + .sec{border-top:1px solid var(--paper-edge)}
.lace{position:relative;z-index:3;height:44px;margin:-22px -10%;background-repeat:repeat-x;background-size:auto 100%;background-position:center;pointer-events:none}
.lace + .sec{border-top:0!important}

/* icon timeline */
.tl.with-icons{padding-left:0;gap:18px}
.tl.with-icons::before,.tl.with-icons .tl-fill{left:96px}
.tl.with-icons li{grid-template-columns:72px 1fr;gap:0 46px;align-items:center;min-height:84px}
.tl.with-icons li::before{left:91px;top:50%;margin-top:-6px}
.tl-icon{width:72px;height:72px;object-fit:contain;mix-blend-mode:multiply;transform:translateX(-10px);opacity:.25;transition:transform .9s cubic-bezier(.22,.61,.36,1),opacity .9s}
.tl.with-icons li.on .tl-icon{transform:none;opacity:1}
.tl.with-icons .tl-text{display:flex;flex-direction:column;min-width:0}
.tl.with-icons .tl-text time{font-size:13px;letter-spacing:.18em;color:var(--ink-soft)}
.tl.with-icons .tl-text strong{font-family:var(--display);font-style:italic;font-weight:400;font-size:21px;line-height:1.25}
.tl:not(.with-icons) .tl-text{display:contents}

/* scroll reveals (only when JS turns them on) */
.reveal-on .sheet .rv{opacity:0;transform:translateY(20px);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1)}
.reveal-on .sheet .rv.in{opacity:1;transform:none}
.reveal-on .sheet .art-flower.fr.rv{transform:rotate(-24deg) translateY(20px) scale(.96)}
.reveal-on .sheet .art-flower.fr.rv.in{transform:rotate(-24deg)}
.reveal-on .sheet .art-flower.fl.rv{transform:scaleX(-1) rotate(-18deg) translateY(20px) scale(.96)}
.reveal-on .sheet .art-flower.fl.rv.in{transform:scaleX(-1) rotate(-18deg)}

@media (prefers-reduced-motion:reduce){
  .card.has-art .card-panel > *{opacity:1;transform:none;transition:none}
  .tl-icon{opacity:1;transform:none;transition:none}
  .card.has-art:not(.open) .seal.art{animation:none}
}
.tl:not(.with-icons) .tl-text strong,.tl:not(.with-icons) .tl-text small{grid-column:2}