/* Photography: retro prints pinned to a dark wall. Paper borders, tape, handwriting, slight tilt */
[data-page="photography"]{--hand:'Caveat','Segoe Script',cursive}
body[data-page="photography"]::after{content:"";position:fixed;inset:0;z-index:25;pointer-events:none;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hph{padding:var(--s8) 0 var(--s9);overflow:hidden}
.hph .wrap{display:grid;gap:var(--s8);align-items:center}
@media(min-width:900px){.hph .wrap{grid-template-columns:1fr 1fr}}
.hph h1{font-size:clamp(3.4rem,11vw,9rem);line-height:.9;font-style:italic;margin:var(--s3) 0 var(--s4)}
.hph .k::before{display:none}
.hand{display:inline-block;font:500 1.9rem var(--hand);color:var(--accent);transform:rotate(-3deg);margin-bottom:var(--s3)}
.pileph{position:relative;min-height:clamp(380px,52vw,560px)}
.pileph .print{position:absolute;width:52%;margin:0}
.pileph .print:nth-child(1){left:0;top:30px;--r:-6deg}.pileph .print:nth-child(2){right:0;top:0;--r:5deg}.pileph .print:nth-child(3){left:22%;bottom:0;--r:-1.5deg}
.cap{position:absolute;left:0;right:0;bottom:15px;text-align:center;font:500 1.6rem/1 var(--hand)}
.wall{columns:3 270px;column-gap:36px;padding:var(--s5) 0 0}
.prose{background:#F4EEDF;color:#3A3226;padding:var(--s6);transform:rotate(-.7deg);box-shadow:0 14px 28px rgba(0,0,0,.5)}
.prose p{font-family:var(--display);font-size:1.3rem;line-height:1.5}
.step{border-color:var(--accent)}

/* a print = wrapper (moves, holds the tape) + paper (the photo card). The tape sits on the wrapper's top edge,
   so it overlaps the paper like real tape but stays inside the wrapper's own box: columns can't move or clip it. */
.print{display:block;position:relative;padding-top:16px;transform:rotate(var(--r,0deg));transition:transform .35s;break-inside:avoid;margin:0 0 30px;cursor:zoom-in}
.print:hover{transform:rotate(0) scale(1.04);z-index:3}
.paper{display:block;position:relative;background:#F4EEDF;padding:14px 14px 58px;box-shadow:0 1px 1px rgba(0,0,0,.35),0 14px 28px rgba(0,0,0,.5);transition:box-shadow .35s;color:#3A3226}
.print:hover .paper{box-shadow:0 2px 2px rgba(0,0,0,.35),0 26px 50px rgba(0,0,0,.6)}
.paper img{display:block;width:100%;height:auto;filter:sepia(.12) contrast(1.05) saturate(.95);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.print::before{content:"";position:absolute;top:0;left:50%;width:98px;height:30px;margin-left:-49px;background:rgba(233,215,170,.74);transform:rotate(-2.5deg);box-shadow:0 1px 2px rgba(0,0,0,.28);z-index:3;pointer-events:none}
.print:nth-child(even)::before{transform:rotate(2.5deg);margin-left:-40px}
.print:nth-child(3n)::before{margin-left:-58px;width:90px}