/* Custom Fonts */
@font-face {
    font-family: 'NatinatHandwriting'; /* This is the name you will use to call it later */
    src: url('../Natinatstudio_Font.ttf') format('truetype'); /* Make sure this exactly matches your file name! */
    font-weight: normal;
    font-style: normal;
}

/* Single Column "Artsy" Layout */
.about-layout {
    max-width: 650px; /* Constrains the width to make it a distinct 'column' */
    margin: 0 auto;
    padding: 0rem 5vw 6rem 5vw;
    display: flex;
    flex-direction: column; /* Forces vertical stacking on ALL devices */
    align-items: center;
    text-align: center; /* Centers all the text */
    gap: 2rem;
}

/* Image Styling */
.about-image-wrapper {
    width: 100%;
    max-width: 450px; /* Keeps the image from getting too huge on desktop */
}

.about-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 2px; 
}

/* Typography & Text Layout */
.about-text {
    font-family: 'NatinatHandwriting', sans-serif;
    font-size: 4rem !important; /* Makes the text large and artsy */
    color: #000;
    width: 100%;
    max-width: 450px; /* This forces the text to match the image width perfectly */
}

.about-text h2 {
    font-size: 4.8rem;
    font-weight: normal;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
    white-space: nowrap !important; /* THE FIX: Forbids the name from breaking onto two lines */
}

.about-text p {
    font-family: "Century Gothic", sans-serif !important; /* Forces the standard font */
    font-size: 1rem !important; /* Shrunk down to a normal, readable size */
    line-height: 2; /* Reduces the line height to make the text more compact */
    margin-bottom: 0rem;
    color: #333;
}

/* Contact Section */
.contact-info {
    margin-top: 2rem;
    padding-top: 2rem;
}

.contact-info h3 {
    font-family: "Century Gothic", sans-serif !important; /* Forces the standard font */
    font-size: 1rem !important; /* Shrunk down to a normal, readable size */
    font-weight: bold; /* Adds a little visual weight to anchor the section */
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    letter-spacing: 2px; /* Gives it a nice, airy editorial look */
}

.email-link {
    display: inline-block;
    font-family: 'Century Gothic', serif; 
    font-style: italic;
    font-size: 1rem;
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid transparent; /* THE FIX: Makes the line invisible by default */
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.email-link:hover {
    color: #000000; /* Fades the text slightly */
    border-color: #000000; /* THE FIX: Makes the line visible on hover! */
}

/* =========================================
   MOBILE RESPONSIVE FIXES (ABOUT PAGE)
========================================= */
@media (max-width: 1024px) {
    
    /* 1. Allow the name to wrap and crush the spacing */
    .about-text h2 {
        font-size: 4.2rem !important; 
        white-space: normal !important; /* THE FIX: Allows the name to drop to a second line */
        line-height: 0.6 !important; /* Crushes the gap between the two lines of the name */
        margin-bottom: 1rem !important; /* Pulls the bio text closer to the name */
    }

    

    /* 3. Equal padding to perfectly center everything! */
    .about-layout {
        padding-left: 5vw !important; 
        padding-right: 5vw !important;
    }
    
    /* 4. Keep the image proportional */
    .about-image-wrapper {
        max-width: 100% !important;
    }
}