/*
Theme Name: keatmn
Theme URI: https://keatmn.com/
Author: keatmn
Description: keatmn portfolio site converted from the original static site.
Version: 1.1.0
*/
Theme Name: keatmn
Theme URI: https://keatmn.com/
Author: keatmn
Description: Minimal portfolio theme converted from the keatmn static site.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: keatmn
*/
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100%}
body{background:#fff;color:#000;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.site-header{display:flex;align-items:center;justify-content:space-between;max-width:935px;margin:0 auto;padding:28px 20px 20px}
.logo{font-size:22px;font-weight:700;letter-spacing:.5px;text-transform:lowercase;color:#000}
.site-nav{display:flex;gap:24px}
.nav-link{position:relative;font-size:13px;letter-spacing:.03em;color:#000;padding:4px 0 9px}
.nav-link:hover:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#000}
.nav-link.is-active{font-weight:700}
.nav-link.is-active:after{content:"";position:absolute;left:-2px;right:-2px;bottom:0;height:7px;background:#000;clip-path:polygon(0 100%,0 30%,14% 30%,14% 100%,14% 100%,14% 0,28% 0,28% 100%,28% 100%,28% 40%,42% 40%,42% 100%,42% 100%,42% 0,58% 0,58% 100%,58% 100%,58% 40%,72% 40%,72% 100%,72% 100%,72% 0,86% 0,86% 100%,86% 100%,86% 30%,100% 30%,100% 100%)}
a:focus-visible,.social-icon:focus-visible{outline:2px solid #000;outline-offset:3px}
main{max-width:935px;margin:0 auto;padding:0 3px 60px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.grid-item{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#fff}
.grid-item img{width:100%;height:100%;object-fit:cover}
.grid-item .fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:10px;text-align:center;font-size:12px;line-height:1.4;color:#000;border:1px solid #000}
.grid-item .caption{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(0,0,0,.75);opacity:0;transition:opacity .15s ease;padding:12px;text-align:center}
.grid-item:hover .caption,.grid-item:focus-visible .caption{opacity:1}
.caption .title{color:#fff;font-size:13px;font-weight:600}
.caption .role{color:#fff;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.empty-state{text-align:center;color:#000;font-size:13px;padding:60px 20px}
.contact-main{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 96px);padding:40px 20px 80px}
.contact-block{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.social-row{display:flex;gap:28px;margin-top:10px}
.social-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid transparent;transition:border-color .15s ease}
.social-icon:hover{border-color:#000}
.handle-caption{font-size:12px;color:#000;letter-spacing:.02em;margin-top:-8px}
@media(max-width:420px){.grid{gap:2px}.grid-item .fallback{font-size:10px}}
.page-main{max-width:900px;margin:0 auto;padding:60px 20px 100px}.page-content h1{font-size:24px;margin:0 0 24px}.page-content{font-size:14px;line-height:1.7}.social-icon{color:#000}.social-icon:hover{color:#000}