/* A letter-sized invitation, with the same readable prose as Link Letters. */
.day-cycle .section .up-close-letter p{font:14px/1.75 Arial,sans-serif!important;letter-spacing:0;word-spacing:normal}
.up-close-letter h3{margin-top:0}
.day-cycle .section .up-close-blog-link{display:inline-flex;align-items:center;gap:10px;min-height:46px;margin-top:5px;padding:9px 16px;border:1px solid var(--day-line,#8d7e9666);border-radius:20px 25px 22px 24px;background:var(--day-paper,#eee2ed);font:17px/1.3 Mansalva,sans-serif;text-decoration:none}
.up-close-blog-link svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.up-close-blog-link:hover{box-shadow:0 2px 8px #263b3012}
.up-close-blog-link:focus-visible{outline:3px solid #eb7848;outline-offset:5px}
/* Glass beads and tiny impact rings use only transforms and opacity. */
.rain-window{position:fixed;inset:0;overflow:hidden;z-index:4;pointer-events:none!important;contain:strict;visibility:hidden;opacity:0;transition:opacity 700ms;mask-image:linear-gradient(to right,#000 0%,#000c 12%,#0008 28%,#0008 72%,#000c 88%,#000 100%)}
.day-shower:not(.day-hidden) .rain-window{visibility:visible;opacity:calc(var(--day-glass-rain,var(--day-rain,0))*.95)}
.window-drop-track{position:absolute;left:var(--drop-x);top:0;display:block;width:24px;height:100%;pointer-events:none}
.window-bead{position:absolute;left:10px;top:0;width:var(--bead-size);height:calc(var(--bead-size)*2.6);border:1px solid #f3fcffed;border-top-color:#67858caa;border-radius:55% 45% 52% 48%;background:linear-gradient(110deg,#ffffffb3,#a3c4ce55 55%,#f2fcffb3);box-shadow:1px 2px 1px #365c6470;animation:glass-bead-fall var(--drop-time) ease-in infinite;animation-delay:var(--drop-delay);animation-play-state:paused}
.window-bead::before{content:'';position:absolute;left:0;bottom:75%;width:1px;height:30px;background:linear-gradient(transparent,#e5f1f54d);border-radius:50%}
.window-splash{position:absolute;left:2px;top:var(--impact-y);display:block;width:24px;height:10px;border:1px solid #8eabb3bd;box-shadow:0 1px 0 #f6feffb3;border-radius:50%;opacity:0;animation:glass-bead-impact var(--drop-time) linear infinite;animation-delay:var(--drop-delay);animation-play-state:paused}
.window-splash::after{content:'';position:absolute;left:5px;top:-5px;width:7px;height:7px;border-left:1px solid #edf7f9b3;border-right:1px solid #edf7f9b3;border-radius:50%;transform:rotate(18deg)}
.day-shower:not(.day-hidden) .rain-window :is(.window-bead,.window-splash){animation-play-state:running}
@keyframes glass-bead-fall{0%,6%{opacity:0;transform:translate3d(0,-25px,0) scaleY(.7)}12%{opacity:.8}65%{opacity:.8;transform:translate3d(1px,var(--impact-y),0) scaleY(1.3)}69%,100%{opacity:0;transform:translate3d(1px,var(--impact-y),0) scaleY(.3)}}
@keyframes glass-bead-impact{0%,64%{opacity:0;transform:scale(.2)}67%{opacity:.7;transform:scale(.6)}76%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}
@media(max-width:700px){.window-drop-track:nth-child(n+17){display:none}.rain-window{mask-image:linear-gradient(to right,#000 0%,#000c 15%,#0007 35%,#0007 65%,#000c 85%,#000 100%)}}
@media(prefers-reduced-motion:reduce){.rain-window{display:none!important;transition:none}.rain-window :is(.window-bead,.window-splash){animation:none!important}}

/* Underline the invitation words, keeping the envelope clear. */
.letter-more summary{text-decoration:none}
.letter-more summary .letter-read,.letter-more summary .letter-close{text-decoration:underline;text-underline-offset:6px}

.up-close-opening{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:26px;align-items:start}
.up-close-opening figure{margin:0}
.up-close-opening img{display:block;width:100%;height:auto}
.up-close-opening figcaption{font:12px/1.6 Arial,sans-serif;margin-top:12px}
@media(max-width:600px){.up-close-opening{grid-template-columns:1fr;gap:22px}.up-close-opening figure{max-width:330px;margin:auto}}

/* Match the image column used by the other illustrated letters. */
.first-flower-letter .letter-turn{width:calc((100% - 26px)*.425);max-width:none}
.first-flower-letter .letter-turn>div:first-child{height:auto;aspect-ratio:1}
.first-flower-letter .letter-turn img{transform:rotate(var(--manual-letter-turn,0deg))!important}
@media(max-width:600px){.first-flower-letter .letter-turn{width:100%;max-width:330px}}