/* A single photograph in a paper, scalloped keepsake frame. */
.daily-photo{--photo-cream:#fffaf0;--photo-brown:#945c3d}
.daily-photo time{position:absolute;top:7px;right:17px;color:#825638;font:10px/18px 'Segoe UI','Microsoft YaHei',sans-serif;letter-spacing:.08em}
.daily-photo-window{height:100%;position:relative;padding:6px;background:var(--photo-cream);box-sizing:border-box;filter:drop-shadow(0 1px 1px #5e3f3220)}
.daily-photo-window::after{content:"";position:absolute;inset:6px;pointer-events:none;background:radial-gradient(circle at 5px 0,var(--photo-cream) 4px,transparent 4.5px) top left/10px 7px repeat-x,radial-gradient(circle at 5px 7px,var(--photo-cream) 4px,transparent 4.5px) bottom left/10px 7px repeat-x,radial-gradient(circle at 0 5px,var(--photo-cream) 4px,transparent 4.5px) top left/7px 10px repeat-y,radial-gradient(circle at 7px 5px,var(--photo-cream) 4px,transparent 4.5px) top right/7px 10px repeat-y}
.daily-photo img{display:block;width:100%;height:100%;object-fit:cover}
.daily-photo figcaption{position:absolute;bottom:4px;left:14px;right:14px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px/22px 'IWA Hand','IWA Cute Hand','Segoe Print','Microsoft YaHei',sans-serif;color:#79522d}
.daily-photo-preview{display:block;width:min(100%,340px);aspect-ratio:4/3;object-fit:cover;margin:15px 0;border:7px solid #fffaf0;box-shadow:1px 3px 8px #573b2726}
#daily-photo-form small{display:block}
.home-hero>.home-daily-photo{position:absolute;z-index:2;top:100px;right:9%;width:37.8%;max-width:396px;aspect-ratio:4/3;box-sizing:border-box;margin:0;padding:24px 10px 25px;border:7px solid var(--photo-brown);background:var(--photo-cream);box-shadow:2px 4px 9px #573b272b;transform:rotate(-4deg)}
@media(max-width:800px){.home-hero>.home-daily-photo{top:200px;right:8%;width:46.8%;max-width:324px}}
@media(max-width:530px){.home-hero>.home-daily-photo{top:205px;right:8%;width:63%;max-width:288px;padding:24px 8px 24px;border-width:5px}.daily-photo figcaption{font-size:11px}}
.home-hero:has(.home-daily-photo:not([hidden])) .hero-heading :is(.home-welcome,.continue-reading){max-width:42%}
@media(max-width:800px){.home-hero:has(.home-daily-photo:not([hidden])) .hero-heading :is(.home-welcome,.continue-reading){max-width:100%}}
