:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--visible-height:100dvh;--viewport-bottom-occlusion:0px}
html{background:#fff1f5;scroll-padding-top:calc(var(--safe-top) + 24px)}
.record-player{right:calc(max(16px,var(--safe-right)) + 4px);bottom:calc(var(--safe-bottom) + var(--viewport-bottom-occlusion) + 18px)}
.site-footer{padding-bottom:calc(50px + var(--safe-bottom))}
.entry-dialog,.lightbox{position:fixed;top:calc(var(--safe-top) + 14px);bottom:calc(var(--safe-bottom) + var(--viewport-bottom-occlusion) + 14px);left:calc(var(--safe-left) + 14px);right:calc(var(--safe-right) + 14px);margin:auto;max-height:calc(var(--visible-height) - var(--safe-top) - var(--safe-bottom) - 28px)}
.lightbox{width:min(900px,calc(100% - var(--safe-left) - var(--safe-right) - 28px))}
.lightbox-image-wrap>img{max-height:min(72dvh,calc(var(--visible-height) - var(--safe-top) - var(--safe-bottom) - 150px))}
.toast{bottom:calc(var(--safe-bottom) + var(--viewport-bottom-occlusion) + 96px)}
@media(max-width:1120px){.page-width{--page-inset:max(24px,var(--safe-left),var(--safe-right));width:calc(100% - var(--page-inset) - var(--page-inset))}}
@media(min-width:581px) and (max-width:850px){.hero-collage .orbit{width:100%;height:auto;aspect-ratio:1;left:0}.hero-collage .orbit-one{width:90%;left:5%}}
@media(max-width:580px){
  .page-width{--page-inset:max(20px,var(--safe-left),var(--safe-right))}
  .site-header{height:calc(72px + var(--safe-top));padding-top:var(--safe-top);gap:10px}
  .brand>span{font-size:19px}.brand-mark{width:28px;height:28px}.brand small{font-size:8px;letter-spacing:1px}
  .site-header .button{font-size:10px;padding:9px 11px;min-height:40px}
  .hero{padding-top:28px;padding-bottom:53px;gap:22px;min-height:calc(100svh - var(--safe-top) - 72px - var(--safe-bottom))}
  .hero h1{font-size:44px;line-height:1.2;letter-spacing:-1px;margin-bottom:18px}.hero h1 em{font-size:.76em;line-height:1.35;margin-top:8px}
  .album-label{margin-bottom:17px;padding:6px 11px;font-size:9px}
  .hero-copy .hero-description{font-size:11px;line-height:1.9;margin-bottom:19px}
  .hero-copy .button-solid{min-height:44px;padding:12px 20px;font-size:11px}
  .hero-note{font-size:12px;margin-top:16px}
  .hero-collage{width:min(310px,100%);height:295px;margin-top:4px;margin-bottom:4px}
  .cover-main{width:53%;right:9px;top:7px}.cover-main .cover-window{height:209px}
  .cover-back{width:47%;left:3px;top:47px}.cover-back .cover-window{height:177px}
  .cover figcaption{font-size:11px;height:37px}.cover-window{border-radius:3px}
  .orbit-one{width:270px;height:270px;top:3px;left:20px}.orbit-two{width:300px;height:300px;top:-12px;left:4px}
  .bow-doodle{right:19px;top:-18px;width:61px;height:47px}.heart-doodle-one{left:3px;top:16px}.heart-doodle-two{right:-1px;top:146px}
  .little-note{right:0;bottom:-3px}.little-note span{font-size:15px}.little-note svg{width:37px;height:37px}
  .collage-label{bottom:0;left:8px;font-size:7px;letter-spacing:1px}.scroll-cue{bottom:15px;font-size:9px}
  .record-player{right:calc(max(12px,var(--safe-right)) + 2px);bottom:calc(var(--safe-bottom) + var(--viewport-bottom-occlusion) + 14px)}
  .entry-dialog{width:min(350px,calc(100% - var(--safe-left) - var(--safe-right) - 32px))}
  .gallery-toolbar{margin-bottom:24px}.filter{min-height:44px}
  .site-footer{padding-bottom:calc(80px + var(--safe-bottom))}
}
/* The iPhone 16 Pro is 402 x 874 CSS points at its default display scale. */
@media(min-width:390px) and (max-width:430px) and (orientation:portrait){.hero h1{font-size:44px}.section-heading h2{font-size:23px}.photo-grid{column-gap:18px}.photo-caption h3{font-size:14px}}
/* Safari toolbars reduce the viewport; use a compact composition instead of clipping it. */
@media(max-width:580px) and (max-height:780px){.hero{padding-top:23px;gap:15px}.hero-note{display:none}.hero h1{font-size:41px;margin-bottom:15px}.album-label{margin-bottom:14px}.hero-collage{height:265px;width:285px;max-width:100%;margin-top:0}.cover-main .cover-window{height:185px}.cover-back .cover-window{height:157px}.cover-main{right:8px}.cover-back{top:37px}.orbit-one{width:245px;height:245px;left:17px;top:1px}.orbit-two{width:275px;height:275px;left:1px;top:-12px}.little-note span{font-size:14px}.bow-doodle{right:14px;top:-18px;width:57px}.collage-label{font-size:7px}.entry-photos{height:94px}.entry-photos img{height:84px;width:64px}.entry-dialog{padding-top:22px;padding-bottom:20px}}
@media(orientation:landscape) and (max-height:500px){.entry-dialog{padding:17px 25px}.entry-photos{height:62px;margin-bottom:5px}.entry-photos img{height:57px;width:43px;border-width:3px;border-bottom-width:7px}.entry-kicker{margin-bottom:6px;font-size:10px}.entry-dialog h2{font-size:20px;line-height:1.3;margin-bottom:8px}.entry-dialog #entry-description{margin-bottom:12px;line-height:1.5;font-size:10px}.entry-enter{min-height:42px;padding:10px 17px}.entry-hint{margin-top:9px;font-size:8px}}