/* Gallery base (A) — shared by home-g1..g4 */
:root{--ink:#161616;--mute:#858585;--faint:#b0b0b0;--line:#ececec;--bg:#fff;--max:1080px}
body{background:var(--bg);color:var(--ink);font-family:"Hanken Grotesk","Noto Sans TC",system-ui,sans-serif;font-weight:300}
.pre{background:#f5f5f5;color:var(--ink)}
.pre-name{font-size:14px;font-weight:500}
.pre-tag{font-size:14px;color:var(--mute)}
.pre-count{font-size:clamp(72px,14vw,200px);font-weight:300;letter-spacing:-.04em}
.top{color:var(--ink)}
.top.is-scrolled{background:rgba(255,255,255,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.brand{font-weight:500;font-size:15px}
.nav{font-size:14px;color:#555}
.nav a:hover{color:var(--ink)}
.cur{background:var(--ink);color:#fff}

/* works */
.works{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,40px) 140px;display:flex;flex-direction:column;gap:clamp(96px,12vw,160px)}
.work{display:block;scroll-margin-top:110px}
.media{position:relative;aspect-ratio:2.2/1;border-radius:14px;overflow:hidden;background:#f1f1f1;transform:translateZ(0)}
.par{position:absolute;left:0;right:0;top:-4%;bottom:-4%}
.zoom{width:100%;height:100%;transition:transform 1.1s cubic-bezier(.2,.7,.1,1)}
.work:hover .zoom{transform:scale(1.035)}
.media img{width:100%;height:100%;object-fit:cover}
.cap{margin-top:24px;text-align:center}
.ttl{font-size:clamp(17px,1.6vw,20px);line-height:1.5}
.ttl b{font-weight:500}
.ttl i{font-style:normal;color:var(--mute);margin-left:.45em}
.meta{font-size:13px;color:var(--faint);letter-spacing:.02em}
.cap .k{display:none}
.g4 .cap .k{display:block}

/* footer */
.talk{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.talk .row{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line);padding:22px 0 26px;font-size:13px;color:var(--mute)}
.talk .loc{margin-left:14px}
.talk .row a{color:var(--ink)}

/* ---- g1 原版精修: no headline, the work speaks first ---- */
.g1 .hero{text-align:center;padding:132px 20px 56px}
.g1 .hero p{margin:0;font-size:15px;font-weight:400}
.g1 .hero p+p{margin-top:6px;color:var(--mute);font-size:13px;letter-spacing:.03em;font-weight:300}
.g1 .ttl>span{display:inline;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .6s cubic-bezier(.2,.7,.1,1)}
.g1 .ttl b,.g1 .ttl i{color:var(--ink)}
.g1 .ttl i{font-weight:300}
.g1 .work:hover .ttl>span{background-size:0 1px;background-position:100% 100%}
.g1 .cap .m{display:none}

/* ---- g2 名字開場: the name is the headline ---- */
.g2 .hero{text-align:center;padding:150px 20px 96px}
.g2 .big{display:block;margin:0;font-size:clamp(56px,12.6vw,188px);font-weight:300;letter-spacing:-.045em;line-height:.95}
.g2 .hero .sub{margin:26px 0 0;color:var(--mute);font-size:15px;letter-spacing:.02em}
.g2 .ttl{font-size:clamp(20px,2vw,24px)}
.g2 .ttl i{display:block;margin:4px 0 0;font-size:15px}
.g2 .cap .m{display:block;margin-top:10px}

/* ---- g3 一句自介: plain introduction, captions split left/right ---- */
.g3 .hero{max-width:var(--max);margin:0 auto;padding:170px clamp(20px,4vw,40px) 110px}
.g3 .hero .who{margin:0 0 26px;font-size:13px;color:var(--mute);letter-spacing:.03em}
.g3 .motto{margin:0;font-size:clamp(48px,8.4vw,128px);font-weight:300;letter-spacing:-.03em;line-height:1.1}
.g3 .sub{margin:30px 0 0;font-size:clamp(16px,1.5vw,20px);color:var(--mute);line-height:1.7;max-width:34em}
.g3 .intro{margin:0;font-size:clamp(24px,3vw,40px);line-height:1.5;font-weight:300;letter-spacing:-.01em;max-width:24em}
.g3 .cap{display:flex;justify-content:space-between;align-items:baseline;gap:24px;text-align:left;border-top:1px solid var(--line);padding-top:16px;margin-top:20px}
.g3 .ttl i{margin-left:.6em}
@media (max-width:640px){.g3 .cap{flex-direction:column;gap:4px}}

/* ---- g4 作品索引: a contents row up top, a key number under each work ---- */
.g4 .hero{text-align:center;padding:140px 20px 88px}
.g4 .hero .who{margin:0;font-size:15px;font-weight:400}
.g4 .hero .who+p{margin:6px 0 0;color:var(--mute);font-size:13px;letter-spacing:.03em}
.g4 .index{list-style:none;margin:44px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.g4 .index a{display:inline-block;padding:10px 18px;border:1px solid var(--line);border-radius:99px;font-size:14px;font-weight:400;transition:border-color .3s,background-color .3s}
.g4 .index a:hover{border-color:var(--ink);background:#fafafa}
.g4 .cap .m{display:block;margin-top:8px}
.g4 .kpi{display:inline-flex;align-items:baseline;gap:8px;margin-top:14px;font-size:13px;color:var(--mute)}
.g4 .kpi b{font-size:22px;font-weight:400;color:var(--ink);letter-spacing:-.02em}

@media (max-width:640px){.media{border-radius:10px}.legal{flex-direction:column;gap:6px}}