/* A composed photo spread, not a gallery component. No external imagery.
   Replace each .pj-placeholder with the owner's <img>; geometry is shared. */
.about-human .photo-journal { padding:5rem 0 5.5rem; }
.photo-journal-heading { max-width:43rem; }
.about-human .photo-journal-heading h2 { max-width:13em; font-size:clamp(2.5rem,4.5vw,3.75rem); line-height:1.12; }
.photo-journal-heading>p { margin-top:1.3rem; max-width:34rem; color:var(--portfolio-body); font-size:1.08rem; line-height:1.7; }
.photo-journal-spread { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:2rem; row-gap:4.5rem; align-items:start; margin-top:3.5rem; }
.photo-journal .pj-memory { min-width:0; position:relative; margin:0; }
.pj-phuket { grid-column:1/8; grid-row:1; --photo-ratio:3/2; }
.pj-krabi { grid-column:9/13; grid-row:1; margin-top:5.5rem!important; --photo-ratio:3/4; --photo-tilt:2deg; }
.pj-vietnam { grid-column:2/6; grid-row:2; --photo-ratio:4/5; --photo-tilt:-2deg; }
.pj-moment { grid-column:7/13; grid-row:2; margin-top:5rem!important; --photo-ratio:3/2; }
.pj-photo { position:relative; width:100%; aspect-ratio:var(--photo-ratio); transform:rotate(var(--photo-tilt,0deg)); transform-origin:center; transition:transform 260ms var(--ease-out); }
.pj-photo>img { display:block; width:100%; height:100%; object-fit:cover; border-radius:3px; }
.pj-placeholder { width:100%; height:100%; display:grid; place-content:center; justify-items:center; gap:.9rem; border-radius:3px; background:#f0efec; color:#787a78; }
.pj-krabi .pj-placeholder { background:#eeefec; }
.pj-vietnam .pj-placeholder { background:#efedf0; }
.pj-moment .pj-placeholder { background:#f3f0eb; }
.pj-placeholder svg { width:1.6rem; height:1.6rem; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; opacity:.65; }
.pj-placeholder span { font-size:.75rem; font-weight:400; letter-spacing:.03em; }
.pj-memory figcaption { margin-top:1.1rem; padding-inline:.25rem; display:flex; align-items:baseline; flex-wrap:wrap; gap:.4rem 1rem; }
.about-human .pj-memory figcaption .ap-hand { font-size:1.18rem; color:var(--portfolio-body); }
.pj-memory figcaption small { color:var(--portfolio-muted); font-size:.78rem; line-height:1.5; }
.photo-journal .pj-note { position:absolute; left:0; right:0; top:100%; margin-top:3.3rem; color:var(--portfolio-purple); font-size:1.05rem; transform:rotate(-4deg); opacity:1; transition:opacity 220ms ease,translate 260ms ease; }
.photo-journal .pj-future { display:flex; align-items:center; justify-content:flex-end; gap:1.1rem; margin-top:5rem; }
.pj-future svg { width:4rem; height:2.3rem; fill:none; stroke:var(--portfolio-purple); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.about-human .pj-future .ap-hand { font-size:1.15rem; transform:rotate(-4deg); }
@media(hover:hover) and (pointer:fine) {
  .pj-memory:hover .pj-photo { transform:translateY(-4px) rotate(0deg); }
  .photo-journal .pj-note { opacity:0; translate:0 3px; }
  .photo-journal .pj-memory:hover .pj-note { opacity:1; translate:0 0; }
}
@media(max-width:760px) {
  .about-human .photo-journal { padding:3.5rem 0; }
  .about-human .photo-journal-heading h2 { font-size:2.35rem; }
  .photo-journal-spread { column-gap:1.25rem; row-gap:3.5rem; margin-top:2.5rem; }
  .pj-phuket { grid-column:1/9; }
  .pj-krabi { grid-column:8/13; grid-row:2; margin-top:-1.5rem!important; }
  .pj-vietnam { grid-column:1/6; grid-row:2; margin-top:3rem!important; }
  .pj-moment { grid-column:3/13; grid-row:3; margin-top:0!important; }
  .about-human .pj-memory figcaption .ap-hand { font-size:1.05rem; }
  .pj-memory figcaption { margin-top:.8rem; gap:.2rem; }
  .pj-memory figcaption small { font-size:.72rem; }
  .photo-journal .pj-note { font-size:.92rem; margin-top:3.2rem; }
  .photo-journal .pj-future { margin-top:3.5rem; }
}
@media(max-width:420px) {
  .pj-phuket { grid-column:1/13; }
  .photo-journal-spread { column-gap:.75rem; }
  .pj-vietnam { grid-column:1/7; }
  .pj-krabi { grid-column:8/13; }
  .pj-placeholder { gap:.6rem; }
  .pj-placeholder span { font-size:.64rem; }
  .pj-placeholder svg { width:1.3rem; height:1.3rem; }
}
@media(prefers-reduced-motion:reduce) {
  .photo-journal .pj-photo,.photo-journal .pj-note { transition:none; }
  .photo-journal .pj-memory:hover .pj-photo { transform:rotate(var(--photo-tilt,0deg)); }
  .photo-journal .pj-note { opacity:1; translate:none; }
}