/* Writing section: listing hub + essay article typography.
   Loaded only by /writing/ pages, in addition to modern.css. */

/* --- Hub listing --- */
.writing-hub { max-width: 760px; margin: 0 auto; padding: var(--space-24) var(--space-6) var(--space-16); }
.writing-hub-header { margin-bottom: var(--space-12); }
.writing-hub-header h1 { font-family: var(--font-display); font-size: var(--font-size-5xl); margin-bottom: var(--space-4); }
.writing-hub-lead { font-size: var(--font-size-lg); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
.writing-list { list-style: none; }
.writing-entry { padding: var(--space-8) 0; border-top: 1px solid var(--color-border); }
.writing-entry:last-child { border-bottom: 1px solid var(--color-border); }
.writing-entry-date { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent-text); margin-bottom: var(--space-2); }
.writing-entry h2 { font-family: var(--font-display); font-size: var(--font-size-2xl); margin-bottom: var(--space-2); }
.writing-entry h2 a { color: var(--color-text-primary); }
.writing-entry h2 a:hover { color: var(--color-accent-text); }
.writing-entry-summary { color: var(--color-text-secondary); line-height: var(--line-height-relaxed); margin: 0; }

/* --- Essay article --- */
.article { max-width: 680px; margin: 0 auto; padding: var(--space-24) var(--space-6) var(--space-16); }
.article-back { display: inline-block; font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-8); }
.article-header { margin-bottom: var(--space-10); }
.article-header h1 { font-family: var(--font-display); font-size: var(--font-size-5xl); line-height: var(--line-height-tight); margin-bottom: var(--space-4); }
.article-meta { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent-text); }
.article-origin { font-size: var(--font-size-sm); color: var(--color-text-tertiary); margin-top: var(--space-3); }
.article-body { font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); color: var(--color-text-secondary); }
.article-body p { margin-bottom: var(--space-6); }
.article-body h2 { font-family: var(--font-display); font-size: var(--font-size-3xl); color: var(--color-text-primary); margin: var(--space-12) 0 var(--space-4); }
.article-body h3 { font-family: var(--font-display); font-size: var(--font-size-2xl); color: var(--color-text-primary); margin: var(--space-10) 0 var(--space-3); }
.article-body a { color: var(--color-accent-text); text-decoration: underline; }
.article-body ul, .article-body ol { margin: 0 0 var(--space-6) var(--space-6); }
.article-body li { margin-bottom: var(--space-2); }
.article-body blockquote { border-left: 3px solid var(--color-accent); padding-left: var(--space-6); margin: var(--space-8) 0; font-style: italic; color: var(--color-text-primary); }
.article-body strong { color: var(--color-text-primary); }
.article-footer { margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); font-size: var(--font-size-sm); }