* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
.page { flex: 1; max-width: 600px; width: 100%; margin: 0 auto; padding: 48px 16px 60px; }
/* Auth-gated: hidden until contact.js confirms the visitor is logged in, then revealed. */
#page { display: none; }
#page.ready { display: block; }

.contact-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 32px 28px; }
.contact-card h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 16px; }
.intro { color: var(--muted); font-size: 0.9rem; margin-bottom: 16px; line-height: 1.5; }
.email-link { display: inline-block; color: #a970ff; font-size: 1.05rem; font-weight: 600; text-decoration: none; word-break: break-all; }
.email-link:hover { text-decoration: underline; }
.note { color: var(--muted); font-size: 0.82rem; margin-top: 20px; line-height: 1.5; }