@charset "UTF-8";
/* ===========================================================
 * 貴人文化工作室 作品集網站 — 設計稿樣式
 * 2026-09-07 達帛利設計顧問
 * 定調：紙本印刷品的秩序 ＋ 台灣在地插畫的溫度
 * 命名：全站前綴 gr-（guiren），BEM 式 block__element--modifier
 * 接 WordPress／Bricks 時：token 在 :root，元件各自獨立，可逐塊搬
 * =========================================================== */

/* ---------- 1. Token ---------- */
:root{
  /* 色 —— 四層：紙／字／線／強調（強調只有一支） */
  --gr-paper:   #FCFCFC;   /* 全站底（原 #FBF9F5 暖米白＝AI 預設審美，改中性） */
  --gr-tint:    #F2F2F0;   /* 分區底、圖片襯底 */
  --gr-white:   #FFFFFF;
  --gr-ink:     #1A1A1A;   /* 主字 17.4:1 */
  --gr-ink-2:   #4A4A4A;   /* 次字 8.9:1 */
  --gr-muted:   #6B6B6B;   /* 弱字 5.3:1 */
  --gr-line:    #E4E4E2;   /* 髮絲線 */
  --gr-line-2:  #D0D0CE;   /* 深一階的線 */
  --gr-accent:  #3F4F7F;   /* 取自作品的藍（53 張圖分析，對白 7.97:1；白字在其上 7.97:1） */
  --gr-accent-d:#333F66;   /* hover */

  /* 字級 —— 8 階，手機值。桌機在 media query 覆寫本區塊，不逐元件改 */
  --gr-fs-900: 34px;  /* display：首頁大標、OG 姓名 */
  --gr-fs-800: 26px;  /* h1 */
  --gr-fs-700: 21px;  /* h2 */
  --gr-fs-600: 17px;  /* h3 */
  --gr-fs-500: 16px;  /* 正文 */
  --gr-fs-400: 14.5px;/* 小字 */
  --gr-fs-300: 13px;  /* caption／meta */
  --gr-fs-200: 11.5px;/* 全大寫 eyebrow */

  /* 間距 */
  --gr-s1: 4px;  --gr-s2: 8px;  --gr-s3: 12px; --gr-s4: 16px;
  --gr-s5: 24px; --gr-s6: 32px; --gr-s7: 48px; --gr-s8: 64px; --gr-s9: 96px;

  /* 版心 */
  --gr-wrap: 1080px;
  --gr-wrap-narrow: 720px;
  --gr-gutter: 20px;

  --gr-ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   父主題 Bricks 的 .brx-body 設了 display:flex 卻沒給 flex-direction，
   會讓 header / main / footer 橫向並排並各自收縮（實測桌機被壓到 578px）。
   這裡改成直向，順便讓 footer 貼底。
   -------------------------------------------------------------------------- */
body.gr-body{display:flex;flex-direction:column;min-height:100vh;max-width:none;width:auto}
body.gr-body > main{flex:1 0 auto}



@media (min-width: 1024px){
  :root{
    --gr-fs-900: 60px;
    --gr-fs-800: 38px;
    --gr-fs-700: 26px;
    --gr-fs-600: 19px;
    --gr-fs-500: 17px;
    --gr-fs-400: 15px;
    --gr-fs-300: 13.5px;
    --gr-fs-200: 12px;
    --gr-gutter: 40px;
  }
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--gr-paper);
  color:var(--gr-ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:var(--gr-fs-500);
  font-weight:400;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit}

/* 鍵盤焦點：拿掉預設 outline 一定要補回來 */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gr-accent);
  outline-offset:3px;
}

/* ---------- 3. 排版基元 ---------- */
.gr-wrap{max-width:var(--gr-wrap);margin-inline:auto;padding-inline:var(--gr-gutter)}
.gr-wrap--narrow{max-width:var(--gr-wrap-narrow)}

.gr-section{padding-block:var(--gr-s7)}
.gr-band{background:var(--gr-tint)}

.gr-eyebrow{
  font-size:var(--gr-fs-200);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gr-muted);
  line-height:1.5;
}
.gr-eyebrow--cjk{letter-spacing:.14em;text-transform:none}

.gr-h1{font-size:var(--gr-fs-800);font-weight:700;line-height:1.3;letter-spacing:-.01em}
.gr-h2{font-size:var(--gr-fs-700);font-weight:700;line-height:1.35;letter-spacing:-.01em}
.gr-lead{font-size:var(--gr-fs-500);color:var(--gr-ink-2);max-width:34em}
.gr-body{color:var(--gr-ink-2);max-width:34em}
.gr-body + .gr-body{margin-top:var(--gr-s4)}
.gr-small{font-size:var(--gr-fs-400);color:var(--gr-muted);letter-spacing:.01em}
.gr-cap{font-size:var(--gr-fs-300);color:var(--gr-muted);letter-spacing:.02em;line-height:1.6}


/* 待填標記：設計稿專用，上線前移除 */
.gr-todo{
  border-bottom:1px dashed var(--gr-accent);
  color:var(--gr-accent);
}
.gr-todo-note{
  display:block;
  font-size:var(--gr-fs-300);
  color:var(--gr-accent);
  letter-spacing:.02em;
  margin-top:var(--gr-s2);
}

/* ---------- 4. 區塊標題 ---------- */
.gr-sechead{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--gr-s4);
  padding-bottom:var(--gr-s3);
  border-bottom:1px solid var(--gr-line);
  margin-bottom:var(--gr-s5);
}
.gr-sechead__t{font-size:var(--gr-fs-700);font-weight:700;letter-spacing:-.01em;line-height:1.3}
.gr-sechead__more{
  font-size:var(--gr-fs-400);color:var(--gr-muted);
  text-decoration:none;white-space:nowrap;letter-spacing:.02em;
  border-bottom:1px solid var(--gr-line-2);padding-bottom:1px;
}
.gr-sechead__more:hover{color:var(--gr-ink);border-bottom-color:var(--gr-ink)}

/* ---------- 5. 按鈕 ---------- */
.gr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--gr-s2);
  min-height:48px;padding:0 var(--gr-s5);
  font-size:var(--gr-fs-400);font-weight:500;letter-spacing:.02em;
  text-decoration:none;border:1px solid transparent;border-radius:2px;
  transition:background .2s var(--gr-ease),color .2s var(--gr-ease),border-color .2s var(--gr-ease);
}
.gr-btn--primary{background:var(--gr-accent);color:var(--gr-white)}
.gr-btn--primary:hover{background:var(--gr-accent-d)}
.gr-btn--ghost{border-color:var(--gr-line-2);color:var(--gr-ink);background:transparent}
.gr-btn--ghost:hover{border-color:var(--gr-ink);background:var(--gr-white)}
.gr-btn__ico{width:18px;height:18px;flex:none}

.gr-btnrow{display:flex;flex-wrap:wrap;gap:var(--gr-s3)}

/* ---------- 6. Header ---------- */
.gr-head{
  border-bottom:1px solid var(--gr-line);
  background:var(--gr-paper);
  position:sticky;top:0;z-index:40;
}
.gr-head__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--gr-s4);min-height:60px;
}
.gr-head__brand{display:flex;flex-direction:column;text-decoration:none;line-height:1.25}
.gr-head__name{font-size:var(--gr-fs-600);font-weight:700;letter-spacing:.02em}
.gr-head__role{font-size:var(--gr-fs-300);color:var(--gr-muted);letter-spacing:.06em}
.gr-nav{display:none}
.gr-nav__list{display:flex;align-items:center;gap:var(--gr-s5)}
.gr-nav__link{
  font-size:var(--gr-fs-400);text-decoration:none;color:var(--gr-ink-2);
  letter-spacing:.02em;padding-block:var(--gr-s2);
  border-bottom:1px solid transparent;
}
.gr-nav__link:hover{color:var(--gr-ink);border-bottom-color:var(--gr-ink)}
.gr-nav__link.is-current{color:var(--gr-ink);font-weight:500;border-bottom-color:var(--gr-ink)}

@media (min-width:1024px){
  .gr-head__in{min-height:74px}
  .gr-nav{display:block}
}

/* 手機固定 LINE 條：轉介軌的主要 CTA，全站每一頁都在 */
.gr-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:var(--gr-s3) var(--gr-gutter);
  padding-bottom:calc(var(--gr-s3) + env(safe-area-inset-bottom));
  background:rgba(251,249,245,.94);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--gr-line);
}
.gr-dock .gr-btn{width:100%}
body{padding-bottom:88px}
@media (min-width:1024px){
  .gr-dock{display:none}
  body{padding-bottom:0}
}

/* ---------- 7. 首頁 Hero ---------- */
.gr-hero{padding-top:var(--gr-s6);padding-bottom:var(--gr-s6)}
.gr-hero__name{
  font-size:var(--gr-fs-900);font-weight:700;
  line-height:1.15;letter-spacing:-.02em;
  margin-top:var(--gr-s3);
}
.gr-hero__tag{
  font-size:var(--gr-fs-600);font-weight:400;color:var(--gr-ink-2);
  margin-top:var(--gr-s3);max-width:22em;line-height:1.6;
}
.gr-hero__btns{margin-top:var(--gr-s5)}
.gr-hero__btns .gr-btn{flex:1 1 auto;min-width:140px}

.gr-facts{
  margin-top:var(--gr-s5);
  border-top:1px solid var(--gr-line);
}
.gr-fact{
  display:flex;gap:var(--gr-s4);align-items:baseline;
  padding-block:var(--gr-s3);
  border-bottom:1px solid var(--gr-line);
}
.gr-fact__k{
  flex:none;width:5.5em;
  font-size:var(--gr-fs-300);color:var(--gr-muted);letter-spacing:.08em;
}
.gr-fact__v{font-size:var(--gr-fs-400);color:var(--gr-ink);line-height:1.6}

.gr-hero__plate{margin-top:var(--gr-s6)}
.gr-hero__plate img{width:100%}
.gr-hero__platecap{margin-top:var(--gr-s3)}

@media (min-width:1024px){
  .gr-hero{padding-top:var(--gr-s8);padding-bottom:var(--gr-s8)}
  .gr-hero__in{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:var(--gr-s9);align-items:center;
  }
  .gr-hero__plate{margin-top:0}
  .gr-hero__tag{font-size:var(--gr-fs-700);font-weight:400}
}

/* ---------- 8. 服務線（帳冊式列，不是卡片格） ---------- */
.gr-svc{border-top:1px solid var(--gr-line)}
.gr-svc__row{
  display:block;text-decoration:none;
  padding-block:var(--gr-s4);
  border-bottom:1px solid var(--gr-line);
  transition:background .2s var(--gr-ease);
}
.gr-svc__row:hover{background:var(--gr-white)}
.gr-svc__top{display:flex;align-items:baseline;gap:var(--gr-s3)}
.gr-svc__name{font-size:var(--gr-fs-600);font-weight:500;color:var(--gr-ink);flex:1 1 auto}
.gr-svc__arrow{flex:none;color:var(--gr-muted);font-size:var(--gr-fs-400)}
.gr-svc__row:hover .gr-svc__arrow{color:var(--gr-accent)}
.gr-svc__desc{
  display:block;margin-top:var(--gr-s1);
  font-size:var(--gr-fs-400);color:var(--gr-muted);line-height:1.7;
  max-width:40em;
}

/* ---------- 9. 作品格 ---------- */
.gr-works{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--gr-s6) var(--gr-s5);
}
@media (min-width:768px){
  .gr-works{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gr-s7) var(--gr-s6)}
}

.gr-work{display:block;text-decoration:none}
.gr-work__frame{
  aspect-ratio:4/3;
  background:var(--gr-tint);
  border:1px solid var(--gr-line);
  display:grid;place-items:center;
  overflow:hidden;
  padding:var(--gr-s3);
  transition:border-color .25s var(--gr-ease);
}
.gr-work__frame img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;
  transition:opacity .25s var(--gr-ease);
}
.gr-work:hover .gr-work__frame{border-color:var(--gr-line-2)}
.gr-work:hover .gr-work__frame img{opacity:.88}
.gr-work__body{margin-top:var(--gr-s3)}
.gr-work__title{
  font-size:var(--gr-fs-600);font-weight:500;color:var(--gr-ink);
  line-height:1.5;
}
.gr-work:hover .gr-work__title{text-decoration:underline;text-underline-offset:4px}
.gr-work__meta{
  margin-top:var(--gr-s1);
  font-size:var(--gr-fs-300);color:var(--gr-muted);letter-spacing:.03em;
}
.gr-work__meta span + span::before{content:"／";margin-inline:.4em;color:var(--gr-line-2)}

/* ---------- 10. 作品列表：類型篩選 ---------- */
.gr-filter{
  display:flex;flex-wrap:wrap;gap:var(--gr-s2) var(--gr-s4);
  padding-bottom:var(--gr-s4);
  border-bottom:1px solid var(--gr-line);
  margin-bottom:var(--gr-s6);
}
.gr-filter__item{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--gr-fs-400);text-decoration:none;color:var(--gr-muted);
  letter-spacing:.02em;
  border-bottom:2px solid transparent;
}
.gr-filter__item:hover{color:var(--gr-ink)}
.gr-filter__item.is-current{color:var(--gr-accent);font-weight:500;border-bottom-color:var(--gr-accent)}
.gr-filter__count{font-size:var(--gr-fs-300);color:var(--gr-muted);margin-left:.35em}

/* ---------- 11. 作品單頁 ---------- */
.gr-wsingle{padding-top:var(--gr-s6)}
.gr-back{
  display:inline-block;font-size:var(--gr-fs-300);color:var(--gr-muted);
  text-decoration:none;letter-spacing:.04em;margin-bottom:var(--gr-s4);
}
.gr-back:hover{color:var(--gr-ink)}
.gr-wsingle__title{font-size:var(--gr-fs-800);font-weight:700;line-height:1.3;letter-spacing:-.01em}

/* meta 用 dl：欄位留空時整組不輸出，不會破版 */
.gr-wmeta{
  margin-top:var(--gr-s5);
  border-top:1px solid var(--gr-line);
  display:grid;grid-template-columns:minmax(0,1fr);
}
.gr-wmeta__item{
  display:flex;gap:var(--gr-s4);align-items:baseline;
  padding-block:var(--gr-s3);
  border-bottom:1px solid var(--gr-line);
}
.gr-wmeta__k{
  flex:none;width:5.5em;margin:0;
  font-size:var(--gr-fs-300);color:var(--gr-muted);letter-spacing:.08em;
}
.gr-wmeta__v{margin:0;font-size:var(--gr-fs-400);color:var(--gr-ink);line-height:1.7}
@media (min-width:768px){
  .gr-wmeta{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gr-s6)}
}

.gr-brief{margin-top:var(--gr-s6)}
.gr-brief__blk + .gr-brief__blk{margin-top:var(--gr-s5)}
.gr-brief__k{
  font-size:var(--gr-fs-200);font-weight:500;letter-spacing:.14em;
  color:var(--gr-muted);display:block;margin-bottom:var(--gr-s2);
}

/* 圖版流：唯一讓作品占滿的地方 */
.gr-plates{margin-top:var(--gr-s7)}
.gr-plate + .gr-plate{margin-top:var(--gr-s6)}
.gr-plate img{width:100%;background:var(--gr-tint)}
.gr-plate figcaption{margin-top:var(--gr-s2)}
.gr-plates--duo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gr-s5)}
@media (min-width:768px){
  .gr-plates--duo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gr-plates--duo .gr-plate + .gr-plate{margin-top:0}
}

.gr-pager{
  display:flex;justify-content:space-between;gap:var(--gr-s4);
  border-top:1px solid var(--gr-line);
  margin-top:var(--gr-s7);padding-top:var(--gr-s4);
}
.gr-pager__link{
  text-decoration:none;font-size:var(--gr-fs-400);color:var(--gr-ink-2);
  max-width:45%;line-height:1.5;
}
.gr-pager__link:hover{color:var(--gr-ink)}
.gr-pager__k{display:block;font-size:var(--gr-fs-300);color:var(--gr-muted);letter-spacing:.06em}
.gr-pager__link--next{text-align:right}

/* ---------- 12. 委託資訊（帳冊式定義列） ---------- */
.gr-terms{border-top:1px solid var(--gr-line)}
.gr-term{
  padding-block:var(--gr-s4);
  border-bottom:1px solid var(--gr-line);
}
.gr-term__k{font-size:var(--gr-fs-600);font-weight:500;line-height:1.5}
.gr-term__v{margin-top:var(--gr-s2);font-size:var(--gr-fs-400);color:var(--gr-ink-2);line-height:1.8;max-width:38em}
@media (min-width:768px){
  .gr-term{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr);gap:var(--gr-s5);align-items:baseline}
  .gr-term__v{margin-top:0}
}

/* ---------- 13. 流程（編號縱列） ---------- */
.gr-steps{border-top:1px solid var(--gr-line)}
.gr-step{
  display:flex;gap:var(--gr-s4);
  padding-block:var(--gr-s4);
  border-bottom:1px solid var(--gr-line);
}
.gr-step__no{
  flex:none;width:2.6em;
  font-size:var(--gr-fs-300);color:var(--gr-muted);letter-spacing:.08em;
  padding-top:.35em;
}
.gr-step__b{min-width:0}
.gr-step__k{font-size:var(--gr-fs-600);font-weight:500;line-height:1.5}
.gr-step__v{margin-top:var(--gr-s1);font-size:var(--gr-fs-400);color:var(--gr-muted);line-height:1.75}

/* ---------- 14. FAQ ---------- */
.gr-faq{border-top:1px solid var(--gr-line)}
.gr-faq__item{padding-block:var(--gr-s4);border-bottom:1px solid var(--gr-line)}
.gr-faq__q{font-size:var(--gr-fs-600);font-weight:500;line-height:1.6}
.gr-faq__a{margin-top:var(--gr-s2);font-size:var(--gr-fs-400);color:var(--gr-ink-2);line-height:1.8;max-width:38em}

/* ---------- 15. CTA 區 ---------- */
.gr-cta{border-top:1px solid var(--gr-line);border-bottom:1px solid var(--gr-line)}
.gr-cta__in{padding-block:var(--gr-s7)}
.gr-cta__t{font-size:var(--gr-fs-700);font-weight:700;letter-spacing:-.01em;line-height:1.4}
.gr-cta__d{margin-top:var(--gr-s3);font-size:var(--gr-fs-400);color:var(--gr-ink-2);max-width:32em;line-height:1.8}
.gr-cta__btns{margin-top:var(--gr-s5)}

/* ---------- 16. Footer ---------- */
.gr-foot{padding-block:var(--gr-s7) var(--gr-s6)}
.gr-foot__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gr-s5)}
@media (min-width:768px){
  .gr-foot__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}
}
.gr-foot__name{font-size:var(--gr-fs-600);font-weight:700;letter-spacing:.02em}
.gr-foot__k{
  font-size:var(--gr-fs-200);font-weight:500;letter-spacing:.14em;
  color:var(--gr-muted);display:block;margin-bottom:var(--gr-s2);
}
.gr-foot__list li{font-size:var(--gr-fs-400);color:var(--gr-ink-2);line-height:2}
.gr-foot__list a{text-decoration:none}
.gr-foot__list a:hover{text-decoration:underline;text-underline-offset:3px}
.gr-foot__base{
  margin-top:var(--gr-s6);padding-top:var(--gr-s4);
  border-top:1px solid var(--gr-line);
  font-size:var(--gr-fs-300);color:var(--gr-muted);letter-spacing:.02em;
}

/* ---------- 17. 動態偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- 18. OG 分享卡（1200×630） ---------- */
.og-body{
  margin:0;padding:0;background:#8d8d8d;
  display:grid;place-items:center;min-height:100vh;
}
.og{
  width:1200px;height:630px;flex:none;
  background:var(--gr-paper);
  display:grid;grid-template-columns:640px 560px;
  overflow:hidden;position:relative;
}
.og__l{
  padding:64px 56px;
  display:flex;flex-direction:column;justify-content:center;
  border-right:1px solid var(--gr-line);
}
.og__eyebrow{
  font-size:22px;font-weight:500;letter-spacing:.22em;
  color:var(--gr-muted);text-transform:uppercase;line-height:1;
}
.og__name{
  font-size:96px;font-weight:700;line-height:1.05;letter-spacing:-.02em;
  margin-top:26px;color:var(--gr-ink);
}
.og__studio{
  font-size:30px;font-weight:500;color:var(--gr-ink-2);
  margin-top:18px;letter-spacing:.04em;
}
.og__tag{
  font-size:27px;color:var(--gr-ink-2);line-height:1.6;margin-top:26px;
}
.og__bar{
  margin-top:38px;padding-top:22px;border-top:2px solid var(--gr-accent);
  font-size:25px;letter-spacing:.06em;color:var(--gr-accent);font-weight:500;
}
.og__r{display:grid;grid-template-rows:1fr 1fr;background:var(--gr-tint)}
.og__cell{overflow:hidden;display:grid;place-items:center;background:var(--gr-tint)}
.og__cell + .og__cell{border-top:1px solid var(--gr-line)}
.og__cell img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 19. 觸控命中區擴大（不改變視覺） ----------
 * 小型文字連結的可見高度只有 21–30px，用 ::after 把可點範圍撐到 44px，
 * 版面與底線位置完全不動。 */
.gr-sechead__more,.gr-back,.gr-foot__list a,.gr-pager__link{position:relative}
.gr-sechead__more::after,.gr-back::after,.gr-foot__list a::after,.gr-pager__link::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px;
}
/* --------------------------------------------------------------------------
   dz-anim 的逐字進場只對 `.dz-hero .dz-stagger` 觸發（dz-anim.js L135），
   本站用的是自己的 .gr-hero，字被拆成 .dz-ch 後永遠等不到 .in，
   結果是標題整片透明。首屏內容不該依賴 JS 才可見，直接讓它顯示。
   捲動淡入（.dz-reveal）走 IntersectionObserver，不受影響，保留。
   -------------------------------------------------------------------------- */
.dz-stagger .dz-ch{opacity:1;transform:none}

/* 跳過導覽連結：僅鍵盤 focus 時出現 */
.gr-skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;
  background:var(--gr-ink,#1a1a1a);color:#fff;text-decoration:none;font-size:14px}
.gr-skip:focus{left:0}