/* HSK321 官网样式(首页 + 文章页共用) */
:root{
  --night:oklch(0.18 0.018 42);--night2:oklch(0.225 0.024 40);--night3:oklch(0.33 0.03 40);
  --cream:oklch(0.975 0.008 75);--cream2:oklch(0.84 0.02 65);
  --clay:oklch(0.54 0.15 32);--clay-lite:oklch(0.72 0.13 40);--gold:oklch(0.79 0.11 78);--mint:oklch(0.74 0.07 168);
  --paper:#faf7f2;--paper2:#f3ece2;--ink:#2b2522;--ink2:#6b5f57;--line:#e6d9cb;
  --grad:linear-gradient(90deg,var(--clay-lite),var(--gold));
  --spring:cubic-bezier(.34,1.56,.64,1);--out:cubic-bezier(.22,1,.36,1);
  --f-d:"Plus Jakarta Sans","Noto Serif SC",sans-serif;
  --f-b:"Plus Jakarta Sans","Noto Serif SC","PingFang SC",sans-serif;
  --f-h:"Noto Serif SC","Songti SC",serif;
  --wrap:1320px;--gut:clamp(20px,4vw,60px);
  font-synthesis:none;line-break:strict;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--night);color:var(--cream);font:400 17px/1.65 var(--f-b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--f-d);font-weight:800;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
.zh{font-family:var(--f-h);letter-spacing:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.eyebrow{display:flex;gap:12px;align-items:center;font:600 13px/1 var(--f-b);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.eyebrow i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--cream2)}
.paper .eyebrow{color:var(--clay)} .paper .eyebrow i{color:var(--ink2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font:700 16px/1 var(--f-b);text-decoration:none;transition:transform .35s var(--spring),background .2s,box-shadow .3s}
.btn:hover{transform:translateY(-3px) scale(1.02)} .btn:active{transform:scale(.97)}
.btn-main{background:var(--clay);color:var(--cream);box-shadow:0 10px 30px -12px oklch(0.54 0.15 32/.8)}
.btn-main:hover{background:oklch(0.5 0.15 32)}
.btn-main small{font-weight:500;opacity:.85;font-size:14px}
.btn-ghost{border:1.5px solid oklch(0.975 0.008 75/.35)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.paper .btn-ghost{border-color:var(--line);color:var(--ink)}
.ph{position:relative;display:grid;place-items:center;text-align:center;padding:16px;background:repeating-linear-gradient(135deg,oklch(0.25 0.025 40) 0 14px,oklch(0.235 0.024 40) 14px 28px);color:var(--cream2);font:500 13px/1.45 var(--f-b);border-radius:18px;overflow:hidden}
.ph b{display:block;color:var(--cream);font-size:15px;font-weight:700}
.paper .ph{background:repeating-linear-gradient(135deg,#efe6da 0 14px,#ebe1d4 14px 28px);color:var(--ink2)} .paper .ph b{color:var(--ink)}
.vf::before,.vf::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--gold);opacity:.8}
.vf::before{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.vf::after{bottom:14px;right:14px;border-left:0;border-top:0;border-radius:0 0 8px 0}
.tag{display:inline-block;font:600 12px/1 var(--f-b);letter-spacing:.06em;padding:6px 10px;border-radius:999px;background:oklch(0.975 0.008 75/.1);color:var(--cream2)}
.paper .tag{background:var(--paper2);color:var(--ink2)}
.todo{color:var(--gold);font-weight:600} .paper .todo{color:var(--clay)}

/* 顶栏 */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s}
.nav.solid{background:oklch(0.18 0.018 42/.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 oklch(0.975 0.008 75/.08)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 22px/1 var(--f-d);letter-spacing:-.01em}
.seal{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--clay);font:900 22px/1 var(--f-h);color:var(--cream)}
.seal::after{content:"";position:absolute;right:5px;bottom:5px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.links{display:flex;gap:4px;margin-left:auto;list-style:none}
.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;text-decoration:none;font:600 15px/1 var(--f-b);color:var(--cream2);transition:color .2s,background .2s}
.links a:hover{color:var(--cream);background:oklch(0.975 0.008 75/.07)}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav .btn{min-height:44px;padding:0 20px;font-size:15px}
.wa-ic{width:22px;height:22px;flex:none;display:none}
.nav-main.is-wa .wa-ic{display:none}
.menu-btn{display:none;min-width:44px;min-height:44px;border-radius:12px;border:1.5px solid oklch(0.975 0.008 75/.25);font-weight:700;font-size:14px;padding:0 12px}

/* 首屏 */
.hero{position:relative;padding-top:96px;min-height:100svh;display:flex;flex-direction:column}
.hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;align-items:start;flex:1}
.hero-copy{grid-column:1/9;padding-top:28px;position:relative;z-index:2}
.hero h1{font-size:clamp(46px,1.6rem + 4.6vw,96px);margin:20px 0 22px;max-width:15ch}
.m-only{display:none} .links.open .m-only{display:block}
.hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{font-size:clamp(17px,1rem + .35vw,20px);max-width:36em;color:var(--cream2)}
.gloss{position:relative;color:var(--cream);font-weight:700;border-bottom:2px dotted var(--gold);cursor:help}
.gloss::after{content:attr(data-gloss);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px) scale(.9);white-space:nowrap;padding:8px 12px;border-radius:12px;background:var(--cream);color:var(--ink);font:600 14px/1 var(--f-b);opacity:0;pointer-events:none;transition:.35s var(--spring)}
.gloss:hover::after,.gloss:focus::after{opacity:1;transform:translate(-50%,0) scale(1)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-photo{grid-column:9/13;grid-row:1;position:relative;z-index:3;margin-top:8px;max-width:330px;justify-self:end;width:100%}
.hero-photo .ph{aspect-ratio:4/5;border-radius:28px;box-shadow:0 40px 80px -30px #000}
.hero-photo figcaption{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font:600 14px/1.3 var(--f-b);color:var(--cream2)}
.voice{position:absolute;left:18px;right:18px;bottom:18px;height:44px;display:flex;align-items:center;gap:3px;padding:0 14px;border-radius:14px;background:oklch(0.18 0.018 42/.75);backdrop-filter:blur(6px)}
.voice span{flex:1;height:calc(var(--h)*100%);min-height:3px;border-radius:3px;background:var(--grad);transform-origin:center;animation:vb 1.6s var(--d) ease-in-out infinite alternate}
@keyframes vb{from{transform:scaleY(.35)}to{transform:scaleY(1)}}

/* 声调带 = 签名 */
.band{position:relative;margin-top:clamp(20px,3vh,36px);padding-bottom:18px;user-select:none}
.band-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.band-in{position:relative}
.band-cap{display:flex;justify-content:space-between;gap:16px;font:600 13px/1.3 var(--f-b);letter-spacing:.06em;color:var(--cream2);padding-bottom:8px}
.band-cap b{color:var(--gold);font-weight:700}
.band-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2vw,32px)}
.tone{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding-top:clamp(92px,11vh,130px);text-align:left;border-radius:18px;min-height:44px}
.tone .py{position:relative;z-index:0;font:800 clamp(52px,1.5rem + 6vw,120px)/.9 var(--f-d);letter-spacing:-.03em;color:oklch(0.975 0.008 75/.5);transition:color .3s;display:inline-block}
.tone .gl{margin-top:10px;font:600 14px/1.3 var(--f-b);color:var(--cream2);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.tone .gl b{font:700 22px/1 var(--f-h);color:var(--cream)}
.tone:hover .py,.tone.on .py{color:var(--cream)}
.tone.hit .py{animation:boing .7s var(--spring)}
@keyframes boing{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-10px) scale(1.06,.94)}60%{transform:translateY(2px) scale(.98,1.03)}100%{transform:none}}
.curve{fill:none;stroke-linecap:round;stroke-linejoin:round}
.curve.halo{stroke:var(--night);stroke-width:22}
.curve.main{stroke:url(#gTone);stroke-width:9;transition:opacity .4s,stroke-width .4s var(--spring)}
.band.focus .curve.main{opacity:.35} .band.focus .curve.main.on{opacity:1;stroke-width:12}
.staff line{stroke:oklch(0.975 0.008 75/.1);stroke-width:1}
.staff text{fill:var(--cream2);font:600 12px var(--f-b)}
.dot{fill:var(--cream);opacity:0;filter:drop-shadow(0 0 10px oklch(0.79 0.11 78/.9))}
.playhead{stroke:var(--gold);stroke-width:1.5;stroke-dasharray:3 5;opacity:0}

/* 通用段落 */
section{position:relative}
.sec{padding:clamp(80px,11vw,150px) 0}
.paper{background:var(--paper);color:var(--ink)}
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-bottom:clamp(40px,5vw,72px)}
.sec-head .eyebrow{grid-column:1/-1}
.sec-head h2{grid-column:1/9;font-size:clamp(36px,1.4rem + 3.6vw,76px)}
.sec-head p{grid-column:9/13;align-self:end;color:var(--cream2)}
.paper .sec-head p{color:var(--ink2)}

/* Joanna */
.jo{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.jo .ph{grid-column:1/8;aspect-ratio:3/2;border-radius:28px}
.jo-side{grid-column:8/13}
.quote{font:600 clamp(22px,1rem + 1.2vw,30px)/1.4 var(--f-d);letter-spacing:-.01em}
.quote::before{content:"“";display:block;font:800 90px/.6 var(--f-d);color:var(--gold);margin-bottom:8px}
.draft{margin-top:14px;font-size:14px;color:var(--gold)}
.player{display:flex;align-items:center;gap:14px;margin:30px 0;padding:10px 16px 10px 10px;border-radius:999px;background:var(--night2)}
.play{flex:none;width:52px;height:52px;border-radius:50%;background:var(--cream);color:var(--night);display:grid;place-items:center;transition:transform .35s var(--spring)}
.play:hover{transform:scale(1.08)}
.play svg{width:18px;height:18px}
.wave{flex:1;display:flex;align-items:center;gap:2px;height:40px}
.wave span{flex:1;height:calc(var(--h)*100%);background:oklch(0.975 0.008 75/.3);border-radius:2px;transition:background .2s}
.wave span.p{background:var(--gold)}
.player small{display:block;font-size:13px;color:var(--cream2)}
.creds{display:grid;gap:0;border-top:1px solid var(--night3)}
.creds div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--night3);font-size:15px}
.creds dt{color:var(--cream2)} .creds dd{color:var(--gold);font-weight:600;text-align:right}

/* 测评 */
.test{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.test-copy{grid-column:1/6;position:sticky;top:110px}
.test-copy h2{font-size:clamp(38px,1.4rem + 3.4vw,72px);margin:20px 0}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 30px}
.facts li{padding:10px 16px;border-radius:999px;background:var(--paper2);font-weight:600;font-size:15px}
.quiz{grid-column:7/13;background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(20px,3vw,36px);box-shadow:0 30px 60px -40px oklch(0.4 0.05 40/.5)}
.quiz-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.quiz h3{font-size:clamp(22px,1rem + 1vw,28px);letter-spacing:-.01em}
.score{font:700 15px/1 var(--f-b);font-variant-numeric:tabular-nums;color:var(--clay)}
.quiz .how{color:var(--ink2);font-size:15px;margin-bottom:22px}
.chars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ch{position:relative;border:1.5px solid var(--line);border-radius:20px;padding:14px 8px 10px;text-align:center;transition:border-color .2s,background .2s,transform .4s var(--spring)}
.ch .pick{display:block;width:100%;min-height:96px;border-radius:14px}
.ch .hz{display:block;font:700 44px/1.1 var(--f-h)}
.ch .pyq{display:block;font:700 18px/1.2 var(--f-d);color:var(--ink2);margin-top:2px}
.ch .mean{display:block;font-size:14px;color:var(--ink2)}
.ch .say{margin-top:6px;min-height:44px;padding:0 12px;border-radius:999px;font:600 14px/1 var(--f-b);color:var(--clay)}
.ch .say:hover{background:var(--paper2)}
.ch.sel{border-color:var(--clay);background:#fff7f3;transform:translateY(-4px)}
.ch.ok{border-color:var(--mint);background:#f1f8f5}
.ch.ok .pyq{color:#2f6b57}
.ch svg{display:block;width:70%;margin:4px auto 0;height:26px}
.tones{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.tb{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 14px 8px 8px;border:1.5px solid var(--line);border-radius:18px;text-align:left;transition:border-color .2s,transform .4s var(--spring),opacity .3s}
.tb svg{flex:none;width:84px;height:48px;background:var(--paper);border-radius:12px}
.tb b{display:block;font-size:15px} .tb span{font-size:14px;color:var(--ink2)}
.tb:hover{border-color:var(--clay)} .tb.sel{border-color:var(--clay);background:#fff7f3}
.tb.used{opacity:.4;pointer-events:none}
.qs line{stroke:#e8ddd0;stroke-width:1}
.qc{fill:none;stroke:var(--clay);stroke-width:4;stroke-linecap:round}
.ch.ok .qc{stroke:#3f8a70}
.shake{animation:shake .45s ease}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.feedback{min-height:52px;margin-top:16px;font-size:15px;color:var(--ink2)}
.feedback.good{color:#2f6b57;font-weight:600}
.done{display:none;margin-top:4px;padding:20px;border-radius:20px;background:var(--ink);color:var(--cream)}
.done.show{display:block;animation:pop .6s var(--spring)}
.done p{margin-bottom:14px}
.done .row{display:flex;flex-wrap:wrap;gap:10px}
.done .btn-ghost{border-color:oklch(0.975 0.008 75/.35);color:var(--cream)}
@keyframes pop{from{transform:scale(.92);opacity:0}}

/* 课程路径 */
.route{position:relative;height:500px;margin-top:20px}
.route svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route .rline{fill:none;stroke:url(#gRoute);stroke-width:8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--out)}
.route.in .rline{stroke-dashoffset:0}
.route .grid line{stroke:oklch(0.975 0.008 75/.08)}
.st{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)/350*100%);list-style:none}
.st::before{content:"";position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:var(--night);border:4px solid var(--gold);transform:scale(0);transition:transform .6s var(--spring) calc(.25s + var(--n)*.3s)}
.route.in .st::before{transform:scale(1)}
.st a{position:absolute;left:-60px;bottom:22px;width:120px;text-align:center;text-decoration:none;padding:6px;border-radius:14px;opacity:0;transform:translateY(10px);transition:opacity .5s calc(.4s + var(--n)*.3s),transform .6s var(--spring) calc(.4s + var(--n)*.3s),background .2s}
.route.in .st a{opacity:1;transform:none}
.st a:hover{background:oklch(0.975 0.008 75/.07)}
.st .lv{display:block;font:800 30px/1 var(--f-d);letter-spacing:-.02em}
.st .vc{display:block;font:700 15px/1.3 var(--f-b);color:var(--gold);font-variant-numeric:tabular-nums}
.st .tg{display:block;font-size:13px;color:var(--cream2)}
.yct{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:48px;padding:22px 26px;border-radius:24px;background:var(--night2)}
.yct h3{font-size:24px}
.yct ol{display:flex;gap:8px;list-style:none;flex-wrap:wrap}
.yct li{padding:8px 14px;border-radius:999px;border:1.5px dashed var(--gold);font-weight:700;font-size:15px}
.yct p{flex:1 1 260px;color:var(--cream2);font-size:15px}
.note30{margin-top:18px;font-size:15px;color:var(--cream2)}

/* 怎么教 */
.how3{display:grid;gap:0;border-top:1px solid var(--night3)}
.how-row{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:clamp(36px,4vw,56px) 0;border-bottom:1px solid var(--night3);align-items:center}
.how-row .num{grid-column:1/2;font:800 20px/1 var(--f-d);color:var(--gold);align-self:start;padding-top:10px}
.how-row .txt{grid-column:2/7}
.how-row h3{font-size:clamp(28px,1rem + 1.8vw,44px);margin-bottom:14px}
.how-row p{color:var(--cream2)}
.how-row .vis{grid-column:8/13}
.trio{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:baseline;padding:24px 28px;border-radius:24px;background:var(--night2)}
.trio .zh{font-size:44px;font-weight:700}
.trio .p{font:700 22px/1 var(--f-d);color:var(--gold)}
.trio .id{grid-column:2;font-size:17px;color:var(--cream)}
.phone{width:min(260px,70%);aspect-ratio:9/17;margin:0 auto;border-radius:36px;border:10px solid var(--night2);box-shadow:0 30px 60px -30px #000}
.stamps{display:flex;gap:18px;flex-wrap:wrap}
.stamp{display:flex;align-items:center;gap:14px;padding:14px 20px 14px 14px;border-radius:20px;background:var(--night2);transform:rotate(var(--r));transition:transform .5s var(--spring)}
.stamp:hover{transform:rotate(0) scale(1.03)}
.stamp .seal{width:52px;height:52px;font-size:28px;border-radius:14px}
.stamp b{display:block;font-size:15px} .stamp span{font-size:14px;color:var(--cream2)}

/* 团队 */
.team{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.mem{display:flex;flex-direction:column;gap:14px}
.mem .ph{border-radius:24px}
.mem h3{font-size:28px;letter-spacing:-.01em}
.mem h3 .zh{font-size:22px;font-weight:500;color:var(--ink2);margin-left:6px}
.mem p{color:var(--ink2);font-size:15px}
.mem.lead{grid-column:1/7;grid-row:span 2} .mem.lead .ph{aspect-ratio:4/5}
.mem.sm{grid-column:span 3} .mem.sm .ph{aspect-ratio:1}
.mem.more{grid-column:7/13;align-self:start;flex-direction:row;align-items:center;gap:20px;padding:24px;border:2px dashed var(--line);border-radius:24px;color:var(--ink2)}
.mem.more .plus{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--paper2);font:800 32px/1 var(--f-d);color:var(--clay)}
.role{font:700 13px/1 var(--f-b);letter-spacing:.1em;text-transform:uppercase;color:var(--clay)}

/* 资讯 */
.news{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.exam{grid-column:1/6;grid-row:span 2;display:flex;flex-direction:column;gap:18px;padding:clamp(24px,3vw,40px);border-radius:28px;background:var(--night);color:var(--cream)}
.exam h3{font-size:clamp(30px,1rem + 2vw,48px)}
.exam dl div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--night3);font-size:15px}
.exam dt{color:var(--cream2)} .exam dd{font-weight:700;text-align:right}
.exam .todo,.exam .eyebrow{color:var(--gold)}
.exam .btn{margin-top:auto;align-self:flex-start}
.art{display:grid;grid-template-columns:160px 1fr;gap:20px;align-items:start;padding:18px;border-radius:24px;text-decoration:none;transition:background .2s,transform .4s var(--spring)}
.art:hover{background:var(--paper2);transform:translateY(-3px)}
.art .ph{aspect-ratio:1;border-radius:18px;font-size:12px}
.art h3{font-size:22px;line-height:1.2;letter-spacing:-.01em;margin:10px 0 8px}
.art p{font-size:15px;color:var(--ink2)}
.art.big{grid-column:6/13;grid-template-columns:1fr 1fr}
.art.big .ph{aspect-ratio:4/3;background:var(--night)} .art.big h3{font-size:28px}
.art.half{grid-column:span 7} .news .art.half:last-child{grid-column:6/13}
.thumb svg{width:100%;height:100%}

/* FAQ */
.faq{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.faq .sec-head{grid-column:1/5;display:block} .faq .sec-head h2{font-size:clamp(36px,1.4rem + 3vw,64px);margin-top:18px}
.qa{grid-column:6/13;border-top:1.5px solid var(--ink)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:72px;cursor:pointer;list-style:none;font:700 clamp(19px,1rem + .5vw,23px)/1.3 var(--f-d)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:14px;height:14px;border-right:2.5px solid var(--clay);border-bottom:2.5px solid var(--clay);transform:rotate(45deg) translateY(-4px);transition:transform .4s var(--spring)}
.qa details[open] summary::after{transform:rotate(-135deg)}
.qa .ans{padding:0 0 24px;color:var(--ink2);max-width:40em}
.qa .ans strong{color:var(--ink)}

/* 页脚 */
.foot{padding:clamp(80px,10vw,130px) 0 40px}
.bye{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 32px;padding-bottom:56px;border-bottom:1px solid var(--night3)}
.bye .zh{font-size:clamp(64px,2rem + 8vw,150px);font-weight:900;line-height:1}
.bye .p{font:800 clamp(28px,1rem + 2vw,48px)/1 var(--f-d);color:var(--gold)}
.bye p{flex-basis:100%;color:var(--cream2);max-width:34em}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;padding:48px 0}
.fcols h4{font:700 13px/1 var(--f-b);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.fcols ul{list-style:none}
.fcols li a,.fcols li span{display:inline-flex;align-items:center;min-height:40px;text-decoration:none;color:var(--cream2);font-size:15px}
.fcols li a:hover{color:var(--cream)}
.flogo{width:56px;height:56px;border-radius:14px;margin-bottom:14px}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--cream2)}

/* 入场与滚动显现 */
.in-seq{opacity:0;transform:translateY(24px);animation:rise .9s var(--spring) forwards;animation-delay:calc(var(--i)*110ms + 150ms)}
@keyframes rise{to{opacity:1;transform:none}}
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s var(--out),transform .9s var(--out)}
[data-reveal].in{opacity:1;transform:none}

/* 手机 390 */
@media (max-width:1080px){
  .links{display:none} .menu-btn{display:inline-flex;align-items:center}
  .nav-cta{margin-left:auto}
  .links.open{display:flex;position:fixed;top:72px;left:0;right:0;flex-direction:column;gap:0;padding:12px var(--gut) 24px;background:var(--night);border-bottom:1px solid var(--night3)}
  .links.open a{min-height:52px;font-size:18px;color:var(--cream)}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav .wrap{height:64px;gap:10px} .brand{font-size:19px} .seal{width:34px;height:34px;font-size:19px}
  .nav .btn{padding:0 16px}
  /* 手机顶栏:品牌 · Masuk · WhatsApp 图标 · Menu(登录要一眼看到) */
  .nav-cta{gap:8px}
  .nav-cta .masuk{display:inline-flex;padding:0 14px;border-color:oklch(0.975 0.008 75/.6);color:var(--cream)}
  .nav.light .nav-cta .masuk{border-color:var(--ink);color:var(--ink)}
  .nav-main:not(.is-wa){display:none}
  .nav-main.is-wa{width:44px;padding:0} .nav-main.is-wa .t{display:none} .nav-main.is-wa .wa-ic{display:block}
  .menu-btn{padding:0 10px}
  .links.open{top:64px}
  .hero{padding-top:84px;min-height:auto}
  .hero-grid{display:block;position:relative}
  .hero-copy{padding-top:6px}
  .hero-photo{position:absolute;top:0;right:0;width:104px;margin:0}
  .hero-photo .ph{border-radius:18px;padding:8px;font-size:12px;line-height:1.3} .hero-photo .ph b{font-size:12px}
  .hero-photo .voice,.hero-photo figcaption span:last-child{display:none}
  .hero-photo figcaption{font-size:12px;margin-top:6px}
  .hero .eyebrow{display:block;max-width:calc(100% - 120px);line-height:1.5;font-size:12px} .hero .eyebrow i{white-space:nowrap} .hero-photo .hint{display:none}
  .hero h1{font-size:clamp(42px,12.4vw,58px);margin:44px 0 18px}
  .ctas{flex-direction:column} .ctas .btn{width:100%}
  .band-cap span:last-child{display:none}
  .tone{padding-top:104px} .tone .py{font-size:44px} .tone .gl{flex-direction:column;gap:2px;font-size:13px} .tone .gl b{font-size:20px}
  .curve.halo{stroke-width:14} .curve.main{stroke-width:6} .band.focus .curve.main.on{stroke-width:8}
  .sec-head{display:block} .sec-head h2{margin:16px 0 14px}
  .jo,.test,.team,.news,.faq{display:flex;flex-direction:column;gap:24px}
  .jo .ph{width:100%}
  .test-copy{position:static}
  .quiz{width:100%;padding:18px;border-radius:24px}
  .chars{grid-template-columns:repeat(2,1fr)}
  .tones{grid-template-columns:1fr}
  .route{height:auto;margin-top:0}
  .route svg{display:none}
  .route ol{display:grid;gap:10px;border-left:4px solid;border-image:linear-gradient(var(--clay-lite),var(--gold)) 1;padding-left:18px}
  .st{position:relative;left:auto;top:auto}
  .st::before{left:-29px;top:50%;margin-top:-11px}
  .st a{position:relative;left:auto;bottom:auto;width:auto;display:grid;grid-template-columns:96px 1fr;align-items:center;text-align:left;padding:10px 12px;background:var(--night2)}
  .st .vc{grid-column:2;grid-row:1} .st .tg{grid-column:2}
  .st .bar{grid-column:1/-1;height:6px;margin-top:8px;border-radius:3px;width:calc(20% + var(--k)*80%);background:var(--grad)}
  .how-row{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .how-row .num{padding:0}
  .mem.sm{flex-direction:row;align-items:center} .mem.sm .ph{width:112px;flex:none}
  .mem.more{flex-direction:row}
  .art,.art.big{grid-template-columns:96px 1fr;padding:12px 0}
  .art.big .ph{aspect-ratio:1}
  .art h3,.art.big h3{font-size:19px}
  .fcols{grid-template-columns:1fr 1fr} .fcols>div:first-child{grid-column:1/-1}
}
@media (min-width:761px){.st .bar{display:none}}

/* ===== v2 · 首屏以下全部纸色 ===== */
.paper.alt{background:var(--paper2)}
.paper .sec-head .eyebrow{color:var(--clay)} .paper .sec-head .eyebrow i{color:var(--ink2)}  /* 修:.paper .sec-head p 优先级更高,把小标题盖成了灰色 */
.paper .quiz{background:#fff}
.paper.alt .facts li{background:#fff}
/* 接缝:第三声曲线,暗 → 纸 */
.seam{position:relative;background:var(--night);line-height:0;margin-bottom:-1px}
.seam svg{display:block;width:100%;height:clamp(56px,8vw,140px)}
.seam-fill{fill:var(--paper)}
.seam-line{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--out)}
.seam.in .seam-line{stroke-dashoffset:0}
/* Joanna */
.paper .vf::before,.paper .vf::after{border-color:var(--clay)}
.paper .quote::before{color:var(--clay)}
.paper .draft{color:var(--clay)}
.paper .player{background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px -22px oklch(0.4 0.05 40/.5)}
.paper .play{background:var(--clay);color:var(--cream)}
.paper .wave span{background:oklch(0.54 0.15 32/.22)} .paper .wave span.p{background:var(--clay)}
.paper .player small{color:var(--ink2)}
.paper .creds,.paper .creds div{border-color:var(--line)}
.paper .creds dt{color:var(--ink2)} .paper .creds dd{color:var(--clay)}
/* 课程路径 */
.paper .route .grid line{stroke:oklch(0.3 0.03 40/.09)}
.paper .st::before{background:var(--paper);border-color:var(--lv,var(--clay))}
.paper .st a:hover{background:#fff}
.paper .st .vc{color:var(--lv,var(--clay))} .paper .st .lv{color:var(--lv,var(--ink))} .paper .st .tg{color:var(--ink2)}
.paper .yct{background:#fff;border:1px solid var(--line)}
.paper .yct li{border-color:var(--clay);color:var(--clay)}
.paper .yct p,.paper .note30{color:var(--ink2)}
/* 怎么教 */
.paper .how3,.paper .how-row{border-color:var(--line)}
.paper .how-row .num{color:var(--clay)}
.paper .how-row p{color:var(--ink2)}
.paper .trio{background:#fff;border:1px solid var(--line)}
.paper .trio .p{color:var(--clay)} .paper .trio .id{color:var(--ink)}
.paper .phone{border-color:#fff;box-shadow:0 30px 60px -30px oklch(0.4 0.05 40/.45)}
.paper .stamp{background:#fff;box-shadow:0 14px 30px -20px oklch(0.4 0.05 40/.55)}
.paper .stamp span{color:var(--ink2)}
/* 考试卡:陶土红 */
.paper .exam{background:var(--clay);color:var(--cream)}
.paper .exam .eyebrow,.paper .exam .todo{color:oklch(0.93 0.05 75)}
.paper .exam dl div{border-color:oklch(0.975 0.008 75/.25)}
.paper .exam dt{color:oklch(0.975 0.008 75/.8)}
.paper .exam .btn-main{background:var(--cream);color:var(--ink);box-shadow:none}
.paper .exam .btn-main:hover{background:#fff}
.paper .art.big .ph{background:var(--clay)}
/* 页脚 */
.paper .bye{border-color:var(--line)}
.paper .bye .p{color:var(--clay)} .paper .bye p{color:var(--ink2)}
.paper .fcols h4{color:var(--clay)}
.paper .fcols li a,.paper .fcols li span{color:var(--ink2)}
.paper .fcols li a:hover{color:var(--clay)}
.paper .legal{color:var(--ink2)}
/* 顶栏:滚过首屏后变纸色 */
.nav.light{background:oklch(0.975 0.008 75/.9);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.nav.light .links a{color:var(--ink2)} .nav.light .links a:hover{color:var(--ink);background:var(--paper2)}
.nav.light .btn-ghost{border-color:var(--line);color:var(--ink)} .nav.light .btn-ghost:hover{border-color:var(--clay);color:var(--clay)}
.nav.light .menu-btn{border-color:var(--line)}
@media (max-width:1080px){.nav.light .links.open{background:var(--paper);border-color:var(--line)} .nav.light .links.open a{color:var(--ink)}}
@media (max-width:760px){.paper .st a{background:#fff;border:1px solid var(--line)} .paper .route ol{border-image:linear-gradient(var(--lv-hsk1),var(--lv-hsk2),var(--lv-hsk3),var(--lv-hsk4),var(--lv-hsk5),var(--lv-hsk6)) 1}}

/* 插画填满框 */
.ph.has-img{padding:0;background:var(--paper2)}
.ph > img.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-photo .ph.has-img{background:var(--night2)}
/* 可点发音的字 */
.hear{cursor:pointer;border-bottom:1.5px dotted currentColor;border-radius:2px;transition:color .2s}
.hear:hover{color:var(--clay)} .nav .hear:hover,.hero .hear:hover{color:var(--gold)}
.hearing,.gloss.hearing{display:inline-block;animation:boing .6s var(--spring)}
/* 学生区界面(真实组件,不是截图) */
.app-mock{display:flex;flex-direction:column;gap:6px;padding:16px 12px;background:#faf7f2;border-color:#fff;overflow:hidden;text-align:left}
.am-top{display:flex;align-items:center;gap:6px;font:800 13px/1 var(--f-d);padding-bottom:8px;border-bottom:1px solid var(--line)}
.am-top img{width:20px;height:20px;border-radius:6px}
.am-sub{font-size:11px;color:var(--ink2);margin-top:4px}
.am-title{font:800 16px/1.2 var(--f-d);letter-spacing:-.01em}
.am-title .zh{display:block;font-size:13px;font-weight:500;color:var(--ink2);margin-top:2px}
.am-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;border-radius:10px;background:var(--paper2);font:600 11px/1 var(--f-b);text-align:center;margin:4px 0}
.am-tabs span{padding:6px 0;border-radius:8px;color:var(--ink2)} .am-tabs .on{background:#fff;color:var(--ink);box-shadow:0 1px 3px #0000001a}
.am-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.am-grid button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line);transition:transform .35s var(--spring),box-shadow .2s}
.am-grid button:hover{box-shadow:0 0 0 1.5px var(--clay)} .am-grid button:active{transform:scale(.95)}
.am-grid button.hearing{animation:boing .6s var(--spring);box-shadow:0 0 0 2px var(--clay);background:#fff7f3}
.am-grid b{font:700 20px/1.1 var(--f-h)} .am-grid i{font:700 11px/1.2 var(--f-b);font-style:normal;color:var(--clay)} .am-grid small{font-size:10px;color:var(--ink2)}
.am-hint{font-size:10px;color:var(--ink2);text-align:center;margin-top:auto}
/* 团队:行高按内容走,右列不再被 Joanna 大图撑出空白;职位标签被 .mem p 盖成灰色,改回陶土红 */
.team{grid-template-rows:auto 1fr}
.mem.lead .ph{aspect-ratio:1/1}
.mem.more{align-self:start}
.mem .role{color:var(--clay)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .in-seq,[data-reveal]{opacity:1;transform:none}
  .route .rline,.seam-line{stroke-dashoffset:0}
  .st::before{transform:scale(1)} .st a{opacity:1;transform:none}
}

/* ===== 去 AI 味(2026-09-27):一种字体、正常字距、不弹跳、不每段套模板 ===== */
h1,h2,h3{font-weight:700;letter-spacing:-.01em;line-height:1.12}
h2{font-size:clamp(30px,1.1rem + 2.2vw,48px)}
.btn{transition:background .2s,border-color .2s,color .2s}
.btn:hover,.btn:active{transform:none}
.btn-main{box-shadow:none}
.kicker{font-size:15px;color:var(--cream2);display:flex;gap:10px;align-items:baseline}
.kicker .zh{font-style:normal}
.hero h1{font-size:clamp(40px,1.4rem + 3.8vw,76px);max-width:13ch;margin:18px 0 22px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-photo .ph{box-shadow:none;border-radius:6px}
.hero-photo figcaption{display:block;margin-top:10px;font:500 14px/1.3 var(--f-b);color:var(--cream2)}
.ph{border-radius:6px}
/* Joanna */
.jo{display:grid;grid-template-columns:repeat(12,1fr);gap:24px 48px;align-items:center}
.jo .ph{grid-column:1/8;aspect-ratio:3/2}
.jo-side{grid-column:8/13}
.jo-side h2{margin-bottom:16px}
.jo-side p{color:var(--ink2)}
.jo-side p + p{margin-top:14px}
.paper .player{box-shadow:none}
/* 通用段落开头:标题 + 一段说明,左对齐,不再三栏模板 */
.h-left{max-width:18ch;margin-bottom:14px}
.intro{max-width:40em;color:var(--ink2);margin-bottom:28px}
.test-copy h2{margin:0 0 16px}
.test-copy p{color:var(--ink2);margin-bottom:14px;max-width:32em}
.test-copy .btn{margin-top:8px}
.yct{display:block;padding:20px 24px;border-radius:8px}
.yct h3{font-size:20px;margin-bottom:6px}
.note30 a,.qa .ans a,.bye p a{color:var(--clay);font-weight:600}
/* 怎么教:两栏,不编号 */
.how2{display:grid;grid-template-columns:repeat(12,1fr);gap:24px 48px;align-items:center}
.how-a{grid-column:1/7}
.how-a h2{margin-bottom:16px}
.how-a > p{color:var(--ink2);max-width:34em;margin-bottom:28px}
.how2 .app-mock{grid-column:8/12;justify-self:center}
.small-note{margin-top:18px;font-size:14px;color:var(--ink2)}
/* 团队 */
.team{margin-top:28px}
/* FAQ */
.faq h2{grid-column:1/5;align-self:start}
/* 文章 */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:28px}
.post{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit}
.post .ph{aspect-ratio:3/2}
.post .cat{font-size:13px;color:var(--clay);font-weight:600}
/* 两行截断:标题 / 摘要长短不一时卡片还是一样高,不会有的卡矮有的卡堆很多行 */
.post h3{font-size:21px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post p{font-size:15px;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post:hover h3{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}

/* 首页文章轮播(040):手机原生滑动(overflow-x + scroll-snap);桌面左右箭头,滑到头就灰掉 */
.art-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.art-head h2{margin:0}
.art-all{font:700 15px/1 var(--f-b);color:var(--clay);white-space:nowrap}
.artcs-wrap{position:relative;margin-top:24px}
.artcs{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:1px;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.artcs::-webkit-scrollbar{display:none}
.artcs .post{flex:0 0 300px;scroll-snap-align:start}
.artcs-btn{position:absolute;top:calc(50% - 46px);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 28px -16px rgba(43,37,34,.35);transition:opacity .2s}
.artcs-btn svg{width:20px;height:20px}
.artcs-btn.prev{left:-22px}
.artcs-btn.next{right:-22px}
.artcs-btn:disabled{opacity:0;pointer-events:none}
@media (max-width:1080px){.artcs-btn{display:none}}
@media (max-width:760px){
  .jo,.how2{display:flex;flex-direction:column;gap:24px}
  .jo .ph{width:100%}
  .how2 .app-mock{align-self:center}
  .news{grid-template-columns:1fr}
  .artcs .post{flex-basis:78vw}
  .hero h1{font-size:clamp(38px,11vw,52px);margin:40px 0 16px}
}

/* ===== 文章页 ===== */
body.paper{background:var(--paper)}
.article{max-width:760px;padding-top:120px;padding-bottom:80px}
.a-meta{font-size:14px;color:var(--ink2);margin-bottom:14px}
.a-meta a{color:var(--clay);font-weight:600;text-decoration:none}
.article h1{font-size:clamp(32px,1.1rem + 2.6vw,48px);margin-bottom:16px}
.a-lede{font-size:19px;color:var(--ink2);margin-bottom:28px}
.article .cover{display:block;width:100%;height:auto;border-radius:6px;margin-bottom:36px}
.md{font-size:17px;line-height:1.75}
.md h2{font-size:26px;margin:40px 0 12px}
.md h3{font-size:20px;margin:28px 0 8px}
.md p,.md ul,.md ol{margin:0 0 16px}
.md ul,.md ol{padding-left:1.3em}
.md li{margin-bottom:6px}
.md a{color:var(--clay);text-underline-offset:3px}
.md strong{font-weight:700}
.md table{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:15px}
.md th,.md td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.md th{font-weight:700;background:var(--paper2)}
.md blockquote{border-left:3px solid var(--clay);padding:4px 0 4px 16px;color:var(--ink2);margin:0 0 16px}
.a-cta{margin-top:48px;padding:24px;border-radius:8px;background:#fff;border:1px solid var(--line)}
.a-cta p{margin-bottom:14px}
.foot .legal a{color:var(--clay)}
@media (max-width:760px){
  .article{padding-top:80px;padding-bottom:48px}
  .a-meta{font-size:13px;margin-bottom:8px}
  .article h1{font-size:26px;line-height:1.22;margin-bottom:10px}
  .a-lede{font-size:16px;line-height:1.55;margin-bottom:14px}
  .article .a-fig{margin-bottom:12px}
  .article .a-fig img{max-height:210px;object-fit:cover}
  .a-tip{margin:0 0 14px;font-size:12px}
  .md{font-size:16px;line-height:1.65}
  .md h2{font-size:20px;line-height:1.3;margin:26px 0 8px}
  .md h3{font-size:17px;margin:18px 0 6px}
  .md p,.md ul,.md ol{margin:0 0 12px}
  .md li{margin-bottom:4px}
  .md .a-fig{margin:16px 0}
  .md table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:14px}
  .md th,.md td{padding:8px 10px}
  .md,.a-lede,.article h1{overflow-wrap:anywhere}
  .a-cta{margin-top:28px;padding:16px}
  .a-next{margin-top:28px;padding-top:12px}
  .a-src{margin-top:28px}
}

/* 首屏放横幅上课场景(浅色单人线稿放暗底像鬼);Joanna 人像挪到米白段 */
.hero-copy{grid-column:1/7}
.hero-photo{grid-column:7/13;max-width:none;justify-self:stretch;margin-top:40px}
.hero-photo .ph{aspect-ratio:3/2}
.jo .ph{grid-column:2/6;aspect-ratio:4/5}
.jo-side{grid-column:7/12}
@media (max-width:760px){
  .hero-photo{position:static;width:100%;margin:28px 0 0}
  .hero-photo .ph{padding:0}
  .hero-photo figcaption span:last-child{display:inline}
}
.hero h1{max-width:none}

/* ===== 导航 v3(2026-09-27,SITE_ROADMAP §1):一级 = Kursus · Ujian HSK · Alat · Buku · Kuliah di China · Tentang。
   HTML 由 scripts/lib/site-nav.mjs 生成,开合在 js/nav.mjs。桌面下拉(悬停 / 聚焦 / 点击),手机整张清单 ===== */
.links{align-items:center}
.links .top{display:flex;align-items:center;gap:2px;list-style:none}
.grp{position:relative}
.grp-btn,.links .top-a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 11px;border-radius:10px;font:600 15px/1 var(--f-b);color:var(--cream2);text-decoration:none;white-space:nowrap;transition:color .2s,background .2s}
.grp-btn:hover,.grp.open .grp-btn,.links .top-a:hover{color:var(--cream);background:oklch(0.975 0.008 75/.07)}
.grp-btn[aria-current],.links .top-a[aria-current]{color:var(--cream);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:8px}
.nav.light .grp-btn,.nav.light .links .top-a{color:var(--ink2)}
.nav.light .grp-btn:hover,.nav.light .grp.open .grp-btn,.nav.light .links .top-a:hover{color:var(--ink);background:var(--paper2)}
.nav.light .grp-btn[aria-current],.nav.light .links .top-a[aria-current]{color:var(--ink);text-decoration-color:var(--clay)}
.chev{width:10px;height:10px;opacity:.7;transition:transform .2s var(--out)}
.grp.open .chev{transform:rotate(180deg)}
.grp-h,.links .m-masuk{display:none}
.nav .btn{white-space:nowrap}
.soon{display:inline-block;margin-left:6px;padding:3px 7px;border-radius:999px;font:700 10.5px/1 var(--f-b);letter-spacing:.03em;text-decoration:none;vertical-align:1px;background:oklch(0.79 0.11 78/.16);color:var(--gold)}
.paper .soon,.nav.light .soon,.sub .soon{background:oklch(0.54 0.15 32/.09);color:var(--clay)}
.sub{position:absolute;z-index:2;top:calc(100% + 8px);left:0;min-width:300px;padding:8px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 48px -30px oklch(0.3 0.04 40/.5);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s var(--out),transform .2s var(--out),visibility 0s .2s}
.sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}   /* 鼠标从按钮移到下拉的桥 */
.grp.end .sub{left:auto;right:0}
.sub ul{list-style:none}
.grp.wide .sub ul{display:grid;grid-template-columns:1fr 1fr;width:540px}
.nav .links .sub a{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:0;padding:10px 12px;border-radius:10px;color:var(--ink);font:600 15px/1.25 var(--f-b);white-space:normal}
.nav .links .sub a:hover{background:var(--paper);color:var(--ink)}
.nav .links .sub a small{font:400 13px/1.35 var(--f-b);color:var(--ink2)}
.links .sub a[aria-current="page"] b{color:var(--clay)}
@media (min-width:1081px){
  .grp.open .sub,.grp:focus-within .sub{opacity:1;visibility:visible;transform:none;transition:opacity .15s var(--out),transform .2s var(--out)}
}
@media (min-width:1081px) and (hover:hover){.grp:hover .sub{opacity:1;visibility:visible;transform:none;transition:opacity .15s var(--out),transform .2s var(--out)}}
@media (min-width:1081px) and (max-width:1280px){
  .nav .wrap{gap:14px}
  .grp-btn,.links .top-a{padding:0 8px;font-size:14.5px}
  .links .top-a .soon{display:none}   /* 窄桌面放不下,「Segera」只在下拉 / 页面里标 */
  .nav .btn{padding:0 16px}
}
@media (max-width:1080px){
  .links.open{display:block;max-height:calc(100svh - 72px);overflow-y:auto;overscroll-behavior:contain;padding:4px var(--gut) 28px}
  .links .top{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-items:start}
  .grp[data-grp="tentang"]{order:4} .grp.solo{order:5}
  .grp-btn{display:none}
  .grp-h{display:block;padding:20px 0 4px;font:700 12px/1 var(--f-b);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
  .nav.light .grp-h{color:var(--clay)}
  .sub{position:static;min-width:0;padding:0;background:none;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none;transition:none}
  .sub::before{display:none}
  .grp.wide .sub ul{display:block;width:auto}
  .nav .links.open .sub a,.nav .links.open .sub a:hover{min-height:44px;justify-content:center;padding:6px 0;font-size:16px;color:var(--cream);background:none}
  .nav .links.open .sub a small{display:none}
  .nav.light .links.open .sub a,.nav.light .links.open .sub a:hover{color:var(--ink)}
  .grp.solo{margin-top:20px}
  .links.open .top-a{display:flex;justify-content:space-between;min-height:52px;padding:0 14px;border-radius:12px;font-size:16px;color:var(--cream);background:oklch(0.975 0.008 75/.06);text-decoration:none}
  .nav.light .links.open .top-a{color:var(--ink);background:var(--paper2)}
  .links.open .m-masuk{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:24px;border-radius:999px;border:1.5px solid oklch(0.975 0.008 75/.3);font:700 16px/1 var(--f-b);text-decoration:none;color:var(--cream)}
  .nav.light .links.open .m-masuk{border-color:var(--line);color:var(--ink)}
  html.menu-open{overflow:hidden}
}
@media (max-width:760px){.links.open{max-height:calc(100svh - 64px)}}
@media (max-width:380px){.links .top{grid-template-columns:1fr}}

/* 页脚链接栏(首页和其他页同一份,site-nav.mjs renderFootNav) */
.fcols.fnav{grid-template-columns:1.6fr repeat(4,1fr)}
.fdesc{color:var(--ink2);max-width:26em;font-size:15px;margin-top:10px}
.paper .fcols li .soon{display:inline-block;min-height:0;margin-left:6px;padding:3px 7px;font-size:10.5px;color:var(--clay)}
.foot-min{padding-top:56px;border-top:1px solid var(--line)}
.foot-min .fcols{padding-top:0}
@media (max-width:1080px){.fcols.fnav{grid-template-columns:1fr 1fr 1fr}.fcols.fnav>div:first-child{grid-column:1/-1}}
@media (max-width:760px){.fcols.fnav{grid-template-columns:1fr 1fr}}

/* 首页合作伙伴 logo 带(024):灰度,悬停变彩色;没有公开伙伴时整段不出现 */
.mitra-strip{padding:clamp(36px,5vw,56px) 0;border-top:1px solid var(--line)}
.ms-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:22px}
.ms-head h2{font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--ink2)}
.ms-head a{font:600 15px/1.3 var(--f-b);color:var(--clay);text-decoration:none}
.logos{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:20px 48px}
.logos a,.logos span{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink2);font:700 17px/1.2 var(--f-b)}
.logos img{display:block;height:40px;width:auto;max-width:160px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .3s,opacity .3s}
.logos a:hover img,.logos a:focus-visible img{filter:none;opacity:1}

/* 宣传片 #video(首页首屏下方)+ 首屏「Tonton video」小链接 */
.hero-sub{margin-top:14px;font:500 14px/1.4 var(--f-b)} .hero-sub a{color:var(--cream2);text-decoration:underline;text-underline-offset:3px} .hero-sub a:hover{color:var(--gold)}
.watch{display:inline-flex;align-items:center;gap:10px;margin-top:22px;min-height:44px;font:600 15px/1 var(--f-b);color:var(--cream2);text-decoration:none}
.watch svg{width:30px;height:30px;padding:8px;border-radius:50%;border:1.5px solid oklch(0.975 0.008 75/.35);transition:border-color .2s,color .2s}
.watch small{font-weight:500;color:oklch(0.84 0.02 65/.8);font-variant-numeric:tabular-nums}
.watch:hover{color:var(--gold)} .watch:hover svg{border-color:var(--gold)}
.video-lede{max-width:60ch;color:var(--ink2);margin:0 0 clamp(20px,3vw,32px)}
/* max-width:100% 兜底:防止 video 的 width/height 属性(1920×1080)在个别浏览器里把内在尺寸当成最小宽度,撑破 .wrap 右边界 */
.video-frame{position:relative;max-width:100%;aspect-ratio:16/9;border-radius:clamp(14px,2vw,24px);overflow:hidden;background:var(--paper2);border:1px solid var(--line);box-shadow:0 30px 60px -38px rgba(43,37,34,.5)}
.video-frame video{display:block;width:100%;max-width:100%;height:100%;background:var(--paper2)}
/* 社交媒体(039) */
.fsocial{display:flex;gap:10px;margin-top:14px}
.fsocial a{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid oklch(0.975 0.008 75/.3);color:inherit;transition:color .2s,border-color .2s}
.fsocial a:hover{color:var(--clay);border-color:var(--clay)}
.fsocial svg{width:18px;height:18px}
.paper .fsocial a,.foot.paper .fsocial a{border-color:var(--line)}
.yt-more{margin-top:18px;text-align:center}
.legal-links{margin-top:40px;font-size:14px;color:var(--ink2)}.legal-links a{color:var(--clay)}
.legal-page .md h2{font-size:22px}

/* 首页「Kenapa」「Mulai dalam 3 langkah」、Joanna 事实:编辑排版,不用卡片墙(docs/DESIGN.md §7 官网版式)
   细线分隔、大号序号、左右不对称;没有白底圆角框 */
.why-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.why-head h2{font-size:clamp(32px,1.1rem + 2.4vw,48px);margin:0 0 16px}
.why-head p{font-size:18px;color:var(--ink2);max-width:30ch}
.why{list-style:none;padding:0;margin:0;counter-reset:why;border-top:2px solid var(--ink)}
.why li{counter-increment:why;display:grid;grid-template-columns:56px 1fr;column-gap:12px;padding:22px 0;border-bottom:1px solid var(--line)}
.why li::before{content:counter(why,decimal-leading-zero);grid-row:1/3;font:600 15px/1.6 var(--f-b);color:var(--clay);letter-spacing:.04em}
.why b{font:700 21px/1.3 var(--f-d)}
.why p{margin:6px 0 0;font-size:16px;color:var(--ink2);max-width:52ch}

.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,4vw,56px);list-style:none;padding:0;margin:32px 0 36px;counter-reset:st;border-top:2px solid var(--ink)}
.steps3 li{counter-increment:st;display:flex;flex-direction:column;gap:8px;padding-top:18px}
.steps3 li::before{content:counter(st);font:800 56px/1 var(--f-d);color:var(--clay);margin-bottom:6px}
.steps3 b{font:700 21px/1.3 var(--f-d)}.steps3 span{font-size:16px;color:var(--ink2)}.steps3 a{color:var(--clay)}
#mulai .ctas{display:flex;flex-wrap:wrap;gap:12px}

.jo-k{font-size:14px;font-weight:700;color:var(--clay);text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px}
.jo-side h2 .zh{font-family:var(--f-h);font-size:.6em;color:var(--ink2);margin-left:6px}
.jo-facts{margin:24px 0 28px;border-top:1px solid var(--ink)}
.jo-facts div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.jo-facts dt{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);padding-top:2px}
.jo-facts dd{margin:0;font-size:16px;color:var(--ink)}

/* YCT 提示:一行说明,不再是一个框 */
.paper .yct{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:24px 0 0;margin-top:40px}

@media (max-width:1000px){.why-wrap{grid-template-columns:1fr}.steps3{grid-template-columns:1fr;gap:28px;border-top:0}.steps3 li{border-top:2px solid var(--ink)}}
@media (max-width:600px){.jo-facts div{grid-template-columns:1fr;gap:2px}.why li{grid-template-columns:40px 1fr}}

/* 首页「测一测」角色入口 */
.tes-strip{padding-top:48px;padding-bottom:16px}
.tes-strip-in{display:flex;align-items:center;gap:32px}
.tes-pet{flex:none;width:200px;height:200px;display:block;animation:tesBob 3.2s ease-in-out infinite;transform-origin:50% 100%}
.tes-pet img{width:100%;height:100%;object-fit:contain;display:block}
.tes-pet:hover{animation-duration:1.2s}
.tes-strip-copy h2{margin:4px 0 10px}
.tes-note{margin-left:8px;color:var(--ink2)}
@keyframes tesBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.tes-pet{animation:none}}
@media (max-width:640px){.tes-strip-in{flex-direction:column;text-align:left;align-items:flex-start;gap:16px}.tes-pet{width:140px;height:140px}.tes-note{display:block;margin:8px 0 0}}

/* 手机版首页压缩(2026-10-02 老板:信息密集、专业不花哨):区块间距、标题、去滚动出现动画 */
@media (max-width:760px){
  [data-reveal],.in-seq{opacity:1!important;transform:none!important;transition:none!important}
  .sec{padding-top:36px;padding-bottom:36px}
  .sec h2,.sec .h-left{font-size:22px;line-height:1.25}
  #tes h2{font-size:22px}
  .hero{padding-top:72px}
  .hero h1{font-size:30px;line-height:1.15}
  .hero .lede{font-size:15px;line-height:1.55}
  .hero-photo .ph{max-height:200px}
  .hero-photo img{object-fit:cover}
  .jo .ph{max-height:200px;overflow:hidden}
  .sec p{line-height:1.6}
  .tes-strip{padding-top:24px;padding-bottom:8px}
  .tes-pet{width:96px;height:96px}
  .tes-strip-in{flex-direction:row;align-items:flex-start;gap:14px}
  .tes-strip-copy h2{font-size:20px;margin:2px 0 6px}
  .tes-strip-copy p{font-size:14px;margin:0 0 8px}
  .tes-strip .kicker{font-size:12px}
  .tes-note{display:inline;margin-left:6px;font-size:12px}
}
@media (max-width:760px){.hero .kicker{font-size:13px;line-height:1.4}}
@media (max-width:760px){.jo-facts div{padding:8px 0}.jo{gap:14px}}

/* 全站搜索(ARTICLE_COMMUNITY §2.3):顶栏放大镜 + 弹出层 + /cari/ 结果页 */
.nav-search{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1.5px solid oklch(0.975 0.008 75/.25);background:none;color:inherit;cursor:pointer;padding:0}
.nav-search svg{width:20px;height:20px}
.nav.light .nav-search{border-color:var(--line);color:var(--ink)}
.cari-open,.cari-open body{overflow:hidden}
.cari-ov{position:fixed;inset:0;z-index:200;background:rgba(30,24,20,.45);display:flex;justify-content:center;align-items:flex-start;padding:72px 16px 16px}
.cari-ov[hidden]{display:none}
.cari-box{width:100%;max-width:640px;max-height:calc(100dvh - 96px);display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border-radius:14px;box-shadow:0 24px 60px -20px rgba(0,0,0,.5);overflow:hidden}
.cari-bar{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line)}
.cari-bar svg{width:20px;height:20px;flex:none;color:var(--ink2)}
.cari-bar input{flex:1;min-width:0;border:0;background:none;font:500 17px var(--f-b);color:var(--ink);padding:8px 0}
.cari-bar input:focus{outline:none}
.cari-x{border:0;background:var(--paper2);border-radius:8px;padding:8px 12px;font:600 13px var(--f-b);color:var(--ink);cursor:pointer}
.cari-res{overflow-y:auto;padding:6px 16px 16px;overscroll-behavior:contain}
.cari-g{margin-top:12px}
.cari-g h3{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);margin:0 0 4px;font-family:var(--f-b)}
.cari-g h3 small{font-weight:500}
.cari-g ol{list-style:none;margin:0;padding:0}
.cari-g a{display:flex;gap:12px;align-items:center;padding:9px 6px;margin:0 -6px;border-radius:8px;text-decoration:none;color:var(--ink)}
.cari-g a:hover,.cari-g a:focus{background:var(--paper2);outline:none}
.cari-g img{width:56px;height:42px;object-fit:cover;border-radius:5px;flex:none;background:var(--paper2)}
.cari-ic{width:56px;height:42px;flex:none;display:grid;place-items:center;border-radius:5px;background:var(--paper2);color:var(--clay);font:700 15px var(--f-b)}
.cari-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.cari-tx b{font-size:15px;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cari-tx small{font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cari-all,.cari-kamus{margin:12px 0 0;font-size:14px}
.cari-all a,.cari-kamus a{color:var(--clay);font-weight:600}
.cari-msg,.cari-n{color:var(--ink2);font-size:14px;margin:14px 0 0}
.cari-quick{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0}
.cari-quick a{padding:6px 12px;border:1px solid var(--line);border-radius:99px;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;background:#fff}
.cari-page .cari-g{margin-top:20px}
@media (max-width:760px){
  .cari-ov{padding:0;background:var(--paper)}
  .cari-box{max-width:none;max-height:100dvh;height:100dvh;border-radius:0;box-shadow:none}
  .nav-cta .nav-search{width:40px;height:40px}
}
@media (max-width:400px){.nav-cta{gap:6px}.nav-cta .masuk{padding:0 10px}}

/* 2026-10-07 首页精简:手机上 Joanna 照片横放(竖 4:5 占一屏)、3 步开始收紧 */
@media (max-width:760px){
  .jo .ph{aspect-ratio:3/2}
  .steps3{grid-template-columns:1fr;margin:20px 0 24px}
  .steps3 li{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--line)}
  .steps3 li::before{font-size:32px;margin:0}
  .steps3 b{font-size:18px}
  .steps3 span{flex-basis:100%;font-size:15px}
}

/* 加入 WhatsApp 大群(063):首页一条 + 各页小条;没有在官网展示的群时整块 hidden(js/nav.mjs 打开) */
.grup-band{padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grup-band .gb{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px 24px;align-items:center}
.gb-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#25d366;color:#fff;flex:none}
.gb-ic svg{width:30px;height:30px;display:block}
.grup-band h2{font-size:clamp(22px,1rem + 1vw,30px);margin:0 0 4px}
.grup-band p{color:var(--ink2);margin:0;max-width:46em}
.gb-n:not(:empty)::before{content:' · '}
.gb-n{font-weight:600;color:var(--ink)}
.grup-cta{display:flex;align-items:center;gap:14px;margin:28px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grup-cta p{margin:0;flex:1;color:var(--ink2);font-size:15px}
.grup-cta p b{display:block;color:var(--ink);font-size:17px}
.grup-cta .gb-ic{width:44px;height:44px;border-radius:12px}
.grup-cta .gb-ic svg{width:26px;height:26px}
.grup-cta .btn{flex:none}
[data-grup-box][hidden]{display:none!important}
@media (max-width:760px){
  .grup-band .gb{grid-template-columns:auto minmax(0,1fr);align-items:start}
  .grup-band .gb-ic{width:40px;height:40px;border-radius:11px}
  .grup-band .gb-ic svg{width:24px;height:24px}
  .grup-band h2{margin-top:4px}
  .grup-band .gb-btn{grid-column:1/-1;justify-self:stretch;text-align:center}
  .grup-cta{flex-wrap:wrap}
  .grup-cta .btn{width:100%;text-align:center}
}

/* 关于我们 / 编辑方针(2026-10-07) */
.about-photo{margin:8px 0 20px}
.about-photo img{width:100%;height:auto;border-radius:16px;aspect-ratio:3/2;object-fit:cover;object-position:50% 25%}
.about-photo figcaption{font-size:14px;color:var(--ink2);margin-top:6px}
.about-team,.about-facts{margin:12px 0 20px;border-top:1px solid var(--ink)}
.about-team>div,.about-facts>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.about-team dt,.about-facts dt{font-weight:700}
.about-team dd,.about-facts dd{margin:0;color:var(--ink2)}
.about-facts>div{padding:10px 0}
@media (max-width:760px){.about-team>div,.about-facts>div{grid-template-columns:1fr;gap:4px}}
.a-policy{font-size:14px;color:var(--ink2);margin:24px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.about-page h2[id],.legal-page h2[id]{scroll-margin-top:84px}

/* 已登录的账号菜单(js/nav.mjs,2026-10-07):顶栏「Masuk」换成头像 + 名字 */
.acct{position:relative}
.acct-btn{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 4px;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;font:600 15px/1 var(--f-b);cursor:pointer}
.acct-btn svg{width:16px;height:16px;opacity:.7}
.acct-av{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--clay);color:#fff;font:700 15px/1 var(--f-h);overflow:hidden;flex:none}
.acct-av img{width:100%;height:100%;object-fit:cover}
.acct-av.big{width:44px;height:44px;font-size:20px}
.acct-pop{position:absolute;right:0;top:calc(100% + 10px);width:300px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -20px rgba(0,0,0,.35);padding:8px;z-index:200}
.acct-head{display:flex;gap:12px;align-items:center;padding:10px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acct-head b{display:block;font-size:16px;line-height:1.3}
.acct-head b .zh{font-family:var(--f-h);color:var(--clay);font-weight:700}
.acct-head small{display:block;color:var(--ink2);font-size:13px;margin-top:2px}
.acct-it{display:block;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ink)}
.acct-it:hover{background:var(--paper2)}
.acct-it b{display:block;font-size:15px;font-weight:600}
.acct-it small{display:block;font-size:12.5px;color:var(--ink2);margin-top:1px}
.acct-it.main{background:var(--clay);color:#fff;margin-bottom:4px}
.acct-it.main small{color:#fff;opacity:.85}
.acct-it.main:hover{background:var(--clay);filter:brightness(1.05)}
.acct-it.out b{font-weight:500;color:var(--ink2)}
@media (max-width:760px){
  .acct-name,.acct-btn svg{display:none}
  .acct-btn{padding:0;border:0;height:40px;width:40px;justify-content:center}
  .acct-pop{position:fixed;left:12px;right:12px;top:64px;width:auto}
}

/* 实景照片网格(066):竖图 3:4、横图占两格 3:2;手机 2 列,电脑 4 列(列数写死,不 auto-fit) */
.foto-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0 6px}
@media (min-width:900px){.foto-grid{grid-template-columns:repeat(4,1fr);gap:14px}}
.foto{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.foto img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 35%;border-radius:10px;background:var(--line)}
.foto.wide{grid-column:span 2}
.foto.wide img{aspect-ratio:3/2;object-position:50% 50%}
.foto figcaption{font-size:13px;line-height:1.45;color:var(--ink2)}
/* 首页伙伴带下的实景照片 */
.ms-foto{margin-top:22px}
.ms-k{font:600 14px/1.4 var(--f-b);color:var(--ink2);margin:0}
.ms-k a{color:var(--clay)}
/* logo 图白底(jpg)和纸色背景融在一起 */
.logos img,.partner-page .pp-logo img{mix-blend-mode:multiply}
/* 首页套餐横条(2026-10-11) */
.pk-band{display:block;background:var(--clay);color:#fff;text-decoration:none}
.pk-band .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding-top:14px;padding-bottom:14px;font-size:16px}
.pk-band b{font-weight:800}.pk-band em{font-style:normal;font-weight:800;margin-left:auto;white-space:nowrap}
.pk-band:hover em{text-decoration:underline}
.jo-more{font-size:15px;color:var(--ink2);margin-top:14px}.jo-more a{color:var(--clay);font-weight:700}
/* 首页乔安娜一节:真实工作照(TNC 会议,她在前景做翻译;首屏已用肖像,这里不重复),图注压在照片底部 */
.jo .jo-photo{position:relative;margin:0;overflow:hidden}
.jo .jo-photo figcaption{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:32px 16px 12px;font:500 13px/1.4 var(--f-b);color:#fff;background:linear-gradient(transparent,#000a)}
@media (max-width:760px){.jo .jo-photo figcaption{padding:20px 12px 8px;font-size:12px}}