:root{
    --bg:#fff; --fg:#111; --muted:rgba(0,0,0,.4); --nav:rgba(0,0,0,.75);
    --font:"Hanken Grotesk","PingFang TC","Noto Sans TC",sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit;text-decoration:none}

  /* ---------- 頂部導覽列 ---------- */
  header{position:fixed;inset:0 0 auto 0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;
    align-items:center;padding:24px 26px;font-size:16px;font-weight:700;letter-spacing:.07em;color:var(--nav);
    mix-blend-mode:difference;color:#fff}
  header .clock{font-weight:500;font-variant-numeric:tabular-nums}
  header .right{justify-self:end;cursor:pointer;background:none;border:0;font:inherit;color:inherit;letter-spacing:inherit}
  header a:hover,header .right:hover{opacity:.6}

  /* ---------- 大標題 ---------- */
  .hero{padding-top:110px;text-align:center;font-weight:400;font-size:clamp(44px,7.8vw,80px);
    line-height:1.08;letter-spacing:.04em}

  /* ---------- 拼貼作品區 ---------- */
  .collage{position:relative;width:100%;margin-top:4vw}
  .collage .item{position:absolute;display:block;overflow:hidden;background:#f2f2f2}
  .collage img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .3s}
  .collage a.item{cursor:pointer}
  .collage a.item:hover img{transform:scale(1.04)}
  .collage .item{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
  .collage .item.in{opacity:1;transform:none}

  /* ---------- 跑馬燈 + 頁尾 ---------- */
  .marquee{overflow:hidden;white-space:nowrap;margin:120px 0 40px;font-size:clamp(22px,3vw,30px)}
  .marquee .track{display:inline-block;animation:scroll 22s linear infinite}
  .marquee span{padding-right:.4em}
  /* 比 YA 的手放大約 1.5 倍，底部略低於文字基線，左右多留一點空間 */
  .marquee .ya{font-style:normal;font-size:1.5em;line-height:0;vertical-align:-.08em;padding:0 .1em}
  @keyframes scroll{to{transform:translateX(-50%)}}
  footer{text-align:center;padding-bottom:40px;font-size:15px;line-height:2.6}
  footer a:hover{opacity:.55}
  footer .tag{margin-top:40px;color:var(--muted);font-style:italic;font-size:12px;letter-spacing:.05em}


  /* ---------- 手機版：改成兩欄排列 ---------- */
  @media (max-width:700px){
    header{padding:18px 16px;font-size:13px}
    .hero{padding-top:90px}
    .collage{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 16px;height:auto!important;margin-top:48px}
    .collage .item{position:static;width:auto!important;height:auto!important;aspect-ratio:var(--ar)}
    .collage .item.wide{grid-column:1/-1}
  }
  @media (prefers-reduced-motion:reduce){.marquee .track{animation:none}.collage .item{opacity:1;transform:none}}

/* ================= 作品內頁 ================= */
/* 尺寸都以畫面寬度 1024px 時的原站為準換算成 vw */
.project{--rem:1.08vw;padding:3.24vw 3.24vw 0;text-align:center;font-size:calc(1.8 * var(--rem));line-height:1.3;letter-spacing:calc(.12 * var(--rem));color:rgba(0,0,0,.75);overflow-wrap:break-word}
.project h1{font-size:calc(8.333 * var(--rem));font-weight:400;line-height:1;letter-spacing:calc(.3 * var(--rem) + .03em);color:rgba(0,0,0,.85)}
.project h2{font-size:calc(3.2 * var(--rem));font-weight:400;line-height:1.1}
/* 作品頁標題統一改成跟首頁 ZOECHANG STUDIO 相同的字體與粗細（Hanken Grotesk 一般粗細） */
.project h1,.project h2,.project h1 b,.project h2 b{font-family:var(--font);font-weight:400}
/* 作品頁大標題：大小、行距、字距與首頁 ZOECHANG STUDIO 完全相同，每一頁統一 */
.project h1{font-size:clamp(44px,7.8vw,80px);line-height:1.08;letter-spacing:.04em}
/* 大標題位置與首頁 ZOECHANG STUDIO 相同：頁面頂端留 110px（手機 90px），標題下方固定間距 */
.project{padding-top:110px}
.project h1{margin-bottom:14px}
/* 標題下方的「本專案為任職…之作品」與上方保持固定距離 */
.project h1 + small, .project h1 + div small{margin-top:4px}
/* 小標題依比例縮小，跟大標題保持層次 */
.project h2{font-size:clamp(22px,2.8vw,34px);line-height:1.25;letter-spacing:.03em}
.project small{display:inline-block;font-size:var(--rem);line-height:1.2;letter-spacing:0;color:rgba(0,0,0,.6);font-family:ui-monospace,"SF Mono",Menlo,monospace}
/* 粗體內文：替代字體的粗體略寬，字距收 0.01em 讓折行與原站一致（標題內的粗體不受影響） */
.project b{letter-spacing:calc(.12 * var(--rem) - .01em)}
.project h1 b,.project h2 b{letter-spacing:inherit}
.project sub,.project sup{font-size:.8333em;vertical-align:baseline;line-height:1.3}
.project hr{border:0;border-top:1px solid rgba(0,0,0,.25);margin:.5em 0}
.project blockquote{padding-left:1em}
.project a{text-decoration:underline;text-underline-offset:3px}
.project a.image-link{text-decoration:none}
.project img{display:inline-block;max-width:100%;height:auto;vertical-align:bottom}

/* Cargo 的欄位格線：12 欄；間距 = 設定值 × 0.54vw */
.project [grid-row]{--pad:2;--gut:4;display:flex;flex-wrap:wrap;margin:calc(var(--gut) * -0.54vw);padding:calc(var(--pad) * 0.54vw)}
.project [grid-col]{--pad:2;padding:calc(var(--pad) * 0.54vw);min-width:0}
.project [grid-col="1"]{width:8.333%}  .project [grid-col="2"]{width:16.667%} .project [grid-col="3"]{width:25%}
.project [grid-col="4"]{width:33.333%} .project [grid-col="5"]{width:41.667%} .project [grid-col="6"]{width:50%}
.project [grid-col="7"]{width:58.333%} .project [grid-col="8"]{width:66.667%} .project [grid-col="9"]{width:75%}
.project [grid-col="10"]{width:83.333%} .project [grid-col="11"]{width:91.667%} .project [grid-col="12"]{width:100%}
.project [grid-col^="x"]{flex:1 1 0}   /* x10、x11、x12：同一列平均分配寬度 */

/* 自由排版圖片區（原 Cargo Montessori 版型） */
.mgal{position:relative;width:100%;height:0}
.mgal .card{position:absolute}
.mgal .card img{width:100%;display:block}

@media (max-width:700px){
  .project{--rem:10px;padding:90px 16px 0!important;max-width:none!important}
  .project h1{font-size:44px}
  .project [grid-row]{margin:0;padding:0}
  /* 手機版每一欄都佔滿整行（原本 x10 這類平均分欄會擠在同一行，導致標題沒有置中） */
  .project [grid-col]{width:100%!important;flex:0 0 100%!important;padding:0}
  /* 手機版所有標題一律置中 */
  .project:not(.info) h1,.project:not(.info) h2{text-align:center}
  .project [grid-col]:empty{display:none}
  .mgal{height:auto!important;padding:0!important;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .mgal .card{position:static;width:auto!important}
}

/* 自動輪播（原 Cargo Slideshow） */
.slideshow{position:relative;width:100%;overflow:hidden;margin-bottom:2.16vw;transition:height var(--speed,500ms) ease}
.slideshow .slides{display:flex;height:100%;transition:transform var(--speed,500ms) ease}
.slideshow .slide{flex:0 0 100%;min-width:0;overflow:hidden;height:100%;display:flex;align-items:center;justify-content:center}
.slideshow .slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.slideshow button{position:absolute;top:0;bottom:0;width:30%;border:0;background:none;color:transparent;font-size:24px;cursor:pointer}
.slideshow .prev{left:0;cursor:w-resize}.slideshow .next{right:0;cursor:e-resize}

/* 格狀排列（原 Cargo Grid） */
.cgrid{display:grid}
.cgrid img{display:block}

/* 圖片跑馬燈（原 Cargo Marquee）：同一張圖重複兩次，無縫往右捲動 */
.img-marquee{overflow:hidden;white-space:pre;margin:-.405vw 0}
.img-marquee .track{white-space:nowrap;animation:img-marquee var(--dur,1.6s) linear infinite}
.img-marquee .track img{width:100%!important;vertical-align:bottom}
@keyframes img-marquee{from{transform:translateX(-100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.img-marquee .track{animation:none}}

/* 標題不在單字中間斷行（例如 PETPAR/K），只在空格處換行 */
.project h1,.project h2{overflow-wrap:normal;word-break:keep-all}

/* 圖片與上下文字之間留一點距離，避免文字黏在圖片上（輪播、格狀、自由排版、圖片跑馬燈不受影響） */
.project img:not(.slideshow img):not(.cgrid img):not(.mgal img):not(.img-marquee img){margin-block:8px}

/* 標題放在窄欄（例如 GOLOMICI、JING REPUBLIC）時，平板寬度下自動縮小，避免超出欄位 */
.project [grid-col]:has(h1){container-type:inline-size}
.project [grid-col] h1{font-size:min(clamp(44px,7.8vw,80px),19cqi)}
@media (max-width:700px){.project [grid-col] h1{font-size:44px}}

/* 內文行距加寬，閱讀較舒適（標題維持原本行距） */
.project{line-height:1.8}
.project sub,.project sup{line-height:inherit}
.project small{line-height:1.6}