/* 拼屿 1.0.7 — puzzle seams and reading modules. */
.puzzle-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:visible}
.puzzle-art path{fill:var(--piece-fill,#f3f8f6);stroke:var(--piece-stroke,#81b5b6);stroke-width:1;stroke-linejoin:round}

/* A single continuous outline owns both the body and each connector. */
.join-surface{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1}
.join-surface path{fill:var(--join-fill);stroke:var(--join-stroke);stroke-width:var(--join-width,1);stroke-linecap:round;stroke-linejoin:round}
/* Navigation: the same curve forms the outgoing head and incoming socket. */
.primary-menu>li:nth-child(n){--tab:#eff3f3;--tab-edge:#c7d3d2;min-width:128px;color:var(--ink);isolation:auto}
.primary-menu>li:nth-child(4n+3){--tab:#f9c5a0;--tab-edge:#dca983}
.primary-menu>li:nth-child(4n+1){--tab:#168c92;--tab-edge:#14868c;color:#fff}
.primary-menu>li>a{--join-fill:var(--tab);--join-stroke:var(--tab-edge);background:none;border:0;border-radius:0;isolation:isolate;z-index:auto;padding-inline:32px}
.primary-menu>li>a:before,.primary-menu>li>a:after{content:none}
.primary-menu>li.current-menu-item,.primary-menu>li.current-menu-ancestor,.primary-menu>li:hover,.primary-menu>li:focus-within{--tab:#0c7f87;--tab-edge:#0c7f87;color:#fff}
.primary-menu>li:hover,.primary-menu>li:focus-within{z-index:35}
.primary-menu>li>a:focus-visible{outline-offset:-5px}

/* Popular articles: asymmetric cutouts plus a top socket and bottom tab. */
.popular-list{gap:3px}
.popular-piece,.popular-piece:nth-child(even){--piece-fill:#108b93;--piece-stroke:#13858b;background:none;border:0;border-radius:0;overflow:visible;isolation:isolate;padding:23px 27px 24px;min-height:161px;margin:0;color:#fff}
.popular-piece:nth-child(even){--piece-fill:#f7f3ee;--piece-stroke:#e8e1d9;color:var(--ink)}
.popular-piece:before,.popular-piece:after{content:none}
.popular-piece:nth-child(even)>.puzzle-art{transform:rotate(180deg)}
.popular-piece h3{margin:0 24px 8px 0;font-size:16px;line-height:1.6;min-height:0}
.popular-rank{top:16px;right:19px;font-size:28px;line-height:32px}
.popular-excerpt{font-size:13px;line-height:22px;margin-bottom:9px}
.popular-views{font-size:12px;line-height:20px}
.tags-module{margin-top:45px}

/* Sidebar pieces have an uninterrupted outline on all four edges. */
.tag-pieces{gap:9px 9px;padding:0;align-items:stretch}
.tag-piece{--piece-fill:#f2f7f6;--piece-stroke:#258f9a;min-height:99px;padding:22px 17px 23px;background:none;border:0;border-radius:0;isolation:isolate;box-shadow:none;line-height:1.55;font-size:16px}
.tag-piece:before,.tag-piece:after{content:none}
.tag-piece:nth-child(4n+1),.tag-piece:nth-child(4n){--piece-fill:#fff5ec;--piece-stroke:#edaa7d}
.tag-piece>span{position:relative;max-width:100%;overflow-wrap:anywhere}
.tag-piece small{position:relative;margin-top:2px;font-size:12px;line-height:19px}
.tag-piece:hover{--piece-fill:#e5f2ee;box-shadow:none;color:var(--teal-dark)}
.tag-piece:nth-child(4n+1):hover,.tag-piece:nth-child(4n):hover{--piece-fill:#ffead9;color:#8f552f}
.tag-piece .puzzle-art path{transition:fill .18s}

/* Compact article tags retain the narrow neck, without a heading or hash prefix. */
.article-tags{border-top:1px solid #e0ebe6;gap:10px 12px;padding-top:19px;align-items:flex-start}
.article-tags .article-tag-piece{--piece-fill:#edf6f2;--piece-stroke:#80b4ad;position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:70px;max-width:100%;min-height:35px;padding:7px 19px 7px 22px;border:0;background:none;color:#287c77;font-size:13px;line-height:21px;isolation:isolate;white-space:normal;overflow-wrap:anywhere}
.article-tags .article-tag-piece:nth-child(even){--piece-fill:#fff1e3;--piece-stroke:#e8b58a;color:#a8663d;border:0}
.article-tags .article-tag-piece:hover{--piece-fill:#dcefe7;text-decoration:none}
.article-tags .article-tag-piece:nth-child(even):hover{--piece-fill:#ffe4cb}

/* Breadcrumbs are joined pieces; the text remains in full in the DOM. */
.breadcrumbs{border:0;padding:0;margin-bottom:25px}
.breadcrumbs ol{overflow:visible;min-width:0;gap:0;isolation:isolate}
.breadcrumbs li{--crumb-fill:#e9f2ed;position:relative;min-width:0;flex:0 1 auto;isolation:isolate;min-height:35px;line-height:23px}
.breadcrumbs li:nth-child(even){--crumb-fill:#ffe2c9}
.breadcrumbs li{--join-fill:var(--crumb-fill);--join-stroke:var(--wash);--join-width:1.2}
.breadcrumbs li:before,.breadcrumbs li:after{content:none}
.breadcrumbs li:first-child{flex:0 0 auto}
.breadcrumbs li>a,.breadcrumbs li>span{padding:6px 18px 6px 22px;max-width:100%;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.breadcrumbs li:first-child>a{padding-left:14px}
.breadcrumbs li.crumb-current{--crumb-fill:#f0f2f2;flex:0 100 auto;color:#6b7882}
.breadcrumbs li>a:hover{color:#076c71;text-decoration:underline;text-underline-offset:3px}
.breadcrumbs li>a:focus-visible{outline-offset:-3px}

/* Three connected tiles: heading first, then a separate photo and metadata area. */
.related-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;align-items:stretch;border-radius:5px}
.related-tile{--tile-fill:#e9f3ed;--join-fill:var(--tile-fill);--join-stroke:var(--wash);--join-width:1.2;position:relative;min-width:0;background:none;isolation:isolate;padding:17px 17px 18px;border-radius:4px}
.related-tile:nth-child(even){--tile-fill:#ffe5cd}
.related-tile:before,.related-tile:after{content:none}
.related-tile h3{min-width:0;margin:0 0 14px;font-size:16px;line-height:25px;font-weight:700}
.related-tile h3 a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.related-tile-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:13px;align-items:center;min-width:0}
.related-tile-thumb{aspect-ratio:9/7;border:3px solid #ffffffd9;border-radius:2px;align-self:center;width:100%}
.related-tile-meta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;font-size:12px;line-height:19px;min-width:0;color:#768079}
.related-tile-meta>.category-link{display:block;max-width:100%;font-size:13px;font-weight:600;color:#477e72}
.related-tile:nth-child(even) .related-tile-meta>.category-link{color:#a0643b}
.related-tile-meta time{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:11px}
.related-tile:hover h3 a{color:var(--teal-dark)}

/* All three footer pieces use complete contours; no separate joint strokes. */
.footer-puzzle{gap:2px;grid-template-columns:1fr .88fr 1fr}
.footer-puzzle>.footer-brand,.footer-puzzle>.footer-links,.footer-puzzle>.footer-social{--join-stroke:var(--wash);--join-width:1.8;background:none;border:0;isolation:isolate}
.footer-puzzle>.footer-brand{--join-fill:#148d94}
.footer-puzzle>.footer-links{--join-fill:#facbad;z-index:2}
.footer-puzzle>.footer-social{--join-fill:#14385b}
.footer-brand:after,.footer-links:after,.footer-social:before{content:none}
.footer-links h2,.footer-menu{position:relative;z-index:3}
/* Equal columns keep labels aligned regardless of their text length. */
.footer-links .footer-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;margin:0;padding:0;text-align:left;align-items:stretch}
.footer-links .footer-menu>li{min-width:0;max-width:100%;margin:0;padding:0;border:0}
.footer-links .footer-menu>li>a{display:block;min-height:32px;height:100%;padding:4px 0;white-space:normal;overflow-wrap:anywhere;line-height:1.6}

@media(min-width:768px) and (max-width:1100px){
 .footer-links .footer-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
 .primary-menu>li{min-width:110px}.primary-menu>li>a{padding-inline:25px}
 .popular-piece,.popular-piece:nth-child(even){min-height:147px;padding:21px 23px 23px}
 .popular-piece h3{font-size:15px;line-height:1.6;margin-right:19px}
 .popular-rank{font-size:25px;right:16px;top:16px}
 .popular-excerpt{font-size:12px;line-height:21px}.popular-views{font-size:11px}
 .tag-piece{min-height:87px;font-size:15px;padding:19px 13px 20px}.tag-piece small{font-size:11px;line-height:17px}
 .tag-pieces{gap:8px 7px}
 .related-tile{padding:14px 13px 15px}.related-tile h3{font-size:15px;line-height:23px;margin-bottom:12px}
 .related-tile-body{grid-template-columns:minmax(0,1fr);gap:9px}
 .related-tile-thumb{width:100%;max-width:125px;margin-inline:auto}
 .related-tile-meta{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2px 8px;font-size:11px}
 .related-tile-meta>.category-link{font-size:12px;max-width:100%}
}
@media(min-width:768px) and (max-width:860px){.tag-piece{font-size:14px;padding-inline:12px}.popular-piece,.popular-piece:nth-child(even){padding-inline:20px}.popular-piece h3{font-size:14px}}
@media(max-width:767px){
 .breadcrumbs{margin-bottom:20px}.breadcrumbs li{min-height:32px;font-size:12px;line-height:20px}.breadcrumbs li>a,.breadcrumbs li>span{padding:6px 13px 6px 18px}.breadcrumbs li:first-child>a{padding-left:11px}
 .article-tags{gap:8px 9px;padding-top:16px}.article-tags .article-tag-piece{font-size:12px;line-height:20px;min-height:33px;padding:6px 17px 6px 20px;min-width:64px}
 .related-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
 .related-tile{padding:12px 10px 13px}.related-tile h3{font-size:13px;line-height:22px;margin-bottom:10px}
 .related-tile-body{grid-template-columns:minmax(0,1fr);gap:8px}
 .related-tile-thumb{border-width:2px;max-width:134px;margin-inline:auto}
 .related-tile-meta{gap:3px;font-size:11px;line-height:17px;align-items:flex-start}
 .related-tile-meta>.category-link{font-size:11px;max-width:100%}.related-tile-meta time{font-size:10px}
 .footer-puzzle{grid-template-columns:1fr 1fr;gap:2px}
 .footer-puzzle>.footer-links{z-index:2}.footer-puzzle>.footer-social{position:relative;z-index:1;border:0}
 .footer-links .footer-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
 .footer-links .footer-menu>li>a{min-height:30px;padding:4px 0;line-height:22px}
}
@media(max-width:359px){.related-tile{padding-inline:8px}.related-tile h3{font-size:12px}.related-tile-meta time{font-size:9px}}