body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background-color: #000000; 
    color: #ffffff; 
}

header.container {
    margin-top: 12rem;
  
}

header p {
    font-size: 2rem; /* Makes it slightly larger (18px) than standard text */
    color: #EEEEEE; /* A lighter gray so it doesn't compete with the main H1 title */
    font-weight: 500; /* Makes the font slightly thinner for a more elegant look */
    margin-top: 0; /* Pulls it slightly closer to the H1 above it */
    max-width: 600px; /* Caps the width so it doesn't stretch too far */
}


h1 {
    font-size: 3rem;
    font-weight: 500;
}

/* =========================================
   WORK TIMELINE
   ========================================= */

.work-timeline {
    margin-top: 6rem; /* Creates breathing room between your intro and the timeline */
    max-width: 600px; /* Keeps it aligned with your paragraph width */
}

.timeline-header {
    color: #7A7A7A;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 2rem;
}

.timeline-list {
    list-style: none; /* Removes the default HTML bullet points */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Controls the vertical spacing between each job */
}

/* --- The Layout Engine --- */
.timeline-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes the dates to the right edge */
}

.timeline-left {
    display: flex;
    align-items: center;
}

/* --- Typography & Styling --- */

.timeline-logo {
    width: 28px;
    height: 28px;
    border-radius: 8px; 
    margin-right: 1rem;
    object-fit: cover;
}

.icon-logo {
    background-color: #222222;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Forces the Google Icon to fit perfectly inside the 24px box */
.icon-logo .material-symbols-outlined {
    font-size: 14px; 
    color: #EEEEEE; /* Ensures the icon is a crisp, bright white/gray */
}

.timeline-company {
    color: #EEEEEE;
    font-weight: 600; /* Makes the company name pop out */
    margin-right: 0.8rem;
}

.timeline-role {
    color: #7A7A7A; /* Dark gray so it recedes visually */
}

.timeline-dates {
    color: #7A7A7A;
    /* This ensures numbers like '1' and '0' take up the exact same horizontal space, keeping multiple rows perfectly aligned */
    font-variant-numeric: tabular-nums; 
}

/* =========================================
   WRITING SECTION LINKS
   ========================================= */

.article-link {
    color: #EEEEEE;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #444444; /* Subtle dark gray underline */
    transition: all 0.2s ease;
}

.article-link:hover {
    color: #FFFFFF; /* Brightens the text slightly on hover */
    border-bottom-color: #FFFFFF; /* Brightens the underline on hover */
}

/* =========================================
   HEADER IMAGE
   ========================================= */

.header-image {
    display: block;        /* Forces the image onto its own line */
    width: 8.0rem;         /* Sets the width (60px) */
    height: 8.0rem;        /* Sets the height to match, creating a square */
    object-fit: cover;     /* Crops the image perfectly to fit the square without squishing */
    margin-bottom: 2rem;   /* Adds a clean gap between the image and the H1 below it */
    border-radius: 16px;
}

/* =========================================
   STANDARD LINK TREATMENT
   ========================================= */


.standard-link, 
.standard-link:visited {
    color: #A9A9A9;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.standard-link:hover {
     color: #7A7A7A;
}


/* =========================================
   ICONS & ALIGNMENT
   ========================================= */

/* Use flexbox to perfectly center the text and the icon together */
.icon-link {
    display: inline-flex;
    align-items: center; /* Centers them vertically */
    gap: 0.4rem; /* Adds a nice gap between the email and the icon */
}

/* Adjust the icon itself */
.copy-icon {
    font-size: 1.6rem; /* Scales the icon down to match your paragraph text */
    color: #5C5C5C;
    /* Note: The color of the icon will automatically inherit the color from your .standard-link class! */
    font-variation-settings: 'wght' 700;
}

/* =========================================
   SPECIAL GOOGLEBOOK LINK TREATMENT
   ========================================= */

.googlebook-link {
    background-image: linear-gradient(90deg, #4285F4 0%, #C97BE2 100%);
    
    /* 2. Clip the background strictly to the shape of the text */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 3. Make the text fill transparent so the background shows through */
    -webkit-text-fill-color: transparent;
    color: transparent; 
    
    /* 4. Style adjustments for better visibility */
    font-weight: 700; /* Makes the text bolder so the gradient is easier to see */
    text-decoration: none; /* Removes the underline, which can look messy with a gradient */
    
    /* Smooth transition for the hover effect */
    -webkit-filter: drop-shadow(0px 0px 0px rgba(160, 32, 240, 0)) brightness(1);
    filter: drop-shadow(0px 0px 0px rgba(160, 32, 240, 0)) brightness(1);

    /* FIX 2: Explicitly transition both the standard and webkit versions */
    -webkit-transition: -webkit-filter 0.3s ease;
    transition: filter 0.3s ease;
}

.googlebook-link:hover {
    -webkit-filter: drop-shadow(0px 0px 8px rgba(160, 32, 240, 0.6)) brightness(1.2);
    filter: drop-shadow(0px 0px 8px rgba(160, 32, 240, 0.6)) brightness(1.2);
}

/* =========================================
   SNACKBAR NOTIFICATION
   ========================================= */

#snackbar {
    visibility: hidden; /* Hidden by default */
    min-width: 50px;
    background-color: #222222; /* A dark gray to stand out slightly from your #000 background */
    color: #EEEEEE;
    text-align: center;
    border-radius: 16px;
    padding: 1.5rem;

    /* Fixed positioning keeps it at the bottom of the screen, even if the user scrolls */
    position: fixed; 
    z-index: 100; /* Ensures it stays on top of all other content */
    left: 50%;
    bottom: 40px;
    
    /* Center it horizontally and push it down slightly for the starting position */
    transform: translate(-50%, 20px); 
    opacity: 0;
    
    /* Smoothly animate the fade-in and the slide-up */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

/* This class will be toggled on and off by JavaScript */
#snackbar.show {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0px); /* Slides it up into its final position */
}



/* =========================================
   FOOTER
   ========================================= */

.site-footer {
    margin-top: 5rem;
    text-align: center;
    color: #999999;
    font-size: 1.2rem;
}