body.cha-green-page header.cha-header{position:absolute;top:0;background:transparent;color:#293f30;border:0}
.cha-green-page .cha-header__inner{height:5.5rem;gap:1.2rem}
.cha-green-page .cha-nav a{font-size:1rem}
.green-page{background:#f8f5ed;color:#2e4334;font-family:var(--cha-font-serif);overflow:hidden}
/* ── 2026-10-01：总览页正文色统一（山雀定；先绿茶，10-01 铺至六类） ────────
   山雀指「卡片正文不该跟标题一样绿，整页一片绿」。实测根因：原正文 #737c68
   亮度 119 / 绿偏 +14.5，比站内最深正文色 #505b51（theme.css .cha-type small，
   首页六类茶卡）浅 32 级、绿 4 点。
   做法：给各类页定义 --cha-body，各正文选择器改用 var(--cha-body, 原色)；
   未定义该变量的页面 → 自动回落各自原色，**零模板改动、零串扰**
   （复用模板现成的 data-family 属性，六类 body class 完全相同、无法区分）。
   六类共用规则 .gv-process p 同样走 var() —— 绿茶页无 .gv-process 元素（走 stages
   版式），其余五类 Process 正文（旧 --nN 版式）由此一并纳入。
   六行显式分开写而非一条通配，便于将来按类微调。
   底注 .green-note / 编号 / 眉标属二级信息与装饰层，未纳入本轮。 */
.green-page[data-family="lvcha"]{--cha-body:#505b51}
.green-page[data-family="hongcha"]{--cha-body:#505b51}
.green-page[data-family="wulongcha"]{--cha-body:#505b51}
.green-page[data-family="baicha"]{--cha-body:#505b51}
.green-page[data-family="huangcha"]{--cha-body:#505b51}
.green-page[data-family="heicha"]{--cha-body:#505b51}

.green-page h1,.green-page h2,.green-page h3{font-weight:700;letter-spacing:.08em;line-height:1.4}
.green-hero{min-height:37rem;display:flex;align-items:center;background:linear-gradient(90deg,#f8f5eef5,#f8f5eec9 35%,#f8f5ee05 75%),url('../images/heroes/lvcha-hero.webp') center/cover}
.green-hero>.cha-shell{padding-block:7rem 3rem}
.green-breadcrumb{display:flex;gap:.7rem;font-size:.8rem;color:#75816c;margin-bottom:2rem}
.green-breadcrumb a{text-decoration:none}
.green-eyebrow{font-size:.8rem;letter-spacing:.2em;color:#869278}
.green-hero h1{font-size:clamp(4rem,7vw,6.5rem);margin:0;line-height:1.25}
.green-hero h2{font-size:1.9rem;margin:.5rem 0 1.3rem}
.green-hero__intro{font-size:1rem;line-height:2;max-width:31rem;color:var(--cha-body,#626f5b)}
.green-link{display:inline-flex;gap:1.4rem;font-size:.9rem;border-bottom:1px solid #9fa88e;padding:.4rem 0;text-decoration:none}
.green-section{margin-top:clamp(4rem,7vw,7rem)}
.green-heading{display:block;text-align:center;margin-bottom:2.5rem}
.green-heading h2{font-size:clamp(1.8rem,3vw,2.5rem);margin:0}
.green-heading p{color:var(--cha-body,#828575);font-size:.9rem;margin:.8rem 0 0}
.green-intro-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.green-intro-card{position:relative;isolation:isolate;padding:1.5rem 1rem;border:1px solid #dfd4bf;border-radius:18px 9px 16px 8px;background:#fbf8f0}
.green-intro-card__head{display:flex;align-items:center;gap:.75rem;margin-bottom:1.2rem}
.green-intro-image{display:block;flex:0 0 auto;width:7rem;height:7rem;object-fit:contain;border-radius:50%;margin:0}
.green-intro-card__title{min-width:0}
.green-intro-card h3{font-size:1.05rem;letter-spacing:.02em;margin:0;white-space:nowrap}
.green-intro-card__character{display:block;margin-top:.25rem;font-family:KaiTi,STKaiti,var(--cha-font-serif);font-size:3.1rem;line-height:1.1;color:#c2a576;opacity:.55;pointer-events:none;user-select:none}
.green-intro-card p{font-size:.9rem;color:#747c69;line-height:1.9}
.green-intro-card small{color:#a28658;font-size:.8rem}
.green-shapes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem}
.green-shape{font:inherit;background:#fbf8f0;border:1px solid #dfd4bf;color:inherit;padding:1.3rem .8rem;text-align:center;cursor:pointer}
.green-shape>strong,.green-shape>span:not(.green-leaf),.green-shape>small{display:block}
.green-shape strong{font-size:1.05rem;margin:.8rem 0 .4rem}
.green-shape>span:not(.green-leaf){font-size:.85rem;color:#78806c}
.green-shape small{font-size:.75rem;margin-top:1rem}
.green-shape-image{display:block;width:min(100%,9rem);height:auto;aspect-ratio:1;object-fit:contain;border-radius:50%;margin:0 auto 1rem}
.green-note{font-size:.8rem;color:#8b8e7b;line-height:1.8;margin-top:1.5rem}
.green-regions{padding-block:3rem;background:#eeeee2}
.green-regions__layout{display:grid;grid-template-columns:minmax(9rem,1fr) minmax(0,2.6fr) minmax(9rem,1fr);gap:1.5rem;align-items:center}
.green-regions__map{grid-column:2;grid-row:1 / 3;margin:0}
.green-regions__map img{display:block;width:100%;height:auto}
.green-regions__scene{background:url('../images/culture-landscape-sept7.png') center/cover;min-height:20rem}
.green-regions__list{display:contents}
.green-regions__list button:nth-child(1){grid-column:1;grid-row:1}
.green-regions__list button:nth-child(2){grid-column:3;grid-row:1}
.green-regions__list button:nth-child(3){grid-column:1;grid-row:2}
.green-regions__list button:nth-child(4){grid-column:3;grid-row:2}
.green-regions__list button{font:inherit;text-align:left;position:relative;cursor:pointer;border:0;border-bottom:1px solid #d0d6bd;background:transparent;color:inherit;padding:1.2rem .5rem}
.green-regions__list strong{display:block;font-size:1.3rem}
.green-regions__list span{font-size:.85rem;display:block;margin-top:.6rem;color:#737d65}
.green-regions__list b{position:absolute;right:.8rem;top:.8rem;font-weight:400}
.green-page button[aria-pressed=true]{border-color:#526a43;box-shadow:inset 0 0 0 1px #526a43;background:#e4e9d8}
.green-filter-bar:not(:has(button:not([hidden]))){display:none}
.green-filter-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;font-size:.85rem}
.green-filter-bar button{font:inherit;color:#47643d;border:0;background:none;text-decoration:underline;cursor:pointer}
.green-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.green-tea{display:grid;grid-template-columns:6rem 1fr;gap:1.3rem;padding:1.5rem;border:1px solid #e3ddcf;background:#fcfaf5;align-items:center}
.green-tea[hidden]{display:none}
.green-tea__media{width:100%;min-width:0}
.green-tea__placeholder{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;font-size:2.4rem;background:#eeeee1;color:#879572}
.green-tea__image{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;background:#eeeee1}
.green-tea h3{font-size:1.25rem;margin:0}
.green-tea p{font-size:.875rem;color:#707a64;line-height:1.8;margin:.5rem 0 0}
.green-tea__region{font-size:.8rem!important}
.green-tea__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.green-tea__tags span{font-size:.75rem;padding:.1rem .6rem;border:1px solid #e0dccb;color:#82856d}
.green-closing{text-align:center;margin-top:5rem;padding:4rem 1rem;background:linear-gradient(#f8f5eecf,#f8f5eebf),url('../images/hero-sept7.png') center 65%/cover}
.green-closing h2{font-size:1.5rem}.green-closing p{color:#7a826c;font-size:.9rem}
.green-page a:focus-visible,.green-page button:focus-visible{outline:2px solid #526a43;outline-offset:4px}
@media(min-width:64.01rem) and (max-width:76rem){.green-intro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:38rem){.green-intro-grid{grid-template-columns:1fr!important}.green-intro-image{width:7.5rem;height:7.5rem}.green-intro-card__head{gap:1.2rem}.green-intro-card h3{font-size:1.15rem}}
@media(max-width:48rem){.green-page .green-regions__layout{grid-template-columns:1fr 1fr}.green-regions__map{grid-column:1 / -1;grid-row:1}.green-regions__list button:nth-child(1){grid-column:1;grid-row:2}.green-regions__list button:nth-child(2){grid-column:2;grid-row:2}.green-regions__list button:nth-child(3){grid-column:1;grid-row:3}.green-regions__list button:nth-child(4){grid-column:2;grid-row:3}}
@media(max-width:64rem){.green-intro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.green-shapes{grid-template-columns:repeat(3,minmax(0,1fr))}.green-regions__layout{gap:1.5rem}.green-regions__list{grid-template-columns:1fr}.green-tea{grid-template-columns:4rem 1fr;padding:1rem;gap:1rem}}
@media(max-width:48rem){.cha-green-page .cha-header__inner{height:5rem}.green-hero{min-height:33rem}.green-hero__intro br{display:none}.green-hero__intro{max-width:85%}.green-intro-grid{gap:.7rem}.green-intro-card{padding:1.3rem 1rem}.green-shapes{grid-template-columns:repeat(2,minmax(0,1fr))}.green-regions__layout,.green-catalog{grid-template-columns:1fr}.green-regions__scene{min-height:15rem}.green-regions__list{grid-template-columns:1fr 1fr}.green-closing h2{font-size:1.2rem}}
.green-shapes + .green-note{text-align:center}
.green-catalog-more{text-align:center;padding:2rem 1.5rem 6rem}
.green-catalog-more .cha-text-link{padding-bottom:.3rem;border-bottom:1px solid #a6ac9c;letter-spacing:.08em}

/* Green overview V2 only: do not alter shared list/detail layouts. */
.green-v2 .green-section{margin-top:clamp(4.5rem,7vw,7.5rem)}
.green-v2 .green-heading{margin-bottom:3rem}
.green-v2 .cha-text-link{display:inline-flex;align-items:center;gap:1.5rem;padding:.45rem 0;border-bottom:1px solid #a6ac9c;text-decoration:none;font-size:.9rem}
.green-v2 .green-note{text-align:center;max-width:52rem;margin:1.8rem auto 0}
.gv-introduction{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem)}
.gv-introduction__story{position:relative;isolation:isolate;min-width:0;padding:2.5rem 37% 2.5rem 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.gv-kicker{font-size:.8rem;letter-spacing:.22em;color:#939e82}
.gv-introduction__story h3{font-size:clamp(1.75rem,2.5vw,2.25rem);color:var(--moss,#526656);margin:1.1rem 0 1.5rem}
.gv-introduction__story p{font-size:.95rem;line-height:2;color:var(--cha-body,#727b67);margin:0 0 1rem}
.gv-introduction__story .cha-text-link{margin-top:1rem}
.gv-sprig{position:absolute;z-index:-1;width:35%;right:0;top:50%;transform:translateY(-50%);opacity:.8;pointer-events:none}
.gv-sprig svg{display:block;width:100%;height:auto}
.gv-introduction__list{border-left:1px solid #e5e0d2;padding-left:clamp(1.5rem,3vw,3rem)}
.gv-intro-row{display:grid;grid-template-columns:2.8rem 5.5rem minmax(0,1fr);align-items:center;gap:1rem;padding:1.15rem 0;border-bottom:1px solid #e5e0d2}
.gv-intro-row:first-child{padding-top:0}.gv-intro-row:last-child{padding-bottom:0;border-bottom:0}
.gv-intro-row__character{font-size:2.7rem;line-height:1;color:#929e78}
.gv-intro-row img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--cha-card-radius)}
.gv-intro-row h3{font-size:1rem;margin:0 0 .5rem}
.gv-intro-row p{font-size:.875rem;line-height:1.85;color:var(--cha-body,#78806d);margin:0}
.gv-six-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.4rem;text-align:center}
.gv-catalog{grid-template-columns:repeat(4,minmax(0,1fr))}
.gv-six-grid h3{font-size:1.05rem;margin:1rem 0 .5rem;letter-spacing:.03em}
.gv-six-grid p{font-size:.82rem;line-height:1.85;color:var(--cha-body,#78806d);margin:0}
.gv-icon-disc{width:min(100%,8rem);aspect-ratio:1;margin:auto;display:grid;place-items:center;border-radius:50%;background:#f0f0e5;border:1px solid #e3e3d4}
.green-v2 .gv-icon-disc .td-trait-icon{position:static;transform:none;display:block;width:48%;height:auto;max-width:none;color:#87966c}
.gv-process-section{padding:3rem 0;background:#f1f0e7}
.gv-process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.gv-process__art{aspect-ratio:16/10;border:1px solid #dfdfce;border-radius:var(--cha-card-radius);background:#f8f6ee;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#87966c}
.gv-process__art svg{width:65%;height:auto;max-height:75%}
.gv-process__art span{font-size:.75rem;letter-spacing:.2em;margin:.3rem 0 .6rem;color:#9a9f88}
.gv-process h3{font-size:1.2rem;margin:1.2rem 0 .6rem}
.gv-process h3>span{font-size:.8rem;font-weight:400;margin-right:.5rem;color:#919b82}
.gv-process p{font-size:.9rem;line-height:1.9;margin:0;color:var(--cha-body,#737c68)}
.gv-tea{display:block;min-width:0;color:inherit;text-decoration:none;padding:.5rem .2rem}
.gv-tea__image{aspect-ratio:1;width:100%;border-radius:50%;overflow:hidden;background:#efeee2;display:grid;place-items:center;border:1px solid #e0dfcf;transition:transform .3s ease,box-shadow .3s ease}
.gv-tea__image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.gv-tea__initial{font-size:3rem;color:#a2ad8e}
.gv-tea h3{transition:color .25s ease}
.gv-tea small{display:block;font-size:.8rem;margin-top:.3rem;color:#909580}
.gv-tea__arrow{display:block;margin-top:.65rem;color:#8f9a7a;transition:transform .25s ease}
.gv-tea:is(:hover,:focus-visible) h3{color:#997443}
.gv-tea:is(:hover,:focus-visible) .gv-tea__image{transform:translateY(-4px);box-shadow:0 8px 20px #47582b10}
.gv-tea:is(:hover,:focus-visible) img{transform:scale(1.045)}
.gv-tea:is(:hover,:focus-visible) .gv-tea__arrow{transform:translateX(4px)}
.gv-more{text-align:center;margin-top:2.3rem}
/* Regions 版式（2026-10-01）：桌面「左·地图 58–62% + 右·单列省级列表 38–42%」（1.5:1 = 60%:40%）。
   地图只作省级视觉索引：contain 不裁切，max-width:100% 保证窄容器内仍完整可见。 */
.gv-region-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(2rem,4vw,4.5rem);align-items:center}
.gv-region-map{margin:0;display:grid;place-items:center}
.gv-region-map img{width:100%;height:auto;max-width:100%;display:block;object-fit:contain}
.gv-region-note{display:flex;align-items:flex-start;gap:.8rem;padding:1.3rem 0;border-bottom:1px solid #e1dfd0}
.gv-region-note:last-child{border-bottom:0}
.gv-region-note>span{border:1px solid #c6ceb7;border-radius:50%;width:1.8rem;height:1.8rem;display:grid;place-items:center;font-size:.8rem;color:#8b9876;flex-shrink:0}
.gv-region-note h3{font-size:1.05rem;margin:0 0 .5rem}
.gv-region-note p{margin:0;color:var(--cha-body,#818871);font-size:.9rem;line-height:1.8}
.gv-brewing{padding-bottom:clamp(4rem,7vw,7rem)}
.gv-brew-item__art{aspect-ratio:1.2;background:#f6f3eb;border:1px solid #e5e0d4;border-radius:var(--cha-card-radius);display:grid;place-items:center;color:#8b9978}
.gv-brew-item__art svg{width:85%;height:auto}
/* Brewing 卡文案分层（2026-10-01 内容升级）：卡名（带序号）→ 参数主句 → 解释，三层。
   原先是「主句<br>次句」两行同字号小字，读者读不出哪句是能直接照做的参数。
   ⚠️ 特异性纪律：基础规则 `.gv-six-grid p` 是 (0,1,1)，故参数 / 解释的选择器必须写到
      (0,2,0) 才压得住；且 `.gv-six-grid` 同时被 Catalog 段复用，
      **禁改基础 `.gv-six-grid p` / `.gv-six-grid h3`**（会连带 6 张茶卡，铁律 49/50）。
   `__param` 的 min-height 取两行 —— 六卡参数句长短不一，留定高才能让下方解释起点齐平。 */
.gv-six-grid .gv-brew-item h3{font-size:1.02rem;margin:1rem 0 .55rem}
.gv-brew-item h3>span{font-size:.76rem;font-weight:400;letter-spacing:.16em;color:#997443;margin-right:.42rem}
.gv-six-grid .gv-brew-item__param{font-size:.95rem;font-weight:700;line-height:1.72;color:#3f5140;margin:0 0 .5rem;min-height:3.44em;text-wrap:balance}
.gv-six-grid .gv-brew-item__desc{font-size:.8rem;line-height:1.85;color:var(--cha-body,#78806d);margin:0;text-wrap:balance}
/* Brewing 六格列数（2026-10-01）：桌面 6 列 → 3 列 × 2 行。
   为什么必须改列数：桌面 6 列时每列只有 184px（1440）/ 170px（1180），而冻结稿最长的
   参数主句 28 字（黄茶「细嫩黄茶可从约 1:50 起步，成熟叶料可提高到约 1:30。」），
   184px ÷ 15.2px ≈ 12 字/行 → 必然 3 行、且末行只剩 1–2 字（实测「点。」「始。」），
   同时踩「参数 ≤2 行」与「正文无孤字尾行」两条验收。3 列时列宽 ≈380px → 参数一律 ≤2 行。
   六格形态（图上文下、六项并列）不变，只换行方式。
   ⚠️ 必须写成 (0,2,0)：基础 .gv-six-grid 自带 64rem→3 列、48rem→2 列的同权重规则，
      同权重下「后写的媒体查询」会反压，所以断点必须在本段内显式重申。
   ⚠️ 只挂 --brew，**禁改基础 .gv-six-grid**（Catalog / Tasting 段共用，铁律 49）。 */
.gv-six-grid.gv-six-grid--brew{grid-template-columns:repeat(3,minmax(0,1fr));gap:3.5rem 3rem}
.gv-six-grid--brew .gv-brew-item{position:relative;min-width:0;text-align:center;padding-inline:1rem}
.gv-six-grid--brew .gv-brew-item__art{position:relative;width:7.5rem;max-width:100%;aspect-ratio:1;margin-inline:auto;background:transparent;border:0;border-radius:0;color:#687c5d}
.gv-six-grid--brew .gv-brew-item__art :is(svg,img){display:block;width:100%;height:100%;object-fit:contain}
.gv-six-grid--brew .gv-brew-item:not(:nth-child(3n))::after{content:"";position:absolute;top:3.7rem;left:calc(50% + 4.4rem);width:calc(100% - 5.8rem);height:1rem;border-top:1px solid #c7cdb5;border-radius:50%;pointer-events:none}
.gv-six-grid--brew .gv-brew-item h3{margin:.8rem 0 .65rem}
.gv-six-grid--brew .gv-brew-item__param{min-height:0;max-width:22rem;margin:0 auto .6rem}
.gv-six-grid--brew .gv-brew-item__desc{max-width:22rem;margin-inline:auto}
@media(max-width:48rem){.gv-six-grid--brew{grid-template-columns:1fr;gap:2.5rem}.gv-six-grid--brew .gv-brew-item::after{display:none}.gv-six-grid--brew .gv-brew-item__art{width:6.5rem}}
@media(max-width:48rem){.gv-six-grid.gv-six-grid--brew{grid-template-columns:minmax(0,1fr);gap:2.5rem}}
/* ≤30rem（480px）：2 列再降到 1 列。实测 390px 时列宽只剩 169px，最长参数句 26 字
   被迫排 3 行、末行只剩 2 字（乌龙「……是常见起点。」），标题+参数+正文三挤。
   max-width 让 1 列不至于被平板竖屏拉得过宽。 */
@media(max-width:30rem){.gv-six-grid.gv-six-grid--brew{grid-template-columns:minmax(0,1fr);gap:2.2rem;max-width:26rem;margin-inline:auto}}
@media(max-width:64rem){
 .gv-introduction{gap:2rem}.gv-introduction__story{padding-right:30%}.gv-sprig{width:30%}
 .gv-intro-row{grid-template-columns:2rem 4rem minmax(0,1fr);gap:.7rem}.gv-intro-row__character{font-size:2rem}
 .gv-six-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 1.5rem}
 .gv-tea__image{max-width:10rem;margin:auto}.gv-brew-item__art{max-width:10rem;margin:auto}
 .gv-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .gv-region-layout{gap:1.5rem;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
}
@media(max-width:48rem){
 .gv-introduction{grid-template-columns:1fr}.gv-introduction__story{padding:1rem 33% 1rem 0}
 .gv-sprig{width:30%;max-height:100%}.gv-introduction__list{border-left:0;padding:1.5rem 0 0;border-top:1px solid #e5e0d2}
 .gv-intro-row{grid-template-columns:2.2rem 4.5rem minmax(0,1fr);gap:.9rem}
 .gv-region-layout{grid-template-columns:1fr;gap:1.5rem}.gv-region-map{max-width:38rem;margin-inline:auto}
 .gv-region-note{padding:1rem 0}.gv-process-section{padding-block:2.5rem}
}
@media(max-width:30rem){
 .gv-six-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 1rem}
 .gv-process-grid{gap:1.5rem 1rem}.gv-process h3{font-size:1.1rem}.gv-process p{font-size:.85rem}
 .gv-introduction__story h3{font-size:1.6rem}.gv-introduction__story p{font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){.green-v2 *, .green-v2 *:before,.green-v2 *:after{transition:none!important;scroll-behavior:auto!important}}
/* Intro: quiet lower-left landscape, text-only rows on the right. */
.green-v2 .gv-introduction__story{padding:1.5rem 1.5rem 8rem 0;justify-content:flex-start}
.green-v2 .gv-introduction__story:before{content:"";position:absolute;z-index:-1;left:0;bottom:0;width:100%;height:13rem;background:var(--family-intro-bg,none) right bottom/cover no-repeat;transform:scaleX(-1);opacity:.32;pointer-events:none;mask-image:linear-gradient(to top,#000,transparent 96%)}
.green-v2 .gv-intro-row{grid-template-columns:4.75rem minmax(0,1fr);align-items:center;gap:1.6rem;padding-block:1.4rem}
.gv-intro-row__icon{display:block;width:4.75rem;height:4.75rem;color:#82916c}
.gv-intro-row__icon svg{display:block;width:100%;height:100%}
.gv-intro-row__icon img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0}
.gv-icon-disc{overflow:hidden}
.gv-icon-disc img{display:block;width:100%;height:100%;object-fit:cover}
.green-page[style*="--family-hero"]>.green-hero{background-image:linear-gradient(90deg,#f8f5eef5,#f8f5eec9 35%,#f8f5ee05 75%),var(--family-hero)}
.family-preview-note{margin-top:2rem;padding:1rem;border:1px dashed #b5ad93;border-radius:var(--cha-card-radius);font-size:.9rem;color:#847450;line-height:1.8}
.green-v2 .gv-intro-row:first-child{padding-top:.25rem}
.green-v2 .gv-intro-row:last-child{padding-bottom:.25rem}
.green-v2 .gv-intro-row h3{font-size:1.1rem}
.green-v2 .gv-intro-row p{font-size:.9rem}
@media(max-width:48rem){
 .green-v2 .gv-introduction__story{padding:1rem 0 7rem}
 .green-v2 .gv-introduction__story:before{height:11rem}
 .green-v2 .gv-intro-row{grid-template-columns:3.5rem minmax(0,1fr);gap:1rem}
 .gv-intro-row__icon{width:3.5rem;height:3.5rem}
}
.green-v2 .gv-introduction__story:before{height:100%;background:var(--family-intro-bg,none) left bottom/100% auto no-repeat;transform:none;opacity:.65;mask-image:none}

/* Composition: sensory causes first, body information kept secondary. */
.gv-composition-bridge{position:relative;max-width:42rem;margin:2.5rem auto 0;padding-top:1.2rem;text-align:center;font-size:.86rem;line-height:1.9;color:var(--cha-body,#8a907d);letter-spacing:.02em}
.gv-composition-bridge:before{content:"";position:absolute;left:50%;top:0;width:3.5rem;height:1px;background:#d8d9c9;transform:translateX(-50%)}
.gv-composition-section{position:relative}
.gv-composition-section .gv-composition{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,4vw,4rem);align-items:stretch}
.gv-composition-section .gv-composition__visual{min-height:0;display:block;border-radius:0;overflow:hidden}
.gv-composition-section .gv-composition__visual:before{display:none}
.gv-composition-section .gv-composition__cup{position:absolute;inset:0;display:block;width:100%;max-width:none;height:100%;aspect-ratio:auto;object-fit:cover;object-position:70% center;border-radius:0;box-shadow:none}
@media(max-width:48rem){.gv-composition-section .gv-composition{grid-template-columns:1fr;gap:2rem}.gv-composition-section .gv-composition__visual{width:min(100%,28rem);max-width:none;margin-inline:auto}.gv-composition-section .gv-composition__cup{position:static;height:auto;aspect-ratio:3/5;object-fit:contain}}
.gv-composition{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);gap:clamp(2.5rem,5vw,6rem);align-items:center}
.gv-composition__visual{position:relative;isolation:isolate;min-height:29rem;margin:0;display:grid;place-items:center;overflow:hidden}
.gv-composition__visual:before{content:"";position:absolute;z-index:-2;inset:8% 2% 4%;background:radial-gradient(circle at 45% 50%,#e8ebd9 0,#f4f2e8 47%,transparent 72%);opacity:.85}
.gv-composition__cup{display:block;width:min(78%,25rem);height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 1.5rem 4rem #7c866317}
.gv-composition__list{border-top:0}
.gv-composition__list>.gv-component-row:last-child{border-bottom:0}
.gv-component-row{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:1.25rem;align-items:start;padding:1.2rem 0;border-bottom:1px solid #e0e1d3}
.gv-component-row__index{display:grid;place-items:center;width:2.2rem;height:2.2rem;margin-top:.1rem;border:1px solid #cfd5bf;border-radius:50%;font-size:.7rem;letter-spacing:.08em;color:#82906f;background:#f9f7ef}
.gv-component-row__icon{display:grid;place-items:center;width:3.9rem;height:3.9rem;color:#687c5d}
.gv-component-row__icon :is(svg,img){display:block;width:100%;height:100%;object-fit:contain}
.gv-component-row h3{font-size:1.04rem;margin:0 0 .38rem;letter-spacing:.025em}
.gv-component-row p{font-size:.86rem;line-height:1.82;color:var(--cha-body,#77806d);margin:0}
.gv-composition__body-note{display:grid;grid-template-columns:2.7rem auto minmax(0,1fr);gap:1rem 1.25rem;align-items:center;margin-top:2.4rem;padding:1.05rem 1.35rem;background:#eef0e4;border-top:1px solid #dde2d1;border-bottom:1px solid #dde2d1}
.gv-composition__body-mark{display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid #cbd4bb;border-radius:50%;font-family:KaiTi,STKaiti,var(--cha-font-serif);color:#758665;background:#f6f5ed}
.gv-composition__body-note h3{font-size:1rem;margin:0;white-space:nowrap}
.gv-composition__body-note p{font-size:.82rem;line-height:1.85;color:var(--cha-body,#757e6b);margin:0}
@media(max-width:64rem){
 .gv-composition{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:2.25rem}
 .gv-composition__visual{min-height:24rem}.gv-composition__cup{width:min(82%,21rem)}
}
@media(max-width:48rem){
 .gv-composition{grid-template-columns:1fr;gap:1.8rem}.gv-composition__visual{min-height:22rem;max-width:34rem;width:100%;margin-inline:auto}
 .gv-composition__cup{width:min(72%,20rem)}
 .gv-composition__body-note{grid-template-columns:2.5rem minmax(0,1fr);gap:.65rem 1rem}.gv-composition__body-note p{grid-column:1/-1;padding-left:0}
}
@media(max-width:30rem){
 .gv-composition-bridge{padding-inline:.5rem}.gv-composition__visual{min-height:19rem}.gv-composition__cup{width:min(78%,18rem)}
 .gv-component-row{grid-template-columns:2.75rem minmax(0,1fr);gap:.8rem;padding:1rem 0}
 .gv-component-row__index{width:2rem;height:2rem}.gv-component-row h3{font-size:1rem}.gv-component-row p{font-size:.84rem}
 .gv-composition__body-note{padding:1rem}.gv-composition__body-note h3{font-size:.96rem}
}


/* Region layout variants — 无类特异地图时不给空图位，省级列表铺满（--nomap）；禁空列。
   ⚠️ --single 已于 2026-10-01 随版式改造移除（模板不再输出该 class，规则同轮删除，勿按旧稿恢复）。 */
.gv-region-layout--nomap{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:2rem clamp(2rem,5vw,4rem);align-items:start}

/* ── 2026-09-29 PAGE-FIRST：六类总览页共用变体 ───────────────────────────────
   ① Process 列数跟随真实条目数（2 / 3 / 4 / 5），禁空列；无线稿的茶类走文字卡；
   ② Introduction 无类特异图时不保留为底图预留的空白，行首改用「字徽」（字符，非图片）；
   ③ Composition 无类特异图时不渲染视觉列，列表占满。
   ⚠️ 本区块必须留在文件最末：与上方同选择器同权重时「文件位置靠后者胜」。 */
@media(min-width:64.01rem){
 .gv-process-grid--n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:44rem;margin-inline:auto}
 .gv-process-grid--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
 .gv-process-grid--n5{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.4rem}
}
@media(max-width:64rem){
 .gv-process-grid--n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
 .gv-process-grid--n5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:48rem){
 .gv-process-grid--n3,.gv-process-grid--n5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.gv-process--plain>.gv-process{border-top:1px solid #dfdfce;padding-top:1.15rem}
.gv-process--plain>.gv-process>h3{margin-top:0}
.green-v2 .gv-introduction--plain .gv-introduction__story{padding-bottom:2.5rem}
.green-v2 .gv-introduction--plain .gv-intro-row{padding-block:1.2rem}
@media(max-width:48rem){
 .green-v2 .gv-introduction--plain .gv-introduction__story{padding-bottom:1.5rem}
}
.gv-composition--novisual{grid-template-columns:minmax(0,1fr)}
.gv-composition--novisual .gv-composition__list{max-width:52rem;margin-inline:auto}
.gv-composition__lead{font-size:.9rem;line-height:1.95;color:var(--cha-body,#7c8570);margin:0 0 1.4rem}
.gv-composition__lead p{margin:0}
.gv-composition__lead p+p{margin-top:.7rem}


/* ── 2026-09-30：Introduction 左下山水底景 = 六类共享横向素材 ──────────────────
   素材 assets/images/shared/intro-background.webp（1000x500 / 2:1 / 含透明通道）。
   布局意图：贴左下角、contain 不裁、保留原始横向构图（左重右轻）、底部对齐、
   无蒙版（图自带透明过渡，去 mask 后仍无硬边）；高度恒小于 story 的下内边距，因此**永不压到正文**。
   ⚠️ 上方三段 `.green-v2 .gv-introduction__story:before`（行 156 / 171 / 175）是
      旧 4:3 不透明底图时代的叠加规则，已被本段全部取代（同权重靠后者胜）。
      要调底图请只改本段；勿再按旧规则里的 cover / scaleX(-1) / height:100% 去理解。
   ⚠️ 本段必须留在文件最末。 */
.green-v2 .gv-introduction__story{padding-bottom:16.5rem}
.green-v2 .gv-introduction__story:before{content:"";position:absolute;z-index:-1;left:0;bottom:0;width:100%;height:14.5rem;background:var(--family-intro-bg,none) left bottom/100% auto no-repeat;opacity:.9;pointer-events:none;mask-image:linear-gradient(to bottom,transparent,#000 25%),linear-gradient(to right,#000 94%,transparent);mask-composite:intersect}
@media(max-width:48rem){
 .green-v2 .gv-introduction__story{padding-bottom:11.75rem}
 .green-v2 .gv-introduction__story:before{height:10.5rem}
}
/* ── 2026-10-01：绿茶 Process 去框化 + 图位加高 ──────────────────────────
   命题不变（「绿茶怎么做出来的」= 摊放 → 杀青 → 揉捻做形 → 干燥 四道工序）。
   ① 去框：撤销上一版落的「外卡框 + 图片内框 + 药丸标签框」三层框 ×4 组，
      改为「默认不画框」纪律 —— 图片 / 编号 / 标题 / 标签 / 正文一律直接落在版式上，
      分组只靠「列宽 + 行距 + 留白」建立（一级内容无框）。
   ② 图位加高（4:3 → 4:5，240×180 → 240×300）：实测原图只占卡高 54–65%，
      撑场的是右侧文字栏，图显小；加高后图占卡高 91%，图文重量对等。
   流程感仍靠编号与 Z 序（01 02 / 03 04），不画箭头、不做流程线。
   ⚠️ 图位契约：桌面严格 240×300（15rem，4:5），移动 ≤336px（21rem，同比例）。
   ⚠️ 只给绿茶启用（copy.process.layout==='stages'）；其余五类沿用旧 --nN 版式。
      本段**不得**改 .gv-process-grid--n4 —— 黑茶同为 4 项，会被一起带跑。
   ⚠️ 本段必须留在文件最末（同权重靠后者胜）。 */
.gv-process-grid--stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4.25rem 4rem}
.gv-process-card{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:2.2rem;align-items:start;min-width:0}
.gv-process-card>div{min-width:0;overflow-wrap:anywhere}
.gv-process-card__art{position:relative;width:100%;aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden}
.gv-process-card__art img{display:block;width:100%;height:100%;object-fit:contain}
.gv-process-card__no{font-size:.82rem;letter-spacing:.24em;color:#9aa58a;margin:0 0 .5rem}
.gv-process-card h3{font-size:1.4rem;line-height:1.4;margin:0 0 .9rem}
/* 正文行宽上限 27rem ≈ 30 个汉字/行（中文舒适区）。
   单列档（≤64rem）时正文栏会被拉到 700px+ ≈ 48 字/行，过长难读，故此处封顶；
   桌面双列时正文栏本就只有 ~300px，此规则不触发。 */
.gv-process-card__desc{font-size:.9rem;line-height:1.95;color:var(--cha-body,#737c68);margin:0;max-width:27rem}
/* 图位占位：仅当该卡尚无真实图时出现；落图后 data-slot 消失、占位自动失效。
   ⚠️ 施工脚手架，不是设计元素 —— 用 outline（不占盒模型）提示 240×300 的占位，
      落图即消失；**不得**在此加 border/背景，否则又变成"框"。 */
.gv-process-card__art[data-slot]{outline:1px dashed #d8dac9}
.gv-process-card__art[data-slot]:after{content:"图位 " attr(data-slot) "　4:5";font-size:.72rem;letter-spacing:.14em;color:#c2c6b4}
@media(max-width:64rem){
 /* 单列档：图 240 + 间距 + 正文 ≤27rem 收成一个块并整体居中，
    否则正文封顶后右侧会空出 270px+，整块偏左显得没做完 */
 .gv-process-grid--stages{grid-template-columns:minmax(0,1fr);gap:3.5rem}
 .gv-process-card{grid-template-columns:15rem minmax(0,27rem);justify-content:center}
}
@media(max-width:48rem){
 /* 堆叠档：图与正文同宽同位（21rem）并一起居中。
    图收 21rem 是 4:5 加高的连带结果 —— 若沿用 26rem(416px)，按 4:5 会到 520px 高，
    手机上单图占掉大半屏；正文同收 21rem 才能与图左右边缘对齐。 */
 .gv-process-card{grid-template-columns:minmax(0,1fr);gap:1.35rem;justify-items:center}
 .gv-process-card__art{max-width:21rem;margin-inline:auto}
 .gv-process-card__body{width:100%;max-width:21rem}
 .gv-process-card__desc{max-width:100%}
}
@media(max-width:30rem){
 .gv-process-card h3{font-size:1.2rem}
 .gv-process-card__desc{font-size:.85rem}
}

/* ── 2026-10-01：Process 底注字号 +1 档（山雀：太小了） ──────────────────────
   ⚠️ 选择器只能写 .gv-process-grid--stages + .green-note —— 它只命中绿茶（实测六类里
      仅绿茶的 stages 网格紧邻底注，其余五类相邻命中数为 0）；
      不能写 .gv-process-section，那是六类共用 section，会连带放大红/乌/白/黄/黑。
   0.8rem → 0.9rem（+12.5%，与正文 desc 同级）。 */
.gv-process-grid--stages + .green-note{font-size:.9rem}
/* ── 2026-10-01：Process 六类铺开（卡数 4 / 4 / 5 / 2 / 4 / 4）─────────────────
   背景：六类 process 文案冻结（绿茶 → 黑茶，见 inc/tea-overview-copy.php 单一真值），
   stages 版式从「仅绿茶」升为六类通用。卡数不同 → 栅格必须按 data-proc-n 分档，
   不允许为了复用绿茶 2×2 而删文案或伪造工序（山雀实施说明第 5/6 条）。
   ① 4 卡（绿 / 红 / 黄 / 黑）：2×2，沿用绿茶已验证的节奏。
   ② 2 卡（白茶）：单列通栏 —— 「两张更宽、更有分量的知识单元」，图位放大到 20rem，
      正文放宽到 34rem（两段式正文需要更长行宽才不显碎）。
   ③ 5 卡（乌龙）：2 + 2 + 1 —— 末张（干燥）通栏收尾，不机械塞成四列/五列。
   ④ 多段正文（白 / 黄 / 黑部分卡）：相邻 p 之间给留白，不并成一坨。
   ⚠️ 本段必须留在文件最末（同权重靠后者胜），且选择器带 [data-proc-n] 才够特异性
      压过上方桌面基础规则。
   ⚠️ **不得在此重复声明基础 `.gv-process-grid--stages{...2列...}`** —— 它与文件上方
      `@media(max-width:64rem)` 里的单列规则同权重，却位置更靠后，会把窄屏单列覆盖掉
      （实测 t1024/t768/m640/m390 四档闸门全 FAIL）。基础两列由上方原有规则提供即可。 */
.gv-process-card__desc + .gv-process-card__desc{margin-top:.85rem}
/* ② 白茶：两张更宽的知识单元 */
.gv-process-grid--stages[data-proc-n="2"]{grid-template-columns:minmax(0,1fr);gap:4.5rem}
.gv-process-grid--stages[data-proc-n="2"] .gv-process-card{grid-template-columns:20rem minmax(0,34rem);gap:3rem;justify-content:center}
.gv-process-grid--stages[data-proc-n="2"] .gv-process-card h3{font-size:1.55rem}
/* ③ 乌龙：2 + 2 + 1，末张通栏收尾 */
@media(max-width:64rem){
 /* 单列档：2 卡与 5 卡末张的加宽安排一并收回到与四卡同一条「图 + 正文」中线 */
 .gv-process-grid--stages[data-proc-n="2"] .gv-process-card{grid-template-columns:15rem minmax(0,27rem)}
 .gv-process-grid--stages[data-proc-n="2"] .gv-process-card h3{font-size:1.4rem}
}
@media(max-width:48rem){
 .gv-process-grid--stages[data-proc-n="2"] .gv-process-card{grid-template-columns:minmax(0,1fr);justify-items:center;gap:1.35rem}
}

/* Tasting 六维（2026-10-01 冻结稿）：卡片正文由「教学式两行」改为「单句直接描述」，
   允许自然折行；六维顺序 = 干茶形态 / 茶汤色泽 / 香气 / 滋味 / 叶底 / 产地气息。
   底部新增一行「常见风格方向」轻量说明，比正文更淡，不进正文色变量。 */
.gv-tasting-note{margin:1.7rem auto 0;max-width:40rem;text-align:center;font-size:.8rem;line-height:1.9;letter-spacing:.02em;color:#9aa191}