/* Case-study pages — Gallery (原版精修) style, follows the original label | content layout */
:root{--ink:#161616;--text:#2b2b2b;--mute:#858585;--faint:#b0b0b0;--line:#ececec;--soft:#f6f6f6;--bg:#fff;--col:880px;--label:128px}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--text);font-family:"Hanken Grotesk","Noto Sans TC",system-ui,sans-serif;font-weight:300;font-size:16px;line-height:1.9}
.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}
b,strong{font-weight:500;color:var(--ink)}

/* top banner (full bleed, like the original) */
.banner{margin-top:72px;height:clamp(150px,13vw,240px);overflow:hidden;background:var(--soft)}
.banner img{width:100%;height:118%;object-fit:cover;object-position:50% 50%}

.wrap{max-width:var(--col);margin:0 auto;padding:0 clamp(20px,4vw,32px)}

/* intro: title left, meta right */
.intro{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start;padding:clamp(56px,7vw,88px) 0 48px}
.intro h1{margin:0;font-size:clamp(28px,3.2vw,36px);font-weight:400;color:var(--ink);letter-spacing:-.01em;line-height:1.25}
.intro .sub{margin:10px 0 0;color:var(--mute);font-size:16px}
.meta{margin:4px 0 0;font-size:13px;line-height:1.85;color:var(--mute);min-width:250px}
.meta div{display:flex;gap:10px}
.meta dt{color:var(--faint);min-width:4.5em}
.meta dd{margin:0;color:var(--text)}

/* 01–05 brief */
.brief{list-style:none;margin:0;padding:0 0 clamp(56px,7vw,80px);border-top:1px solid var(--line)}
.brief li{display:grid;grid-template-columns:var(--label) 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.brief .k{font-size:14px;color:var(--ink);font-weight:500}
.brief .k span:first-child{color:var(--faint);font-weight:400;margin-right:8px;font-variant-numeric:tabular-nums}
.brief p{margin:0}

/* figures */
.fig{margin:0 0 clamp(64px,8vw,96px)}
.fig .frame{border-radius:12px;overflow:hidden;background:var(--soft)}
.fig img{width:100%;height:auto;cursor:zoom-in}
.fig figcaption{margin-top:14px;text-align:center;font-size:14px;color:var(--mute)}
.fig.wide{margin-left:-24px;margin-right:-24px}

/* label | content rows */
.row{display:grid;grid-template-columns:var(--label) minmax(0,1fr);gap:16px;padding:0 0 clamp(52px,6vw,72px)}
.row>h2{margin:0;font-size:15px;font-weight:500;color:var(--ink);line-height:1.9}
.row .body>*:first-child{margin-top:0}
.row p{margin:0 0 14px}
.row h3{margin:22px 0 6px;font-size:15px;font-weight:500;color:var(--ink)}
.row ol,.row ul{margin:0 0 14px;padding-left:1.3em}
.row li{margin:2px 0;padding-left:2px}
.row ol li::marker{color:var(--faint);font-variant-numeric:tabular-nums}
.row ul li::marker{color:var(--faint)}
.row.stack{grid-template-columns:1fr}
.row.stack>h2{margin-bottom:18px}

/* design process — 4 steps across */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.row .steps{padding:0;margin:0}
.steps li{border-top:1px solid var(--ink);padding-top:14px}
.steps .n{display:block;font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.steps strong{display:block;font-size:17px;margin:6px 0 6px;font-weight:500}
.steps p{margin:0;font-size:14px;color:var(--mute);line-height:1.75}

/* personas — small square photos with captions */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.people img{width:132px;height:132px;object-fit:cover;border-radius:12px;margin:0 auto 12px;background:var(--soft)}
.people span{font-size:15px;color:var(--ink)}

/* first MMF — image left, pros/cons right */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:start}
.split .frame{border-radius:12px;overflow:hidden;background:var(--soft)}
.split img{width:100%;height:auto;cursor:zoom-in}
.pc h3{margin:0 0 6px;font-size:15px;font-weight:500;color:var(--ink)}
.pc h3+ul{margin-bottom:22px}
.pc ul{margin:0;padding-left:1.2em}

/* side-by-side images (devices, photos, GIFs) — widths follow each image's ratio so heights match */
.pair{display:flex;gap:20px;align-items:flex-end;margin:0 0 clamp(64px,8vw,96px)}
.pair>figure{margin:0;min-width:0;flex:var(--r,1) 1 0}
.pair .frame{border-radius:12px;overflow:hidden;background:var(--soft)}
.pair img{width:100%;height:auto;cursor:zoom-in}
.pair figcaption{margin:0 0 12px;text-align:center;font-size:14px;color:var(--ink);font-weight:500}
.pair.inrow{margin-bottom:0;margin-top:22px}
.frame.clear,.pair .frame.clear{background:none;border-radius:0}

/* full-bleed image */
.bleed{width:100vw;margin:0 0 clamp(64px,8vw,96px) calc(50% - 50vw)}
.bleed img{width:100%;height:auto;display:block;cursor:zoom-in}

/* icon / persona trios with a short description */
.people strong{display:block;font-size:15px;margin-bottom:2px}
.people p{margin:0;font-size:14px;color:var(--mute);line-height:1.7}
.people.ic img{width:84px;height:84px;object-fit:contain;background:none;border-radius:0}
.people b.num{display:block;font-size:clamp(26px,3vw,34px);font-weight:300;letter-spacing:-.02em;line-height:1.2;margin:-2px 0 4px;font-variant-numeric:tabular-nums}
.quad{display:grid;grid-template-columns:1fr 1fr;gap:36px 40px}
.quad>div{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:start}
.quad img{width:72px;height:72px;object-fit:contain}
.quad strong{display:block;font-size:15px}
.quad p{margin:2px 0 0;font-size:14px;color:var(--mute);line-height:1.75}

/* text left, image right (mirrors .split) */
.split.rev{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:end}
.split .frame.clear{background:none;border-radius:0}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink);border-radius:99px;padding:8px 20px;font-size:14px;color:var(--ink);transition:background .3s,color .3s}
.btn:hover{background:var(--ink);color:#fff}

.defs li{margin:0 0 12px}
.defs strong{display:block;font-weight:500}
.defs span{display:block}
.pc .defs{padding-left:1.3em;margin:0}
.pair.crop .frame{aspect-ratio:var(--r)}
.pair.crop img{height:100%;object-fit:cover}
.pair.narrow{max-width:560px;margin-left:auto;margin-right:auto}
.pair.narrow .frame.clear{border-radius:18px;overflow:hidden}
.pair.narrow img{display:block;margin-bottom:-6px}
/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;margin:8px 0 clamp(56px,7vw,80px)}
.stats span{display:block;font-size:14px;color:var(--mute)}
.stats b{display:block;font-size:clamp(28px,3.4vw,40px);font-weight:300;color:var(--ink);letter-spacing:-.02em;line-height:1.3;font-variant-numeric:tabular-nums}

/* next project */
.next{display:block;border-top:1px solid var(--line);padding:56px 0 64px;text-align:center}
.next small{display:block;font-size:13px;color:var(--mute);margin-bottom:10px}
.next strong{font-size:clamp(26px,3.6vw,40px);font-weight:300;letter-spacing:-.02em}
.next .arr{display:inline-block;margin-left:10px;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.next:hover .arr{transform:translateX(8px)}

.talk{max-width:var(--col);margin:0 auto;padding:0 clamp(20px,4vw,32px)}
.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)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:190;background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:center;padding:4vw;cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain}

@media (max-width:720px){
  :root{--label:auto}
  .intro{grid-template-columns:1fr;gap:20px}
  .brief li,.row{grid-template-columns:1fr;gap:6px}
  .steps{grid-template-columns:1fr 1fr;gap:20px}
  .people{gap:12px}.people img{width:100%;height:auto;aspect-ratio:1}
  .split{grid-template-columns:1fr;gap:20px}
  .stats{grid-template-columns:repeat(3,1fr);gap:8px;padding:22px 0}
  .stats>div{display:flex;flex-direction:column;justify-content:space-between}
  .stats span{font-size:12px;line-height:1.5}
  .stats b{font-size:26px;margin-top:4px}
  .fig.wide{margin-left:0;margin-right:0}
  .quad{grid-template-columns:1fr;gap:24px}
  .pair{gap:10px}
  .pair.stack-sm{flex-direction:column;align-items:stretch}
  .legal{flex-direction:column;gap:6px}
}