:root{
--rub:#E5E2DA; --rub2:#DAD6CB; --panel:#F3F1EA; --white:#FBFAF6;
--bronze:#2E4A42; --ink:#232A27; --ink2:#57615C; --line:#C6C1B3; --line2:#A9A292;
--gold:#8A6C20; --goldlt:#B8912F; --verd:#4E7A6A;
--onbronze:#E2E8E4; --onbronze2:#9DB0A8;
--sp:clamp(46px,5.4vw,80px);
--ser:"Songti SC","STSong","SimSun","Noto Serif SC",serif;
--tooth:polygon(0 0,100% 0,100% 34%,92% 42%,100% 50%,92% 58%,100% 66%,100% 100%,0 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--rub);color:var(--ink);
 font:15px/1.88 "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:auto;object-fit:cover}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.35;font-weight:700}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
[data-to]{cursor:pointer}
a:focus-visible,button:focus-visible,[data-to]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.ledge{background:var(--bronze);color:var(--onbronze);font-size:12.5px}
.ledgein{display:flex;align-items:center;gap:10px;height:36px}
.ledger{margin-left:auto;color:var(--onbronze2)}
.stud{width:11px;height:11px;flex:none;background:var(--goldlt);
 clip-path:polygon(50% 0,100% 30%,82% 100%,18% 100%,0 30%)}

.lintel{position:sticky;top:0;z-index:60;background:rgba(229,226,218,.96);backdrop-filter:blur(10px);
 border-bottom:2px solid var(--bronze)}
.lintelin{display:flex;align-items:center;height:70px;gap:20px}
.sigil{display:flex;align-items:center;gap:10px;flex:none}
.sigilcut{display:grid;place-items:center;width:40px;height:42px;background:var(--bronze);color:var(--goldlt);
 font:700 20px/1 var(--ser);clip-path:var(--tooth)}
.sigiltx{font-family:var(--ser);font-size:20px;letter-spacing:3px}
.ranks{margin-left:auto}
.ranks ul{display:flex;gap:3px}
.ranks a{display:block;padding:7px 13px;font-size:14.5px;color:var(--ink2);transition:.16s}
.ranks a:hover{color:var(--gold);background:var(--panel)}
.ranks a[aria-current]{background:var(--bronze);color:var(--goldlt)}
.pin{display:none;width:40px;height:42px;margin-left:auto;background:var(--bronze);border:0;
 clip-path:var(--tooth);flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer}
.pin i{width:15px;height:2px;background:var(--goldlt)}

.grain{background:var(--rub2);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.grain .wrap{display:flex;align-items:center;gap:9px;height:37px}
.grain a:hover{color:var(--gold)}
.grain em{font-style:normal;color:var(--line2)}
.grain b{font-weight:400;color:var(--ink)}

.tally{padding:var(--sp) 0;background:var(--panel);border-bottom:1px solid var(--line2)}
.tallyin{display:grid;grid-template-columns:1fr 26px .82fr;align-items:center}
.halfL{background:var(--white);border:2px solid var(--bronze);border-right:0;padding:34px 38px}
.brandmark{display:inline-block;font-family:var(--ser);font-size:12.5px;letter-spacing:3px;
 color:var(--white);background:var(--gold);padding:5px 14px;margin-bottom:16px}
.halfL h1{font-family:var(--ser);font-size:clamp(24px,3vw,35px);letter-spacing:1px}
.say{margin-top:15px;color:var(--ink2);font-size:15.5px;text-align:justify}
.seam{align-self:stretch;background:
 repeating-linear-gradient(180deg,var(--bronze) 0 14px,transparent 14px 28px);
 border-left:2px solid var(--bronze);border-right:2px solid var(--bronze)}
.halfR{background:var(--white);border:2px solid var(--bronze);border-left:0;padding:34px 32px}
.notch{display:grid;gap:13px;margin-bottom:24px}
.notch li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
 padding-bottom:11px;border-bottom:1px dashed var(--line2)}
.notch li:last-child{border-bottom:0;padding-bottom:0}
.notch span{font-size:13px;color:var(--ink2)}
.notch b{font-family:var(--ser);font-size:22px;color:var(--gold)}
.acts{display:grid;gap:10px}
.a1,.a2{display:block;text-align:center;padding:13px 20px;font-size:15px;font-weight:700;transition:.2s}
.a1{background:var(--bronze);color:var(--onbronze)}
.a1:hover{background:var(--gold)}
.a2{border:2px solid var(--bronze);color:var(--ink)}
.a2:hover{background:var(--bronze);color:var(--onbronze)}

.court{padding:var(--sp) 0}
.court.dim{background:var(--rub2)}
.cap{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:28px;
 padding-bottom:12px;border-bottom:2px solid var(--bronze)}
.cap h2{font-family:var(--ser);font-size:clamp(21px,2.4vw,30px);letter-spacing:4px}
.cap p{color:var(--ink2);font-size:13.5px;margin-top:6px}
.more{flex:none;font-family:var(--ser);font-size:13.5px;color:var(--white);background:var(--bronze);
 padding:8px 17px;transition:.18s}
.more:hover{background:var(--gold)}

.pairs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 0}
.tab{display:grid;grid-template-columns:126px 1fr;background:var(--white);
 border:2px solid var(--bronze);transition:.2s}
.tab:hover{border-color:var(--gold)}
.lft{clip-path:polygon(0 0,100% 0,100% 30%,94% 40%,100% 50%,94% 60%,100% 70%,100% 100%,0 100%);
 margin-right:-2px}
.rgt{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 70%,6% 60%,0 50%,6% 40%,0 30%);
 padding-left:6px}
.tabpic{position:relative;display:block;overflow:hidden}
.tabpic img{height:100%;aspect-ratio:3/4}
.tabq{position:absolute;left:0;top:0;font-size:11px;color:var(--onbronze);
 background:rgba(46,74,66,.9);padding:3px 8px}
.tabtx{padding:15px 18px}
.tabtx b{display:block;font-family:var(--ser);font-size:17.5px;margin-bottom:4px}
.tabtx em{font-style:normal;font-size:12px;color:var(--verd)}
.tabtx i{display:block;font-style:normal;font-size:13px;color:var(--ink2);margin-top:8px;line-height:1.8}
.tabtx s{display:block;text-decoration:none;font-size:11.5px;color:var(--ink2);
 margin-top:9px;padding-top:8px;border-top:1px dashed var(--line)}

.slips{display:grid;gap:2px;background:var(--line2);border:1px solid var(--line2)}
.slip{display:flex;align-items:center;gap:18px;background:var(--white);padding:15px 22px;transition:.18s}
.slip:hover{background:var(--panel)}
.tooth{flex:none;width:14px;height:26px;background:var(--gold);
 clip-path:polygon(0 0,100% 0,100% 30%,40% 40%,100% 50%,40% 60%,100% 70%,100% 100%,0 100%)}
.slip b{font-family:var(--ser);font-size:17px;flex:none;min-width:112px}
.cnt{font-size:14.5px;color:var(--gold);flex:none;min-width:80px}
.slip em{font-style:normal;font-size:13px;color:var(--ink2)}

.rows{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.rowit{display:flex;align-items:baseline;gap:14px;background:var(--white);
 border-left:5px solid var(--bronze);padding:16px 20px;transition:.18s}
.rowit:hover{border-left-color:var(--gold)}
.rowit b{font-family:var(--ser);font-size:17px;flex:none;min-width:104px}
.rn{font-size:14.5px;color:var(--gold);flex:none;min-width:70px}
.rowit em{font-style:normal;font-size:12.5px;color:var(--ink2)}

.marks{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px}
.marks li{border-bottom:1px dashed var(--line2)}
.marks a{display:flex;align-items:center;gap:14px;padding:15px 6px;transition:.16s}
.marks a:hover{color:var(--gold)}
.mk{font-family:var(--ser);font-size:13px;color:var(--white);background:var(--verd);
 padding:2px 8px;flex:none}
.marks b{font-size:16px;flex:none;min-width:100px}
.mc{font-size:13px;color:var(--ink2);flex:none;min-width:52px}
.marks em{font-style:normal;font-size:13px;color:var(--ink2);margin-left:auto;text-align:right}

.boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.box{display:block;background:var(--white);border:2px solid var(--bronze);padding:19px 21px;transition:.18s}
.box:hover{border-color:var(--gold);transform:translateY(-3px)}
.box b{display:block;font-family:var(--ser);font-size:17px;margin-bottom:6px}
.box span{display:block;font-size:20px;color:var(--gold);margin-bottom:4px}
.box em{font-style:normal;font-size:12.5px;color:var(--ink2)}

.tallies{display:grid;gap:12px}
.tly{display:grid;grid-template-columns:52px 168px 1fr;gap:18px;align-items:center;
 background:var(--white);border:1px solid var(--line);padding:12px 20px 12px 12px;transition:.18s}
.tly:hover{border-color:var(--gold)}
.tno{display:grid;place-items:center;width:52px;height:52px;background:var(--bronze);
 color:var(--goldlt);font-family:var(--ser);font-size:17px;clip-path:var(--tooth)}
.tly:nth-child(-n+3) .tno{background:var(--gold);color:var(--white)}
.tpic{display:block;overflow:hidden}
.tpic img{aspect-ratio:400/260}
.ttx h3{font-family:var(--ser);font-size:18.5px;margin-bottom:4px}
.ttx h3 a:hover{color:var(--gold)}
.tmeta{font-size:12.5px;color:var(--verd);margin-bottom:6px}
.ttx p{color:var(--ink2);font-size:13.5px}
.tday{font-size:11.5px;color:var(--ink2);margin-top:8px}

.leaves{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.leaf{background:var(--white);border:1px solid var(--line2);border-top:4px solid var(--bronze);padding:22px 25px}
.leaf:nth-child(2n){border-top-color:var(--gold)}
.leaf h3{font-family:var(--ser);font-size:18.5px;margin-bottom:5px}
.lday{display:block;font-size:11.5px;color:var(--ink2);margin-bottom:12px}
.leaf p{color:var(--ink2);font-size:14px;line-height:1.95;text-align:justify}

.kit{display:grid;grid-template-columns:1.32fr 1fr;gap:42px;align-items:start}
.kitL h3{font-family:var(--ser);font-size:21px;margin-bottom:12px;color:var(--gold)}
.ktx{background:var(--white);border-left:5px solid var(--verd);padding:16px 20px;color:var(--ink2);margin-bottom:24px}
.taps{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.tap{display:block;background:var(--white);border:2px solid var(--bronze);padding:14px 24px;
 min-width:214px;transition:.18s}
.tap:hover{border-color:var(--gold);color:var(--gold)}
.tap b{display:block;font-size:15px;margin-bottom:3px}
.tap em{font-style:normal;font-size:12px;color:var(--ink2)}
.specs{display:grid;gap:15px;margin-bottom:22px}
.specs li{padding-left:18px;position:relative}
.specs li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;background:var(--goldlt);
 clip-path:polygon(50% 0,100% 30%,82% 100%,18% 100%,0 30%)}
.specs b{display:block;font-size:15.5px;margin-bottom:3px}
.specs p{color:var(--ink2);font-size:13.5px}
.rel{font-size:12.5px;color:var(--ink2);border-top:1px dashed var(--line2);padding-top:15px}
.rel b{color:var(--gold)}
.kitR{border:2px solid var(--bronze);background:var(--white)}
.kitR img{aspect-ratio:16/9}
figcaption{font-size:12px;color:var(--ink2);padding:12px 15px;border-top:1px dashed var(--line2)}

.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.chip{background:var(--white);border:1px solid var(--line2);padding:20px 22px}
.chip h3{font-size:15px;margin-bottom:9px;color:var(--gold)}
.chip p{color:var(--ink2);font-size:13.5px}

.lk{background:var(--rub2);border-top:1px solid var(--line2);padding:24px 0}
.lk h4{font-family:var(--ser);font-size:12.5px;letter-spacing:4px;color:var(--ink2);margin-bottom:11px}
.lkin{display:flex;flex-wrap:wrap;gap:9px 18px}
.lkin a{font-size:12.5px;color:var(--ink2)}
.lkin a:hover{color:var(--gold)}
.lk:has(.lkin:empty){display:none}

.plinth{background:var(--bronze);color:var(--onbronze2);padding:46px 0 24px}
.plinthin{display:grid;grid-template-columns:1.7fr 1fr 1.8fr;gap:42px;padding-bottom:30px}
.sigilf{margin-bottom:15px}
.sigilf .sigilcut{background:var(--goldlt);color:var(--bronze)}
.sigilf .sigiltx{color:var(--onbronze)}
.pmain p{font-size:13px}
.pcol h4{font-family:var(--ser);font-size:15px;color:var(--onbronze);margin-bottom:14px;letter-spacing:3px}
.pcol ul{display:grid;gap:9px}
.pcol li a{font-size:13.5px}
.pcol li a:hover{color:var(--goldlt)}
.rules li{font-size:12.5px;line-height:1.78;padding-left:18px;position:relative}
.rules li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:10px;background:var(--goldlt);
 clip-path:polygon(50% 0,100% 30%,82% 100%,18% 100%,0 30%)}
.plinthbot{border-top:1px solid #3E5C53;padding-top:19px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:12.5px}

@media(max-width:1080px){
.tallyin{grid-template-columns:1fr;gap:0}
.halfL{border-right:2px solid var(--bronze);border-bottom:0}
.seam{height:26px;background:repeating-linear-gradient(90deg,var(--bronze) 0 14px,transparent 14px 28px);
 border:0;border-top:2px solid var(--bronze);border-bottom:2px solid var(--bronze)}
.halfR{border-left:2px solid var(--bronze);border-top:0}
.kit{grid-template-columns:1fr;gap:32px}
.pairs,.rows,.boxes,.chips{grid-template-columns:repeat(2,1fr)}
.boxes{grid-template-columns:repeat(2,1fr)}
.plinthin{grid-template-columns:1fr 1fr;gap:30px}
.ranks a{padding:7px 9px;font-size:13.5px}
}
@media(max-width:760px){
.ranks{position:fixed;left:0;right:0;top:106px;background:var(--panel);border-bottom:2px solid var(--bronze);
 padding:8px 24px;display:none}
.ranks.open{display:block}
.ranks ul{flex-direction:column;gap:0}
.ranks a{padding:12px 0;border-bottom:1px dashed var(--line2)}
.pin{display:flex}
.pairs,.rows,.boxes,.chips,.leaves,.marks,.plinthin{grid-template-columns:1fr}
.lft,.rgt{clip-path:none;margin-right:0;padding-left:0}
.tab{grid-template-columns:104px 1fr}
.tly{grid-template-columns:44px 1fr;gap:12px 14px}
.tpic{grid-column:2}
.ttx{grid-column:2}
.tno{width:44px;height:44px;grid-row:span 2}
.slip{flex-wrap:wrap;gap:10px 14px}
.slip b,.cnt{min-width:0}
.halfL,.halfR{padding:26px 22px}
.say{text-align:left}
.ledger{display:none}
.cap{flex-direction:column;align-items:flex-start;gap:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}