{{ include 'partials/head' }}

{{~ # ============ 页面头 ============ ~}}
<section style="border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);">
    <div class="max-w-4xl mx-auto px-6 py-10">
        <h1 class="font-bold" style="font-size: 36px; line-height: 1.15; letter-spacing: -0.015em; color: var(--color-ink);">{{ page.Title }}</h1>
        {{ if page.Summary }}
        <p class="mt-3 ed-lede text-base" style="line-height: 1.7;">{{ page.Summary }}</p>
        {{ end }}
    </div>
</section>

{{~ # ============ 正文（杂志排版） ============ ~}}
<style>
.page-content { color: var(--color-ink); line-height: 2; font-size: 17px; }
.page-content > *:first-child { margin-top: 0; }
.page-content > *:last-child { margin-bottom: 0; }
.page-content h1 { font-size: 1.75rem; font-weight: 700; margin: 2.5rem 0 1rem; line-height: 1.25; color: var(--color-ink); }
.page-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 0.875rem; line-height: 1.3; color: var(--color-ink); }
.page-content h3 { font-size: 1.25rem; font-weight: 600; margin: 1.75rem 0 0.75rem; line-height: 1.35; color: var(--color-ink); }
.page-content h4 { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; color: var(--color-ink); }
.page-content p { margin: 1rem 0; }
.page-content ul, .page-content ol { margin: 1rem 0; padding-left: 1.5rem; }
.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content li { margin: 0.5rem 0; }
.page-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.page-content a:hover { text-decoration-thickness: 2px; }
.page-content strong, .page-content b { font-weight: 700; }
.page-content em, .page-content i { font-style: italic; }
.page-content blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--color-primary); background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)); color: color-mix(in srgb, var(--color-ink) 85%, transparent); font-style: italic; }
.page-content blockquote p { margin: 0.5rem 0; }
.page-content code { background: color-mix(in srgb, var(--color-ink) 6%, var(--color-surface)); color: var(--color-ink); padding: 0.125rem 0.375rem; border-radius: 2px; font-size: 0.9em; font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; }
.page-content pre { background: #1c1917; color: #e7e5e4; padding: 1.25rem; border-radius: var(--radius-base); overflow-x: auto; margin: 1.5rem 0; font-size: 0.9em; line-height: 1.6; }
.page-content pre code { background: transparent; color: inherit; padding: 0; }
.page-content img { max-width: 100%; height: auto; margin: 1.5rem 0; display: block; }
.page-content hr { border: none; border-top: 1px solid color-mix(in srgb, var(--color-ink) 15%, transparent); margin: 2.5rem auto; max-width: 8rem; }
.page-content table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: 0.95em; }
.page-content th, .page-content td { border: 1px solid color-mix(in srgb, var(--color-ink) 15%, transparent); padding: 0.6rem 0.75rem; text-align: left; }
.page-content th { background: color-mix(in srgb, var(--color-ink) 4%, var(--color-surface)); font-weight: 600; }
</style>

<main class="flex-1 max-w-4xl mx-auto px-6 py-10 w-full">
    {{ if page.CoverImageUrl }}
    <div class="mb-10">
        <img src="{{ abs_url page.CoverImageUrl }}" alt="{{ page.Title }}" class="w-full">
    </div>
    {{ end }}

    <div class="page-content">
        {{ page.Content }}
    </div>

    <div class="ed-ornament text-center mt-12 text-xs">— · —</div>
</main>

{{ include 'partials/footer' }}