/* A small postcard frame keeps the map in view while the original media fits inside. */
#viewer:is([data-kind=photo],[data-kind=video]){
  --aspect:.75;
  inset:0 18px 0 auto;
  width:min(460px,48vw,calc((100svh - 64px)*var(--aspect)));
  height:auto;
  aspect-ratio:3/4;
  max-height:calc(100svh - 64px);
  padding:6px;
  border-radius:10px;
  background:var(--paper);
  box-shadow:0 12px 40px #32382e2b,0 0 0 1px #32382e1a;
}
#viewer:is([data-kind=photo],[data-kind=video]) .viewer-stage{
  border-radius:5px;
  background:#22251f;
}
#viewer:is([data-kind=photo],[data-kind=video]) .viewer-caption{
  inset:14px 60px auto 14px;
  right:auto;
  max-width:calc(100% - 74px);
  max-height:35%;
  padding:8px 10px;
  gap:2px 8px;
  border-radius:4px;
  background:#f2efe6f2;
  box-shadow:0 2px 10px #0002;
  color:var(--ink);
  text-shadow:none;
}
#viewer:is([data-kind=photo],[data-kind=video]) .viewer-caption h2{font-size:14px}
#viewer:is([data-kind=photo],[data-kind=video]) :is(.viewer-place,#viewer-credit){color:var(--muted)}
#viewer:is([data-kind=photo],[data-kind=video]) :is(#viewer-body a,.time-swap){color:inherit;text-decoration-color:#32382e66}
#viewer:is([data-kind=photo],[data-kind=video]) :is(.viewer-close,.viewer-navigation button){
  width:40px;height:40px;
  background:#f2efe6ed;
  color:var(--ink);
  box-shadow:0 1px 5px #0002;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
#viewer:is([data-kind=photo],[data-kind=video]) .viewer-close{right:14px;top:14px}
#viewer:is([data-kind=photo],[data-kind=video]) .viewer-navigation{left:6px;right:6px;padding:0 8px}
@media(max-width:720px){
  #viewer:is([data-kind=photo],[data-kind=video]){
    inset:auto 10px max(10px,env(safe-area-inset-bottom));
    width:calc(100% - 20px);
    height:min(calc((100vw - 20px)/var(--aspect)),65svh);
    max-height:65svh;
    border-radius:10px;
  }
  #viewer:is([data-kind=photo],[data-kind=video]) .viewer-caption{max-height:30%}
}