*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-dark: #40352C;--color-medium: #8B7355;--color-light: #D4CAB0;--color-background: #F5F2E9}body{font-family:Noto Sans TC,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--color-dark);background:var(--color-background);line-height:1.6}nav{position:sticky;top:0;background:var(--color-dark);box-shadow:0 2px 5px #0000001a;z-index:100}.nav-container{max-width:1100px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between}.nav-container h1{font-size:1rem;font-weight:600;color:var(--color-light)}.nav-container ul{display:flex;gap:24px;list-style:none}.nav-container a{text-decoration:none;color:var(--color-light);font-size:.9rem;font-weight:500}.nav-container a:hover{color:#fff}.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}.hamburger span{display:block;width:22px;height:2px;background:var(--color-light);transition:all .3s}section{padding:80px 24px;max-width:1100px;margin:0 auto}h2{font-size:1.8rem;margin-bottom:40px}.about-content{display:flex;gap:48px;align-items:center}.about-content img{width:180px;height:180px;border-radius:50%;object-fit:cover;flex-shrink:0}.about-text{display:flex;flex-direction:column;gap:12px}.about-text h3{font-size:1.5rem}.contact-links{display:flex;flex-direction:column;gap:8px;margin-top:8px}.contact-links a{color:var(--color-dark);text-decoration:none;font-size:.9rem}.social-links{display:flex;flex-wrap:wrap;gap:12px}.social-links a{padding:4px 12px;border:1px solid var(--color-medium);border-radius:4px;font-size:.85rem;transition:all .2s}.social-links a:hover{background:var(--color-dark);color:var(--color-light);border-color:var(--color-dark)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}.project-card{background:#fff;border:1px solid var(--color-light);border-radius:8px;overflow:hidden;transition:box-shadow .2s,transform .2s}.project-card:hover{box-shadow:0 4px 16px #40352c26;transform:translateY(-3px)}.img-block{aspect-ratio:16/9;overflow:hidden;background:#f5f5f5}.img-block img{width:100%;height:100%;object-fit:cover}.card-body{padding:20px;display:flex;flex-direction:column;gap:10px}.card-body h3{font-size:1rem;font-weight:600}.card-body p{font-size:.875rem;color:var(--color-medium);line-height:1.6}.project-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}.project-links a{font-size:.8rem;padding:5px 14px;border:1px solid var(--color-dark);border-radius:4px;text-decoration:none;color:var(--color-dark);transition:all .2s}.project-links a:hover{background:var(--color-dark);color:var(--color-light)}.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}.article-card{background:#fff;border:1px solid var(--color-light);border-radius:8px;overflow:hidden;transition:box-shadow .2s,transform .2s}.article-card:hover{box-shadow:0 4px 16px #40352c26;transform:translateY(-3px)}.article-content{display:block;padding:16px;text-decoration:none;color:var(--color-dark)}.article-content h3{font-size:.95rem;font-weight:600;margin-bottom:8px;line-height:1.4}.article-meta{font-size:.8rem;color:var(--color-medium);margin-bottom:8px}.article-content p{font-size:.85rem;color:var(--color-medium);line-height:1.6}.view-more-container{text-align:center;grid-column:1/-1;padding:16px}.view-more-btn{display:inline-block;padding:10px 24px;border:2px solid var(--color-dark);border-radius:4px;text-decoration:none;color:var(--color-dark);font-size:.9rem;transition:all .2s}.view-more-btn:hover{background:var(--color-dark);color:var(--color-light)}footer{text-align:center;padding:32px;background:var(--color-dark);font-size:.85rem;color:var(--color-light)}@media(max-width:768px){.nav-container ul{display:none;flex-direction:column;position:absolute;top:60px;left:0;right:0;background:var(--color-dark);padding:16px 24px;gap:16px}.nav-container ul.open,.hamburger{display:flex}.about-content{flex-direction:column;text-align:center}.social-links{justify-content:center}}
