/* Writings page — v3 warm-modern */
.nav-active { color: var(--peri) !important; }
.nav-active::after { width: 100% !important; }

.writings-hero {
    padding: calc(var(--nav-h) + 3rem) 1.5rem 2.5rem;
    text-align: center; background: var(--bg);
}
.writings-hero-title {
    font-family: var(--serif); font-size: clamp(2.2rem, 5.5vw, 4rem);
    font-weight: 400; color: var(--ink); margin-top: 0.75rem;
}

.writings-toc {
    position: sticky; top: var(--nav-h); z-index: 100;
    display: flex; justify-content: center; gap: clamp(0.75rem, 2.5vw, 2rem);
    padding: 0.85rem 1.5rem;
    background: rgba(253,250,243,0.92); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(123,120,232,0.08);
}
.toc-link {
    font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-mid); opacity: 0.7; transition: all 0.25s; white-space: nowrap; position: relative;
}
.toc-link::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1.5px; background: var(--peri); transition: width 0.3s var(--ease); }
.toc-link:hover, .toc-link.active { color: var(--ink); opacity: 1; }
.toc-link.active::after { width: 100%; }

.toc-sep { width: 1px; height: 14px; background: var(--peri-soft); align-self: center; }
.toc-external { color: var(--peri) !important; opacity: 0.85; }
.toc-external:hover { opacity: 1; }

.writings-main { max-width: 640px; margin: 0 auto; padding: clamp(2.5rem, 5vh, 4rem) clamp(1.25rem, 3vw, 2rem); }

.writing { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.writing.visible { opacity: 1; transform: translateY(0); }

.writing-header { margin-bottom: 1.5rem; }
.writing-header h2 { font-family: var(--serif); font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 400; color: var(--ink); margin-bottom: 0.35rem; }
.writing-header time { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--peri); }

.writing-body p { font-size: 1rem; color: var(--text); line-height: 2; margin-bottom: 1.25rem; }
.writing-body p:last-child { margin-bottom: 0; }

.writing-quotes blockquote { margin: 0 0 2rem; padding: 0 0 0 1.25rem; border-left: 2.5px solid var(--peri-soft); }
.writing-quotes blockquote:last-child { margin-bottom: 0; }
.writing-quotes blockquote p { font-family: var(--serif); font-size: 1.08rem; font-style: italic; color: var(--ink); line-height: 1.85; margin-bottom: 0.35rem; }
.writing-quotes blockquote cite { display: block; font-size: 0.76rem; font-style: normal; color: var(--mauve); margin-top: 0.5rem; }

.poem { margin: 0; padding: 0 0 0 1.25rem; border-left: 2.5px solid var(--orchid-soft); }
.poem p { font-family: var(--serif) !important; font-size: 1.12rem !important; font-style: italic; line-height: 2 !important; }
.poem cite { display: block; font-size: 0.76rem; font-style: normal; color: var(--mauve); margin-top: 0.5rem; }

.writing-divider { display: flex; justify-content: center; padding: clamp(2rem, 4vh, 3rem) 0; opacity: 0; transition: opacity 0.5s; }
.writing-divider.visible { opacity: 1; }
.writing-divider span { display: block; width: 32px; height: 2px; background: linear-gradient(90deg, transparent, var(--peri-soft), transparent); }

.writings-back { text-align: center; padding: 0 1.5rem 2.5rem; }
.writings-back a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mid); transition: color 0.25s; }
.writings-back a:hover { color: var(--peri); }
.writings-back svg { transition: transform 0.25s var(--ease); }
.writings-back a:hover svg { transform: translateX(-3px); }

@media (max-width: 768px) {
    .writings-toc { gap: 0.5rem; padding: 0.65rem 0.75rem; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
    .writings-toc::-webkit-scrollbar { display: none; }
    .writing-body p { font-size: 0.94rem; line-height: 1.85; }
}