/* ===========================================
   Anzaran — chrome for the standalone pages
   (about, license, privacy, terms): the same
   wordmark nav, typography and footer on each.
   =========================================== */

:root {
    --bg: #ffffff;
    --text: #0f0f0f;
    --text-secondary: #666666;
    --border: #e5e5e5;
    --accent: #0066ff;
    --accent-hover: #0052cc;
    --surface: #fafafa;
    --ok: #0a7d33;
    --bad: #b3261e;
}

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

body {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
}

.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.wordmark {
    font-family: 'ivyora-display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

nav .links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 20px; }
nav .links a { color: var(--text-secondary); text-decoration: none; font-size: 0.95rem; }
nav .links a:hover { color: var(--accent); }

h1 { font-family: 'ivyora-display', Georgia, serif; font-size: 2.4rem; margin: 48px 0 8px; }
h2 { font-family: 'ivyora-display', Georgia, serif; font-size: 1.6rem; margin: 40px 0 12px; }
p { max-width: 720px; }
p + p { margin-top: 12px; }
a { color: var(--accent); }
p.lede { color: var(--text-secondary); max-width: 640px; }
.note { color: var(--text-secondary); font-size: 0.85rem; }
ul.plain { margin: 12px 0 12px 20px; max-width: 720px; }
ul.plain li { margin-bottom: 8px; }

footer {
    border-top: 1px solid var(--border);
    margin-top: 48px;
    padding: 24px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
footer a { color: var(--text-secondary); }
footer span:last-child { display: flex; flex-wrap: wrap; gap: 0 14px; }

@media (max-width: 768px) {
    .container { padding: 0 20px; }
    h1 { font-size: 1.9rem; }

    /* Comfortable targets: 44px tall, spaced enough to hit one at a time. */
    nav { flex-wrap: wrap; padding: 8px 0; }
    nav .links { gap: 0 4px; }
    nav .links a,
    footer a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 8px;
        font-size: 0.95rem;
    }

    .wordmark { display: inline-flex; align-items: center; min-height: 44px; }

    footer span:last-child { gap: 0 4px; }

    /* 16px stops iOS zooming the page when the field takes focus. */
    input, select, textarea, button { font-size: 16px; }
}