@charset "UTF-8";
:root{--paper:#f7f7f5;--ink:#20211f;--muted:#676963;--line:#d3d5cf;--pad:clamp(22px,5vw,88px);--accent:#3d494c;font-family:Arial,"Noto Sans TC","Microsoft JhengHei",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #536b85;outline-offset:6px}img{display:block;max-width:100%}p{font-size:1rem;line-height:1.95}h1,h2,h3,p,figure{margin:0}h2{font-weight:400;font-size:clamp(2rem,4vw,3.7rem);letter-spacing:-.04em;line-height:1.25}h3{font-weight:500;line-height:1.5}section[id]{scroll-margin-top:110px}.skip{position:fixed;left:20px;top:-70px;z-index:100;background:#fff;padding:14px}.skip:focus{top:10px}.shell{padding-inline:var(--pad)}.eyebrow{font-size:.75rem;letter-spacing:.14em;line-height:1.6;text-transform:uppercase}.muted{color:var(--muted)}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:24px var(--pad);background:rgba(247,247,245,.96);border-bottom:1px solid var(--line)}.brand{width:153px;display:block}.brand img{width:100%;mix-blend-mode:multiply}.site-header nav{display:flex;gap:30px;font-size:.875rem;align-items:center}.site-header a:hover{opacity:.65}.nav-contact{border-bottom:1px solid;padding-bottom:4px}.menu-toggle{display:none}
.hero{display:grid;grid-template-columns:1fr 1.05fr;min-height:min(820px,calc(100svh - 87px));padding:35px var(--pad) 40px;gap:6vw}.hero-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-block:35px}.hero h1{font-family:Arial,sans-serif;font-size:clamp(4.5rem,10.3vw,10.6rem);font-weight:400;line-height:.95;letter-spacing:-.075em;margin:45px 0 25px}.hero-subtitle{font-size:clamp(1.1rem,1.6vw,1.4rem);letter-spacing:.1em;line-height:1.9}.hero-description{max-width:410px;margin-top:22px;color:var(--muted)}.text-link{display:inline-flex;justify-content:space-between;gap:42px;align-items:center;border-bottom:1px solid currentColor;padding:14px 0;font-size:.95rem;line-height:1.5}.hero .text-link{margin-top:25px}.hero-note{margin-top:65px}.hero-visual{position:relative;min-width:0;display:flex;flex-direction:column;justify-content:center}.hero-visual img{width:100%;height:100%;max-height:720px;object-fit:cover;object-position:50% 25%}.hero-caption{display:flex;justify-content:space-between;gap:14px;margin-top:12px;font-size:.75rem;letter-spacing:.08em}.hero-rule{border-bottom:1px solid var(--line);margin-inline:var(--pad)}
.portfolio{padding-top:92px;padding-bottom:100px}.section-intro{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:38px}.section-intro .eyebrow{margin-bottom:17px}.section-intro>p{max-width:345px;color:var(--muted)}.filterbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}.filterbar button{background:none;border:1px solid var(--line);padding:11px 20px;border-radius:0;font-size:.875rem;min-height:44px}.filterbar button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}.filterbar button:hover{border-color:var(--ink)}.portfolio-status{font-size:.875rem;color:var(--muted);margin-bottom:24px}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 22px}.photo[hidden]{display:none}.photo-button{width:100%;padding:0;border:0;background:transparent;text-align:left}.photo-frame{overflow:hidden;background:#e7e7e3;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center}.photo-frame img{height:100%;width:100%;object-fit:contain;transition:transform .4s ease}.photo-button:hover img{transform:scale(1.025)}.photo figcaption{display:flex;justify-content:space-between;gap:10px;margin-top:11px;font-size:.875rem}.photo figcaption span:last-child{font-size:.75rem;color:var(--muted)}.gallery-actions{display:flex;justify-content:center;margin-top:44px}.outline-button{background:transparent;border:1px solid var(--ink);padding:15px 40px;min-height:48px;line-height:1.4}.outline-button:hover{background:var(--ink);color:white}.downloads{border-top:1px solid var(--line);margin-top:75px;padding-top:27px;display:grid;grid-template-columns:1fr 2fr;gap:40px}.download-links{display:grid;grid-template-columns:1fr 1fr;gap:8px 30px}.download-links a{padding:15px 0;display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);font-size:.875rem}.download-links small{white-space:nowrap;color:var(--muted)}
.services{background:var(--ink);color:var(--paper);padding-block:90px}.services .section-intro>p{color:#b7bbb3}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.service{padding-top:25px;border-top:1px solid #666b62}.service .number{color:#b8bfb4;font-size:.875rem;display:block;margin-bottom:50px}.service h3{font-size:1.35rem;margin-bottom:18px}.service p{color:#c1c5bc;line-height:1.95}.workflow{display:grid;grid-template-columns:1fr 2fr;gap:40px;border-top:1px solid #666b62;margin-top:65px;padding-top:25px}.workflow ol{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;list-style:none;margin:0;padding:0}.workflow li{font-size:.95rem}.workflow li span{display:block;color:#b8bfb4;font-size:.8rem;margin-bottom:16px}
.about{padding-block:100px;display:grid;grid-template-columns:.72fr 1.28fr;gap:9vw}.about-portrait img{width:100%;max-width:420px;aspect-ratio:4/5;object-fit:cover;object-position:center top;background:#ddd}.about-portrait figcaption{margin-top:14px}.about h2{margin:20px 0 30px}.about-copy>p{margin-top:20px}.about-copy .eyebrow{margin:0}.about-copy .tools{font-size:.875rem;color:var(--muted);margin-top:25px}.experience{margin-top:35px;border-block:1px solid var(--line)}summary{cursor:pointer;padding:20px 0;font-size:1rem;line-height:1.6;list-style:none;display:flex;justify-content:space-between;gap:15px}summary::-webkit-details-marker{display:none}summary::after{content:'＋'}details[open]>summary::after{content:'−'}.timeline{margin:0 0 25px;padding:0;list-style:none}.timeline li{padding:18px 0;border-top:1px solid var(--line)}.timeline time{font-size:.8rem;color:var(--muted);display:block;margin-bottom:7px}.timeline h3{font-size:1rem}.timeline p{font-size:.9rem;margin-top:6px;color:var(--muted)}.education{font-size:.875rem;color:var(--muted);border-top:1px solid var(--line);padding-bottom:22px;padding-top:20px}
.brand-work{padding-block:10px 95px}.brand-work-inner{border-top:1px solid var(--line);padding-top:65px;display:grid;grid-template-columns:1fr 1.3fr;gap:8vw}.brand-work h2{margin:18px 0 25px;font-size:clamp(1.8rem,3vw,2.8rem)}.brand-work p{color:var(--muted)}.brand-work details{border-bottom:1px solid var(--line)}.brand-work details p{margin-bottom:22px}.brand-work .text-link{margin-top:22px}.brand-preview{margin-top:35px;background:#fff;padding:10px;border:1px solid var(--line)}.brand-preview img{width:100%}.brand-preview figcaption{font-size:.75rem;padding:12px 8px 4px;color:var(--muted)}
.contact{padding-block:85px 65px;background:#e7e9e5}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw}.contact h2{font-size:clamp(2.8rem,6.5vw,6rem);margin:20px 0;letter-spacing:-.065em}.contact-copy>p{max-width:490px;color:#50544d}.contact-links{align-self:center}.contact-links>a,.contact-links>.line-contact{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:24px 0;border-bottom:1px solid #92998c}.contact-links small{font-size:.8rem}.contact-links strong{font-size:clamp(1rem,1.8vw,1.4rem);font-weight:400;overflow-wrap:anywhere}.contact-note{font-size:.875rem;margin-top:18px;color:#50544d}.footer{display:flex;justify-content:space-between;gap:20px;padding-top:60px;font-size:.75rem;color:#555a50;letter-spacing:.03em}.footer a{text-decoration:underline}
.lightbox{border:0;padding:0;background:#111;color:#fff;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;overflow:hidden}.lightbox::backdrop{background:#111}.lightbox[open]{display:flex;flex-direction:column}.lightbox-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 24px}.lightbox-bar p{font-size:.875rem}.lightbox button{border:1px solid #727272;background:none;color:#fff;min-width:48px;min-height:48px}.lightbox-stage{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;padding:0 75px 16px;position:relative}.lightbox-stage img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%)}.lightbox-prev{left:14px}.lightbox-next{right:14px}.lightbox-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 24px 24px;font-size:.8rem;color:#c3c3c3}body.modal-open{overflow:hidden}
img{height:auto}
.hero-visual img,.photo-frame img{height:100%}
.about-portrait img{height:auto}
@media(min-width:1600px){.hero{max-width:1900px;margin:auto}.shell{max-width:1900px;margin:auto}}
@media(max-width:950px){.site-header nav{gap:20px}.hero{gap:4vw;min-height:620px}.hero h1{font-size:12vw}.hero-note{margin-top:40px}.gallery{gap:25px 16px}.service-grid{gap:25px}.about{gap:6vw;grid-template-columns:.85fr 1.15fr}.downloads{grid-template-columns:1fr}.workflow{grid-template-columns:1fr}.brand-work-inner{gap:5vw}.contact-grid{gap:5vw}}
@media(max-width:680px){.site-header{padding:19px var(--pad)}.brand{width:123px}.site-header nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:10px var(--pad) 25px;background:var(--paper);border-bottom:1px solid var(--line)}.site-header nav.open{display:flex}.site-header nav a{padding:16px 0}.menu-toggle{display:block;background:none;border:0;font-size:.875rem;padding:9px;min-height:44px}.hero{grid-template-columns:1fr;padding-top:24px;gap:28px;min-height:0}.hero-copy{padding:0}.hero h1{font-size:25vw;line-height:1;margin:30px 0 18px}.hero-subtitle{font-size:1.05rem;letter-spacing:.025em}.hero-description{margin-top:13px;max-width:100%}.hero .text-link{margin-top:12px}.hero-note{display:none}.hero-visual img{aspect-ratio:4/5;max-height:none;object-position:50% 25%}.hero-caption{font-size:.75rem}.portfolio{padding-block:65px}.section-intro{display:block;margin-bottom:28px}.section-intro>p{margin-top:20px;max-width:none}.filterbar{gap:8px}.filterbar button{padding:9px 13px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 12px}.photo figcaption{font-size:.8rem}.photo figcaption span:last-child{display:none}.downloads{margin-top:50px;gap:15px}.download-links{grid-template-columns:1fr}.services{padding-block:65px}.service-grid{grid-template-columns:1fr;gap:30px}.service .number{margin-bottom:20px}.service h3{margin-bottom:10px}.workflow{margin-top:40px;gap:24px}.workflow ol{grid-template-columns:1fr 1fr;gap:25px}.workflow li span{margin-bottom:8px}.about{padding-block:65px;grid-template-columns:1fr;gap:35px}.about-portrait{max-width:250px}.about h2{margin-top:15px}.brand-work{padding-bottom:65px}.brand-work-inner{padding-top:45px;grid-template-columns:1fr;gap:30px}.brand-preview{margin-top:25px}.contact{padding-block:60px 35px}.contact-grid{grid-template-columns:1fr;gap:30px}.contact h2{font-size:3.3rem}.contact-links>a,.contact-links>.line-contact{padding:20px 0}.contact-links strong{font-size:1rem}.footer{padding-top:40px;flex-wrap:wrap}.lightbox-bar{padding:12px 15px}.lightbox-stage{padding:0 10px 70px}.lightbox-prev,.lightbox-next{top:auto;bottom:5px;transform:none}.lightbox-prev{left:calc(50% - 60px)}.lightbox-next{right:calc(50% - 60px)}.lightbox-foot{padding:10px 15px 24px}.lightbox-foot span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*{transition:none!important}}
@media print{.site-header,.hero,.portfolio,.services,.contact,.brand-work,.lightbox{display:none!important}.about{display:block;padding:0}.about-portrait{float:right;width:22%;margin:0 0 20px 25px}.about h2{font-size:28px}.experience{border:0}details>summary{display:none}.timeline{display:block!important}.about-copy p{font-size:12px}body{background:#fff}}

.line-contact{width:100%;background:transparent;border:0;text-align:left}.line-contact>span{display:flex;align-items:center;gap:16px}.copy-label{font-size:.75rem;border:1px solid #92998c;padding:5px 9px;white-space:nowrap}.line-contact:hover .copy-label{background:var(--ink);color:var(--paper)}.line-status{font-size:.75rem;color:#50544d;margin-top:9px;line-height:1.6}