/* ------------------ */
/* SITE-WIDE STYLES   */
/* ------------------ */
body {
    font-family: Georgia, serif;
    line-height: 1.6;
    background: #fafafa;
    color: #222;
    max-width: 700px;
    margin: 2rem auto;
    padding: 1rem;
    text-align: center;
}

h1, h2 {
    font-family: Arial, sans-serif;
    margin-bottom: 1rem;
}

/* Navigation */
nav {
    margin-bottom: 2rem;
}

    nav a {
        margin: 0 1rem;
        text-decoration: none;
        color: #333;
        font-weight: bold;
        font-family: Arial, sans-serif;
    }

        nav a:hover {
            text-decoration: underline;
        }

/* Homepage-specific */
body.homepage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    max-width: none;
    margin: 0;
}

    body.homepage h1 {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    body.homepage img {
        max-width: 200px;
        border-radius: 50%;
    }

/* Writing page */
.piece {
    margin-bottom: 1.5rem;
    text-align: left;
}

    .piece h2 {
        font-size: 1.2rem;
        margin-bottom: 0.3rem;
    }

/* ------------------ */
/* ABOUT PAGE STYLES  */
/* ------------------ */
body.about .about-container {
    display: flex;
    align-items: flex-start; /* align top of text with top of image */
    gap: 20px;
    margin-top: 20px;
}

body.about .about-figure {
    display: flex;
    flex-direction: column; /* image on top, caption below */
    align-items: center; /* center caption */
    margin: 0;
}

    body.about .about-figure img {
        max-width: 250px;
        height: auto;
        border-radius: 0; /* square corners */
        display: block; /* prevents extra bottom spacing */
    }

    body.about .about-figure figcaption {
        text-align: center;
        font-size: 0.85rem;
        color: #555;
        margin-top: 5px;
    }

body.about .about-text {
    text-align: left;
    max-width: 600px;
    margin: 0; /* remove extra margins */
}

/* Responsive layout for about page */
@media (max-width: 768px) {
    body.about .about-container {
        flex-direction: column; /* stack image above text */
        align-items: center; /* center content */
    }

    body.about .about-figure img {
        max-width: 80%;
        margin-bottom: 5px;
    }

    body.about .about-text {
        max-width: 90%;
    }
}

/* ------------------ */
/* IMAGES (GENERAL)   */
/* ------------------ */
img {
    max-width: 100%;
    height: auto;
}
/* Nav container layout only */
nav {
    display: flex;
    justify-content: center; /* centers links horizontally on desktop */
    flex-wrap: wrap; /* allows wrapping on small screens */
    gap: 20px; /* spacing between links */
    padding: 0;
    margin: 0;
}

    /* Keep your original link styles */
    nav a {
        /* only add properties you want to preserve */
        text-decoration: none; /* keeps links clean */
        /* remove font-weight or color changes if they are already set elsewhere */
        padding: 8px 12px;
    }

/* ------------------ */
/* TUTORING PAGE STYLES */
/* ------------------ */

/* Container for image + text */
.tutoring-section {
    display: flex;
    gap: 10px; /* controls space between image and text */
    align-items: flex-start;
}

body.tutoring .tutoring-figure {
    display: flex;
    flex-direction: column; /* stack image above caption */
    align-items: center; /* center image and caption horizontally */
    margin: 0; /* remove any default margins */
}

/* Tutoring image */
body.tutoring .tutoring-figure img {
    width: 250px;       /* desktop fixed width */
    height: 250px;      /* desktop fixed height */
    object-fit: cover;  /* crop if needed */
    flex-shrink: 0;     /* prevent shrinking in flex */
    /* margin-right: 0.5rem; */
    max-width: none;    /* override global img max-width to prevent skinny image */
}

/* Tutoring caption */
body.tutoring .tutoring-figure figcaption {
    text-align: center;
    font-size: 0.85rem;
    color: #555;
    margin-top: 5px;
}

/* Tutoring text next to image */
.tutoring-text {
    /*flex: 1; /* take remaining space */
}


@media (max-width: 700px) {
    .tutoring-section {
        flex-direction: column; /* stack image above text */
        align-items: center; /* center image and text */
        gap: 1rem; /* spacing between image and text */
    }

    body.tutoring .tutoring-figure {
        display: flex;
        flex-direction: column;
        align-items: center; /* center everything inside the figure */
        margin: 0; /* remove any leftover margins */
    }

        body.tutoring .tutoring-figure img {
            width: 200px; /* slightly smaller square */
            height: 200px;
            object-fit: cover;
            margin: 0; /* no extra left/right margins */
        }

        body.tutoring .tutoring-figure figcaption {
            text-align: center;
            font-size: 0.85rem;
            color: #555;
            margin-top: 5px;
        }

    .tutoring-text {
        text-align: center; /* text below image is centered */
    }
}