.memories{
  background:var(--paper);
  content-visibility:auto;
  contain-intrinsic-size:auto 1400px;
}
.memories-head{padding:clamp(80px,11vh,130px) var(--pad-x) 3vh}
.memories-head h2{font-size:clamp(1.9rem,4.2vw,3.1rem);font-weight:700;line-height:1.35}
.memories-head h2 em{font-style:normal;color:var(--rose)}
.memories-head .lead{
  margin-top:.9em;max-width:28em;color:var(--ink-soft);
  font-family:var(--sans);font-size:1rem;line-height:1.75;
}

.timeline{
  display:flex;flex-direction:column;gap:clamp(56px,10vh,120px);
  padding:2vh var(--pad-x) clamp(80px,12vh,140px);
  max-width:var(--maxw);margin:0 auto;
}

.memory{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;
  container-type:inline-size;
}
.memory:nth-child(even){direction:rtl}
.memory:nth-child(even) > *{direction:ltr}

.print{
  background:var(--print);
  padding:12px 12px 36px;
  box-shadow:var(--shadow-print);
  transform:rotate(var(--tilt,-1.4deg));
  position:relative;
}
.memory:nth-child(even) .print{--tilt:1.6deg}
.memory:nth-child(3n) .print{--tilt:-.6deg}
.print .frame{
  overflow:hidden;background:var(--paper-deep);aspect-ratio:4/5;
  position:relative;
}
.memory:nth-child(3n+1) .print .frame{aspect-ratio:3/2}
.memory:nth-child(3n+2) .print .frame{aspect-ratio:4/5}
.memory:nth-child(3n+3) .print .frame{aspect-ratio:1/1}
.print img{
  width:100%;height:100%;object-fit:cover;display:block;
  animation:develop both linear;
  animation-timeline:view();
  animation-range:entry 0% entry 55%;
}
@keyframes develop{
  from{filter:blur(6px) brightness(.72) saturate(.55)}
  to{filter:none}
}
.print .cap{
  position:absolute;left:0;right:0;bottom:8px;
  font-family:var(--hand);font-size:1.05rem;color:var(--ink-soft);
  text-align:center;line-height:1.2;
}
.print .tag{
  position:absolute;top:8px;right:8px;
  font-family:var(--sans);font-size:.65rem;color:var(--ink-faint);
  background:color-mix(in oklab,var(--print) 80%,transparent);
  padding:3px 7px;border-radius:99px;
}

.print-back{
  width:100%;height:100%;
  background:
    repeating-linear-gradient(-32deg,transparent,transparent 10px,oklch(90% .02 72 / .45) 10px,oklch(90% .02 72 / .45) 11px),
    oklch(93.5% .018 80);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;
  color:var(--ink-faint);font-family:var(--sans);font-size:.82rem;text-align:center;padding:1.2em;
}
.print-back .hole{
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #d9cbb8, #b9a48c);
  box-shadow:inset 0 1px 2px rgba(80,50,30,.35);
  margin-bottom:.4em;
}

.tape{
  position:absolute;top:-10px;left:22%;width:72px;height:18px;
  background:color-mix(in oklab, #f3e2b0 70%, transparent);
  transform:rotate(-8deg);
  box-shadow:0 1px 2px rgba(60,40,20,.12);
  pointer-events:none;
}
.memory:nth-child(even) .tape{left:auto;right:18%;transform:rotate(7deg)}

.memory__text .date{
  font-family:var(--latin);font-style:italic;color:var(--ink-faint);font-size:1.05rem;
}
.memory__text .loc{
  color:var(--ink-faint);font-size:.82rem;margin-left:.55em;font-family:var(--sans);
}
.memory__text h3{font-size:clamp(1.35rem,2.4vw,1.95rem);font-weight:700;line-height:1.45;margin:.45em 0 .55em}
.memory__text .said{
  font-family:var(--hand);font-size:1.25rem;color:var(--rose);margin-bottom:.85em;line-height:1.5;
}
.memory__text p.body{font-family:var(--sans);font-size:.98rem;line-height:1.85;color:var(--ink-soft);max-width:32em}
.memory__text .open{
  margin-top:1.3em;display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--sans);font-size:.85rem;color:var(--ink-faint);
  border-bottom:1px solid var(--paper-edge);padding-bottom:2px;transition:color .25s,border-color .25s;
  min-height:44px;
}
.memory__text .open:hover{color:var(--rose);border-color:var(--rose)}

@media (min-width:769px){
  .memory__media{position:sticky;top:16vh}
}
@container (max-width:520px){
  .memory{grid-template-columns:1fr;gap:18px}
}
@media (max-width:768px){
  .memory{grid-template-columns:1fr;gap:20px}
  .memory:nth-child(even){direction:ltr}
  .memory__media{position:static}
  .print{transform:rotate(var(--tilt,-.6deg))}
}

.memory-detail{
  border:0;padding:0;margin:0;position:fixed;inset:0;
  width:100%;height:100%;max-width:none;max-height:none;
  background:color-mix(in oklab,var(--paper) 92%, black 2%);
  overflow:auto;
}
.memory-detail::backdrop{background:rgba(28,18,14,.42);backdrop-filter:blur(6px)}
.memory-detail .sheet{
  min-height:100%;padding:clamp(48px,8vh,90px) var(--pad-x) 80px;
}
.memory-detail .back{
  position:fixed;top:20px;left:20px;z-index:2;font-size:.85rem;
  color:var(--ink-soft);border:1px solid var(--paper-edge);border-radius:99px;
  padding:.65em 1.3em;background:var(--paper);min-height:44px;font-family:var(--sans);
}
.memory-detail .grid{
  max-width:var(--maxw);margin:auto;display:grid;
  grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,56px);align-items:start;
}
.memory-detail .bigprint{
  background:var(--print);padding:14px 14px 42px;box-shadow:var(--shadow-print);
}
.memory-detail .bigprint img{width:100%;display:block}
.memory-detail .meta h3{font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:700;margin:.35em 0 .5em}
.memory-detail .meta .date{font-family:var(--latin);font-style:italic;color:var(--ink-faint)}
.memory-detail .meta p{margin-top:1.2em;font-family:var(--sans);font-size:1.02rem;line-height:1.85;color:var(--ink-soft)}
.memory-detail .meta .said{font-family:var(--hand);font-size:1.3rem;color:var(--rose);margin-top:1em}
@media (max-width:768px){.memory-detail .grid{grid-template-columns:1fr}}

@supports not (animation-timeline:view()){
  .print img{animation:none;filter:none}
}