.defs { position: absolute; }

.album {
  flex: 1;
  width: min(100%, 1140px);
  margin: 0 auto;
  padding: clamp(28px, 6vh, 72px) var(--pad) 0;
}

.album-head {
  padding-bottom: clamp(22px, 4vh, 44px);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(36px, 7vh, 80px);
}
.album-title {
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: clamp(44px, 8vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--paper);
}
.album-title em { font-style: italic; font-weight: 400; color: var(--orchid); }
.album-sub { margin: 0; }

/* ---------------------------------------------------------------- the vine */
.vine { position: relative; padding-bottom: clamp(60px, 10vh, 120px); }
.stem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.stem path {
  fill: none;
  stroke: var(--orchid-dim);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.stem .stem-node { fill: var(--ink); stroke: var(--orchid); stroke-width: 1.5; }

.days { list-style: none; margin: 0; padding: 0; position: relative; }

.day {
  position: relative;
  display: grid;
  gap: 16px;
  padding-bottom: clamp(52px, 10vh, 110px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms cubic-bezier(0.16, 0.84, 0.24, 1), transform 800ms cubic-bezier(0.16, 0.84, 0.24, 1);
}
.day.in { opacity: 1; transform: none; }

.cluster { width: 38px; height: 62px; position: absolute; top: -10px; }

.day-head { display: grid; gap: 6px; }
.day-date {
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.day-date b { font-weight: 500; font-style: normal; color: var(--orchid); }
.day-date span { font-style: italic; color: var(--muted); }
.day-place {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}
.day-title {
  margin: 4px 0 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.15;
  color: var(--paper);
}
.day-note { margin: 0; color: var(--muted); font-size: 14px; max-width: 40ch; }

.shots { display: flex; flex-wrap: wrap; gap: 8px; }
.shot {
  position: relative;
  width: clamp(132px, 27vw, 208px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ground);
  border: 0;
  border-radius: 0;
  padding: 0;
  cursor: zoom-in;
  appearance: none;
  filter: saturate(0.94) brightness(0.92);
  transition: filter 400ms cubic-bezier(0.16, 0.84, 0.24, 1);
}
.shot:hover, .shot:focus-visible { filter: none; }
.shot img, .shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot.is-video { cursor: default; filter: none; }
.shot-cap {
  position: absolute; left: 0; bottom: 0;
  font: 500 9px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--paper); background: rgba(10, 4, 16, 0.72); padding: 7px 9px;
}
.shot:focus-visible { outline: 1px solid var(--orchid); outline-offset: 2px; }

.vine-end {
  position: relative;
  margin: 0;
  color: var(--muted);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 26px);
}

/* ---------------------------------------------------------------- layout */
.vine { --stem-x: 18px; }
.days, .vine-end { padding-left: 50px; }
.cluster { left: calc(var(--stem-x) - 19px); }

@media (min-width: 880px) {
  .vine { --stem-x: 50%; }
  .days, .vine-end { padding-left: 0; }
  .day { width: calc(50% - 68px); }
  .day:nth-child(odd)  { margin-left: auto; }
  .day:nth-child(even) { margin-right: auto; text-align: right; }
  .day:nth-child(even) .shots { justify-content: flex-end; }
  .day:nth-child(even) .day-head { justify-items: end; }
  .day:nth-child(even) .day-note { justify-self: end; }
  .cluster { left: auto; }
  .day:nth-child(odd)  .cluster { left: -87px; }
  .day:nth-child(even) .cluster { right: -87px; }
  .vine-end { text-align: center; }
}

/* ---------------------------------------------------------------- lightbox */
.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh;
  width: 100vw; height: 100dvh; color: var(--paper);
}
.lightbox::backdrop { background: rgba(6, 2, 10, 0.95); }
.lightbox-fig { margin: 0; height: 100%; display: grid; place-items: center; grid-template-rows: 1fr auto; padding: 60px 16px 28px; }
.lightbox-fig img { max-width: 100%; max-height: calc(100dvh - 130px); object-fit: contain; }
.lightbox-fig figcaption {
  color: var(--muted); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; margin-top: 16px;
}
.lightbox-close {
  position: fixed; top: 18px; right: 18px;
  appearance: none; background: transparent; color: var(--paper);
  border: 1px solid var(--rule); border-radius: 0;
  font: 500 10px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase;
  padding: 14px 18px; min-height: 44px; cursor: pointer;
}
.lightbox-close:hover { border-color: var(--orchid); color: var(--orchid); }
.lightbox-close:focus-visible { outline: 2px solid var(--orchid); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .day { opacity: 1; transform: none; transition: none; }
}