#journal{width:min(620px,calc(100% - 28px));padding:40px clamp(22px,5vw,46px) 25px;border:0;border-radius:2px;background:linear-gradient(90deg,#c9b99955,transparent 5%),#f6eddb;color:#51432f;box-shadow:0 15px 55px #0007}
#journal::backdrop{background:#17140f88}
#journal h2{font:26px/1.4 'Segoe Print','Bradley Hand','Comic Sans MS',cursive;margin:0 0 14px}
#journal .invitation{font:17px/1.65 Georgia,serif;margin:0 0 15px}
#journal textarea{display:block;min-height:210px;height:30svh;max-height:40svh;resize:vertical;border:0;border-radius:0;padding:8px 5px;background:repeating-linear-gradient(transparent,transparent 35px,#a8957133 36px);font:20px/36px 'Segoe Print','Bradley Hand','Comic Sans MS',cursive;color:#51432f;transition:opacity 1s ease;box-shadow:none}
#journal textarea:focus{outline:1px solid #aa947755;outline-offset:3px}
#journal button{font:italic 17px Georgia,serif;background:transparent;color:#655239;border:0;border-radius:1px;min-height:44px;padding:10px 12px}
#journal button:hover{background:#a8957112}
#journal button:focus-visible{outline:1px solid #806a47;outline-offset:1px}
#porch-close{position:absolute;right:6px;top:5px;min-width:44px;font:24px Georgia,serif!important}
#journal .good-actions{text-align:right;margin-top:12px}
#journal .good-message{font:21px/1.6 'Segoe Print','Bradley Hand','Comic Sans MS',cursive;text-align:center;padding:60px 0;margin:0}
#journal .good-message:focus{outline:none}
#journal.leaving textarea{opacity:0}
@media(prefers-reduced-motion:reduce){#journal textarea{transition:none}}
body.motion-paused #journal textarea{transition:none}

.journal-book:hover{background:#ffe8b508}.journal-book:focus-visible{outline:1px solid #e5c68899;outline-offset:2px;background:#ffe8b508}