:root{--bg-color:#f8f7f2;--card-bg:#fffefa;--text-primary:#243c34;--text-secondary:#646e65;--accent-primary:#244b3e;--accent-light:#9c8453;--accent-dark:#17382d;--accent-dim:#e9eee7;--gold-primary:var(--accent-primary);--gold-light:#9c8453;--gold-dark:#294f40;--gold-secondary:#9c8453;--gold-dim:#e1e5db;--gold-border:1px solid #d9ddcf;--font-heading:'Noto Serif TC','PMingLiU',serif;--font-body:'Noto Sans TC','Microsoft JhengHei',sans-serif;--transition-speed:.25s;--line:#dedfd4}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:110px}body{background:var(--bg-color);color:var(--text-primary);font-family:var(--font-body);line-height:1.85;overflow-x:clip;-webkit-font-smoothing:antialiased}::selection{background:#d8dfcb;color:#17382d}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.5;color:var(--text-primary);margin-bottom:1rem}p{color:var(--text-secondary);margin-bottom:1rem}a{color:inherit;text-decoration:none;transition:color .25s,background .25s,transform .25s}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #9c8453;outline-offset:6px}ul{list-style-position:outside;padding-left:1.25rem}img{max-width:100%}.container{width:min(1180px,calc(100% - 96px));margin:auto;padding:0}
/* Navigation */
#navbar{position:fixed;top:0;left:0;z-index:1000;width:100%;min-height:88px;padding:20px max(48px,calc((100% - 1320px)/2));display:flex;align-items:center;justify-content:space-between;gap:36px;background:#f8f7f2f2;backdrop-filter:blur(18px);border-bottom:1px solid var(--line);transition:box-shadow .25s}#navbar.scrolled{box-shadow:0 6px 30px #243c3409}.logo{font-family:var(--font-heading);font-size:25px;font-weight:700;letter-spacing:.22em;color:var(--accent-primary);flex-shrink:0}.nav-links{display:flex;list-style:none;padding:0;gap:clamp(16px,2vw,30px);align-items:center}.nav-links a{position:relative;display:inline-block;font-size:14px;letter-spacing:.08em;white-space:nowrap;color:#626b61}.nav-links a::after{content:'';position:absolute;height:1px;left:0;right:100%;bottom:-8px;background:var(--accent-primary);transition:right .25s}.nav-links a:hover,.nav-links a.active{color:var(--accent-primary)}.nav-links a:hover::after,.nav-links a.active::after{right:0}.nav-links li:last-child a{padding:8px 19px;border:1px solid #a9b4a4;border-radius:2px}.nav-links li:last-child a::after{display:none}.nav-links li:last-child a:hover{background:var(--accent-primary);color:#fff}.hamburger{display:none;background:none;border:0;padding:10px;cursor:pointer}.hamburger span{display:block;width:24px;height:1px;background:var(--accent-primary);margin:6px 0;transition:transform .25s,opacity .25s}
/* Portrait and introduction */
#hero{position:relative;height:auto;min-height:760px;padding:158px 0 86px;overflow:hidden;background:var(--bg-color);border-bottom:1px solid var(--line)}#hero::before{content:'';position:absolute;right:0;top:88px;bottom:0;width:35%;background:#e8ecdf}#hero::after{content:'';position:absolute;width:460px;height:460px;right:-130px;top:120px;border:1px solid #c7d1bc;border-radius:50%;pointer-events:none}.hero-content{position:relative;z-index:1;width:min(1180px,calc(100% - 96px));margin:auto;display:grid;grid-template-columns:1.12fr 1fr;grid-template-rows:auto auto auto auto;column-gap:80px;align-content:center;text-align:left}.hero-content h1{grid-column:1;margin:44px 0 26px;font-size:clamp(64px,6vw,88px);line-height:1.3;letter-spacing:.17em;font-weight:400}.hero-content h1::before{content:'';display:block;width:50px;height:2px;background:#a68b55;margin-bottom:34px}.hero-content .tagline{grid-column:1;max-width:540px;font-size:clamp(21px,1.8vw,26px);letter-spacing:.04em;line-height:1.9;color:var(--accent-primary);margin:0 0 18px;text-wrap:balance}.hero-content .sub-tagline{grid-column:1;font-size:15px;line-height:1.9;margin-bottom:38px;letter-spacing:.04em}.profile-container{grid-column:2;grid-row:1 / 5;position:relative;height:514px;width:100%;border-radius:160px 4px 4px 4px;overflow:hidden;background:#e3e2e5;margin:0;box-shadow:18px 18px 0 #d6ddcc}.profile-pic{width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block}.cta-button{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:14px 26px;background:var(--accent-primary);border:1px solid var(--accent-primary);border-radius:2px;color:#fffefa;letter-spacing:.12em;font-size:14px;line-height:1.6;cursor:pointer;transition:background .25s,transform .25s}.cta-button::after{content:'↗';font-family:sans-serif;font-size:18px;font-weight:400}.cta-button:hover{background:var(--accent-dark);transform:translateY(-2px)}.hero-content>.cta-button{grid-column:1;justify-self:start;align-self:start;margin-bottom:42px}
/* Biography and education */
.content-section{padding:104px 0;scroll-margin-top:0}.alt-bg{background:#eeefe7}.section-title{font-size:34px;font-weight:400;letter-spacing:.12em;margin-bottom:48px;padding-bottom:23px;position:relative}.section-title::after{content:'';position:absolute;width:36px;height:2px;bottom:0;left:0;background:#a68b55}#about .container{display:grid;grid-template-columns:1fr 2.2fr;gap:70px}#about .section-title{align-self:start}.bio-text{max-width:800px;font-size:16px;text-align:justify}.bio-text p{line-height:2.1;margin-bottom:24px}.bio-text p:last-child{margin-bottom:0}.education-grid,.skills-grid,.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.education-grid{counter-reset:education}.edu-card{padding:32px 30px;background:#f8f7f2;border:1px solid #d9ddd0;border-top:2px solid #a68b55;transition:transform .25s,box-shadow .25s}.edu-card::before{counter-increment:education;content:'0' counter(education);font-family:Georgia,serif;display:block;color:#a68b55;font-size:17px;margin-bottom:30px}.edu-card h3{font-size:21px;margin-bottom:16px}.edu-card .degree{font-size:14px;color:var(--text-primary);margin-bottom:18px}.edu-card .desc{font-size:14px;margin:0;padding-top:18px;border-top:1px solid var(--line)}.edu-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px #243c3408}
/* Career */
#career .container{display:grid;grid-template-columns:1fr 2.2fr;gap:70px}#career .section-title{align-self:start;position:sticky;top:125px}.timeline{position:relative;padding-left:24px;border-left:1px solid #c8d2c3}.timeline-item{position:relative;padding:0 0 30px 20px;margin-bottom:30px;border-bottom:1px solid var(--line)}.timeline-item:last-child{margin-bottom:0;border-bottom:0;padding-bottom:0}.timeline-item::before{content:'';position:absolute;left:-29px;top:10px;width:9px;height:9px;border:2px solid var(--accent-primary);border-radius:50%;background:var(--bg-color)}.timeline-item .year{color:#8d774e;font:16px/1.6 Georgia,serif;letter-spacing:.08em;margin-bottom:12px}.timeline-item h3{font-size:20px;margin-bottom:14px}.timeline-item li,.timeline-item p{font-size:15px;color:var(--text-secondary);line-height:1.9}
/* Public service and expertise */
.service-block{background:var(--card-bg);padding:40px 44px;border:1px solid var(--line);border-left:3px solid #a68b55;margin-bottom:24px}.service-block h3{font-size:25px}.role-highlight{color:#8d774e;font-size:14px;letter-spacing:.06em;margin-bottom:24px}.service-details{max-width:940px;font-size:15px}.service-details li{color:var(--text-secondary);margin:7px 0}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-card{background:transparent;border:1px solid #d4dacb;padding:30px 34px}.service-card h4{font-size:20px;padding-bottom:18px;border-bottom:1px solid #d4dacb}.service-card li{font-size:15px;color:var(--text-secondary);padding:4px 0}.section-subtitle{max-width:720px;margin:-20px 0 40px;font-size:15px}.skill-card{padding:36px 28px;text-align:left;border:1px solid var(--line);background:#fffefa;border-radius:3px}.skill-card .icon{width:52px;height:52px;display:grid;place-items:center;background:#eef1e8;border-radius:50%;font-size:25px;margin-bottom:26px}.skill-card h3{font-size:21px}.skill-card ul{padding-left:18px;color:var(--text-secondary);font-size:14px}.skill-card li{margin-bottom:8px}
/* Philosophy */
#philosophy{background:#244b3e;color:#faf9ef}#philosophy .section-title{color:#faf9ef}.main-quote{font:400 clamp(24px,2.6vw,36px)/1.9 var(--font-heading);text-align:center;letter-spacing:.04em;color:#f4eddb;max-width:1000px;margin:20px auto 66px;padding:0}.philosophy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}.phi-item{padding:8px 28px;border-left:1px solid #ffffff30}.phi-item:first-child{padding-left:0;border-left:0}.phi-item:last-child{padding-right:0}.phi-item h4{font-size:23px;color:#e0cda4;font-weight:400;letter-spacing:.14em}.phi-item p{color:#d5dfd4;font-size:14px;line-height:1.9;margin:0}
/* Contact */
#contact .container{display:grid;grid-template-columns:1fr 2.2fr;gap:70px}.contact-form{width:100%;margin:0;padding:32px;border:1px solid var(--line);background:#fffefa;border-radius:3px}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}.form-row input:last-child{grid-column:1 / -1}.form-row input,.contact-form textarea{min-width:0;width:100%;background:#f8f7f2;border:1px solid #dfe1d7;border-radius:2px;color:var(--text-primary);font-size:14px;padding:14px 16px;outline:none;transition:border-color .25s,box-shadow .25s}.contact-form textarea{min-height:160px;resize:vertical;margin-bottom:18px;display:block}.form-row input:focus,.contact-form textarea:focus{border-color:#64816b;box-shadow:0 0 0 3px #244b3e0c}input::placeholder,textarea::placeholder{color:#737b70;opacity:1}input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #f8f7f2 inset;-webkit-text-fill-color:var(--text-primary)}.contact-form button{min-width:140px}footer{padding:30px 0;background:#eeefe7;border-top:1px solid var(--line);text-align:center}footer p{margin:0;color:#657061;font-size:12px;letter-spacing:.08em}.fade-up{opacity:1;transform:none}
/* Confirmation dialog */
.modal-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px;background:#17382d80;backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}.modal-overlay.active{opacity:1;visibility:visible}.modal-box{background:var(--card-bg);padding:42px 32px;border-radius:4px;text-align:center;width:min(100%,420px);box-shadow:0 22px 80px #0002}.modal-box h3{font-size:26px}.modal-box p{margin-bottom:28px}.modal-btn{background:var(--accent-primary);color:#fff;border:0;border-radius:2px;padding:10px 30px;cursor:pointer}.modal-btn:hover{background:var(--accent-dark)}
@media(min-width:1600px){#hero{padding-top:190px;padding-bottom:115px;min-height:820px}}
@media(max-width:1100px){#navbar{padding-inline:32px;gap:24px}.nav-links{gap:18px}.nav-links a{font-size:13px}.container,.hero-content{width:calc(100% - 64px)}.hero-content{column-gap:46px}.profile-container{height:470px}.hero-content h1{margin-top:30px}#about .container,#career .container,#contact .container{grid-template-columns:1fr 2.8fr;gap:40px}.edu-card,.skill-card{padding:26px 22px}.phi-item{padding-inline:20px}}
@media(max-width:900px){#navbar{min-height:76px;padding:14px 26px}.logo{font-size:23px}.hamburger{display:block}.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.nav-links{display:none;position:absolute;top:100%;left:0;width:100%;padding:22px 26px 28px;background:#f8f7f2;border-bottom:1px solid var(--line);box-shadow:0 14px 24px #243c340a;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px}.nav-links.active{display:grid}.nav-links a{padding:9px 0;display:block;font-size:15px}.nav-links li:last-child a{padding:9px 18px;text-align:center}.nav-links a::after{bottom:2px}#hero{padding-top:130px;min-height:auto}#hero::before{top:76px}.hero-content{column-gap:32px}.hero-content h1{font-size:59px;margin:28px 0 24px}.hero-content .tagline{font-size:20px}.hero-content .sub-tagline{font-size:14px}.profile-container{height:445px;border-top-left-radius:110px}.content-section{padding:76px 0}.education-grid,.skills-grid{gap:16px}.edu-card h3,.skill-card h3{font-size:18px}#about .container,#career .container,#contact .container{display:block}#career .section-title{position:relative;top:auto}.section-title{margin-bottom:36px}.philosophy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 0}.phi-item:nth-child(3){padding-left:0;border:0}.phi-item:nth-child(2){padding-right:0}}
@media(max-width:600px){html{scroll-padding-top:96px}.container,.hero-content{width:calc(100% - 44px)}#navbar{padding-inline:22px}#hero{padding:113px 0 48px}#hero::before{width:26%}#hero::after{width:300px;height:300px;top:105px;right:-150px}.hero-content{grid-template-columns:1fr}.profile-container{grid-column:1;grid-row:1;width:calc(100% - 12px);max-width:410px;height:auto;aspect-ratio:1.13;border-radius:100px 3px 3px 3px;box-shadow:12px 12px 0 #d6ddcc}.profile-pic{object-position:center 26%}.hero-content h1{grid-row:2;font-size:54px;margin:40px 0 16px;letter-spacing:.13em}.hero-content h1::before{width:32px;margin-bottom:20px}.hero-content .tagline{grid-row:3;font-size:18px;margin-bottom:12px}.hero-content .sub-tagline{grid-row:4;margin-bottom:24px;font-size:13px}.hero-content>.cta-button{grid-row:5;margin:0}.content-section{padding:60px 0}.section-title{font-size:28px;margin-bottom:30px;padding-bottom:18px}.bio-text{font-size:15px;text-align:left}.bio-text p{line-height:2}.education-grid,.skills-grid,.service-grid{grid-template-columns:1fr;gap:18px}.edu-card,.skill-card{padding:28px}.edu-card::before{margin-bottom:18px}.edu-card h3,.skill-card h3{font-size:21px}.timeline{padding-left:16px;margin-left:4px}.timeline-item{padding-left:12px;padding-bottom:24px;margin-bottom:24px}.timeline-item::before{left:-21px}.timeline-item h3{font-size:18px}.timeline-item li,.timeline-item p{font-size:14px}.service-block,.service-card{padding:26px}.service-block h3{font-size:21px}.section-subtitle{margin-top:-8px}.main-quote{text-align:left;font-size:24px;margin:12px 0 38px}.phi-item{padding-inline:18px}.phi-item h4{font-size:22px}.phi-item p{font-size:13px}.contact-form{padding:22px}.form-row{grid-template-columns:1fr;gap:14px;margin-bottom:14px}.contact-form textarea{min-height:150px}.contact-form button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}