/* Native WordPress navigation, media, blocks and accessible controls. */
.menu, .sub-menu { list-style: none; margin: 0; padding: 0; }
.desktop-nav .menu { display: flex; align-items: center; gap: 22px; }
.menu li { position: relative; }
.desktop-nav .sub-menu { position: absolute; z-index: 30; top: 100%; left: 0; min-width: 190px; padding: 12px; border: 1px solid var(--line); background: var(--paper); display: none; }
.desktop-nav li:hover > .sub-menu, .desktop-nav li:focus-within > .sub-menu { display: block; }
.sub-menu a { display: block; }
.mobile-nav .menu, .mobile-nav .sub-menu { display: block; }
.mobile-nav .sub-menu { padding-left: 15px; }
.mobile-nav nav { max-height: 72vh; overflow-y: auto; max-width: calc(100vw - 48px); }
.mobile-nav nav a { display: block; white-space: normal; }
.site-header .menu a { white-space: normal; }
.site-header .brand { max-width: 40%; overflow-wrap: anywhere; }
.menu .current-menu-item > a { text-decoration: underline; text-underline-offset: 7px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.screen-reader-text:focus { width: auto; height: auto; clip-path: none; z-index: 999; background: var(--paper); padding: 12px; }
.entry-content { max-width: 800px; margin: 48px auto 0; display: flow-root; }
.entry-content > * { max-width: 100%; }
.entry-content :where(h2,h3,h4) { margin-top: 1.5em; }
.entry-content :where(img, video, iframe) { max-width: 100%; }
.entry-content img, .featured-image img, .post-thumbnail img { height: auto; display: block; }
.entry-content a, .entry-summary a, .post-meta a, .post-tags a, .edit-link a, .contact-details a { text-decoration: underline; text-underline-offset: 4px; }
.entry-content .wp-element-button { text-decoration: none; }
.entry-content figure { margin: 2em 0; }
.entry-content .alignwide { width: min(1100px, calc(100vw - 128px)); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.entry-content .alignfull { width: calc(100vw - 128px); max-width: 1280px; margin-left: 50%; transform: translateX(-50%); }
.entry-content .alignleft { float: left; margin: 0 24px 20px 0; }
.entry-content .alignright { float: right; margin: 0 0 20px 24px; }
.entry-content .aligncenter { margin-inline: auto; text-align: center; }
.wp-block-image figcaption, .wp-caption-text, .gallery-caption { font-size: 12px; color: var(--muted); text-align: center; }
.entry-content :where(ul,ol) { padding-left: 1.5em; }
.entry-content blockquote { border-left: 2px solid var(--moss); margin-inline: 0; padding-left: 24px; color: var(--muted); }
.entry-content :where(pre,code) { overflow-wrap: anywhere; }
.entry-content pre { overflow-x: auto; padding: 20px; background: var(--surface); }
.entry-content table { border-collapse: collapse; width: 100%; }
.entry-content td, .entry-content th { border: 1px solid var(--line); padding: 10px; }
.entry-content audio { width: 100%; min-width: 0; }
.featured-image { max-width: 1000px; margin: 40px auto; }
.featured-image img { width: 100%; }
.post-thumbnail { display: block; margin-bottom: 24px; }
.post-thumbnail img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 3px; }
.writing-entry h2.entry-title { font-size: 27px; margin-block: 18px; line-height: 1.55; }
.writing-entry h2 a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; }
.archive-list { margin-top: 40px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.post-meta, .post-tags, .edit-link { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.pagination { display: block; margin-top: 42px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 10px; }
.page-numbers { display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 30px; }
.page-numbers.current { background: var(--ink); color: var(--paper); }
.article-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 28px; }
.post-navigation { display: block; border-top: 1px solid var(--line); padding-top: 30px; margin-top: 50px; }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 30px; width: 100%; }
.post-navigation .nav-next { margin-left: auto; text-align: right; }
.page-links { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 30px; }
.contact-details dl > div { display: grid; grid-template-columns: 100px minmax(0,1fr); padding-block: 12px; border-bottom: 1px solid var(--line); }
.contact-details dt { color: var(--muted); }
.contact-details dd { margin: 0; overflow-wrap: anywhere; }
.qr-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.wechat-card { margin: 28px 0; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: white; align-self: start; }
.wechat-card img { display: block; width: min(100%,300px); height: auto; margin: 0 auto 20px; }
.wechat-card figcaption { font-size: 13px; overflow-wrap: anywhere; }
.copy-group .interaction-status { margin-bottom: 0; }
.home-page-content { padding-block: 20px 50px; }
.search-form { margin-block: 35px; }
.search-field, .search-submit, .post-password-form input { max-width: 100%; border: 1px solid var(--line); background: var(--paper); padding: 12px 16px; border-radius: 4px; }
.search-submit, .post-password-form input[type=submit] { background: var(--ink); color: white; }
.page-heading h1, .hero h1 { overflow-wrap: anywhere; }
@media(max-width:1100px) { .desktop-nav .menu { gap: 14px; } .archive-list { grid-template-columns: repeat(2,minmax(0,1fr)); } .entry-content .alignwide, .entry-content .alignfull { width: calc(100vw - 80px); } }
@media(max-width:800px) { .site-header .brand { max-width: calc(100% - 100px); } }
@media(max-width:700px) { .entry-content { margin-top: 32px; } .entry-content .alignwide, .entry-content .alignfull { width: calc(100vw - 48px); } .archive-list, .qr-grid { grid-template-columns: 1fr; } .entry-content .alignleft, .entry-content .alignright { float: none; margin-inline: auto; } .post-navigation .nav-links { flex-direction: column; } .contact-details dl > div { grid-template-columns: 80px minmax(0,1fr); } }