/* ============================================================
   Components: header, nav, hero, cards, tables, forms, footer
   ============================================================ */

/* ---------- Top progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--cocoa-500),var(--magic-400));z-index:200;transition:width .12s linear}

/* ---------- Masthead ---------- */
.masthead{position:fixed;top:0;left:0;right:0;z-index:120;transition:background .45s var(--ease),border-color .45s,backdrop-filter .45s}
.masthead::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,7,.82),rgba(20,14,7,0));opacity:1;transition:opacity .45s;pointer-events:none}
.masthead.solid{background:rgba(20,14,7,.93);border-bottom:1px solid var(--line);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.masthead.solid::before{opacity:0}
.mh-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;height:80px}
.masthead.solid .mh-in{height:68px}

.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand img{height:34px;width:auto;transition:height .4s var(--ease)}
.masthead.solid .brand img{height:29px}
/* 小黄豆 logo 为竖长比例(0.49)，需比横宽版魔法帽更高的显示高度才有同等视觉重量 */
.brand img.mark-bean{height:45px}
.masthead.solid .brand img.mark-bean{height:38px}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-cn{font-family:var(--f-serif-cn);font-size:.94rem;font-weight:600;letter-spacing:.16em;color:var(--cream-100)}
.brand-en{font-size:.545rem;letter-spacing:.27em;text-transform:uppercase;color:var(--magic-500)}

.nav{display:flex;align-items:center;gap:4px}
.nav a{
  position:relative;padding:.7em .95em;font-size:.815rem;font-weight:500;letter-spacing:.06em;
  color:var(--cream-300);transition:color .3s
}
.nav a::after{content:"";position:absolute;left:.95em;right:.95em;bottom:.34em;height:1px;background:var(--magic-500);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.nav a:hover,.nav a.on{color:#fff}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.mh-cta{display:flex;align-items:center;gap:14px;flex:none}
.mh-tel{display:flex;flex-direction:column;line-height:1.25;text-align:right}
.mh-tel span:first-child{font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-mute)}
.mh-tel span:last-child{font-family:var(--f-display);font-size:1.14rem;letter-spacing:.04em;color:var(--magic-400)}

.burger{display:none;width:44px;height:36px;border:1px solid var(--line-strong);background:transparent;border-radius:2px;position:relative;cursor:pointer}
.burger i{position:absolute;left:11px;width:20px;height:1.5px;background:var(--cream-100);transition:transform .38s var(--ease),opacity .2s}
.burger i:nth-child(1){top:12px}.burger i:nth-child(2){top:17.5px}.burger i:nth-child(3){top:23px}
.burger.x i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.mobile-nav{position:fixed;inset:0;background:var(--ink-900);z-index:110;padding:104px var(--gutter) 40px;display:none;flex-direction:column;overflow-y:auto}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:16px 0;border-bottom:1px solid var(--line);font-family:var(--f-serif-cn);font-size:1.16rem;letter-spacing:.06em;color:var(--cream-200)}
.mobile-nav a em{font-style:normal;font-family:var(--f-display);font-size:.7rem;letter-spacing:.22em;color:var(--magic-600);margin-left:10px;text-transform:uppercase}
.mobile-nav .mn-foot{margin-top:auto;padding-top:28px}

@media(max-width:1140px){.mh-tel{display:none}}
@media(max-width:1020px){.nav,.mh-cta .btn{display:none}.burger{display:block}}

/* ---------- Page hero (subpages) ---------- */
.phead{position:relative;padding:172px 0 78px;overflow:hidden;background:var(--ink-800)}
.phead-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;opacity:.46;filter:saturate(.95) brightness(.94)}
.phead::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,12,6,.96) 0%,rgba(18,12,6,.8) 40%,rgba(18,12,6,.38) 78%,rgba(18,12,6,.55) 100%),linear-gradient(0deg,var(--ink-800) 3%,rgba(18,12,6,.3) 58%,rgba(18,12,6,.55) 100%)}
.phead-in{position:relative;z-index:2}
.crumbs{display:flex;gap:.5em;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:22px}
.crumbs a:hover{color:var(--magic-400)}
.phead h1{max-width:18ch}
.phead .lede{margin-top:20px;color:var(--cream-100);text-shadow:0 1px 20px rgba(10,6,2,.95),0 0 3px rgba(10,6,2,.6)}
.phead h1,.phead .eyebrow{text-shadow:0 2px 22px rgba(14,9,4,.7)}
.phead .crumbs{text-shadow:0 1px 10px rgba(14,9,4,.9)}
.phead.dim .phead-bg{opacity:.26;filter:saturate(.85) brightness(.72)}

/* ---------- Section heading ---------- */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:clamp(34px,4.4vw,64px);flex-wrap:wrap}
.shead-l{max-width:70ch}
.shead .h-2{margin-top:.5em}
.shead-note{max-width:34ch;font-size:.87rem;color:var(--fg-mute);line-height:1.8;border-left:1px solid var(--line);padding-left:20px}
.sec--light .shead-note{color:var(--fg-on-light-dim);border-color:var(--line-on-light)}

/* ---------- Hero (home) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#120C06}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.78) saturate(.92);transform:scale(1.08);animation:heroPan 26s var(--ease) forwards}
@keyframes heroPan{to{transform:scale(1)}}
.hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(19,12,5,.98) 0%,rgba(19,12,5,.92) 30%,rgba(19,12,5,.62) 62%,rgba(19,12,5,.74) 100%),
  linear-gradient(0deg,rgba(19,12,5,.98) 10%,rgba(19,12,5,.44) 54%,rgba(19,12,5,.88) 100%)}
.hero-in{position:relative;z-index:2;width:100%;padding-bottom:clamp(40px,6vw,76px);padding-top:112px}
.hero .h-display{max-width:17ch;font-size:clamp(2.3rem,5.3vw,4.4rem);text-shadow:0 2px 30px rgba(12,8,3,.55)}
.hero .h-display em{font-style:normal;color:var(--magic-display)}
.hero-sub{margin-top:24px;max-width:52ch;font-size:clamp(.93rem,1.1vw,1.05rem);color:#DED4BA;line-height:1.92;text-shadow:0 1px 16px rgba(12,8,3,.7)}
.hero-btns{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{margin-top:clamp(38px,5vw,60px);display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.hero-meta div{background:rgba(20,14,7,.82);padding:20px 22px 22px;backdrop-filter:blur(6px)}
.hero-meta .k{font-family:var(--f-display);font-size:clamp(1.45rem,2.3vw,2rem);color:var(--magic-display);line-height:1.14;white-space:nowrap}
.hero-meta .k sup{font-size:.42em;position:relative;top:-.62em;margin-left:3px;color:var(--magic-500)}
.hero-meta .v{margin-top:9px;font-size:.73rem;letter-spacing:.13em;color:var(--cream-400);line-height:1.5}
@media(max-width:900px){.hero-meta{grid-template-columns:repeat(2,1fr)}}
.hero-scroll{position:absolute;right:var(--gutter);bottom:34px;z-index:3;display:flex;align-items:center;gap:10px;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-mute);writing-mode:vertical-rl}
.hero-scroll::after{content:"";width:1px;height:56px;background:linear-gradient(var(--magic-600),transparent);animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:760px){.hero-scroll{display:none}}

/* ---------- Marquee trust strip ---------- */
.strip{border-block:1px solid var(--line);background:var(--ink-800);overflow:hidden;padding:17px 0}
.strip-track{display:flex;gap:0;width:max-content;animation:march 42s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip-track span{display:flex;align-items:center;gap:34px;padding-inline:34px;font-size:.735rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute);white-space:nowrap}
.strip-track span::after{content:"";width:4px;height:4px;background:var(--magic-600);transform:rotate(45deg)}
@keyframes march{to{transform:translateX(-50%)}}

/* ---------- Cards ---------- */
.card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);position:relative;overflow:hidden;transition:border-color .5s var(--ease),transform .5s var(--ease-out),background .5s}
.card:hover{border-color:rgba(245,213,17,.42);transform:translateY(-4px)}
.card-media{position:relative;overflow:hidden;background:#1A1209}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out);will-change:transform}
.card:hover .card-media img{transform:scale(1.06)}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,7,0) 45%,rgba(20,14,7,.55));pointer-events:none}
.card-body{padding:24px 24px 28px}
.card-tag{font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;color:var(--magic-500);font-weight:600}
.card h3{margin-top:.85em}
.card p{margin-top:.85em;font-size:.885rem;color:var(--fg-dim);line-height:1.8}
.sec--light .card{background:#fff;border-color:var(--line-on-light)}
.sec--light .card p{color:var(--fg-on-light-dim)}
.sec--light .card-tag{color:var(--cocoa-500)}
.sec--light .card:hover{border-color:rgba(148,64,20,.45)}

.pcard{display:flex;flex-direction:column;height:100%}
.pcard .card-media{aspect-ratio:4/3;flex:none}
.pcard .card-body{display:flex;flex-direction:column;flex:1}
.pcard .specs{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 16px}
.sec--light .pcard .specs{border-color:var(--line-on-light)}
.pcard .specs b{font-weight:500;font-size:.74rem;letter-spacing:.06em;color:var(--fg-mute)}
.pcard .specs b i{font-style:normal;color:var(--magic-400);font-family:var(--f-display);font-size:.95rem;margin-left:4px}
.sec--light .pcard .specs b i{color:var(--cocoa-500)}

/* feature list card */
.feat{padding:34px 30px;border:1px solid var(--line);background:var(--bg-card);border-radius:var(--radius-lg);position:relative;transition:border-color .5s,background .5s}
.feat:hover{border-color:rgba(245,213,17,.4);background:#33240F}
.feat-n{font-family:var(--f-display);font-size:.9rem;letter-spacing:.2em;color:var(--magic-600)}
.feat h3{margin-top:16px;font-size:1.1rem;font-weight:600}
.feat p{margin-top:12px;font-size:.875rem;color:var(--fg-dim);line-height:1.82}
.feat-ico{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(245,213,17,.35);border-radius:50%;color:var(--magic-400);margin-bottom:18px}
.sec--light .feat{background:#fff;border-color:var(--line-on-light)}
.sec--light .feat:hover{background:#FFFEF6;border-color:rgba(148,64,20,.4)}
.sec--light .feat p{color:var(--fg-on-light-dim)}

/* ---------- Tables ---------- */
.tbl-scroll{min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-card)}
table.dt{width:100%;border-collapse:collapse;min-width:640px}
.dt caption{text-align:left;padding:20px 24px 6px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--magic-500)}
.dt th,.dt td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:.875rem;vertical-align:top}
.dt thead th{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);font-weight:600;background:rgba(245,213,17,.05);white-space:nowrap}
.dt tbody tr:last-child td{border-bottom:0}
.dt tbody tr{transition:background .3s}
.dt tbody tr:hover{background:rgba(245,213,17,.045)}
.dt td.p{font-family:var(--f-display);font-size:1.06rem;color:var(--magic-400);white-space:nowrap;letter-spacing:.02em}
.dt td.p small{font-family:var(--f-sans);font-size:.72rem;color:var(--fg-mute);margin-left:7px;letter-spacing:.04em}
.dt td.name{font-weight:600;color:var(--cream-100);white-space:nowrap}
.dt .sub{color:var(--fg-mute);font-size:.8rem;display:block;margin-top:3px;font-weight:400}
.sec--light .tbl-scroll{background:#fff;border-color:var(--line-on-light)}
.sec--light .dt th,.sec--light .dt td{border-color:var(--line-on-light)}
.sec--light .dt thead th{color:var(--fg-on-light-dim);background:rgba(148,64,20,.05)}
.sec--light .dt td.name{color:var(--fg-on-light)}
.sec--light .dt td.p{color:var(--cocoa-500)}
.sec--light .dt tbody tr:hover{background:rgba(148,64,20,.05)}
.tnote{font-size:.78rem;color:var(--fg-mute);margin-top:14px;line-height:1.75}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.tab{
  padding:.72em 1.5em;border:1px solid var(--line-strong);border-radius:100px;background:transparent;
  font-size:.79rem;font-weight:600;letter-spacing:.08em;cursor:pointer;color:var(--fg-dim);
  transition:all .35s var(--ease)
}
.tab:hover{border-color:var(--magic-600);color:var(--cream-100)}
.tab[aria-selected="true"]{background:var(--magic-500);border-color:var(--magic-500);color:#1A1104}
.tabpanel[hidden]{display:none}
.tabpanel{animation:fadeUp .55s var(--ease-out)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;background:none;border:0;cursor:pointer;text-align:left}
.acc-h h3{font-size:1.02rem;font-weight:600;transition:color .3s}
.acc-h:hover h3{color:var(--magic-400)}
.acc-h .pm{position:relative;width:20px;height:20px;flex:none}
.acc-h .pm::before,.acc-h .pm::after{content:"";position:absolute;background:var(--magic-500);transition:transform .4s var(--ease),opacity .3s}
.acc-h .pm::before{left:0;right:0;top:9.5px;height:1.5px}
.acc-h .pm::after{top:0;bottom:0;left:9.25px;width:1.5px}
.acc-item.open .pm::after{transform:rotate(90deg);opacity:0}
.acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc-item.open .acc-p{grid-template-rows:1fr}
.acc-p>div{overflow:hidden}
.acc-p p{padding:0 60px 26px 4px;font-size:.895rem;color:var(--fg-dim);line-height:1.9}
.sec--light .acc{border-color:var(--line-on-light)}
.sec--light .acc-item{border-color:var(--line-on-light)}
.sec--light .acc-h:hover h3{color:var(--cocoa-500)}
.sec--light .acc-p p{color:var(--fg-on-light-dim)}

/* ---------- Timeline ---------- */
.tl{position:relative;padding-left:0}
.tl{--tlrail:calc(var(--tldot,120px) + 34px)}
.tl::before{content:"";position:absolute;left:var(--tlrail);top:8px;bottom:8px;width:1px;background:linear-gradient(var(--cocoa-500),var(--line) 12%,var(--line) 88%,transparent)}
.tl-row{display:grid;grid-template-columns:var(--tldot,120px) 1fr;gap:34px;padding:19px 0;position:relative}
.tl-date{font-family:var(--f-display);font-size:1.02rem;letter-spacing:.06em;color:var(--magic-500);text-align:right;padding-top:1px;white-space:nowrap}
.tl-body{position:relative;padding-left:30px}
.tl-body::before{content:"";position:absolute;left:-4px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1.5px solid var(--magic-600);box-shadow:0 0 0 4px var(--bg)}
.tl-body h4{font-size:.99rem;font-weight:600}
.tl-body p{margin-top:6px;font-size:.86rem;color:var(--fg-mute);line-height:1.8}
.sec--light .tl-body::before{background:var(--bg-light)}
@media(max-width:760px){
  .tl::before{left:8.5px}
  .tl-row{grid-template-columns:1fr;gap:6px;padding-left:38px}
  .tl-date{text-align:left}
  .tl-body{padding-left:0}
  .tl-body::before{left:-34px}
}

/* ---------- Steps ---------- */
.steps{counter-reset:s;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.steps>*{background:var(--bg-card);padding:28px 26px 30px;position:relative;transition:background .4s;overflow-wrap:break-word}
.steps>*:hover{background:#33240F}
.steps-step::before{counter-increment:s;content:"0" counter(s);display:block;font-family:var(--f-display);font-size:1.9rem;line-height:1;color:rgba(248,236,148,.55);transition:color .4s}
.steps-step:hover::before{color:var(--magic-500)}
.steps-cta{display:flex;flex-direction:column;justify-content:center;gap:14px;background:linear-gradient(180deg,rgba(245,213,17,.08),rgba(245,213,17,0))}
.steps h4{margin-top:16px;font-size:1rem;font-weight:600}
.steps p{margin-top:9px;font-size:.845rem;color:var(--fg-dim);line-height:1.8}
@media(min-width:1001px){.steps{grid-template-columns:repeat(4,1fr)}.steps--6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px) and (min-width:641px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.steps{grid-template-columns:1fr}}
.sec--light .steps{background:var(--line-on-light);border-color:var(--line-on-light)}
.sec--light .steps>*{background:#fff}
.sec--light .steps>*:hover{background:#FFFEF6}
.sec--light .steps p{color:var(--fg-on-light-dim)}
.sec--light .steps-step::before{color:rgba(148,64,20,.62)}
.sec--light .steps-step:hover::before{color:#7A3410}
.sec--light .steps-step:hover::before{color:var(--cocoa-500)}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
/* 三项统计条：基类缺此规则时会沿用 4 列，导致右侧空出一列 */
.stats--3{grid-template-columns:repeat(3,1fr)}
.stats>div{background:var(--bg);padding:34px 26px;text-align:left;transition:background .4s}
.stats>div:hover{background:var(--bg-card)}
.stats .k{font-family:var(--f-display);font-size:clamp(2rem,3.2vw,2.9rem);color:var(--magic-display);line-height:1;font-weight:300}
.stats .k sup{font-size:.4em;vertical-align:super;color:var(--magic-600);margin-left:2px}
.stats .v{margin-top:12px;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute)}
.stats .d{margin-top:8px;font-size:.83rem;color:var(--fg-dim);line-height:1.7}
@media(max-width:900px){.stats,.stats--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stats,.stats--3{grid-template-columns:1fr}}
.sec--light .stats{background:var(--line-on-light);border-color:var(--line-on-light)}
.sec--light .stats>div{background:var(--bg-light)}
.sec--light .stats>div:hover{background:#fff}
.sec--light .stats .k{color:var(--cocoa-500)}
.sec--light .stats .v{color:var(--fg-on-light-dim)}
.sec--light .stats .d{color:var(--fg-on-light-dim)}

/* ---------- Forms ---------- */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.form .f-full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:9px}
.field label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);font-weight:600}
.field label b{color:var(--magic-500);font-weight:600}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.026);border:1px solid var(--line-strong);border-radius:2px;
  padding:.86em 1em;font-size:.91rem;color:var(--fg);transition:border-color .35s,background .35s;width:100%
}
.field textarea{min-height:132px;resize:vertical;line-height:1.7}
.field input::placeholder,.field textarea::placeholder{color:#7C6E52}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--magic-500);background:rgba(245,213,17,.05)}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C79A44' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.field .err{font-size:.73rem;color:#D9603F;min-height:0;display:none}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#A8381F}
.field.bad .err{display:block}
@media(max-width:760px){.form{grid-template-columns:1fr}}
.form-note{grid-column:1/-1;font-size:.76rem;color:var(--fg-mute);line-height:1.75}
.form-ok{display:none;grid-column:1/-1;border:1px solid rgba(245,213,17,.42);background:rgba(245,213,17,.08);padding:20px 22px;border-radius:2px}
.form-ok.on{display:block;animation:fadeUp .5s var(--ease-out)}
.form-ok strong{display:block;font-family:var(--f-serif-cn);font-size:1.05rem;color:var(--magic-400)}
.form-ok p{margin-top:7px;font-size:.855rem;color:var(--fg-dim)}

/* ---------- Footer ---------- */
.footer{background:#0F0A04;border-top:1px solid var(--line);padding-top:clamp(56px,7vw,84px)}
.f-top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(26px,3.6vw,52px);padding-bottom:44px;align-items:start}
.f-brand img{height:42px;width:auto;margin-bottom:22px}
.f-about{font-size:.865rem;color:#A2937A;line-height:1.95;max-width:40ch}
.f-contact{margin-top:22px;font-size:.87rem;color:#D6C6A3;line-height:2}
.f-contact b{color:var(--magic-400);font-weight:500;font-family:var(--f-display);font-size:1.16rem;letter-spacing:.05em}
.f-col h5{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--magic-600);font-weight:600;margin-bottom:20px}
.f-col a,.f-col li{display:block;font-size:.87rem;color:#AC9D7C;padding:5.5px 0;transition:color .3s,transform .3s var(--ease)}
.f-col a:hover{color:#fff;transform:translateX(3px)}
.f-bot{border-top:1px solid var(--line);padding:26px 0 34px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.755rem;color:#968A6E;line-height:1.95}
.f-bot a:hover{color:var(--magic-400)}
.sec--light .cert{background:#fff;border-color:var(--line-on-light)}
.sec--light .cert:hover{border-color:rgba(148,64,20,.45)}
.sec--light .cert .bd{border-color:var(--line-on-light)}
.sec--light .cert .bd strong{color:var(--fg-on-light)}
.sec--light .cert .bd span{color:var(--fg-on-light-dim)}
@media(max-width:900px){.f-top{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.f-top{grid-template-columns:1fr}}

.f-qr{display:flex;gap:18px;margin-top:24px}
.f-qr figure{width:104px}
.f-qr .qr{aspect-ratio:1;background:
  linear-gradient(45deg,rgba(245,213,17,.07) 25%,transparent 25%,transparent 50%,rgba(245,213,17,.07) 50%,rgba(245,213,17,.07) 75%,transparent 75%) 0 0/14px 14px,
  #271A0A;
  border:1px dashed rgba(245,213,17,.4);border-radius:3px;
  position:relative;display:block;overflow:hidden;font-size:.615rem;color:#AC9D7C;text-align:center;letter-spacing:.08em;line-height:1.7}
.f-qr .qr img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.f-qr .qr .qr-ph{display:none;position:absolute;inset:0;place-items:center;padding:10px;background:#271A0A}
.f-qr .qr .qr-ph b{display:block;color:var(--magic-400);font-weight:600;letter-spacing:.16em;margin-bottom:4px}
.f-qr figcaption{margin-top:9px;font-size:.68rem;color:#9C8F73;text-align:center;letter-spacing:.06em}

/* ---------- Misc blocks ---------- */
.quote{border-left:2px solid var(--magic-600);padding:6px 0 6px 26px;font-family:var(--f-display);font-size:clamp(1.2rem,2.1vw,1.72rem);line-height:1.6;color:var(--cream-200);font-weight:300}
.quote cite{display:block;margin-top:16px;font-family:var(--f-sans);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute);font-style:normal}

.mediaframe{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:#1A1209;border:1px solid var(--line)}
.mediaframe img{width:100%;height:100%;object-fit:cover}
.mediaframe .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;background:linear-gradient(0deg,rgba(20,14,7,.9),transparent);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-200)}

.badge{display:inline-flex;align-items:center;gap:.5em;padding:.42em .95em;border:1px solid rgba(245,213,17,.4);border-radius:100px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--magic-400);background:rgba(245,213,17,.07)}
.badge i{width:5px;height:5px;background:currentColor;transform:rotate(45deg);flex:none}

.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.pill{padding:.4em .95em;border:1px solid var(--line-strong);border-radius:100px;font-size:.76rem;color:var(--fg-dim);letter-spacing:.04em;transition:all .3s}
.pill:hover{border-color:var(--magic-600);color:var(--magic-400)}
.sec--light .pill{border-color:var(--line-on-light);color:var(--fg-on-light-dim)}
.sec--light .pill:hover{border-color:var(--cocoa-500);color:var(--cocoa-500)}

/* ---- 浅色区块的色彩覆盖（深色配色不得渗漏到浅底） ---- */
.sec--light .quote{color:var(--fg-on-light);border-left-color:var(--magic-500)}
.sec--light .quote cite{color:var(--fg-on-light-dim)}
.sec--light .tl-date{color:var(--cocoa-600)}
.sec--light .tl-body h4{color:var(--fg-on-light)}
.sec--light .tl-body p{color:var(--fg-on-light-dim)}
.sec--light .tl-body::before{border-color:var(--cocoa-500)}
.sec--light .tl::before{background:linear-gradient(var(--cocoa-500),var(--line-on-light) 12%,var(--line-on-light) 88%,transparent)}
.sec--light .dt caption{color:var(--cocoa-600)}
.sec--light .dt .sub{color:var(--fg-on-light-dim)}
.sec--light .tnote{color:var(--fg-on-light-dim)}
.sec--light .badge{color:var(--cocoa-600);border-color:rgba(148,64,20,.42);background:rgba(148,64,20,.08)}
.sec--light .crumbs{color:var(--fg-on-light-dim)}
.sec--light .hero-scroll{color:var(--fg-on-light-dim)}
.sec--light .strip-track span{color:var(--fg-on-light-dim)}
.sec--light .quote{color:var(--fg-on-light);border-left-color:var(--magic-500)}
.sec--light .quote cite{color:var(--fg-on-light-dim)}
.sec--light .tl-date{color:var(--cocoa-500)}
.sec--light .tl-body h4{color:var(--fg-on-light)}
.sec--light .tl-body p{color:var(--fg-on-light-dim)}
.sec--light .dt caption{color:var(--cocoa-500)}
.sec--light .dt .sub{color:var(--fg-on-light-dim)}
.sec--light .feat-n{color:var(--cocoa-500)}
.sec--light .exp-card .n{color:rgba(148,64,20,.62)}
.sec--light .badge{color:#7A3410;border-color:rgba(148,64,20,.45);background:rgba(148,64,20,.08)}
.sec--light .fl-chip{background:rgba(148,64,20,.07)}
.sec--light .strip-track span{color:var(--fg-on-light-dim)}

/* split image+text */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.split.rev>:first-child{order:2}
@media(max-width:900px){.split{grid-template-columns:1fr}.split.rev>:first-child{order:0}}

.kv{display:grid;gap:0;border-top:1px solid var(--line)}
.kv div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);font-size:.885rem}
.kv dt,.kv .k{color:var(--fg-mute);font-size:.79rem;letter-spacing:.09em}
.kv dd,.kv .v{color:var(--cream-200);margin:0;line-height:1.75}
.sec--light .kv,.sec--light .kv div{border-color:var(--line-on-light)}
.sec--light .kv .k{color:var(--fg-on-light-dim)}
.sec--light .kv .v{color:var(--fg-on-light)}

/* CTA band */
.cta-band{position:relative;overflow:hidden;background:var(--ink-700);border:1px solid var(--line);border-radius:6px;padding:clamp(38px,5.5vw,72px)}
.cta-band-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18}
.cta-band::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(20,14,7,.95) 22%,rgba(20,14,7,.5))}
.cta-band>*{position:relative;z-index:2}
.cta-band .h-2{max-width:20ch}
.cta-actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- 一横一竖双图并排（比例差 2.3x 时的平衡排布）----------
   竖图占 1fr 时宽约 200px，配 2/3 原生比例可零裁切；
   横图占 1.7fr 宽约 342px，裁切幅度控制在 26% 以内。
   窄屏改为竖排，各用自己接近原生的比例。 */
.pair-row{display:grid;grid-template-columns:1.7fr 1fr;gap:12px;aspect-ratio:552/300}
.pair-row>.mediaframe{height:100%}
@media(max-width:680px){
  .pair-row{grid-template-columns:minmax(0,1fr);aspect-ratio:auto}
  .pair-row>.mediaframe:first-child{aspect-ratio:3/2}
  .pair-row>.mediaframe:last-child{aspect-ratio:3/4}
}