/* Long-form writing uses the shared ink, surface, type, and gutter tokens. */
:root {
    --essay-width: 44rem;
    --essay-space-xs: 0.5rem;
    --essay-space-sm: 1rem;
    --essay-space-md: 1.5rem;
    --essay-space-lg: 2rem;
    --essay-space-xl: clamp(3rem, 7vw, 5rem);
    --essay-space-end: clamp(5rem, 10vw, 8rem);
}

.essay-shell {
    width: 100%;
    max-width: calc(var(--essay-width) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-bottom: var(--essay-space-end);
}

.essay-toolbar,
.essay-languages,
.essay-byline,
.essay-end {
    display: flex;
    align-items: center;
    gap: var(--essay-space-sm);
}

.essay-toolbar {
    flex-wrap: wrap;
    justify-content: space-between;
    padding-block: var(--essay-space-lg);
    color: var(--ink-2);
    font-size: 14px;
}

.essay-languages { gap: var(--essay-space-xs); }
.essay-languages [aria-current="page"] { color: var(--ink); font-weight: 600; }
.essay-toolbar a:hover,
.essay-end a:hover { color: var(--ink); }

.essay-header { padding-block: var(--essay-space-lg) var(--essay-space-xl); }
.essay-header h1 {
    margin-top: var(--essay-space-sm);
    font-size: clamp(30px, 4.7vw, 48px);
    font-weight: 550;
    line-height: 1.12;
    letter-spacing: -0.035em;
    text-wrap: balance;
}
.essay-term { white-space: nowrap; }

.essay-byline {
    flex-wrap: wrap;
    margin-top: var(--essay-space-lg);
    color: var(--ink-2);
    font-size: 14px;
}
.essay-views { display: inline-flex; gap: var(--essay-space-sm); font-variant-numeric: tabular-nums; }
.essay-byline time,
.essay-views { white-space: nowrap; }

.essay-body {
    font-size: clamp(18px, 1.65vw, 20px);
    line-height: 1.8;
    letter-spacing: -0.008em;
    overflow-wrap: break-word;
}

.essay-body p + p { margin-top: var(--essay-space-md); }
.essay-body h2 {
    margin-block: var(--essay-space-xl) var(--essay-space-md);
    font-size: clamp(25px, 3vw, 32px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.025em;
}
.essay-body ul {
    padding-inline-start: 1.3em;
    margin-block: var(--essay-space-md);
    list-style: disc;
}
.essay-body li + li { margin-top: var(--essay-space-sm); }
.essay-body li { padding-inline-start: 0.2em; }
.essay-body strong { font-weight: 600; }
.essay-body a,
.essay-byline a {
    text-decoration: underline;
    text-decoration-color: var(--line-2);
    text-underline-offset: 0.18em;
}
.essay-body a:hover,
.essay-byline a:hover { text-decoration-color: var(--ink); }
.essay-body sup { font-size: 0.72em; line-height: 0; }
.essay-body hr {
    border: 0;
    border-top: 1px solid var(--line-2);
    margin-block: var(--essay-space-xl) var(--essay-space-lg);
}
.essay-body .essay-writing-note { color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.essay-end {
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: var(--essay-space-xl);
    color: var(--ink-2);
    font-size: 14px;
}

:lang(zh-Hans) .essay-header h1 { line-height: 1.3; letter-spacing: -0.025em; }
:lang(zh-Hans) .essay-body { line-height: 1.95; letter-spacing: 0; }

@media print {
    .site-header, .site-footer, .essay-toolbar, .essay-end { display: none; }
    .essay-shell { max-width: none; padding: 0; }
    .essay-header { padding-top: 0; }
    .essay-body { font-size: 12pt; }
}