:root {
    --brand-accent: #0774e0;
    --text-color: #111;
    /* Updated font stack to guarantee Georgia or another serif is found */
    --font-serif: Georgia, "Times New Roman", Times, serif;
    --font-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

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

html {
    scrollbar-gutter: stable;
    padding: 20px 20px;        /* Creates guaranteed outer breathing room on mobile */
}

/* Base Body Setup */
body {
    font-family: var(--font-serif);
    line-height: 1.35;
    color: var(--text-color);
    background-color: #fff;

    /* Responsive sizing instead of fixed width */
    width: 90%;             /* Fills 90% of screen width on small displays */
    max-width: 420px;       /* Caps width at 420px on desktops */
    margin: 20px auto;      /* Centers card horizontally on all screens */

    border: 1px solid var(--brand-accent);
    padding: 18px 22px;
}

/* 2. Mobile Responsive Adjustments (Screens 480px and under) */
@media (max-width: 480px) {
    body {
        width: 94%;         /* Expands card slightly on phones for better text area */
        margin: 12px auto;  /* Reduces top/bottom outer margins */
        padding: 14px 16px; /* Tighter inner padding so text doesn't feel cramped */
    }

    h1 {
        font-size: 1.75rem; /* Scales heading down slightly to prevent multi-line wraps */
        margin-bottom: 10px;
    }

    p, li {
        font-size: 0.95rem; /* Slightly smaller body text for small screens */
    }

    hr {
        margin: 10px 0;     /* Reduces vertical spacing around dividers */
    }
}

/* Force Paragraphs into Italic Georgia */
p {
    font-family: var(--font-serif);
    font-style: italic !important; /* Forces italic Georgia on all body text */
    font-size: 1.05rem;
    margin-top: 0;
    margin-bottom: 10px;
}

/* Headings: Clean Bold Sans-Serif */
h1 {
    font-family: var(--font-sans);
    font-size: 2.4rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

/* Links: Upright Bold Sans-Serif */
a {
    font-family: var(--font-sans);
    font-weight: 700;
    font-style: normal; /* Keeps link titles straight and upright */
    color: var(--brand-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.4s ease;
    margin: 14px 0;
}

a:hover {
    border-color: var(--brand-accent);
}

hr {
    border: none;                             /* Removes browser default 3D bevel */
    height: 1px;                              /* Sets line thickness */
    background-color: var(--brand-accent);    /* Sets the line color */
}

ul {
    list-style-type: disc;
    margin-top: 6px;
    margin-bottom: 10px;
}

/* Names List: Upright Bold Sans-Serif */
li {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 1rem;
    margin-bottom: 3px;

}