*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#1d1d1f;
font:17px/1.65 -apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang TC","Noto Sans TC",sans-serif;
-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:#1d6a4f;text-decoration:none}
a:hover{color:#14503b}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.narrow{max-width:680px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:"Noto Serif TC",Georgia,serif;font-weight:600;letter-spacing:-.01em;margin:0}
h2{font-size:36px;line-height:1.28;margin-bottom:20px}
h3{font-size:21px;line-height:1.4;margin-bottom:8px}
p{margin:0 0 18px}
.lead{font-size:20px;line-height:1.7;color:#4a4a4f}
.muted{color:#6e6e73}
.eyebrow{font-size:13px;letter-spacing:.18em;color:#6e6e73;text-transform:none;margin-bottom:14px}
section{padding:96px 0}
section+section{border-top:1px solid #f0efec}
/* 語言切換
⚠ 一定要寫成 `body .en`（後代選擇器）。
切英文時 body 自己會拿到 class="en"，裸的 `.en{display:none}`
會打到 body，整頁變成 display:none 一片空白；而且 localStorage 記住了，
之後每次開都是白的。這個 bug 實際發生過。 */
body .en{display:none}
body.en .zh{display:none}
body.en .en{display:block}
body.en span.en,body.en a.en{display:inline}
nav{position:fixed;top:0;left:0;right:0;z-index:40;background:transparent;
border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{font-size:12px;letter-spacing:.16em;font-weight:600;color:#fff;
text-shadow:0 1px 10px rgba(0,0,0,.5);transition:color .3s ease,text-shadow .3s ease}
#lang{font:inherit;font-size:13px;border:1px solid rgba(255,255,255,.6);
background:rgba(255,255,255,.14);border-radius:980px;padding:5px 14px;
cursor:pointer;color:#fff;transition:all .3s ease}
#lang:hover{background:rgba(255,255,255,.28)}
nav.solid{background:rgba(255,255,255,.88);
-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom-color:#f0efec}
nav.solid .brand{color:#1d1d1f;text-shadow:none}
nav.solid #lang{border-color:#d6d5d0;background:#fff;color:#1d1d1f}
nav.solid #lang:hover{background:#f5f5f3}
/* Hero：白字壓圖，置中 */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;
justify-content:flex-start;background:#1d1d1f;overflow:hidden;text-align:left}
.heroimg{position:absolute;top:0;right:0;bottom:0;left:0}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center center}
.hero::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;
background:linear-gradient(100deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.42) 42%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.30) 100%)}
.hero .inner{position:relative;z-index:2;color:#fff;width:100%;padding:70px 0}
.hero .inner .wrap{max-width:980px}
.hero .inner .wrap>*{max-width:min(560px,58%)}
.hero .heroshot{position:absolute;left:0;right:0;bottom:22px;z-index:2;
font-size:12.5px;color:rgba(255,255,255,.72);text-shadow:0 1px 10px rgba(0,0,0,.7)}
.hero .eyebrow{color:rgba(255,255,255,.84);text-shadow:0 1px 12px rgba(0,0,0,.55)}
.hero h1{font-size:clamp(38px,6.4vw,68px);line-height:1.12;color:#fff;font-weight:500;
letter-spacing:.02em;text-shadow:0 2px 30px rgba(0,0,0,.5);margin-bottom:22px}
.hero p{font-size:clamp(16px,2vw,20px);line-height:1.75;margin:0 0 34px;
color:rgba(255,255,255,.92);text-shadow:0 1px 18px rgba(0,0,0,.6);font-weight:400}
.hero .rule{width:52px;height:1px;background:rgba(255,255,255,.5);margin:0 0 34px}
.btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;background:#1d6a4f;color:#fff;font-size:16px;
padding:14px 32px;border-radius:980px}
.btn:hover{background:#17583f;color:#fff}
.btn.ghost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.55);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.26)}
/* 調色已在產圖時烘進檔案（見 單頁/regen.py），這裡不再用 CSS 濾鏡：
濾鏡每次繪製都要算，而且使用者另存時拿到的是未調色的原圖。 */
/* 進度 */
.prog{max-width:620px;margin:0 auto;text-align:center}
.prog .amt{font-size:clamp(42px,7vw,60px);font-weight:600;letter-spacing:-.03em;
line-height:1.05;font-variant-numeric:tabular-nums}
.prog .sub{font-size:16px;color:#6e6e73;margin:12px 0 22px}
.prog .sub b{color:#1d6a4f;font-weight:600}
.prog .track{height:6px;background:#eeede9;border-radius:999px;overflow:hidden}
.prog .fill{height:100%;background:#1d6a4f;width:0;border-radius:999px;
transition:width .9s cubic-bezier(.22,.61,.36,1)}
.prog .upd{font-size:13px;color:#6e6e73;margin:14px 0 0}
/* 時程圖 */
.sched{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.sched::before{content:"";position:absolute;left:12.5%;right:12.5%;top:17px;
height:2px;background:#e6e5e1}
.sched li{position:relative;text-align:center;padding:0 12px}
.sched .dot{width:36px;height:36px;border-radius:50%;margin:0 auto 16px;
display:flex;align-items:center;justify-content:center;font-size:15px;
background:#fff;border:2px solid #d6d5d0;color:#c7c6c1;position:relative;z-index:2}
.sched li.done .dot{background:#1d6a4f;border-color:#1d6a4f;color:#fff}
.sched li.now .dot{background:#fff;border-color:#1d6a4f;color:#1d6a4f;
box-shadow:0 0 0 6px rgba(29,106,79,.14);font-size:13px}
.sched .when{font-size:12.5px;letter-spacing:.08em;color:#86868b;margin-bottom:6px;
font-variant-numeric:tabular-nums}
.sched .what{font-size:16px;font-weight:600;line-height:1.4;margin-bottom:6px}
.sched .st{font-size:13px;color:#86868b;line-height:1.5}
.sched li.now .st{color:#1d6a4f;font-weight:600}
/* 三欄 */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:46px}
.cols .n{font-size:12px;letter-spacing:.16em;color:#86868b;margin-bottom:12px}
.cols p{font-size:15px;line-height:1.65;color:#6e6e73;margin:0}
/* 圖文 */
.duo{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
gap:48px;align-items:start}
.duo img{border-radius:14px;width:100%;height:auto;max-height:440px;aspect-ratio:3/2;object-fit:cover}
.cap{font-size:13px;color:#6e6e73;margin-top:10px}
/* 金額表 */
.bill{max-width:680px;margin:0 auto}
.bill .li{display:flex;justify-content:space-between;gap:20px;
padding:15px 0;border-bottom:1px solid #f0efec;font-size:16px}
.bill .li span:last-child{white-space:nowrap;color:#4a4a4f;font-variant-numeric:tabular-nums}
.bill .sum{display:flex;justify-content:space-between;padding:18px 0 0;
border-top:1px solid #1d1d1f;margin-top:4px;font-weight:600;font-size:17px}
/* 大事記 */
.tl{position:relative}
.era{padding:0 0 44px;position:relative}
.era .when{font-size:13px;letter-spacing:.14em;color:#86868b;margin-bottom:6px}
.era h3{margin-bottom:10px}
.era p{font-size:15px;color:#6e6e73;max-width:62ch;margin-bottom:16px}
.strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-width:720px}
.strip button{padding:0;border:0;background:none;cursor:zoom-in;border-radius:10px;
overflow:hidden;line-height:0;display:block}
.strip img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
transition:transform .32s ease,filter .32s ease}
.strip button:hover img{transform:scale(1.035);filter:brightness(1.04)}
.strip button:focus-visible{outline:2px solid #1d6a4f;outline-offset:3px}
/* 相簿 */
#lb{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:rgba(0,0,0,.94);
display:none;align-items:center;justify-content:center;touch-action:pan-y}
#lb.on{display:flex}
#lb img{max-width:92vw;max-height:78vh;object-fit:contain;border-radius:4px}
#lb .lbcap{position:absolute;left:0;right:0;bottom:26px;text-align:center;
color:rgba(255,255,255,.82);font-size:14px;padding:0 70px}
#lb .cnt{position:absolute;top:20px;left:0;right:0;text-align:center;
color:rgba(255,255,255,.55);font-size:13px;font-variant-numeric:tabular-nums}
#lb button{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;
width:46px;height:46px;border-radius:50%;font-size:22px;cursor:pointer;line-height:1}
#lb button:hover{background:rgba(255,255,255,.24)}
#lb .prev{left:16px;top:50%;transform:translateY(-50%)}
#lb .next{right:16px;top:50%;transform:translateY(-50%)}
#lb .close{right:16px;top:16px;font-size:20px}
/* 表單 */
.form{max-width:680px;margin:0 auto}
.form iframe{width:100%;height:1200px;border:0;border-radius:12px;background:#faf9f7}
table.acct{width:100%;border-collapse:collapse;font-size:15px}
table.acct td{padding:12px 0;border-bottom:1px solid #f0efec;vertical-align:top}
table.acct td:first-child{color:#86868b;width:34%;white-space:nowrap}
.fine{font-size:14px;line-height:1.75;color:#6e6e73}
/* 頁尾 */
footer{background:#f7f7f5;padding:64px 0;border-top:1px solid #eeede9}
footer .lead-line{font-size:16px;line-height:1.7;margin-bottom:36px;color:#1d1d1f}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;
font-size:13.5px;line-height:1.8;color:#6e6e73}
.fgrid b{display:block;font-size:12px;letter-spacing:.13em;color:#86868b;
font-weight:600;margin-bottom:10px}
.copy{margin-top:40px;padding-top:22px;border-top:1px solid #e6e5e1;
font-size:13px;color:#86868b}
/* 格線在 860 就收合。768 是 iPad 直式最常見的寬度,
斷在 760 會讓它整套吃桌機格線,正文每行只剩 20.5 個中文字。 */
@media(max-width:860px){
section{padding:64px 0}
h2{font-size:28px}
.cols,.duo,.fgrid{grid-template-columns:1fr;gap:34px}
.duo img{border-radius:12px;max-height:none}
.strip{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
.form iframe{height:1500px}
}
/* 以下是真正的手機才需要的 */
@media(max-width:760px){
.hero{min-height:80vh}
.hero .inner{padding-bottom:54px}
#lb .lbcap{padding:0 20px;bottom:18px}
#lb .prev{left:8px}#lb .next{right:8px}
}
@media(max-width:860px){
/* 時程圖轉直式,線改成垂直 */
.sched{grid-template-columns:1fr;gap:0}
.sched::before{left:17px;right:auto;top:18px;bottom:18px;width:2px;height:auto}
.sched li{display:grid;grid-template-columns:36px minmax(0,1fr);
gap:0 18px;text-align:left;padding:0 0 30px}
.sched .dot{margin:0;grid-row:span 3}
.sched .when,.sched .what,.sched .st{grid-column:2}
.sched .what{margin-bottom:4px}
}
/* ══ A 版：POC Apple 風格 滿版圖 → 圖下大字 ══ */
body.v-apple nav{position:sticky;background:rgba(255,255,255,.88);
-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom-color:#f0efec}
body.v-apple .brand{color:#1d1d1f;text-shadow:none}
body.v-apple #lang{border-color:#d6d5d0;background:#fff;color:#1d1d1f}
body.v-apple #lang:hover{background:#f5f5f3}
body.v-apple .hero{display:block;min-height:0;height:auto;background:#fff;text-align:center}
body.v-apple .heroimg{position:static;height:clamp(420px,64vh,680px)}
/* 原圖上方約 40% 是純藍天，山、崖壁、樹林與仁波切都在下方 60%。
裁切點要靠下，寧可裁天空，不可裁山景。 */
body.v-apple .hero img{object-position:center 86%}
body.v-apple .hero::after{display:none}
body.v-apple .hero .inner{color:#1d1d1f;padding:86px 0 0}
body.v-apple .hero .eyebrow{color:#86868b;text-shadow:none}
body.v-apple .hero h1{color:#1d1d1f;font-weight:600;letter-spacing:-.02em;
font-size:clamp(40px,7vw,76px);line-height:1.08;text-shadow:none;margin-bottom:26px}
body.v-apple .hero p{color:#6e6e73;text-shadow:none;max-width:30ch;margin-bottom:36px}
body.v-apple .hero .rule{display:none}
body.v-apple .btn.ghost{background:none;border:0;color:#1d6a4f;padding:14px 10px}
body.v-apple .btn.ghost:hover{background:none;color:#14503b;text-decoration:underline}
body.v-apple #progress{padding-top:96px}
/* 引言 */
blockquote{margin:38px auto;max-width:30ch;font-family:"Noto Serif TC",Georgia,serif;
font-size:clamp(21px,2.6vw,27px);line-height:1.85;color:#1d1d1f;
padding:0;border:0;position:relative}
blockquote::before,blockquote::after{content:"";display:block;width:36px;height:1px;
background:#d6d5d0;margin:0 auto}
blockquote::before{margin-bottom:26px}
blockquote::after{margin-top:26px}
.eyebrow+h2{margin-top:0}
/* ══ 規劃頁 ══ */
.facil{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 48px;border-top:1px solid #e6e5e1}
.facil div{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 14px;
padding:16px 0;border-bottom:1px solid #f0efec;align-content:start}
.facil .k{grid-row:span 2;font:600 13px/1.5 ui-monospace,Menlo,monospace;
color:#1d6a4f;padding-top:3px;font-variant-numeric:tabular-nums}
.facil h4{margin:0 0 3px;font-family:"Noto Serif TC",Georgia,serif;font-size:16px;
font-weight:600;line-height:1.45}
.facil p{font-size:14px;line-height:1.65;color:#6e6e73;margin:0}
.gen{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 26px;
padding:26px 0;border-bottom:1px solid #f0efec}
.gen .yr{font-size:15px;color:#86868b;font-variant-numeric:tabular-nums;padding-top:2px}
.gen h4{margin:0 0 8px;font-family:"Noto Serif TC",Georgia,serif;font-size:19px;font-weight:600}
.gen p{font-size:15.5px;line-height:1.8;color:#4a4a4f;margin:0 0 10px;max-width:62ch}
.backlink{display:inline-block;font-size:15px}
@media(max-width:860px){
.facil{grid-template-columns:1fr;gap:0}
.gen{grid-template-columns:1fr;gap:6px;padding:22px 0}
}
/* ══ 四步驟圖 ══ */
.path{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.path::before{content:"";position:absolute;left:12.5%;right:12.5%;top:27px;height:2px;
background:linear-gradient(90deg,#e6e5e1 0%,#1d6a4f 100%)}
.path li{position:relative;text-align:center;padding:0 14px}
.path .node{width:56px;height:56px;margin:0 auto 20px;position:relative;z-index:2}
.path .node svg{display:block}
.path .t{font-size:19px;font-weight:600;font-family:"Noto Serif TC",Georgia,serif;
line-height:1.4;margin-bottom:4px}
.path .e{font-size:13px;color:#6e6e73;letter-spacing:.05em;margin-bottom:12px}
.path p{font-size:14.5px;line-height:1.7;color:#6e6e73;margin:0}
.path .arrow{position:absolute;top:20px;right:-9px;color:#c7c6c1;font-size:18px;z-index:3}
.path li:last-child .arrow{display:none}
@media(max-width:860px){
.path{grid-template-columns:1fr}
.path::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;
background:linear-gradient(180deg,#e6e5e1 0%,#1d6a4f 100%)}
.path li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 20px;
text-align:left;padding:0 0 30px}
.path .node{margin:0;grid-row:span 3}
.path .t,.path .e,.path p{grid-column:2}
.path .arrow{display:none}
}
/* ══ 手機:hero 一律改成圖在上、字在下 ══
16:9 的原圖塞進直式手機,cover 只看得到中間約四分之一的寬度,
仁波切必然被裁掉。改成圖片完整呈現、文字放白底,人一定看得到,也不會被壓到。 */
@media(max-width:760px){
/* 純風景照,沒有人物要保護,手機維持壓字 */
.hero{align-items:flex-end}
.hero img{object-position:center center}
.hero .inner{padding:0 0 54px}
.hero .inner .wrap>*{max-width:100%}
.hero::after{background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.16) 38%,rgba(0,0,0,.74) 100%)}
}
/* 三代傳承的人物照 */
.gen{grid-template-columns:96px 132px minmax(0,1fr);gap:0 26px}
.gen .por{width:132px}
.gen .por img{width:132px;height:176px;object-fit:cover;border-radius:10px}
.gen .por .cap{font-size:11.5px;margin-top:6px;line-height:1.5}
@media(max-width:860px){
.gen{grid-template-columns:1fr}
.gen .por{width:150px;margin-bottom:12px}
.gen .por img{width:150px;height:200px}
}
/* ══ 兩個 Hero 版本 ══
預設:水池倒影(純風景,壓字置中偏左,手機也壓字)
body.hero-rin:仁波切版(文字靠左、圖偏右保住人物、手機改圖上字下) */
/* 不要在這裡把 .heroimg img 設成 absolute:
body.v-apple 把 .heroimg 改成 static,圖片的定位基準會跳到 .hero,
於是圖片撐滿整個 hero 高度、直接蓋住底下的標題（apple.html 與 plan.html 都中）。
.heroimg 本身已經是 absolute inset:0,圖片用 width/height 100% 就夠了。 */
.heroshot{display:block;position:absolute;left:0;right:0;bottom:22px;z-index:2;
font-size:12.5px;color:rgba(255,255,255,.72);text-shadow:0 1px 10px rgba(0,0,0,.7)}
@media(max-width:760px){
/* 仁波切版在手機改成圖上字下,人才不會被裁掉也不會被壓到 */
body.hero-rin .hero{display:block;min-height:0;height:auto;background:#fff;text-align:left}
body.hero-rin .heroimg{position:static;height:auto}
body.hero-rin .hero img{width:100%;height:auto;object-fit:contain}
body.hero-rin .hero::after{display:none}
body.hero-rin .hero .inner{color:#1d1d1f;padding:30px 0 0;position:static}
body.hero-rin .hero .inner .wrap>*{max-width:100%}
body.hero-rin .hero .eyebrow{color:#86868b;text-shadow:none}
body.hero-rin .hero h1{color:#1d1d1f;font-weight:600;text-shadow:none;
font-size:clamp(34px,9vw,46px);margin-bottom:18px}
body.hero-rin .hero p{color:#6e6e73;text-shadow:none;margin-bottom:26px}
body.hero-rin .hero .rule{display:none}
body.hero-rin .heroshot{position:static;color:#a1a1a6;text-shadow:none;
padding-top:8px;font-size:12px}
body.hero-rin nav{position:sticky;background:rgba(255,255,255,.9);
-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom-color:#f0efec}
body.hero-rin .brand{color:#1d1d1f;text-shadow:none}
body.hero-rin #lang{border-color:#d6d5d0;background:#fff;color:#1d1d1f}
}
/* ══ 區塊底色：讓長頁面有段落感 ══
三種底：白（預設）、淺暖灰 .tint、深墨 .dark（字反白）。
規則:深色只給「需要停下來讀」的段落（引言、收尾行動），
不超過兩處,否則反白反而變成負擔。 */
section.tint{background:#f5f5f3}
section.tint+section.tint{border-top-color:#e8e7e3}
section.dark{background:#1d211f;color:#f2f1ee;border-top-color:#1d211f}
section.dark+section{border-top-color:#f0efec}
section.dark h2,section.dark h3,section.dark .t{color:#fff}
section.dark .muted,section.dark p,section.dark .st{color:#b9b7b1}
section.dark .lead{color:#e4e2dd}
section.dark .eyebrow,section.dark .e,section.dark .when{color:#8d8b85}
section.dark blockquote{color:#fff}
section.dark blockquote::before,section.dark blockquote::after{background:#4a4f4b}
section.dark b{color:#fff}
section.dark a:not(.btn){color:#7fc4a3}
section.dark a:not(.btn):hover{color:#9ad8bb}
section.dark .btn{background:#267053}
section.dark .btn:hover{background:#2f8a68}
section.dark .btn.ghost{background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.42);color:#fff}
section.dark .btn.ghost:hover{background:rgba(255,255,255,.2);color:#fff}
/* 四步驟圖在深底上的節點 */
section.dark .path::before{background:linear-gradient(90deg,#3a403c 0%,#2f8a68 100%)}
section.dark .path .node svg circle[stroke="#dcdbd6"]{stroke:#4a4f4b}
section.dark .path .node svg circle[fill="#fff"]{fill:#1d211f}
@media(max-width:860px){
section.dark .path::before{background:linear-gradient(180deg,#3a403c 0%,#2f8a68 100%)}
}
/* 最後保險：舊瀏覽器若連 animation 都沒跑，至少讓過場不吃掉點擊。
pointer-events 在 iOS 9 以後都支援，比 visibility 可靠。 */
#splash{pointer-events:none}
/* 手機導覽列：四個元素在 390px 剛好塞滿，審稿鈕會撐成三行掉出導覽列。
上線拿掉審稿鈕就沒事，拿掉之前先讓它們在窄螢幕縮小不換行。 */
@media(max-width:460px){
nav .wrap{gap:6px}
.brand{font-size:10.5px;letter-spacing:.08em;white-space:nowrap}
#lang{font-size:12px;padding:5px 11px;white-space:nowrap}
}
/* 2) Apple 版 hero 置中：.wrap 是置中的，但裡面的元素有 max-width
卻沒有左右 auto margin，所以整塊貼左，實測偏離中心 195.7px。 */
body.v-apple .hero .inner .wrap>*{margin-left:auto;margin-right:auto}
body.v-apple .hero .btns{justify-content:center}
/* 四步驟圖:中文模式「重新連結 / Reconnect」兩行;
英文模式只留 Reconnect,不放中文（英文讀者看不懂,只是噪音）。 */
.path .t .en{display:none}
body.en .path .t .zh{display:none}
body.en .path .t .en{display:inline}
body.en .path .e{display:none}
/* 護持流程的步驟標記 */
.step{display:flex;align-items:center;gap:14px;margin:46px 0 16px;
padding-bottom:12px;border-bottom:1px solid #f0efec}
.step .n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#1d6a4f;
color:#fff;display:flex;align-items:center;justify-content:center;
font:600 15px/1 -apple-system,sans-serif;font-variant-numeric:tabular-nums}
.step h3{margin:0}
/* 迴向清單 */
.ded{list-style:none;margin:14px 0 18px;padding:0}
.ded li{position:relative;padding:9px 0 9px 26px;border-bottom:1px solid #f4f3f0}
.ded li:last-child{border-bottom:0}
.ded li::before{content:"";position:absolute;left:4px;top:18px;
width:6px;height:6px;border-radius:50%;background:#1d6a4f}
.ded b{color:#1d1d1f}
/* 第二層：迴向的三個場合 */
.ded2{list-style:none;margin:10px 0 2px;padding:0}
.ded2 li{position:relative;padding:5px 0 5px 20px;border:0;font-size:14.5px}
.ded2 li::before{content:"";position:absolute;left:2px;top:14px;
width:10px;height:1px;background:#c7c6c1;border-radius:0}
/* Apple 版的 hero 圖說：底下是白底，白字會完全看不見，
只在圖與標題之間留下一條莫名的空白。改成靜態定位、深灰字，貼在圖的正下方。 */
body.v-apple .heroimg{position:relative}
body.v-apple .hero .inner{padding-top:44px}
body.v-apple .heroshot{position:absolute;left:auto;right:16px;bottom:12px;z-index:2;
font-size:12px;line-height:1.3;letter-spacing:.02em;text-align:right;
color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);padding:3px 8px;border-radius:3px;
background:rgba(20,22,21,.38)}
@media(max-width:760px){body.v-apple .heroshot{right:12px;bottom:8px;font-size:11px}}
/* 手機瀏覽器的底部工具列會蓋住最後一行。
給頁尾補上安全區高度,捲到底時最後一行不會被吃掉。 */
footer{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px) + 44px)}
body{padding-bottom:env(safe-area-inset-bottom, 0px)}
/* 文中的滿版實景照 */
section.shot{padding:0;border-top:0}
section.shot figure{margin:0}
section.shot img{width:100%;height:clamp(300px,46vh,520px);object-fit:cover;display:block}
section.shot figcaption{font-size:13px;color:#6e6e73;padding-top:12px;padding-bottom:0}
section.shot+section{border-top:0;padding-top:76px}
@media(max-width:860px){
section.shot img{height:clamp(240px,38vh,360px)}
section.shot+section{padding-top:56px}
}
/* 偈子置中 */
blockquote{text-align:center}
.duo blockquote{margin-left:auto;margin-right:auto}
/* 頁尾首行：三行，每行各自不斷 */
footer .lead-line{text-align:center;line-height:1.9}
/* 「看完整園區規劃」按鈕在深色區塊裡要清楚 */
/* 權重要比 section.dark .btn（0,2,1）高，否則白底被深綠蓋掉、只剩黑字配深綠 */
section.dark .btn.btn-plan{background:#fff;color:#1d211f;font-weight:600;padding:15px 34px}
section.dark .btn.btn-plan:hover{background:#e9f3ee;color:#1d211f}
/* ══ 大事記：每一格照片改成可以左右滑的相簿列 ══
原本是攤開的格子，手機上看起來只是一堆縮圖。
改成一列、超出的往右滑，露出下一張的邊緣暗示「還有」，點任一張再開大圖。 */
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
max-width:none;padding:2px 2px 12px;margin:0 -2px;scrollbar-width:thin}
.strip::-webkit-scrollbar{height:4px}
.strip::-webkit-scrollbar-thumb{background:#d6d5d0;border-radius:4px}
.strip button{flex:0 0 auto;width:220px;scroll-snap-align:start}
.strip img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media(max-width:860px){
.strip{grid-template-columns:none}
/* 手機一次看到一張半，第二張露出一半,手指自然會往右滑 */
.strip button{width:68vw;max-width:300px}
}
/* 大標行距：兩行標題上下疊在一起（英文 g 的下伸部碰到下一行）。
中文襯線與英文都要留足。 */
.hero h1{line-height:1.24}
body.v-apple .hero h1{line-height:1.2}
h1 br+*,.hero h1{padding-bottom:.04em}
/* 護持方案的開場三句 */
.invite{text-align:center;margin:8px auto 34px;max-width:34em;
font-family:"Noto Serif TC",Georgia,serif;font-size:18px;line-height:2;color:#1d1d1f}
.invite p{margin:0}
/* 導覽列品牌名：中文 12px 太小，而且字距拉太開顯得細。
中文改用襯線、放大、字距收小；英文大寫維持小字寬字距。 */
.brand .zh{font-family:"Noto Serif TC",Georgia,serif;font-size:18px;
letter-spacing:.06em;font-weight:600;white-space:nowrap}
.brand .en{font-size:12.5px;letter-spacing:.16em}
@media(max-width:460px){
.brand .zh{font-size:16px;letter-spacing:.04em}
.brand .en{font-size:11px;letter-spacing:.1em}
}
/* ══ 內文字級整體放大 ══
中文在手機上 14–15px 太小（護持方案、抵稅、大事記說明原本都是 14–15px）。
原則：正文不低於 18px、次要說明不低於 16px、圖說不低於 14px。
只放大，不動行長與版面結構。 */
body{font-size:18px;line-height:1.75}
.lead{font-size:21px;line-height:1.75}
p,.muted{font-size:18px;line-height:1.8}
.fine,.fine p{font-size:16.5px;line-height:1.85}
table.acct{font-size:17px}
.era p{font-size:16.5px;line-height:1.8}
.cols p{font-size:16.5px;line-height:1.75}
.facil p{font-size:15.5px;line-height:1.7}
.facil h4{font-size:17px}
.ded li{font-size:16.5px;line-height:1.8}
.ded2 li{font-size:16px}
.invite{font-size:20px}
.cap{font-size:14px}
.sched .st{font-size:14.5px}
.path p{font-size:16px;line-height:1.75}
.gen p{font-size:17px}
.step h3{font-size:21px}
@media(max-width:860px){
body,p,.muted{font-size:17.5px}
.lead{font-size:19.5px}
.fine,.fine p,.era p,.cols p,.ded li{font-size:16.5px}
.invite{font-size:18.5px}
}
/* ══ 園區整體規劃圖（時程圖之後）══ */
.masterplan{margin:64px auto 0;max-width:720px;text-align:center}
.masterplan a{display:block;border-radius:14px;overflow:hidden;background:#fff;
box-shadow:0 1px 0 #e6e5e1;cursor:zoom-in}
.masterplan img{width:100%;height:auto;display:block}
.masterplan figcaption{margin-top:16px;font-size:14.5px;line-height:1.75;color:#6e6e73}
.masterplan figcaption b{display:block;font-size:17px;color:#1d1d1f;margin-bottom:4px;
font-family:"Noto Serif TC",Georgia,serif}
/* 四步驟圖少了每格說明，節點間距收緊一點 */
.path li{padding-bottom:0}
.path .e{margin-bottom:0}
/* 手機也維持橫排（業主要求）：蓋過上面 860px 的直排規則，節點縮小 */
@media(max-width:860px){
.path{grid-template-columns:repeat(4,minmax(0,1fr))}
.path::before{left:12.5%;right:12.5%;top:21px;bottom:auto;width:auto;height:2px;
background:linear-gradient(90deg,#e6e5e1 0%,#1d6a4f 100%)}
.path li{display:block;text-align:center;padding:0 2px}
.path .node{width:44px;height:44px;margin:0 auto 12px}
.path .node svg{width:44px;height:44px}
.path .t{font-size:16px}
.path .e{font-size:11.5px;letter-spacing:.02em}
/* 英文單字比 4 欄的欄寬還寬，縮字並允許斷行，避免標籤互相壓到 */
body.en .path .t{font-size:13px;letter-spacing:0;overflow-wrap:anywhere}
}
/* ══ 文中實景橫圖：不要裁 ══ */
section.shot img{height:auto;aspect-ratio:1800/994;max-height:82vh;object-fit:cover;object-position:center 55%}
/* ══ 手機 hero：仁波切坐在原圖寬度約 76–86% 處，置中裁切會切掉他 ══ */
@media(max-width:760px){
body.v-apple .heroimg{height:auto}
body.v-apple .hero img{height:auto;aspect-ratio:4/3;object-fit:cover;object-position:80% 70%}
}
/* 段落中的單張照片（深色區塊裡） */
.inline-photo{margin:0 auto 40px;max-width:560px}
.inline-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
.inline-photo figcaption{margin-top:10px;font-size:14px;color:#6e6e73}
section.dark .inline-photo figcaption{color:#9a9892}
/* ══════════════════════════════════════════════════════════
Design tokens（新增元件一律用這組，不要再寫死色碼）
綠：行動與進度（按鈕、進度條）。朱紅：點綴（小色條、年份、圖表重點），
取自僧袍與經幡，用量少，只做記號不做大面積。暖米：區塊底色，讓畫面不偏冷。
══════════════════════════════════════════════════════════ */
:root{
--ink:#1d1d1f; --ink-2:#6e6e73; --ink-3:#86868b;
--paper:#fff; --paper-warm:#f8f4ee; --line:#ebe5db;
--green:#1d6a4f; --green-2:#5d8a6e; --green-3:#a9bfa9;
--vermilion:#c4532f; --vermilion-soft:#e7a081; --saffron:#d9a441;
--dark:#1d211f;
}
section.tint{background:var(--paper-warm)}
section.tint+section.tint{border-top-color:var(--line)}
footer{background:var(--paper-warm);border-top:3px solid var(--vermilion)}
/* 小色條：每段眉標前一小段朱紅 */
.eyebrow::before{content:"";display:inline-block;width:18px;height:2px;border-radius:2px;
background:var(--vermilion);vertical-align:middle;margin:-2px 10px 0 0}
section.dark .eyebrow::before{background:var(--vermilion-soft)}
.hero .eyebrow::before{background:var(--vermilion)}
.era .when,.sched .when{color:var(--vermilion)}
section.dark .when{color:var(--vermilion-soft)}
/* ══ 本期護持項目圖表 ══ */
.budget{margin:6px 0 46px;padding:28px 26px 22px;background:var(--paper-warm);
border-radius:14px;border-top:3px solid var(--vermilion)}
.budget h3{margin:0 0 16px;text-align:center}
.budget h3 small{display:block;font-size:14px;font-weight:400;letter-spacing:.12em;color:var(--vermilion);margin-top:4px;font-family:-apple-system,BlinkMacSystemFont,"PingFang TC",sans-serif}
body.en .budget h3 .en{display:inline}
.bbar{display:flex;height:16px;border-radius:8px;overflow:hidden;gap:2px;margin-bottom:26px}
.bbar i,.budget li i{display:block}
.b1{background:var(--green)} .b2{background:var(--green-2)} .b3{background:var(--green-3)}
.b4{background:var(--saffron)} .b5{background:var(--vermilion)} .b6{background:var(--vermilion-soft)}
.btotal{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
padding:12px 0 4px;border-top:2px solid var(--ink);font-weight:600;color:var(--ink)}
.btotal b{font-variant-numeric:tabular-nums}
body.en .budget .btotal .en{display:inline}
.bgroup{margin-bottom:18px}
.bhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
padding-bottom:8px;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink)}
.bhead small,.budget li small{display:block;font-weight:400;font-size:.82em;color:var(--ink-3);margin-top:2px}
.bhead b,.budget li b{white-space:nowrap;font-variant-numeric:tabular-nums}
.budget ul{list-style:none;margin:0;padding:0}
.budget li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:12px;align-items:baseline;
padding:10px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink-2)}
.budget li:last-child{border-bottom:0}
.budget li i{width:10px;height:10px;border-radius:3px;transform:translateY(1px)}
.budget li b{color:var(--ink);font-weight:600}
.bnote{font-size:14.5px;color:var(--ink-3);margin:6px 0 0;line-height:1.7}
body .budget .en{display:none}
body.en .budget .en{display:inline}
body.en .budget .bhead .en,body.en .budget li .en{display:block}
body.en .budget .zh{display:none}
@media(max-width:560px){
.budget{padding:22px 16px 16px}
.budget li{font-size:15px}
}
/* 圖文並列裡的設計圖：不要套照片的 3:2 裁切，整張圖要看得到 */
.duo img.drawing{aspect-ratio:auto;height:auto;object-fit:contain;background:#fff}
/* ══ 護持開頭：目前最清楚的一步 ══ */
.clearstep{margin:0 0 64px;padding-bottom:56px;border-bottom:1px solid var(--line)}
.clearstep h2{margin-bottom:22px}
.clearstep h3{margin:34px 0 12px}
.clearstep p{color:var(--ink-2)}
.possible{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.possible li{position:relative;padding:12px 16px 12px 44px;background:var(--paper-warm);border-radius:10px;color:var(--ink)}
.possible li::before{content:"";position:absolute;left:18px;top:50%;width:12px;height:7px;
border-left:2px solid var(--vermilion);border-bottom:2px solid var(--vermilion);transform:translateY(-70%) rotate(-45deg)}
/* ══ 護持開頭：正式貼文摘錄 ══ */
.postlead{max-width:36em;margin:0 auto 56px;padding-bottom:48px;border-bottom:1px solid var(--line)}
.postlead h2{margin-bottom:26px}
.postlead p{color:var(--ink-2)}
.postlead .couplet{margin:34px 0;padding:22px 0;text-align:center;color:var(--ink);
font-family:"Noto Serif TC",Georgia,serif;font-size:clamp(21px,3.4vw,26px);line-height:1.8;
border-top:2px solid var(--vermilion);border-bottom:2px solid var(--vermilion)}
.postlead .invite-line{text-align:center;color:var(--ink);font-weight:600;margin-top:26px}
.clearstep .eyebrow{margin-bottom:18px}
/* ══ 分段只用底色，不用線條（業主要求）══
區塊之間靠 section.tint／section.dark 交替；元件內部也不再畫分隔線 */
section+section,section.tint+section.tint,section.dark+section{border-top:0}
.gen{border-bottom:0;padding:30px 0}
.step{border-bottom:0;padding-bottom:0}
.copy{border-top:0}
.postlead{border-bottom:0;padding-bottom:0}
.postlead .couplet{border:0;background:var(--paper-warm);border-radius:14px;padding:26px 16px}
.clearstep{border-bottom:0;background:var(--paper-warm);border-radius:18px;padding:36px 28px 18px}
.clearstep .possible li{background:var(--paper)}
@media(max-width:560px){.clearstep{padding:28px 18px 10px}}
section.tint .budget{background:var(--paper)}
.support-photo{margin:0 0 56px}
.support-photo img{width:100%;height:auto;border-radius:14px;display:block}
.support-photo figcaption{font-size:14px;color:var(--ink-3);margin-top:8px}
/* 同一欄疊第二張照片 */
.duo img.stacked{margin-top:24px}
.subhead{font-family:"Noto Serif TC",Georgia,serif;font-size:19px;color:var(--ink-2);margin:-6px 0 22px;letter-spacing:.04em}
.intl{margin-top:30px}
.intl h4{margin:0 0 6px;font-size:17px}
@media(max-width:560px){table.acct td:first-child{white-space:normal;width:40%;padding-right:10px}}
/* hero 按鈕下方留白：下一段是暖米色底，按鈕不可以貼著色塊 */
body.v-apple .hero .inner{padding-bottom:96px}
@media(max-width:760px){body.v-apple .hero .inner{padding-bottom:64px}}