/* ==========================================================================
   元鴻茶間 YUAN HONG TEA SALON
   設計系統 — 依品牌 GUIDELINE
   松柏綠 #445f4c ・麥杆黃 #ffef85 ・亞麻褐 #bfaf78 ・琥珀橘 #a9744f
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* 品牌色 */
  --green:        #445f4c;
  --green-deep:   #2f4337;
  --green-ink:    #1d2a22;
  --yellow:       #ffef85;
  --linen:        #bfaf78;
  --amber:        #a9744f;

  /* 中性 */
  --cream:        #faf6ec;
  --cream-2:      #f3ecdc;
  --paper:        #fffdf7;
  --ink:          #231f1a;
  --ink-60:       rgba(35,31,26,.62);
  --ink-38:       rgba(35,31,26,.38);
  --line:         rgba(68,95,76,.16);

  /* 排版 */
  --f-sans: "Noto Sans TC", -apple-system, "Segoe UI", sans-serif;
  --f-serif:"Noto Serif TC", Georgia, serif;
  --f-en:   "Cinzel", Georgia, serif;

  /* 尺度 */
  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 64px);
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 26px;

  /* 節奏 */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .7s;

  --shadow-s: 0 2px 10px rgba(31,46,33,.06);
  --shadow-m: 0 10px 34px rgba(31,46,33,.10);
  --shadow-l: 0 24px 60px rgba(31,46,33,.16);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--f-sans); font-weight:400; line-height:1.85;
  font-size:16px; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--f-serif); font-weight:600; line-height:1.35; margin:0; letter-spacing:.03em; }
p{ margin:0; }
::selection{ background:var(--yellow); color:var(--green-ink); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(72px,11vw,140px); }
.section--tight{ padding-block:clamp(52px,8vw,96px); }
.bg-cream{ background:var(--cream); }
.bg-paper{ background:var(--paper); }
.bg-green{ background:var(--green-deep); color:var(--cream); }
.bg-green h1,.bg-green h2,.bg-green h3{ color:#fff; }

/* ---------- 標題組 ---------- */
.eyebrow{
  font-family:var(--f-en); font-size:.72rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--amber); margin-bottom:.9em;
}
.bg-green .eyebrow{ color:var(--yellow); }
.h-xl{ font-size:clamp(2rem,5.2vw,3.4rem); }
.h-lg{ font-size:clamp(1.6rem,3.6vw,2.5rem); }
.h-md{ font-size:clamp(1.2rem,2.2vw,1.55rem); }
.lead{ font-size:clamp(1rem,1.4vw,1.09rem); color:var(--ink-60); max-width:62ch; }
.bg-green .lead{ color:rgba(250,246,236,.76); }
.sec-head{ margin-bottom:clamp(36px,5vw,62px); }
.sec-head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }

/* ---------- 按鈕 ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.92em 1.9em; border-radius:999px;
  font-size:.95rem; font-weight:500; letter-spacing:.06em;
  border:1px solid transparent; transition:all .34s var(--ease);
  will-change:transform;
}
.btn-primary{ background:var(--yellow); color:var(--green-ink); box-shadow:var(--shadow-s); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-m); }
.btn-ghost{ border-color:currentColor; }
.btn-ghost:hover{ background:var(--green); color:var(--cream); border-color:var(--green); }
.bg-green .btn-ghost:hover{ background:var(--cream); color:var(--green-deep); border-color:var(--cream); }
.btn-solid{ background:var(--green); color:var(--cream); }
.btn-solid:hover{ background:var(--green-deep); transform:translateY(-2px); }
.btn .arw{ transition:transform .34s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }

.link-more{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.92rem; letter-spacing:.06em; color:var(--green);
  border-bottom:1px solid var(--line); padding-bottom:.28em;
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.link-more:hover{ border-color:var(--green); gap:.85em; }

/* ==========================================================================
   Header — 漂浮膠囊
   ========================================================================== */
.hdr{
  position:fixed; inset:14px 0 auto; z-index:80;
  display:flex; justify-content:center; padding-inline:var(--gut);
  pointer-events:none;
}
.hdr-in{
  pointer-events:auto;
  width:100%; max-width:var(--maxw);
  display:flex; align-items:center; gap:22px;
  padding:11px 14px 11px 22px; border-radius:999px;
  background:rgba(255,253,247,.78);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(68,95,76,.10);
  box-shadow:0 6px 26px rgba(31,46,33,.07);
  transition:box-shadow .4s var(--ease), background .4s var(--ease);
}
.is-scrolled .hdr-in{ background:rgba(255,253,247,.94); box-shadow:0 10px 30px rgba(31,46,33,.11); }

/* 標誌一律用 GUIDELINE p.3 抽出的向量原稿（品牌字已轉曲，不靠 web font） */
.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand-lockup{ display:block; height:33px; width:auto; }
.brand-compact{ display:none; align-items:center; gap:9px; }
.brand-mark{ height:21px; width:auto; }
.brand-cn{ font-family:var(--f-serif); font-weight:600; font-size:1.03rem; letter-spacing:.12em; color:var(--green-deep); }

.nav{ display:flex; gap:2px; margin-inline:auto; }
.nav a{
  position:relative; padding:.55em .95em; border-radius:999px;
  font-size:.9rem; letter-spacing:.05em; color:var(--ink-60);
  white-space:nowrap;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.nav a:hover{ color:var(--green-deep); background:rgba(68,95,76,.06); }
.nav a[aria-current="page"]{ color:var(--green-deep); font-weight:500; }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:50%; bottom:.24em; translate:-50% 0;
  width:14px; height:2px; border-radius:2px; background:var(--amber);
}

.hdr-cta{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.btn-line{
  display:inline-flex; align-items:center; gap:.45em;
  background:var(--green); color:var(--cream);
  padding:.62em 1.15em; border-radius:999px;
  font-size:.86rem; letter-spacing:.05em; white-space:nowrap;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.btn-line:hover{ background:var(--green-deep); transform:translateY(-1px); }

/* flex-direction:column 是必要的，否則三條線會橫向排成一列（17px×3 塞進 38px 容器） */
.burger{
  display:none; flex-direction:column; width:38px; height:38px; border-radius:50%;
  align-items:center; justify-content:center; padding:0;
  background:none; border:0; cursor:pointer; flex-shrink:0;
}
.burger span{ display:block; width:19px; height:2px; background:var(--green-deep); border-radius:2px; transition:.3s var(--ease); }
.burger span+span{ margin-top:4px; }
/* 展開時變成叉叉 */
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Hero — 撥雲見日
   ========================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center; text-align:center;
  overflow:hidden; isolation:isolate;
  background:var(--green-ink);
}
/* 主視覺照片（AI 生成・2026-08-02） */
.hero-bg{
  position:absolute; inset:0; z-index:-3;
  background:linear-gradient(180deg,#8ea78f 0%,#6d8a71 32%,#40573f 66%,#22301f 100%);
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background-image:image-set(
      url("img/hero-sm.jpg") 1x,
      url("img/hero.jpg") 2x);
  background-image:url("img/hero.jpg");
  background-size:cover; background-position:center 58%;
  animation:kenburns 30s ease-in-out infinite alternate;
}
@media (max-width:820px){
  .hero-bg::after{ background-image:url("img/hero-md.jpg"); }
}
/* 照片上壓一層暗調，確保白字可讀 */
.hero-bg::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,rgba(20,32,22,.42) 0%,rgba(20,32,22,.16) 34%,rgba(20,32,22,.30) 66%,rgba(18,28,20,.62) 100%),
    radial-gradient(58% 46% at 50% 42%,rgba(12,20,14,.30) 0%,rgba(12,20,14,0) 72%);
}
@keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.12); } }

/* 雲層 — 三層不同速度飄移，開場向兩側散開 */
.cloud{
  position:absolute; left:-14%; right:-14%; z-index:-2;
  background-repeat:no-repeat; background-size:120% 100%;
  will-change:transform,opacity;
}
.cloud-1{
  top:-6%; height:62%;
  background-image:radial-gradient(60% 78% at 30% 52%,rgba(255,253,247,.92) 0%,rgba(255,253,247,0) 70%),
                   radial-gradient(52% 70% at 72% 44%,rgba(255,253,247,.80) 0%,rgba(255,253,247,0) 72%);
  animation:drift-a 44s linear infinite;
}
.cloud-2{
  top:16%; height:56%;
  background-image:radial-gradient(56% 74% at 62% 50%,rgba(244,240,228,.80) 0%,rgba(244,240,228,0) 70%),
                   radial-gradient(46% 62% at 18% 58%,rgba(255,253,247,.66) 0%,rgba(255,253,247,0) 72%);
  animation:drift-b 62s linear infinite;
}
.cloud-3{
  bottom:-4%; height:48%;
  background-image:radial-gradient(64% 70% at 46% 60%,rgba(226,232,220,.66) 0%,rgba(226,232,220,0) 74%);
  animation:drift-a 82s linear infinite reverse;
}
@keyframes drift-a{ from{ transform:translate3d(-4%,0,0); } to{ transform:translate3d(4%,0,0); } }
@keyframes drift-b{ from{ transform:translate3d(3%,0,0); } to{ transform:translate3d(-5%,0,0); } }

/* 開場：雲散開 */
.hero.is-revealing .cloud-1{ animation:part-up 2.9s var(--ease) forwards; }
.hero.is-revealing .cloud-3{ animation:part-down 3.1s var(--ease) forwards; }
@keyframes part-up  { from{ transform:translateY(0) scale(1.1); opacity:1; } to{ transform:translateY(-46%) scale(1.3); opacity:.34; } }
@keyframes part-down{ from{ transform:translateY(0) scale(1.1); opacity:1; } to{ transform:translateY(40%)  scale(1.3); opacity:.22; } }

/* 光暈 */
.hero-glow{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(46% 34% at 50% 34%,rgba(255,239,133,.30) 0%,rgba(255,239,133,0) 68%);
  opacity:0; animation:glow-in 3.4s var(--ease) .7s forwards;
}
@keyframes glow-in{ to{ opacity:1; } }

.hero-in{ position:relative; padding:120px var(--gut) 96px; max-width:900px; }
.hero-eyebrow{
  font-family:var(--f-en); font-size:.7rem; letter-spacing:.42em;
  text-transform:uppercase; color:rgba(255,239,133,.88); margin-bottom:1.6em;
}
.hero-title{
  font-family:var(--f-serif); font-weight:600; color:#fff;
  font-size:clamp(2.9rem,9vw,5.6rem); letter-spacing:.16em; line-height:1.1;
  text-shadow:0 3px 40px rgba(0,0,0,.34);
}
.hero-en{
  font-family:var(--f-en); font-size:clamp(.66rem,1.5vw,.9rem);
  letter-spacing:.44em; color:rgba(255,253,247,.72); margin-top:1.5em;
}
.hero-sub{
  margin-top:2.1em; font-size:clamp(.96rem,1.7vw,1.1rem);
  color:rgba(255,253,247,.88); line-height:2.05; letter-spacing:.05em;
}
.hero-btns{ margin-top:3em; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.hero .btn-ghost:hover{ background:#fff; color:var(--green-deep); border-color:#fff; }

/* 開場字組進場 */
.hero-in > *{ opacity:0; transform:translateY(20px); }
.hero.is-revealing .hero-in > *{ animation:rise .95s var(--ease) forwards; }
.hero.is-revealing .hero-eyebrow{ animation-delay:.55s; }
.hero.is-revealing .hero-title  { animation-delay:.75s; }
.hero.is-revealing .hero-en     { animation-delay:.95s; }
.hero.is-revealing .hero-sub    { animation-delay:1.12s; }
.hero.is-revealing .hero-btns   { animation-delay:1.3s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

.scroll-cue{
  position:absolute; bottom:30px; left:50%; translate:-50% 0;
  font-family:var(--f-en); font-size:.6rem; letter-spacing:.32em;
  color:rgba(255,253,247,.6); text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  opacity:0; animation:rise .9s var(--ease) 2s forwards;
}
.scroll-cue i{ display:block; width:1px; height:34px; background:linear-gradient(rgba(255,253,247,.66),transparent); animation:cue 2.3s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:scaleY(.4); transform-origin:top; } 50%{ transform:scaleY(1); } }

/* ==========================================================================
   捲動進場
   ========================================================================== */
.rv{ opacity:1; transform:none; transition:opacity .85s var(--ease), transform .85s var(--ease); }
.rv.rv-wait{ opacity:0; transform:translateY(26px); }
.rv.rv-wait.in{ opacity:1; transform:none; }
/* Article prose is required content and must remain readable in every JS state. */
.prose.rv,.prose.rv.rv-wait,.prose.rv.in,.prose.rv.rv-wait.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.09s; } .rv-d2{ transition-delay:.18s; }
.rv-d3{ transition-delay:.27s; } .rv-d4{ transition-delay:.36s; }
.rv-d5{ transition-delay:.45s; } .rv-d6{ transition-delay:.54s; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-in > *{ opacity:1 !important; transform:none !important; animation:none !important; }
  .cloud,.hero-bg::after,.scroll-cue{ animation:none !important; }
  .scroll-cue{ opacity:1; }
}

/* ==========================================================================
   數字帶
   ========================================================================== */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,40px); }
.stat{ text-align:center; }
.stat b{
  display:block; font-family:var(--f-serif); font-weight:600;
  font-size:clamp(2.1rem,5vw,3.1rem); color:var(--yellow); line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat span{ display:block; margin-top:.9em; font-size:.83rem; letter-spacing:.11em; color:rgba(250,246,236,.66); }

/* ==========================================================================
   商品卡
   ========================================================================== */
.grid-p{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:clamp(18px,2.4vw,30px); }
.pcard{
  background:var(--paper); border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-s);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-m); }
.pcard-media{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  background:linear-gradient(155deg,#7c9480 0%,#54705a 46%,#33452f 100%);
  display:grid; place-items:center;
}
.pcard-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.pcard:hover .pcard-media img{ transform:scale(1.05); }
.pcard-ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--f-serif); writing-mode:vertical-rl;
  font-size:clamp(1.5rem,2.5vw,2rem); letter-spacing:.34em;
  color:rgba(255,253,247,.9); text-shadow:0 2px 18px rgba(0,0,0,.3);
}
.pcard-ph small{
  position:absolute; left:0; right:0; bottom:14px;
  writing-mode:horizontal-tb; text-align:center;
  font-family:var(--f-sans); font-size:.6rem; letter-spacing:.18em;
  color:rgba(255,253,247,.42);
}
.badge{
  position:absolute; top:13px; left:13px; z-index:2;
  background:var(--amber); color:#fff;
  padding:.34em .82em; border-radius:999px;
  font-size:.7rem; letter-spacing:.09em;
}
.badge--rare{ background:var(--green-deep); }
.pcard-body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:.55em; flex:1; }
.pcard-region{ font-family:var(--f-en); font-size:.62rem; letter-spacing:.2em; color:var(--linen); text-transform:uppercase; }
.pcard-name{ font-family:var(--f-serif); font-size:1.06rem; font-weight:600; line-height:1.5; }
.pcard-desc{ font-size:.86rem; color:var(--ink-60); line-height:1.8; flex:1; }
.pcard-foot{ display:flex; align-items:baseline; gap:.6em; margin-top:.5em; padding-top:.9em; border-top:1px solid var(--line); }
.price{ font-family:var(--f-serif); font-size:1.32rem; font-weight:600; color:var(--green-deep); }
.price-was{ font-size:.82rem; color:var(--ink-38); text-decoration:line-through; }
.price-unit{ font-size:.76rem; color:var(--ink-38); margin-left:auto; }
.pcard-buy{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  margin-top:.9em; padding:.78em 1em; border-radius:var(--r-sm);
  background:var(--green); color:var(--cream);
  font-size:.88rem; letter-spacing:.06em;
  transition:background .3s var(--ease);
}
.pcard-buy:hover{ background:var(--green-deep); }
.pcard-buy .arw{ transition:transform .3s var(--ease); }
.pcard-buy:hover .arw{ transform:translateX(3px); }
.stock-warn{ font-size:.75rem; color:var(--amber); letter-spacing:.05em; }

/* ==========================================================================
   產區
   ========================================================================== */
.grid-o{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(14px,2vw,22px); }
.ocard{
  position:relative; border-radius:var(--r); overflow:hidden;
  min-height:290px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px 20px; color:#fff;
  background:linear-gradient(168deg,#7e9682 0%,#4e6a54 50%,#26341f 100%);
  transition:transform .5s var(--ease);
}
.ocard:hover{ transform:translateY(-5px); }
.ocard::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(15,24,16,.62) 100%);
}
.ocard > *{ position:relative; }
.ocard-alt{ font-family:var(--f-en); font-size:.66rem; letter-spacing:.16em; color:var(--yellow); margin-bottom:.7em; }
.ocard-name{ font-family:var(--f-serif); font-size:1.28rem; font-weight:600; letter-spacing:.06em; }
.ocard-desc{ margin-top:.7em; font-size:.83rem; line-height:1.8; color:rgba(255,253,247,.8); }

/* ==========================================================================
   產區互動地圖（MapLibre，無需 token）
   ========================================================================== */
.omap-wrap{
  display:grid; grid-template-columns:1.35fr 1fr;
  gap:clamp(18px,2.6vw,30px); align-items:stretch;
}
.omap{
  position:relative; min-height:clamp(360px,52vh,540px);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-m); background:#dfe6da;
}
.omap canvas{ outline:none; }
.omap-hint{
  position:absolute; left:14px; bottom:14px; z-index:2;
  background:rgba(255,253,247,.9); backdrop-filter:blur(8px);
  padding:.5em 1em; border-radius:999px;
  font-size:.76rem; letter-spacing:.05em; color:var(--ink-60);
  box-shadow:var(--shadow-s); pointer-events:none;
}
/* 茶罐造型金針 */
.omark{ cursor:pointer; transform-origin:50% 100%; transition:transform .3s var(--ease); }
.omark:hover{ transform:scale(1.14) translateY(-2px); }
.omark.on{ transform:scale(1.2) translateY(-3px); }
.omark svg{ display:block; filter:drop-shadow(0 3px 7px rgba(20,32,22,.42)); }

/* 產區詳情卡 */
.opanel{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(22px,3vw,32px);
  box-shadow:var(--shadow-s); display:flex; flex-direction:column;
}
.opanel-alt{
  font-family:var(--f-en); font-size:.7rem; letter-spacing:.2em;
  color:var(--amber); text-transform:uppercase;
}
.opanel h3{ font-size:clamp(1.5rem,2.8vw,2rem); margin:.5em 0 .1em; letter-spacing:.06em; }
.opanel-en{ font-family:var(--f-en); font-size:.72rem; letter-spacing:.18em; color:var(--linen); }
.opanel-meta{ display:flex; gap:20px; flex-wrap:wrap; margin:1.5em 0 1.2em; padding-block:1.1em; border-block:1px solid var(--line); }
.opanel-meta div span{ display:block; font-size:.7rem; letter-spacing:.1em; color:var(--ink-38); margin-bottom:.4em; }
.opanel-meta div b{ font-family:var(--f-serif); font-size:1.02rem; font-weight:600; color:var(--green-deep); }
.opanel-desc{ font-size:.9rem; line-height:2; color:var(--ink-60); flex:1; }
.opanel-tea{ margin-top:1.4em; padding-top:1.2em; border-top:1px solid var(--line); }
.opanel-tea span{ font-size:.72rem; letter-spacing:.1em; color:var(--ink-38); display:block; margin-bottom:.6em; }
.opanel-tea a{
  display:inline-flex; align-items:center; gap:.5em; font-size:.92rem;
  color:var(--green); border-bottom:1px solid var(--line); padding-bottom:.24em;
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.opanel-tea a:hover{ border-color:var(--green); gap:.85em; }

/* 產區切換列 */
.ochips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:clamp(18px,2.4vw,26px); }
.ochip{
  padding:.55em 1.15em; border-radius:999px; font-size:.86rem; letter-spacing:.05em;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-60);
  cursor:pointer; transition:all .3s var(--ease);
}
.ochip:hover{ border-color:var(--green); color:var(--green); }
.ochip.on{ background:var(--green); color:var(--cream); border-color:var(--green); }

@media (max-width:880px){
  .omap-wrap{ grid-template-columns:1fr; }
  .omap{ min-height:320px; }
}

/* MapLibre 內建 UI 調成品牌調性 */
.maplibregl-ctrl-attrib{ font-size:10px; background:rgba(255,253,247,.82) !important; }
.maplibregl-ctrl-group{ border-radius:10px !important; overflow:hidden; box-shadow:var(--shadow-s) !important; }

/* ==========================================================================
   品質保證
   ========================================================================== */
.grid-q{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(20px,3vw,36px); }
.qitem{ text-align:center; padding:6px; }
.qitem .ic{
  width:52px; height:52px; margin:0 auto 20px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(68,95,76,.08); color:var(--green);
}
.qitem h3{ font-size:1.05rem; margin-bottom:.6em; }
.qitem p{ font-size:.87rem; color:var(--ink-60); line-height:1.85; }

/* ==========================================================================
   章節（茶間介紹）
   ========================================================================== */
.chapter{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(26px,5vw,72px); margin-bottom:clamp(56px,8vw,110px);
}
.chapter:nth-child(even) .chapter-media{ order:2; }
.chapter-media{
  aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(150deg,#8ba28e,#4c6752 55%,#2b3a2b);
  display:grid; place-items:center; box-shadow:var(--shadow-m);
}
.chapter-media img,
.chapter-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.ph-note{
  font-size:.8rem; letter-spacing:.1em; color:rgba(255,253,247,.62);
  border:1px dashed rgba(255,253,247,.34); padding:.7em 1.2em; border-radius:999px;
}
.chapter-no{ font-family:var(--f-en); font-size:.68rem; letter-spacing:.28em; color:var(--amber); margin-bottom:1em; }

/* ==========================================================================
   評論
   ========================================================================== */
.rv-summary{
  display:flex; align-items:center; gap:clamp(18px,3vw,42px);
  flex-wrap:wrap; padding:clamp(24px,3.4vw,38px);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-s); margin-bottom:34px;
}
.rv-score{ font-family:var(--f-serif); font-size:clamp(2.4rem,5vw,3.2rem); font-weight:600; color:var(--green-deep); line-height:1; }
.rv-stars{ color:var(--amber); letter-spacing:.14em; font-size:1.05rem; }
.rv-meta{ font-size:.85rem; color:var(--ink-60); margin-top:.4em; }
.grid-r{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(16px,2.2vw,24px); }
.rcard{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 22px; box-shadow:var(--shadow-s);
  display:flex; flex-direction:column; gap:.85em;
}
.rcard-head{ display:flex; align-items:center; gap:12px; }
.rcard-av{
  width:40px; height:40px; border-radius:50%; flex:0 0 40px;
  display:grid; place-items:center; background:var(--green); color:var(--cream);
  font-family:var(--f-serif); font-size:1.02rem;
}
.rcard-name{ font-weight:500; font-size:.95rem; }
.rcard-sub{ font-size:.76rem; color:var(--ink-38); }
.rcard-text{ font-size:.9rem; line-height:1.9; color:var(--ink-60); }
.rcard-reply{
  margin-top:.3em; padding:14px 16px; border-radius:var(--r-sm);
  background:rgba(68,95,76,.055); font-size:.84rem; line-height:1.85; color:var(--ink-60);
}
.rcard-reply b{ display:block; color:var(--green); font-size:.78rem; letter-spacing:.06em; margin-bottom:.4em; font-weight:500; }

/* ==========================================================================
   頁首（內頁）
   ========================================================================== */
.phero{
  position:relative; padding:clamp(150px,17vw,220px) 0 clamp(52px,7vw,86px);
  background:linear-gradient(168deg,var(--green) 0%,var(--green-deep) 100%);
  color:#fff; overflow:hidden;
}
.phero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(56% 74% at 78% 6%,rgba(255,239,133,.16),transparent 66%);
}
.phero .lead{ color:rgba(250,246,236,.8); margin-top:1.2em; }
.crumb{ margin-top:2.4em; font-size:.78rem; letter-spacing:.09em; color:rgba(250,246,236,.56); }
.crumb a:hover{ color:var(--yellow); }

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr{ background:var(--green-ink); color:rgba(250,246,236,.72); padding-block:clamp(52px,7vw,80px) 30px; }
.ftr-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(28px,4vw,56px); }
.ftr h4{ font-family:var(--f-sans); font-size:.78rem; letter-spacing:.17em; color:var(--yellow); margin-bottom:1.4em; font-weight:500; }
.ftr-logo{ display:block; height:40px; width:auto; }
.ftr p, .ftr li{ font-size:.86rem; line-height:2; }
.ftr ul{ list-style:none; margin:0; padding:0; }
.ftr a:hover{ color:var(--yellow); }
.ftr-social{ display:flex; gap:9px; margin-top:1.5em; }
.ftr-social a{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(250,246,236,.2); transition:.3s var(--ease);
}
.ftr-social a:hover{ background:var(--yellow); color:var(--green-ink); border-color:var(--yellow); }
.ftr-btm{
  margin-top:clamp(34px,5vw,54px); padding-top:24px;
  border-top:1px solid rgba(250,246,236,.13);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.76rem; color:rgba(250,246,236,.46);
}

/* ==========================================================================
   背景音樂鈕（左下）
   ========================================================================== */
.music{
  position:fixed; left:20px; bottom:20px; z-index:75;
  display:flex; align-items:center; gap:0;
  height:46px; padding:0 4px 0 0;
  border-radius:999px;
  background:rgba(255,253,247,.86);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(68,95,76,.14);
  box-shadow:0 6px 22px rgba(31,46,33,.13);
  transition:box-shadow .35s var(--ease), background .35s var(--ease);
  overflow:hidden;
}
.music:hover{ box-shadow:0 10px 28px rgba(31,46,33,.19); }
.music-btn{
  width:46px; height:46px; flex:0 0 46px;
  display:grid; place-items:center; color:var(--green);
  border-radius:50%;
}
.music-label{
  font-size:.78rem; letter-spacing:.09em; color:var(--ink-60);
  max-width:0; opacity:0; white-space:nowrap;
  transition:max-width .4s var(--ease), opacity .3s var(--ease), padding .4s var(--ease);
  padding-right:0;
}
.music:hover .music-label{ max-width:140px; opacity:1; padding-right:14px; }

/* 播放中：等化器動畫 */
.music .eq{ display:none; gap:2px; align-items:flex-end; height:15px; }
.music .eq i{ display:block; width:2.5px; background:var(--green); border-radius:2px; animation:eq 1s ease-in-out infinite; }
.music .eq i:nth-child(1){ height:60%; animation-delay:0s; }
.music .eq i:nth-child(2){ height:100%; animation-delay:.18s; }
.music .eq i:nth-child(3){ height:45%; animation-delay:.36s; }
.music .eq i:nth-child(4){ height:80%; animation-delay:.54s; }
@keyframes eq{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }
.music.playing .ic-note{ display:none; }
.music.playing .eq{ display:flex; }
.music.playing{ background:var(--green); border-color:var(--green); }
.music.playing .music-btn{ color:var(--cream); }
.music.playing .music-label{ color:rgba(250,246,236,.86); }
.music.playing .eq i{ background:var(--yellow); }

@media (prefers-reduced-motion: reduce){ .music .eq i{ animation:none; } }

/* YouTube 播放器藏起來，只取聲音 */
#ytHost{ position:fixed; width:1px; height:1px; left:-9999px; top:-9999px; opacity:0; pointer-events:none; }

/* ==========================================================================
   手機
   ========================================================================== */
/* 完整組合約 200px 寬，導覽擠不下就換成標誌＋中文字 */
@media (max-width:1120px){
  .brand-lockup{ display:none; }
  .brand-compact{ display:flex; }
}
@media (max-width:880px){
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .chapter{ grid-template-columns:1fr; }
  .chapter:nth-child(even) .chapter-media{ order:0; }
  .ftr-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .burger{ display:flex; }
  .hdr-in{ padding:10px 12px 10px 16px; }
  /* .nav 在此斷點變 position:fixed 脫離文檔流，沒有東西撐開 brand 與 cta，
     因此 cta 要自己靠右，否則整組按鈕會擠在畫面左半邊 */
  .hdr-cta{ margin-left:auto; }

  /* 觸控目標：footer 連結與電話原本只有 20–22px 高，手指點不準。
     用 padding 撐開可點區域，視覺位置不變。 */
  .ftr ul li a,
  .ftr a[href^="tel:"],
  .ftr-social a,
  a[href^="tel:"]{
    display:inline-block; padding-block:8px;
  }
  /* 麵包屑連結原本僅 18px 高 */
  .crumb a{ display:inline-block; padding-block:6px; }
  .ftr ul li{ margin-bottom:2px; }
  .nav{
    position:fixed; inset:76px 14px auto; margin:0;
    flex-direction:column; gap:2px; padding:14px;
    background:rgba(255,253,247,.97); backdrop-filter:blur(18px);
    border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-l);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:.34s var(--ease);
  }
  .nav.open{ opacity:1; visibility:visible; transform:none; }
  .nav a{ padding:.85em 1em; }
  .nav a[aria-current="page"]::after{ display:none; }
  .btn-line span{ display:none; }
  .btn-line{ padding:.62em .8em; }
  /* 底部固定購買列 */
  .mobile-buy{
    position:fixed; left:12px; right:12px; bottom:12px; z-index:70;
    display:flex; gap:8px;
  }
  /* 手機上音樂鈕上移，避開購買列 */
  .music{ left:12px; bottom:76px; height:40px; }
  .music-btn{ width:40px; height:40px; flex:0 0 40px; }
  .music:hover .music-label{ max-width:0; opacity:0; padding-right:0; }
  .mobile-buy a{
    flex:1; text-align:center; padding:.95em; border-radius:999px;
    font-size:.92rem; letter-spacing:.05em; box-shadow:var(--shadow-l);
  }
}
@media (min-width:761px){ .mobile-buy{ display:none; } }

/* ==========================================================================
   商品詳情頁（product-*.html）
   ========================================================================== */
.pdp-top{ padding-top:clamp(96px,12vw,140px); background:var(--paper); }
.pdp-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,68px); align-items:start;
}
.pdp-media{
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-m); background:var(--cream-2);
}
.pdp-media img{ display:block; width:100%; height:auto; }

.pdp-price{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:1.5em; }
.pdp-price .price{ font-size:clamp(1.9rem,4vw,2.5rem); }

/* 庫存只剩個位數時要讓人看見，別讓客人點進賣貨便撲空 */
.pdp-stock{
  margin-top:1.1em; padding:.85em 1.15em; border-radius:var(--r-sm);
  background:rgba(169,116,79,.09); border:1px solid rgba(169,116,79,.28);
  font-size:.9rem; color:var(--amber);
}
.pdp-stock b{ font-weight:500; }
.pdp-stock span{ display:block; margin-top:.35em; font-size:.76rem; color:var(--ink-60); }

.pdp-spec{ margin:1.9em 0 0; padding:0; border-top:1px solid var(--line); }
.pdp-spec > div{
  display:grid; grid-template-columns:5.5em 1fr; gap:14px;
  padding:.82em 0; border-bottom:1px solid var(--line);
}
.pdp-spec dt{ font-size:.84rem; color:var(--ink-60); letter-spacing:.06em; }
.pdp-spec dd{ margin:0; font-size:.92rem; line-height:1.75; }

.pdp-trust{ display:flex; flex-wrap:wrap; gap:8px; margin:1.6em 0 0; padding:0; list-style:none; }
.pdp-trust li{
  font-size:.78rem; letter-spacing:.05em; color:var(--green-deep);
  padding:.5em .95em; border-radius:999px;
  background:rgba(68,95,76,.07); border:1px solid var(--line);
}
.pdp-buy{ margin-top:1.9em; }
.pdp-note{ margin-top:.9em; font-size:.8rem; color:var(--ink-60); }

.pdp-two{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(22px,3.5vw,48px);
}
.pdp-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(28px,4vw,44px); }
.pdp-tag{
  font-family:var(--f-serif); font-size:.95rem; letter-spacing:.1em;
  padding:.6em 1.35em; border-radius:999px;
  background:var(--paper); border:1px solid var(--line); color:var(--green-deep);
}

.pdp-brew{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(24px,4vw,56px);
}
.brew-col{
  padding:clamp(24px,3vw,36px); border-radius:var(--r);
  background:var(--cream); border:1px solid var(--line);
}
.brew-list{ margin:1.4em 0 0; padding:0 0 0 1.25em; }
.brew-list li{ margin-bottom:1.15em; font-size:.92rem; line-height:1.95; }
.brew-list b{ display:block; font-weight:500; color:var(--green-deep); letter-spacing:.05em; }
.brew-note{ margin-top:1.2em; font-size:.82rem; color:var(--ink-60); }

.pdp-care{ margin-top:clamp(30px,4vw,50px); }
.pdp-care ul{ margin:1.1em 0 0; padding-left:1.25em; }
.pdp-care li{ margin-bottom:.5em; font-size:.9rem; line-height:1.9; color:var(--ink-60); }

.pdp-more{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(14px,2vw,22px);
}
.more-card{
  display:flex; flex-direction:column; gap:.55em;
  padding:clamp(20px,2.4vw,28px); border-radius:var(--r);
  background:var(--cream); border:1px solid var(--line);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.more-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }
.more-region{ font-family:var(--f-en); font-size:.62rem; letter-spacing:.2em; color:var(--linen); text-transform:uppercase; }
.more-name{ font-family:var(--f-serif); font-size:1rem; line-height:1.6; color:var(--green-ink); }
.more-price{ margin-top:auto; padding-top:.6em; font-size:1.05rem; color:var(--green-deep); }
.more-price small{ font-size:.75rem; color:var(--ink-60); margin-left:.35em; }

@media (max-width:880px){
  .pdp-grid{ grid-template-columns:1fr; }
  .pdp-media{ max-width:440px; }
}
@media (max-width:760px){
  .pdp-top{ padding-top:clamp(84px,20vw,112px); }
}

/* ============ 影片層（2026-08-13：真實茶園/茶廠紀實） ============ */
/* Hero 空拍 loop：藏在既有照片(::after)底下，canplay 後把照片淡掉 */
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; opacity:0;
  transition:opacity 1.4s ease;
}
.hero-bg::after{ transition:opacity 1.2s ease; }
.hero-bg.video-on .hero-video{ opacity:1; }
.hero-bg.video-on::after{ opacity:0; }

/* 製茶現場 */
.craft-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(18px,3vw,32px); margin-top:clamp(28px,4vw,44px);
}
.craft-card{ margin:0; }
.craft-media{
  border-radius:var(--radius,14px); overflow:hidden;
  aspect-ratio:16/9; background:#22301f;
  box-shadow:0 16px 38px rgba(31,46,33,.16);
}
.craft-video{ width:100%; height:100%; object-fit:cover; display:block; }
.craft-card figcaption{ padding:14px 4px 0; }
.craft-card figcaption b{
  display:block; font-family:"Noto Serif TC",serif; font-weight:600;
  font-size:1.06rem; color:#2f4337; letter-spacing:.08em;
}
.craft-card figcaption span{
  display:block; margin-top:.3em; font-size:.86rem;
  color:rgba(35,31,26,.6); letter-spacing:.03em;
}

@media (prefers-reduced-motion: reduce){
  .hero-video{ display:none; }
  .hero-bg.video-on::after{ opacity:1; }
}

/* ============ 茶知識文章頁（2026-08-14） ============ */
.art-wrap{ max-width:720px; margin-inline:auto; }
.art-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,300px); gap:clamp(24px,4vw,52px); align-items:center; }
.art-cover{
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-m);
  transform:rotate(1.6deg);
}
.art-cover img{ width:100%; height:auto; display:block; }
.art-meta{ display:flex; gap:1em; align-items:center; font-size:.8rem; color:var(--ink-38); letter-spacing:.06em; margin-top:1.6em; flex-wrap:wrap; }
.art-meta .acard-cat{ font-size:.72rem; }
.prose{ margin-top:clamp(30px,5vw,52px); }
/* 2026-09-24 r3：p／h2／清單標籤／引言改照老闆的 AI 設計稿（見下方「文章元件」段落開頭的說明）。
   p 字級 1rem→1.05rem、行高 2.1→2：一行高度一樣是 33.6px，字大一點、接近設計稿；
   text-wrap:pretty 避免最後一行只剩一個字（不支援的瀏覽器照舊斷行） */
.prose p{ font-size:1.05rem; line-height:2; color:var(--ink-80,#3a362f); margin-bottom:1.5em; letter-spacing:.02em; text-wrap:pretty; }
/* 小標：粗黑體深綠；左側圓角直條只跟字同高；底下全寬淺灰細線＋從字起點開始的 80px 深綠短線 */
.prose h2{
  position:relative;
  font-family:var(--f-sans); font-weight:700; font-size:clamp(1.45rem, 1rem + 2vw, 2rem);
  line-height:1.4; letter-spacing:.02em; color:var(--green); text-wrap:balance;
  margin:2.8rem 0 1.4rem; padding:0 0 .8rem 1.25rem;
  background:
    linear-gradient(var(--green),var(--green)) 1.25rem 100% / 80px 3px no-repeat,
    linear-gradient(var(--line),var(--line)) 0 100% / 100% 1px no-repeat;
}
.prose h2::before{
  content:""; position:absolute; left:0; top:.17em; bottom:calc(.8rem + .08em);
  width:5px; border-radius:3px; background:var(--green);
}
.prose ul{ list-style:none; padding:0; margin:0 0 1.6em; display:flex; flex-direction:column; gap:.9em; }
.prose ul li{
  background:var(--paper,#fffdf7); border:1px solid var(--line,rgba(68,95,76,.14));
  border-radius:12px; padding:1em 1.3em; font-size:.95rem; line-height:1.95; color:var(--ink-60);
}
/* 清單開頭的標籤（舊文章是 b，一鍵排版後是 strong）：綠色粗體，不加螢光底 */
.prose ul li b,.prose ul li strong{ color:var(--green,#2f4337); font-weight:700; }
/* 引言：不再是綠底框（提醒框才用框），改成跟小標同一條圓角直條＋襯線綠字 */
.prose blockquote{
  position:relative; margin:2.4em 0; padding:.1em 0 .1em 1.25rem;
  font-family:"Noto Serif TC",serif; font-size:1.15rem; line-height:2; color:var(--green,#2f4337); text-wrap:pretty;
}
.prose blockquote::before{
  content:""; position:absolute; left:0; top:.4em; bottom:.4em;
  width:4px; border-radius:2px; background:var(--green);
}
.art-cta{
  margin-top:clamp(36px,6vw,60px); padding:clamp(24px,4vw,36px);
  border-radius:var(--r-lg); background:var(--paper,#fffdf7);
  border:1px solid var(--line,rgba(68,95,76,.14)); box-shadow:var(--shadow-s);
  display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.art-cta p{ font-size:.95rem; color:var(--ink-60); margin:0; }
.art-nav{ margin-top:clamp(28px,4vw,40px); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.9rem; }
.art-nav a{ color:var(--green,#2f4337); border-bottom:1px solid rgba(68,95,76,.3); padding-bottom:2px; }

/* ============ 文章元件（2026-09-24，r3 照老闆的 AI 設計稿） ============
   契約：docs/01_PRD/2026-09-24-*-article-images-formatter.md §4.1（標籤、class、巢狀、data-icon 以它為準）
   視覺基準：老闆的 AI 設計稿 1790231105135.jpg。那兩張 LINE 截圖是 125% 縮放
   （同一台電腦截的網站現況圖：720px 的內文欄量出 894px），所以下面的尺寸＝截圖量到的 ÷ 1.25，
   在老闆的螢幕上看起來才會跟設計稿一樣大。例：圖示框截圖 72px → 58px、卡片內距 30px → 24px。
   共用數值：大框圓角 var(--r)、細框 var(--line)、淺綠底用設計稿的薄荷綠（圖示框 #e8efe8、提醒框 #edf3ed、螢光 #d8e2da）、實心徽章 var(--green)、粗黑體 700。
   全部限定在 .prose 裡。展示頁：worker/test/components-demo.html（改這段之後開它目視回歸） */

/* ---- 間距 ---- */
.prose > :first-child{ margin-top:0; }
/* 緊接在標題後的元件不再多空一截，標題與內容黏在一起 */
.prose :is(h2,h3,h4) + :is(figure,.yh-gallery,.yh-cards,.yh-steps,.yh-note,.yh-table,blockquote,ul,ol){ margin-top:0; }

/* ---- 次標、小小標：粗黑體深綠 ---- */
.prose h3{
  font-family:var(--f-sans); font-weight:700; font-size:1.3rem; line-height:1.55; letter-spacing:.02em;
  color:var(--green-deep); margin:2.2rem 0 .7rem; text-wrap:balance;
}
.prose h4{
  font-family:var(--f-sans); font-weight:700; font-size:1.08rem; line-height:1.7; letter-spacing:.03em;
  color:var(--green); margin:1.8rem 0 .5rem; text-wrap:balance;
}
.prose h2 + h3,.prose h3 + h4{ margin-top:.2rem; }
/* 內文避免最後一行只剩一個字（「公／尺」「手／感。」）；不支援的瀏覽器照舊斷行 */
.prose ol > li,.prose .yh-card,.prose .yh-steps > li,.prose .yh-note,.prose figcaption,.prose th,.prose td{ text-wrap:pretty; }

/* ---- 行內 ---- */
/* 粗體：綠色粗黑體；段落裡的下半截加淺綠螢光底（設計稿語言），卡片內文也一樣。
   螢光左右各多出 .08em：padding 撐出底色、負 margin 抵銷位移，字距跟沒標記時一樣 */
.prose strong,.prose b{ color:var(--green); font-weight:700; }
.prose p strong,.prose p b{
  margin:0 -.08em; padding:0 .08em;
  background:linear-gradient(transparent 58%, #d8e2da 58%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
/* 清單項裡（含 li > p）的粗體是標籤，不加螢光（跟上面 .prose ul li b 一致） */
.prose li strong,.prose li b{ background:none; margin:0; padding:0; }
/* 製程步驟的 li 本身不是清單項，裡面的段落照段落樣式 */
.prose .yh-steps > li > p strong,.prose .yh-steps > li > p b{
  margin:0 -.08em; padding:0 .08em;
  background:linear-gradient(transparent 58%, #d8e2da 58%);
}
/* 螢光筆：麥杆黃蓋下半截、字色不變，跟 strong 的綠字綠底分得開 */
.prose mark{
  color:inherit; margin:0 -.08em; padding:0 .08em;
  background:linear-gradient(transparent 50%, var(--yellow) 50%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.prose em,.prose i{ font-style:italic; }
.prose u{ text-decoration-color:rgba(68,95,76,.5); text-decoration-thickness:1px; text-underline-offset:.3em; }
/* 上下標不撐高行距 */
.prose sub,.prose sup{ font-size:.72em; line-height:0; position:relative; vertical-align:baseline; }
.prose sup{ top:-.55em; }
.prose sub{ bottom:-.25em; }
/* 連結：全站 reset 把 a 拿掉底線又繼承字色，文章裡要看得出是連結 */
.prose a{
  color:var(--green);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.3em;
  text-decoration-color:rgba(68,95,76,.4);
  transition:color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.prose a:hover{ color:var(--green-deep); text-decoration-color:currentColor; }
.prose a:focus-visible{ outline:2px solid var(--green); outline-offset:2px; border-radius:2px; }

/* ---- 分隔線：跟 h2 底線同一套（全寬淺灰細線＋置中深綠短線） ---- */
.prose hr{
  border:0; height:3px; margin:3rem 0;
  background:
    linear-gradient(var(--green),var(--green)) center / 80px 3px no-repeat,
    linear-gradient(var(--line),var(--line)) center / 100% 1px no-repeat;
}

/* ---- 引言：<blockquote>純文字</blockquote> 與 <blockquote><p>…</p></blockquote> 要長得一樣 ---- */
.prose blockquote p{ font:inherit; color:inherit; letter-spacing:inherit; margin:0 0 .8em; }
.prose blockquote p:last-child{ margin-bottom:0; }

/* ---- 清單 ---- */
/* 一般編號清單：用原生編號（ol start 才有效），數字綠色粗黑體；不做紙卡，跟 ul 分得開 */
.prose ol{ margin:0 0 1.6em; padding-left:1.9em; }
.prose ol > li{
  padding-left:.3em; margin-bottom:.5em;
  font-size:1.05rem; line-height:2; letter-spacing:.02em; color:var(--ink-80,#3a362f);
}
.prose ol > li:last-child{ margin-bottom:0; }
.prose ol > li::marker{ color:var(--green); font-family:var(--f-sans); font-weight:700; }
/* li 裡包 p：長相跟直接寫字一樣 */
.prose li p{ margin:0; font-size:inherit; line-height:inherit; color:inherit; letter-spacing:inherit; }
.prose li p + p{ margin-top:.5em; }
/* 清單項、卡片、步驟、提醒框、引言裡的 ul：不再套紙卡，改成綠色小圓點 */
.prose li ul,.prose .yh-card ul,.prose .yh-note ul,.prose blockquote ul{ gap:.3em; margin:.45em 0 .7em; }
.prose li ul > li,.prose .yh-card ul > li,.prose .yh-note ul > li,.prose blockquote ul > li{
  position:relative; background:none; border:0; border-radius:0; padding:0 0 0 1.15em;
  font-size:inherit; line-height:inherit; color:inherit;
}
.prose li ul > li::before,.prose .yh-card ul > li::before,.prose .yh-note ul > li::before,.prose blockquote ul > li::before{
  content:""; position:absolute; left:.25em; top:.8em; top:calc(.5lh - 2.5px);
  width:5px; height:5px; border-radius:50%; background:var(--green);
}
/* ul li 裡的 ol li 也會吃到既有的 .prose ul li 紙卡（後代選擇器），一併還原 */
.prose li ol,.prose .yh-card ol,.prose .yh-note ol,.prose blockquote ol{ margin:.45em 0 .7em; padding-left:1.5em; }
.prose li ol > li,.prose .yh-card ol > li,.prose .yh-note ol > li,.prose blockquote ol > li{
  background:none; border:0; border-radius:0; padding:0 0 0 .3em;
  margin-bottom:.2em; font-size:inherit; line-height:inherit; color:inherit;
}
.prose li > :last-child{ margin-bottom:0; }

/* ---- 圖片 ---- */
.prose img{ height:auto; }   /* img 帶 width/height 屬性時不補這條會變形 */
.prose figure{ margin:2.2em 0; }
/* 寬度沿用 width 屬性（超過欄寬就縮成 100%），載入前就先佔好位置、不跳動；小圖置中不硬放大。
   不設 max-height：width 屬性是固定寬，限高會把直式照片壓扁；改成 width:auto 又會讓 lazy 圖載入前變 0×0 */
.prose figure img{
  margin-inline:auto;
  border-radius:var(--r); box-shadow:var(--shadow-s); background:var(--cream-2);
}
.prose figcaption{
  margin-top:.85em; padding-inline:.5em; text-align:center;
  font-size:.86rem; line-height:1.8; letter-spacing:.04em; color:var(--ink-60);
}

/* 並排圖片：2～3 張一列、等高裁切；窄螢幕兩欄，單數張時第一張橫跨整列 */
.prose .yh-gallery{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  gap:clamp(8px,1.6vw,14px); align-items:start; margin:2.2em 0;
}
.prose .yh-gallery > figure{ margin:0; }
.prose .yh-gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.prose .yh-gallery > figure:first-child:nth-last-child(3) img,
.prose .yh-gallery > figure:first-child:nth-last-child(3) ~ figure img{ aspect-ratio:1/1; }
.prose .yh-gallery figcaption{ margin-top:.6em; font-size:.8rem; }

/* ---- 重點卡片（設計稿）：左邊淺綠圖示框，右邊「編號徽章＋標題」與內文 ---- */
.prose .yh-cards{
  counter-reset:yh-card; display:flex; flex-direction:column;
  gap:1.2rem; margin:2.2em 0;
}
.prose .yh-card{
  counter-increment:yh-card; position:relative;
  min-height:calc(58px + 48px); padding:24px 26px 24px 108px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-s);
  font-size:1.05rem; line-height:2; letter-spacing:.02em; color:var(--ink-80,#3a362f);
}
/* 圖示框：58px、圓角 22%（設計稿 72px/16px 的比例）、底色取設計稿的薄荷綠；頂端對齊標題列。
   圖示 32px（線寬 1.5 → 實際約 2px，看得到的圖形約 25px，設計稿換算約 26px）。
   預設 leaf；data-icon 不在 §4.1 表內也顯示 leaf（沒有對應規則就用這條） */
.prose .yh-card::before{
  content:""; position:absolute; left:26px; top:24px;
  width:58px; height:58px; border-radius:22%;
  background:#e8efe8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f4337' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19C5 10.5 10.5 5 19.5 4.5C19.5 13.5 14 19 5 19Z'/%3E%3Cpath d='M3.5 20.5L14.5 9.5'/%3E%3C/svg%3E") center / 32px no-repeat;
}
.prose .yh-card[data-icon="wind"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f4337' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5h9.5a2.5 2.5 0 1 0-2.5-2.5'/%3E%3Cpath d='M3 12.5h14.5a2.5 2.5 0 1 1-2.5 2.5'/%3E%3Cpath d='M3 16.5h6'/%3E%3C/svg%3E"); }   /* 空氣流動 */
.prose .yh-card[data-icon="sun"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f4337' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4'/%3E%3C/svg%3E"); }   /* 太陽 */
.prose .yh-card[data-icon="temp"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f4337' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13.8V5.5a2 2 0 0 1 4 0v8.3a4 4 0 1 1-4 0Z'/%3E%3Cpath d='M12 16.5V9.5'/%3E%3Cpath d='M16.8 6.5h2M16.8 9.5h2'/%3E%3C/svg%3E"); }   /* 溫度計 */
.prose .yh-card[data-icon="drop"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f4337' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2C15.5 7.5 18 10.9 18 14a6 6 0 0 1-12 0c0-3.1 2.5-6.5 6-10.8Z'/%3E%3Cpath d='M9.2 14.3a2.8 2.8 0 0 0 2.8 2.8'/%3E%3C/svg%3E"); }   /* 水滴 */
.prose .yh-card[data-icon="clock"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f4337' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }   /* 時鐘 */
.prose .yh-card[data-icon="cup"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f4337' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5h14l-1.4 6.1a3.5 3.5 0 0 1-3.4 2.9H9.8a3.5 3.5 0 0 1-3.4-2.9Z'/%3E%3Cpath d='M7 21.5h10'/%3E%3Cpath d='M10 2.8c-.9.9-.9 1.9 0 2.8s.9 1.9 0 2.8M14 2.8c-.9.9-.9 1.9 0 2.8s.9 1.9 0 2.8'/%3E%3C/svg%3E"); }   /* 茶杯 */
.prose .yh-card[data-icon="mountain"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f4337' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 19.5L9 9.5l3.6 5.4 2.4-3.1 6.5 7.7Z'/%3E%3Cpath d='M17.5 5.5a1.5 1.5 0 1 0 0 .01'/%3E%3C/svg%3E"); }   /* 山 */
.prose .yh-card[data-icon="fire"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f4337' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.6 3.2 4.8 5.3 4.8 10.2a4.8 4.8 0 0 1-9.6 0c0-2.4 1.1-4 2.4-5 .1 1.7.7 2.8 1.9 3.4C11.2 9.6 11 6.2 12 3Z'/%3E%3Cpath d='M12 14.8c.9.9 1.4 1.6 1.4 2.4a1.4 1.4 0 0 1-2.8 0c0-.8.5-1.5 1.4-2.4Z'/%3E%3C/svg%3E"); }   /* 火焰 */
.prose .yh-card[data-icon="box"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f4337' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.8 4.4v9.2L12 21l-7.8-4.4V7.4Z'/%3E%3Cpath d='M4.2 7.4L12 11.8l7.8-4.4M12 11.8V21'/%3E%3Cpath d='M8.1 5.2l7.8 4.4'/%3E%3C/svg%3E"); }   /* 盒子 */
.prose .yh-card > p{ font-size:inherit; line-height:inherit; letter-spacing:inherit; color:inherit; margin:0 0 .5em; }
.prose .yh-card > figure{ margin:.8em 0; }
/* 卡片是短重點，圖只是配角：統一裁成 16:9（同製程步驟），直式照片不會撐滿整張卡 */
.prose .yh-card > figure img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-sm); box-shadow:none; }
.prose .yh-card > :last-child{ margin-bottom:0; }
/* 標題列：深綠實心圓形徽章（自動 01、02）＋粗體深綠標題 */
.prose .yh-card > h3{
  position:relative; margin:0 0 .35rem; padding-left:2.45rem;
  font-size:1.45rem; line-height:2rem; letter-spacing:.03em; color:var(--green-deep);
}
.prose .yh-card > h3:first-of-type::before,
.prose .yh-card > p:first-child::before{
  content:counter(yh-card, decimal-leading-zero);
  display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--green); color:var(--paper);
  font-family:var(--f-sans); font-size:.82rem; font-weight:700; font-style:normal; line-height:1; letter-spacing:.02em;
  font-variant-numeric:lining-nums tabular-nums;
}
.prose .yh-card > h3:first-of-type::before{ position:absolute; left:0; top:.15rem; }
/* 沒有 h3：徽章浮在第一段的第一行開頭（段落行高 2.1rem，上移 .2rem 置中） */
.prose .yh-card > p:first-child::before{ float:left; margin:.2rem .6rem 0 0; }
/* 沒有 h3、第一個又不是段落（圖片或清單開頭）：徽章自成一列。
   用到 :has()，單獨寫一條：跟別的選擇器寫在一起的話，不支援 :has() 的舊瀏覽器會把整條規則丟掉 */
.prose .yh-card:not(:has(> h3)) > :first-child:not(p)::before{
  content:counter(yh-card, decimal-leading-zero);
  display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--green); color:var(--paper);
  font-family:var(--f-sans); font-size:.82rem; font-weight:700; font-style:normal; line-height:1; letter-spacing:.02em;
  font-variant-numeric:lining-nums tabular-nums;
  margin:0 0 .6rem; align-self:flex-start;
}

/* ---- 製程步驟：左側時間軸，徽章跟卡片同一顆深綠實心圓；16:9 圓角照片 ---- */
.prose .yh-steps{ counter-reset:yh-step; list-style:none; padding:0; margin:2.4em 0; }
.prose .yh-steps > li{
  counter-increment:yh-step; position:relative;
  margin:0; padding:0 0 2.2rem 3.25rem;
  font-size:1.05rem; line-height:2; letter-spacing:.02em; color:var(--ink-80,#3a362f);
}
.prose .yh-steps > li::before{
  content:counter(yh-step);
  position:absolute; left:0; top:0; z-index:1;
  width:2.1rem; height:2.1rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--green); color:var(--paper);
  font-family:var(--f-sans); font-weight:700; font-size:1rem; line-height:1;
}
.prose .yh-steps > li::after{
  content:""; position:absolute; left:calc(1.05rem - 1px); top:calc(2.1rem + 6px); bottom:6px;
  width:2px; border-radius:2px; background:rgba(68,95,76,.2);
}
.prose .yh-steps > li:last-child{ padding-bottom:0; }
.prose .yh-steps > li:last-child::after{ content:none; }   /* 最後一步收線 */
.prose .yh-steps > li > h3{ font-size:1.25rem; line-height:1.8rem; margin:0 0 .5rem; }
.prose .yh-steps > li > h3:first-child{ padding-top:.15rem; }   /* 標題第一行對齊徽章中心 */
/* 段落行高 2.1rem＝徽章高度，沒 h3 時第一行自然對齊徽章 */
.prose .yh-steps > li > p{ font-size:inherit; line-height:inherit; letter-spacing:inherit; color:inherit; margin:0 0 .5em; }
.prose .yh-steps > li > figure{ margin:.4rem 0 .9rem; }
.prose .yh-steps > li > figure img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.prose .yh-steps > li > :last-child{ margin-bottom:0; }

/* ---- 提醒框：淺綠底＋細框＋深綠「!」徽章（跟卡片同一套）；引言沒有框，兩者一眼分得開 ---- */
.prose .yh-note{
  position:relative; margin:2em 0; padding:1rem 1.3rem 1rem 3.3rem;
  background:#edf3ed; border:1px solid rgba(68,95,76,.2); border-radius:var(--r);
  font-size:1rem; line-height:1.95; letter-spacing:.02em; color:var(--ink-80,#3a362f);
}
.prose .yh-note::before{
  content:"!"; position:absolute; left:1.05rem; top:calc(1rem + .225rem);
  width:1.5rem; height:1.5rem; border-radius:50%; display:grid; place-items:center;
  background:var(--green); color:var(--paper);
  font-family:var(--f-sans); font-weight:700; font-size:.9rem; line-height:1;
}
.prose .yh-note p{ font-size:inherit; line-height:inherit; letter-spacing:inherit; color:inherit; margin:0 0 .4em; }
.prose .yh-note > :last-child{ margin-bottom:0; }
.prose .yh-note strong,.prose .yh-note b{ background:none; margin:0; padding:0; }

/* ---- 表格：外框可左右捲、不撐破手機；表頭深綠、列之間細線＋淡綠斑馬紋 ---- */
.prose .yh-table{
  margin:2em 0; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-s);
  scrollbar-width:thin; scrollbar-color:rgba(68,95,76,.3) transparent;
}
.prose table{
  width:100%; border-collapse:collapse;
  font-size:.95rem; line-height:1.75; letter-spacing:.02em; color:var(--ink-80,#3a362f);
}
.prose caption{
  caption-side:top; text-align:left; padding:.85em 1.1em .35em;
  font-size:.86rem; letter-spacing:.04em; color:var(--ink-60);
}
.prose th,.prose td{ padding:.75em 1.1em; text-align:left; vertical-align:top; }
.prose td{ min-width:6em; }
.prose thead th{
  background:var(--green); color:var(--paper);
  font-weight:700; letter-spacing:.06em; white-space:nowrap;
}
/* 相鄰表頭格補同色邊線：欄寬帶小數時，兩格底色交界會透出一條淺色細縫 */
.prose thead th + th{ border-left:1px solid var(--green); }
.prose thead th :is(strong,b,a,em,mark){ color:inherit; background:none; text-decoration-color:rgba(255,253,247,.5); }
/* 沒有 thead、第一列全是 th 的表格（沒排版就貼上的）：第一列也當表頭。
   :has() 單獨成條，不支援的舊瀏覽器只少這個補救，上面的 thead 樣式不受影響 */
.prose table:not(:has(> thead)) > tbody:first-of-type > tr:first-child > th{
  background:var(--green); color:var(--paper);
  font-weight:700; letter-spacing:.06em; white-space:nowrap;
}
.prose table:not(:has(> thead)) > tbody:first-of-type > tr:first-child > th + th{ border-left:1px solid var(--green); }
.prose table:not(:has(> thead)) > tbody:first-of-type > tr:first-child > th :is(strong,b,a,em,mark){
  color:inherit; background:none; text-decoration-color:rgba(255,253,247,.5);
}
.prose tbody th{ color:var(--green-deep); font-weight:700; white-space:nowrap; }
.prose tbody tr + tr > *{ border-top:1px solid var(--line); }
.prose tbody tr:nth-child(even) > *{ background-color:rgba(68,95,76,.05); }
.prose tfoot > tr > *{ border-top:1px solid rgba(68,95,76,.3); font-weight:700; color:var(--green-deep); }

@media (max-width:560px){
  .prose h2{ padding-left:1rem; background-position:1rem 100%, 0 100%; }
  .prose h2::before{ width:4px; }
  .prose blockquote{ padding-left:1rem; }
  .prose blockquote::before{ width:4px; }
  .prose .yh-gallery{ grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .prose .yh-gallery > figure:first-child:nth-last-child(odd){ grid-column:1 / -1; }
  .prose .yh-gallery > figure:first-child:nth-last-child(odd) img{ aspect-ratio:16/9; }
  /* 卡片：圖示框縮到 45px（設計稿比例），標題、徽章等比縮小，仍然左右排 */
  .prose .yh-card{ min-height:calc(45px + 36px); padding:18px 18px 18px 77px; font-size:1rem; line-height:1.95; }
  .prose .yh-card::before{ left:18px; top:18px; width:45px; height:45px; background-size:25px; }
  .prose .yh-card > h3{ padding-left:2rem; font-size:1.2rem; line-height:1.7rem; }
  .prose .yh-card > h3:first-of-type::before,
  .prose .yh-card > p:first-child::before{ width:1.45rem; height:1.45rem; font-size:.72rem; }
  .prose .yh-card:not(:has(> h3)) > :first-child:not(p)::before{ width:1.45rem; height:1.45rem; font-size:.72rem; }
  .prose .yh-card > h3:first-of-type::before{ top:.125rem; }
  .prose .yh-card > p:first-child::before{ margin:.25rem .5rem 0 0; }
  .prose .yh-steps > li{ padding-left:2.75rem; font-size:1rem; line-height:1.95; }
  .prose .yh-steps > li::before{ width:1.9rem; height:1.9rem; font-size:.92rem; }
  .prose .yh-steps > li::after{ left:calc(.95rem - 1px); top:calc(1.9rem + 5px); }
  .prose .yh-steps > li > h3{ font-size:1.15rem; line-height:1.7rem; }
  .prose .yh-steps > li > h3:first-child{ padding-top:.1rem; }
  .prose .yh-note{ padding:.9rem 1.1rem .9rem 2.9rem; }
  .prose .yh-note::before{ left:.85rem; top:calc(.9rem + .225rem); }
  .prose table{ font-size:.9rem; }
  .prose th,.prose td{ padding:.65em .9em; }
  .prose td{ min-width:5.5em; }   /* 四欄以內擠得進手機；更多欄就在框內左右捲 */
}
/* 列表卡封面 */
.acard--link{ text-decoration:none; color:inherit; padding:0; overflow:hidden; }
.acard--link .acard-body{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:.7em; flex:1; }
.acard-cover{ aspect-ratio:16/10; overflow:hidden; }
.acard-cover img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; transition:transform .6s var(--ease); }
.acard--link:hover .acard-cover img{ transform:scale(1.04); }
.acard-read{ font-size:.82rem; color:var(--amber,#a9744f); letter-spacing:.08em; }
@media (max-width:720px){
  .art-head{ grid-template-columns:1fr; }
  .art-cover{ max-width:300px; margin-inline:auto; transform:rotate(0); }
}

/* 製茶步驟單字徽章（2026-08-14 老闆官方流程文案） */
.craft-media{ position:relative; }
.step-ch{
  position:absolute; top:10px; left:10px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,253,247,.88); color:var(--green-deep,#2f4337);
  font-family:"Noto Serif TC",serif; font-weight:600; font-size:1.05rem;
  box-shadow:0 2px 8px rgba(31,46,33,.18);
  backdrop-filter:blur(4px);
}