/* ============================================================
   上海诚驿物流有限公司 — 影像式（Cinematic）
   字体全部 SIL OFL 1.1 授权，详见 assets/fonts/NOTICE.txt
   ============================================================ */
:root{
  --void:#08080A; --ink2:#101013; --ink3:#17171B;
  --fog:#F2F0EE; --dim:#8B8489; --dim2:#A79FA5;
  --gold:#B08B4F; --goldl:#D8B67E; --wine:#7C1233;
  --line:rgba(255,255,255,.09); --lineg:rgba(176,139,79,.26);
  --serif-en:"WS Display","WS Serif SC",Georgia,serif;
  --serif-cn:"WS Display","WS Serif SC","Songti SC",serif;
  --sans:"WS Sans","WS Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --max:1160px;
}
html[lang="ja"]{
  --serif-en:"WS Display","WS Serif JP",Georgia,serif;
  --serif-cn:"WS Display","WS Serif JP",serif;
  --sans:"WS Sans","WS Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--fog);font-family:var(--sans);font-weight:300;
  line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
.eyebrow{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
  font-weight:500;font-family:"WS Sans","WS Sans SC",sans-serif}
.num{font-variant-numeric:tabular-nums}

/* ---------------- nav ---------------- */
nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .45s,backdrop-filter .45s}
nav.solid{background:rgba(8,8,10,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.navin{max-width:var(--max);margin:0 auto;padding:22px 40px;display:flex;align-items:center;gap:34px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:28px;height:28px}
.bname{display:flex;flex-direction:column;line-height:1.05}
.bname b{font-family:var(--serif-en);font-size:19px;font-weight:600;letter-spacing:.02em}
.bname em{font-style:normal;font-family:"WS Sans",sans-serif;font-size:8.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:3px}
.navlinks{display:flex;gap:30px;margin-left:auto;font-size:12.5px;letter-spacing:.1em;color:#C9C2C7}
.navlinks a{position:relative;padding-bottom:3px;transition:color .3s}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--gold);transition:width .35s}
.navlinks a:hover,.navlinks a.on{color:var(--goldl)}
.navlinks a.on::after,.navlinks a:hover::after{width:100%}
.langsw{display:flex;font-size:10.5px;font-family:"WS Sans",sans-serif;letter-spacing:.12em;
  border:1px solid var(--lineg)}
.langsw a{padding:5px 9px;color:#A79FA5;transition:.25s;white-space:nowrap}
.langsw a.on{background:var(--gold);color:var(--void)}
.langsw a:hover:not(.on){color:var(--fog)}
.burger{display:none;background:none;border:0;color:var(--fog);font-size:19px;cursor:pointer;
  margin-left:auto}
.mnav{display:none;flex-direction:column;background:rgba(8,8,10,.97);border-top:1px solid var(--line)}
.mnav a{padding:15px 24px;font-size:15px;color:#C9C2C7;border-bottom:1px solid var(--line)}
.mnav a.on{color:var(--goldl)}
.mnav.open{display:flex}

/* ---------------- 满屏影像（首屏） ---------------- */
.reel{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.reel>.bg{position:absolute;inset:0}
.reel>.bg img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.55) contrast(1.06) brightness(.6);transform:scale(1.05);
  animation:drift 24s ease-out forwards}
@keyframes drift{to{transform:scale(1)}}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 95% at 20% 50%,rgba(8,8,10,.9) 0%,rgba(8,8,10,.36) 54%,rgba(8,8,10,.86) 100%),
             linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,0) 26%,rgba(8,8,10,.9) 100%)}
.rin{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:0 40px}
.up{opacity:0;animation:up 1s forwards}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
h1{font-family:var(--serif-cn);font-weight:600;line-height:1.05;letter-spacing:.03em;
  font-size:clamp(50px,8.6vw,124px);margin:28px 0 0;text-shadow:0 2px 44px rgba(0,0,0,.55)}
h1 .l{display:block;opacity:0;animation:up 1.1s forwards}
h1 .l:nth-child(1){animation-delay:.34s}
h1 .l:nth-child(2){animation-delay:.5s;color:var(--goldl)}
html[lang="en"] h1,html[lang="ja"] h1{font-family:var(--serif-en);font-weight:700;letter-spacing:.005em}
html[lang="ja"] h1{font-family:var(--serif-cn);font-size:clamp(38px,6.6vw,92px);line-height:1.2}
.hero-sub{max-width:440px;margin-top:30px;font-size:15.5px;color:#CFC8CB;line-height:1.95;
  opacity:0;animation:up 1s .74s forwards}

/* 内页页眉：半屏影像 */
.phead{min-height:66svh}
.phead h1{font-size:clamp(40px,6.4vw,86px)}
html[lang="ja"] .phead h1{font-size:clamp(30px,4.8vw,60px)}

/* ---------------- 数字带 ---------------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:104px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fig{text-align:center}
.fig b{display:block;font-family:var(--serif-en);font-weight:500;line-height:1;
  font-size:clamp(38px,5.4vw,72px);color:var(--fog);letter-spacing:.01em}
.fig span{display:block;margin-top:18px;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim)}

/* ---------------- 黑场：大字 ---------------- */
section{display:block;padding:140px 0;position:relative}
.quiet{text-align:center}
.quiet h2{font-family:var(--serif-cn);font-weight:500;letter-spacing:.03em;
  font-size:clamp(30px,5vw,64px);line-height:1.34;max-width:1000px;margin:26px auto 0}
.quiet h2 b{color:var(--goldl);font-weight:500}
.quiet .sub{margin:34px auto 0;max-width:560px;font-size:15px;color:var(--dim);line-height:1.95}
.sec-head{max-width:700px}
.sec-head h2{font-family:var(--serif-cn);font-weight:500;letter-spacing:.02em;
  font-size:clamp(28px,4.2vw,52px);line-height:1.3;margin:22px 0 0}
.sec-head p{margin-top:22px;font-size:15px;color:var(--dim2);line-height:1.95}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* ---------------- 极简行列表（三家公司 / 资质） ---------------- */
.rows{margin-top:52px}
.row{display:grid;grid-template-columns:96px 250px 1fr;gap:40px;padding:38px 0;
  border-top:1px solid var(--line);align-items:baseline}
.row:last-child{border-bottom:1px solid var(--line)}
.row .y{font-family:var(--serif-en);font-size:21px;color:var(--gold);font-weight:600}
.row h3{font-family:var(--serif-cn);font-size:26px;font-weight:600;letter-spacing:.02em}
.row .en{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  margin-top:8px;font-weight:500}
.row p{font-size:14.2px;color:var(--dim2);line-height:1.92}
.row .li{list-style:none;margin-top:14px}
.row .li li{font-size:13.4px;color:var(--dim);padding:5px 0 5px 18px;position:relative;line-height:1.78}
.row .li li::before{content:"";position:absolute;left:1px;top:14px;width:4px;height:4px;
  border-radius:50%;background:var(--gold);opacity:.62}

/* ---------------- 温度轴（影像版） ---------------- */
.tempbar{position:relative;height:210px;margin-top:76px;max-width:920px;
  margin-left:auto;margin-right:auto}
.axis{position:absolute;left:0;right:0;top:100px;height:1px;background:rgba(255,255,255,.16)}
.axis .fill{position:absolute;left:0;top:0;height:1px;width:0;background:var(--gold);
  transition:width 1.8s cubic-bezier(.16,.9,.3,1)}
.tick{position:absolute;top:100px;transform:translateX(-50%);text-align:center}
.tick i{display:block;width:1px;height:8px;background:rgba(255,255,255,.22);margin:0 auto}
.tick span{display:block;font-family:"WS Sans",sans-serif;font-size:10px;color:#6E686D;
  margin-top:10px;font-variant-numeric:tabular-nums}
.mark{position:absolute;transform:translateX(-50%);text-align:center;opacity:0;
  transition:opacity .8s ease}
.mark.show{opacity:1}
.mark .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);margin:0 auto;
  box-shadow:0 0 0 6px rgba(176,139,79,.14)}
.mark .val{font-family:var(--serif-en);font-weight:500;font-size:40px;line-height:1;
  margin-bottom:14px;color:var(--goldl)}
.mark .lab{font-size:11px;letter-spacing:.09em;color:var(--dim);margin-top:16px;white-space:nowrap}
.mark.top{top:20px}
.mark.bot{top:112px}
.mark.bot .val{margin:16px 0 0}
.tempnote{margin:36px auto 0;max-width:640px;font-size:13.8px;color:var(--dim);
  line-height:1.95;text-align:center}

/* ---------------- 半屏影像（仓库） ---------------- */
.half{position:relative;min-height:84svh;overflow:hidden;display:flex;align-items:flex-end}
.half>.bg{position:absolute;inset:0}
.half>.bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.62)}
.half::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(8,8,10,.96) 0%,rgba(8,8,10,.5) 42%,rgba(8,8,10,.2) 100%)}
.hin{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:0 40px 78px}
.hin h3{font-family:var(--serif-cn);font-weight:600;letter-spacing:.02em;
  font-size:clamp(27px,3.8vw,46px)}
.hin .loc{margin-top:13px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.facts{display:flex;gap:52px;margin-top:34px;flex-wrap:wrap}
.facts div{font-size:12.5px;color:var(--dim);letter-spacing:.02em}
.facts b{display:block;font-family:var(--serif-en);font-size:27px;font-weight:600;
  color:var(--fog);margin-bottom:5px;letter-spacing:.01em}
.hin .li{list-style:none;margin-top:32px;columns:2;column-gap:46px;max-width:820px}
.hin .li li{font-size:13.6px;color:var(--dim2);padding:6px 0 6px 18px;position:relative;
  line-height:1.8;break-inside:avoid}
.hin .li li::before{content:"";position:absolute;left:1px;top:15px;width:4px;height:4px;
  border-radius:50%;background:var(--gold);opacity:.66}

/* ---------------- 服务：交错影像行 ---------------- */
.srow{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;
  border-top:1px solid var(--line)}
.srow:last-child{border-bottom:1px solid var(--line)}
.srow .pic{position:relative;overflow:hidden;aspect-ratio:16/11}
.srow .pic img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.7);
  transition:transform 1.2s cubic-bezier(.2,.8,.3,1),filter .7s}
.srow:hover .pic img{transform:scale(1.05);filter:saturate(.8) brightness(.82)}
.srow .txt{padding:56px 58px}
.srow:nth-child(even) .pic{order:2}
.srow .n{font-family:var(--serif-en);font-weight:600;font-size:13px;color:var(--gold);
  letter-spacing:.16em}
.srow h4{font-family:var(--serif-cn);font-weight:600;font-size:25px;margin:14px 0 16px;
  letter-spacing:.02em}
.srow p{font-size:14.2px;color:var(--dim2);line-height:1.92}
.srow .li{list-style:none;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.srow .li li{font-size:13.2px;color:var(--dim);padding:6px 0 6px 18px;position:relative;line-height:1.78}
.srow .li li::before{content:"";position:absolute;left:1px;top:15px;width:4px;height:4px;
  border-radius:50%;background:var(--gold);opacity:.6}

/* ---------------- 时间轴 ---------------- */
.tlwrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.tl{position:relative;padding-left:2px;margin-top:12px}
.tl::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:1px;background:var(--lineg)}
.ev{position:relative;padding:0 0 34px 40px}
.ev::before{content:"";position:absolute;left:-4px;top:10px;width:9px;height:9px;border-radius:50%;
  background:var(--void);border:1px solid var(--gold)}
.ev.big::before{background:var(--gold)}
.ev .y{font-family:var(--serif-en);font-weight:600;font-size:21px;color:var(--goldl);line-height:1}
.ev .t{margin-top:8px;font-size:14.2px;color:var(--dim2)}
.ev.big .t{color:var(--fog)}
.tlpics{display:grid;gap:14px}
.tlpics>img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.62) brightness(.78)}
.tlpics .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tlpics .two img{width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(.62) brightness(.78)}

/* ---------------- 客户 LOGO ---------------- */
.lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:52px}
.lg{background:#F4F2EF;aspect-ratio:5/2.3;display:flex;align-items:center;justify-content:center;
  padding:20px 24px;transition:background .4s}
.lg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:none;transition:transform .45s}
.lg:hover img{transform:scale(1.04)}

/* ---------------- 联系 ---------------- */
.cts{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:56px}
.ct{padding:44px 46px 46px 0;border-top:1px solid var(--line);border-right:1px solid var(--line)}
.ct:last-child{border-right:0;padding-left:46px;padding-right:0}
.ct h3{font-family:var(--serif-cn);font-weight:600;font-size:21px;letter-spacing:.02em}
.ct .role{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:11px}
.ct dl{margin-top:30px;display:grid;grid-template-columns:62px 1fr;row-gap:14px;font-size:14px}
.ct dt{color:var(--dim)}
.ct dd{color:#CFC8CB;font-variant-numeric:tabular-nums}
.ct dd a{border-bottom:1px solid var(--lineg);transition:.25s}
.ct dd a:hover{color:var(--goldl)}
/* 微信公众号 */
.wechat{display:flex;gap:40px;align-items:center;margin-top:0;padding:40px 0 0;
  border-top:1px solid var(--line)}
.wechat .qr{flex-shrink:0;width:172px;height:172px;
  display:flex;align-items:center;justify-content:center}
.wechat .qr img{width:100%;height:100%;object-fit:contain}
.wechat .wtx h3{font-family:var(--serif-cn);font-weight:600;font-size:21px;
  letter-spacing:.02em;margin-top:14px}
.wechat .wtx p{margin-top:14px;font-size:14.2px;color:var(--dim2);line-height:1.9;max-width:460px}
@media(max-width:760px){.wechat{flex-direction:column;align-items:flex-start;gap:26px}}

.morelink{margin-top:52px}
.morelink a{font-family:var(--serif-en);font-weight:600;font-size:16px;color:var(--gold);
  border-bottom:1px solid var(--lineg);padding-bottom:4px;transition:.3s}
.morelink a:hover{color:var(--goldl)}

/* ---------------- 行业观察 ---------------- */
.posts{margin-top:56px}
.post{display:block;padding:42px 0;border-top:1px solid var(--line);transition:.4s}
.post:last-child{border-bottom:1px solid var(--line)}
.post:hover{padding-left:14px}
.post .meta,.post-head .meta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  font-family:"WS Sans","WS Sans SC",sans-serif;font-size:10.5px;letter-spacing:.12em;color:var(--dim)}
.post .cat,.post-head .cat{color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.post h2{font-family:var(--serif-cn);font-weight:600;font-size:clamp(23px,2.8vw,32px);
  line-height:1.36;letter-spacing:.02em;margin:16px 0 0;transition:color .3s}
.post:hover h2{color:var(--goldl)}
.post p{margin-top:15px;font-size:14.5px;color:var(--dim2);line-height:1.9;max-width:780px}
.post .rm{display:inline-block;margin-top:22px;font-family:var(--serif-en);font-weight:600;
  font-size:14px;color:var(--gold)}
.post-full{padding:0 0 120px}
.post-head{max-width:780px;padding-bottom:38px;border-bottom:1px solid var(--lineg)}
.post-head h1{font-family:var(--serif-cn);font-weight:600;letter-spacing:.02em;
  font-size:clamp(30px,4.6vw,54px);line-height:1.28;margin:22px 0 0;text-shadow:none}
html[lang="ja"] .post-head h1{font-size:clamp(25px,3.4vw,40px);line-height:1.44}
html[lang="en"] .post-head h1{font-family:var(--serif-en);font-weight:700;letter-spacing:-.01em}
.post-head .stand{margin-top:24px;font-size:17px;line-height:1.92;color:#BFB6BD}
.prose{max-width:730px;margin-top:52px}
.prose h2{font-family:var(--serif-cn);font-weight:600;font-size:23px;letter-spacing:.02em;
  margin:56px 0 20px;color:var(--goldl)}
.prose p{font-size:16px;line-height:2.08;color:#CDC5CB;margin-bottom:24px}
.prose p b,.prose b{color:var(--goldl);font-weight:500}
.prose ul{list-style:none;margin:8px 0 28px}
.prose li{font-size:15.4px;line-height:1.92;color:var(--dim2);padding:8px 0 8px 22px;position:relative}
.prose li::before{content:"";position:absolute;left:2px;top:20px;width:5px;height:5px;
  border-radius:50%;background:var(--gold);opacity:.68}
.prose .note{border-left:2px solid var(--gold);background:rgba(176,139,79,.07);
  padding:22px 26px;margin:36px 0;font-size:14.8px;line-height:1.92;color:#C6BDC4}
.post-cta{max-width:730px;margin-top:70px;padding:36px 36px 38px;border:1px solid var(--lineg)}
.post-cta h3{font-family:var(--serif-cn);font-weight:600;font-size:22px;color:var(--goldl)}
.post-cta p{margin-top:11px;font-size:14.5px;color:var(--dim2)}
.post-cta a{display:inline-block;margin-top:22px;font-family:var(--serif-en);font-weight:600;
  font-size:16px;color:var(--gold);border-bottom:1px solid var(--lineg);padding-bottom:4px}
.post-cta a:hover{color:var(--goldl)}
.backlink{max-width:730px;margin-top:46px;font-size:14px}
.backlink a{color:var(--dim)}
.backlink a:hover{color:var(--gold)}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--line);padding:46px 0 54px;font-size:11.5px;color:var(--dim)}
.fin{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.beian{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.beian a{display:inline-flex;align-items:center;gap:6px;transition:color .25s}
.beian a:hover{color:var(--goldl)}
.beian img{opacity:.6;flex-shrink:0}

/* ---------------- reveal ---------------- */
.rv{opacity:0;transform:translateY(28px);
  transition:opacity 1s cubic-bezier(.2,.8,.3,1),transform 1s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1;transform:none}

/* ---------------- responsive ---------------- */
@media(max-width:1000px){
  .tlwrap{grid-template-columns:1fr;gap:48px}
  .srow{grid-template-columns:1fr}
  .srow:nth-child(even) .pic{order:0}
  .srow .txt{padding:38px 0 46px}
  .cts{grid-template-columns:1fr}
  .ct{padding:36px 0 38px!important;border-right:0}
  .lgrid{grid-template-columns:repeat(3,1fr)}
  .row{grid-template-columns:1fr;gap:12px;padding:30px 0}
  .hin .li{columns:1}
}
@media(max-width:760px){
  .wrap,.navin,.rin,.hin{padding-left:22px;padding-right:22px}
  section{padding:88px 0}
  .navlinks{display:none}
  .burger{display:block}
  .figs{grid-template-columns:1fr 1fr;gap:46px 20px;padding:70px 0}
  .lgrid{grid-template-columns:repeat(2,1fr)}
  .facts{gap:30px}
  .tempbar{height:270px}
  .mark .val{font-size:28px}
  .mark .lab{font-size:10px;white-space:normal;width:96px}
  .post-full{padding-bottom:80px}
  .prose p{font-size:15.4px}
  .post-cta{padding:26px 22px 28px}
  .half{min-height:70svh}
}

/* ---------- 文章内的图表、表格、导语 ---------- */
.prose .lead{border-left:3px solid var(--gold);padding:22px 26px;margin:0 0 40px;
  background:rgba(138,91,46,.08);font-size:16.5px;line-height:2;color:var(--fog)}
.prose .fig{margin:38px 0 34px}
.prose .fig img{width:100%;height:auto;display:block}
.prose .fig figcaption{margin-top:12px;font-size:12.5px;color:var(--dim);letter-spacing:.02em;
  line-height:1.7}
.prose .tblwrap{margin:32px 0 34px;overflow-x:auto}
.prose table{width:100%;border-collapse:collapse;font-size:14px}
.prose thead th{text-align:left;font-weight:600;color:var(--gold);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;padding:0 16px 12px 0;
  border-bottom:1px solid var(--lineg);white-space:nowrap}
.prose tbody td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.85;color:var(--dim2)}
.prose tbody td:first-child{width:150px;color:var(--fog);font-weight:500;white-space:nowrap}
.prose .srcnote{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.9;color:var(--dim)}
/* 图表比正文宽，撑满阅读区两侧 */
@media(min-width:1000px){
  .prose .fig{margin-left:-60px;margin-right:-120px}
}
@media(max-width:760px){
  .prose .lead{padding:18px 20px;font-size:15.4px}
  .prose tbody td:first-child{width:auto;white-space:normal}
  .prose table{font-size:13.2px}
  .prose thead th{font-size:10px}
}


/* ============ 配色：暖砂（Sand） ============ */

:root{
  --void:#EAE4DA; --ink2:#E1DACD; --ink3:#D8D0C1;
  --fog:#241E17; --dim:#635A50; --dim2:#4E463C;
  --gold:#8A5B2E; --goldl:#6B421C; --wine:#7C1233;
  --line:rgba(36,30,23,.15); --lineg:rgba(138,91,46,.34);
  --vfog:rgba(234,228,218,.9); --vfog2:rgba(234,228,218,.26);
  --vglow:rgba(234,228,218,.9); --navbg:rgba(234,228,218,.94);
  --vsolid:rgba(234,228,218,.94);
}
.langsw a.on{background:var(--gold);color:#fff}
.bname em{color:var(--goldl)}
.mark .dot{box-shadow:0 0 0 6px rgba(138,91,46,.16)}

/* 浅色底：反转影像遮罩与滤镜 */
.reel>.bg img{filter:saturate(.94) contrast(1.02) brightness(1.0)}
.reel::after{background:
  radial-gradient(125% 95% at 20% 50%,var(--vfog) 0%,var(--vfog2) 52%,var(--vfog) 100%),
  linear-gradient(180deg,var(--vfog) 0%,rgba(0,0,0,0) 24%,var(--vfog) 100%)}
h1{text-shadow:0 1px 26px var(--vglow)}
.half>.bg img{filter:saturate(.95) brightness(.98)}
.half::after{background:linear-gradient(0deg,var(--void) 0%,var(--vfog) 46%,rgba(0,0,0,0) 100%)}
.srow .pic img{filter:saturate(.96) brightness(.99)}
.srow:hover .pic img{filter:saturate(1) brightness(1.02)}
.tlpics>img,.tlpics .two img{filter:saturate(.95) brightness(.98)}
.hero-sub,.hin .facts div{text-shadow:0 1px 14px var(--vglow)}
.lgrid{background:var(--line);border-color:var(--line)}
.lg{background:#fff}
.ev::before{background:var(--void)}
.axis{background:rgba(0,0,0,.16)}
.tick i{background:rgba(0,0,0,.2)}
.tick span{color:var(--dim)}
nav.solid{background:var(--navbg)}
.mnav{background:var(--navbg)}
.prevbar{background:var(--navbg);color:var(--dim)}

/* 基础样式里写死的浅灰色，在浅色底上会消失，逐个改成随主题变化 */
.navlinks{color:var(--dim2)}
.mnav a{color:var(--dim2)}
.langsw a{color:var(--dim)}
.langsw a:hover:not(.on){color:var(--fog)}
.hero-sub{color:var(--dim2)}
.ct dd{color:var(--dim2)}
.prose p{color:var(--dim2)}
.post-head .stand{color:var(--dim2)}
.prose .note{color:var(--dim2)}
.prose .note{background:rgba(138,91,46,.11)}
.tick span{color:var(--dim)}
.burger{color:var(--fog)}

/* 首屏文字区加强遮罩，保证深色字压得住照片 */
.reel::after{background:
  linear-gradient(96deg,var(--vsolid) 0%,var(--vsolid) 26%,var(--vfog) 52%,var(--vfog2) 78%,var(--vfog) 100%),
  linear-gradient(180deg,var(--vfog) 0%,rgba(0,0,0,0) 22%,var(--vfog) 100%)}


/* ============================================================
   v3.3 版式重构（Layout refinement）— 结构与内容不变，只调版式
   ============================================================ */
:root{--max:1240px}
body{background:
  radial-gradient(130% 90% at 50% -10%,#F4EFE5 0%,var(--void) 44%,#E2DACC 100%) no-repeat;
  background-attachment:fixed}
.wrap{padding:0 56px}
section{padding:168px 0}

/* 导航：更舒展，滚动后收紧 */
.navin{padding:28px 56px;transition:padding .45s}
nav.solid .navin{padding:18px 56px}
.navlinks{gap:38px;font-size:12px;letter-spacing:.14em}
.bname b{font-size:20px}
.langsw{border-color:var(--lineg)}

/* 眉标：前置金色短线 */
.eyebrow{display:inline-flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:36px;height:1px;background:var(--lineg);flex:none}

/* 首屏与内页页眉 */
.reel>.bg img{transform:scale(1.08)}
h1{letter-spacing:.02em}
.hero-sub{max-width:520px;font-size:16.5px;margin-top:36px}
.rin{padding:0 56px}
.phead{min-height:60svh}

/* 数字带：竖线分隔 */
.figs{gap:0;padding:120px 0}
.figs .fig{padding:4px 22px;border-right:1px solid var(--line)}
.figs .fig:last-child{border-right:0}
.figs .fig span{margin-top:20px;letter-spacing:.26em}

/* 章节标题 */
.sec-head{max-width:840px}
.sec-head h2{font-size:clamp(30px,4.6vw,58px);line-height:1.26;margin-top:26px}
.sec-head p{margin-top:26px;font-size:15.5px;max-width:660px}
.quiet h2{font-size:clamp(32px,5.4vw,70px);margin-top:30px}
.quiet .sub{margin-top:38px}

/* 行列表 */
.rows{margin-top:64px}
.row{grid-template-columns:120px 280px 1fr;padding:44px 22px;margin:0 -22px;
  transition:background .45s}
.row:hover{background:linear-gradient(90deg,rgba(138,91,46,.055),rgba(138,91,46,0) 72%)}
.row h3{font-size:28px}

/* 半屏影像 */
.half{min-height:88svh}
.hin{padding:0 56px 96px}
.hin h3{font-size:clamp(28px,4vw,50px)}
.facts{gap:64px;margin-top:40px}

/* 服务交错行 */
.srow .txt{padding:72px 74px}
.srow h4{font-size:28px;margin:16px 0 18px}
.srow .n{font-size:14px;letter-spacing:.2em}

/* 客户 logo：留白更大 */
.lg{padding:26px 32px}

/* ---------- 行业观察：编辑式网格 ---------- */
.posts{margin-top:72px;display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);counter-reset:p}
.post{position:relative;padding:46px 52px 52px;border-top:0;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  transition:background .45s,padding .45s}
.post:first-child{grid-column:1 / -1;border-right:0;padding-bottom:58px}
.post:first-child h2{font-size:clamp(28px,3.6vw,46px)}
.post:first-child p{font-size:15.5px;max-width:820px}
.post:nth-child(odd):not(:first-child){border-right:0}
.post:last-child{border-bottom:1px solid var(--line)}
.post::before{counter-increment:p;
  content:counter(p,decimal-leading-zero);position:absolute;right:38px;top:48px;
  font-family:var(--serif-en);font-weight:600;font-size:12px;letter-spacing:.14em;
  color:var(--gold);opacity:.45}
.post:hover{padding-left:66px;background:rgba(138,91,46,.055)}
.post h2{margin-top:18px}
.post .rm{margin-top:26px}

/* ---------- 文章页：更宽的版心与更清晰的层级 ---------- */
.post-full{padding-bottom:150px}
.post-head{max-width:840px;padding-bottom:44px}
.post-head h1{font-size:clamp(32px,5vw,62px);line-height:1.24}
.post-head .stand{margin-top:28px;font-size:18px;line-height:1.95;max-width:760px}
.prose{max-width:760px;margin-top:62px}
.prose h2{margin:66px 0 24px;padding-top:26px;border-top:1px solid var(--line);
  font-size:25px}
.prose p{font-size:16.5px;line-height:2.12}
.prose .lead{font-size:17px;padding:26px 30px;margin-bottom:46px}
.prose .fig figcaption{margin-top:14px}
.prose .srcnote{margin-top:56px}
.post-cta{max-width:760px;margin-top:84px;padding:44px 46px 46px;
  background:linear-gradient(120deg,rgba(138,91,46,.075),rgba(138,91,46,0) 68%)}
.post-cta h3{font-size:24px}
.backlink{max-width:760px;margin-top:54px}

footer{padding:64px 0 72px}

@media(max-width:1000px){
  .srow .txt{padding:44px 0 52px}
  .row{grid-template-columns:1fr;padding:32px 0;margin:0}
}
@media(max-width:900px){
  .posts{grid-template-columns:1fr}
  .post{padding:38px 0 42px!important;border-right:0!important}
  .post::before{right:0;top:40px}
  .post:hover{padding-left:0!important;background:transparent}
}
@media(max-width:760px){
  .wrap,.navin,.rin,.hin{padding-left:22px;padding-right:22px}
  nav.solid .navin{padding-left:22px;padding-right:22px}
  section{padding:96px 0}
  .figs{grid-template-columns:1fr 1fr;gap:44px 0;padding:74px 0}
  .figs .fig:nth-child(2n){border-right:0}
  .hin{padding-bottom:64px}
  .prose p{font-size:15.8px}
  .post-cta{padding:28px 24px 30px}
}
