@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background-color: #fff; color: #111; overflow-x: hidden; }

/* 导航栏 */
nav { position: fixed; top: 0; width: 100%; padding: 2rem 4rem; display: flex; justify-content: space-between; align-items: center; z-index: 1000; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); }
.logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; text-decoration: none; color: #111; text-transform: uppercase; letter-spacing: 2px; }
.nav-links { display: flex; align-items: center; }
.nav-links a { text-decoration: none; color: #555; margin-left: 3rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; }
.nav-links a:hover, .nav-links a.active { color: #111; font-weight: bold; }

/* 语言下拉 */
.dropdown { position: relative; display: inline-block; margin-left: 3rem; }
.dropbtn { color: #555; font-size: 0.85rem; text-transform: uppercase; cursor: pointer; }
.dropdown-content { display: none; position: absolute; background: #fff; min-width: 100px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); top: 100%; left: 0; }
.dropdown-content a { margin: 0; padding: 12px 20px; display: block; font-size: 0.8rem; }
.dropdown:hover .dropdown-content { display: block; }

/* Hero - 修复顶部被遮挡问题，加入 clamp 等比缩放字体 */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 120px 10vw 0 10vw; }
.hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 8vw, 6rem); letter-spacing: -2px; line-height: 1; }
.hero p { margin-top: 2rem; max-width: 600px; color: #666; font-weight: 300; line-height: 1.8; font-size: clamp(0.9rem, 1.5vw, 1rem); }

/* 4个大项目样式 */
.major-work { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; padding: 15vh 10vw; align-items: center; }
.major-work:nth-child(even) .work-text { order: -1; }
.img-wrapper { overflow: hidden; background-color: #f4f4f4; width: 100%; }
.img-wrapper img { width: 100%; display: block; filter: grayscale(100%); transition: transform 0.8s ease, filter 0.5s ease; }
.img-wrapper:hover img { transform: scale(1.08); filter: grayscale(0%); }
.work-text h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.5rem; }
.work-text p { color: #555; font-size: 0.95rem; font-weight: 300; line-height: 1.8; }

/* 分割线 */
.section-divider { padding: 10vh 10vw; font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 3rem); text-align: right; border-top: 1px solid #eee; }

/* 6个全屏小项目样式 */
.small-work-fullscreen { width: 100%; min-height: 100vh; display: flex; border-top: 1px solid #eee; }
.small-work-fullscreen:nth-child(even) { flex-direction: row-reverse; }

/* 修改后的小项目显示容器 */
.project-display { width: 75%; height: 100%; background: transparent; display: flex; justify-content: center; align-items: center; padding: 2rem; }

/* 修复 iframe 被切断的问题，匹配 sketch 画布比例 3:2 */
.project-display iframe { 
    width: 100%; 
    max-width: 960px;       
    aspect-ratio: 3 / 2;    
    border: none; 
    background: transparent; 
}
.project-info { width: 25%; height: 100%; padding: 4rem 3.5rem; display: flex; flex-direction: column; justify-content: center; background: #fff; }
.project-info h3 { font-family: 'Playfair Display', serif; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 2rem; }
.project-info .gameplay { font-size: 0.85rem; color: #444; line-height: 2; border-left: 1px solid #111; padding-left: 1.5rem; }

/* 按钮容器 */
.button-group { display: flex; flex-wrap: wrap; gap: clamp(0.5rem, 1vw, 1rem); margin-top: 2rem; }

/* 基础按钮样式 - 加入 clamp 完美实现等比例缩小 */
.btn {
    text-decoration: none;
    font-size: clamp(0.6rem, 1vw, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: clamp(0.5rem, 1.2vw, 0.8rem) clamp(1rem, 2.5vw, 1.8rem);
    border: 1px solid #111;
    border-radius: 50px; 
    color: #111;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: inline-block;
}
.btn:hover { background-color: #111; color: #fff; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* 适配中英文切换时的布局 */
[lang="zh"] .btn { letter-spacing: 0; font-weight: 400; }

/* ================= 汉堡菜单按钮（桌面端隐藏） ================= */
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 1001; }
.hamburger span { display: block; width: 22px; height: 2px; background: #111; margin: 5px 0; transition: all 0.3s ease; }

/* ================= 平板端适配 (≤900px) ================= */
@media (max-width: 900px) {
    /* 导航 - 汉堡菜单 */
    .hamburger { display: flex; flex-direction: column; justify-content: center; }
    nav { padding: 1.2rem 1.5rem; }
    .nav-links {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        z-index: 999;
    }
    .nav-links.open { display: flex; }
    .nav-links a { margin-left: 0; font-size: 1.1rem; }
    .dropdown { margin-left: 0; }

    /* Hero 区域 */
    .hero { padding: 100px 6vw 0 6vw; min-height: auto; padding-bottom: 8vh; }
    .hero h1 { font-size: clamp(2.2rem, 10vw, 3.5rem); letter-spacing: -1px; }
    .hero p { font-size: 0.9rem; line-height: 1.7; max-width: 100%; }

    /* 大项目 */
    .major-work { grid-template-columns: 1fr; gap: 2rem; padding: 8vh 6vw; }
    .major-work:nth-child(even) .work-text { order: 1; }
    .work-text h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); margin-bottom: 1rem; }

    /* 分割线 */
    .section-divider { text-align: center; padding: 6vh 6vw; font-size: clamp(1.4rem, 5vw, 2rem); }

    /* 小项目 */
    .small-work-fullscreen,
    .small-work-fullscreen:nth-child(even) { flex-direction: column; min-height: auto; }
    .project-display { width: 100%; height: auto; padding: 1rem; }
    .project-display iframe { max-width: 100%; aspect-ratio: 3 / 2; }
    .project-info { width: 100%; height: auto; padding: 2rem 6vw 3rem; }
    .project-info h3 { font-size: 1.4rem; margin-bottom: 1rem; }
    .project-info .gameplay { font-size: 0.82rem; line-height: 1.8; }
}

/* ================= 小手机适配 (≤480px) ================= */
@media (max-width: 480px) {
    nav { padding: 1rem 1.2rem; }
    .logo { font-size: 1.2rem; }

    .hero { padding: 90px 5vw 0 5vw; }
    .hero h1 { font-size: clamp(1.8rem, 9vw, 2.8rem); }
    .hero p { font-size: 0.85rem; line-height: 1.65; }

    .major-work { padding: 6vh 5vw; gap: 1.5rem; }
    .work-text h2 { font-size: 1.4rem; }
    .work-text p { font-size: 0.85rem; }

    .section-divider { font-size: 1.2rem; padding: 5vh 5vw; }

    .project-display { padding: 0.5rem; }
    .project-info { padding: 1.5rem 5vw 2.5rem; }
    .project-info h3 { font-size: 1.2rem; margin-bottom: 0.8rem; }
    .project-info .gameplay { font-size: 0.8rem; padding-left: 1rem; }

    .btn { font-size: 0.6rem; padding: 0.5rem 1rem; }
    .button-group { gap: 0.5rem; }
}