/* UI layer: defines shared project-page presentation and employer-facing case-study layouts. */
.page{min-height:100vh;background:#fafaf8;touch-action:pan-y;will-change:transform}
.page.in{animation:slidein .3s ease both}
.page.out{transform:translateX(100%);transition:transform .3s ease}
.page.outl{transform:translateX(-100%);transition:transform .3s ease}
.page.drag{transition:none}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.page.in{animation:none}.page.out,.page.outl{transition:none}}
.top{max-width:720px;margin:0 auto;padding:20px 24px;display:flex;justify-content:space-between;font-size:15px}
.top a{text-decoration:none}.pnav{display:flex;gap:16px}.pn.off{color:#ccc}
.hero{max-width:720px;margin:0 auto;padding:0 24px}
.hero img{display:block;width:100%;aspect-ratio:16/9;max-height:52vh;object-fit:cover;object-position:50% 40%;transform:scale(1.15);border-radius:4px}
.hero{overflow:hidden}
.pmain{max-width:720px;margin:0 auto;padding:24px 24px 48px}
.pmain h1{font-size:17px}.outcome{font-size:20px;line-height:1.4;margin:4px 0 12px}
.meta{color:#777;font-size:15px;margin-bottom:16px}.body{color:inherit}
@media(max-width:480px){.top,.hero,.pmain{padding-left:20px;padding-right:20px}.outcome{font-size:18px}}
html.dark .page{background:#111}html.dark .pn.off{color:#444}html.dark .meta{color:#999}html.dark .body{color:inherit}

@media(max-width:820px){.top{padding-right:60px}}

.pmain h1 a.ext{color:inherit;text-decoration-line:underline}.pmain h1 a.ext span{display:none}.pmain h1 a.ext::after{content:"↗";margin-left:.4em;color:#999;font-weight:400}.pmain h1 a.ext:hover::after{color:inherit}