*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-body: 'Source Serif 4', Georgia, serif;
}

html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.8; }

.page { min-height: 100vh; display: flex; flex-direction: column; padding: 3rem 2rem; max-width: 600px; margin: 0 auto; position: relative; }

.container { flex: 1; padding-top: 3rem; }

.masthead { text-align: center; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 3px solid var(--text); }
h1 { font-family: var(--font-serif); font-size: 3.5rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.tagline { color: var(--muted); font-size: 0.9rem; font-style: italic; font-weight: 300; letter-spacing: 0.05em; }

hr { border: none; border-top: 1px solid var(--border); margin-bottom: 2rem; }

.content { color: var(--muted); font-size: 0.95rem; font-weight: 300; }
.content p { margin-bottom: 0.75rem; }
.content em { color: var(--text); font-style: italic; }

footer { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--muted); text-align: center; font-family: var(--font-body); }

.note { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.75rem; font-weight: 300; font-style: italic; }
.back-link { display: inline-block; font-size: 0.8rem; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 1px; transition: color 0.2s, border-color 0.2s; }
.back-link:hover { color: var(--text); border-color: var(--text); }