/* =================================================================
 * 21. Homepage — hero + 2-col grid
 * ================================================================= */
/* The proofcard counter (used by image-less cards' "§ 0N" placeholder)
 * lives on every card grid wrapper — both .proof-home and .proof-archive
 * use .proof-grid-query — because in Chromium a counter-increment
 * without an enclosing counter-reset starts a fresh counter scope per
 * element, which produces "§ 1" on every card on archive/category pages
 * (where no .proof-home wrapper exists). One reset on the grid wrapper
 * covers both contexts. */
.proof-grid-query {
    counter-reset: proofcard;
}

/* --- HERO --- */
.proof-hero {
    margin: 0 0 var(--wp--preset--spacing--48);
}
.proof-hero__image {
    margin: 0 0 var(--wp--preset--spacing--24);
}
.proof-hero__image img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}
.proof-hero__meta {
    margin-bottom: var(--wp--preset--spacing--12);
}
.proof-hero__title {
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(2.4rem, 5.2vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 var(--wp--preset--spacing--16);
    font-weight: 400;
}
.proof-hero__title a {
    color: var(--wp--preset--color--text-primary);
    text-decoration: none;
    border-bottom: 0;
    transition: color 200ms ease;
}
.proof-hero__title a:hover { color: var(--wp--preset--color--accent); }
.proof-hero__excerpt {
    color: var(--wp--preset--color--text-secondary);
    font-size: var(--wp--preset--font-size--md);
    line-height: 1.7;
    max-width: 680px;
}
.proof-hero__excerpt p { margin: 0 0 0.6em; }
.proof-hero__excerpt a {
    color: var(--wp--preset--color--accent);
    font-family: var(--font-mono);
    font-size: var(--wp--preset--font-size--xs);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

/* No featured image: collapse hero image area, push title up */
.proof-hero:not(:has(.wp-block-post-featured-image img)) .proof-hero__image {
    display: none;
}

.proof-hero-rule.wp-block-separator {
    border: 0;
    border-top: 1px solid var(--wp--preset--color--line);
    margin: 0 0 var(--wp--preset--spacing--48);
    opacity: 1;
    text-align: left;
}
.proof-hero-rule.wp-block-separator::before { content: none; }

/* --- GRID --- */
.proof-grid-query .wp-block-post-template {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--wp--preset--spacing--48) var(--wp--preset--spacing--32);
}
.proof-card {
    counter-increment: proofcard;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--12);
}
.proof-card__image {
    margin: 0;
}
.proof-card__image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}
.proof-card__meta { margin: 0; }
.proof-card__title {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--xl);
    line-height: 1.2;
    letter-spacing: -0.005em;
    margin: 0;
    font-weight: 400;
}
.proof-card__title a {
    color: var(--wp--preset--color--text-primary);
    text-decoration: none;
    border-bottom: 0;
    transition: color 200ms ease;
}
.proof-card__title a:hover { color: var(--wp--preset--color--accent); }
.proof-card__excerpt {
    color: var(--wp--preset--color--text-secondary);
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.6;
    margin: 0;
}
.proof-card__excerpt p { margin: 0; }

/* No featured image: typographic placeholder using card index */
.proof-card:not(:has(.wp-block-post-featured-image img)) .proof-card__image {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    aspect-ratio: 4 / 3;
    border: 1px dotted var(--wp--preset--color--line);
    padding: var(--wp--preset--spacing--16);
    color: var(--wp--preset--color--text-muted);
    font-family: var(--font-mono);
    font-size: var(--wp--preset--font-size--sm);
    background: linear-gradient(
        135deg,
        transparent 0%,
        transparent 49.5%,
        var(--wp--preset--color--line) 49.5%,
        var(--wp--preset--color--line) 50.5%,
        transparent 50.5%
    );
    background-size: 8px 8px;
}
.proof-card:not(:has(.wp-block-post-featured-image img)) .proof-card__image::before {
    content: "§ " counter(proofcard, decimal-leading-zero);
    background: var(--wp--preset--color--bg);
    padding: 0.2em 0.5em;
}

/* --- Pagination — mono numerals --- */
.proof-grid-query .wp-block-query-pagination {
    margin-top: var(--wp--preset--spacing--64);
    gap: var(--wp--preset--spacing--16);
}
.proof-grid-query .wp-block-query-pagination,
.proof-grid-query .wp-block-query-pagination a,
.proof-grid-query .wp-block-query-pagination .page-numbers {
    font-family: var(--font-mono);
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--text-muted);
}
.proof-grid-query .wp-block-query-pagination a {
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: color 200ms ease, border-color 200ms ease;
}
.proof-grid-query .wp-block-query-pagination a:hover {
    color: var(--wp--preset--color--text-primary);
    border-bottom-color: var(--wp--preset--color--text-primary);
}
.proof-grid-query .wp-block-query-pagination .page-numbers.current {
    color: var(--wp--preset--color--text-primary);
    border-bottom: 1px solid var(--wp--preset--color--accent);
}

/* --- Archive / Search head: kicker label + big title above the grid --- */
.proof-archive-head {
    margin-bottom: var(--wp--preset--spacing--12);
}
.proof-archive-title {
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 var(--wp--preset--spacing--16);
    font-weight: 400;
    color: var(--wp--preset--color--text-primary);
}
.proof-archive-desc {
    color: var(--wp--preset--color--text-secondary);
    font-size: var(--wp--preset--font-size--md);
    line-height: 1.7;
    margin: 0 0 var(--wp--preset--spacing--16);
    max-width: 680px;
}
.proof-search .proof-search-large {
    margin: 0 0 var(--wp--preset--spacing--16);
}

/* =================================================================
 * 20c. Search readout — list, not layout
 *      Search isn't a 版面/section like archive; it's the catalog's
 *      reply. So results render as a numbered single-column readout
 *      (no thumbnails, hairlines between rows, mono row numbers)
 *      rather than the 2-col card grid used by archive/tag pages.
 *      The visual contrast list-vs-grid tells the reader at a glance
 *      "you are inspecting a query result, not browsing a section."
 * ================================================================= */
.proof-search .proof-readout-head {
    margin-bottom: var(--wp--preset--spacing--8);
}
/* The query-title block emits "Search results for: term" (or the
   localized equivalent). Render it in mono so the term reads as a
   typed query string rather than an editorial headline. */
.proof-search .proof-readout-title {
    font-family: var(--font-mono);
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--wp--preset--color--text-primary);
    margin: 0 0 var(--wp--preset--spacing--24);
    word-break: break-word;
    /* Title text on the left, ceremonial door anchored to the far
       right. align-items:center keeps the door visually balanced
       against the title even when the query wraps to two lines. */
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--16);
}
/* Engraved double-leaf door, anchored to the far right of the search
   title row. The metaphor is "search opens a door onto the world" —
   so the icon is a heavy ceremonial portal: stone lintel, twin jambs,
   double-leaf door slab with mid-rail, four inset panels, paired
   knockers at center, threshold below. Square corners + miter joins
   give it the solemn, architectural register the user asked for —
   not a peek-through window but a portal to step through.
   Same architectural family as the masthead's fanlight (carved-by-
   the-same-hand feel) but tuned for gravity rather than welcome.
   Implemented via mask-image so the icon inherits text color and
   flips automatically in dark mode. */
.proof-search .proof-readout-title::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 1.4em;
    height: 2.2em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 56' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='0' y='5' width='36' height='4' fill='black' stroke='none'/%3E%3Cpath d='M 4 9 L 4 50'/%3E%3Cpath d='M 32 9 L 32 50'/%3E%3Cpath d='M 4 50 L 32 50'/%3E%3Cpath d='M 0 53 L 36 53'/%3E%3Cpath d='M 18 11 L 18 48'/%3E%3Cpath d='M 6 28 L 30 28'/%3E%3Crect x='8' y='13' width='8' height='12'/%3E%3Crect x='20' y='13' width='8' height='12'/%3E%3Crect x='8' y='31' width='8' height='15'/%3E%3Crect x='20' y='31' width='8' height='15'/%3E%3Ccircle cx='15' cy='36' r='0.9' fill='black'/%3E%3Ccircle cx='21' cy='36' r='0.9' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 56' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='0' y='5' width='36' height='4' fill='black' stroke='none'/%3E%3Cpath d='M 4 9 L 4 50'/%3E%3Cpath d='M 32 9 L 32 50'/%3E%3Cpath d='M 4 50 L 32 50'/%3E%3Cpath d='M 0 53 L 36 53'/%3E%3Cpath d='M 18 11 L 18 48'/%3E%3Cpath d='M 6 28 L 30 28'/%3E%3Crect x='8' y='13' width='8' height='12'/%3E%3Crect x='20' y='13' width='8' height='12'/%3E%3Crect x='8' y='31' width='8' height='15'/%3E%3Crect x='20' y='31' width='8' height='15'/%3E%3Ccircle cx='15' cy='36' r='0.9' fill='black'/%3E%3Ccircle cx='21' cy='36' r='0.9' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.85;
}
.proof-search .proof-search-large {
    margin: 0 0 var(--wp--preset--spacing--40);
}

/* Override the .proof-grid-query gap (set for 2-col grid) so readout
   rows sit flush — the per-row hairlines provide the rhythm. */
.proof-readout-query .wp-block-post-template.proof-search-list {
    counter-reset: proofresult;
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    gap: 0;
}
.proof-search-list > li {
    counter-increment: proofresult;
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    column-gap: var(--wp--preset--spacing--16);
    padding: var(--wp--preset--spacing--20) 0;
    border-bottom: 1px solid var(--wp--preset--color--line);
}
.proof-search-list > li::before {
    content: counter(proofresult, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--text-muted);
    letter-spacing: 0.04em;
    padding-top: 0.4em;
    align-self: start;
}

.proof-result {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}
.proof-result__meta {
    margin: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    gap: 0.6em;
}
.proof-result__meta,
.proof-result__meta * {
    font-size: var(--wp--preset--font-size--xxs);
}
.proof-result__title {
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    margin: 0;
}
.proof-result__title a {
    color: var(--wp--preset--color--text-primary);
    text-decoration: none;
    border-bottom: 0;
    transition: color 200ms ease;
}
.proof-result__title a:hover { color: var(--wp--preset--color--accent); }
.proof-result__excerpt {
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.55;
    color: var(--wp--preset--color--text-secondary);
    margin: 0;
}
.proof-result__excerpt p { margin: 0; }

/* Empty-state line speaks the same readout dialect. */
.proof-readout-empty {
    font-family: var(--font-mono);
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--text-muted);
    letter-spacing: 0.04em;
    padding: var(--wp--preset--spacing--32) 0;
    border-top: 1px solid var(--wp--preset--color--line);
    border-bottom: 1px solid var(--wp--preset--color--line);
    margin: 0;
    text-align: center;
}

@media (max-width: 480px) {
    .proof-search-list > li {
        grid-template-columns: 2rem 1fr;
        column-gap: var(--wp--preset--spacing--12);
    }
}

/* --- Archive cards: per-entry newspaper typography ---
   Each post in a section reads like a column item: a slug-kicker
   above the headline, a tight bold serif title, a justified deck
   with auto-hyphenation, and hairline rules separating rows. The
   2-col grid layout is preserved — only typography changes. */
.proof-archive .proof-card {
    /* Slightly more vertical breathing so the meta rule has room. */
    gap: var(--wp--preset--spacing--16);
}
.proof-archive .proof-card__meta {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--wp--preset--font-size--xxs);
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--wp--preset--color--line);
    gap: 0.6em;
}
.proof-archive .proof-card__title {
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.12;
    letter-spacing: -0.005em;
    /* Tighten the gap between headline and deck below. */
    margin: -0.2em 0 0;
}
.proof-archive .proof-card__excerpt {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.55;
    color: var(--wp--preset--color--text-secondary);
}
/* Hairline separators between rows on the 2-col grid: cards 3+ get
   a top rule. The grid gap still provides spacing; the rule sits
   inside the gap. */
.proof-archive .proof-grid > li:nth-child(n+3) {
    border-top: 1px solid var(--wp--preset--color--line);
    padding-top: var(--wp--preset--spacing--32);
}
/* Mobile (single-column): all cards from the second onwards get
   a top rule, since they're all stacked. */
@media (max-width: 720px) {
    .proof-archive .proof-grid > li:nth-child(n+3) {
        padding-top: var(--wp--preset--spacing--24);
    }
    .proof-archive .proof-grid > li:nth-child(2) {
        border-top: 1px solid var(--wp--preset--color--line);
        padding-top: var(--wp--preset--spacing--24);
    }
}

/* --- Mobile collapse ---
 * `minmax(0, 1fr)` not `1fr`: bare `1fr` resolves to `minmax(auto, 1fr)`,
 * and `auto` for grid items is min-content — for an <img>, that's its
 * intrinsic pixel width (e.g. 2400px from a stock photo). Lazy-loaded
 * featured images entering the viewport during scroll then ratchet the
 * column wider on every load, which compounds because all cards share
 * the single track. WebKit follows the spec strictly here; Chromium has
 * a quirk that masks the bug, so this only reproduces in Safari.
 * Symptom: featured images grow and the page drifts right as you scroll. */
@media (max-width: 720px) {
    .proof-grid-query .wp-block-post-template.is-layout-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .proof-hero__title { font-size: clamp(2rem, 8vw, 2.6rem); }
}

/* --- Empty sticky hero: when no sticky post, the wp:query block renders
       only "no results" boilerplate. Hide both the hero query and the
       separator. The grid below (inherit:true) still shows all posts. --- */
.proof-hero-query:not(:has(.proof-hero)),
.proof-hero-query:not(:has(.proof-hero)) + .proof-hero-rule {
    display: none;
}

/* --- On paged URLs (/page/2/+), hide hero entirely; grid pagination
       continues naturally via the inherited main query. --- */
.paged .proof-hero-query,
.paged .proof-hero-rule {
    display: none;
}

/* --- Promote the first grid card to hero treatment when the sticky-hero
       isn't shown (no sticky AND not paged). Body lacks .paged on page 1. --- */
body:not(.paged) .proof-home:not(:has(.proof-hero)) .proof-grid > li:first-child {
    grid-column: 1 / -1;
}
body:not(.paged) .proof-home:not(:has(.proof-hero)) .proof-grid > li:first-child .proof-card__image img {
    aspect-ratio: 16 / 9;
}
body:not(.paged) .proof-home:not(:has(.proof-hero)) .proof-grid > li:first-child .proof-card__title {
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.05;
}

/* ------------------------------------------------------------------ */
/* 20. Table of contents (single posts & pages)                        */
/* ------------------------------------------------------------------ */
/* Renders inline by default (mobile collapsible). On wide viewports
   JS sets [open] and adds .proof-toc--desktop, and CSS switches it to
   a fixed left sidebar. */

.proof-toc {
    display: block;
    margin: var(--wp--preset--spacing--32) 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.proof-toc__label {
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
    font-size: var(--wp--preset--font-size--xxs);
    color: var(--wp--preset--color--text-muted);
    letter-spacing: 0.04em;
    text-transform: lowercase;
    margin: 0;
    padding: var(--wp--preset--spacing--16) 0;
    border-top: 1px solid var(--wp--preset--color--line);
    border-bottom: 1px solid var(--wp--preset--color--line);
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--16);
}
.proof-toc__label::-webkit-details-marker { display: none; }
.proof-toc__label::after {
    content: "[+]";
    font-size: var(--wp--preset--font-size--xxs);
    color: var(--wp--preset--color--text-muted);
    transition: opacity 120ms ease;
}
.proof-toc[open] .proof-toc__label::after {
    content: "[−]";
}
.proof-toc__label:hover {
    color: var(--wp--preset--color--text-primary);
}

.proof-toc__list {
    list-style: none;
    margin: 0;
    padding: var(--wp--preset--spacing--16) 0 0;
    counter-reset: chapter;
}

.proof-toc__item {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

.proof-toc__link {
    display: block;
    /* Two-column grid in REM (NOT em) so the numeral gutter and the
       title's left edge stay on the same x-axis even when h3 drops
       to a smaller font. Numerals right-align inside the gutter so
       every chapter mark — I, II, XIV — shares one right edge, and
       all titles start at one fixed x after a small gap. */
    padding: 6px 0 6px 2.8rem;
    border-left: 2px solid var(--wp--preset--color--line);
    /* Body serif so TOC reads as part of the article — same ink as
       the headlines it points to, not a separate mono meta-band. */
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--text-muted);
    text-decoration: none;
    transition: color 120ms ease, border-color 120ms ease;
    word-break: break-word;
    position: relative;
}

.proof-toc__link:hover {
    color: var(--wp--preset--color--text-primary);
}

/* h2 → CHAPTER. Roman numeral in the heading font's italic slope —
   classical book-typography mark, trimmed to just the numeral so it
   reads as restrained editorial signage. Counter resets the h3
   sub-counter on every h2 so each chapter starts fresh at 1. */
.proof-toc__item--h2 {
    counter-increment: chapter;
    counter-reset: section;
}
.proof-toc__item--h2 > .proof-toc__link::before {
    /* Arabic numerals with tabular-nums so 1, 10, 14 share an exact
       monospaced cell — Roman italics in a proportional serif look
       "wobbly" no matter how you align them; Arabic + tabular gives
       a clean column without giving up serif elegance. */
    content: counter(chapter) ".";
    position: absolute;
    left: 0;
    width: 2.4rem;
    text-align: right;
    padding-right: 0.5rem;
    white-space: nowrap;
    font-family: var(--wp--preset--font-family--heading);
    font-style: italic;
    font-weight: 400;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    color: var(--wp--preset--color--text-secondary);
    letter-spacing: 0.02em;
    line-height: 1;
    top: 8px;
}

/* h3 → SECTION inside the current chapter. Arabic numeral in mono,
   sharing the same rem-based numeral column so chapter and section
   marks align vertically regardless of the link's font-size. */
.proof-toc__item--h3 {
    counter-increment: section;
}
.proof-toc__item--h3 .proof-toc__link {
    font-size: var(--wp--preset--font-size--xxs);
    opacity: 0.85;
}
.proof-toc__item--h3 > .proof-toc__link::before {
    /* Sub-numeral: bare section count ("1", "2", "3") rather than
       the full "chapter.section" form. In a proportional serif "1.1"
       is wider than "1.", which would push the h3 numeral's left
       edge past the parent chapter's — child appearing wider than
       parent. A bare section number stays narrower, so each tier
       visibly nests inside the one above. The chapter context is
       given by the h2 immediately above in the list. */
    content: counter(section);
    position: absolute;
    left: 0;
    width: 2.4rem;
    text-align: right;
    padding-right: 0.5rem;
    white-space: nowrap;
    font-family: var(--wp--preset--font-family--heading);
    font-style: normal;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--wp--preset--color--text-muted);
    letter-spacing: 0.04em;
    line-height: 1;
    top: 10px;
}

.proof-toc__item.is-active > .proof-toc__link {
    color: var(--wp--preset--color--accent);
    border-left-color: var(--wp--preset--color--accent);
    font-weight: 500;
}
.proof-toc__item.is-active > .proof-toc__link::before {
    color: var(--wp--preset--color--accent);
}

/* Comments jump-link at the foot of the TOC. Set apart from the
   heading list with a hairline divider so it reads as a separate
   section, not "the last h2". */
.proof-toc__item--comments {
    margin-top: var(--wp--preset--spacing--12);
    padding-top: var(--wp--preset--spacing--12);
    border-top: 1px solid var(--wp--preset--color--line);
}
.proof-toc__item--comments .proof-toc__link {
    color: var(--wp--preset--color--text-secondary);
    border-left-color: transparent;
    /* Same 2.8rem gutter as headings so § and 评论 sit in line with
       the chapter numerals + titles above. */
    padding-left: 2.8rem;
}
/* § sits in the same right-aligned column as the chapter numerals.
   Trailing "." gives it the same right-anchor as "1." / "14.", so
   the optical right edge of every prefix lands on one vertical line
   instead of § "floating" alone in the cell. Upright (not italic)
   to match how single non-digit marks read more cleanly when paired
   with tabular digits above. */
.proof-toc__item--comments .proof-toc__link::before {
    content: "§";
    position: absolute;
    left: 0;
    width: 2.4rem;
    text-align: right;
    padding-right: 0.5rem;
    font-family: var(--wp--preset--font-family--heading);
    font-style: normal;
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--wp--preset--color--text-secondary);
    line-height: 1;
    top: 8px;
}
.proof-toc__item--comments.is-active > .proof-toc__link {
    color: var(--wp--preset--color--accent);
    border-left-color: var(--wp--preset--color--accent);
}


/* Offset scroll target so smooth-scrolled headings clear the top edge */
.proof-toc-anchor {
    scroll-margin-top: 24px;
}

/* --- Desktop: detach as fixed left sidebar ------------------------- */
@media (min-width: 1280px) {
    .proof-toc--desktop {
        position: fixed;
        /* Article-side spacing is tuned (single template padding-top
           plus .proof-overline margin-top) so the post overline lands
           at this y on first paint — keeping the TOC top static and
           predictable regardless of whether a featured image is set.
           When the WP admin bar is present (logged-in users) the rest
           of the page is shifted down 32px but a fixed-positioned TOC
           is not — body.admin-bar bumps the offset by that height. */
        top: 140px;
        left: max(48px, calc((100vw - 1100px) / 2 - 240px));
        width: 220px;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        margin: 0;
        padding: 0;
        /* Opaque page-color backdrop so wide/full media blocks scrolling
           past don't bleed under the active highlight. Matches the page
           bg via the same token in both light and dark mode, so this is
           visually identical to no-bg when nothing's behind it. */
        background: var(--wp--preset--color--background);
        border: 0;
        z-index: 5;
        scrollbar-width: thin;
        scrollbar-color: var(--wp--preset--color--line) transparent;
    }
    .proof-toc--desktop .proof-toc__label {
        display: none;
    }
    .proof-toc--desktop .proof-toc__list {
        padding-top: 0;
    }
}

@media (min-width: 1600px) {
    .proof-toc--desktop {
        left: max(64px, calc((100vw - 1100px) / 2 - 280px));
        width: 240px;
    }
}

/* When the WordPress admin bar is rendered (logged-in users), the
   document body is offset by the bar's height. position:fixed elements
   are anchored to the viewport, so they don't follow that shift —
   compensate by adding the bar height to TOC's top. The bar is 32px
   wide-screen; TOC only shows ≥1280px so we don't need the 46px
   mobile case. Using max-height: calc keeps the TOC's bottom inside
   the visible area too. */
@media (min-width: 1280px) {
    body.admin-bar .proof-toc--desktop {
        top: calc(140px + 32px);
        max-height: calc(100vh - 200px - 32px);
    }
}

/* ------------------------------------------------------------------ */
/* 21. Archive newspaper masthead                                      */
/* ------------------------------------------------------------------ */
/* Sits above the existing § 归档 / archive kicker on archive.html.
   Borrows newspaper-nameplate conventions: thin/thick rules sandwich,
   centered serif title with mono flanks, and a meta line that shows
   the dynamic section name via wp:query-title. */

.proof-masthead {
    margin: 0 0 var(--wp--preset--spacing--32);
    padding: 0;
    text-align: center;
}

.proof-masthead__rule {
    display: block;
    width: 100%;
}
.proof-masthead__rule--hair {
    height: 1px;
    background: var(--wp--preset--color--text-primary);
}
.proof-masthead__rule--double {
    height: 6px;
    border-top: 3px solid var(--wp--preset--color--text-primary);
    border-bottom: 1px solid var(--wp--preset--color--text-primary);
}
.proof-masthead__rule--double-rev {
    height: 6px;
    border-top: 1px solid var(--wp--preset--color--text-primary);
    border-bottom: 3px solid var(--wp--preset--color--text-primary);
}

.proof-masthead__head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--wp--preset--spacing--24);
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--16);
}

.proof-masthead__head .wp-block-site-title,
.proof-masthead__name {
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 0;
    color: var(--wp--preset--color--text-primary);
    text-align: center;
    text-transform: uppercase;
    grid-column: 2;
}
.proof-masthead__head .wp-block-site-title a {
    color: inherit;
    text-decoration: none;
}

.proof-masthead__flank {
    display: flex;
    flex-direction: column;
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
    font-size: var(--wp--preset--font-size--xxs);
    color: var(--wp--preset--color--text-muted);
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}
.proof-masthead__flank--left {
    justify-self: end;
    text-align: right;
}
.proof-masthead__flank--right {
    justify-self: start;
    text-align: left;
}

/* Front-page masthead: bigger nameplate (this is the publication's
   actual title, not a section name), italic-serif motto beneath. */
.proof-masthead--front .proof-masthead__name {
    font-size: clamp(2.6rem, 7vw, 5rem);
    font-weight: 500;
    letter-spacing: 0.015em;
}

/* Paged running header — appears on /page/2/ and beyond in place of
   the full front masthead. Mirrors a real newspaper's "running head":
   slim, single-line, no SVG crest, just identity + continuation mark
   + page-of-pages. Lives inside .proof-masthead so it inherits the
   same rule colors (--wp--preset--color--line / --mark) as the cover. */
.proof-masthead--paged {
    margin-bottom: var(--wp--preset--spacing--32, 2rem);
}
.proof-paged-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    gap: var(--wp--preset--spacing--16, 1rem);
    padding: var(--wp--preset--spacing--12, 0.75rem) 0;
    font-family: var(--font-mono);
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.proof-paged-head__flank--left  { justify-self: start; }
.proof-paged-head__flank--center{ justify-self: center; }
.proof-paged-head__flank--right { justify-self: end; }
.proof-paged-head__name {
    color: var(--wp--preset--color--text-primary);
    letter-spacing: 0.08em;
}
.proof-paged-head__sep {
    margin: 0 0.4em;
    opacity: 0.55;
}
.proof-paged-head__contd {
    /* Center span gets a touch more weight — it's the semantic anchor
       ("this is a continuation page"), the flanks are reference data. */
    color: var(--wp--preset--color--text-primary);
    letter-spacing: 0.12em;
}

/* Mobile: collapse the three-flank grid into a single centered row.
   Three short labels stacked feel tidier than one wrapped line. */
@media (max-width: 600px) {
    .proof-paged-head {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--wp--preset--spacing--8, 0.5rem);
    }
    .proof-paged-head__flank { justify-self: center; }
}

/* Timeline masthead: H1 sits where the front-page nameplate sits.
 * The crest is a pocket watch — its silhouette is taller than the
 * fanlight (bow + crown stem above the case), so we widen the
 * ornate rule a touch to give it air. */
.proof-masthead--timeline {
    margin-bottom: var(--wp--preset--spacing--40, 3rem);
}
.proof-masthead--timeline .proof-masthead__name {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 500;
    letter-spacing: 0.04em;
}
.proof-masthead--timeline .proof-masthead__rule--ornate {
    height: clamp(72px, 12vw, 110px);
}
.proof-masthead__rule-crest--watch {
    width: clamp(120px, 22%, 200px);
}

/* When a featured image is set on a friends/timeline page, the
 * crest SVG (envelope / watch) is dropped — the image becomes the
 * frontispiece. The masthead still gets a hair top rule so it has
 * a clear top edge, with breathing room above the image. */
.proof-masthead--has-image {
    margin-top: var(--wp--preset--spacing--32, 2rem);
}

/* Friends masthead: same chassis as the timeline masthead, with the
 * sealed envelope crest in place of the pocket watch. The envelope
 * is wider than tall, so the ornate rule height matches the watch. */
.proof-masthead--friends {
    margin-bottom: var(--wp--preset--spacing--40, 3rem);
}
.proof-masthead--friends .proof-masthead__name {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 500;
    letter-spacing: 0.04em;
}
.proof-masthead--friends .proof-masthead__rule--ornate {
    height: clamp(72px, 12vw, 110px);
}
.proof-masthead__rule-crest--seal {
    width: clamp(120px, 22%, 200px);
}

@media (max-width: 540px) {
    .proof-masthead--timeline .proof-masthead__rule--ornate,
    .proof-masthead--friends .proof-masthead__rule--ornate {
        height: clamp(64px, 18vw, 96px);
    }
    .proof-masthead__rule-crest--watch,
    .proof-masthead__rule-crest--seal { width: clamp(110px, 38%, 180px); }
}

/* Ornate variant of the top hair rule (front page only — the
   publication's "门头"). The line stays a single unbroken hairline
   (border-bottom on the container); a centered SVG fanlight arch is
   absolutely positioned with its chord resting EXACTLY on that line —
   like a Georgian fanlight transom over a lintel, or the carved 棂窗
   above a Chinese door. Line and carving merge into one piece.
   Section/tag archives use a different ornament (.proof-masthead__rule--tiled
   below) so each landing surface carries its own auspicious motif. */
.proof-masthead__rule--ornate {
    height: clamp(56px, 9vw, 84px);
    background: none;
    border-bottom: 1px solid var(--wp--preset--color--text-primary);
    position: relative;
    color: var(--wp--preset--color--text-primary);
    overflow: visible;
}
.proof-masthead__rule-crest {
    position: absolute;
    /* bottom: 0 sits on the padding edge, which is the inside of the
       border-bottom — i.e. the SVG's chord ends up flush on top of the
       line, which is the whole point of the metaphor. */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: clamp(160px, 26%, 240px);
    height: auto;
    color: inherit;
    overflow: visible;
}
@media (max-width: 540px) {
    .proof-masthead__rule--ornate { height: clamp(48px, 14vw, 72px); }
    .proof-masthead__rule-crest { width: clamp(140px, 42%, 200px); }
}

/* Tiled ornament strip — used as the top + bottom rules of the
   section/tag archive masthead. The SVG inside carries a <pattern>
   that tiles horizontally across the full strip width, so the
   ornament reads as a continuous embossed border framing the
   masthead block (like the running 回纹/缠枝 borders on letterpress
   stationery). Motif is selected in PHP by archive type:
     .--tiled-meander  → 回纹 (category / date / author): 绵延不绝
     .--tiled-vine     → 缠枝纹 (tag): 横向连理 */
.proof-masthead__rule--tiled {
    height: 16px;
    background: none;
    border: none;
    color: var(--wp--preset--color--text-secondary);
    overflow: hidden;
    margin: 0;
}
.proof-masthead__rule-tile {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
}
@media (max-width: 540px) {
    .proof-masthead__rule--tiled { height: 12px; }
}

.proof-masthead__motto {
    margin: 0 auto var(--wp--preset--spacing--16);
    max-width: 540px;
    text-align: center;
    font-family: var(--wp--preset--font-family--heading);
    font-style: italic;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--text-secondary);
    letter-spacing: 0.04em;
    line-height: 1.5;
    padding: 0 var(--wp--preset--spacing--16);
}
.proof-masthead__motto::before { content: "“ "; color: var(--wp--preset--color--accent); opacity: 0.7; font-style: normal; }
.proof-masthead__motto::after  { content: " ”"; color: var(--wp--preset--color--accent); opacity: 0.7; font-style: normal; }

/* Asterism section break for the homepage — sits between the lead
   story (sticky hero) and the running grid. Three flex parts: a
   thin rule, a centered ⁂ ornament, another thin rule. */
.proof-home__divider {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--16);
    margin: var(--wp--preset--spacing--48) 0;
}
.proof-home__divider-line {
    flex: 1;
    height: 1px;
    /* Same ink family as masthead — both derive from text-primary
       via the color-mix in section 1b. Inking is light here so the
       home break doesn't compete with the masthead above it. */
    background: var(--wp--preset--color--line);
}
.proof-home__divider-mark {
    color: var(--wp--preset--color--accent);
    letter-spacing: 0.4em;
    font-size: 1.1em;
    opacity: 0.7;
    line-height: 1;
}

.proof-masthead__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: var(--wp--preset--spacing--12);
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
    font-size: var(--wp--preset--font-size--xxs);
    color: var(--wp--preset--color--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
    margin: 0;
}
.proof-masthead__meta-sep {
    color: var(--wp--preset--color--line);
}
/* wp:query-title rendered as an h6 — flatten it into the inline meta. */
.proof-masthead__section {
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    color: var(--wp--preset--color--text-primary);
    margin: 0;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
}

/* --- Dynamic dateline: real publication metadata under the masthead.
   Date · weekday · | · VOL X · NO YY — derived from PHP at render. --- */
.proof-dateline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: var(--wp--preset--spacing--16);
    padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
    font-size: var(--wp--preset--font-size--xxs);
    color: var(--wp--preset--color--text-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.proof-dateline__date,
.proof-dateline__issue {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;
    white-space: nowrap;
}
.proof-dateline__issue {
    font-weight: 600;
    color: var(--wp--preset--color--text-primary);
}
.proof-dateline__sep { color: var(--wp--preset--color--line); }
.proof-dateline__sep--strong {
    color: var(--wp--preset--color--text-primary);
    font-weight: 600;
    opacity: 0.6;
}
.proof-dateline__label {
    color: var(--wp--preset--color--text-muted);
    letter-spacing: 0.14em;
    font-weight: 600;
}
.proof-dateline__time {
    color: var(--wp--preset--color--text-primary);
    font-weight: 500;
    /* Long-form locale-rendered date contains spaces & lowercase glyphs;
       drop the dateline's blanket uppercase so it reads naturally. */
    text-transform: none;
    letter-spacing: 0.04em;
}
.proof-masthead__flank-line--term {
    color: var(--wp--preset--color--text-primary);
    font-weight: 600;
}
/* Strip the wp:shortcode wrapper's default block margin. */
.proof-masthead .wp-block-shortcode { margin: 0; }

@media (max-width: 720px) {
    .proof-masthead__head {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--12);
        padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--12);
    }
    .proof-masthead__head .wp-block-site-title,
    .proof-masthead__name {
        grid-column: 1;
        order: 1;
    }
    .proof-masthead__flank {
        flex-direction: row;
        justify-content: center;
        gap: var(--wp--preset--spacing--12);
        order: 2;
    }
    .proof-masthead__flank--left { justify-self: center; text-align: center; }
    .proof-masthead__flank--right { justify-self: center; text-align: center; order: 3; }
}