
/* v8: a clear portrait layout and expressive, compositor-only control feedback. */
@media(hover:hover) and (pointer:fine){body :is(.button,.action-link,.project-actions>a,.clear-contact a):hover{transform:translateY(-2px);box-shadow:0 8px 24px #0003,inset 0 0 0 1px #c7f58055}}
@media(prefers-reduced-motion:reduce){body :is(.header-resume,.header-contact,.cta,.preview-trigger,.menu-control,.preview-close,.preview-arrow,.close-menu,.lightbox button){transition:none!important;transform:none!important}body .preview-trigger>span{transition:none!important;transform:none!important}}
@media(hover:hover) and (pointer:fine){body .ma-header .header-resume:hover{background:#d1f6a1;color:#13200b;box-shadow:0 0 0 4px #c7f58014,0 8px 22px #0003}body .preview-trigger:hover{border-color:#bedf91;background:#c7f58012;box-shadow:inset 0 0 0 1px #bedf9155}body .preview-trigger:hover>span{background:#c7f580;color:#17200e;transform:scale(1.08)}body .cta:hover{box-shadow:0 8px 24px #0003,inset 0 0 0 1px #c7f58055}body :is(.header-resume,.header-contact,.preview-trigger,.menu-control,.preview-close,.preview-arrow,.close-menu,.lightbox button):hover::before{transform:translate3d(115%,0,0);opacity:1}}
body .case-story li::before{content:"";width:5px;height:5px;background:currentColor;border-radius:50%;top:.8em}
body .ma-header .header-resume{position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,background-color .3s}
.ma-hero .portrait-project{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;display:flex;align-items:center;gap:14px;margin:22px 0 0;padding:17px 0 4px;background:transparent;color:var(--paper,#f0f0e8);border:0;border-top:1px solid #b2c29844;border-radius:0;box-shadow:none;cursor:default}
.ma-hero .portrait-project .capability-mark{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;background:#c7f58014;border:1px solid #c7f58033;border-radius:11px;color:#d0ff91}
.ma-hero .portrait-project .capability-copy{display:flex;flex-direction:column;gap:7px;min-width:0}
.ma-hero .portrait-project .capability-copy small{font-size:8px;letter-spacing:1.5px;line-height:1.5;color:#a9b998;font-weight:500}
.ma-hero .portrait-project .capability-copy b{font:550 14px/1.5 Grotesk,Manrope,sans-serif;letter-spacing:-.2px}
.ma-hero .portrait-coordinate{position:static;display:block;margin-top:15px;font-size:8px;letter-spacing:1px;line-height:1.8;white-space:normal}
.ma-hero .portrait-caption{gap:18px;align-items:end}.ma-hero .portrait-caption>span{max-width:70%;font-size:11px;line-height:1.9}.ma-hero .portrait-caption>b{flex-shrink:0}
.ma-hero .hero-roles{display:flex;align-items:center;flex-wrap:wrap;column-gap:12px;row-gap:7px}
.ma-hero .hero-roles .role-label{font-size:inherit;color:#d2dac8;font-weight:500;line-height:1.7;letter-spacing:-.1px}
.ma-hero .hero-roles .role-divider{font-size:inherit;color:#a6cd72}
.ma-hero .hero-actions .cta{white-space:nowrap;gap:14px;min-width:0}
.header-resume,.header-contact{gap:14px;align-items:center;justify-content:center}
:is(.header-resume,.header-contact,.preview-trigger,.menu-control,.preview-close,.preview-arrow,.close-menu,.lightbox button){position:relative;isolation:isolate;overflow:hidden;transition:transform .4s cubic-bezier(.22,1,.36,1),background-color .35s,border-color .35s,box-shadow .4s,color .35s}
:is(.header-resume,.header-contact,.preview-trigger,.menu-control,.preview-close,.preview-arrow,.close-menu,.lightbox button)::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 20%,#ffffff25 48%,transparent 76%);transform:translate3d(-115%,0,0);opacity:0;transition:transform .75s cubic-bezier(.22,1,.36,1),opacity .3s;z-index:-1}
.preview-trigger>span{display:inline-grid;place-items:center;min-width:24px;min-height:24px;border-radius:50%;transition:background-color .3s,color .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.ma-header nav a{position:relative;transition:color .3s}
.ma-header nav a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:#c7f580;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (pointer:fine){
 :is(.header-resume,.header-contact,.preview-trigger,.menu-control,.preview-close,.preview-arrow,.close-menu,.lightbox button):hover{transform:translateY(-2px);box-shadow:0 6px 20px #0003,inset 0 0 0 1px #c9ee974d}
 :is(.header-resume,.header-contact,.preview-trigger,.menu-control,.preview-close,.preview-arrow,.close-menu,.lightbox button):hover::before{transform:translate3d(115%,0,0);opacity:1}
 .preview-trigger:hover>span{background:#c7f580;color:#17200e;transform:scale(1.08)}
 .ma-header nav a:hover{color:#d0f695}.ma-header nav a:hover::after{transform:scaleX(1);transform-origin:left}
 .cta:hover{box-shadow:0 8px 24px #0003,inset 0 0 0 1px #c7f58033}
}
:is(.header-resume,.header-contact,.preview-trigger,.menu-control,.preview-close,.preview-arrow,.close-menu,.lightbox button):active{transform:translateY(1px) scale(.97)}
@media(max-width:767px){.ma-hero .portrait-project{margin-top:18px;padding-top:16px;gap:11px}.ma-hero .portrait-project .capability-copy b{font-size:12px}.ma-hero .portrait-project .capability-copy small{font-size:7px;letter-spacing:1px}.ma-hero .portrait-caption>span{font-size:9px}.ma-hero .hero-roles{font-size:14px;column-gap:9px}.ma-hero .hero-actions .cta{padding:15px 12px;gap:10px;font-size:14px}.ma-hero .portrait-coordinate{font-size:7px}}
@media(max-width:359px){.ma-hero .hero-actions .cta{font-size:12px;gap:7px}.ma-hero .hero-roles{font-size:12px}.ma-hero .portrait-project .capability-copy b{font-size:11px}}
@media(prefers-reduced-motion:reduce){.ma-header nav a::after,:is(.header-resume,.header-contact,.preview-trigger,.menu-control,.preview-close,.preview-arrow,.close-menu,.lightbox button)::before{display:none}.preview-trigger>span{transition:none!important;transform:none!important}}
