/* 单椒山官网 Demo v001 */
:root{
  --paper:#F4F0E7; --paper-2:#EBE5D8; --ink:#22261F; --ink-2:#65665B; --ink-3:#9A998C;
  --green:#18241B; --cream:#EFE8D8;
  --line:rgba(34,38,31,.16); --line-d:rgba(239,232,216,.18);
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC","STSong","SimSun",serif;
  --sans:"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  --latin:"Baskerville","Times New Roman",serif;
  --pad:120px; --nav:84px;
  --u:calc(min(100vw,1800px) / 1440);
  --ease:cubic-bezier(.2,.6,.2,1);
  --gap:24px;
  --grain-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .94 0 0 0 0 .91 0 0 0 0 .85 0 0 0 .3 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fs-1:48px; --fs-2:24px; --fs-b:15px; --fs-s:13px; --fs-c:12px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .27 0 0 0 0 .16 0 0 0 1.1 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .16' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .30 0 0 0 0 .18 0 0 0 .5 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
@media (max-width:1200px){:root{--pad:64px}}
@media (max-width:900px){:root{--pad:24px;--nav:64px;--fs-1:30px;--fs-2:20px;--fs-b:14px}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:var(--nav)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--fs-b);line-height:1.9;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;height:auto}
.jar{width:auto}
.latin{font-family:var(--latin);font-style:italic;letter-spacing:.02em}
.m-only{display:none}

/* ---------- 进场动效 ---------- */
html.js [data-r]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
html.js [data-r].in{opacity:1;transform:none}

/* ---------- 导航 ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav);padding:0 var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;z-index:50;font-size:13px;letter-spacing:.18em;color:var(--cream);border-bottom:1px solid transparent;transition:background .35s,color .35s,border-color .35s}
.nav .l{display:flex;gap:44px}
.nav .r{display:flex;gap:44px;justify-content:flex-end}
.nav a:not(.logo){position:relative;padding:6px 0}
.nav a:not(.logo)::after{content:"";position:absolute;left:0;right:.18em;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:not(.logo):hover::after{transform:scaleX(1)}
.nav.solid{background:rgba(244,240,231,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);border-bottom-color:var(--line)}
.logo{display:block;width:132px;aspect-ratio:1652/538;background:url(../img/logo-cream.png) center/contain no-repeat}
.nav.solid .logo,.logo.ink{background-image:url(../img/logo-ink.png)}
.burger{display:none;width:44px;height:44px;margin-right:-11px;position:relative;justify-self:end}
.burger i{position:absolute;left:11px;right:11px;height:1px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.burger i:first-child{top:17px}.burger i:last-child{top:27px}
.menu{position:fixed;inset:0;z-index:40;background:var(--green);color:var(--cream);display:flex;flex-direction:column;justify-content:center;padding:var(--nav) var(--pad) 40px;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.menu a{font-family:var(--serif);font-weight:300;font-size:30px;letter-spacing:.2em;padding:16px 0;border-bottom:1px solid var(--line-d)}
.menu small{margin-top:40px;font-size:12px;letter-spacing:.3em;opacity:.55}
body.menu-open{overflow:hidden}
body.menu-open .menu{opacity:1;visibility:visible;transition-delay:0s}
body.menu-open .nav{background:transparent;color:var(--cream);border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
body.menu-open .nav .logo{background-image:url(../img/logo-cream.png)}
body.menu-open .burger i:first-child{top:22px;transform:rotate(45deg)}
body.menu-open .burger i:last-child{top:22px;transform:rotate(-45deg)}

/* ---------- 网格与字号体系 ----------
   电脑：12 栏，栏距 24，左右留白 --pad；文字 5 栏、图片 6 栏，中间空 1 栏。
   手机：单栏，左右 24，全部左对齐。 */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-left:var(--pad);padding-right:var(--pad)}
.t-l{grid-column:1/6}.m-r{grid-column:7/13}
.m-l{grid-column:1/7}.t-r{grid-column:8/13}
.full{grid-column:1/13}
.sec{padding-top:160px;padding-bottom:160px}
.eyebrow{font-size:12px;line-height:1.6;letter-spacing:.34em;color:var(--ink-2);display:flex;gap:14px;align-items:baseline}
.eyebrow b{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.1em;color:var(--ink)}
.eyebrow em{font-family:var(--latin);font-size:14px;letter-spacing:.04em;color:var(--ink-3)}
.on-dark .eyebrow,.on-dark .eyebrow b{color:var(--cream)} .on-dark .eyebrow em{color:rgba(239,232,216,.5)}
.h1,.h2{font-family:var(--serif);font-weight:300;font-size:var(--fs-1);line-height:1.5;letter-spacing:.1em}
.eyebrow+.h1,.eyebrow+.h2{margin-top:32px}
.txt{color:var(--ink-2);letter-spacing:.05em;line-height:2.2;max-width:27em}
.h1+.txt,.h2+.txt{margin-top:28px}
.txt+.txt{margin-top:1.4em}
.on-dark .txt{color:rgba(239,232,216,.76)}
.cap-s{font-size:var(--fs-c);line-height:1.6;letter-spacing:.2em;color:var(--ink-3);margin-top:14px}
.on-dark .cap-s{color:rgba(239,232,216,.55)}
.link{display:inline-flex;gap:14px;align-items:center;font-size:13px;letter-spacing:.24em;padding-bottom:10px;border-bottom:1px solid currentColor}
.link span{transition:transform .35s var(--ease)}
.link:hover span{transform:translateX(6px)}
.graded{filter:saturate(.74) contrast(1.05) brightness(.95) sepia(.14)}
.paper{background-color:#E8DFCB;background-image:radial-gradient(ellipse at 50% 42%,rgba(255,251,240,.6),rgba(255,251,240,0) 62%),var(--fiber),var(--grain)}

/* ---------- 首屏 ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;max-height:1080px;background:#10170f;color:var(--cream);overflow:hidden}
.hero-bg{position:absolute;inset:-6% 0 -6% 0;will-change:transform}
.hero-img{position:absolute;inset:0;background:url(../img/hero.jpg) 60% 50%/cover no-repeat}
html.js .hero-img{transform:scale(1.09)}
html.js.loaded .hero-img{transform:scale(1);transition:transform 2.8s var(--ease)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,18,11,.72) 0%,rgba(12,18,11,.25) 42%,rgba(12,18,11,0) 70%),linear-gradient(180deg,rgba(12,18,11,.45) 0,rgba(12,18,11,0) 22%,rgba(12,18,11,0) 70%,rgba(12,18,11,.5) 100%);pointer-events:none}
.hero .v{position:absolute;z-index:2;left:var(--pad);top:50%;transform:translateY(-50%);display:flex;flex-direction:row-reverse;gap:34px;align-items:flex-start}
.hero h1{writing-mode:vertical-rl;font-family:var(--serif);font-weight:300;font-size:clamp(56px,8.6vh,84px);line-height:1;letter-spacing:.2em}
.hero .sub{writing-mode:vertical-rl;font-size:13px;letter-spacing:.62em;opacity:.82;padding-top:6px}
html.js .hero h1,html.js .hero .sub,html.js .hero .cue{opacity:0;transition:opacity 1.6s var(--ease) .5s,transform 1.6s var(--ease) .5s}
html.js .hero h1{transform:translateY(18px)}
html.js .hero .sub{transition-delay:1.1s} html.js .hero .cue{transition-delay:1.6s}
html.js.loaded .hero h1,html.js.loaded .hero .cue{opacity:1;transform:none}
html.js.loaded .hero .sub{opacity:.82}
.hero .cue{position:absolute;z-index:2;left:var(--pad);bottom:48px;font-size:12px;letter-spacing:.3em;display:flex;align-items:center;gap:16px}
.hero .cue i{display:block;width:1px;height:44px;background:currentColor;opacity:.6;transform-origin:top;animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.hero .cap{position:absolute;z-index:2;right:var(--pad);bottom:48px;font-size:11px;letter-spacing:.2em;opacity:.5}

/* ---------- 一 单椒山 ---------- */
.about{align-items:start}
.about .eyebrow{grid-column:1/3;padding-top:22px}
.about .h1{grid-column:3/8}
.about .body{grid-column:9/13;padding-top:14px}

/* ---------- 二 金山基地 ---------- */
.land{position:relative;background:var(--green);color:var(--cream);overflow:hidden}
.land .ph{position:absolute;left:0;top:-40px;width:54%;height:940px;background:url(../img/pad.jpg) 50% 30%/cover no-repeat;filter:saturate(.7) contrast(1.06) brightness(.82) sepia(.16);-webkit-mask-image:linear-gradient(90deg,#000 38%,transparent 100%),linear-gradient(180deg,#000 58%,transparent 96%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 38%,transparent 100%),linear-gradient(180deg,#000 58%,transparent 96%);mask-composite:intersect;will-change:transform}
.land .top{position:relative;min-height:860px;padding-top:160px;padding-bottom:40px}
.land .top .tx{grid-column:8/13}
.land .top .cap-s{grid-column:1/7;align-self:end;margin:0}
.nums{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gap);margin-top:64px;padding-top:28px;border-top:1px solid var(--line-d)}
.nums b{display:block;font-family:var(--latin);font-weight:400;font-size:48px;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.nums b i{font-style:normal}
.nums b small{font-family:var(--serif);font-size:15px;margin-left:6px;letter-spacing:.1em}
.nums span{display:block;margin-top:10px;font-size:12px;line-height:1.6;letter-spacing:.16em;color:rgba(239,232,216,.6)}

/* ---------- 三 取老弃新 ---------- */
.cutsec{background:var(--green);color:var(--cream);padding-top:120px;padding-bottom:160px;align-items:center;row-gap:0}
.cutsec svg.plant{grid-column:1/7;display:block;width:100%;height:auto;max-width:600px}
.cutsec .tx{grid-column:8/13}
.legend{margin-top:44px;border-top:1px solid var(--line-d)}
.legend>div{display:grid;grid-template-columns:64px 1fr;align-items:center;padding:22px 0;border-bottom:1px solid var(--line-d)}
.legend i{display:block;width:40px;height:0;border-top:1.5px solid var(--cream)}
.legend i.d{border-top-style:dashed;opacity:.6}
.legend strong{display:block;font-family:var(--serif);font-weight:300;font-size:var(--fs-2);line-height:1.5;letter-spacing:.14em}
.legend span{display:block;font-size:var(--fs-s);line-height:1.8;letter-spacing:.08em;color:rgba(239,232,216,.66)}
.ratio{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:120px;padding-top:56px;border-top:1px solid var(--line-d);align-items:start}
.ratio .rp:nth-child(1){grid-column:1/7}
.ratio .rp:nth-child(2){grid-column:8/13}
.ratio .lab{font-size:12px;letter-spacing:.34em;color:rgba(239,232,216,.55)}
.ratio .big{font-family:var(--serif);font-weight:300;font-size:var(--fs-2);line-height:1.6;letter-spacing:.12em;margin-top:22px}
.bar{display:flex;gap:6px;height:56px;margin-top:34px}
.bar i{display:block;height:100%}
.bar .n{flex:64;border:1.3px dashed rgba(239,232,216,.5)}
.bar .o{flex:36;border:1.5px solid var(--cream);background:rgba(239,232,216,.12);transform-origin:left}
.barl{display:flex;gap:6px;margin-top:14px;font-size:var(--fs-s);line-height:1.7;letter-spacing:.12em;color:rgba(239,232,216,.66)}
.barl span:first-child{flex:64}.barl span:last-child{flex:36}
.barl b{display:block;font-family:var(--serif);font-weight:300;font-size:var(--fs-2);letter-spacing:.14em;color:var(--cream)}
.ten{display:block;width:100%;max-width:440px;height:auto;margin-top:34px}
.ratio .foot-n{grid-column:1/13;margin-top:44px;font-size:var(--fs-c);letter-spacing:.2em;color:rgba(239,232,216,.4)}
html.js svg.plant .new{transition:transform 1.4s var(--ease) .9s,opacity 1.4s var(--ease) .9s;opacity:.95}
html.js svg.plant .cutline{opacity:0;transition:opacity .8s var(--ease) .4s}
html.js svg.plant.in .cutline{opacity:.8}
html.js svg.plant.in .new{transform:translateY(-14px);opacity:.45}
html.js .ten .p{opacity:0;transition:opacity .5s var(--ease) calc(var(--i) * .07s)}
html.js .ten.in .p{opacity:1}
html.js .ten .res{opacity:0;transition:opacity .8s var(--ease) 1s}
html.js .ten.in .res{opacity:1}

/* ---------- 四 主张 ---------- */
.belief{padding:150px 0 160px;overflow:hidden}
.belief .head{text-align:center;padding:0 var(--pad) 64px}
.belief .head .eyebrow{justify-content:center}
.belief .head .h1{letter-spacing:.34em;padding-left:.34em}
.belief .head p{font-family:var(--serif);font-size:var(--fs-2);line-height:1.6;letter-spacing:.3em;color:var(--ink-2);margin-top:14px;padding-left:.3em}
.anno{position:relative;width:1200px;height:580px;left:50%;margin-left:-600px;transform-origin:50% 0}
.anno .jar{position:absolute;left:340px;top:20px;width:520px;height:520px;max-width:none}
.anno .sh{position:absolute;left:400px;top:438px;width:400px;height:50px;border-radius:50%;background:radial-gradient(closest-side,rgba(60,38,16,.4),rgba(60,38,16,0))}
.anno .it{position:absolute;width:300px}
.anno .it strong{display:block;font-family:var(--serif);font-weight:300;font-size:var(--fs-2);letter-spacing:.1em;line-height:1.4;white-space:nowrap}
.anno .it p{margin-top:12px;font-size:var(--fs-s);color:var(--ink-2);letter-spacing:.06em;line-height:2}
.anno .it.l{left:auto;right:900px;width:auto;text-align:right}
.anno .it.r{left:900px}
.anno .ln{position:absolute;height:1px;background:rgba(34,38,31,.5)}
.anno .ln::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.anno .ln.tl{transform-origin:left} .anno .ln.tl::after{right:-3px}
.anno .ln.tr{transform-origin:right} .anno .ln.tr::after{left:-3px}
html.js .anno .ln{transform:scaleX(0);transition:transform 1s var(--ease) var(--d,.5s)}
html.js .anno.in .ln{transform:scaleX(1)}
html.js .anno .it{opacity:0;transition:opacity 1s var(--ease) var(--d,.2s)}
html.js .anno.in .it{opacity:1}
html.js .anno .jar,html.js .anno .sh{opacity:0;transition:opacity 1.2s var(--ease)}
html.js .anno.in .jar,html.js .anno.in .sh{opacity:1}

/* ---------- 缘起 ---------- */
.band{position:relative;padding:150px var(--pad);background:#121b14;color:var(--cream);text-align:center;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:url(../img/pad.jpg) 50% 70%/cover no-repeat;filter:grayscale(1) contrast(1.1);opacity:.2}
.band::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(18,27,20,.2),rgba(18,27,20,.92) 75%)}
.band>*{position:relative;z-index:1}
.band .eyebrow{justify-content:center;color:rgba(239,232,216,.7)} .band .eyebrow em{color:rgba(239,232,216,.45)}
.band blockquote{font-family:var(--serif);font-weight:300;font-size:30px;line-height:2.2;letter-spacing:.1em;max-width:820px;margin:48px auto 0}
.band blockquote p+p{margin-top:.9em}
.band .sign{margin-top:52px;font-size:12px;letter-spacing:.34em;color:rgba(239,232,216,.6)}
.band .h2{margin-bottom:40px}

/* ---------- 认识米邦塔（产品页） ---------- */
.know{padding-top:150px;padding-bottom:60px}
.know .hd{padding:0 var(--pad)}
.know .k{align-items:center;margin-top:90px}
.know .kt{grid-column:1/6;grid-row:1}
.know .kf{grid-column:7/13;grid-row:1}
.know .im{position:relative;overflow:hidden;aspect-ratio:4/5;background:#ddd3c0}
.know .im img.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.know .im.top img.fill{object-position:60% 0;transform:scale(1.55);transform-origin:62% 0}
.know .im.btm img.fill{object-position:40% 100%;transform:scale(1.5);transform-origin:30% 96%}
.know .im.jarstage{background:url(../img/stone.jpg) 78% 50%/auto 100% no-repeat}
.know .im.jarstage img{position:absolute;height:74%;left:50%;top:22%;transform:translateX(-49.6%);max-width:none}
.know .num{font-family:var(--latin);font-size:17px;line-height:1;letter-spacing:.14em;color:var(--ink-2)}
.know .num b{font-style:italic;font-weight:400;font-size:64px;letter-spacing:0;margin-right:14px;color:var(--ink)}
.know .kt .h2{margin-top:30px}
.steps{display:none}
html.pin .know{padding:0}
html.pin .know-track{height:calc(100vh + 3 * 85vh)}
html.pin .know-sticky{position:sticky;top:0;height:100vh;padding:calc(var(--nav) + 5vh) 0 5vh;display:flex;flex-direction:column}
html.pin .know-stack{position:relative;flex:1;min-height:0;margin-top:3vh}
html.pin .know .k{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s .28s}
html.pin .know .k.on{opacity:1;visibility:visible;transition-delay:0s}
html.pin .know .kt{transform:translateY(14px);transition:transform .5s var(--ease)}
html.pin .know .k.on .kt{transform:none}
html.pin .know .kf{height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
html.pin .know .im{height:calc(100% - 34px);max-height:720px;width:auto;max-width:100%}
html.pin .steps{display:grid;grid-template-columns:repeat(4,1fr);position:absolute;left:var(--pad);bottom:8vh;width:calc((100vw - var(--pad) * 2 - var(--gap) * 11) / 12 * 4 + var(--gap) * 3);z-index:3}
html.pin .steps button{text-align:left;font-size:13px;padding-top:16px;border-top:1px solid var(--line);color:var(--ink-3);letter-spacing:.3em;transition:color .28s,border-color .28s}
html.pin .steps button.on{border-top-color:var(--ink);color:var(--ink)}

/* ---------- 入日常 ---------- */
.eat{align-items:center}
.slot{grid-column:7/13;aspect-ratio:3/2;border:1px dashed rgba(34,38,31,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink-3);font-size:12px;letter-spacing:.3em;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(34,38,31,.03) 14px 15px)}
.slot b{font-family:var(--serif);font-weight:300;font-size:var(--fs-2);color:var(--ink-2);letter-spacing:.2em}

/* ---------- 产品入口舞台（首页） ---------- */
.stage{position:relative;height:calc(820 * var(--u));background:url(../img/stone.jpg) 50% 50%/cover no-repeat;overflow:hidden;color:#2b2416}
.stage .jar{position:absolute;height:calc(620 * var(--u));left:calc(700 * var(--u));top:calc(221 * var(--u));max-width:none}
.sh{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(60,38,16,.42),rgba(60,38,16,0))}
.sh::before{content:"";position:absolute;left:14%;right:14%;top:30%;height:36%;border-radius:50%;background:rgba(48,30,12,.6);filter:blur(7px)}
.sh::after{content:"";position:absolute;left:30%;right:-22%;top:20%;height:90%;border-radius:50%;background:radial-gradient(closest-side,rgba(60,38,16,.22),rgba(60,38,16,0))}
.stage .sh{left:calc(786 * var(--u));top:calc(700 * var(--u));width:calc(450 * var(--u));height:calc(60 * var(--u))}
.stage .tx{position:absolute;left:var(--pad);top:50%;transform:translateY(-52%)}
.stage .eyebrow,.stage .eyebrow b{color:#2b2416} .stage .eyebrow em{color:rgba(43,36,22,.55)}
.stage .h1{line-height:1.35}
.stage .en{font-size:20px;line-height:1.5;margin-top:8px;color:rgba(43,36,22,.7)}
.stage .txt{color:rgba(43,36,22,.78);margin-top:26px}
.stage .meta{margin:26px 0 48px;font-size:var(--fs-b);letter-spacing:.26em}
.stage .cap{position:absolute;right:var(--pad);bottom:36px;font-size:11px;letter-spacing:.2em;color:rgba(43,36,22,.5)}

/* ---------- 礼盒 ---------- */
.box{align-items:center}
.box .im{grid-column:1/7;overflow:hidden}
.box .im img{display:block;width:100%;aspect-ratio:1;object-fit:cover;transition:transform 1.6s var(--ease)}
.box .im:hover img{transform:scale(1.03)}
.box .r{grid-column:8/13}
.list{border-top:1px solid var(--line);margin-top:36px}
.list li{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);letter-spacing:.1em;line-height:1.7}
.list li span:last-child{font-family:var(--latin);font-size:17px;color:var(--ink-2);letter-spacing:.04em;white-space:nowrap}
.list li span small{display:block;font-size:12px;color:var(--ink-3);letter-spacing:.06em}

/* ---------- 页脚 ---------- */
.foot{background:var(--green);color:var(--cream);padding-top:110px;padding-bottom:44px}
.foot .top{padding-bottom:96px;align-items:start}
.foot .top>div:nth-child(1){grid-column:1/6}
.foot .top>div:nth-child(2){grid-column:7/9}
.foot .top>div:nth-child(3){grid-column:9/11}
.foot .top>div:nth-child(4){grid-column:11/13}
.foot .logo{width:150px}
.foot .slogan{font-family:var(--serif);font-weight:300;font-size:15px;letter-spacing:.5em;margin-top:26px;opacity:.8}
.foot h4{font-weight:400;font-size:12px;letter-spacing:.34em;opacity:.5;margin-bottom:22px}
.foot li{list-style:none;font-size:13px;letter-spacing:.14em;line-height:2.5}
.foot li a:hover{opacity:.7}
.foot li small{opacity:.45;font-size:11px;margin-left:8px}
.foot .btm{margin:0 var(--pad);border-top:1px solid var(--line-d);padding-top:26px;display:flex;justify-content:space-between;font-size:var(--fs-c);letter-spacing:.2em;opacity:.55}

/* ---------- 产品页 ---------- */
.p-hero{display:grid;grid-template-columns:50% 1fr;padding-top:var(--nav)}
.p-stage{position:relative;height:800px;background:url(../img/stone.jpg) 72% 50%/auto 100% no-repeat;overflow:hidden}
.p-stage .jar{position:absolute;height:600px;left:50%;top:192px;transform:translateX(-50.2%);max-width:none}
.p-stage .sh{left:50%;margin-left:-218px;top:656px;width:436px;height:58px}
.p-stage .cap{position:absolute;left:28px;bottom:24px;font-size:11px;letter-spacing:.2em;color:rgba(43,36,22,.5)}
html.js .p-stage .jar{opacity:0;transition:opacity 1.4s var(--ease) .2s}
html.js.loaded .p-stage .jar{opacity:1}
.p-info{padding:0 var(--pad) 0 calc((100vw - var(--pad) * 2 - var(--gap) * 11) / 12 + var(--gap) * 1.5);display:flex;flex-direction:column;justify-content:center}
.crumb{font-size:12px;letter-spacing:.24em;color:var(--ink-3)}
.crumb a:hover{color:var(--ink)}
.p-info .h1{line-height:1.35;margin-top:30px}
.p-info .en{font-size:20px;line-height:1.5;color:var(--ink-2);margin-top:6px}
.p-info .txt{margin:30px 0 34px}
.kv{border-top:1px solid var(--line)}
.kv div{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:var(--fs-b);line-height:1.7;letter-spacing:.1em}
.kv div span:first-child{color:var(--ink-2);white-space:nowrap}
.kv div span:last-child{text-align:right}
.kv .tbd{color:var(--ink-3)}
.btns{display:flex;gap:16px;margin-top:40px}
.btn{flex:1;height:56px;display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:.3em;border:1px solid var(--ink);transition:background .3s,color .3s}
.btn.f{background:var(--ink);color:var(--paper)}
.btn.f[aria-disabled=true]{opacity:.55;cursor:default}
.btn:not(.f):hover{background:var(--ink);color:var(--paper)}
.btn small{font-size:11px;opacity:.7;margin-left:10px;letter-spacing:.1em}
.jarsec{align-items:center}
.dim{grid-column:1/7;position:relative;aspect-ratio:1;background:#fff;width:100%}
.dim img{display:block;width:100%;height:100%}
.dim .dv{position:absolute;left:84%;top:17.1%;height:65.8%;border-left:1px solid var(--ink-2)}
.dim .dv::before,.dim .dv::after{content:"";position:absolute;left:-6px;width:11px;border-top:1px solid var(--ink-2)}
.dim .dv::before{top:0}.dim .dv::after{bottom:0}
.dim .dv b{position:absolute;left:14px;top:50%;transform:translateY(-50%);white-space:nowrap}
.dim .dh{position:absolute;top:88%;left:21.5%;width:57.5%;border-top:1px solid var(--ink-2)}
.dim .dh::before,.dim .dh::after{content:"";position:absolute;top:-6px;height:11px;border-left:1px solid var(--ink-2)}
.dim .dh::before{left:0}.dim .dh::after{right:0}
.dim .dh b{position:absolute;left:50%;top:10px;transform:translateX(-50%);white-space:nowrap}
.dim b{font-family:var(--latin);font-style:normal;font-weight:400;font-size:17px;letter-spacing:.06em;color:var(--ink)}
.jarsec .r{grid-column:8/13}
.notes{border-top:1px solid var(--line);margin-top:36px}
.notes div{padding:20px 0;border-bottom:1px solid var(--line)}
.notes strong{display:block;font-family:var(--serif);font-weight:300;font-size:var(--fs-2);line-height:1.5;letter-spacing:.14em}
.notes span{display:block;font-size:var(--fs-s);line-height:1.8;color:var(--ink-2);letter-spacing:.06em}
.spec{align-items:start}
.spec .kv{grid-column:7/13}

/* ---------- 手机与窄屏 ---------- */
@media (max-width:900px){
  .m-only{display:block}.d-only{display:none!important}
  .logo{width:104px}
  .nav{grid-template-columns:1fr auto}
  .nav .l,.nav .r{display:none}.burger{display:block}
  .g{display:block}
  .sec{padding-top:96px;padding-bottom:96px}
  .h1,.h2{line-height:1.55}
  .eyebrow+.h1,.eyebrow+.h2{margin-top:22px}
  .h1+.txt,.h2+.txt{margin-top:20px}
  .txt{line-height:2.1;max-width:none}
  .hero{max-height:none}
  .hero-img{background-position:74% 50%}
  .hero::after{background:linear-gradient(90deg,rgba(12,18,11,.7) 0%,rgba(12,18,11,.2) 55%,rgba(12,18,11,0) 80%),linear-gradient(180deg,rgba(12,18,11,.5) 0,rgba(12,18,11,0) 20%,rgba(12,18,11,0) 68%,rgba(12,18,11,.6) 100%)}
  .hero .v{top:calc(var(--nav) + 44px);transform:none;gap:20px}
  .hero h1{font-size:54px}
  .hero .sub{font-size:11px;letter-spacing:.5em}
  .hero .cue{bottom:32px;font-size:11px}.hero .cue i{height:32px}
  .about .eyebrow{padding-top:0}
  .about .body{padding-top:0;margin-top:24px}
  .land .ph{position:relative;top:0;width:100%;height:420px;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .land .top{min-height:0;padding-top:0;padding-bottom:0;margin-top:-28px;display:flex;flex-direction:column}
  .land .top .cap-s{order:-1;align-self:flex-start;margin:0 0 56px}
  .nums{margin-top:40px;padding-top:24px;column-gap:12px}
  .nums b{font-size:34px}.nums b small{font-size:12px;margin-left:4px}.nums span{font-size:11px;letter-spacing:.08em}
  .cutsec{padding-top:96px;padding-bottom:96px}
  .cutsec{display:flex;flex-direction:column}
  .cutsec .tx{order:-1}
  .cutsec svg.plant{margin:56px auto 0}
  .legend{margin-top:32px}
  .ratio{display:block;margin-top:72px;padding-top:44px}
  .ratio .rp+.rp{margin-top:64px}
  .bar{height:48px;margin-top:26px}
  .belief{padding:96px 0 80px}
  .belief .head{text-align:left;padding:0 var(--pad) 28px}
  .belief .head .eyebrow{justify-content:flex-start}
  .belief .head .h1{letter-spacing:.16em;padding-left:0}
  .belief .head p{letter-spacing:.2em;padding-left:0;margin-top:10px}
  .anno{width:auto;height:auto;left:0;margin:0;padding:0 var(--pad);transform:none!important}
  .anno .jar{position:static;display:block;width:280px;height:280px;margin:0 auto 14px}
  .anno .sh,.anno .ln{display:none}
  .anno .it,.anno .it.l{position:static;width:auto;text-align:left;padding:24px 0;border-top:1px solid rgba(34,38,31,.22)}
  .anno .it strong{line-height:1.5;white-space:normal}
  .anno .it p{margin-top:6px;line-height:1.9}
  .band{padding:96px var(--pad);text-align:left}
  .band .eyebrow{justify-content:flex-start}
  .band blockquote{font-size:20px;line-height:2.1;letter-spacing:.05em;margin-top:30px}
  .band .sign{margin-top:36px}
  .know{padding-top:96px;padding-bottom:20px}
  .know .k{margin-top:72px}
  .know .k:first-child{margin-top:44px}
  .know .kf{margin-bottom:34px}
  .know .num b{font-size:40px}
  .know .kt .h2{margin-top:14px}
  .slot{margin-top:40px;aspect-ratio:4/3}
  .stage{height:auto;background:var(--paper-2);overflow:visible}
  .stage .pic{position:relative;height:520px;background:url(../img/stone.jpg) 80% 50%/auto 100% no-repeat;overflow:hidden}
  .stage .jar{height:340px;left:50%;top:158px;transform:translateX(-50.2%)}
  .stage .sh{left:50%;margin-left:-120px;top:424px;width:240px;height:28px}
  .stage .tx{position:static;transform:none;padding:56px var(--pad) 72px}
  .stage .en{font-size:17px}
  .stage .txt{margin-top:18px}
  .stage .meta{margin:22px 0 36px}
  .box .r{margin-top:44px}
  .list{margin-top:28px}
  .list li{padding:18px 0}
  .foot{padding-top:72px;padding-bottom:32px}
  .foot .top{display:grid;grid-template-columns:1fr 1fr;row-gap:44px;padding-bottom:56px}
  .foot .top>div:nth-child(1){grid-column:1/-1}
  .foot .top>div:nth-child(2),.foot .top>div:nth-child(3),.foot .top>div:nth-child(4){grid-column:auto}
  .foot .btm{flex-direction:column;gap:6px}
  .p-hero{display:block}
  .p-stage{height:520px;background-position:80% 50%}
  .p-stage .jar{height:360px;top:128px}
  .p-stage .sh{margin-left:-125px;top:410px;width:250px;height:30px}
  .p-info{padding:48px var(--pad) 72px}
  .p-info .h1{margin-top:20px}
  .p-info .en{font-size:17px}
  .p-info .txt{margin:20px 0 26px}
  .btns{flex-direction:column;gap:12px;margin-top:32px}
  .btn{flex:none;height:52px}
  .jarsec .r{margin-top:44px}
  .notes{margin-top:28px}
  .dim b{font-size:14px}
  .dim .dv{left:82%}
  .dim .dv b{left:6px;font-size:12px}
  .spec .kv{margin-top:36px}
}


/* ===================== v003 ===================== */
/* 肌理：浅色段用纸张纤维，深色段用细颗粒 */
.paper-l{background-color:var(--paper);background-image:var(--fiber),var(--grain)}
.land,.cutsec,.foot{background-image:var(--grain-d)}

/* 二 缘起：照片/视频 + 文字 */
.origin{align-items:center}
.origin .vid{grid-column:1/6}
.origin .vid video,.origin .vid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#2a2f25;filter:saturate(.86) contrast(1.03)}
.origin .tx{grid-column:7/13}
.origin .txt{max-width:30em}

/* 三 金山基地：通栏实拍，向下融进深绿 */
.land .ph{position:relative;left:auto;top:auto;width:100%;height:min(80vh,780px);background:url(../img/land.jpg) 50% 58%/cover no-repeat;filter:saturate(.82) contrast(1.05) brightness(.9) sepia(.1);-webkit-mask-image:linear-gradient(180deg,#000 56%,transparent 100%);-webkit-mask-composite:source-over;mask-image:linear-gradient(180deg,#000 56%,transparent 100%);mask-composite:add}
.land .top{min-height:0;margin-top:-84px;padding-top:0;padding-bottom:150px;align-items:start}
.land .top .tx{grid-column:1/7}
.land .top .side{grid-column:8/13;padding-top:54px}
.land .top .cap-s{grid-column:1/13;align-self:auto;margin:56px 0 0}
.land .nums{margin-top:44px}

/* 四 取用之法：一株仙人掌的动画 + 同步的三步说明 */
.cutsec{padding-top:40px}
.cutsec svg.plant{grid-column:1/7;max-width:none;align-self:center}
.cutsec .tx{grid-column:8/13}
.steps3{margin-top:40px;border-top:1px solid var(--line-d)}
.steps3>div{display:grid;grid-template-columns:48px 1fr;padding:22px 0;border-bottom:1px solid var(--line-d)}
.steps3 i{font-style:normal;font-family:var(--serif);font-size:var(--fs-b);color:rgba(239,232,216,.5);padding-top:6px}
.steps3 strong{display:block;font-family:var(--serif);font-weight:300;font-size:var(--fs-2);line-height:1.5;letter-spacing:.14em}
.steps3 span{display:block;margin-top:4px;font-size:var(--fs-s);line-height:1.9;letter-spacing:.06em;color:rgba(239,232,216,.7)}
.plant .np{transform-box:fill-box;transform-origin:50% 60%}
.plant .np path{fill:rgba(150,178,120,.22);stroke:#B4C79C;stroke-width:1.3}
.plant .op path{fill:#CDBFA6;fill-opacity:.16;stroke:#EFE8D8;stroke-width:1.5}
.plant .cutline{opacity:0}
.plant .lb{opacity:0;font-family:var(--serif);font-size:24px;fill:#EFE8D8;stroke:none}
.cutsec.in .np{animation:fall 11s var(--ease) infinite;animation-delay:calc(var(--i) * .09s)}
.cutsec.in .cutline{animation:cutl 11s linear infinite}
.cutsec.in .op path{animation:oldp 11s linear infinite}
.cutsec.in .lb.b{animation:ph2 11s linear infinite}
.cutsec.in .lb.c{animation:ph3 11s linear infinite}
.cutsec.in .steps3>div:nth-child(1){animation:ph1 11s linear infinite}
.cutsec.in .steps3>div:nth-child(2){animation:ph2s 11s linear infinite}
.cutsec.in .steps3>div:nth-child(3){animation:ph3s 11s linear infinite}
@keyframes fall{0%,24%{transform:none;opacity:1}30%{transform:translate(0,4px);opacity:1}50%{transform:translate(var(--dx),170px) rotate(var(--rot));opacity:0}84%{transform:scale(.72);opacity:0}96%,100%{transform:none;opacity:1}}
@keyframes cutl{0%,20%{opacity:0}25%,50%{opacity:.85}56%,100%{opacity:0}}
@keyframes oldp{0%,50%{fill-opacity:.16}58%,82%{fill-opacity:.5}90%,100%{fill-opacity:.16}}
@keyframes ph1{0%,20%{opacity:1}25%,95%{opacity:.36}100%{opacity:1}}
@keyframes ph2s{0%,20%{opacity:.36}25%,50%{opacity:1}56%,100%{opacity:.36}}
@keyframes ph3s{0%,50%{opacity:.36}56%,84%{opacity:1}90%,100%{opacity:.36}}
@keyframes ph2{0%,24%{opacity:0}30%,48%{opacity:.6}54%,100%{opacity:0}}
@keyframes ph3{0%,54%{opacity:0}60%,82%{opacity:1}88%,100%{opacity:0}}
.cutsec .shot{grid-column:1/13;margin-top:120px}
.cutsec .shot img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;filter:saturate(.8) contrast(1.05) brightness(.92) sepia(.1)}
.ratio{margin-top:96px}

/* 首页产品入口、产品页首屏：去掉图注后不留空位 */
.band .h2{margin:0 auto 40px;max-width:20em}

@media (max-width:900px){
  .origin .tx{margin-top:44px}
  .origin .txt{max-width:none}
  .land .ph{height:380px;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .land .top{display:block;margin-top:-56px;padding-bottom:96px}
  .land .top .side{margin-top:22px;padding-top:0}
  .land .top .cap-s{margin:40px 0 0}
  .cutsec{padding-top:0}
  .cutsec svg.plant{margin:48px auto 0;max-width:420px}
  .steps3{margin-top:30px}
  .cutsec .shot{margin-top:72px}
  .cutsec .shot img{aspect-ratio:4/3}
  .ratio{margin-top:72px}
}
@media (prefers-reduced-motion:reduce){
  .plant .lb{opacity:.8}
}


/* ===================== v004 ===================== */
/* 取老弃新：实拍一株，自上而下褪色到分界线 */
.plantph{grid-column:1/7;align-self:center}
.ppw{position:relative}
.pp{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0f1510}
.pp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.pp .gy{filter:grayscale(1) brightness(.4) contrast(1.1)}
.pp .c{filter:saturate(.92) contrast(1.04)}
.pp .cl{position:absolute;left:0;right:0;top:54%;border-top:1.5px dashed rgba(239,232,216,.95);opacity:0}
.rail{position:absolute;left:calc(100% + 20px);top:0;height:100%;width:1.6em;font-family:var(--serif);font-size:var(--fs-2);line-height:1;color:var(--cream)}
.rail span{position:absolute;left:0;transform:translateY(-50%);opacity:0}
.rail .b{top:27%}.rail .t{top:77%}
.cutsec.in .pp .c{animation:wipe 11s var(--ease) infinite}
.cutsec.in .pp .cl{animation:cutl2 11s linear infinite}
.cutsec.in .rail .b{animation:rb 11s linear infinite}
.cutsec.in .rail .t{animation:rt 11s linear infinite}
@keyframes wipe{0%,22%{clip-path:inset(0 0 0 0);filter:saturate(.92) contrast(1.04)}42%,50%{clip-path:inset(54% 0 0 0);filter:saturate(.92) contrast(1.04)}58%,84%{clip-path:inset(54% 0 0 0);filter:saturate(1.12) contrast(1.06) brightness(1.08)}96%,100%{clip-path:inset(0 0 0 0);filter:saturate(.92) contrast(1.04)}}
@keyframes cutl2{0%,18%{opacity:0}24%,84%{opacity:.95}92%,100%{opacity:0}}
@keyframes rb{0%,30%{opacity:0}40%,84%{opacity:.55}92%,100%{opacity:0}}
@keyframes rt{0%,52%{opacity:0}60%,84%{opacity:1}92%,100%{opacity:0}}

/* 产品页首屏：礼盒 / 单罐 两个视图 */
.p-left{display:flex;flex-direction:column;min-width:0}
.p-stage{height:720px;background:none}
.pv{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.pv.on{opacity:1;visibility:visible;transition-delay:0s}
.pv.set img{display:block;width:100%;height:100%;object-fit:cover}
.pv.one{background:url(../img/stone.jpg) 72% 50%/auto 100% no-repeat}
.p-stage .jar{height:75%;top:24%}
.p-stage .sh{top:82%;height:58px}
.ptabs{display:grid;grid-template-columns:repeat(2,120px);column-gap:var(--gap);padding:22px var(--pad) 0;height:80px}
.ptabs button{text-align:left;font-size:var(--fs-s);letter-spacing:.3em;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-3);align-self:start;transition:color .3s,border-color .3s}
.ptabs button.on{color:var(--ink);border-top-color:var(--ink)}
html.js .p-stage .jar{opacity:1}

/* 一盒之内：图上编号与清单对应 */
.box .im{position:relative;overflow:visible}
.box .im .dot,.list .n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-family:var(--latin);font-style:normal;font-size:14px;line-height:1;letter-spacing:0}
.box .im .dot{position:absolute;transform:translate(-50%,-50%);background:var(--paper);color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.28)}
.list .n{border:1px solid var(--ink-2);color:var(--ink);margin-right:16px;flex:none}
.list li span:first-child{display:flex;align-items:center}
.list li span small{margin-left:12px}

@media (max-width:900px){
  .plantph{align-self:stretch;width:100%;margin-top:48px}
  .rail{left:auto;right:10px;width:auto}
  .rail span{left:auto;right:0;background:rgba(18,27,20,.82);padding:8px 8px 9px}
  .p-stage{height:auto;aspect-ratio:1}
  .p-stage .jar{height:75%;top:24%}
  .p-stage .sh{top:82%;width:54vw;margin-left:-27vw;height:8vw}
  .ptabs{grid-template-columns:repeat(2,96px);column-gap:16px;padding:18px var(--pad) 0;height:auto}
}
@media (prefers-reduced-motion:reduce){
  .pp .c{clip-path:inset(54% 0 0 0)}
  .pp .cl{opacity:.95}
  .rail .b{opacity:.55}.rail .t{opacity:1}
}


/* ===================== v005 ===================== */
/* 一 单椒山：标题在左、正文在右，底边对齐 */
.about .eyebrow{grid-column:1/7;grid-row:1;padding-top:0}
.about .h1{grid-column:1/7;grid-row:2;margin-top:32px}
.about .body{grid-column:8/13;grid-row:2;align-self:end;padding:0 0 10px}

/* 取用之法下面的三组数 */
.facts3{grid-column:1/13;display:grid;grid-template-columns:repeat(3,1fr);margin-top:96px;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.facts3>div{padding:44px var(--gap) 48px 0}
.facts3>div+div{padding-left:var(--gap);border-left:1px solid var(--line-d)}
.facts3 .k{display:block;font-size:var(--fs-c);letter-spacing:.34em;color:rgba(239,232,216,.55)}
.facts3 .v{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;margin-top:22px;font-family:var(--serif);font-weight:300;font-size:var(--fs-1);line-height:1.2;letter-spacing:.08em;white-space:nowrap}
.facts3 .v i{font-style:normal;font-family:var(--latin);letter-spacing:.02em}
.facts3 .v small{font-size:15px;letter-spacing:.1em}
.facts3 .v em{font-style:normal;font-family:var(--latin);font-size:30px;opacity:.6;margin:0 6px}
.facts3 p{margin-top:14px;font-size:var(--fs-s);line-height:1.9;letter-spacing:.06em;color:rgba(239,232,216,.7)}
.blk{display:flex;align-items:center;gap:5px;margin-top:26px;height:20px}
.blk i{display:block;width:16px;height:16px;border:1.3px solid var(--cream);background:rgba(239,232,216,.16)}
.blk i.x{border-style:dashed;border-color:rgba(239,232,216,.5);background:none}
.blk i.f{background:var(--cream)}
.blk s{text-decoration:none;font-family:var(--latin);font-size:18px;line-height:1;opacity:.6;margin:0 8px}
.blk span{font-size:var(--fs-c);letter-spacing:.14em;color:rgba(239,232,216,.6);margin-left:10px}
.facts3+.foot-n{grid-column:1/13;margin-top:22px;font-size:var(--fs-c);letter-spacing:.2em;color:rgba(239,232,216,.4)}

/* 首页产品入口：礼盒 / 单罐 轮转 */
.stage{background:none}
.sl{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s .9s}
.sl.on{opacity:1;visibility:visible;transition-delay:0s}
.sl.one{background:url(../img/stone.jpg) 50% 50%/cover no-repeat}
.sl.set{background:url(../img/stone.jpg) 50% 100%/135% auto no-repeat}
.sl.set .setimg{position:absolute;height:calc(600 * var(--u));width:auto;max-width:none;left:calc(690 * var(--u));top:calc(247 * var(--u))}
.sl.set .sh.a{left:calc(700 * var(--u));top:calc(742 * var(--u));width:calc(580 * var(--u));height:calc(64 * var(--u))}
.sl.set .sh.b{left:calc(690 * var(--u));top:calc(596 * var(--u));width:calc(600 * var(--u));height:calc(70 * var(--u));opacity:.55}
.sdots{display:flex;gap:10px;margin-top:44px}
.sdots button{width:40px;height:14px;position:relative}
.sdots button::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:rgba(43,36,22,.25);transition:background .4s}
.sdots button.on::before{background:#2b2416}

@media (max-width:900px){
  .about .h1{margin-top:22px}
  .about .body{padding:0;margin-top:24px}
  .facts3{grid-template-columns:1fr;margin-top:72px}
  .facts3>div{padding:34px 0 36px}
  .facts3>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line-d)}
  .facts3 .v{margin-top:16px}
  .stage .pic{background:none}
  .sl.one{background:url(../img/stone.jpg) 80% 50%/auto 100% no-repeat}
  .sl.set{background:url(../img/stone.jpg) 80% 100%/auto 135% no-repeat}
  .sl.set .setimg{height:330px;left:50%;top:176px;transform:translateX(-50%)}
  .sl.set .sh.a{left:50%;margin-left:-160px;top:452px;width:320px;height:36px}
  .sl.set .sh.b{left:50%;margin-left:-165px;top:372px;width:330px;height:38px}
  .sdots{margin-top:32px}
}

/* ===================== v006 ===================== */
/* 四 取用之法：三段实拍（照片 → 视频 → 照片），与三步说明同步。
   默认（无脚本、或系统开启「减少动态效果」）：三段并排的静态版。
   html.sel-live：三段叠在一处轮换；电脑端画面贴左出血，手机端通栏。
   html.sel-pin ：电脑端这一屏停住，随滚动自下而上揭开下一段，可回滚。 */
.sel{background-color:var(--green);background-image:var(--grain-d);color:var(--cream);padding-top:40px;padding-bottom:160px}
.sel-sticky{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:0 var(--pad);align-items:start}
.sel-hd{grid-column:1/8;grid-row:1}
.sfilm,.ssteps{display:contents}
.sbar,.pg{display:none}
.sfl{position:relative;overflow:hidden;background:#0f1510;aspect-ratio:3/4;grid-row:2;margin-top:64px}
.sfl>*{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;filter:saturate(.86) contrast(1.04)}
.sfl:nth-child(2)>*{object-position:50% 42%}
.sfl:nth-child(1),.sstep:nth-child(1){grid-column:1/5}
.sfl:nth-child(2),.sstep:nth-child(2){grid-column:5/9}
.sfl:nth-child(3),.sstep:nth-child(3){grid-column:9/13}
.sstep{grid-row:3;display:grid;grid-template-columns:40px minmax(0,1fr);align-content:start;position:relative;width:100%;padding:22px 0 0;text-align:left;cursor:default}
.sstep i{font-style:normal;font-family:var(--serif);font-size:var(--fs-b);letter-spacing:0;color:rgba(239,232,216,.5);padding-top:6px}
.sstep .sb,.sstep .sd,.sstep .sd>span{display:block}
.sstep strong{display:block;font-family:var(--serif);font-weight:300;font-size:var(--fs-2);line-height:1.5;letter-spacing:.14em}
.sstep .sd>span{font-size:var(--fs-s);line-height:1.9;letter-spacing:.06em;color:rgba(239,232,216,.7)}
.sstep .sd{padding-top:4px}
.sel-after .shot{grid-column:1/13;margin-top:120px}
.sel-after .shot img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;filter:saturate(.8) contrast(1.05) brightness(.92) sepia(.1)}

/* —— 轮换版 —— */
html.sel-live .sfilm{display:block;position:relative;overflow:hidden;background:#0f1510;transition:opacity 1.4s var(--ease)}
html.sel-live .sfilm:not(.in){opacity:0}
html.sel-live .sfl{position:absolute;inset:0;aspect-ratio:auto;margin:0;background:none;clip-path:inset(100% 0 0 0);transition:clip-path 1.15s cubic-bezier(.76,0,.24,1)}
html.sel-live .sfl.shown{clip-path:inset(0 0 0 0)}
html.sel-live .sfl>*{transform:scale(1.1);transition:transform 0s 1.2s}
html.sel-live .sfl.on>*{transform:none;transition:transform 6s cubic-bezier(.16,.7,.3,1)}
html.sel-live .ssteps{display:block;border-top:1px solid var(--line-d)}
html.sel-live .sstep{grid-template-columns:48px minmax(0,1fr);padding:22px 0;border-bottom:1px solid var(--line-d);cursor:pointer;opacity:.38;transition:opacity .5s var(--ease)}
html.sel-live .sstep:hover{opacity:.7}
html.sel-live .sstep.on{opacity:1}
html.sel-live .pg{display:block;position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--cream);transform:scaleX(0);transform-origin:left}

@media (min-width:701px){
  html.sel-live .sel-sticky{display:grid;grid-template-rows:1fr auto auto 1fr;align-items:stretch}
  html.sel-live .sel-hd{grid-column:8/13;grid-row:2}
  html.sel-live .ssteps{grid-column:8/13;grid-row:3;margin-top:40px}
  html.sel-live .sfilm{grid-column:1/7;grid-row:1/-1;margin-left:calc(var(--pad) * -1);height:calc(100vh - var(--nav) - 40px);min-height:520px;max-height:860px;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent 100%);mask-image:linear-gradient(90deg,#000 80%,transparent 100%)}
  /* 只展开当前一步的说明 */
  html.sel-live .sstep .sd{display:grid;grid-template-rows:0fr;padding-top:0;opacity:0;transition:grid-template-rows .7s var(--ease),opacity .5s var(--ease)}
  html.sel-live .sstep.on .sd{grid-template-rows:1fr;opacity:1}
  html.sel-live .sstep .sd>span{overflow:hidden;min-height:0}
  /* 停住（脚本只在屏宽 ≥ 901 且窗口够高时加 sel-pin） */
  html.sel-pin .sel{padding-top:0}
  html.sel-pin .sel-track{height:310vh}
  html.sel-pin .sel-sticky{position:sticky;top:0;height:100vh;padding-top:var(--nav)}
  html.sel-pin .sfilm{height:auto;min-height:0;max-height:none}
}
/* 中等屏宽（平板竖屏、窄窗口）：仍是左右分栏，文字栏放宽一栏，画面不超过一屏 */
@media (min-width:701px) and (max-width:900px){
  html.sel-live .sel-hd,html.sel-live .ssteps{grid-column:7/13;margin-left:var(--gap)}
  html.sel-live .ssteps{margin-top:28px}
  html.sel-live .sfilm{height:min(calc(100vh - var(--nav) - 40px),66vw);min-height:0}
  html.sel-live .sstep{grid-template-columns:36px minmax(0,1fr);padding:18px 0}
}
@media (max-width:900px){
  .sel{padding-top:0;padding-bottom:96px}
  .sel-sticky{display:flex;flex-direction:column;align-items:stretch}
  .sfl{margin-top:48px;aspect-ratio:4/5}
  .sfl:nth-child(1){order:1}.sstep:nth-child(1){order:2}
  .sfl:nth-child(2){order:3}.sstep:nth-child(2){order:4}
  .sfl:nth-child(3){order:5}.sstep:nth-child(3){order:6}
  .sstep{padding-top:18px}
  .sel-after .shot{margin-top:72px}
  .sel-after .shot img{aspect-ratio:4/3}
}
@media (max-width:700px){
  html.sel-live .sel-sticky{display:block;padding:0}
  html.sel-live .sel-hd{padding:0 var(--pad)}
  html.sel-live .sfilm{margin-top:40px;aspect-ratio:4/5}
  html.sel-live .sbar{display:flex;gap:6px;padding:0 var(--pad);margin-top:10px}
  .sbar button{flex:1;height:32px;position:relative}
  .sbar button::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:rgba(239,232,216,.2)}
  html.sel-live .sbar .pg{top:15px;bottom:auto;height:2px}
  html.sel-live .ssteps{display:grid;border:0;padding:0 var(--pad);margin-top:6px}
  html.sel-live .sstep{grid-area:1/1;grid-template-columns:36px minmax(0,1fr);padding:8px 0 0;border:0;cursor:default;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .5s var(--ease),transform .7s var(--ease),visibility 0s .5s}
  html.sel-live .sstep.on{opacity:1;visibility:visible;transform:none;transition-delay:.15s,.15s,0s}
  html.sel-live .sstep>.pg{display:none}
}

/* ===================== v007 ===================== */
/* 首页产品入口：规格一行随礼盒 / 单罐切换 */
.stage .meta{display:grid}
.stage .meta span{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s .9s}
.stage .meta span.on{opacity:1;visibility:visible;transition-delay:0s}

/* ===================== v008 ===================== */
/* 结构改为四页：首页（门厅）、品牌、基地、产品。 */

/* 导航：当前所在栏目常显下划线 */
.nav a[aria-current]::after{transform:scaleX(1)}

/* 页脚：五栏 */
@media (min-width:901px){
  .foot .top>div:nth-child(1){grid-column:1/5}
  .foot .top>div:nth-child(2){grid-column:5/7}
  .foot .top>div:nth-child(3){grid-column:7/9}
  .foot .top>div:nth-child(4){grid-column:9/11}
  .foot .top>div:nth-child(5){grid-column:11/13}
}

/* 首页入口 · 品牌：照片贴左出血，右缘渐隐进纸面 */
.door-b{align-items:center;padding-bottom:160px}
.door-b .ph{grid-column:1/7;grid-row:1;display:block;margin-left:calc(var(--pad) * -1);height:min(82vh,760px);min-height:520px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,#000 78%,transparent 100%)}
.door-b .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.86) contrast(1.03);transform:scale(1.06);transition:transform 2.4s var(--ease)}
.door-b .ph.in img,html:not(.js) .door-b .ph img{transform:none}
.door-b .tx{grid-column:8/13;grid-row:1}
.door-b .link,.door-l .link{margin-top:44px}
/* 首页入口 · 基地：沿用通栏照片向下融进深绿 */
.door-l .ph{display:block}
.door-l .top{padding-bottom:160px}

/* 品牌页 */
.bhead{padding-top:calc(var(--nav) + 120px);padding-bottom:110px}
.bhead .crumb{grid-column:1/13}
.bhead .h1{grid-column:1/12;margin-top:40px}
.letter{align-items:start;padding-bottom:140px}
.letter .eyebrow{grid-column:1/4;grid-row:1;padding-top:8px}
.letter .col{grid-column:5/11;grid-row:1}
.letter .txt{max-width:none}
.letter blockquote{margin:1.8em 0;padding-left:28px;border-left:1px solid var(--ink);font-family:var(--serif);font-weight:300;font-size:var(--fs-2);line-height:1.9;letter-spacing:.14em;color:var(--ink)}
.letter.b2{padding-top:120px;padding-bottom:160px}
.wide img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;filter:saturate(.8) contrast(1.05) brightness(.94) sepia(.1)}
.wide .cap-s{padding:0 var(--pad)}
.creed .lead{max-width:none;margin:0 auto;padding:0 var(--pad);text-align:center}
.creed .tri{margin-top:96px;row-gap:0}
.creed .tri>div{grid-column:span 4;padding-top:32px;border-top:1px solid rgba(34,38,31,.28)}
.creed .tri strong{display:block;font-family:var(--serif);font-weight:300;font-size:var(--fs-2);line-height:1.7;letter-spacing:.12em}
.creed .more{text-align:center;margin-top:88px}

/* 基地页：顶部照片上压一层暗角，托住透明导航 */
.lhero .ph::before{content:"";position:absolute;inset:0 0 auto 0;height:260px;background:linear-gradient(180deg,rgba(12,18,11,.82),rgba(12,18,11,.4) 50%,rgba(12,18,11,0))}
.lhero .ph{height:min(84vh,820px)}

@media (max-width:900px){
  .foot .top>div:nth-child(5){grid-column:auto}
  .door-b{padding-bottom:96px}
  .door-b .ph{margin:0 calc(var(--pad) * -1);height:auto;min-height:0;aspect-ratio:4/5;-webkit-mask-image:none;mask-image:none}
  .door-b .tx{margin-top:44px}
  .door-b .link,.door-l .link{margin-top:32px}
  .door-l .top{padding-bottom:96px}
  .bhead{padding-top:calc(var(--nav) + 64px);padding-bottom:56px}
  .bhead .h1{margin-top:24px}
  .letter{padding-bottom:72px}
  .letter .col{margin-top:28px}
  .letter.b2{padding-top:72px;padding-bottom:96px}
  .letter.b2 .col{margin-top:0}
  .letter blockquote{padding-left:20px}
  .wide img{aspect-ratio:4/3}
  .creed .lead{margin:0;text-align:left}
  .creed .tri{margin-top:56px;padding:0 var(--pad)}
  .creed .tri>div{padding:24px 0}
  .creed .tri>div:last-child{border-bottom:1px solid rgba(34,38,31,.28)}
  .creed .more{text-align:left;margin-top:48px;padding:0 var(--pad)}
  .lhero .ph{height:420px}
  .lhero .ph::before{height:140px}
}
/* 中等屏宽：首页品牌入口仍左图右文，照片不超过一屏 */
@media (min-width:701px) and (max-width:900px){
  .door-b{display:grid;align-items:center}
  .door-b .ph{grid-column:1/7;margin:0 0 0 calc(var(--pad) * -1);aspect-ratio:auto;height:min(78vh,70vw);-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,#000 78%,transparent 100%)}
  .door-b .tx{grid-column:7/13;margin:0 0 0 var(--gap)}
}

/* ===================== v009 ===================== */
/* 产品页「一罐之微」：去掉白底方块，罐子直接落在纸面上，加接触阴影 */
.dim{background:none}
.dim img{position:relative}
.dim .sh{left:16%;width:68%;top:77.5%;height:10%}

/* ---------- 减少动态效果 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js [data-r],html.js .hero h1,html.js .hero .cue,html.js .anno .it,html.js .anno .jar,html.js .anno .sh,html.js .p-stage .jar{opacity:1!important;transform:none!important}
  html.js .hero .sub{opacity:.82!important}
  html.js .hero-img{transform:none!important}
  html.js .anno .ln{transform:none!important}
  html.js svg.plant .cutline{opacity:.8!important}
  html.js svg.plant .new{opacity:.45!important}
  html.js .ten .p,html.js .ten .res{opacity:1!important}
}

/* 入日常：三张画面（2026-11-13） */
.eats{grid-column:7/13;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.eats img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.eats img:first-child{grid-column:1/3}
@media (max-width:900px){.eats{grid-column:1/-1;margin-top:40px;gap:8px}}