/* 仙知 V14｜參考 Pearl 9/30 提供的茶室品牌照片：米色大留白、單字撐滿一行的疏排、細線小標、
   斜體細字英文、直排名條、色塊裡框一張方圖。動畫與內容不動，只換版式。 */
:root{
  --v14-cream:#F6EFE3;
  --v14-cream-2:#FBF6EC;
  --v14-sage:#55735F;
  --v14-sage-soft:#8BA395;
  --v14-latin:"Avenir Next","Avenir","Helvetica Neue","Segoe UI",sans-serif;
  --paper:#F6EFE3;
}
body{background-color:var(--v14-cream)!important}
.masthead{background:transparent}

/* 斜體細字英文 */
.v14-latin{font-family:var(--v14-latin);font-style:italic;font-weight:300;letter-spacing:.28em;color:var(--v14-sage-soft);font-size:13px;line-height:1.9;margin:0}
.v14-latin-lg{font-size:30px;letter-spacing:.2em;color:var(--v14-sage);margin-bottom:10px}

/* ---------- 首屏：上下兩行單字疏排，中間三界 ---------- */
.atelier-home .opening.v14-hero{display:grid!important;grid-template-columns:1fr minmax(0,2.2fr) 1fr!important;grid-template-rows:auto auto auto;
  align-items:center;column-gap:clamp(20px,3vw,48px);row-gap:clamp(28px,4vw,56px);padding-block:clamp(40px,6vw,90px) clamp(56px,7vw,110px);min-height:0}
.v14-spread{grid-column:1 / -1;display:flex;justify-content:space-between;padding-inline:clamp(8px,8vw,150px);margin:0;
  font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.9vw,28px);color:var(--v14-sage);letter-spacing:0}
.v14-spread-top{grid-row:1}
.v14-spread-bottom{grid-row:3}
.v14-hero .realm-figure{grid-column:2;grid-row:2;margin:0}
.v14-hero .realm-figure figcaption{justify-content:center;gap:28px}
.v14-hero-left{grid-column:1;grid-row:2;align-self:center}
.v14-hero-right{grid-column:3;grid-row:2;align-self:center;text-align:right}
.v14-hero h1#hero-title{writing-mode:horizontal-tb!important;font-size:16px!important;letter-spacing:.5em!important;line-height:1.8!important;
  font-weight:400!important;color:var(--v14-sage)!important;margin:0!important;min-height:0!important;height:auto!important}
.v14-rule{display:block;width:100%;max-width:220px;height:1px;background:var(--v14-sage-soft);margin:14px 0 18px}
.v14-hero-note{font-size:13px!important;line-height:2.1!important;letter-spacing:.14em;color:var(--soft);margin:0;max-width:15em}
.v14-hero-right .hero-actions{justify-content:flex-end;margin-top:26px;gap:22px}
.v14-hero-right .hero-cta{background:transparent!important;color:var(--v14-sage)!important;box-shadow:inset 0 0 0 1px var(--v14-sage);font-size:13px;letter-spacing:.4em;padding:13px 26px 13px 32px}
.v14-hero-right .hero-cta:hover{background:var(--v14-sage)!important;color:var(--v14-cream-2)!important}

/* ---------- 章節標：細線＋名稱＋斜體英文（像「鶴茶樓 2.0 ——」） ---------- */
.chapter-label{display:flex!important;flex-direction:column;align-items:flex-start!important;gap:6px!important}
.chapter-label>span:first-child{display:none!important}
.chapter-label>span:last-child{font-size:14px!important;letter-spacing:.5em!important;color:var(--v14-sage)!important;padding-bottom:12px;border-bottom:1px solid var(--v14-sage-soft);min-width:190px}
.chapter-label .v14-latin{font-size:12px}
.atelier-home main>section.chapter:not(#services)::before{display:none}

/* 大標：更疏、更輕 */
.section-intro h2,.chapter h2,.contact h2{color:var(--v14-sage)!important;letter-spacing:.3em!important}

/* ---------- 四項服務：直排名、大留白 ---------- */
.fusion-service{background:transparent!important;border:0!important;text-align:center}
.fusion-service .service-name{align-items:center!important}
.fusion-service .service-name h3{color:var(--v14-sage)!important;letter-spacing:.5em!important}
.fusion-service .display-character{color:var(--v14-sage-soft)!important;opacity:.55}
.fusion-service .service-question{color:var(--soft)}
.fusion-service .service-open{align-self:center!important;margin-inline:auto}

/* ---------- 仙知系列：色塊裡框一張方圖＋右側直排名條 ---------- */
#world .collection-grid{gap:clamp(18px,2.4vw,36px)!important}
#world .collection-motion{position:relative;background:var(--v14-field,#E4E9DF)!important;border:0!important;overflow:hidden}
#world .collection-motion>img,#world .collection-motion>video{inset:9% 22% 9% 9%!important;width:69%!important;height:82%!important}
#world .collection-entry:nth-child(1) .collection-motion{--v14-field:#DCE4DA}
#world .collection-entry:nth-child(2) .collection-motion{--v14-field:#F1E4C6}
#world .collection-entry:nth-child(3) .collection-motion{--v14-field:#E9A47E}
#world .collection-entry:nth-child(4) .collection-motion{--v14-field:#E7E0D3}
.v14-strip{position:absolute;top:0;right:0;bottom:0;width:13%;background:var(--v14-cream-2);display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;font-family:var(--serif);font-size:clamp(13px,1vw,15px);letter-spacing:.8em;color:var(--v14-sage);z-index:3}
#world .collection-name h3{letter-spacing:.5em!important;color:var(--v14-sage)!important}

/* ---------- 聯絡：純米色大留白 ---------- */
.contact{background:var(--v14-cream-2)!important}
.contact>.contact-link{background:transparent!important;color:var(--v14-sage)!important;box-shadow:inset 0 0 0 1px var(--v14-sage)!important}
.contact>.contact-link:hover{background:var(--v14-sage)!important;color:var(--v14-cream-2)!important}

/* ---------- 手機 ---------- */
@media(max-width:900px){
  .atelier-home .opening.v14-hero{grid-template-columns:1fr!important;row-gap:26px}
  .v14-spread{padding-inline:4px;font-size:20px}
  .v14-hero .realm-figure{grid-column:1;grid-row:2}
  .v14-hero-left{grid-column:1;grid-row:4}
  .v14-hero-right{grid-column:1;grid-row:5;text-align:left}
  .v14-hero-right .hero-actions{justify-content:flex-start;display:grid!important;grid-template-columns:1fr 1fr}
  .v14-hero-right .hero-actions>a{height:50px;display:flex!important;align-items:center;justify-content:center}
  .v14-latin-lg{font-size:24px}
}
/* 三界視窗改成跟著寬度走的 16:9，中間欄加寬 */
@media(min-width:901px){.atelier-home .opening.v14-hero{grid-template-columns:minmax(150px,1fr) minmax(0,3.4fr) minmax(150px,1fr)!important}}
.v14-hero .realm-window{height:auto!important;aspect-ratio:16/9;width:100%!important;margin-left:0!important}
/* 色塊加深一點、英文小字加深，接近參考照片的對比 */
#world .collection-entry:nth-child(1) .collection-motion{--v14-field:#B9C8B6}
#world .collection-entry:nth-child(2) .collection-motion{--v14-field:#F0DFB2}
#world .collection-entry:nth-child(3) .collection-motion{--v14-field:#E38A5E}
#world .collection-entry:nth-child(4) .collection-motion{--v14-field:#C9D2C7}
.v14-latin{color:#6E8A7A}
.chapter-label .v14-latin{font-size:13px}
/* 修正：直排名條要貼在色塊右緣、整條高；手機兩欄不可超出畫面 */
#world .collection-motion .v14-strip{position:absolute!important;top:0!important;bottom:0!important;right:0!important;left:auto!important;height:100%!important;margin:0!important}
.chapter-label .v14-latin{color:#5F7C6C!important}
@media(max-width:760px){
  #world .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  #world .collection-entry{min-width:0}
  .v14-strip{font-size:11px;letter-spacing:.5em}
}
/* 框色備選（預覽用：網址加 ?mat=a／b／c） */
html[data-mat="a"] #world .collection-entry .collection-motion{--v14-field:#EFE6D4!important}
html[data-mat="a"] #world .collection-entry:nth-child(2) .collection-motion{--v14-field:#F3E9CF!important}
html[data-mat="a"] #world .collection-entry:nth-child(3) .collection-motion{--v14-field:#EDE2CF!important}
html[data-mat="a"] #world .collection-entry:nth-child(4) .collection-motion{--v14-field:#E9E4D8!important}
html[data-mat="b"] #world .collection-entry .collection-motion{--v14-field:#D9E1D6!important}
html[data-mat="c"] #world .collection-entry .collection-motion{--v14-field:transparent!important;box-shadow:inset 0 0 0 1px #B9C4B8}
html[data-mat] .v14-strip{background:var(--v14-cream-2)}
html[data-mat="c"] .v14-strip{border-left:1px solid #B9C4B8}

/* ===== 2026-09-30 改回仙知東方美學 SOP 色票（brands/sienchi/web-rules.md）=====
   原始五行色：綠 #739385/#B0C4AD、金黃 #C4A93D/#CEB781、藕紅 #B17061/#CD9E85、米白 #C8BEB2/#E5DACB、灰紫 #A69E9E/#C8BEBE
   網頁用途色：米絹 #FAF9F6、墨青 #263D4E、青瓷 #83A99A（深 #587973）、藕紅 #B17061、淡金 #A58C52 */
:root{--v14-cream:#FAF9F6;--v14-cream-2:#FAF9F6;--v14-sage:#587973;--v14-sage-soft:#83A99A;--paper:#FAF9F6}
body{background-color:#FAF9F6!important}
.v14-latin,.chapter-label .v14-latin{color:#587973!important}
.contact{background:#F3EFE8!important}
/* 系列框色：預設用五行淺色（綠、金黃、藕紅、灰紫） */
#world .collection-entry:nth-child(1) .collection-motion{--v14-field:#B0C4AD}
#world .collection-entry:nth-child(2) .collection-motion{--v14-field:#CEB781}
#world .collection-entry:nth-child(3) .collection-motion{--v14-field:#CD9E85}
#world .collection-entry:nth-child(4) .collection-motion{--v14-field:#C8BEBE}
.v14-strip{background:#FAF9F6!important}
/* 備選 a：全用米白淺 #E5DACB；b：全用青瓷淺（綠淺 #B0C4AD）；c：米白深 #C8BEB2 細線框 */
html[data-mat="a"] #world .collection-entry .collection-motion{--v14-field:#E5DACB!important}
html[data-mat="b"] #world .collection-entry .collection-motion{--v14-field:#B0C4AD!important}
html[data-mat="c"] #world .collection-entry .collection-motion{--v14-field:transparent!important;box-shadow:inset 0 0 0 1px #C8BEB2}
html[data-mat="c"] .v14-strip{border-left:1px solid #C8BEB2}
html[data-mat="a"] #world .collection-entry:nth-child(n) .collection-motion{--v14-field:#E5DACB!important}
html[data-mat="b"] #world .collection-entry:nth-child(n) .collection-motion{--v14-field:#B0C4AD!important}

/* 五行淺淺色：SOP 五行淺色 35% ＋ 米絹 65%（依 SOP 混色原則延伸） */
html[data-mat="e"] #world .collection-entry:nth-child(1) .collection-motion{--v14-field:#E0E6DC!important}
html[data-mat="e"] #world .collection-entry:nth-child(2) .collection-motion{--v14-field:#EBE2CD!important}
html[data-mat="e"] #world .collection-entry:nth-child(3) .collection-motion{--v14-field:#EAD9CE!important}
html[data-mat="e"] #world .collection-entry:nth-child(4) .collection-motion{--v14-field:#E8E4E2!important}