/* project pages and the home-page project list (engineering-drawing look: ink, hairlines, no colour fills) */
.pd-hero{padding:2.5rem 0 2rem;max-width:44rem}
.pd-back{font-size:.78rem}
.pd-kicker{font-size:1.6rem;margin-top:1.6rem;color:var(--color-dim)}
.pd-title{font-size:clamp(2.6rem,7vw,4.2rem);line-height:1.05;margin-top:.3rem}
.pd-tags{font-size:.75rem;letter-spacing:.04em;color:var(--color-dim);margin-top:.9rem}
.pd-p{margin-top:1.1rem;font-size:1.08rem;line-height:1.65;color:color-mix(in srgb,var(--color-ink) 82%,transparent)}
.pd-figs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2rem 1rem;padding:1rem 0 3rem}
.pd-diagram,.pd-wide{grid-column:span 6}
.pd-phone{grid-column:span 2}
.pd-fig{margin:0;position:relative}
.pd-diagram{border:1px solid #9a9a95;padding:1.4rem 1rem 1rem;max-width:30rem;background:#fff}
.pd-diagram:before{content:"";position:absolute;inset:-.4rem;border:1px solid color-mix(in srgb,var(--color-dim) 30%,transparent);transform:rotate(-.5deg);pointer-events:none}
.pd-diagram figcaption{font-size:1.4rem;color:var(--color-dim);margin-top:.4rem;text-align:right}
.pd-svg{display:block;width:100%;height:auto}
.pd-box{fill:#fff;stroke:#14171c;stroke-width:1}
.pd-dash{stroke-dasharray:4 3}
.pd-label{font:500 9.5px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;fill:#6b7280}
.pd-text{font:400 12px "Source Serif 4",Georgia,serif;fill:#14171c}
.pd-line{fill:none;stroke:#14171c;stroke-width:1}
.pd-tick{fill:none;stroke:#9a9a95;stroke-width:1}
.pd-shot img{display:block;width:100%;height:auto;border:1px solid #9a9a95}
.pd-shot figcaption{font-size:.72rem;color:var(--color-dim);margin-top:.55rem}
.pd-phone img{border-radius:18px}
.pd-how{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:1rem;max-width:44rem}
.pd-how li{position:relative;padding-left:1.5rem;line-height:1.65;color:color-mix(in srgb,var(--color-ink) 82%,transparent)}
.pd-how li:before{content:"";position:absolute;left:0;top:.75em;width:.8rem;border-top:1px solid #14171c}
.pd-next{display:inline-flex;flex-direction:column;gap:.3rem;text-decoration:none}
.pd-next-k{font-size:.75rem;color:var(--color-dim)}
.pd-next-t{font-size:1.3rem;border-bottom:1px solid currentColor;align-self:flex-start}
.pj-link{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.pj-link:hover{border-bottom-color:currentColor}
.pj-link span{color:var(--color-dim)}
.build-list{list-style:none;padding:0;margin:.75rem 0 0}
.build-row{display:grid;grid-template-columns:4.5rem 1fr;gap:.25rem 1.25rem;padding:1.1rem 0;border-top:1px solid var(--color-line)}
.build-row:first-child{border-top:0;padding-top:.4rem}
.build-tags{margin-top:.45rem;opacity:.85}
@media (max-width:480px){.build-row{grid-template-columns:1fr}.pd-phone{grid-column:span 3}}
/* home list with thumbnails: year | text | thumb */
.build-row.pj-row{grid-template-columns:4.5rem minmax(0,1fr) 9.5rem;align-items:start}
.pj-row>div{grid-column:2;grid-row:1}
.pj-thumb{grid-column:3;grid-row:1;display:block;aspect-ratio:4/3;border:1px solid #9a9a95;background:#fff;overflow:hidden;position:relative;transition:transform .25s}
.pj-thumb:hover{transform:rotate(-.6deg) translateY(-2px)}
.pj-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pj-thumb .pj-mini{width:100%;height:100%;padding:6px;box-sizing:border-box}
@media (max-width:480px){.build-row.pj-row{grid-template-columns:minmax(0,1fr) 6.5rem;column-gap:1rem}.pj-row .build-year{grid-column:1;grid-row:1}.pj-row>div{grid-column:1;grid-row:2}.pj-thumb{grid-column:2;grid-row:1/span 2}}
.pj-all{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.75rem;padding:.85rem 1.2rem;border:1px solid var(--color-ink,#14171c);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s}
.pj-all:hover{background:var(--color-ink,#14171c);color:#fff}