/* ============================================================
   佰草集 × DIGIREPUB — 16:9 Slide Deck  ·  v3
   基准：佰草集官方站（jahwa.com.cn/herborist 2026-07 实测）
   白底为主 · 鲜活翡翠绿 · 珍珠银 · 细线框字标 · 双语小标 · 红色微点缀
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --white:#FFFFFF; --mist:#F6F8F5; --pearl:#ECEBE4;
  --ink:#1A1A1A; --ink-soft:rgba(26,26,26,.64); --ink-faint:rgba(26,26,26,.4);
  --emerald:#1E5C40; --emerald-2:#2E7D57; --leaf:#7FB693; --leaf-soft:#DCEAE0;
  --deep:#0F3B28; --deep-2:#123023;
  --cream:#FBFAF6; --cream-soft:rgba(251,250,246,.82); --cream-faint:rgba(251,250,246,.55);
  --red:#C8102E;
  --line:#E7E7E1; --line-green:rgba(30,92,64,.28); --line-light:rgba(251,250,246,.28);
  --serif:'Noto Serif SC',serif; --sans:'Noto Sans SC',-apple-system,sans-serif;
  --lat:'Cormorant Garamond',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#0e1410;font-family:var(--sans);color:var(--ink);overflow:hidden;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,span,div{word-break:keep-all}
.nowrap,.num{white-space:nowrap}
img{display:block;max-width:100%}

/* letterboxed 16:9 stage */
#viewport{position:fixed;inset:0;display:grid;place-items:center;background:
  radial-gradient(120% 120% at 50% 0%, #17211a, #0b100c)}
#stage{position:relative;width:min(100vw,177.78vh);height:min(56.25vw,100vh);
  background:var(--white);overflow:hidden;container-type:size;box-shadow:0 40px 120px -40px rgba(0,0,0,.65)}

/* slides — default LIGHT (white, like the official site) */
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease;
  overflow:hidden;background:var(--white);color:var(--ink)}
.slide.active{opacity:1;visibility:visible;z-index:2}
.slide.dark{background:var(--deep);color:var(--cream)}
.slide.deep{background:var(--deep-2);color:var(--cream)}

/* bg image + ken burns */
.slide .kb{position:absolute;inset:0;z-index:0;overflow:hidden}
.slide .kb img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.slide.active .kb img{animation:kb 16s ease-out both}
@keyframes kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-1.5%,-1.5%)}}
.slide.active .kb.pan-r img{animation:kbr 18s ease-out both}
@keyframes kbr{from{transform:scale(1.12) translate(-2%,0)}to{transform:scale(1.03) translate(1%,-1%)}}
.slide .kb video{width:100%;height:100%;object-fit:cover}
.slide .kb.novid img{animation:none!important;transform:none}
.slide .scrim{position:absolute;inset:0;z-index:1}
.slide .scrim.b{background:linear-gradient(180deg,rgba(10,26,18,.1),rgba(10,26,18,.68))}
.slide .scrim.l{background:linear-gradient(90deg,rgba(10,26,18,.72) 0%,rgba(10,26,18,.3) 46%,transparent 72%)}
.slide .scrim.r{background:linear-gradient(270deg,rgba(10,26,18,.74) 0%,rgba(10,26,18,.28) 46%,transparent 72%)}
.slide .scrim.vig{background:radial-gradient(125% 95% at 50% 40%,transparent 48%,rgba(10,26,18,.46))}
.slide .scrim.dk{background:linear-gradient(180deg,rgba(10,26,18,.78),rgba(10,26,18,.88))}
.slide .scrim.wh{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.86))}

/* content layer */
.c{position:absolute;z-index:3;inset:0;padding:8cqh 9cqw;display:flex;flex-direction:column;justify-content:center}
.c.center{align-items:center;text-align:center}
.c.left{align-items:flex-start;text-align:left}

/* eyebrow — bilingual, site-style: EN SPACED · 中文 */
.eyebrow{font-family:var(--sans);font-weight:600;letter-spacing:.4em;text-transform:uppercase;
  font-size:1.5cqh;color:var(--emerald);margin-bottom:2.8cqh;display:inline-flex;align-items:center;gap:1.1em}
.slide.dark .eyebrow,.slide.deep .eyebrow{color:var(--cream-soft)}
.eyebrow::before{content:'';width:3.2cqh;height:2px;background:var(--red)}
.eyebrow.nolead::before{display:none}

/* type scale */
.title{font-family:var(--serif);font-weight:600;line-height:1.22;letter-spacing:.04em;font-size:8.6cqh;color:var(--ink)}
.slide.dark .title,.slide.deep .title{color:var(--cream);font-weight:600}
.title.big{font-size:11.5cqh;line-height:1.12}
.title.sm{font-size:6cqh}
.sub{font-family:var(--sans);font-weight:400;font-size:2.35cqh;line-height:1.75;color:var(--ink-soft);margin-top:3cqh;max-width:46em}
.slide.dark .sub,.slide.deep .sub{color:var(--cream-soft)}
/* KV 数据点缀行（官网 KV 样式：小字 + 竖线分隔） */
.statline{display:flex;gap:0;margin-top:3.6cqh;font-family:var(--sans)}
.statline span{font-size:1.9cqh;letter-spacing:.14em;padding:0 2.2cqw;border-left:1px solid var(--line-light);color:var(--cream-soft)}
.statline span:first-child{border-left:none;padding-left:0}
.slide:not(.dark):not(.deep) .statline span{border-color:var(--line);color:var(--ink-soft)}
.brandline{font-family:var(--sans);font-weight:500;letter-spacing:.3em;font-size:1.45cqh;color:var(--ink-faint);text-transform:uppercase;margin-top:4cqh}
.slide.dark .brandline,.slide.deep .brandline{color:var(--cream-faint)}
.gold{color:var(--emerald)}.slide.dark .gold,.slide.deep .gold{color:var(--leaf)}

/* 佰草集式细线框字标 */
.markbox{display:inline-block;border:1.5px solid currentColor;padding:1.2cqh 2.4cqh;
  font-family:var(--serif);font-weight:600;font-size:2.6cqh;letter-spacing:.5em;text-indent:.5em;margin-bottom:3.4cqh}

/* section divider */
.sec-num{font-family:var(--serif);font-weight:900;font-size:24cqh;line-height:.85;color:var(--cream);opacity:.96}
.sec-name{font-family:var(--serif);font-weight:600;font-size:7.6cqh;margin-top:1.2cqh;letter-spacing:.08em}
.sec-en{font-family:var(--lat);font-style:italic;font-size:3cqh;color:var(--cream-faint);margin-top:1cqh;letter-spacing:.08em}

/* big number */
.bignum{font-family:var(--lat);font-weight:500;font-size:24cqh;line-height:.9;color:var(--emerald)}
.slide.dark .bignum,.slide.deep .bignum{color:var(--cream)}
.bignum .u{font-size:.34em;color:var(--red)}
.slide.dark .bignum .u{color:var(--leaf)}
.bignum-label{font-family:var(--serif);font-weight:600;font-size:4cqh;margin-top:2.2cqh}
.bignum-note{font-family:var(--sans);font-weight:400;font-size:1.9cqh;color:var(--ink-soft);margin-top:1.6cqh;letter-spacing:.06em}
.slide.dark .bignum-note,.slide.deep .bignum-note{color:var(--cream-soft)}

/* caption strip on full-bleed image */
.cap{position:absolute;z-index:3;left:9cqw;right:9cqw;bottom:9cqh}
.cap .t{font-family:var(--serif);font-weight:600;font-size:6.6cqh;color:var(--cream);line-height:1.22;text-shadow:0 2px 26px rgba(0,0,0,.45)}
.cap .s{font-family:var(--sans);font-weight:400;font-size:2.2cqh;color:var(--cream-soft);margin-top:1.8cqh;letter-spacing:.12em}

/* case slide — LIGHT editorial (site product-page style) */
.case-wrap{position:absolute;z-index:3;inset:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6cqw;padding:9cqh 8cqw}
.case-shot{justify-self:center;height:76cqh;aspect-ratio:9/19.5;border-radius:3cqh;overflow:hidden;
  background:var(--mist);box-shadow:0 3cqh 7cqh -2.4cqh rgba(15,59,40,.35);border:1px solid var(--line)}
.case-shot.wide{aspect-ratio:16/10;height:auto;width:42cqw;border-radius:1.6cqh}
.case-shot img{width:100%;height:100%;object-fit:cover}
.case-txt .badge{display:inline-block;font-family:var(--sans);font-weight:600;font-size:1.45cqh;letter-spacing:.16em;
  text-transform:uppercase;color:var(--emerald);border:1px solid var(--line-green);border-radius:2px;padding:.8cqh 1.6cqh;margin-bottom:3cqh}
.case-txt .co{font-family:var(--sans);font-weight:500;letter-spacing:.24em;font-size:1.6cqh;color:var(--ink-faint);text-transform:uppercase;margin-bottom:1.6cqh}
.case-txt .nm{font-family:var(--serif);font-weight:600;font-size:6.2cqh;line-height:1.22;color:var(--ink)}
.case-txt .ln{font-family:var(--sans);font-weight:400;font-size:2.4cqh;line-height:1.7;color:var(--ink-soft);margin-top:2.6cqh;max-width:21em}
.case-txt .tags{margin-top:3.2cqh;display:flex;flex-wrap:wrap;gap:1cqh}
.case-txt .tags span{font-family:var(--sans);font-weight:400;font-size:1.5cqh;color:var(--emerald);background:var(--leaf-soft);border-radius:2px;padding:.7cqh 1.3cqh}

/* concept slide — image + light panel */
.concept-wrap{position:absolute;z-index:3;inset:0;display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch}
.concept-img{position:relative;overflow:hidden;background:var(--mist)}
.concept-img img{width:100%;height:100%;object-fit:cover}
.concept-side{display:flex;flex-direction:column;justify-content:center;padding:9cqh 6cqw;background:var(--white)}
.concept-side .k{font-family:var(--lat);font-style:italic;font-size:4.6cqh;color:var(--red)}
.concept-side .nm{font-family:var(--serif);font-weight:600;font-size:6cqh;line-height:1.22;margin-top:1.2cqh;color:var(--ink)}
.concept-side .tl{font-family:var(--sans);font-weight:400;font-size:2.35cqh;color:var(--ink-soft);margin-top:2.6cqh;line-height:1.7}
.concept-side .leap{margin-top:3.6cqh;padding:2.4cqh 2cqw;background:var(--mist);border-left:3px solid var(--emerald)}
.concept-side .leap .l{font-family:var(--sans);font-weight:600;font-size:1.4cqh;letter-spacing:.2em;text-transform:uppercase;color:var(--emerald)}
.concept-side .leap .v{font-family:var(--serif);font-weight:500;font-size:2.5cqh;line-height:1.6;margin-top:1cqh;color:var(--ink)}

/* gallery slide — light grid */
.gal{position:absolute;z-index:3;inset:0;padding:20cqh 6cqw 6cqh;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:1.1cqw}
.gal .g{overflow:hidden;border-radius:1cqh;border:1px solid var(--line);background:var(--mist)}
.gal .g img{width:100%;height:100%;object-fit:cover}
.gal-head{position:absolute;z-index:4;top:8cqh;left:6cqw;right:6cqw}

/* tiers — light cards */
.tiers{position:absolute;z-index:3;inset:0;padding:23cqh 7cqw 9cqh;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;align-items:stretch}
.tier{background:var(--white);border:1px solid var(--line);border-radius:.8cqh;padding:4cqh 2.4cqw;display:flex;flex-direction:column}
.tier.hot{border-color:var(--emerald);box-shadow:0 2cqh 5cqh -2cqh rgba(30,92,64,.3)}
.tier .n{font-family:var(--lat);font-style:italic;font-size:2.6cqh;color:var(--red)}
.tier .h{font-family:var(--serif);font-weight:600;font-size:3.3cqh;margin:1.4cqh 0;line-height:1.3;color:var(--ink)}
.tier .d{font-family:var(--sans);font-weight:400;font-size:1.85cqh;line-height:1.65;color:var(--ink-soft)}

/* reasons — light row */
.reasons{position:absolute;z-index:3;inset:0;padding:24cqh 8cqw 8cqh;display:grid;grid-template-columns:repeat(5,1fr);gap:2cqw;align-content:center}
.reason{text-align:center;padding:3cqh 0;border-top:2px solid var(--line)}
.reason .ri{font-family:var(--lat);font-style:italic;font-size:4cqh;color:var(--red)}
.reason .rt{font-family:var(--serif);font-weight:600;font-size:2.7cqh;margin-top:1.4cqh;line-height:1.3;color:var(--ink)}
.reason .rd{font-family:var(--sans);font-weight:400;font-size:1.6cqh;color:var(--ink-soft);margin-top:1cqh;line-height:1.55}

/* H5 capability spectrum — dark photo bg */
.spectrum{position:absolute;z-index:3;inset:0;padding:22cqh 6cqw 7cqh;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:2cqh 2cqw}
.spec{border:1px solid var(--line-light);border-radius:1cqh;padding:2.8cqh 2.2cqw;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(160deg,rgba(10,26,18,.5),rgba(10,26,18,.28));backdrop-filter:blur(2px)}
.spec .si{font-family:var(--lat);font-style:italic;font-size:3cqh;color:var(--leaf)}
.spec .sn{font-family:var(--serif);font-weight:600;font-size:2.7cqh;color:var(--cream);margin-top:auto}
.spec .sd{font-family:var(--sans);font-weight:300;font-size:1.55cqh;line-height:1.5;color:var(--cream-soft);margin-top:.9cqh}

/* works wall — light */
.wall{position:absolute;z-index:3;inset:0;padding:21cqh 5cqw 5cqh;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:1cqw}
.wall .w{overflow:hidden;border-radius:1cqh;border:1px solid var(--line);position:relative;background:var(--mist)}
.wall .w img{width:100%;height:100%;object-fit:cover}
.wall .w .wl{position:absolute;left:0;right:0;bottom:0;padding:1.5cqh 1cqw .9cqh;font-family:var(--sans);font-weight:500;font-size:1.25cqh;color:#fff;
  background:linear-gradient(transparent,rgba(15,45,30,.88));letter-spacing:.02em}

/* ---- chrome ---- */
#chrome{position:fixed;inset:0;pointer-events:none;z-index:50}
#topbar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:2.2vh 3vw;font-family:var(--sans);font-size:1.5vh;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.66);pointer-events:none;z-index:52;mix-blend-mode:difference}
#topbar .b{font-weight:600}
#progress{position:fixed;top:0;left:0;height:3px;background:var(--red);z-index:60;transition:width .5s}
#dots{position:fixed;bottom:2.4vh;left:50%;transform:translateX(-50%);display:flex;gap:1vh;z-index:55;pointer-events:auto}
#dots button{width:1vh;height:1vh;border-radius:50%;border:none;background:rgba(127,182,147,.45);cursor:pointer;transition:.3s;padding:0}
#dots button.on{background:var(--red);transform:scale(1.4)}
#dots button:hover{background:var(--emerald-2)}
.navbtn{position:fixed;top:0;bottom:0;width:12vw;z-index:53;cursor:pointer;pointer-events:auto;background:transparent;border:none}
.navbtn.prev{left:0}.navbtn.next{right:0}
#counter{position:fixed;bottom:2.4vh;right:3vw;font-family:var(--lat);font-size:2.3vh;color:rgba(255,255,255,.75);z-index:55;letter-spacing:.1em;mix-blend-mode:difference}
#hint{position:fixed;bottom:2.5vh;left:3vw;font-family:var(--sans);font-size:1.35vh;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);z-index:55;mix-blend-mode:difference}

/* presenter notes */
#notes{position:fixed;left:50%;bottom:8vh;transform:translateX(-50%) translateY(12px);width:min(80vw,900px);max-height:44vh;overflow:auto;
  background:rgba(255,255,255,.97);border:1px solid var(--line);border-left:4px solid var(--emerald);border-radius:8px;padding:22px 26px;z-index:70;
  opacity:0;pointer-events:none;transition:.3s;box-shadow:0 20px 60px -20px rgba(15,59,40,.4);color:var(--ink)}
#notes.show{opacity:1;pointer-events:auto;transform:translateX(-50%)}
#notes .nh{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:10px;font-weight:600}
#notes .no{font-family:var(--serif);font-size:16px;line-height:1.75;color:var(--ink)}
#notes .nb{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
#notes .nb li{font-family:var(--sans);font-weight:400;font-size:13.5px;line-height:1.65;color:var(--ink-soft);list-style:none;padding:4px 0 4px 16px;position:relative}
#notes .nb li::before{content:'·';position:absolute;left:2px;color:var(--emerald)}

@media(max-width:640px){
  #stage{width:100vw;height:56.25vw}
  #dots{display:none}
}