/* The travel album and its HDR-preserving photograph viewer. */
.travel-album {
  --portrait-height: 276px;
  --landscape-width: 184px;
  --photo-gap: 18px;
  --day-gap: 30px;
  padding: 39px 0 35px;
}
.album-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.album-title-lockup { display: flex; align-items: center; gap: 27px; }
.album-camera { display: block; width: 63px; height: 64px; flex: none; }
.album-title-lockup .eyebrow { margin: 0 0 5px; font: 400 10px/1.5 var(--sans); letter-spacing: 1.7px; text-transform: uppercase; }
.album-title-lockup h2 { margin: 0; font: 400 31px/1.2 var(--serif); letter-spacing: -.45px; }
.album-trip { margin: 0; padding-left: 22px; border-left: 1px solid var(--line); font: 16px/1.3 var(--serif); white-space: nowrap; }
.album-trip span { display: block; margin-top: 4px; color: var(--muted); font: 11px/1.4 var(--sans); }
.album-trip #album-trip-name { margin: 0; color: var(--ink); font: inherit; }
.album-trip #album-trip-period { text-transform: capitalize; }
.album-photo-link img[hidden] { display: none; }
.album-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 4px 0 7px;
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}
.album-viewport::-webkit-scrollbar { display: none; }
.album-viewport:focus-visible { outline: 2px solid #7c9482; outline-offset: 7px; border-radius: 2px; }
.album-days { display: flex; width: max-content; min-width: 100%; }
.album-day { flex: none; padding-right: var(--day-gap); }
.album-day:last-child { padding-right: 0; }
.album-date {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 19px;
  color: var(--forest);
  font: 400 14px/20px var(--serif);
}
.album-date::before { content: ''; width: 5px; height: 5px; flex: none; border-radius: 50%; background: #9caa99; }
.album-date::after { content: ''; height: 1px; background: var(--line); flex: 1; margin-left: 3px; }
.album-day:first-child .album-date::before { background: var(--forest); }
.album-day:last-child .album-date::after { min-width: 20px; }
.album-columns { display: flex; align-items: flex-start; gap: var(--photo-gap); }
.album-column { flex: none; }
.album-column--stack { display: flex; flex-direction: column; width: var(--landscape-width); gap: 17px; }
.album-photo { margin: 0; width: calc(var(--portrait-height) * var(--photo-ratio)); }
.album-column--stack .album-photo { width: 100%; }
.album-photo--landscape { width: calc(var(--landscape-width) * 1.36); }
.album-photo-link {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--paper);
  line-height: 0;
  cursor: zoom-in;
}
.album-photo-link:hover { outline: none; }
.album-photo-link:focus-visible { outline: 2px solid #6e896f; outline-offset: 4px; }
.album-photo-link img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border-radius: 3px;
  /* Native width/height attributes reserve the exact uncropped aspect ratio. */
}
/* Keep the gain-map JPEG intact and allow HDR in supporting browsers. Never
   route these photographs through the SDR map thumbnails, canvas or filters. */
.album-photo-link img,
.album-full-photo img { dynamic-range-limit: no-limit; }
.album-photo-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgb(38 53 46 / 10%);
  border-radius: inherit;
  pointer-events: none;
}
@media (hover: hover) {
  .album-photo-link:hover::after { border-color: rgb(36 76 62 / 50%); }
}
.album-newest {
  position: absolute;
  left: 9px;
  top: 9px;
  padding: 5px 8px 4px;
  border-radius: 2px;
  background: var(--paper);
  color: var(--forest);
  font: 600 9px/1.1 var(--sans);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.album-photo figcaption { padding-top: 9px; }
.album-caption { margin: 0; color: var(--ink); font: 400 13px/1.45 var(--serif); overflow-wrap: anywhere; }
.album-time { display: block; margin-top: 4px; color: var(--muted); font: 10.5px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
.album-viewport.is-dragging, .album-viewport.is-dragging * { cursor: grabbing; user-select: none; }
.album-empty { width: 100%; margin: 0; padding: 20px 0; color: var(--muted); font-size: 14px; }
.album-photo-error { display: grid; place-items: center; min-height: 120px; background: var(--soft); color: var(--muted); font: 12px/1.5 var(--sans); }
.album-viewer-error { margin: 0; padding: 24px; color: var(--muted); font: 13px/1.5 var(--sans); }
.album-viewer-error[hidden] { display: none; }
.album-full-photo img[hidden] { display: none; }

/* Image-led sizing. The caption has no intrinsic-width contribution, so a
   long sentence cannot make a portrait's frame wider than its photograph. */
.album-lightbox {
  --viewer-padding: 16px;
  width: fit-content;
  max-width: calc(100vw - 48px);
  max-height: calc(100dvh - 96px);
  padding: 0;
  margin: auto;
  border: 0;
  border-radius: 4px;
  background: transparent;
  overflow: visible;
}
.album-lightbox::backdrop { background: rgb(18 32 26 / 88%); }
.album-full-photo {
  margin: 0;
  min-width: 0;
  padding: var(--viewer-padding);
  border-radius: 4px;
  background: var(--paper);
}
.album-full-photo img {
  width: auto;
  height: auto;
  max-width: min(860px, calc(100vw - 48px - 2 * var(--viewer-padding)));
  max-height: min(66dvh, 720px);
  margin: 0;
  object-fit: contain;
  border-radius: 2px;
}
.album-full-photo figcaption {
  contain: inline-size;
  padding-top: 11px;
  margin: 0;
  max-height: 18dvh;
  overflow-y: auto;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: #aab6a9 transparent;
}
.album-full-photo p { margin: 0; color: #44564d; font: 400 13px/1.5 var(--serif); }
.album-full-photo time { display: block; margin-top: 5px; color: var(--muted); font: 10.5px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
.album-close {
  position: absolute;
  top: -44px;
  right: -10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--paper);
}
.album-close svg { fill: none; stroke: currentColor; stroke-width: 1.4; }
.album-close:hover { outline: none; color: #c5d0c2; }
.album-close:focus-visible { outline: 2px solid #c5d0c2; outline-offset: -5px; }
.album-photo-stage { position: relative; width: fit-content; }
.album-photo-navigation { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; color: var(--paper); }
.album-photo-navigation[hidden] { display: none; }
.album-photo-navigation button { pointer-events: auto; display: grid; align-items: center; flex: 0 0 60px; width: 60px; height: 60px; margin: 0; padding: 0 11px; border: 0; border-radius: 4px; background: transparent; color: #fff; line-height: 1; transition: opacity .18s ease; }
.album-photo-navigation button:first-child { justify-items: start; }
.album-photo-navigation button:last-child { justify-items: end; }
.album-photo-arrow-disc { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(18 32 26 / 40%); box-shadow: 0 0 0 1px rgb(255 255 255 / 16%); }
.album-photo-arrow-disc svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.album-photo-navigation button:disabled { visibility: hidden; pointer-events: none; }
.album-photo-navigation button:hover { outline: none; }
.album-photo-navigation button:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.album-photo-position { position: absolute; top: calc(-44px - var(--viewer-padding)); left: 0; height: 44px; display: grid; place-items: center; min-width: 34px; text-align: center; font: 11px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .album-photo-navigation button { opacity: 0; }
  .album-photo-stage[data-pointer-inside="true"] .album-photo-navigation button,
  .album-photo-navigation button[data-keyboard-focus="true"] { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .album-photo-navigation button,.album-photo-arrow-disc { transition: none; } }
html:has(.album-lightbox[open]) { overflow: hidden; }

@media (min-width: 1500px) {
  .travel-album { --portrait-height: 292px; --landscape-width: 194px; }
}
@media (max-width: 760px) {
  .travel-album { --portrait-height: 228px; --landscape-width: 158px; --photo-gap: 14px; --day-gap: 24px; padding: 28px 0; }
  .album-heading { margin-bottom: 22px; gap: 18px; }
  .album-title-lockup { gap: 18px; }
  .album-camera { width: 49px; height: 50px; }
  .album-title-lockup h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.3px; }
  .album-trip { font-size: 14px; padding-left: 15px; }
  .album-trip span { font-size: 10px; }
  .album-date { font-size: 13px; margin-bottom: 15px; }
  .album-viewport { margin-right: -5.56%; padding-right: 5.56%; }
  .album-caption { font-size: 12px; line-height: 1.45; }
  .album-time { font-size: 10px; margin-top: 5px; }
  .album-newest { top: 8px; left: 8px; font-size: 8px; padding: 5px 7px; }
  .album-column--stack { gap: 16px; }
  .album-lightbox { --viewer-padding: 12px; max-width: calc(100vw - 24px); }
  .album-full-photo img { max-width: calc(100vw - 48px); max-height: 62dvh; }
  .album-full-photo p { font-size: 12.5px; }
  .album-full-photo figcaption { padding-top: 10px; }
  .album-close { right: -7px; }
}
@media (max-height: 500px) {
  .album-lightbox { --viewer-padding: 10px; }
  .album-full-photo img { max-height: calc(100dvh - 168px); }
  .album-full-photo figcaption { max-height: 60px; }
}
/* A phone held sideways has room beside, not below, a portrait. Keep the
   entire caption visible here instead of making the image unnecessarily tiny. */
@media (max-height: 500px) and (min-width: 600px) {
  .album-full-photo {
    display: grid;
    grid-template-columns: max-content 180px;
    align-items: center;
    gap: 18px;
  }
  .album-full-photo img {
    max-width: calc(100vw - 266px);
    max-height: calc(100dvh - 128px);
  }
  .album-full-photo figcaption { padding: 0 2px 2px 0; max-height: calc(100dvh - 128px); }
  .album-full-photo p { font-size: 12.5px; }
}
@media (max-width: 540px) {
  .album-heading { align-items: flex-start; }
  .album-trip { display: none; }
}
@media (max-width: 360px) {
  .album-title-lockup { gap: 13px; }
  .album-camera { width: 43px; height: 44px; }
  .album-title-lockup h2 { font-size: 21px; }
}