/* "A few more of me": a band of photographs at their natural shapes (no cropping), heights matched.
   Also the extra photos inside Journal posts (.jp-in floats, .jp-pair). Built by tools/strips.py + journal.py. */
.jl .ps{position:relative;z-index:1;padding:34px 56px 64px}
.jl .ps-in{max-width:1180px;margin:0 auto}
.jl .ps-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin:0 0 30px;padding-top:22px;border-top:1px solid rgba(90,15,29,.18)}
.jl .ps-head .eyebrow{margin:0}
.jl .ps-row{display:flex;gap:30px;align-items:flex-start}
.jl .ps-f{flex:var(--a) 1 0;min-width:0;margin:0;background:#FBF9F8;padding:10px 10px 12px;transform:translateY(var(--y)) rotate(var(--r));transition:transform 260ms cubic-bezier(.23,1,.32,1)}
.jl .ps-f a{display:block}
.jl .ps-f img{display:block;width:100%;height:auto}
@media (hover:hover) and (pointer:fine){
  .jl .ps-f:hover{transform:translateY(calc(var(--y) - 4px)) rotate(0deg)}
}

/* Journal posts: a print floated into the text, and a pair of prints between sections */
.jl .jp-text .jp-in{position:relative;float:right;width:min(44%,300px);margin:.35em -18px 1.1em 30px;background:#FBF9F8;padding:9px 9px 11px;transform:rotate(1.8deg)}
.jl .jp-text .jp-in img{display:block;width:100%;height:auto}
.jl .jp-text .jp-in .tape{top:-12px;left:50%;margin-left:-48px;transform:rotate(-4deg)}
.jl .jp-text .jp-pair{clear:both;display:flex;gap:24px;align-items:flex-start;margin:1.9em 0 2.2em}
.jl .jp-text .jp-pf{flex:var(--a) 1 0;min-width:0;margin:0;background:#FBF9F8;padding:9px 9px 11px;transform:rotate(-1.6deg)}
.jl .jp-text .jp-pf + .jp-pf{transform:translateY(26px) rotate(1.8deg)}
.jl .jp-text .jp-pf img{display:block;width:100%;height:auto}
.jl .jp-text h2{clear:none}

@container jl (max-width: 760px){
  .jl .ps{padding:26px 18px 86px}
  .jl .ps-head{flex-direction:column;gap:8px;margin-bottom:22px}
  .jl .ps-row{flex-wrap:wrap;gap:22px 14px;justify-content:center}
  .jl .ps-f{flex:1 1 38%;padding:7px 7px 9px}
  .jl .ps-f:first-child{flex:0 0 84%;max-width:84%}
  .jl .ps-f:nth-child(2){--y:0px}
  .jl .ps-f:nth-child(n+4){display:none}
  .jl .jp-text .jp-in{float:none;width:auto;max-width:80%;margin:1.5em auto 1.7em}
  .jl .jp-text .jp-pair{gap:12px;margin:1.6em 0 2.4em}
  .jl .jp-text .jp-pf{padding:6px 6px 8px}
  .jl .jp-text .jp-pf + .jp-pf{transform:translateY(18px) rotate(1.8deg)}
}
@media (prefers-reduced-motion: reduce){ .jl .ps-f{transition:none} }