@charset "UTF-8";
/* ==========================================================================
   图像格式PictureFormat · assets/css/blog.css
   阶段：P4 博客 / 留言板 / 评论（必须加载在 base.css → newspaper.css 之后）

   职责：给 P4 那批模板（post / page / comments / search / 404 /
         page-blog / page-guestbook）补齐版面与排版。此前这些模板
         的 np-* 类整体零规则，故单独成表。

   纪律（违反即返工）：
     · 只消费 base.css / newspaper.css 的既有令牌；本文件不出现任何
       十六进制色（本文件零 hex 字面），也不含任何字体 / 图片外链（无 @font-face、无 background-image）。
     · 金属职责不变：黄铜 --np-brass 只做结构与仪式（聚焦描边等框线），
       银 --np-silver* 只做功能小件；两者都不作正文/标题文字色。
     · 排印口径：正文衬线、栏宽 ≈ 60~75 字符（贴合 --measure 68ch）；
       小标题靠字级差而非色块；分隔用细线而非阴影；层级靠留白（间距令牌）。
       不堆拟物阴影、不用蓝色渐变、不做圆角卡片泛滥。
     · 断点沿用全站：≥1200 / 768~1199 / <768；本文件只做单栏塌陷与
       相邻文章导航的收窄，正文栏宽由 --measure 控制，天然自适应。
     · 评论表单是重点：自写极简控件，聚焦态用黄铜描边（结构色，非文字色），
       提交按钮沿用 base 的 .button（结构蓝）。

   类名来源：逐字抓自 P4 模板文件（非照抄清单）——
     post.php        .np-article__body .np-tags .np-tags__label .np-postnav(__prev/__next)
     page.php        .np-page__body
     functions.php   .np-article__header .np-article__title .np-article__meta（postMeta 输出）
     comments.php    .np-comments(__title/_closed/_pager) .np-respond(__title/__cancel)
                     .np-form(__field __label __req __opt __submit __hint __login)
     核心 listComments 产出 .comment-list .comment-body .comment-author .comment-meta
                     .comment-content .comment-reply .comment-children .comment-awaiting-moderation
     search.php      .np-search(__head/__title/__form) .np-archive__pager
     404.php         .np-404(__code/__title/__text/__actions/__hint)
     page-blog.php   .np-blog(__header/__kicker/__title/__intro/__pager)
     page-guestbook  .np-guestbook(__header/__kicker/__title/__intro)
     三者共用        .entry-content / .fmt（正文排版）

   父级包裹类的取舍（P4 收尾，避免「文档自称覆盖却无实作」）：
     · 加规则：.np-archive / .np-search / .np-blog 补 max-width: var(--measure)，
       与 §02 .np-article、§03 .np-page 的阅读栏对齐（父级只给栏宽，不重复子类样式）。
     · 不加规则（刻意不写空规则）：.np-article__body 随 §01 的 .entry-content / .fmt 排版；
       .np-archive__header 随其子类 .np-archive__headline / __meta 定位。
   ========================================================================== */


/* ==========================================================================
   01 通用博客正文排版 —— .entry-content / .fmt
   （贴合基础 p 的 --measure：长拉丁串不撑破栏宽，媒体不越界）
   ========================================================================== */
.entry-content,
.fmt {
  line-height: var(--lh-body);
  color: var(--text);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 正文内所有块级子元素约束在阅读栏宽内（段落已由 base 的 p 规则兜底） */
.entry-content > *,
.fmt > * {
  max-width: var(--measure);
}

.entry-content > * + *,
.fmt > * + * {
  margin-top: var(--space-4);
}

/* 小标题：靠字级差建立层级，不用色块；上留白大于下留白 */
.entry-content :where(h2, h3),
.fmt :where(h2, h3) {
  margin-top: var(--space-6);
}

.entry-content :where(h4, h5, h6),
.fmt :where(h4, h5, h6) {
  margin-top: var(--space-5);
}

.entry-content > :first-child,
.fmt > :first-child {
  margin-top: 0;
}

.entry-content img,
.fmt img {
  margin-block: var(--space-4);
}

/* 列表缩进与项目间距（base 只定了 li + li） */
.entry-content :where(ul, ol),
.fmt :where(ul, ol) {
  padding-left: 1.4em;
}

.entry-content figcaption,
.fmt figcaption {
  color: var(--text-muted);
}


/* ==========================================================================
   02 文章页（post）—— 阅读栏 + 报头分隔 + 标签
   ========================================================================== */
.np-article,
.np-postnav,
.np-comments {
  max-width: var(--measure);
}

.np-article__header {
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 3px double var(--rule);
}

.np-article__title {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-head);
  color: var(--text-strong);
}

.np-article__title a {
  color: inherit;
  text-decoration: none;
}

.np-article__title a:hover {
  color: var(--link-hover);
}

.np-article__meta {
  margin-top: var(--space-2);
}

/* 标签行：上细线收束，衬线小字，链接走主色 */
.np-tags {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--border-soft);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: none;
}

.np-tags__label {
  margin-right: var(--space-2);
}

.np-tags a {
  color: var(--link);
  text-decoration: none;
}

.np-tags a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}


/* ==========================================================================
   03 独立页面（page）—— 与文章页同栏宽，正文不另起花头
   ========================================================================== */
.np-page {
  max-width: var(--measure);
}

.np-page__body {
  margin-top: var(--space-4);
}


/* ==========================================================================
   04 相邻文章导航 .np-postnav（双线收束 + 左右分列；<600 塌单列）
   ========================================================================== */
.np-postnav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 3px double var(--rule);
}

.np-postnav__prev,
.np-postnav__next {
  min-width: 0;
}

.np-postnav__next {
  text-align: right;
}

.np-postnav__prev .np-label,
.np-postnav__next .np-label {
  display: block;
  margin-bottom: var(--space-1);
}

.np-postnav a {
  color: var(--link);
  text-decoration: none;
}

.np-postnav a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}


/* ==========================================================================
   05 评论区 —— 列表用细线分隔、嵌套用缩进，不用卡片与阴影
   ========================================================================== */
.np-comments {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 3px double var(--rule);
}

.np-comments__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: var(--track-head);
  color: var(--text-strong);
}

.np-comments__closed {
  margin: 0;
  color: var(--text-muted);
}

.np-comments__pager {
  margin-top: var(--space-5);
}

/* 核心 listComments 产出的结构 */
.np-comments .comment-list,
.np-comments .comment-children {
  margin: 0;
  padding: 0;
  list-style: none;
}

.np-comments .comment-body {
  margin: 0;
  padding-block: var(--space-4);
  border-top: var(--hairline) solid var(--border-soft);
}

.np-comments .comment-list > .comment-body:first-child {
  border-top: 0;
}

/* 嵌套评论：靠左缩进 + 一条细竖线，不使用底板 */
.np-comments .comment-children {
  margin-top: var(--space-3);
  margin-left: var(--space-5);
  padding-left: var(--space-4);
  border-left: var(--hairline) solid var(--border-soft);
}

.np-comments .comment-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.np-comments .comment-author .avatar {
  flex: none;
  width: 2rem;
  height: 2rem;
  margin: 0;
  border-radius: 50%;
  border: var(--hairline) solid var(--border);
  background: var(--paper-deep);
}

.np-comments .comment-author cite {
  font-style: normal;
  font-weight: 600;
  color: var(--text-strong);
}

.np-comments .comment-meta {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.np-comments .comment-meta a {
  color: inherit;
  text-decoration: none;
}

.np-comments .comment-meta a:hover {
  color: var(--text-strong);
}

.np-comments .comment-content {
  margin-top: var(--space-2);
}

.np-comments .comment-content p {
  max-width: none;
}

.np-comments .comment-reply {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
}

.np-comments .comment-reply a {
  color: var(--link);
  text-decoration: none;
}

.np-comments .comment-reply a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* 「等待审核」提示：细虚框，走结构灰，不作正文色的金属 */
.comment-awaiting-moderation {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  font-size: var(--fs-xs);
  font-style: normal;
  line-height: 1.6;
  color: var(--text-muted);
  border: var(--hairline) dashed var(--rule);
  border-radius: var(--radius-sm);
}


/* ==========================================================================
   06 评论表单 —— 极简自写控件（本文件重点）
   输入框细边框、聚焦态黄铜描边（结构，非文字色）、提交按钮走结构蓝。
   ========================================================================== */
.respond.np-respond {
  margin-top: var(--space-5);
}

.np-respond__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: var(--track-head);
  color: var(--text-strong);
}

.np-respond__cancel {
  min-height: 0;
}

.np-respond__cancel a {
  font-size: var(--fs-sm);
  color: var(--link);
  text-decoration: none;
}

.np-respond__cancel a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.np-form {
  margin: 0;
}

.np-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  max-width: none;
}

.np-form__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--track-head);
  color: var(--text-strong);
}

/* 必填星号走主色（蓝），不占用金属色，避免黄铜/银落到文字上 */
.np-form__req {
  color: var(--blue-deep);
  font-weight: 600;
}

.np-form__opt {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-muted);
}

.np-form :where(input[type="text"], input[type="email"], input[type="url"], textarea) {
  width: 100%;
  max-width: none;
  padding: var(--space-2) var(--space-3);
  background: var(--paper-deep);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  color: var(--text-strong);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.np-form textarea {
  min-height: 8rem;
  line-height: 1.7;
  resize: vertical;
}

.np-form :where(input, textarea)::placeholder {
  color: var(--text-muted);
  opacity: .75;
}

.np-form :where(input, textarea):hover {
  border-color: var(--text-muted);
}

/* 聚焦：黄铜色描边为结构强调；base 的焦点环仍在，双重提示不冲突 */
.np-form :where(input, textarea):focus-visible {
  background: var(--paper);
  border-color: var(--np-brass);
}

.np-form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-4) 0 0;
  max-width: none;
}

.np-form__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.np-form__login {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: none;
}

.np-form__login a {
  color: var(--link);
  text-decoration: none;
}

.np-form__login a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}


/* ==========================================================================
   07 搜索 / 归档页 .np-search / .np-archive（父级收窄阅读栏 + 标题双线收束）
   ========================================================================== */
.np-search,
.np-archive {
  max-width: var(--measure);   /* 与 §02 .np-article、§03 .np-page 的阅读栏对齐 */
}

.np-search__head {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 3px double var(--rule);
}

.np-search__title {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  color: var(--text-strong);
}

.np-search__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.np-search__form input[type="search"] {
  flex: 1 1 16rem;
  min-width: 0;
}

/* 归档 / 搜索共用的 pageNav 外壳（page-navigator 本体已在 newspaper.css §08） */
.np-archive__pager {
  margin-top: var(--space-5);
}


/* ==========================================================================
   08 博客列表页 .np-blog（抽屉「更多」落地页）
   ========================================================================== */
.np-blog {
  max-width: var(--measure);   /* 与 §02 .np-article、§03 .np-page 的阅读栏对齐 */
}

.np-blog__header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 3px double var(--rule);
}

.np-blog__kicker {
  margin: 0 0 var(--space-1);
}

.np-blog__title {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-head);
  color: var(--text-strong);
}

.np-blog__intro {
  margin-bottom: var(--space-5);
  color: var(--text-muted);
}

.np-blog__pager {
  margin-top: var(--space-5);
}


/* ==========================================================================
   09 404 / 留言板 —— 居中短栏，报头以外的极少例外
   ========================================================================== */
.np-404 {
  max-width: var(--measure-tight);
  margin-inline: auto;
  padding-block: var(--space-7);
  text-align: center;
}

.np-404__code {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
}

.np-404__title {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  color: var(--text-strong);
}

.np-404__text {
  margin: var(--space-3) auto 0;
  color: var(--text-muted);
}

.np-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.np-404__hint {
  margin-top: var(--space-5);
}

.np-guestbook {
  margin-bottom: var(--space-5);
}

.np-guestbook__header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 3px double var(--rule);
}

.np-guestbook__kicker {
  margin: 0 0 var(--space-1);
}

.np-guestbook__title {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-head);
  color: var(--text-strong);
}

.np-guestbook__intro {
  color: var(--text-muted);
}


/* ==========================================================================
   10 响应式（<768 单栏；相邻导航 <600 塌单列；栏宽由 --measure 自动收放）
   ========================================================================== */
@media (max-width: 767px) {
  .np-comments .comment-children {
    margin-left: var(--space-3);
    padding-left: var(--space-3);
  }
}

@media (max-width: 600px) {
  .np-postnav {
    grid-template-columns: minmax(0, 1fr);
  }
  .np-postnav__next {
    text-align: left;
  }
}


/* ==========================================================================
   11 独立页面（page）补遗 —— 只增不改，作用域限 .np-page
   背景：page.php 输出 <article class="np-page"> 后**直接**接 .np-comments，
        没有 post 的 .np-postnav 充当间隔；§03 仅给了栏宽与正文顶距。
        故此处只补「页面级」节奏与正文细节，不动 §03 两条既有规则。
   令牌纪律：仅用 --space-* / --hairline / --border-soft / --text-muted；
            零 hex、零外链、不引用 --silver*（银保持现状）。
   ========================================================================== */

/* 页面主体与后续区块（评论区）之间的段落留白 */
.np-page {
  margin-bottom: 0;
}

/* 页面标题：独立页无元信息行，长标题做平衡换行（渐进增强，旧浏览器忽略本行） */
.np-page .np-article__title {
  text-wrap: balance;
}

/* 页面正文内的分隔线：base 全局 hr 为 border:0（不可见），页面内补一条细内凹线 */
.np-page__body hr {
  margin-block: var(--space-6);
  border-top: var(--hairline) solid var(--border-soft);
}

/* 页面正文内的图注：居中，与图同栏，避免长图注撑破阅读栏 */
.np-page__body figcaption {
  text-align: center;
}