* 8. Content area
 * ================================================================= */
.proof-content {
    position: relative;
}

/* =================================================================
 * 9. Heading marks — auto chapter / section numbers
 *    Sits in the left margin (hanging) so it never compresses the
 *    text column. Same counters that drive the TOC numerals — TOC
 *    and article stay synchronized: chapter 3 in the body is item 3.
 *    in the TOC, mechanically. h3 nests under the chapter that
 *    most recently incremented.
 * ================================================================= */
.entry-content {
    counter-reset: chapter;
}
.entry-content h2 {
    counter-increment: chapter;
    counter-reset: section;
    position: relative;
}
.entry-content h3 {
    counter-increment: section;
    position: relative;
}
.entry-content h1::before,
.entry-content h2::before {
    content: counter(chapter) ".";
    position: absolute;
    top: 0.5em;
    left: -3em;
    width: 2.4em;
    text-align: right;
    padding-right: 0.4em;
    font-family: var(--wp--preset--font-family--heading);
    font-style: italic;
    font-weight: 400;
    font-size: 0.55em;
    font-variant-numeric: tabular-nums;
    color: var(--wp--preset--color--text-muted);
    letter-spacing: 0.02em;
    line-height: 1;
    pointer-events: none;
}
.entry-content h3::before {
    content: counter(chapter) "." counter(section);
    position: absolute;
    top: 0.45em;
    left: -3em;
    width: 2.4em;
    text-align: right;
    padding-right: 0.4em;
    font-family: var(--wp--preset--font-family--heading);
    font-style: normal;
    font-weight: 400;
    font-size: 0.7em;
    font-variant-numeric: tabular-nums;
    color: var(--wp--preset--color--text-muted);
    letter-spacing: 0.04em;
    line-height: 1;
    pointer-events: none;
}
.single .wp-block-post-title,
.proof-content > .wp-block-post-title {
    position: relative;
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0.2em 0 0.4em;
}
.single .wp-block-post-title a,
.proof-content > .wp-block-post-title a {
    color: var(--wp--preset--color--text-primary);
    text-decoration: none;
}

/* =================================================================
 * 10. Body typography — drop cap, paragraph spacing, emphasis
 * ================================================================= */
.entry-content {
    font-size: var(--wp--preset--font-size--md);
    line-height: var(--rhythm);
}

/* WP's is-layout-constrained centers BLOCK-level children to the 780
   text column via `max-width + margin auto`, but inline-level children
   (the <button>, <br>, <input>, raw <a> emitted by Custom HTML blocks)
   ignore those rules and flow at the parent's left edge — visually
   drifting outside the column. Padding the entry-content's own inline
   axis to (parent − content)/2 forces the inline-formatting context
   to start at the same left line as the constrained block children;
   .alignwide / .alignfull negate the padding to keep their break-out
   behavior intact. */
.entry-content.is-layout-constrained {
    /* `100%` resolves against the parent's content area, which is already
       inset by `--wp--style--root--padding-*` on the article. The entry-
       content itself is alignfull and visually escapes that padding, so
       the gutter to the 780 column is `(parent-content - 780) / 2 + root-pad`. */
    --proof-content-gutter: max(
        0px,
        calc(
            (100% - var(--wp--style--global--content-size, 780px)) / 2
            + var(--wp--style--root--padding-left, 0px)
        )
    );
    padding-inline: var(--proof-content-gutter);
}
.entry-content.is-layout-constrained > .alignwide,
.entry-content.is-layout-constrained > .alignfull {
    margin-inline: calc(-1 * var(--proof-content-gutter));
}
.entry-content > p {
    margin: 1.6em 0;
    position: relative;
}
/* Pilcrow as an article-level marker. Shown ONCE per article in the left
   gutter, not before every paragraph (too noisy across long posts). Sits
   outside the text column via right:100%, so it does not compress width.
   On single posts the first paragraph has the drop cap, so the marker
   moves to the second paragraph; on pages it sits on the first. */
.entry-content > p::before {
    position: absolute;
    right: 100%;
    top: 0.18em;
    margin-right: 0.6em;
    font-family: var(--font-mono);
    font-size: 0.78em;
    line-height: 1;
    color: var(--wp--preset--color--text-muted);
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}
.entry-content > p:first-of-type::before { content: "¶"; }
.single .entry-content > p:first-of-type::before { content: none; }
.single .entry-content > p:nth-of-type(2)::before { content: "¶"; }
@media (max-width: 900px) {
    .entry-content > p::before { content: none; }
}
.single .entry-content > p:first-of-type::first-letter {
    float: left;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 4em;
    line-height: 0.9;
    margin: 0.05em 0.12em 0 0;
    color: var(--wp--preset--color--text-primary);
}
:where(:lang(zh), :lang(ja), :lang(ko)) .single .entry-content > p:first-of-type::first-letter {
    float: none;
    font-family: inherit;
    font-size: 1.6em;
    line-height: inherit;
    margin: 0;
    color: var(--wp--preset--color--text-primary);
    font-weight: 400;
    vertical-align: -0.06em;
}
.entry-content strong { font-weight: 700; color: inherit; }
.entry-content em { font-style: italic; color: inherit; }

/* Inline code (within paragraphs) */
.entry-content :not(pre) > code {
    background: var(--wp--preset--color--bg-elev);
    border: 1px solid var(--wp--preset--color--line);
    padding: 0.05em 0.4em;
    font-family: var(--font-mono);
    font-size: 0.9em;
    border-radius: 0;
}

/* Inline text links inside body — scoped to text-bearing elements so it
   doesn't bleed into block-level link wrappers like buttons or image links
   (where it would override their own color and make text invisible). */
.entry-content :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, cite, td, th, dt, dd, summary) a:not(.wp-element-button):not(.wp-block-button__link) {
    color: var(--wp--preset--color--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
    transition: border-color 200ms ease, color 200ms ease;
}
.entry-content :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, cite, td, th, dt, dd, summary) a:not(.wp-element-button):not(.wp-block-button__link):hover {
    color: var(--wp--preset--color--accent-strong);
    border-bottom-color: var(--wp--preset--color--accent);
}

/* =================================================================
 *  Images, figures, featured image, gallery
 * ================================================================= */

/* All figures: vertical rhythm + reset img defaults */
.entry-content figure,
.wp-block-post-featured-image {
    margin: 2.5em 0;
}
.entry-content figure img,
.wp-block-image img,
.wp-block-post-featured-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0;
}

/* Featured image — magazine-style hero opener.
   Sits ABOVE the post title in templates. 16:9 ratio enforced at the CSS
   level so different source images don't cause layout jumps; the block
   already declares aspectRatio "16/9" but this is the safety net. */
.wp-block-post-featured-image {
    margin-block: 0 var(--wp--preset--spacing--48);
}
.wp-block-post-featured-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}
/* Allow per-post override: editor users who set a different aspectRatio
   (or "original") on the block will inject inline aspect-ratio + object-fit
   that wins over our default thanks to specificity. */

/* Linked image: subtle hairline underline-style affordance, no scale/transform */
.wp-block-image a {
    display: block;
    border-bottom: 0;
    transition: opacity 200ms ease;
}
.wp-block-image a:hover { opacity: 0.85; }

/* Figcaption — left-aligned newspaper-style cutline.
   Indented just slightly to read as a deliberate annotation, not body text. */
.entry-content figcaption,
.wp-element-caption,
figcaption {
    color: var(--wp--preset--color--text-muted);
    font-size: var(--wp--preset--font-size--xs);
    text-align: left;
    letter-spacing: var(--ls-normal);
    margin-top: 0.7rem;
    line-height: 1.55;
    font-style: italic;
    padding-left: 0.1rem;
    border-left: 2px solid var(--wp--preset--color--mark);
    padding-inline-start: 0.6rem;
}

/* Wide / full alignment fine-tuning inside post-content */
.entry-content .alignwide { margin-block: 2.5em; }
.entry-content .alignfull { margin-block: 3em; }

/* oEmbed fallbacks (core/embed). When the embed provider's iframe is
   missing or still resolving, WordPress renders the bare permalink as
   plain text inside .wp-block-embed__wrapper. Long URLs have no
   word-break opportunities and overflow the column, pushing the page
   wider than the viewport. Force any character to be a break point —
   harmless for the iframe case (the iframe has its own intrinsic
   width and isn't a text node).
   NB: do NOT add `max-width: 100%` here. WP's constrained-layout rule
   uses `:where()` (specificity 0), so any specificity-1 selector on
   .wp-block-embed wins and bumps the figure to fill alignfull
   entry-content — which on a 2k+ viewport is several thousand px wide. */
.wp-block-embed,
.wp-block-embed__wrapper {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Caption inside an alignfull figure: the cutline-style left bar is meant
   for column-width images. Under a full-bleed image it would stretch a
   single line across the entire viewport and pin to the left edge — both
   bad for readability. Constrain the caption back to the reading column
   and drop the bar so it reads as a centered cutline below the bleed. */
.entry-content .alignfull > figcaption,
.entry-content figure.alignfull figcaption {
    max-width: var(--wp--style--global--content-size, 680px);
    margin-left: auto;
    margin-right: auto;
    padding-inline: var(--wp--preset--spacing--16);
    text-align: center;
    border-left: 0;
    padding-inline-start: var(--wp--preset--spacing--16);
}

/* Gallery — uniform grid (overrides WP default flex layout) so tiles always
   line up cleanly regardless of source image ratio. Newspaper convention:
   small hairline gap between tiles, no rounded corners, captions inline. */
.wp-block-gallery.has-nested-images {
    display: grid !important;
    grid-template-columns: repeat(var(--proof-gallery-cols, 3), minmax(0, 1fr));
    gap: var(--wp--preset--spacing--12);
    margin: 2.5em 0;
}
.wp-block-gallery.has-nested-images.columns-1 { --proof-gallery-cols: 1; }
.wp-block-gallery.has-nested-images.columns-2 { --proof-gallery-cols: 2; }
.wp-block-gallery.has-nested-images.columns-3 { --proof-gallery-cols: 3; }
.wp-block-gallery.has-nested-images.columns-4 { --proof-gallery-cols: 4; }
.wp-block-gallery.has-nested-images.columns-5 { --proof-gallery-cols: 5; }
.wp-block-gallery.has-nested-images.columns-6 { --proof-gallery-cols: 6; }
.wp-block-gallery.has-nested-images.columns-7 { --proof-gallery-cols: 7; }
.wp-block-gallery.has-nested-images.columns-8 { --proof-gallery-cols: 8; }

.wp-block-gallery.has-nested-images figure.wp-block-image {
    margin: 0;
    width: 100% !important;
    flex: none !important;
}
.wp-block-gallery.has-nested-images figure.wp-block-image > a,
.wp-block-gallery.has-nested-images figure.wp-block-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    display: block;
}
.wp-block-gallery.has-nested-images figure.wp-block-image > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    margin-top: 0.4rem;
    padding-inline-start: 0;
    border-left: 0;
    font-size: var(--wp--preset--font-size--xs);
    text-align: left;
    color: var(--wp--preset--color--text-muted);
}

/* Mobile: collapse to 1-2 columns for legibility */
@media (max-width: 720px) {
    .wp-block-gallery.has-nested-images {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wp-block-gallery.has-nested-images.columns-1 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Cover block — for hero-style images with overlay */
.wp-block-cover {
    border-radius: 0;
    margin-block: 2.5em;
}
.wp-block-cover.alignfull { margin-block: 3em; }

/* Blockquotes */
blockquote,
.wp-block-quote {
    border-left: 1px solid var(--wp--preset--color--line);
    padding-left: var(--wp--preset--spacing--24);
    color: var(--wp--preset--color--text-secondary);
    font-style: italic;
    margin: 2em 0;
}
blockquote cite,
.wp-block-quote cite {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
    color: var(--wp--preset--color--text-muted);
    font-size: var(--wp--preset--font-size--sm);
    letter-spacing: var(--ls-wide);
}

/* Pull-quote (with leading 12px hairline) */
.wp-block-pullquote {
    border: 0;
    background: transparent;
    padding: var(--wp--preset--spacing--32) 0 var(--wp--preset--spacing--32) var(--wp--preset--spacing--24);
    margin: 3em 0;
    position: relative;
    color: var(--wp--preset--color--text-secondary);
    font-style: italic;
    line-height: 1.4;
}
.wp-block-pullquote::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--wp--preset--spacing--32) + 0.7em);
    width: 12px;
    height: 1px;
    background: var(--wp--preset--color--mark);
}
.wp-block-pullquote blockquote { border: 0; padding: 0; margin: 0; }
.wp-block-pullquote cite {
    display: block;
    margin-top: 0.8rem;
    font-style: normal;
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: var(--ls-wide);
    color: var(--wp--preset--color--text-muted);
}

/* Code & preformatted */
.wp-block-code,
.wp-block-preformatted,
pre {
    background: var(--wp--preset--color--bg-elev);
    border: 1px solid var(--wp--preset--color--line);
    border-radius: 0;
    padding: 1rem 1.25rem;
    color: var(--wp--preset--color--text-primary);
    font-family: var(--font-mono);
    font-size: var(--wp--preset--font-size--sm);
    overflow-x: auto;
    margin: 2em 0;
    position: relative;
}
/* Toolbar in the top-right corner of every code block — a flex row that
   pairs the detected language label with the copy-to-clipboard icon
   button. Built by proof.js after hljs runs so empty / undetected blocks
   stay clean. The label and the icon share one container so spacing is
   intrinsic, not maintained as a magic right-offset constant. */
.proof-code-toolbar {
    position: absolute;
    top: 0.35rem;
    right: 0.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1;
    user-select: none;
    pointer-events: none; /* re-enabled on the button only */
}
.proof-code-lang {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: var(--ls-wide);
    color: var(--wp--preset--color--text-muted);
    opacity: 0.55;
    text-transform: lowercase;
}
.proof-code-copy {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 1px solid var(--wp--preset--color--line);
    border-radius: 0;
    color: var(--wp--preset--color--text-muted);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.proof-code-copy svg {
    display: block;
}
.wp-block-code:hover .proof-code-copy,
pre:hover .proof-code-copy,
.proof-code-copy:focus-visible {
    opacity: 1;
}
.proof-code-copy:hover {
    color: var(--wp--preset--color--text-primary);
    border-color: var(--wp--preset--color--text-primary);
}
.proof-code-copy.is-copied {
    color: var(--wp--preset--color--text-primary);
    border-color: var(--wp--preset--color--text-primary);
    opacity: 1;
}
.wp-block-code code,
pre code {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* highlight.js — restrained palette built from existing theme tokens.
   Three voices only: muted/italic for comments, bold for structure
   (keywords, names, titles), accent for literals (strings, numbers,
   attributes). Diff add/del use a tinted line gutter, no bg blocks. */
.hljs { background: transparent; color: inherit; padding: 0; }
.hljs-comment,
.hljs-quote {
    color: var(--wp--preset--color--text-muted);
    font-style: italic;
    opacity: 0.85;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-doctag,
.hljs-tag,
.hljs-name,
.hljs-section,
.hljs-title,
.hljs-title.class_,
.hljs-title.function_,
.hljs-strong {
    font-weight: 700;
    color: var(--wp--preset--color--text-primary);
}
.hljs-string,
.hljs-attr,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-regexp,
.hljs-meta-string {
    color: var(--wp--preset--color--accent);
}
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-type {
    color: var(--wp--preset--color--text-primary);
    font-weight: 600;
}
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-params,
.hljs-punctuation,
.hljs-operator {
    color: var(--wp--preset--color--text-muted);
}
.hljs-emphasis { font-style: italic; }
.hljs-link { text-decoration: underline; text-underline-offset: 2px; }
.hljs-formula,
.hljs-code {
    background: transparent;
    color: inherit;
}
/* diff: line gutter rather than full-row background */
.hljs-addition,
.hljs-deletion {
    display: inline-block;
    width: 100%;
    padding-left: 0.5rem;
    margin-left: -0.5rem;
    border-left: 2px solid transparent;
}
.hljs-addition {
    border-left-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--text-primary);
}
.hljs-deletion {
    border-left-color: var(--wp--preset--color--line);
    color: var(--wp--preset--color--text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Tables — covers both <figure class="wp-block-table"><table></figure>
   and plain <table> markup. All borders/backgrounds use the theme's
   line/bg-elev tokens so dark mode adapts automatically. */
.wp-block-table,
.entry-content > table {
    margin: 2em 0;
    font-size: var(--wp--preset--font-size--sm);
    overflow-x: auto;
}
.wp-block-table table,
.entry-content > table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--wp--preset--color--line);
    background: transparent;
}
.wp-block-table th,
.wp-block-table td,
.entry-content table th,
.entry-content table td {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--wp--preset--color--line);
    text-align: left;
    vertical-align: top;
    background: transparent;
    color: var(--wp--preset--color--text-primary);
}
/* Kill WP core's default thead border-bottom: 3px solid currentColor —
   it overrides our cell borders and looks heavy. Also normalize tfoot. */
.wp-block-table thead,
.wp-block-table tfoot,
.entry-content table thead,
.entry-content table tfoot {
    border: 0;
}
.wp-block-table thead th,
.entry-content table thead th {
    background: var(--wp--preset--color--bg-elev);
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--xs);
}
/* Default striping for plain tables and any wp-block-table without a style variant */
.entry-content table tbody tr:nth-child(even) > td,
.entry-content table tbody tr:nth-child(even) > th {
    background: color-mix(in srgb, var(--wp--preset--color--bg-elev) 60%, transparent);
}
/* WP "Stripes" block style — overrides several WP core defaults that
   leak hardcoded colors:
     - .wp-block-table.is-style-stripes { border-bottom: 1px solid #f0f0f0 }
     - tr:nth-child(odd)               { background-color: #f0f0f0 }
   Replace them all with theme tokens so dark mode adapts. */
.wp-block-table.is-style-stripes {
    border-bottom: 0;
}
.wp-block-table.is-style-stripes table {
    border-collapse: inherit;
    border: 0;
}
.wp-block-table.is-style-stripes th,
.wp-block-table.is-style-stripes td {
    border: 0;
    background: transparent;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd),
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) > td,
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) > th {
    background: var(--wp--preset--color--bg-elev);
}
.wp-block-table.is-style-stripes tbody tr:nth-child(even),
.wp-block-table.is-style-stripes tbody tr:nth-child(even) > td,
.wp-block-table.is-style-stripes tbody tr:nth-child(even) > th {
    background: transparent;
}
/* Table caption — centered, no left bar (the bar is for image cutlines). */
.wp-block-table figcaption,
.entry-content table caption {
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--text-muted);
    letter-spacing: var(--ls-wide);
    margin-top: 0.5rem;
    text-align: center;
    border-left: 0;
    padding-inline: 0;
    font-style: normal;
}

/* Lists */
.entry-content ul,
.entry-content ol {
    padding-left: 1.4rem;
    margin: 1.5em 0;
}
.entry-content li { margin-bottom: 0.4em; }
.entry-content li::marker { color: var(--wp--preset--color--text-muted); }

/* HR / separator */
.wp-block-separator {
    border: 0;
    color: var(--wp--preset--color--mark);
    text-align: center;
    overflow: visible;
    margin: var(--wp--preset--spacing--48) 0;
}
.wp-block-separator:not(.is-style-proof-hairline)::before {
    content: "·  ·  ·";
    letter-spacing: 0.5em;
    color: var(--wp--preset--color--mark);
    font-size: var(--wp--preset--font-size--md);
}
.wp-block-separator.is-style-proof-hairline {
    height: 1px;
    background: var(--wp--preset--color--line);
    max-width: 4rem;
    margin-left: auto;
    margin-right: auto;
}
.wp-block-separator.is-style-proof-hairline::before { content: none; }