/* Font Face Declarations */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');

@font-face {
    font-family: 'Geist';
    src: url('file:///Users/abdulmir/Library/Fonts/Geist-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('file:///Users/abdulmir/Library/Fonts/GeistMono-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Geist', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #ffffff;
    color: #18181b;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1.5rem;
}

/* Fade-in Animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.container {
    max-width: 620px;
    width: 100%;
    animation: fadeIn 1s ease-out forwards;
    padding-top: 4rem;
    /* Default for home */
}

/* Page Specific Padding */
.page-about {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

/* Back Link (Austin Kennedy Style) */
.back-link {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    /* or Geist Mono? Austin uses text-sm sans-serif usually, but check. Used Geist Mono previously. Let's use DM Sans to match new font request or keep Geist Mono if that was the "back button seen in Austin Kennedy". Austin uses Geist Mono for back button. Let's stick to DM Sans for consistency with "use DMSans". */
    font-size: 0.875rem;
    /* text-sm */
    color: #a1a1aa;
    /* zinc-400 */
    text-decoration: none;
    margin-bottom: 3rem;
    /* mb-12 */
    transition: color 0.2s;
    font-weight: 500;
}

.back-link:hover {
    color: #18181b;
    /* zinc-900 */
}

/* Header Section (Home) */
.header {
    text-align: center;
    margin-bottom: 2rem;
}

.profile-pic {
    width: 72px;
    height: 72px;
    border-radius: 9999px;
    object-fit: cover;
    margin: 0 auto;
    display: block;
}

.name {
    font-family: 'Geist', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: rgb(24, 24, 27);
    line-height: 28px;
    letter-spacing: 0px;
    margin-top: 16px;
    margin-bottom: 0px;
    text-align: center;
}

.subtitle {
    font-family: 'Geist Mono', monospace;
    font-size: 0.875rem;
    color: #71717a;
    line-height: 1.6;
    font-weight: 400;
    font-style: normal;
    margin-top: 0.5rem;
}

.link-red {
    color: #b31d1d;
    text-decoration: none;
    transition: all 0.2s;
}

.link-red:hover {
    text-decoration: underline;
}

/* Separator */
.separator-container {
    padding: 3rem 0;
}

.separator {
    width: 100%;
    height: 1px;
    background-color: #e4e4e7;
    border: none;
}

/* Navigation Links Grid */
.links-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    column-gap: 8rem;
    width: fit-content;
    margin: 0 auto;
    justify-content: center;
}

.links-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.nav-link {
    font-family: 'Geist Mono', monospace;
    font-size: 1rem;
    color: #18181b;
    text-decoration: none;
    transition: color 0.2s;
    display: block;
    font-weight: 400;
}

.nav-link:hover {
    color: #b31d1d;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* About Page Content */
.story-title {
    font-family: 'Geist Mono', monospace;
    font-size: 1.20rem;
    font-weight: 700;
    color: #18181b;
    margin-bottom: 0.9375rem;
}

.section-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #18181b;
    margin-bottom: 0.9375rem;
    /* 15px */
}

.about-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    /* 16px */
    color: #3f3f46;
    /* zinc-700 for better readability */
    line-height: 1.6;
    margin-bottom: 1.25rem;
    /* 20px */
    font-weight: 400;
}

.about-list {
    margin-bottom: 2rem;
    padding-left: 1.25rem;
    font-weight: 400;
}

.about-list-item {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    color: #3f3f46;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-weight: 400;
    position: relative;
    list-style-type: disc;
}

.text-red,
.project-link {
    color: #b31d1d;
    /* Matching live site red exactly */
    text-decoration: none;
    font-weight: 400;
}

/* Specific override for project links within about text to fix bolding issue */
.about-text a.project-link {
    text-decoration: none;
    font-weight: 400 !important;
    /* Force override of generic .about-text a font-weight */
    color: #b31d1d !important;
    /* Force override of generic .about-text a color */
}

.about-text a.project-link:hover {
    text-decoration: underline;
    text-decoration-color: #b31d1d;
    color: #b31d1d;
}

.about-text strong,
.about-text b {
    color: #18181b;
    font-weight: 700;
}

.about-text a {
    color: #18181b;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #d4d4d8;
    /* zinc-300 */
    text-underline-offset: 4px;
    transition: all 0.2s;
}

.about-text a:hover {
    text-decoration-color: #18181b;
}

.signature {
    margin-top: 3rem;
}

.end-pic {
    width: 100%;
    height: auto;
    margin-top: 1rem;
}

/* Responsive Design */
@media (max-width: 640px) {
    .links-grid {
        grid-template-columns: 1fr;
        row-gap: 2rem;
        column-gap: 0;
        width: 100%;
        justify-items: center;
    }

    .links-column {
        align-items: center;
        width: 100%;
    }

    .name {
        font-size: 1.25rem;
    }

    .header {
        margin-bottom: 2rem;
    }

    .separator-container {
        padding: 2rem 0;
    }

    .page-about {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .story-title {
        font-size: 2.25rem;
        margin-bottom: 2rem;
    }
}