/* ============================================================================
   luno.css —— Luno 版式层（主题 ruby-luno-v1）
   ----------------------------------------------------------------------------
   2026-10-10 v2：按 Luno 官方 demo 的**真实设计系统**重新校准。
     参照 https://luno.demo.luxethemes.com/ 的 assets/build/style.css（Tailwind v4），
     设计令牌逐条对齐，不再是「凭观感仿」：

       --site-sidebar-width: 18rem(288px)   --site-logo-height: 2.5rem(40px)
       --site-header-height: 6rem(96px)     --content-max-width: 92rem(1472px)
       --content-padding-x: 3rem(48px)      --radius-card: 12px
       --post-card-image-aspect-ratio: 3/2  --button-border-radius: 2.5rem
       浅色：page #fff / page-alt #F4F5F8 / stroke #E7E9ED
             content #374151 / content-alt #101828 / muted #6A7282
       深色：page = accent 4% + #121212      page-alt = accent 4% + #1e1e1e
             stroke = rgba(255,255,255,.15)  content #fafafa / muted #ddd

   四个标志性做法（本文件的核心）：
     ① 卡片**透明无边框**，悬停时从背后浮出一块 accent 10% 的圆角光晕（::before -inset-3）
     ② 标签胶囊**负边距压在封面下沿**（margin-top:-2.25rem + inset-inline:.75rem）
     ③ 精选区第一张卡**跨 2 列 2 行**，标题 48px；另两张是图片卡
     ④ 侧边栏底部社交条 sticky + 毛玻璃

   🔴 纯增量覆盖层：不改 built/screen.css，不跑 gulp，不碰任何 ld+json。
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. 设计令牌（数值逐条对齐 Luno 官方 style.css）
   --------------------------------------------------------------------------- */
:root {
    /* 尺寸 */
    --luno-sidebar-w: 288px;            /* Luno: --site-sidebar-width */
    --luno-logo-h: 40px;              /* Luno: --site-logo-height */
    --luno-header-h: 96px;              /* Luno: --site-header-height */
    --luno-content-max: 1472px;          /* Luno: --content-max-width */
    --luno-pad-x: 48px;                 /* Luno: --content-padding-x */
    --luno-radius: 12px;                /* Luno: --radius-card */
    --luno-radius-halo: 24px;           /* Luno: calc(--radius-card * 2) */
    /* 🔴 故意偏置：Luno 是 3/2。但本站封面**统一 1200x630（1.905:1）且标题烤在图上**，
       套 3/2 会左右各裁掉约 10%，把封面里的标题和标签切掉（实测「AI 搜索的趋势」变成
       「搜索的趋势」）。⇒ 跟随封面素材比例，不裁切。 */
    --luno-card-ar: 1200 / 630;         /* Luno 原值: 3 / 2 */
    --luno-body-max: 736px;             /* Luno: --post-content-max-width */

    /* 浅色配色（Luno: Tailwind gray 阶） */
    --luno-page: #fff;
    --luno-page-alt: #f4f5f8;           /* gray-100 */
    --luno-stroke: #e7e9ed;             /* gray-200 */
    --luno-stroke-soft: rgba(55, 65, 81, .2);
    --luno-content: #374151;            /* gray-700 */
    --luno-content-alt: #101828;        /* gray-900 */
    --luno-muted: #6a7282;              /* gray-500 */

    /* 交互 */
    --luno-accent: var(--ghost-accent-color, #0095f6);
    --luno-halo: color-mix(in srgb, var(--luno-accent) 10%, transparent);
    --luno-ease-quad: cubic-bezier(.25, .46, .45, .94);
}

/* ---------------------------------------------------------------------------
   1. 深色配色（Luno: [data-color-scheme=dark]，底色带 accent 血统）
   --------------------------------------------------------------------------- */
html[data-theme="dark"] {
    --luno-page: color-mix(in srgb, var(--luno-accent) 4%, #121212);
    --luno-page-alt: color-mix(in srgb, var(--luno-accent) 4%, #1e1e1e);
    --luno-stroke: rgba(255, 255, 255, .15);
    --luno-stroke-soft: rgba(255, 255, 255, .15);
    --luno-content: #fafafa;
    --luno-content-alt: #fff;
    --luno-muted: #ddd;

    /* 把 ruby 主题自带的变量一并翻转，正文区才跟着变色 */
    --color-white: color-mix(in srgb, var(--luno-accent) 4%, #1e1e1e);
    --color-lighter-gray: color-mix(in srgb, var(--luno-accent) 4%, #161616);
    --color-light-gray: #2a2a2a;
    --color-mid-gray: #3d3d3d;
    --color-dark-gray: #d4d4d4;
    --color-darker-gray: #fafafa;
    --color-primary-text: #fafafa;
    --color-secondary-text: #ddd;
    --color-black: #fff;

    --white-color: color-mix(in srgb, var(--luno-accent) 4%, #1e1e1e);
    --light-gray-color: color-mix(in srgb, var(--luno-accent) 4%, #161616);
    --mid-gray-color: #2a2a2a;
    --dark-gray-color: #fafafa;
    --black-color: #fff;
    --primary-text-color: #fafafa;
    --secondary-text-color: #ddd;

    color-scheme: dark;
}

html[data-theme="dark"] body {
    background-color: var(--luno-page);
    color: var(--luno-content);
}

html[data-theme="dark"] .gh-content pre,
html[data-theme="dark"] .gh-content code {
    background-color: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
}

/* ---------------------------------------------------------------------------
   2. 页面底色
   --------------------------------------------------------------------------- */
body.luno,
body.luno:not(.post-template):not(.page-template) {
    background-image: none;
    background-color: var(--luno-page);
    color: var(--luno-content);
}

/* 全站自绘控件一律禁用原生外观
   🔴 macOS 上 <button> 的 appearance 默认 auto ⇒ 浏览器画原生按钮脸，会盖掉
      background-color（computed style 查不出，只能靠像素采样发现）。 */
.luno-search,
.luno-theme-toggle,
.luno-icon-btn,
.luno-burger,
.luno-chip,
.luno-sidebar .nav > li > a {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ---------------------------------------------------------------------------
   3. 侧边栏（Luno: .site-sidebar，18rem / pt-6 pb-16 px-8 / border-r）
   --------------------------------------------------------------------------- */
.luno-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: var(--luno-sidebar-w);
    background: var(--luno-page);
    border-right: 1px solid var(--luno-stroke);
    transform: translateX(-100%);
    transition: transform .25s var(--luno-ease-quad);
    overscroll-behavior: contain;
}

body.luno-drawer-open .luno-sidebar {
    transform: translateX(0);
}

.luno-sidebar-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 24px 32px 0;           /* pt-6 px-8 */
    overflow-y: auto;
    scrollbar-width: none;
}

.luno-sidebar-inner::-webkit-scrollbar {
    display: none;
}

/* 字标 + 明暗切换 */
.luno-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 32px;              /* mb-8 */
}

/* 切换按钮与关闭按钮的容器（桌面只有切换，移动端多一个 ×） */
.luno-sidebar-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.luno-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    min-width: 0;
}

.luno-logo img {
    display: block;
    height: var(--luno-logo-h);
    min-height: var(--luno-logo-h);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.luno-logo-text {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: var(--luno-logo-h);
    height: var(--luno-logo-h);
    color: var(--luno-content-alt);
    white-space: nowrap;
}

/* 🟦 字标深/浅两版切换（同 Luno 的 logo / logo-dark 机制）
   🔴 浅色底上的深墨字标放到深色底上几乎不可见 —— 必须换白墨版。 */
.luno-logo-img {
    display: block;
    height: var(--luno-logo-h);
    min-height: var(--luno-logo-h);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.luno-logo-ondark {
    display: none;
}

html[data-theme="dark"] .luno-logo-onlight {
    display: none;
}

html[data-theme="dark"] .luno-logo-ondark {
    display: block;
}

/* 🟦 明暗切换：Luno 是**两颗圆点的胶囊**（不是单颗按钮）
   Luno: p-0.75 / gap-0.75 / border stroke-70；每颗圆点 w-5 h-5，激活时底色变 stroke */
.luno-theme-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--luno-stroke) 70%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--luno-content-alt);
    cursor: pointer;
}

.luno-theme-toggle .luno-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--luno-page);
    opacity: .7;
    transition: background-color .15s ease, opacity .15s ease;
}

.luno-theme-toggle .luno-dot svg {
    display: block;
    width: 12px;
    height: 12px;
}

/* 当前生效的那颗亮起来 */
html:not([data-theme="dark"]) .luno-dot-sun,
html[data-theme="dark"] .luno-dot-moon {
    background: var(--luno-stroke);
    opacity: 1;
}

/* 简介 */
.luno-tagline {
    margin: 0 0 32px;                 /* mb-8 */
    font-size: 14px;               /* text-sm */
    line-height: 1.5;
    color: var(--luno-muted);
}

/* 搜索（Luno 侧边栏里是 <xl 才出现；桌面走顶栏那份） */
.luno-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 32px;              /* mb-8 */
    padding: 8px 40px 8px 36px;
    height: 38px;                 /* Luno: --input-height */
    border: 1px solid var(--luno-stroke);
    border-radius: 40px;            /* Luno: --input-border-radius */
    background: var(--luno-page);
    color: var(--luno-muted);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease;
}

.luno-search:hover {
    border-color: color-mix(in srgb, var(--luno-stroke) 60%, var(--luno-content-alt));
}

.luno-search > svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--luno-content-alt);
}

.luno-search span {
    flex: 1 1 auto;
}

.luno-search kbd {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--luno-muted);
    opacity: .8;
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
}

/* 主导航（Luno: 每项 h-8，当前项 bold + accent，**没有**填充底色） */
.luno-sidebar .luno-nav {
    flex: 1 1 auto;
    min-height: 0;
}

.luno-sidebar .nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.luno-sidebar .nav > li {
    margin: 0;
    width: 100%;
}

.luno-sidebar .nav > li > a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 6px 12px 6px 0;
    border-radius: 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.4;
    color: var(--luno-content);
    text-decoration: none;
    transition: color .15s ease;
}

.luno-sidebar .nav > li > a:hover,
.luno-sidebar .nav > li > a:focus-visible {
    color: var(--luno-content-alt);
}

/* 当前页：加粗 + accent，与 Luno 的 aria-[current=page] 一致 */
.luno-sidebar .nav > li.current-menu-item > a,
.luno-sidebar .nav > li.nav-current > a,
.luno-sidebar .nav > li > a[aria-current="page"] {
    font-weight: 700;
    color: var(--luno-accent);
}

/* 二级：竖排 + 左侧描边（Luno group-item-class） */
.luno-sidebar .gh-subnav {
    position: static;
    display: none;
    grid-template-columns: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.luno-sidebar .has-subnav:hover > .gh-subnav,
.luno-sidebar .has-subnav:focus-within > .gh-subnav {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.luno-sidebar .gh-subnav a {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 6px 12px 6px 16px;
    border-left: 1px solid color-mix(in srgb, var(--luno-stroke) 70%, transparent);
    font-size: 14px;
    color: var(--luno-content);
}

.luno-sidebar .gh-subnav a:hover {
    border-left-color: color-mix(in srgb, var(--luno-content) 50%, transparent);
}

.luno-sidebar .gh-subnav-caret {
    display: none;
}

/* 侧边栏底部：社交（Luno: sticky + 毛玻璃 + border-t） */
.luno-sidebar-foot {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    width: 100%;
    margin-top: 16px;
    padding: 14px 0 16px;
    border-top: 1px solid var(--luno-stroke);
    background: color-mix(in srgb, var(--luno-page) 80%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.luno-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.luno-social a {
    display: inline-flex;
    color: var(--luno-content);
    opacity: .9;
    transition: opacity .2s ease;
}

.luno-social a:hover {
    opacity: 1;
}

.luno-social svg {
    width: 15px;
    height: 15px;
    display: block;
}

.luno-social span {
    font-size: 14px;
}

.luno-copyright {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--luno-muted);
}

/* 移动端遮罩 */
.luno-overlay {
    position: fixed;
    inset: 0;
    z-index: 15;
    background: rgba(8, 10, 14, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}

body.luno-drawer-open .luno-overlay {
    opacity: 1;
    visibility: visible;
}

body.luno-drawer-open {
    overflow: hidden;
}

/* 关闭按钮（只在移动端抽屉里）—— 选择器带 .luno-sidebar 提权重，
   否则会被 .luno-icon-btn 的 display 反杀 */
.luno-sidebar .luno-sidebar-close {
    display: none;
}

@media (max-width: 1199px) {
    .luno-sidebar .luno-sidebar-close {
        display: inline-flex;
        width: 32px;
        height: 32px;
    }

    /* 移动端底部社交条不做 sticky */
    .luno-sidebar .luno-sidebar-foot {
        position: static;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

}

/* ---------------------------------------------------------------------------
   4. 顶栏（Luno: 桌面只剩一个搜索框；移动端是 logo + 汉堡）
   --------------------------------------------------------------------------- */
body.luno .gh-head {
    background-color: transparent;
    border-bottom: 1px solid var(--luno-stroke);
    display: flex;
    align-items: center;
    height: var(--luno-header-h);
}

body.luno .gh-head-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

body.luno .gh-head-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

body.luno .gh-head-brand-wrapper {
    align-items: flex-start;
}

body.luno .gh-head-logo img {
    display: block;
    height: var(--luno-logo-h);
    width: auto;
    object-fit: contain;
}

body.luno .gh-head-tagline {
    text-align: left;
}

.luno-head-search {
    display: none;
}

.luno-icon-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--luno-content);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.luno-icon-btn:hover {
    background: var(--luno-page-alt);
    color: var(--luno-content-alt);
}

.luno-icon-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.luno-burger {
    display: none;
}

@media (max-width: 1199px) {
    .luno-burger {
        display: inline-flex;
    }

    body.luno .gh-head-brand-wrapper {
        align-items: center;
    }

    body.luno .gh-head-tagline {
        display: none;
    }
}

/* ≥1200px：顶栏只剩搜索框，内容右移让出侧边栏 */
@media (min-width: 1200px) {
    body.luno .gh-head {
        justify-content: flex-start;
        height: auto;
        padding-block: 24px;        /* Luno: !py-6 */
    }

    body.luno .gh-head-inner {
        max-width: var(--luno-content-max);
        padding-inline: var(--luno-pad-x);
        justify-content: flex-start;
    }

    body.luno .gh-head-brand {
        flex: 0 0 auto;
        justify-content: flex-start;
        gap: 0;
    }

    /* 桌面：顶栏里的字标与汉堡都收掉，字标在侧边栏 */
    body.luno .gh-head-brand-wrapper,
    body.luno .luno-burger,
    body.luno .luno-mobile-search {
        display: none;
    }

    body.luno .luno-head-search {
        display: flex;
        width: 304px;                 /* Luno: w-76 */
    }

    body.luno .luno-head-search .luno-search {
        margin-bottom: 0;
    }

    /* 🔴 桌面（≥1200px）**隐藏侧边栏里的搜索框**：Luno 原版是 `xl:hidden` ——
       搜索只在顶栏那一份。之前写反了（在移动端隐藏、桌面显示），
       结果桌面同屏出现「顶栏搜索 + 侧边栏搜索」两个框（站主 2026-10-10 截图指出）。 */
    body.luno .luno-sidebar .luno-search {
        display: none;
    }

    /* 🔴 2026-10-10：让出侧边栏的偏移放在 **body** 上，而不是 .gh-site。
       原因：`codeinjection_foot` 注入的备案/声明块是 <body> 的**直属子元素**，
       不放进 .gh-site 里就吃不到偏移 ⇒ 它们按整页宽度 text-align:center，
       在内容区里看着偏左（站主「绿色区域的两边没有居中」）。
       放到 body 上以后，body 下的**任何**内容（含以后新增的注入块）都自动让位。
       固定定位元素不受影响：侧边栏 left:0、遮罩 inset:0、分享弹窗 inset:0 都相对视口。 */
    body.luno {
        padding-left: var(--luno-sidebar-w);
    }

    body.luno .gh-site {
        padding-left: 0;
    }

    .luno-sidebar {
        transform: translateX(0);
    }

    .luno-overlay {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   5. 内容区容器（Luno: max-width 92rem / padding-x 3rem）
   🔴 ruby 的 `.gh-outer` 自己已经带 `padding-inline: var(--gap)`（≥992px 是 3.6rem=57.6px），
      如果这里再给 `.site-main.gh-inner` 加一次 padding，会变成双份（实测内容左边距 ~105px）。
      ⇒ 正确做法：只把 `.gh-outer` 的边距调到 Luno 的 3rem，然后不要再加。
   --------------------------------------------------------------------------- */
body.luno .site-main.gh-inner {
    padding-inline: 0;
}

@media (min-width: 1200px) {
    body.luno .gh-outer {
        padding-inline: var(--luno-pad-x);
    }

    body.luno .site-main.gh-inner {
        max-width: var(--luno-content-max);
    }
}

/* ---------------------------------------------------------------------------
   6. 首页精选区（Luno: 3 列，第一张跨 2×2 大卡）
   --------------------------------------------------------------------------- */
.luno-home {
    padding-bottom: 8px;
}

.luno-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;                      /* gap-6 */
    margin-bottom: 32px;
}

@media (min-width: 640px) {
    .luno-hero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;                    /* sm:gap-8 */
    }
}

@media (min-width: 992px) {
    .luno-hero {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* 第一张：跨 2 列 2 行（Luno: sm:col-span-2 sm:row-span-2） */
    .luno-hero .luno-hero-card:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }
}

.luno-hero-card {
    position: relative;
    z-index: 0;
    margin: 0;
    border-radius: var(--luno-radius);
    overflow: hidden;
    background: var(--luno-page-alt);
    aspect-ratio: var(--luno-card-ar);
}

/* 大卡由 grid 行高决定高度，不锁比例 */
@media (min-width: 992px) {
    .luno-hero .luno-hero-card:first-child {
        aspect-ratio: auto;
    }
}

.luno-hero-link {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    color: inherit;
}

.luno-hero-media {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    border-radius: var(--luno-radius);
    background: var(--luno-page-alt);
}

.luno-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .23s var(--luno-ease-quad);
}

.luno-hero-card:hover .luno-hero-media img {
    transform: scale(1.02);
}

/* 内容压在图上（Luno: absolute inset-0 justify-end + to-black/40 渐变） */
.luno-hero-body {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px;
    /* 🔴 相对 Luno 的故意偏置：Luno 用 `to-black/40`，因为它家封面是**纯照片**。
        本站封面是生成式封面，**标题、标签片、品牌行都已经烤在图上**，40% 压不住，
        会和叠加标题打架（同一张卡出现两个标题）。⇒ 先铺一层 55% 的底色压住图上文字，
        再叠底部渐变，让叠加标题立起来、图上旧文字沉下去。 */
    background:
        linear-gradient(to bottom,
            rgba(6, 11, 20, .78) 0%,
            rgba(6, 11, 20, .80) 45%,
            rgba(6, 11, 20, .94) 100%);
    color: #fff;
    pointer-events: none;
}

@media (min-width: 640px) {
    .luno-hero-body {
        padding: 24px;
    }
}

/* 🔴 精选卡**不再叠加标签胶囊**：本站封面左上角本来就烤了一个「胶囊名」标签片
   （企业服务 / 技术教程 / GEO…），再叠一个就是同一个位置两个胶囊。
   ⇒ 标签交给封面，叠加层只负责标题、摘要与作者日期。 */
.luno-hero-card .luno-hero-meta-row {
    display: none;
}

/* 🔴 小精选卡（非第一张）在 1.905:1 的比例下只有约 154px 高，
   塞不下「标签+标题+摘要+页脚」四段，实测文字会溢出卡片压到下一张上。
   ⇒ 小卡只留「标签 + 标题 + 页脚」，摘要交给大卡。 */
.luno-hero-card:not(:first-child) .luno-hero-excerpt {
    display: none;
}

.luno-hero-card:not(:first-child) .luno-hero-title {
    -webkit-line-clamp: 2;
}

.luno-hero-body > * {
    pointer-events: auto;
}

.luno-hero-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.luno-hero-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 12px;          /* px-3 py-1.5 */
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .025em;
    line-height: 1.5;
}

.luno-hero-title {
    margin: 0;
    font-size: 20px;               /* text-xl */
    font-weight: 600;
    line-height: 1.375;               /* leading-snug */
    letter-spacing: 0;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 大卡标题放大（Luno: !text-2xl sm:!text-5xl） */
@media (min-width: 640px) {
    .luno-hero .luno-hero-card:first-child .luno-hero-title {
        font-size: 36px;
    }
}

@media (min-width: 992px) {
    .luno-hero .luno-hero-card:first-child .luno-hero-title {
        font-size: 48px;
        line-height: 1.15;
    }
}

.luno-hero-excerpt {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .95);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.luno-hero-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .2);
    font-size: 12px;
    color: rgba(255, 255, 255, .85);
}

.luno-hero-foot time {
    margin-left: auto;
}

.luno-hero-foot .luno-hero-avatar {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    object-fit: cover;
}

/* ---------------------------------------------------------------------------
   7. 标签胶囊条（Luno: gap-3 mb-6 sm:mb-8，chip = px-4 py-2 text-xs font-semibold）
   🔴 2026-10-10 二改（站主「标签栏没有显示全，可以换成多行展示」）：
      原来是 `overflow-x:auto` **单行横滚 + 隐藏滚动条** ⇒ 右侧标签既看不见、
      也没有滚动条提示可滚 ⇒ 视觉上就是「被切断了」。
      ⇒ 改成 **flex-wrap 多行**，行间距 10px，全部铺开。
   --------------------------------------------------------------------------- */
.luno-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 10px;
    margin-bottom: 24px;
}

@media (min-width: 640px) {
    .luno-chips {
        /* 行距稍松：多行时贴太紧会糊成一片 */
        gap: 12px 10px;
        margin-bottom: 32px;
    }
}

.luno-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 56px;                /* min-w-14 */
    justify-content: center;
    padding: 8px 16px;              /* px-4 py-2 */
    border: 1px solid var(--luno-stroke);
    border-radius: 999px;
    background: var(--luno-page-alt);
    color: var(--luno-content);
    font-size: 12px;                /* text-xs */
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.luno-chip:hover {
    border-color: color-mix(in srgb, var(--luno-stroke) 40%, var(--luno-content));
    color: var(--luno-content-alt);
}

.luno-chip.is-active {
    background: var(--luno-accent);
    border-color: var(--luno-accent);
    color: #fff;
}

.luno-chip-n {
    font-size: 11px;
    font-weight: 500;
    opacity: .6;
}

/* 🟦 多行标签的「折叠 / 展开」
   🔴 默认（无 JS）**不折叠** —— 全部铺开，保证「能看到全」。
      有 JS 时 luno.js 给 nav 加 `.is-collapsed`，才把第 25 个之后的收起来。
      这样 JS 失效时降级为「全显示」，不会出现「按钮不显示 + 标签也看不见」。 */
.luno-chips.is-collapsed .luno-chip.is-extra {
    display: none;
}

.luno-chips-toggle {
    display: none;                    /* 由 luno.js 按需打开 */
    background: transparent;
    border-style: dashed;
    color: var(--luno-muted);
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;                 /* 🔴 不重置会被 macOS 画成原生按钮脸，盖掉背景 */
}

.luno-chips-toggle.is-on {
    display: inline-flex;
}

.luno-chips-toggle:hover {
    color: var(--luno-content-alt);
    border-color: color-mix(in srgb, var(--luno-stroke) 40%, var(--luno-content));
}

/* ---------------------------------------------------------------------------
   7b. 分页（2026-10-10 新增：站主「只显示 16 篇文章，显示不全」）
   --------------------------------------------------------------------------- */
.luno-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
    padding-top: 8px;
    font-size: 13px;
}

.luno-pager-btn {
    display: inline-flex;
    align-items: center;
    min-width: 96px;
    justify-content: center;
    padding: 9px 18px;
    border: 1px solid var(--luno-stroke);
    border-radius: 999px;
    background: var(--luno-page-alt);
    color: var(--luno-content);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.luno-pager-btn:hover {
    border-color: color-mix(in srgb, var(--luno-stroke) 40%, var(--luno-content));
    color: var(--luno-content-alt);
}

.luno-pager-btn.is-disabled {
    opacity: .35;
    pointer-events: none;
}

.luno-pager-info {
    color: var(--luno-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   8. 卡片网格 + Luno 的标志性卡片
      透明卡片 · 悬停光晕 · 标签胶囊负边距压在封面下沿
   --------------------------------------------------------------------------- */
body.luno .gh-home-title {
    margin: 0 0 4px;
    font-size: 24px;                /* text-2xl */
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--luno-content-alt);
}

body.luno .gh-home-desc {
    margin: 0 0 24px;
    max-width: 52em;
    font-size: 14px;
    line-height: 1.5;
    color: var(--luno-muted);
}

/* 🔴🔴 这里**只写 `body.luno .post-feed` 一个选择器**。
   2026-10-10 踩坑：原来并列写了 `body.luno .post-feed, body.luno .post-feed.gh-feed`，
   并列项的特异度是 (0,3,1)，**高于**下面各媒体查询里的 `body.luno .post-feed` (0,2,1)。
   结果基线这句 `grid-template-columns: 1fr` 永远压住媒体查询 ⇒ 整页只有 1 列，
   连 640/992/1200 三个断点全部失效（探针实测 `gridTemplateColumns` 恒为 `1336px`）。
   ⇒ 教训：**同一元素的「基线 + 媒体查询」务必用同一个选择器**，别在基线里并列更长的变体。 */
body.luno .post-feed {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 0;
    overflow: visible;                /* 悬停光晕要溢出卡片，不能裁 */
}

@media (min-width: 640px) {
    body.luno .post-feed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }
}

@media (min-width: 992px) {
    body.luno .post-feed {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 卡片本体：透明、无边框、无阴影 */
body.luno .post-feed > article {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

/* 悬停光晕：Luno 的 before:-inset-3 + rounded 24px + accent 10% */
body.luno .post-feed > article::before {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: -1;
    border-radius: var(--luno-radius-halo);
    background: var(--luno-halo);
    opacity: 0;
    transform: scale(.95);
    transition: opacity .24s var(--luno-ease-quad), transform .24s var(--luno-ease-quad);
    pointer-events: none;
}

body.luno .post-feed > article:hover::before,
body.luno .post-feed > article:focus-within::before {
    opacity: 1;
    transform: scale(1);
}

body.luno .post-feed > article .post-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* 封面：3:2 + 12px 圆角 */
body.luno .post-feed .post-media {
    margin: 0;
    border-radius: var(--luno-radius);
    overflow: hidden;
}

body.luno .post-feed .post-media .u-placeholder {
    background-color: var(--luno-page-alt);
}

body.luno .post-feed .post-media .u-placeholder.rectangle {
    /* 🔴 必须与 --luno-card-ar 一致：这里是 ruby 定高度的真实来源
       （.u-placeholder.rectangle 用 padding-bottom 撑高，不是 aspect-ratio）。
       1200x630 => 630/1200 = 52.5%。写成 3:2(66.67%) 会把封面左右各裁 ~10%。 */
    padding-bottom: 52.5%;
}

body.luno .post-feed .post-image {
    transition: transform .23s var(--luno-ease-quad);
}

body.luno .post-feed > article:hover .post-image {
    transform: scale(1.02);
}

/* 精选文章在 feed 里出现时（loop.hbs 的 featured 分支没有 figure 包裹）补容器 */
body.luno .post-feed > article.featured > .post-link > .post-image {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: var(--luno-card-ar);
    object-fit: cover;
    border-radius: var(--luno-radius);
    display: block;
}

/* 内容区 */
body.luno .post-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1 1 auto;
    padding: 12px 0 0;
    background: transparent;
}

/* 🟦 标志性做法：标签胶囊负边距压在封面下沿（Luno: -mt-9 + mx-3 + z-10） */
body.luno .post-header {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    z-index: 1;
    margin-top: -36px;             /* -mt-9 = -36px */
    margin-inline: 12px;            /* mx-3 */
}

body.luno .post-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    margin-bottom: 20px;           /* mb-5 */
}

/* 玻璃胶囊：黑 35% + 毛玻璃 + 2px 白环（Luno post-card__tag） */
body.luno .post-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 12px;          /* px-3 py-1.5 */
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .025em;
    line-height: 1.5;
    text-transform: none;
}

body.luno .post-title {
    margin: 0;
    font-size: 20px;               /* text-xl */
    font-weight: 600;
    line-height: 1.375;               /* leading-snug */
    letter-spacing: 0;
    color: var(--luno-content-alt);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.luno .post-excerpt {
    margin: 8px 0 0;                /* mt-2 */
    font-size: 14px;               /* text-sm */
    line-height: 1.5;                 /* leading-normal */
    color: var(--luno-muted);
    opacity: .95;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 页脚：12px + 20% 描边分隔线 */
body.luno .post-footer {
    display: flex;
    align-items: center;
    /* 🔴 ruby 原样式是 `justify-content:space-between; height:42px`（日期被推到最右），
       Luno 的卡片页脚是「头像 + 作者名 • 日期」**整体左对齐**、高度自适应 ⇒ 两处都要覆盖。 */
    justify-content: flex-start;
    height: auto;
    gap: 6px;
    margin-top: 12px;
    padding: 12px 0 0;
    border-top: 1px solid var(--luno-stroke-soft);
    background: transparent;
    font-size: 12px;                /* text-xs */
    color: var(--luno-muted);
}

body.luno .post-more {
    display: none;                    /* Luno 卡片没有 Read more */
}

body.luno .post-date {
    color: var(--luno-muted);
    opacity: .8;
}

/* 作者在前、日期在后，中间一个「•」（Luno 的 footer 排列） */
body.luno .post-footer .post-author {
    order: -1;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 🟦 作者名（Luno 卡片页脚 = 头像 + 作者名 • 日期）
   🔴 ruby 把 `.post-author-link` 定义成**28x28 的头像叠放容器**：
      `position:relative; display:block; width:28px; height:28px; margin:0 -4px`
      （多作者时靠 `:nth-child` 的 z-index 叠在一起）。
      只覆盖 display 不够 —— 宽高和负边距会把作者名**挤成 2px 直接看不见**（探针实测 w=2px）。
      ⇒ 必须把 width/height/margin/position 一起重置。 */
body.luno .post-author-link {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0;
    z-index: auto;
}

body.luno .post-author-image {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 0;                        /* 主题给了 2px 透明边，会撑大盒子 */
    border-radius: 999px;
    object-fit: cover;
}

body.luno .post-author-name {
    font-size: 12px;
    line-height: 1.4;
    color: var(--luno-muted);
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.luno .post-footer .post-author::after {
    content: "•";
    margin-left: 6px;
    color: var(--luno-muted);
    opacity: .65;
}

body.luno .post-author-image {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    object-fit: cover;
    background: var(--luno-page-alt);
}

/* 相关文章 */
body.luno .related-wrapper {
    background: transparent;
    margin-top: 40px;
}

body.luno .related-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
    color: var(--luno-content-alt);
}

/* ---------------------------------------------------------------------------
   9. 归档页（标签 / 作者）页头
   --------------------------------------------------------------------------- */
body.luno .term {
    margin-bottom: 28px;
    text-align: left;
}

body.luno .term-name {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--luno-content-alt);
}

body.luno .term-description {
    max-width: 52em;
    font-size: 14px;
    line-height: 1.5;
    color: var(--luno-muted);
}

/* ---------------------------------------------------------------------------
   10. 正文页
   --------------------------------------------------------------------------- */
/* 🟦 正文页版心（2026-10-10 修「正文布局没有适应」）
   ruby 的 .gh-canvas 是这样分列的：
     --main: min(var(--content-width,720px), 100% - 2*var(--gap))
     --wide: minmax(0, calc(.5 * (var(--container-width,1200px) - var(--content-width,720px))))  → 240px
     --full: minmax(var(--gap), 1fr)
   问题：1440 视口 + 288 侧边栏后，可用宽度只剩 1152px，
   而 wide 两列各要 240px ⇒ 1152 − 720 − 480 = −48，wide 被压成 0：
   **封面图跟正文一样宽**、两侧各留 216px 死白，整页看着完全没适配新壳子。
   ⇒ ① 正文列改用 Luno 的 --post-content-max-width = 736px；
      ② 把 wide 显式封顶到 100px（用 min()），封面就比正文宽 200px，层次出来了。 */
@media (min-width: 1200px) {
    body.luno .site-main {
        padding-top: 40px;
        padding-bottom: 56px;
    }

    body.luno .gh-canvas {
        --content-width: 736px;
        /* wide 列（封面图用的）随可用宽度伸缩，但封顶 160px，且用 /4 保证窄视口不溢出 */
        --wide: minmax(0, min(160px, calc((100% - 736px) / 4)));
    }

    /* 🔴 关键：主题里有一条**更靠后的** `.gh-article-image{grid-column:main-start/main-end}`
       （前面还有一条 `wide-start/wide-end`，被它覆盖了），把封面钉死在正文列宽。
       结果：正文 720px，两侧各 240px 的 wide 列完全空着 —— 封面明明有空间却不用，
       整页看着「没适配」。这里把它放回 wide 列，封面就比正文宽一圈。 */
    body.luno .gh-article-image {
        grid-column: wide-start / wide-end;
        margin-top: 32px;
    }
}

/* 文章头部的「作者 / 分类 / 日期」一行：
   ruby 原样式是 font-weight:700 + text-transform:uppercase + 12px，
   中文被压成大写粗体小块很难看 ⇒ 按 Luno 的 text-sm/muted 归一。 */
body.luno .gh-article-meta {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0;
    text-transform: none;
    color: var(--luno-muted);
}

body.luno .gh-article-meta a {
    color: var(--luno-content);
    text-decoration: none;
}

body.luno .gh-article-meta a:hover {
    text-decoration: underline;
}

body.luno .gh-article-title {
    color: var(--luno-content-alt);
}

body.luno .gh-content {
    color: var(--color-darker-gray);
}

body.luno .gh-article-image img {
    border-radius: var(--luno-radius);
}

/* ---------------------------------------------------------------------------
   11. 页脚
   🔴 2026-10-10：主题自带的 <footer class="gh-foot"> 已从 default.hbs **整段删除**
      （站主「红色区域的不要了」）。版权在侧边栏底部已有，完整备案/作者/声明在下面那块。
   现在页面底部只有一块 `codeinjection_foot` 注入的备案块。
   --------------------------------------------------------------------------- */
/* 🔴 注入块是 <body> 的**直属子元素**，不在 .gh-site 里面 ⇒ 拿不到
   `body.luno .gh-site{padding-left:288px}` 的偏移，它按**整页宽度**居中，
   于是在「内容区」里看着偏左（站主「绿色区域的两边没有居中」）。
   ⇒ 给它补一个 margin-left，让它在内容区里居中。
   选择器说明（2026-10-10 用 HTML 解析器实测修正）：
   注入块**不是一个大 div**，而是 <body> 下**并列的一串 div**，其中有几个带 id
   （`#aigseo-decl` 免责声明、`#aigseo-site-stats` 收录统计、`#aigseo-bot-block`），
   所以第一版 `:not([class]):not([id])` 会漏掉那三个 ⇒ 前后错位、看着还是不齐。
   ⇒ 改成「无 class，且不是分享弹窗」：`div:not([class]):not(#aigseo-share-modal)`。
   `.gh-site` / `.pswp` 有 class，天然排除；分享弹窗是 position:fixed，也主动排除。 */
/* （2026-10-10 二次修正：这里原本是给注入块逐个 div 加 margin-left 的补丁，
   后来改成**把偏移提到 <body> 上**（见第 4 节的 body.luno{padding-left}），
   那样 body 下的所有注入内容自动让位，不用再按 div 逐个打补丁。规则已移除。） */

body.luno .gh-social-links a {
    color: var(--luno-muted);
}

body.luno .gh-social-links a:hover {
    color: var(--luno-content-alt);
}