/* Sub-pages (project overviews) — builds on styles.css variables */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.site-header .logo { font-size: 1.3rem; }
.nav { display: flex; gap: 0.3rem; }
.nav a { padding: 0.4rem 0.8rem; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.nav a:hover { background: var(--paper-2); color: var(--ink); }
.section { padding: 64px 0 96px; }
.narrow { max-width: 760px; }
.eyebrow { font-family: var(--mono); font-size: 0.85rem; color: var(--clay); letter-spacing: 0.04em; }
.narrow h1 { font-family: var(--display); font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.05; margin: 0.4rem 0 0.8rem; letter-spacing: -0.02em; }
.lead { font-size: 1.25rem; color: var(--ink-2); margin-bottom: 2rem; }
.narrow h2 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; margin: 2.2rem 0 0.7rem; padding-top: 1.2rem; border-top: 1px dashed var(--line); }
.narrow p { color: var(--ink-2); margin-bottom: 1rem; }
.about-list { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; }
.about-list li { position: relative; padding-left: 1.6rem; color: var(--ink-2); }
.about-list li::before { content: ""; position: absolute; left: 0.2rem; top: 0.65em; width: 8px; height: 8px; border-radius: 2px; background: var(--forest); transform: rotate(45deg); }
.narrow .btn { margin-top: 1.5rem; }