@charset "utf-8";
/* ==========================================================================
   上海品茶工作室 · UI v2
   主题：墨绿 × 琥珀（东方雅致）
   1 令牌 / 2 基础 / 3 顶栏 / 4 首屏 / 5 区块 / 6 服务 / 7 文章
   8 FAQ / 9 CTA / 10 页脚 / 11 文章页 / 12 响应式收尾
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --c-ink:#14201A;
  --c-pine:#1B4332;--c-pine-deep:#0F2A1C;--c-pine-soft:#2D6A4F;
  --c-amber:#C8963E;--c-amber-soft:#E0B15E;
  --c-text:#3A4740;--c-dim:#6E7A72;
  --c-line:#E6E1D6;--c-line-soft:#EFEAE0;
  --c-paper:#FBF9F4;--c-tint:#F3EFE5;--c-white:#FFFFFF;
  --r-1:12px;--r-2:16px;--r-3:24px;
  --e-1:0 1px 2px rgba(20,32,26,.04),0 10px 24px -16px rgba(20,32,26,.18);
  --e-2:0 2px 6px rgba(20,32,26,.05),0 26px 50px -24px rgba(27,67,50,.34);
  --shell:1180px;
  --fs:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}

/* ---------- 2. 基础 ---------- */
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--c-paper);color:var(--c-text);
  font:400 16px/1.8 var(--fs);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{color:var(--c-ink);font-weight:700;line-height:1.3;letter-spacing:-.015em}
ul{margin:0;padding:0;list-style:none}
::selection{background:rgba(200,150,62,.26)}
:focus-visible{outline:2px solid var(--c-amber);outline-offset:3px;border-radius:4px}
.nowrap{white-space:nowrap}
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jump{position:absolute;left:-9999px}
.jump:focus{left:18px;top:12px;z-index:60;background:var(--c-white);color:var(--c-pine);
  padding:9px 16px;border-radius:var(--r-1);box-shadow:var(--e-1)}

/* ---------- 3. 顶栏 ---------- */
.hd{position:sticky;top:0;z-index:40;background:rgba(251,249,244,.88);
  backdrop-filter:saturate(170%) blur(16px);-webkit-backdrop-filter:saturate(170%) blur(16px);
  border-bottom:1px solid var(--c-line)}
.hd-row{display:flex;align-items:center;gap:14px;height:66px;max-width:var(--shell);margin:0 auto;padding:0 20px}
.brandmark{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;
  color:var(--c-ink);letter-spacing:-.01em;white-space:nowrap}
.brandmark svg{width:30px;height:30px;flex:none}
.hd-menu{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hd-menu::-webkit-scrollbar{display:none}
.hd-menu a{padding:8px 13px;border-radius:var(--r-1);font-size:15px;color:var(--c-dim);
  white-space:nowrap;transition:color .18s,background .18s}
.hd-menu a:hover{color:var(--c-pine);background:rgba(27,67,50,.06)}
.hd-book{flex:none;display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;
  background:var(--c-pine);color:#fff;font-size:14px;font-weight:600;letter-spacing:.01em;
  transition:background .18s,transform .18s}
.hd-book:hover{background:var(--c-pine-deep);transform:translateY(-1px)}

/* 品牌图形统一到墨绿 × 琥珀（覆盖 HTML 内联 SVG 的呈现属性） */
.brandmark svg rect,.ft-brand svg rect{fill:var(--c-pine)}
.brandmark svg path:nth-of-type(1),.ft-brand svg path:nth-of-type(1){stroke:#fff}
.brandmark svg path:nth-of-type(2),.ft-brand svg path:nth-of-type(2){stroke:var(--c-amber)}

/* ---------- 4. 首屏 ---------- */
.masthead{position:relative;padding:64px 0 60px;overflow:hidden;background:
  radial-gradient(760px 440px at 2% -14%,rgba(27,67,50,.10),transparent 62%),
  radial-gradient(620px 380px at 104% 4%,rgba(200,150,62,.13),transparent 60%),
  linear-gradient(180deg,#FDFCF8,var(--c-paper))}
.masthead-row{display:grid;gap:38px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;font-size:13px;
  font-weight:600;color:var(--c-pine);background:rgba(27,67,50,.07);
  border:1px solid rgba(200,150,62,.34);margin-bottom:22px}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--c-amber);flex:none;
  box-shadow:0 0 0 3px rgba(200,150,62,.16)}
.masthead h1{font-size:clamp(30px,6.6vw,54px);line-height:1.16;letter-spacing:-.028em}
.masthead h1 span:first-child{display:block}
.masthead h1 .nowrap{display:block;margin-top:12px;font-size:clamp(14px,3.3vw,19px);
  font-weight:500;letter-spacing:.005em;line-height:1.6;color:var(--c-dim);white-space:nowrap}
.masthead .sub{margin-top:22px;max-width:600px;font-size:16.5px;color:var(--c-text)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.pillbtn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px;
  border-radius:var(--r-1);font-size:15px;font-weight:600;border:1px solid transparent;
  transition:transform .18s,box-shadow .18s,background .18s,border-color .18s}
.pillbtn.solid{background:var(--c-pine);color:#fff;box-shadow:0 14px 28px -14px rgba(27,67,50,.7)}
.pillbtn.solid:hover{background:var(--c-pine-deep);transform:translateY(-2px)}
.pillbtn.ghost{background:var(--c-white);color:var(--c-ink);border-color:var(--c-line);box-shadow:var(--e-1)}
.pillbtn.ghost:hover{border-color:rgba(200,150,62,.6);color:var(--c-pine);transform:translateY(-2px)}
.masthead figure{margin:0;position:relative;border-radius:var(--r-3);overflow:hidden;
  border:1px solid var(--c-line);box-shadow:var(--e-2);background:var(--c-tint)}
.masthead figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.masthead figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(15,42,28,.16))}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:40px;padding-top:24px;
  border-top:1px solid var(--c-line);max-width:600px}
.metrics b{display:block;font-size:clamp(20px,3.6vw,26px);color:var(--c-pine);letter-spacing:-.03em;font-weight:700}
.metrics span{font-size:13px;color:var(--c-dim)}

/* ---------- 5. 区块通用 ---------- */
.blk{padding:72px 0}
.blk.tinted{background:var(--c-tint)}
.blk-top{max-width:660px;margin-bottom:40px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--c-amber);margin-bottom:14px}
.eyebrow::before{content:"";width:24px;height:1.5px;background:var(--c-amber);flex:none}
.blk-top h2{font-size:clamp(24px,4.6vw,34px);letter-spacing:-.022em}
.blk-top p{margin-top:16px;color:var(--c-dim);font-size:15.5px;max-width:560px}

/* ---------- 6. 核心服务 ---------- */
.svc-grid{display:grid;grid-template-columns:1fr;gap:18px}
.card-x{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-3);
  overflow:hidden;box-shadow:var(--e-1);display:flex;flex-direction:column;
  transition:transform .22s,box-shadow .22s,border-color .22s}
.card-x:hover{transform:translateY(-4px);box-shadow:var(--e-2);border-color:rgba(200,150,62,.5)}
.card-x figure{margin:0;background:var(--c-tint);overflow:hidden}
.card-x figure img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease}
.card-x:hover figure img{transform:scale(1.035)}
.card-x .pad{padding:24px 24px 26px;flex:1}
.card-x h3{font-size:18px;letter-spacing:-.018em}
.card-x h3::after{content:"";display:block;width:28px;height:2px;margin-top:12px;background:var(--c-amber);
  border-radius:2px}
.card-x p{margin-top:14px;font-size:14.8px;color:var(--c-dim)}

/* ---------- 7. 最新文章 ---------- */
.post-list{display:grid;grid-template-columns:1fr;gap:20px}
.post{display:flex;flex-direction:column;background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-3);overflow:hidden;box-shadow:var(--e-1);
  transition:transform .22s,box-shadow .22s,border-color .22s}
.post:hover{transform:translateY(-4px);box-shadow:var(--e-2);border-color:rgba(200,150,62,.5)}
.post figure{margin:0;background:var(--c-tint);overflow:hidden;flex:none}
.post figure img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s ease}
.post:hover figure img{transform:scale(1.035)}
.post .pad{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.post .date{font-size:12.5px;color:var(--c-amber);font-weight:600;letter-spacing:.06em;
  font-variant-numeric:tabular-nums}
.post h3{margin-top:10px;font-size:17.5px;letter-spacing:-.018em;line-height:1.45}
.post h3 a:hover{color:var(--c-pine)}
.post p{margin-top:12px;font-size:14.6px;color:var(--c-dim);flex:1}
.read{margin-top:18px;font-size:14.5px;font-weight:600;color:var(--c-pine);
  display:inline-flex;align-items:center;gap:6px;transition:gap .2s,color .2s}
.read:hover{color:var(--c-amber);gap:11px}

/* ---------- 8. FAQ ---------- */
.qa-list{max-width:840px;margin:0 auto;display:grid;gap:12px}
.qa{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-2);
  box-shadow:var(--e-1);padding:0 22px;transition:border-color .2s,box-shadow .2s}
.qa:hover{border-color:rgba(200,150,62,.42)}
.qa[open]{border-color:rgba(200,150,62,.62);box-shadow:var(--e-2)}
.qa summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:600;color:var(--c-ink);
  font-size:15.8px;display:flex;justify-content:space-between;gap:16px;align-items:center;
  transition:color .18s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--c-pine)}
.qa summary::after{content:"＋";color:var(--c-amber);font-size:17px;line-height:1;flex:none;transition:transform .22s}
.qa[open] summary{color:var(--c-pine)}
.qa[open] summary::after{content:"－"}
.qa .a{padding:0 0 22px;color:var(--c-dim);font-size:14.8px;border-top:1px solid var(--c-line-soft);
  padding-top:16px}

/* ---------- 9. 底部 CTA（深墨绿反白） ---------- */
.cta-band{position:relative;padding:78px 0;overflow:hidden;background:var(--c-pine);color:rgba(255,255,255,.82)}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(560px 300px at 14% -10%,rgba(200,150,62,.22),transparent 62%),
  radial-gradient(520px 320px at 96% 108%,rgba(45,106,79,.55),transparent 64%)}
.cta-box{position:relative;max-width:720px;margin:0 auto;text-align:center;padding:0 4px}
.cta-box h2{color:#fff;font-size:clamp(24px,4.6vw,34px);letter-spacing:-.022em}
.cta-box p{margin-top:16px;color:rgba(255,255,255,.72);font-size:16px}
.cta-box .acts{justify-content:center;margin-top:32px}
.cta-box .pillbtn.solid{background:var(--c-amber);color:#24190A;box-shadow:0 16px 30px -16px rgba(0,0,0,.6)}
.cta-box .pillbtn.solid:hover{background:var(--c-amber-soft)}
.cta-box .pillbtn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34);box-shadow:none}
.cta-box .pillbtn.ghost:hover{border-color:rgba(255,255,255,.76);background:rgba(255,255,255,.07);color:#fff}

/* ---------- 10. 页脚 ---------- */
.ft{border-top:1px solid var(--c-line);background:var(--c-paper);padding:56px 0 30px}
.ft-grid{display:grid;gap:30px}
.ft-brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--c-ink);
  font-size:16px;letter-spacing:-.01em;margin-bottom:14px}
.ft-brand svg{width:28px;height:28px}
.ft-note{color:var(--c-dim);max-width:360px;font-size:14.5px;line-height:1.8}
.ft h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-amber);margin-bottom:16px}
.ft-links{display:grid;gap:11px}
.ft-links a{font-size:14.5px;color:var(--c-dim);transition:color .18s}
.ft-links a:hover{color:var(--c-pine)}
.ft-base{margin-top:38px;padding-top:20px;border-top:1px solid var(--c-line);display:flex;
  flex-wrap:wrap;gap:8px 18px;justify-content:space-between;color:var(--c-dim);font-size:13px}

/* ---------- 11. 文章页 ---------- */
.doc{padding:40px 0 66px}
.trail{font-size:13.5px;color:var(--c-dim);margin-bottom:22px}
.trail a:hover{color:var(--c-pine)}
.doc-top{max-width:760px}
.doc-top h1{font-size:clamp(25px,5vw,38px);letter-spacing:-.026em}
.doc-top .info{margin-top:16px;font-size:13.5px;color:var(--c-dim);display:flex;gap:16px;
  flex-wrap:wrap;align-items:center}
.doc-top .info time{color:var(--c-amber);font-weight:600;letter-spacing:.06em}
.doc figure{margin:30px 0;border-radius:var(--r-3);overflow:hidden;border:1px solid var(--c-line);
  box-shadow:var(--e-1);background:var(--c-tint)}
.doc figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.body{max-width:760px}
.body h2{margin:40px 0 14px;font-size:clamp(20px,3.7vw,25px);letter-spacing:-.02em;
  padding-left:15px;border-left:3px solid var(--c-amber);line-height:1.4}
.body h3{margin:28px 0 10px;font-size:17.5px;color:var(--c-pine)}
.body p{margin:14px 0;font-size:16.2px}
.body ul{margin:14px 0;padding-left:20px;display:grid;gap:9px;list-style:disc}
.body li{font-size:15.5px}
.body li::marker{color:var(--c-amber)}
.body strong{color:var(--c-ink);font-weight:600}
.callout{margin:26px 0;padding:20px 22px;border-radius:var(--r-2);background:var(--c-tint);
  border:1px solid var(--c-line);border-left:3px solid var(--c-amber);font-size:15px;color:var(--c-text)}
.callout b{color:var(--c-pine)}
.to-back{margin-top:40px;display:inline-flex;align-items:center;gap:8px;font-weight:600;
  color:var(--c-pine);font-size:15px;transition:gap .2s,color .2s}
.to-back:hover{color:var(--c-amber);gap:12px}

/* ---------- 12. 响应式 ---------- */
@media(min-width:700px){
  .svc-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .post-list{grid-template-columns:repeat(2,1fr);gap:22px}
  .post-list .post:first-child{grid-column:span 2}
  .ft-grid{grid-template-columns:1.3fr 1fr 1fr}
}
@media(min-width:1000px){
  .masthead{padding:76px 0 72px}
  .masthead-row{grid-template-columns:1.06fr .94fr;gap:56px}
  .masthead figure img{aspect-ratio:9/10}
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  /* 首篇作为头条：横向大卡 */
  .post-list .post:first-child{display:grid;grid-template-columns:1.02fr 1fr;align-items:stretch}
  .post-list .post:first-child figure{height:100%}
  .post-list .post:first-child figure img{height:100%;aspect-ratio:auto;min-height:300px}
  .post-list .post:first-child .pad{padding:38px 38px 36px;justify-content:center}
  .post-list .post:first-child h3{font-size:23px;margin-top:12px}
  .post-list .post:first-child p{font-size:15.2px;margin-top:14px}
  .post-list .post:first-child .read{margin-top:22px}
}
@media(max-width:999px){
  .masthead h1 .nowrap{white-space:normal;max-width:34em}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}