/* ============================================================
   耘初 YUNCHU — 穀物茶形象首頁（ymy-tea 風格改版）
   設計 DNA：黑+暖米、left/right split、巨型細標、情緒攝影、捲動淡入
   核心軸：養生・陪伴・儀式
   ============================================================ */

:root{
  --cream:    #F7F2EE;   /* 米白・主背景（60-70%，非純白）*/
  --cream-d:  #EFE7DF;   /* 較深米白（細微區分）*/
  --ground:   #F7F2EE;   /* 整站背景・米白 */
  --pink:     #FEDFE1;   /* 柔粉・情境點綴（限花草/季節）*/
  --apricot:  #F0A986;   /* 杏桃・情境點綴（限暖補系列）*/
  --ink:      #3D3530;   /* 深棕・所有文字與細線（非純黑）*/
  --brown:    #3D3530;   /* 深棕・內文 */
  --green:    #90B44B;   /* 草本綠・品牌識別（按鈕/重點，5-10%）*/
  --gold:     #90B44B;   /* 原暖金退役，沿用變數＝綠色重點 */
  --seal:     #B0472E;

  --ink-70: rgba(61,53,48,.72);
  --ink-45: rgba(61,53,48,.5);
  --cream-70: rgba(247,242,238,.8);
  --cream-40: rgba(247,242,238,.42);
  --line: rgba(61,53,48,.2);

  --serif: "Noto Serif TC", serif;
  --sans:  "Noto Sans TC", sans-serif;
  --disp:  "Cormorant Garamond", "Noto Serif TC", serif;
  --label: "Inter", "Noto Sans TC", sans-serif; /* 巨型細標 */

  --maxw: 1440px;
  --ease: cubic-bezier(.22,.7,.25,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background:var(--ground); }
.bg-video{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; pointer-events:none; transform:translateZ(0); backface-visibility:hidden; }
body{ font-family:var(--sans); font-weight:300; color:var(--brown); background:transparent; line-height:1.85; letter-spacing:.04em; overflow-x:clip; }  /* 透明讓固定背景影片透出 */

/* 紙紋混色疊層已移除：mix-blend-mode 固定全屏層會嚴重拖累滾動，且規範偏好平面乾淨 */

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* 巨型細標（ymy 招牌）------------------------------------- */
.bigtag{
  font-family:var(--label); font-weight:200; text-transform:uppercase;
  letter-spacing:.22em; line-height:.9; color:var(--ink);
  font-size:clamp(3.4rem,12vw,11rem);
}
/* 雙語小標 */
.eyebrow{
  font-family:var(--label); font-weight:400; font-size:.78rem; letter-spacing:.4em;
  text-transform:uppercase; color:var(--green); display:inline-flex; align-items:center; gap:.9em;
}
.eyebrow::before{ content:""; width:30px; height:1px; background:currentColor; }

/* 進場淡入 */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* 按鈕 */
.btn{ font-family:var(--sans); cursor:pointer; display:inline-flex; align-items:center; gap:.7em;
  padding:1.05em 2.1em; font-size:.95rem; letter-spacing:.14em; border:1px solid transparent; border-radius:24px; transition:all .5s var(--ease); }
.btn .arr{ transition:transform .45s var(--ease); }
.btn:hover .arr{ transform:translateX(6px); }
.btn-solid{ background:var(--ink); color:var(--cream); }
.btn-solid:hover{ background:var(--green); }
.btn-line{ border-color:var(--line); color:var(--ink); }
.btn-line:hover{ border-color:var(--ink); background:rgba(33,26,18,.04); }

/* =========================================================
   導覽列
   ========================================================= */
header.nav{ position:fixed; inset:0 0 auto 0; z-index:1000; transition:.5s var(--ease); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:84px; padding:0 clamp(20px,4vw,52px); }
header.nav.scrolled{ background:#F7F2EE; border-bottom:1px solid var(--line); }  /* 米白實底，移除 backdrop-blur（滾動重繪殺手）*/
.brand{ display:flex; align-items:center; gap:.6rem; color:var(--cream); transition:color .5s var(--ease); }  /* hero 影片上用淺色 */
header.nav.scrolled .brand{ color:var(--ink); }
.brand .mk{ font-family:var(--serif); font-weight:700; font-size:1.6rem; letter-spacing:.12em; }
.brand .lt{ font-family:var(--label); font-weight:300; font-size:.7rem; letter-spacing:.42em; text-transform:uppercase; opacity:.8; }
.nav-links{ display:flex; align-items:center; gap:clamp(16px,2.4vw,38px); }
.nav-links a{ font-family:var(--sans); font-size:.92rem; letter-spacing:.12em; color:var(--cream-70); position:relative; padding:4px 0; transition:color .4s; }
header.nav.scrolled .nav-links a{ color:var(--ink-70); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:currentColor; transition:width .4s var(--ease); }
.nav-links a:hover{ color:var(--gold); }
.nav-links a:hover::after{ width:100%; }
.nav-shop{ background:var(--ink); color:var(--cream); border:1px solid var(--ink); padding:.6em 1.4em; border-radius:24px; font-size:.85rem; letter-spacing:.14em; display:inline-flex; align-items:center; gap:.5em; transition:all .45s var(--ease); }
header.nav.scrolled .nav-shop{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.nav-shop:hover{ background:var(--green); border-color:var(--green); color:var(--cream); }  /* 與訂閱鈕同：深棕→綠、米白字 */
.nav-shop::after{ display:none; }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ width:26px; height:1.5px; background:var(--cream); transition:.4s var(--ease); }
header.nav.scrolled .burger span{ background:var(--ink); }

/* =========================================================
   ① HERO — split：左米色文字 / 右滿版情緒照
   ========================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero-copy{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; max-width:640px; padding:120px clamp(28px,5vw,90px) 70px; }
.hero-copy .eyebrow{ margin-bottom:34px; }
.hero .eyebrow{ color:#A7CF8A; }
.hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(2.5rem,4.9vw,4.5rem); line-height:1.24; letter-spacing:.03em; color:var(--cream); }
.hero h1 em{ font-style:normal; color:#A7CF8A; }
.hero .lead{ margin-top:30px; font-size:1.06rem; line-height:1.95; color:rgba(245,239,224,.86); max-width:42ch; }
.hero .actions{ margin-top:44px; display:flex; gap:14px; flex-wrap:wrap; }
.hero .btn-line{ border-color:rgba(245,239,224,.45); color:var(--cream); }
.hero .btn-line:hover{ border-color:var(--cream); background:rgba(245,239,224,.12); }
.hero .axis{ margin-top:54px; display:flex; align-items:center; gap:18px; font-family:var(--label); font-size:.74rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(245,239,224,.55); }
.hero .axis i{ width:5px; height:5px; border-radius:50%; background:var(--gold); display:inline-block; }

.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; background:transparent; }
.hero-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:heroZoom 7s var(--ease) forwards; }
.hero-media video{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero-media::after{ content:""; position:absolute; inset:0; background:rgba(61,53,48,.42); }
/* 直排品牌印記 */
.hero-media .vmark{ position:absolute; top:50%; right:30px; transform:translateY(-50%); writing-mode:vertical-rl; font-family:var(--label); font-weight:200; letter-spacing:.5em; text-transform:uppercase; font-size:.8rem; color:var(--cream-70); }
/* 當季標籤 */
.hero-media .season{ position:absolute; right:clamp(20px,3vw,42px); bottom:38px; text-align:right; color:var(--cream); z-index:2; }
.hero-media .season .s1{ font-family:var(--disp); font-style:italic; font-size:1.5rem; letter-spacing:.04em; }
.hero-media .season .s2{ font-size:.84rem; letter-spacing:.16em; opacity:.82; margin-top:2px; }

/* 捲動提示 */
.scrollcue{ position:absolute; z-index:2; left:clamp(28px,5vw,90px); bottom:34px; display:flex; align-items:center; gap:12px; font-family:var(--label); font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(245,239,224,.6); }
.scrollcue .ln{ width:46px; height:1px; background:rgba(245,239,224,.4); position:relative; overflow:hidden; }
.scrollcue .ln::after{ content:""; position:absolute; inset:0; background:var(--cream); transform:translateX(-100%); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 50%{ transform:translateX(0); } 100%{ transform:translateX(100%); } }

/* =========================================================
   ymy 式滾動系統：sticky 釘住 + 遮罩揭露（核心！）
   ========================================================= */
/* Lenis 平滑捲動 */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* 超高區塊 → 滾動時內層釘住停留 */
.pin-section{ position:relative; }
.pin-stage{ position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; background:transparent; }  /* 不釘住：區塊隨頁面連續滑過固定背景影片 */
.pin-block{ position:relative; width:min(84vw,1160px); height:min(76vh,680px); display:grid; grid-template-columns:1fr 1fr; overflow:hidden; background:var(--cream); border:1px solid var(--line); border-radius:14px; }
.pin-text{ display:flex; flex-direction:column; justify-content:center; padding:clamp(32px,4.2vw,74px); position:relative; z-index:2; }
.pin-img{ position:relative; overflow:hidden; background:var(--ink); }
.pin-img>img{ width:100%; height:100%; object-fit:cover; transform:scale(1.18); transition:transform 1.8s var(--ease); }
.pin-section.in .pin-img>img{ transform:scale(1); }
.pin-section.-rev .pin-img{ order:-1; }   /* 交替：圖在左 */

/* 巨型細標（釘在圖片側底部，遮罩內上滑）*/
.pin-bigtag{ position:absolute; bottom:clamp(18px,4vh,46px); left:clamp(20px,3vw,46px); right:18px; z-index:3; overflow:hidden; pointer-events:none; }
.pin-bigtag>span{ display:block; font-family:var(--label); font-weight:200; text-transform:uppercase; letter-spacing:.16em; line-height:.86; font-size:clamp(2.8rem,8.5vw,7.5rem); color:var(--cream); transform:translateY(118%); transition:transform 1.25s var(--ease); }
.pin-section.in .pin-bigtag>span{ transform:translateY(0); }

/* 內容遮罩淡入 + 階梯延遲 */
.rmask{ opacity:0; transform:translateY(32px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.pin-section.in .rmask{ opacity:1; transform:none; }
.pin-section.in .rmask.-d1{ transition-delay:.12s }
.pin-section.in .rmask.-d2{ transition-delay:.26s }
.pin-section.in .rmask.-d3{ transition-delay:.4s }
.pin-section.in .rmask.-d4{ transition-delay:.54s }

/* 區塊內排版 */
.pin-eyebrow{ font-family:var(--label); font-weight:400; font-size:.78rem; letter-spacing:.4em; text-transform:uppercase; color:var(--green); display:flex; align-items:center; gap:.9em; margin-bottom:30px; }
.pin-eyebrow::before{ content:""; width:30px; height:1px; background:currentColor; }
.pin-text h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,3vw,2.9rem); line-height:1.45; letter-spacing:.03em; color:var(--ink); }
.pin-text .p-ja{ margin-top:24px; font-size:1.03rem; line-height:2.05; color:var(--ink-70); max-width:40ch; }
.pin-text .p-en{ margin-top:18px; font-family:var(--disp); font-style:italic; font-size:1.06rem; line-height:1.7; color:var(--ink-45); max-width:42ch; }
.pin-more{ margin-top:34px; display:inline-flex; align-items:center; gap:.8em; font-family:var(--label); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); }
.pin-more .ln{ width:34px; height:1px; background:var(--ink); transition:width .4s var(--ease); }
.pin-more:hover .ln{ width:56px; }
.hub-tags{ margin-top:24px; display:flex; flex-wrap:wrap; gap:8px; }
.hub-tags span{ font-size:.8rem; letter-spacing:.05em; color:var(--ink-70); border:1px solid var(--line); border-radius:100px; padding:.42em .95em; }

/* ④ #hub：實心米白全頁（去掉浮在影片上的卡片框）；② #about 維持透明浮在影片上 */
#hub .pin-stage{ background:var(--cream); }
#hub .pin-block{ background:transparent; border:0; }   /* 保留 border-radius+overflow 讓大圖維持圓角 */

@media (max-width:900px){
  .pin-section{ height:auto; }
  .pin-stage{ position:relative; min-height:auto; height:auto; padding:clamp(16px,4vw,30px); }
  .pin-block{ width:100%; height:auto; grid-template-columns:1fr; }
  .pin-img{ height:50vh; order:-1 !important; }
  .pin-text{ padding:48px clamp(22px,6vw,38px) 56px; }
  .pin-bigtag>span{ font-size:clamp(2.6rem,15vw,5rem); }
}

/* =========================================================
   滿版段落（整個）——打節奏、做對比
   ========================================================= */
.full-section{ padding:clamp(96px,15vh,180px) clamp(24px,6vw,90px); position:relative; }
.full-section.green{ background:var(--cream); color:var(--brown); }  /* 實心米白全頁（③ 起影片不再透出）*/
.full-section.green::before{ content:""; position:absolute; inset:0; opacity:0; mix-blend-mode:multiply; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='nd'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nd)'/%3E%3C/svg%3E"); }
.full-inner{ max-width:1080px; margin-inline:auto; position:relative; z-index:2; background:transparent; border:0; border-radius:0; padding:clamp(8px,1vw,24px) 0; }
.full-section.green .eyebrow{ color:var(--ink); }
.full-section.green .eyebrow::before{ background:var(--ink); }
.full-head{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.4; letter-spacing:.03em; color:var(--ink); margin-top:26px; max-width:22ch; }
.pillars{ margin-top:clamp(52px,7vh,92px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(30px,4vw,66px); }
.pillar .num{ font-family:var(--disp); font-style:italic; color:var(--green); font-size:1rem; display:block; border-top:1px solid var(--line); padding-top:18px; margin-bottom:18px; }
.pillar .pn{ font-family:var(--serif); font-weight:500; font-size:clamp(1.55rem,2.3vw,2.1rem); color:var(--ink); display:flex; align-items:baseline; gap:.55em; }
.pillar .pn .en{ font-family:var(--disp); font-style:italic; font-weight:400; font-size:.6em; color:rgba(33,26,18,.5); letter-spacing:.04em; }
.pillar .pd{ margin-top:16px; color:rgba(33,26,18,.78); font-size:1rem; line-height:1.95; }
@media (max-width:760px){ .pillars{ grid-template-columns:1fr; gap:36px; } }

/* =========================================================
   滿版媒體段（整個・大圖背景）
   ========================================================= */
.media-section{ position:relative; display:flex; justify-content:center; background:var(--cream); padding:clamp(96px,15vh,180px) clamp(24px,6vw,90px); }
.media-block{ position:relative; width:min(86vw,1200px); min-height:min(72vh,620px); display:flex; align-items:center; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.media-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media-scrim{ display:none; }
.media-content{ position:relative; z-index:2; max-width:430px; margin-left:clamp(20px,4vw,56px); padding:clamp(34px,3.4vw,50px); background:var(--cream); border:1px solid var(--line); border-radius:14px; color:var(--brown); }
.media-content .eyebrow{ color:var(--gold); }
.media-content .eyebrow::before{ background:var(--gold); }
.media-content h2{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,4.4vw,3.5rem); line-height:1.36; letter-spacing:.03em; color:var(--ink); margin:24px 0 22px; max-width:16ch; }
.media-content p{ color:var(--ink-70); max-width:42ch; font-size:1.04rem; line-height:1.95; }
.media-stats{ margin-top:40px; display:flex; flex-wrap:wrap; gap:28px 48px; }
.media-stats .st .n{ font-family:var(--disp); font-style:italic; font-size:2.4rem; color:var(--green); line-height:1; }
.media-stats .st .t{ margin-top:8px; font-size:.86rem; letter-spacing:.12em; color:var(--ink-70); }
@media (max-width:760px){ .media-scrim{ background:linear-gradient(0deg, rgba(28,20,12,.84), rgba(28,20,12,.45)); } .media-content h2{ max-width:none; } }

/* =========================================================
   ⑥ 穀物茶（米白卡片浮在背景影片上，含產品列）
   ========================================================= */
.products-section{ position:relative; display:flex; justify-content:center; background:var(--cream); padding:clamp(96px,15vh,180px) clamp(24px,6vw,90px); }
.products-card{ width:min(86vw,1200px); background:transparent; border:0; border-radius:0; padding:0; }
.products-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(36px,4vw,56px); }
.products-head h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.32; letter-spacing:.03em; color:var(--ink); margin-top:18px; }
.products-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,2.6vw,40px); }
.product{ display:block; color:inherit; }
.product .ph{ aspect-ratio:1/1; overflow:hidden; border-radius:12px; background:var(--cream-d); border:1px solid var(--line); }
.product .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.product:hover .ph img{ transform:scale(1.045); }
.product h3{ font-family:var(--serif); font-weight:500; font-size:1.32rem; color:var(--ink); margin-top:20px; display:flex; align-items:baseline; gap:.5em; flex-wrap:wrap; }
.product h3 .en{ font-family:var(--disp); font-style:italic; font-size:.78rem; color:var(--ink-45); letter-spacing:.04em; }
.product .desc{ margin-top:10px; color:var(--ink-70); font-size:.95rem; line-height:1.8; }
.product .tag{ display:inline-block; margin-top:14px; font-size:.76rem; letter-spacing:.1em; padding:.4em .95em; border-radius:100px; border:1px solid var(--line); color:var(--ink-70); }
.product .tag.-warm{ color:#A85F36; border-color:rgba(240,169,134,.7); background:rgba(240,169,134,.16); }  /* 杏桃：暖補系列 */
.product .tag.-green{ color:#5C7A2C; border-color:rgba(144,180,75,.6); background:rgba(144,180,75,.14); }   /* 草本綠 */
@media (max-width:760px){ .products-grid{ grid-template-columns:1fr; max-width:360px; margin-inline:auto; } .products-head{ flex-direction:column; align-items:flex-start; } }

/* =========================================================
   ⑦ 耘初誌（米白卡片浮在影片上・節氣文章）
   ========================================================= */
.journal-section{ position:relative; display:flex; justify-content:center; background:var(--cream); padding:clamp(96px,15vh,180px) clamp(24px,6vw,90px); }
.journal-card{ width:min(86vw,1200px); background:transparent; border:0; border-radius:0; padding:0; }
.journal-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(36px,4vw,56px); }
.journal-head h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.32; letter-spacing:.03em; color:var(--ink); margin-top:18px; }
.jgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3vw,48px); }
.jitem{ display:block; color:inherit; border-top:1px solid var(--line); padding-top:24px; transition:border-color .4s; }
.jitem:hover{ border-color:var(--green); }
.jitem .term{ font-family:var(--disp); font-style:italic; color:var(--green); font-size:1.05rem; letter-spacing:.04em; }
.jitem h3{ font-family:var(--serif); font-weight:500; font-size:1.28rem; color:var(--ink); margin:12px 0 12px; line-height:1.5; }
.jitem p{ color:var(--ink-70); font-size:.94rem; line-height:1.8; }
.jitem .date{ margin-top:18px; font-family:var(--disp); font-style:italic; font-size:.85rem; color:var(--ink-45); letter-spacing:.06em; }
@media (max-width:760px){ .jgrid{ grid-template-columns:1fr; } }

/* =========================================================
   ⑧ 訂閱（米白卡片・24 節氣養生信）
   ========================================================= */
.subscribe-section{ position:relative; display:flex; justify-content:center; background:var(--cream); padding:clamp(96px,15vh,180px) clamp(24px,6vw,90px); }
.sub-card{ width:min(86vw,820px); background:transparent; border:0; border-radius:0; padding:clamp(8px,1vw,24px) 0; text-align:center; }
.sub-card h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.32; letter-spacing:.03em; color:var(--ink); margin:18px auto 0; max-width:18ch; }
.sub-card p{ color:var(--ink-70); margin:18px auto 0; max-width:40ch; font-size:1.02rem; line-height:1.9; }
.sub-form{ margin:34px auto 0; max-width:480px; display:flex; gap:10px; }
.sub-form input{ flex:1; font-family:var(--sans); font-size:1rem; padding:1em 1.4em; border:1px solid var(--line); border-radius:24px; background:#FFFFFF; color:var(--ink); outline:none; transition:border-color .3s; }
.sub-form input:focus{ border-color:var(--green); }
.sub-note{ margin-top:16px; font-size:.84rem; color:var(--ink-45); letter-spacing:.04em; }
.sub-ok{ margin-top:22px; color:var(--green); font-family:var(--serif); font-size:1.1rem; opacity:0; transform:translateY(8px); transition:.5s var(--ease); }
.sub-ok.show{ opacity:1; transform:none; }
@media (max-width:600px){ .sub-form{ flex-direction:column; } .sub-form input,.sub-form button{ width:100%; justify-content:center; } }

/* =========================================================
   ⑨ Footer（深棕實底・米白字）
   ========================================================= */
footer.site-footer{ position:relative; background:var(--ink); color:var(--cream-70); padding:clamp(70px,9vh,110px) clamp(24px,6vw,90px) 40px; }
.footer-inner{ max-width:var(--maxw); margin-inline:auto; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer-brand .mk{ font-family:var(--serif); font-weight:700; font-size:1.9rem; letter-spacing:.14em; color:var(--cream); }
.footer-brand .lt{ font-family:var(--label); font-weight:300; letter-spacing:.4em; font-size:.74rem; text-transform:uppercase; color:var(--green); display:block; margin-top:8px; }
.footer-brand p{ margin-top:20px; font-size:.92rem; line-height:1.9; max-width:30ch; }
.footer-col h4{ font-family:var(--serif); font-weight:500; color:var(--cream); font-size:1.02rem; letter-spacing:.08em; margin-bottom:18px; }
.footer-col a{ display:block; font-size:.9rem; padding:7px 0; color:var(--cream-70); transition:color .3s, padding-left .3s; }
.footer-col a:hover{ color:var(--green); padding-left:5px; }
.footer-contact{ margin-top:44px; padding-top:28px; border-top:1px solid rgba(247,242,238,.16); display:flex; flex-wrap:wrap; gap:10px 44px; font-size:.86rem; }
.footer-bottom{ margin-top:26px; padding-top:24px; border-top:1px solid rgba(247,242,238,.16); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:.8rem; letter-spacing:.04em; color:rgba(247,242,238,.5); }
.footer-social{ display:flex; gap:20px; }
.footer-social a{ color:var(--cream-70); font-size:.84rem; letter-spacing:.1em; transition:color .3s; }
.footer-social a:hover{ color:var(--green); }
@media (max-width:860px){ .footer-top{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }

/* =========================================================
   ⑥ 兩大類分類卡（花果茶＝柔粉、穀物茶＝綠）
   ========================================================= */
.cat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,3.2vw,52px); }
.cat{ display:block; color:inherit; }
.cat .cat-img{ aspect-ratio:4/3; overflow:hidden; border-radius:12px; border:1px solid var(--line); background:var(--cream-d); }
.cat .cat-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.cat:hover .cat-img img{ transform:scale(1.04); }
.cat h3{ font-family:var(--serif); font-weight:500; font-size:1.55rem; color:var(--ink); margin-top:24px; display:flex; align-items:baseline; gap:.55em; flex-wrap:wrap; }
.cat h3 .en{ font-family:var(--disp); font-style:italic; font-size:.85rem; color:var(--ink-45); letter-spacing:.04em; }
.cat .desc{ margin-top:12px; color:var(--ink-70); font-size:.98rem; line-height:1.85; max-width:38ch; }
.cat .tag{ display:inline-block; margin-top:16px; font-size:.76rem; letter-spacing:.1em; padding:.4em .95em; border-radius:100px; border:1px solid var(--line); color:var(--ink-70); }
.cat.-floral .tag{ color:#A8596A; border-color:rgba(254,223,225,.95); background:rgba(254,223,225,.55); }  /* 柔粉・花草系列 */
.cat.-grain .tag{ color:#5C7A2C; border-color:rgba(144,180,75,.6); background:rgba(144,180,75,.14); }       /* 草本綠 */
.cat .more{ margin-top:18px; display:inline-flex; align-items:center; gap:.7em; font-family:var(--label); font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); }
.cat .more .ln{ width:30px; height:1px; background:var(--ink); transition:width .4s var(--ease); }
.cat:hover .more .ln{ width:54px; }
@media (max-width:760px){ .cat-grid{ grid-template-columns:1fr; gap:40px; } }

/* =========================================================
   響應式
   ========================================================= */
@media (max-width:900px){
  .hero{ min-height:100svh; }
  .hero-copy{ padding:120px clamp(24px,6vw,40px) 80px; max-width:none; }
  .nav-links{ position:fixed; inset:0 0 0 auto; width:min(80vw,330px); background:var(--ink); flex-direction:column; align-items:flex-start; justify-content:center; gap:28px; padding:0 42px; transform:translateX(100%); transition:transform .5s var(--ease); }
  .nav-links.open{ transform:none; }
  .nav-links a{ color:var(--cream-70); font-size:1.15rem; }
  header.nav.scrolled .nav-links a{ color:var(--cream-70); }
  .nav-links .nav-shop{ background:var(--green); border-color:var(--green); color:var(--cream); }  /* 行動選單深底，選購用綠實心鈕較顯眼 */
  .burger{ display:flex; z-index:1001; }
  .burger.active span{ background:var(--cream); }
  .burger.active span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .burger.active span:nth-child(2){ opacity:0; }
  .burger.active span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .scrollcue{ display:none; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } .reveal{ opacity:1; transform:none; } .hero-media img{ transform:none; } }
/* =========================================================
   手機版：內文字加大、行距加寬（可讀性）
   ========================================================= */
@media (max-width:760px){
  /* ⑤ 原料：手機改「圖在上、文字在下」，避免卡片蓋住原料圖 */
  .media-section{ padding:clamp(40px,8vh,80px) clamp(20px,5vw,30px); }
  .media-block{ flex-direction:column; align-items:stretch; min-height:0; }
  .media-bg{ position:relative; inset:auto; width:100%; height:46vh; }
  .media-content{ position:relative; max-width:none; margin:0; border:0; border-radius:0; padding:clamp(32px,6vw,44px); }

  /* 手機：③+ 已是實心全頁、內層去框 → 內容離邊約 20px，垂直節奏由區段 padding 給 */
  .products-section{ padding:clamp(60px,10vh,120px) 20px; }
  .products-card{ width:100%; padding:0; }
  .full-section{ padding:clamp(64px,11vh,130px) 20px; }
  .full-inner{ padding:0; }
  .journal-section{ padding:clamp(60px,10vh,120px) 20px; }
  .journal-card{ width:100%; padding:0; }
  .subscribe-section{ padding:clamp(64px,11vh,130px) 20px; }
  .sub-card{ width:100%; padding:0; }

  .hero .lead{ font-size:1.18rem; line-height:1.95; }
  .pin-text .p-ja{ font-size:1.15rem; line-height:2; }
  .pin-text .p-en{ font-size:1.08rem; }
  .pillar .pd{ font-size:1.1rem; line-height:1.95; }
  .media-content p{ font-size:1.12rem; line-height:1.95; }
  .cat .desc{ font-size:1.12rem; line-height:1.9; }
  .jitem p{ font-size:1.1rem; line-height:1.9; }
  .sub-card p{ font-size:1.14rem; line-height:1.95; }
}

/* =========================================================
   內容頁共用（about / teas / journal / wellness / contact）
   ========================================================= */
.page-hero{ position:relative; min-height:60svh; display:flex; align-items:flex-end; overflow:hidden; }
.page-hero .ph-media{ position:absolute; inset:0; z-index:0; }
.page-hero .ph-media img{ width:100%; height:100%; object-fit:cover; }
.page-hero .ph-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(61,53,48,.7), rgba(61,53,48,.28)); }
.page-hero .ph-inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding:0 clamp(24px,6vw,90px) clamp(50px,8vh,96px); color:var(--cream); }
.page-hero .eyebrow{ color:#A7CF8A; }
.page-hero .eyebrow::before{ background:#A7CF8A; }
.page-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,5vw,4rem); line-height:1.26; letter-spacing:.03em; color:var(--cream); margin-top:22px; max-width:20ch; }
.page-hero .ph-sub{ margin-top:20px; max-width:46ch; color:rgba(245,239,224,.88); font-size:1.06rem; line-height:1.95; }

/* 內容區段（米白、置中、舒適行寬）*/
.section{ position:relative; padding:clamp(72px,12vh,150px) clamp(24px,6vw,90px); }
.section .inner{ max-width:1080px; margin-inline:auto; }
.section.-narrow .inner{ max-width:760px; }
.section.-alt{ background:var(--cream-d); }
.section .sh{ font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.4; letter-spacing:.03em; color:var(--ink); margin-top:22px; max-width:24ch; }
.section .lead{ margin-top:24px; font-size:1.08rem; line-height:2; color:var(--ink-70); max-width:50ch; }
.section .body{ margin-top:20px; font-size:1.02rem; line-height:1.95; color:var(--ink-70); max-width:48ch; }
.section .body p + p{ margin-top:1.1em; }

/* 圖文兩欄（可交替）*/
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,80px); align-items:center; }
.split.-rev .split-media{ order:-1; }
.split-media{ border-radius:14px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; }
.split-media img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; gap:30px; } .split.-rev .split-media{ order:0; } }

/* 收尾 CTA 區 */
.cta-band{ position:relative; background:var(--ink); color:var(--cream); padding:clamp(64px,10vh,120px) clamp(24px,6vw,90px); text-align:center; }
.cta-band .eyebrow{ color:#A7CF8A; }
.cta-band .eyebrow::before{ background:#A7CF8A; }
.cta-band h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.4; color:var(--cream); margin:20px auto 0; max-width:20ch; }
.cta-band p{ margin:18px auto 0; max-width:42ch; color:var(--cream-70); font-size:1.02rem; line-height:1.9; }
.cta-band .actions{ margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-band .btn-line{ border-color:rgba(245,239,224,.45); color:var(--cream); }
.cta-band .btn-line:hover{ border-color:var(--cream); background:rgba(245,239,224,.12); }

@media (max-width:760px){
  .page-hero{ min-height:52svh; }
  .section{ padding:clamp(56px,9vh,110px) 20px; }
  .section .lead{ font-size:1.14rem; }
  .section .body{ font-size:1.06rem; }
}

/* 導覽：目前所在頁高亮 */
.nav-links a[aria-current="page"]{ color:#A7CF8A; }
header.nav.scrolled .nav-links a[aria-current="page"]{ color:var(--green); }

/* =========================================================
   耘初誌單篇 prose
   ========================================================= */
.prose{ max-width:720px; margin-inline:auto; }
.prose > p{ font-size:1.08rem; line-height:2.05; color:var(--ink-70); margin-top:1.4em; }
.prose h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.6vw,2rem); color:var(--ink); margin-top:1.9em; line-height:1.5; }
.prose h3{ font-family:var(--serif); font-weight:500; font-size:1.2rem; color:var(--ink); margin-top:1.5em; }
.prose blockquote{ margin:1.7em 0; padding:.5em 0 .5em 1.2em; border-left:2px solid var(--green); color:var(--ink); font-family:var(--serif); font-size:1.15rem; line-height:1.85; }
.prose ul{ margin-top:1.2em; padding-left:1.2em; }
.prose li{ margin-top:.5em; line-height:1.95; color:var(--ink-70); }
.article-meta{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; font-family:var(--disp); font-style:italic; color:rgba(245,239,224,.8); font-size:1.05rem; margin-top:14px; }
.article-meta .term{ color:#A7CF8A; }
.article-back{ margin-top:clamp(40px,6vh,64px); }

/* =========================================================
   養生功能格
   ========================================================= */
.feature-grid{ margin-top:clamp(40px,6vh,72px); display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,36px); }
.feature{ border:1px solid var(--line); border-radius:14px; padding:clamp(26px,3vw,40px); background:var(--cream); }
.feature .fn{ font-family:var(--disp); font-style:italic; color:var(--green); font-size:1rem; }
.feature h3{ font-family:var(--serif); font-weight:500; font-size:1.3rem; color:var(--ink); margin:10px 0 10px; }
.feature p{ color:var(--ink-70); font-size:1rem; line-height:1.85; }
@media (max-width:760px){ .feature-grid{ grid-template-columns:1fr; } }

/* =========================================================
   聯絡資訊格
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px); margin-top:clamp(36px,5vh,60px); }
.contact-card{ border-top:1px solid var(--line); padding-top:22px; }
.contact-card .ct{ font-family:var(--label); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--green); }
.contact-card .cv{ margin-top:12px; font-size:1.05rem; line-height:1.75; color:var(--ink); }
.contact-card .cv a{ color:var(--ink); border-bottom:1px solid var(--line); transition:color .3s,border-color .3s; }
.contact-card .cv a:hover{ color:var(--green); border-color:var(--green); }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; gap:28px; } }

/* 茶品分類標籤色（沿用首頁規則）*/
.section .tag{ display:inline-block; margin-top:6px; font-size:.76rem; letter-spacing:.1em; padding:.4em .95em; border-radius:100px; border:1px solid var(--line); color:var(--ink-70); }
.section .tag.-floral{ color:#A8596A; border-color:rgba(254,223,225,.95); background:rgba(254,223,225,.55); }
.section .tag.-grain{ color:#5C7A2C; border-color:rgba(144,180,75,.6); background:rgba(144,180,75,.14); }
.section .actions{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; }

/* =========================================================
   可讀性優化（2026-06-14）— 43 歲老花消費者友善
   字重加實 / 淺灰字加深 / 綠字換深綠 / 照片遮罩加深 / 小字加大
   ========================================================= */
:root{
  --ink-70: rgba(61,53,48,.82);   /* 次要內文加深（原 .72，對比更實）*/
  --ink-45: rgba(61,53,48,.70);   /* 日期/說明/英文小字加深（原 .5，對比 2.71→過 4.5）*/
  --green-d: #4F6B23;             /* 文字用深綠（亮綠 #90B44B 在米白上對比僅 2.1）*/
}
body{ font-weight:400; }          /* 全站內文 300→400，筆畫變實、不再糊 */

/* 米白底上的綠色小字 → 深綠（按鈕/圓點/線條仍維持品牌亮綠；::before 線條用 currentColor 會自動跟著變）*/
.eyebrow, .pin-eyebrow,
.pillar .num, .jitem .term, .feature .fn, .contact-card .ct,
.media-content .eyebrow{ color:var(--green-d); }
.media-content .eyebrow::before{ background:var(--green-d); }

/* 照片上的字：遮罩加深＋細微字陰影，亮照片也壓得住 */
.hero-media::after{ background:rgba(61,53,48,.56); }
.page-hero .ph-media::after{ background:linear-gradient(0deg, rgba(61,53,48,.82) 0%, rgba(61,53,48,.42) 100%); }
.hero h1, .hero .lead, .page-hero h1, .page-hero .ph-sub{ text-shadow:0 1px 14px rgba(35,26,18,.42); }
.footer-bottom{ color:rgba(247,242,238,.66); }   /* 版權字加深（原 .5，對比 3.99→更實）*/

/* 小字加大（老花友善）*/
.eyebrow, .pin-eyebrow{ font-size:.84rem; }
@media (max-width:760px){
  .eyebrow, .pin-eyebrow{ font-size:.88rem; letter-spacing:.32em; }
  .jitem .date, .sub-note, .article-meta,
  .cat h3 .en, .product h3 .en,
  .footer-col a, .footer-contact, .footer-bottom{ font-size:.98rem; }
  .hero .axis, .season .s2{ font-size:.94rem; }
}