/* === Variables === */
:root {
    --font-family-serif: 'Times New Roman', Times, serif;
    --primary-color: #000000; /* Black */
    --background-color: #ffffff; /* White */
    --border-color: #000000;
    --border-color-subtle: #cccccc; /* A slightly lighter gray for less prominent borders */
    --link-hover-color: #444444; /* A slightly softer dark gray for hover */
    --base-line-height: 1.7; /* Increased slightly for readability */
    --spacing-unit: 20px;
}

/* === Basic Reset === */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === Base Styles === */
body {
    font-family: var(--font-family-serif);
    line-height: var(--base-line-height);
    background-color: var(--background-color);
    color: var(--primary-color);
    padding: var(--spacing-unit); /* Apply base padding here */
    font-size: 16px; /* Explicit base font size */
}

/* === Layout Container === */
/* Optional: Wrap main content areas (header, sections, footer inner content) in a div with class="container" for better control */
.container {
    max-width: 900px; /* Adjust max-width as needed */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
}

/* === Header & Navigation === */
header {
    background-color: var(--background-color);
    color: var(--primary-color);
    padding: calc(var(--spacing-unit) / 2) 0; /* 10px */
    border-bottom: 2px solid var(--border-color);
    margin-bottom: calc(var(--spacing-unit) * 2); /* Add space below header */
}

header nav ul {
    list-style: none;
    display: flex; /* Use flexbox for better alignment */
    justify-content: center; /* Center items horizontally */
    gap: calc(var(--spacing-unit) * 1.5); /* Control space between items (30px) */
    padding: calc(var(--spacing-unit) / 2) 0; /* 10px */
}

header nav ul li {
    display: inline; /* Flexbox handles layout, inline is okay here but not strictly necessary */
}

header nav ul li a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 1.1em; /* Slightly larger nav links */
    padding-bottom: 3px; /* Space for the underline */
    border-bottom: 1px solid transparent; /* Prepare for hover effect */
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

header nav ul li a:hover,
header nav ul li a:focus { /* Add focus state for accessibility */
    color: var(--link-hover-color);
    border-bottom-color: var(--link-hover-color); /* Underline appears on hover */
}

/* === Profile Picture === */
.profile-pic {
    max-width: 150px; /* Use max-width for responsiveness */
    width: 100%; /* Allow it to shrink */
    height: auto;
    border-radius: 50%;
    display: block;
    margin: calc(var(--spacing-unit) * 2) auto; /* 40px margin */
    border: 3px solid var(--border-color);
    object-fit: cover; /* Ensure image covers the area well if not square */
}

/* === Sections === */
section {
    padding: calc(var(--spacing-unit) * 2) 0; /* Vertical padding (40px), horizontal padding handled by .container or body */
    /* text-align: center; */ /* Remove default centering for content */
    margin-bottom: calc(var(--spacing-unit) * 2); /* Space between sections */
    border-bottom: 1px solid var(--border-color-subtle); /* Use subtle border */
}

/* Center headings within sections if desired */
section h1,
section h2,
section h3 {
    text-align: center;
    margin-bottom: var(--spacing-unit);
    letter-spacing: 0.03em; /* Subtle letter spacing for elegance */
}

/* Ensure paragraphs and lists within sections are left-aligned for readability */
section p,
section ul,
section ol {
    text-align: left;
    max-width: 700px; /* Limit line length for readability */
    margin-left: auto;  /* Center the text block */
    margin-right: auto; /* Center the text block */
    margin-bottom: var(--spacing-unit); /* Space below paragraphs/lists */
}

section ul,
section ol {
    padding-left: calc(var(--spacing-unit) * 2); /* Indent lists */
    list-style-position: outside; /* Default list style position */
}

/* Keep original list style for sections if needed */
section ul {
    list-style-type: disc; /* Or 'none' if preferred */
}
section ol {
    list-style-type: decimal;
}

section ul li,
section ol li {
    margin-bottom: calc(var(--spacing-unit) / 2); /* 10px */
}

section:last-of-type {
    border-bottom: none;
    margin-bottom: 0; /* No margin below the last section before footer */
}

/* === Footer === */
footer {
    text-align: center;
    padding: var(--spacing-unit);
    background-color: var(--background-color);
    color: var(--primary-color);
    border-top: 2px solid var(--border-color);
    margin-top: calc(var(--spacing-unit) * 2); /* Space above footer */
    font-size: 0.9em; /* Slightly smaller text in footer */
}

footer p {
    margin: 0;
}

/* === General Link Styling === */
a {
    color: var(--primary-color);
    text-decoration: underline; /* Classic default */
    text-decoration-thickness: 1px; /* Subtle refinement */
    text-underline-offset: 3px; /* Space between text and underline */
    transition: color 0.2s ease-in-out;
}

a:hover,
a:focus { /* Add focus state */
    color: var(--link-hover-color);
    text-decoration: underline; /* Ensure underline stays on hover */
}

/* Override nav link styles specifically */
header nav ul li a {
    text-decoration: none; /* No underline by default in nav */
    border-bottom: 1px solid transparent; /* Use border for hover instead */
}

header nav ul li a:hover,
header nav ul li a:focus {
    text-decoration: none; /* Ensure no default underline appears on hover */
    border-bottom-color: var(--link-hover-color); /* Show border-based underline */
}


/* === Headings === */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.3; /* Slightly tighter line height for headings */
    margin-bottom: var(--spacing-unit); /* Default bottom margin */
    font-weight: normal; /* Times New Roman often looks better non-bold for headings in this style */
}

h1 {
    font-size: 2.5em; /* Example sizes, adjust as needed */
    letter-spacing: 0.05em;
}

h2 {
    font-size: 2em;
    letter-spacing: 0.04em;
}

h3 {
    font-size: 1.5em;
}

/* === Basic Responsiveness === */
@media (max-width: 768px) {
    body {
        font-size: 15px; /* Slightly smaller base font on smaller screens */
        padding: calc(var(--spacing-unit) / 2); /* Reduce body padding */
    }

    .container {
        padding-left: calc(var(--spacing-unit) / 2);
        padding-right: calc(var(--spacing-unit) / 2);
    }

    header nav ul {
        gap: var(--spacing-unit); /* Reduce gap in nav */
        flex-wrap: wrap; /* Allow nav items to wrap */
        padding: calc(var(--spacing-unit) / 2) 0;
    }

    section {
        padding: var(--spacing-unit) 0;
    }

    section p,
    section ul,
    section ol {
        max-width: 100%; /* Allow text to use full width within container */
    }

    h1 { font-size: 2em; }
    h2 { font-size: 1.75em; }
    h3 { font-size: 1.4em; }
}