/* ---- The whole page ---- */
body {
  margin: 0;
  min-height: 100vh;
  background: #0d0d0d;
  color: #ececec;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---- The title block at the top ---- */
header {
  position: relative;
  max-width: 1580px;
  margin: 0 auto;
  padding: 56px 20px 28px;
}

header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
}

header p {
  margin: 6px 0 0;
  color: #8a8a8a;
}

.info-link {
    position: absolute;
    top: 56px;
    right: 20px;
    color: #8a8a8a;
    text-decoration: none;
    font-size: 0.9rem;
}

.about {
    max-width: 60ch;
    margin: 0 auto;
    padding: 19vh 24px 12vh;
    line-height: 1.75;
}

/* ---- The photos: alternating left / right ---- */
.gallery {
  max-width: 1580px;
  margin: 0 auto;
  padding: 0 20px;
}

.gallery a {
  display: block;
  width: 55%;
  margin-bottom: 150px;
  margin-top: 150px;
  scroll-margin-top: calc(50vh - 20vw);   /* land roughly centered when returning via #id */
}

.gallery a img {
  display: block;
  width: 100%;               /* fill the link, which is already 60% wide */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 3px;
}

/* odd photos (1st, 3rd, 5th …) hug the RIGHT edge */
.gallery a:nth-child(odd) { margin-left: auto; }

/* even photos (2nd, 4th, 6th …) hug the LEFT edge */
.gallery a:nth-child(even) { margin-right: auto; }

/* ---- The footer at the bottom ---- */
footer {
  max-width: 1580px;
  text-align: right;
  padding: 0px 0px 0px;
  color: #8a8a8a;
  font-size: 0.85rem;
}


body.view {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.viewer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    max-width: 100%;
}

.viewer img {
    max-width: 100vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 3px;
}

.viewer .caption {
    margin: 14px 0 0;
    color: #8a8a8a;
    font-size: 0.9rem;
    text-align: right;
    align-self: stretch;
}

.close {
    position: fixed;
    top: 16px;
    left: 16px;
    color: #8a8a8a;
    text-decoration: none;
    font-size: 0.9rem;
}

.close:hover {
    color: #ececec;
}