/* hmmmmm — each entry is set like a page from a novel, its photos hung like
   a small exhibition. Shared type and colour live in ../assets/css/styles.css. */

.entry {
  --slide-h: min(60vh, 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* All text sits in a column as wide as the centred photo (a 2:3 photo is
   --slide-h x 2/3), every line flush left with the photo's left edge. */
.entry__header,
.entry__body,
.entry__dialogue {
  width: calc(var(--slide-h) * 2 / 3);
  text-align: left;
}

.entry__title {
  margin: 0;
  font-size: 0.6em;
  font-weight: var(--font-weight-normal);
}

/* Date and place, like the small label beside a work in a gallery. */
.entry__meta {
  margin-top: 0.9em;
  font-family: var(--font-family-sans);
  font-size: 0.45em;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* Hand-broken Chinese lines; a line longer than the column spills right
   rather than rewrapping. */
.entry__body,
.entry__dialogue {
  line-height: 2;
  letter-spacing: 0.04em;
}

.entry__body span,
.entry__dialogue span {
  display: block;
  white-space: nowrap;
}

.entry__body {
  margin-top: 3em;
  font-size: 0.56em;
}

/* Photos: a full-bleed row that snaps one image to the centre. */
.slides {
  width: 100vw;
  margin-top: 3.5em;
}

.slides__track {
  display: flex;
  gap: 1.25rem;
  /* Centre the first and last 2:3 photo (width = height x 2/3). */
  padding-inline: calc(50vw - var(--slide-h) / 3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}

.slides__track::-webkit-scrollbar {
  display: none;
}

.slide {
  flex: none;
  margin: 0;
  background: #f1f1ef;
  scroll-snap-align: center;
}

.slide img {
  display: block;
  width: auto;
  height: var(--slide-h);
  /* If a photo fails to load, its description stays small and quiet. */
  font-size: 0.4em;
  color: var(--color-text-muted);
}

/* With JS, the photo in view is inked and its neighbours rest in grey. */
.slides.is-ready .slide {
  opacity: 0.28;
  cursor: pointer;
  transition: opacity 1100ms var(--ease-out);
}

.slides.is-ready .slide.is-current {
  opacity: 1;
}

.slides.is-ready .slide.is-current:last-child {
  cursor: default;
}

.slides__count {
  margin-top: 1.4em;
  font-family: var(--font-family-sans);
  font-size: 0.45em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* Two overheard lines that open the entry, set a step smaller than the body. */
.entry__dialogue {
  margin-top: 3em;
  font-size: 0.5em;
}

@media (max-width: 720px) {
  .slides__track {
    gap: 0.75rem;
  }

  .entry__body,
  .entry__dialogue {
    line-height: 2.1;
  }
}