/* The entry dialog hands focus to a reading landmark, not the logo link. */
#album-main:focus{outline:none}
.gallery-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#random-memory,.footprint-cities button,#retry-image{min-height:44px;border:1px solid #db9ab3;border-radius:24px;padding:9px 17px;background:#fff7fb;color:var(--ink);font:12px/1.6 var(--sans);cursor:pointer}
#random-memory{background:#bd4576;color:#fff;border-color:#bd4576;white-space:nowrap}
#random-memory:disabled{opacity:.45;cursor:default}
.favorite-status{font:12px/1.8 var(--sans);color:var(--muted);margin:0 0 12px}
.favorite-status:empty{display:none}
.footprints{margin:0 0 16px;padding:19px 20px;border:1px solid #ecc3d3;border-radius:16px;background:#fff8fb}
.footprint-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.footprint-heading h3{margin:0;color:var(--ink);font:20px/1.6 var(--hand)}
.footprint-heading p,.footprint-note{margin:0;color:var(--muted);font:11px/1.8 var(--sans)}
.footprint-cities{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0 9px}
.footprint-cities button[aria-pressed="true"]{background:#bd4576;color:white;border-color:#bd4576}
#random-memory:focus-visible,.footprint-cities button:focus-visible,#retry-image:focus-visible{outline:3px solid #bd4576;outline-offset:3px}
.lightbox-image-wrap{touch-action:pan-y pinch-zoom}
.image-load-panel{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;pointer-events:none}
.image-load-panel p{margin:0;padding:6px 12px;border-radius:12px;background:#fff8fbeb;color:var(--ink);font:11px/1.6 var(--sans);box-shadow:0 2px 12px #71405218}
.image-load-panel #retry-image{pointer-events:auto;background:#fff8fb}
.image-load-panel [hidden]{display:none}
.lightbox-image-wrap.is-loading>img{filter:blur(2px)}
@media(max-width:580px){.footprints{padding:15px 13px}.footprint-heading{display:block}.footprint-heading p{margin-top:5px}.gallery-toolbar{flex-direction:column;align-items:stretch;gap:12px}.gallery-toolbar .filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.gallery-tools{gap:8px;justify-content:space-between}.gallery-tools .gallery-hint{display:inline;font-size:10px}.footprint-cities button{padding-inline:12px}.image-load-panel{left:8px;right:8px;bottom:8px}}
#monthly-countdown,#annual-countdown{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:4px;width:100%;margin:0;font:inherit;font-variant-numeric:tabular-nums}
.has-flip-countdown .countdown-unit{display:flex;flex-direction:column;gap:7px;min-width:0;text-align:center}
.has-flip-countdown .countdown-unit-name{font:11px/14px var(--sans);color:var(--muted);letter-spacing:0}
.has-flip-countdown .countdown-digit-window{display:block;position:relative;height:38px;overflow:hidden;isolation:isolate}
.has-flip-countdown .countdown-track{position:absolute;inset:0;display:block;height:100%;font:28px/38px ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:0;text-align:center;color:#b14972}
.has-flip-countdown .countdown-current{transform:translateY(0)}
.has-flip-countdown .countdown-next{transform:translateY(-100%)}
.has-flip-countdown .is-sliding .countdown-current{animation:countdown-slide-out 380ms cubic-bezier(.22,1,.36,1) both}
.has-flip-countdown .is-sliding .countdown-next{animation:countdown-slide-in 380ms cubic-bezier(.22,1,.36,1) both}
@keyframes countdown-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}
@keyframes countdown-slide-in{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@media(max-width:580px){
  .countdown-card.has-flip-countdown{padding-inline:12px}
  .has-flip-countdown .countdown-unit{gap:6px}
  .has-flip-countdown .countdown-digit-window{height:30px}
  .has-flip-countdown .countdown-track{font-size:18px;line-height:30px}
  .has-flip-countdown .countdown-unit-name{font-size:10px;line-height:13px}
}
@media(max-width:360px){.has-flip-countdown .countdown-track{font-size:14px}}
@media(prefers-reduced-motion:reduce){.has-flip-countdown .is-sliding .countdown-track{animation:none}}
html{scroll-padding-top:calc(var(--header-height,110px) + 18px)}
#together,#memories,#about,.memory-chapter{scroll-margin-top:0}
.toast{top:calc(var(--header-height,110px) + 12px);bottom:auto;left:auto;right:max(20px,var(--safe-right));max-width:min(340px,calc(100vw - 40px));border-radius:12px;transform:translateY(-8px);pointer-events:none;z-index:70}
.toast.visible{transform:translateY(0)}
.together-counter #together-clock{letter-spacing:.7px;line-height:1.8;min-width:0}
/* Size the viewer around the photo's aspect ratio instead of a 900px pink panel. */
dialog.lightbox{--image-room:max(140px,calc(var(--visible-height) - var(--safe-top) - var(--safe-bottom) - 310px));width:min(1120px,calc(100vw - var(--safe-left) - var(--safe-right) - 28px),calc(var(--image-room)*var(--photo-aspect,.75) + 36px));min-width:min(300px,calc(100vw - var(--safe-left) - var(--safe-right) - 28px))}
.lightbox .lightbox-image-wrap{min-height:0;background:transparent}
.lightbox .lightbox-image-wrap>img{width:100%;height:auto;max-height:var(--image-room);min-height:0;max-width:100%;object-fit:contain}
@media(max-width:580px){
  .toast{top:auto;right:auto;bottom:calc(var(--safe-bottom) + var(--viewport-bottom-occlusion) + 16px);left:50%;width:max-content;max-width:calc(100vw - 40px);transform:translate(-50%,8px)}
  .toast.visible{transform:translate(-50%,0)}
  .together-counter #together-clock{font-size:11px;letter-spacing:.2px}
  .hero-collage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;width:min(360px,100%);max-width:100%;height:auto;min-height:0;padding:12px 14px 0;margin:8px 0 6px;transform:none}
  .hero-collage:before{inset:6px 5px 90px}
  .hero-collage .cover{position:relative;inset:auto;width:100%;margin:0;align-self:start;padding:7px 7px 0}
  .hero-collage .cover-back{margin-top:24px;transform:rotate(-5deg)}
  .hero-collage .cover-main{transform:rotate(5deg)}
  .hero-collage .cover-window{height:auto;aspect-ratio:3/4}
  .hero-collage .cover-window img{object-fit:contain}
  .hero-collage .cover figcaption{height:auto;min-height:52px;padding:8px 2px;gap:4px;font-size:11px;line-height:1.6;letter-spacing:0}
  .hero-collage .cover-main figcaption span{white-space:normal;overflow:visible;text-overflow:clip;max-width:calc(100% - 16px)}
  .hero-collage .cover figcaption svg{width:12px;height:12px}
  .hero-collage .little-note{position:static;inset:auto;grid-column:1/-1;display:block;text-align:center;justify-self:center;transform:rotate(-3deg);margin-top:1px}
  .hero-collage .little-note svg{display:none}
  .hero-collage .little-note span{font-size:14px;line-height:1.7}
  .hero-collage .collage-label{position:static;inset:auto;grid-column:1/-1;writing-mode:horizontal-tb;transform:none;text-align:center;font-size:9px;letter-spacing:1px;line-height:1.7;margin-top:-7px}
}