/* =================================================================
 * 11. Metadata — monospace + tabular numerals
 * ================================================================= */
.wp-block-post-date,
.wp-block-post-date a,
.wp-block-comment-date,
.wp-block-comment-date a,
.wp-block-comments-pagination .page-numbers,
.wp-block-query-pagination .page-numbers,
.wp-block-comments-pagination-numbers,
.wp-block-query-pagination-numbers {
    font-family: var(--font-mono);
    letter-spacing: var(--ls-wide);
    font-feature-settings: "tnum", "kern";
}
.wp-block-post-date,
.wp-block-post-date a {
    color: var(--wp--preset--color--text-muted);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--xs);
}

/* Pagination — query + comments */
.wp-block-query-pagination,
.wp-block-comments-pagination {
    margin-top: var(--wp--preset--spacing--64);
    gap: 0.6rem;
    font-size: var(--wp--preset--font-size--sm);
}
.wp-block-query-pagination .page-numbers,
.wp-block-comments-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-comments-pagination .wp-block-comments-pagination-previous,
.wp-block-comments-pagination .wp-block-comments-pagination-next {
    color: var(--wp--preset--color--text-secondary);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease, color 200ms ease;
}
.wp-block-query-pagination .page-numbers:hover,
.wp-block-comments-pagination .page-numbers:hover,
.wp-block-query-pagination a:hover,
.wp-block-comments-pagination a:hover {
    color: var(--wp--preset--color--text-primary);
    border-bottom-color: var(--wp--preset--color--accent);
}
.wp-block-query-pagination .page-numbers.current,
.wp-block-comments-pagination .page-numbers.current {
    color: var(--wp--preset--color--text-primary);
    border-bottom-color: var(--wp--preset--color--accent);
}

/* =================================================================
 * 12. Buttons — fixed dimensions, hover changes color only
 * ================================================================= */
.wp-block-button__link,
.wp-block-search__button,
button,
input[type="submit"] {
    border-radius: 0;
    box-shadow: none;
    font-family: var(--wp--preset--font-family--body);
}
.wp-block-button__link {
    padding: 0.7rem 1.6rem;
    font-size: var(--wp--preset--font-size--sm);
    letter-spacing: var(--ls-wide);
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--bg);
    border: 1px solid var(--wp--preset--color--accent);
    text-transform: none;
    text-decoration: none;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.wp-block-button__link:hover {
    background: var(--wp--preset--color--accent-strong);
    border-color: var(--wp--preset--color--accent-strong);
    color: var(--wp--preset--color--bg);
}

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--wp--preset--color--accent);
    border: 1px solid var(--wp--preset--color--accent);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--bg);
}

/* =================================================================
 * 13. Forms (comments + post comment form)
 * ================================================================= */
.wp-block-search__input,
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    background: var(--wp--preset--color--bg-elev);
    border: 1px solid var(--wp--preset--color--line);
    border-radius: 0;
    color: var(--wp--preset--color--text-primary);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--sm);
    padding: 0.6rem 0.8rem;
    outline: none;
    transition: border-color 200ms ease;
}
.wp-block-post-comments-form input:focus,
.wp-block-post-comments-form textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--wp--preset--color--accent);
}
.wp-block-post-comments-form textarea,
.comment-form textarea {
    line-height: 1.6;
    font-family: var(--wp--preset--font-family--body);
}
.wp-block-post-comments-form .comment-form-cookies-consent,
.comment-form .comment-form-cookies-consent {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--text-muted);
}
.wp-block-post-comments-form label,
.comment-form label {
    display: block;
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--wp--preset--color--text-muted);
    margin-bottom: 0.3rem;
}

/* =================================================================
 * 13b. Section breaks — labeled hairline rules
 *      "──── § 正文 / article ────" pattern. Single re-usable
 *      class so single-post body, comments, and any future section
 *      boundary can speak the same vocabulary as the rest of the
 *      site (§ 归档, § tags, § 目录 …).
 * ================================================================= */
/* Section breaks are the SAME ink as the masthead rules (color-mix
   in section 1b ensures --line is just text-primary at low opacity),
   so the hue is consistent across the whole publication. What
   differs is the inking — page-internal breaks use a thin pale
   stroke (--line, ~16%); the major comments-boundary break escalates
   to full ink and thicker weight. The label carries the meaning;
   the rule just frames it. */
.proof-section-break {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--16);
    margin: var(--wp--preset--spacing--40) 0;
}
.proof-section-break__line {
    flex: 1;
    height: 1px;
    background: var(--wp--preset--color--line);
}
.proof-section-break__label {
    font-family: var(--font-mono);
    font-size: var(--wp--preset--font-size--xxs);
    color: var(--wp--preset--color--text-secondary);
    letter-spacing: 0.1em;
    white-space: nowrap;
    line-height: 1;
}
/* "Strong" variant (comments boundary): full ink + thicker rule.
   This is the only page-internal break that escalates beyond the
   pale hairline — it marks "article ends, public discussion begins",
   which earns the weight. */
.proof-section-break--strong {
    margin: var(--wp--preset--spacing--64) 0 var(--wp--preset--spacing--32);
}
.proof-section-break--strong .proof-section-break__line {
    height: 2px;
    background: var(--wp--preset--color--text-primary);
}
.proof-section-break--strong .proof-section-break__label {
    color: var(--wp--preset--color--text-primary);
    font-weight: 600;
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.14em;
}

/* =================================================================
 * 14. Comments — classical print fittings
 *      Letterpress feel: fleuron above the title, asterism between
 *      threads, italic small-caps bylines. Decorative without being
 *      noisy. Engraved, not ornamental.
 * ================================================================= */
.proof-comments {
    position: relative;
    margin-top: 0;            /* labeled break above provides spacing */
    padding: var(--wp--preset--spacing--32) 0;
    border-bottom: 1px solid var(--wp--preset--color--line);
    /* Faint engraved fleuron tile in the gutter — extremely low
       opacity so it reads as paper texture, not as pattern. */
    background-image:
        radial-gradient(
            circle at 50% 50%,
            color-mix(in srgb, var(--wp--preset--color--mark) 24%, transparent) 0,
            color-mix(in srgb, var(--wp--preset--color--mark) 24%, transparent) 0.6px,
            transparent 0.6px
        );
    background-size: 14px 14px;
    background-position: 7px 7px;
}
/* Closing fleuron on the bottom border — caps the section. The TOP
   ornament is no longer needed because the "§ 评论" labeled break
   above the .proof-comments box already plays that role. */
.proof-comments::after {
    content: "❦";
    position: absolute;
    bottom: -0.62em;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wp--preset--color--bg);
    padding: 0 0.9em;
    font-size: 1.3em;
    line-height: 1;
    color: var(--wp--preset--color--accent);
    opacity: 0.7;
}

/* The labeled break is now the section heading. Demote
   wp-block-comments-title to a small italic count line just below it
   ("1 条评论") — informational, not a heading. */
.proof-comments .wp-block-comments-title {
    text-align: center;
    font-family: var(--wp--preset--font-family--heading);
    font-style: italic;
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 400;
    letter-spacing: 0.04em;
    margin: 0 0 var(--wp--preset--spacing--32);
    color: var(--wp--preset--color--text-muted);
}

/* Each comment: hairline divider with a small ornament above (only
   on top-level threads, so deep replies don't collect noise).
   Padding kept modest to keep nested threads readable — the ornament
   plus 1px rule already give the visual break. */
.proof-comment {
    position: relative;
    padding-block: var(--wp--preset--spacing--24) var(--wp--preset--spacing--16);
}
.proof-comment:last-child { border-bottom: 0; }

/* Section break: a flex row that GENERATES the line on each side of
 * the dingbat. Geometric centering is enforced by flex, not by glyph
 * metrics + absolute positioning + padding-mask — that earlier
 * approach drifted because the ❦ glyph's visual center inside its
 * advance box is font-dependent. */
.wp-block-comment-template > li + li > .proof-comment {
    border-top: 0;
}
.wp-block-comment-template > li + li > .proof-comment::before {
    content: "❦";
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    margin-block: calc(var(--wp--preset--spacing--16) * -1) var(--wp--preset--spacing--16);
    font-size: 0.78em;
    line-height: 1;
    color: var(--wp--preset--color--accent);
    opacity: 0.5;
    /* Two flanking rules drawn via background gradients on the flex
     * item's own ::before/::after slots. Using radial via box-shadow
     * trick is fragile; simplest is to wrap in two pseudo lines —
     * but ::before only allows one node, so we paint the rules using
     * a linear-gradient background that fills the surrounding row. */
    background:
        linear-gradient(
            to right,
            var(--wp--preset--color--line) 0,
            var(--wp--preset--color--line) calc(50% - 1.4em),
            transparent calc(50% - 1.4em),
            transparent calc(50% + 1.4em),
            var(--wp--preset--color--line) calc(50% + 1.4em),
            var(--wp--preset--color--line) 100%
        ) center / 100% 1px no-repeat;
    /* Vertical breathing room so the line sits in the band's middle. */
    padding-block: 0.6em;
}

/* Nested replies: tighter padding (parent already framed the thread)
   and a normalized inner OL with a clear indent rail. The browser's
   default ol margin/padding-left would otherwise stack with the
   .proof-comment padding and balloon the gap. */
.wp-block-comment-template ol {
    list-style: none;
    margin: 0;
    padding-left: var(--wp--preset--spacing--32);
    border-left: 1px solid var(--wp--preset--color--line);
}
.wp-block-comment-template ol > li {
    margin: 0;
}
.comment.depth-2 > .proof-comment,
.comment.depth-3 > .proof-comment,
.comment.depth-4 > .proof-comment,
.comment.depth-5 > .proof-comment {
    padding-block: var(--wp--preset--spacing--12);
    border-top: 1px dotted var(--wp--preset--color--line);
}
.comment.depth-2 > .proof-comment::before,
.comment.depth-3 > .proof-comment::before,
.comment.depth-4 > .proof-comment::before,
.comment.depth-5 > .proof-comment::before {
    /* No ornament on nested replies — the indent rail is enough. */
    content: none;
}
/* The first reply inside a parent gets no top rule (the parent's
   bottom padding plus the indent rail already separate them). */
.wp-block-comment-template ol > li:first-child > .proof-comment {
    border-top: 0;
    padding-top: var(--wp--preset--spacing--8);
}

.proof-comment__head {
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.proof-comment__head .wp-block-avatar img {
    border-radius: 0;
    display: block;
}
/* Classical byline: italic small-caps with em-dash leader, like a
   newspaper letter-to-the-editor signature. */
.proof-comment .wp-block-comment-author-name,
.proof-comment .wp-block-comment-author-name a {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--sm);
    font-style: italic;
    font-variant: small-caps;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--text-primary);
    text-decoration: none;
}
.proof-comment .wp-block-comment-author-name::before {
    content: "— ";
    color: var(--wp--preset--color--text-muted);
    margin-right: 0.15em;
    font-style: normal;
}
/* When the author has a URL, WP renders the name as <a>. Make that
   distinguishable at a glance: hairline underline + a small ↗ glyph.
   Names without a URL stay plain, so you can scan who linked. */
.proof-comment .wp-block-comment-author-name a {
    border-bottom: 1px solid var(--wp--preset--color--line);
    padding-bottom: 1px;
    transition: border-color 200ms ease, color 200ms ease;
}
.proof-comment .wp-block-comment-author-name a::after {
    content: " ↗";
    font-family: var(--font-mono);
    font-size: 0.75em;
    font-weight: 400;
    color: var(--wp--preset--color--text-muted);
    margin-left: 0.15em;
    vertical-align: 0.08em;
}
.proof-comment .wp-block-comment-author-name a:hover {
    color: var(--wp--preset--color--accent);
    border-bottom-color: var(--wp--preset--color--accent);
}
.proof-comment .wp-block-comment-author-name a:hover::after {
    color: var(--wp--preset--color--accent);
}
.proof-comment .wp-block-comment-content {
    color: var(--wp--preset--color--text-primary);
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.7;
}
.proof-comment .wp-block-comment-content p { margin: 0.5em 0; }
/* Reply link: footnote-style glyph + italic small-caps. */
.proof-comment .wp-block-comment-reply-link {
    margin-top: 0.6rem;
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.06em;
}
.proof-comment .wp-block-comment-reply-link a {
    color: var(--wp--preset--color--text-muted);
    font-family: var(--wp--preset--font-family--heading);
    font-style: italic;
    font-variant: small-caps;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease, color 200ms ease;
}
.proof-comment .wp-block-comment-reply-link a::before {
    content: "↳ ";
    font-style: normal;
    font-variant: normal;
    margin-right: 0.15em;
    color: var(--wp--preset--color--accent);
    opacity: 0.7;
}
.proof-comment .wp-block-comment-reply-link a:hover {
    color: var(--wp--preset--color--accent);
    border-bottom-color: var(--wp--preset--color--accent);
}

/* Comment form: classical labels + a discreet asterism above the
   "leave a reply" heading to mark the boundary between thread and form. */
.proof-comments .comment-respond {
    margin-top: var(--wp--preset--spacing--48);
    padding-top: var(--wp--preset--spacing--32);
    position: relative;
}
.proof-comments .comment-respond::before {
    content: "⁂";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: var(--wp--preset--color--accent);
    opacity: 0.6;
    letter-spacing: 0.4em;
    font-size: 0.9em;
}
.proof-comments .comment-reply-title {
    text-align: center;
    font-family: var(--wp--preset--font-family--heading);
    font-style: italic;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--md);
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--text-primary);
    margin: 0 0 var(--wp--preset--spacing--24);
}
.proof-comments .comment-form label {
    display: block;
    font-family: var(--wp--preset--font-family--heading);
    font-style: italic;
    font-variant: small-caps;
    letter-spacing: 0.06em;
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--text-secondary);
    margin-bottom: 0.3em;
}