/* 墨林 - Molinink · 作者 Kira · https://www.molinink.com */
/* 由 tools/build-assets.php 生成，勿手改 */
/*
 * ZAXU 重制版 · 外壳适配（原版没有、墨林必须有）
 * 墨林 - Molinink · 作者 Kira · https://www.molinink.com
 */

/* 程序版权：契约要求常显，不遮挡、不改名 */
.site-footer-container .molin-credit {
    display: block;
    margin-top: .8rem;
    font-size: 1.2rem;
    line-height: 1.5;
    opacity: .5;
}

.site-footer-container .molin-credit a {
    color: inherit;
    text-decoration: none;
}

/* 列表分页：原版用前端 AJAX，没有服务端分页 DOM（规格 §7.2），这里按原版设计语汇补 */
.post-pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 0 1rem;
    font-size: 1.4rem;
}

.post-pagination-container .post-pagination-prev,
.post-pagination-container .post-pagination-next {
    display: inline-flex;
    align-items: center;
    height: 3.6rem;
    padding: 0 1.6rem;
    border-radius: .4rem;
    background-color: var(--zaxu-paper, #fff);
    color: var(--zaxu-ink, inherit);
    box-shadow: 0 1rem 2rem -2rem rgba(0, 0, 0, .2);
}

.post-pagination-container .post-pagination-current {
    opacity: .5;
    font-variant-numeric: tabular-nums;
}

/* 图片 Logo 跟随文字色：原版 logo 是内联 SVG 改 fill，墨林是 <img>，只能滤镜近似 */
.header-logo.logo-dynamic img {
    filter: brightness(0);
}

@media (prefers-color-scheme: dark) {
    .header-logo.logo-dynamic img {
        filter: brightness(0) invert(1);
    }
}

/* 独立页面的子页清单（原版靠菜单，墨林给一条就地索引） */
.zaxu-page-subs {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: .1rem solid rgba(51, 51, 51, .1);
    font-size: 1.4rem;
}

.zaxu-page-subs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 有 Hero 的页面在首屏：页头压在图上，背景透明、文字转白（原版 body.header-sticky 那套的简化） */
.site-header-container.transparent {
    background-color: transparent;
    border-bottom-color: transparent;
}

.site-header-container.transparent .header-logo,
.site-header-container.transparent .header-holder .content-list a,
.site-header-container.transparent .header-holder .content-list button,
.site-header-container.transparent .header-holder .content-list .header-action-box a {
    color: #fff;
}
/* 桌面菜单在原版 style.min.css 里单开了一条
   `.site-header-container .header-holder .content-list .content-item.header-menu-container nav > ul > li > a{color:#333}`
   （0,4,1），比上面的 #fff 规则（0,3,0）高，透明页头上菜单被压成深灰。
   旧站是纯白，这里同权重补一条，只在 transparent 状态生效。 */
.site-header-container.transparent .header-holder .content-list .content-item.header-menu-container nav > ul > li > a,
.site-header-container.transparent .header-holder .content-list .content-item.header-menu-container nav > ul > li .sub-menu-box a {
    color: #fff;
}
/* 首页滚过 Hero 后 .transparent 会被移除，原版 :not(.transparent) 的 #333 !important
   会把 Logo/菜单压黑。这条以前只挂在 body.home 上，换成深色纸后其他页面的页头
   就全是深字压深底（1440×900 实测对比度约 1.3:1）。改成全站跟随 --zaxu-ink：
   默认浅色纸时 ink 就是 #333，和原版一致；深色纸时自动转亮。 */
/* 选择器要带上 :not(.transparent)，否则压不住原版
   `.site-header-container:not(.transparent) .header-holder{color:#333 !important}`
   （0,3,0 比 0,1,0 高，实测改不动页头）。transparent 时仍走上面那条 #fff。 */
.site-header-container:not(.transparent) .header-holder,
.site-header-container:not(.transparent) .header-logo,
.site-header-container:not(.transparent) .main-menu > li > a,
.site-header-container:not(.transparent) .menu-item > a,
.site-header-container:not(.transparent) .header-holder .header-action-box a,
.site-header-container:not(.transparent) .header-holder .header-action-box button {
    color: var(--zaxu-ink) !important;
}

/* 原版 color-scheme.php：汉堡菜单面板、菜单文字、搜索框都跟当前页的纸色/正文色走。
   深色首页打开菜单时面板是深色、文字是浅色，而不是默认的浅色面板。 */
.site-hamburger-menu-container {
    background-color: var(--zaxu-paper);
    color: var(--zaxu-ink);
}

.site-hamburger-menu-container .hamburger-menu-content nav .main-menu > .menu-item > a {
    color: var(--zaxu-ink);
}

.site-hamburger-menu-container .site-search-container .searchform input[type='search'] {
    color: var(--zaxu-ink);
    background-color: color-mix(in srgb, var(--zaxu-ink) 10%, transparent);
}

.site-hamburger-menu-container .site-search-container .searchform input[type='search']::placeholder {
    color: color-mix(in srgb, var(--zaxu-ink) 30%, transparent);
}

/* 菜单打开时原版会把页头文字切回页面正文色；深色纸下必须仍是浅色 */
.site-header-container.opened .header-holder,
.site-header-container.opened .header-holder .header-logo,
.site-header-container.opened .header-holder .menu-item a {
    color: var(--zaxu-ink) !important;
}

/* 头像下拉：原版 color-scheme.php 让面板底色 = 当前页纸色、文字 = 当前页正文色、
   边框 = 正文色 10%。重制版原来只给了 body，下拉仍是原版默认的浅色面板。 */
.site-header-container .header-action-box.account .account-container {
    color: var(--zaxu-ink) !important;
    border-color: color-mix(in srgb, var(--zaxu-ink) 10%, transparent) !important;
    background-color: var(--zaxu-paper) !important;
}

.site-header-container .header-action-box.account .account-container:before {
    border-color: color-mix(in srgb, var(--zaxu-ink) 10%, transparent) !important;
    background-color: var(--zaxu-paper) !important;
}

.site-header-container .header-action-box.account .account-container .account-box .account-profile,
.site-header-container .header-action-box.account .account-container .account-box .account-action li a {
    color: var(--zaxu-ink);
}

/* 透明页头压在浅色图上时，给文字和图标一点阴影，免得白字糊在亮背景里 */
.site-header-container.transparent .header-logo,
.site-header-container.transparent .header-holder .content-list a,
.site-header-container.transparent .header-holder .content-list button,
.site-header-container.transparent .header-holder .content-list .header-action-box a,
.site-header-container.transparent .header-holder .content-list .header-action-box button,
.site-header-container.transparent .header-holder .content-list .header-action-box svg {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
/* 透明页头再加一层很淡的顶部压暗，保证白字白图标在浅色封面上也看得清（原版在深色图上用不到） */
.site-header-container.transparent::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 150px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0));
    pointer-events: none;
}
.site-header-container.transparent .header-holder { position: relative; z-index: 1; }
/* 分享面板：关闭按钮（原版 style.min.css 没写这个按钮，这里补上，落在右上角，不挡列表） */
.site-sharing-container .site-sharing-content {
    padding-bottom: 1.6rem;
}

.site-sharing-container .site-sharing-content header {
    margin-bottom: 1.6rem;
    padding-right: 3rem;
}

.site-sharing-close {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    color: inherit;
    cursor: pointer;
}

.site-sharing-close .icon {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.site-sharing-close .icon:before,
.site-sharing-close .icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.4rem;
    height: .16rem;
    background: currentColor;
    border-radius: 1rem;
}

.site-sharing-close .icon:before { transform: translate(-50%, -50%) rotate(45deg); }
.site-sharing-close .icon:after { transform: translate(-50%, -50%) rotate(-45deg); }

/* 分享项：让 <a> 和 <button> 表现一致（原版只有 button 规则） */
.site-sharing-container .site-sharing-content ul li > a {
    display: block;
    position: relative;
    padding: 1.4rem;
    border-radius: 1.5rem;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.site-sharing-container .site-sharing-content ul li > a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    transition: opacity .2s;
    opacity: .05;
    z-index: 1;
}

.site-sharing-container .site-sharing-content ul li > a:hover:before { opacity: .1; }

.site-sharing-container .site-sharing-content ul li > a .icon {
    display: block;
    position: relative;
    width: 2.8rem;
    height: 2.8rem;
    z-index: 2;
}

.site-sharing-container .site-sharing-content ul li > a .icon svg {
    display: block;
    width: 100%;
    height: auto;
}

.site-sharing-container .site-sharing-content ul li > a .title {
    display: block;
    font-size: 1.2rem;
    opacity: .5;
    z-index: 2;
    position: relative;
}

.site-sharing-container .site-sharing-content ul li > button .icon svg {
    display: block;
    width: 100%;
    height: auto;
}

.site-sharing-container .site-sharing-content ul li > button .title {
    display: block;
    font-size: 1.2rem;
    opacity: .5;
    position: relative;
    z-index: 2;
    margin-top: .2rem;
}

/* 微信二维码 / 海报提示区 */
.site-sharing-container .site-sharing-content .zaxu-share-qr,
.site-sharing-container .site-sharing-content .zaxu-share-poster {
    display: none;
    padding: 1.6rem 0 .4rem;
}

.site-sharing-container .site-sharing-content .zaxu-share-qr.on,
.site-sharing-container .site-sharing-content .zaxu-share-poster.on {
    display: block;
}

.site-sharing-container .site-sharing-content .zaxu-share-qr canvas,
.site-sharing-container .site-sharing-content .zaxu-share-qr img {
    display: block;
    margin: 0 auto;
}

.site-sharing-container .site-sharing-content .zaxu-share-tip {
    margin: .8rem 0 0;
    font-size: 1.2rem;
    opacity: .5;
}
/* 平板段(768–1023)也走抽屉。
   原版 768 就把桌面导航放出来,那会儿主菜单才 4 项;现在长到 8 项,768 宽要 820px,
   末项被裁、右侧分享/搜索/头像三个图标整个被挤出屏幕(2026-10-23 实测,1024 起正常)。
   所以把抽屉断点从 767 提到 1023:768–1023 用抽屉,桌面导航 1024 起。 */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .site-header-container .header-holder .content-list .content-item.header-menu-container {
        display: none;
    }

    .site-header-container .header-holder .content-list .content-item.navigation-action-container .header-action-box.hamburger-menu {
        display: block;
    }
}

/* 移动端页头：原版 .header-holder 本身不再加左右 padding（Logo 距左边 20px） */
@media only screen and (max-width: 767px) {
    .site-header-container .header-holder {
        padding-left: 0;
        padding-right: 0;
    }

    .site-header-container .content-item.navigation-action-container .header-action-box > button .icon {
        width: 2.4rem;
        height: 2.4rem;
    }

    .site-hamburger-menu-container .navigation-container {
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }

    .site-hamburger-menu-container .navigation-container .main-menu > .menu-item > a {
        font-size: 1.6rem;
        padding: .8rem 0;
    }
}
/* 移动端图标盒恢复原版 40×40、间距 10px；原版在 390px 下并没有收成 32 */
/* 评论蜜罐字段：内核要这个 input，但不能占页面高度（原版没有） */
.comment-hp {
    position: absolute !important;
    left: -9999px !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}
/* 底部标签条：原版只在 ≥990 才在单篇页收起，其余页型都是 ≥768 收起。
   于是 768–989 的平板上桌面导航已经在了，标签条还挂着、还压着页脚。这里跟其余页型对齐 */
@media only screen and (min-width: 768px) {
    .site-tabbar-container.loaded.post {
        display: none;
    }
}

/* 触屏点击区垫到 44px 下限(图标本身尺寸不变，只放宽外框)。原版标签条一格约 43px */
@media only screen and (max-width: 767px) {
    .site-tabbar-container .site-tabbar-box button,
    .site-tabbar-container .site-tabbar-box a,
    .site-hamburger-menu-container .sub-menu-toggle {
        min-width: 4.4rem;
        min-height: 4.4rem;
    }
}

/* 侧栏面板原版写死 50rem(500px)，手机上比视口还宽，滑出来横向溢出 */
@media only screen and (max-width: 767px) {
    .site-sidebar-container .site-sidebar-wrap {
        width: 100%;
        max-width: 50rem;
    }
}

/* 汉堡菜单的二级菜单：原版只给 .sub-menu-toggle 画了图标，展开态挂在 li:hover 上；
   触屏没有 hover，这里由 shell.js 切 .submenu-open，CSS 负责展开 */
.site-hamburger-menu-container .main-menu li.menu-item-has-children.submenu-open > .sub-menu {
    display: block;
}
.site-hamburger-menu-container .sub-menu-toggle {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
}

/* iOS 聚焦输入框时字号 <16px 会强制放大整页。原版表单统一 1.4rem(=14px)，去掉缩放锁之后必须补这个，
   否则 iPhone 一点搜索/评论框整页就蹦大。只对 iOS 生效，桌面与安卓保持原字号 */
@media (max-width: 1024px) {
    @supports (-webkit-touch-callout: none) {
        input[type='text'], input[type='email'], input[type='password'], input[type='search'],
        input[type='number'], input[type='url'], input[type='tel'], textarea {
            font-size: 16px;
        }
    }
}

/* 正文显隐只由原版 .loaded 控制；无 JS 时由 page-head.twig 的 noscript 兜底。 */

/* ── 无障碍：可见焦点 ─────────────────────────────────────────────
   style.min.css 里有 *:focus{outline:none} 与 button:focus-visible{outline:none}，键盘用户完全看不到焦点。 */
:focus-visible {
    outline: 2px solid #0088ff;
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #0088ff !important;
    outline-offset: 2px;
}

/* 原版给链接统一上了 transition:all .4s，焦点环会从初始值（3px/#333）慢慢渐变过来，
   刚按 Tab 的一瞬看到的是错的颜色。焦点指示必须即时出现，故键盘焦点态下关掉过渡。 */
:focus-visible {
    transition-duration: 0s !important;
}

/* ── 无障碍：跳到正文 ─────────────────────────────────────────────
   默认移出视口，键盘聚焦时才出现在左上角。用 :focus 而非 :focus-visible，兼容老浏览器。 */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    /* 原版页头链接带 transition（含 left），会把 -9999px 慢慢滑过来，聚焦瞬间整块飞过屏幕；
       .site-header-container a 的选择器比 .skip-link 更高，所以这里必须 !important */
    transition: none !important;
    background: #111;
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: 0 0 .5rem 0;
}

.skip-link:focus {
    left: 0;
}


/* ── 无障碍：视觉隐藏但保留给读屏（原版 .screen-reader-text 是 display:none，读屏读不到） ──
   用于博文页这类原版没有可见标题、但语义上需要 H1 的地方。 */
.zaxu-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 侧边浮动按钮（返回 / 评论 / 回顶）
   原版把按钮底色写死成 #fff、图标走 currentColor。
   换成深色纸后 body 的正文色是浅色，图标就变成白底白图标、肉眼看不见。
   按钮底保持原版的白色，只把图标与描边环固定为深色，两种纸色下都成立 */
.site-action-box ul li button {
    color: #1b1c1e;
}

.site-action-box ul li button .icon svg {
    fill: currentColor;
}

/* 系统开「减弱动效」时的 CSS 侧兜底：原版 style.min.css 里还留着切分类转圈、加载遮罩这类纯 CSS 动画，
   JS 侧已按 prefers-reduced-motion 收敛（hero / shell / single / filter），这些只能在这里压掉。
   与 theme-style.twig 里 motion.level=off 的 0.001ms 兜底同一口径。 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/**
 * 墨林 - Molinink · 作者 Kira · https://www.molinink.com
 * Hero 轮播适配层：原版 CSS 只认 .slide-media-box.active，这里改由媒体查询切设备，并补 img 化的媒体盒。
 */

.hero-slide-container {
    height: 100vh;
}

/* 原版 Hero 是 fixed（.sticky = position:fixed）：整页滚动时媒体一直垫在视口底下，
   「近期文章」与页脚都从气泡上面滚过去，整屏始终是那块深色气泡。
   注意：这是原版口径，不要改成 absolute —— 一改往下滚就会露出纸色，首页立刻变成
   「上半屏气泡、下半屏白纸」（2026-10-24 复现过，主人明确要原版这种整屏观感）。 */
.hero-slide-container.sticky {
    position: fixed;
}

/* 非 sticky 时 Hero 占住文档流，正文让位量归零，和原版同步。 */
body:has(.hero-slide-container:not(.sticky)) .site-content {
    margin-top: 0 !important;
}

/* CSS 兜底（不依赖 :has），JS 也会按 sticky 状态写入。 */
.hero-slide-container:not(.sticky) {
    position: relative;
}


/* 原版是 JS 给 boxes 加 .active，模板输出 desktop/pad/mobile 三份，靠断点显隐 */
.hero-slide-container gallery .swiper-wrapper .swiper-slide .slide-media-box.desktop {
    display: block;
}

.hero-slide-container gallery .swiper-wrapper .swiper-slide .slide-media-box.pad,
.hero-slide-container gallery .swiper-wrapper .swiper-slide .slide-media-box.mobile {
    display: none;
}

.hero-slide-container gallery .swiper-wrapper .swiper-slide .slide-media-box .slide-media-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border: 0;
}

/* 原版的懒加载占位底色 */
.hero-slide-container gallery .swiper-wrapper .swiper-slide .slide-media-box .slide-media-image img:not(.loaded) {
    background-color: rgba(51, 51, 51, .1);
}

.hero-slide-container gallery .swiper-wrapper .swiper-slide .slide-media-box .slide-video-box .slide-media-video {
    display: block;
}

@media screen and (max-width: 768px) {
    .hero-slide-container gallery .swiper-wrapper .swiper-slide .slide-media-box.desktop {
        display: none;
    }

    .hero-slide-container gallery .swiper-wrapper .swiper-slide .slide-media-box.pad {
        display: block;
    }
}

@media screen and (max-width: 430px) {
    .hero-slide-container gallery .swiper-wrapper .swiper-slide .slide-media-box.desktop,
    .hero-slide-container gallery .swiper-wrapper .swiper-slide .slide-media-box.pad {
        display: none;
    }

    .hero-slide-container gallery .swiper-wrapper .swiper-slide .slide-media-box.mobile {
        display: block;
    }
}

/* 图片模式合并成一份 .slide-media-box.desktop.responsive（内部用 <picture> 按屏取图），
   它自带 .desktop 之名，必须压过 768/430 断点里「隐藏 .desktop」的规则。 */
.hero-slide-container gallery .swiper-wrapper .swiper-slide .slide-media-box.responsive {
    display: block !important;
}

.hero-slide-container gallery .swiper-wrapper .swiper-slide .slide-media-box .slide-media-image picture {
    display: block;
    width: 100%;
    height: 100%;
}


.hero-slide-container gallery,
.hero-slide-container .swiper-wrapper,
.hero-slide-container .swiper-wrapper .swiper-slide,
.hero-slide-container .slide-media-box {
    height: 100%;
}
/* 没有 Hero 时的标题带（对齐原版 1.2.6 首页 .hero--gradient 的观感：
   浅色渐变底 + 大字标题 + 淡副标题，宽度跟内容区一致） */
.zaxu-hero-band {
    width: 118rem;
    max-width: calc(100% - 4rem);
    margin: 0 auto;
    padding: 56px 32px 40px;
    border-radius: 1rem;
    background-image:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, #0088FF 16%, transparent), transparent 62%),
        linear-gradient(135deg, color-mix(in srgb, #0088FF 7%, transparent), transparent 58%);
}

.zaxu-hero-band .hero-text h1 {
    margin: 0 0 12px;
    font-size: clamp(1.8rem, 4vw, 2.9rem);
    font-weight: 700;
    line-height: 1.25;
    color: inherit;
}

.zaxu-hero-band .hero-sub {
    margin: 0;
    font-size: 1.05em;
    opacity: .6;
}

@media only screen and (max-width: 767px) {
    .zaxu-hero-band {
        padding: 36px 20px 28px;
        border-radius: 0;
    }
}
/* sticky 页头下面别被盖住（页头高 8rem） */
body.header-sticky .zaxu-hero-band {
    margin-top: 8rem;
}

/*
 * 墨林 - Molinink
 * 作者 Kira
 * https://www.molinink.com
 */

/* 原版宫格的 .column 由 Salvattore 在浏览器里生成，墨林不跑那套脚本；
   这里让容器自己出列，data-columns 由模板按布局设置写成 auto / 2 / 3 / 4。
   注意：视觉上仍是"从左到右一行一行"排；原版 DOM 里的 .column 只是 Salvattore
   的分列容器，阅读顺序并不是先填满一列。 */

.post-article-container.grid-mode.zaxu-masonry-container {
    display: grid;
    align-items: start;
}

/* 窄屏一律单列（原版 auto 在 700px 以下按 round(宽度 / 400) 也算出 1 列） */
.post-article-container.grid-mode.zaxu-masonry-container[data-columns] {
    grid-template-columns: minmax(0, 1fr);
}

/* auto 跟原版同一个算法：列数 = round(容器宽 / 400)。
   CSS 算不了除法，用 auto-fill + 32rem 最小宽近似：680px 容器出 2 列（原版 home），
   1180px 容器出 3 列（原版列表页），375 手机宽自然 1 列。 */
.post-article-container.grid-mode.zaxu-masonry-container[data-columns="auto"] {
    grid-template-columns: repeat(auto-fill, minmax(min(32rem, 100%), 1fr));
}

@media only screen and (min-width: 700px) {
    .post-article-container.grid-mode.zaxu-masonry-container[data-columns="2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .post-article-container.grid-mode.zaxu-masonry-container[data-columns="3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .post-article-container.grid-mode.zaxu-masonry-container[data-columns="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* 万一以后把原版 Salvattore 也挂上：它会加 .mounted 并把卡片包进 .column，
   这时退回原版的 flex 列布局，免得两套列算法打架 */
.post-article-container.grid-mode.zaxu-masonry-container.mounted {
    display: flex;
}

/* 卡片特色图：原版把 img 绝对定位在 .tile-media 里，靠 padding-bottom 撑比例。
   墨林的 img 是普通流内元素，会把 figure 顶高（padding + 图片自身高度），
   下方露出 media 背景色 —— 这里补回绝对定位，图与比例框严格重合。 */
.post-article-container.grid-mode.zaxu-masonry-container .tile-article .tile-media > img,
.post-article-container.grid-mode.zaxu-masonry-container .tile-article .tile-media > picture > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-article-container.grid-mode.zaxu-masonry-container .tile-article .tile-media {
    position: relative;
    overflow: hidden;
}

/* 列表模式：原版 .list-media 是正方形（padding-bottom:100%），图由 <picture>
   绝对定位铺满；墨林的 img 是裸元素，不补这条会被图片自身高度把卡片撑高。
   原版手机卡片高 80、桌面 160，就是缩略图边长。 */
.post-article-container.list-mode .list-article .list-media > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 首页内容区宽度：原版首页「近期文章」块是 68rem（680），两列各 330；
   列表模式同样收在 680 里（不然后台切成列表后整块会铺满 1280）。
   和 /boke 的 1180 宽不是一个容器，别混用。 */
.zaxu-post-container.grid-mode.alignfull,
.zaxu-post-container.list-mode.alignfull {
    width: 68rem;
    max-width: calc(100% - 4rem);
    margin-left: auto;
    margin-right: auto;
}

/* 767-899 这一档 alignwide 的左右内边距是 50px（原版容器 = 视口 - 100，767 下 667、768 下 668）。
   固定 68rem 会顶到 680，比原版宽 12-13px 并把卡片撑到 330。2026-10-21 修正。 */
@media only screen and (min-width: 700px) and (max-width: 899px) {
    .zaxu-post-container.grid-mode.alignfull,
    .zaxu-post-container.list-mode.alignfull {
        max-width: calc(100% - 100px);
    }
}

/* 展示柜：原版 .showcase-media 是固定 3:2 比例框，图片绝对定位铺满；
   墨林的 img 是裸元素，不补这条会把 figure 撑成「比例框 + 图片自身高度」。 */
.post-article-container.showcase-mode .showcase-article .showcase-media > img,
.post-article-container.showcase-mode .showcase-article .showcase-media > picture > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 原版「查看全部」自带 translateX(.5rem)，满宽展示柜下会顶出 5px 横向滚动 */
.zaxu-post-container.showcase-mode .zaxu-post-headline {
    padding-right: .5rem;
}

/* 首页是深色纸，原版 color-scheme.php 会把列表卡底与文字一起切成深色；
   墨林没有那套页面级配色，这里用当前纸色/正文色补上，避免深色首页出现白卡。 */
body.home .post-article-container.list-mode .list-article .list-content:before {
    background-color: var(--zaxu-paper);
}

body.home .post-article-container.list-mode .list-article .list-content .list-link {
    color: var(--zaxu-ink);
}

.zaxu-post-container.alignfull .zaxu-post-wrapper {
    width: auto;
    max-width: none;
}

/* 两列：原版 1180 宽两列，卡片约 556 */
@media only screen and (min-width: 900px) {
    .post-article-container.grid-mode.zaxu-masonry-container[data-columns="auto"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    /* 原版手机端卡片就是容器整宽（390 视口下左右各 20、卡宽 350）；
       这里不再给 wrapper 额外缩进，否则卡会窄 20px。 */
    .zaxu-post-wrapper {
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

/*
 * 全站文章页(/blog)适配
 * 墨林 - Molinink · 作者 Kira · https://www.molinink.com
 *
 * 原版这一页(/boke)是 1180 宽三列宫格、卡头压在图上、筛选条在顶部；
 * style.min.css 里筛选条与宫格的样式已经全在原版样式里，这里只补三件原版靠 JS 做的事：
 * 列数（原版 Salvattore 算的）以及墨林式分页条的位置。
 */

/* 列数：cards.css 在 ≥900px 把 auto 钉成 2 列（首页口径），这一页按原版 round(容器 / 400) 还原成 3 列 */
.zaxu-blog-content-box .post-article-container.grid-mode.zaxu-masonry-container[data-columns="auto"] {
    grid-template-columns: repeat(auto-fill, minmax(min(32rem, 100%), 1fr));
}

/* 原版切分类：清空 + 转圈，再整块落回来，不另加入场动画。 */
.zaxu-blog-content-box {
    min-height: 8rem;
}

/* 分页条与宫格同一列宽，别让它两侧多出一层 10rem 缩进 */
.zaxu-blog-content-box .post-pagination-container {
    width: 100%;
}

/* 滚动续页跑起来之后，底部不再摆原版没有的分页条；
   JS 没跑（或没加载）时这一行不生效，分页条仍是唯一的翻页手段 */
.zaxu-blog-content-box.has-infinite .post-pagination-container {
    display: none;
}

/* ── 说说流（照旧站：左分类 / 中说说流 / 右账户卡） ──
   原版这层宽度靠内联样式撑开，重制版没有那段内联，给 flex 列一个确定的伸缩规则，
   不然中栏会按内容收缩成一条窄柱（实测 284px vs 旧站 720px）。 */
.zaxu-say-container {
    display: flex;
    align-items: flex-start;
}

.zaxu-say-container .zaxu-say-feed-container {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}

.zaxu-say-container .zaxu-say-feed-box {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.zaxu-say-empty {
    margin: 0;
    padding: 2rem;
    color: rgba(51, 51, 51, .6);
}

@media (max-width: 1023px) {
    .zaxu-say-container {
        flex-direction: column;
    }

    .zaxu-say-container .zaxu-say-sidebar-container,
    .zaxu-say-container .zaxu-side-category-container {
        width: 100%;
        margin: 0 0 2rem;
        position: static;
    }
}

/* 说说流底部提示（旧站滚到底的那句），居中弱化 */
.zaxu-say-feed-loaded {
    padding: 2rem 0 4rem;
    color: rgba(51, 51, 51, .45);
    font-size: 1.4rem;
    text-align: center;
}

/*
 * 墨林 - Molinink
 * 作者 Kira
 * https://www.molinink.com
 *
 * 单篇适配：只补原版 style.min.css 里没有、而墨林数据结构必然踩到的几处，
 * 能用原版 class 顶住的一律不改（颜色 / 间距 / 字号全部走原版变量）。
 */

/*
 * 正文列宽：原版把列宽压在 .entry-content 的子元素上（.entry-content > *…），
 * 只有块级子元素才接得住这条。正文整段直出（纯文本 / 只有行内标签）时没有块级子元素，
 * 文字就会顶到窗口左边。这里只在这种"没有块级子元素"的正文上把列宽补到容器，
 * 有块级子元素时完全交给原版规则；不支持 :has() 的浏览器忽略这条，也不会把对的版式改坏。
 */
body[class*='single-'] .site-content > article > .entry-content:not(:has(> p, > div, > h1, > h2, > h3, > h4, > h5, > h6, > ul, > ol, > dl, > blockquote, > pre, > figure, > table, > hr, > section, > article, > aside, > header, > footer, > form, > img, > video, > iframe, > gallery)) {
    max-width: var(--site-default-width);
    width: calc(100% - 10rem);
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 700px) {
    body[class*='single-'] .site-content > article > .entry-content:not(:has(> p, > div, > h1, > h2, > h3, > h4, > h5, > h6, > ul, > ol, > dl, > blockquote, > pre, > figure, > table, > hr, > section, > article, > aside, > header, > footer, > form, > img, > video, > iframe, > gallery)) {
        width: calc(100% - 6rem);
    }
}

@media only screen and (max-width: 500px) {
    body[class*='single-'] .site-content > article > .entry-content:not(:has(> p, > div, > h1, > h2, > h3, > h4, > h5, > h6, > ul, > ol, > dl, > blockquote, > pre, > figure, > table, > hr, > section, > article, > aside, > header, > footer, > form, > img, > video, > iframe, > gallery)) {
        width: calc(100% - 4rem);
    }
}

/* 原版靠底部 Tabbar 开分享 / 评论；墨林没有 Tabbar，两个触发点落在正文末尾，沿用原版列宽 */
.entry-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: var(--site-default-width);
    width: calc(100% - 10rem);
    margin: 3rem auto 0;
    gap: 1rem;
}

@media only screen and (max-width: 700px) {
    .entry-actions {
        width: calc(100% - 6rem);
    }
}

@media only screen and (max-width: 500px) {
    .entry-actions {
        width: calc(100% - 4rem);
    }
}

/* 口令表单：原版只给 input[type='text'] 定了最小宽度，密码框补同一口径 */
.post-password-form .action input[type='password'] {
    min-width: 22rem;
}

/* 上下篇 List 版式：内核 pager 只有标题、没有封面。
   没有 .post-navigation-featured-media 时，原版按「12rem 封面 + 5rem 箭头」算的文字宽度会留出空洞。
   选择器照原版那条链写全，否则权重不够盖不住原值 */
.post-navigation-container.list-mode .post-navigation-list .post-navigation-item .post-navigation-link .post-navigation-box .post-navigation-headline:first-child {
    width: calc(100% - 5rem);
}

/* 上下篇 Gallery 版式：原版只写了 16_9 / 4_3 的占位高度，1_1 补上，否则容器高度塌成 0。
   gallery 只在每篇都有封面时才输出（见 post-nav.twig），没有封面整块走 list 版式，
   所以这里不再为空 figure 兜底 */
.post-navigation-container.gallery-mode .post-navigation-box .post-navigation-content[data-ratio='1_1'] {
    padding-bottom: 100%;
}
/* 正文里标题紧跟图片（figure 自身 margin-top 为 0）时只剩 h2 的 8px 下边距，
   标题会顶在图片上沿。这里给紧邻的 figure 补一段顶边距，其他块级元素不受影响 */
.entry-content h1 + figure,
.entry-content h2 + figure,
.entry-content h3 + figure,
.entry-content h4 + figure {
    margin-top: 1.6rem;
}

/*
 * 墨林 - Molinink · 作者 Kira · https://www.molinink.com
 * WP 核心区块的最小样式层：原版靠 WordPress 自带的 block-library 与 core-block-supports 输出，
 * 墨林不加载 WordPress，从 WP 导入的正文（columns / cover / image）会退化成单栏、丢圆角。
 * 只补正文实际用到的那几个区块；除「列」本身外，其余规则都收在 .wp-block-columns 里，
 * 免得影响单篇正文里散落的 figure / caption。数值取自原版线上实测（1440×900 / 390×844）。
 */

/* 列：flex 两栏，列间距 24、块底距 28（与原版 computed 一致） */
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: normal;
    box-sizing: border-box;
    gap: 24px;
    margin-bottom: 1.75em;
}

/* 原版容器规则由 core-block-supports 内联输出 */
.wp-container-corecolumns-is-layout-7387b849 {
    flex-wrap: nowrap;
}

.wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 带内联 flex-basis 的列不拉伸：50% 列仍是 720、320px 列仍是 320 */
.wp-block-columns > .wp-block-column[style*="flex-basis"] {
    flex-grow: 0;
}

.wp-block-column.is-vertically-aligned-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 列内段落只有上间距、没有底距（原版 computed 就是 24px 0 0 0） */
.wp-block-columns .wp-block-paragraph {
    margin-bottom: 0;
}

.wp-block-columns .wp-block-paragraph + .wp-block-paragraph {
    margin-top: 24px;
}

/* 列里的最后一层列没有底距 */
.wp-block-columns .wp-block-columns:last-child {
    margin-bottom: 0;
}

/* 封面区块 */
.wp-block-columns .wp-block-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 43rem;
    padding: 1em;
    box-sizing: border-box;
    overflow: hidden;
}

.wp-block-columns .wp-block-cover__background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* 内容里写死的是浅色纸（#f6f6f6）。换深色纸后整块变成一块大白板，
       改成跟随当前纸色：浅色纸下仍是原色，深色纸下自动融进页面。 */
    background-color: var(--zaxu-paper) !important;
}

.wp-block-columns .wp-block-cover__inner-container {
    position: relative;
    width: 100%;
    z-index: 1;
}

/* 图片区块：原版是 table + table-caption 且居中 */
.wp-block-columns .wp-block-image {
    display: table;
    margin: 0;
}

.wp-block-columns .wp-block-image.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

.wp-block-columns .wp-block-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

.wp-block-columns .wp-element-caption {
    display: table-caption;
    caption-side: bottom;
    margin: 8px 0 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    text-align: center;
    color: inherit;
}

/* 圆角风格是纯增量，全站按类生效 */
.wp-block-image.is-style-rounded img {
    border-radius: 9999px;
}

/* 排版预设：原版 theme.json 的小号字 1.3rem（html 62.5% ⇒ 13px） */
.has-small-font-size {
    font-size: 1.3rem;
}

/* 手机档列改成纵向堆叠（原版 390 实测：两列各占满宽，间距 24）。
   断点跟全站手机档统一在 767，别再留 781 这个孤例 */
@media (max-width: 767px) {
    .wp-block-columns {
        flex-wrap: wrap;
    }

    .wp-block-columns > .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* 视频块：原版走 mediaelement 播放器，播放器本体占满内容列并保持 16:9 黑底。
   新站用原生 <video controls>，不给尺寸时 Chrome 只出一根 300×150 的控制条，
   和原版差得远，所以这里补上尺寸与黑底。 */
.entry-content .wp-block-video video,
.entry-content > video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 6px;
}

/* 相册页（page-id-81）：原版把正文里的图铺成 3 列瀑布（内容列 680、每列 220、列距 10）。
   新站主题没带这块 JS，用 CSS 多列还原同样的观感；标题横跨整行，图片按列流下去。 */
body.page-id-81 .entry-content {
    column-count: 3;
    column-gap: 10px;
    max-width: 680px;
    margin: 0 auto;
}

body.page-id-81 .entry-content > h1,
body.page-id-81 .entry-content > h2,
body.page-id-81 .entry-content > h3 {
    column-span: all;
    margin-bottom: 20px;
}

body.page-id-81 .entry-content > figure,
body.page-id-81 .entry-content > p {
    break-inside: avoid;
    margin: 0 0 10px;
}

body.page-id-81 .entry-content figure img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 767px) {
    body.page-id-81 .entry-content {
        column-count: 2;
    }
}

/*
 * 墨林 - Molinink
 * 作者 Kira
 * https://www.molinink.com
 *
 * 目录面板适配：形态、滑出、active 高亮、≤989px 隐藏都在原版 style.min.css 里，这里只补墨林会踩到的两处。
 */

/* 只有一条标题时没有目录的意义（toc.js 按条目数加 .is-short） */
.site-post-outline-container.is-short {
    display: none;
}

/* 长文条目多：原版 box 没有高度上限，超出一屏的部分落在视口外，被 mask 裁掉且滚不到；
   按视口封顶后交给它原本的 overflow-y:auto */
.site-post-outline-container .site-post-outline-box {
    max-height: calc(100vh - 16rem);
}

/* 站内通知：头像角标、下拉里的未读数、通知侧栏工具栏。
   列表本体（.zaxu-user-notification-container）沿用 style.min.css 里原版样式。 */

.header-action-box.account > button {
    position: relative;
}

.zaxu-notification-dot {
    position: absolute;
    top: .4rem;
    right: .4rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: #e5484d;
    box-shadow: 0 0 0 2px var(--zaxu-paper);
    pointer-events: none;
}

.zaxu-notification-badge {
    display: inline-block;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background-color: #e5484d;
    color: #fff;
    font-size: .65rem;
    line-height: 1.1rem;
    text-align: center;
}

.site-notification [hidden],
.zaxu-notification-dot[hidden],
.zaxu-notification-badge[hidden] {
    display: none !important;
}

.account-action a.notification .right-half {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.site-sidebar-container.site-notification .site-sidebar-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: .75rem 1.25rem;
}

.site-sidebar-container.site-notification .site-sidebar-toolbar button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--zaxu-ink);
    font-size: .8rem;
    opacity: .55;
    cursor: pointer;
}

.site-sidebar-container.site-notification .site-sidebar-toolbar button:hover {
    opacity: 1;
}

.site-sidebar-container.site-notification .site-sidebar-content > .zaxu-notice-container {
    margin: 1.25rem;
}

.zaxu-user-notification-container ul li .context .await {
    font-style: normal;
    opacity: .6;
}

/* ZAXU 重制版 · 页脚订阅框的状态与提示 */

/* 只在原有 flex 布局上补一个换行位，不改原版的宽高与方向 */
.footer-newsletter-container {
    flex-wrap: wrap;
}

.footer-newsletter-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.footer-newsletter-msg {
    flex: none;
    width: 100%;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--zaxu-ink, currentColor);
    opacity: .78;
}

.footer-newsletter-msg:empty {
    display: none;
}

.footer-newsletter-msg.is-err {
    color: #c0563a;
    opacity: 1;
}

.footer-newsletter-msg.is-ok {
    color: var(--zaxu-ink, currentColor);
}

/* 原版只在 ≤413 才把订阅表单转纵向（414 与 767 原版都是「输入框 + 按钮」同一行）。
   2026-10-21 修正：断点原来写 767，导致 414/767 提前折行、页脚比原版高 33px。 */
/* 订阅框可读性：原版是「13% 墨色底 + 30% 墨色 placeholder」，压在浅纸上是浅灰字配浅灰底
   （实测「您的邮箱地址」约 1.5:1，几乎看不见）。这里把输入框提亮成接近纸色、加一圈 18% 墨色描边，
   placeholder 提到 55% 墨色 —— 浅纸/深纸都靠 --zaxu-paper / --zaxu-ink 跟着换，不用写死颜色。
   选择器带上 .site-footer-container 压过 theme-style.twig 里带 !important 的全局输入框规则。 */
.site-footer-container .footer-newsletter-container input[name="email"] {
    background-color: color-mix(in srgb, var(--zaxu-paper, #f4f4f4) 82%, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--zaxu-ink, #333) 18%, transparent) !important;
    color: var(--zaxu-ink, #333) !important;
}

.site-footer-container .footer-newsletter-container input[name="email"]::placeholder {
    color: color-mix(in srgb, var(--zaxu-ink, #333) 55%, transparent) !important;
    opacity: 1;
}

@media (max-width: 413px) {
    .site-footer-container .footer-information-container .footer-information-right .footer-newsletter-container input[name="email"] {
        flex: 0 0 auto;
        height: auto;
    }

    .site-footer-container .footer-information-container .footer-information-right .footer-newsletter-container button {
        width: 100%;
        align-self: stretch;
        margin-left: 0;
    }
}