:root{
  --brick:#C0281C;--brick-deep:#8E1A12;--brick-soft:#F8E7E4;
  --azure:#1565A8;--azure-deep:#0A3C66;--azure-soft:#DBE8F4;
  --gold:#C8963A;--gold-deep:#7A5A17;--gold-soft:#F5EDD4;
  --green:#4E9A4A;--green-deep:#2C6B2A;--green-soft:#E2F0DD;
  --ink:#1b2430;--ink-soft:#566374;--line:#e3d8d2;--bg-soft:#faf5f2;
  --shadow:0 14px 38px -16px rgba(142,26,18,.28);
  --shadow-sm:0 6px 16px -6px rgba(142,26,18,.16);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  background:#fff;color:var(--ink);
  font-family:'Inter','PingFang TC','Apple LiGothic Medium','Microsoft JhengHei',sans-serif;
  font-size:22px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
@media(min-width:720px){body{font-size:25.3px;}}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

/* topbar */
.topbar{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);padding:12px 0;position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);}
.topbar-inner{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.topbar-brand{text-decoration:none;display:flex;align-items:center;gap:10px;}
.topbar-logo{width:36px;height:36px;border-radius:50%;flex-shrink:0;object-fit:cover;background:#F0F000;}
.topbar-name{font-family:'Cormorant Garamond','PingFang TC',serif;font-size:18.7px;font-weight:700;color:var(--brick-deep);line-height:1.15;}
.topbar-name small{display:block;font-family:'PingFang TC','Inter',sans-serif;font-size:16px;font-weight:500;color:var(--ink-soft);margin-top:1px;letter-spacing:.03em;}
.topbar-nav{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end;}
.topbar-nav a{font-size:18.2px;font-weight:600;color:var(--ink-soft);text-decoration:none;padding:9px 13px;border-radius:8px;transition:all .15s;}
.topbar-nav a:hover,.topbar-nav a.is-active{color:var(--brick-deep);background:var(--brick-soft);}
@media(max-width:680px){
  .topbar-inner{flex-direction:column;align-items:flex-start;gap:6px;}
  .topbar-nav{gap:1px;}
  .topbar-nav a{font-size:16.5px;padding:8px 10px;}
}


/* ── page hero: lesson-color gradient + Lushang wave edge (no photo: lesson photos live in the page) ── */
.vhero{position:relative;overflow:hidden;color:#fff;min-height:280px;padding:56px 0 96px;display:flex;align-items:center;
  background:radial-gradient(ellipse at 86% 16%,rgba(255,255,255,.20) 0%,transparent 55%),linear-gradient(135deg,var(--vl-accent) 0%,var(--vl-deep) 100%);}
@media(min-width:720px){.vhero{min-height:340px;padding:70px 0 118px;}}
.vhero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:50px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23C0281C'/%3E%3Cstop offset='.36' stop-color='%23C8963A'/%3E%3Cstop offset='.68' stop-color='%234E9A4A'/%3E%3Cstop offset='1' stop-color='%231565A8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%23ffffff' d='M0,58 C220,92 470,18 720,40 C970,62 1230,96 1440,52 L1440,90 L0,90 Z'/%3E%3Cpath fill='none' stroke='url%28%23w%29' stroke-width='7' d='M0,58 C220,92 470,18 720,40 C970,62 1230,96 1440,52'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;}
@media(min-width:720px){.vhero::after{height:72px;}}
.vhero__inner{position:relative;z-index:2;width:100%;max-width:1080px;margin:0 auto;padding:0 24px;}
.vhero__eyebrow{display:inline-block;font-size:14px;letter-spacing:.2em;font-weight:700;text-transform:uppercase;color:#fff;margin-bottom:14px;padding:6px 16px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.45);border-radius:99px;}
@media(max-width:480px){.vhero__eyebrow{font-size:12px;letter-spacing:.12em;padding:5px 12px;}}
.vhero h1{font-family:'Cormorant Garamond','PingFang TC',serif;font-size:clamp(46px,6.4vw,74px);font-weight:700;line-height:1.02;}
.vhero__zh{font-family:'PingFang TC','Apple LiGothic Medium',sans-serif;font-size:clamp(21px,2.4vw,28px);font-weight:500;letter-spacing:.08em;margin-top:12px;color:rgba(255,255,255,.95);}
.vhero__emoji{position:absolute;right:6%;top:50%;transform:translateY(-58%);font-size:clamp(86px,14vw,170px);line-height:1;opacity:.9;filter:drop-shadow(0 10px 20px rgba(0,0,0,.25));}
@media(max-width:640px){.vhero__emoji{right:18px;top:26px;transform:none;font-size:64px;}}
.vhero__inner > *{animation:vlRise .85s cubic-bezier(.2,.7,.2,1) both;}
.vhero__inner > :nth-child(2){animation-delay:.1s;}
.vhero__inner > :nth-child(3){animation-delay:.2s;}
@keyframes vlRise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.vhero__inner > *{animation:none;}}

.vmain{padding:44px 0 80px;}
.article{max-width:820px;margin:0 auto;}
.back{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;padding:10px 18px;border-radius:12px;border:2px solid var(--line);background:#fff;color:var(--vl-deep);font-size:17px;font-weight:700;text-decoration:none;transition:border-color .15s,transform .15s;}
.back:hover{border-color:var(--vl-accent);transform:translateX(-3px);}
.back span{font-family:'PingFang TC',sans-serif;font-weight:500;color:var(--ink-soft);font-size:15.5px;}

/* video */
.vl-video{background:#000;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/9;}
.vl-video iframe{width:100%;height:100%;border:0;display:block;}
.vl-soon{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;height:100%;color:#fff;font-size:19px;font-weight:600;text-align:center;padding:20px;
  background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.35)),var(--cover) center/cover;}
.vl-soon .zh{display:block;margin-top:4px;font-family:'PingFang TC',sans-serif;font-weight:500;font-size:17px;}
.vl-cap{margin-top:20px;font-size:19px;line-height:1.7;color:var(--ink);}
@media(min-width:720px){.vl-cap{font-size:21px;}}
.vl-cap .zh{display:block;font-family:'PingFang TC',sans-serif;font-size:18px;color:var(--ink-soft);margin-top:8px;}

/* section heads */
.learn,.vgame{margin-top:58px;padding-top:46px;border-top:1px solid var(--line);}
.learn-head{text-align:center;margin-bottom:30px;}
.learn-head .eyebrow{display:inline-block;font-size:15px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--vl-accent);margin-bottom:8px;}
.learn-head h2{font-family:'Cormorant Garamond','PingFang TC',serif;font-size:clamp(32px,4.6vw,44px);font-weight:700;color:var(--vl-deep);line-height:1.2;}
.learn-head h2 .zh{display:block;font-family:'PingFang TC',sans-serif;font-size:20px;font-weight:500;color:var(--ink-soft);margin-top:6px;}

/* word cards */
.wgrid{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:640px){.wgrid{grid-template-columns:1fr 1fr;}}
.wcard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);}
.wcard__pic{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--vl-soft);}
.wcard__body{padding:18px 22px 22px;border-top:4px solid var(--vl-accent);}
.wcard__top{display:flex;align-items:flex-start;gap:12px;}
.wcard__w{flex:1;min-width:0;}
.wcard__en{display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(36px,6vw,44px);font-weight:700;color:var(--vl-deep);line-height:1.02;word-break:break-word;}
.wcard__ipa{display:block;font-size:16px;color:var(--ink-soft);font-weight:600;margin-top:4px;}
.wcard__zh{display:block;font-family:'PingFang TC',sans-serif;font-size:22px;font-weight:600;color:var(--ink);margin-top:4px;}
.wsay{flex-shrink:0;width:50px;height:50px;border-radius:50%;border:0;background:var(--vl-accent);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 12px -4px rgba(0,0,0,.35);transition:transform .15s,box-shadow .2s;}
.wsay:hover{transform:scale(1.08);}
.wsay:active{transform:scale(.92);}
.wsay.ring{box-shadow:0 0 0 7px var(--vl-soft);}
.wcard__sent{margin-top:14px;background:var(--vl-soft);border-radius:12px;padding:13px 16px;font-size:18.5px;line-height:1.6;color:var(--ink);}
.wcard__sent b{color:var(--vl-deep);}
.wcard__sent .zh{display:block;font-family:'PingFang TC',sans-serif;font-size:17px;color:var(--ink-soft);margin-top:5px;}

/* sentences */
.slist{display:flex;flex-direction:column;gap:14px;}
.sline{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-left:7px solid var(--vl-accent);border-radius:0 16px 16px 0;padding:18px 22px;box-shadow:var(--shadow-sm);}
.sline__no{flex-shrink:0;font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:700;color:var(--vl-accent);line-height:1;width:26px;}
.sline__tx{flex:1;min-width:0;}
.sline__en{font-size:clamp(20px,3.2vw,24px);font-weight:600;color:var(--ink);line-height:1.45;}
.sline__zh{display:block;font-family:'PingFang TC',sans-serif;font-size:18px;color:var(--ink-soft);margin-top:5px;}

/* matching game */
.game-score{text-align:center;font-family:'PingFang TC',sans-serif;font-size:18px;color:var(--ink-soft);margin-bottom:18px;}
.game-score b{color:var(--vl-accent);font-size:23px;}
.gpraise{min-height:36px;text-align:center;margin:-6px 0 14px;font-family:'Cormorant Garamond','PingFang TC',serif;font-size:24px;font-weight:700;color:var(--vl-deep);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;}
.game-board{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;}
.gcol{display:flex;flex-direction:column;gap:10px;}
.gtile{font-family:inherit;font-size:20px;font-weight:700;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:12px;padding:15px 10px;cursor:pointer;transition:transform .12s,background .15s,border-color .15s,color .15s;text-align:center;}
.gtile.zh{font-family:'PingFang TC',sans-serif;font-weight:600;}
.gtile:hover{border-color:var(--vl-accent);}
.gtile.sel{border-color:var(--vl-accent);background:var(--vl-soft);color:var(--vl-deep);}
.gtile.done{background:#e9f7ec;border-color:#5cb274;color:#2f8049;cursor:default;}
.gtile.pop{animation:gpop .5s;}
@keyframes gpop{0%{transform:scale(1)}40%{transform:scale(1.13)}100%{transform:scale(1)}}
.gtile.shake{animation:gshake .36s;background:#fdecec;border-color:#e29a9a;}
@keyframes gshake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.game-reset{display:block;margin:22px auto 0;font-family:inherit;font-size:18px;font-weight:700;color:var(--vl-deep);background:#fff;border:2px solid var(--line);border-radius:10px;padding:11px 22px;cursor:pointer;}
.game-reset:hover{background:var(--vl-soft);border-color:var(--vl-accent);}
.game-done{display:none;text-align:center;margin-top:22px;font-family:'PingFang TC',sans-serif;font-size:24px;font-weight:600;color:var(--vl-deep);}
.game-done.show{display:block;animation:gpop .55s;}
.confetti{position:fixed;top:-16px;width:11px;height:15px;border-radius:2px;z-index:9999;pointer-events:none;animation:cfall linear forwards;}
@keyframes cfall{0%{transform:translateY(0) rotate(0);opacity:1;}100%{transform:translateY(112vh) rotate(560deg);opacity:.85;}}

/* prev / next */
.lnav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:56px;padding-top:30px;border-top:1px solid var(--line);flex-wrap:wrap;}
.lnav a{padding:10px 18px;border-radius:10px;border:2px solid var(--line);font-weight:700;font-size:17px;color:var(--vl-deep);background:#fff;text-decoration:none;}
.lnav a:hover{border-color:var(--vl-accent);background:var(--vl-soft);}
.lnav a.center{background:var(--vl-deep);color:#fff;border-color:var(--vl-deep);}

/* hub */
.hub-lead{max-width:780px;margin:0 auto 34px;text-align:center;font-size:20px;line-height:1.7;color:var(--ink);}
@media(min-width:720px){.hub-lead{font-size:22px;}}
.hub-lead .zh{display:block;font-family:'PingFang TC',sans-serif;font-size:18px;color:var(--ink-soft);margin-top:8px;}
.vcards{display:grid;grid-template-columns:1fr;gap:22px;}
@media(min-width:640px){.vcards{grid-template-columns:1fr 1fr;}}
@media(min-width:980px){.vcards{grid-template-columns:repeat(3,1fr);}}
.vcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-top:5px solid var(--c);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s;}
.vcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.vcard__pic{position:relative;aspect-ratio:16/9;background:var(--c) center/cover no-repeat;}
.vcard__play{position:absolute;right:14px;bottom:12px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--c);display:flex;align-items:center;justify-content:center;font-size:19px;box-shadow:0 6px 14px -4px rgba(0,0,0,.4);}
.vcard__emoji{position:absolute;left:14px;top:12px;font-size:30px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));}
.vcard__body{padding:18px 22px 22px;display:flex;flex-direction:column;flex:1;}
.vcard__no{font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--c);}
.vcard__t{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:700;color:var(--ink);line-height:1.1;margin-top:3px;}
.vcard__zh{font-family:'PingFang TC',sans-serif;font-size:18px;font-weight:600;color:var(--ink);margin-top:3px;}
.vcard__desc{font-size:16.5px;color:var(--ink-soft);line-height:1.55;margin-top:10px;flex:1;}
.vcard__desc .zh{display:block;font-family:'PingFang TC',sans-serif;font-size:15.5px;margin-top:4px;}
.vcard__cta{margin-top:14px;font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:700;color:var(--c);}

/* reveal-fx */
.rvl{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);}
.rvl.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.rvl{opacity:1!important;transform:none!important;}}
/* ── FOOTER — three columns + Connect buttons (Dacheng template, Lushang palette) ── */
.site-footer{background:#3a1008;color:#fff;padding:54px 0 34px;margin:0;border:0;text-align:left;font-size:16px;line-height:1.6;}
.site-footer__inner{max-width:1140px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr;gap:34px;}
@media (min-width:760px){ .site-footer__inner{grid-template-columns:1.4fr 1fr 1fr;gap:40px;} }
.site-footer__brand{display:flex;align-items:flex-start;gap:16px;}
.site-footer__brand img{width:68px;height:68px;flex-shrink:0;border-radius:50%;background:#fff;object-fit:contain;padding:5px;box-shadow:0 6px 16px -4px rgba(0,0,0,.35);}
.site-footer__brand h4{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:700;color:#fff;line-height:1.12;margin:0;}
.site-footer__brand .name-zh{font-family:'PingFang TC','Microsoft JhengHei',sans-serif;font-size:16px;color:rgba(255,255,255,.82);font-weight:500;margin-top:5px;}
.site-footer__addr{margin-top:12px;font-family:'Inter',sans-serif;font-size:16px;color:rgba(255,255,255,.76);line-height:1.7;}
.site-footer__addr .zh{display:block;font-family:'PingFang TC','Microsoft JhengHei',sans-serif;color:rgba(255,255,255,.86);margin-bottom:2px;}
.site-footer__tel{display:block;margin-top:8px;color:rgba(255,255,255,.86);}
.site-footer__tel i{font-style:normal;margin:0 8px;color:rgba(255,255,255,.45);}
.site-footer__tel{white-space:nowrap;}
@media (max-width:520px){ .site-footer__brand{flex-direction:column;gap:14px;} }
.site-footer__addr a{color:#F5EDD4;text-decoration:none;border-bottom:1px dashed rgba(200,150,58,.6);}
.site-footer__col li .zh{font-family:'PingFang TC','Microsoft JhengHei',sans-serif;font-size:15px;color:rgba(255,255,255,.6);margin-left:10px;}
.site-footer__col h5{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#C8963A;margin:0 0 16px;}
.site-footer__col ul{list-style:none;padding:0;margin:0;}
.site-footer__col li{margin-bottom:10px;font-family:'Inter',sans-serif;font-size:17px;color:rgba(255,255,255,.88);}
.site-footer__col a{color:rgba(255,255,255,.88);text-decoration:none;border-bottom:1px dashed rgba(200,150,58,.6);transition:color .2s;}
.site-footer__col a:hover{color:#F5EDD4;}
.ft-ctas{display:flex;flex-direction:column;gap:12px;margin-top:2px;}
.ft-ctas .cta-btn{background:#F5EDD4;color:#8E1A12;border:0;border-bottom:none;border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:12px;text-decoration:none;box-shadow:0 6px 16px -8px rgba(0,0,0,.45);transition:transform .18s,background .18s,color .18s,box-shadow .18s;}
.ft-ctas .cta-btn:hover{background:#fff;color:#8E1A12;transform:translateY(-4px);box-shadow:0 14px 30px -14px rgba(0,0,0,.55);}
.ft-ctas .cta-btn__ico{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:#fff;color:#C0281C;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;transition:background .18s;}
.ft-ctas .cta-btn:hover .cta-btn__ico{background:#F5EDD4;}
.ft-ctas .cta-btn__tx{flex:1;min-width:0;}
.ft-ctas .cta-btn__t{display:block;font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:700;line-height:1.15;}
.ft-ctas .cta-btn__zh{display:block;font-family:'PingFang TC','Microsoft JhengHei',sans-serif;font-size:14.5px;margin-top:3px;font-weight:500;opacity:.94;}
.ft-ctas .cta-btn__arrow{font-size:20px;font-weight:700;flex-shrink:0;transition:transform .18s;}
.ft-ctas .cta-btn:hover .cta-btn__arrow{transform:translate(3px,-3px);}
.ft-ctas .cta-btn--archive{background:rgba(255,255,255,.07);border:1.5px dashed rgba(255,255,255,.38);color:#fff;box-shadow:none;}
.ft-ctas .cta-btn--archive .cta-btn__ico{background:rgba(255,255,255,.14);color:#fff;}
.ft-ctas .cta-btn--archive .cta-btn__zh{color:rgba(255,255,255,.75);opacity:1;}
.ft-ctas .cta-btn--archive .cta-btn__arrow{color:rgba(255,255,255,.85);}
.ft-ctas .cta-btn--archive:hover{background:rgba(255,255,255,.16);color:#fff;transform:translateY(-4px);box-shadow:none;}
.ft-ctas .cta-btn--archive:hover .cta-btn__ico{background:rgba(255,255,255,.24);}
.site-footer__bottom{max-width:1140px;margin:36px auto 0;padding:18px 24px 0;border-top:1px solid rgba(255,255,255,.16);font-size:15px;color:rgba(255,255,255,.62);text-align:center;line-height:1.7;}