@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Noto+Serif+TC:wght@500;700;900&display=swap');
:root{--paper:#f1eee6;--ink:#20231e;--muted:#6d7167;--line:#c9c6bb;--green:#365b4c;--rust:#bf5b3b;--cream:#faf8f2;--serif:'Noto Serif TC',serif;--sans:'Noto Sans TC',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.8}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.skip{position:fixed;left:1rem;top:-4rem;background:#fff;padding:.7rem 1rem;z-index:20}.skip:focus{top:1rem}.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line);position:relative;z-index:10}.brand{font-family:var(--serif);font-size:1.25rem;display:flex;gap:.35rem;align-items:baseline}.brand span{font-weight:900}.brand i{font-weight:500;color:var(--rust);font-style:normal}.site-header nav{display:flex;gap:2.3rem;font-size:.9rem}.site-header nav a{position:relative}.site-header nav a:after{content:'';position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:var(--rust);transition:.25s}.site-header nav a:hover:after,.site-header nav a[aria-current]:after{right:0}.menu{display:none;background:none;border:0}.hero{min-height:670px;padding:8vw 8vw 5vw;position:relative;overflow:hidden}.hero:before{content:'好用';position:absolute;right:-1vw;top:-5vw;font:900 20vw/1 var(--serif);color:rgba(54,91,76,.055);writing-mode:vertical-rl}.eyebrow,.section-no{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green);font-weight:700}.hero h1,.page-hero h1{font:900 clamp(3.3rem,8vw,7.8rem)/1.14 var(--serif);margin:1.2rem 0 2rem;letter-spacing:-.06em}.hero h1 em{font-style:normal;color:var(--green);position:relative}.hero h1 em:after{content:'';height:.13em;background:var(--rust);position:absolute;left:0;right:0;bottom:.05em;z-index:-1;opacity:.65}.hero>p{font-size:1.18rem;max-width:560px;color:var(--muted)}.actions{display:flex;align-items:center;gap:2rem;margin-top:2.3rem}.button{display:inline-flex;background:var(--ink);color:white;border:1px solid var(--ink);padding:.85rem 1.4rem;cursor:pointer;transition:.2s}.button:hover{background:var(--green);transform:translateY(-2px)}.button.ghost{background:transparent;color:var(--ink)}.text-link{font-weight:700;border-bottom:1px solid}.hero-note{position:absolute;right:7vw;bottom:4vw;border-left:1px solid var(--rust);padding-left:1.2rem;display:grid}.hero-note span,.hero-note small{font-size:.74rem;color:var(--muted)}.hero-note strong{font-family:var(--serif)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.metrics div{padding:2.5rem 3vw;display:flex;flex-direction:column;border-right:1px solid var(--line)}.metrics div:last-child{border:0}.metrics strong{font:700 clamp(2.5rem,5vw,5rem)/1 var(--serif);color:var(--green)}.metrics span{font-size:.85rem;color:var(--muted);margin-top:.8rem}.split{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding:9vw 8vw}.split h2,.section-head h2,.process h2{font:700 clamp(2.4rem,5vw,5rem)/1.25 var(--serif);margin:1.4rem 0}.split>div:last-child{padding-top:3rem}.lead{font:500 1.55rem/1.8 var(--serif)}.split p:not(.lead){color:var(--muted)}.capabilities,.selected,.credentials,.timeline,.process{padding:7vw 6vw}.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:3rem}.section-head h2{max-width:800px}.card-grid{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line)}.cap-card{padding:3rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:340px}.cap-card:nth-child(2n){border-right:0}.cap-card:nth-child(n+3){border-bottom:0}.cap-card>span,.service-stack>article>span{color:var(--rust);font-family:var(--serif)}.cap-card h3{font:700 1.8rem var(--serif)}.cap-card p{color:var(--muted)}.cap-card ul{list-style:none;padding:0;display:flex;gap:.5rem;flex-wrap:wrap}.cap-card li{font-size:.72rem;border:1px solid var(--line);padding:.2rem .6rem}.selected{background:var(--green);color:var(--cream)}.selected .section-no,.selected small{color:#cfdccd}.project-list{border-top:1px solid #6c867c;margin:3rem 0}.project-list article,.work-table article{display:grid;grid-template-columns:100px 1fr auto;gap:2rem;align-items:center;padding:1.8rem 0;border-bottom:1px solid #6c867c}.project-list h3,.work-table h2{margin:.2rem 0;font:700 1.5rem var(--serif)}.project-list p{margin:0;color:#cfdccd}.project-list b,.work-table b{font-size:.75rem;font-weight:500;border:1px solid currentColor;padding:.25rem .6rem}.quote{padding:10vw 7vw;text-align:center}.quote p{font:700 clamp(2rem,5vw,5rem)/1.5 var(--serif);margin:0}.quote span{color:var(--muted)}.page-hero{padding:8vw 8vw 6vw;border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(3rem,7vw,7rem);max-width:1100px}.page-hero p{max-width:700px;font-size:1.2rem;color:var(--muted)}.story{border-bottom:1px solid var(--line)}.principles{display:flex;gap:1rem;margin-top:2rem}.principles span{width:5rem;height:5rem;border:1px solid var(--green);border-radius:50%;display:grid;place-items:center;color:var(--green)}.credentials article{display:grid;grid-template-columns:180px 1fr;padding:1.5rem 0;border-top:1px solid var(--line)}.credentials h3{font:700 1.35rem var(--serif);margin:0}.credentials p{margin:0;color:var(--muted)}.privacy-note{font-size:.8rem!important}.service-stack{padding:0 7vw}.service-stack article{display:grid;grid-template-columns:90px 1fr 240px;gap:2rem;padding:4rem 0;border-bottom:1px solid var(--line)}.service-stack h2{font:700 2.2rem var(--serif);margin:0}.service-stack p{color:var(--muted)}.service-stack ul{list-style:none;padding:0;margin:0}.service-stack li{border-bottom:1px solid var(--line);padding:.4rem}.process{background:#dcd7ca}.process ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}.process li{padding:2rem;display:grid;border-right:1px solid var(--line)}.process li:last-child{border:0}.process b{color:var(--rust)}.process strong{font:700 1.5rem var(--serif);margin:1rem 0}.process span{color:var(--muted);font-size:.88rem}.work-filter{display:flex;gap:.6rem;padding:3rem 7vw}.work-filter button{background:transparent;border:1px solid var(--line);padding:.5rem 1rem;cursor:pointer}.work-filter .active{background:var(--ink);color:white}.work-table{padding:0 7vw}.work-table article{border-color:var(--line)}.work-table small{color:var(--green)}.work-table p{margin:0;color:var(--muted)}.timeline article{display:grid;grid-template-columns:220px 1fr;padding:2rem 0;border-top:1px solid var(--line)}.timeline time{color:var(--rust)}.timeline h3{font:700 1.6rem var(--serif);margin:0}.timeline p{color:var(--muted)}.article-grid{padding:5vw 7vw;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}.article-grid article{background:var(--paper);padding:3rem;min-height:360px}.article-grid article>span{font:700 3rem var(--serif);color:#bab7ac}.article-grid small{display:block;color:var(--green)}.article-grid h2{font:700 1.7rem var(--serif)}.article-grid p{color:var(--muted)}.article-grid a{font-weight:700;border-bottom:1px solid}.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding:8vw}.contact-wrap h1{font:900 clamp(3rem,7vw,7rem)/1.2 var(--serif);margin:1rem 0}.contact-wrap>div>p{color:var(--muted);font-size:1.1rem}.availability{display:flex;align-items:center;gap:.7rem;margin-top:2rem}.availability i{width:.7rem;height:.7rem;border-radius:50%;background:#4f9366;box-shadow:0 0 0 6px #4f936622}.contact-wrap form,.admin-login form{display:grid;gap:1rem;background:var(--cream);padding:2.5rem;border:1px solid var(--line)}label{display:grid;gap:.35rem;font-size:.82rem;font-weight:700}input,select,textarea{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:.7rem .2rem;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--green)}textarea{resize:vertical}.contact-wrap form small{color:var(--muted)}.trap{position:absolute;left:-9999px}.admin-login,.not-found{min-height:65vh;display:grid;place-items:center;padding:5vw}.admin-login form{width:min(480px,100%)}.dashboard{padding:5vw 7vw}.dash-head{display:flex;justify-content:space-between;align-items:center}.dash-head h1{font:700 4rem var(--serif);margin:.5rem 0}.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin:2rem 0}.dash-stats div{padding:1.5rem;border-right:1px solid var(--line);display:grid}.dash-stats strong{font:700 3rem var(--serif)}.message-list article{background:var(--cream);border:1px solid var(--line);padding:1.5rem;margin:1rem 0}.message-list article>div{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem}.message-list form{display:flex;gap:1rem;align-items:center}.message-list select{width:auto}.not-found{text-align:center}.not-found b{font:900 9rem/1 var(--serif);color:var(--rust)}.toast{position:fixed;right:1rem;bottom:1rem;background:var(--ink);color:#fff;padding:1rem 1.4rem;z-index:50}footer{display:grid;grid-template-columns:1fr auto;gap:2rem;padding:4rem 6vw;background:var(--ink);color:var(--cream)}footer nav{display:flex;gap:2rem}footer small{grid-column:1/-1;color:#aaa}.reveal{opacity:0;transform:translateY(18px);transition:.7s ease}.reveal.seen{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.reveal{opacity:1;transform:none;transition:none}}
@media(max-width:800px){.site-header{height:72px}.menu{display:block}.site-header nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--paper);padding:2rem;flex-direction:column;border-bottom:1px solid var(--line)}.site-header nav.open{display:flex}.hero{padding:6rem 6vw;min-height:650px}.hero-note{position:static;margin-top:4rem}.metrics{grid-template-columns:repeat(2,1fr)}.metrics div:nth-child(2){border-right:0}.split,.contact-wrap{grid-template-columns:1fr}.split>div:last-child{padding-top:0}.section-head{display:block}.card-grid,.article-grid{grid-template-columns:1fr}.cap-card{border-right:0!important;border-bottom:1px solid var(--line)!important}.service-stack article{grid-template-columns:50px 1fr}.service-stack ul{grid-column:2}.process ol{grid-template-columns:1fr 1fr}.process li:nth-child(2){border-right:0}.process li{border-bottom:1px solid var(--line)}.project-list article,.work-table article{grid-template-columns:70px 1fr}.project-list b,.work-table b{grid-column:2;width:max-content}.timeline article{grid-template-columns:1fr}.contact-wrap{padding:12vw 6vw}.dash-stats{grid-template-columns:1fr}.dash-stats div{border-right:0;border-bottom:1px solid var(--line)}footer{grid-template-columns:1fr}footer nav{flex-wrap:wrap}footer small{grid-column:auto}}
.human-check{display:flex;align-items:center;gap:.85rem;border:1px solid var(--line);padding:1rem;cursor:pointer}.human-check input{width:1.25rem;height:1.25rem;accent-color:var(--green);flex:0 0 auto}.human-check span{display:grid}.human-check strong{font-size:.9rem}.human-check small{font-weight:400}
.brand img{width:30px;height:30px;object-fit:contain;margin-right:.4rem}.site-header .brand img{transition:transform .35s ease}.site-header .brand:hover img{transform:rotate(-5deg) scale(1.06)}footer .brand img{filter:brightness(0) invert(1);opacity:.9}.cap-top{display:flex;align-items:center;justify-content:space-between}.cap-top>span{color:var(--rust);font-family:var(--serif)}.cap-top i{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;color:var(--green);font:400 1.35rem/1 var(--serif);font-style:normal;transition:.3s}.cap-card:hover .cap-top i{color:var(--cream);background:var(--green);border-color:var(--green);transform:rotate(7deg)}.section-no:before{content:'✦';display:inline-block;margin-right:.65rem;color:var(--rust);font-size:.7rem}.project-list article>span:before,.work-table article>span:before{content:'◇';color:var(--rust);margin-right:.45rem}.quote:before{content:'“';display:block;color:var(--rust);font:900 7rem/1 var(--serif);height:3.8rem;opacity:.75}
.welcome{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--paper);pointer-events:none;overflow:hidden;animation:welcome-away .7s cubic-bezier(.7,0,.2,1) 2.35s forwards}.welcome-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(54,91,76,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(54,91,76,.07) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent);opacity:0;animation:grid-in .8s ease .15s forwards}.welcome-inner{position:relative;display:flex;align-items:center;gap:1.5rem;padding:2rem 2.5rem}.welcome-inner:before,.welcome-inner:after{content:'';position:absolute;background:var(--rust);transform:scaleX(0);animation:line-draw .65s ease forwards}.welcome-inner:before{height:1px;left:0;right:0;top:0;transform-origin:left}.welcome-inner:after{height:1px;left:0;right:0;bottom:0;transform-origin:right;animation-delay:.25s}.welcome-inner img{width:88px;height:88px;object-fit:contain;opacity:0;transform:translateY(10px) rotate(-5deg);animation:mark-in .7s cubic-bezier(.2,.8,.2,1) .25s forwards}.welcome-inner div{overflow:hidden}.welcome-inner p{margin:0;font:700 clamp(1.7rem,4vw,3.2rem)/1.25 var(--serif);transform:translateY(110%);animation:words-up .6s cubic-bezier(.2,.8,.2,1) .45s forwards}.welcome-inner span{display:block;color:var(--muted);letter-spacing:.08em;opacity:0;animation:fade-in .55s ease .85s forwards}.welcome>small{position:absolute;bottom:8vh;letter-spacing:.24em;color:var(--green);opacity:0;animation:fade-in .55s ease 1.05s forwards}.welcome-seen .welcome{display:none}@keyframes line-draw{to{transform:scaleX(1)}}@keyframes mark-in{to{opacity:1;transform:none}}@keyframes words-up{to{transform:none}}@keyframes fade-in{to{opacity:1}}@keyframes grid-in{to{opacity:1}}@keyframes welcome-away{to{opacity:0;visibility:hidden;transform:scale(1.015)}}
@media(max-width:600px){.welcome-inner{gap:1rem;padding:1.5rem}.welcome-inner img{width:64px;height:64px}.welcome-inner span{font-size:.75rem;letter-spacing:.03em}.welcome>small{font-size:.55rem;letter-spacing:.15em}.brand img{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){.welcome{display:none}.site-header .brand img,.cap-top i{transition:none}}
:root{--muted:#60665d;--rust:#a94a32}.brand{align-items:center;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:42px;height:42px;padding:5px;margin-right:.4rem;background:var(--ink);border-radius:12px;overflow:hidden;flex:0 0 42px}.brand-mark img,.site-header .brand-mark img,footer .brand-mark img{display:block;width:100%!important;height:100%!important;max-width:100%;object-fit:contain;margin:0;filter:none}.site-header .brand:hover .brand-mark img{transform:rotate(-4deg) scale(1.04)}footer .brand{color:var(--cream)}footer .brand-mark{background:var(--cream)}footer .brand-mark img{filter:none}.welcome-inner .logo-tile{display:grid;place-items:center;width:112px;height:112px;padding:12px;flex:0 0 112px;background:var(--ink);border-radius:28px;opacity:1;animation:none}.welcome-inner .logo-tile img{display:block;width:100%;height:100%;margin:0;object-fit:contain}.page-hero{position:relative;overflow:hidden;isolation:isolate}.page-hero:before{content:'';position:absolute;z-index:0;right:4vw;top:50%;width:min(29vw,430px);aspect-ratio:1;transform:translateY(-50%) rotate(-5deg);background:url('/assets/charles-huang-logo.png?v=032') center/contain no-repeat;opacity:.045;pointer-events:none}.page-hero>*{position:relative;z-index:1}.hero:after{content:'';position:absolute;right:4vw;bottom:1.5vw;width:min(25vw,360px);aspect-ratio:1;background:url('/assets/charles-huang-logo.png?v=032') center/contain no-repeat;opacity:.035;pointer-events:none}.hero>*:not(.hero-note){position:relative;z-index:1}.hero .hero-note{position:absolute;right:7vw;bottom:4vw;z-index:1}.hero>p{max-width:720px;text-wrap:pretty}.selected .button.ghost{color:var(--cream);border-color:#dce7df}.selected .button.ghost:hover{background:var(--cream);color:var(--green)}
@media(max-width:800px){.brand-mark{width:36px;height:36px;flex-basis:36px;border-radius:10px;padding:4px}.page-hero:before{width:58vw;right:-16vw;opacity:.035}.hero:after{width:56vw;right:-15vw;opacity:.025}.hero .hero-note{position:static;margin-top:4rem}.hero>p{max-width:none}.welcome-inner .logo-tile{width:78px;height:78px;flex-basis:78px;border-radius:20px;padding:9px}}

/* 0.3.3 — 頁首向上突破、頁尾穩固承接 */
.site-header .brand{position:relative;align-items:center}
.site-header .brand-mark{position:relative;z-index:1;width:58px;height:58px;flex-basis:58px;margin-right:.55rem;padding:0;background:transparent;border-radius:0;overflow:visible}
.site-header .brand-mark img{position:relative;z-index:2;width:58px!important;height:58px!important;filter:drop-shadow(0 0 .7px rgba(32,35,30,.9)) drop-shadow(0 1px 0 rgba(250,248,242,.95)) drop-shadow(0 3px 6px rgba(32,35,30,.16));transform-origin:48% 55%}
.site-header .brand-mark:before{content:'';position:absolute;z-index:0;left:7px;top:0;width:58px;height:27px;border-top:2px solid rgba(169,74,50,.72);border-radius:52% 70% 0 0;transform:rotate(-18deg);pointer-events:none}
.site-header .brand-mark:after{content:'✦';position:absolute;z-index:3;right:-11px;top:-9px;color:var(--rust);font:700 .72rem/1 var(--sans);text-shadow:-17px 14px 0 rgba(54,91,76,.58);transform:rotate(8deg);pointer-events:none}
.site-header .brand:before{content:'';position:absolute;z-index:0;left:13px;top:8px;width:52px;height:31px;border-top:1px solid rgba(54,91,76,.58);border-radius:50%;transform:rotate(-17deg);pointer-events:none}
.site-header .brand:hover .brand-mark img{transform:translate(2px,-3px) rotate(-5deg) scale(1.06)}
footer .brand-mark{width:42px;height:42px;flex-basis:42px;padding:5px;margin-right:.4rem;background:var(--cream);border-radius:12px;overflow:hidden}
footer .brand-mark:before,footer .brand-mark:after{content:none}
@media(max-width:800px){.site-header .brand-mark{width:48px;height:48px;flex-basis:48px;margin-right:.35rem}.site-header .brand-mark img{width:48px!important;height:48px!important}.site-header .brand-mark:before{width:48px;height:23px}.site-header .brand-mark:after{right:-8px;top:-6px;font-size:.62rem}.site-header .brand:before{width:44px}.site-header .brand span,.site-header .brand i{font-size:1rem}footer .brand-mark{width:36px;height:36px;flex-basis:36px;padding:4px;border-radius:10px}}