.memories {
  max-width: 1680px;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 80px 64px;
}

.memory-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 54px;
  align-items: center;
  min-width: 0;
}

.memory-intro .section-heading { display: block; margin-bottom: 30px; }
.memory-intro .chapter-number { display: block; margin-bottom: 20px; }
.memory-intro h2 { font-size: 32px; line-height: 1.8; letter-spacing: .045em; }
.memory-intro h2 span { display: block; }
.wall-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; }
.wall-toggle, .wall-browse {
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #c8bba9;
  background: transparent;
  color: #806e5b;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .04em;
}
.wall-browse { border-bottom-color: transparent; color: #a18d77; }
.wall-browse span { margin-left: 10px; }

.memory-wall {
  --photo-gap: 18px;
  --columns: 4;
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--photo-gap);
  position: relative;
  min-width: 0;
  height: clamp(520px, 74svh, 800px);
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
}

.memory-lane { position: relative; min-width: 0; height: 100%; overflow: hidden; }
.memory-track {
  --travel: 0px;
  --duration: 180s;
  --delay: 0s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--photo-gap);
  animation: memory-drift var(--duration) linear var(--delay) infinite;
  animation-play-state: paused;
  will-change: transform;
}
.memory-lane:nth-child(even) .memory-track { animation-direction: reverse; }
.memory-wall.is-ready:not(.is-paused) .memory-track { animation-play-state: running; }
.memory-cycle { display: flex; flex-direction: column; gap: var(--photo-gap); flex-shrink: 0; }
.memory-wall .memory-item:nth-child(n) { width: 100%; min-width: 0; margin: 0; grid-column: auto; }
.memory-wall .memory-button { cursor: pointer; }
.memory-wall .memory-button img { aspect-ratio: auto; height: auto; }
.memory-wall .photo-plus { width: 25px; height: 25px; right: 9px; bottom: 9px; font-size: 17px; opacity: 0; transition: opacity .2s; }
.memory-wall .memory-button:hover .photo-plus, .memory-wall .memory-button:focus-visible .photo-plus { opacity: 1; }

@keyframes memory-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, var(--travel), 0); }
}

@media (max-width: 1100px) {
  .memories { padding: 70px 40px; }
  .memory-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 34px; }
  .memory-intro h2 { font-size: 28px; }
  .memory-wall { --photo-gap: 14px; }
}

@media (max-width: 899px) {
  .memories { padding: 72px 24px; min-height: 0; }
  .memory-layout { display: block; }
  .memory-intro { margin-bottom: 28px; }
  .memory-intro .section-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
  .memory-intro .chapter-number { margin: 0; }
  .memory-intro h2 { font-size: 22px; line-height: 1.5; letter-spacing: .025em; }
  .memory-intro h2 span { display: inline; }
  .wall-controls { display: inline-flex; margin-left: 30px; }
  .memory-wall { --photo-gap: 14px; height: 640px; max-height: 76svh; min-height: 440px; }
}