/* Extra rules for blog, projects and about pages. Variables only, no hard-coded colours. */
.page-head { padding: clamp(56px, 10vw, 120px) 0 clamp(24px, 4vw, 48px); }
.page-head .lead { margin-bottom: 0; }
.card h2 { font-size: 24px; letter-spacing: -0.02em; margin: 0; overflow-wrap: anywhere; }
.pager a { padding: 8px 18px; border-radius: 999px; background: var(--card); color: var(--fg); font-weight: 500; border: 1px solid var(--line); }
.pager a:hover { text-decoration: none; background: var(--bg); }
.article-head h1 { font-size: clamp(34px, 6vw, 60px); overflow-wrap: anywhere; }
.article-head .pill { margin-bottom: 18px; }
.article-head .back { display: inline-block; margin-bottom: 20px; }
.article-body { padding-bottom: clamp(40px, 6vw, 72px); overflow-wrap: break-word; }
.article-body .prose { min-width: 0; }
.article-end { text-align: center; }
.article-end h2, .built h2 { font-size: clamp(26px, 4vw, 36px); }
.stack { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.stack .pill { font-size: 14px; padding: 8px 16px; background: var(--card); color: var(--fg); border: 1px solid var(--line); box-shadow: var(--shadow); }
.about-hero h1 { font-size: clamp(44px, 9vw, 96px); }
.list-section { padding-top: clamp(32px, 5vw, 56px); }
.built { text-align: center; }