/* Old-homepage motion and filters, adapted to the Oct 31 homepage. Loads after motion.css. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Filters */
.work-toolbar{display:flex;align-items:center;justify-content:flex-start;gap:20px;border-block:1px solid var(--line);padding:10px 0;margin-bottom:34px}
.work-toolbar>p{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:15px;color:var(--muted)}
.work-filters{display:flex;gap:4px;flex-wrap:wrap}
.work-filters button{font-size:12px;padding:8px 13px;border:0;background:transparent;border-radius:20px}
.work-filters button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.work-filters button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.work-filters button:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.project[hidden]{display:none!important}
@media(max-width:620px){.work-toolbar{display:block}.work-toolbar>p{margin-bottom:8px}.work-filters{gap:3px}.work-filters button{padding:8px 10px;font-size:11px}}

/* Scroll reveal: frames wipe open, images settle from a slight zoom and drift with scroll. */
.motion-ready .project-image img{transform:translate3d(0,var(--py,0px),0) scale(var(--s,1))!important;transition:--s 1100ms cubic-bezier(.2,.8,.2,1)}
.motion-ready .project-link:hover .project-image img{--s:1.03}
html.motion-paused .project-image img{transform:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.motion-ready .project-image img{transform:none!important;transition:none!important}}

/* Hero card: page screenshots and spreads fill the square instead of shrinking to a sliver. */
.skill-image{overflow:hidden}
.skill-image img.is-cover{object-fit:cover;padding:0}

/* The "Explore more" row's bottom rule is the divider; About doesn't need a second one. */
.more+.about{border-top:0;margin-top:0}