/* =========================================================
   Chao Visuals — 主樣式
   暗色沉浸攝影作品集主題
   ========================================================= */
:root{
  --bg:#0b0b0d;         /* 近黑主背景 */
  --bg-soft:#141418;    /* 卡片 / 區塊 */
  --ink:#f4f4f2;        /* 主要文字 */
  --muted:#8a8a92;      /* 次要文字 */
  --line:rgba(255,255,255,.08);
  --accent:#c9a35b;     /* 沉穩金點綴 */
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:5vw;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Helvetica Neue","PingFang TC","Noto Sans TC",system-ui,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:300;letter-spacing:-.01em;margin:0}
b{font-weight:600}

@media (hover:hover) and (pointer:fine){
  body,a,button,.tile{cursor:none}
}

/* ---------- 自訂游標 ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:difference}
.cursor-dot{width:6px;height:6px;background:#fff}
.cursor-ring{width:38px;height:38px;border:1px solid rgba(255,255,255,.6);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease)}
.cursor-ring.hover{width:64px;height:64px;background:rgba(255,255,255,.12);border-color:transparent}
@media (hover:none){.cursor-dot,.cursor-ring{display:none}}

/* ---------- 導覽列 ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px var(--pad);display:flex;justify-content:space-between;align-items:center;
  transition:background .4s var(--ease),padding .4s var(--ease),backdrop-filter .4s}
/* 頂部漸層 scrim：讓導覽列文字在「淺色 hero 圖」上也永遠清楚可讀；捲動出現實心底時淡出 */
.site-header::before{content:"";position:absolute;left:0;right:0;top:0;height:130px;z-index:-1;
  pointer-events:none;background:linear-gradient(180deg,rgba(6,6,8,.62),rgba(6,6,8,0));
  opacity:1;transition:opacity .4s var(--ease)}
.site-header.scrolled::before{opacity:0}
.site-header.scrolled{background:rgba(11,11,13,.72);backdrop-filter:blur(14px);
  padding:14px var(--pad);border-bottom:1px solid var(--line)}
.logo{font-weight:600;letter-spacing:.18em;font-size:15px;color:var(--ink);
  text-shadow:0 1px 14px rgba(0,0,0,.5)}
.logo span{color:var(--accent)}
.nav-list{display:flex;gap:34px;list-style:none;margin:0;padding:0;
  font-size:13px;letter-spacing:.12em}
.nav-list a{color:rgba(244,244,242,.86);position:relative;transition:color .3s;
  text-shadow:0 1px 12px rgba(0,0,0,.45)}
.nav-list a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;
  background:var(--accent);transition:width .35s var(--ease)}
.nav-list a:hover{color:var(--ink)}
.nav-list a:hover::after{width:100%}
.nav-toggle{display:none;background:none;border:none;flex-direction:column;gap:5px;padding:6px;
  position:relative;z-index:110}  /* z-index 高於展開遮罩(90)，X 關閉鈕才點得到 */
.nav-toggle span{width:24px;height:1.5px;background:var(--ink);transition:.3s}

@media(max-width:760px){
  .nav-toggle{display:flex}
  .primary-nav{position:fixed;inset:0;background:rgba(11,11,13,.97);backdrop-filter:blur(10px);
    display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity .4s var(--ease),visibility .4s;z-index:90}
  .nav-open .primary-nav{opacity:1;pointer-events:auto;visibility:visible}
  .nav-list{flex-direction:column;gap:28px;text-align:center;font-size:20px}
  .nav-open .nav-toggle span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .nav-open .nav-toggle span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
}

/* ---------- Hero ---------- */
.hero{height:100vh;height:100svh;position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;text-align:center;background:#000}
.hero-bg{position:absolute;inset:-12% 0;z-index:0;will-change:transform}
.hero-canvas{width:100%;height:100%;display:block}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 42%,transparent 42%,#000 100%)}
/* 標題移到鏡頭下方，不遮擋背景動畫 */
.hero-inner{position:absolute;left:0;right:0;bottom:15vh;z-index:2;padding:0 6vw;text-align:center}
@media(max-width:640px){
  /* 手機：改用底部自然堆疊（非絕對定位），SCROLL 永遠在標題下方、不再重疊；
     動畫置於上半部，標題落在下半部、不遮擋背景 */
  .hero{flex-direction:column;justify-content:flex-end;align-items:stretch}
  .hero-inner{position:static;bottom:auto;left:auto;right:auto;padding:0 8vw;margin:0 0 6vh;text-align:center}
  .hero-inner .eyebrow{margin-bottom:10px;font-size:11px;letter-spacing:.32em}
  .hero-inner h1{line-height:1.08}
  .hero-inner p{font-size:13.5px;margin-top:10px;max-width:86vw}
  .scroll-cue{position:static;left:auto;transform:none;margin:0 auto calc(18px + env(safe-area-inset-bottom))}
  .scroll-cue::after{height:26px}
}
.eyebrow{font-size:12px;letter-spacing:.4em;color:var(--accent);text-transform:uppercase}
.hero-inner .eyebrow{margin-bottom:26px;display:block;opacity:0;transform:translateY(20px)}
.hero-inner h1{font-family:"Jost","Helvetica Neue","PingFang TC","Noto Sans TC",system-ui,sans-serif;
  font-size:clamp(1.9rem,4.6vw,3.5rem);font-weight:300;letter-spacing:.05em;line-height:1.14;
  opacity:0;transform:translateY(28px)}
.hero-inner h1 b{font-style:italic;font-weight:400}
.hero-inner p{margin:24px auto 0;color:var(--muted);max-width:460px;font-size:15px;
  opacity:0;transform:translateY(20px)}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:11px;letter-spacing:.3em;color:var(--muted);display:flex;flex-direction:column;
  align-items:center;gap:10px}
.scroll-cue::after{content:"";width:1px;height:46px;background:linear-gradient(var(--accent),transparent);
  animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero.in .eyebrow{opacity:1;transform:none;transition:.9s var(--ease) .1s}
.hero.in h1{opacity:1;transform:none;transition:1s var(--ease) .25s}
.hero.in p{opacity:1;transform:none;transition:.9s var(--ease) .5s}

/* ---------- 區塊通用 ---------- */
section{padding:12vh var(--pad)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:20px;margin-bottom:48px}
.sec-head h2{font-size:clamp(1.8rem,4vw,3rem)}
.sec-head p{color:var(--muted);font-size:14px;max-width:340px}
.ghost-btn{border:1px solid var(--line);padding:11px 24px;border-radius:100px;
  font-size:13px;letter-spacing:.05em;color:var(--muted);transition:.3s var(--ease)}
.ghost-btn:hover{color:var(--ink);border-color:rgba(255,255,255,.35)}
.chao-noimg{width:100%;padding-top:66%;background:
  linear-gradient(135deg,#17171c,#0e0e12)}
.empty-hint{color:var(--muted);font-size:14px;padding:40px 0}

/* ---------- 三大系列 ---------- */
.series-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.series-card{position:relative;overflow:hidden;border-radius:4px;background:var(--bg-soft);
  opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.series-card.reveal{opacity:1;transform:none}
.series-img{aspect-ratio:3/4;overflow:hidden}
.series-img img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.2) brightness(.8);transition:transform .9s var(--ease),filter .6s}
.series-card:hover .series-img img{transform:scale(1.06);filter:grayscale(0) brightness(1)}
.series-cap{position:absolute;left:0;right:0;bottom:0;padding:24px;
  background:linear-gradient(transparent,rgba(0,0,0,.8))}
.series-name{display:block;font-size:20px;letter-spacing:.1em}
.series-sub{display:block;color:var(--muted);font-size:13px;margin-top:4px}
@media(max-width:760px){.series-grid{grid-template-columns:1fr}}

/* ---------- 作品網格（統一比例，整齊一致） ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.tile{position:relative;display:block;overflow:hidden;aspect-ratio:1/1;   /* 統一正方形，改 4/5 或 3/2 可換比例 */
  border-radius:4px;background:var(--bg-soft);opacity:0;transform:translateY(40px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.tile.reveal{opacity:1;transform:none}
.tile.hide{display:none}
.journal-card.hide{display:none}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .6s;
  filter:grayscale(.15) brightness(.92)}
.tile:hover img{transform:scale(1.06);filter:grayscale(0) brightness(1)}
.tile .meta{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px;background:linear-gradient(transparent 45%,rgba(0,0,0,.75));
  opacity:0;transition:opacity .5s var(--ease)}
.tile:hover .meta{opacity:1}
.tile .meta .cat{font-size:11px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase}
.tile .meta .ttl{font-size:18px;margin-top:4px}

/* ---------- 篩選列 ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.filters button{background:transparent;border:1px solid var(--line);color:var(--muted);
  padding:9px 20px;border-radius:100px;font-size:13px;letter-spacing:.05em;transition:.3s var(--ease)}
.filters button:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.filters button.active{background:var(--accent);color:#111;border-color:var(--accent)}

/* ---------- 燈箱 ---------- */
.lb{position:fixed;inset:0;z-index:1000;background:rgba(6,6,8,.96);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease)}
.lb.open{opacity:1;pointer-events:auto}
.lb-img-wrap{max-width:86vw;max-height:82vh;position:relative;margin:0}
.lb-img-wrap img{max-width:86vw;max-height:82vh;width:auto;height:auto;border-radius:3px;
  transform:scale(.96);transition:transform .5s var(--ease)}
.lb.open .lb-img-wrap img{transform:scale(1)}
.lb-cap{position:absolute;bottom:-40px;left:0;font-size:13px;color:var(--muted)}
.lb-cap b{color:var(--ink);font-weight:500}
.lb-close{position:absolute;top:26px;right:34px;font-size:30px;color:var(--ink);
  background:none;border:none;line-height:1;opacity:.8;transition:.3s}
.lb-close:hover{opacity:1;transform:rotate(90deg)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:34px;color:var(--ink);
  background:none;border:none;padding:20px;opacity:.5;transition:.3s}
.lb-nav:hover{opacity:1}
.lb-prev{left:2vw}.lb-next{right:2vw}
.lb-count{position:absolute;top:30px;left:34px;font-size:13px;letter-spacing:.2em;color:var(--muted)}

/* ---------- 單一作品 / 頁面 hero ---------- */
.sw-hero{height:70vh;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.sw-hero-bg{position:absolute;inset:-10% 0;z-index:0;will-change:transform}
.sw-hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.sw-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(transparent 40%,var(--bg))}
.sw-hero-inner{position:relative;z-index:2;padding:0 var(--pad) 8vh}
.sw-hero-inner .eyebrow{display:block;margin-bottom:14px}
.sw-hero-inner h1{font-size:clamp(2rem,5vw,4rem)}
.page-body{max-width:820px;margin:0 auto 12vh;padding:0 var(--pad);
  font-size:16px;color:#d8d8d5}
/* 作品介紹：容器加寬到 1100（依 Gleaning the Waves 內嵌圖庫調整）——
   純文字/專案資訊維持易讀寬度並置中，圖庫與照片才放大到滿寬 */
.sw-body{max-width:1100px;margin:0 auto 12vh;padding:0 var(--pad);
  font-size:16px;color:#d8d8d5}
.sw-body > *{max-width:820px;margin-left:auto;margin-right:auto}
.sw-body > .cg,
.sw-body > .wp-block-gallery,
.sw-body > .wp-block-image,
.sw-body > figure{max-width:100%}
.page-body img{border-radius:4px;margin:24px 0}
.sw-body > figure img,.sw-body > p img,.sw-body > .wp-block-image img{border-radius:4px;margin:24px 0}
.sw-body .cg img{margin:0}   /* 圖庫圖片不套段落間距，避免破壞磚牆排版 */

/* ---------- 統一頁面標題（WORKS / SERVICES / ABOUT / CONTACT 一致） ----------
   單一英文大標（置中、全大寫）＋一行說明；各頁一致、不再有兩個標題 */
.page-hero{max-width:1100px;margin:0 auto;padding:24vh var(--pad) 7vh;text-align:center}
.page-hero .page-title{font-size:clamp(2.4rem,6.5vw,4.6rem);font-weight:300;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.05;margin:0}
.page-hero .page-desc{color:var(--muted);max-width:560px;margin:22px auto 0;font-size:15px}
/* 一般頁面內文欄寬一致、置中，避免各頁左右偏移不一 */
.page-body{text-align:left}
.page-body > *{margin-left:auto;margin-right:auto}
.page-head{padding-top:22vh}
/* ---------- 相鄰作品：大圖卡片式上一件／下一件 ---------- */
.sw-adjacent{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:8vh}
.sw-adj{position:relative;min-height:220px;display:flex;overflow:hidden;
  background:#111;text-decoration:none}
.sw-adj-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.4) grayscale(.2);transform:scale(1.02);
  transition:transform .9s var(--ease),filter .6s}
.sw-adj:hover .sw-adj-bg{transform:scale(1.08);filter:brightness(.55) grayscale(0)}
.sw-adj::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.2))}
.sw-adj-next::after{background:linear-gradient(270deg,rgba(0,0,0,.55),rgba(0,0,0,.2))}
.sw-adj-inner{position:relative;z-index:2;margin:auto var(--pad);width:100%;
  display:flex;flex-direction:column;gap:8px}
.sw-adj-next .sw-adj-inner{align-items:flex-end;text-align:right}
.sw-adj-dir{font-size:12px;letter-spacing:.15em;color:var(--accent);text-transform:uppercase}
.sw-adj-title{font-size:clamp(1.1rem,2.4vw,1.7rem);color:var(--ink);font-weight:300}
@media(max-width:720px){.sw-adjacent{grid-template-columns:1fr}
  .sw-adj-next .sw-adj-inner{align-items:flex-start;text-align:left}}

/* ---------- 更多作品縮圖網格 ---------- */
.sw-more{max-width:1200px;margin:12vh auto 0;padding:0 var(--pad)}
.sw-more-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:32px;border-bottom:1px solid var(--line);padding-bottom:18px}
.sw-more-head h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:300;letter-spacing:.04em}
.sw-more-head h2 span{color:var(--muted);font-size:.6em;letter-spacing:.15em;
  text-transform:uppercase;margin-left:8px}
.sw-more-all{color:var(--muted);font-size:13px;letter-spacing:.05em;transition:color .3s;white-space:nowrap}
.sw-more-all:hover{color:var(--ink)}
.sw-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sw-more-item{position:relative;display:block;text-decoration:none;overflow:hidden;border-radius:4px}
.sw-more-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#111}
.sw-more-img img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.15) brightness(.9);transition:transform .8s var(--ease),filter .5s}
.sw-more-item:hover .sw-more-img img{transform:scale(1.06);filter:none}
.sw-more-meta{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;padding:16px;
  background:linear-gradient(transparent 50%,rgba(0,0,0,.72));
  opacity:0;transition:opacity .5s var(--ease)}
.sw-more-item:hover .sw-more-meta{opacity:1}
.sw-more-cat{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.sw-more-title{font-size:16px;color:var(--ink);margin-top:4px}
@media(max-width:900px){.sw-more-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sw-more-grid{grid-template-columns:1fr}}

.sw-nav{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;
  padding:8vh var(--pad);border-top:1px solid var(--line);font-size:14px}
.sw-nav a{color:var(--muted);transition:color .3s}
.sw-nav a:hover{color:var(--ink)}

/* ---------- 文章資訊欄（單篇 Journal） ---------- */
.journal-meta{max-width:820px;margin:0 auto;padding:26px var(--pad);
  display:flex;flex-wrap:wrap;gap:14px 44px;border-bottom:1px solid var(--line)}
.jm-item{display:flex;flex-direction:column;gap:5px}
.jm-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.jm-val{font-size:14px;color:var(--ink)}
.jm-val a{color:var(--ink);border-bottom:1px solid transparent;transition:border-color .3s}
.jm-val a:hover{border-color:var(--accent)}
.journal-tags{max-width:820px;margin:-4vh auto 0;padding:0 var(--pad);
  display:flex;flex-wrap:wrap;gap:12px}
.journal-tags a{font-size:12px;letter-spacing:.03em;color:var(--muted);
  border:1px solid var(--line);border-radius:100px;padding:6px 15px;transition:.3s var(--ease)}
.journal-tags a:hover{color:var(--ink);border-color:var(--accent)}

/* ---------- Journal ---------- */
.journal-list{display:grid;gap:40px;max-width:900px}
.journal-card{display:grid;grid-template-columns:1fr 1.4fr;gap:28px;align-items:center;
  opacity:0;transform:translateY(40px);transition:.8s var(--ease)}
.journal-card.reveal{opacity:1;transform:none}
.jc-media{aspect-ratio:4/3;overflow:hidden;border-radius:4px}
.jc-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.jc-media:hover img{transform:scale(1.05)}
.jc-date{font-size:12px;letter-spacing:.15em;color:var(--accent)}
.jc-body h3{font-size:22px;margin:8px 0 10px}
.jc-body p{color:var(--muted);font-size:14px}
@media(max-width:640px){.journal-card{grid-template-columns:1fr}}

/* ---------- 服務 / 報價 ---------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tier{border:1px solid var(--line);border-radius:6px;padding:38px 30px;background:var(--bg-soft);
  opacity:0;transform:translateY(40px);transition:.8s var(--ease)}
.tier.reveal{opacity:1;transform:none}
.tier.featured{border-color:var(--accent);background:linear-gradient(180deg,rgba(201,163,91,.08),transparent)}
.tier-name{font-size:13px;letter-spacing:.2em;color:var(--accent)}
.tier-sub{display:block;font-size:24px;margin:8px 0 22px;font-weight:300}
.tier ul{list-style:none;padding:0;margin:0 0 28px}
.tier li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;color:#cfcfcc}
@media(max-width:760px){.pricing{grid-template-columns:1fr}}

/* ---------- 服務頁（重構版・中文為主） ---------- */
.services .page-hero{padding-bottom:5vh}
.svc-intro{max-width:760px;margin:0 auto 10vh;padding:0 var(--pad);
  text-align:center;font-size:17px;line-height:1.9;color:#d8d8d5}
.svc-cat{max-width:1000px;margin:0 auto 9vh;padding:0 var(--pad)}
.svc-cat-head{text-align:center;margin-bottom:38px}
.svc-eyebrow{display:block;font-size:12px;letter-spacing:.4em;color:var(--accent);text-transform:uppercase}
.svc-cat-head h2{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:400;margin:14px 0 10px}
.svc-audience{color:var(--muted);font-size:13px;letter-spacing:.03em}
.svc-audience span{display:block;margin-top:4px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.65}
.svc-tiers{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.svc-tier{border:1px solid var(--line);border-radius:8px;padding:34px 30px;background:var(--bg-soft)}
.svc-tier.featured{border-color:var(--accent);background:linear-gradient(180deg,rgba(201,163,91,.08),transparent)}
.svc-tier-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.svc-tier-name{font-size:19px;font-weight:500}
.svc-tier-name em{display:block;font-style:normal;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:3px}
.svc-price{font-size:20px;color:var(--accent);white-space:nowrap}
.svc-price small{font-size:12px;color:var(--muted);margin-left:4px}
.svc-tier-desc{margin:-4px 0 18px;color:var(--muted);font-size:13.5px;line-height:1.75}
.svc-tier ul{list-style:none;padding:0;margin:0}
.svc-tier li{position:relative;padding:9px 0 9px 20px;font-size:14.5px;color:#d4d4d1;
  border-bottom:1px solid rgba(255,255,255,.05)}
.svc-tier li:last-child{border-bottom:0}
.svc-tier li::before{content:"—";position:absolute;left:0;color:var(--accent);opacity:.6}
.svc-addons{max-width:1000px;margin:22px auto 0;padding:14px var(--pad);
  font-size:13px;color:var(--muted);text-align:center;line-height:1.9}
.svc-note{max-width:760px;margin:0 auto;text-align:center;color:#d4d4d1;font-size:16px;line-height:1.9}
.svc-price-line{margin-top:20px;color:var(--accent);font-size:18px}
.svc-price-line small{color:var(--muted);font-size:12px}
@media(max-width:720px){.svc-tiers{grid-template-columns:1fr}}

.svc-block{max-width:860px;margin:0 auto 9vh;padding:0 var(--pad)}
.svc-section-title{text-align:center;font-size:clamp(1.5rem,3vw,2rem);font-weight:400;margin-bottom:44px}
.svc-section-title span{display:block;font-size:12px;letter-spacing:.3em;color:var(--accent);
  text-transform:uppercase;margin-top:8px}
.svc-steps{list-style:none;padding:0;margin:0;display:grid;gap:26px}
.svc-steps li{display:flex;gap:22px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:26px}
.svc-steps li:last-child{border-bottom:0}
.svc-no{font-size:28px;font-weight:300;color:var(--accent);min-width:46px;line-height:1}
.svc-steps strong{font-size:17px;font-weight:500}
.svc-steps strong em{font-style:normal;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-left:10px}
.svc-steps p{margin:8px 0 0;color:var(--muted);font-size:14.5px;line-height:1.8}
.svc-faq{display:grid;gap:24px}
.svc-qa{border-left:2px solid rgba(201,163,91,.4);padding-left:20px}
.svc-qa h3{font-size:16px;font-weight:500;margin:0 0 8px}
.svc-qa p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.8}
.svc-cta{text-align:center;padding:10vh var(--pad) 4vh}
.svc-cta h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:300}
.svc-cta p{color:var(--muted);margin:16px 0 30px}

/* ---------- 聯絡頁（含表單） ---------- */
.contact-wrap{max-width:640px;margin:0 auto;padding:0 var(--pad) 12vh}
.contact-intro{text-align:center;color:#d8d8d5;font-size:16px;line-height:1.9;margin:0 auto 44px;max-width:560px}
.contact-intro strong{color:var(--ink);font-weight:500}
.cf-note{text-align:center;padding:14px 18px;border-radius:6px;font-size:14px;margin-bottom:28px}
.cf-note.ok{background:rgba(201,163,91,.12);border:1px solid rgba(201,163,91,.4);color:#e6d3ab}
.cf-note.err{background:rgba(200,80,80,.1);border:1px solid rgba(200,80,80,.35);color:#e6b3b3}
.cf-note a{color:var(--accent)}
.contact-form{display:grid;gap:20px}
.contact-form label{display:block;font-size:13px;letter-spacing:.03em;color:var(--muted)}
.contact-form label span{color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.15em;font-size:11px;margin-left:6px}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;margin-top:8px;background:var(--bg-soft);border:1px solid var(--line);
  color:var(--ink);border-radius:6px;padding:13px 15px;font-size:15px;font-family:inherit;transition:border-color .3s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent)}
.contact-form textarea{resize:vertical}
.contact-form select{appearance:none;-webkit-appearance:none;cursor:pointer}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-form .ghost-btn{justify-self:start;margin-top:6px;cursor:pointer;background:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-alt{text-align:center;color:var(--muted);font-size:14px;margin-top:34px}
.contact-alt a{color:var(--accent);border-bottom:1px solid rgba(201,163,91,.4);padding-bottom:2px}
@media(max-width:560px){.cf-row{grid-template-columns:1fr}}

/* ---------- 全站互動微效果 ---------- */
.svc-tier{transition:border-color .4s var(--ease),transform .4s var(--ease),background .4s}
.svc-tier:hover{transform:translateY(-4px);border-color:rgba(201,163,91,.5)}
.svc-qa{transition:border-left-color .3s,transform .3s var(--ease)}
.svc-qa:hover{transform:translateX(5px);border-left-color:var(--accent)}
.svc-cta .ghost-btn:hover,.contact-form .ghost-btn:hover{background:var(--accent);color:#111;border-color:var(--accent)}
.footer-social{display:flex;gap:20px;justify-content:center;margin-top:28px}
.footer-social a{color:var(--muted);line-height:0;transition:color .3s var(--ease),transform .3s var(--ease)}
.footer-social a:hover{color:var(--accent);transform:translateY(-3px)}
.jc-meta{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.jc-cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border:1px solid rgba(201,163,91,.35);border-radius:100px;padding:3px 12px;transition:.3s var(--ease)}
.jc-cat:hover{background:var(--accent);color:#111;border-color:var(--accent)}
.jc-read{font-size:11px;letter-spacing:.1em;color:var(--muted)}
.jc-read::before{content:"·";margin-right:12px;color:var(--muted)}
.jc-eyebrow{margin:0 0 14px;font-size:12px;letter-spacing:.28em}
.jc-eyebrow a{color:var(--muted);transition:color .3s var(--ease)}
.jc-eyebrow a:hover{color:var(--accent)}

/* ---------- 頁尾 ---------- */
.site-footer{padding:14vh var(--pad) 8vh;text-align:center;border-top:1px solid var(--line)}
.footer-eyebrow{color:var(--accent);letter-spacing:.4em;font-size:12px;margin-bottom:20px}
.site-footer h3{font-size:clamp(2rem,6vw,4rem)}
.site-footer h3 b{font-style:italic;color:var(--accent)}
.footer-mail{display:inline-block;margin-top:28px;font-size:15px;letter-spacing:.05em;
  border-bottom:1px solid var(--accent);padding-bottom:4px}
.site-footer small{display:block;margin-top:60px;color:var(--muted);font-size:12px;letter-spacing:.08em}
.footer-nav ul{list-style:none;display:flex;gap:24px;justify-content:center;padding:0;margin:34px 0 0;
  font-size:13px;color:var(--muted)}

/* ---------- 分頁 ---------- */
.pager,.navigation{margin-top:60px;text-align:center}
.pager .page-numbers,.navigation .page-numbers{display:inline-block;padding:8px 14px;margin:0 3px;
  color:var(--muted);border:1px solid var(--line);border-radius:4px;font-size:13px;transition:.3s}
.pager .page-numbers.current,.navigation .page-numbers.current{color:#111;background:var(--accent);border-color:var(--accent)}

/* ---------- 捲動淡入通用 ---------- */
.reveal-up{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal-up.reveal{opacity:1;transform:none}

/* ---------- 尊重「減少動態」偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal-up,.tile,.series-card,.journal-card,.tier{opacity:1;transform:none}
}

/* ---------- 無障礙：跳過連結、焦點可見、觸控目標、減動捲動 ---------- */
.skip-link{position:fixed;top:-60px;left:12px;z-index:200;background:var(--accent);color:#111;
  padding:10px 16px;border-radius:6px;font-size:13px;letter-spacing:.05em;transition:top .2s}
.skip-link:focus{top:12px;outline:2px solid #fff;outline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.contact-form input:focus-visible,.contact-form textarea:focus-visible,.contact-form select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* -----------------------------------------------------------
 * 關於頁 ABOUT（page-about.php）
 * --------------------------------------------------------- */
.about-wrap{max-width:960px;margin:0 auto 14vh;padding:0 var(--pad)}
.about-intro{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:clamp(30px,5vw,64px);
  align-items:start;padding-bottom:7vh;border-bottom:1px solid var(--line);margin-bottom:7vh}
.about-photo{margin:0;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:2px}
.about-photo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.about-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(11,11,13,.35))}
.about-intro-text{padding-top:2px}
.about-name{margin-bottom:26px}
.about-name-en{display:block;font-family:"Jost","Helvetica Neue","PingFang TC","Noto Sans TC",system-ui,sans-serif;
  font-weight:300;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:.26em;color:var(--ink);line-height:1.2}
.about-name-zh{display:block;margin-top:12px;font-size:16px;letter-spacing:.32em;color:var(--accent)}
.about-role{display:block;margin-top:14px;font-size:12.5px;letter-spacing:.12em;color:var(--muted)}
.about-lead{font-family:"Jost","PingFang TC","Noto Sans TC",system-ui,sans-serif;
  font-weight:300;font-size:clamp(1.1rem,2.2vw,1.4rem);line-height:1.6;letter-spacing:.03em;
  color:var(--ink);margin:0 0 28px}
.about-bio p{color:#c7c7cd;font-size:15.5px;line-height:2;letter-spacing:.02em;margin:0 0 1.4em}
.about-bio p:last-child{margin-bottom:0}
.about-tl{margin-top:7vh;border-top:1px solid var(--line);padding-top:6vh}
.about-tl-row{display:grid;grid-template-columns:130px 1fr;gap:28px;padding:0 0 4vh}
.about-tl-row:last-child{padding-bottom:0}
.about-tl-year{font-size:13px;letter-spacing:.16em;color:var(--muted);padding-top:4px}
.about-tl-body strong{display:block;font-size:16px;font-weight:500;letter-spacing:.04em;color:var(--ink);margin-bottom:8px}
.about-tl-body strong em{font-style:normal;font-weight:300;color:var(--muted);font-size:13px;margin-left:10px;letter-spacing:.08em}
.about-tl-body p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.9}
.about-cta{margin-top:8vh;padding-top:6vh;border-top:1px solid var(--line);text-align:center}
.about-cta p{color:var(--ink);font-size:15px;line-height:1.8;margin:0 0 26px}
@media(max-width:760px){
  .about-intro{grid-template-columns:1fr;gap:34px;text-align:center}
  .about-photo{max-width:300px;margin:0 auto}
  .about-lead,.about-bio{text-align:left}
}
@media(max-width:640px){
  .about-tl-row{grid-template-columns:1fr;gap:8px}
  .about-tl-year{padding-top:0}
  .about-bio p{font-size:15px;line-height:1.95}
}