/* ═══════════════════════════════════════════════════════════════════
   台灣茶 — 視覺系統

   ⚠️ 改樣式前先看 DESIGN.md。那份文件是這個檔案的規則書。

   最重要的一條：**不要寫新的 px 數字**。
   字級、間距、行高、圓角都已經定成 token，需要的尺寸從下面挑一個。
   挑不到代表這個元件的層級沒想清楚，不是 token 不夠用。

   這個檔案的順序＝由外而內：
     1. Token        2. 基礎      3. 外框（頁首／分頁）
     4. 版面骨架     5. 元件      6. 各分頁專屬    7. 手機版
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── 顏色 ──
     全部通過 WCAG AA（一般文字 4.5:1）。改顏色前請先算對比度。 */
  --ink:#1d1d1d;         /* 主要文字　16.9:1 */
  --ink2:#5a5a5a;        /* 次要文字　 6.9:1 */
  --ink3:#6b6b6b;        /* 註解標籤　 5.3:1 */
  --paper:#ffffff;
  --paper2:#f4f4f2;      /* 淺灰區塊 */
  --rule:#e2e2e0;        /* 髮絲線 */
  --rule2:#cfcfcc;       /* 明顯一點的線 */

  /* 茶類色。取自 AFURI 罐身，只用來分類，不用來裝飾。 */
  --c-green:#80ce41;     /* 綠茶 */
  --c-lime:#c7dc0e;      /* 包種 */
  --c-blue:#1e9cd7;      /* 高山烏龍 */
  --c-orange:#fa8f04;    /* 焙火烏龍 */
  --c-red:#fe3620;       /* 鐵觀音 */
  --c-yellow:#fac904;    /* 東方美人 */
  --c-pink:#e04b78;      /* 紅茶・紅烏龍 */
  /* #fe3620 在白底上只有 3.6:1。當色塊可以，當文字不行。 */
  --c-red-t:#d42d14;     /* 紅色文字專用　5.0:1 */

  /* ── 字級（8 級，最小 12px）──
     沒有 12px 以下的東西。長輩看不到的字等於沒寫。 */
  --t1:12px;             /* 標籤、表頭、註記 */
  --t2:13px;             /* 細字說明、免責 */
  --t3:15px;             /* 內文 */
  --t4:17px;             /* 列表主標、強調 */
  --t5:21px;             /* 小節標題 */
  --t6:27px;             /* 書法標題：節氣名、季節、茶名 */
  --t7:34px;             /* 品牌 */
  --t8:clamp(32px,5.4vw,54px);   /* 一般頁面主標 */
  /* 首頁主標。整站只有頁尾的「台灣茶」比它大——首頁第一句話是
     整個網站的第一印象，字級要撐得住這個位置。
     min/max 都比 --t9 底下的任何東西大，所以每個螢幕寬度下的
     大小順序都不會翻轉（tools/check.js 會逐一驗算）。 */
  --t9:clamp(40px,6.6vw,76px);
  /* 超大數字。這幾個是「圖像」不是文字，不套用字級級距。 */
  --t-timer:62px;                        /* 沖泡計時器 */
  --t-date:clamp(34px,5.4vw,62px);       /* 首頁「今天」的日期 */
  --t-cal:clamp(140px,18vw,236px);       /* 節氣頁的撕曆日期 */

  /* ── 間距（4px 基準）──
     版面上任何留白都從這裡挑。 */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;
  --s5:20px;  --s6:24px;  --s7:32px;  --s8:40px;
  --s9:48px;  --s10:64px; --s11:88px;

  /* ── 行高（4 級）── */
  --lh1:1.15;            /* 大標題 */
  --lh2:1.35;            /* 中標題、列表 */
  --lh3:1.7;             /* 內文 */
  --lh4:1.9;             /* 長段落 */

  /* ── 其他 ── */
  --r:8px;               /* 一般圓角 */
  --r-sm:6px;            /* 小型控制項 */
  --hdr-h:74px;
  --wrap:1080px;         /* 內容最大寬度 */
  /* 長文的行寬上限。中文一行約 36–40 字最好讀：再寬，眼睛要從行尾
     掃回行首會找錯行；再窄，一句話被切太多段。
     用 ch 不用 px，字級改了行寬會跟著走。 */
  --read:64ch;
  --gut:24px;            /* 內容左右留白 */

  /* ── 字體 ──
     --brush     只給 logo「台灣茶」。Ma Shan Zheng 是簡體字型，
                 但這三個字（含繁體「灣」）確認有覆蓋。
     --brush-tc  給節氣名、茶名等繁體標題。有驚、蟄、穀、滿、處等字，
                 簡體字型不一定有，缺字會變成毛筆體混黑體的破碎畫面。
                 所以系統標楷體優先，沒有才退明體——寧可整體一致。 */
  --brush:'Ma Shan Zheng','Kaiti TC','BiauKai','標楷體','Noto Serif TC',serif;
  --brush-tc:'Kaiti TC','BiauKai','STKaiti','DFKai-SB','標楷體','LXGW WenKai TC',
             'Noto Serif TC',serif;
  --sans:'Helvetica Now Text',-apple-system,BlinkMacSystemFont,'Segoe UI',
         'Noto Sans JP','Noto Sans KR','Noto Sans TC','Hiragino Kaku Gothic Pro',
         'Yu Gothic Medium',Arial,sans-serif;
}

/* ═══ 2. 基礎 ═══ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);
  display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* 小標籤：全大寫、字距拉開。整站的標籤都長這樣。
   字距只給拉丁字母——中日韓套上去會變成「今 日」這種散開的樣子。 */
.kicker,.step,.flab,.sec > h3,.tab,.btn,.stat,.legend,.cal-lbl,.cal-yr,.cal-mo,
.fl > span,table.gt td:first-child,.grp > b,.alt > b,.fxq span,.hsub,.lbl,.tl,.tried{
  letter-spacing:.05em;text-transform:uppercase}
:lang(en) .kicker,:lang(en) .step,:lang(en) .flab,:lang(en) .sec > h3,:lang(en) .tab,
:lang(en) .btn,:lang(en) .stat,:lang(en) .legend,:lang(en) .fl > span,:lang(en) .lbl,
:lang(en) table.gt td:first-child,:lang(en) .grp > b,:lang(en) .alt > b,
:lang(en) .fxq span,:lang(en) .tl,:lang(en) .tried{letter-spacing:.16em}
/* 中日韓標題不能用負字距，字會擠在一起 */
:lang(zh) h2,:lang(ja) h2,:lang(ko) h2,
:lang(zh) .qt,:lang(ja) .qt,:lang(ko) .qt{letter-spacing:0;line-height:1.25}

/* ═══ 3. 外框 ═══
   導覽列在頁首裡面：logo ／ 導覽 ／ 語言。

   ── 全站的 z-index 只有三層，別再加第四層 ──
     2000  頁首（含下拉選單）——永遠在最上面
        0  .mapwrap（isolation:isolate，把 Leaflet 的 z-index 關在裡面）
      其餘  同一頁內的區域性堆疊，數字都是個位數
   下拉選單被蓋住過一次，原因是 Leaflet 的控制項掛到 1000。
   分成上下兩條的時候，畫面最上面 128px 都不是內容；
   併成一條之後，第一眼就看得到茶。 */
.hdr{flex:0 0 auto;min-height:var(--hdr-h);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:var(--s6);padding:0 var(--s6);
  background:var(--paper);position:relative;z-index:2000}
/* logo 寬度由中文決定，英文小標撐滿同寬，不會比中文寬 */
.logo{display:flex;flex-direction:column;gap:3px;flex:0 0 auto;width:max-content;
  text-decoration:none}
.brand{font-family:var(--brush);font-size:var(--t7);font-weight:400;letter-spacing:.06em;
  line-height:1.05;color:var(--ink);display:block}
.hsub{width:100%;font-size:var(--t1);color:var(--ink3);letter-spacing:.06em;font-weight:800;
  white-space:nowrap;text-align:justify;text-align-last:justify}
.langsw{margin-left:auto;display:flex;gap:var(--s1);flex:0 0 auto}
.lg{min-width:32px;height:28px;padding:0 var(--s1);border:1px solid var(--rule);
  background:none;color:var(--ink3);font-family:inherit;font-size:var(--t1);
  font-weight:700;cursor:pointer;border-radius:var(--r-sm)}
.lg.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.nav{display:flex;align-items:center;gap:var(--s1);flex:0 1 auto;min-width:0}
.tab{display:flex;align-items:center;gap:var(--s2);white-space:nowrap;
  padding:var(--s3) var(--s4);border:0;background:none;font-family:inherit;
  text-decoration:none;color:var(--ink3);font-size:var(--t1);font-weight:800;
  cursor:pointer;border-radius:var(--r-sm);position:relative}
.tab:hover{color:var(--ink);background:var(--paper2)}
.tab.on{color:var(--ink)}
.tab.on::after{content:'';position:absolute;left:var(--s4);right:var(--s4);bottom:2px;
  height:2px;background:var(--ink)}
/* 有下拉的加箭頭。沒有箭頭的話，使用者不知道點下去會展開還是換頁。 */
.tab.drop::before{content:'';order:2;width:0;height:0;margin-left:2px;
  border:4px solid transparent;border-top-color:currentColor;
  transform:translateY(2px)}
.tgrp{position:relative}
.tgrp.open > .tab{color:var(--ink);background:var(--paper2)}
.tgrp.open > .tab.drop::before{transform:translateY(-2px) rotate(180deg)}
.menu{display:none;position:absolute;top:calc(100% + var(--s2));left:0;min-width:190px;
  background:var(--paper);border:1px solid var(--ink);border-radius:var(--r);
  padding:var(--s2);z-index:1}
.tgrp.open .menu{display:block}
.mi{display:block;padding:var(--s3) var(--s4);text-decoration:none;color:var(--ink2);
  font-size:var(--t2);font-weight:700;white-space:nowrap;border-radius:var(--r-sm)}
.mi:hover{background:var(--ink);color:var(--paper)}
.mi.on{color:var(--ink);background:var(--paper2)}

/* 漢堡鈕。桌機不顯示。 */
.navtoggle{display:none;flex:0 0 auto;width:38px;height:38px;padding:0 9px;
  border:1px solid var(--rule2);border-radius:var(--r-sm);background:none;cursor:pointer;
  flex-direction:column;justify-content:center;gap:4px}
.navtoggle i{display:block;height:2px;background:var(--ink);border-radius:1px}

/* ═══ 4. 版面骨架 ═══
   每一頁都是：開卷 → 區塊 → 區塊 → …
   所以只要 .hero 與 .sec 一致，各頁的節奏就會一致。 */
#view{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.pad{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) var(--s11)}
/* 讀長文時版心就是行寬。只縮 .art 的話，文章會貼在 1080 版心的左邊，
   右邊空一大片——看起來像沒排完，不像刻意留白。 */
.pad-read{max-width:calc(var(--read) + var(--gut) * 2)}

.hero{padding:var(--s10) 0 var(--s8)}
.kicker{font-size:var(--t1);font-weight:800;color:var(--ink3);margin-bottom:var(--s5)}
.hero h2{font-size:var(--t8);font-weight:800;line-height:var(--lh1);
  letter-spacing:-.025em;margin-bottom:var(--s5);max-width:18ch}
.hero p{font-size:var(--t3);line-height:var(--lh4);color:var(--ink2);max-width:58ch}
.hero p + p{margin-top:var(--s3)}
.lede{font-size:var(--t3);line-height:var(--lh4);color:var(--ink2);max-width:60ch;
  margin:var(--s8) 0 var(--s6)}
.hero + .btn,.hero + .lede{margin-top:var(--s8)}
/* 置中開卷：只有閱讀區（茶知識）用。列表頁的標題置中、下面接一排分類，
   是雜誌索引頁的樣子；其他頁維持靠左，因為它們下面接的是工具而不是文章。 */
.hero.mid{text-align:center;padding:var(--s11) 0 var(--s10)}
.hero.mid h2{max-width:none;margin-left:auto;margin-right:auto}
.hero.mid p{max-width:52ch;margin-left:auto;margin-right:auto}

.sec{margin:0 0 var(--s9)}
/* 「逛逛」接在文章或格子後面時要拉開。貼著上一段的話，
   看起來像那篇文章的一部分，而不是「這裡結束了，接下來可以去哪」。 */
.agrid + .sec,.art + .sec{margin-top:var(--s11);
  border-top:1px solid var(--rule);padding-top:var(--s8)}
.sec > h3{font-size:var(--t1);font-weight:800;color:var(--ink3);
  padding-bottom:var(--s3);margin-bottom:var(--s6);border-bottom:1px solid var(--ink);
  display:flex;align-items:center;gap:var(--s2)}
.note{font-size:var(--t2);line-height:var(--lh4);color:var(--ink2)}
.fine{font-size:var(--t2);line-height:var(--lh3);color:var(--ink3)}
.sub2,.idx{font-size:var(--t1);color:var(--ink3)}
.p{font-size:var(--t3);line-height:var(--lh4);color:var(--ink2);margin-bottom:var(--s3)}
.ttl{font-size:var(--t4);font-weight:800;margin-bottom:var(--s3);display:block}
.sh{font-size:var(--t1);font-weight:800;color:var(--ink3);display:block;
  margin-bottom:var(--s2)}
.mark{background:var(--ink);color:var(--paper);font-size:var(--t1);font-weight:800;
  padding:2px 7px;font-style:normal;letter-spacing:0;border-radius:4px}
.empty{padding:var(--s9) 0;text-align:center;color:var(--ink3);font-size:var(--t2)}

/* 影片主視覺。只有開卷用，內容區一律白底——那是可讀性的基礎。 */
.vhero{position:relative;margin:0 calc(var(--gut) * -1) var(--s8);
  height:min(62vh,520px);min-height:300px;overflow:hidden;background:var(--ink)}
.vhero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vhero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 42%,rgba(0,0,0,0) 72%)}
.vhero .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;
  padding:0 var(--gut) var(--s7);max-width:var(--wrap);margin:0 auto}
.vhero .kicker{color:rgba(255,255,255,.82);margin-bottom:var(--s4)}
.vhero h2{font-size:var(--t8);font-weight:800;line-height:var(--lh1);
  letter-spacing:-.025em;margin-bottom:var(--s4);max-width:16ch;color:#fff}
.vhero p{font-size:var(--t3);line-height:var(--lh3);color:rgba(255,255,255,.9);max-width:54ch}
@media(prefers-reduced-motion:reduce){.vhero video{display:none}}


/* ── 首頁主視覺：茶則倒茶入壺 ──
   一輪 5.5 秒。時間軸在 js/core/hero.js 的檔頭有寫。
   所有動畫都掛在 .hero-tea 上，加 .paused 就整組停住。

   ⚠️ 這一段是 DESIGN.md「不要寫新的 px 數字」的唯一例外，理由：
   茶則的出茶口與茶壺的壺口是照片上的固定位置（出茶口在茶則圖的
   x 98.5% / y 30%，壺口在茶壺圖的 x 55% / y 19%），茶葉的落點必須
   對準那兩個點，只能用像素算。所以做法是：把整個畫面釘死成一個
   420×370 的「舞台」，裡面全部用像素排；要縮放時只改 --sc，
   整組等比縮小，落點永遠準——手機版也不必再寫一套 keyframes。

   第一版是茶則貼左緣、茶壺貼右緣，中間隔了整個版面寬，茶葉得飛越
   半個螢幕。手機版剛好因為版面窄看起來還好，桌機版就很怪。 */
.hero-tea{position:relative;overflow:hidden;background:var(--paper);
  margin:0 calc(var(--gut) * -1) var(--s8);
  padding:var(--s10) max(var(--gut),calc((100% - var(--wrap)) / 2)) var(--s9);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:var(--s9);--cyc:5.5s;--sc:1}
.ht-cap{grid-area:1/1}
.ht-stage{grid-area:1/2;position:relative;
  width:calc(420px * var(--sc));height:calc(370px * var(--sc))}
/* 舞台內部一律用固定像素，整組靠 --sc 等比縮放 */
.ht-scene{position:absolute;left:0;top:0;width:420px;height:370px;
  transform:scale(var(--sc));transform-origin:0 0}

/* 水墨圖本身就有墨韻與淡淡的影子，再加一層 CSS 投影會糊成一團。
   照片版需要投影是因為去背之後太「貼」，這裡不需要。 */

/* 茶壺：右下方，蓋子是開的。
   水墨版只有一張壺（沒有「裝滿」的版本），所以改成葉子落進去之後
   壺身輕輕沉一下——重量進來了，用動作講，不用第二張圖。 */
.ht-pot{position:absolute;left:168px;top:234px;width:232px;
  animation:htPotSettle var(--cyc) cubic-bezier(.34,.01,.2,1) infinite}
.ht-pot img{width:100%;height:auto;display:block}
@keyframes htPotSettle{
  0%,52%{transform:translateY(0)}
  60%{transform:translateY(2.5px)}
  72%,100%{transform:translateY(0)}}

/* 茶則：左上進場、傾斜倒出、退場 */
.ht-scoop{position:absolute;left:10px;top:0;width:290px;
  transform-origin:12% 72%;
  animation:htScoop var(--cyc) cubic-bezier(.34,.01,.2,1) infinite}
.ht-scoop img{width:100%;height:auto;display:block}
.ht-sc-f{position:relative}           /* 底層：滿的茶則，撐出容器高度 */
.ht-sc-e{position:absolute;inset:0;opacity:0;
  animation:htScoopEmpty var(--cyc) linear infinite}
@keyframes htScoop{
  0%   {transform:translate(-14%,-8%) rotate(-6deg);opacity:0}
  9%   {transform:translate(0,0) rotate(-2deg);opacity:1}
  20%  {transform:translate(0,0) rotate(-2deg)}
  /* 傾斜倒出。壺在右下方，所以往右轉、順著重力把口朝下 */
  30%  {transform:translate(3%,2%) rotate(26deg)}
  52%  {transform:translate(3%,2%) rotate(30deg)}
  64%  {transform:translate(2%,1%) rotate(12deg)}
  78%  {transform:translate(0,0) rotate(-2deg);opacity:1}
  92%  {transform:translate(-10%,-6%) rotate(-6deg);opacity:0}
  100% {transform:translate(-14%,-8%) rotate(-6deg);opacity:0}}
/* 在葉子還在落的時候就換成空的，視覺上才是「倒完了」而不是憑空變空 */
@keyframes htScoopEmpty{0%,38%{opacity:0} 48%,100%{opacity:1}}

/* 落下的茶葉。起點壓在傾倒後的出茶口內側，終點是壺口。 */
.ht-fall{position:absolute;left:297px;top:185px;width:1px;height:1px;z-index:2}
.hl{position:absolute;display:block;width:var(--w);height:calc(var(--w) * .62);
  background:#3b3a37;border-radius:60% 30% 55% 35%/50% 60% 40% 50%;
  opacity:0;transform:rotate(var(--r0));
  animation:htFall var(--t) cubic-bezier(.45,.05,.75,.9) infinite;
  animation-delay:var(--d)}
/* 只落 74px，終點落在壺口暗處的正中央——葉子要消失在壺裡，
   停在壺緣上會看起來像卡住。中段的 X 位移比終點多一點，
   做出被拋出去再落下的弧線。 */
@keyframes htFall{
  0%  {opacity:0;transform:translate(0,0) rotate(var(--r0)) scale(.9)}
  16% {opacity:1}
  55% {transform:translate(calc(11px + var(--dx) * .6),38px)
       rotate(calc(var(--r0) + var(--sp) * .55)) scale(1)}
  84% {opacity:1}
  100%{opacity:0;transform:translate(calc(7px + var(--dx)),74px)
       rotate(calc(var(--r0) + var(--sp))) scale(.86)}}

/* 文字 */
.ht-cap .kicker{color:var(--ink3);margin-bottom:var(--s4)}
.ht-cap h2{font-size:var(--t9);font-weight:800;line-height:var(--lh1);
  letter-spacing:-.025em;margin-bottom:var(--s5);max-width:12ch}
.ht-cap p{font-size:var(--t3);line-height:var(--lh4);color:var(--ink2);max-width:40ch}

.hero-tea.paused *{animation-play-state:paused!important}

/* 中間尺寸：版面還放得下兩欄，但舞台要讓一點寬度給文字 */
@media(max-width:1060px){.hero-tea{--sc:.82;gap:var(--s7)}}
@media(max-width:900px){
  /* 直式：舞台在上、文字在下。內部座標不變，只是整組縮小。 */
  .hero-tea{grid-template-columns:minmax(0,1fr);justify-items:center;
    gap:var(--s6);padding:var(--s8) var(--gut) var(--s7);--sc:.68}
  .ht-stage{grid-area:1/1}
  .ht-cap{grid-area:2/1;width:100%}
}
@media(max-width:400px){.hero-tea{--sc:.56}}

/* 開了「減少動態效果」就完全不播，直接顯示倒完的狀態。
   這不是可選的，是動畫的基本要求。 */
@media(prefers-reduced-motion:reduce){
  .hero-tea *{animation:none!important}
  .ht-scoop{transform:translate(0,0) rotate(-2deg)}
  .ht-sc-e{opacity:1}
  .ht-pot-f{opacity:1}
  .hl{display:none}
}

/* 頁尾大字。每一頁結尾都有，是版面元素不是 logo。 */
.wordmark{border-top:1px solid var(--rule);padding:var(--s9) var(--gut) var(--s7);
  text-align:center;max-width:var(--wrap);margin:var(--s10) auto 0}
.wordmark b{display:block;font-family:var(--brush);font-size:clamp(56px,13vw,150px);
  font-weight:400;letter-spacing:.04em;line-height:1}
.wordmark span{display:block;font-size:var(--t2);color:var(--ink3);font-weight:800;
  letter-spacing:.34em;text-transform:uppercase;margin-top:var(--s4);padding-left:.34em}

/* ═══ 5. 元件 ═══ */

/* 按鈕 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:var(--s4) var(--s7);border:1px solid var(--ink);background:var(--ink);
  color:var(--paper);font-family:inherit;font-size:var(--t2);font-weight:800;
  border-radius:var(--r);cursor:pointer;text-decoration:none;line-height:1}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:none;color:var(--ink);border-color:var(--rule2)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.sm{padding:var(--s3) var(--s5);font-size:var(--t1)}
.btn.ext::after{content:'↗';font-size:var(--t2);font-weight:400;margin-left:2px}
.btn:disabled{opacity:.3;cursor:not-allowed}
.btn:disabled:hover{background:var(--ink);color:var(--paper)}
/* 按鈕群組。gap 用 --s3：--s2（8px）時兩顆按鈕的圓角會黏在一起，
   看起來像一顆被切開的按鈕。 */
.tbtns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
/* 沒被 .tbtns 包住的相鄰按鈕也要有距離 */
.btn + .btn{margin-left:var(--s3)}
.tbtns .btn + .btn{margin-left:0}          /* 群組內交給 gap，不要疊加 */
.btn + .tbtns,.tbtns + .tbtns{margin-top:var(--s3)}
.bk{background:none;border:0;font-family:inherit;font-size:var(--t1);font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);cursor:pointer;
  padding:var(--s3) 0;display:inline-flex;align-items:center;gap:var(--s2)}
.bk:hover{color:var(--ink)}
.bk::before{content:'←'}

/* 表單 */
.fl{display:block;margin-bottom:var(--s4)}
.fl > span{display:block;font-size:var(--t1);font-weight:800;color:var(--ink3);
  margin-bottom:var(--s2)}
.search{width:100%;padding:var(--s3) var(--s4);border:1px solid var(--rule2);
  background:var(--paper);color:var(--ink);font-family:inherit;font-size:var(--t3);
  border-radius:var(--r)}
.search:focus{outline:0;border-color:var(--ink)}
.search::placeholder{color:var(--ink3)}
.ta{resize:vertical;line-height:var(--lh3)}
select.search{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* 茶款列 */
.trow{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;
  border-bottom:1px solid var(--rule);cursor:pointer;background:none;border-left:0;
  border-right:0;border-top:0;width:100%;text-align:left;font-family:inherit;color:inherit}
.trow:hover{background:var(--paper2)}
/* 茶款列左邊的粗線。原本依茶類上色，但參考站的顏色全部來自商品照片，
   版面本身不塗色——我們沒有照片時用彩色線代替，整頁就變成七彩雜訊。
   統一成黑色粗線之後，反而是茶名自己跳出來。 */
.dot{flex:0 0 auto;width:7px;height:42px;background:var(--ink);border-radius:2px}
.nm{flex:1;min-width:0}
.nm b{display:block;font-size:var(--t4);font-weight:700;line-height:var(--lh2)}
.nm small{display:block;font-size:var(--t1);color:var(--ink3);margin-top:3px}
/* 茶坊列上的地址。比上一行再淡一階，掃的時候不會跟茶區名打架。 */
.nm small.vad{color:var(--ink3);opacity:.85;line-height:var(--lh2)}
.pr{flex:0 0 auto;text-align:right;font-size:var(--t1);color:var(--ink2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.addb{flex:0 0 auto;padding:var(--s2) var(--s4);border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);font-family:inherit;font-size:var(--t1);
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  border-radius:var(--r-sm)}
.addb:hover{background:var(--paper);color:var(--ink)}
.addb.on,.addb:disabled{background:none;color:var(--ink3);border-color:var(--rule);
  cursor:default}

/* 表格 */
table.gt{width:100%;border-collapse:collapse;font-size:var(--t2)}
table.gt td{padding:var(--s3) 2px;border-bottom:1px solid var(--rule);
  vertical-align:top;line-height:var(--lh3);color:var(--ink2)}
table.gt tr:last-child td{border-bottom:0}
table.gt td:first-child{color:var(--ink3);white-space:nowrap;padding-right:var(--s5);
  font-size:var(--t1);font-weight:800}
.gt td.r{text-align:right;font-variant-numeric:tabular-nums}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.sum{font-size:var(--t5);font-weight:800;font-variant-numeric:tabular-nums}
tr.tot td{border-top:1px solid var(--ink);border-bottom:0;padding-top:var(--s4)}

/* 提醒 */
.ask{border-left:2px solid var(--ink);padding:2px 0 2px var(--s4);margin:var(--s4) 0}
.ask b{display:block;font-size:var(--t3);font-weight:700;margin-bottom:var(--s1)}
.ask span{font-size:var(--t2);line-height:var(--lh4);color:var(--ink2)}
.wn,.caution{margin:var(--s4) 0;padding:var(--s4);background:var(--paper2);
  border-left:2px solid var(--c-red);font-size:var(--t2);line-height:var(--lh3);
  color:var(--ink2)}
.caution{margin:var(--s4) 0 0}
.tp-long{margin-top:var(--s3)}
.ok{margin:var(--s4) 0;font-size:var(--t2);color:var(--ink2)}

/* 編號清單 */
.numlist{counter-reset:s}
.numlist > div{counter-increment:s;position:relative;padding:0 0 var(--s5) var(--s8);
  font-size:var(--t3);line-height:var(--lh3);color:var(--ink2)}
.numlist > div:last-child{padding-bottom:0}
.numlist > div::before{content:counter(s,decimal-leading-zero);position:absolute;
  left:0;top:2px;font-size:var(--t1);font-weight:800;color:var(--ink);letter-spacing:.1em}
.numlist > div > b{display:block;font-size:var(--t3);font-weight:700;color:var(--ink);
  margin-bottom:var(--s1)}
.numlist > div > small{display:block;font-size:var(--t2);line-height:var(--lh3);
  color:var(--ink2)}

/* 摺疊區 */
.acc{border-bottom:1px solid var(--rule)}
.acc > summary{list-style:none;cursor:pointer;padding:var(--s4) 0;font-size:var(--t3);
  font-weight:700;display:flex;align-items:center;gap:var(--s2)}
.acc > summary::-webkit-details-marker{display:none}
.acc > summary::before{content:'';width:7px;height:7px;flex:0 0 auto;
  border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:rotate(-45deg);transition:transform .18s;margin-left:2px}
.acc[open] > summary::before{transform:rotate(45deg)}
.acc > summary:hover{color:var(--ink3)}
.acc > div{padding:var(--s1) 0 var(--s6)}
/* 話術表是三欄等寬的內容表，跟規格表不同，要把上面那份覆蓋掉 */
.acc table.gt{table-layout:fixed}
.acc table.gt th{text-align:left;font-size:var(--t1);font-weight:800;color:var(--ink3);
  letter-spacing:.16em;text-transform:uppercase;padding:0 var(--s4) var(--s3) 0;
  border-bottom:1px solid var(--ink);vertical-align:bottom}
.acc table.gt th:last-child,.acc table.gt td:last-child{padding-right:0}
.acc table.gt td{padding:var(--s3) var(--s4) var(--s3) 0;font-size:var(--t2);color:var(--ink2)}
.acc table.gt td:first-child{color:var(--ink);white-space:normal;font-size:var(--t2);
  font-weight:700;padding-right:var(--s4);width:26%}
.acc table.gt th:nth-child(2),.acc table.gt td:nth-child(2){width:37%}

/* 標籤 */
/* 「喝過了」勾選框。緊接在茶名與風味標籤下面，是茶款詳情的狀態列。
   打勾＋黑底＝喝過，空框＝還沒。兩種狀態都寫「喝過了」，
   靠框與顏色分辨——不用讀完字就知道自己標記過沒有。 */
.tried{display:inline-flex;align-items:center;gap:var(--s3);margin-top:var(--s5);
  padding:var(--s3) var(--s5) var(--s3) var(--s4);border:1px solid var(--rule2);
  background:none;color:var(--ink3);font-family:inherit;font-size:var(--t2);
  font-weight:800;border-radius:var(--r);cursor:pointer;line-height:1}
.tried i{flex:0 0 auto;width:18px;height:18px;display:block;position:relative;
  border:1px solid var(--rule2);border-radius:var(--r-sm)}
.tried:hover{border-color:var(--ink);color:var(--ink)}
.tried:hover i{border-color:var(--ink)}
.tried.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.tried.on i{border-color:var(--paper);background:var(--paper)}
 /* 勾勾用 translate 置中，不用寫死座標——改框大小時不會歪掉 */
.tried.on i::after{content:'';position:absolute;left:50%;top:50%;width:4px;height:9px;
  border:solid var(--ink);border-width:0 2px 2px 0;
  transform:translate(-55%,-65%) rotate(42deg)}

.tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.tags .chip{font-size:var(--t1);font-weight:700;letter-spacing:.08em;text-transform:none;
  padding:var(--s1) var(--s3);background:var(--paper2);color:var(--ink2);border:0;
  cursor:default;border-radius:var(--r-sm)}

/* 甜點卡片。茶款詳情與節氣頁共用。 */
.swt{border-top:1px solid var(--rule);padding:var(--s4) 0}
.swt:first-child{border-top:0;padding-top:0}
.swt > b{display:block;font-family:var(--brush-tc);font-size:var(--t5);font-weight:700;
  letter-spacing:.04em;line-height:var(--lh2)}
.swt > small{display:block;font-size:var(--t1);color:var(--c-red-t);font-weight:800;
  letter-spacing:.06em;margin:var(--s1) 0 var(--s2)}
.swt > span{display:block;font-size:var(--t2);line-height:var(--lh4);color:var(--ink2)}
.swt > em{display:block;font-style:normal;font-size:var(--t1);color:var(--ink3);
  font-weight:800;letter-spacing:.06em;margin-top:var(--s3)}
/* 撕曆上的今日配，只有一行 */
.cal-swt{border-top:1px solid var(--rule);padding-top:var(--s3);margin-bottom:var(--s5);
  font-size:var(--t2);color:var(--ink2)}
.cal-swt i{font-style:normal;font-size:var(--t1);font-weight:800;color:var(--c-red-t);
  letter-spacing:.06em;margin-right:var(--s2)}

/* 群組小標 */
/* 茶區分組。每一區之間要留白，不然十八個茶區會黏成一條長列，
   看不出哪幾款屬於同一區。 */
.zgrp + .zgrp{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--ink)}
.grp{margin-bottom:var(--s3);font-size:var(--t1);font-weight:800;color:var(--ink3)}
.grp > b{display:block;font-size:var(--t1);font-weight:800;color:var(--ink3);
  margin-bottom:var(--s3)}

.lnk{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule2)}
.lnk:hover{border-color:var(--ink)}

/* ═══ 6. 各分頁 ═══ */

/* ── 茶款詳情 ── */
.tea-head{padding:var(--s8) 0 var(--s7) var(--s6);border-bottom:1px solid var(--ink);
  margin-bottom:var(--s7);border-left:6px solid var(--ink)}
.tea-head h2{font-family:var(--brush-tc);font-size:var(--t8);font-weight:700;
  line-height:var(--lh1);letter-spacing:.02em;margin-bottom:var(--s3)}
.bigtea{font-family:var(--brush-tc);font-size:var(--t6);font-weight:700;
  line-height:var(--lh2);letter-spacing:.04em}
.price{display:flex;align-items:baseline;gap:var(--s3);margin:var(--s2) 0 var(--s1)}
.price b{font-size:var(--t7);font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.price .m{font-size:var(--t1);color:var(--ink3)}

/* ── 選茶 ── */
.step{font-size:var(--t1);font-weight:800;color:var(--ink3);margin-bottom:var(--s4)}
.qt{font-size:clamp(23px,3.6vw,32px);font-weight:800;line-height:1.25;
  letter-spacing:-.02em;margin-bottom:var(--s7);max-width:20ch}
.opt{display:block;width:100%;text-align:left;padding:var(--s5) var(--s5);
  margin-bottom:var(--s2);background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r);color:var(--ink);font-family:inherit;font-size:var(--t3);
  cursor:pointer;line-height:var(--lh2)}
.opt:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opt small{display:block;font-size:var(--t2);color:var(--ink3);margin-top:var(--s1)}
.opt:hover small{color:rgba(255,255,255,.7)}
/* 進度條。一格一題，看得出還剩幾題——一整條的百分比看不出來。 */
.bar{display:flex;gap:2px;height:3px;margin-bottom:var(--s7)}
.bar i{flex:1;display:block;height:100%;background:var(--rule);border-radius:2px;
  transition:background .2s}
.bar i.on{background:var(--ink)}
/* 回頭修改時，目前選的那個要看得出來 */
.opt.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opt.on small{color:rgba(255,255,255,.7)}
.why{background:var(--paper2);padding:var(--s6);margin:var(--s6) 0;font-size:var(--t2);
  line-height:var(--lh4);color:var(--ink2);border-radius:var(--r)}
.rst{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s7)}

/* 沖泡計時器 */
.timer{border:1px solid var(--ink);border-radius:var(--r);padding:var(--s7) var(--s5);
  margin:var(--s5) 0;text-align:center}
.tl,.lbl{font-size:var(--t1);font-weight:800;color:var(--ink3)}
.timer .tl,.timer .lbl{display:block;margin-bottom:var(--s3)}
.tn,.num{display:block;font-size:var(--t-timer);font-weight:800;font-variant-numeric:tabular-nums;
  line-height:1;letter-spacing:-.03em}
.tw{font-size:var(--t1);color:var(--ink3);margin-top:var(--s3)}
.track{display:flex;gap:3px;justify-content:center;margin-top:var(--s4)}
.track i{width:22px;height:3px;background:var(--rule2);display:block}
.track i.on{background:var(--ink)}

/* ── 地圖 ── */
/* ⚠️ isolation:isolate 不能拿掉。
   Leaflet 內部的圖層自己帶 z-index（圖磚 200、標記 600、彈窗 700、控制項 1000），
   而 .mapwrap 只有 position:relative 的話不會產生堆疊環境，
   那些數字就會直接跟頁面上其他元素比大小——結果就是地圖蓋住頁首的下拉選單。
   isolate 把它們全部關在這個框裡面，外面的元件不必再去跟 Leaflet 比 z-index。 */
.mapwrap{position:relative;isolation:isolate;z-index:0;
  height:min(56vh,460px);min-height:300px;
  background:var(--paper2);border-bottom:1px solid var(--rule)}
#lmap,#emap{width:100%;height:100%;background:var(--paper2)}
.marks,.mapwrap .legend{position:absolute;bottom:var(--s3);left:var(--s3);z-index:800;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:var(--s3);font-size:var(--t1);color:var(--ink2);display:block;line-height:1.9}
.mapwrap .legend b{display:block;font-size:var(--t1);font-weight:800;color:var(--ink3);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s1)}
.marks div,.mapwrap .legend span{display:flex;align-items:center;gap:var(--s2)}
.marks i,.mapwrap .legend i{width:13px;height:4px;display:inline-block;flex:0 0 auto}
/* 體驗活動的圖例畫的是地圖上那兩種點，所以要是圓的不是條的 */
.legend i.lg-src,.legend i.lg-apx{width:11px;height:11px;border-radius:50%;
  border:1.5px solid var(--ink)}
.legend i.lg-src{background:var(--ink)}
.legend i.lg-apx{background:var(--paper);border-style:dashed;border-width:2px}
.mapwrap .legend br{display:none}
.leaflet-container{font-family:var(--sans)}
/* 地圖剛好佔滿一屏，不提示的話使用者不會知道下面還有篩選。
   800 是為了壓過 Leaflet 的標記(600)與提示框(650)，跟它自己的控制項同層；
   這個數字活在 .mapwrap 的 isolate 裡面，不會影響到頁面其他地方。 */
.scrollhint{position:absolute;left:50%;bottom:var(--s4);transform:translateX(-50%);
  z-index:800;display:flex;align-items:center;gap:var(--s2);
  padding:var(--s2) var(--s4);border:1px solid var(--rule);
  background:rgba(255,255,255,.95);color:var(--ink);font-family:inherit;
  font-size:var(--t1);font-weight:700;cursor:pointer;border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,.09);animation:hintbob 2.1s ease-in-out infinite;
  transition:opacity .3s}
.scrollhint:hover{background:var(--ink);color:var(--paper)}
.scrollhint i{width:7px;height:7px;flex:0 0 auto;display:block;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px)}
.scrollhint.gone{opacity:0;pointer-events:none}
@keyframes hintbob{0%,100%{transform:translateX(-50%) translateY(0)}
                   50%{transform:translateX(-50%) translateY(5px)}}
@media(prefers-reduced-motion:reduce){.scrollhint{animation:none}}

/* 篩選。.chip 同時給茶款標籤與篩選鈕用，靠 .tags .chip 蓋掉標籤那一份。 */
.filters{border-bottom:1px solid var(--rule);padding:var(--s4) var(--gut);
  max-width:var(--wrap);margin:0 auto}
.frow{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s2)}
.frow:last-child{margin-bottom:0}
.flab{flex:0 0 68px;font-size:var(--t1);font-weight:800;color:var(--ink3)}
.chip{padding:var(--s2) var(--s3);border:1px solid var(--rule);background:var(--paper);
  color:var(--ink2);font-family:inherit;font-size:var(--t1);font-weight:700;
  cursor:pointer;line-height:1.2;display:inline-flex;align-items:center;gap:var(--s2);
  border-radius:var(--r-sm)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip .n{font-size:var(--t1);color:var(--ink3);font-variant-numeric:tabular-nums;
  font-weight:400}
.chip.on .n{color:rgba(255,255,255,.65)}
.chip.dead,.chip:disabled{opacity:.32;cursor:not-allowed}
.chip.dead:hover{border-color:var(--rule);color:var(--ink2)}
.chip.rst{border-style:dashed;font-weight:800}

/* ── 節氣 ──
   .season 是一整個季節區塊的容器；.sgrid 裡的今日是 .scell.now。 */
.season{margin-bottom:0}
.season + .season{margin-top:var(--s11)}
.season > .sh{font-family:var(--brush-tc);font-size:var(--t6);font-weight:700;
  color:var(--ink);padding-bottom:var(--s4);margin-bottom:var(--s6);
  border-bottom:2px solid var(--ink);display:flex;align-items:baseline;
  gap:var(--s5);letter-spacing:.06em;text-transform:none}
.season > .sh small{font-family:var(--sans);font-size:var(--t2);font-weight:400;
  color:var(--ink3);letter-spacing:0}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:1px;
  background:var(--rule2);border:1px solid var(--rule2);border-radius:var(--r);
  overflow:hidden}
.scell{padding:var(--s7) var(--s6);border:0;background:var(--paper);color:var(--ink);
  font-family:inherit;text-align:left;cursor:pointer;display:block}
.scell:hover{background:var(--paper2)}
.scell > b{display:block;font-family:var(--brush-tc);font-size:var(--t6);
  font-weight:700;line-height:var(--lh1);letter-spacing:.06em}
.scell > small{display:block;font-size:var(--t1);color:var(--ink3);
  margin:var(--s3) 0 var(--s4);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.scell > span{display:block;font-size:var(--t2);color:var(--ink2);line-height:var(--lh2)}
.scell.now{background:var(--ink);color:var(--paper)}
.scell.now > small{color:rgba(255,255,255,.6)}
.scell.now > span{color:rgba(255,255,255,.82)}

/* 撕曆。左欄黃曆、中間超大日期、右欄月曆與今日宜喝。 */
.cal{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.25fr) minmax(0,.92fr);
  gap:var(--s6);border:1px solid var(--ink);border-radius:var(--r);
  padding:var(--s7) var(--s7);margin-bottom:var(--s10);align-items:start}
.cal-l{min-width:0;font-size:var(--t1);line-height:1.9;
  border-right:1px solid var(--rule);padding-right:var(--s6);align-self:stretch}
.cal-gz{font-size:var(--t2);font-weight:800;color:var(--c-red-t);margin-bottom:2px}
.cal-gz em{font-style:normal;border:1px solid var(--c-red-t);border-radius:3px;
  padding:0 var(--s1);margin-left:var(--s1);font-size:var(--t1)}
.cal-ld{font-size:var(--t4);font-weight:800;letter-spacing:.04em;margin-bottom:var(--s1)}
.cal-term{font-family:var(--brush-tc);font-size:var(--t5);font-weight:700;
  color:var(--c-red-t);margin-bottom:var(--s3);letter-spacing:.06em}
.cal-note{font-size:var(--t1);line-height:var(--lh3);color:var(--ink3)}
.cal-yiji{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:var(--s3) 0;margin-bottom:var(--s3)}
.cal-yi,.cal-ji{display:flex;gap:var(--s2);align-items:baseline;line-height:var(--lh3)}
.cal-yi i,.cal-ji i{flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-style:normal;
  font-size:var(--t1);font-weight:800;color:#fff}
.cal-yi i{background:var(--c-red)}
.cal-ji i{background:var(--ink)}
.cal-yi span,.cal-ji span{font-size:var(--t1);color:var(--ink2)}
.cal-dirs{font-size:var(--t1);color:var(--ink3)}
.cal-row{display:flex;gap:var(--s2)}
.cal-row i{flex:0 0 36px;font-style:normal;color:var(--c-red-t);font-weight:700}

.cal-m{text-align:center;padding:var(--s4) var(--s1) 0;display:flex;
  flex-direction:column;justify-content:flex-start;min-height:290px}
.cal-yr{font-size:var(--t1);font-weight:800;color:var(--c-red-t);margin-bottom:var(--s6)}
/* 負字距會把最後一個字的後方空白吃掉 0.07em，文字方塊因此右邊比左邊窄，
   置中之後整組數字會偏右。補回等量的右內距，左右留白才會一樣。 */
.cal-d{display:block;font-size:var(--t-cal);font-weight:900;line-height:.72;
  letter-spacing:-.07em;color:var(--ink);font-variant-numeric:tabular-nums;
  padding-right:.07em}
.cal-wk{font-size:clamp(18px,2.4vw,27px);font-weight:800;color:var(--ink);
  letter-spacing:.4em;margin-top:var(--s7);padding-left:.4em}
.cal-wk-en{font-size:var(--t1);font-weight:800;color:var(--ink3);letter-spacing:.28em;
  text-transform:uppercase;margin-top:var(--s3);padding-left:.28em}

.cal-r{min-width:0}
.cal-mo{font-size:var(--t1);font-weight:800;color:var(--c-red-t);
  margin-bottom:var(--s2);display:flex;align-items:baseline;gap:2px}
.cal-mo b{font-size:var(--t4);color:var(--ink);letter-spacing:0}
.cal-grid{margin-bottom:var(--s5)}
.cal-gh,.cal-gd{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.cal-gh i{font-style:normal;font-size:var(--t1);font-weight:800;color:var(--ink3);
  padding-bottom:var(--s2);border-bottom:1px solid var(--rule)}
.cal-gd b{font-size:var(--t1);font-weight:400;padding:var(--s1) 0;color:var(--ink3);
  font-variant-numeric:tabular-nums}
.cal-gd b.on{background:var(--ink);color:var(--paper);font-weight:800;border-radius:3px}
.cal-tea-box{border-top:2px solid var(--ink);padding-top:var(--s5)}
.cal-lbl{font-size:var(--t1);font-weight:800;color:var(--c-red-t);margin-bottom:var(--s3)}
.cal-tea{font-family:var(--brush-tc);font-size:clamp(28px,3.8vw,44px);font-weight:700;
  line-height:var(--lh1);letter-spacing:.04em;margin-bottom:var(--s2)}
.cal-sub{font-size:var(--t2);color:var(--ink3);margin-bottom:var(--s5)}

/* ── 首頁 ── */
/* 首頁的兩個版位並排：左邊節氣（每天都不一樣，是回來的理由），
   右邊入口（只有第一次來的人需要）。權重差很多，所以寬度也差很多。 */
.hrow{display:grid;grid-template-columns:1.75fr 1fr;gap:var(--s7);
  align-items:stretch;margin-bottom:var(--s9)}
.hrow > .sec{margin-bottom:0;display:flex;flex-direction:column}
.hrow > .sec > .tcard,.hrow > .sec > .cta{flex:1}

.tcard{display:grid;grid-template-columns:auto 1fr;gap:var(--s6);
  border:1px solid var(--ink);border-radius:var(--r);padding:var(--s6);align-items:start}
.tc-date{text-align:center;min-width:96px}
.tc-date b{display:block;font-size:var(--t-date);font-weight:900;line-height:.8;
  letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.tc-date span{display:block;font-size:var(--t1);font-weight:800;color:var(--c-red-t);
  letter-spacing:.08em;margin-top:var(--s3)}
/* 星期。看「今天宜喝什麼」時，第一個要確認的是這張卡講的是不是今天。 */
.tc-date i{display:block;font-style:normal;font-size:var(--t2);font-weight:800;
  color:var(--ink2);letter-spacing:.14em;margin-top:var(--s2)}
.tc-date em{display:block;font-family:var(--brush-tc);font-size:var(--t5);font-weight:700;
  font-style:normal;letter-spacing:.06em;margin-top:var(--s2)}
.tc-body{min-width:0;border-left:1px solid var(--rule);padding-left:var(--s7)}
.tc-lbl{font-size:var(--t1);font-weight:800;color:var(--c-red-t);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:var(--s3)}
.tc-tea{display:block;font-family:var(--brush-tc);font-size:clamp(28px,3.8vw,44px);
  font-weight:700;line-height:var(--lh1);letter-spacing:.04em;margin-bottom:var(--s2);
  text-decoration:none;color:var(--ink)}
.tc-tea:hover{color:var(--c-red-t)}
.tc-sub{font-size:var(--t2);color:var(--ink3);margin-bottom:var(--s4)}
.tc-swt{font-size:var(--t2);color:var(--ink2);padding-top:var(--s3);
  border-top:1px solid var(--rule)}
.tc-swt i{font-style:normal;font-size:var(--t1);font-weight:800;color:var(--c-red-t);
  letter-spacing:.06em;margin-right:var(--s2)}
.tc-alm{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s3);
  font-size:var(--t1);color:var(--ink2)}
.tc-alm span{display:flex;align-items:center;gap:var(--s2)}
.tc-alm i{width:18px;height:18px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-style:normal;font-size:var(--t1);
  font-weight:800;color:#fff;flex:0 0 auto}
.tc-alm i.yi{background:var(--c-red)}
.tc-alm i.ji{background:var(--ink)}
/* 整張卡是節氣頁的入口，底下給一條明白的連結，不要讓人猜哪裡可以點 */
.tc-more{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s5);
  font-size:var(--t1);font-weight:800;letter-spacing:.05em;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}
.tc-more:hover{color:var(--c-red-t);border-color:var(--c-red-t)}

.cta{border:1px solid var(--rule2);border-radius:var(--r);padding:var(--s7)}
.cta-t{font-size:var(--t5);font-weight:800;line-height:var(--lh2);margin-bottom:var(--s3)}
.cta .btn{margin-top:var(--s5)}

/* 逛逛。不畫外框，只在欄與欄之間留一條線——
   之後會放圖片進來，框會跟圖片的邊界打架。 */
.egrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0}
.ecard{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:var(--s5);
  align-items:start;background:none;border:0;border-left:1px solid var(--rule2);
  padding:var(--s2) var(--s6) var(--s5);text-align:left;cursor:pointer;
  font-family:inherit;color:var(--ink)}
.ecard:first-child{border-left:0;padding-left:0}
.ecard:hover b{text-decoration:underline;text-underline-offset:4px}
/* 水墨記號。兩個方向都夾住，因為這幾張圖的比例差很多：
   山是直的、松是橫的，只限一邊的話會一張細長一張橫躺。 */
.ec-ink{display:flex;align-items:flex-start;justify-content:center;padding-top:2px}
.ec-ink img{max-width:100%;max-height:3.4em;width:auto;height:auto;
  opacity:.42;display:block}
.ecard:hover .ec-ink img{opacity:.62}
.ec-b{min-width:0}
.ecard b{display:block;font-size:var(--t4);font-weight:800;margin-bottom:var(--s2)}
.ec-d{display:block;font-size:var(--t2);line-height:var(--lh3);color:var(--ink3)}

/* ── 茶款卡片 ──
   順序照參考站：標題 → 一句話 → 分隔點 → 圖 → 味覺量表 → 說明 → 價格。
   名字放在圖上面，讀的人先知道這是什麼，再看圖。
   圖框是無彩度的純灰——顏色留給照片本身，框不搶戲。 */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s9)}
.tcd{background:none;border:0;padding:0;text-align:left;cursor:pointer;
  font-family:inherit;color:inherit;display:flex;flex-direction:column}
.tcd-h{display:flex;align-items:flex-start;gap:var(--s3);
  border-top:2px solid var(--ink);padding-top:var(--s3)}
.tcd-h b{flex:1;font-family:var(--brush-tc);font-size:var(--t6);font-weight:700;
  line-height:var(--lh2);letter-spacing:.04em}
/* 右上角的小圓點，照參考站的做法，是「可以點進去」的暗示 */
.tcd-h i,.pst-h i{flex:0 0 auto;width:15px;height:15px;border-radius:50%;
  border:1px solid var(--rule2);position:relative;margin-top:6px}
.tcd-h i::after,.pst-h i::after{content:'';position:absolute;inset:0;margin:auto;
  width:4px;height:4px;border-radius:50%;background:var(--ink3)}
.tcd:hover .tcd-h i,.pst:hover .pst-h i{border-color:var(--ink)}
.tcd:hover .tcd-h i::after,.pst:hover .pst-h i::after{background:var(--ink)}
.tcd-s{font-size:var(--t2);color:var(--ink3);margin-top:var(--s1)}
/* 四個小點的分隔，是參考站的節奏記號 */
.tcd-dot{margin:var(--s5) 0 var(--s4);height:3px;width:26px;
  background:radial-gradient(circle,var(--ink3) 1.5px,transparent 1.6px) 0 0/7px 3px repeat-x}

/* ── 圖還沒放的時候：一片茶葉 ──
   看得出這裡本來要放什麼；空灰塊只看得出壞掉。

   img 用自己的 class（.lf），不是 .leaf img——因為每個圖框都有一條
   「.xxx img{width:100%;object-fit:cover}」，跟 .leaf img 權重一樣，
   誰寫在後面誰贏，葉子就會被拉成滿版裁掉。.leaf .lf 權重比較高，贏定了。

   尺寸同時限高與限寬：只限寬的話，在很寬的框裡（16:9、首頁那一區）
   會算出一片超出框高的巨大葉子。

   position:static 也一定要寫。圖框那條 img 規則多半是
   「position:absolute;inset:0;width:100%;height:100%」——
   只把寬高搶回來、忘了定位的話，inset:0 配上 auto 尺寸，
   葉子會縮在框的左上角。看起來像沒對齊，其實是繼承到別人的定位。 */
.leaf{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none}
.leaf .lf{position:static;width:auto;height:auto;max-width:42%;max-height:56%;
  display:block;opacity:.9;transform-origin:50% 88%}
img ~ .leaf{display:none}              /* 真的圖進來就把葉子藏起來 */

/* 滑鼠移上去左右輕輕擺一下，像掛在枝上被風帶到。
   支點放在葉柄（下方中央），不是正中心——從中心轉會像風車。
   用 animation 不用 transition：transition 在滑開時會倒轉回去，像倒帶。 */
@keyframes leafSway{
  0%{transform:rotate(0)}   22%{transform:rotate(-7deg)}
  55%{transform:rotate(6deg)} 78%{transform:rotate(-2.5deg)}
  100%{transform:rotate(0)}}
.tpic:hover .lf,.pst:hover .lf,.acard:hover .lf,
.pcard:hover .lf,.ar-cover:hover .lf,.ar-fph:hover .lf,
.ph-pic:hover .lf,.evt:hover .lf{animation:leafSway 1.1s cubic-bezier(.4,0,.3,1)}
@media(prefers-reduced-motion:reduce){.leaf .lf{animation:none!important}}

.tpic{position:relative;aspect-ratio:1;background:var(--paper2);
  overflow:hidden;display:flex;align-items:flex-end;justify-content:center;
  padding:var(--s5);margin-bottom:var(--s4)}
.tpic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tpic .leaf{align-items:flex-start;padding-top:10%}
.tpic .lf{max-height:52%}
.tpic em{position:relative;z-index:1;font-style:normal;font-family:var(--brush-tc);
  font-size:var(--t5);font-weight:700;letter-spacing:.04em;color:var(--rule2)}
.tpic img ~ em{display:none}          /* 有圖就不顯示佔位文字 */
.tpic-b{position:absolute;top:var(--s4);left:var(--s4);z-index:2;background:var(--paper);
  font-size:var(--t1);font-weight:800;letter-spacing:.06em;padding:var(--s1) var(--s3)}
.tcd:hover .tpic{background:#eeeeec}

.mts{display:flex;flex-wrap:wrap;gap:var(--s4);padding-bottom:var(--s3);
  border-bottom:1px solid var(--rule);margin-bottom:var(--s3)}
.mt{display:inline-flex;align-items:center;gap:3px}
.mt i{font-style:normal;font-size:var(--t1);font-weight:800;color:var(--ink2);
  margin-right:var(--s1)}
.mt u{width:9px;height:11px;background:var(--rule);display:inline-block;
  text-decoration:none}
.mt u.on{background:var(--ink)}
.tcd-d{font-size:var(--t2);line-height:var(--lh3);color:var(--ink2);
  margin-bottom:var(--s4);flex:1}
.tcd-p{font-size:var(--t4);font-weight:800;font-variant-numeric:tabular-nums;
  padding-top:var(--s3);border-top:1px solid var(--rule)}
.tcd-p small{font-size:var(--t1);font-weight:400;color:var(--ink3);margin-left:var(--s2)}

/* 詳情頁最上方的大圖，比卡片矮一點 */
.tea-detail-pic{aspect-ratio:16/7;border-radius:var(--r)}

/* ── 筆記 ──
   標題在最上面且跨越整欄，接著分類、圖、內文。
   標題先出現，讀者掃過去就知道值不值得停下來看圖。 */
.pgrid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s9)}
.pst{display:flex;flex-direction:column;cursor:default}
.pst-h{display:flex;align-items:flex-start;gap:var(--s3);
  border-top:2px solid var(--ink);padding-top:var(--s3);margin-bottom:var(--s5)}
.pst-h h4{flex:1;font-size:var(--t4);font-weight:800;line-height:var(--lh2)}
.pst-k{font-size:var(--t1);font-weight:800;color:var(--ink3);letter-spacing:.06em;
  margin-bottom:var(--s3)}
.pst-pic{position:relative;aspect-ratio:1;background:var(--paper2);margin-bottom:var(--s4);
  overflow:hidden}
.pst-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pst p{font-size:var(--t2);line-height:var(--lh4);color:var(--ink2);flex:1}
.pst time{display:block;font-size:var(--t1);font-weight:800;color:var(--ink3);
  letter-spacing:.06em;padding-top:var(--s4);margin-top:var(--s4);
  border-top:1px solid var(--rule);font-variant-numeric:tabular-nums}

/* ── 我的 ── */
.mrow{display:flex;align-items:center;gap:var(--s2)}
.mrow .trow{flex:1;min-width:0}
.mx{flex:0 0 auto;width:32px;height:32px;border:1px solid var(--rule);background:none;
  color:var(--ink3);font-size:var(--t4);cursor:pointer;border-radius:var(--r-sm);
  line-height:1;font-family:inherit}
.mx:hover{border-color:var(--c-red);color:var(--c-red-t)}
.prow{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s3)}
.prow i{flex:0 0 84px;font-style:normal;font-size:var(--t1);font-weight:800;
  color:var(--ink3);letter-spacing:.06em;text-transform:uppercase}
.prow u{flex:1;height:6px;background:var(--paper2);text-decoration:none;
  border-radius:3px;overflow:hidden}
.prow u b{display:block;height:100%;background:var(--ink)}
.prow span{flex:0 0 auto;font-size:var(--t2);color:var(--ink2);min-width:74px;text-align:right}

/* ── 首頁右欄的左右切換 ──
   兩張卡疊在同一個位置，靠箭頭換。不自動輪播——
   在人正在讀的時候把內容抽走，是最惹人厭的元件之一。 */
.deck{display:flex;flex-direction:column;min-width:0}
.deck > .sec{flex:1;margin-bottom:0;display:flex;flex-direction:column}
.deck > .sec > .cta{flex:1}
.deck-nav{display:flex;align-items:center;justify-content:flex-end;gap:var(--s2);
  margin-bottom:var(--s2);order:-1}
.dk{width:28px;height:28px;flex:0 0 auto;border:1px solid var(--rule2);border-radius:50%;
  background:none;color:var(--ink2);font-family:inherit;font-size:var(--t4);line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 2px}
.dk:hover{border-color:var(--ink);color:var(--ink)}
.dk-dots{display:flex;gap:5px;align-items:center;margin:0 var(--s1)}
.dk-dots i{width:6px;height:6px;border-radius:50%;background:var(--rule2);display:block}
.dk-dots i.on{background:var(--ink)}
.mb-tea{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule);
  font-size:var(--t1);font-weight:800;color:var(--ink3);letter-spacing:.05em}
.mb-tea b{font-family:var(--brush-tc);font-size:var(--t5);font-weight:700;color:var(--ink);
  letter-spacing:.04em}

/* ── 茶人格 ── */
.mtypes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s5)}
.mtype b{display:block;font-family:var(--brush-tc);font-size:var(--t5);font-weight:700;
  letter-spacing:.04em;margin-bottom:var(--s2)}
.mtype span{display:block;font-size:var(--t2);line-height:var(--lh3);color:var(--ink2)}
.mres{border-left:6px solid var(--ink);padding:var(--s8) 0 var(--s7) var(--s6);
  border-bottom:1px solid var(--ink);margin-bottom:var(--s7)}
.mres-t{font-family:var(--brush-tc);font-size:var(--t8);font-weight:700;line-height:var(--lh1);
  letter-spacing:.04em;margin-bottom:var(--s4)}
.mres-l{font-size:var(--t3);line-height:var(--lh4);color:var(--ink2);max-width:44ch}
.mtea{border:1px solid var(--ink);border-radius:var(--r);padding:var(--s7);margin-bottom:var(--s9)}
.mtea-n{font-family:var(--brush-tc);font-size:var(--t6);font-weight:700;letter-spacing:.04em;
  line-height:var(--lh2);margin-bottom:var(--s2)}
.msw{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s4)}
.msw-i{border:1px solid var(--rule2);border-radius:var(--r);padding:var(--s3) var(--s5);
  font-size:var(--t3);font-weight:700}

/* ── 茶區介紹 ──
   目前沒有照片。試過放一張滿版的貓空照，但圖不夠好，反而拉低整頁的質感——
   一張勉強的照片比沒有照片糟。之後有好圖再加。 */
/* 上面就是篩選列的分隔線，貼著會很擠 */
.zintro{margin-bottom:var(--s9);padding-top:var(--s9)}
.zhead{border-left:6px solid var(--ink);padding-left:var(--s5);margin-bottom:var(--s6)}
.zhead b{display:block;font-family:var(--brush-tc);font-size:var(--t7);font-weight:700;
  letter-spacing:.04em;line-height:var(--lh1);padding-bottom:var(--s1)}
.zhead span{display:block;font-size:var(--t1);font-weight:800;color:var(--ink3);
  letter-spacing:.05em;margin-top:var(--s2)}
.zblk{margin-bottom:var(--s6);max-width:62ch}
.zblk b{display:block;font-size:var(--t1);font-weight:800;color:var(--ink3);
  letter-spacing:.05em;margin-bottom:var(--s2)}
.zblk p{font-size:var(--t3);line-height:var(--lh4);color:var(--ink2)}

/* ── 水墨小圖 ──
   整頁只有一個，落在「今天」那張卡右下角的空白裡。
   絕對定位是為了不佔版位——那塊空白本來就在，圖只是補進去，
   不該把任何內容推開。不吃點擊、不吃選取。 */
.tcard-ink{position:relative;overflow:hidden}
.tcard-ink .inkmark{position:absolute;right:var(--s5);bottom:var(--s4);
  pointer-events:none;user-select:none}
.inkmark img{height:auto;opacity:.42;display:block}
.ink-mountains img{width:112px}
.ink-birds img{width:70px}
.ink-boat img{width:96px}
.ink-lotus img{width:60px}
.ink-pine img{width:76px}

/* ── 茶區說明（地圖清單裡）──
   一句話先給，細節收在展開裡：十八個茶區全部攤開的話，
   使用者要捲過三頁才看得到第一款茶。 */
.zinfo{padding:0 0 var(--s4)}
.zi-sub{font-size:var(--t2);line-height:var(--lh3);color:var(--ink2);margin-bottom:var(--s2)}
.zi-more{border:0;background:none;font-family:inherit;cursor:pointer;padding:0;
  font-size:var(--t1);font-weight:800;letter-spacing:.05em;color:var(--ink3);
  border-bottom:1px solid var(--rule2)}
.zi-more:hover{color:var(--ink);border-color:var(--ink)}
.zi-body{margin-top:var(--s4);padding:var(--s4) var(--s5);background:var(--paper2);
  border-radius:var(--r-sm)}
.zi-pic{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-sm);background:var(--paper);margin-bottom:var(--s4)}
.zi-pic img{width:100%;height:100%;object-fit:cover;display:block}
.zi-row{display:flex;gap:var(--s4);margin-bottom:var(--s3)}
.zi-row:last-child{margin-bottom:0}
.zi-row i{flex:0 0 60px;font-style:normal;font-size:var(--t1);font-weight:800;
  color:var(--ink3);letter-spacing:.05em;line-height:var(--lh3)}
.zi-row span{flex:1;font-size:var(--t2);line-height:var(--lh3);color:var(--ink2)}

/* ── 文章索引 ──
   一排分類、下面三欄卡片。只有一種分類時不畫這排——
   篩不掉任何東西的篩選器只是雜訊。 */
.atabs{display:flex;flex-wrap:wrap;gap:var(--s6);border-bottom:1px solid var(--rule);
  margin-bottom:var(--s8)}
.atab{position:relative;border:0;background:none;font-family:inherit;cursor:pointer;
  font-size:var(--t2);font-weight:800;letter-spacing:.05em;color:var(--ink3);
  padding:0 0 var(--s4)}
.atab:hover{color:var(--ink)}
.atab.on{color:var(--ink)}
.atab.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--ink)}

/* 三欄。用 auto-fill 不用 auto-fit：只有一篇文章時，
   auto-fit 會把它撐成整頁寬的巨無霸卡片。 */
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17em,1fr));
  gap:var(--s9) var(--s6);align-items:start}
/* 只有一種分類時沒有那排分類（也就沒有那條底線），
   格子上面補一條，不然卡片會浮在開卷下面沒有依靠。 */
.hero.mid + .agrid{border-top:1px solid var(--rule);padding-top:var(--s8)}

/* ── 長文 ──
   排版的目標只有一個：讓人讀得完。所以
     ・正文行寬限制在 40 字左右（68ch），眼睛才不用來回掃
     ・提示框、表格、檢查表各有各的樣子，掃過去就知道是哪一種
     ・內文不放連結，來源收在文末——每個連結都是一個出口 */
.acard{display:block;width:100%;text-align:left;border:0;background:none;
  font-family:inherit;color:inherit;cursor:pointer;padding:0}
.acard:hover .ac-t{text-decoration:underline;text-underline-offset:4px}
/* 封面是選填的。還沒有圖就整塊不畫——留一個灰框假裝有圖，
   比沒有圖更糟（載入失敗也一樣，onerror 會把整塊拿掉）。 */
.ac-pic{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:12px;
  background:var(--paper2);margin-bottom:var(--s5)}
.ac-pic img{width:100%;height:100%;object-fit:cover;display:block}
.ac-k{display:inline-block;font-size:var(--t1);font-weight:800;color:var(--ink);
  letter-spacing:.05em;border:1px solid var(--rule2);border-radius:var(--r-sm);
  padding:2px var(--s3);margin-bottom:var(--s4)}
.ac-t{display:block;font-size:var(--t4);font-weight:800;line-height:var(--lh2);
  margin-bottom:var(--s3)}
.ac-x{display:block;font-size:var(--t2);line-height:var(--lh3);color:var(--ink2)}
.ac-m{display:block;font-size:var(--t1);color:var(--ink3);margin-top:var(--s4);
  letter-spacing:.05em}

.art{max-width:var(--read)}
/* 內文最上面那張，以及內文中的圖片段落。
   還沒有圖就是灰框——跟商品圖佔位（.ph-pic）同一種灰、同一種圓角。 */
.ar-cover{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:12px;
  background:var(--paper2);margin-bottom:var(--s7)}
.ar-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ar-fig{margin:var(--s7) 0}
.ar-fig img{width:100%;height:auto;display:block;border-radius:12px}
.ar-fph{position:relative;display:block;aspect-ratio:16/9;background:var(--paper2);border-radius:12px}
.ar-fig figcaption{font-size:var(--t2);line-height:var(--lh3);color:var(--ink3);
  margin-top:var(--s3)}

.ar-k{font-size:var(--t1);font-weight:800;color:var(--ink3);letter-spacing:.05em;
  margin-bottom:var(--s3)}
.ar-t{font-size:var(--t8);font-weight:800;line-height:var(--lh1);letter-spacing:-.02em;
  margin-bottom:var(--s5)}
.ar-x{font-size:var(--t4);line-height:var(--lh3);color:var(--ink2);margin-bottom:var(--s7)}
.ar-date{font-size:var(--t1);color:var(--ink3);letter-spacing:.05em;
  border-top:1px solid var(--rule);padding-top:var(--s5);margin-top:var(--s8)}

/* 開頭那三格。放在最前面，讓人在投入時間之前就決定要不要讀。 */
.ar-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(14em,1fr));
  gap:var(--s5) var(--s6);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:var(--s6) 0;margin-bottom:var(--s9)}
.ar-mfull{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:var(--s5)}
.ar-mc i{display:block;font-style:normal;font-size:var(--t1);font-weight:800;color:var(--ink3);
  letter-spacing:.05em;margin-bottom:var(--s2)}
.ar-mc > div{font-size:var(--t3);line-height:var(--lh2);font-weight:700}
.ar-mc em{display:inline-block;font-style:normal;font-size:var(--t2);font-weight:700;
  border:1px solid var(--rule2);border-radius:var(--r-sm);padding:1px var(--s3);
  margin:0 var(--s2) var(--s2) 0}
.ar-mc small{display:block;font-size:var(--t1);font-weight:400;color:var(--ink3);
  line-height:var(--lh3);margin-top:var(--s2)}

.ar-h{font-size:var(--t6);font-weight:800;line-height:var(--lh2);letter-spacing:-.01em;
  margin:var(--s9) 0 var(--s5);padding-top:var(--s5);border-top:1px solid var(--rule)}
.ar-h3{font-size:var(--t4);font-weight:800;line-height:var(--lh2);margin:var(--s7) 0 var(--s3)}
.ar-p{font-size:var(--t3);line-height:var(--lh4);color:var(--ink2);margin-bottom:var(--s5)}
/* 內文的 **粗體**：只是加粗，不換行也不改字級。
   上面那幾條標籤樣式都寫成直接子層（> b），就是為了不誤傷這裡。 */
.ar-p b,.ar-ul b,.ar-call p b,.ar-steps span b,.ar-ck span b,.ar-tb b{
  font-weight:800;color:var(--ink)}
.ar-ul{margin:0 0 var(--s5) var(--s5)}
.ar-ul li{font-size:var(--t3);line-height:var(--lh4);color:var(--ink2);margin-bottom:var(--s2)}

/* 有編號的步驟。編號是畫出來的不是 list-style，才控制得住大小與位置。 */
.ar-steps{list-style:none;counter-reset:st;margin-bottom:var(--s6)}
.ar-steps li{counter-increment:st;position:relative;padding-left:var(--s9);
  margin-bottom:var(--s5)}
.ar-steps li::before{content:counter(st);position:absolute;left:0;top:0;
  width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);
  font-size:var(--t1);font-weight:800;display:flex;align-items:center;justify-content:center}
.ar-steps > li > b{display:block;font-size:var(--t4);font-weight:800;line-height:var(--lh2);
  margin-bottom:var(--s1)}
.ar-steps span{display:block;font-size:var(--t3);line-height:var(--lh3);color:var(--ink2)}

/* 三種提示框。語意不同：tip 是「這樣更好」，warn 是「這樣會壞」，
   key 是「整篇只記這句也行」——所以 key 一篇最多一兩個。 */
.ar-call{border-left:4px solid var(--rule2);padding:var(--s5) 0 var(--s5) var(--s5);
  margin:var(--s6) 0}
.ar-call > b{display:block;font-size:var(--t1);font-weight:800;letter-spacing:.05em;
  color:var(--ink3);margin-bottom:var(--s2)}
.ar-call p{font-size:var(--t3);line-height:var(--lh4);color:var(--ink2)}
.ar-call.tip{border-left-color:var(--ink3)}
.ar-call.warn{border-left-color:var(--c-red-t)}
.ar-call.warn > b{color:var(--c-red-t)}
.ar-call.key{border-left-color:var(--ink);background:var(--paper2);
  padding:var(--s6);border-radius:0 var(--r) var(--r) 0}
.ar-call.key > b{color:var(--ink)}
.ar-call.key p{color:var(--ink);font-weight:700}

.ar-tw{overflow-x:auto;margin:var(--s6) 0}
.ar-tb{width:100%;border-collapse:collapse;font-size:var(--t3)}
.ar-tb th{text-align:left;font-size:var(--t1);font-weight:800;color:var(--ink3);
  letter-spacing:.05em;padding:0 var(--s5) var(--s3) 0;border-bottom:1px solid var(--ink);
  white-space:nowrap}
.ar-tb td{padding:var(--s4) var(--s5) var(--s4) 0;border-bottom:1px solid var(--rule);
  line-height:var(--lh2);vertical-align:top}
.ar-tb td:first-child{font-weight:700;color:var(--ink)}
.ar-tb td:not(:first-child){color:var(--ink2)}

/* 檢查表真的可以勾。不能勾的核取方塊只是裝飾。 */
.ar-ck{border:1px solid var(--ink);border-radius:var(--r);padding:var(--s6);margin:var(--s6) 0}
.ar-ck > b{display:block;font-size:var(--t1);font-weight:800;color:var(--ink3);
  letter-spacing:.05em;padding-bottom:var(--s3);margin-bottom:var(--s3);
  border-bottom:1px solid var(--rule)}
.ar-ck label{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) 0;
  cursor:pointer;font-size:var(--t3);line-height:var(--lh3)}
.ar-ck input{flex:0 0 auto;width:18px;height:18px;margin-top:3px;accent-color:var(--ink)}
.ar-ck input:checked + span{color:var(--ink3);text-decoration:line-through}

/* 錯誤示範 → 為什麼 → 怎麼修。三段固定順序，讀者掃過去就知道要看哪一段。 */
.ar-fix{border:1px solid var(--rule2);border-radius:var(--r);overflow:hidden;margin:var(--s5) 0}
.ar-fix > div{padding:var(--s4) var(--s5);font-size:var(--t3);line-height:var(--lh3)}
.ar-fix i{display:block;font-style:normal;font-size:var(--t1);font-weight:800;
  letter-spacing:.05em;margin-bottom:var(--s1)}
.ar-fx-b{background:var(--paper2);font-weight:700}
.ar-fx-b i{color:var(--c-red-t)}
.ar-fx-w{color:var(--ink2);border-top:1px solid var(--rule)}
.ar-fx-w i,.ar-fx-d i{color:var(--ink3)}
.ar-fx-d{border-top:1px solid var(--rule);color:var(--ink)}

/* 來源。放文末，內文一個連結都沒有。 */
.ar-src{border-top:1px solid var(--ink);padding-top:var(--s6);margin-top:var(--s9)}
.ar-src > b{display:block;font-size:var(--t1);font-weight:800;color:var(--ink3);
  letter-spacing:.05em;margin-bottom:var(--s4)}
.ar-src ul{list-style:none;margin-bottom:var(--s4)}
.ar-src li{margin-bottom:var(--s2)}
.ar-src a{font-size:var(--t2);color:var(--ink2);border-bottom:1px solid var(--rule2)}
.ar-src a:hover{color:var(--ink);border-color:var(--ink)}

/* ── 走訪茶坊：圖文紀錄 ──
   一篇一張卡，點標題就地展開。走訪紀錄不長，為了三段文字換一次頁不划算。 */
.hasact{font-style:normal;font-size:var(--t1);font-weight:800;letter-spacing:.05em;
  background:var(--ink);color:var(--paper);padding:1px var(--s2);border-radius:4px;
  margin-left:var(--s3);vertical-align:2px;white-space:nowrap}

/* ── 體驗活動 ──
   版面骨架完全沿用茶區地圖（.mapwrap / .filters / .zgrp / .trow / .tea-head），
   所以這裡只剩「活動明細」這一段是它自己的。
   之前做過一版卡片式的（.vcard / .vhead / .vbody），改成同構之後就刪掉了——
   沒人用的樣式留著只會讓下一個改的人以為還在用。 */
.vaddr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.vaddr > span{flex:1 1 260px;font-size:var(--t3);line-height:var(--lh3);color:var(--ink2)}
.vapx{font-style:normal;font-size:var(--t1);font-weight:800;color:var(--ink3);
  border:1px solid var(--rule2);border-radius:var(--r-sm);padding:1px var(--s2);
  margin-left:var(--s2);white-space:nowrap}

.vact{padding:var(--s5) 0;border-bottom:1px solid var(--rule)}
.vact:first-child{padding-top:0}
.va-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  margin-bottom:var(--s2)}
.va-h b{font-size:var(--t4);font-weight:700;line-height:var(--lh2)}
/* 活動類型。篩選按下去之後，要看得出這一項為什麼被留下來。 */
.va-t{display:inline-block;font-style:normal;font-size:var(--t1);font-weight:800;
  letter-spacing:.05em;color:var(--ink3);border:1px solid var(--rule2);
  border-radius:var(--r-sm);padding:1px var(--s2);margin-left:var(--s3);
  vertical-align:2px;white-space:nowrap}
.va-p{flex:0 0 auto;font-size:var(--t4);font-weight:800;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.va-p small{font-size:var(--t1);font-weight:400;color:var(--ink3);margin-left:var(--s2)}
.vact p{font-size:var(--t2);line-height:var(--lh3);color:var(--ink2)}
/* 報名條件用紅色標——沒看到「需一週前預約」就白跑一趟 */
.va-c{margin-top:var(--s3);font-size:var(--t1);line-height:var(--lh3);color:var(--c-red-t);
  font-weight:700;white-space:pre-line}

/* ── 內容準備中的頁面 ──
   灰色圖框先佔住視覺重量，右邊明講還沒有內容。
   假裝有內容比空白更傷信任，所以這一塊寫得直白。

   ⚠️ 現在沒有任何一頁在用（五頁都填完了），但這不是死 CSS——
   它是 js/views/pages.js 的 placeholder()，新增頁面時的預設外觀。
   下一頁還沒有內容時就會長這樣。 */
.ph{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--s7);
  align-items:center;border:1px solid var(--rule2);border-radius:var(--r);
  padding:var(--s7);margin-bottom:var(--s9)}
.ph-pic{position:relative;aspect-ratio:4/3;background:var(--paper2);border-radius:var(--r-sm)}
.ph-body b{display:block;font-size:var(--t5);font-weight:800;line-height:var(--lh2);
  margin-bottom:var(--s3)}

/* ── 導購 ── */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  border-top:1px solid var(--ink);border-left:1px solid var(--rule);margin-bottom:var(--s4)}
.pcard{background:var(--paper);display:flex;flex-direction:column;text-decoration:none;
  color:inherit;position:relative;cursor:pointer;border:0;padding:0;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-family:inherit;text-align:left}
.pcard:hover{background:var(--paper2)}
/* 商品色塊。之前用茶類色，現在統一黑底白字——放上真實商品照之後
   這一塊會被照片取代，所以它只是暫代品，不該搶戲。 */
.swatch{position:relative;height:150px;display:flex;align-items:center;justify-content:center;
  margin:var(--s5) var(--s5) 0;background:var(--ink);border-radius:var(--r-sm)}
.swatch b{font-size:var(--t5);font-weight:800;line-height:var(--lh1);text-align:center;
  color:var(--paper);white-space:pre-line;letter-spacing:-.01em;padding:var(--s4)}
.pcard .body{padding:var(--s4) var(--s5) var(--s5);flex:1;display:flex;flex-direction:column}
.pcard h4{font-size:var(--t3);font-weight:700;line-height:var(--lh2);margin-bottom:var(--s2)}
.meta{font-size:var(--t1);color:var(--ink3);letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;margin-bottom:var(--s3)}
.usd{font-size:var(--t5);font-weight:800;font-variant-numeric:tabular-nums;margin-top:auto}
.usd small{font-size:var(--t1);color:var(--ink3);font-weight:400;margin-left:var(--s2);
  letter-spacing:0}
.stat{position:absolute;top:0;left:0;font-size:var(--t1);font-weight:800;
  padding:var(--s2) var(--s3)}
.stat.live{background:var(--ink);color:var(--paper)}
.stat.soon{background:var(--paper2);color:var(--ink2)}
.stat.none{background:var(--paper2);color:var(--ink3)}
.store{border:1px solid var(--ink);border-radius:var(--r);padding:var(--s7);
  margin-bottom:var(--s8)}
.store h3{font-size:var(--t8);font-weight:800;line-height:var(--lh1);
  letter-spacing:-.025em;margin-bottom:var(--s3);border:0;padding:0;color:inherit;
  text-transform:none}
.store p{font-size:var(--t2);line-height:var(--lh3);margin-bottom:var(--s5);
  max-width:56ch;color:var(--ink2)}
.fxq{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  padding:var(--s4) 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);
  margin:var(--s4) 0 var(--s2)}
.fxq span{font-size:var(--t1);font-weight:800;color:var(--ink3)}
.fxq b{font-size:var(--t5);font-weight:800;font-variant-numeric:tabular-nums}
.alt{border-top:1px solid var(--ink);padding-top:var(--s4);margin-top:var(--s5)}
.alt > b{display:block;font-size:var(--t1);font-weight:800;color:var(--ink3);
  margin-bottom:var(--s3)}

/* ═══ 7. 手機版 ═══ */

/* 960px 以下，logo ＋ 五個導覽項 ＋ 四顆語言鈕排不下，導覽收進漢堡鈕。
   展開後蓋在內容上方。 */
@media(max-width:960px){
  .navtoggle{display:flex}
  .langsw{margin-left:auto}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--ink);
    padding:var(--s3) var(--s4) var(--s5);z-index:1}
  .nav.open{display:flex}
  .tab{justify-content:space-between;padding:var(--s4) var(--s3);font-size:var(--t2);
    border-radius:0;border-bottom:1px solid var(--rule)}
  .tab.on::after{left:var(--s3);right:auto;width:22px;bottom:var(--s2)}
  .tgrp{position:static}
  /* 手機版不做浮層，直接往下展開——浮層在窄螢幕上會超出畫面邊緣 */
  .menu{position:static;border:0;border-bottom:1px solid var(--rule);border-radius:0;
    padding:var(--s2) 0 var(--s3) var(--s6);min-width:0}
  .mi{font-size:var(--t2);padding:var(--s3)}
}

@media(max-width:900px){
  .hrow{grid-template-columns:1fr;gap:var(--s6)}
  .ph{grid-template-columns:1fr;gap:var(--s6);padding:var(--s6)}
  .tcard{grid-template-columns:1fr;gap:var(--s5);padding:var(--s6)}
  .tc-date{text-align:left;display:flex;align-items:baseline;gap:var(--s4)}
  .tc-date b{font-size:var(--t-timer)}
  .tc-date span,.tc-date em{margin-top:0}
  .tc-body{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:var(--s5)}
  .cal{grid-template-columns:1fr 1fr;gap:var(--s5);padding:var(--s6)}
  .cal-l{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--rule);
    padding-right:0;padding-bottom:var(--s4)}
  .cal-m{text-align:left;padding:0;min-height:0}
  .cal-d{font-size:clamp(104px,26vw,168px)}
  .cal-wk{letter-spacing:.3em;padding-left:.3em}
}
@media(max-width:640px){
  :root{--gut:18px}
  .tcard-ink .inkmark{right:var(--s4);bottom:var(--s3)}
  .inkmark img{transform:scale(.72);transform-origin:100% 100%}
  /* 頁首要塞下 logo ＋ 四顆語言鈕 ＋ 漢堡鈕，間距得收 */
  .hdr{gap:var(--s3);padding:0 var(--gut);flex-wrap:nowrap}
  .langsw{min-width:0}
  .pad{padding:0 var(--gut) var(--s10)}
  .vhero{height:52vh}
  .hero{padding:var(--s8) 0 var(--s7)}
  .tea-head{padding-left:var(--s4)}
  .tab{letter-spacing:.08em}
  .brand{font-size:var(--t6)}
  .mapwrap{height:44vh}
  .filters{padding:var(--s4) var(--gut)}
  .flab{flex:0 0 100%;margin-bottom:2px}
  .season + .season{margin-top:var(--s10)}
  .scell{padding:var(--s6) var(--s5)}
  .scell > b{font-size:var(--t5)}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(156px,1fr))}
  .swatch{height:112px;margin:var(--s4) var(--s4) 0}
  .swatch b{font-size:var(--t4)}
  .pcard .body{padding:var(--s4)}
  .acc table.gt,.acc table.gt tbody,.acc table.gt tr,.acc table.gt td{display:block;width:auto}
  .acc table.gt thead{display:none}
  .acc table.gt tr{padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
  .acc table.gt td{padding:2px 0;border:0;width:auto!important}
  .acc table.gt td:first-child{width:auto;font-size:var(--t3);margin-bottom:var(--s1)}
  .acc table.gt td:nth-child(3)::before{content:'→ ';color:var(--ink3)}
}
@media(max-width:560px){
  .cal{grid-template-columns:1fr}
  .cal-m{text-align:center}
  .cal-r{border-top:1px solid var(--rule);padding-top:var(--s5)}
}

/* ═══════════════════════════════════════════════════════════════
 *  茶事曆
 *
 *  左邊清單、右邊月曆。月曆在這裡是導覽工具不是裝飾，
 *  所以它捲動時要留在畫面上（sticky），手機版則整個移到最上面。
 * ═══════════════════════════════════════════════════════════════ */
.evlay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:var(--s10);align-items:start}
.evmain{min-width:0}
/* 黏在頁首下面。--hdr-h 是頁首高度，不是猜的數字。 */
.evside{position:sticky;top:calc(var(--hdr-h) + var(--s5));min-width:0}

/* ── 選了某一天 ── */
.evsel{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);
  border-bottom:1px solid var(--rule);padding-bottom:var(--s4);margin-bottom:var(--s6)}
.evsel b{font-size:var(--t5);font-weight:800}
.evclr{border:0;background:none;font-family:inherit;cursor:pointer;
  font-size:var(--t2);font-weight:800;color:var(--ink3);padding:0}
.evclr:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.evempty{padding:var(--s9) 0;border-top:1px solid var(--rule)}

/* ── 活動卡 ──
   整張是連結，直接連到主辦單位的頁面。我們不做報名，
   所以沒有理由先把人留在站內再多點一次。 */
.evlist{border-top:1px solid var(--rule)}
.evt{display:grid;grid-template-columns:minmax(0,1fr) 13.5em;gap:var(--s7);
  align-items:start;padding:var(--s7) 0;border-bottom:1px solid var(--rule);
  color:inherit;text-decoration:none}
.evt:hover h4{text-decoration:underline;text-underline-offset:4px}
.evt-b{min-width:0}
.evt-t{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.evt-tag{font-size:var(--t1);font-weight:800;letter-spacing:.05em;color:var(--ink);
  border:1px solid var(--rule2);border-radius:var(--r-sm);padding:2px var(--s3)}
.evt-over{font-size:var(--t1);font-weight:800;letter-spacing:.05em;color:var(--paper);
  background:var(--ink3);border-radius:var(--r-sm);padding:3px var(--s3)}
.evt-ser{font-size:var(--t1);color:var(--ink3);letter-spacing:.05em}
.evt h4{font-size:var(--t4);font-weight:800;line-height:var(--lh2);margin:0 0 var(--s3)}
.evt-m{font-size:var(--t2);font-weight:800;color:var(--ink2);letter-spacing:.03em}
.evt-w{font-size:var(--t2);color:var(--ink3);margin-top:var(--s2)}
.evt-n{font-size:var(--t2);line-height:var(--lh3);color:var(--ink2);margin:var(--s4) 0 0}
/* 過去的活動留著——月曆往回翻要看得到，也讓人知道這系列辦多久了。
   但要一眼看得出已經結束，不然會有人白跑一趟。 */
.evt.over{opacity:.55}
.evt.over:hover{opacity:1}

.evt-p{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;
  background:var(--paper2)}
.evt-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.evt-p .lf{max-width:34%;max-height:52%}

/* ── 月曆格 ── */
.tcal{background:var(--paper2);border-radius:12px;padding:var(--s6)}
.tcal-h{display:flex;align-items:center;gap:var(--s5);margin-bottom:var(--s5)}
.tcal-ym{font-size:var(--t5);font-weight:800;letter-spacing:.02em}
.tcal-lg{display:flex;align-items:center;gap:var(--s2);margin-left:auto;
  font-size:var(--t1);color:var(--ink3);letter-spacing:.05em}
.tcal-lg i{width:9px;height:9px;border-radius:50%;background:var(--ink)}
.tcal-nav{display:flex;gap:var(--s2)}
.tcal-nav button{width:32px;height:32px;border:1px solid var(--rule2);border-radius:50%;
  background:var(--paper);font-family:inherit;font-size:var(--t3);line-height:1;
  color:var(--ink2);cursor:pointer}
.tcal-nav button:hover{color:var(--ink);border-color:var(--ink)}

/* 1px 的縫加底色＝格線。用 gap 而不是 border，
   相鄰兩格才不會疊出 2px 的粗線。 */
.tcal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  background:var(--rule2);border:1px solid var(--rule2);border-radius:8px;overflow:hidden}
.tcal-w{background:var(--paper2);text-align:center;padding:var(--s4) 0;
  font-size:var(--t1);font-weight:800;color:var(--ink2);letter-spacing:.05em}
/* 週日那一欄淡一階就夠了。之前用 --rule 太深，整欄變成一條深灰帶，
   比「哪一天有活動」還搶眼——那才是這張月曆唯一要講的事。 */
.tcal-w:first-child{color:var(--ink3)}
.tcal-d{position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/.82;background:var(--paper);border:0;font-family:inherit;
  font-size:var(--t2);color:var(--ink2);padding:0}
.tcal-d.out{background:var(--paper)}
.tcal-d.wk{background:var(--paper2)}
.tcal-d span{display:flex;align-items:center;justify-content:center;
  width:2em;height:2em;border-radius:50%}
/* 有活動＝實心黑點。這是整張月曆唯一要傳達的事，所以給它最強的對比。 */
.tcal-d.has{cursor:pointer}
.tcal-d.has span{background:var(--ink);color:var(--paper);font-weight:800}
.tcal-d.has:hover span{background:var(--ink2)}
/* 今天用紅色。只有這一個地方用紅，才會是「今天」而不是「某種標記」。 */
.tcal-d.now span{background:var(--c-red-t);color:var(--paper);font-weight:800}
/* 選取用外框圈起來，不搶實心黑點的位置 */
.tcal-d.on::after{content:'';position:absolute;inset:12%;border:1.5px solid var(--ink);
  border-radius:50%;pointer-events:none}

.evnow{display:block;width:100%;margin-top:var(--s5);border:1px solid var(--rule2);
  border-radius:var(--r-sm);background:var(--paper);font-family:inherit;
  font-size:var(--t2);font-weight:800;color:var(--ink2);padding:var(--s3);cursor:pointer}
.evnow:hover{color:var(--ink);border-color:var(--ink)}

.evfoot{margin-top:var(--s9);padding-top:var(--s5);border-top:1px solid var(--rule);
  max-width:var(--read)}

@media(max-width:900px){
  /* 月曆搬到清單上面。它是導覽工具，要在被導覽的東西前面。 */
  .evlay{grid-template-columns:1fr;gap:var(--s8)}
  .evside{position:static;order:-1}
  .evt{grid-template-columns:minmax(0,1fr) 8.5em;gap:var(--s5)}
}
@media(max-width:520px){
  /* 手機上圖片改放上面，橫排會把標題擠成兩三個字一行 */
  .evt{grid-template-columns:1fr}
  .evt-p{order:-1;margin-bottom:var(--s3)}
  .tcal{padding:var(--s4)}
  .tcal-d{font-size:var(--t1)}
  .tcal-d span{width:1.9em;height:1.9em}
}

/* ── 首頁的近期活動 ──
   只有兩場加一個「看更多」。橫排是刻意的：直排會佔掉一整個螢幕高度，
   把「今天」推到折線以下——那才是使用者每天回來的理由。 */
.hcwrap{display:grid;grid-template-columns:minmax(0,1fr) 15.5em;gap:var(--s8);align-items:start}
/* 上面 .sec>h3 已經有一條底線了，這裡不要再畫一條——兩條平行細線
   中間夾著空白，看起來像版面壞掉。第二張卡的底線也拿掉，
   下面緊接著「看更多」，那條線只會把它跟卡片切開。 */
.hcmain{min-width:0}
.hcmain .evlist{border-top:0}
.hcmain .evt:first-child{padding-top:0}
.hcmain .evt:last-child{border-bottom:0;padding-bottom:0}
/* 首頁主欄比茶事曆窄（右邊還有小月曆），圖再照 13.5em 會把標題擠成兩三行 */
.hcmain .evt{grid-template-columns:minmax(0,1fr) 11em;gap:var(--s6);padding:var(--s6) 0}
.hcside{display:flex;flex-direction:column;gap:var(--s5)}
/* 空心按鈕，不用實心。實心的黑塊會比它上面真正的內容還搶眼，
   而這顆只是「還有 23 場，去看全部」的出口。 */
.hcal-m{width:100%;justify-content:center;white-space:nowrap}

@media(max-width:900px){
  .hcal{grid-template-columns:1fr;gap:var(--s5)}
  .hcal-i{border-right:0;border-bottom:1px solid var(--rule);
    padding-right:0;padding-bottom:var(--s5)}
  .hcal-w{margin-top:0}
}

/* 常設展、長期課程。跟「已結束」用同一種小標籤，但這個是進行中，所以留白底 */
.evt-long{font-size:var(--t1);font-weight:800;letter-spacing:.05em;color:var(--ink2);
  border:1px dashed var(--rule2);border-radius:var(--r-sm);padding:2px var(--s3)}

/* ── 首頁的小月曆 ──
   只回答「這個月哪幾天有事」。沒有換月、沒有篩選，點下去就到茶事曆。 */
.hmini{display:block;background:var(--paper2);border-radius:12px;padding:var(--s5);
  color:inherit;text-decoration:none}
.hmini:hover{background:#eeeeec}
.hmini-h{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s3);margin-bottom:var(--s4)}
.hmini-h b{font-size:var(--t4);font-weight:800}
.hmini-h span{font-size:var(--t1);color:var(--ink3);letter-spacing:.05em}
.hmini-h span::before{content:'';display:inline-block;width:7px;height:7px;
  border-radius:50%;background:var(--ink);margin-right:5px;vertical-align:1px}
.hmini-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.hcw{font-style:normal;text-align:center;font-size:10px;font-weight:800;
  color:var(--ink3);padding-bottom:var(--s2)}
.hcd{font-style:normal;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;font-size:var(--t1);color:var(--ink2);border-radius:50%}
.hcd.wk{color:var(--ink3)}
.hcd.has{background:var(--ink);color:var(--paper);font-weight:800}
.hcd.now{background:var(--c-red-t);color:var(--paper);font-weight:800}
.hcd.out{visibility:hidden}

@media(max-width:900px){
  .hcwrap{grid-template-columns:1fr;gap:var(--s6)}
  .hmini{order:-1}
}


/* ══ 臺灣茶年表 ═══════════════════════════════════════════════
   兩軌左右分邊，中間一條年份軸。
   為什麼不用顏色區分就好：色盲、灰階列印、還有手機上兩軌會交錯——
   位置是比顏色更硬的線索。手機收成單欄之後才改用左側色條。 */
.tl-lgs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  padding:var(--s5) 0;border-bottom:1px solid var(--rule);margin-bottom:var(--s7)}
.tl-lg{display:inline-flex;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s5);border:1px solid var(--rule2);border-radius:99px;
  background:none;font-family:inherit;font-size:var(--t2);font-weight:800;
  color:var(--ink3);cursor:pointer;line-height:1}
.tl-lg i{width:9px;height:9px;border-radius:2px;background:var(--ink3)}
/* 「全部」的色塊是一半黑一半紅——兩軌都在，不用讀字也看得出來 */
.tl-lg.all i{background:linear-gradient(90deg,var(--ink) 0 50%,var(--c-red-t) 50% 100%)}
.tl-lg.ind i{background:var(--ink)}
.tl-lg.ob i{background:var(--c-red-t)}
.tl-lg:hover{color:var(--ink);border-color:var(--ink)}
.tl-lg.on{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.tl-lg.on i{background:var(--paper)}
.tl-n{margin-left:auto;font-size:var(--t1);color:var(--ink3);letter-spacing:.05em}

.tl{list-style:none;position:relative;margin:0;padding:0}
/* 中間那條軸。畫在清單上而不是每一項上，斷點才不會露出縫。 */
.tl::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;
  margin-left:-1px;background:var(--rule2)}
.tl-i{display:grid;grid-template-columns:minmax(0,1fr) 6.5em minmax(0,1fr);
  align-items:start;padding-bottom:var(--s8)}
.tl-y{grid-column:2;position:relative;text-align:center;padding-top:2px}
.tl-y b{position:relative;display:inline-block;padding:0 var(--s3);
  background:var(--paper);font-size:var(--t2);font-weight:800;
  letter-spacing:.05em;color:var(--ink2)}
.tl-c{min-width:0}
.tl-i.ind .tl-c{grid-column:1;text-align:right;padding-right:var(--s6);
  border-right:2px solid var(--ink)}
.tl-i.ob .tl-c{grid-column:3;padding-left:var(--s6);
  border-left:2px solid var(--c-red-t)}
.tl-i.ind .tl-tag{justify-content:flex-end}
.tl-tag{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  font-size:var(--t1);font-weight:800;letter-spacing:.05em;color:var(--ink3);
  margin-bottom:var(--s3)}
.tl-i.ob .tl-tag{color:var(--c-red-t)}
.tl-myth{font-style:normal;font-size:var(--t1);font-weight:800;letter-spacing:.05em;
  color:var(--paper);background:var(--c-red-t);border-radius:3px;padding:2px 6px}
.tl-c h4{font-size:var(--t4);font-weight:800;line-height:var(--lh2);margin:0 0 var(--s3)}
.tl-c p{font-size:var(--t2);line-height:var(--lh4);color:var(--ink2);margin:0}
.tl-c p b{font-weight:800;color:var(--ink)}

/* 單欄版本，兩種情況會用到：
     .tl.one  → 資料只有一軌，左右分邊沒有意義（現在就是這樣）
     手機     → 硬要左右分邊的話每一格只剩不到 20 個字，讀起來像報稅單
   兩者長得一模一樣，所以規則寫成一份。 */
.tl.one::before{left:0;margin-left:0}
.tl.one .tl-i{grid-template-columns:1fr;padding-left:var(--s6)}
.tl.one .tl-y{grid-column:1;text-align:left;margin-bottom:var(--s2)}
.tl.one .tl-y b{padding-left:0}
.tl.one .tl-i.ind .tl-c,.tl.one .tl-i.ob .tl-c{grid-column:1;text-align:left;
  padding:0 0 0 var(--s5);border-left:2px solid var(--ink);border-right:0}
.tl.one .tl-i.ob .tl-c{border-left-color:var(--c-red-t)}
.tl.one .tl-i.ind .tl-tag{justify-content:flex-start}
/* 只有一軌時，那個「茶產業」標籤是廢話——整篇都是茶產業 */
.tl.one .tl-tag{display:none}
.tl.one .tl-i.ind .tl-c h4{margin-top:0}

@media(max-width:720px){
  .tl::before{left:0;margin-left:0}
  .tl-i{grid-template-columns:1fr;padding-left:var(--s6);padding-bottom:var(--s7)}
  .tl-y{grid-column:1;text-align:left;margin-bottom:var(--s2)}
  .tl-y b{padding-left:0}
  .tl-i.ind .tl-c,.tl-i.ob .tl-c{grid-column:1;text-align:left;
    padding:0 0 0 var(--s5);border-left:2px solid var(--ink);border-right:0}
  .tl-i.ob .tl-c{border-left-color:var(--c-red-t)}
  .tl-i.ind .tl-tag{justify-content:flex-start}
}