/* Global Page Styling */
:root {
    --primary-purple: #4a2c58;
    /* Deep elegant purple */
    --soft-lavender: #f4f0f6;
    /* Very subtle background tint */
    --hover-lavender: #eaddf0;
    /* Interaction hover */
    --text-dark: #2c2c2c;
    --text-meta: #5a5060;
}

body {
    background-color: var(--soft-lavender);
    color: var(--text-dark);
    font-family: 'Georgia', 'Times New Roman', serif;
    line-height: 1.8;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* Main Content Container */
.container {
    max-width: 700px;
    margin: 40px auto;
    padding: 60px 50px;
    background-color: #ffffff;
    box-shadow: 0 10px 40px rgba(74, 44, 88, 0.08);
    /* Subtle purple-tinted shadow */
    border-radius: 8px;
    border-top: 4px solid var(--primary-purple);
    /* Elegant purple accent on top */
}

/* Typography - Title */
h1 {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--primary-purple);
    /* The key color accent */
    letter-spacing: -0.5px;
}

/* Typography - Mantra / Epigraph */
.mantra {
    font-style: italic;
    text-align: center;
    margin: 0 auto 2rem auto;
    width: 90%;
    color: var(--text-meta);
    font-size: 1rem;
    line-height: 1.4;
    position: relative;
    padding-bottom: 0.5rem;
    /* Space after mantra block */
}

/* Specific styling for paragraphs inside mantra to override generic p styles */
.mantra p {
    margin-bottom: 0.2rem;
    /* Reduced significantly from 0.5rem */
    text-align: center;
    /* Ensure centered text */
    color: #2e2433;
    /* Darker, deep purple-black shade */
}

/* Typography - Body Text */
p {
    font-size: 1.2rem;
    text-align: justify;
    hyphens: auto;
    margin-bottom: 1.5rem;
    text-indent: 0;
    color: #333;
}

/* Interactive/UX Polish */
::selection {
    background: var(--hover-lavender);
    color: var(--primary-purple);
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    body {
        background-color: #ffffff;
    }

    .container {
        box-shadow: none;
        padding: 24px 20px;
        margin: 0;
        max-width: 100%;
        border-top: none;
    }

    h1 {
        font-size: 1.8rem;
        color: var(--primary-purple);
    }

    p {
        font-size: 1.15rem;
        /* Slightly larger for easier mobile reading */
        line-height: 1.65;
        text-align: left;
        /* Often better for mobile than justify */
    }
}