@font-face{font-family:"PP Editorial Old";src:url("../fonts/PPEditorialOld-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
:root{--m:1vw;--s:clamp(13px,1vw,20px);--l:calc(var(--s)*1.28);--nav:50vh}
*{box-sizing:border-box;margin:0;padding:0;font-weight:400;font-style:normal}
html{background:#fff;color:#000}
body{font-size:var(--s);line-height:1.22;font-family:"PP Editorial Old",serif;-webkit-font-smoothing:antialiased;font-kerning:normal;font-feature-settings:"kern","liga";text-rendering:optimizeLegibility;text-wrap:pretty;hyphens:manual}
a{color:inherit;text-decoration:none}
#nav{position:fixed;left:0;right:0;top:var(--nav);z-index:5;pointer-events:none;height:0}
#nav a{position:absolute;pointer-events:auto;white-space:nowrap;font-size:var(--s);line-height:1.22}
#nav .n5{right:calc(var(--m) + 6.5vw)}#nav .n6{right:var(--m)}
#nav .n1{left:var(--m)}#nav .n2{left:17.4vw}#nav .n3{left:26.4vw}#nav .n4{left:35.2vw}

#cap{position:fixed;left:var(--m);top:var(--m);z-index:4;color:#888;transition:color .25s;pointer-events:none;min-height:1.2em}
#cap.hot{color:#000}
#cap img{display:block;width:12vw;height:16vw;object-fit:contain;object-position:left top;margin-top:.4em}
#cap img.l{width:22vw;height:15vw}
#app{min-height:100vh;animation:in .35s ease both}
@keyframes in{from{opacity:0}to{opacity:1}}
.big{font-size:var(--l);line-height:1.2}
.f{position:relative;margin-bottom:12vh}
.f a,.f>div{display:block;position:relative}
.f img,.f video{display:block;width:100%;height:auto;transition:opacity .25s}
.pr>div{display:flex;gap:0}.pr img{width:50%;flex:0 0 50%}
.f a:hover img,.f a:hover video{opacity:.78}
.home{padding:var(--m) var(--m) 60vh}
.home .f:first-child{margin-top:0}
.idx{position:absolute;left:42vw;top:var(--m);width:56vw}
.idx .c{display:grid;grid-template-columns:8vw 26vw 1fr}
.idx .r span:last-child{min-height:1.22em}
.idx .r{display:contents}.idx .r span{display:block}
.idx a:hover{opacity:.45}
.idx .h{margin-bottom:1.2em;}
.prj{padding:calc(var(--m)*4) var(--m) 60vh}
.prj .d{width:30vw;margin-left:16.4vw;margin-bottom:12vh}
.about{display:grid;grid-template-columns:48vw auto 1fr;padding:var(--m);column-gap:0}
.about .bio{grid-column:1;font-size:var(--l)}.about .bio p+p{margin-top:1em}
.about .ph{grid-column:2;margin-left:0;height:calc(50vh - var(--m));overflow:hidden}
.about .ph img{height:100%;width:auto;display:block}
.about .ct{grid-column:3;margin-left:1.2vw;width:16vw}
.cv{display:grid;grid-template-columns:16.4vw 17.8vw 1fr;padding:0 var(--m);margin-top:calc(50vh + 6vh);padding-bottom:30vh;row-gap:8vh}
.cv h3{font-size:inherit;margin-bottom:1.22em}
.cv .e{margin-bottom:1.22em}.cv .p2{grid-column:1/3;grid-row:1;width:31vw;margin-bottom:8vh}.cv .c1{grid-column:1;grid-row:2}.cv .c2{grid-column:2;grid-row:2}.cv .c3{grid-column:3;grid-row:2}.cv .s1{grid-column:1;grid-row:3}.cv .s2{grid-column:2;grid-row:3}.cv .e span{display:block}.cv .sk span{display:block}
.contact{padding:var(--m)}
.contact div{font-size:var(--l)}
@media(prefers-reduced-motion:reduce){#app{animation:none}*{transition:none!important}}
.idx .mcl{display:none}
@media(max-width:760px){
:root{--m:14px;--s:14px;--l:17px;--nav:auto}
#nav{top:auto;bottom:0;height:auto;padding:12px var(--m) calc(12px + env(safe-area-inset-bottom));background:#fff;display:flex;justify-content:space-between;pointer-events:auto}
#nav a{position:static}
#cap img{width:30vw}
.f{width:var(--w,100%)!important;margin-left:var(--ml,0)!important;margin-bottom:8vh}
.home,.prj{padding-bottom:20vh}
.idx{position:static;width:auto;padding:var(--m) var(--m) 20vh}
.idx .c{grid-template-columns:1fr}
.idx .c>span:first-child,.idx .c>span:nth-child(3),.idx .r span:first-child,.idx .r span:last-child{display:none}
.idx .r span:nth-child(2){margin-bottom:.5em}
.idx .mcl{display:block;margin-top:2.4em}.idx .mcl span{display:block;margin-bottom:.5em}.idx .mcl .h{margin-bottom:1.2em}
.prj{padding-top:calc(var(--m)*3)}
.prj .d{width:auto;margin:0 0 8vh}
.about{display:block}
.cv{display:block;margin-top:8vh}.cv>div{margin-bottom:7vh;width:auto!important}#nav{flex-wrap:wrap;row-gap:8px}#nav a{font-size:13px}
.about .ph{margin:6vh 0 3vh;width:56vw;height:auto}.about .ph img{width:100%;height:auto}
.about .ct{margin:0;width:auto}
}