/* ============================================================
   白晝工作室 The Craftsman's Studio — concept 02
   紙白 × 墨黑 × 朱紅 ── 雜誌編輯部 × 日系職人事務所
   ============================================================ */
:root{
  --paper:#faf7f2;
  --paper-deep:#f5f0e6;
  --plate:#f3edde;
  --ink:#211c16;
  --ink-2:#5d564b;
  --ink-3:#8a8274;
  --hair:rgba(33,28,22,.16);
  --hair-2:rgba(33,28,22,.34);
  --red:#e2543e;
  --red-deep:#c23e2a;
  --serif:'Noto Serif TC','Songti TC',serif;
  --sans:'Noto Sans TC','PingFang TC',sans-serif;
  --max:1180px;
  --gut:clamp(20px,5vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.9 var(--sans);
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* 紙張顆粒 —— 全頁覆一層極淡的紙紋 */
body::after{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.045'/></feComponentTransfer></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}
/* 版心兩側的裝訂線（雜誌邊界規線） */
.page-rules{position:fixed;inset:0;z-index:0;pointer-events:none}
.page-rules::before,.page-rules::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--hair);
}
.page-rules::before{left:max(12px,2.2vw)}
.page-rules::after{right:max(12px,2.2vw)}
@media(max-width:720px){.page-rules{display:none}}

::selection{background:var(--red);color:var(--paper)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
sup{font-size:.55em}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- 動態顯現基礎 ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease var(--d,0s),transform .9s cubic-bezier(.22,.8,.3,1) var(--d,0s)}
.js .reveal.on{opacity:1;transform:none}
/* row 兼具 hover 背景轉場，須合併宣告以免互相覆蓋 */
.js .row.reveal{transition:opacity .8s ease var(--d,0s),transform .9s cubic-bezier(.22,.8,.3,1) var(--d,0s),background .3s ease}
/* 信任數字帶：子項目交錯浮現 */
.js .stats .stat{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,.8,.3,1)}
.js .stats.on .stat{opacity:1;transform:none}
.js .stats .stat:nth-child(3){transition-delay:.14s}
.js .stats .stat:nth-child(4){transition-delay:.28s}
.js [data-split] .ch{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);transition:opacity .5s ease,transform .65s cubic-bezier(.2,.7,.25,1)}
.js [data-split].on .ch{opacity:1;transform:none}
/* 手繪描邊：所有 pathLength=1 的線條 */
.draw path,.draw line,.draw circle,.draw rect,.draw polyline{
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s cubic-bezier(.5,0,.2,1) .15s;
}
.on .draw path,.on .draw line,.on .draw circle,.on .draw rect,.on .draw polyline,
.draw.on path,.draw.on line,.draw.on circle,.draw.on rect,.draw.on polyline{stroke-dashoffset:0}
.draw path:nth-of-type(2),.draw line:nth-of-type(2){transition-delay:.4s}
.draw path:nth-of-type(3),.draw line:nth-of-type(3){transition-delay:.6s}
.draw path:nth-of-type(4),.draw line:nth-of-type(4){transition-delay:.75s}
.draw path:nth-of-type(5),.draw line:nth-of-type(5){transition-delay:.9s}
.draw path:nth-of-type(6),.draw line:nth-of-type(6){transition-delay:1.05s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js [data-split] .ch,.js .stats .stat{opacity:1!important;transform:none!important;transition:none!important}
  .draw path,.draw line,.draw circle,.draw rect,.draw polyline{stroke-dashoffset:0!important;transition:none!important}
}

/* ---------- 通用元件 ---------- */
.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  font:500 .95rem/1 var(--sans);letter-spacing:.18em;
  padding:1.05rem 2.3rem;border:1px solid var(--ink);
  transition:background .3s,border-color .3s,transform .3s,box-shadow .3s;
}
.btn:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px);box-shadow:0 10px 26px rgba(226,84,62,.28)}
.btn:focus-visible,.tab:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.vtx{ /* 直排文字 */
  writing-mode:vertical-rl;font-family:var(--serif);
  letter-spacing:.42em;color:var(--ink-2);font-size:.85rem;
}
@media(max-width:900px){.vtx{display:none}}

/* 章節標頭 —— 分隔線系統的核心 */
.sec{position:relative;z-index:1;padding-block:clamp(4rem,8vw,6.5rem)}
.sec-rule{position:relative;border-top:1px solid var(--hair-2);margin-bottom:clamp(2.4rem,5vw,4rem)}
.sec-rule::before,.sec-rule::after{
  content:"+";position:absolute;top:-0.72em;font:400 .9rem var(--sans);color:var(--ink-3);
}
.sec-rule::before{left:-2px}
.sec-rule::after{right:-2px}
.sec-head{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.2rem,3vw,2.6rem);
  align-items:end;margin-bottom:clamp(2.8rem,6vw,4.6rem);
}
.sec-no{
  display:grid;place-items:center;width:clamp(56px,7vw,74px);aspect-ratio:1;
  border:1px solid var(--hair-2);font:900 clamp(1.5rem,2.4vw,2rem)/1 var(--serif);
  position:relative;
}
.sec-no::after{content:"";position:absolute;right:-5px;bottom:-5px;width:8px;height:8px;background:var(--red)}
.sec-eyebrow{
  font:500 .72rem/1 var(--sans);letter-spacing:.34em;color:var(--red-deep);
  text-transform:uppercase;margin-bottom:.9rem;
}
.sec-title{font:900 clamp(1.9rem,4.6vw,3.3rem)/1.2 var(--serif);letter-spacing:.06em}
.sec-note{
  font:400 .84rem/1.9 var(--sans);color:var(--ink-2);text-align:right;
  border-right:2px solid var(--red);padding-right:1rem;max-width:250px;
}
@media(max-width:720px){
  .sec-head{grid-template-columns:auto 1fr}
  .sec-note{grid-column:1/-1;text-align:left;border-right:0;border-left:2px solid var(--red);padding:0 0 0 1rem;max-width:none}
}

/* ============================================================
   導覽列
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,242,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
.nav-in{
  max-width:var(--max);margin-inline:auto;padding:0 var(--gut);
  display:flex;align-items:center;gap:2rem;height:72px;
}
.brand{display:flex;align-items:baseline;gap:.7rem}
.brand-zh{font:900 1.25rem/1 var(--serif);letter-spacing:.08em}
.brand-en{font:500 .62rem/1 var(--sans);letter-spacing:.3em;color:var(--ink-2);text-transform:uppercase}
.nav-links{display:flex;gap:2rem;margin-left:auto;align-items:center}
.nav-links a{
  font:500 .88rem/1 var(--sans);letter-spacing:.14em;position:relative;padding-block:.4rem;
}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.nav-links a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
.nav .btn{padding:.7rem 1.4rem;font-size:.8rem}
@media(max-width:860px){.nav-links a:not(.btn){display:none}}
@media(max-width:560px){.brand-en{display:none}.nav-in{height:64px}}

/* ============================================================
   壹之前 —— Hero（雜誌封面：大標壓圖・紙板壓圖・露紙白邊）
   ============================================================ */
.hero{position:relative;z-index:1;padding-top:clamp(1.6rem,4vw,3.2rem)}
.hero-masthead{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  font:500 .7rem/1.6 var(--sans);letter-spacing:.26em;color:var(--ink-2);text-transform:uppercase;
  border-block:1px solid var(--hair-2);padding-block:.7rem;
}
.hero-kicker{
  font:500 .8rem/1.8 var(--sans);letter-spacing:.3em;color:var(--red-deep);
  margin:clamp(2.2rem,5vw,3.6rem) 0 1.3rem;
}
.hero-title{
  position:relative;z-index:2; /* 大標壓在圖之上 */
  font:900 clamp(2rem,6.4vw,4.8rem)/1.3 var(--serif);letter-spacing:.03em;
  max-width:17em;
}
.hero-title .u{position:relative;white-space:nowrap}
.hero-title .u svg{
  position:absolute;left:-3%;bottom:-.1em;width:106%;height:.3em;overflow:visible;pointer-events:none;
}
.hero-title .u svg path{fill:none;stroke:var(--red);stroke-linecap:round}
.hero-title .u svg path:nth-of-type(1){stroke-width:5}
.hero-title .u svg path:nth-of-type(2){stroke-width:2;opacity:.5}
.js .hero-title .u svg path{transition:stroke-dashoffset 1s cubic-bezier(.5,0,.2,1) 1.15s}
/* 封面主視覺 —— 圖不滿版：左露紙白，大標壓圖頂 */
.hero-visual{
  position:relative;z-index:1;
  margin-top:calc(-1 * clamp(1.4rem,3.6vw,3rem)); /* 讓大標最後一行壓進圖的留白 */
  padding-left:clamp(0px,7vw,96px);
}
.hero-visual img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  filter:sepia(.08) saturate(1.02);
}
.hero-visual::after{ /* 相片細框 */
  content:"";position:absolute;inset:0 0 0 clamp(0px,7vw,96px);
  border:1px solid rgba(33,28,22,.28);pointer-events:none;
}
.hero-spine{
  position:absolute;right:clamp(14px,2.5vw,30px);top:clamp(18px,12%,60px);
  background:var(--paper);border:1px solid var(--hair-2);padding:1.2rem .55rem;
  writing-mode:vertical-rl;font:700 .92rem/1 var(--serif);letter-spacing:.5em;
}
.hero-seal{
  position:absolute;left:calc(clamp(0px,7vw,96px) + 18px);bottom:18px;
  width:52px;height:52px;background:var(--red);color:#fff;
  display:grid;place-items:center;transform:rotate(-4deg);
  font:700 .95rem/1.25 var(--serif);writing-mode:vertical-rl;letter-spacing:.18em;
  box-shadow:0 4px 14px rgba(194,62,42,.3);
}
/* 內文紙板 —— 壓在圖右下，露出紙白邊距 */
.hero-deck{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.2rem);
  background:var(--paper);border:1px solid var(--hair-2);
  padding:clamp(1.6rem,3.5vw,2.6rem);
  width:min(880px,93%);
  margin:calc(-1 * clamp(3rem,9vw,6.2rem)) clamp(0px,2.6vw,34px) 0 auto;
  box-shadow:0 18px 44px rgba(33,28,22,.09);
}
.hero-sub{color:var(--ink-2);font-size:1rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:1.3rem;align-items:center;margin-top:1.9rem}
.hero-cta .ghost{
  font:500 .88rem/1 var(--sans);letter-spacing:.16em;color:var(--ink-2);
  border-bottom:1px solid var(--hair-2);padding-bottom:.35rem;transition:color .3s,border-color .3s;
}
.hero-cta .ghost:hover{color:var(--red-deep);border-color:var(--red)}
/* 本期目錄（雜誌 TOC） */
.toc{border-left:1px solid var(--hair);padding-left:clamp(1.4rem,3vw,2.4rem)}
.toc-cap{font:700 .78rem/1 var(--sans);letter-spacing:.34em;color:var(--ink-2);margin-bottom:1rem}
.toc a{
  display:flex;align-items:baseline;gap:.8rem;padding-block:.5rem;
  font:500 .92rem/1.5 var(--serif);border-bottom:1px dotted var(--hair-2);
  transition:color .25s;
}
.toc a:last-child{border-bottom:0}
.toc a:hover{color:var(--red-deep)}
.toc .toc-no{font:700 .72rem/1 var(--sans);color:var(--red-deep)}
.toc .toc-dot{flex:1;border-bottom:1px dotted var(--hair);transform:translateY(-4px)}
.toc .toc-x{font:400 .74rem/1 var(--sans);color:var(--ink-3);letter-spacing:.1em}
.hero-fig{
  display:flex;justify-content:space-between;gap:1rem;
  font:400 .74rem/1.7 var(--sans);color:var(--ink-3);letter-spacing:.08em;
  padding:1rem 0 0 clamp(0px,7vw,96px);
}
@media(max-width:760px){
  .hero-title{max-width:none}
  .hero-visual{margin-top:1.6rem;padding-left:0}
  .hero-visual::after{inset:0}
  .hero-seal{left:auto;right:14px;bottom:14px;width:44px;height:44px;font-size:.8rem}
  .hero-deck{grid-template-columns:1fr;width:100%;margin:1.4rem 0 0;box-shadow:none;padding:1.5rem 1.3rem}
  .toc{border-left:0;border-top:3px double var(--hair-2);padding:1.2rem 0 0}
  .hero-fig{padding-left:0;flex-direction:column;gap:.2rem}
}

/* ============================================================
   數字所示 —— 信任數字帶
   ============================================================ */
.stats{position:relative;z-index:1;border-block:1px solid var(--hair-2);margin-top:clamp(3rem,7vw,5.5rem);background:var(--paper-deep)}
.stats-grid{
  display:grid;grid-template-columns:auto repeat(3,1fr);gap:clamp(1.4rem,4vw,3rem);
  align-items:center;padding-block:clamp(1.8rem,4vw,2.8rem);
}
.stats-label{
  font:700 .95rem/1.7 var(--serif);letter-spacing:.24em;
  border-right:1px solid var(--hair-2);padding-right:clamp(1.4rem,3vw,2.6rem);
}
.stats-label span{display:block;font:500 .6rem/1 var(--sans);letter-spacing:.3em;color:var(--ink-3);margin-top:.4rem}
.stat-num{font:900 clamp(2.4rem,5vw,3.6rem)/1 var(--serif);letter-spacing:.02em}
.stat-num sup,.stat-num .slash{color:var(--red)}
.stat-cap{font:500 .84rem/1.6 var(--sans);color:var(--ink-2);margin-top:.5rem;letter-spacing:.1em}
@media(max-width:820px){
  .stats-grid{grid-template-columns:1fr 1fr;row-gap:2rem}
  .stats-label{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--hair-2);padding:0 0 1rem}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr;row-gap:1.6rem}
}

/* ============================================================
   壹 —— 作品目錄（火力展示・20 件全收錄）
   ============================================================ */
.works-side{ /* 區側直排裝飾 */
  position:absolute;right:calc(var(--gut) * -0.1);top:clamp(9rem,16vw,13rem);
}
/* 分類文字欄目 tab */
.tabs{
  display:flex;flex-wrap:nowrap;gap:clamp(1.3rem,3.4vw,2.8rem);
  border-block:1px solid var(--hair-2);padding-block:.95rem;
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative;flex:0 0 auto;
  font:500 1rem/1 var(--serif);letter-spacing:.14em;color:var(--ink-2);
  padding:.2rem .1rem .55rem;transition:color .3s;
}
.tab sup{font:500 .62rem/1 var(--sans);color:var(--ink-3);margin-left:.25rem}
.tab:hover{color:var(--ink)}
.tab.act{color:var(--ink);font-weight:700}
.tab.act sup{color:var(--red-deep)}
.tab-u{position:absolute;left:0;bottom:0;width:100%;height:7px;overflow:visible}
.tab-u path{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .55s cubic-bezier(.5,0,.2,1)}
.tab.act .tab-u path{stroke-dashoffset:0}
.tab-note{font:400 .78rem/1 var(--sans);color:var(--ink-3);letter-spacing:.12em;margin-top:1rem;text-align:right}

/* 編輯精選 —— 大圖式卡片（不對稱網格） */
.feat-cap{
  display:flex;align-items:center;gap:1rem;margin:clamp(2.6rem,5vw,3.8rem) 0 clamp(1.8rem,4vw,2.6rem);
}
.feat-cap h3{font:700 1.05rem/1 var(--serif);letter-spacing:.3em}
.feat-cap .line{flex:1;border-top:1px solid var(--hair)}
.feat-cap .mark{width:9px;height:9px;background:var(--red);transform:rotate(45deg)}
.feat-grid{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(1.6rem,4vw,3.6rem);row-gap:clamp(2.6rem,5vw,4.2rem);
  align-items:start;
}
.feat.stag{margin-top:clamp(2.2rem,6vw,5rem)}
.feat{display:block;position:relative}
.feat.hide,.row.hide,.hide{display:none!important}
.feat-plate{
  position:relative;background:var(--plate);border:1px solid var(--hair-2);
  aspect-ratio:4/3;overflow:hidden;
  transition:border-color .35s,box-shadow .35s,transform .35s;
}
.feat:hover .feat-plate{border-color:var(--red);box-shadow:0 14px 34px rgba(33,28,22,.1);transform:translateY(-4px)}
.feat-ghost{
  position:absolute;top:-.12em;left:.06em;
  font:900 clamp(5.2rem,10vw,8rem)/1 var(--serif);
  color:transparent;-webkit-text-stroke:1.5px rgba(33,28,22,.22);
  letter-spacing:-.02em;user-select:none;
}
@supports not (-webkit-text-stroke:1px black){
  .feat-ghost{color:rgba(33,28,22,.09)}
}
/* hover 蓋「實戰」朱印 */
.feat-plate::after{
  content:"實戰";position:absolute;right:12px;bottom:12px;
  width:38px;height:38px;background:var(--red);color:#fff;
  display:grid;place-items:center;font:700 .76rem/1.2 var(--serif);
  writing-mode:vertical-rl;letter-spacing:.14em;
  opacity:0;transform:rotate(-8deg) scale(.8);
  transition:opacity .35s ease,transform .4s cubic-bezier(.34,1.56,.64,1);
}
.feat:hover .feat-plate::after{opacity:1;transform:rotate(-4deg) scale(1)}
.feat-vcat{
  position:absolute;top:14px;right:14px;
  writing-mode:vertical-rl;font:700 .8rem/1 var(--serif);letter-spacing:.4em;color:var(--ink-2);
  border-right:1px solid var(--hair-2);padding-right:.5rem;
}
.feat-icon{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:clamp(110px,32%,160px);height:auto;
}
.feat-icon *{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.feat:hover .feat-icon *{stroke:var(--red-deep)}
.feat-fig{
  position:absolute;left:14px;bottom:10px;
  font:400 .68rem/1 var(--sans);letter-spacing:.16em;color:var(--ink-3);
}
.feat-body{padding-top:1.3rem}
.feat-meta{display:flex;justify-content:space-between;gap:1rem;font:500 .72rem/1 var(--sans);letter-spacing:.24em;color:var(--ink-3);text-transform:uppercase}
.feat-meta .no{color:var(--red-deep);font-weight:700}
.feat-name{font:900 clamp(1.4rem,2.6vw,1.9rem)/1.4 var(--serif);margin-top:.8rem;letter-spacing:.04em}
.feat-tagline{font:700 1rem/1.7 var(--serif);color:var(--red-deep);margin-top:.15rem;letter-spacing:.06em}
.feat-pitch{color:var(--ink-2);font-size:.95rem;margin-top:.8rem;max-width:36em}
.feat-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.feat-chips span{
  font:400 .74rem/1 var(--sans);letter-spacing:.08em;color:var(--ink-2);
  border:1px solid var(--hair-2);padding:.42rem .7rem;
  transition:border-color .3s,color .3s;
}
.feat:hover .feat-chips span{border-color:rgba(226,84,62,.5)}
.feat-more{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.25rem;
  font:700 .86rem/1 var(--sans);letter-spacing:.2em;
}
.feat-more i{font-style:normal;transition:transform .3s;color:var(--red-deep)}
.feat:hover .feat-more{color:var(--red-deep)}
.feat:hover .feat-more i{transform:translateX(6px)}
@media(max-width:760px){
  .feat-grid{grid-template-columns:1fr}
  .feat.stag{margin-top:0}
}

/* 全作品索引 —— 目錄式清單 */
.rows{border-top:1px solid var(--hair-2)}
.row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:clamp(1rem,3vw,2.4rem);align-items:center;
  padding:clamp(1.2rem,2.6vw,1.7rem) clamp(.2rem,1vw,.8rem);
  border-bottom:1px solid var(--hair);position:relative;
  transition:background .3s;
}
.row:hover{background:var(--paper-deep)}
.row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.row:hover::before{transform:scaleY(1)}
.row-no{
  font:900 1.05rem/1 var(--serif);color:var(--ink-3);width:2.4em;
  transition:color .3s;
}
.row:hover .row-no{color:var(--red-deep)}
.row>span:nth-child(2){display:block;min-width:0}
.row-name{display:block;font:700 1.12rem/1.6 var(--serif);letter-spacing:.04em}
.row-name em{font:400 .92rem/1.6 var(--sans);font-style:normal;color:var(--ink-2);margin-left:.7em}
.row-pitch{display:block;font:400 .85rem/1.8 var(--sans);color:var(--ink-2);margin-top:.2rem;max-width:44em}
.row-chips{display:block;font:400 .74rem/1.8 var(--sans);color:var(--ink-3);letter-spacing:.06em;margin-top:.15rem}
.row-cat{
  font:500 .72rem/1 var(--sans);letter-spacing:.2em;color:var(--ink-2);
  border:1px solid var(--hair-2);padding:.4rem .7rem;white-space:nowrap;
}
.row-arrow{
  font:400 1.2rem/1 var(--sans);color:var(--ink-3);transition:transform .3s,color .3s;
}
.row:hover .row-arrow{transform:translateX(6px);color:var(--red-deep)}
@media(max-width:720px){
  .row{grid-template-columns:auto minmax(0,1fr) auto;row-gap:.3rem}
  .row-cat{display:none}
  .row-pitch{display:none}
  .row-name em{display:block;margin:0}
}

/* ============================================================
   貳 —— 客戶迴響
   ============================================================ */
.voice-grid{display:grid;grid-template-columns:repeat(12,1fr);row-gap:clamp(2.4rem,5vw,4rem)}
.quote{position:relative;padding:0 0 0 clamp(2.4rem,4vw,3.4rem)}
.quote::before{
  content:"「";position:absolute;left:0;top:-.28em;
  font:900 clamp(2.6rem,5vw,3.6rem)/1 var(--serif);color:var(--red);
}
.quote p{font:700 clamp(1.15rem,2.3vw,1.55rem)/1.9 var(--serif);letter-spacing:.05em}
.quote footer{
  display:flex;align-items:center;gap:.9rem;margin-top:1.3rem;
  font:500 .85rem/1 var(--sans);letter-spacing:.14em;color:var(--ink-2);
}
.quote footer::before{content:"";width:2.2rem;height:1px;background:var(--red)}
.quote footer b{color:var(--ink)}
.q1{grid-column:1/9}
.q2{grid-column:5/13}
.q3{grid-column:2/10}
@media(max-width:820px){.q1,.q2,.q3{grid-column:1/-1}}

/* ============================================================
   參 —— 關於職人
   ============================================================ */
.about-grid{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(2.4rem,6vw,5rem);align-items:start;
}
.portrait{
  position:relative;background:var(--plate);border:1px solid var(--hair-2);
  padding:clamp(1.6rem,3vw,2.4rem);
}
.portrait svg{width:100%;height:auto;display:block}
.portrait svg *{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.portrait-seal{
  position:absolute;right:16px;bottom:16px;width:48px;height:70px;
  background:var(--red);color:#fff;display:grid;place-items:center;
  writing-mode:vertical-rl;font:700 1.05rem/1 var(--serif);letter-spacing:.3em;
  transform:rotate(3deg);box-shadow:0 4px 12px rgba(194,62,42,.3);
}
.portrait-note{
  font:400 .72rem/1.8 var(--sans);color:var(--ink-3);margin-top:1rem;letter-spacing:.06em;
}
.about-name{font:900 clamp(1.5rem,3vw,2.1rem)/1.5 var(--serif);letter-spacing:.05em}
.about-name span{color:var(--red-deep)}
.about-lead{margin-top:1.2rem;color:var(--ink-2);max-width:36em}
.creed{margin-top:2.2rem;border-top:3px double var(--hair-2)}
.creed li{
  list-style:none;display:grid;grid-template-columns:auto 1fr;gap:1.2rem;
  padding:1.15rem .2rem;border-bottom:1px solid var(--hair);
  font:400 .95rem/1.9 var(--sans);color:var(--ink-2);
}
.creed li b{font:900 1.15rem/1.6 var(--serif);color:var(--ink)}
.creed li strong{color:var(--ink);font-weight:700}
.about-more{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;
  font:500 .92rem/1.7 var(--sans);color:var(--ink-2);
  border-bottom:1px solid var(--hair-2);padding-bottom:.25rem;
  transition:color .22s,border-color .22s,gap .22s;
}
.about-more:hover{color:var(--red-deep);border-color:var(--red-deep);gap:.85rem}
.about-more .arw{font-size:.9em}
@media(max-width:820px){.about-grid{grid-template-columns:1fr}.portrait{max-width:380px}}

/* ============================================================
   肆 —— 預約 CTA
   ============================================================ */
.cta-plate{
  position:relative;border:1px solid var(--hair-2);background:var(--paper-deep);
  padding:clamp(3rem,8vw,5.5rem) clamp(1.4rem,5vw,4rem);text-align:center;
}
.cta-plate::before,.cta-plate::after{
  content:"";position:absolute;width:14px;height:14px;border:1px solid var(--hair-2);
}
.cta-plate::before{top:8px;left:8px;border-width:1px 0 0 1px}
.cta-plate::after{bottom:8px;right:8px;border-width:0 1px 1px 0}
.cta-eyebrow{font:500 .74rem/1 var(--sans);letter-spacing:.34em;color:var(--red-deep);margin-bottom:1.4rem}
.cta-title{font:900 clamp(1.7rem,4.4vw,3rem)/1.55 var(--serif);letter-spacing:.05em}
.cta-title .circ{position:relative;white-space:nowrap;padding:0 .1em}
.cta-title .circ svg{
  position:absolute;left:-9%;top:-26%;width:118%;height:152%;overflow:visible;pointer-events:none;
}
.cta-title .circ svg path{
  fill:none;stroke:var(--red);stroke-width:3.5;stroke-linecap:round;
}
.js .cta-title .circ svg path{transition:stroke-dashoffset 1.2s cubic-bezier(.5,0,.2,1) .9s}
.cta-sub{color:var(--ink-2);max-width:34em;margin:1.4rem auto 0;font-size:.98rem}
.cta-plate .btn{margin-top:2.4rem}
.cta-mini{margin-top:1.2rem;font:400 .78rem/1 var(--sans);letter-spacing:.2em;color:var(--ink-3)}

/* ============================================================
   Footer
   ============================================================ */
.footer{border-top:3px double var(--hair-2);position:relative;z-index:1;margin-top:clamp(3rem,7vw,5rem)}
.footer-in{
  max-width:var(--max);margin-inline:auto;padding:2.4rem var(--gut);
  display:flex;flex-wrap:wrap;gap:1.4rem 3rem;align-items:center;justify-content:space-between;
  font:400 .8rem/1.8 var(--sans);color:var(--ink-2);letter-spacing:.1em;
}
.footer-brand{font:900 1.05rem/1 var(--serif);color:var(--ink);letter-spacing:.1em}
.footer-brand span{font:500 .6rem/1 var(--sans);letter-spacing:.28em;color:var(--ink-3);margin-left:.8rem}
.footer-links{display:flex;gap:1.6rem}
.footer-links a:hover{color:var(--red-deep)}

/* ---------- 手機細節（≤560px 收斂） ---------- */
@media(max-width:560px){
  .hero-masthead{font-size:.6rem;letter-spacing:.15em;gap:.3rem 1rem}
  .hero-kicker{letter-spacing:.18em;font-size:.72rem}
  .sec-no{width:48px}
  .quote p{font-size:1.12rem}
  .btn{padding:.95rem 1.7rem;letter-spacing:.12em}
  .feat-name{font-size:1.35rem}
  .tab-note{text-align:left}
}

/* ============================================================
   正式站增補元件（2026-07-12 改版：語言鈕／Hero 價值條／微信任）
   ============================================================ */

/* 語言切換鈕 —— 融入導覽、克制 */
.nav-lang{
  font:500 .8rem/1 var(--sans);letter-spacing:.14em;color:var(--ink-2);
  border:1px solid var(--hair-2);padding:.5rem .8rem;
  transition:color .3s,border-color .3s,background .3s;
}
.nav-lang:hover{color:var(--red-deep);border-color:var(--red)}
@media(max-width:560px){.nav-lang{padding:.42rem .6rem;font-size:.72rem}}

/* Hero 價值條 —— 三個硬成效，襯線數字＋朱紅 */
.hero-values{
  list-style:none;display:flex;flex-wrap:wrap;gap:clamp(1.2rem,3vw,2.4rem);
  margin:1.5rem 0 .3rem;padding-top:1.3rem;border-top:1px solid var(--hair);
}
.hero-values li{display:flex;align-items:baseline;gap:.5rem}
.hero-values b{font:900 clamp(1.3rem,2.6vw,1.7rem)/1 var(--serif);color:var(--red-deep);letter-spacing:.01em}
.hero-values span{font:500 .8rem/1.4 var(--sans);color:var(--ink-2);letter-spacing:.06em}

/* Hero 微信任行 —— 降低預約心理門檻 */
.hero-micro{
  margin-top:1.1rem;font:400 .8rem/1.7 var(--sans);color:var(--ink-3);letter-spacing:.04em;
}
@media(max-width:760px){.hero-values{gap:1rem}.hero-values b{font-size:1.35rem}}

/* ============================================================
   中段行動呼籲（軟 CTA 帶）
   ============================================================ */
.midcta{position:relative;z-index:1;border-block:1px solid var(--hair-2);background:var(--paper-deep)}
.midcta-in{
  display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;align-items:center;justify-content:space-between;
  padding-block:clamp(2rem,4vw,3rem);
}
.midcta-text{font:900 clamp(1.3rem,3vw,2rem)/1.4 var(--serif);letter-spacing:.04em;max-width:20em}
@media(max-width:600px){.midcta-in{flex-direction:column;align-items:flex-start}}

/* ============================================================
   放心找我的理由（風險反轉帶）
   ============================================================ */
.assure{position:relative;z-index:1;padding-block:clamp(3.5rem,7vw,5.5rem)}
.assure-head{margin-bottom:clamp(2rem,4vw,3rem)}
.assure-title{font:900 clamp(1.6rem,3.6vw,2.6rem)/1.3 var(--serif);letter-spacing:.05em;margin-top:.7rem}
.assure-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,3vw,2.4rem);
}
.assure-item{position:relative;padding-top:1.4rem;border-top:2px solid var(--hair-2)}
.assure-item::before{content:"";position:absolute;top:-2px;left:0;width:34px;height:2px;background:var(--red)}
.assure-no{font:700 .74rem/1 var(--sans);letter-spacing:.24em;color:var(--red-deep)}
.assure-item b{display:block;font:900 1.2rem/1.5 var(--serif);letter-spacing:.03em;margin:.7rem 0 .5rem}
.assure-item p{font:400 .9rem/1.85 var(--sans);color:var(--ink-2)}
@media(max-width:820px){.assure-grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:480px){.assure-grid{grid-template-columns:1fr}}

/* ============================================================
   FAQ（原生 details 手風琴）
   ============================================================ */
.faq-list{border-top:1px solid var(--hair-2)}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-item summary{
  list-style:none;cursor:pointer;position:relative;
  display:flex;align-items:center;gap:1rem;
  padding:clamp(1.1rem,2.4vw,1.6rem) 2.4rem clamp(1.1rem,2.4vw,1.6rem) 0;
  font:700 clamp(1.02rem,1.8vw,1.22rem)/1.6 var(--serif);letter-spacing:.03em;
  transition:color .3s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);
  font:400 1.5rem/1 var(--sans);color:var(--red-deep);transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(135deg)}
.faq-item summary:hover{color:var(--red-deep)}
.faq-item p{
  padding:0 2.4rem 1.5rem 0;margin-top:-.2rem;
  font:400 .95rem/1.95 var(--sans);color:var(--ink-2);max-width:52em;
}

/* ============================================================
   Cal.com 內嵌容器
   ============================================================ */
.cal-embed{
  max-width:820px;margin:2.2rem auto .4rem;min-height:520px;
  border:1px solid var(--hair-2);background:var(--paper);overflow:hidden;
}
.cal-embed:empty{display:none} /* Cal 未載入時不留空框，退回按鈕 */

/* ============================================================
   小V AI 顧問助理（白晝皮：紙墨朱紅，非罐頭靛藍）
   ============================================================ */
#va-chat-widget{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:.9rem}

/* 浮動鈕 */
#va-chat-btn{
  background:var(--ink);color:var(--paper);
  font:500 .86rem/1 var(--sans);letter-spacing:.14em;
  padding:.95rem 1.5rem;border:1px solid var(--ink);
  box-shadow:0 8px 24px rgba(33,28,22,.22);
  transition:background .3s,border-color .3s,transform .3s,box-shadow .3s;
}
#va-chat-btn::before{content:"小";display:inline-grid;place-items:center;width:1.35em;height:1.35em;margin-right:.6em;background:var(--red);color:#fff;font-family:var(--serif);font-weight:700;font-size:.8em;transform:translateY(-1px)}
#va-chat-btn:hover{background:var(--red-deep);border-color:var(--red-deep);transform:translateY(-2px);box-shadow:0 12px 30px rgba(194,62,42,.32)}

/* 對話視窗 */
#va-chat-window{
  display:none;flex-direction:column;
  width:min(374px,92vw);height:min(548px,72vh);
  background:var(--paper);border:1px solid var(--hair-2);
  box-shadow:0 22px 54px rgba(33,28,22,.20);overflow:hidden;
}
#va-chat-window.open{display:flex}
.va-chat-header{
  display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;
  background:var(--paper-deep);border-bottom:1px solid var(--hair-2);position:relative;
}
.va-chat-header::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red)}
.va-avatar{display:grid;place-items:center;width:38px;height:38px;background:var(--red);color:#fff;font:700 1.1rem/1 var(--serif);flex:0 0 auto}
.va-chat-hd-txt{flex:1;min-width:0}
.va-chat-title{font:700 .95rem/1.2 var(--serif);letter-spacing:.04em}
.va-chat-sub{font:400 .72rem/1.4 var(--sans);color:var(--ink-3);letter-spacing:.06em;margin-top:.1rem}
.va-close-btn{width:28px;height:28px;color:var(--ink-3);font-size:1rem;transition:color .25s}
.va-close-btn:hover{color:var(--red-deep)}

.va-messages{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.75rem;scrollbar-width:thin}
.va-msg{max-width:86%;padding:.7rem .9rem;font:400 .88rem/1.7 var(--sans);letter-spacing:.01em;white-space:pre-wrap;word-break:break-word}
.va-msg-ai{align-self:flex-start;background:var(--paper-deep);color:var(--ink);border:1px solid var(--hair)}
.va-msg-user{align-self:flex-end;background:var(--ink);color:var(--paper)}
.va-msg-ai a{color:var(--red-deep);text-decoration:underline}

.va-quick-btns{display:flex;flex-wrap:wrap;gap:.45rem;padding:0 1.1rem .3rem}
.va-quick-btn{font:400 .76rem/1.3 var(--sans);letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--hair-2);padding:.42rem .7rem;transition:border-color .3s,color .3s;text-align:left}
.va-quick-btn:hover{border-color:var(--red);color:var(--red-deep)}

.va-input-row{display:flex;gap:.5rem;padding:.8rem 1.1rem;border-top:1px solid var(--hair)}
#va-input{flex:1;background:var(--paper);border:1px solid var(--hair-2);padding:.6rem .75rem;font:400 .88rem/1.4 var(--sans);color:var(--ink)}
#va-input:focus{outline:none;border-color:var(--red)}
#va-send-btn{background:var(--ink);color:var(--paper);width:40px;flex:0 0 auto;font-size:.9rem;transition:background .3s}
#va-send-btn:hover{background:var(--red-deep)}
#va-send-btn:disabled{opacity:.5;cursor:default}

.va-typing{align-self:flex-start;display:flex;gap:.28rem;padding:.7rem .9rem;background:var(--paper-deep);border:1px solid var(--hair)}
.va-typing span{width:6px;height:6px;background:var(--ink-3);border-radius:50%;animation:va-bounce 1.2s infinite ease-in-out}
.va-typing span:nth-child(2){animation-delay:.2s}
.va-typing span:nth-child(3){animation-delay:.4s}
@keyframes va-bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
@media(max-width:560px){#va-chat-window{height:70vh}}

/* 逐字動畫：英文整字不斷行 */
.js [data-split] .word{display:inline-block;white-space:nowrap}

/* 品牌名手機不斷行 */
.brand-zh{white-space:nowrap}

/* ============================================================
   關於職人：手繪線稿 → 真人照淡入（保留 draw 特效）
   ============================================================ */
.portrait-inner{position:relative;z-index:1}
.portrait-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 24%;
  opacity:0;transform:scale(1.04);
  filter:sepia(.10) saturate(.97) contrast(1.02);
  transition:opacity 1s ease 1.2s, transform 1.2s cubic-bezier(.22,.8,.3,1) 1.2s;
}
.portrait.on .portrait-photo{opacity:1;transform:none}
.portrait-seal{z-index:2}
@media(prefers-reduced-motion:reduce){
  .portrait-photo{transition:opacity .01s;transform:none}
}

/* hero 直排標語手機版修正：縮字距字級＋定位，避免擠成兩欄 */
@media(max-width:760px){
  .hero-spine{
    top:12px; right:10px;
    padding:.6rem .32rem;
    font-size:.72rem; letter-spacing:.1em; line-height:1;
  }
}

/* 桌面版落款「優勢」：抬到內文卡(hero-deck)上緣之上，避免被卡片蓋住 */
@media(min-width:761px){
  .hero-seal{ bottom:calc(clamp(3rem,9vw,6.2rem) + 22px); z-index:3; }
}

/* hero 右側「直排標語＋落款」群組：直式排列、桌機手機一致（落款在標語正下方） */
.hero-mark{
  position:absolute; right:clamp(14px,2.5vw,30px); top:clamp(16px,10%,54px);
  z-index:3; display:flex; flex-direction:column; align-items:center;
  gap:clamp(10px,1.4vw,16px);
}
.hero-mark .hero-spine{ position:static; inset:auto; }
.hero-mark .hero-seal{ position:static; inset:auto; }