:root{--bg:#0e0e0e;--row:#161616;--row2:#1d1d1d;--ink:#f2f2f2;--mute:#8c8c8c;--line:#2a2a2a;--ok:#7dffb0;
--sans:"Inter","Segoe UI",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Consolas,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 1.05rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible{outline:3px solid var(--ok);outline-offset:3px}
.w{max-width:1160px;margin:0 auto;padding:0 28px}
.mono{font:400 .8rem/1.5 var(--mono);color:var(--mute)}
nav.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-size:.9rem}
nav.top a{text-decoration:none;line-height:1}
nav.top>a:first-child{font-weight:600}
nav.top>div{display:flex;align-items:center;gap:28px}
nav.top>div a:hover{color:var(--mute)}
h1{font-size:clamp(2.6rem,8vw,6.2rem);font-weight:600;line-height:1.02;letter-spacing:-.04em;animation:in .8s ease both}
h1 em{font-style:normal;color:#555}
h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-bottom:28px}
h2 span{color:var(--mute)}
.status{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:56px;padding-top:12px}
.status b{color:var(--ok);font-weight:400}
.intro{display:flex;justify-content:space-between;gap:32px;align-items:flex-end;padding:28px 0 72px}
.intro p{max-width:34ch;font-size:1.15rem}
.intro p span{color:var(--mute)}
.intro img{display:block;width:min(300px,38vw);height:auto;filter:grayscale(1);border-radius:6px;background:var(--row2)}
.proj{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:44px 28px;text-decoration:none;background:var(--row);border-top:1px solid var(--line);transition:background .2s}
.proj:nth-child(even){background:var(--row2)}
.proj:hover{background:#242424}
.proj h3{font-size:1.5rem;font-weight:500}
.proj small{display:block;color:var(--mute);font-size:.95rem;margin-top:4px}
.proj .yr{color:var(--mute);margin-left:auto}
section{padding:96px 0}
.about{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.35;letter-spacing:-.02em;color:var(--mute);max-width:24em}
.about b{color:var(--ink);font-weight:600}
.exp{margin-top:56px;max-width:640px;margin-left:auto}
.exp div{display:grid;grid-template-columns:1.2fr 1fr auto;gap:12px;padding:20px 0;border-top:1px solid var(--line)}
.exp b{font-weight:600}.exp span{color:var(--mute)}
.links{display:flex;gap:24px;margin-top:32px;font-size:.9rem}
.cta h2{font-size:clamp(3rem,10vw,7rem);color:#fff;margin-bottom:20px}
.cta p{color:var(--mute);max-width:36ch}
.cta a.mail{display:inline-block;margin-top:24px;border:1px solid var(--ink);border-radius:8px;padding:12px 26px;text-decoration:none}
.cta a.mail:hover{background:var(--ink);color:var(--bg)}
footer{padding:28px 0 40px;border-top:1px solid var(--line)}
/* case study */
.hd{display:grid;grid-template-columns:2fr 1fr;gap:40px;padding:48px 0 56px}
.hd p.sub{color:var(--mute);margin-top:20px;max-width:46ch}
.meta div{padding:10px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:.92rem}
.meta span{color:var(--mute)}
.case{max-width:760px}
.case section{padding:44px 0;border-top:1px solid var(--line)}
.case h2{font-size:1.7rem;margin-bottom:16px}
.case ul,.case ol{padding-left:1.2em}.case li{margin-bottom:10px}
.case blockquote{border-left:3px solid var(--ok);padding:4px 0 4px 18px;margin:14px 0;color:#d6d6d6}
.case .note{color:var(--mute);font-size:.95rem}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1100px;margin:16px 0 40px}
.ba figure{background:var(--row);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ba img{width:100%;display:block;min-height:200px}
.ba figcaption{padding:14px 16px;font-size:.9rem;color:var(--mute)}
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:760px){
.hd,.ba{grid-template-columns:1fr}.intro{flex-direction:column;align-items:flex-start}
.proj{padding:32px 20px}.exp div{grid-template-columns:1fr auto}.exp span:nth-child(2){grid-row:2}.status{flex-wrap:wrap}
section{padding:64px 0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.tags span{border:1px solid var(--line);border-radius:6px;padding:4px 14px;font:400 .78rem var(--mono);color:var(--mute)}
.callout,.sol{border-left:3px solid var(--ok);background:var(--row);padding:18px 22px;margin:22px 0;border-radius:0 8px 8px 0}
.sol b{display:block;margin-bottom:6px}
.ph{max-width:760px;grid-template-columns:1fr 1fr}
.ph img{min-height:320px}

.hero-h1{animation:none}
.ln{display:block;overflow:hidden;padding-bottom:.08em}
.ln>span{display:block;animation:up .95s cubic-bezier(.2,.7,.2,1) both}
.ln:nth-child(2)>span{animation-delay:.14s}
@keyframes up{from{transform:translateY(105%)}to{transform:none}}
.proj h3{transition:transform .3s ease}
.proj:hover h3{transform:translateX(12px)}
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.proj:hover h3{transform:none}}

.more{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.tile button{display:block;width:100%;aspect-ratio:4/3;background:var(--row2);border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:zoom-in;padding:0;transition:border-color .2s}
.tile button:hover{border-color:var(--ink)}
.tile button:focus-visible{outline:3px solid var(--ok);outline-offset:3px}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile figcaption{margin-top:10px;font-size:.92rem;color:var(--mute)}
#lb::backdrop{background:rgba(0,0,0,.85)}

.case{margin-left:auto;margin-right:auto}
.ba{margin-left:auto;margin-right:auto}
.pill{display:inline-flex;align-items:center;gap:6px;margin-left:20px;border:1px solid var(--ink);border-radius:8px;padding:8px 18px;font-size:.88rem;white-space:nowrap;transition:background .2s,color .2s}
.proj:hover .pill{background:var(--ink);color:var(--bg)}
.pill-link{display:inline-block;border:1px solid var(--ink);border-radius:8px;padding:6px 18px;text-decoration:none;transition:background .2s,color .2s}
.pill-link:hover{background:var(--ink);color:var(--bg)}
nav.top>div a:last-child{display:inline-block;background:var(--ink);color:var(--bg);border-radius:8px;padding:9px 18px;font-weight:500;transition:opacity .2s}
nav.top>div a:last-child:hover{color:var(--bg);opacity:.82}
@media(max-width:760px){.pt{display:none}.pill{padding:8px 13px;margin-left:12px}}

.mk-wrap{position:relative}
.mk-wrap img{display:block}
.mk{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:#0000cc;color:#fff;font:600 .9rem/30px var(--sans);text-align:center;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.5)}
.mk-legend{padding:0 16px 16px 36px;font-size:.88rem;color:var(--mute)}
.mk-legend li{margin-bottom:4px}

.mk{border:0;padding:0;cursor:pointer;width:34px;height:34px;line-height:34px;font-size:1rem;transition:transform .25s ease,box-shadow .25s ease}
.mk::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #4d4dff;animation:ping 1.8s ease-out infinite;pointer-events:none}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(2.3);opacity:0}}
.mk.is-on{transform:translate(-50%,-50%) scale(1.45);box-shadow:0 0 0 4px #fff,0 0 22px 6px rgba(77,77,255,.9)}
.mk:focus-visible{outline:3px solid var(--ok);outline-offset:4px}
.mk-legend{list-style:none;padding:8px 12px 14px;font-size:.98rem;color:var(--ink)}
.mk-legend li{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 0 4px;border-radius:10px;cursor:pointer;transform-origin:left center;transition:transform .25s ease,background .25s ease,color .25s ease}
.mk-legend li::before{content:attr(data-n);flex:none;width:26px;height:26px;border-radius:50%;background:#0000cc;color:#fff;font:600 .85rem/26px var(--sans);text-align:center}
.mk-legend li.is-on{transform:scale(1.08);background:#0000cc;color:#fff;font-weight:600}
.mk-legend li.is-on::before{background:#fff;color:#0000cc}
@media(prefers-reduced-motion:reduce){.mk::after{animation:none}.mk,.mk-legend li{transition:none}}

#mk-tip{position:fixed;z-index:50;max-width:250px;background:#fff;color:#0e0e0e;border-radius:10px;padding:10px 14px;font:400 .9rem/1.4 var(--sans);box-shadow:0 8px 30px rgba(0,0,0,.55);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
#mk-tip.on{opacity:1;transform:none}
#mk-tip b{display:block;margin-bottom:2px;color:#0000cc}
@media(prefers-reduced-motion:reduce){#mk-tip{transition:none}}

.ba figure{overflow:visible}
.ba figure>img,.mk-wrap img{border-radius:10px 10px 0 0}
.tip{position:absolute;left:var(--x);top:var(--y);z-index:5;width:max-content;max-width:190px;margin-top:8px;padding:9px 12px;border-radius:10px;background:#111;border:1px solid #4d4dff;color:#fff;font:500 .8rem/1.4 var(--sans);text-align:left;opacity:0;pointer-events:none;transform:translate(-50%,calc(-100% - 28px));transition:opacity .2s ease,margin-top .2s ease}
.tip.l{transform:translate(calc(-100% + 24px),calc(-100% - 28px))}
.tip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:#4d4dff}
.tip.l::after{left:auto;right:12px;margin-left:0}
.tip.is-on{opacity:1;margin-top:0}
@media(prefers-reduced-motion:reduce){.tip{transition:none}}
.tip{max-width:220px}
.tip::after{content:"";position:absolute;top:auto;bottom:-6px;left:50%;right:auto;width:10px;height:10px;margin:0 0 0 -5px;border:0;border-right:1px solid #4d4dff;border-bottom:1px solid #4d4dff;background:#111;transform:rotate(45deg)}
.tip.l::after{left:auto;right:14px;margin:0}
.tip::after,.tip.l::after{display:none}
.tip{border-bottom:3px solid #4d4dff}
.mk{z-index:1}
.mk.is-on::after{display:none}
.mk.is-on{box-shadow:0 0 0 4px #fff}
.tip{z-index:20;transform:translate(-50%,calc(-100% - 42px))}
.tip.l{transform:translate(calc(-100% + 24px),calc(-100% - 42px))}

.tip{display:none}
#tipbox{position:fixed;z-index:2147483000;left:0;top:0;max-width:240px;padding:9px 12px;border-radius:10px;background:#111;color:#fff;border:1px solid #4d4dff;font:500 .85rem/1.45 var(--sans);opacity:0;pointer-events:none;transition:opacity .15s ease}
#tipbox.on{opacity:1}
#tipbox{background:#f2f2f2;color:#0000cc;border:1.5px solid #0000cc;box-shadow:0 8px 20px rgba(0,0,0,.35);font-weight:600}

#tipbox strong,#tipbox span{display:block}
#tipbox strong{font-weight:700;margin-bottom:2px}
#tipbox span{font-weight:500}
#tipbox span{color:rgba(0,0,0,.6)}

/* lightbox */
#lb{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:12px;width:min(92vw,960px);max-width:92vw;padding:14px 76px 20px;margin:auto}
#lb .lb-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#lb .cnt{font:600 1rem/1 var(--mono);color:var(--ink);background:var(--row2);border:1px solid var(--line);border-radius:8px;padding:10px 14px}
#lb .lb-ctl{display:flex;gap:8px}
#lb .pp,#lb .x{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--row2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer}
#lb .pv,#lb .nx{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;background:var(--row2);border:1px solid var(--line);color:var(--ink);width:44px;height:44px;border-radius:8px;font-size:1.6rem;line-height:1;cursor:pointer}
#lb .pv{left:16px}#lb .nx{right:16px}
#lb .pp:hover,#lb .x:hover,#lb .pv:hover,#lb .nx:hover{border-color:var(--ink)}
#lb button:focus-visible{outline:3px solid var(--ok);outline-offset:3px}
#lb img{display:block;width:100%;height:62vh;object-fit:contain;background:var(--row2);border-radius:8px}
#lb .bar{height:3px;margin-top:12px;background:var(--line);border-radius:2px;overflow:hidden}
#lb .bar i{display:block;height:100%;width:0;background:var(--ok)}
#lb p{margin-top:10px;text-align:center}
@media(max-width:600px){
#lb{padding:14px 14px 76px}
#lb img{height:56vh}
#lb .pv,#lb .nx{top:auto;bottom:16px;transform:none}
}

/* back to top (mobile only) */
#toTop{display:none;position:fixed;right:16px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:40;width:44px;height:44px;align-items:center;justify-content:center;background:var(--ink);color:var(--bg);border:0;border-radius:8px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s}
#toTop.show{opacity:1;pointer-events:auto}
#toTop:focus-visible{outline:3px solid var(--ok);outline-offset:3px}

@media(max-width:760px){
#toTop{display:flex}
nav.top>div{gap:14px}
nav.top>div a:last-child{padding:9px 14px}
.intro img{width:min(280px,72vw)}
}