:root {
    /* Colors - Earth Tones */
    --laterite: #A65D4E;
    --compacted-earth: #D4C4B0;
    --charred-wood: #2D2A26;
    --limestone: #E8E4DD;
    --iron-oxide: #8B4A3D;
    --monsoon-grey: #6B6B68;

    /* Semantic Colors */
    --bg: var(--limestone);
    --text-primary: var(--charred-wood);
    --text-secondary: var(--monsoon-grey);
    --accent: var(--laterite);

    /* Fonts - System Stack */
    --font-sans: system-ui, -apple-system, sans-serif;
    --font-serif: Georgia, 'Times New Roman', serif;
    --font-mono: 'Courier New', monospace;

    /* Spacing */
    --content-max: 720px;
    --margin-desktop: 80px;
    --margin-mobile: 24px;
}

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

html {
    font-size: 18px;
    line-height: 1.6;
}

body {
    font-family: var(--font-serif);
    background-color: var(--bg);
    color: var(--text-primary);
    padding: 0 var(--margin-desktop);
}

main {
    max-width: var(--content-max);
    margin: 0 auto;
}

/* Hero Section */
.hero {
    padding-top: 120px;
    padding-bottom: 80px;
    text-align: center;
}

h1 {
    font-family: var(--font-serif);
    font-size: 48px;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.tagline {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--text-secondary);
}

/* Sections */
.pillars {
    display: grid;
    gap: 32px;
    margin-bottom: 80px;
}

.pillar h2 {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.pillar p {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
}

.pillar p a {
    color: var(--accent);
    text-decoration: underline;
}

.pillar p a:hover {
    color: var(--iron-oxide);
    text-decoration-thickness: 2px;
}

.pillar p a:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}



/* Footer */
footer {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 40px 0;
    border-top: 1px solid var(--compacted-earth);
}

.footer-links {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.footer-links a {
    color: var(--accent);
    text-decoration: underline;
    margin-right: 24px;
}

.footer-links a:hover {
    color: var(--iron-oxide);
    text-decoration-thickness: 2px;
}

.copyright {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 767px) {
    body {
        padding: 0 var(--margin-mobile);
    }

    .hero {
        padding-top: 80px;
        padding-bottom: 60px;
    }

    h1 {
        font-size: 32px;
    }

    .tagline {
        font-size: 18px;
    }



    .newsletter-form {
        flex-direction: column;
    }
}