@charset "utf-8";
/* CSS Document */

footer{min-height: 200px;background-color: #000}

h1{font-size: 80px;font-weight: 800;line-height: 1.2;letter-spacing: 2px;/* word-break: keep-all; word-wrap: normal; */}
h2{font-size: 48px;font-weight: 800;line-height: 1.2;letter-spacing: 2px;}
h2 span{font-size: 16px;font-weight: 400;margin-left: 16px;letter-spacing: 0;color: var(--neutral-color-04);}
h3{font-size: 36px;font-weight: 600;line-height: 1.2;display: flex;flex-direction: column;margin-bottom: 16px;}
h3 span{font-size: 24px;}
h4{font-size: 20px;font-weight: 600;letter-spacing: 0.5px;}
h5{font-size: 16px;font-weight: 600;margin-bottom: 8px;}
p,li,a{font-size: 14px;}

.section-heading{display: grid;gap: 24px;}
.section-heading article{max-width: 80%;padding: 0 4px;}

article{display: grid;gap: 12px;color: var(--neutral-color-04);}

.card-dark{padding: 32px;border-radius: 24px;background-color: rgba(0, 0, 0, .4);}

/* .info-group{
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-left: 2px solid var(--neutral-color-04);
    border-radius: 4px;
    padding-left: 16px;
} */
.info-group ul{display: grid;gap: 4px;padding-left: 4px;}
.info-group li{color: var(--neutral-color-04);}

/* hero */
.hero{
    display: flex;
    align-items: flex-end;
    min-height: 768px;
    padding: 128px 16px;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
        url("../images/IMG_3594.JPG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    /* background-position: center calc(50% + 48px); */
    position: relative;
}
.hero .container{width: 100%;max-width: 1440px;margin: 0 auto;}
.hero-catch{display: grid;gap: 24px;}
.hero-catch article{margin-bottom: 24px;}
.hero h4{color: #fff;}

/* about */
.about{
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
        url("../images/IMG_3934.JPG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}
.about-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.about h2{font-size: 40px;font-weight: 600;}
.about-content{display: flex;flex-direction: column;gap: 40px;padding: 0 8px;}
.about-media{
    width: 100%;
    max-width: 320px;
    height: 100%;
    border-radius: 24px;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.4)),
        url("../images/8e669a3bf21acd35427bd226bc2ec1c.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    /* background-position: center calc(50% + 48px); */

    /* 添加以下属性变黑白 */
    filter: grayscale(100%);
}
.about-info{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 64px;
}

/* experience */
/* .experience-info-group ul{
    gap: 0px;
} */
.experience-info-group li span{
    display: inline-block;
    min-width: 64px;
    margin-right: 16px;
}

/* projects */
/* .projects{
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
        url("../images/IMG_3934.JPG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
} */

.project-body{display: flex;flex-direction: column;gap: 8px;}

.projects-content{display: flex;align-items: flex-start;justify-content: flex-start;}
.projects-content h5{min-width: 56px;margin-bottom: 0;}
.projects-content p{margin-top: 2px;color: var(--neutral-color-04);}

.project-body-02 .projects-article,
.project-body-03 .projects-article,
.project-body-02 .projects-info,
.project-body-03 .projects-info{
    margin-top: 16px;
}

.projects-media{
    width: 100%;
    height: 320px;
    margin-top: 32px;
    border-radius: 8px;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.4)),
        url("../images/_DSC4027.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* design */
.design{
    /* background-image: 
        linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
        url("../images/IMG_2894.JPG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; */
    background-color: #000;
}
.design-card{
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url("../images/_DSC4027.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 40px;
}

@media only screen and (max-width: 1200px) {
    .about{
        padding-top: 128px;
    }
    .about-wrapper{
        flex-direction: column;
    }
    .about-media{
        max-width: none;
        min-height: 320px;
        border-radius: 16px;
        background-position: center calc(50% + 120px);
    }

    .projects-wrapper,
    .projects-info-group{
        grid-template-columns: 1fr;
    }
    .projects-info{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media only screen and (max-width: 768px) {
    .grid {gap: 16px;}

    .hero{padding: 128px 0 64px;}
    
    .card-dark{padding: 24px;border-radius: 16px;}
    
    .about-info {
        display: grid;                         /* 1. 切换为网格布局 */
        grid-template-columns: repeat(2, 1fr); /* 2. 控制数量：下面这行代表每行正好 2 个，平分剩余空间 */
        gap: 32px 24px;                        /* 3. 可选：单独控制 [上下间距] 和 [左右间距] */
    }

    .design-card{min-height: 328px;}
}
@media only screen and (max-width: 480px) {
    h1{font-size: 56px;}
    h2{font-size: 36px;}

    .about h2{font-size: 32px;}
    /* .about-info{grid-template-columns: 1fr;} */
    .projects-info{
        grid-template-columns: 1fr;
    }

    .button-wrapper{flex-direction: column;}
    .button{width: 100%;text-align: center;padding: 16px;font-size: 16px;}
}

@media only screen and (max-width: 375px) {
    .about h2{font-size: 28px;}
}
@media only screen and (max-width: 320px) {
    .about h2{font-size: 22px;}
}