/* WWH photo pinboard. Preserve the complete photo and original typography. */
.pin-blue,[data-project-colour="blue"]{--project-colour:#324ed5}
.pin-yellow,[data-project-colour="yellow"]{--project-colour:#edee67}
.pin-red,[data-project-colour="red"]{--project-colour:#ee5347}
.work-card-grid{display:block;columns:3;column-gap:2.4rem;padding:1rem .5rem}
.work-card{position:relative;display:inline-block;vertical-align:top;width:100%;break-inside:avoid;margin:0 0 2.8rem;transform:rotate(-1deg);background:#f2f0e8;color:#181818;padding:.6rem .6rem .9rem;box-shadow:3px 5px 0 #0003}
.work-card:nth-child(3n+2){transform:rotate(1.2deg);margin-top:1.5rem}
.work-card:nth-child(3n){transform:rotate(-.4deg)}
.work-card.is-portrait{width:88%;margin-left:5%}
.work-card::before{content:"";position:absolute;z-index:2;top:-.65rem;left:39%;width:24%;height:1.15rem;background:var(--project-colour);opacity:.85;transform:rotate(-4deg)}
.work-card-image{border:0;padding:0;background:transparent}
.work-card-image img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
.work-card-caption{padding:.8rem .35rem 0}
.work-card-caption h3{font-size:1.4rem;letter-spacing:.03em}
.work-card-caption h3 a{border-bottom:3px solid var(--project-colour)}
.work-card-caption p,.work-card-caption>span{opacity:1;color:#4b4b46}
.work-card a:focus-visible{outline:3px solid var(--project-colour);outline-offset:5px}
.project-full-name{font:400 clamp(1.1rem,2.5vw,1.8rem)/1.4 var(--serif);margin:.6rem 0 0}
.pinboard-project .project-title-row h1{text-decoration:underline;text-decoration-color:var(--project-colour);text-decoration-thickness:5px;text-underline-offset:.14em}
.pinboard-project .project-cover.cover-paper{background-image:none!important;background-color:#f2f0e8;aspect-ratio:auto;min-height:0;height:auto;max-height:none;width:fit-content;max-width:min(90%,850px);padding:.7rem;margin:2.5rem auto 1rem;transform:rotate(-1deg);box-shadow:8px 8px 0 var(--project-colour);overflow:visible}
.pinboard-project .cover-paper>img{display:block;width:auto;height:auto;max-width:100%;max-height:55vh;object-fit:contain}
.pinboard-project .cover-paper .tape{background:var(--project-colour);color:#181818}
.pinboard-project[data-project-colour="blue"] .cover-paper .tape{color:#fff}
.pinboard-project .project-gallery{border-top-color:var(--project-colour)}
.pinboard-project .project-gallery .gallery-grid{display:block;columns:2;column-gap:2rem}
.pinboard-project .project-gallery .gallery-sheet{display:inline-block;vertical-align:top;width:100%;max-width:none;break-inside:avoid;margin:0 0 3rem;transform:rotate(-.7deg)}
.pinboard-project .project-gallery .gallery-sheet:nth-child(3n+2){transform:rotate(1deg);margin-top:2rem}
.pinboard-project .project-gallery .gallery-sheet.sheet-portrait{width:92%;margin-left:4%}
.pinboard-project .gallery-sheet .image-sheet{box-shadow:4px 5px 0 #0006;border-top:4px solid var(--project-colour)}
.pinboard-project .gallery-sheet img{height:auto;object-fit:contain}
.pinboard-project .gallery-sheet .sketch-note{font-size:clamp(.7rem,1.1vw,1rem)}
@media(max-width:1000px){.work-card-grid{columns:2;column-gap:1.8rem}}
@media(max-width:760px){
 .work-card-grid{columns:2;column-gap:1.1rem;padding:.7rem .2rem}
 .work-card{padding:.35rem .35rem .65rem;margin-bottom:1.8rem}
 .work-card:nth-child(3n+2){margin-top:.7rem}
 .work-card.is-portrait{width:94%;margin-left:2%}
 .work-card::before{height:.8rem;top:-.4rem}
 .work-card-caption{padding:.6rem .15rem 0}
 .work-card-caption h3{font-size:1.15rem}
 .work-card-caption p,.work-card-caption>span{font-size:.68rem}
 .pinboard-project .project-gallery .gallery-grid{columns:1}
 .pinboard-project .project-gallery .gallery-sheet,.pinboard-project .project-gallery .gallery-sheet.sheet-portrait{width:100%;margin-left:0;margin-bottom:2.2rem}
 .pinboard-project .gallery-sheet .sketch-note{font-size:clamp(.75rem,2.5vw,1rem)}
 .pinboard-project .project-cover.cover-paper{max-width:94%;padding:.5rem}
 .pinboard-project .cover-paper>img{max-height:48vh}
}
@media(prefers-reduced-motion:reduce){.work-card-image img{transition:none}}

/* Revision 2: row-by-row reading order and an uneven sketchbook composition. */
.work-card::before{background:rgba(255,255,255,.62);border:1px solid #ffffff55;box-shadow:0 1px 2px #0002;opacity:1}
.work-card-caption h3 a{border-bottom-color:var(--project-colour)}
.pinboard-project .cover-paper .tape{background:rgba(255,255,255,.68);color:#181818;border-left:1px solid #fff9}
.pinboard-project[data-project-colour="blue"] .cover-paper .tape{color:#181818}
.work-card-grid{display:grid;columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem 1.7rem;align-items:start}
.work-card-grid .work-card{width:92%;margin:0;justify-self:start;transform:rotate(-2deg)}
.work-card-grid .work-card:nth-child(7n+2){width:78%;justify-self:end;transform:rotate(1deg);margin-top:2.4rem}
.work-card-grid .work-card:nth-child(7n+3){width:98%;transform:rotate(0deg);margin-top:.8rem}
.work-card-grid .work-card:nth-child(7n+4){width:84%;justify-self:center;transform:rotate(2deg);margin-top:1.7rem}
.work-card-grid .work-card:nth-child(7n+5){width:96%;transform:rotate(-1deg);margin-top:3rem}
.work-card-grid .work-card:nth-child(7n+6){width:80%;justify-self:end;transform:rotate(1deg)}
.work-card-grid .work-card:nth-child(7n+7){width:90%;transform:rotate(-2deg);margin-top:1rem}
.pinboard-project .project-gallery .gallery-grid{display:grid;columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.2rem;align-items:start}
.pinboard-project .project-gallery .gallery-sheet{grid-column:auto;width:100%;margin:0 0 1.5rem;transform:rotate(-2deg);justify-self:start}
.pinboard-project .project-gallery .gallery-sheet:nth-child(7n+2){width:87%;margin-top:3rem;justify-self:end;transform:rotate(1deg)}
.pinboard-project .project-gallery .gallery-sheet:nth-child(7n+3){width:92%;margin-top:1rem;justify-self:start;transform:rotate(2deg)}
.pinboard-project .project-gallery .gallery-sheet:nth-child(7n+4){width:100%;margin-top:4rem;transform:rotate(-1deg)}
.pinboard-project .project-gallery .gallery-sheet:nth-child(7n+5){width:84%;margin-top:2rem;justify-self:center;transform:rotate(0deg)}
.pinboard-project .project-gallery .gallery-sheet:nth-child(7n+6){width:95%;margin-top:.5rem;justify-self:end;transform:rotate(-2deg)}
.pinboard-project .project-gallery .gallery-sheet:nth-child(7n+7){width:90%;margin-top:1.5rem;transform:rotate(1deg)}
@media(max-width:1000px){.work-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .work-card-grid{gap:1.8rem .7rem}
 .work-card-grid .work-card:nth-child(n){width:94%;margin-top:0}
 .work-card-grid .work-card:nth-child(2n){width:86%;margin-top:1.4rem}
 .pinboard-project .project-gallery .gallery-grid{grid-template-columns:minmax(0,1fr);gap:.5rem}
 .pinboard-project .project-gallery .gallery-sheet:nth-child(n){width:100%;margin:0 0 1.4rem}
 .pinboard-project .project-gallery .gallery-sheet:nth-child(3n+2){width:92%;justify-self:end}
}

/* Revision 3: independent stacks prevent tall portraits leaving empty rows. */
.work-card-grid{--board-columns:3;--board-gap:clamp(1.8rem,3vw,3rem);position:relative;display:block;columns:auto;padding:1rem .6rem}
.work-card-grid .work-card:nth-child(n){box-sizing:border-box;position:relative;width:100%;margin:0 0 2.4rem;justify-self:auto}
.work-card-grid.board-packed .work-card:nth-child(n){position:absolute;width:var(--card-width);left:0;top:0;margin:0;transform:translate(var(--card-x),var(--card-y)) rotate(var(--card-angle));transform-origin:center center}
.work-card-grid.board-packed .work-card:nth-child(7n+2),
.work-card-grid.board-packed .work-card:nth-child(7n+4),
.work-card-grid.board-packed .work-card:nth-child(7n+6){width:var(--card-width)}
@media(max-width:1000px){.work-card-grid{--board-columns:2}}
@media(max-width:560px){.work-card-grid{--board-gap:1.6rem}}

/* Five steps connected by a lightly sketched, directional timeline. */
.home-process-timeline{position:relative;margin:1.5rem 0 .4rem}
.home-process-timeline .process-line{position:absolute;pointer-events:none;color:var(--ink)}
.process-line-horizontal{left:0;top:0;width:100%;height:64px;overflow:visible}
.process-line-vertical{display:none}
.home-process-timeline .process-overview{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.home-process-timeline .process-overview li{position:relative;padding:0 .5rem;text-align:center;font-size:clamp(.95rem,1.5vw,1.2rem)}
.home-process-timeline .process-overview li span{display:block;margin:0 0 42px;font-size:.7rem;line-height:1;color:var(--blue)}
@media(max-width:600px){
 .home-process-timeline{margin-top:1rem}
 .process-line-horizontal{display:none}
 .process-line-vertical{display:block;left:0;top:0;width:36px;height:100%}
 .home-process-timeline .process-overview{grid-template-columns:1fr;gap:0}
 .home-process-timeline .process-overview li{min-height:72px;display:flex;align-items:center;gap:1rem;text-align:left;padding:0 0 0 45px}
 .home-process-timeline .process-overview li::before{content:"";position:absolute;left:11px;top:29px;width:11px;height:12px;border:1.6px solid var(--ink);border-radius:48% 52% 45% 55%;background:var(--paper);transform:rotate(-8deg)}
 .home-process-timeline .process-overview li span{margin:0;font-size:.7rem}
}