/* Shared interaction and typography polish, loaded with navigation on every page.
   Fonts, palette and project artwork are unchanged; artwork subtrees are excluded. */
html:root{--focus-ring:#5850ec;--press-shift:translateY(1px)}
html{scroll-padding-top:104px}
::selection{background:#ecebff;color:#111827}

/* One focus colour site-wide; the older purple ring in site.css out-ranked the shared rule. */
html :is(a,button,summary,[tabindex]):focus-visible{outline-color:var(--focus-ring)}

/* Balanced headings and fewer orphans in narrative copy. */
:is(h1,h2,h3,h4,.project-title-text):not(.design-frame *):not(.product-canvas *):not(.walk-canvas *){text-wrap:balance}
:is(p,blockquote,li):not(.design-frame *):not(.product-canvas *):not(.walk-canvas *):not([aria-hidden="true"] *){text-wrap:pretty}
.page .date,.walk-count{font-variant-numeric:tabular-nums}

/* Pressed feedback for controls that only had hover states. */
.portfolio-header a,.portfolio-menu-toggle{transition:background-color 180ms,color 180ms,transform 160ms}
:is(.portfolio-header a,.portfolio-menu-toggle,.back-top,.footer-utilities :is(a,button),.anatomy-pill,.testimonial-controls .ds-button,.walk-controls button):not(:disabled):active{transform:var(--press-shift)}
.footer-utilities :is(a,button){transition:color 180ms,transform 160ms}

/* Menu button morphs into a close mark; the panel eases in each time it opens. */
.portfolio-menu-toggle span{transition:transform 220ms cubic-bezier(.2,.7,.2,1),opacity 160ms}
.portfolio-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.portfolio-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.portfolio-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.portfolio-mobile-menu:not([hidden]){animation:portfolio-menu-in 200ms cubic-bezier(.2,.7,.2,1)}
@keyframes portfolio-menu-in{from{opacity:0;transform:translateY(-6px)}}

@media(prefers-reduced-motion:reduce){
 .portfolio-menu-toggle span,.portfolio-header a,.footer-utilities :is(a,button){transition:none}
 .portfolio-mobile-menu:not([hidden]){animation:none}
 :is(.portfolio-header a,.portfolio-menu-toggle,.back-top,.footer-utilities :is(a,button),.anatomy-pill,.testimonial-controls .ds-button,.walk-controls button):active{transform:none}
}

/* Not-found page. */
.not-found{box-sizing:border-box;min-height:100dvh;display:grid;align-content:center;gap:24px;width:calc(100% - 48px);max-width:880px;margin:auto;padding:140px 0 80px;font-family:Inter,sans-serif;color:#111827}
.not-found .not-found-code{margin:0;color:#545b68;font-size:.875rem;line-height:1.5;font-variant-numeric:tabular-nums}
.not-found h1{margin:0;font-weight:400;font-size:clamp(2rem,3.5vw,2.5rem);line-height:1.2;letter-spacing:-.035em}
.not-found p{margin:0;max-width:52ch;color:#545b68;font-size:1.125rem;line-height:1.6}
.not-found .not-found-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}