/* Selected work — simple, calm project rows: big image, big name, short facts. */
.section-heading h2>span:not(.km-w){color:#d9864e}
.projects{display:grid;gap:clamp(56px,8vw,120px);margin-top:clamp(30px,4vw,56px)}
.pj{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.pj-flip{grid-template-columns:minmax(280px,1fr) minmax(0,1.55fr)}
.pj-flip .pj-media{order:2}
.pj-media{position:relative;display:block;overflow:hidden;border-radius:18px;aspect-ratio:2/1;background:#120d09;box-shadow:0 30px 70px #0008,0 0 0 1px #ffffff0f;cursor:none;clip-path:inset(0 round 18px)}
.pj-media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.pj-media:hover img{transform:scale(1.035)}
.pj-media:focus-visible,.pj-link:focus-visible{outline:2px solid #edac7d;outline-offset:4px}
.pj-num{display:block;font-size:13px;letter-spacing:.14em;color:#d9864e;margin-bottom:14px}
.pj h3{margin:0;font-size:clamp(34px,3.6vw,56px);font-weight:500;letter-spacing:-.045em;line-height:1.02;color:#f7f2e9}
.pj-kind{margin:10px 0 0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#b9a796}
.pj-desc{margin:20px 0 0;font-size:17px;line-height:1.6;color:#d8cdc2;max-width:42ch}
.pj-built{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pj-built li{padding:7px 13px;border-radius:20px;border:1px solid #4a3a2e;font-size:13px;color:#e3d8cc}
.pj-link{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding-bottom:4px;color:#f7f2e9;font-size:15px;text-decoration:none;background:linear-gradient(#d9864e,#d9864e) 0 100%/100% 1px no-repeat;transition:background-size .35s,color .2s}
.pj-link span{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.pj-link:hover{color:#f3c29d}.pj-link:hover span{transform:translate(3px,-3px)}
.pj-next{margin:0;padding-top:clamp(10px,2vw,24px);border-top:1px solid #392e23;font-size:17px;color:#cbbbaa}
.pj-next a{margin-left:8px;color:#f3c29d;text-decoration:none;border-bottom:1px solid #d9864e88}
.pj-next a:hover{color:#fff}
/* the copper "Visit" circle that follows the mouse over an image */
.pj-cursor{position:fixed;left:0;top:0;z-index:50;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:#d9864e;color:#170f09;font-size:14px;font-weight:600;pointer-events:none;opacity:0;transform:translate(var(--cx,-200px),var(--cy,-200px)) scale(.4);transition:opacity .25s ease,transform .45s cubic-bezier(.2,.8,.2,1);box-shadow:0 12px 30px #0006}
.pj-cursor b{font-weight:600}
.pj-cursor.is-on{opacity:1;transform:translate(var(--cx),var(--cy)) scale(1)}
/* calm reveal while scrolling */
.km-mo .pj .pj-media{clip-path:inset(12% 6% 12% 6% round 18px);transition:clip-path 1.3s cubic-bezier(.65,0,.25,1)}
.km-mo .pj .pj-media img{transform:scale(1.15)}
.km-mo .pj.is-in .pj-media{clip-path:inset(0 0 0 0 round 18px)}
.km-mo .pj.is-in .pj-media img{transform:none;transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.km-mo .pj.is-in .pj-media:hover img{transform:scale(1.035);transition-duration:1.2s}
.km-mo .pj .pj-text>*{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.km-mo .pj.is-in .pj-text>*{opacity:1;transform:none}
.km-mo .pj.is-in .pj-text>:nth-child(2){transition-delay:.08s}.km-mo .pj.is-in .pj-text>:nth-child(3){transition-delay:.14s}.km-mo .pj.is-in .pj-text>:nth-child(4){transition-delay:.2s}.km-mo .pj.is-in .pj-text>:nth-child(5){transition-delay:.26s}.km-mo .pj.is-in .pj-text>:nth-child(6){transition-delay:.32s}
@media(hover:none),(pointer:coarse){.pj-media{cursor:pointer}.pj-cursor{display:none}}
@media(max-width:1000px){.pj,.pj-flip{grid-template-columns:1fr;gap:24px}.pj-flip .pj-media{order:0}.pj-desc{max-width:none}}
@media(max-width:550px){.pj-media{border-radius:12px;clip-path:inset(0 round 12px)}.km-mo .pj.is-in .pj-media{clip-path:inset(0 round 12px)}.pj-desc{font-size:16px}}
@media(prefers-reduced-motion:reduce){.pj-media img,.pj-link span,.pj-cursor{transition:none}}
